/* ============================================================================
   CSJDM Resident Web Portal — stylesheet
   ============================================================================
   ONE file, no build step. Deploys as a static asset next to the HTML.

   DESIGN DIRECTION (2026-10 redesign) — "the permit journey, in the city's
   orange". A resident should always know where their permit is and what to do
   next. The look refuses the generic government template (navy + gray cards)
   and the generic SaaS template (blue gradients) for the City of San Jose del
   Monte's own colours:

     • CSJDM orange carries the brand: the welcome band, the business header,
       primary buttons, the journey rail, focus rings. Everything else is a warm
       stone neutral, so the orange always means "this is the city / do this".
     • The three slanted bars of the CSJDM mark (assets/figma/hero-mark.svg)
       are the signature: section markers, the loader, the big bands.
     • Type: Bricolage Grotesque for display (headings, numbers on bands),
       Public Sans — a typeface made for government services — for everything
       a resident reads or types.
     • One icon family (assets/icons.svg, js/icons.js), no emoji.

   VISUAL SOURCE: the owner's Figma (file 5dZysrknyZvFguI8hkgsD5, page "web"):
   sign-in 732:5 + 813:358, business-permit-orange 827:299, new-permit wizard
   778:23, business-tax-calculator-orange 802:23.

   ── THE CONTRAST RULE THAT SHAPES EVERYTHING ──────────────────────────────
   White on Figma's #f97316 is 2.8:1 and fails WCAG AA, so:
     • --brand-accent (#f97316) is for NON-TEXT marks only: rails, rings,
       indicators, progress fills, the mark.
     • a filled surface that carries white text uses --brand-fill (#c2410c,
       5.2:1).
     • orange TEXT on a light surface is --text-brand (#b93d0b, 5.6:1); in dark
       mode it is #fdba74 on the warm charcoal (9:1).

   Dark mode: every colour is a token, re-pointed in section 2. Guarded with
   :root:not([data-theme="light"]) so an explicit choice wins over the OS.

   CONTENTS
     1. Tokens              9. Lists + rows
     2. Dark mode          10. Skeletons, empty + error states
     3. Reset + base       11. Wizard (stepper + progress)
     4. Layout shell       12. Toast, modal, banner
     5. Buttons            13. Sign-in / landing (13…13i follow)
     6. Forms              14. Utilities
     7. Cards + panels     15. Responsive + reduced motion + print
     8. Status pills       16–17. Status colours, service forms, gate, CSM
                           18. 2026-10 redesign layer (viewer, journey, landing)
   ========================================================================= */

/* The hidden attribute always wins. Component rules like .wizard-nav
   { display:flex } otherwise override it, and things meant to be hidden show
   (e.g. Back/Next under the Data Privacy step). */
[hidden] { display: none !important; }

/* ------------------------------------------------------------- 1. TOKENS */

:root {
  /* Brand ramp — CSJDM orange. */
  --brand-50: #fff6ed;
  --brand-100: #ffead5;
  --brand-150: #fff1e6;
  --brand-200: #fed3aa;
  --brand-300: #fdb274;
  --brand-400: #fb8a3c;
  --brand-500: #f97316;   /* accent — NON-TEXT ONLY */
  --brand-600: #ea580c;
  --brand-700: #c2410c;   /* fill under white text, 5.2:1 */
  --brand-800: #b93d0b;   /* brand text on light, 5.6:1 */
  --brand-900: #9a3412;
  --brand-950: #6b2109;
  --brand-ink: #1c1917;

  --brand-accent: var(--brand-500);
  --brand-fill: var(--brand-700);
  --brand-fill-hover: #a8380a;
  --brand-wordmark: var(--brand-800);
  --brand-gradient: linear-gradient(118deg, #d2490d 0%, #b23b0a 52%, #8f2f08 100%);
  --brand-glow: radial-gradient(120% 140% at 100% 0%, rgba(253, 178, 116, 0.42) 0%, rgba(253, 178, 116, 0) 55%);

  /* Neutral ramp — warm stone, so the orange sits in a warm world instead of
     against cold slate. */
  --neutral-0: #ffffff;
  --neutral-25: #fdfcfb;
  --neutral-50: #f8f7f5;
  --neutral-100: #f2f0ed;
  --neutral-150: #ece9e5;
  --neutral-200: #e3dfda;
  --neutral-300: #cfc9c2;
  --neutral-400: #a9a199;
  --neutral-500: #7b736c;
  --neutral-600: #5a534d;
  --neutral-700: #443e39;
  --neutral-800: #2a2522;
  --neutral-900: #1c1917;

  /* Semantic status families: surface, border, solid, AA text. */
  --success-surface: #e5f6ea;
  --success-border: #b9e5c6;
  --success-solid: #16a34a;
  --success-text: #146c36;

  --warning-surface: #fdf3dc;
  --warning-border: #f4d58c;
  --warning-solid: #d97706;
  --warning-text: #8a4206;

  --danger-surface: #fdeceb;
  --danger-border: #f6c2bf;
  --danger-solid: #dc2626;
  --danger-text: #b42318;

  --info-surface: #e8f1fd;
  --info-border: #bfd6f6;
  --info-solid: #2f6fd6;
  --info-text: #1d4ea3;

  /* Surfaces */
  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-field: var(--neutral-100);
  --surface-hover: var(--brand-50);
  --surface-inset: var(--neutral-50);
  --surface-brand-tint: var(--brand-150);
  --surface-ink: #1c1917;          /* the viewer stage, the footer legal bar */

  /* Borders */
  --border-subtle: var(--neutral-150);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand: var(--brand-300);

  /* Text */
  --text-primary: var(--neutral-800);
  --text-heading: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: #6b645e;           /* 5.3:1 on the page */
  --text-inverse: #ffffff;
  --text-brand: var(--brand-800);

  /* Typography */
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Public Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px — captions, pills */
  --text-sm: 0.875rem;    /* 14px — secondary copy */
  --text-base: 1rem;      /* 16px — body, inputs */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px — card / section titles */
  --text-xl: 1.75rem;     /* 28px — page titles */
  --text-2xl: 2rem;       /* 32px — numbers */
  --text-3xl: 2.375rem;   /* 38px — sign-in title */
  --text-display: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --tracking-caps: 0.06em;
  --tracking-display: -0.025em;

  /* Spacing — 4px steps */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation — warm-tinted, always offset + soft blur. */
  --shadow-xs: 0 1px 2px rgba(41, 30, 22, 0.05);
  --shadow-sm: 0 2px 6px -1px rgba(41, 30, 22, 0.07), 0 1px 2px rgba(41, 30, 22, 0.04);
  --shadow-md: 0 10px 24px -8px rgba(41, 30, 22, 0.14), 0 2px 6px -2px rgba(41, 30, 22, 0.06);
  --shadow-lg: 0 24px 56px -16px rgba(41, 30, 22, 0.26), 0 6px 16px -6px rgba(41, 30, 22, 0.1);
  --shadow-brand: 0 8px 18px -8px rgba(194, 65, 12, 0.55);
  --ring-brand: 0 0 0 3px rgba(249, 115, 22, 0.32);
  --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.24);

  /* Layout. --gutter never goes below 16px. */
  --gutter: 1rem;
  --content-max: 1200px;
  --header-height: 68px;
  --tap: 48px;
  --control-height: 48px;

  /* Motion */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);

  /* z-index scale */
  --z-sticky: 30;
  --z-header: 40;
  --z-pop: 60;
  --z-toast: 90;

  color-scheme: light;
}

/* ---------------------------------------------------------- 2. DARK MODE */
/* Warm charcoal, not blue-black: the orange stays the same colour family at
   night. Defined once as a block and applied by both selectors. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --surface-page: #13110f;
    --surface-card: #1c1916;
    --surface-raised: #24201c;
    --surface-sunken: #100e0c;
    --surface-field: #26221e;
    --surface-hover: rgba(251, 138, 60, 0.1);
    --surface-inset: #171411;
    --surface-brand-tint: rgba(251, 138, 60, 0.13);
    --surface-ink: #0c0a09;

    --border-subtle: #2a2521;
    --border-default: #342e29;
    --border-strong: #4a423b;
    --border-brand: rgba(251, 138, 60, 0.5);

    --text-primary: #ede7e1;
    --text-heading: #fbf6f1;
    --text-secondary: #c8bfb6;
    --text-muted: #a39990;
    --text-brand: var(--brand-300);
    --brand-wordmark: var(--brand-300);
    --brand-accent: var(--brand-400);

    --success-surface: rgba(34, 160, 80, 0.16);
    --success-border: rgba(74, 222, 128, 0.32);
    --success-solid: #4ade80;
    --success-text: #8ee6a9;
    --warning-surface: rgba(217, 119, 6, 0.17);
    --warning-border: rgba(251, 191, 36, 0.34);
    --warning-solid: #fbbf24;
    --warning-text: #fcd581;
    --danger-surface: rgba(220, 38, 38, 0.17);
    --danger-border: rgba(248, 113, 113, 0.36);
    --danger-solid: #f87171;
    --danger-text: #fda4a4;
    --info-surface: rgba(59, 130, 246, 0.17);
    --info-border: rgba(147, 197, 253, 0.34);
    --info-solid: #60a5fa;
    --info-text: #a6c8fb;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, 0.7);
    --brand-gradient: linear-gradient(118deg, #b8400c 0%, #93330a 52%, #6e2607 100%);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --surface-page: #13110f;
  --surface-card: #1c1916;
  --surface-raised: #24201c;
  --surface-sunken: #100e0c;
  --surface-field: #26221e;
  --surface-hover: rgba(251, 138, 60, 0.1);
  --surface-inset: #171411;
  --surface-brand-tint: rgba(251, 138, 60, 0.13);
  --surface-ink: #0c0a09;
  --border-subtle: #2a2521;
  --border-default: #342e29;
  --border-strong: #4a423b;
  --border-brand: rgba(251, 138, 60, 0.5);
  --text-primary: #ede7e1;
  --text-heading: #fbf6f1;
  --text-secondary: #c8bfb6;
  --text-muted: #a39990;
  --text-brand: var(--brand-300);
  --brand-wordmark: var(--brand-300);
  --brand-accent: var(--brand-400);
  --success-surface: rgba(34, 160, 80, 0.16);
  --success-border: rgba(74, 222, 128, 0.32);
  --success-solid: #4ade80;
  --success-text: #8ee6a9;
  --warning-surface: rgba(217, 119, 6, 0.17);
  --warning-border: rgba(251, 191, 36, 0.34);
  --warning-solid: #fbbf24;
  --warning-text: #fcd581;
  --danger-surface: rgba(220, 38, 38, 0.17);
  --danger-border: rgba(248, 113, 113, 0.36);
  --danger-solid: #f87171;
  --danger-text: #fda4a4;
  --info-surface: rgba(59, 130, 246, 0.17);
  --info-border: rgba(147, 197, 253, 0.34);
  --info-solid: #60a5fa;
  --info-text: #a6c8fb;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, 0.7);
  --brand-gradient: linear-gradient(118deg, #b8400c 0%, #93330a 52%, #6e2607 100%);
}

/* ------------------------------------------------------- 3. RESET + BASE */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 64px);
}
html.viewer-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; width: 100%; }
body > .app-footer { margin-top: auto; flex-shrink: 0; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--text-brand);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }

img, svg { max-width: 100%; height: auto; display: block; }

/* The icon element from js/icons.js. */
.i {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.25em;
  stroke: currentColor;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-5) 0;
}

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--brand-200); color: var(--brand-950); }

:focus-visible {
  outline: 2.5px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: var(--space-3);
  z-index: 100;
  background: var(--surface-card);
  color: var(--text-brand);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-3); }

/* The CSJDM mark as a recolourable shape (mask of the three slanted bars). */
.mark, .section-title::before, .card > .card__title::before, .card__head .card__title::before {
  -webkit-mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
          mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
  background: var(--brand-accent);
}

/* ------------------------------------------------- 4. LAYOUT SHELL */

/* Header: the city seal and wordmark on a clean bar, a 3px orange band on
   top so every page carries the city's colour from the first pixel. */
.app-header {
  background: color-mix(in srgb, var(--surface-card) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
          backdrop-filter: saturate(1.4) blur(10px);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
  border-top: 3px solid var(--brand-fill);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.app-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: calc(var(--header-height) - 3px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.brand:hover { text-decoration: none; }

.brand__mark {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 3px var(--brand-200);
}

.brand__text { min-width: 0; display: flex; flex-direction: column; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}
.brand__sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.app-header__spacer { flex: 1 1 auto; }
.app-header__user {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.app-header__name--full {
  max-width: 22ch;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.app-header__name--first { display: none; }
.avatar {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-fill);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.02em;
}

/* Primary navigation — a strip of labelled tabs (icon + word). The current
   page gets a tinted pill AND weight AND an underline — never colour alone.
   Scrolls sideways on a phone, so every service stays one tap away. */
.app-nav {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-sticky);
}
.app-nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 6px var(--gutter);
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--gutter);
}
.app-nav__inner::-webkit-scrollbar { display: none; }

.app-nav a {
  position: relative;
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.app-nav a:hover { color: var(--text-heading); background: var(--surface-sunken); text-decoration: none; }
.app-nav a[aria-current='page'] {
  color: var(--text-brand);
  background: var(--surface-brand-tint);
  font-weight: var(--weight-bold);
}
.app-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -7px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand-accent);
}
.app-nav__icon { display: inline-flex; opacity: 0.9; }
.app-nav__icon .i { width: 18px; height: 18px; }

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-8);
}

.page__head { margin-bottom: var(--space-5); }
/* Kept for old markup; the redesign does not put labels above headings. */
.page__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: var(--space-2);
}
.page__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}
.page__lead {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-md);
  max-width: 62ch;
}

/* Footer — an ink band: seal, office and address, links, © line. */
.app-footer {
  position: relative;
  background: var(--surface-card);
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.app-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-fill) 0 33%, var(--brand-accent) 33% 66%, var(--brand-300) 66%);
}
.app-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.app-footer__org { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.app-footer__seal { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; }
.app-footer__office { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-heading); letter-spacing: -0.01em; }
.app-footer__addr { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.app-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.app-footer__links a { color: var(--text-secondary); font-weight: var(--weight-medium); }
.app-footer__links a:hover { color: var(--text-brand); }
.app-footer__links span { display: none; }
.app-footer__legal { background: var(--surface-ink); }
.app-footer__legal-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  font-size: var(--text-xs);
  color: #c8bfb6;
}
@media (max-width: 560px) {
  .app-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ------------------------------------------------------------ 5. BUTTONS */

.btn {
  min-height: var(--tap);
  min-width: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.btn .i { width: 18px; height: 18px; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* PRIMARY — the one orange action on a screen. */
.btn--primary {
  background: var(--brand-fill);
  color: #fff;
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn--primary:hover { background: var(--brand-fill-hover); }

/* SECONDARY — a quiet outline, so it never competes with the primary. */
.btn--secondary {
  background: var(--surface-card);
  border-color: var(--border-strong);
  color: var(--text-heading);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--brand-400);
  color: var(--text-brand);
}

.btn--ghost {
  background: transparent;
  color: var(--text-brand);
  padding: 0 var(--space-3);
}
.btn--ghost:hover { background: var(--surface-hover); }

.btn--danger {
  background: var(--danger-solid);
  color: #fff;
}
[data-theme='dark'] .btn--danger { color: #2a0a0a; }
.btn--danger:hover { filter: brightness(0.93); }

/* Light-on-orange variants, for buttons sitting on an orange band. */
.btn--on-brand {
  background: #fff;
  color: var(--brand-900);
  box-shadow: 0 6px 16px -8px rgba(60, 20, 0, 0.5);
}
.btn--on-brand:hover { background: var(--brand-50); }
.btn--on-brand-outline {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.btn--on-brand-outline:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }

.btn[hidden] { display: none; }
.btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; }
.btn--pill { border-radius: var(--radius-pill); }

.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading .i { visibility: hidden; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  border: 2px solid var(--text-primary);
  border-top-color: transparent;
}
.btn--primary.is-loading::after,
.btn--danger.is-loading::after { border-color: #fff; border-top-color: transparent; }
.btn--secondary.is-loading::after { border-color: var(--text-brand); border-top-color: transparent; }

@keyframes spin { to { transform: rotate(360deg); } }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.btn-row--end { justify-content: flex-end; }
.btn-row--between { justify-content: space-between; }

/* -------------------------------------------------------------- 6. FORMS */

.field { margin-bottom: var(--space-4); }

.label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.label .req { color: var(--danger-text); margin-left: 2px; }
.label .opt, h3 .opt {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--space-2);
}

.input, .select, .textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-3) 14px;
  font-family: inherit;
  /* 16px — iOS zooms the page on focus below 16px. */
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px rgba(41, 30, 22, 0.04);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--neutral-400); }
.textarea { min-height: 112px; resize: vertical; line-height: var(--leading-snug); }

.select {
  padding-right: var(--space-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237b736c' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: var(--ring-brand);
}

.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.9; }

.input:disabled, .select:disabled, .textarea:disabled,
.input[readonly] {
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.input:disabled, .select:disabled, .textarea:disabled { cursor: not-allowed; }

.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  border-color: var(--danger-solid);
}
.input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus {
  box-shadow: var(--ring-danger);
}

/* ONE hint pattern: label → control → hint → error, wired with
   aria-describedby. */
.hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  max-width: 64ch;
  text-wrap: pretty;
}
.hint:empty { display: none; }
.input:disabled ~ .hint,
.select:disabled ~ .hint,
.textarea:disabled ~ .hint { color: var(--text-secondary); }
.error-text {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--danger-text);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.error-text::before {
  content: '';
  flex: 0 0 16px;
  height: 16px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.error-text:empty { display: none; }

.grid-2, .grid-3 { display: grid; gap: 0 var(--space-4); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.pin-input {
  letter-spacing: 0.4em;
  font-family: var(--font-mono);
}

.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: var(--tap);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.check input {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 0;
  accent-color: var(--brand-fill);
  cursor: pointer;
}
.check span { color: var(--text-primary); }

.option-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  min-height: var(--tap);
}
.option-card:hover { border-color: var(--border-brand); background: var(--surface-hover); }
.option-card input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--brand-fill); }
.option-card:has(input:checked) {
  border-color: var(--brand-accent);
  background: var(--surface-hover);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}
.option-card__title { font-weight: var(--weight-semibold); color: var(--text-heading); }
.option-card__desc { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }

/* File upload slot — the whole row is the <label>, so the whole row is the
   tap target. The file input is visually hidden but stays focusable. */
.upload {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-items: center;
  min-height: 64px;
  padding: var(--space-3) 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.upload::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 18px; height: 18px;
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.upload::after {
  content: 'Upload';
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px 7px 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-200);
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b93d0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E") 10px center / 14px no-repeat;
  color: var(--brand-800);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.upload:hover, .upload.is-drag {
  border-color: var(--brand-400);
  background: var(--surface-hover);
}
.upload:focus-within { border-color: var(--brand-accent); box-shadow: var(--ring-brand); }
.upload.is-filled {
  border-style: solid;
  border-color: var(--success-border);
  background: var(--success-surface);
}
.upload.is-filled::before { background: var(--success-text); }
.upload.is-filled::after {
  content: 'Replace';
  background-color: var(--surface-card);
  border-color: var(--border-default);
}
.upload__label {
  grid-column: 2; grid-row: 1;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-heading);
}
.upload__meta {
  grid-column: 2; grid-row: 2;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  word-break: break-word;
}
.upload input[type='file'] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --------------------------------------------------- 7. CARDS + PANELS */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
}
.card + .card { margin-top: var(--space-4); }
.card--flush { padding: 0; overflow: hidden; }

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: -0.01em;
}
/* Section titles carry the CSJDM mark (three slanted bars) as their marker. */
.card > .card__title,
.card__head .card__title,
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card > .card__title::before,
.card__head .card__title::before,
.section-title::before {
  content: '';
  flex: 0 0 16px;
  height: 14px;
}
.card__sub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 4px; }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: -0.02em;
}

.tile {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.tile:hover {
  text-decoration: none;
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Quick-action tiles. */
.actions {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.action {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: var(--space-4);
  min-height: 88px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
a.action:hover {
  text-decoration: none;
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
a.action:hover .action__icon { background: var(--brand-fill); color: #fff; border-color: var(--brand-fill); }
.action__icon {
  grid-row: 1 / span 2;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--surface-brand-tint);
  border: 1px solid var(--brand-100);
  color: var(--text-brand);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.action__icon .i { width: 22px; height: 22px; }
.action__title {
  align-self: end;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--text-heading);
  line-height: 1.3;
}
.action__desc {
  align-self: start;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}
.card > .action__icon { width: 48px; }

/* Status cards (dashboard; superseded by .glance but kept for other pages). */
.stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
}
.stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.stat__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--surface-brand-tint);
  color: var(--text-brand);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.stat__bar {
  margin-top: var(--space-3);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  overflow: hidden;
}
.stat__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-accent);
}

/* Definition list — small key, readable value. */
.dl { display: grid; gap: var(--space-4) var(--space-4); }
@media (min-width: 640px) { .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dl__item { min-width: 0; }
.dl__item--wide { grid-column: 1 / -1; }
.dl__key {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dl__val {
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  overflow-wrap: break-word;
  margin-top: 4px;
}

/* --------------------------------------------------------- 8. STATUS PILLS */
/* Fully rounded, a dot in the status colour, sentence-case label. The label is
   always text, so the tone only reinforces it. */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.45;
  border: 1px solid transparent;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  white-space: nowrap;
  vertical-align: middle;
}
.pill[data-tone='success'] { background: var(--success-surface); color: var(--success-text); }
.pill[data-tone='warning'] { background: var(--warning-surface); color: var(--warning-text); }
.pill[data-tone='danger'] { background: var(--danger-surface); color: var(--danger-text); }
.pill[data-tone='info'] { background: var(--info-surface); color: var(--info-text); }
.pill[data-tone='brand'] { background: var(--brand-100); color: var(--brand-800); }

/* ------------------------------------------------------ 9. LISTS + ROWS */

.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  min-height: var(--tap);
  font-weight: var(--weight-regular);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
a.row:hover {
  text-decoration: none;
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
}
a.row:hover .row__chev { transform: translateX(3px); color: var(--text-brand); }
.row__icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface-brand-tint);
  color: var(--text-brand);
}
.row__icon .i { width: 22px; height: 22px; }
.row__main { flex: 1 1 auto; min-width: 0; }
.row__title {
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__aside { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); }
.row__chev {
  display: inline-grid;
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

/* -------------------------- 10. SKELETONS, EMPTY + ERROR STATES */

.skeleton {
  background: linear-gradient(100deg,
    var(--surface-sunken) 30%, var(--surface-card) 45%, var(--surface-sunken) 60%);
  background-size: 300% 100%;
  animation: shimmer 1.5s var(--ease-out) infinite;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.skeleton--text { height: 0.85em; margin: 0.4em 0; border: 0; }
.skeleton--title { height: 1.1em; width: 60%; margin-bottom: var(--space-3); border: 0; }
.skeleton--pill { height: 22px; width: 84px; border-radius: var(--radius-pill); }
.skeleton--row { height: 76px; border-radius: var(--radius-lg); }
.skeleton--card { height: 140px; border-radius: var(--radius-lg); }
.skeleton--stat { height: 132px; border-radius: var(--radius-lg); }

.empty {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 50% 0%, var(--surface-brand-tint) 0%, transparent 70%),
    var(--surface-card);
}
.empty__icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: 20px;
  display: grid; place-items: center;
  background: var(--surface-card);
  border: 1px solid var(--brand-200);
  box-shadow: 0 10px 22px -12px rgba(194, 65, 12, 0.45);
  color: var(--text-brand);
  transform: rotate(-4deg);
}
.empty__icon .i { width: 28px; height: 28px; transform: rotate(4deg); }
.empty__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.empty__text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 46ch;
  margin: 0 auto var(--space-5);
}
.empty__text:last-child { margin-bottom: 0; }

.error-state {
  padding: var(--space-5);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-lg);
  background: var(--danger-surface);
}
.error-state__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  color: var(--danger-text);
  margin-bottom: var(--space-2);
}
.error-state__title::before {
  content: '';
  flex: 0 0 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20M8.5 16.5a5 5 0 0 1 7 0M5 13a10 10 0 0 1 5.2-2.8M19 13a10 10 0 0 0-2.3-1.6M2 8.8a15 15 0 0 1 4.2-2.6M22 8.8A15 15 0 0 0 11 5M12 20h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20M8.5 16.5a5 5 0 0 1 7 0M5 13a10 10 0 0 1 5.2-2.8M19 13a10 10 0 0 0-2.3-1.6M2 8.8a15 15 0 0 1 4.2-2.6M22 8.8A15 15 0 0 0 11 5M12 20h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.error-state__text { color: var(--text-secondary); margin-bottom: var(--space-4); }
.error-state__text:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ 11. WIZARD */

.stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding: var(--space-1) 0;
}

.step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--text-muted);
  text-align: center;
}
.step::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 50%;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--border-default);
  z-index: 0;
}
.step:first-child::before { display: none; }
.step.is-done::before,
.step[aria-current='step']::before { background: var(--brand-accent); }

.step__num {
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  background: var(--surface-card);
  border: 2px solid var(--border-default);
  color: var(--text-muted);
}
.step > span:last-child { padding: 0 2px; overflow-wrap: anywhere; }

.step[aria-current='step'] { color: var(--text-brand); font-weight: var(--weight-bold); }
.step[aria-current='step'] .step__num {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: #fff;
  box-shadow: 0 0 0 5px var(--surface-brand-tint);
}
.step.is-done { color: var(--text-secondary); }
.step.is-done .step__num {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}
.step.is-done .step__num::after {
  content: '';
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.step.is-done .step__num span { display: none; }

@media (max-width: 639px) {
  .step > span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .step__num { width: 30px; height: 30px; flex-basis: 30px; font-size: var(--text-xs); }
  .step::before { top: 14px; }
}

.progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand-fill), var(--brand-accent));
  transition: width var(--duration-slow) var(--ease-out);
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.progress-meta__step { color: var(--text-brand); font-weight: var(--weight-semibold); }
.progress-meta__pct { color: var(--text-muted); white-space: nowrap; }

.wizard-step { display: none; }
.wizard-step.is-active { display: block; animation: rise var(--duration-base) var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#stepBody h3, .form-group-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-brand);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wizard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
}
.wizard-nav .btn { flex: 1 1 auto; }
@media (min-width: 640px) {
  .wizard-nav { justify-content: space-between; flex-wrap: nowrap; }
  .wizard-nav .btn { flex: 0 0 auto; min-width: 140px; }
}

.autosave {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  white-space: nowrap;
}
.autosave[data-state='saving'] { color: var(--text-secondary); }
.autosave[data-state='saved'] { color: var(--success-text); }
.autosave[data-state='error'] { color: var(--danger-text); }

/* ----------------------------------------------- 12. TOAST, MODAL, BANNER */

.toast-host {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  pointer-events: none;
}
@media (min-width: 640px) {
  .toast-host { left: auto; width: 400px; }
}
.toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 14px var(--space-4) 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: toast-in var(--duration-slow) var(--ease-out);
  transition: opacity var(--duration-base) var(--ease-in), transform var(--duration-base) var(--ease-in);
}
/* The tone bar: a 4px strip inside the radius, plus the title wording — so
   tone is never colour alone. */
.toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--text-muted);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.toast[data-tone='success']::before { background: var(--success-solid); }
.toast[data-tone='danger']::before { background: var(--danger-solid); }
.toast[data-tone='warning']::before { background: var(--warning-solid); }
.toast[data-tone='info']::before { background: var(--info-solid); }
.toast__body { flex: 1 1 auto; font-size: var(--text-sm); color: var(--text-primary); min-width: 0; }
.toast__title { font-weight: var(--weight-bold); color: var(--text-heading); margin-bottom: 2px; }
.toast__close {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  margin: -6px -6px -6px 0;
  background: none; border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.toast__close:hover { background: var(--surface-sunken); color: var(--text-heading); }

.banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 14px var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.banner[data-tone='warning'] {
  background: var(--warning-surface); border-color: var(--warning-border); color: var(--warning-text);
}
.banner[data-tone='info'] {
  background: var(--info-surface); border-color: var(--info-border); color: var(--info-text);
}
.banner[data-tone='danger'] {
  background: var(--danger-surface); border-color: var(--danger-border); color: var(--danger-text);
}
.banner[data-tone='success'] {
  background: var(--success-surface); border-color: var(--success-border); color: var(--success-text);
}
.banner__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: var(--text-md);
  line-height: 1;
}
.banner__icon .i { width: 18px; height: 18px; }
.banner__body { flex: 1 1 auto; min-width: 0; padding-top: 5px; }
.banner__title { font-weight: var(--weight-bold); margin-bottom: 2px; }
.banner a { color: inherit; text-decoration: underline; }

dialog.modal {
  border: 0;
  padding: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  max-width: min(520px, calc(100vw - 2 * var(--gutter)));
  width: 100%;
}
dialog.modal[open] { animation: dlg-in var(--duration-slow) var(--ease-out); }
dialog.modal::backdrop { background: rgba(20, 12, 6, 0.58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal__head {
  padding: var(--space-5) var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: -0.01em;
}
.modal__body { padding: var(--space-4) var(--space-5); color: var(--text-secondary); }
.modal__foot {
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ------------------------------------------------- 13. SIGN-IN / LANDING */
/* The first viewport: an orange "city" panel that tells a resident what this
   is and shows the permit journey, beside the sign-in card. On a phone the
   panel shrinks to a headline band above the form. */

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface-page);
}
@media (min-width: 960px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: min(100vh, 920px);
  }
}

.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--gutter) var(--space-6);
  min-width: 0;
  order: 2;
}
@media (min-width: 640px) {
  .auth-panel { padding: 56px clamp(24px, 6vw, 80px) 48px; }
}
@media (min-width: 960px) {
  .auth-panel { order: 2; padding: 48px clamp(32px, 5vw, 72px); }
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  min-width: 0;
}
.auth-brand:hover { text-decoration: none; }
.auth-brand__seal { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); }
.auth-brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  line-height: 1.12;
  color: #fff;
  letter-spacing: -0.02em;
}
.auth-brand__sub {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.auth-body {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 480px) {
  .auth-body { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
}

.auth-step { display: none; }
.auth-step.is-active { display: block; animation: rise var(--duration-base) var(--ease-out); }

.auth-card__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-2);
}
.auth-card__sub {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin-bottom: var(--space-5);
}

.auth-panel .field { margin-bottom: 18px; }

.auth-panel .input {
  background: var(--surface-field);
  border-color: transparent;
  box-shadow: none;
}
.auth-panel .input:hover { border-color: var(--border-strong); }
.auth-panel .input:focus { background: var(--surface-card); border-color: var(--brand-accent); box-shadow: var(--ring-brand); }
.auth-panel .input.is-invalid { border-color: var(--danger-solid); }

/* An input with a leading icon and an optional trailing button. */
.input-icon { position: relative; }
.input-icon > img,
.input-icon > .input-icon__svg {
  position: absolute;
  left: 14px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}
[data-theme='dark'] .input-icon > img, [data-theme='dark'] .input-icon__btn img { filter: invert(0.85); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .input-icon > img,
  :root:not([data-theme='light']) .input-icon__btn img { filter: invert(0.85); }
}
.input-icon > .input { padding-left: 44px; }
.input-icon--trail > .input { padding-right: 52px; }
.input-icon__btn {
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
}
.input-icon__btn:hover { background: var(--surface-sunken); }
.input-icon__btn img { width: 18px; height: 18px; }
.input-icon__btn[aria-pressed='true'] img { opacity: 0.55; }

.auth-options {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 var(--space-4);
}
.auth-options a { font-size: var(--text-sm); display: inline-block; padding: var(--space-2) 0; }

.auth-alt {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}
.auth-alt a { display: inline-block; padding: var(--space-2) 0; }
.auth-alt--tight { margin-top: 0; }

/* ------------------------------------------------- CONTACT US */
.contact { min-height: 100vh; padding: var(--space-6) var(--gutter) var(--space-8, 4rem); }
.contact__wrap { max-width: 560px; margin: 0 auto; }
.contact__back { display: inline-block; padding: var(--space-2) 0; font-size: 0.875rem; }
.contact__title {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  line-height: 1.05;
  color: var(--text-heading);
}
.contact__lead { margin: 0 0 var(--space-6); font-size: 1.0625rem; color: var(--text-secondary); }
.contact__form .field { margin-bottom: var(--space-5); }
.contact__form textarea.input { resize: vertical; min-height: 9rem; font-family: inherit; }
.contact__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__sent { margin: var(--space-4) 0 0; padding: var(--space-4); border-radius: var(--radius-md, 12px); background: rgba(34,197,94,.12); color: var(--text-primary); }
.contact__info { margin-top: var(--space-7, 3rem); padding-top: var(--space-5); border-top: 1px solid var(--border, rgba(128,128,128,.25)); }
.contact__info h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); color: var(--text-heading); }

.auth-disclaimer {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.auth-disclaimer img { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.auth-disclaimer a { font-weight: var(--weight-semibold); }

/* The hero is decorative (aria-hidden) and carries no text. */
.auth-hero {
  display: none;
  position: relative;
  overflow: hidden;
  background: #f97316 url('../assets/figma/hero-bg.jpg') 30% center / cover no-repeat;
}
.auth-hero__mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 162px;
  transform: translate(-50%, -50%);
}
@media (min-width: 900px) {
  .auth-hero { display: block; }
}

/* The mobile stand-in for the hero: a thin orange band above the form. */
.auth-band {
  height: 6px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600), var(--brand-400));
}
@media (min-width: 900px) { .auth-band { display: none; } }

/* Services strip below the sign-in fold. */
.services {
  background: var(--surface-page);
  border-top: 1px solid var(--border-default);
}
.features {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.features .card { margin-top: 0; }
.features h3 { margin-top: var(--space-4); }

/* ------------------------------------------- 13b. BUSINESS TAX PAYMENT */
/* The pay area on the business Payments tab (FOR PAYMENT permits). Figma
   827:299 / 802:23: a ledger card (orange header row, subtotal footer) beside
   an invoice card (itemised lines, orange GRAND TOTAL, the Pay button). */

.pay {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 1100px) {
  .pay { grid-template-columns: minmax(0, 1fr) 320px; }
}
.pay > .card + .card { margin-top: 0; }

/* Ledger table. */
.pay__table-wrap {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pay__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}
.pay__table th.col-status { width: 112px; }
.pay__table th.num { width: 116px; }
.pay__table th {
  background: var(--surface-brand-tint);
  color: var(--text-brand);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
}
.pay__table td {
  padding: 14px;
  border-top: 1px solid var(--border-default);
  vertical-align: middle;
}
.pay__table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay__table .ctr { text-align: center; }
.pay__table tbody tr.is-muted td { color: var(--text-muted); }
.pay__desc {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.pay__desc::before {
  content: '';
  flex: 0 0 10px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--brand-accent);
}
tr.is-muted .pay__desc { color: var(--text-secondary); font-weight: var(--weight-medium); }
tr.is-muted .pay__desc::before { border-color: var(--border-strong); }
.pay__desc small { display: block; font-weight: var(--weight-regular); color: var(--text-muted); font-size: var(--text-xs); }
.pay__table tfoot td {
  background: var(--surface-inset);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.pay__table tfoot .pay__foot-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.pay__table tfoot .pay__foot-amt {
  font-size: 1rem;
  font-weight: var(--weight-heavy);
  color: var(--text-heading);
}
.pay__table .empty-row td {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-5) 14px;
}

/* Invoice itemisation. */
.pay__list { list-style: none; margin: 0; padding: 0; }
.pay__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
  font-size: var(--text-sm);
}
.pay__what { display: flex; flex-direction: column; min-width: 0; }
.pay__label { color: var(--text-secondary); overflow-wrap: anywhere; }
.pay__due { font-size: var(--text-xs); color: var(--text-muted); }
.pay__amt {
  flex: 0 0 auto;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
  white-space: nowrap;
}
.pay__line.is-muted .pay__label,
.pay__line.is-muted .pay__amt { color: var(--text-muted); font-weight: var(--weight-regular); }
.pay__line.is-muted .pay__due { color: var(--text-muted); }

.pay__rule { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-3) 0; }

.pay__subtotal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.pay__subtotal span:last-child { color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* Figma GRAND TOTAL: tinted orange block, heavy orange figures. */
.pay__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-brand-tint);
  color: var(--text-brand);
  font-size: 0.875rem;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pay__total strong {
  font-size: 1.375rem;
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  color: var(--text-brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0;
}

.pay__btn { box-shadow: var(--shadow-brand); }

.pay__methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.pay__method {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.pay__note { margin: var(--space-3) 0 0; }

.pay__upcoming {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-default);
}
.pay__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.pay-confirming { display: flex; align-items: center; gap: var(--space-4); }
.pay-spinner {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--brand-200);
  border-top-color: var(--brand-accent);
  animation: spin 0.8s linear infinite;
}

/* Below ~520px the four-column ledger is too tight; the status column folds
   under the description. */
@media (max-width: 520px) {
  /* Collapsed to zero width rather than display:none, which breaks the
     fixed table layout. The status pill shows under the description. */
  .pay__table th.col-status { width: 0; }
  .pay__table .col-status { padding: 0 !important; font-size: 0; overflow: hidden; }
  .pay__table .col-status > * { display: none; }
  .pay__table th.num { width: 104px; }
  .pay__desc .pill { margin-top: 4px; }
  .pay__table th, .pay__table td { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 521px) {
  .pay__desc .pill { display: none; }
}

/* ------------------------------------------- 13c. BUSINESS DETAIL */
/* Figma business-permit-orange 827:299. */

/* Orange header bar: building badge, name, ID tag, status tag, subtitle. The
   bar uses the deep-orange gradient so white text passes AA. */
.biz-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: 14px;
  background: var(--brand-gradient);
  color: #fff;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.biz-hero__badge {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: #fff;
}
.biz-hero__badge img { width: 20px; height: 20px; }
.biz-hero__text { flex: 1 1 280px; min-width: 0; }
.biz-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.biz-hero__name {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--weight-heavy);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  min-width: 0;
}
.biz-hero__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: #fff4ec;
  color: var(--brand-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.biz-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-100);
  color: var(--brand-900);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  white-space: nowrap;
}
.biz-hero__status::before { content: '•'; }
.biz-hero__sub {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: #fff;
  opacity: 0.95;
}
.biz-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.biz-hero__actions .btn { min-height: 40px; font-size: var(--text-sm); padding: 0 var(--space-4); border-radius: var(--radius-sm); }

/* Tab strip — white bar, Figma tab labels, 3px orange indicator.
   ⚠️ Docked under the portal nav while scrolling. When it scrolled away
   instead, the last thing to disappear behind the nav was the active tab's
   orange indicator: for a few pixels of scroll it sat just under the nav, to
   the right of the nav's own "My Businesses" underline, and read as a second,
   stray underline. Docked, the strip never slides partly under the nav. */
.biz-tabs {
  position: sticky;
  top: calc(var(--header-height) + var(--tap) + 1px);
  z-index: 20;
  box-shadow: var(--shadow-xs);
  display: flex;
  gap: var(--space-5);
  padding: 0 var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.biz-tabs::-webkit-scrollbar { display: none; }
.biz-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.biz-tab:hover { color: var(--text-brand); }
/* A mouse click must not leave a rectangle around the tab; the keyboard
   focus ring stays (inset, so the scrolling strip does not clip it). */
.biz-tab:focus { outline: none; }
.biz-tab:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; border-radius: var(--radius-xs); }
.biz-tab[aria-selected='true'] { color: var(--text-brand); font-weight: var(--weight-semibold); }
.biz-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand-accent);
}
.biz-tab__count {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* Left profile column + main panel. */
.biz-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
/* On a phone the tab content (what is due, what to do) comes before the
   profile cards; side by side from 960px. */
.biz-main { order: 1; min-width: 0; }
.biz-side { order: 2; min-width: 0; }
@media (min-width: 960px) {
  .biz-layout { grid-template-columns: 320px minmax(0, 1fr); }
  .biz-main { order: 2; }
  .biz-side { order: 1; }
}
@media (min-width: 1200px) {
  .biz-layout { grid-template-columns: 330px minmax(0, 1fr); }
}
.biz-side > .card + .card,
.biz-panel > .card + .card { margin-top: var(--space-4); }
.biz-side .card, .biz-panel .card { padding: 20px; }
.biz-side .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.biz-side .dl__val { font-size: var(--text-sm); }
.biz-panel[hidden] { display: none; }

.doc-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.doc-grid img { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ------------------------------------------- 13d. DASHBOARD */

/* Welcome bar — the same orange header bar as the business detail. */
.welcome {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: 14px;
  background: var(--brand-gradient);
  color: #fff;
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.welcome__mark {
  position: absolute;
  right: -18px; bottom: -26px;
  width: 150px;
  opacity: 0.14;
  pointer-events: none;
}
.welcome__text { position: relative; min-width: 0; flex: 1 1 280px; }
.welcome .page__eyebrow { color: #fff; opacity: 0.95; }
.welcome .page__title { color: #fff; }
.welcome .page__lead { color: #fff; opacity: 0.95; margin-bottom: 0; }
.welcome__actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-head .section-title { font-size: 1rem; }

/* ------------------------------------------- 13e. ACTION NEEDED (COMPLIANCE) */
/* BPLO asked for more (FOR COMPLIANCE). Amber, because it is the resident's
   turn — the one card on the page that must not be scrolled past. */
.comply {
  position: relative;
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--warning-border);
  border-left: 1px solid var(--warning-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-height) + var(--tap) + var(--space-4));
}
.comply:focus { outline: none; }
.comply:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.comply__head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.comply__icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--warning-surface);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  font-weight: var(--weight-heavy);
  font-size: 1.125rem;
}
.comply__eyebrow {
  margin: 0 0 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--warning-text);
}
.comply__title { font-size: 1.125rem; color: var(--text-heading); }
.comply__lead { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 70ch; }
.comply__note {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--warning-surface);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
}
.comply__note figcaption {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--warning-text);
  margin-bottom: var(--space-1);
}
.comply__note blockquote {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.comply__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.comply__meta .hint { margin-top: var(--space-2); }
.comply__count { flex: 0 0 auto; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.comply__docs {
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
}
.comply__docs > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.comply__docs > summary::-webkit-details-marker { display: none; }
.comply__docs .opt { color: var(--text-muted); font-weight: var(--weight-regular); margin-left: var(--space-1); }
.comply__docs > summary > span:first-child::before {
  content: '›';
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--text-brand);
  transition: transform var(--duration-fast) var(--ease-out);
}
.comply__docs[open] > summary > span:first-child::before { transform: rotate(90deg); }
.comply__docs[open] > summary { border-bottom: 1px solid var(--border-default); }
.comply__docs > .hint, .comply__docs > .stack { padding: 0 var(--space-4); }
.comply__docs > .hint { padding-top: var(--space-2); }
.comply__docs > .stack { padding-bottom: var(--space-4); }
.comply__actions { display: flex; justify-content: flex-end; }
@media (max-width: 560px) {
  .comply { padding: var(--space-4); }
  .comply__actions .btn { width: 100%; }
}

/* ------------------------------------------- 13f. DOCUMENT TILES + VIEWER */
.doc-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
button.doc-tile { appearance: none; }
.doc-tile__preview {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}
.doc-tile__preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* The first page, scaled to the tile and inert — the tile is the button. */
.doc-tile__pdf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  background: #fff;
}
.doc-tile__pdf .doc-file { position: absolute; inset: 0; }
.doc-tile__cap { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 2px 2px; }
.doc-tile__name {
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--danger-surface);
  color: var(--danger-text);
  font-size: 0.625rem;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc-badge--muted { background: var(--surface-sunken); color: var(--text-secondary); }
/* The icon card: a PDF that cannot be previewed, or any other file. */
.doc-file { display: grid; place-items: center; width: 100%; height: 100%; background: var(--surface-brand-tint); }
.doc-file__icon { position: relative; display: grid; place-items: center; color: var(--text-brand); }
.doc-file__icon svg { width: 44px; height: 44px; }
.doc-file__ext {
  position: absolute;
  bottom: 6px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--brand-fill);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
}

dialog.viewer {
  max-width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 2 * var(--gutter));
  display: none;
  flex-direction: column;
  overflow: hidden;
}
dialog.viewer[open] { display: flex; }
dialog.viewer:focus { outline: none; }
dialog.viewer--wide { max-width: min(960px, calc(100vw - 2 * var(--gutter))); }
.viewer__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
.viewer__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}
.viewer__close { flex: 0 0 auto; font-size: 1.5rem; color: var(--text-secondary); }
.viewer__body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--surface-sunken); }
.viewer__frame { display: block; width: 100%; height: min(75dvh, 900px); border: 0; background: #fff; }
.viewer__nopdf { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); text-align: center; }
.viewer__nopdf .doc-file { width: 96px; height: 96px; border-radius: var(--radius-md); }
.viewer__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-default);
}
.viewer__foot:empty { display: none; }
@media (max-width: 560px) {
  dialog.viewer, dialog.viewer--wide { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .viewer__frame { height: 70dvh; }
  .viewer__foot .btn { flex: 1 1 auto; }
}

/* ------------------------------------------- 13g. LOCATION MAP */
.map-card .card__head { flex-wrap: wrap; }
.map-box {
  position: relative;
  height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--surface-sunken);
  z-index: 0; /* keep Leaflet's panes under the sticky header and nav */
}
.map-box__skel { position: absolute; inset: 0; border-radius: 0; height: 100%; }
.map-box--empty { height: auto; border: 0; background: transparent; }
.map-empty { border-style: dashed; }
@media (max-width: 560px) { .map-box { height: 240px; } }
.map-pin { background: none; border: 0; }
.map-pin svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.map-veil {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.map-veil__chip {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}
.map-veil[hidden] { display: none; }
.leaflet-container { font-family: var(--font-sans); }
.leaflet-container a { font-weight: var(--weight-medium); }

/* ------------------------------------------- 13h. TAX ORDER OF PAYMENT */
.top-block { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--border-default); }
.top-block__pdf { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.top-block__tile { flex: 0 0 160px; max-width: 160px; }
.top-block__pdf .top-block__text { flex: 1 1 200px; }
.top-block__pdf .btn-row { margin-top: var(--space-2); }
.top-block--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.top-block__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-brand-tint);
  border: 1px solid var(--brand-100);
}
.top-block__text { flex: 1 1 220px; min-width: 0; font-size: var(--text-sm); }
@media (max-width: 560px) { .top-block--row .btn { width: 100%; } }

.top-doc-wrap { padding: var(--space-4); }
.top-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  background: #fff;
  color: #1e293b;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
}
.top-doc__head { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 3px solid #f97316; }
.top-doc__head img { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px; }
.top-doc__head p { margin: 0; }
.top-doc__gov { font-size: var(--text-xs); color: #475569; }
.top-doc__lgu { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: #c2410c; line-height: 1.2; }
.top-doc__office { font-weight: 600; }
.top-doc__title {
  margin: var(--space-5) 0 var(--space-4);
  text-align: center;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a2e;
}
.top-doc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
}
.top-doc__grid dt { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; }
.top-doc__grid dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.top-doc__wide { grid-column: 1 / -1; }
.top-doc__table-wrap { overflow-x: auto; }
.top-doc__table { width: 100%; border-collapse: collapse; }
.top-doc__table th, .top-doc__table td { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.top-doc__table th { background: #fff4ec; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9a3412; }
.top-doc__table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.top-doc__table tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid #1e293b; }
.top-doc__note { margin: var(--space-5) 0 var(--space-2); color: #475569; font-size: var(--text-xs); }
.top-doc__printed { margin: 0; color: #94a3b8; font-size: 0.6875rem; }
@media (max-width: 560px) {
  .top-doc-wrap { padding: var(--space-2); }
  .top-doc { padding: var(--space-4) var(--space-3); }
  .top-doc__table th, .top-doc__table td { padding: 6px; }
}
#printRoot { display: none; }

/* ------------------------------------------- 13i. NOTIFICATIONS */
.notif { position: relative; flex: 0 0 auto; }
.notif__btn { position: relative; color: var(--text-secondary); }
.notif__btn[aria-expanded='true'] { background: var(--surface-hover); color: var(--text-brand); }
.notif__badge {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand-fill);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--weight-heavy);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface-card);
}
.notif__badge[hidden] { display: none; }
.notif__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: 60;
  width: 360px;
  max-width: calc(100vw - 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  max-height: min(480px, calc(100dvh - var(--header-height) - 24px));
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.notif__panel[hidden] { display: none; }
.notif__panel:focus { outline: none; }
/* The caret, pointing at the bell. */
.notif__panel::before {
  content: '';
  position: absolute;
  top: -7px; right: 20px;
  width: 12px; height: 12px;
  background: var(--surface-card);
  border-left: 1px solid var(--border-default);
  border-top: 1px solid var(--border-default);
  transform: rotate(45deg);
}
.notif__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.notif__title { flex: 1 1 auto; font-size: var(--text-base); display: flex; align-items: center; gap: var(--space-2); }
.notif__title::before { content: ''; width: 14px; height: 3px; border-radius: 2px; background: var(--brand-accent); }
.notif__all {
  border: 0;
  background: none;
  padding: var(--space-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.notif__all:hover:not(:disabled) { background: var(--surface-hover); }
.notif__all:disabled { color: var(--text-muted); cursor: default; }
.notif__close { font-size: 1.375rem; color: var(--text-secondary); }
.notif__list { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); }
.notif__list .skeleton--row { height: 60px; margin: var(--space-2) 0; }
.notif__items { list-style: none; margin: 0; padding: 0; }
.notif__item {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.notif__item:hover { background: var(--surface-hover); }
.notif__item.is-unread { background: rgba(249, 115, 22, 0.08); }
.notif__item.is-unread:hover { background: rgba(249, 115, 22, 0.15); }
.notif__dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.notif__item.is-unread .notif__dot { background: var(--brand-accent); }
.notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif__item-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading); overflow-wrap: anywhere; }
.notif__item.is-unread .notif__item-title { font-weight: var(--weight-bold); }
.notif__msg {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.notif__time { font-size: var(--text-xs); color: var(--text-muted); }
.notif__empty { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-6) var(--space-4); text-align: center; }
.notif__empty-icon { font-size: 1.75rem; margin-bottom: var(--space-2); }
/* A phone: a full-width sheet under the header rather than a floating box. */
@media (max-width: 560px) {
  .notif { position: static; }
  .notif__panel {
    position: fixed;
    top: calc(var(--header-height) + 4px);
    left: 8px; right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--header-height) - 16px);
  }
  .notif__panel::before { display: none; }
}

/* ---------------------------------------------------------- 14. UTILITIES */

.stack > * + * { margin-top: var(--space-3); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-5); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.between { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; }

.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.bold { font-weight: var(--weight-semibold); }
.center { text-align: center; }
.nums { font-variant-numeric: tabular-nums; }
.brandtext { color: var(--text-brand); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break { overflow-wrap: break-word; word-break: break-word; }

.hidden { display: none !important; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }

/* ------------------------ 15. RESPONSIVE + REDUCED MOTION + PRINT */

@media (min-width: 640px) { :root { --gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 2rem; } }

/* Narrow: avatar + first name. A phone: avatar only would hide who is signed
   in, so the first name stays down to 390px. */
@media (max-width: 720px) {
  .app-header__name--full { display: none; }
  .app-header__name--first { display: inline; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.app-header__logout svg { display: none; }
@media (max-width: 560px) {
  /* Room for the bell and the name: Sign out becomes an icon (it keeps its
     aria-label), the theme toggle tightens up. */
  .app-header__logout { padding: 0; width: 40px; justify-content: center; }
  .app-header__logout svg { display: block; }
  .app-header__logout-label { display: none; }
  .app-header__inner { gap: var(--space-2); }
  .brand { gap: var(--space-2); }
  .app-header .btn--icon { min-width: 40px; }
  .avatar { width: 30px; height: 30px; }
  .app-header__name--first { max-width: 8ch; font-size: var(--text-sm); }
  .brand__sub { display: none; }
}
/* 390px: the wordmark, bell, avatar + first name and Sign out all have to
   fit. The appearance toggle gives way — the OS light/dark setting still
   applies. */
@media (max-width: 420px) {
  #themeBtn { display: none; }
  .brand__mark { width: 32px; height: 32px; flex-basis: 32px; }
  .brand__name { font-size: 0.875rem; }
  .app-header__name--first { max-width: 8ch; }
}

@media (max-width: 560px) {
  :root { --header-height: 60px; }
  .brand__mark { width: 36px; height: 36px; flex-basis: 36px; }
  /* Below 19px the wordmark is no longer "large text", so it moves to the
     5.2:1 brand text colour. */
  .brand__name { font-size: 0.9375rem; color: var(--text-brand); white-space: normal; line-height: 1.2; }
  .brand__sub { font-size: var(--text-xs); }
  .app-nav__inner { gap: var(--space-4); }
  .biz-hero { padding: var(--space-4); }
  .biz-hero__actions { width: 100%; }
  .biz-hero__actions .btn { flex: 1 1 auto; }
  .biz-tabs { padding: 0 var(--space-4); gap: var(--space-4); }
  .welcome { padding: var(--space-4); }
  .welcome__actions, .welcome__actions .btn { width: 100%; }
  .auth-card__title { font-size: 1.625rem; }
  .auth-brand__name { font-size: 1.25rem; }
  .auth-brand__sub { font-size: var(--text-sm); }
  .auth-brand__seal { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (max-width: 380px) {
  :root { --text-2xl: 1.6rem; --text-xl: 1.375rem; }
  .card { padding: var(--space-4); }
  .btn { padding: 0 var(--space-4); }
  .brand__sub { display: none; }
}

@media (max-width: 640px), (pointer: coarse) {
  .btn--sm, .biz-hero__actions .btn { min-height: var(--tap); }
  .brand, .app-header .btn { min-height: var(--tap); }
  .toast__close { min-width: 44px; min-height: 44px; }
  .auth-alt a, .app-footer a, .center > a { display: inline-block; padding: var(--space-2) 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton { animation: none; background: var(--surface-sunken); }
  .tile:hover, a.action:hover { transform: none; }
}

@media print {
  /* Printing the Tax Order of Payment: only #printRoot (top-doc.js). */
  body.print-root > *:not(#printRoot) { display: none !important; }
  body.print-root #printRoot { display: block !important; }
  body.print-root .top-doc { box-shadow: none; max-width: none; padding: 0; }
  body.print-root { display: block; background: #fff; }
  .app-header, .app-nav, .app-footer, .toast-host, .btn, .wizard-nav, .biz-tabs { display: none !important; }
  .biz-panel[hidden] { display: block !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #999; break-inside: avoid; }
  .page { max-width: none; padding: 0; }
  .biz-hero, .welcome { background: none; color: #000; border: 1px solid #999; }
  .biz-hero__name, .biz-hero__sub, .welcome .page__title { color: #000; }
}

/* ======================================================================
   16. SERVICE FORMS — New Permit wizard (app parity), Renew, Close, Amend
       and the Marilao-style compliance card. Tokens only; dark mode comes
       from section 2.
   ====================================================================== */

.mono { font-family: var(--font-mono); }
.page--narrow { max-width: 860px; }
.is-caps { text-transform: uppercase; }
.row.is-muted { opacity: 0.66; }

/* ── service page header (Marilao's back + title + business name) ─────── */
.svc-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.svc-head__back { flex: 0 0 auto; margin-left: calc(-1 * var(--space-3)); }
.svc-head__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--text-heading);
}
.svc-head__sub { margin-top: 4px; color: var(--text-brand); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

.svc-form { padding-bottom: var(--space-4); }
.svc-block { border: 0; margin: var(--space-5) 0 0; padding: 0; min-width: 0; }
.svc-block__h {
  display: block;
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}
.svc-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: linear-gradient(to top, var(--surface-card) 78%, transparent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (max-width: 380px) {
  .svc-actions { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* One pass, one answer: every problem listed beside the button pressed. */
.form-check {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger-border);
  border-left: 1px solid var(--danger-solid);
  border-radius: var(--radius-md);
  background: var(--danger-surface);
  color: var(--danger-text);
  font-size: var(--text-sm);
}
.form-check:focus { outline: none; }
.form-check__title { font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.form-check ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }

/* ── chips (payment mode, closure categories) ─────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.chip:hover span { border-color: var(--border-brand); background: var(--surface-hover); }
.chip input:checked + span {
  border-color: var(--brand-accent);
  background: var(--surface-brand-tint);
  color: var(--text-brand);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}
.chip input:checked + span::before { content: '✓'; font-weight: var(--weight-heavy); }
.chip input:focus-visible + span { box-shadow: var(--ring-brand); }
.chips--wrap .chip span { text-align: left; line-height: 1.3; }

/* ── gross per line (renewal) ─────────────────────────────────────────── */
.gross-line { padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.gross-line:first-child { border-top: 0; padding-top: 0; }
.gross-line__name { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.gross-line__sub { display: block; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-muted); }
.input-peso { position: relative; }
.input-peso > span {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-weight: var(--weight-semibold); pointer-events: none;
}
.input-peso > .input { padding-left: 32px; }
.gross-total {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3); padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--success-surface); border: 1px solid var(--success-border);
  color: var(--success-text); font-size: var(--text-sm);
}
.gross-total strong { font-size: 1.05rem; }

/* ── document rows (app's WizardDocUploadRow) ─────────────────────────── */
.docrows { display: grid; gap: var(--space-3); min-width: 0; }
.docrows__heading h3 { margin-top: var(--space-3); }
.docrow {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.docrow.is-required:not(.is-filled) { border-color: var(--border-brand); background: var(--surface-brand-tint); }
.docrow.is-filled { border-color: var(--success-border); }
.docrow__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.docrow__icon {
  flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  position: relative;
}
.docrow__icon::before {
  content: ''; position: absolute; inset: 9px;
  background: var(--brand-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.docrow.is-filled .docrow__icon { background: var(--success-surface); }
.docrow.is-filled .docrow__icon::before { background: var(--success-text); }
.docrow__text { min-width: 0; flex: 1 1 auto; }
.docrow__label { font-weight: var(--weight-semibold); color: var(--text-heading); overflow-wrap: anywhere; }
.docrow__badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-fill); color: #fff;
  font-size: 0.625rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; vertical-align: 2px;
}
.docrow__note { margin-top: 2px; font-size: var(--text-sm); color: var(--text-secondary); }
.docrow__status { margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.docrow.is-filled .docrow__status { color: var(--success-text); font-weight: var(--weight-semibold); }
.docrow__warn { margin-top: 4px; font-size: var(--text-xs); color: var(--warning-text); font-weight: var(--weight-semibold); }
.docrow__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.docrow__pick { position: relative; overflow: hidden; }
.docrow__pick input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.docrow__pick:focus-within { box-shadow: var(--ring-brand); }
.docrow__pdf { border-color: var(--danger-border); color: var(--danger-text); }
.docrow__files { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.docfile {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
}
.docfile__thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden;
  display: grid; place-items: center; background: var(--surface-sunken);
}
.docfile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.docfile__pdf { font-size: 0.625rem; font-weight: var(--weight-heavy); color: var(--danger-text); }
.docfile__meta { min-width: 0; display: flex; flex-direction: column; }
.docfile__name { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docfile__size { font-size: var(--text-xs); color: var(--text-muted); }
.docfile .btn--sm { padding: 0 10px; }
.docfile__rm { color: var(--danger-text); }
@media (max-width: 420px) {
  .docfile { grid-template-columns: 40px minmax(0, 1fr); }
  .docfile__thumb { width: 40px; height: 40px; }
  .docfile .btn--sm { grid-column: span 1; }
  .docfile [data-view] { grid-column: 1 / 2; grid-row: 2; }
  .docfile__rm { grid-column: 2 / 3; grid-row: 2; justify-self: start; }
}

/* ── New Permit wizard ────────────────────────────────────────────────── */
.wiz-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.wiz-top__back { margin-left: calc(-1 * var(--space-3)); }
.wiz-top__title { flex: 1 1 auto; font-weight: var(--weight-semibold); color: var(--text-heading); }
.wiz__head { text-align: left; margin-bottom: var(--space-4); }
.wiz__privacy-title {
  text-align: center; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-heading);
}
.wiz__eff { text-align: center; color: var(--text-muted); font-size: var(--text-sm); margin-top: 4px; }
.wiz__stephead { display: flex; align-items: center; gap: var(--space-3); }
.wiz__icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--surface-brand-tint); color: var(--text-brand);
}
.wiz__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-heading); line-height: 1.2; }
.wiz__title:focus, .wiz__privacy-title:focus { outline: none; }
.wiz__count { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-5); }
.wiz__fields { min-width: 0; }
.wiz__section {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-heading);
}
.wiz__nav { align-items: center; flex-wrap: nowrap; }
.wiz__nav .wiz__backbtn { flex: 0 0 48px; width: 48px; min-width: 48px; padding: 0; border-radius: 50%; }
.wiz__nav .wiz__next { flex: 1 1 auto; border-radius: 23px; }
@media (min-width: 640px) {
  .wiz__nav { justify-content: flex-start; }
  .wiz__nav .wiz__next { flex: 1 1 auto; min-width: 0; }
}

.privacy__sec + .privacy__sec { margin-top: var(--space-4); }
.privacy__h { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-heading); margin-bottom: 6px; }
.privacy__sec p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); margin: 0 0 var(--space-2); }
.privacy__ack { margin-top: var(--space-5); font-size: var(--text-sm); font-style: italic; color: var(--text-muted); line-height: var(--leading-normal); }
.privacy__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
.privacy__actions .btn { border-radius: 23px; font-size: var(--text-sm); letter-spacing: 0.02em; white-space: normal; text-align: center; padding: 0 var(--space-3); }

/* shaded groups — the app's _counterGroup / _fieldGroup */
.fgroup {
  margin-bottom: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  min-width: 0;
}
.fgroup--capital { background: var(--surface-brand-tint); border-color: var(--brand-200); }
.fgroup__title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-heading); margin-bottom: var(--space-3); }
.fgroup__title--brand { color: var(--text-brand); }
.fgroup__note { font-size: var(--text-sm); color: var(--text-secondary); margin: -6px 0 var(--space-4); line-height: var(--leading-snug); }

/* switch — the app's SwitchListTile */
.switch {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap); margin: 0 0 var(--space-4); padding: var(--space-3) 0;
  cursor: pointer; position: relative;
}
.switch__text { flex: 1 1 auto; min-width: 0; }
.switch__label { display: block; font-weight: var(--weight-medium); color: var(--text-primary); }
.switch__hint { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; line-height: var(--leading-snug); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  flex: 0 0 48px; width: 48px; height: 28px; border-radius: 14px;
  background: var(--border-strong); position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}
.switch__track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--brand-fill); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring-brand); }

/* combobox (line of business) */
.combo { position: relative; }
.combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: 4px; list-style: none;
  max-height: 280px; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.combo__opt {
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--text-sm); color: var(--text-primary); overflow-wrap: anywhere;
}
.combo__opt:hover, .combo__opt[aria-selected='true'] { background: var(--surface-hover); color: var(--text-brand); }

/* review — the app's _reviewSection cards */
.review-card {
  margin-bottom: var(--space-4); padding: var(--space-4);
  border: 1px solid var(--border-default); border-radius: 20px; background: var(--surface-card);
}
.review-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.review-card__title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-brand); }
.review-card__rows { margin: 0; }
.review-row {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: var(--space-3);
  padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm);
}
.review-row:first-child { border-top: 0; }
.review-row dt { color: var(--text-muted); }
.review-row dd { margin: 0; text-align: right; font-weight: var(--weight-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.review-row dd.is-empty { color: var(--text-muted); font-weight: var(--weight-regular); }
.review-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.review-docs li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); overflow-wrap: anywhere; min-width: 0; }
.review-docs__tick {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-fill); color: #fff; font-size: 0.75rem;
}
.certify { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); }

/* success — the app's "Application Submitted!" frame */
.success { text-align: center; padding: var(--space-6) var(--space-5); }
.success__badge {
  width: 120px; height: 120px; margin: 0 auto var(--space-5);
  border-radius: 50%; display: grid; place-items: center; background: var(--brand-50);
}
.success__badge span {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-accent); color: #fff; font-size: 2.5rem; font-weight: var(--weight-bold);
  box-shadow: 0 8px 10px rgba(249, 115, 22, 0.25);
}
.success__title { font-family: var(--font-display); font-size: 1.375rem; color: var(--text-brand); }
.success__title:focus { outline: none; }
.success__text { max-width: 52ch; margin: var(--space-3) auto 0; color: var(--text-secondary); line-height: var(--leading-normal); }
.success__ref { margin-top: var(--space-3); color: var(--text-secondary); }
.success__facts { display: grid; gap: var(--space-2); max-width: 360px; margin: var(--space-4) auto; text-align: left; }
.success__facts div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-inset); font-size: var(--text-sm); }
.success__facts dt { color: var(--text-muted); }
.success__facts dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.success .banner { text-align: left; margin-top: var(--space-4); }
.success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.success__actions .btn { border-radius: var(--radius-pill); }
@media (max-width: 560px) { .success__actions .btn { flex: 1 1 100%; } }

/* settle first (closure blocked by dues) */
.settle { border-color: var(--warning-border); border-left: 1px solid var(--warning-solid); }
.settle__head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.settle__icon {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--warning-surface); color: var(--warning-text); font-weight: var(--weight-heavy);
}
.settle__title { font-size: var(--text-base); color: var(--text-heading); margin-bottom: 4px; }
.settle p { color: var(--text-secondary); font-size: var(--text-sm); }

/* ── Amendment (Marilao's selectable cards) ───────────────────────────── */
.amd-kinds { display: grid; gap: var(--space-3); margin: var(--space-5) 0 var(--space-2); }
@media (min-width: 640px) { .amd-kinds { grid-template-columns: 1fr 1fr; } }
.amd-kind {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: 72px; padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-card); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.amd-kind:hover { border-color: var(--border-brand); background: var(--surface-hover); }
.amd-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.amd-kind__ic {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700);
}
.amd-kind__ic svg { width: 22px; height: 22px; }
.amd-kind__tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.amd-kind__tx b { color: var(--text-heading); }
.amd-kind__tx small { font-size: var(--text-sm); color: var(--text-secondary); }
.amd-kind__check {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-strong); display: grid; place-items: center;
}
.amd-kind:has(input:checked) {
  border-color: var(--brand-accent); background: var(--surface-brand-tint);
  box-shadow: 0 0 0 1px var(--brand-accent) inset;
}
.amd-kind:has(input:checked) .amd-kind__ic { background: var(--brand-fill); color: #fff; }
.amd-kind:has(input:checked) .amd-kind__check { background: var(--brand-fill); border-color: var(--brand-fill); }
.amd-kind:has(input:checked) .amd-kind__check::after { content: '✓'; color: #fff; font-size: 0.75rem; font-weight: var(--weight-heavy); }
.amd-kind:has(input:focus-visible) { box-shadow: var(--ring-brand); }
.amd-section {
  margin-top: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-lg); background: var(--surface-inset); border: 1px solid var(--border-subtle);
}
.amd-section__h { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-brand); margin-bottom: var(--space-3); }
.amd-onfile { margin-top: 4px; }
.amd-onfile b { color: var(--text-primary); overflow-wrap: anywhere; }
.amd-h { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-heading); }
.amd-h .opt { font-weight: var(--weight-regular); color: var(--text-muted); font-size: var(--text-sm); }
.amd-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.amd-chips:empty { display: none; }
.amd-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 40px; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--surface-card);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary);
  overflow-wrap: anywhere; text-align: left;
}
button.amd-chip { cursor: pointer; }
.amd-chip small { font-weight: var(--weight-regular); color: var(--danger-text); }
.amd-chip.is-cur:hover { border-color: var(--danger-border); background: var(--danger-surface); }
.amd-chip.is-add { background: var(--success-surface); border-color: var(--success-border); color: var(--success-text); }
.amd-chip.is-rm { background: var(--danger-surface); border-color: var(--danger-border); color: var(--danger-text); text-decoration: line-through; }
.amd-chip button {
  border: 0; background: none; color: inherit; cursor: pointer; font-size: 1.1rem; line-height: 1;
  min-width: 28px; min-height: 28px; text-decoration: none;
}
.amd-line-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); }
@media (max-width: 480px) {
  .amd-line-row { grid-template-columns: 1fr 1fr; }
  .amd-line-row > .combo, .amd-line-row > .input { grid-column: 1 / -1; }
}
.amd-preview { display: grid; gap: var(--space-2); }
.amd-change { padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-subtle); }
.amd-change__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.amd-change__vals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; font-size: var(--text-sm); overflow-wrap: anywhere; }
.amd-old { color: var(--text-muted); text-decoration: line-through; }
.amd-arrow { color: var(--text-brand); font-weight: var(--weight-bold); }
.amd-new { color: var(--text-heading); font-weight: var(--weight-semibold); }

.modal--wide { max-width: min(640px, calc(100vw - 2 * var(--gutter))); }
.sum__lgu { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.sum__title { font-size: var(--text-lg); color: var(--text-heading); margin: 4px 0 var(--space-3); }
.sum__facts { display: grid; gap: 6px; margin: 0 0 var(--space-4); }
.sum__facts div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.sum__facts dt { color: var(--text-muted); }
.sum__facts dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; overflow-wrap: anywhere; }
.sum__h { margin: var(--space-4) 0 6px; font-weight: var(--weight-bold); color: var(--text-heading); }
.sum__list { margin: 0 0 var(--space-3); padding-left: 1.1rem; font-size: var(--text-sm); display: grid; gap: 4px; }
.sum-print { max-width: 720px; margin: 0 auto; padding: 24px; color: #000; }

/* ── Compliance — Marilao's "Action needed" callout, highlighted ─────── */
.comply--alert {
  border: 1px solid var(--warning-border);
  border-left: 1px solid var(--brand-fill);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface-card) 160px);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12), var(--shadow-md);
}
.comply--alert .comply__icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--brand-fill); border-color: var(--brand-fill); color: #fff;
}
.comply--alert .comply__eyebrow { color: var(--text-brand); }
.comply__docs-h {
  margin: var(--space-4) 0 6px;
  font-size: var(--text-xs); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-brand);
}
.comply__needs { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 7px; }
.comply__needs li {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: 10px 12px 10px 34px; border-radius: 11px;
  background: var(--surface-card); border: 1px solid var(--brand-300);
  font-weight: var(--weight-semibold); color: var(--text-heading); font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.comply__needs li::before {
  content: ''; position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-100);
}
.comply__need-state { flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--warning-text); }
.comply__needs li.is-done { border-color: var(--success-border); background: var(--success-surface); }
.comply__needs li.is-done::before { background: var(--success-solid); box-shadow: 0 0 0 3px var(--success-border); }
.comply__needs li.is-done .comply__need-state { color: var(--success-text); }
.comply__h { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-heading); margin: var(--space-4) 0 var(--space-2); }
.comply__actions { align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.comply__progress { font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--weight-semibold); }

/* dashboard "Needs your attention" — the compliance row stands out */
.row--alert {
  border: 1px solid var(--brand-300);
  border-left: 1px solid var(--brand-fill);
  background: var(--surface-brand-tint);
  align-items: flex-start;
}
.row--alert__icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-fill); color: #fff; font-weight: var(--weight-heavy);
}
.row__eyebrow { font-size: var(--text-xs); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand); }
.row__meta--wrap { white-space: normal; overflow: visible; }
@media (max-width: 480px) {
  .row--alert { flex-wrap: wrap; }
  .row--alert .row__aside { width: 100%; }
  .row--alert .row__aside .btn { flex: 1 1 auto; }
}
.is-caps::placeholder { text-transform: none; }
/* In the add/remove row the suggestions push the buttons down instead of covering them. */
.amd-line-row .combo__list { position: static; margin-top: 4px; }
.banner[hidden], .form-check[hidden] { display: none; }
@media (max-width: 480px) {
  .row--alert .row__main { flex: 1 1 calc(100% - 48px); }
}
.svc-block + .field { margin-top: var(--space-5); }

/* ------------------------------------------ direct uploads (js/direct-upload.js)
   Per-file progress while documents are PUT straight to storage. */
.upl[hidden] { display: none; }
.upl {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  min-width: 0;
}
.upl__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-2); }
.upl__title { font-weight: var(--weight-semibold); color: var(--text-heading); font-size: var(--text-sm); }
.upl__sum { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.upl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.upl__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--space-3);
  font-size: var(--text-sm);
}
.upl__name { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); }
.upl__name small { color: var(--text-muted); font-size: var(--text-xs); }
.upl__state { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.upl__bar { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-pill); background: var(--border-default); overflow: hidden; }
.upl__fill { display: block; height: 100%; background: var(--brand-accent); transition: width 160ms ease-out; }
.upl__item[data-state='done'] .upl__state { color: var(--success-text); }
.upl__item[data-state='done'] .upl__fill { background: var(--success-solid); }
.upl__item[data-state='fail'] .upl__state { color: var(--danger-text); }
.upl__item[data-state='fail'] .upl__fill { background: var(--danger-solid); }
.upl__msg {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--danger-surface);
  color: var(--danger-text);
  font-size: var(--text-sm);
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between;
}
.upl__msg[hidden] { display: none; }
.upl__msg > span { flex: 1 1 16rem; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .upl__fill { transition: none; } }

/* one-of document rows (closure checklist `accepts`) */
.docrow__oneof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.docrow__oneof-h { flex: 1 1 100%; font-size: var(--text-xs); color: var(--text-secondary); }
.chip--sm span { padding: 4px 10px; font-size: var(--text-xs); }
.docs-progress { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-brand); }
.docs-progress:empty { display: none; }
.docs-progress.is-done { color: var(--success-text); }

/* amendment: pending / closed notice and the request history */
.amd-block__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.amd-block__ic { flex: 0 0 auto; font-size: 1.25rem; line-height: 1.4; }
.amd-block--pending { border-color: var(--warning-border); background: var(--warning-surface); }
.amd-block--pending .muted { color: var(--warning-text); }
.amd-hist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.amd-hist__item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: grid; gap: var(--space-2);
  min-width: 0;
}
.amd-hist__item[data-status='PENDING'] { border-color: var(--warning-border); }
.amd-hist__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.amd-hist__title { margin: 0; font-weight: var(--weight-semibold); color: var(--text-heading); }
.amd-hist__meta { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.amd-hist__docs { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.amd-hist__note { margin: 0; font-size: var(--text-sm); color: var(--success-text); }
.amd-hist__remarks { margin: 0; padding: var(--space-2) var(--space-3); border-left: 1px solid var(--brand-accent); background: var(--surface-inset); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.amd-hist__remarks.is-rejected { border-left-color: var(--danger-solid); }
.amd-hist__remarks figcaption { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.amd-hist__remarks blockquote { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-primary); overflow-wrap: anywhere; }
.amd-hist__actions { display: flex; justify-content: flex-end; }
#amdTop > * + *, #amdTop + #amdHistory > .card { margin-top: var(--space-4); }
.svc-block__h .opt { font-weight: var(--weight-regular); color: var(--text-muted); font-size: var(--text-sm); margin-left: 4px; }

/* ============================================================================
   16. STATUS COLOURS — docs/status-colors.md (owner, 2026-09-24)
   ============================================================================
   Fifteen tones, one palette for every CSJDM surface. Each pill is a soft
   background, dark text and a dot in the solid colour. Dark mode keeps the
   hue: the solid at 20% for the background, a lighter shade for the text.
   The label always sits beside the colour; ui.js::statusTone picks the tone. */

:root {
  --tone-slate-solid: #64748B; --tone-slate-soft: #F1F5F9; --tone-slate-text: #334155;
  --tone-blue-solid: #2563EB; --tone-blue-soft: #DBEAFE; --tone-blue-text: #1E40AF;
  --tone-violet-solid: #7C3AED; --tone-violet-soft: #EDE9FE; --tone-violet-text: #5B21B6;
  --tone-indigo-solid: #4F46E5; --tone-indigo-soft: #E0E7FF; --tone-indigo-text: #3730A3;
  --tone-cyan-solid: #0891B2; --tone-cyan-soft: #CFFAFE; --tone-cyan-text: #155E75;
  --tone-amber-solid: #D97706; --tone-amber-soft: #FEF3C7; --tone-amber-text: #92400E;
  --tone-orange-solid: #EA580C; --tone-orange-soft: #FFEDD5; --tone-orange-text: #9A3412;
  --tone-sky-solid: #0284C7; --tone-sky-soft: #E0F2FE; --tone-sky-text: #075985;
  --tone-teal-solid: #0D9488; --tone-teal-soft: #CCFBF1; --tone-teal-text: #115E59;
  --tone-lime-solid: #65A30D; --tone-lime-soft: #ECFCCB; --tone-lime-text: #3F6212;
  --tone-green-solid: #16A34A; --tone-green-soft: #DCFCE7; --tone-green-text: #166534;
  --tone-red-solid: #DC2626; --tone-red-soft: #FEE2E2; --tone-red-text: #991B1B;
  --tone-pink-solid: #DB2777; --tone-pink-soft: #FCE7F3; --tone-pink-text: #9D174D;
  --tone-gray-solid: #6B7280; --tone-gray-soft: #F3F4F6; --tone-gray-text: #374151;
  --tone-purple-solid: #9333EA; --tone-purple-soft: #F3E8FF; --tone-purple-text: #6B21A8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  --tone-slate-soft: rgba(100, 116, 139, 0.2); --tone-slate-text: #cbd5e1;
  --tone-blue-soft: rgba(37, 99, 235, 0.2); --tone-blue-text: #93c5fd;
  --tone-violet-soft: rgba(124, 58, 237, 0.2); --tone-violet-text: #c4b5fd;
  --tone-indigo-soft: rgba(79, 70, 229, 0.2); --tone-indigo-text: #a5b4fc;
  --tone-cyan-soft: rgba(8, 145, 178, 0.2); --tone-cyan-text: #67e8f9;
  --tone-amber-soft: rgba(217, 119, 6, 0.2); --tone-amber-text: #fcd34d;
  --tone-orange-soft: rgba(234, 88, 12, 0.2); --tone-orange-text: #fdba74;
  --tone-sky-soft: rgba(2, 132, 199, 0.2); --tone-sky-text: #7dd3fc;
  --tone-teal-soft: rgba(13, 148, 136, 0.2); --tone-teal-text: #5eead4;
  --tone-lime-soft: rgba(101, 163, 13, 0.2); --tone-lime-text: #bef264;
  --tone-green-soft: rgba(22, 163, 74, 0.2); --tone-green-text: #86efac;
  --tone-red-soft: rgba(220, 38, 38, 0.2); --tone-red-text: #fca5a5;
  --tone-pink-soft: rgba(219, 39, 119, 0.2); --tone-pink-text: #f9a8d4;
  --tone-gray-soft: rgba(107, 114, 128, 0.2); --tone-gray-text: #d1d5db;
  --tone-purple-soft: rgba(147, 51, 234, 0.2); --tone-purple-text: #d8b4fe;
  }
}
:root[data-theme='dark'] {
  --tone-slate-soft: rgba(100, 116, 139, 0.2); --tone-slate-text: #cbd5e1;
  --tone-blue-soft: rgba(37, 99, 235, 0.2); --tone-blue-text: #93c5fd;
  --tone-violet-soft: rgba(124, 58, 237, 0.2); --tone-violet-text: #c4b5fd;
  --tone-indigo-soft: rgba(79, 70, 229, 0.2); --tone-indigo-text: #a5b4fc;
  --tone-cyan-soft: rgba(8, 145, 178, 0.2); --tone-cyan-text: #67e8f9;
  --tone-amber-soft: rgba(217, 119, 6, 0.2); --tone-amber-text: #fcd34d;
  --tone-orange-soft: rgba(234, 88, 12, 0.2); --tone-orange-text: #fdba74;
  --tone-sky-soft: rgba(2, 132, 199, 0.2); --tone-sky-text: #7dd3fc;
  --tone-teal-soft: rgba(13, 148, 136, 0.2); --tone-teal-text: #5eead4;
  --tone-lime-soft: rgba(101, 163, 13, 0.2); --tone-lime-text: #bef264;
  --tone-green-soft: rgba(22, 163, 74, 0.2); --tone-green-text: #86efac;
  --tone-red-soft: rgba(220, 38, 38, 0.2); --tone-red-text: #fca5a5;
  --tone-pink-soft: rgba(219, 39, 119, 0.2); --tone-pink-text: #f9a8d4;
  --tone-gray-soft: rgba(107, 114, 128, 0.2); --tone-gray-text: #d1d5db;
  --tone-purple-soft: rgba(147, 51, 234, 0.2); --tone-purple-text: #d8b4fe;
}

.pill[data-tone='slate'], .tone-slate { --p-solid: var(--tone-slate-solid); --p-soft: var(--tone-slate-soft); --p-text: var(--tone-slate-text); }
.pill[data-tone='blue'], .tone-blue { --p-solid: var(--tone-blue-solid); --p-soft: var(--tone-blue-soft); --p-text: var(--tone-blue-text); }
.pill[data-tone='violet'], .tone-violet { --p-solid: var(--tone-violet-solid); --p-soft: var(--tone-violet-soft); --p-text: var(--tone-violet-text); }
.pill[data-tone='indigo'], .tone-indigo { --p-solid: var(--tone-indigo-solid); --p-soft: var(--tone-indigo-soft); --p-text: var(--tone-indigo-text); }
.pill[data-tone='cyan'], .tone-cyan { --p-solid: var(--tone-cyan-solid); --p-soft: var(--tone-cyan-soft); --p-text: var(--tone-cyan-text); }
.pill[data-tone='amber'], .tone-amber { --p-solid: var(--tone-amber-solid); --p-soft: var(--tone-amber-soft); --p-text: var(--tone-amber-text); }
.pill[data-tone='orange'], .tone-orange { --p-solid: var(--tone-orange-solid); --p-soft: var(--tone-orange-soft); --p-text: var(--tone-orange-text); }
.pill[data-tone='sky'], .tone-sky { --p-solid: var(--tone-sky-solid); --p-soft: var(--tone-sky-soft); --p-text: var(--tone-sky-text); }
.pill[data-tone='teal'], .tone-teal { --p-solid: var(--tone-teal-solid); --p-soft: var(--tone-teal-soft); --p-text: var(--tone-teal-text); }
.pill[data-tone='lime'], .tone-lime { --p-solid: var(--tone-lime-solid); --p-soft: var(--tone-lime-soft); --p-text: var(--tone-lime-text); }
.pill[data-tone='green'], .tone-green { --p-solid: var(--tone-green-solid); --p-soft: var(--tone-green-soft); --p-text: var(--tone-green-text); }
.pill[data-tone='red'], .tone-red { --p-solid: var(--tone-red-solid); --p-soft: var(--tone-red-soft); --p-text: var(--tone-red-text); }
.pill[data-tone='pink'], .tone-pink { --p-solid: var(--tone-pink-solid); --p-soft: var(--tone-pink-soft); --p-text: var(--tone-pink-text); }
.pill[data-tone='gray'], .tone-gray { --p-solid: var(--tone-gray-solid); --p-soft: var(--tone-gray-soft); --p-text: var(--tone-gray-text); }
.pill[data-tone='purple'], .tone-purple { --p-solid: var(--tone-purple-solid); --p-soft: var(--tone-purple-soft); --p-text: var(--tone-purple-text); }

/* Legacy tone names still used by a few call sites map onto the palette. */
.pill[data-tone='success'] { --p-solid: var(--tone-green-solid); --p-soft: var(--tone-green-soft); --p-text: var(--tone-green-text); }
.pill[data-tone='warning'] { --p-solid: var(--tone-amber-solid); --p-soft: var(--tone-amber-soft); --p-text: var(--tone-amber-text); }
.pill[data-tone='danger'] { --p-solid: var(--tone-red-solid); --p-soft: var(--tone-red-soft); --p-text: var(--tone-red-text); }
.pill[data-tone='info'] { --p-solid: var(--tone-blue-solid); --p-soft: var(--tone-blue-soft); --p-text: var(--tone-blue-text); }
.pill[data-tone='neutral'] { --p-solid: var(--tone-slate-solid); --p-soft: var(--tone-slate-soft); --p-text: var(--tone-slate-text); }
.pill[data-tone='brand'] { --p-solid: var(--tone-orange-solid); --p-soft: var(--tone-orange-soft); --p-text: var(--tone-orange-text); }

.pill[data-tone] {
  background: var(--p-soft);
  color: var(--p-text);
  border-color: color-mix(in srgb, var(--p-solid) 28%, transparent);
}
.pill[data-tone]::before {
  content: '';
  flex: 0 0 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p-solid);
}

/* The status chip in the orange business header: white chip, tone text + dot,
   so it reads on the orange band in both themes. */
.biz-hero__status[data-tone] { background: #fff; color: var(--tone-text-on-white, var(--p-text)); }
.biz-hero__status[data-tone]::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--p-solid);
}
.biz-hero__status[data-tone='slate'] { --p-solid: #64748B; --tone-text-on-white: #334155; }
.biz-hero__status[data-tone='blue'] { --p-solid: #2563EB; --tone-text-on-white: #1E40AF; }
.biz-hero__status[data-tone='violet'] { --p-solid: #7C3AED; --tone-text-on-white: #5B21B6; }
.biz-hero__status[data-tone='indigo'] { --p-solid: #4F46E5; --tone-text-on-white: #3730A3; }
.biz-hero__status[data-tone='cyan'] { --p-solid: #0891B2; --tone-text-on-white: #155E75; }
.biz-hero__status[data-tone='amber'] { --p-solid: #D97706; --tone-text-on-white: #92400E; }
.biz-hero__status[data-tone='orange'] { --p-solid: #EA580C; --tone-text-on-white: #9A3412; }
.biz-hero__status[data-tone='sky'] { --p-solid: #0284C7; --tone-text-on-white: #075985; }
.biz-hero__status[data-tone='teal'] { --p-solid: #0D9488; --tone-text-on-white: #115E59; }
.biz-hero__status[data-tone='lime'] { --p-solid: #65A30D; --tone-text-on-white: #3F6212; }
.biz-hero__status[data-tone='green'] { --p-solid: #16A34A; --tone-text-on-white: #166534; }
.biz-hero__status[data-tone='red'] { --p-solid: #DC2626; --tone-text-on-white: #991B1B; }
.biz-hero__status[data-tone='pink'] { --p-solid: #DB2777; --tone-text-on-white: #9D174D; }
.biz-hero__status[data-tone='gray'] { --p-solid: #6B7280; --tone-text-on-white: #374151; }
.biz-hero__status[data-tone='purple'] { --p-solid: #9333EA; --tone-text-on-white: #6B21A8; }

/* Dashboard status cards take the same tones. */
.stat[data-tone] .stat__icon { background: var(--p-soft); color: var(--p-text); }
.stat[data-tone] .stat__bar > span { background: var(--p-solid); }
.stat[data-tone='slate'] { --p-solid: var(--tone-slate-solid); --p-soft: var(--tone-slate-soft); --p-text: var(--tone-slate-text); }
.stat[data-tone='blue'] { --p-solid: var(--tone-blue-solid); --p-soft: var(--tone-blue-soft); --p-text: var(--tone-blue-text); }
.stat[data-tone='violet'] { --p-solid: var(--tone-violet-solid); --p-soft: var(--tone-violet-soft); --p-text: var(--tone-violet-text); }
.stat[data-tone='indigo'] { --p-solid: var(--tone-indigo-solid); --p-soft: var(--tone-indigo-soft); --p-text: var(--tone-indigo-text); }
.stat[data-tone='cyan'] { --p-solid: var(--tone-cyan-solid); --p-soft: var(--tone-cyan-soft); --p-text: var(--tone-cyan-text); }
.stat[data-tone='amber'] { --p-solid: var(--tone-amber-solid); --p-soft: var(--tone-amber-soft); --p-text: var(--tone-amber-text); }
.stat[data-tone='orange'] { --p-solid: var(--tone-orange-solid); --p-soft: var(--tone-orange-soft); --p-text: var(--tone-orange-text); }
.stat[data-tone='sky'] { --p-solid: var(--tone-sky-solid); --p-soft: var(--tone-sky-soft); --p-text: var(--tone-sky-text); }
.stat[data-tone='teal'] { --p-solid: var(--tone-teal-solid); --p-soft: var(--tone-teal-soft); --p-text: var(--tone-teal-text); }
.stat[data-tone='lime'] { --p-solid: var(--tone-lime-solid); --p-soft: var(--tone-lime-soft); --p-text: var(--tone-lime-text); }
.stat[data-tone='green'] { --p-solid: var(--tone-green-solid); --p-soft: var(--tone-green-soft); --p-text: var(--tone-green-text); }
.stat[data-tone='red'] { --p-solid: var(--tone-red-solid); --p-soft: var(--tone-red-soft); --p-text: var(--tone-red-text); }
.stat[data-tone='pink'] { --p-solid: var(--tone-pink-solid); --p-soft: var(--tone-pink-soft); --p-text: var(--tone-pink-text); }
.stat[data-tone='gray'] { --p-solid: var(--tone-gray-solid); --p-soft: var(--tone-gray-soft); --p-text: var(--tone-gray-text); }
.stat[data-tone='purple'] { --p-solid: var(--tone-purple-solid); --p-soft: var(--tone-purple-soft); --p-text: var(--tone-purple-text); }

/* A notification whose payload carries a status gets a tinted dot. */
.notif__item .pill { align-self: flex-start; margin-top: 2px; }

/* ============================================================================
   17. IDENTITY GATE, LOCKS, SIGN-UP STEPPER, KYC CAPTURE (2026-09-24)
   ============================================================================
   Figma file 5dZysrknyZvFguI8hkgsD5, Page 1: "sign up - personal information",
   "sign up - otp", "sign up - security setup", "sign-up-success", "kyc-pending",
   "Step 1: Account Info" and "medical-identity-check-camera" (oval guide),
   adapted from 440px phone frames to the web layout. The orange halo around a
   round status icon is the recurring motif. */

/* ── tone plumbing for the components below ── */
.kyc-gate, .kyc-inline, .kyc-banner, .kyc-status, .su-done {
  --g-solid: var(--tone-slate-solid); --g-soft: var(--tone-slate-soft); --g-text: var(--tone-slate-text);
}
[data-tone='slate'].kyc-gate, [data-tone='slate'].kyc-inline, [data-tone='slate'].kyc-banner, [data-tone='slate'].kyc-status { --g-solid: var(--tone-slate-solid); --g-soft: var(--tone-slate-soft); --g-text: var(--tone-slate-text); }
[data-tone='amber'].kyc-gate, [data-tone='amber'].kyc-inline, [data-tone='amber'].kyc-banner, [data-tone='amber'].kyc-status { --g-solid: var(--tone-amber-solid); --g-soft: var(--tone-amber-soft); --g-text: var(--tone-amber-text); }
[data-tone='red'].kyc-gate, [data-tone='red'].kyc-inline, [data-tone='red'].kyc-banner, [data-tone='red'].kyc-status { --g-solid: var(--tone-red-solid); --g-soft: var(--tone-red-soft); --g-text: var(--tone-red-text); }
[data-tone='green'].kyc-gate, [data-tone='green'].kyc-inline, [data-tone='green'].kyc-banner, [data-tone='green'].kyc-status, .su-done { --g-solid: var(--tone-green-solid); --g-soft: var(--tone-green-soft); --g-text: var(--tone-green-text); }
[data-tone='orange'].kyc-status { --g-solid: var(--tone-orange-solid); --g-soft: var(--tone-orange-soft); --g-text: var(--tone-orange-text); }

/* ── lock hint on gated links ── */
.lock-badge {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%;
  background: var(--tone-slate-soft);
  color: var(--tone-slate-text);
  margin-left: 2px;
}
.lock-badge svg { width: 12px; height: 12px; }
.btn--on-brand .lock-badge, .btn--on-brand-outline .lock-badge { background: rgba(255,255,255,.9); color: var(--brand-900); }
.action { position: relative; }
.action > .lock-badge { position: absolute; top: 10px; right: 10px; margin: 0; }
.action.is-locked .action__icon { filter: grayscale(.4); opacity: .8; }

/* ── the halo ── */
.halo {
  width: 104px; height: 104px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--g-solid, var(--brand-accent)) 14%, transparent);
  margin: 0 auto var(--space-4);
}
.halo > span {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--g-solid, var(--brand-accent));
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--g-solid, var(--brand-accent)) 35%, transparent);
}
.halo svg { width: 32px; height: 32px; }

/* ── full gate panel ── */
.kyc-gate {
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-top: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
  max-width: 640px;
  margin: 0 auto;
}
.kyc-gate:focus { outline: none; }
.kyc-gate__halo {
  width: 104px; height: 104px; margin: 0 auto var(--space-4);
  border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--g-solid) 14%, transparent);
}
.kyc-gate__icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--g-solid); color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--g-solid) 35%, transparent);
}
.kyc-gate__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: var(--space-3) 0 var(--space-2);
  letter-spacing: -0.01em;
}
.kyc-gate__text { color: var(--text-secondary); max-width: 52ch; margin: 0 auto var(--space-3); }
.kyc-gate__meta { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--g-text); }
.kyc-gate__reason {
  text-align: left;
  max-width: 520px;
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--g-soft);
  border-left: 1px solid var(--g-solid);
}
.kyc-gate__reason-h {
  display: block; font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--g-text);
  margin-bottom: 2px;
}
.kyc-gate__reason p { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.kyc-gate__steps {
  list-style: none; padding: 0; margin: var(--space-5) auto 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  max-width: 560px; text-align: left;
}
.kyc-gate__steps li {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-inset); border: 1px solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.35;
}
.kyc-gate__steps li span {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-fill); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.kyc-gate__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-5);
}
.kyc-gate__actions .btn { border-radius: var(--radius-pill); min-width: 180px; }
@media (max-width: 480px) {
  .kyc-gate { padding: var(--space-5) var(--space-4); }
  .kyc-gate__actions .btn { flex: 1 1 100%; }
}
.kyc-checking {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  color: var(--text-secondary); font-weight: var(--weight-medium);
}

/* ── compact gate (inside the business page) ── */
.kyc-inline {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--g-soft);
  border: 1px solid color-mix(in srgb, var(--g-solid) 30%, transparent);
}
.kyc-inline:focus { outline: none; }
.kyc-inline__icon {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--g-solid); color: #fff;
}
.kyc-inline__icon svg { width: 22px; height: 22px; }
.kyc-inline__body { min-width: 0; }
.kyc-inline__title { font-weight: var(--weight-bold); color: var(--text-heading); margin-bottom: 2px; }
.kyc-inline__text, .kyc-inline__meta { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; overflow-wrap: anywhere; }
.kyc-inline__meta { color: var(--g-text); font-weight: var(--weight-semibold); margin-top: 2px; }
.comply .kyc-inline { margin-top: var(--space-2); }

/* ── dashboard verification banner ── */
.kyc-banner {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--g-soft);
  border: 1px solid color-mix(in srgb, var(--g-solid) 32%, transparent);
}
.kyc-banner__icon {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--g-solid); color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--g-solid) 16%, transparent);
}
.kyc-banner__icon svg { width: 20px; height: 20px; }
.kyc-banner__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kyc-banner__title { font-weight: var(--weight-bold); color: var(--text-heading); }
.kyc-banner__text { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.kyc-banner__cta { flex: 0 0 auto; border-radius: var(--radius-pill); }
@media (max-width: 560px) {
  .kyc-banner { flex-wrap: wrap; }
  .kyc-banner__cta { flex: 1 1 100%; }
}

/* ── sign-up stepper (inside the auth panel) ── */
.su-head { margin-bottom: var(--space-5); }
.su-steps {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
}
.su-steps li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-muted); min-width: 0;
}
.su-steps li > span:first-child {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); background: var(--surface-card);
  font-size: 0.6875rem;
}
.su-steps li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-steps li[aria-current='step'] { color: var(--text-brand); }
.su-steps li[aria-current='step'] > span:first-child {
  background: var(--brand-fill); border-color: var(--brand-fill); color: #fff;
  box-shadow: 0 0 0 3px var(--brand-100);
}
.su-steps li.is-done { color: var(--text-secondary); }
.su-steps li.is-done > span:first-child {
  background: var(--surface-brand-tint); border-color: var(--brand-300); color: var(--text-brand);
  font-size: 0;
}
.su-steps li.is-done > span:first-child::after { content: '✓'; font-size: 0.75rem; font-weight: var(--weight-bold); }
.su-count { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: 6px 0 0; }
.su-pane { display: none; animation: su-in var(--duration-base) var(--ease-out); }
.su-pane.is-active { display: block; }
@keyframes su-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.su-pane__title {
  font-family: var(--font-display); font-size: 1.375rem; color: var(--text-brand);
  margin: 0 0 4px; text-align: center;
}
.su-pane__sub { text-align: center; color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--space-5); }
.su-nav { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.su-nav .btn--primary { flex: 1 1 auto; }
.btn--pill { border-radius: var(--radius-pill); }

/* OTP boxes (Figma "sign up - otp": six 44×48 boxes). */
.otp { display: flex; justify-content: center; gap: clamp(6px, 2vw, 10px); margin: var(--space-2) 0 var(--space-3); }
.otp input {
  width: clamp(40px, 11vw, 52px); height: 56px;
  text-align: center; font-size: 1.375rem; font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-heading);
  -moz-appearance: textfield;
}
.otp input:focus { outline: none; border-color: var(--brand-accent); box-shadow: var(--ring-brand); }
.otp input.is-filled { border-color: var(--brand-300); background: var(--surface-brand-tint); }
.otp.is-invalid input { border-color: var(--danger-solid); }
.resend { text-align: center; font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-3) 0 0; }
.resend button { background: none; border: 0; padding: var(--space-2); font: inherit; font-weight: var(--weight-semibold); color: var(--text-brand); cursor: pointer; }
.resend button:disabled { color: var(--text-muted); cursor: default; }
.sent-to {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-inset); border: 1px solid var(--border-subtle); font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.sent-to b { font-family: var(--font-mono); }

/* PIN rules that tick off as you type. */
.pin-rules { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 4px; }
.pin-rules li { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--text-muted); }
.pin-rules li::before {
  content: ''; flex: 0 0 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
}
.pin-rules li.is-ok { color: var(--tone-green-text); }
.pin-rules li.is-ok::before {
  border-color: var(--tone-green-solid); background: var(--tone-green-solid)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.su-done { text-align: center; padding: var(--space-4) 0; }
.su-done h2, .su-done h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-brand); margin-bottom: var(--space-2); }
.su-done p { color: var(--text-secondary); }
.su-next {
  display: flex; gap: var(--space-3); align-items: flex-start; text-align: left;
  padding: var(--space-4); margin: var(--space-4) 0;
  border-radius: var(--radius-md); background: var(--surface-brand-tint);
  border: 1px solid var(--brand-200);
}
.su-next__icon { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-fill); color: #fff; }
.su-next__icon svg { width: 20px; height: 20px; }
.su-next b { color: var(--text-heading); display: block; }
.su-next span { font-size: var(--text-sm); color: var(--text-secondary); }

/* ── KYC page ── */
.kyc-top {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--brand-gradient);
  color: #fff;
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.kyc-top::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.kyc-top__eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .9; margin: 0 0 4px; }
.kyc-top__title { font-family: var(--font-display); font-size: 1.75rem; color: #fff; margin: 0; }
.kyc-top__lead { margin: 6px 0 0; opacity: .95; max-width: 56ch; font-size: var(--text-sm); position: relative; }
.kyc-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); }
@media (max-width: 480px) { .kyc-card { padding: var(--space-4); } .kyc-top { padding: var(--space-4); } }
.kyc-card .stepper { margin-bottom: var(--space-3); }
.kyc-pane { display: none; }
.kyc-pane.is-active { display: block; animation: su-in var(--duration-base) var(--ease-out); }
.kyc-pane__h { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 4px; }
.kyc-pane__sub { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-4); }

.idtypes {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}
.idtype {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  min-height: 56px; padding: var(--space-3);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.idtype:hover { border-color: var(--border-brand); background: var(--surface-hover); }
.idtype input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.idtype__ic { flex: 0 0 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-brand-tint); color: var(--text-brand); }
.idtype__ic svg { width: 18px; height: 18px; }
.idtype:has(input:checked) { border-color: var(--brand-accent); background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--brand-accent); }
.idtype:has(input:checked)::after {
  content: '✓'; position: absolute; top: 6px; right: 8px;
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-brand);
}
.idtype:has(input:focus-visible) { box-shadow: var(--ring-brand); }

.captures { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .captures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.capture { min-width: 0; }
.capture__label { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.capture__box {
  position: relative;
  aspect-ratio: 1.586;
  border: 2px dashed var(--brand-300);
  border-radius: var(--radius-md);
  background: var(--surface-brand-tint);
  display: grid; place-items: center; text-align: center;
  overflow: hidden;
}
.capture__box--face { aspect-ratio: 1; max-width: 280px; margin: 0 auto; }
.capture__empty { display: grid; justify-items: center; gap: 6px; padding: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }
.capture__empty svg { width: 36px; height: 36px; color: var(--text-brand); }
.capture__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capture__box.is-filled { border-style: solid; border-color: var(--tone-green-solid); background: #000; }
.capture__ok {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--tone-green-solid); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.capture__btns { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.capture__btns .btn { flex: 1 1 140px; }
.capture__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }

.scan-status {
  display: flex; gap: var(--space-3); align-items: center;
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-size: var(--text-sm);
  background: var(--tone-blue-soft); color: var(--tone-blue-text);
}
.scan-status[data-tone='green'] { background: var(--tone-green-soft); color: var(--tone-green-text); }
.scan-status[data-tone='amber'] { background: var(--tone-amber-soft); color: var(--tone-amber-text); }
.scan-status .pay-spinner { flex: 0 0 auto; }

.from-id {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: var(--space-2); padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--tone-blue-soft); color: var(--tone-blue-text);
  font-size: 0.625rem; font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}
.kyc-card .grid-2 { column-gap: var(--space-4); }
.kyc-nav { display: flex; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.kyc-nav .btn { border-radius: var(--radius-pill); min-width: 120px; }
.kyc-nav .btn--primary { flex: 0 1 220px; }
@media (max-width: 480px) { .kyc-nav .btn--primary { flex: 1 1 auto; } }

.face-result { margin-top: var(--space-3); }

.review { display: grid; gap: var(--space-4); }
.review__photos { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review__photo { min-width: 0; }
.review__photo img { width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: #000; }
.review__photo span { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; text-align: center; }
.review__block { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); }
.review__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.review__head h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-brand); }
.review__edit { background: none; border: 0; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-brand); cursor: pointer; padding: var(--space-2); }

.sigpad-wrap { position: relative; }
.sigpad {
  display: block; width: 100%; height: 180px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md);
  background: #fff; touch-action: none; cursor: crosshair;
}
.sigpad-wrap.is-invalid .sigpad { border-color: var(--danger-solid); }
.sigpad-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #94a3b8; pointer-events: none; font-size: var(--text-sm); }
.sigpad-wrap.has-ink .sigpad-hint { display: none; }

/* Status views on kyc.html */
.kyc-status { text-align: center; padding: var(--space-6) var(--space-5); }
.kyc-status .halo { --g-solid: var(--g-solid); }
.kyc-status h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--g-text); margin: var(--space-3) 0 var(--space-2); }
.kyc-status p { color: var(--text-secondary); max-width: 50ch; margin-left: auto; margin-right: auto; }
.kyc-status .btn { border-radius: var(--radius-pill); }
.kyc-facts { display: grid; gap: var(--space-2); max-width: 380px; margin: var(--space-4) auto; text-align: left; }
.kyc-facts div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-inset); font-size: var(--text-sm); }
.kyc-facts dt { color: var(--text-muted); }
.kyc-facts dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; overflow-wrap: anywhere; }
.kyc-need { list-style: none; padding: 0; margin: var(--space-4) auto; max-width: 440px; display: grid; gap: var(--space-2); text-align: left; }
.kyc-need li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-inset); font-size: var(--text-sm); }
.kyc-need li svg { flex: 0 0 22px; color: var(--text-brand); }

/* ── camera (full-screen dialog) ── */
dialog.cam {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  background: #0b0b0f; color: #fff;
}
dialog.cam::backdrop { background: #000; }
.cam__inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.cam__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.cam__title { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.cam__iconbtn {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.25rem; cursor: pointer;
  display: grid; place-items: center;
}
.cam__stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.cam__stage video, .cam__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam--mirror video { transform: scaleX(-1); }
.cam__tip {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: min(92%, 460px); z-index: 2;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: rgba(15, 23, 42, .72); font-size: var(--text-sm); text-align: center; line-height: 1.4;
}
/* The guide: a transparent cut-out with a dim surround. */
.cam__guide {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .45);
}
.cam__guide--id {
  width: min(86%, 620px); aspect-ratio: 1.586;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.9);
}
.cam__guide--id::before, .cam__guide--id::after {
  content: ''; position: absolute; width: 34px; height: 34px;
  border: 4px solid var(--brand-accent);
}
.cam__guide--id::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.cam__guide--id::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.cam__guide--face {
  width: min(62%, 300px); aspect-ratio: 0.78;
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.95);
}
.cam__controls {
  display: flex; align-items: center; justify-content: space-around; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
}
.cam__shutter {
  width: 76px; height: 76px; border-radius: 50%;
  border: 4px solid #fff; background: transparent; padding: 5px; cursor: pointer;
}
.cam__shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform var(--duration-fast); }
.cam__shutter:active span { transform: scale(.9); }
.cam__shutter:disabled { opacity: .4; cursor: default; }
.cam__side { width: 88px; display: flex; justify-content: center; }
.cam__side .btn { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.cam__err { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-5); text-align: center; z-index: 3; background: #0b0b0f; }
.cam__err p { max-width: 36ch; margin: 0 auto var(--space-4); color: #e2e8f0; }
.input-icon > .input-icon__svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
.btn:has(.capture__file:focus-visible) { box-shadow: var(--ring-brand); }
.kyc-status .kyc-gate__reason { margin-bottom: var(--space-2); }
/* `hidden` must win over the display rules above (camera overlay, confirm bar,
   sign-up / KYC panes). */
.cam [hidden], .kyc-card[hidden], .su-pane [hidden], .su-head[hidden], .kyc-gate-host [hidden] { display: none !important; }

/* ============================================================================
   17. CLIENT SATISFACTION (ARTA CSM) — js/csm.js, docs/csm-contract.md
   ============================================================================
   A <dialog>: a centred card on desktop, a bottom sheet on a phone. Step 1 is
   Marilao's quick face sheet, step 2 the full ARTA form, step 3 the thanks.
   Faces take their colour from the status tones (red → green), so dark mode
   needs nothing extra. Every face is a native radio: arrow keys move within a
   question, and the chosen label is announced. */

html.csm-lock, html.csm-lock body { overflow: hidden; }

dialog.csm {
  --csm-pad: var(--space-5);
  border: 0;
  padding: 0;
  width: min(640px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: min(92dvh, 900px);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
dialog.csm[open] { display: flex; flex-direction: column; animation: csm-in 220ms var(--ease-out); }
dialog.csm[data-step='face'], dialog.csm[data-step='thanks'] { width: min(460px, calc(100vw - 2 * var(--gutter))); }
dialog.csm::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); }
dialog.csm:focus { outline: none; }
@keyframes csm-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

.csm__grab { display: none; }

/* ── faces (shared by every step) ── */
.csm-face { --f-solid: var(--tone-slate-solid); --f-soft: var(--tone-slate-soft); --f-text: var(--tone-slate-text);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1 1 0; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.csm-face[data-level='1'] { --f-solid: var(--tone-red-solid); --f-soft: var(--tone-red-soft); --f-text: var(--tone-red-text); }
.csm-face[data-level='2'] { --f-solid: var(--tone-orange-solid); --f-soft: var(--tone-orange-soft); --f-text: var(--tone-orange-text); }
.csm-face[data-level='3'] { --f-solid: var(--tone-amber-solid); --f-soft: var(--tone-amber-soft); --f-text: var(--tone-amber-text); }
.csm-face[data-level='4'] { --f-solid: var(--tone-lime-solid); --f-soft: var(--tone-lime-soft); --f-text: var(--tone-lime-text); }
.csm-face[data-level='5'] { --f-solid: var(--tone-green-solid); --f-soft: var(--tone-green-soft); --f-text: var(--tone-green-text); }
.csm-face__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.csm-face__icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base), box-shadow var(--duration-base);
}
.csm-svg { width: 100%; height: 100%; display: block; }
.csm-svg__bg { fill: var(--f-soft); stroke: var(--f-solid); stroke-width: 1.5; transition: fill var(--duration-base); }
.csm-svg__ft { stroke: var(--f-solid); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.csm-svg__fill { fill: var(--f-solid); }
.csm-face:hover .csm-face__icon { transform: translateY(-2px); }
.csm-face__input:checked + .csm-face__icon { transform: scale(1.12); box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 5px var(--f-solid); }
.csm-face__input:checked + .csm-face__icon .csm-svg__bg { fill: var(--f-solid); }
.csm-face__input:checked + .csm-face__icon .csm-svg__ft { stroke: #fff; }
.csm-face__input:checked + .csm-face__icon .csm-svg__fill { fill: #fff; }
.csm-face__input:focus-visible + .csm-face__icon { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
/* Once one face is chosen the others step back, as in the app. */
.csm-faces:has(.csm-face__input:checked) .csm-face:not(:has(.csm-face__input:checked)) .csm-face__icon { opacity: 0.5; }
.csm-face__txt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); text-align: center; line-height: 1.2; }
.csm-face__input:checked ~ .csm-face__txt { color: var(--f-text); font-weight: var(--weight-heavy); }
.csm-face--na .csm-face__icon { border: 1.5px dashed var(--border-strong); background: var(--surface-inset); }
.csm-na { font-size: 0.6875rem; font-weight: var(--weight-heavy); color: var(--text-muted); letter-spacing: 0.02em; }
.csm-face--na .csm-face__input:checked + .csm-face__icon { background: var(--neutral-600); border-color: var(--neutral-600); box-shadow: 0 0 0 3px var(--surface-card), 0 0 0 5px var(--neutral-600); }
.csm-face--na .csm-face__input:checked + .csm-face__icon .csm-na { color: #fff; }
.csm-faces { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; border: 0; padding: 0; margin: 0; min-width: 0; }

/* ── step 1: the quick face sheet ── */
.csm__quick { padding: var(--space-4) var(--csm-pad) var(--csm-pad); text-align: center; }
.csm__quick-top { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.csm__quick-badge { width: 56px; height: 56px; margin: 0 auto var(--space-3); --f-solid: var(--brand-accent); --f-soft: var(--brand-100); }
.csm__quick-title { font-family: var(--font-display); font-size: 1.375rem; color: var(--text-heading); }
.csm__quick-title:focus { outline: none; }
.csm__quick-svc { margin: 6px auto 0; max-width: 36ch; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.csm-faces--quick { margin: var(--space-5) 0 var(--space-3); gap: 4px; }
.csm-face--xl .csm-face__icon { width: 58px; height: 58px; }
.csm__quick-hint { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-4); }
.csm__quick-actions { display: grid; gap: var(--space-2); }
.csm__quick-actions .btn--primary { border-radius: var(--radius-pill); }
.csm__skip { color: var(--text-muted); }
.csm__skip:hover { color: var(--text-primary); }

/* language toggle */
.csm-lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border-default); flex: 0 0 auto; }
.csm-lang__btn {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent;
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-secondary); cursor: pointer;
}
.csm-lang__btn[aria-pressed='true'] { background: var(--surface-card); color: var(--text-brand); box-shadow: var(--shadow-sm); }
.csm-lang__btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; }

/* ── step 2: the full form ── */
.csm__sheet { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.csm__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--csm-pad); border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--surface-brand-tint), var(--surface-card));
}
.csm__head-text { flex: 1 1 auto; min-width: 0; }
.csm__eyebrow { margin: 0 0 2px; font-size: var(--text-xs); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-brand); }
.csm__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; }
.csm__title:focus { outline: none; }
.csm__x {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-secondary); font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.csm__x:hover { background: var(--surface-hover); color: var(--text-primary); }
.csm__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--csm-pad) var(--space-5); }

.csm-hero {
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface-brand-tint); border: 1px solid var(--border-brand);
}
.csm-svc { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-default); margin-bottom: var(--space-4); }
.csm-svc__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.csm-svc__value { font-weight: var(--weight-bold); color: var(--text-heading); overflow-wrap: anywhere; }
.csm-svc__ref { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.csm-need { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-brand); text-align: center; }
.csm-need[hidden] { display: none; }

.csm-q { border: 0; padding: 0; margin: 0; min-width: 0; }
.csm-q + .csm-q { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.csm-q__text { padding: 0; margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-primary); }
.csm-q__text .req { color: var(--danger-text); }
.csm-q--hero .csm-q__text { font-size: var(--text-base); font-weight: var(--weight-bold); text-align: center; width: 100%; color: var(--text-heading); }
.csm-q--hero .csm-faces { max-width: 380px; margin: 0 auto; }
.csm-face--lg .csm-face__icon { width: 54px; height: 54px; }
.csm-q .csm-faces { max-width: 400px; }
.csm-q__cap { margin: var(--space-2) 0 0; min-height: 1.3em; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); }
.csm-q--hero .csm-q__cap { text-align: center; }
.csm-q__cap[data-level='1'] { color: var(--tone-red-text); }
.csm-q__cap[data-level='2'] { color: var(--tone-orange-text); }
.csm-q__cap[data-level='3'] { color: var(--tone-amber-text); }
.csm-q__cap[data-level='4'] { color: var(--tone-lime-text); }
.csm-q__cap[data-level='5'] { color: var(--tone-green-text); }

.csm-about { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.csm-about summary { cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-brand); min-height: 32px; display: flex; align-items: center; }
.csm-about p { margin: var(--space-2) 0 0; line-height: var(--leading-normal); }
.csm-optional { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); }

.csm-sec { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-xs); }
.csm-sec__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); margin-bottom: var(--space-3); }
.csm-sec__icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-100); color: var(--brand-800); font-size: 0.9rem; }
.csm-sec__help { margin: calc(-1 * var(--space-1)) 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
.csm-sec__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .csm-sec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csm-field--wide, .csm-sec__grid > fieldset { grid-column: 1 / -1; } }
.csm-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.csm-field + .csm-field { margin-top: 0; }
.csm-sec__body:not(.csm-sec__grid) > .csm-field + .csm-field { margin-top: var(--space-4); }
.csm-field .label { padding: 0; }
.csm-field.is-off .label { color: var(--text-muted); }
.csm-field__hint { margin-top: var(--space-2); }

.csm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.csm-chip, .csm-opt { position: relative; cursor: pointer; }
.csm-chip input, .csm-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.csm-chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--surface-card); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--text-secondary);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.csm-chip:hover span { border-color: var(--border-brand); }
.csm-chip input:checked + span { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.csm-chip input:focus-visible + span, .csm-opt input:focus-visible + span { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.csm-opts { display: grid; gap: var(--space-2); }
.csm-opt span {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: 10px 12px; min-height: 44px;
  border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-card);
  font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-primary);
}
.csm-opt span::before {
  content: ''; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface-card); box-sizing: border-box;
}
.csm-opt:hover span { border-color: var(--border-brand); }
.csm-opt input:checked + span { border-color: var(--brand-accent); background: var(--surface-brand-tint); }
.csm-opt input:checked + span::before { border: 5px solid var(--brand-fill); }
.csm-field:disabled .csm-opt, .csm-field:disabled .csm-chip { cursor: not-allowed; }
.csm-field:disabled .csm-opt span, .csm-field:disabled .csm-chip span { opacity: 0.55; background: var(--surface-sunken); }
.csm-field:disabled .csm-opt input:checked + span { opacity: 0.8; }
/* CC1 = 4 fills CC2 / CC3 with N/A and locks them: the locked answer must
   still read as chosen. */
.csm-field:disabled .csm-chip input:checked + span { background: var(--surface-brand-tint); border: 1.5px solid var(--brand-accent); color: var(--text-brand); font-weight: var(--weight-bold); opacity: 1; }
.csm-count { text-align: right; max-width: none; }

.csm__foot { padding: var(--space-3) var(--csm-pad) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.csm__foot-btns { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.csm__submit { border-radius: var(--radius-pill); min-width: 180px; }
.csm__err { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--danger-text); }
.csm__err:empty { display: none; }
.csm-leave { margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--warning-surface); border: 1px solid var(--warning-border); color: var(--warning-text); }
.csm-leave p { margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); }
.csm-leave__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.csm-leave[hidden] { display: none; }

/* ── step 3: thanks ── */
.csm__thanks { padding: var(--space-6) var(--csm-pad) var(--csm-pad); text-align: center; }
.csm__thanks-badge { width: 104px; height: 104px; margin: 0 auto var(--space-4); border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); animation: csm-pop 420ms var(--ease-out); }
.csm__thanks-badge span { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-accent); color: #fff; font-size: 2.1rem; box-shadow: 0 8px 12px rgba(249, 115, 22, 0.28); }
.csm__thanks-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-brand); }
.csm__thanks-title:focus { outline: none; }
.csm__thanks-text { margin: var(--space-3) auto 0; max-width: 40ch; color: var(--text-secondary); }
.csm__thanks-svc { margin: var(--space-2) auto var(--space-5); font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.csm__thanks .btn { border-radius: var(--radius-pill); }
@keyframes csm-pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }

/* ── phone: a bottom sheet ── */
@media (max-width: 560px) {
  dialog.csm, dialog.csm[data-step='face'], dialog.csm[data-step='thanks'] {
    --csm-pad: var(--space-4);
    width: 100vw; max-width: 100vw; max-height: 94dvh;
    margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  dialog.csm[open] { animation: csm-up 260ms var(--ease-out); }
  .csm__grab { display: block; width: 44px; height: 5px; border-radius: var(--radius-pill); background: var(--border-strong); margin: 10px auto 0; }
  .csm__quick .csm__grab, .csm__thanks .csm__grab { margin: -6px auto var(--space-3); }
  .csm__thanks { padding-top: var(--space-4); }
  /* Eyebrow, language and close on one line; the title below it. */
  .csm__head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: 'eb lang x' 'title title title';
    column-gap: var(--space-2); row-gap: 2px; padding-top: var(--space-2); padding-bottom: var(--space-3);
  }
  .csm__head-text { display: contents; }
  .csm__eyebrow { grid-area: eb; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .csm__title { grid-area: title; font-size: 1.0625rem; }
  .csm__head .csm-lang { grid-area: lang; }
  .csm__head .csm-lang__btn { min-height: 30px; padding: 0 10px; }
  .csm__x { grid-area: x; width: 36px; height: 36px; }
  .csm-face__icon { width: 40px; height: 40px; }
  .csm-face--lg .csm-face__icon { width: 48px; height: 48px; }
  .csm-face--xl .csm-face__icon { width: 52px; height: 52px; }
  .csm-faces { gap: 2px; }
  .csm__foot-btns .csm__submit { flex: 1 1 auto; min-width: 0; }
}
@keyframes csm-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (max-width: 360px) { .csm-face__icon { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) {
  dialog.csm[open], .csm__thanks-badge { animation: none; }
  .csm-face__icon { transition: none; }
}

/* ── success card button + dashboard card ── */
.csm-rate-btn { border-radius: var(--radius-pill); }
@media (max-width: 560px) { .success__actions .csm-rate-btn { flex: 1 1 100%; } }
.csm-card { border: 1px solid var(--border-brand); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--surface-brand-tint), var(--surface-card) 60%); padding: var(--space-4); }
.csm-card__head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.csm-card__icon { width: 40px; height: 40px; flex: 0 0 40px; --f-solid: var(--brand-accent); --f-soft: var(--brand-100); }
.csm-card__title { font-size: var(--text-base); }
.csm-card__title::before { display: none; }
.csm-card__title:focus { outline: none; }
.csm-card__sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.csm-pend { gap: var(--space-3); }
.csm-pend__icon { width: 32px; height: 32px; flex: 0 0 32px; --f-solid: var(--tone-lime-solid); --f-soft: var(--tone-lime-soft); }
.csm-pend .row__title, .csm-pend .row__meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.csm-pend__x {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent;
  color: var(--text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.csm-pend__x:hover { background: var(--surface-sunken); color: var(--text-primary); }
.csm-pend__x:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; }
.csm-pend__more { margin: 0; text-align: center; }
@media (max-width: 420px) { .csm-pend .row__aside { gap: 0; } .csm-pend__icon { display: none; } .csm-pend { padding-right: var(--space-2); } }

/* ============================================================================
   REAL-TIME NOTIFICATIONS, SERVER KYC DIALOG, LINK REQUESTS (2026-09-25)
   docs/notifications-contract.md §1, §4, §5.
   ============================================================================ */

/* ── bell: badge bump + sound switches ── */
.notif__badge.is-bump { animation: notif-bump 600ms var(--ease-out); }
@keyframes notif-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.notif__prefs {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-xs); color: var(--text-secondary);
}
.notif__pref {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px; cursor: pointer; position: relative; font-weight: var(--weight-semibold);
}
.notif__pref[hidden] { display: none; }
.notif__pref input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.notif__pref-track {
  width: 32px; height: 18px; border-radius: 9px; flex: 0 0 32px;
  background: var(--border-strong); position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}
.notif__pref-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out);
}
.notif__pref input:checked + .notif__pref-track { background: var(--brand-fill); }
.notif__pref input:checked + .notif__pref-track::after { transform: translateX(14px); }
.notif__pref input:focus-visible + .notif__pref-track { box-shadow: var(--ring-brand); }
.notif__test {
  margin-left: auto; border: 0; background: none; font: inherit; font-weight: var(--weight-semibold);
  color: var(--text-brand); cursor: pointer; padding: var(--space-2); border-radius: var(--radius-xs);
}
.notif__test:hover { background: var(--surface-hover); }

/* ── notification toast ── */
.toast[data-tone='brand'] { border-left-color: var(--brand-accent); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity 180ms, transform 180ms; }
.toast--notif { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.toast__icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-800);
}
.toast__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.toast__main:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 4px; border-radius: var(--radius-xs); }
.toast__eyebrow {
  font-size: 0.6875rem; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-brand);
}
.toast--notif .toast__title { font-size: var(--text-sm); color: var(--text-heading); margin: 0; overflow-wrap: anywhere; }
.toast__msg {
  font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.toast__go { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-brand); margin-top: 2px; }
.toast__main:hover .toast__go { text-decoration: underline; }
.toast__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
@media (prefers-reduced-motion: reduce) {
  .notif__badge.is-bump { animation: none; }
  .toast.is-leaving { transition: none; }
}

/* ── KYC_REQUIRED dialog (server refused a filing) ── */
dialog.kyc-dlg { max-width: min(560px, calc(100vw - 2 * var(--gutter))); background: transparent; box-shadow: none; overflow: visible; }
.kyc-gate--dialog { position: relative; box-shadow: var(--shadow-lg); max-width: none; }
.kyc-dlg__x {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent;
  color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.kyc-dlg__x:hover { background: var(--surface-hover); color: var(--text-primary); }
.kyc-dlg__note { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-3) 0 0; }
@media (max-width: 480px) {
  .kyc-gate--dialog { padding: var(--space-6) var(--space-4) var(--space-5); }
  .kyc-gate--dialog .kyc-gate__title { font-size: 1.25rem; }
  .kyc-gate--dialog .kyc-gate__halo { width: 84px; height: 84px; }
  .kyc-gate--dialog .kyc-gate__icon { width: 58px; height: 58px; }
}

/* ── My link requests ── */
.lreq-card { padding: var(--space-2); }
.lreq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lreq {
  --l-solid: var(--tone-amber-solid); --l-soft: var(--tone-amber-soft); --l-text: var(--tone-amber-text);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-left: 1px solid var(--l-solid);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.lreq[data-tone='green'] { --l-solid: var(--tone-green-solid); --l-soft: var(--tone-green-soft); --l-text: var(--tone-green-text); }
.lreq[data-tone='red'] { --l-solid: var(--tone-red-solid); --l-soft: var(--tone-red-soft); --l-text: var(--tone-red-text); }
.lreq.is-highlight { box-shadow: 0 0 0 3px color-mix(in srgb, var(--l-solid) 35%, transparent); }
.lreq__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.lreq__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lreq__title { font-weight: var(--weight-bold); color: var(--text-heading); overflow-wrap: anywhere; }
.lreq__meta { font-size: var(--text-sm); color: var(--text-muted); }
.lreq__note { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.lreq__note--ok a { font-weight: var(--weight-semibold); }
.lreq__reason {
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--l-soft);
}
.lreq__reason-h {
  display: block; font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--l-text);
}
.lreq__reason p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-primary); overflow-wrap: anywhere; }
#linkRequests:focus { outline: none; }

/* 409 DUPLICATE_PENDING — informational, not an error */
.lreq-dup {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--tone-amber-soft);
  border: 1px solid color-mix(in srgb, var(--tone-amber-solid) 35%, transparent);
}
.lreq-dup[hidden] { display: none; }
.lreq-dup__icon {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tone-amber-solid); color: #fff; font-weight: var(--weight-heavy); font-size: var(--text-sm);
}
.lreq-dup__title { margin: 0; font-weight: var(--weight-bold); color: var(--tone-amber-text); }
.lreq-dup__text { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-primary); }
.lreq-dup__link { display: inline-block; margin-top: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* ============================================================================
   18. 2026-10 REDESIGN LAYER
   ============================================================================
   Comes last on purpose: it re-points the older sections (13–17) onto the new
   world without rewriting their logic. Components new in this pass: the
   landing page, the glance board, business cards, the journey rail, the
   permit card, the media viewer (.lb), the stripe loader. */

/* ── header, after section 15's phone rules ─────────────────────────────── */
.theme-btn { color: var(--text-secondary); }
.theme-btn .i { width: 20px; height: 20px; }
.theme-btn__sun { display: none; }
:root[data-theme='dark'] .theme-btn__sun { display: inline-flex; }
:root[data-theme='dark'] .theme-btn__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-btn__sun { display: inline-flex; }
  :root:not([data-theme='light']) .theme-btn__moon { display: none; }
}
.notif__btn .i, .notif__btn svg { width: 20px; height: 20px; }
.app-header__logout { gap: 6px; }
.app-header__logout .i { display: none; }
@media (max-width: 720px) {
  .app-header__user { padding-right: 10px; }
}
@media (max-width: 560px) {
  :root { --header-height: 62px; }
  .brand__name { font-size: 0.9375rem; color: var(--text-heading); white-space: normal; line-height: 1.15; }
  .brand__sub { display: none; }
  .app-header__logout .i { display: block; }
  .app-header__logout svg:not(.i) { display: none; }
  .app-header__user { padding: 3px; background: transparent; }
  .app-header__name--first { display: none; }
  .app-nav a { padding: 0 12px; }
  .app-nav a[aria-current='page']::after { left: 12px; right: 12px; }
}
@media (max-width: 420px) {
  .brand__mark { width: 34px; height: 34px; flex-basis: 34px; }
  .brand__name { font-size: 0.875rem; }
}

/* ── the CSJDM mark as a big decorative shape ───────────────────────────── */
.welcome__mark, .auth-hero__mark, .land-cta__mark {
  position: absolute;
  pointer-events: none;
  background: #fff;
}

/* ── stripe loader: the three bars of the mark, filling in turn ─────────── */
.stripe-loader { display: inline-grid; gap: 4px; width: 30px; }
.stripe-loader i {
  display: block; height: 6px; border-radius: 1px;
  background: var(--brand-accent);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  animation: stripe 1.1s var(--ease-out) infinite;
  transform-origin: left center;
}
.stripe-loader i:nth-child(2) { width: 88%; animation-delay: 0.12s; }
.stripe-loader i:nth-child(3) { width: 76%; animation-delay: 0.24s; }
@keyframes stripe { 0%, 100% { transform: scaleX(0.35); opacity: 0.45; } 50% { transform: scaleX(1); opacity: 1; } }

/* ── landing ────────────────────────────────────────────────────────────── */
.auth-hero {
  display: block;
  position: relative;
  overflow: hidden;
  order: 1;
  color: #fff;
  background:
    var(--brand-glow),
    radial-gradient(90% 70% at 0% 100%, rgba(120, 34, 4, 0.55) 0%, transparent 60%),
    var(--brand-gradient);
  isolation: isolate;
}
.auth-hero::after {
  /* The Figma hero photo-grain, kept faint as texture under the copy. */
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: url('../assets/figma/hero-bg.jpg') center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.55;
}
.auth-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 620px;
  padding: var(--space-5) var(--gutter) var(--space-6);
}
@media (min-width: 640px) { .auth-hero__inner { padding: 40px clamp(24px, 6vw, 72px) 48px; } }
@media (min-width: 960px) {
  .auth-hero__inner {
    min-height: 100%;
    justify-content: space-between;
    padding: 48px clamp(32px, 5vw, 72px) 48px;
    margin-left: auto;
  }
}
.auth-hero__copy { max-width: 34rem; }
.auth-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-heavy);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: var(--space-4);
}
.auth-hero__lead {
  font-size: var(--text-md);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
}
.auth-hero__mark {
  width: min(56vw, 520px);
  aspect-ratio: 162 / 137;
  right: -12%;
  bottom: -10%;
  opacity: 0.09;
  z-index: 0;
}
.auth-hero__facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3);
}
.auth-hero__facts li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.95);
}
.auth-hero__facts .i {
  width: 34px; height: 34px; padding: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.auth-hero__facts span { padding-top: 7px; }
.journey-demo {
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: rgba(40, 12, 0, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.journey-demo figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 959px) {
  .auth-hero__facts, .journey-demo { display: none; }
  .auth-hero__title { font-size: clamp(1.875rem, 1.3rem + 3vw, 2.5rem); margin-bottom: var(--space-2); }
  .auth-hero__lead { font-size: var(--text-base); }
  .auth-hero__inner { gap: var(--space-4); padding-bottom: 64px; }
  .auth-panel { margin-top: -56px; padding-top: 0; }
  .auth-hero__mark { width: 260px; right: -60px; bottom: -40px; }
}

.auth-disclaimer {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.auth-disclaimer .i { width: 18px; height: 18px; margin-top: 1px; color: var(--text-brand); }
.auth-disclaimer a { font-weight: var(--weight-semibold); }
.auth-band { display: none; }

.land {
  background: var(--surface-page);
  border-top: 1px solid var(--border-default);
}
.land__inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.land__head { max-width: 46rem; margin-bottom: var(--space-6); }
.land__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: var(--space-3);
}
.land__lead { font-size: var(--text-md); color: var(--text-secondary); max-width: 58ch; }

.svc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
@media (min-width: 760px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-list li { border-top: 1px solid var(--border-subtle); }
.svc-list li:first-child { border-top: 0; }
@media (min-width: 760px) {
  .svc-list li:nth-child(2) { border-top: 0; }
  .svc-list li:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
}
.svc-item {
  display: flex; align-items: flex-start; gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
  color: inherit;
  font-weight: var(--weight-regular);
  transition: background var(--duration-fast) var(--ease-out);
}
.svc-item:hover { background: var(--surface-hover); text-decoration: none; }
.svc-item:focus-visible { outline-offset: -3px; }
.svc-item__icon {
  flex: 0 0 48px; width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--surface-brand-tint);
  color: var(--text-brand);
}
.svc-item__icon .i { width: 24px; height: 24px; }
.svc-item__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.svc-item__title { font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--text-heading); letter-spacing: -0.01em; }
.svc-item__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.svc-item__go {
  margin-top: 12px; color: var(--text-muted);
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.svc-item:hover .svc-item__go { transform: translateX(4px); color: var(--text-brand); }

.land__split {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) { .land__split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-7); } }
.how .section-title { margin-bottom: var(--space-5); }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.how__steps li {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.how__steps li:not(:last-child)::before {
  content: '';
  position: absolute; left: 21px; top: 46px; bottom: 6px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--brand-300), var(--border-default));
}
.how__n {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-md);
  color: #fff;
  background: var(--brand-fill);
  box-shadow: 0 0 0 5px var(--surface-brand-tint);
}
.how__steps b { display: block; color: var(--text-heading); font-size: var(--text-md); margin: 9px 0 4px; letter-spacing: -0.01em; }
.how__steps span:not(.how__n) { color: var(--text-secondary); font-size: var(--text-sm); }
.ready { padding: var(--space-6) var(--space-5); }
.ready .card__sub { margin-bottom: var(--space-4); }
.ready__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ready__list li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  font-size: var(--text-sm);
}
.ready__list .i {
  width: 36px; height: 36px; padding: 8px;
  border-radius: 10px;
  background: var(--surface-card);
  color: var(--text-brand);
  box-shadow: var(--shadow-xs);
}

.land-cta {
  position: relative;
  overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--brand-glow), var(--brand-gradient);
  color: #fff;
  isolation: isolate;
}
.land-cta__title { font-family: var(--font-display); font-size: var(--text-xl); color: #fff; letter-spacing: -0.03em; margin-bottom: var(--space-2); }
.land-cta__text { position: relative; z-index: 1; max-width: 44ch; }
.land-cta__text p { color: rgba(255, 255, 255, 0.92); margin: 0; }
.land-cta__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.land-cta__mark { width: 240px; aspect-ratio: 162 / 137; right: 26%; top: -40px; opacity: 0.08; z-index: 0; }
@media (max-width: 560px) {
  .land-cta { padding: var(--space-5); }
  .land-cta__actions, .land-cta__actions .btn { width: 100%; }
}

/* ── welcome band (dashboard) ───────────────────────────────────────────── */
.welcome {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--brand-glow), var(--brand-gradient);
  color: #fff;
  overflow: hidden;
  margin-bottom: var(--space-5);
  box-shadow: 0 18px 40px -22px rgba(154, 52, 18, 0.7);
  isolation: isolate;
}
.welcome::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: url('../assets/figma/hero-bg.jpg') right center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.5;
}
.welcome__mark { width: 230px; aspect-ratio: 162 / 137; right: 20px; top: -34px; opacity: 0.1; }
.welcome__text { position: relative; min-width: 0; flex: 1 1 300px; }
.welcome .page__title {
  color: #fff;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.035em;
}
.welcome .page__lead { color: rgba(255, 255, 255, 0.92); margin-bottom: 0; }
.welcome__actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 560px) {
  .welcome { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .welcome__actions { width: 100%; }
  .welcome__actions .btn { flex: 1 1 auto; }
  .welcome__mark { width: 160px; right: -30px; }
}

.dash-sec { margin-top: var(--space-6); }
.section-head { margin-bottom: var(--space-4); }
.section-head .section-title { font-size: var(--text-lg); }
.section-head .btn--ghost .i { width: 16px; height: 16px; }

/* ── glance board: status at a glance ───────────────────────────────────── */
.glance {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) {
  .glance { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); padding: var(--space-5) var(--space-6); }
}
.glance__skel { height: 96px; grid-column: 1 / -1; border-radius: var(--radius-md); }
.glance__total { display: flex; align-items: baseline; gap: var(--space-3); }
@media (min-width: 900px) { .glance__total { flex-direction: column; gap: 2px; padding-right: var(--space-6); border-right: 1px solid var(--border-default); } }
.glance__num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: var(--weight-heavy);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-heading);
}
.glance__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); max-width: 16ch; }
.glance__body { min-width: 0; display: grid; gap: var(--space-4); }
.glance__bar {
  display: flex; gap: 3px;
  height: 12px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-sunken);
}
.glance__seg { flex: 1 1 0; min-width: 10px; border-radius: 3px; transform-origin: left; animation: grow var(--duration-slow) var(--ease-out) both; }
.glance__seg:first-child { border-radius: var(--radius-pill) 3px 3px var(--radius-pill); }
.glance__seg:last-child { border-radius: 3px var(--radius-pill) var(--radius-pill) 3px; }
.glance__seg:only-child { border-radius: var(--radius-pill); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.glance__seg[data-tone='green'], .glance__item[data-tone='green'] { --g: var(--tone-green-solid); }
.glance__seg[data-tone='blue'], .glance__item[data-tone='blue'] { --g: var(--tone-blue-solid); }
.glance__seg[data-tone='amber'], .glance__item[data-tone='amber'] { --g: var(--tone-amber-solid); }
.glance__seg[data-tone='gray'], .glance__item[data-tone='gray'] { --g: var(--tone-gray-solid); }
.glance__seg { background: var(--g); }
.glance__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.glance__item { display: grid; grid-template-columns: 10px auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-2); }
.glance__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--g); align-self: center; }
.glance__count { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-heading); line-height: 1; }
.glance__what { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading); }
.glance__hint { display: block; font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--text-muted); }
.glance__empty { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.glance__drafts {
  display: inline-flex; align-items: center; gap: var(--space-3);
  justify-self: start;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.glance__drafts:hover { background: var(--surface-hover); text-decoration: none; color: var(--text-brand); }
.glance__drafts-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-card); color: var(--text-brand); }
.glance__drafts .i { width: 18px; height: 18px; }

/* ── business cards ─────────────────────────────────────────────────────── */
.bizcards { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .bizcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.bizcards > .empty, .bizcards > .error-state, .bizcards > .skeleton--row { grid-column: 1 / -1; }
.bizcard {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  font-weight: var(--weight-regular);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.bizcard:hover { text-decoration: none; border-color: var(--border-brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bizcard:hover .row__chev { transform: translateX(3px); color: var(--text-brand); }
.bizcard__top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bizcard__main { flex: 1 1 auto; min-width: 0; }
.bizcard__title { font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--text-heading); letter-spacing: -0.01em; overflow-wrap: anywhere; line-height: 1.3; }
.bizcard__meta { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.bizcard__status { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bizcard__extra:empty { display: none; }
.row__chev .i { width: 18px; height: 18px; }
.row__icon--muted { background: var(--surface-sunken); color: var(--text-secondary); }

/* ── the journey rail ───────────────────────────────────────────────────── */
.journey { --j-on: var(--brand-accent); --j-off: var(--border-default); }
.journey.is-your-turn { --j-on: var(--tone-amber-solid); }
.journey.is-complete { --j-on: var(--tone-green-solid); }
.journey__track, ol.journey {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.journey__step {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  min-width: 0;
}
.journey__step::before {
  content: '';
  position: absolute;
  top: 10px; right: 50%;
  width: 100%; height: 3px;
  background: var(--j-off);
  border-radius: 3px;
}
.journey__step:first-child::before { display: none; }
.journey__step.is-done::before, .journey__step.is-current::before { background: var(--j-on); }
.journey__dot {
  position: relative; z-index: 1;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-card);
  border: 2.5px solid var(--j-off);
  color: #fff;
}
.journey__dot .i { width: 13px; height: 13px; stroke-width: 3; }
.journey__step.is-done .journey__dot { background: var(--j-on); border-color: var(--j-on); }
.journey__step.is-current .journey__dot {
  border-color: var(--j-on);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--j-on) 22%, transparent);
}
.journey__step.is-current .journey__dot::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--j-on);
  animation: pulse 2s var(--ease-out) infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.7); } }
.journey__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.journey__step.is-done .journey__label { color: var(--text-secondary); }
.journey__step.is-current .journey__label { color: var(--text-heading); font-weight: var(--weight-bold); }
.journey--compact .journey__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.journey--compact .journey__dot { width: 18px; height: 18px; border-width: 2px; }
.journey--compact .journey__dot .i { width: 10px; height: 10px; }
.journey--compact .journey__step::before { top: 8px; height: 2.5px; }
.journey--compact .journey__step.is-current .journey__dot::after { width: 7px; height: 7px; }
.journey__now {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.journey.is-your-turn .journey__now { color: var(--tone-amber-text); }
.journey.is-complete .journey__now { color: var(--tone-green-text); }
.journey__now .i { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .journey:not(.journey--compact) .journey__label { font-size: 0.6875rem; }
}
/* On the orange hero: white rail. */
.journey--hero { --j-on: #fff; --j-off: rgba(255, 255, 255, 0.3); }
.journey--hero .journey__dot { background: transparent; color: var(--brand-800); }
.journey--hero .journey__step.is-done .journey__dot { background: #fff; }
.journey--hero .journey__step.is-current .journey__dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); }
.journey--hero .journey__label { color: rgba(255, 255, 255, 0.78); }
.journey--hero .journey__step.is-done .journey__label { color: rgba(255, 255, 255, 0.92); }
.journey--hero .journey__step.is-current .journey__label { color: #fff; }

/* ── dues strip (dashboard cards) ───────────────────────────────────────── */
.dues-strip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  background: var(--tone-orange-soft);
  color: var(--tone-orange-text);
  font-size: var(--text-sm);
}
.dues-strip__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-card); }
.dues-strip__icon .i { width: 16px; height: 16px; }
.dues-strip__text { flex: 1 1 auto; min-width: 0; }
.dues-strip__text b { font-variant-numeric: tabular-nums; }
.dues-strip__cta { font-weight: var(--weight-bold); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* ── needs-your-attention rows ──────────────────────────────────────────── */
.row--alert {
  border: 1px solid var(--warning-border);
  background: linear-gradient(90deg, var(--warning-surface), var(--surface-card) 70%);
  align-items: center;
}
.row--alert__icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  background: var(--tone-amber-solid); color: #fff;
}
.row--alert__icon .i { width: 22px; height: 22px; }
.row__eyebrow { color: var(--warning-text); }
.row__meta--wrap { white-space: normal; overflow: visible; }

/* ── business detail ────────────────────────────────────────────────────── */
.biz-hero {
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--brand-glow), var(--brand-gradient);
  box-shadow: 0 18px 40px -24px rgba(154, 52, 18, 0.7);
  isolation: isolate;
}
.biz-hero::after {
  content: '';
  position: absolute; right: -30px; top: -40px; z-index: -1;
  width: 220px; aspect-ratio: 162 / 137;
  background: #fff; opacity: 0.08;
  -webkit-mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
          mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
}
.biz-hero__badge { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 6px 14px -6px rgba(60, 20, 0, 0.5); }
.biz-hero__badge img { width: 24px; height: 24px; }
.biz-hero__name {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: var(--weight-heavy);
  text-transform: none;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.biz-hero__tag { border-radius: var(--radius-pill); padding: 3px 10px; background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.biz-hero__status { padding: 3px 10px; font-size: var(--text-xs); text-transform: none; letter-spacing: 0.01em; }
.biz-hero__sub { font-size: var(--text-sm); margin-top: 6px; color: rgba(255, 255, 255, 0.9); opacity: 1; }
.biz-journey { padding: var(--space-5) var(--space-5) var(--space-4); margin-bottom: var(--space-4); }
.biz-tabs { border-radius: var(--radius-lg); padding: 0 var(--space-3); gap: var(--space-1); }
.biz-tab { padding: 0 var(--space-3); }
.biz-tab[aria-selected='true']::after { left: var(--space-3); right: var(--space-3); }
.biz-tab__count { background: var(--surface-brand-tint); color: var(--text-brand); }

.permit-card { padding: 0; overflow: hidden; }
.permit-card__band {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--brand-glow), var(--brand-gradient);
  color: #fff;
}
.permit-card__band img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
.permit-card__lgu { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.9); }
.permit-card__title { color: #fff; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.02em; }
.permit-card__body { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-2); }
.permit-card__qr {
  flex: 0 0 112px; width: 112px; height: 112px;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: zoom-in;
  transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.permit-card__qr:hover { box-shadow: var(--shadow-md); transform: scale(1.02); }
.permit-card__qr svg { width: 100%; height: 100%; }
.permit-card__facts { min-width: 0; }
.permit-card__k { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.permit-card__no { margin: 2px 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-heading); overflow-wrap: anywhere; letter-spacing: -0.01em; }
.permit-card__facts .btn { margin-left: calc(-1 * var(--space-3)); }
.permit-card__note { margin: 0; padding: 0 var(--space-5) var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
.biz-side > .permit-card + .card { margin-top: var(--space-4); }
.permit-big { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-5); text-align: center; }
.permit-big__qr { width: min(320px, 72vw); padding: 10px; background: #fff; border-radius: var(--radius-lg); }
.permit-big__qr svg { width: 100%; height: auto; }
.permit-big__name { margin: var(--space-3) 0 0; font-weight: var(--weight-bold); color: var(--text-heading); }
.permit-big__no { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-heading); }

/* ── document tiles ─────────────────────────────────────────────────────── */
.doc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--space-3); }
.doc-tile { padding: 6px; border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); }
.doc-tile__preview { border-radius: 8px; }
.doc-tile__zoom {
  position: absolute; right: 8px; bottom: 8px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(28, 25, 23, 0.72);
  color: #fff;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.doc-tile__zoom .i { width: 16px; height: 16px; }
.doc-tile:hover .doc-tile__zoom, .doc-tile:focus-visible .doc-tile__zoom { opacity: 1; transform: none; }
@media (pointer: coarse) { .doc-tile__zoom { opacity: 1; transform: none; } }
.doc-tile__name { font-size: var(--text-sm); }
.doc-badge { font-size: 0.6875rem; padding: 2px 7px; border-radius: 6px; }
.doc-file__icon .i, .doc-file__icon svg { width: 44px; height: 44px; }

/* ── the media viewer ───────────────────────────────────────────────────── */
dialog.lb {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(12, 10, 9, 0.94);
  color: #f5f1ec;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
dialog.lb[open] { display: grid; animation: lb-in var(--duration-base) var(--ease-out); }
dialog.lb::backdrop { background: rgba(12, 10, 9, 0.6); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: max(10px, env(safe-area-inset-top)) var(--space-3) 10px var(--space-5);
  background: linear-gradient(rgba(12, 10, 9, 0.9), rgba(12, 10, 9, 0.6));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lb__meta { flex: 1 1 auto; min-width: 0; }
.lb__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb__count { margin: 0; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.66); font-variant-numeric: tabular-nums; }
.lb__tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lb__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px;
  padding: 0 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.lb__btn:hover { background: rgba(255, 255, 255, 0.12); }
.lb__btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.lb__btn[hidden] { display: none; }
.lb__btn .i { width: 22px; height: 22px; }
.lb__btn:focus-visible { outline: 2.5px solid var(--brand-400); outline-offset: 1px; }
.lb__dl { background: var(--brand-fill); padding: 0 14px; margin-left: 4px; }
.lb__dl:hover { background: var(--brand-fill-hover); }
.lb__dl.is-busy { opacity: 0.7; pointer-events: none; }
.lb__close { margin-left: 4px; }
.lb__stage { position: relative; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.lb__host {
  position: relative;
  grid-column: 2;
  height: 100%; min-height: 0;
  display: grid; place-items: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.lb__host.is-zoomed { cursor: grab; }
.lb__host.is-zoomed:active { cursor: grabbing; }
.lb__img {
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  transition: transform 160ms var(--ease-out), opacity var(--duration-base) var(--ease-out);
  opacity: 0;
  will-change: transform;
  cursor: zoom-in;
}
.lb__host.is-zoomed .lb__img { cursor: inherit; }
.lb__img.is-ready { opacity: 1; }
.lb__nav { width: 52px; height: 52px; margin: 0 var(--space-2); border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.lb__nav:hover { background: rgba(255, 255, 255, 0.2); }
.lb__nav .i { width: 26px; height: 26px; }
@media (max-width: 640px) {
  .lb__stage { grid-template-columns: minmax(0, 1fr); }
  .lb__host { grid-column: 1; grid-row: 1; }
  .lb__nav { position: absolute; z-index: 2; bottom: 12px; margin: 0; width: 48px; height: 48px; background: rgba(12, 10, 9, 0.7); }
  .lb__prev { left: 12px; }
  .lb__next { right: 12px; }
  .lb__btn-text { display: none; }
  .lb__bar { padding-left: var(--space-4); }
  .lb__tools .lb__fit, .lb__tools .lb__zoomout { display: none; }
}
.lb__loading { position: absolute; display: grid; justify-items: center; gap: var(--space-3); color: rgba(255, 255, 255, 0.75); font-size: var(--text-sm); }
.lb__loading .stripe-loader i { background: var(--brand-400); }
.lb__frame { width: 100%; height: 100%; border: 0; background: #fff; }
.lb__pdf {
  --pdf-zoom: 1;
  width: 100%; height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  touch-action: pan-x pan-y pinch-zoom;
  user-select: text;
}
.lb__page {
  width: calc(min(100%, 900px) * var(--pdf-zoom));
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.8);
}
.lb__more { color: rgba(255, 255, 255, 0.75); font-size: var(--text-sm); }
.lb__file {
  display: grid; justify-items: center; gap: var(--space-2);
  max-width: 360px; padding: var(--space-6) var(--space-5);
  text-align: center;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.lb__file-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: rgba(249, 115, 22, 0.16); color: var(--brand-300); margin-bottom: var(--space-2); }
.lb__file-icon .i { width: 34px; height: 34px; }
.lb__file-name { margin: 0; font-weight: var(--weight-bold); color: #fff; overflow-wrap: anywhere; }
.lb__file-text { margin: 0 0 var(--space-3); color: rgba(255, 255, 255, 0.75); font-size: var(--text-sm); }
.lb__thumbs {
  display: flex; gap: var(--space-2);
  padding: 10px var(--space-4) max(12px, env(safe-area-inset-bottom));
  overflow-x: auto;
  scrollbar-width: thin;
  justify-content: safe center;
  background: linear-gradient(rgba(12, 10, 9, 0.5), rgba(12, 10, 9, 0.9));
}
.lb__thumbs[hidden] { display: none; }
.lb__thumb {
  flex: 0 0 64px; width: 64px; height: 52px;
  padding: 0; overflow: hidden;
  display: grid; place-items: center; gap: 0;
  border: 2px solid transparent; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font: inherit; font-size: 0.625rem; font-weight: var(--weight-heavy);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb .i { width: 20px; height: 20px; }
.lb__thumb:hover { opacity: 0.9; }
.lb__thumb[aria-current='true'] { opacity: 1; border-color: var(--brand-400); }
/* The panel mode (custom body such as the printable TOP): a sheet on the dark stage. */
.lb--panel .lb__stage, .lb--panel .lb__thumbs, .lb--panel .lb__zoomin, .lb--panel .lb__zoomout,
.lb--panel .lb__fit, .lb--panel .lb__rotate, .lb--panel .lb__dl { display: none; }
.lb--panel { grid-template-rows: auto minmax(0, 1fr); }
.lb__panel { min-height: 0; display: flex; flex-direction: column; }
.lb__panel[hidden] { display: none; }
.lb__panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-4); color: var(--text-primary); }
.lb__panel-body > * { margin-inline: auto; }
.lb--panel:not(.lb--wide) .lb__panel-body > * { max-width: 560px; }
.lb__panel-body .permit-big { background: var(--surface-card); border-radius: var(--radius-xl); max-width: 420px; }
.lb__panel-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-5) max(var(--space-3), env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.lb__panel-foot[hidden] { display: none; }
@media (max-width: 560px) { .lb__panel-foot .btn { flex: 1 1 auto; } }

/* ── small pieces ───────────────────────────────────────────────────────── */
.toast__icon { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; color: var(--text-muted); }
.toast__icon .i { width: 20px; height: 20px; }
.toast[data-tone='success'] .toast__icon { color: var(--success-text); }
.toast[data-tone='danger'] .toast__icon { color: var(--danger-text); }
.toast[data-tone='warning'] .toast__icon { color: var(--warning-text); }
.toast[data-tone='info'] .toast__icon { color: var(--info-text); }
.notif__empty-icon .i { width: 32px; height: 32px; color: var(--text-brand); }
.review__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--radius-md); cursor: zoom-in; }
.review__zoom img { transition: transform var(--duration-fast) var(--ease-out); }
.review__zoom:hover img { transform: scale(1.02); }
.action--soon { opacity: 0.7; box-shadow: none; border-style: dashed; }
.action__title .i { width: 14px; height: 14px; vertical-align: -1px; color: var(--text-muted); }
.top-block__icon .i { width: 22px; height: 22px; color: var(--text-brand); }
.success__badge .i { width: 34px; height: 34px; }
.scan-status .i, .review-docs__tick .i { width: 16px; height: 16px; }
.capture__ok .i { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
.amd-block__ic .i { width: 20px; height: 20px; }
.empty__icon { font-size: 0; }
.services, .features { display: none; }

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bizcard:hover, a.action:hover, .permit-card__qr:hover { transform: none; }
  .journey__step.is-current .journey__dot::after, .stripe-loader i, .glance__seg { animation: none; }
  .lb__img { transition: none; }
}

/* ── print: the viewer and the bands never print ─────────────────────────── */
@media print {
  dialog.lb, .welcome__mark, .auth-hero__mark { display: none !important; }
  .bizcard { break-inside: avoid; }
}

/* ── round-1 fixes ──────────────────────────────────────────────────────── */
.auth-panel { position: relative; z-index: 1; }
.auth-hero__mark { width: min(36vw, 360px); right: -6%; bottom: -8%; }
.biz-side .permit-card { padding: 0; }
@media (max-width: 560px) {
  #actionNeeded .row { flex-wrap: wrap; }
  #actionNeeded .row .row__main { flex: 1 1 calc(100% - 60px); }
  #actionNeeded .row .row__aside { width: 100%; }
  #actionNeeded .row .row__aside .btn { flex: 1 1 auto; }
}
/* The full rail names every stage; below 560px six names do not fit, so it
   shows the dots plus the "Now · …" line, like the cards. */
.journey:not(.journey--compact) .journey__now { display: none; }
@media (max-width: 560px) {
  .journey:not(.journey--compact) .journey__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .journey:not(.journey--compact) .journey__now { display: flex; }
  .journey--hero .journey__now { display: none !important; }
}
/* The compliance callout: one warm surface, no thick side stripe. */
.comply, .comply--alert {
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-xl);
}
.comply--alert {
  background: linear-gradient(180deg, var(--surface-brand-tint) 0%, var(--surface-card) 180px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 12%, transparent), var(--shadow-md);
}
.comply--alert .comply__icon .i, .comply__icon svg { width: 22px; height: 22px; }
dialog.lb { background: rgba(12, 10, 9, 0.97); }
/* Side stripes retired across the older components: the full tinted border
   and the wording carry the tone. */
.form-check, .settle, .row--alert, .kyc-gate__reason, .lreq, .amd-hist__remarks {
  border-left-width: 1px;
}
.amd-hist__remarks { border: 1px solid var(--border-default); border-radius: var(--radius-sm); }

/* ============================================================================
   19. ROUND 2 (2026-10-07): SIDEBAR SHELL
   ============================================================================
   A fixed glass sidebar on desktop (collapsible to an icon rail), a slim glass
   top bar, an off-canvas drawer + bottom bar on phones. Depth comes from
   layered shadows and soft orange glows; every motion is transform/opacity
   and stops under prefers-reduced-motion. js/nav.js owns the markup. */

:root {
  --sb-w: 272px;
  --sb-rail: 84px;
  --topbar-h: 64px;
  --bottombar-h: 68px;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-line: rgba(68, 48, 30, 0.1);
  --glow-brand: 0 10px 28px -10px rgba(234, 88, 12, 0.6), 0 2px 6px -2px rgba(194, 65, 12, 0.35);
  --sb-active: linear-gradient(135deg, #cf4a0e 0%, #b23b0a 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --glass: rgba(28, 24, 21, 0.7);
    --glass-strong: rgba(28, 24, 21, 0.88);
    --glass-line: rgba(255, 236, 220, 0.09);
    --glow-brand: 0 10px 30px -10px rgba(251, 138, 60, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme='dark'] {
  --glass: rgba(28, 24, 21, 0.7);
  --glass-strong: rgba(28, 24, 21, 0.88);
  --glass-line: rgba(255, 236, 220, 0.09);
  --glow-brand: 0 10px 30px -10px rgba(251, 138, 60, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.5);
}

/* The page behind the glass gets a faint warm aurora so the blur has
   something to work on — two radial washes, fixed, behind everything. */
html.has-sidebar body {
  background:
    radial-gradient(900px 520px at 100% -10%, color-mix(in srgb, var(--brand-400) 10%, transparent), transparent 70%),
    radial-gradient(700px 480px at 0% 110%, color-mix(in srgb, var(--brand-300) 8%, transparent), transparent 70%),
    var(--surface-page);
  background-attachment: fixed;
}

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  border-top: 0;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
          backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 8px 24px -18px rgba(41, 30, 22, 0.35);
}
.topbar__inner { min-height: var(--topbar-h); max-width: none; gap: var(--space-2); }
:root { --header-height: var(--topbar-h); }
.topbar__btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.topbar__btn:hover { background: var(--surface-hover); color: var(--text-brand); }
.topbar__btn:active { transform: scale(0.96); }
.topbar__btn .i { width: 21px; height: 21px; }
.topbar .notif__btn { width: 44px; height: 44px; min-height: 44px; border-radius: 12px; }
.topbar__menu { display: none; }
.topbar__where {
  display: flex; align-items: center; gap: 6px;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  min-width: 0;
}
.topbar__sep { width: 14px; height: 14px; opacity: 0.6; }
.topbar__page { font-weight: var(--weight-bold); color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.has-sidebar .topbar__brand { display: none; }
@media (min-width: 1024px) {
  html.has-sidebar body { padding-left: var(--sb-w); transition: padding-left var(--duration-base) var(--ease-out); }
  html.has-sidebar.sb-rail body { padding-left: var(--sb-rail); }
  html.has-sidebar .topbar__inner { padding: 0 var(--space-6); }
}

/* ── sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--sb-w);
  display: flex; flex-direction: column;
  padding: var(--space-4) var(--space-3) var(--space-3);
  background:
    radial-gradient(240px 180px at 0% 0%, color-mix(in srgb, var(--brand-400) 18%, transparent), transparent 70%),
    var(--glass-strong);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
          backdrop-filter: saturate(1.6) blur(18px);
  border-right: 1px solid var(--glass-line);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5) inset, 16px 0 40px -28px rgba(41, 30, 22, 0.45);
  overflow: hidden;
  transition: width var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.sidebar::after {
  /* the city's three bars, very faint, anchored low in the rail */
  content: '';
  position: absolute; left: -30px; bottom: 90px; z-index: -1;
  width: 220px; aspect-ratio: 162 / 137;
  background: var(--brand-accent); opacity: 0.05;
  -webkit-mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
          mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
  pointer-events: none;
}
.sb-head { display: flex; align-items: center; gap: var(--space-2); padding: 4px 6px var(--space-4); border-bottom: 1px solid var(--glass-line); }
.sb-head .brand { flex: 1 1 auto; min-width: 0; }
.sb-head .brand__name { font-size: 0.875rem; color: var(--text-secondary); font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: 0; white-space: normal; line-height: 1.2; }
.sb-head .brand__sub { order: -1; margin: 0 0 2px; font-family: var(--font-display); font-size: 1.0625rem; font-weight: var(--weight-bold); letter-spacing: -0.02em; text-transform: none; color: var(--text-heading); white-space: normal; line-height: 1.1; }
.sb-head .brand__text { display: flex; flex-direction: column; }
.sb-icon-btn { display: none; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.sb-icon-btn:hover { background: var(--surface-hover); color: var(--text-brand); }
.sb-icon-btn .i { width: 22px; height: 22px; }

.sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: var(--space-2) 2px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.sb-group + .sb-group { margin-top: var(--space-3); }
.sb-group__title {
  margin: var(--space-3) 10px var(--space-2);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.sb-group__links { display: grid; gap: 3px; }
.sb-link, .sb-signout, .sb-collapse {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0; border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.sb-link__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; transition: background var(--duration-fast) var(--ease-out); }
.sb-link .i, .sb-signout .i, .sb-collapse .i { width: 20px; height: 20px; }
.sb-link__label { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--duration-fast) var(--ease-out); }
.sb-link:hover { background: var(--surface-hover); color: var(--text-heading); text-decoration: none; transform: translateX(2px); }
.sb-link:hover .sb-link__icon { color: var(--text-brand); }
.sb-link:focus-visible, .sb-signout:focus-visible, .sb-collapse:focus-visible { outline: 2.5px solid var(--brand-accent); outline-offset: 1px; }
/* ACTIVE: a deep-orange gradient pill with a soft glow and a light rim, plus
   bold weight — shape, weight and colour together, never colour alone.
   White on #b23b0a–#cf4a0e is 5.2–6.1:1. */
.sb-link[aria-current='page'] {
  background: var(--sb-active);
  color: #fff;
  font-weight: var(--weight-bold);
  box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: sb-in var(--duration-slow) var(--ease-out) both;
}
.sb-link[aria-current='page'] .sb-link__icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sb-link[aria-current='page']:hover { transform: none; color: #fff; }
.sb-link[aria-current='page']::before {
  content: '';
  position: absolute; left: -12px; top: 10px; bottom: 10px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--brand-accent);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--brand-accent) 60%, transparent);
}
@keyframes sb-in { from { opacity: 0.4; transform: translateX(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.sb-link .lock-badge { margin-left: auto; color: var(--text-muted); }
.sb-link[aria-current='page'] .lock-badge { color: #fff; }

.sb-foot { display: grid; gap: 4px; padding-top: var(--space-3); border-top: 1px solid var(--glass-line); }
.sb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface-card);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.sb-user .avatar { width: 38px; height: 38px; flex: 0 0 38px; font-size: var(--text-sm); background: var(--sb-active); box-shadow: var(--glow-brand); }
.sb-user__text { display: grid; min-width: 0; }
.sb-user__name { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user__kyc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); white-space: nowrap; }
.sb-user__kyc::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tone-slate-solid); }
.sb-user__kyc[data-tone='green'] { color: var(--tone-green-text); }
.sb-user__kyc[data-tone='green']::before { background: var(--tone-green-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-green-solid) 22%, transparent); }
.sb-user__kyc[data-tone='amber'] { color: var(--tone-amber-text); }
.sb-user__kyc[data-tone='amber']::before { background: var(--tone-amber-solid); }
.sb-user__kyc[data-tone='red'] { color: var(--tone-red-text); }
.sb-user__kyc[data-tone='red']::before { background: var(--tone-red-solid); }
.sb-signout:hover { background: var(--danger-surface); color: var(--danger-text); }
.sb-collapse { color: var(--text-muted); }
.sb-collapse:hover { background: var(--surface-sunken); color: var(--text-heading); }
.sb-collapse .i { transition: transform var(--duration-base) var(--ease-out); }
.sb-signout .i, .sb-collapse .i { margin: 0 6px; }

/* ── rail (collapsed, desktop) ───────────────────────────────────────── */
@media (min-width: 1024px) {
  .sb-rail .sidebar { width: var(--sb-rail); padding-inline: 14px; }
  .sb-rail .sb-head { justify-content: center; padding-inline: 0; }
  .sb-rail .brand__text, .sb-rail .sb-link__label, .sb-rail .sb-user__text { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
  .sb-rail .sb-group__title { height: 1px; margin: var(--space-3) 8px; overflow: hidden; color: transparent; background: var(--glass-line); }
  .sb-rail .sb-link, .sb-rail .sb-signout, .sb-rail .sb-collapse { justify-content: center; padding: 0; gap: 0; }
  .sb-rail .sb-signout .i, .sb-rail .sb-collapse .i { margin: 0; }
  .sb-rail .sb-link__label { position: absolute; }
  .sb-rail .sb-user { justify-content: center; padding: 8px 0; background: transparent; border-color: transparent; box-shadow: none; }
  .sb-rail .sb-collapse .i { transform: rotate(180deg); }
  .sb-rail .sb-link .lock-badge { position: absolute; top: 4px; right: 4px; margin: 0; }
  .sb-rail .sb-link:hover { transform: none; }
  .sb-rail .sb-link[aria-current='page']::before { left: -14px; }
  .sb-rail .sidebar::after { display: none; }
  /* Tooltip with the full name, on hover AND keyboard focus. */
  .sb-rail [data-tip]:hover::after, .sb-rail [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 12px); top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surface-ink);
    color: #fff;
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    z-index: 5;
  }
  .sb-rail .sidebar { overflow: visible; }
  .sb-rail .sb-nav { overflow: visible; }
  .bottombar, .sb-scrim { display: none !important; }
}

/* ── drawer + bottom bar (phones, tablets) ───────────────────────────── */
.bottombar { display: none; }
@media (max-width: 1023px) {
  html.has-sidebar .topbar__menu { display: inline-grid; }
  html.has-sidebar .topbar__brand { display: block; min-width: 0; }
  html.has-sidebar .topbar__where { display: none; }
  .sidebar {
    width: min(320px, 86vw);
    transform: translateX(-104%);
    box-shadow: 24px 0 60px -20px rgba(0, 0, 0, 0.45);
    background: var(--surface-card);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow);
  }
  .sb-open .sidebar { transform: none; visibility: visible; transition: transform var(--duration-slow) var(--ease-out), visibility 0s; }
  .sb-icon-btn { display: inline-grid; }
  .sb-collapse { display: none; }
  .sb-scrim {
    position: fixed; inset: 0; z-index: 49;
    background: rgba(18, 10, 4, 0.5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
  }
  .sb-open .sb-scrim { opacity: 1; }
  .sb-open body { overflow: hidden; }

  html.has-sidebar body { padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom)); }
  .bottombar {
    position: fixed; z-index: 45;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px;
    border-radius: 22px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
            backdrop-filter: saturate(1.6) blur(16px);
    border: 1px solid var(--glass-line);
    box-shadow: 0 18px 40px -16px rgba(41, 30, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .bottombar__item {
    position: relative;
    display: grid; justify-items: center; align-content: center; gap: 3px;
    min-height: 52px;
    border: 0; border-radius: 16px;
    background: transparent;
    color: var(--text-muted);
    font: inherit; font-size: 0.6875rem; font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
  }
  .bottombar__item .i { width: 22px; height: 22px; transition: transform var(--duration-fast) var(--ease-out); }
  .bottombar__item:hover { text-decoration: none; color: var(--text-heading); }
  .bottombar__item:active .i { transform: scale(0.9); }
  .bottombar__item[aria-current='page'] { color: #fff; background: var(--sb-active); box-shadow: var(--glow-brand); }
  .bottombar__item .lock-badge { position: absolute; top: 6px; right: calc(50% - 20px); }
  .toast-host { bottom: calc(var(--bottombar-h) + 22px + env(safe-area-inset-bottom)); }
  html.has-sidebar .app-footer { padding-bottom: 8px; }
}
@media (max-width: 560px) {
  html.has-sidebar .topbar__brand .brand__text { display: none; }
  .topbar__brand .brand__mark { width: 38px; height: 38px; flex-basis: 38px; }
}

/* The old strip and its pieces are retired. */
.app-nav { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sb-scrim, html.has-sidebar body { transition: none !important; }
  .sb-link[aria-current='page'] { animation: none; }
  .sb-link:hover { transform: none; }
}

/* ============================================================================
   20. ROUND 2: DASHBOARD (the admin console's visual language)
   ============================================================================
   Same grammar as admin-web's metric cards and .dash-grid: uppercase micro
   labels, a big tabular figure, a tinted mark — here a gradient tile — and
   one solid orange card in the row. Always four cards, so the grid is a clean
   4 → 2×2 with no stray cell. */

.kpis {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-5);
}
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi-skel { height: 168px; border-radius: 20px; }
.kpi {
  --k-solid: var(--brand-600); --k-2: var(--brand-400); --k-text: var(--text-brand);
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
  border-radius: 20px;
  background:
    radial-gradient(160px 120px at 100% 0%, color-mix(in srgb, var(--k-2) 16%, transparent), transparent 70%),
    var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 2px rgba(41, 30, 22, 0.05), 0 12px 28px -18px rgba(41, 30, 22, 0.28);
  color: inherit;
  font-weight: var(--weight-regular);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.kpi:hover { text-decoration: none; transform: translateY(-3px); border-color: color-mix(in srgb, var(--k-solid) 40%, transparent); box-shadow: 0 2px 4px rgba(41, 30, 22, 0.06), 0 22px 40px -20px color-mix(in srgb, var(--k-solid) 55%, transparent); }
.kpi[data-tone='blue'] { --k-solid: #2563eb; --k-2: #60a5fa; --k-text: var(--tone-blue-text); }
.kpi[data-tone='green'] { --k-solid: #16a34a; --k-2: #4ade80; --k-text: var(--tone-green-text); }
.kpi[data-tone='violet'] { --k-solid: #7c3aed; --k-2: #a78bfa; --k-text: var(--tone-violet-text); }
.kpi__head { display: flex; align-items: center; gap: var(--space-3); }
.kpi__tile {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--k-2), var(--k-solid));
  color: #fff;
  box-shadow: 0 10px 20px -10px var(--k-solid), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.kpi__tile .i { width: 22px; height: 22px; }
.kpi__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.kpi__body { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.kpi__value { font-family: var(--font-display); font-size: 2.75rem; font-weight: var(--weight-heavy); line-height: 1; letter-spacing: -0.04em; color: var(--text-heading); }
.kpi__caption { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.4; }
.kpi__ring { position: relative; width: 56px; height: 56px; flex: 0 0 56px; }
.kpi__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kpi__ring-track { fill: none; stroke: color-mix(in srgb, var(--k-solid) 16%, transparent); stroke-width: 4.5; }
.kpi__ring-fill { fill: none; stroke: var(--k-solid); stroke-width: 4.5; stroke-linecap: round; animation: ring-in 0.9s var(--ease-out) both; }
@keyframes ring-in { from { stroke-dasharray: 0 200; } }
.kpi__pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.6875rem; font-weight: var(--weight-heavy); color: var(--k-text); font-variant-numeric: tabular-nums; }
/* The solid card: the one figure that asks something of the resident. */
.kpi--solid {
  background: var(--brand-glow), var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 4px rgba(120, 40, 5, 0.2), 0 22px 40px -20px rgba(194, 65, 12, 0.75);
}
.kpi--solid::after {
  content: ''; position: absolute; right: -22px; bottom: -26px; z-index: -1;
  width: 150px; aspect-ratio: 162 / 137; background: #fff; opacity: 0.1;
  -webkit-mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
          mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
}
.kpi--solid .kpi__label, .kpi--solid .kpi__caption { color: rgba(255, 255, 255, 0.92); }
.kpi--solid .kpi__value { color: #fff; }
.kpi--solid .kpi__tile { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.kpi--solid .kpi__ring-track { stroke: rgba(255, 255, 255, 0.25); }
.kpi--solid .kpi__ring-fill { stroke: #fff; }
.kpi--solid .kpi__pct { color: #fff; }
.kpi--solid:hover { border-color: transparent; }
@media (max-width: 560px) {
  .kpis { gap: var(--space-3); }
  .kpi { padding: var(--space-4); gap: var(--space-2); border-radius: 18px; }
  .kpi__value { font-size: 2.125rem; }
  .kpi__ring { width: 44px; height: 44px; flex-basis: 44px; }
  .kpi__caption { font-size: var(--text-xs); }
  .kpi__tile { width: 38px; height: 38px; flex-basis: 38px; }
}

/* ── panels row: journey chart (2fr) + needs-your-attention (1fr) ── */
.dash-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: var(--space-2);
}
@media (min-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: var(--space-5); } }
.dash-panel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: 20px; box-shadow: 0 1px 2px rgba(41, 30, 22, 0.05), 0 12px 28px -20px rgba(41, 30, 22, 0.3); margin: 0; }
.card.dash-panel + .card.dash-panel { margin-top: 0; }
.dash-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.dash-panel__title { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.dash-panel__sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.dash-panel__figure { display: flex; flex-direction: column; align-items: flex-end; margin: 0; flex: 0 0 auto; }
.dash-panel__figure strong { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-weight: var(--weight-heavy); letter-spacing: -0.03em; color: var(--text-heading); }
.dash-panel__figure span { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.attn-count {
  display: grid; place-items: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: #fff; font-weight: var(--weight-heavy); font-size: var(--text-sm);
  box-shadow: var(--glow-brand);
}
.attn-count[hidden] { display: none; }

.stage-chart { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-4); min-height: 240px; }
.stage-skel { flex: 1 1 auto; min-height: 220px; border-radius: 14px; }
.stage-chart__note { margin: auto 0; padding: var(--space-4); border-radius: 12px; background: var(--surface-inset); color: var(--text-secondary); font-size: var(--text-sm); }
.stage-chart__cols {
  list-style: none; margin: 0; padding: 0 0 0;
  flex: 1 1 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
  min-height: 210px;
  background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--border-subtle) calc(25% - 1px) 25%);
  background-size: 100% calc(100% - 44px);
  background-position: 0 20px;
  background-repeat: no-repeat;
}
.stage-chart__col { --c: var(--brand-accent); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 6px; min-width: 0; }
.stage-chart__col[data-tone='green'] { --c: var(--tone-green-solid); }
.stage-chart__col[data-tone='gray'] { --c: var(--tone-gray-solid); }
.stage-chart__value { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--text-heading); line-height: 1; }
.stage-chart__bar-wrap { position: relative; width: 100%; max-width: 56px; height: 100%; display: flex; align-items: flex-end; }
.stage-chart__bar {
  position: relative;
  width: 100%; height: var(--h);
  min-height: 4px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  box-shadow: 0 10px 20px -12px var(--c);
  overflow: hidden;
  transform-origin: bottom;
  animation: bar-grow 0.7s var(--ease-out) both;
}
.stage-chart__bar[style*='--h:0%'] { background: var(--border-default); box-shadow: none; height: 4px; }
.stage-chart__mine { position: absolute; left: 0; right: 0; bottom: 0; height: var(--m); background: repeating-linear-gradient(135deg, var(--tone-amber-solid) 0 6px, color-mix(in srgb, var(--tone-amber-solid) 80%, #fff) 6px 12px); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.stage-chart__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.stage-chart__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
.stage-chart__legend li { display: inline-flex; align-items: center; gap: 8px; }
.stage-chart__key { width: 12px; height: 12px; border-radius: 4px; background: var(--brand-accent); }
.stage-chart__key[data-tone='amber'] { background: repeating-linear-gradient(135deg, var(--tone-amber-solid) 0 3px, color-mix(in srgb, var(--tone-amber-solid) 70%, #fff) 3px 6px); }
.stage-chart__key[data-tone='green'] { background: var(--tone-green-solid); }
@media (max-width: 480px) {
  .stage-chart__cols { gap: 6px; }
  .stage-chart__label { font-size: 0.625rem; }
}

.attn-list { gap: var(--space-2); }
.dash-panel--attn .row { box-shadow: none; border-radius: 14px; padding: 12px; gap: 12px; }
.dash-panel--attn .row--alert { background: linear-gradient(90deg, var(--warning-surface), transparent 90%); }
.dash-panel--attn .row__icon, .dash-panel--attn .row--alert__icon { width: 40px; height: 40px; flex-basis: 40px; }
.dash-panel--attn .row .row__aside { flex: 0 0 auto; }
@media (min-width: 1100px) {
  .dash-panel--attn .row { flex-wrap: wrap; }
  .dash-panel--attn .row .row__main { flex: 1 1 calc(100% - 56px); }
  .dash-panel--attn .row .row__aside { width: 100%; padding-left: 52px; }
}
@media (max-width: 560px) {
  .dash-panel--attn .row { flex-wrap: wrap; }
  .dash-panel--attn .row .row__main { flex: 1 1 calc(100% - 56px); }
  .dash-panel--attn .row .row__aside { width: 100%; }
  .dash-panel--attn .row .row__aside .btn { flex: 1 1 auto; }
}
.attn-clear { margin: auto 0; display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-3); text-align: center; }
.attn-clear__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: linear-gradient(140deg, #4ade80, #16a34a); color: #fff; box-shadow: 0 14px 28px -14px #16a34a; }
.attn-clear__icon .i { width: 28px; height: 28px; }
.attn-clear__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--text-heading); }
.attn-clear__text { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 34ch; }
.dash-panel--attn .attn-list { flex: 1 1 auto; }

/* The welcome band gains a soft top glow line and sits on the aurora. */
.welcome { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 48px -26px rgba(154, 52, 18, 0.8); }

@media (prefers-reduced-motion: reduce) {
  .kpi:hover { transform: none; }
  .kpi__ring-fill, .stage-chart__bar { animation: none; }
}

/* round-2 fixes for older rules */
.biz-tabs { top: calc(var(--topbar-h) + 8px); }
.sb-head .brand__sub { display: block !important; }
.glance { display: none; }

/* ============================================================================
   21. ROUND 2: LANDING — one container, no dead band
   ============================================================================
   The orange is now a full-bleed field behind BOTH columns, and the content
   sits in one 1280px container: copy + a layered dashboard preview on the
   left, the sign-in card right beside it. At 1440 and 1920 the field grows,
   the content stays together. */

.auth-shell {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(253, 178, 116, 0.45), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(110, 30, 4, 0.55), transparent 60%),
    var(--brand-gradient);
}
.auth-shell::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: url('../assets/figma/hero-bg.jpg') center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.5;
}
.auth-wrap {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) var(--gutter) var(--space-7);
}
@media (min-width: 960px) {
  .auth-wrap {
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, 460px);
    gap: clamp(40px, 5vw, 88px);
    align-items: center;
    min-height: min(100vh, 900px);
    padding: 48px clamp(32px, 4vw, 56px) 64px;
  }
}
.auth-hero { background: none; overflow: visible; order: 1; }
.auth-hero::after { display: none; }
.auth-hero__inner { max-width: none; margin: 0; padding: 0; min-height: 0; gap: var(--space-6); justify-content: flex-start; }
.auth-hero__mark { display: none; }
.auth-shell .auth-panel { order: 2; padding: 0; margin: 0; gap: var(--space-4); justify-content: center; }
.auth-shell .auth-body { max-width: 460px; box-shadow: 0 2px 4px rgba(60, 20, 0, 0.12), 0 40px 80px -30px rgba(60, 20, 0, 0.55); border-color: rgba(255, 255, 255, 0.4); }
.auth-shell .auth-disclaimer { color: rgba(255, 255, 255, 0.92); max-width: 460px; }
.auth-shell .auth-disclaimer .i { color: #fff; }
.auth-shell .auth-disclaimer a { color: #fff; text-decoration: underline; }
.auth-hero__title { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem); max-width: 14ch; }
@media (min-width: 1440px) { .auth-hero__lead { font-size: 1.25rem; } }

/* the layered preview */
.preview { margin: 0; max-width: 560px; }
.preview__stack { position: relative; padding: 34px 0 40px 0; }
.preview__card {
  position: relative; z-index: 2;
  display: grid; gap: 12px;
  margin-right: 12%;
  padding: 18px 18px 14px;
  border-radius: 20px;
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px rgba(60, 20, 0, 0.15), 0 34px 70px -28px rgba(50, 15, 0, 0.7);
  transform: rotate(-1.5deg);
}
.preview__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.preview__name { flex: 1 1 auto; min-width: 0; display: grid; font-weight: var(--weight-bold); color: var(--text-heading); font-size: var(--text-base); }
.preview__name small { font-weight: var(--weight-medium); font-size: var(--text-xs); color: var(--text-muted); }
.preview__now { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.preview__kpi {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 20px 40px -20px rgba(50, 15, 0, 0.6);
  font-size: var(--text-sm);
}
.preview__kpi b { display: block; color: var(--text-heading); }
.preview__kpi small { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.preview__kpi--a { top: 0; right: 0; transform: rotate(2deg); }
.preview__kpi--b { bottom: 0; left: 18%; }
.preview__tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: linear-gradient(140deg, #4ade80, #16a34a); box-shadow: 0 8px 16px -8px #16a34a; }
.preview__tile--amber { background: linear-gradient(140deg, #fbbf24, #d97706); box-shadow: 0 8px 16px -8px #d97706; }
.preview__tile .i { width: 18px; height: 18px; }
.preview figcaption { margin-top: var(--space-2); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.85); }
.auth-hero__facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3) var(--space-4); }
@media (max-width: 959px) {
  .preview { display: none; }
  .auth-hero__facts { display: none; }
  .auth-shell .auth-panel { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .preview__card, .preview__kpi--a { transform: none; } }
.journey-demo { display: none; }
.sidebar .sb-signout .i, .sidebar .app-header__logout .i { display: block; }
/* round-2 polish */
@media (max-width: 420px) { #themeBtn { display: inline-grid; } }
.preview__stack { padding: 46px 0 52px; }
.preview__kpi--a { top: 0; right: 2%; }
.preview__kpi--b { left: auto; right: 6%; bottom: 0; }
.sb-nav { min-height: 0; } .sb-head, .sb-foot { flex: 0 0 auto; }
@media (min-width: 1600px) { html.has-sidebar .page { max-width: 1400px; } }

/* ============================================================================
   22. RENEWAL (2026-10-07c): gross table, progress sheet, assessment preview
   ============================================================================ */

/* ── gross per line: a table on desktop, a card per line on a phone ── */
.gx { display: grid; gap: var(--space-3); }
.gx-head {
  display: none;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-1);
  font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.gx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.gx-row:focus-within { border-color: var(--border-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 12%, transparent); }
.gx-row__line { grid-column: 1 / -1; min-width: 0; }
.gx-row__name { display: block; font-weight: var(--weight-bold); color: var(--text-heading); overflow-wrap: anywhere; }
.gx-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: var(--text-xs); color: var(--text-muted); }
.gx-row__code { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-brand-tint); color: var(--text-brand); font-family: var(--font-mono); font-weight: var(--weight-semibold); }
.gx-row__field { min-width: 0; }
.gx-row__lbl { display: block; margin-bottom: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.gx-row__err { grid-column: 1 / -1; margin: 0; }
.gx-row .input, .gx-only .input { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .gx-head { display: grid; }
  .gx-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
  .gx-row__line { grid-column: auto; }
  .gx-row__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.gx-total {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--brand-glow), var(--brand-gradient);
  color: #fff;
  box-shadow: 0 14px 30px -18px rgba(154, 52, 18, 0.8);
}
.gx-total__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.92); }
.gx-total__value { font-family: var(--font-display); font-size: 1.625rem; font-weight: var(--weight-heavy); letter-spacing: -0.02em; }

/* ── the progress sheet ── */
dialog.rx-sheet {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: var(--gutter); border: 0;
  background: rgba(20, 10, 4, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  display: none; place-items: center;
}
dialog.rx-sheet[open] { display: grid; animation: lb-in var(--duration-base) var(--ease-out); }
dialog.rx-sheet::backdrop { background: transparent; }
dialog.rx-sheet:focus { outline: none; }
.rx-sheet__card {
  position: relative;
  width: min(440px, 100%);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(260px 180px at 50% -10%, color-mix(in srgb, var(--brand-400) 30%, transparent), transparent 70%),
    var(--glass-strong);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line);
  box-shadow: 0 40px 90px -30px rgba(40, 12, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--text-primary);
}
.rx-orb {
  position: relative;
  width: 96px; height: 96px; margin: 0 auto var(--space-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #ff922b, #dd6616);
  box-shadow: 0 18px 40px -14px rgba(221, 102, 22, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.rx-orb__ring {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--brand-400);
  border-right-color: color-mix(in srgb, var(--brand-400) 40%, transparent);
  animation: spin 1.1s linear infinite;
}
.rx-orb__bars { width: 40px; gap: 5px; }
.rx-orb__bars i { height: 8px; background: #fff; }
.rx-sheet__title { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.02em; margin-bottom: 4px; }
.rx-sheet__now { margin: 0 0 var(--space-4); font-weight: var(--weight-semibold); color: var(--text-brand); min-height: 1.5em; }
.rx-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; margin-bottom: var(--space-4); }
.rx-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, #ff922b, #dd6616); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); }
.rx-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.rx-stage { display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); color: var(--text-muted); transition: color var(--duration-base) var(--ease-out); }
.rx-stage__dot {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  color: transparent;
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.rx-stage__dot .i { width: 13px; height: 13px; stroke-width: 3; }
.rx-stage[data-state='active'] { color: var(--text-heading); font-weight: var(--weight-bold); }
.rx-stage[data-state='active'] .rx-stage__dot { border-color: var(--brand-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 20%, transparent); position: relative; }
.rx-stage[data-state='active'] .rx-stage__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); animation: pulse 1.4s var(--ease-out) infinite; position: absolute; }
.rx-stage[data-state='done'] { color: var(--text-secondary); }
.rx-stage[data-state='done'] .rx-stage__dot { background: var(--tone-green-solid); border-color: var(--tone-green-solid); color: #fff; }
.rx-sheet__uploads:not(:empty) { margin-top: var(--space-4); text-align: left; max-height: 30vh; overflow: auto; }
.rx-sheet__uploads[hidden] { display: none; }
.rx-sheet__uploads .upl { margin: 0; }

/* ── the assessment preview ── */
dialog.rx-preview { max-width: min(680px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--gutter)); display: none; flex-direction: column; overflow: hidden; }
dialog.rx-preview[open] { display: flex; }
.rx-preview__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--brand-glow), var(--brand-gradient);
  color: #fff;
}
.rx-preview__mark { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.rx-preview__mark .i { width: 24px; height: 24px; }
.rx-preview__title { color: #fff; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.02em; }
.rx-preview__sub { margin: 2px 0 0; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.9); }
.rx-preview__body { flex: 1 1 auto; overflow: auto; padding: var(--space-5); display: grid; gap: var(--space-4); }
.rx-preview__body .banner { margin: 0; }
.rx-preview__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-default); background: var(--surface-inset); }
@media (max-width: 560px) { .rx-preview__foot .btn { flex: 1 1 auto; } }
.rx-table-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.rx-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rx-table th, .rx-table td { padding: 10px 14px; text-align: left; border-top: 1px solid var(--border-subtle); vertical-align: top; }
.rx-table thead th { border-top: 0; background: var(--surface-brand-tint); color: var(--text-brand); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.rx-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rx-table tbody th { font-weight: var(--weight-semibold); color: var(--text-heading); }
.rx-line { display: block; overflow-wrap: anywhere; }
.rx-code { display: inline-block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-regular); }
.rx-strong { font-weight: var(--weight-bold); color: var(--text-heading); }
.rx-table tfoot th, .rx-table tfoot td { background: var(--surface-inset); font-weight: var(--weight-bold); color: var(--text-heading); border-top: 2px solid var(--border-strong); }
@media (max-width: 560px) {
  .rx-table thead { display: none; }
  .rx-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); }
  .rx-table tbody th { grid-column: 1 / -1; border-top: 0; padding-bottom: 4px; }
  .rx-table tbody td { border-top: 0; text-align: left; padding-top: 0; }
  .rx-table tbody td::before { content: attr(data-label); display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-semibold); }
  .rx-table tfoot tr { display: flex; justify-content: space-between; }
}
.rx-cedula { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-inset); border: 1px solid var(--border-subtle); }
.rx-cedula__head { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-semibold); color: var(--text-heading); }
.rx-cedula__head strong { margin-left: auto; font-family: var(--font-display); font-size: var(--text-md); }
.rx-cedula__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(140deg, #a78bfa, #7c3aed); color: #fff; box-shadow: 0 8px 16px -8px #7c3aed; }
.rx-cedula__icon .i { width: 18px; height: 18px; }
.rx-cedula__parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.rx-cedula__parts dt { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-semibold); }
.rx-cedula__parts dd { margin: 2px 0 0; font-weight: var(--weight-bold); color: var(--text-heading); }
.rx-total {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--brand-glow), var(--brand-gradient);
  color: #fff;
}
.rx-total span { font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.92); }
.rx-total strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: var(--weight-heavy); letter-spacing: -0.02em; }
.rx-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.rx-note .i { width: 18px; height: 18px; margin-top: 2px; color: var(--text-brand); }
.rx-fallback { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--info-surface); border: 1px solid var(--info-border); }
.rx-fallback__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: linear-gradient(140deg, #60a5fa, #2563eb); color: #fff; }
.rx-fallback__icon .i { width: 22px; height: 22px; }
.rx-fallback__title { margin: 0 0 4px; font-weight: var(--weight-bold); color: var(--text-heading); }
.rx-fallback__text { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.rx-sum { margin: 0; display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); }
.rx-sum dt { color: var(--text-secondary); }
.rx-sum dd { margin: 0; font-weight: var(--weight-bold); color: var(--text-heading); }

@media (prefers-reduced-motion: reduce) {
  .rx-orb__ring, .rx-stage[data-state='active'] .rx-stage__dot::after, .rx-orb__bars i { animation: none; }
  .rx-bar__fill { transition: none; }
}
.rx-preview__body { display: flex; flex-direction: column; } .rx-preview__body > * { flex: 0 0 auto; }

/* ── sidebar hardening (round 3): no load-time animation, never clipped ── */
html:not(.sb-ready) .sidebar,
html:not(.sb-ready) body,
html:not(.sb-ready) .sb-link__label,
html:not(.sb-ready) .sb-scrim { transition: none !important; }
@media (min-width: 1024px) {
  html.has-sidebar .sidebar {
    transform: none !important;
    visibility: visible !important;
    width: var(--sb-w);
    min-width: var(--sb-w);
    max-width: var(--sb-w);
  }
  html.has-sidebar.sb-rail .sidebar { width: var(--sb-rail); min-width: var(--sb-rail); max-width: var(--sb-rail); }
  /* In the rail the labels are removed from rendering outright, not just faded,
     so no fragment can peek out of an 84px rail. */
  html.has-sidebar.sb-rail .sb-link__label,
  html.has-sidebar.sb-rail .brand__text,
  html.has-sidebar.sb-rail .sb-user__text { display: none; }
  html.has-sidebar:not(.sb-rail) .sidebar { overflow: hidden; }
}
/* Below the drawer breakpoint the sidebar is off-canvas unless opened, and
   does not belong to the page width. */
@media (max-width: 1023px) {
  html.has-sidebar:not(.sb-open) .sidebar { transform: translateX(-104%); visibility: hidden; }
  html.has-sidebar .topbar__brand .brand__text { display: flex; }
}
@media (max-width: 560px) { html.has-sidebar .topbar__brand .brand__text { display: none; } }
/* The bottom bar must never cover the control a keyboard or script scrolls to. */
@media (max-width: 1023px) {
  html.has-sidebar { scroll-padding-bottom: calc(var(--bottombar-h) + 96px); }
}

/* ============================================================================
   23. FORMS ROUND (2026-10-07d): New Permit wizard + renew / amend / close
   ============================================================================
   The wizard becomes a glass header (stepper with every step's name, progress
   bar, current step glowing) over section cards; inputs gain a success state;
   document rows become drop zones with status chips; Back/Next is a sticky
   glass bar on phones. Same markup hooks as before — fields, validation,
   payloads and endpoints untouched. */

.wiz { background: transparent; border: 0; box-shadow: none; padding: 0; }
.wiz__head {
  margin-bottom: var(--space-3);
  padding: var(--space-5);
  border-radius: 22px;
  background:
    radial-gradient(420px 180px at 100% 0%, color-mix(in srgb, var(--brand-400) 16%, transparent), transparent 70%),
    var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 2px rgba(41, 30, 22, 0.05), 0 16px 34px -24px rgba(41, 30, 22, 0.35);
}
.wiz > .progress { margin: 0 var(--space-2) var(--space-2); height: 8px; }
.wiz__count { margin: 0 var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.02em; color: var(--text-muted); }

/* the stepper */
.wstep {
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
}
.wstep__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.wstep__item::before {
  content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; border-radius: 3px;
  background: var(--border-default);
}
.wstep__item:first-child::before { display: none; }
.wstep__item.is-done::before, .wstep__item.is-current::before { background: linear-gradient(90deg, var(--brand-fill), var(--brand-accent)); }
.wstep__dot {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-card);
  border: 2px solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-xs); font-weight: var(--weight-heavy);
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.wstep__dot .i { width: 15px; height: 15px; stroke-width: 3; }
.wstep__item.is-done .wstep__dot { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.wstep__item.is-current .wstep__dot {
  background: var(--sb-active); border-color: transparent; color: #fff;
  box-shadow: var(--glow-brand), 0 0 0 5px color-mix(in srgb, var(--brand-accent) 20%, transparent);
  animation: sb-in var(--duration-slow) var(--ease-out) both;
}
.wstep__label { font-size: 0.6875rem; font-weight: var(--weight-semibold); color: var(--text-muted); line-height: 1.2; padding: 0 2px; overflow-wrap: anywhere; }
.wstep__item.is-current .wstep__label { color: var(--text-heading); font-weight: var(--weight-bold); }
.wstep__item.is-done .wstep__label { color: var(--text-secondary); }
@media (max-width: 899px) {
  .wstep__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wstep__dot { width: 26px; height: 26px; font-size: 0.625rem; }
  .wstep__item::before { top: 12px; height: 2.5px; }
  .wstep { margin-bottom: var(--space-4); }
}
.wiz__stephead { display: flex; align-items: center; gap: var(--space-4); }
.wiz__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px;
  background: linear-gradient(140deg, var(--brand-400), var(--brand-700));
  color: #fff;
  box-shadow: 0 12px 24px -12px var(--brand-700), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.wiz__icon svg, .wiz__icon .i { width: 24px; height: 24px; }
.wiz__title { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); letter-spacing: -0.025em; color: var(--text-heading); }
.wiz__help { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 60ch; }

/* section cards */
.wiz__fields { display: grid; gap: var(--space-4); }
.wsec {
  padding: var(--space-5);
  border-radius: 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 2px rgba(41, 30, 22, 0.04), 0 12px 28px -22px rgba(41, 30, 22, 0.3);
}
.wsec__head { display: flex; align-items: center; gap: var(--space-3); margin: calc(-1 * var(--space-1)) 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.wsec__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; background: var(--surface-brand-tint); color: var(--text-brand); }
.wsec__icon .i, .wsec__icon svg { width: 18px; height: 18px; }
.wsec__title.wiz__section, .wsec .wiz__section { margin: 0; padding: 0; border: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.wsec .fgroup {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: 16px;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
}
.wsec .fgroup__title { font-weight: var(--weight-bold); color: var(--text-heading); }
.wsec .wiz__docs { margin: 0; }
.wsec .wiz__docs > .wiz__section { margin-bottom: var(--space-2); }

/* input states: focus ring (global), error (global), and a quiet success */
.wiz .input:user-valid:not(:placeholder-shown):not(.is-invalid),
.wiz .select:user-valid:not(.is-invalid),
.svc-form .input:user-valid:not(:placeholder-shown):not(.is-invalid) {
  border-color: color-mix(in srgb, var(--success-solid) 55%, var(--border-strong));
}
.wiz .input.is-invalid, .wiz .select.is-invalid, .wiz .textarea.is-invalid { background: color-mix(in srgb, var(--danger-surface) 55%, var(--surface-card)); }
.wiz input[type='date'].input { min-height: var(--control-height); }
.wiz .label, .svc-form .label { font-size: var(--text-sm); }

/* document rows: drop zones with status chips */
.docrow {
  padding: var(--space-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: 18px;
  background: var(--surface-card);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.docrow:hover { border-color: var(--brand-400); }
.docrow.is-drag { border-color: var(--brand-accent); border-style: solid; background: var(--surface-hover); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 18%, transparent); }
.docrow.is-filled { border-style: solid; border-color: var(--success-border); background: color-mix(in srgb, var(--success-surface) 35%, var(--surface-card)); }
.docrow.is-required:not(.is-filled) { border-color: var(--border-brand); background: color-mix(in srgb, var(--surface-brand-tint) 60%, var(--surface-card)); }
.docrow__icon { width: 40px; height: 40px; border-radius: 12px; }
.docrow__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.docrow__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-secondary);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.docrow__chip .i { width: 12px; height: 12px; stroke-width: 3; }
.docrow.is-filled .docrow__chip { background: var(--tone-green-soft); color: var(--tone-green-text); }
.docrow__drop { font-size: var(--text-xs); color: var(--text-muted); }
.docrow__drop::before { content: '·'; margin-right: 8px; }
.docfile { border-radius: 12px; }
.docfile__thumb { width: 52px; height: 52px; border-radius: 10px; }

/* privacy as a consent card */
.consent {
  display: grid; gap: var(--space-4);
  padding: var(--space-5);
  border-radius: 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: 0 12px 28px -22px rgba(41, 30, 22, 0.3);
}
.consent__pane {
  max-height: min(52vh, 520px);
  overflow: auto;
  padding: var(--space-4) var(--space-5);
  border-radius: 14px;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  line-height: 1.65;
  overscroll-behavior: contain;
}
.consent__pane:focus-visible { outline-offset: 2px; }
.consent__pane .privacy__h { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.consent__pane .privacy__sec:first-child .privacy__h { margin-top: 0; }
.consent__ack { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: 14px; background: var(--surface-brand-tint); border: 1px solid var(--brand-200); }
.consent__ack-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; background: var(--sb-active); color: #fff; box-shadow: var(--glow-brand); }
.consent__ack .privacy__ack { margin: 0; font-weight: var(--weight-semibold); color: var(--text-heading); font-size: var(--text-sm); }
.consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin: 0; }
.consent__actions .btn { min-width: 160px; }
@media (max-width: 560px) { .consent { padding: var(--space-4); } .consent__actions .btn { flex: 1 1 auto; min-width: 0; } }

/* review summary cards */
.review-card {
  padding: var(--space-5);
  border-radius: 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: 0 12px 28px -22px rgba(41, 30, 22, 0.3);
}
.review-card + .review-card { margin-top: var(--space-3); }
.review-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.review-card__title { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); display: flex; align-items: center; gap: 10px; }
.review-card__title::before { content: ''; width: 16px; height: 14px; background: var(--brand-accent); -webkit-mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat; mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat; }
.review-card__head .btn--ghost { border: 1px solid var(--border-default); border-radius: var(--radius-pill); }
#stepBody > .banner, #stepBody > .certify { margin-top: var(--space-4); }
#stepBody > .certify { padding: var(--space-4); border-radius: 16px; background: var(--surface-card); border: 1px solid var(--border-default); }

/* Back / Next: a glass bar, sticky above the bottom bar on phones */
.wiz__nav {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--glass-line);
  box-shadow: 0 16px 34px -22px rgba(41, 30, 22, 0.5);
}
.wiz__nav .wiz__next { flex: 1 1 auto; }
@media (min-width: 640px) { .wiz__nav .wiz__next { flex: 0 0 auto; min-width: 200px; margin-left: auto; } }
@media (max-width: 1023px) {
  .wiz__nav, .svc-actions {
    position: sticky;
    bottom: calc(var(--bottombar-h) + 18px + env(safe-area-inset-bottom));
    z-index: 20;
  }
  .svc-actions { padding: var(--space-3); border-radius: 18px; background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--glass-line); box-shadow: 0 16px 34px -22px rgba(41, 30, 22, 0.5); }
}
html:not(.has-sidebar) .wiz__nav, html:not(.has-sidebar) .svc-actions { bottom: 12px; }
.wiz-top { padding: var(--space-2) 0; }
.wiz-top__title { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: -0.01em; }

/* renew / amend / close: the same section-card treatment */
.svc-form { padding: var(--space-5); border-radius: 22px; box-shadow: 0 16px 34px -24px rgba(41, 30, 22, 0.35); }
.svc-form .svc-block {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  border-radius: 18px;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  min-width: 0;
}
.svc-form fieldset.svc-block { margin-inline: 0; }
.svc-form .svc-block__h { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); float: none; padding: 0; margin-bottom: var(--space-2); }
.svc-form .svc-block__h::before { content: ''; flex: 0 0 16px; height: 14px; background: var(--brand-accent); -webkit-mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat; mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat; }
.svc-form .svc-block .gx-row, .svc-form .svc-block .docrow { background: var(--surface-card); }
.svc-head__title { font-family: var(--font-display); letter-spacing: -0.025em; }
@media (max-width: 560px) { .svc-form { padding: var(--space-4); } .svc-form .svc-block { padding: var(--space-4); } }

@media (prefers-reduced-motion: reduce) { .wstep__item.is-current .wstep__dot { animation: none; } }
@media (max-width: 420px) {
  .svc-form { padding: var(--space-3); }
  .svc-form .svc-block { padding: var(--space-3); }
  .gx-row { padding: var(--space-3); gap: var(--space-2); }
  .gx-row .input-peso > .input { padding-left: 24px; padding-right: 10px; }
  .gx-row .input-peso > span { left: 10px; }
}

/* ============================================================================
   24. ERRORS EVERYWHERE (2026-10-07e) — js/validate.js
   ============================================================================ */

/* Land clear of the sticky top bar (and the phone bottom bar). */
input, select, textarea, .docrow, .capture, .sigpad-wrap, #sigWrap, .error-text, .check, .field, .gx-row {
  scroll-margin-top: calc(var(--topbar-h) + 72px);
  scroll-margin-bottom: 24px;
}
@media (max-width: 1023px) {
  html.has-sidebar input, html.has-sidebar select, html.has-sidebar textarea, html.has-sidebar .docrow,
  html.has-sidebar .check, html.has-sidebar .field, html.has-sidebar .error-text {
    scroll-margin-bottom: calc(var(--bottombar-h) + 110px);
  }
}

/* The error look, shared by every form: border + soft tint + icon line. */
.input.is-invalid, .select.is-invalid, .textarea.is-invalid,
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--danger-solid) !important;
  background-color: color-mix(in srgb, var(--danger-surface) 60%, var(--surface-card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-solid) 14%, transparent);
}
.input.is-invalid:focus, .select.is-invalid:focus, .textarea.is-invalid:focus { box-shadow: var(--ring-danger); }
.field.has-error > .label, .field.has-error .label { color: var(--danger-text); }
.error-text:not(:empty) {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--danger-surface);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  animation: err-in var(--duration-base) var(--ease-out);
}
@keyframes err-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* A document row, capture box or signature pad that needs attention. */
.docrow.is-invalid, .docrow.v-ring, .capture.v-ring, .capture.is-invalid, #sigWrap.is-invalid, .sigpad-wrap.is-invalid, .v-ring {
  border-color: var(--danger-solid) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-solid) 18%, transparent) !important;
  background-color: color-mix(in srgb, var(--danger-surface) 45%, var(--surface-card));
}
.error-text[tabindex='-1']:focus { outline: 2.5px solid var(--danger-solid); outline-offset: 3px; }

/* The shake on the field scrolled to. */
.v-shake { animation: v-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes v-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* The attention pulse (certify / consent checkboxes). */
.v-pulse {
  position: relative;
  border-radius: 14px;
  outline: 2px solid var(--danger-solid);
  outline-offset: 4px;
  background: color-mix(in srgb, var(--danger-surface) 55%, transparent);
}
.v-pulse input[type='checkbox'], input[type='checkbox'].v-pulse {
  outline: 3px solid var(--danger-solid);
  outline-offset: 2px;
  border-radius: 4px;
  animation: v-bounce 1.1s var(--ease-out) 2;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-solid) 55%, transparent);
}
.v-pulse input[type='checkbox'] { animation: v-bounce 1.1s var(--ease-out) 3, v-rings 1.1s var(--ease-out) 3; }
@keyframes v-bounce { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.28); } 50% { transform: scale(0.94); } 70% { transform: scale(1.08); } }
@keyframes v-rings {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger-solid) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--danger-solid) 35%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent, 0 0 0 26px transparent; }
}

/* The summary: a glass card with a link per field; above the bottom bar on a
   phone, under the top bar on a desktop. */
.vsum {
  position: fixed;
  z-index: 95;
  right: var(--space-5);
  top: calc(var(--topbar-h) + 14px);
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  max-height: min(50vh, 420px);
  overflow: auto;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--danger-solid) 35%, var(--glass-line));
  box-shadow: 0 24px 50px -22px rgba(60, 10, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: toast-in var(--duration-slow) var(--ease-out);
}
html:not(.has-sidebar) .vsum { top: 16px; }
/* Phones: under the top bar, compact, so it never covers the Back / Submit bar
   at the bottom; the field it scrolls to sits in the middle of the screen. */
@media (max-width: 1023px) {
  .vsum { top: calc(var(--topbar-h) + 8px); left: var(--gutter); right: var(--gutter); width: auto; bottom: auto; max-height: 30vh; padding: 10px 10px 10px 12px; }
  html:not(.has-sidebar) .vsum { top: 10px; }
  .vsum__icon { width: 28px; height: 28px; flex-basis: 28px; }
  .vsum__title { font-size: var(--text-sm); }
  .vsum__list a { padding-block: 6px; }
  input, select, textarea, .docrow, .check, .field, .error-text { scroll-margin-top: calc(var(--topbar-h) + 30vh + 16px) !important; }
}
.vsum__head { display: flex; align-items: center; gap: var(--space-3); }
.vsum__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: linear-gradient(140deg, #f87171, #dc2626); color: #fff; box-shadow: 0 8px 16px -8px #dc2626; }
.vsum__icon .i { width: 18px; height: 18px; }
.vsum__title { flex: 1 1 auto; margin: 0; font-weight: var(--weight-bold); color: var(--text-heading); }
.vsum__x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; }
.vsum__x:hover { background: var(--surface-sunken); color: var(--text-heading); }
.vsum__x .i { width: 18px; height: 18px; }
.vsum__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 4px; counter-reset: v; }
.vsum__list a {
  display: grid; gap: 2px;
  padding: 8px 10px 8px 34px;
  position: relative;
  border-radius: 10px;
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.vsum__list a::before {
  counter-increment: v; content: counter(v);
  position: absolute; left: 8px; top: 9px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--danger-surface); color: var(--danger-text);
  font-size: 0.6875rem; font-weight: var(--weight-heavy);
}
.vsum__list a:hover { background: var(--surface-hover); text-decoration: none; }
.vsum__msg { font-weight: var(--weight-regular); color: var(--danger-text); font-size: var(--text-xs); }

@media (prefers-reduced-motion: reduce) {
  .v-shake, .v-pulse input[type='checkbox'], input[type='checkbox'].v-pulse, .error-text:not(:empty), .vsum { animation: none !important; }
}

/* ============================================================================
   25. LIVE UPDATES (2026-10-07g) — js/realtime.js, no polling
   ============================================================================ */
.rt-updated { animation: rt-glow 1.6s var(--ease-out) 1; position: relative; }
@keyframes rt-glow {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent) 55%, transparent); }
  40% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-accent) 18%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.rt-chip {
  position: absolute; top: 10px; right: 44px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-brand);
  color: var(--text-brand);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.biz-hero .rt-chip { top: 12px; right: 16px; }
.rt-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); animation: pulse 1.4s var(--ease-out) 3; }
.rt-banner { align-items: center; }
.rt-banner .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .rt-banner { flex-wrap: wrap; } .rt-banner .btn { width: 100%; } .rt-chip { right: 12px; } }
@media (prefers-reduced-motion: reduce) { .rt-updated, .rt-chip__dot { animation: none; } .rt-updated { outline: 2px solid var(--brand-accent); outline-offset: 2px; } }

/* ============================================================================
   26. RENEWAL LIST (2026-10-07h)
   ============================================================================ */
.rnl { margin-bottom: var(--space-5); }
.rnl__head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  border-radius: 22px;
  background: var(--brand-glow), var(--brand-gradient);
  color: #fff;
  box-shadow: 0 18px 40px -24px rgba(154, 52, 18, 0.7);
  position: relative; overflow: hidden; isolation: isolate;
  margin-bottom: var(--space-4);
}
.rnl__head::after {
  content: ''; position: absolute; right: -24px; bottom: -30px; z-index: -1;
  width: 170px; aspect-ratio: 162 / 137; background: #fff; opacity: 0.1;
  -webkit-mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat; mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat;
}
.rnl__icon { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.rnl__icon .i { width: 26px; height: 26px; }
.rnl__head-text { flex: 1 1 auto; min-width: 0; }
.rnl__title { color: #fff; font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); letter-spacing: -0.03em; }
.rnl__lead { margin: 4px 0 0; color: rgba(255, 255, 255, 0.92); font-size: var(--text-sm); max-width: 60ch; }
.rnl__count { flex: 0 0 auto; display: grid; place-items: center; min-width: 64px; padding: 8px 12px; border-radius: 16px; background: #fff; color: var(--brand-900); font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; text-align: center; }
.rnl__count b { display: block; font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.02em; text-transform: none; }
@media (max-width: 560px) { .rnl__head { flex-wrap: wrap; padding: var(--space-4); } .rnl__count { margin-left: auto; } }
.rnl__focus {
  margin-bottom: var(--space-4); padding: var(--space-4);
  border-radius: 16px; background: var(--info-surface); border: 1px solid var(--info-border);
}
.rnl__focus-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.rnl__focus-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: linear-gradient(140deg, #60a5fa, #2563eb); color: #fff; }
.rnl__focus-icon .i { width: 20px; height: 20px; }
.rnl__focus-title { margin: 0 0 2px; font-weight: var(--weight-bold); color: var(--text-heading); }
.rnl__focus-title:focus { outline: none; }
.rnl__focus-text { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.rnl__sec + .rnl__sec { margin-top: var(--space-6); }
.rnl__sec-title { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.rnl__sec-title::before { content: ''; width: 16px; height: 14px; background: var(--brand-accent); -webkit-mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat; mask: url('../assets/figma/hero-mark.svg') center / contain no-repeat; }
.rnl__n { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--text-xs); letter-spacing: 0; }
.rnl__grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .rnl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rnl__grid > .skeleton--card { height: 200px; }
.rnl__none { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: 16px; background: var(--surface-card); border: 1.5px dashed var(--border-strong); color: var(--text-secondary); font-size: var(--text-sm); }
.rnl__none .i { width: 22px; height: 22px; color: var(--tone-green-solid); }
.rnc {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 2px rgba(41, 30, 22, 0.05), 0 12px 28px -22px rgba(41, 30, 22, 0.35);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.rnc.is-due:hover { transform: translateY(-2px); border-color: var(--border-brand); box-shadow: 0 18px 36px -20px rgba(194, 65, 12, 0.45); }
.rnc.is-locked { background: color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-card)); }
.rnc__top { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.rnc__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: linear-gradient(140deg, var(--brand-400), var(--brand-700)); color: #fff; box-shadow: 0 10px 20px -10px var(--brand-700); }
.rnc.is-locked .rnc__icon { background: var(--surface-card); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-default); }
.rnc__icon .i { width: 22px; height: 22px; }
.rnc__main { flex: 1 1 auto; min-width: 0; }
.rnc__name { font-size: var(--text-md); color: var(--text-heading); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rnc__trade { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.rnc__id { flex: 0 0 auto; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--surface-brand-tint); color: var(--text-brand); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.rnc__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.rnc__facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rnc__facts dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rnc__facts dd { margin: 2px 0 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-heading); overflow-wrap: anywhere; }
.rnc__go { margin-top: auto; width: 100%; }
.rnc__lock { margin: auto 0 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-card); border: 1px solid var(--border-default); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.rnc__lock .i { width: 18px; height: 18px; flex: 0 0 18px; }
.rnc__lock[data-kind='submitted'] { background: var(--info-surface); border-color: var(--info-border); color: var(--info-text); }
.renew-locked .banner__icon .i { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .rnc.is-due:hover { transform: none; } }

/* ── Kiosk (kiosk-csjdm.gov360.systems only; see js/kiosk.js) ───────────────
   The Back button that returns to the queue, and the idle "Still there?"
   dialog. Neither renders on the public portal. Sized for a touch screen. */
.kiosk-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px; margin-right: 6px;
  border: 1.5px solid var(--border-strong, #d6d3d1); border-radius: 999px;
  background: var(--surface-card, #fff); color: var(--text-primary);
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.kiosk-back .i { width: 20px; height: 20px; }
.kiosk-back:hover { border-color: var(--brand-accent); color: var(--text-brand); }
.kiosk-back:active { transform: scale(0.97); }

.kiosk-idle {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; padding: 16px;
  background: rgb(12 10 9 / 0.55); backdrop-filter: blur(4px);
}
.kiosk-idle__card {
  width: min(440px, 100%); padding: 28px;
  border-radius: 20px; background: var(--surface-card, #fff); color: var(--text-primary);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.3); text-align: center;
}
.kiosk-idle__card h2 { margin: 0 0 8px; font-size: 1.5rem; }
.kiosk-idle__card p { margin: 0 0 22px; color: var(--text-secondary); font-size: 1.05rem; }
.kiosk-idle__card strong { color: var(--text-brand); font-variant-numeric: tabular-nums; }
.kiosk-idle__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kiosk-idle__actions .btn { min-height: 52px; font-size: 1rem; }
.kiosk-back--hero { align-self: flex-start; margin: 0 0 18px; }
.kiosk-back--float { position: fixed; top: 16px; left: 16px; z-index: 50; box-shadow: var(--shadow-lg); }

/* Light/dark switch on the sign-in page (no shared header there; js/nav.js). */
.auth-shell { position: relative; }
.auth-tools { position: absolute; top: 20px; right: 20px; z-index: 5; }
.auth-tools .theme-btn {
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg);
}
.auth-tools .theme-btn:hover { color: var(--text-brand); }
@media (max-width: 959px) { .auth-tools { top: 14px; right: 14px; } }