/* Shared primitives load once from the base entrypoint on every surface. */

/* ============================================================================
   COMPONENTS.CSS  —  @layer app.components  —  the shared widgets.

   Everything here is used by more than one screen: navigation, cards, fields,
   alerts, badges, avatars, tables. If a rule is only ever true on one feature's
   page it belongs in modules.css; if it is the skeleton a page is poured into
   it belongs in layouts.css.

   Ownership: a bare class declared here is owned here. Later layers may restyle
   it, but only from inside their own scope (`body:has(.adm-nav) .card`), never
   by re-declaring the bare name. `node scripts/check-css.mjs` enforces that.
   ==========================================================================*/

@layer app.components {

/* ============================================================================
   01. NAVIGATION & APPLICATION HEADER
   ========================================================================== */

.site-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  inline-size: 100%;
  block-size: var(--nav-h);
  margin: 0;
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-nav > nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  block-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.app-header-start {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-inline-size: 0;
}

.app-header-end {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  margin-inline-start: auto;
}

/* ---- Site Mark / Brand ---- */
.site-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--mark-size);
  block-size: var(--mark-size);
  background: var(--grad-brand);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  text-decoration: none;
}

.site-mark-glyph {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  background: var(--fg-on-brand);
  -webkit-mask: var(--icon-cards) center / contain no-repeat;
  mask: var(--icon-cards) center / contain no-repeat;
}

.site-mark[data-mark="image"] {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.site-mark-img {
  background: none;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.site-mark:hover {
  opacity: 0.9;
}

.site-mark[aria-current="page"] {
  opacity: 1;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  display: flex;
  align-items: center;
}

.site-nav li::marker { content: ""; }

/* ---- Navigation Items / Links ---- */
.site-nav a,
.site-nav button,
.site-nav .nav-here,
.side-nav li a,
.side-nav li button,
.side-nav li .nav-here {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--nav-item-h);
  padding: var(--sp-1) var(--sp-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  box-shadow: none;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-flat);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* ---- Nav Icons ---- */
.nav-icon {
  flex: none;
  inline-size: var(--nav-icon-size);
  block-size: var(--nav-icon-size);
  background: currentColor;
  -webkit-mask: var(--nav-glyph) center / contain no-repeat;
  mask: var(--nav-glyph) center / contain no-repeat;
}
.nav-icon[data-icon="cards"] { --nav-glyph: var(--icon-cards); }
.nav-icon[data-icon="places"] { --nav-glyph: var(--icon-place); }
.nav-icon[data-icon="settings"] { --nav-glyph: var(--icon-settings); }
.nav-icon[data-icon="signout"] { --nav-glyph: var(--icon-signout); }
.nav-icon[data-icon="signin"] { --nav-glyph: var(--icon-signin); }
.nav-icon[data-icon="user"] { --nav-glyph: var(--icon-user); }
.nav-icon[data-icon="company"] { --nav-glyph: var(--icon-company); }
.nav-icon[data-icon="dashboard"] { --nav-glyph: var(--icon-dashboard); }
.nav-icon[data-icon="mail"] { --nav-glyph: var(--icon-mail); }
.nav-icon[data-icon="till"] { --nav-glyph: var(--icon-till); }
.nav-icon[data-icon="check"] { --nav-glyph: var(--icon-fact-check); }
.nav-icon[data-icon="verified"] { --nav-glyph: var(--icon-verified); }
.nav-icon[data-icon="history"] { --nav-glyph: var(--icon-history); }
.nav-icon[data-icon="devices"] { --nav-glyph: var(--icon-devices); }
.nav-icon[data-icon="download"] { --nav-glyph: var(--icon-download); }
.nav-icon[data-icon="trash"] { --nav-glyph: var(--icon-trash); }
.nav-icon[data-icon="products"] { --nav-glyph: var(--icon-products); }
.nav-icon[data-icon="categories"] { --nav-glyph: var(--icon-categories); }
.nav-icon[data-icon="taxes"] { --nav-glyph: var(--icon-taxes); }
.nav-icon[data-icon="stock"] { --nav-glyph: var(--icon-stock); }

.nav-initial {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--nav-icon-size);
  block-size: var(--nav-icon-size);
  border-radius: var(--r-full);
  background: var(--red-100);
  color: var(--brand-fg);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  line-height: 1;
}

/* Nav Item Hover & Active States */
.site-nav a:not([data-cta]):hover,
.site-nav a:not([data-cta]):focus-visible,
.site-nav button:hover,
.site-nav button:focus-visible,
.side-nav li a:hover,
.side-nav li a:focus-visible,
.side-nav li button:hover,
.side-nav li button:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--border-subtle);
  color: var(--fg);
  text-decoration: none;
}

.site-nav a:not([data-cta]):active,
.site-nav button:active,
.side-nav li a:active,
.side-nav li button:active {
  background: var(--red-100);
  color: var(--brand-fg);
}

.site-nav .nav-here,
.site-nav a[aria-current="page"],
.app-header .app-pill.nav-here,
.app-header .app-pill[aria-current="page"] {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--brand-fg);
  font-weight: var(--fw-semi);
  cursor: default;
}

.site-nav .nav-here > .nav-icon,
.site-nav a[aria-current="page"] > .nav-icon,
.app-header .app-pill.nav-here > .nav-icon,
.app-header .app-pill[aria-current="page"] > .nav-icon {
  color: var(--brand);
}

.side-nav li a[data-state="wait"] { color: var(--fg-muted); }
.nav-note {
  margin-inline-start: auto;
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
  white-space: nowrap;
}

.nav-group { position: relative; }
.nav-group:has(> .nav-sub-toggle) > :is(a, .nav-group-label) { padding-inline-end: 2.4rem; }

.side-nav .nav-group-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 2.75rem;
  padding: var(--sp-2) var(--sp-3);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-flat);
  white-space: nowrap;
}

.side-nav > ul > li > .nav-sub {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  margin: var(--sp-1) 0 0 var(--sp-4);
  padding: 0 0 0 var(--sp-2);
  border-inline-start: 1px solid var(--border);
  list-style: none;
}
.side-nav .nav-sub li { margin: 0; padding-inline-start: 0; list-style: none; }
.side-nav .nav-sub li::marker { content: ""; }
.side-nav .nav-sub li a {
  min-block-size: var(--nav-item-h);
  padding-block: var(--sp-1);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}
.side-nav .nav-sub li a:hover,
.side-nav .nav-sub li a:focus-visible {
  background: var(--red-50);
  color: var(--brand-fg);
}
.side-nav .nav-sub li a:active { background: var(--red-100); }
.side-nav .nav-sub li a[aria-current="page"],
.side-nav .nav-sub li .nav-here { color: var(--brand-fg); }

.side-nav .nav-sub-toggle {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .2rem;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  min-block-size: 0;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  box-shadow: none;
  color: var(--fg-subtle);
  cursor: pointer;
}
.side-nav .nav-sub-toggle::before {
  content: "";
  inline-size: .95rem;
  block-size: .95rem;
  background: currentColor;
  -webkit-mask: var(--icon-chevron) no-repeat center / contain;
  mask: var(--icon-chevron) no-repeat center / contain;
}
.nav-group[data-collapsed="true"] .nav-sub-toggle::before { transform: rotate(-90deg); }
.nav-group[data-collapsed="true"] > .nav-sub { display: none; }
.side-nav .nav-sub-toggle:hover,
.side-nav .nav-sub-toggle:focus-visible {
  background: var(--red-50);
  border-color: var(--border);
  color: var(--brand-fg);
}
.side-nav .nav-sub-toggle:active {
  background: var(--red-100);
  color: var(--brand-fg);
}

.side-nav li[data-foot="true"] { margin-block-start: auto; }

.side-nav li .nav-here {
  position: relative;
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--brand-fg);
  font-weight: var(--fw-semi);
  cursor: default;
}
.side-nav li .nav-here > .nav-icon { color: var(--brand); }
.side-nav li .nav-here::before {
  content: "";
  position: absolute;
  inset-block: 18%;
  inset-inline-start: 0;
  inline-size: 4px;
  border-radius: var(--r-full);
  background: var(--brand);
}

.nav-group[data-holds="true"] > a,
.nav-group[data-holds="true"] > .nav-group-label,
.side-nav .nav-sub li a[data-holds="true"],
.site-nav a[data-holds="true"] { color: var(--fg); }
.nav-group[data-holds="true"] > a > .nav-icon,
.nav-group[data-holds="true"] > .nav-group-label > .nav-icon,
.side-nav .nav-sub li a[data-holds="true"] > .nav-icon,
.site-nav a[data-holds="true"] > .nav-icon { color: var(--brand); }

/* The one filled button in a bar of quiet ones. It used to carry six
   !importants, because `.app-pill.btn-cta` (0,2,0) ties with `.app-header
   .app-pill` (0,2,0) further down this file and loses on source order. The
   third class wins it honestly — and !important in a layered stack is a
   trapdoor, not an escape hatch: it inverts the layer order. */
.site-nav a[data-cta],
.site-nav .app-pill.btn-cta {
  background: var(--brand);
  color: var(--fg-on-brand);
  border-color: var(--brand);
  font-weight: var(--fw-semi);
}
.site-nav a[data-cta]:hover,
.site-nav .app-pill.btn-cta:hover {
  background: var(--brand-hover);
  color: var(--fg-on-brand);
}
.site-nav form { display: inline-flex; margin: 0; }
.site-nav-action {
  margin-inline-start: var(--sp-2);
  padding-inline-start: var(--sp-3);
  border-inline-start: 1px solid var(--border);
}

.site-nav[data-mark="none"] > nav {
  justify-content: flex-end;
  max-inline-size: none;
  padding-inline: var(--sp-4);
}

.site-nav a:has(.nav-dot),
.site-nav button:has(.nav-dot) { position: relative; }
.nav-dot {
  position: absolute;
  inset-block-start: 0.35rem;
  inset-inline-end: 0.35rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background: var(--brand);
  border-radius: var(--r-full);
  box-shadow: 0 0 0 2px var(--bg);
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--r-full);
  background: var(--red-100);
  color: var(--red-800);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-inline-start: auto;
}

/* ---- User Account Menu & Dropdown Panel ---- */
.app-menu {
  position: relative;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.app-menu > summary { list-style: none; }
.app-menu > summary::-webkit-details-marker { display: none; }

.app-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--nav-item-h);
  padding: 0.2rem 0.6rem 0.2rem 0.35rem;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.app-account-trigger::before { content: none; }

.app-account-trigger:hover,
.app-account-trigger:focus-visible,
.app-menu[open] .app-account-trigger {
  background: var(--bg-subtle);
  border-color: var(--border);
  box-shadow: var(--sh-xs);
}

.app-menu-avatar {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--r-full);
  background: var(--red-100);
  border: 1px solid var(--red-200);
  color: var(--brand-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  overflow: hidden;
  flex: none;
}

.app-menu-avatar-lg {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  font-size: var(--fs-sm);
}

.app-menu-avatar-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.app-menu-avatar-txt {
  line-height: 1;
}

.app-menu-email-preview {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg);
  max-inline-size: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-menu-chevron {
  inline-size: 0.7rem;
  block-size: 0.7rem;
  background: currentColor;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  opacity: 0.65;
}
.app-menu[open] .app-menu-chevron {
  transform: rotate(180deg);
}

/* Dropdown Panel */
.app-menu-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-2));
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  min-inline-size: 16rem;
  max-inline-size: 20rem;
  padding: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  z-index: var(--z-header);
}

.app-menu-user-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
}

.app-menu-user-info {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1;
}

.app-menu-user-label {
  font-size: var(--fs-2xs);
  color: var(--fg-subtle);
  font-weight: var(--fw-normal);
  line-height: var(--lh-tight);
}

.app-menu-user-email {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: var(--lh-snug);
}

.app-menu-divider {
  block-size: 1px;
  border: 0;
  background: var(--border-subtle);
  margin: var(--sp-1) 0;
}

.app-menu-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
}

.app-menu-section-title {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.app-menu-panel a,
.app-menu-panel button,
.app-menu-panel .app-menu-here {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: start;
  background: transparent;
  cursor: pointer;
}

.app-menu-panel a:hover,
.app-menu-panel a:focus-visible,
.app-menu-panel button:hover,
.app-menu-panel button:focus-visible {
  background: var(--bg-subtle);
  color: var(--brand-fg);
}

.app-menu-panel a:hover .nav-icon,
.app-menu-panel button:hover .nav-icon {
  color: var(--brand);
}

.app-menu-panel a[aria-current="page"],
.app-menu-panel .app-menu-here {
  background: var(--red-50);
  color: var(--brand-fg);
  font-weight: var(--fw-semi);
}

.app-menu-panel a[aria-current="page"] .nav-icon,
.app-menu-panel .app-menu-here .nav-icon {
  color: var(--brand);
}

.app-menu-signout-form {
  display: flex;
  margin: 0;
}

/* Scoped to the panel so it outweighs `.app-menu-panel button` (0,2,0) above
   on class count rather than on !important. */
.app-menu-panel .app-menu-signout-btn { color: var(--danger); }

.app-menu-panel .app-menu-signout-btn:hover,
.app-menu-panel .app-menu-signout-btn:focus-visible {
  background: var(--danger-bg);
  color: var(--danger);
}

.app-menu-panel .app-menu-signout-btn .nav-icon { color: var(--danger); }

/* App Header & Row */
.app-header.site-nav > nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-row {
  min-inline-size: 0;
  align-items: center;
  gap: var(--sp-1);
}

.app-row > li {
  display: flex;
}

.app-header .app-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--nav-item-h);
  padding: var(--sp-1) var(--sp-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-flat);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.app-header .app-pill:hover,
.app-header .app-pill:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--border-subtle);
  color: var(--fg);
}

.app-header .app-pill[aria-current="page"],
.app-header .app-pill.nav-here {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--brand-fg);
  font-weight: var(--fw-semi);
  cursor: default;
}

.app-header .app-pill[aria-current="page"] > .nav-icon,
.app-header .app-pill.nav-here > .nav-icon {
  color: var(--brand);
}

.app-header .app-pill[data-holds="true"] {
  color: var(--fg);
}

.app-header .app-pill[data-holds="true"] > .nav-icon {
  color: var(--brand);
}

.side-nav {
  position: sticky;
  inset-block-start: 0;

  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  block-size: 100vh;
  block-size: 100dvh;
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
  background: var(--glass-bar-bg);
  border-inline-end: 1px solid var(--glass-border);
  box-shadow: var(--shadow-bar);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.side-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.side-nav > ul {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.side-nav li { margin: 0; padding-inline-start: 0; list-style: none; }
.side-nav li::marker { content: ""; }

.side-nav li a,
.side-nav li button,
.side-nav li .nav-here { inline-size: 100%; justify-content: flex-start; }
.side-nav li form { display: flex; margin: 0; }

.side-nav .site-nav-action {
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--glass-border);

  border-inline-start: 0;
}

.side-nav li a[data-last-place="true"] { position: relative; }
.side-nav li a[data-last-place="true"]::before {
  content: "";
  position: absolute;
  inset-block: 25%;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--brand) 50%, transparent);
}

html[data-side="rail"] .nav-label,
html[data-side="rail"] .nav-note {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
html[data-side="rail"] .side-nav { padding-inline: var(--sp-2); }

html[data-side="rail"] .side-head { flex-direction: column; gap: var(--sp-3); }
html[data-side="rail"] .side-nav li a,
html[data-side="rail"] .side-nav li button,
html[data-side="rail"] .side-nav li .nav-here { justify-content: center; padding-inline: 0; }

html[data-side="rail"] .side-nav > ul > li > .nav-sub {
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
}

html[data-side="rail"] .side-nav .nav-sub-toggle { display: none; }
html[data-side="rail"] .nav-group > :is(a, .nav-group-label) { padding-inline-end: var(--sp-3); }

html[data-side="rail"] .side-nav .nav-group-label {
  justify-content: center;
  padding-inline: 0;
}

html[data-side="rail"] .side-nav li .nav-here::before { display: none; }

html[data-side="rail"] .side-nav li a[data-last-place="true"]::before {
  inset-block: auto;
  inset-block-end: 1px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 4px;
  block-size: 4px;
}

.side-head .side-toggle {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--nav-item-h);
  block-size: var(--nav-item-h);
  min-block-size: 0;
  padding: 0;
  background: color-mix(in srgb, var(--red-50) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-200) 74%, transparent);
  border-radius: var(--r-full);
  box-shadow: none;
  color: var(--brand-fg);
  cursor: pointer;
}
.side-head .side-toggle::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  background: currentColor;
  -webkit-mask: var(--icon-side-collapse) no-repeat center / contain;
  mask: var(--icon-side-collapse) no-repeat center / contain;
}

html[data-side="rail"] .side-head .side-toggle::before {
  -webkit-mask-image: var(--icon-side-expand);
  mask-image: var(--icon-side-expand);
}
.side-head .side-toggle:hover {
  background: color-mix(in srgb, var(--red-100) 88%, transparent);
  border-color: color-mix(in srgb, var(--red-300) 78%, transparent);
}

.crumbs {
  margin-block-end: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
}
.crumbs li::marker { content: ""; }
.crumbs li + li::before {
  content: "/";
  color: var(--fg-subtle);
}
.crumbs a { padding: 0; color: var(--fg-muted); }
.crumbs a:hover { color: var(--link-hover); }
.crumbs [aria-current="page"] { color: var(--fg); }

.auth-card,
.card {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--auth-w);
  padding: var(--sp-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}
.auth-card {
  inline-size: min(100%, var(--auth-w));
  max-inline-size: none;
}
.card { max-inline-size: 26rem; }

/* The delete/disconnect card. Lives here with the rest of .card rather than in
   modules.css, where it used to re-declare a class it did not own. */
.card[data-tone="danger"] { border-color: color-mix(in srgb, var(--danger) 38%, transparent); }

.auth-card::before,
.card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 14%;
  block-size: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--gray-0) 92%, transparent),
    transparent
  );
}
.auth-card > :first-child,
.card > :first-child { margin-block-start: 0; }
.auth-card > :last-child,
.card > :last-child { margin-block-end: 0; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.auth-form > * { margin-block: 0; }
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
}
.field > label { margin: 0; }

.auth-form .field > input:not([type="checkbox"]):not([type="radio"]),

.auth-form .field > .combobox > input,
.auth-form .field > textarea {
  background: var(--glass-field-bg);
  border-color: var(--glass-field-border);
}
.auth-form .field > input:not([type="checkbox"]):not([type="radio"]),
.auth-form .field > .combobox > input {
  block-size: var(--control-h-lg);
  min-block-size: var(--control-h-lg);
  line-height: calc(var(--control-h-lg) - 2px);
}
.auth-form .field > input:not([type="checkbox"]):not([type="radio"]):hover,
.auth-form .field > .combobox > input:hover,
.auth-form .field > textarea:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--field-border));
}
.auth-form .field > input:not([type="checkbox"]):not([type="radio"]):focus,
.auth-form .field > .combobox > input:focus,
.auth-form .field > textarea:focus { background: var(--bg); }

.field-group {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field-group > legend {
  text-align: center;
  margin-block-end: var(--sp-3);
  padding: 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.field-group > .field + .field { margin-block-start: var(--sp-3); }
.phone-field-input {
  display: grid;
  grid-template-columns: minmax(9rem, .95fr) minmax(8rem, 1.05fr);
  align-items: start;
  gap: var(--sp-2);
  min-inline-size: 0;
}
.phone-field-input > .field {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
}
.phone-field-input > .field[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 14%, transparent);
}
.phone-field-error {
  display: block;
  margin-block-start: var(--sp-1);
  color: var(--danger);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.phone-field-error[hidden] { display: none; }
@media (max-width: 32rem) {
  .phone-field-input { grid-template-columns: minmax(7.5rem, .9fr) minmax(6.5rem, 1.1fr); }
}

/* Shared select() controls use the Popover API so nested forms and overflow
   containers cannot clip the menu. ui.js owns viewport-clamped fixed
   positioning so every supported browser uses the same flip/clamp behavior. */
.combobox:has(> .combo-anchor) { anchor-scope: --combo-anchor; }
.combo-anchor {
  position: relative;
  inline-size: 100%;
  min-block-size: var(--control-h);
  padding-inline-end: 2.4rem;
  text-align: start;
  cursor: pointer;
}
.combo-anchor::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: .8rem;
  inline-size: 1rem;
  block-size: 1rem;
  margin-block: auto;
  background: var(--i-chevron-down) center / contain no-repeat;
  pointer-events: none;
  transition: transform 140ms ease;
}
.combo-anchor[aria-expanded="true"]::after { transform: rotate(180deg); }
.combo-anchor[aria-invalid="true"] { border-color: var(--danger); }
.combo-panel {
  position: fixed;
  inset: auto;
  z-index: var(--z-dropdown);
  display: none;
  inline-size: min(22rem, max(100%, calc(100vw - 1.5rem)));
  max-inline-size: calc(100vw - 1.5rem);
  max-block-size: min(22rem, calc(100vh - 1.5rem));
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--sp-2);
  background: var(--glass-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  color: var(--fg);
}
.combo-panel:popover-open {
  display: grid;
  gap: var(--sp-2);
}
.combo-panel > .field {
  inline-size: 100%;
  margin: 0;
}
.combo-panel [role="listbox"] {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}
.combo-option {
  display: block;
  inline-size: 100%;
  min-block-size: 2.35rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.combo-option[aria-selected="true"],
.combo-option:hover {
  background: var(--bg-subtle);
  color: var(--fg);
}
.combo-option:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.combo-empty {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
}
.field-choice {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-2);
}
.field-choice > input {
  flex: none;
  margin-block-start: .2em;
}
.field-choice > label {
  font-weight: var(--fw-normal);
  line-height: var(--lh-snug);
}

.form-note {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.inline-form { margin: 0 0 var(--sp-2); }

.combobox {
  position: relative;
  display: block;
  min-inline-size: 0;
}
.combobox-input {
  inline-size: 100%;
  padding-inline-end: 2.25rem;
}

.combobox:has(> .combobox-input)::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: .8rem;
  inline-size: 1rem;
  margin-block: auto;
  block-size: 1rem;
  background: var(--i-chevron-down) center / contain no-repeat;
  pointer-events: none;
}
.combobox:has(> .combobox-input[aria-expanded="true"])::after { transform: rotate(180deg); }
.combobox:has(> .combobox-input:disabled)::after { opacity: .45; }
.combobox-list {
  position: absolute;
  z-index: var(--z-dropdown);
  inset-inline: 0;
  inset-block-start: calc(100% + 4px);
  max-block-size: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.combobox-option {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.combobox-option[data-active="true"],
.combobox-option:hover { background: var(--bg-subtle); }

.combobox-empty {
  padding: var(--sp-2) var(--sp-3);
  color: var(--fg-subtle);
}

.phone-field {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}
.phone-field > .combobox {
  flex: 0 1 12em;
  min-inline-size: 8em;
}
.phone-field > input[type="tel"] {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.phone-field > .combobox > select,
.phone-field > .combobox > .combobox-input {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.auth-phone-control {
  display: grid;
  grid-template-columns: minmax(8.5rem, .9fr) minmax(8rem, 1.1fr);
  align-items: start;
  gap: var(--sp-2);
}
.auth-phone-number { display: grid; min-inline-size: 0; gap: var(--sp-1); }
.auth-phone-number .field-hint { margin: 0; }
.auth-phone-number .field-error { color: var(--danger); font-size: var(--fs-xs); }
.auth-phone-number .field-error[hidden] { display: none; }
@media (max-width: 30rem) {
  .auth-phone-control { grid-template-columns: minmax(7.25rem, .9fr) minmax(6.5rem, 1.1fr); }
}

.notice {
  display: block;
  margin-block-end: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.notice.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 28%, var(--bg)); color: var(--info); }
.notice.success { background: var(--success-bg); border-color: var(--success-bd, var(--border)); color: var(--success); }
.notice.warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 28%, var(--bg)); color: var(--warning); }
.notice.error,
.notice.danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 28%, var(--bg)); color: var(--danger); }

.toast {
  position: fixed;
  inset-inline-end: var(--sp-5);
  inset-block-end: var(--sp-5);
  z-index: var(--z-toast);
  max-inline-size: min(420px, calc(100vw - 2 * var(--sp-4)));
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.toast[data-tone="success"] { background: var(--success-bg); border-color: var(--success-bd, var(--border)); color: var(--success); }
.toast[data-tone="warning"] { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 28%, var(--bg)); color: var(--warning); }
.toast[data-tone="danger"],
.toast[data-tone="error"] { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 28%, var(--bg)); color: var(--danger); }
.toast[data-tone="info"] { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 28%, var(--bg)); color: var(--info); }
/* Shared app statuses match the Workspace notification center. The dismiss
   control never animates or becomes an activity spinner. */
.toast {
  --app-status-tone: var(--info);
  --app-status-soft: var(--info-bg);
  --app-status-border: color-mix(in srgb, var(--info) 28%, var(--border));
  inset-block-start: max(.85rem, env(safe-area-inset-top));
  inset-block-end: auto;
  inset-inline-end: max(.85rem, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  inline-size: min(27rem, calc(100vw - 1.7rem));
  max-inline-size: none;
  min-block-size: 3.25rem;
  padding: .75rem .7rem .75rem .85rem;
  border: 1px solid var(--app-status-border);
  border-inline-start-width: 3px;
  background: color-mix(in srgb, var(--app-status-soft) 88%, var(--bg));
  color: var(--fg);
  box-shadow: var(--sh-md);
}
.toast[hidden] { display: none; }
.toast[data-tone="success"], .toast[data-tone="ok"] {
  --app-status-tone: var(--success); --app-status-soft: var(--success-bg); --app-status-border: var(--success-bd, var(--border));
}
.toast[data-tone="warning"], .toast[data-tone="warn"] {
  --app-status-tone: var(--warning); --app-status-soft: var(--warning-bg);
  --app-status-border: color-mix(in srgb, var(--warning) 28%, var(--border));
}
.toast[data-tone="error"], .toast[data-tone="danger"] {
  --app-status-tone: var(--danger); --app-status-soft: var(--danger-bg);
  --app-status-border: color-mix(in srgb, var(--danger) 28%, var(--border));
}
.toast[data-tone] {
  background: color-mix(in srgb, var(--app-status-soft) 88%, var(--bg));
  border-color: var(--app-status-border);
  color: var(--fg);
}
.toast-icon {
  display: grid; place-items: center; flex: none;
  inline-size: 1.8rem; block-size: 1.8rem; margin-block-start: .05rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--app-status-tone) 10%, transparent);
  color: var(--app-status-tone); font-weight: 800;
}
.toast[data-tone="loading"] .toast-icon { animation: app-status-spin 1.2s linear infinite; }
@keyframes app-status-spin { to { transform: rotate(360deg); } }
.toast-copy { display: grid; gap: .15rem; flex: 1 1 auto; min-inline-size: 0; padding-block-start: .05rem; }
.toast-title { font-size: var(--fs-xs); font-weight: 800; line-height: 1.25; color: var(--app-status-tone); }
.toast-message { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--fg); overflow-wrap: anywhere; }
.toast-close {
  display: grid; place-items: center; flex: none;
  inline-size: 1.8rem; block-size: 1.8rem; min-block-size: 0;
  margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--app-status-tone);
  cursor: pointer; font-size: 1.35rem; line-height: 1;
}
.toast-close:hover { background: color-mix(in srgb, var(--app-status-tone) 10%, transparent); }
.toast-close:focus-visible { outline: 2px solid var(--app-status-tone); outline-offset: 2px; }
.toast-close::before, .toast-close::after { content: none !important; animation: none !important; }
body:is([data-surface="platform-auth"],[data-surface="company-buyer-auth"]) .auth-feedback.toast:not([hidden]) {
  inline-size: min(27rem, calc(100vw - 1.7rem)); margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .toast[data-tone="loading"] .toast-icon { animation: none; }
}


.alert {
  position: fixed;
  inset-block-start: var(--sp-4);
  inset-inline: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: calc(100% - 2 * var(--sp-4));
  max-inline-size: var(--auth-w);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);

  background: color-mix(in srgb, var(--red-50) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-300) 48%, transparent);
  border-radius: var(--r-xl);
  box-shadow: none;
  color: var(--red-900);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

body:has(> .app-header) .alert { inset-block-start: calc(var(--nav-h) + var(--sp-3)); }

body:has(.side-nav) .alert {
  inset-inline-start: var(--side-w);

  inline-size: calc(100vw - var(--side-w) - 2 * var(--sp-4));
}
.alert::before {
  content: "";
  margin-top: -2px;
  flex: none;
  inline-size: var(--nav-icon-size);
  block-size: var(--nav-icon-size);
  background: currentColor;
  -webkit-mask: var(--i-warn) no-repeat center / contain;
  mask: var(--i-warn) no-repeat center / contain;
}
.alert-text {
  margin-top: 1px;
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.alert-ring {
  position: absolute;
  inline-size: calc(100% + 8px);
  block-size: calc(100% + 8px);

  transform: rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}
.alert-ring > circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;

  stroke-dasharray: 100.53;

  stroke-dashoffset: 0;
}

.alert-ring > path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.alert-dismiss {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  min-block-size: 0;
  margin: -1px -1px 0 0;
  padding: 0;
  background: color-mix(in srgb, var(--gray-0) 38%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-300) 38%, transparent);
  border-radius: var(--r-full);
  box-shadow: none;
  color: var(--red-700);
  cursor: pointer;
}
.alert-dismiss:hover {
  background: color-mix(in srgb, var(--red-200) 72%, transparent);
  border-color: color-mix(in srgb, var(--red-400) 55%, transparent);
  color: var(--red-800);
}
.alert-dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring-color);
}

/* app.js sets data-dismissed, then removes the node 240ms later. The fade it
   was waiting for cannot run (base.css §19 switches motion off for everything),
   so this is what "dismissed" looks like: gone, immediately. */
.alert[data-dismissed] { opacity: 0; }

.alert[data-tone="ok"] {
  background: color-mix(in srgb, var(--success-bg) 82%, transparent);
  border-color: color-mix(in srgb, var(--success) 34%, transparent);
  color: var(--success);
}
.alert[data-tone="ok"]::before {
  -webkit-mask-image: var(--i-check);
  mask-image: var(--i-check);
}
.alert[data-tone="info"] {
  background: color-mix(in srgb, var(--info-bg) 82%, transparent);
  border-color: color-mix(in srgb, var(--info) 34%, transparent);
  color: var(--info);
}
.alert[data-tone="info"]::before {
  -webkit-mask-image: var(--i-info);
  mask-image: var(--i-info);
}

.alert[data-tone="ok"] .alert-dismiss,
.alert[data-tone="info"] .alert-dismiss {
  background: color-mix(in srgb, var(--gray-0) 42%, transparent);
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  color: inherit;
}
.alert[data-tone="ok"] .alert-dismiss:hover,
.alert[data-tone="info"] .alert-dismiss:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: color-mix(in srgb, currentColor 52%, transparent);
  color: inherit;
}

.auth-form .field > input:-webkit-autofill,
.auth-form .field-password > input:-webkit-autofill,
.lookup-form input:-webkit-autofill,
.code-field:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  box-shadow: 0 0 0 100px var(--field-fill-solid) inset;
}
.auth-form .field > input:autofill,
.auth-form .field-password > input:autofill,
.lookup-form input:autofill,
.code-field:autofill {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  box-shadow: 0 0 0 100px var(--field-fill-solid) inset;
}

.auth-form .field > input:-webkit-autofill { border-color: var(--glass-field-border); }
.auth-form .field > input:autofill { border-color: var(--glass-field-border); }
.auth-form .field > input:-webkit-autofill:focus { border-color: var(--brand); }
.auth-form .field > input:autofill:focus { border-color: var(--brand); }

.field-password {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline-end: var(--sp-1);
  background: var(--glass-field-bg);
  border: 1px solid var(--glass-field-border);
  border-radius: var(--field-radius);
  box-shadow: var(--sh-inset);
}
.field-password:hover:not(:has(input:disabled)) { border-color: var(--red-300); }

.field-password:focus-within {
  border-color: var(--brand);
  background: var(--bg);
  box-shadow: var(--ring);
}
.field-password:has(input:user-invalid) { border-color: var(--red-600); }

.auth-form .field-password > input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: var(--control-h-lg);
  min-block-size: var(--control-h-lg);
  line-height: calc(var(--control-h-lg) - 2px);
  background: none;
  border: 0;
  border-radius: var(--field-radius) 0 0 var(--field-radius);
  box-shadow: none;
}
.auth-form .field-password > input:focus { box-shadow: none; background: none; }

.auth-form .field-password > input:autofill:focus {
  box-shadow: 0 0 0 100px var(--field-fill-solid) inset;
}
.auth-form .field-password > input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--field-fill-solid) inset;
}

.reveal {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.85rem;
  block-size: 1.85rem;
  min-block-size: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: none;
  cursor: pointer;
}
/* Legacy DOM auth controls create path-only SVGs; give the eye its own
   vector geometry rather than inheriting the browser's solid black fill. */
.reveal > svg.icon {
  display: block;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.reveal:not(:has(.icon))::before {
  content: "";
  inline-size: 1.1rem;
  block-size: 1.1rem;
  background: var(--i-eye) no-repeat center / contain;
}
.reveal[aria-pressed="true"]:not(:has(.icon))::before { background-image: var(--i-eye-off); }
.reveal:hover { background: var(--red-50); }
.reveal:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.field-optional {
  font-weight: 400;
  font-size: var(--fs-2xs);

  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field-hint {
  display: block;
  margin-block-start: var(--sp-1);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.field > .field-hint { margin-block-start: 0; }
.field-hint[data-tone="warning"] { color: var(--warning); }

.strength {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-block-start: var(--sp-2);
}
.strength-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.strength-item::before {
  content: "";
  flex: none;
  inline-size: .45rem;
  block-size: .45rem;
  border-radius: var(--r-full);
  background: var(--border-strong);
}
.strength-item[data-met="true"] { color: var(--success); }
.strength-item[data-met="true"]::before {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent);
}

.auth-form[data-busy] { cursor: progress; }
.auth-form[data-busy] button[type="submit"] {
  opacity: .6;
  cursor: progress;
  pointer-events: none;
}

[data-resend-area] {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
}
[data-resend-countdown] {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
.auth-feedback {
  margin-block-start: var(--sp-3);
}
.auth-feedback .alert {
  margin: 0;
}

.code-field {
  inline-size: 100%;
  block-size: var(--control-h-lg);
  padding-inline: var(--field-pad-x);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semi);
  text-align: center;
  letter-spacing: .24em;
  text-indent: .24em;           
}
.code-field::placeholder {
  color: var(--gray-300);
  font-weight: var(--fw-normal);
  letter-spacing: .24em;
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  overflow: hidden;
  background: var(--grad-brand);
  border-radius: var(--r-full);
  box-shadow: var(--glass-edge), 0 2px 6px rgba(var(--sh-color), .28);
  color: var(--fg-on-brand);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-flat);
}
.avatar > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.avatar-lg { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--fs-2xl); }
.avatar-xl { inline-size: 5.75rem; block-size: 5.75rem; font-size: var(--fs-3xl); }

.chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--sp-2);
  background: color-mix(in srgb, var(--red-100) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-200) 75%, transparent);
  border-radius: var(--r-full);
  color: var(--red-800);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.identity-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.identity-text { min-inline-size: 0; }
.identity-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  color: var(--gray-900);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
}
.identity-email {
  margin: var(--sp-1) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.identity-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
}
.identity-actions > a[data-cta] {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
  padding-inline: var(--sp-4);
  background: var(--grad-brand);
  border: 1px solid var(--red-700);
  border-radius: var(--r-md);
  box-shadow: var(--sh-raised);
  color: var(--fg-on-brand);
  font-weight: var(--fw-semi);
  text-decoration: none;
}
.identity-actions > a[data-cta]:visited { color: var(--fg-on-brand); }
.identity-actions > a[data-cta]:hover {
  background: var(--grad-brand-hover);
  color: var(--fg-on-brand);
  text-decoration: none;
}
.identity-actions > a[data-cta]:focus-visible {
  outline: none;
  box-shadow: var(--ring-offset);
}

.table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  margin-block-end: var(--sp-4);
  border-radius: var(--r-lg);
}
.table-scroll > table { min-inline-size: 100%; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border: 1px solid var(--badge-border);
  border-radius: var(--r-full);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge-icon {
  flex: none;
  inline-size: .9rem;
  block-size: .9rem;
  background-color: var(--badge-icon);
  -webkit-mask: var(--badge-glyph) no-repeat center / contain;
  mask: var(--badge-glyph) no-repeat center / contain;
}

.status-badge[data-state="verified"] {
  --badge-bg: linear-gradient(
    140deg,
    var(--gold-100) 0%,
    var(--gold-200) 58%,
    var(--gold-300) 100%
  );
  --badge-fg: var(--gold-800);
  --badge-border: color-mix(in srgb, var(--gold-500) 62%, transparent);
  --badge-icon: var(--gold-700);
  --badge-glyph: var(--icon-verified);
  --badge-shadow:
    0 1px 0 color-mix(in srgb, var(--gold-50) 90%, transparent) inset,
    0 1px 4px color-mix(in srgb, var(--gold-600) 30%, transparent);
}

.status-badge[data-state="unverified"] {
  --badge-bg: linear-gradient(
    140deg,
    var(--red-50) 0%,
    var(--red-100) 100%
  );
  --badge-fg: var(--red-800);
  --badge-border: color-mix(in srgb, var(--red-500) 46%, transparent);
  --badge-icon: var(--red-600);
  --badge-glyph: var(--icon-unverified);
  --badge-shadow:
    0 1px 0 color-mix(in srgb, var(--gray-0) 84%, transparent) inset,
    0 1px 4px color-mix(in srgb, var(--red-500) 22%, transparent);
}

.status-badge[data-state="waiting"] {
  --badge-bg: linear-gradient(
    140deg,
    color-mix(in srgb, var(--warning-bg) 88%, var(--gray-0)) 0%,
    color-mix(in srgb, var(--warning-bg) 62%, var(--gray-100)) 100%
  );
  --badge-fg: var(--warning);
  --badge-border: color-mix(in srgb, var(--warning) 34%, transparent);
  --badge-icon: var(--warning);
  --badge-glyph: var(--icon-wait);
  --badge-shadow: 0 1px 0 color-mix(in srgb, var(--gray-0) 84%, transparent) inset;
}

.status-badge[data-state="changes"] {
  --badge-bg: var(--danger-bg);
  --badge-fg: color-mix(in srgb, var(--danger) 78%, var(--gray-900));
  --badge-border: color-mix(in srgb, var(--danger) 30%, transparent);
  --badge-icon: var(--danger);
  --badge-glyph: var(--icon-unverified);
  --badge-shadow: 0 1px 0 color-mix(in srgb, var(--gray-0) 84%, transparent) inset;
}

.detail-group {
  margin-block-end: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}
.detail-group > h2 {
  margin: 0 0 var(--sp-3);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.detail-list {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}
.detail-list > dt {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}
.detail-list > dd {
  display: block;
  margin: 0;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  overflow-wrap: anywhere;
}
.detail-empty {
  color: var(--fg-subtle);
  font-style: italic;
  font-weight: var(--fw-normal);
}

.detail-link { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); }

.avatar-editor {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--gray-0) 50%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}
.avatar-copy { min-inline-size: 0; }
.avatar-title {
  margin: 0;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
/* The name of the file the owner picked — it says what the picture is. */
.avatar-name {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.avatar-note {
  margin: var(--sp-1) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.avatar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}
.avatar-controls > button {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
  padding-inline: var(--sp-3);
  background: color-mix(in srgb, var(--gray-0) 70%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: none;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.avatar-controls > button:hover { border-color: var(--brand); color: var(--brand-fg); }
.avatar-controls > button:disabled { opacity: .6; cursor: progress; }

/* A picture being uploaded. .company-mark and .document-photo are modules.css's
   pictures and carry the same rule there — one owner each, and the two files
   agree on what "busy" looks like through --busy-opacity, not by repeating .6. */
.avatar[data-busy],
.place-photo[data-busy] { opacity: var(--busy-opacity); }

.avatar-controls > .alert {
  flex-basis: 100%;
  margin-block-end: 0;
}

.status-page {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: var(--sp-6) var(--sp-4);
}
.status-card {
  inline-size: 100%;
  max-inline-size: 27rem;
  padding: var(--sp-7) var(--sp-5);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  text-align: center;
}
.status-code {
  margin: 0 0 var(--sp-3);
  color: var(--brand);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-3xl);
  line-height: var(--lh-flat);
}
.status-card h1 {
  margin: 0;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-xl);
}
.status-copy {
  margin: var(--sp-3) auto 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.status-action { margin: var(--sp-5) 0 0; }
.status-action > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-h-lg);
  padding-inline: var(--sp-5);
  background: var(--grad-brand);
  border: 1px solid var(--red-700);
  border-radius: var(--r-md);
  box-shadow: var(--sh-raised);
  color: var(--fg-on-brand);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  letter-spacing: .01em;
  line-height: var(--lh-flat);
  text-decoration: none;
}
.status-action > a:visited { color: var(--fg-on-brand); }
.status-action > a:hover {
  background: var(--grad-brand-hover);
  color: var(--fg-on-brand);
  text-decoration: none;
}
.status-action > a:active {
  background: var(--red-800);
  color: var(--fg-on-brand);
}
.status-action > a:focus-visible {
  outline: none;
  box-shadow: var(--ring-offset);
}

.empty-title {
  margin: 0;
  color: var(--gray-900);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
}
.empty-note {
  margin: var(--sp-2) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-wrap: pretty;
}

.place-photo {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 15rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.place-photo > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.place-photo-empty { padding: var(--sp-2); text-align: center; }

.place-photo-editor { flex-wrap: wrap; }
.place-photo-editor .place-photo { inline-size: min(24rem, 100%); }

/* The branch card's cover: the photo, once, at the top of the card — the same
   face a branch has on the cards under /profiles. The editor variant wraps the
   same frame in choose/remove controls; on the new-branch page it is visible
   before the row exists, and its upload is answered with a 409 until the branch
   has been added. */
.place-cover-editor {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.place-cover {
  inline-size: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.place-cover-editor .avatar-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
}
.place-cover-editor .avatar-note { margin: 0; flex: 1 1 auto; }
.place-cover-editor .avatar-controls { margin-block-start: 0; margin-inline-start: auto; }

.place-photo-figure {
  margin: 0;
  max-inline-size: 32rem;
}
.place-photo-figure > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge);
}

.branch-prev-card {
  position: relative;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
  width: 100%;
  height: 350px;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.branch-prev-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-base);

  background-image: linear-gradient(
    to bottom, 
    rgb(255 255 255 / 5%) 0%, 
    rgb(255 255 255 / 20%) 20%, 
    rgb(255 255 255 / 90%) 55%, 
    rgb(255 255 255 / 100%) 100%
  );

}

.branch-prev-card > div {
  width: 100%;
  position: absolute;
  bottom: 0;  
  left: 0;
  padding: var(--sp-4);
  z-index: var(--z-raised);
}

.branch-prev-card-kind {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.branch-prev-card-cmp {
  display: flex;
  text-align: center;
  margin: auto;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
}

.branch-prev-card > img.branch-prev-photo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.branch-prev-card[data-photo="none"] {
  background: var(--grad-brand);
}

} /* @layer app.components */


@layer app.components {

/* Searchable select / combobox.
   Kept here rather than legacy base.css so every modern app surface (including
   company customization and Super Admin) gets the same anchored popover. */
.combobox {
  min-inline-size: 0;
}

.combo-anchor {
  inline-size: 100%;
  text-align: start;
  justify-content: space-between;
  font-weight: var(--fw-normal);
}

.combo-panel {
  position: fixed;
  inset: auto;
  z-index: var(--z-panel);
  margin: 0;
  padding: var(--sp-2);
  min-inline-size: 12.5rem;
  max-inline-size: calc(100vw - 1.25rem);
  max-block-size: min(22.5rem, calc(100dvh - 1.25rem));
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.combo-panel .field {
  margin-block-end: var(--sp-2);
}

.combo-option {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: var(--control-h);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: start;
  cursor: pointer;
}

.combo-option:hover,
.combo-option:focus-visible,
.combo-option[aria-selected="true"] {
  outline: 0;
  background: var(--bg-brand-soft);
  color: var(--brand-fg);
}

.combo-empty {
  margin: 0;
  padding: var(--sp-3);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

}

/* Signed-in portal: the official complete horizontal RACOPAES lockup replaces
   the square mark without altering any navigation destinations. */
.site-nav .site-mark.account-header-brand {
  inline-size:auto;
  block-size:auto;
  min-inline-size:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  padding:0;
}
.site-nav .site-mark.account-header-brand picture { display:block; line-height:0; flex:none; }
.site-nav .site-mark.account-header-brand .site-mark-img {
  display:block; width:155px; height:auto; max-width:100%; max-height:55px; object-fit:contain;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
@media (max-width:44rem) {
  .site-nav .site-mark.account-header-brand .site-mark-img { width:112px; max-height:44px; }
}
@media (max-width:360px) {
  .site-nav .site-mark.account-header-brand .site-mark-img { width:99px; max-height:40px; }
}