/* ============================================================
   OMC-Superagent — single theme file (CLAUDE.md §7)
   Every colour, size, radius, line weight and font in this system is declared
   here as a CSS variable. Never hardcode a value anywhere else.
   ============================================================

   DIRECTION: OMC ENTERPRISE — "corporate clean" (DESIGN_GUIDELINE §0)

   A quiet, light, professional console for an insurance brokerage. The page is
   a light neutral ground; work sits on white surfaces held by a hairline and
   lifted by a soft shadow; generous white space separates one region from the
   next. Nothing shouts except the thing you are meant to press or read first.

   Three rules carry the whole system:

     1. ORANGE IS BRAND AND FOCUS, NEVER STATUS.  #FE7F2D marks the primary
        button, the live menu item, the selected tab, links, the leading figure
        of a report, and the chart's main series. A record's *state* is never
        orange — it always takes one of the four semantic status fields below.
        Kept to roughly a tenth of the screen (DESIGN_GUIDELINE §9).

     2. ORANGE TAKES INK LETTERING, STATUS TAKES WHITE.  Measured, not
        stylistic: white on #FE7F2D reaches only 2.53:1 (fails AA) but the
        graphite ink reaches 6.68:1, while all four status fields clear AA
        against white and fail against ink. Contrast forces the split, and it
        doubles as a second channel — a colour-blind reader still tells an
        action from a state by the colour of its lettering.

     3. DEPTH IS A HAIRLINE PLUS A SOFT SHADOW, NEVER A HEAVY ONE.  One border
        colour and four shadow steps for the whole system. A surface that needs
        more emphasis gets more space around it, not a darker shadow.
   ============================================================ */

:root {
  /* --- GROUND AND SURFACES ---------------------------------------------
     A light neutral ground so a white card reads as raised without a heavy
     shadow doing the work. Barely cool, so the orange stays warm against it. */
  --sheet: #F4F6F8;          /* page ground */
  --paper: #FFFFFF;          /* card, panel, table, sidebar, header */
  --paper-alt: #F7F8FA;      /* inset band: table head, disabled field, thumb */
  --paper-sunken: #EEF1F4;   /* a track something fills: progress, chart base */

  /* --- INK ---
     Near-black pulled a touch cool. 16.4:1 on paper — this is reading ink. */
  --ink: #17191F;
  --ink-muted: #5D6675;      /* 6.1:1 on paper — labels, meta, secondary text */
  --ink-faint: #98A0AE;      /* 2.7:1 — decorative marks and icons, never text */
  --rule: #E6E9ED;           /* the hairline every surface is held by */
  --rule-strong: #CFD5DD;    /* a stronger edge: input border, table head rule */

  /* --- BRAND / ACTION (one colour, and it is never a status) ------------ */
  --signal: #FE7F2D;         /* OMC orange — the pressable / focused colour */
  --signal-press: #E86A16;   /* held & hover, same hue one step down */
  --signal-ink: #B85200;     /* 4.94:1 on paper — orange as TEXT (links, KPI
                                figures). #FE7F2D itself is 2.53:1 and may
                                never carry a letterform on a light ground. */
  --signal-soft: #FFF3E9;    /* traced field: row hover, live menu item, tint */
  --signal-soft-strong: #FFE3CC; /* the same field one step up: chart fill top */
  --on-signal: #17191F;      /* 6.68:1 — ink on orange, never white */

  /* --- STATUS (four fields, each taking white lettering) ----------------
     Validated against paper: teal 6.19:1, cobalt 8.47:1, gold 5.54:1,
     crimson 6.85:1. Gold sits closest to the brand orange under deuteranopia,
     which is why a status field always carries a Thai text label as well —
     colour is never the only channel. */
  --state-settled: #0B6E5A;  /* จ่ายแล้ว / อนุมัติ / ใช้งานอยู่ */
  --state-running: #27479E;  /* กำลังดำเนินการ / รอฝ่ายอื่น */
  --state-attention: #8A6100;/* รอตรวจ / ใกล้หมดอายุ */
  --state-failed: #B3123A;   /* ถูกปฏิเสธ / ล้มเหลว */
  --on-state: #FFFFFF;

  /* Soft tints of the same four, for a band large enough that a full-strength
     field would bury the text sitting on it. */
  --state-settled-soft: #E4F2EE;
  --state-running-soft: #E8EDF8;
  --state-attention-soft: #F7EFDC;
  --state-failed-soft: #FBE6EB;

  /* --- CHART MARKS ---
     A chart fill needs chroma to read as a colour at all; a status field needs
     contrast under its own lettering. One value cannot do both, so the marks
     are a second step of the same hues, tuned to sit next to each other on
     white. Orange leads (rule 1: the main series is the focus). */
  --mark-1: var(--signal);
  --mark-2: #3F6BD8;
  --mark-3: #16A085;
  --mark-4: #C9962C;
  --mark-5: #A0AAB8;
  --chart-grid: #EDF0F3;

  /* --- ILLUSTRATION ACCENTS -------------------------------------------
     Three tints and one warm band that exist only to carry the referral
     artwork and its step glyphs. They are decoration: never a status field,
     never a pressable colour, and never applied to a record. The four status
     fields above stay the only way something reports its own state. */
  --illus-violet: #7C3FE6;
  --illus-violet-soft: #F2ECFE;
  --illus-green: #2E9E45;
  --illus-green-soft: #EAF7DE;
  --illus-gold: #FBA518;
  --illus-gold-soft: #FDF3E3;
  --hero-band: linear-gradient(96deg, #F9F6F7 0%, #FCF8F6 46%, #FEF8F4 68%, #FEEBE5 88%, #FDE3DF 100%);
  --hero-band-report: linear-gradient(96deg, #FBF9FA 0%, #FDF9F5 52%, #FEF3EC 80%, #FEEAE4 100%);

  /* The dashboard money cards. Each stop is measured against white: the
     lightest is 4.71:1, so white lettering clears AA on all three. The brand
     orange is never one of them — it is 2.53:1 and takes ink, not white. */
  --card-payout: linear-gradient(135deg, #D24A0C 0%, #B8390A 100%);
  --card-month: linear-gradient(135deg, #6067E4 0%, #4A3FD4 100%);
  --card-team: linear-gradient(135deg, #10827A 0%, #0B6A62 100%);
  --on-money: #FFFFFF;
  --hero-art-w: 309px;

  /* --- THE SIDEBAR ---
     Light, like everything else. Kept as its own token block so the whole nav
     can be flipped to a dark rail by changing these six values and nothing
     else. */
  --rail: #FFFFFF;
  --rail-alt: #F4F6F8;       /* hover field */
  --rail-ink: #17191F;
  --rail-muted: #5D6675;
  --rail-rule: #E6E9ED;

  /* --- Legacy token names -------------------------------------------------
     Kept so Bootstrap's mirrors and every existing rule re-theme through
     var() instead of being rewritten across 43 views. */
  --color-primary: var(--signal);
  --color-primary-hover: var(--signal-press);
  --color-primary-soft: var(--signal-soft);
  --color-primary-rgb: 254, 127, 45;
  --color-on-primary: var(--on-signal);
  --color-secondary: var(--ink-muted);
  --color-accent: var(--state-attention);
  --color-on-accent: var(--on-state);
  --color-bg: var(--sheet);
  --color-surface: var(--paper);
  --color-surface-alt: var(--paper-alt);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-border: var(--rule);
  --color-success: var(--state-settled);
  --color-success-soft: var(--state-settled-soft);
  --color-info: var(--state-running);
  --color-info-soft: var(--state-running-soft);
  --color-warning: var(--state-attention);
  --color-warning-soft: var(--state-attention-soft);
  --color-danger: var(--state-failed);
  --color-danger-soft: var(--state-failed-soft);

  /* --- GEOMETRY --- */
  --radius-sm: 8px;          /* control: button, input, icon button, badge box */
  --radius-md: 12px;         /* surface: card, panel, filter bar */
  --radius-lg: 16px;         /* a large surface: table card, KPI, modal */
  --radius-pill: 999px;      /* status chip, progress track, avatar */

  --line-1: 1px;             /* the hairline: every ordinary surface edge */
  --line-2: 2px;             /* a drawn emphasis: live nav marker, focus ring */

  /* Spacing — an 8px grid, 4px for the inside of a control */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Component heights, so a button, an input and a select line up in a row */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 46px;      /* the referral page: share pills and the link field */

  /* Measure — the widths a content column is allowed to be, so two forms of
     the same kind can never end up different widths on the same day. */
  --measure-form: 720px;
  --measure-narrow: 600px;
  --measure-panel: 480px;
  --measure-media: 320px;
  --measure-cell: 240px;
  --measure-cell-sm: 180px;

  /* --- ELEVATION ---
     Four steps, all soft and all the same neutral. Nothing in this system is
     allowed a fifth. */
  --shadow-xs: 0 1px 2px rgba(23, 25, 31, .04);
  --shadow-sm: 0 1px 2px rgba(23, 25, 31, .05), 0 1px 3px rgba(23, 25, 31, .04);
  --shadow-md: 0 4px 12px -2px rgba(23, 25, 31, .07), 0 2px 4px -2px rgba(23, 25, 31, .04);
  --shadow-lg: 0 16px 40px -8px rgba(23, 25, 31, .16), 0 4px 10px -4px rgba(23, 25, 31, .06);

  --transition: 160ms cubic-bezier(.2, .7, .3, 1);

  /* --- LETTERING ---
     Anuphan (Cadson Demak) carries the whole interface: Thai and Latin in one
     family, drawn for screen UI. A dense Thai table is exactly where a display
     face does the most damage, so there is no second display face — the type
     scale and weight do the work instead. JetBrains Mono appears only where a
     human reads a string one character at a time. */
  --font-body: 'Anuphan', system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: .75rem;         /* 12 — chip, axis label */
  --text-sm: .8125rem;       /* 13 — meta, help text, table secondary */
  --text-md: .875rem;        /* 14 — body, table, control (the base size) */
  --text-lg: 1rem;           /* 16 — card title */
  --text-xl: 1.125rem;       /* 18 — section title, lead value */
  --text-2xl: 1.375rem;      /* 22 — page title */
  --text-3xl: 1.75rem;       /* 28 — KPI figure */
  --text-4xl: 2.25rem;       /* 36 — the one hero figure on a page */

  /* Small letterspaced caps that label a region: nav group, table head. */
  --annot-size: .6875rem;
  --annot-track: .06em;

  --z-overlay: 1050;

  /* Bootstrap mirrors, so its built-in components inherit the theme without a
     per-component override for each one. */
  --bs-primary: var(--signal);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-body-bg: var(--sheet);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--text-md);
  --bs-link-color: var(--signal-ink);
  --bs-link-hover-color: var(--signal-press);
  --bs-border-color: var(--rule);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-focus-ring-color: rgba(var(--color-primary-rgb), .35);
}

/* ============================================================
   Dark — the same room with the lights down, not an inverted copy.
   The ground goes to near-black, surfaces become lifted slate, and every
   status field is re-stepped rather than brightened: on a dark ground each
   field ends up LIGHTER than its surface, so all four flip to ink lettering.
   The brand orange keeps ink lettering in both themes, which is what keeps
   rule 2 above a single sentence instead of a table of exceptions.
   ============================================================ */
:root[data-theme="dark"] {
  --sheet: #0F1218;
  --paper: #181C24;
  --paper-alt: #1F242E;
  --paper-sunken: #232936;

  --ink: #E7EAF0;
  --ink-muted: #98A2B3;
  --ink-faint: #6A7488;
  --rule: #2A303C;
  --rule-strong: #3C4453;

  --signal: #FE7F2D;
  --signal-press: #FF9552;
  --signal-ink: #FFA05C;     /* 7.4:1 on the dark ground — links stay readable */
  --signal-soft: rgba(254, 127, 45, .14);
  --signal-soft-strong: rgba(254, 127, 45, .26);
  --on-signal: #17191F;

  --state-settled: #35A488;
  --state-running: #7396E0;
  --state-attention: #C7942A;
  --state-failed: #E4677E;
  --on-state: #0F1218;

  --state-settled-soft: rgba(53, 164, 136, .18);
  --state-running-soft: rgba(115, 150, 224, .18);
  --state-attention-soft: rgba(199, 148, 42, .18);
  --state-failed-soft: rgba(228, 103, 126, .18);

  --mark-2: #7396E0;
  --mark-3: #35A488;
  --mark-4: #C7942A;
  --mark-5: #6A7488;
  --chart-grid: #262C38;

  --rail: #181C24;
  --rail-alt: #1F242E;
  --rail-ink: #E7EAF0;
  --rail-muted: #98A2B3;
  --rail-rule: #2A303C;

  /* Illustration accents and the hero band, re-stepped rather than dimmed: the
     band has to stay dark enough for the page title to keep reading as ink. */
  --illus-violet: #A98BF3;
  --illus-violet-soft: rgba(169, 139, 243, .16);
  --illus-green: #57C173;
  --illus-green-soft: rgba(87, 193, 115, .16);
  --illus-gold: #E0A93B;
  --illus-gold-soft: rgba(224, 169, 59, .16);
  --hero-band: linear-gradient(96deg, #161A21 0%, #1B1E25 55%, #2A2028 100%);
  --hero-band-report: linear-gradient(96deg, #161A21 0%, #1B1E25 58%, #2A2028 100%);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 4px 10px -4px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

/* ============================================================
   Base
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--sheet);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
}

a {
  color: var(--signal-ink);
  text-decoration-thickness: var(--line-1);
  text-underline-offset: .18em;
}
a:hover { color: var(--signal-press); }

/* One focus treatment for the whole system: the brand colour, drawn as a ring
   that sits clear of the element rather than replacing its border. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--line-2) solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Every figure in this system is tabular. 1 and 11 must hold the same column
   width or a table appears to twitch whenever the data changes. */
.num,
.num--money,
.table td,
.table th,
.stat-node__value,
.earnings__value,
.kpi__value,
.rank__value,
.run__count,
.nav-badge,
.identifier { font-variant-numeric: tabular-nums; }

/* Money is read by comparing digits down a column, so it is always right
   aligned and never wraps (CLAUDE.md brief §14). */
.num--money { text-align: right; white-space: nowrap; }
th.num--money, .table > thead > tr > th.num--money { text-align: right; }

.identifier {
  font-family: var(--font-mono);
  font-size: .875em;
  letter-spacing: -.01em;
  padding: .1em .4em;
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  overflow-wrap: anywhere;
}

/* Bootstrap ships <code> in a pink that reads as an error next to the status
   colours. Inline code here is an identifier, so it takes the same neutral
   treatment as .identifier. */
code {
  font-family: var(--font-mono);
  font-size: .875em;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
pre code { padding: 0; background: none; border: 0; font-size: inherit; }

.min-width-0 { min-width: 0; }
.gap-space-1 { gap: var(--space-1) !important; }
.gap-space-2 { gap: var(--space-2) !important; }
.gap-space-3 { gap: var(--space-3) !important; }
.measure-form { max-width: var(--measure-form); }
.measure-narrow { max-width: var(--measure-narrow); }
.measure-panel { max-width: var(--measure-panel); }

.text-primary { color: var(--signal-ink) !important; }
.bg-primary { background-color: var(--signal) !important; color: var(--on-signal) !important; }
.border-primary { border-color: var(--signal) !important; }
.text-secondary { color: var(--ink-muted) !important; }
.small, small { font-size: var(--text-sm); }

.user-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* ============================================================
   Shell: sidebar, header, main, footer
   ============================================================ */

.app-shell { min-height: 100vh; }

.app-sidebar {
  width: 248px;
  flex: 0 0 248px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--rail);
  color: var(--rail-ink);
  border-right: var(--line-1) solid var(--rail-rule);
  /* No transition on the collapse: animating width thrashes layout across the
     whole main column, and the toggle is a discrete choice the user made — it
     should land at once, not slide. */
  padding: var(--space-4) var(--space-3) var(--space-5) !important;
  scrollbar-width: thin;
}

.app-sidebar.is-collapsed { width: 0; flex-basis: 0; padding: 0 !important; overflow: hidden; }

/* Promo panel under the agent's nav (dashboard reference). Decoration and one
   link to a page that already exists — the artwork is lifted from the
   reference, the copy is real text so it can be read and translated. */
.rail-promo {
  position: relative;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-3) var(--space-3);
  border: var(--line-1) solid var(--signal-soft-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--paper) 0%, var(--signal-soft) 100%);
  overflow: hidden;
}
.rail-promo__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
  color: var(--signal-ink);
  max-width: 9em;
}
.rail-promo__text { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.6; max-width: 12em; }
.rail-promo__coins { position: absolute; top: var(--space-5); right: var(--space-2); width: 57px; height: auto; }
.rail-promo__people { display: block; width: 100%; height: auto; margin: var(--space-2) 0 var(--space-3); }
.rail-promo__cta {
  display: block;
  padding: var(--space-2);
  border: var(--line-1) solid var(--signal);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--signal-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition);
}
.rail-promo__cta:hover { background: var(--signal-soft); color: var(--signal-ink); }

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -.015em;
  color: var(--rail-ink);
}

.app-sidebar__brand img { display: block; border-radius: var(--radius-sm); }

.nav-group + .nav-group { margin-top: var(--space-4); }

.nav-group__label {
  padding: 0 var(--space-2) var(--space-2);
  font-size: var(--annot-size);
  font-weight: 700;
  letter-spacing: var(--annot-track);
  text-transform: uppercase;
  /* Muted, not faint: at 11px this is the smallest text in the app and has to
     clear AA (DESIGN_GUIDELINE §10). */
  color: var(--ink-muted);
}

.app-sidebar .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--rail-muted);
  font-size: var(--text-md);
  font-weight: 500;
  transition: color var(--transition), background-color var(--transition);
}

.app-sidebar .nav-link .icon { width: 18px; height: 18px; flex: none; color: var(--ink-faint); transition: color var(--transition); }
.app-sidebar .nav-link__label { flex: 1; min-width: 0; }

.app-sidebar .nav-link:hover {
  color: var(--rail-ink);
  background: var(--rail-alt);
}
.app-sidebar .nav-link:hover .icon { color: var(--rail-muted); }
.app-sidebar .nav-link:focus-visible { outline-offset: -2px; }

/* Live. A soft brand field, brand lettering, and a short bar on the leading
   edge — the one place the nav is allowed to be orange (rule 1). */
.app-sidebar .nav-link.active,
.app-sidebar .nav-link.active:hover {
  background: var(--signal-soft);
  color: var(--signal-ink);
  font-weight: 600;
}
.app-sidebar .nav-link.active .icon { color: var(--signal-ink); }
.app-sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--signal);
}

.nav-badge {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--state-failed);
  color: var(--on-state);
  font-size: var(--annot-size);
  font-weight: 600;
  line-height: 19px;
  text-align: center;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  min-height: 60px;
  background: var(--paper);
  border-bottom: var(--line-1) solid var(--rule);
}

.app-header__left { display: flex; align-items: center; gap: var(--space-3); }
.app-header__right { display: flex; align-items: center; gap: var(--space-1); }

.app-header__role {
  font-size: var(--annot-size);
  font-weight: 700;
  letter-spacing: var(--annot-track);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: var(--line-1) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  transition: background-color var(--transition), color var(--transition);
}
.header-icon-btn:hover { background: var(--paper-alt); color: var(--ink); }
.header-icon-btn .icon { width: 18px; height: 18px; }

/* Extra bottom room so the last thing on the page (a submit button, a table's
   last row) never ends up under the fixed support button in the corner. */
.app-main {
  padding: var(--space-5) var(--space-5) var(--space-7);
  max-width: 1600px;
}

.app-footer {
  padding: var(--space-4) var(--space-5);
  border-top: var(--line-1) solid var(--rule);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ============================================================
   Buttons — one primary per page (DESIGN_GUIDELINE §2)
   ============================================================ */

.btn {
  --bs-btn-border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  padding: var(--space-2) var(--space-4);
  border-width: var(--line-1);
  border-radius: var(--radius-sm);
  box-shadow: none !important;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn .icon { width: 16px; height: 16px; }

.btn-primary {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--signal-press) !important;
  border-color: var(--signal-press) !important;
  color: var(--on-signal) !important;
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--signal);
  color: var(--signal-ink);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background: var(--signal-soft) !important;
  border-color: var(--signal) !important;
  color: var(--signal-ink) !important;
}

.btn-outline-secondary {
  background: var(--paper);
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
  background: var(--paper-alt) !important;
  border-color: var(--ink-faint) !important;
  color: var(--ink) !important;
}

.btn-outline-danger {
  background: var(--paper);
  border-color: var(--state-failed);
  color: var(--state-failed);
}
.btn-outline-danger:hover,
.btn-outline-danger:active {
  background: var(--state-failed) !important;
  border-color: var(--state-failed) !important;
  color: var(--on-state) !important;
}

.btn-link { color: var(--signal-ink); font-weight: 500; min-height: 0; padding: 0; }

.btn-sm { min-height: var(--control-h-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn-lg { min-height: 48px; padding: var(--space-3) var(--space-5); font-size: var(--text-lg); }

/* Disabled reads as flat and greyed, not merely faded (DESIGN_GUIDELINE §8). */
.btn:disabled,
.btn.disabled {
  opacity: 1;
  background: var(--paper-alt) !important;
  border-color: var(--rule) !important;
  color: var(--ink-faint) !important;
  cursor: not-allowed;
}

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.btn-group > .btn:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }

/* ============================================================
   Surfaces: card, section
   ============================================================ */

.card,
.table-card,
.filter-bar,
.public-card,
.auth-card {
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4);
  background: transparent;
  border-bottom: var(--line-1) solid var(--rule);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
}

.card-body { padding: var(--space-4); }

/* Space between sections is always larger than space inside one
   (DESIGN_GUIDELINE §3) — this is the whole rhythm of a page. Each .section
   carries its OWN trailing space so the rhythm holds even when the next
   block isn't itself a .section (a bare <h2 class="section-title">, a
   .alert, a .table-card not wrapped in one — real page-template gaps that
   used to collapse to zero because spacing depended entirely on the next
   sibling also being a .section). margin-top is zeroed for section-after-
   section so two in a row don't double the gap. */
.section { margin-bottom: var(--space-6); }
.section + .section { margin-top: 0; }

.section-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

/* A section title with something on the right of it — a total, a "see all"
   link, a filter. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.section-head .section-title { margin-bottom: 0; }
.section-head__aside { font-size: var(--text-sm); color: var(--ink-muted); }

.section-desc {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ============================================================
   Page header and filters
   ============================================================ */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -.022em;
  margin: 0;
}

.page-header__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  color: var(--ink-muted);
  max-width: var(--measure-form);
}

/* Tabs — switching which cut of the same data you are looking at, never
   navigation to a different subject. The live tab takes the brand underline
   (rule 1). */
.tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: var(--line-1) solid var(--rule);
}

.tabs__item {
  position: relative;
  padding: var(--space-2) var(--space-3) var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition), background-color var(--transition);
}
.tabs__item:hover { color: var(--ink); background: var(--paper-alt); }
.tabs__item.is-active { color: var(--signal-ink); font-weight: 600; }
.tabs__item.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--signal);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
}

/* A short "from ... to ..." creation form (e.g. naming a payout round's
   date range) — the arrow reads the two fields as one relationship instead
   of two unrelated inputs sitting side by side. */
.date-range-form { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.date-range-form__field { flex: 1 1 170px; min-width: 150px; }
.date-range-form__arrow {
  display: flex;
  align-items: center;
  height: 40px; /* matches .form-control height so the arrow lines up with the inputs, not their labels */
  color: var(--ink-faint);
  flex: 0 0 auto;
}
.date-range-form__submit { flex: 0 0 auto; }

/* Capped: without a ceiling the last field on a wrapped row absorbs all the
   leftover width and a status dropdown ends up 900px wide next to a 180px
   one. The slack belongs to the gap before the actions instead. */
.filter-bar__field { flex: 1 1 180px; min-width: 0; max-width: 300px; }
.filter-bar__field .form-label { margin-bottom: var(--space-1); }
.filter-bar__actions { display: flex; gap: var(--space-2); flex: 0 0 auto; margin-left: auto; }

/* Search leads the toolbar (brief §11): it is the filter people reach for
   first, so it gets twice the room of a dropdown and sits at the front. */
.filter-bar__field:has(> input[type="text"]),
.filter-bar__field:has(> input[type="search"]) { flex: 2 1 240px; max-width: 420px; }

/* The date shortcuts are part of the toolbar, not a second control strip
   floating above it: they take the full first row inside the same card and
   are separated from the fields by a rule. They reach the form through
   form="listFilters", so sitting inside it in the DOM changes nothing about
   how they submit. */
.date-range-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1 0 100%;
  padding-bottom: var(--space-3);
  border-bottom: var(--line-1) solid var(--rule);
}

.crumbs { margin-bottom: var(--space-3); }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.crumbs__item { display: flex; align-items: center; gap: var(--space-1); }
.crumbs__link {
  color: var(--ink-muted);
  text-decoration: none;
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
}
.crumbs__link:hover { color: var(--signal-ink); background: var(--signal-soft); }
.crumbs__current { color: var(--ink); font-weight: 600; }
.crumbs__sep { display: flex; color: var(--ink-faint); }
.crumbs__sep .icon { width: 13px; height: 13px; }

/* ============================================================
   Tables — one density for the whole system
   ============================================================ */

.table-card { overflow: hidden; }
.table-card .table { margin-bottom: 0; }
.table-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
  border-bottom: var(--line-1) solid var(--rule);
}
.table-card__title { font-size: var(--text-lg); font-weight: 600; margin: 0; letter-spacing: -.012em; }

.table { --bs-table-bg: transparent; border-color: var(--rule); }

.table > thead > tr > th {
  padding: var(--space-3) var(--space-4);
  background: var(--paper-alt);
  border-bottom: var(--line-1) solid var(--rule);
  font-size: var(--annot-size);
  font-weight: 700;
  letter-spacing: var(--annot-track);
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--line-1) solid var(--rule);
  border-top: 0;
  color: var(--ink);
  vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table > tfoot > tr > td {
  padding: var(--space-3) var(--space-4);
  background: var(--paper-alt);
  border-top: var(--line-1) solid var(--rule-strong);
  font-weight: 600;
}

.table-hover > tbody > tr { transition: background-color var(--transition); }
.table-hover > tbody > tr:hover > td { background: var(--signal-soft); }
.table > tbody > tr.table-active > td { background: var(--signal-soft); }

.table-sm > tbody > tr > td,
.table-sm > thead > tr > th { padding: var(--space-2) var(--space-3); }

.table-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.table-link:hover { color: var(--signal-ink); text-decoration: underline; }

.row-go { color: var(--ink-faint); transition: color var(--transition), transform var(--transition); }
.table > tbody > tr:hover .row-go { color: var(--signal-ink); transform: translateX(2px); }

.cell-truncate {
  max-width: var(--measure-cell);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-truncate--sm { max-width: var(--measure-cell-sm); }

.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}
.icon-btn:hover { color: var(--signal-ink); border-color: var(--signal); background: var(--signal-soft); }
.icon-btn--danger:hover { color: var(--state-failed); border-color: var(--state-failed); background: var(--state-failed-soft); }
.icon-btn .icon { width: 16px; height: 16px; }

/* ============================================================
   Status chips and alerts — semantic colour only (brief §20)
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}

.badge.bg-success { background: var(--state-settled) !important; color: var(--on-state) !important; }
.badge.bg-info { background: var(--state-running) !important; color: var(--on-state) !important; }
.badge.bg-warning { background: var(--state-attention) !important; color: var(--on-state) !important; }
.badge.bg-danger { background: var(--state-failed) !important; color: var(--on-state) !important; }
.badge.bg-accent { background: var(--state-attention) !important; color: var(--on-state) !important; }
.badge.bg-secondary {
  background: var(--paper-alt) !important;
  color: var(--ink-muted) !important;
  box-shadow: inset 0 0 0 var(--line-1) var(--rule-strong);
}

.alert {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--line-1) solid transparent;
  border-left-width: 3px;
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: var(--text-md);
  /* Never has a margin-bottom rule of its own otherwise (unlike .card,
     .table-card, etc. it isn't paired with a .section wrapper) — without
     this, whatever follows it (a flash message before a page's content, a
     validation summary before a form, a status banner before a KPI grid)
     sits flush against it with zero gap. */
  margin-bottom: var(--space-6);
}
.alert-success { background: var(--state-settled-soft); border-color: var(--state-settled); }
.alert-info { background: var(--state-running-soft); border-color: var(--state-running); }
.alert-warning { background: var(--state-attention-soft); border-color: var(--state-attention); }
.alert-danger { background: var(--state-failed-soft); border-color: var(--state-failed); }
.alert-secondary { background: var(--paper-alt); border-color: var(--rule-strong); }

/* ============================================================
   Forms
   ============================================================ */

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.form-control,
.form-select,
.cselect__button,
.input-group-text {
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink);
  background: var(--paper);
  border: var(--line-1) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

textarea.form-control { min-height: 96px; }

.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled),
.cselect__button:hover { border-color: var(--ink-faint); }

.form-control:focus,
.form-select:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
  outline: 0;
}

.form-control::placeholder { color: var(--ink-faint); opacity: 1; }
.form-control:disabled,
.form-select:disabled { background: var(--paper-alt); color: var(--ink-muted); border-color: var(--rule); }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--state-failed); background-image: none; }

.form-control-sm, .form-select-sm {
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.form-check-input { border-color: var(--rule-strong); box-shadow: none; }
.form-check-input:checked { background-color: var(--signal); border-color: var(--signal); }
.form-check-input:focus { border-color: var(--signal); box-shadow: none; outline: var(--line-2) solid var(--signal); outline-offset: 1px; }
.form-check-label { color: var(--ink); }

.form-text { color: var(--ink-muted); font-size: var(--text-sm); }

.invalid-feedback { display: none; color: var(--state-failed); font-size: var(--text-sm); margin-top: var(--space-1); }
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.cselect.is-invalid ~ .invalid-feedback,
.date-field.is-invalid ~ .invalid-feedback { display: block; }

.input-group-text { background: var(--paper-alt); color: var(--ink-muted); border-color: var(--rule-strong); }

/* A form is read as a few labelled groups, never one long ladder of fields
   (brief §13). */
.form-section + .form-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--line-1) solid var(--rule);
}

.form-section__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--line-1) solid var(--rule);
}
.form-actions--split { justify-content: space-between; }

/* --- Custom select (select.js) --- */
.cselect { position: relative; }
.cselect__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.cselect__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
}
.cselect.is-open .cselect__button { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.cselect.is-placeholder .cselect__value { color: var(--ink-faint); }
.cselect.is-invalid .cselect__button { border-color: var(--state-failed); }
.cselect__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__chevron { flex: none; width: 16px; height: 16px; color: var(--ink-muted); transition: transform var(--transition); }
.cselect.is-open .cselect__chevron { transform: rotate(180deg); }

.cselect__menu {
  position: absolute;
  z-index: var(--z-overlay);
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.cselect.is-above .cselect__menu { top: auto; bottom: calc(100% + 4px); }
.cselect__option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  cursor: pointer;
}
.cselect__option.is-highlighted { background: var(--paper-alt); }
.cselect__option.is-selected { background: var(--signal-soft); color: var(--signal-ink); font-weight: 600; }

/* --- Date field (flatpickr) --- */
.date-field { position: relative; }
.date-field .form-control { padding-right: var(--space-6); }
.date-field__icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}

.flatpickr-calendar {
  font-family: var(--font-body);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months { border-bottom: var(--line-1) solid var(--rule); padding-bottom: var(--space-1); }
.flatpickr-current-month { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.flatpickr-current-month input.cur-year { font-weight: 600; color: var(--ink); }
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: var(--ink); fill: var(--ink); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--signal-ink); }
.flatpickr-weekday { color: var(--ink-muted) !important; font-weight: 600; font-size: var(--text-xs); }
.flatpickr-day {
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
}
.flatpickr-day:hover { background: var(--paper-alt); border-color: transparent; }
.flatpickr-day.today { border-color: var(--signal); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--ink-faint); }

/* ============================================================
   Dashboard and report components
   ============================================================ */

/* --- KPI row ---------------------------------------------------------
   Every card carries the same weight and the same neutral surface — the
   figure is what differs, not the decoration (brief §6). One card may take
   the brand colour on its figure, and only if that figure is the page's
   answer to "how are we doing". */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

a.kpi:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-md);
  color: inherit;
}

.kpi__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  /* Two lines' worth, always — otherwise a card whose label wraps pushes its
     figure below the figures either side of it and the row stops reading as
     one row. */
  min-height: 38px;
}

.kpi__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  margin: 0;
}

.kpi__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  color: var(--ink-muted);
}
.kpi__icon .icon { width: 24px; height: 24px; }
.kpi--accent .kpi__icon { background: var(--signal-soft); color: var(--signal-ink); }
/* Optional per-card tone (kpi-grid.php's $kpi['tone']) — the same four status
   hues everything else on the page already uses, not a new palette. Distinct
   from kpi--accent (brand orange, one card per row only, brief §6): a tone is
   just semantic icon colour, not the row's headline figure. */
.kpi__icon--settled { background: var(--state-settled-soft); color: var(--state-settled); }
.kpi__icon--running { background: var(--state-running-soft); color: var(--state-running); }
.kpi__icon--attention { background: var(--state-attention-soft); color: var(--state-attention); }

.kpi__value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
.kpi__value--accent { color: var(--signal-ink); }
.kpi__value--zero { color: var(--ink-faint); }
.kpi__unit { font-size: var(--text-md); font-weight: 500; color: var(--ink-muted); }

.kpi__meta {
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.kpi__meta strong { color: var(--ink); font-weight: 600; }

/* --- The pipeline ----------------------------------------------------
   Every application walks one path, so the path is drawn once and the counts
   sit on it: an admin reads where work has piled up as a shape before reading
   a single figure. The dot carries the stage's state colour and clears to
   neutral when the stage is empty, because nothing is waiting there. */
.run {
  display: flex;
  flex-wrap: wrap;
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.run__stage {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition);
}
.run__stage + .run__stage { border-left: var(--line-1) solid var(--rule); }
.run__stage:hover { background: var(--paper-alt); color: inherit; }

.run__body { min-width: 0; }

.run__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  color: var(--ink-faint);
}
.run__icon .icon { width: 24px; height: 24px; }
.run__stage--attention.is-loaded .run__icon { background: var(--state-attention-soft); color: var(--state-attention); }
.run__stage--running.is-loaded .run__icon { background: var(--state-running-soft); color: var(--state-running); }
.run__stage--settled.is-loaded .run__icon { background: var(--state-settled-soft); color: var(--state-settled); }

.run__node {
  display: block;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.1;
  color: var(--ink);
}
.run__stage.is-empty .run__node { color: var(--ink-faint); }

.run__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}
.run__label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--rule-strong);
}
.run__stage--attention.is-loaded .run__label::before { background: var(--state-attention); }
.run__stage--running.is-loaded .run__label::before { background: var(--state-running); }
.run__stage--settled.is-loaded .run__label::before { background: var(--state-settled); }

.run__meta {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* --- Queues that branch off the pipeline --- */
.branch {
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Sitting inside a card that already draws the edge and the shadow. */
.branch--flush { border: 0; border-radius: 0; box-shadow: none; }

.branch__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--transition);
}
.branch__row + .branch__row { border-top: var(--line-1) solid var(--rule); }
.branch__row:hover { background: var(--signal-soft); color: var(--ink); }

.branch__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--state-attention-soft);
  color: var(--state-attention);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.branch__body { flex: 1; min-width: 0; }
.branch__label { font-weight: 600; font-size: var(--text-md); }
.branch__meta { font-size: var(--text-sm); color: var(--ink-muted); }
.branch__go { flex: none; color: var(--ink-faint); transition: color var(--transition), transform var(--transition); }
.branch__row:hover .branch__go { color: var(--signal-ink); transform: translateX(2px); }

/* --- A strip of secondary figures inside a card --- */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat-strip__item {
  flex: 1 1 160px;
  min-width: 0;
  padding: var(--space-4);
}
.stat-strip__item + .stat-strip__item { border-left: var(--line-1) solid var(--rule); }
.stat-strip__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.stat-strip__value {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-strip__value--zero { color: var(--ink-faint); }
.stat-strip__unit { font-size: var(--text-md); font-weight: 500; color: var(--ink-muted); margin-left: 2px; }

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.stat-card--link { display: block; color: inherit; text-decoration: none; }
.stat-card--link:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-md); color: inherit; }
.stat-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--signal-soft);
  color: var(--signal-ink);
}
.stat-card__icon--success { background: var(--state-settled-soft); color: var(--state-settled); }
.stat-card__icon--warning { background: var(--state-attention-soft); color: var(--state-attention); }
.stat-card__icon--muted { background: var(--paper-alt); color: var(--ink-muted); }
.stat-card__label { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: 2px; }
.stat-card__value { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.02em; }
.stat-card__value--accent { color: var(--signal-ink); }

/* --- The one hero figure an agent opens the app for --- */
.earnings {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.earnings__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.earnings__value {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.05;
  color: var(--signal-ink);
  margin-bottom: var(--space-3);
}
.earnings__unit { font-size: var(--text-lg); font-weight: 500; color: var(--ink-muted); margin-left: var(--space-1); }
.earnings__aside { text-align: right; }
.earnings__aside-value { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.022em; }

.workload-clear {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.workload-clear__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--state-settled-soft);
  color: var(--state-settled);
}
.workload-clear__title { font-weight: 600; color: var(--ink); }
.workload-clear__desc { font-size: var(--text-sm); color: var(--ink-muted); }

/* --- Charts (partials/chart-*.php, hand-drawn SVG — no chart library) ---
   Orange is the series being read; anything alongside it stays neutral so the
   comparison, not the palette, is what the eye does (brief §8). */
.chart { display: block; width: 100%; }
/* Capped, because the SVG keeps its aspect ratio: without this a chart in a
   full-width card grows to ~330px tall and its orange becomes the loudest
   thing on the page, which breaks the 60-30-10 balance (DESIGN_GUIDELINE §9). */
.chart__svg { display: block; width: 100%; height: auto; max-height: 260px; overflow: visible; }
.chart__grid line { stroke: var(--chart-grid); stroke-width: 1; }
.chart__axis { fill: var(--ink-muted); font-size: 11px; font-family: var(--font-body); }
.chart__axis--value { font-variant-numeric: tabular-nums; }
.chart__area { fill: url(#omcChartFill); }
.chart__line { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart__dot { fill: var(--paper); stroke: var(--signal); stroke-width: 2; }
.chart__bar { fill: var(--signal); transition: fill var(--transition); }
.chart__hit:hover + .chart__bar,
.chart__bar:hover { fill: var(--signal-press); }
.chart__bar--muted { fill: var(--rule-strong); }
.chart__hit { fill: transparent; }
.chart__hit:hover { fill: var(--signal-soft); }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--signal); }

/* --- A short column of labelled figures: the commission panel beside the
       chart, and the breakdown under a report's KPI row. --- */
.summary-list { display: block; }
.summary-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.summary-list__row + .summary-list__row { border-top: var(--line-1) solid var(--rule); }
.summary-list__label { font-size: var(--text-md); color: var(--ink-muted); }
.summary-list__hint { display: block; font-size: var(--text-sm); color: var(--ink-faint); }
.summary-list__value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-list__row--total { background: var(--paper-alt); }
.summary-list__row--total .summary-list__label { color: var(--ink); font-weight: 600; }
.summary-list__row--total .summary-list__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--signal-ink);
  letter-spacing: -.015em;
}

/* --- Share of a filtered total, inside a table cell.
       The bar is the comparison; the number is the exact value. Both are
       needed: the bar answers "who dominates" at a glance, the number answers
       "by how much" when someone stops to read. --- */
.share { display: flex; align-items: center; gap: var(--space-2); min-width: 108px; }
.share__track {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunken);
  overflow: hidden;
}
.share__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--signal); }
.share__value {
  flex: none;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Ranked list (top agents, product performance) --- */
.rank { display: block; }
.rank__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--transition);
}
.rank__row + .rank__row { border-top: var(--line-1) solid var(--rule); }
a.rank__row:hover { background: var(--signal-soft); color: var(--ink); }
.rank__pos {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.rank__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank__meta { grid-column: 2; font-size: var(--text-sm); color: var(--ink-muted); }
.rank__track {
  grid-column: 2 / -1;
  height: 6px;
  margin-top: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--paper-sunken);
  overflow: hidden;
}
.rank__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--signal); }

/* ============================================================
   Detail pages
   ============================================================ */

.detail-list { margin: 0; }
.detail-list > dt {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
}
.detail-list > dt:first-child { margin-top: 0; }
.detail-list > dd {
  margin: 2px 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Laid out as a two-column grid (`<dl class="row detail-list">`) the term and
   its value are side by side, so they have to share a top margin — the stacked
   rhythm above would drop every value 14px below its own label. */
.detail-list.row > dt,
.detail-list.row > dd { margin-top: var(--space-3); }
.detail-list.row > dt:first-of-type,
.detail-list.row > dt:first-of-type + dd { margin-top: 0; }
.detail-list > dd.is-lead { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.015em; }

.media-preview {
  max-width: var(--measure-media);
  width: 100%;
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
}

.audit-diff {
  margin: 0;
  padding: var(--space-3);
  background: var(--paper-alt);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}

/* --- Agent hierarchy --- */
.agent-tree { list-style: none; margin: 0; padding: 0; }
.agent-tree .agent-tree {
  margin-left: var(--space-4);
  padding-left: var(--space-4);
  border-left: var(--line-1) solid var(--rule);
}
.agent-tree__item { position: relative; padding: var(--space-1) 0; }
.agent-tree .agent-tree > .agent-tree__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) * -1);
  top: 50%;
  width: var(--space-3);
  height: var(--line-1);
  background: var(--rule);
}
.agent-tree__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.agent-tree__row:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-sm); }
.agent-tree__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--signal-soft);
  color: var(--signal-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}
.agent-tree__name { font-weight: 600; color: var(--ink); text-decoration: none; }
.agent-tree__name:hover { color: var(--signal-ink); text-decoration: underline; }
.agent-tree__move { margin-left: auto; flex: none; }

/* Per-node collapse (declutters a deep/bushy tree) and search-match highlight. */
.agent-tree__item.is-collapsed > .agent-tree { display: none; }
.agent-tree__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.agent-tree__toggle:hover { background: var(--signal-soft); color: var(--signal-ink); }
.agent-tree__toggle .icon { width: 16px; height: 16px; transition: transform var(--transition); }
.agent-tree__item.is-collapsed > .agent-tree__row .agent-tree__toggle .icon { transform: rotate(-90deg); }
.agent-tree__toggle-spacer { display: inline-block; width: 22px; flex: none; }
.agent-tree__row.is-match { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; }

/* --- Agent hierarchy: search + collapse toolbar (hierarchy/index.php) --- */
.tree-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tree-toolbar__search {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}
.tree-toolbar__search .icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  pointer-events: none;
}
.tree-toolbar__search .form-control { padding-left: calc(var(--space-3) * 2 + 16px); }
.tree-toolbar__actions { display: flex; gap: var(--space-2); flex: none; }

/* --- Empty state: says what is missing and, where there is one, what to do --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--ink-muted);
}
.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--paper-alt);
  color: var(--ink-faint);
}
.empty-state__icon .icon { width: 22px; height: 22px; }
.empty-state__title { font-weight: 600; color: var(--ink); font-size: var(--text-md); }
.empty-state__desc { font-size: var(--text-sm); margin-top: var(--space-1); max-width: var(--measure-panel); }
.empty-state__action { margin-top: var(--space-3); }

/* --- Loading ---
   Pages here are server-rendered: they arrive whole or not at all, so there
   is no half-filled layout to skeleton. The only real wait is between
   pressing a mutating button and the next page painting, and that is what
   form-guard.js's busy state covers — the button keeps its width, takes a
   spinner, and says what it is doing. A disabled button that says nothing
   reads as broken on a slow connection. */
.btn[data-busy] { cursor: progress; }
.btn[data-busy]:disabled { color: var(--ink-muted) !important; }
.spinner-border { border-width: 2px; color: currentColor; }
.spinner-border-sm { width: 14px; height: 14px; }

/* ============================================================
   Pagination
   ============================================================ */

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-1);
}
.pagination-bar__info { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-muted); }
.pagination-bar__per-page { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.pagination-bar__per-page .cselect { width: 88px; }

.pagination { margin-bottom: 0; gap: var(--space-1); }
.page-link {
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
}
.page-link .icon { width: 15px; height: 15px; }
.page-link:hover { background: var(--signal-soft); color: var(--signal-ink); border-color: var(--signal); }
.page-item.active .page-link {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
  font-weight: 600;
}
.page-item.disabled .page-link { color: var(--ink-faint); background: var(--paper-alt); }

/* ============================================================
   Public and auth pages
   ============================================================ */

.public-page,
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-3);
  background: var(--sheet);
}

.public-card { width: 100%; max-width: var(--measure-form); }
.public-card--compact { max-width: var(--measure-panel); }

.public-card__header {
  padding: var(--space-5) var(--space-5) 0;
}
.public-card__title { font-size: var(--text-2xl); font-weight: 700; margin: 0; letter-spacing: -.022em; }
.public-card__subtitle { margin: var(--space-2) 0 0; font-size: var(--text-md); color: var(--ink-muted); }
.public-card__body { padding: var(--space-5); }

.auth-card { width: 100%; max-width: 420px; padding: var(--space-6) var(--space-5); }

.guest-theme-toggle {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
}

.stepper {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.stepper__item {
  flex: 1;
  position: relative;
  text-align: center;
}
.stepper__item + .stepper__item::before {
  content: "";
  position: absolute;
  left: -50%;
  right: 50%;
  top: 13px;
  height: var(--line-2);
  background: var(--rule);
}
.stepper__item.is-done::before { background: var(--state-settled); }
.stepper__item.is-active::before { background: var(--signal); }

.stepper__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-2);
  border: var(--line-2) solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-faint);
  font-size: var(--text-sm);
  font-weight: 700;
}
.stepper__item.is-done .stepper__dot {
  background: var(--state-settled);
  border-color: var(--state-settled);
  color: var(--on-state);
}
.stepper__item.is-active .stepper__dot {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
}
/* Block, so the label sits under its dot rather than beside it — the
   connector between steps is drawn at the dot's height and runs straight
   through an inline label. */
.stepper__label { display: block; font-size: var(--text-sm); color: var(--ink-muted); }
.stepper__item.is-active .stepper__label { color: var(--ink); font-weight: 600; }
.stepper__item.is-done .stepper__label { color: var(--ink); }

/* --- File upload --- */
.uploader__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.uploader__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--paper-alt);
  border: var(--line-1) dashed var(--rule-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.uploader__drop:hover,
.uploader__input:focus-visible + .uploader__drop,
.uploader.is-dragging .uploader__drop {
  border-color: var(--signal);
  background: var(--signal-soft);
}
.uploader__icon { color: var(--signal-ink); }
.uploader__title { font-weight: 600; font-size: var(--text-md); }
.uploader__hint { font-size: var(--text-sm); color: var(--ink-muted); }
.uploader__preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.uploader__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: var(--line-1) solid var(--rule);
}
/* The "file" kind's stand-in for .uploader__thumb — nothing browsers can
   render as an <img>, so a document glyph on the same footprint instead. */
.uploader__file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--signal-soft);
  color: var(--signal-ink);
}
.uploader__meta { min-width: 0; flex: 1; }
.uploader__name { font-size: var(--text-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploader__size { font-size: var(--text-sm); color: var(--ink-muted); }

/* Companion card next to an .uploader (e.g. commission-payouts upload page):
   a decorative badge + a static checklist of upload requirements. */
.info-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--signal-soft);
  color: var(--signal-ink);
}
.info-card__badge .icon { width: 32px; height: 32px; }
.tip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tip-list__item { display: flex; align-items: flex-start; gap: var(--space-2); }
.tip-list__item .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--signal-ink); }

.avatar-preview {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-pill);
  border: var(--line-1) solid var(--rule);
}
.avatar-preview--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
  color: var(--ink-faint);
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* --- OCR panel --- */
.ai-panel {
  padding: var(--space-4);
  background: var(--signal-soft);
  border: var(--line-1) solid var(--signal-soft-strong);
  border-radius: var(--radius-md);
}
.ai-panel__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.ai-panel__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--signal-ink);
}
.ai-panel__title { font-weight: 600; font-size: var(--text-md); }
.ai-panel__desc { font-size: var(--text-sm); color: var(--ink-muted); margin: 2px 0 0; }
.ai-panel__action { margin-top: var(--space-3); }

.ai-status { margin-top: var(--space-3); }
.ai-status__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunken);
  overflow: hidden;
}
.ai-status__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--signal);
  transition: width 300ms ease;
}
.ai-status__text { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-1); }
.ai-status.is-success .ai-status__fill { background: var(--state-settled); }
.ai-status.is-success .ai-status__text { color: var(--ink); }
.ai-status.is-error .ai-status__fill { background: var(--state-failed); }
.ai-status.is-error .ai-status__text { color: var(--state-failed); }

/* ============================================================
   Overlays
   ============================================================ */

.user-menu { position: relative; }
.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--line-1) solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  transition: background-color var(--transition), border-color var(--transition);
}
.user-menu__trigger:hover { background: var(--paper-alt); border-color: var(--rule); }
.user-menu__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--signal-soft);
  color: var(--signal-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}
.user-menu__avatar--lg { width: 38px; height: 38px; font-size: var(--text-lg); }
.user-menu__name { font-size: var(--text-md); font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__chevron { flex: none; width: 14px; height: 14px; color: var(--ink-muted); transition: transform var(--transition); }
.user-menu.is-open .user-menu__chevron { transform: rotate(180deg); }
.user-menu__panel {
  display: none;
  position: absolute;
  z-index: var(--z-overlay);
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 236px;
  padding: var(--space-1);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.user-menu.is-open .user-menu__panel { display: block; }
.user-menu__panel-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); }
.user-menu__panel-name { font-size: var(--text-md); font-weight: 600; }
.user-menu__panel-role {
  font-size: var(--annot-size);
  font-weight: 600;
  letter-spacing: var(--annot-track);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.user-menu__divider { height: var(--line-1); background: var(--rule); margin: var(--space-1) 0; }
.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-md);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--transition);
}
.user-menu__item:hover { background: var(--paper-alt); color: var(--ink); }
.user-menu__item--danger { color: var(--state-failed); }
.user-menu__item--danger:hover { background: var(--state-failed-soft); color: var(--state-failed); }
.user-menu__item .icon { width: 16px; height: 16px; }

.modal-content {
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: var(--line-1) solid var(--rule); padding: var(--space-4); }
.modal-footer { border-top: var(--line-1) solid var(--rule); padding: var(--space-3) var(--space-4); gap: var(--space-2); }
.modal-title { font-size: var(--text-lg); font-weight: 600; }
.modal-body { padding: var(--space-4); }

/* --- Support widget (CLAUDE.md §13) --- */
.support-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--signal);
  color: var(--on-signal);
  box-shadow: var(--shadow-lg);
  transition: background-color var(--transition), transform var(--transition);
}
.support-fab:hover { background: var(--signal-press); transform: translateY(-2px); }
.support-fab .icon { width: 20px; height: 20px; }

.support-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  transition: border-color var(--transition), background-color var(--transition);
}
.support-choice:hover { border-color: var(--signal); background: var(--signal-soft); }
.support-choice__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  color: var(--ink-muted);
  transition: background-color var(--transition), color var(--transition);
}
.support-choice:hover .support-choice__icon { background: var(--paper); color: var(--signal-ink); }
.support-choice__title { font-weight: 600; }
.support-choice__desc { font-size: var(--text-sm); color: var(--ink-muted); }

/* ============================================================
   Responsive — structural, never fluid type
   ============================================================ */

@media (max-width: 1399.98px) {
  .kpi-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199.98px) {
  .kpi-grid,
  .kpi-grid--3,
  .kpi-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-sidebar { width: 216px; flex-basis: 216px; }
}

@media (max-width: 991.98px) {
  .app-main { padding: var(--space-4) var(--space-4) var(--space-7); }
  .run__stage { flex-basis: 50%; }
  .run__stage:nth-child(odd) { border-left: 0; }
  .run__stage:nth-child(n + 3) { border-top: var(--line-1) solid var(--rule); }
}

@media (max-width: 767.98px) {
  /* The sidebar leaves the side and becomes a scrolling strip across the top,
     so navigation never costs a whole first viewport on a phone. */
  .app-shell { flex-direction: column; }

  .app-sidebar {
    /* align-self must go back to stretch: the desktop rule pins the sticky
       rail to flex-start, and once the shell turns into a column that same
       line makes the strip size to its own nowrap content — 1685px of nav
       dragging the whole document into a horizontal scroll. */
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: none;
    min-height: 0;
    max-height: none;
    position: static;
    border-right: 0;
    border-bottom: var(--line-1) solid var(--rail-rule);
    padding: var(--space-3) !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .app-sidebar::-webkit-scrollbar { display: none; }
  .app-sidebar.is-collapsed { display: none; }
  /* the rail turns into a horizontal strip here — a promo panel has nowhere
     to sit in it, so it steps aside rather than pushing the page down */
  .rail-promo { display: none; }

  .app-sidebar__brand { padding: 0 0 var(--space-3); margin-bottom: var(--space-2); }

  .nav-group__label { display: none; }
  .app-sidebar .nav-group { display: inline-block; vertical-align: top; }
  .app-sidebar .nav-group + .nav-group { margin-top: 0; margin-left: var(--space-1); }

  .app-sidebar .nav { flex-direction: row !important; flex-wrap: nowrap; gap: var(--space-1); }
  .app-sidebar .nav-item { flex: none; }
  .app-sidebar .nav-link { white-space: nowrap; }
  .app-sidebar .nav-link__label { flex: none; }
  /* The leading bar becomes an underline when the strip turns horizontal. */
  .app-sidebar .nav-link.active::before {
    left: var(--space-3);
    right: var(--space-3);
    top: auto;
    bottom: 2px;
    width: auto;
    height: 3px;
    transform: none;
    border-radius: var(--radius-pill);
  }

  .app-main { padding: var(--space-3) var(--space-3) var(--space-7); }
  .app-header { padding: var(--space-2) var(--space-3); }
  .user-menu__name { display: none; }

  .kpi-grid,
  .kpi-grid--3,
  .kpi-grid--5 { gap: var(--space-2); }

  .earnings { padding: var(--space-4); }

  /* A wide table scrolls inside its own card rather than squeezing every
     column past the point of reading (brief §21). */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 575.98px) {
  .public-card__body,
  .public-card__header,
  .card-body,
  .card-header { padding: var(--space-3); }

  .kpi-grid,
  .kpi-grid--3,
  .kpi-grid--5 { grid-template-columns: minmax(0, 1fr); }

  .kpi { padding: var(--space-3); }
  .kpi__value { font-size: var(--text-2xl); }

  .run__stage { flex-basis: 100%; border-left: 0; }
  .run__stage + .run__stage { border-left: 0; border-top: var(--line-1) solid var(--rule); }

  .stat-strip__item { flex-basis: 50%; }
  .stat-strip__item:nth-child(odd) { border-left: 0; }
  .stat-strip__value { font-size: var(--text-2xl); }

  .earnings { display: block; }
  .earnings__aside { text-align: left; margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--line-1) solid var(--rule); }
  .earnings__value { font-size: var(--text-3xl); }

  .stepper__label { font-size: var(--annot-size); }

  /* On a phone the primary action goes to the top of the stack and runs the
     full width — a thumb reaches the bottom of the screen, not the corner. */
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .form-actions--split { flex-direction: column-reverse; }

  .page-header { gap: var(--space-3); }
  .page-header > .btn,
  .page-header > a.btn { width: 100%; }

  .filter-bar { padding: var(--space-3); }
  .filter-bar__field,
  .filter-bar__field:has(> input[type="text"]),
  .filter-bar__field:has(> input[type="search"]) { flex-basis: 100%; max-width: none; }
  .filter-bar__actions { width: 100%; }
  .filter-bar__actions .btn { flex: 1; }

  .table > tbody > tr > td,
  .table > thead > tr > th { padding: var(--space-2) var(--space-3); }

  .pagination-bar { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .support-fab:hover { transform: none; }
  .row-go { transform: none !important; }
}

/* Print is a third theme, not a hack: shadows go, rules go to full black
   (a hairline at 10% grey disappears on a laser printer), and the chrome
   around the content is dropped entirely. */
@media print {
  :root {
    --sheet: #ffffff;
    --paper: #ffffff;
    --paper-alt: #ffffff;
    --paper-sunken: #ffffff;
    --ink: #000000;
    --rule: #000000;
    --rule-strong: #000000;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
  .app-sidebar, .app-header, .app-footer, .support-fab,
  .filter-bar, .date-range-presets, .form-actions, .pagination-bar { display: none !important; }
  .app-main { padding: 0; max-width: none; }
}

.form_header {
  text-align: center;
  margin-bottom: 50px;
}

/* ============================================================
   PUBLIC SITE + AUTH (Phase 47)
   The marketing surface at `/` and the split-screen login/forgot pages.

   Both surfaces share a BRAND CANVAS - a warm cream ground carrying the
   cropped product artwork from the design reference. The canvas stays a fixed
   light field in BOTH themes on purpose: the artwork is a raster with its own
   baked-in cream ground, so re-theming the panel would leave the image
   sitting in a visible box. Everything that is not the canvas themes normally
   through the tokens above, and the ink used ON the canvas is pinned beside
   it so contrast survives the dark theme.
   ============================================================ */

:root {
  --canvas: #FEF7F2;         /* sampled from the reference artwork so the
                                cropped JPEG blends into the panel seamlessly */
  --canvas-deep: #FBEADD;
  --canvas-ink: #17191F;     /* 15.9:1 on canvas - pinned, not themed */
  --canvas-ink-muted: #5D6675;
  --canvas-rule: #F2DFD0;
  --keel: #1B2637;           /* the navy strip under the canvas, and the footer */
  --keel-ink: #FFFFFF;
  --keel-muted: #A9B4C4;     /* 7.0:1 on keel */
  --site-header-h: 72px;
}

.site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.site-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); }

.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: var(--line-1) solid var(--rule); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-4); height: var(--site-header-h); position: relative; }
.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-brand img { height: 38px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: var(--space-5); margin-inline: auto; }
.site-nav__link { color: var(--ink-muted); text-decoration: none; font-size: var(--text-md); font-weight: 500; padding: var(--space-2) 0; border-bottom: var(--line-2) solid transparent; transition: color var(--transition), border-color var(--transition); }
.site-nav__link:hover { color: var(--ink); }
.site-nav__link--active { color: var(--signal-ink); border-bottom-color: var(--signal); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.site-nav-toggle { display: none; }

.site-section { padding-block: var(--space-7); }
.site-section--tint { background: var(--paper-alt); }
.site-section__head { text-align: center; max-width: var(--measure-form); margin: 0 auto var(--space-6); }
.site-eyebrow { display: block; font-size: var(--annot-size); letter-spacing: var(--annot-track); text-transform: uppercase; font-weight: 600; color: var(--signal-ink); margin-bottom: var(--space-2); }
.site-section__title { font-size: var(--text-3xl); font-weight: 700; margin: 0; }
.site-section__title::after { content: ""; display: block; width: 56px; height: 3px; border-radius: var(--radius-pill); background: var(--signal); margin: var(--space-3) auto 0; }
.site-section__lead { color: var(--ink-muted); margin: var(--space-3) 0 0; }

.site-hero { background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 100%); color: var(--canvas-ink); overflow: hidden; }
.site-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; padding-block: var(--space-7); }
.site-hero__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 700; line-height: 1.25; margin: 0 0 var(--space-4); color: var(--canvas-ink); }
.site-hero__title em { font-style: normal; color: var(--signal-ink); }
.site-hero__lead { font-size: var(--text-lg); line-height: 1.9; color: var(--canvas-ink-muted); margin: 0 0 var(--space-5); max-width: 34em; }
.site-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-hero__media img { display: block; width: 100%; height: auto; max-width: 520px; margin-inline: auto; mix-blend-mode: multiply; }
.site-hero__points { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--line-1) solid var(--canvas-rule); }
.site-point { display: flex; align-items: flex-start; gap: var(--space-2); }
.site-point__icon { color: var(--signal-ink); flex: 0 0 auto; margin-top: 2px; }
.site-point__title { font-weight: 600; font-size: var(--text-md); color: var(--canvas-ink); }
.site-point__note { font-size: var(--text-sm); color: var(--canvas-ink-muted); }

.site-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.site-card { background: var(--paper); border: var(--line-1) solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-4); text-align: center; transition: box-shadow var(--transition), transform var(--transition); }
.site-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.site-card__icon { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--signal-soft); color: var(--signal-ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.site-card__icon svg { width: 26px; height: 26px; }
.site-card__title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--space-2); }
.site-card__text { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; line-height: 1.8; }

.site-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); counter-reset: site-step; }
.site-step { position: relative; text-align: center; padding-inline: var(--space-2); }
.site-step:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: calc(50% + 32px); right: calc(-50% + 32px); height: var(--line-2); background: var(--rule); }
.site-step__num { counter-increment: site-step; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--paper); border: var(--line-2) solid var(--signal); color: var(--signal-ink); font-weight: 700; font-size: var(--text-lg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); position: relative; z-index: 1; }
.site-step__num::before { content: counter(site-step); }
.site-step__title { font-weight: 600; margin: 0 0 var(--space-1); }
.site-step__text { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; line-height: 1.8; }

.site-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-6); align-items: center; background: var(--paper); border: var(--line-1) solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); }
.site-product__badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--signal-soft); color: var(--signal-ink); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); }
.site-product__title { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-3); }
.site-product__text { color: var(--ink-muted); line-height: 1.9; margin: 0 0 var(--space-4); }
.site-product__list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.site-product__list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-md); }
.site-product__list svg { color: var(--state-settled); flex: 0 0 auto; margin-top: 3px; }
.site-product__media { background: linear-gradient(135deg, var(--canvas) 0%, var(--canvas-deep) 100%); border-radius: var(--radius-md); padding: var(--space-4); }
.site-product__media img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.site-product__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-muted); text-align: center; }

.site-faq { max-width: var(--measure-form); margin-inline: auto; }
.site-faq .accordion-item { background: var(--paper); border: var(--line-1) solid var(--rule); border-radius: var(--radius-md) !important; margin-bottom: var(--space-2); overflow: hidden; }
.site-faq .accordion-button { background: var(--paper); color: var(--ink); font-weight: 600; font-size: var(--text-md); padding: var(--space-3) var(--space-4); box-shadow: none; }
.site-faq .accordion-button:not(.collapsed) { background: var(--signal-soft); color: var(--signal-ink); }
.site-faq .accordion-button:focus { box-shadow: 0 0 0 var(--line-2) var(--bs-focus-ring-color); }
.site-faq .accordion-body { color: var(--ink-muted); font-size: var(--text-md); line-height: 1.9; padding: var(--space-3) var(--space-4) var(--space-4); }

.site-cta { background: var(--signal); color: var(--on-signal); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.site-cta__icon { width: 56px; height: 56px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .35); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.site-cta__title { font-size: var(--text-xl); font-weight: 700; margin: 0 0 var(--space-1); }
.site-cta__text { margin: 0; font-size: var(--text-md); }
.site-cta__action { margin-left: auto; }

.site-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.site-contact__item { background: var(--paper); border: var(--line-1) solid var(--rule); border-radius: var(--radius-md); padding: var(--space-4); }
.site-contact__label { font-weight: 600; margin: 0 0 var(--space-1); display: flex; align-items: center; gap: var(--space-2); }
.site-contact__label svg { color: var(--signal-ink); }
.site-contact__value { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; line-height: 1.8; }

.site-footer { background: var(--keel); color: var(--keel-muted); padding-block: var(--space-6) var(--space-4); }
.site-footer__grid { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.site-footer__brand { max-width: 30em; }
.site-footer__brand img { height: 36px; width: auto; margin-bottom: var(--space-3); filter: brightness(0) invert(1); }
.site-footer__text { font-size: var(--text-sm); line-height: 1.9; margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-left: auto; }
.site-footer__links a { color: var(--keel-ink); text-decoration: none; font-size: var(--text-sm); }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__legal { margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--line-1) solid rgba(255, 255, 255, .12); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }

.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.auth-canvas { background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 100%); color: var(--canvas-ink); display: flex; flex-direction: column; overflow: hidden; }
.auth-canvas__body { padding: var(--space-6) var(--space-6) 0; flex: 1; display: flex; flex-direction: column; }
.auth-canvas__brand img { height: 44px; width: auto; display: block; margin-bottom: var(--space-6); }
.auth-canvas__title { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem); font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-4); }
.auth-canvas__title em { font-style: normal; color: var(--signal-ink); }
.auth-canvas__lead { color: var(--canvas-ink-muted); line-height: 1.9; margin: 0 0 var(--space-5); max-width: 32em; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); max-width: 30em; }
.auth-points li { display: flex; gap: var(--space-3); align-items: flex-start; padding-bottom: var(--space-3); border-bottom: var(--line-1) solid var(--canvas-rule); }
.auth-points li:last-child { border-bottom: 0; }
.auth-points__icon { width: 48px; height: 48px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--paper); border: var(--line-1) solid var(--canvas-rule); color: var(--signal-ink); display: inline-flex; align-items: center; justify-content: center; }
.auth-points__title { font-weight: 600; margin: 0 0 2px; }
.auth-points__note { font-size: var(--text-sm); color: var(--canvas-ink-muted); margin: 0; }
.auth-canvas__art { margin-top: auto; display: block; width: 100%; max-width: 560px; height: auto; align-self: flex-end; mix-blend-mode: multiply; }
.auth-canvas__keel { background: var(--keel); color: var(--keel-ink); padding: var(--space-4) var(--space-6); display: flex; gap: var(--space-5); flex-wrap: wrap; }
.auth-keel-item { display: flex; gap: var(--space-3); align-items: center; }
.auth-keel-item svg { color: var(--keel-ink); flex: 0 0 auto; }
.auth-keel-item__title { font-weight: 600; font-size: var(--text-md); }
.auth-keel-item__note { font-size: var(--text-sm); color: var(--keel-muted); }

.auth-panel { background: var(--sheet); display: flex; flex-direction: column; padding: var(--space-5) var(--space-6); }
.auth-panel__top { display: flex; justify-content: flex-end; }
.auth-panel__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: var(--space-5); }
.auth-card { background: var(--paper); border: var(--line-1) solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6); width: 100%; max-width: var(--measure-panel); }
.auth-card__brand { text-align: center; margin-bottom: var(--space-4); }
.auth-card__brand img { height: 46px; width: auto; }
.auth-card__title { font-size: var(--text-2xl); font-weight: 700; text-align: center; margin: 0 0 var(--space-2); }
.auth-card__lead { text-align: center; color: var(--ink-muted); font-size: var(--text-md); margin: 0 0 var(--space-5); line-height: 1.8; }
.auth-card__footnote { text-align: center; color: var(--ink-muted); font-size: var(--text-sm); margin: var(--space-4) 0 0; }
.auth-field { margin-bottom: var(--space-4); }
.auth-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.auth-submit { width: 100%; height: 48px; font-size: var(--text-lg); font-weight: 600; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-muted); font-size: var(--text-sm); margin-block: var(--space-4); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: var(--line-1); background: var(--rule); }
.auth-aside { display: flex; gap: var(--space-3); background: var(--paper); border: var(--line-1) solid var(--rule); border-radius: var(--radius-md); padding: var(--space-4); width: 100%; max-width: var(--measure-panel); margin: var(--space-4) auto 0; }
.auth-aside__icon { color: var(--signal-ink); flex: 0 0 auto; }
.auth-aside__title { font-weight: 600; margin: 0 0 var(--space-1); }
.auth-aside__text { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; line-height: 1.8; }
.auth-panel__legal { text-align: center; font-size: var(--text-sm); color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); justify-content: center; }

@media (max-width: 1199.98px) {
  .site-nav { gap: var(--space-4); }
  .site-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-5); }
  .site-step::after { display: none; }
}

@media (max-width: 991.98px) {
  .site-nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: var(--site-header-h); flex-direction: column; align-items: stretch; gap: 0; margin: 0; background: var(--paper); border-bottom: var(--line-1) solid var(--rule); box-shadow: var(--shadow-md); padding: var(--space-2) var(--space-4) var(--space-3); }
  .site-nav--open { display: flex; }
  .site-nav__link { padding: var(--space-3) 0; border-bottom: var(--line-1) solid var(--rule); }
  .site-nav__link--active { border-bottom-color: var(--signal); }
  .site-header__actions { margin-left: auto; }
  .site-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .site-hero__media { order: -1; }
  .site-hero__media img { max-width: 380px; }
  .site-product { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .site-contact { grid-template-columns: minmax(0, 1fr); }
  /* The form comes first on a narrow screen; the brand canvas moves below the
     thing the visitor came to do. */
  .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-panel { order: 1; min-height: 100vh; justify-content: center; }
  .auth-canvas { order: 2; }
  .auth-canvas__body { padding: var(--space-5) var(--space-4) 0; }
  .auth-canvas__art { max-width: 420px; margin-inline: auto; align-self: center; }
  .auth-canvas__keel { padding: var(--space-4); }
}

@media (max-width: 575.98px) {
  .site-container { padding-inline: var(--space-3); }
  .site-section { padding-block: var(--space-6); }
  .site-cards, .site-steps { grid-template-columns: minmax(0, 1fr); }
  .site-hero__points { gap: var(--space-3); }
  .site-point { flex: 1 1 100%; }
  .site-cta { padding: var(--space-4); }
  .site-cta__action { margin-left: 0; width: 100%; }
  .site-cta__action .btn { width: 100%; }
  .auth-panel { padding: var(--space-4) var(--space-3); }
  .auth-card { padding: var(--space-4); }
  .site-footer__links { margin-left: 0; }
}
.site-section__head--spaced { margin-top: var(--space-7); }

/* --- Blend correction for the cropped artwork -------------------------
   The crops carry their own flat cream ground (#FEF7F2, sampled). Under
   `mix-blend-mode: multiply` any panel colour OTHER than that exact value
   darkens the image's own ground and the crop reads as a visible rectangle.
   So every surface that holds one of these images is that flat colour — no
   gradient behind the artwork, ever. Gradients elsewhere on the page are
   fine; they just must not sit under a crop. */
.site-hero,
.auth-canvas,
.site-product__media { background: var(--canvas); }

/* On a short screen the canvas column must still fit its brand line, its
   points and the keel strip, so the artwork gives up height first. */
.auth-canvas__art { max-height: 42vh; object-fit: contain; object-position: bottom center; }

/* The canvas column has to fit brand + headline + three points + artwork +
   keel inside one viewport on a 900px-tall laptop, which is shorter than the
   1024px the design reference was drawn at. The artwork absorbs the
   difference rather than the copy. */
.auth-canvas__brand img { margin-bottom: var(--space-4); }
.auth-canvas__lead { margin-bottom: var(--space-4); }
.auth-points { gap: var(--space-2); }
.auth-points li { padding-bottom: var(--space-2); }
.auth-canvas__art { max-height: 30vh; }
@media (max-width: 991.98px) {
  /* Below the fold on mobile the artwork has room again. */
  .auth-canvas__art { max-height: none; }
}

/* Grid and flex children default to min-width:auto, which lets a long
   unbreakable string (the Latin copyright line) widen a column instead of
   wrapping inside it. Opting the auth columns out is the standard guard. */
.auth-split > *,
.auth-panel__body,
.auth-panel__legal,
.auth-card { min-width: 0; }
.auth-panel__legal span,
.auth-panel__legal a { overflow-wrap: anywhere; }

/* ============================================================
   REFERRAL LINKS — sharing surface (Phase 48)
   The agent's task is copy -> send -> follow up, so the share row is the
   loudest thing on the card and the raw URL is supporting detail. The
   destructive action sits behind the row's overflow menu, never beside the
   share button.
   ============================================================ */

/* The page opens on a warm full-bleed band with the referral artwork at its
   right. The art is deliberately taller than the band: it hangs over the card
   below, which is what makes the top of the page read as depth rather than a
   coloured stripe. Everything in it is real artwork lifted out of the design
   reference — never a screenshot used as a backdrop. */
.page-hero {
  /* mirrors .app-main's padding so the band can bleed to both edges — kept as
     a variable because that padding steps down at the two breakpoints */
  --hero-gutter: var(--space-5);
  position: relative;
  z-index: 1;
  margin: calc(var(--hero-gutter) * -1) calc(var(--hero-gutter) * -1) 0;
  padding: var(--hero-gutter) var(--hero-gutter) calc(var(--space-6) + var(--space-3));
  background: var(--hero-band);
}
/* The band runs a little past the top of the first card, so the card sits ON
   the band rather than after it. */
.page-hero + .card { margin-top: calc(var(--space-3) * -1); }
.page-header--hero { margin-bottom: 0; }
.page-hero .page-header__title { font-size: var(--text-3xl); letter-spacing: -.028em; }
.page-hero .page-header__subtitle {
  font-size: var(--text-lg);
  max-width: none;
  /* room kept clear for the artwork; each page sets its own inset, and the
     narrow breakpoint zeroes it in one place */
  padding-right: var(--hero-text-inset, calc(var(--hero-art-w) + var(--space-5)));
}
.page-hero__art {
  position: absolute;
  top: var(--hero-gutter);
  right: var(--hero-gutter);
  width: var(--hero-art-w);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(23, 25, 31, .10));
}

@media (max-width: 1399.98px) {
  .page-hero { --hero-art-w: 250px; }
}
@media (max-width: 1199.98px) {
  .page-hero { --hero-art-w: 200px; }
  .page-hero .page-header__title { font-size: var(--text-2xl); }
  .page-hero .page-header__subtitle { font-size: var(--text-md); }
}
@media (max-width: 991.98px) {
  /* doubled class on purpose: these have to win over the per-page hero rules
     further down the file, which carry the same specificity */
  .page-hero.page-hero {
    --hero-gutter: var(--space-4);
    --hero-text-inset: 0;
    padding-bottom: var(--space-5);
    margin-bottom: 0;
  }
  .page-hero__art { display: none; }
}
@media (max-width: 575.98px) {
  /* doubled to match the >=992 rule above, which is also doubled — otherwise
     the gutter stays at 24px while .app-main drops to 16px and the band
     hangs 8px past the viewport on a phone */
  .page-hero.page-hero { --hero-gutter: var(--space-3); }
}

.guide-card { margin-bottom: var(--space-4); }
.guide-card__title { font-size: var(--text-xl); font-weight: 700; color: var(--signal-ink); margin: 0 0 var(--space-3); }
.guide-steps {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* Sized by content, not in equal thirds: step 3 carries twice the copy of
   step 1, and equal columns would break its two lines into three. */
.guide-step { display: flex; gap: var(--space-3); align-items: center; flex: 1 1 auto; min-width: 0; }
.guide-step__num {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--signal-soft);
  color: var(--signal-ink);
  font-size: var(--text-xl);
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* One tinted tile per step, each holding its own illustrated glyph. The three
   tints are illustration only (see --illus-* in the token block). */
.guide-step__art {
  width: 60px; height: 60px; flex: 0 0 auto;
  margin-right: var(--space-2);
  border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
}
.guide-step__art img { display: block; width: 42px; height: 42px; }
.guide-step--select .guide-step__art { background: var(--illus-violet-soft); }
.guide-step--send .guide-step__art { background: var(--illus-green-soft); }
.guide-step--send .guide-step__art img { width: 34px; height: 34px; }
.guide-step--track .guide-step__art { background: var(--illus-gold-soft); }
.guide-step--track .guide-step__art img { width: 40px; height: 40px; }
.guide-step__body { min-width: 0; }
.guide-step__title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-1); }
.guide-step__text { font-size: var(--text-md); color: var(--ink-muted); margin: 0; line-height: 1.7; }
.guide-step__arrow { flex: 0 0 auto; color: var(--ink-faint); align-self: center; }

.guide-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--signal-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink);
}
.guide-note svg { color: var(--signal-ink); flex: 0 0 auto; }

.section-heading { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
.section-heading__title { font-size: var(--text-xl); font-weight: 700; margin: 0; }
.section-heading__link { margin-left: auto; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-1); }

.link-card { margin-bottom: var(--space-4); }
.link-card__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.link-card__icon {
  width: 60px; height: 60px; flex: 0 0 auto;
  border-radius: var(--radius-lg);
  background: var(--signal-soft);
  color: var(--signal);
  display: inline-flex; align-items: center; justify-content: center;
}
.link-card__icon .icon { width: 26px; height: 26px; stroke-width: 2.4; }
.link-card__identity { flex: 0 0 auto; max-width: var(--measure-cell); }
.link-card__title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-1); }
.link-card__desc { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; line-height: 1.6; }
.link-card__url { flex: 1 1 320px; min-width: 0; }
.link-card__url .form-label { font-size: var(--text-sm); }
.link-card__menu { flex: 0 0 auto; }
.dropdown-item--danger { color: var(--state-failed); display: flex; align-items: center; gap: var(--space-2); width: 100%; }
.dropdown-item--danger:hover { background: var(--state-failed-soft); color: var(--state-failed); }

.share-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
/* The links page shows every channel as a soft raised pill; the dashboard's
   compact variant keeps the plain button so the two surfaces stay distinct. */
.share-row:not(.share-row--compact) { gap: var(--space-3); }
.share-row:not(.share-row--compact) .btn {
  min-height: var(--control-h-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding-inline: var(--space-4);
}
.share-row:not(.share-row--compact) .btn-outline-secondary { border-color: var(--rule); }

/* The URL and its copy button read as two controls side by side, not one
   welded input-group. */
.link-card__url .input-group { gap: var(--space-2); }
.link-card__url .input-group > .form-control,
.link-card__url .input-group > .btn {
  min-height: var(--control-h-lg);
  border-radius: var(--radius-sm);
  margin-left: 0;
}
.link-card__url .input-group > .btn { padding-inline: var(--space-4); }
.link-card > .card-body { padding: var(--space-5); }

.share-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: var(--line-1) solid var(--signal-soft-strong);
  border-radius: var(--radius-md);
  background: var(--signal-soft);
}
.share-panel__title { font-weight: 700; margin: 0 0 var(--space-1); }
.share-panel__note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-3); }
.share-panel__channels { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.share-channel {
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
  display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.share-channel:hover { border-color: var(--signal); box-shadow: var(--shadow-sm); }
.share-message {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.share-message__body { margin: 0; font-size: var(--text-sm); line-height: 1.8; flex: 1; min-width: 0; }
.share-message__url { color: var(--signal-ink); overflow-wrap: anywhere; }

.link-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--paper-alt);
  border-radius: var(--radius-md);
}
.link-stat { display: flex; gap: var(--space-3); align-items: center; }
.link-stat__icon {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  color: var(--ink-muted);
  box-shadow: var(--shadow-xs);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Each figure keeps its own mark colour so the row reads at a glance; these
   are icon tints on a white disc, not status fields. */
.link-stat__icon--applications { color: var(--illus-violet); }
.link-stat__icon--settled { color: var(--state-settled); }
.link-stat__icon--commission { color: var(--illus-gold); }
.link-stat__value { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; }
.link-stat__label { font-size: var(--text-sm); color: var(--ink-muted); }
.link-stat__meta { margin-left: auto; font-size: var(--text-sm); color: var(--ink-muted); }

.qr-box { display: flex; justify-content: center; padding: var(--space-3) 0; }
.qr-box canvas { width: 100%; max-width: 240px; height: auto; image-rendering: pixelated; }
.qr-url { font-size: var(--text-sm); color: var(--ink-muted); overflow-wrap: anywhere; margin: 0 0 var(--space-3); }
.qr-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

/* Transient confirmation for copy/share, which have no page reload to carry a
   flash message (DESIGN_GUIDELINE §7 — every action needs feedback). */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  pointer-events: none;
}
.toast-note {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-md);
  box-shadow: var(--shadow-lg);
  opacity: 1;
  transition: opacity var(--transition), transform var(--transition);
}
.toast-note--out { opacity: 0; transform: translateY(6px); }

@media (max-width: 991.98px) {
  .guide-steps { flex-direction: column; }
  .guide-step__arrow { display: none; }
  .link-card__head { flex-wrap: wrap; }
  .link-card__identity { max-width: none; flex: 1 1 auto; }
  .link-card__url { flex: 1 1 100%; }
  .share-panel { grid-template-columns: minmax(0, 1fr); }
  .link-stat__meta { margin-left: 0; flex: 1 1 100%; }
}

@media (max-width: 575.98px) {
  .share-row .btn { flex: 1 1 100%; justify-content: center; }
  .link-stats { gap: var(--space-3); }
  .link-stat { flex: 1 1 45%; }
}
.link-card__create { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.link-card__hint { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; max-width: 28em; text-align: right; }
@media (max-width: 767.98px) {
  .link-card__create { margin-left: 0; justify-content: flex-start; }
  .link-card__hint { text-align: left; }
}

/* ============================================================
   WITHDRAWAL — the money screen (Phase 49)
   Reads in the order the task happens: what you have -> how much -> where it
   lands -> review -> history. Orange stays the action colour; the four status
   fields carry the outcomes, and green appears only on a settled state.
   ============================================================ */

/* The page opens on the same full-bleed band as the other agent screens, with
   the wallet -> bank artwork lifted out of the design reference. The peach
   cloud behind it is painted here rather than cut, so it re-tints in dark. */
/* Here the artwork sits BEHIND the card that follows, so the card crops it the
   way the reference does — the opposite of the referral page, where the
   document deliberately hangs over the card below it. */
.page-hero--withdrawal { z-index: 0; }
.page-hero--withdrawal + .card { position: relative; z-index: 1; }
.page-hero--withdrawal {
  /* the band stops where the reference stops; the artwork keeps going past it
     onto the page ground, and the card below starts clear of both */
  --hero-art-w: 610px;
  margin-bottom: calc(var(--space-6) + var(--space-6));
  padding-bottom: calc(var(--space-6) + var(--space-5));
  background:
    radial-gradient(260px 175px at 72% 46%, rgba(253, 172, 148, .28), rgba(253, 172, 148, 0) 72%),
    var(--hero-band-report);
}
.page-hero--withdrawal { --hero-text-inset: calc(var(--hero-art-w) - 180px); }

/* Each half of the flow is a numbered step, with its own artwork sitting in
   the top corner of the card the way the reference has it. */
.step-card { position: relative; overflow: hidden; }
.step-card .card-header { gap: var(--space-3); justify-content: flex-start; padding-right: calc(var(--space-4) + 150px); }
.step-card__num {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--signal-soft);
  color: var(--signal-ink);
  font-size: var(--text-md);
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.step-card__title { min-width: 0; }
.step-card__art {
  position: absolute;
  top: var(--space-1);
  right: var(--space-3);
  width: 141px;
  height: auto;
  pointer-events: none;
}
.step-card__art--bank { width: 190px; top: calc(var(--space-2) * -1); right: 0; }

.payout-summary { margin-bottom: var(--space-4); }
.payout-summary__grid { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.payout-summary__lead { flex: 1 1 320px; min-width: 0; display: flex; gap: var(--space-3); align-items: flex-start; }
.payout-summary__leadBody { min-width: 0; }
.payout-summary__icon {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--signal-soft);
  color: var(--signal);
  display: inline-flex; align-items: center; justify-content: center;
}
.payout-summary__icon .icon { width: 24px; height: 24px; }
.payout-summary__label { font-size: var(--text-md); color: var(--ink-muted); margin: 0 0 var(--space-1); }
.payout-summary__value {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--signal-ink);
  line-height: 1.1;
  margin: 0 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.payout-summary__unit { font-size: var(--text-xl); font-weight: 600; color: var(--ink-muted); margin-left: var(--space-2); white-space: nowrap; }
.payout-summary__note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

.payout-facts { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-left: auto; }
.payout-fact { padding-left: var(--space-4); border-left: var(--line-1) solid var(--rule); min-width: 140px; }
.payout-fact__label { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-1); }
.payout-fact__value { font-size: var(--text-xl); font-weight: 700; }
.payout-fact__note { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 2px; }

.payout-alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--signal-soft);
  flex-wrap: wrap;
}
.payout-alert svg { color: var(--signal-ink); flex: 0 0 auto; }
.payout-alert--blocked { background: var(--state-attention-soft); }
.payout-alert--blocked svg { color: var(--state-attention); }
.payout-alert__title { font-weight: 600; margin: 0 0 2px; }
.payout-alert__text { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.payout-alert .btn { margin-left: auto; }

.payout-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }

.quick-amounts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quick-amount {
  background: var(--paper);
  border: var(--line-1) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.quick-amount:hover { border-color: var(--signal); color: var(--signal-ink); }
.quick-amount--all { border-color: var(--signal); color: var(--signal-ink); background: var(--signal-soft); }

.bank-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-alt);
}
.bank-card--empty { border-style: dashed; }
.bank-card__icon {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.bank-card__body { min-width: 0; }
.bank-card__bank { font-weight: 700; margin: 0 0 var(--space-1); }
.bank-card__row { font-size: var(--text-md); color: var(--ink-muted); margin: 0 0 2px; overflow-wrap: anywhere; }
.badge-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
}
.badge-chip--settled { background: var(--state-settled); color: var(--on-state); }
.badge-chip--settled svg { width: 16px; height: 16px; }

.review-list { margin: 0 0 var(--space-4); }
.review-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.review-row dt { font-weight: 400; color: var(--ink-muted); margin: 0; }
.review-row dd { margin: 0; font-weight: 600; }
.review-row--total { border-top: var(--line-1) solid var(--rule); margin-top: var(--space-2); padding-top: var(--space-3); }
.review-bank { background: var(--paper-alt); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.review-bank__label { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-1); }
.review-bank__bank { font-weight: 700; margin: 0 0 2px; }
.review-bank__row { font-size: var(--text-md); color: var(--ink-muted); margin: 0; overflow-wrap: anywhere; }

.status-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: var(--line-1) solid var(--rule); margin-bottom: var(--space-3); }
.status-tab {
  padding: var(--space-2) var(--space-4);
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
  border-bottom: var(--line-2) solid transparent;
  margin-bottom: -1px;
}
.status-tab:hover { color: var(--ink); }
.status-tab--active { color: var(--signal-ink); border-bottom-color: var(--signal); }

/* Built from the row's own timestamps — this system has no event table, so the
   line shows only moments it can actually prove. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-4); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: var(--line-2);
  background: var(--rule);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  width: 16px; height: 16px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: var(--line-2) solid var(--rule-strong);
  margin-top: 3px;
  z-index: 1;
}
.timeline__item--done .timeline__dot { background: var(--state-settled); border-color: var(--state-settled); }
.timeline__item--current .timeline__dot { background: var(--signal); border-color: var(--signal); }
.timeline__title { font-weight: 600; margin: 0 0 2px; }
.timeline__meta { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

@media (max-width: 991.98px) {
  .payout-columns { grid-template-columns: minmax(0, 1fr); }
  .payout-facts { margin-left: 0; }
  .payout-fact { padding-left: 0; border-left: 0; border-top: var(--line-1) solid var(--rule); padding-top: var(--space-2); flex: 1 1 40%; }
  .payout-alert .btn { margin-left: 0; width: 100%; }
}

@media (max-width: 575.98px) {
  .payout-summary__value { font-size: var(--text-3xl); }
  .quick-amount { flex: 1 1 40%; }
  .status-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .status-tab { white-space: nowrap; }
}

/* ============================================================
   AGENT DASHBOARD (Phase 50)
   Money first, then what needs doing, then what to sell today, then how it is
   going. The hero strip is one card with three cells rather than three cards,
   so the eye reads it as one statement about the agent's money.
   ============================================================ */

/* The greeting band, with the growth artwork lifted from the reference. The
   art is pinned behind the money cards, so they crop it exactly as the
   reference does. */
.page-hero--dashboard {
  --hero-art-w: 360px;
  z-index: 0;
  padding-bottom: calc(var(--space-7) + var(--space-5));
  background:
    radial-gradient(220px 150px at 76% 40%, rgba(253, 163, 140, .26), rgba(253, 163, 140, 0) 72%),
    var(--hero-band);
}
.page-header__title--greet { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xl); letter-spacing: -.022em; }
.greet-wave { width: 31px; height: auto; flex: 0 0 auto; }

/* Three money figures, one card each. White lettering here sits on colours
   measured at 4.7:1 or better — the brand orange itself is 2.53:1 and still
   never carries white (the Ink-On-Action rule); these are deeper steps of the
   same hues, declared once as tokens. */
.money-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.money-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value" "icon note" "cta cta";
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-content: start;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--on-money);
}
.money-card--payout { background: var(--card-payout); --money-ink: #B23C08; }
.money-card--month { background: var(--card-month); --money-ink: #4338CA; }
.money-card--team { background: var(--card-team); --money-ink: #0A5F58; }
.money-card__icon {
  grid-area: icon;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--on-money);
  color: var(--money-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.money-card__icon .icon { width: 24px; height: 24px; }
.money-card__label { grid-area: label; margin: 0; font-size: var(--text-sm); opacity: .9; }
.money-card__value {
  grid-area: value;
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
}
.money-card__unit { font-size: var(--text-md); font-weight: 600; margin-left: var(--space-2); opacity: .9; }
.money-card__note { grid-area: note; margin: 0; font-size: var(--text-sm); opacity: .85; }
.money-card__cta {
  grid-area: cta;
  justify-self: start;
  margin-top: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-money);
  text-decoration: none;
  border-bottom: var(--line-1) solid rgba(255, 255, 255, .5);
  transition: border-color var(--transition);
}
.money-card__cta:hover { color: var(--on-money); border-bottom-color: var(--on-money); }
.money-card__cta--solid {
  padding: var(--space-2) var(--space-4);
  min-height: var(--control-h);
  border-radius: var(--radius-sm);
  border-bottom: 0;
  background: var(--on-money);
  color: var(--money-ink);
}
.money-card__cta--solid:hover { color: var(--money-ink); box-shadow: var(--shadow-sm); }

/* A trophy in the corner of the summary card, as in the reference. */
.card-header__art { width: 103px; height: auto; margin: calc(var(--space-4) * -1) calc(var(--space-2) * -1) calc(var(--space-3) * -1) auto; pointer-events: none; }

@media (max-width: 991.98px) {
  .money-cards { grid-template-columns: minmax(0, 1fr); }
  .card-header__art { width: 72px; }
}

.hero-strip { margin-bottom: var(--space-4); }
.hero-strip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.hero-cell { padding-left: var(--space-5); border-left: var(--line-1) solid var(--rule); }
.hero-cell:first-child { padding-left: 0; border-left: 0; }
.hero-cell__label { font-size: var(--text-md); color: var(--ink-muted); margin: 0 0 var(--space-1); }
.hero-cell__value {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--space-1);
  color: var(--signal-ink);
  font-variant-numeric: tabular-nums;
}
/* Only the headline figure wears the brand colour (DESIGN_GUIDELINE §9). */
.hero-cell__value--plain { color: var(--ink); }
.hero-cell__unit { font-size: var(--text-lg); font-weight: 600; color: var(--ink-muted); margin-left: var(--space-2); }
.hero-cell__note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.hero-cell__link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); margin-top: var(--space-2); }

.card-header__link { margin-left: auto; font-size: var(--text-sm); font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-1); }
.card-lead { color: var(--ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }

.action-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.action-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), background var(--transition);
}
.action-item:hover { border-color: var(--signal); background: var(--signal-soft); }
.action-item__icon {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--paper-alt);
  color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.action-item__body { flex: 1; min-width: 0; }
.action-item__title { display: block; font-weight: 600; }
.action-item__text { display: block; font-size: var(--text-sm); color: var(--ink-muted); }
.action-item__value { font-weight: 700; color: var(--signal-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.action-item__chevron { color: var(--ink-faint); flex: 0 0 auto; }

.product-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.product-shortcut {
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.product-shortcut__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--signal-soft);
  color: var(--signal-ink);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.product-shortcut__name { font-weight: 600; margin: 0 0 var(--space-3); }
.share-row--compact { flex-direction: column; gap: var(--space-2); }
.share-row--compact .btn { width: 100%; justify-content: center; }

.trend-toggle { margin-left: auto; display: inline-flex; background: var(--paper-alt); border-radius: var(--radius-pill); padding: 3px; }
.trend-toggle__btn {
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}
.trend-toggle__btn--active { background: var(--signal); color: var(--on-signal); }

.figure-list { margin: 0; }
.figure-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--line-1) solid var(--rule); }
.figure-row:last-child { border-bottom: 0; }
.figure-row dt { font-weight: 400; color: var(--ink-muted); margin: 0; }
.figure-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.figure-row--total dd { color: var(--signal-ink); }

@media (max-width: 991.98px) {
  .hero-strip__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .hero-cell { padding-left: 0; border-left: 0; border-top: var(--line-1) solid var(--rule); padding-top: var(--space-3); }
  .hero-cell:first-child { border-top: 0; padding-top: 0; }
}

/* ============================================================
   COMMISSION REPORT — agent (Phase 51)
   ============================================================ */

/* The report opens on the same full-bleed band as the referral page, with its
   own artwork (bars, arrow, coins, report card, leaves — all lifted from the
   design reference) and the soft peach cloud that sits behind it painted here
   as a gradient, because a cloud cannot be cut cleanly off the band it was
   drawn on. */
.page-hero--commission {
  --hero-art-w: 614px;
  padding-bottom: calc(var(--space-6) + var(--space-4));
  background:
    radial-gradient(230px 165px at 78% 44%, rgba(253, 163, 140, .30), rgba(253, 163, 140, 0) 72%),
    var(--hero-band-report);
}

/* The left third of this artwork is sparse (sparkles), so the subtitle may run
   under it without ever touching the bars. */
.page-hero--commission { --hero-text-inset: calc(var(--hero-art-w) - 120px); }

/* Five filters in one row on this page — the report has one more control than
   the lists do, and the reference keeps them all on a single line. */
.filter-bar--dense { padding: var(--space-4); gap: var(--space-4) var(--space-3); }
.filter-bar--dense .filter-bar__field { flex: 1 1 150px; max-width: 320px; }
/* the two buttons take their own row under the fields, as in the reference */
.filter-bar--dense .filter-bar__actions { flex: 0 0 100%; justify-content: flex-end; }

/* Each figure carries its own colour field here (see the note in the section
   header of this file: this is the one row in the system that does, because
   the four figures answer four different questions rather than ranking one
   against another). The tint is a wash under the card, never a status. */
.kpi-grid--tinted .kpi { box-shadow: var(--shadow-sm); }
.kpi-grid--tinted .kpi--accent { background: linear-gradient(180deg, var(--paper) 38%, var(--signal-soft) 100%); }
.kpi-grid--tinted .kpi--tone-running { background: linear-gradient(180deg, var(--paper) 38%, var(--state-running-soft) 100%); }
.kpi-grid--tinted .kpi--tone-violet { background: linear-gradient(180deg, var(--paper) 38%, var(--illus-violet-soft) 100%); }
.kpi-grid--tinted .kpi--tone-settled { background: linear-gradient(180deg, var(--paper) 38%, var(--state-settled-soft) 100%); }
.kpi-grid--tinted .kpi--tone-running .kpi__value { color: var(--state-running); }
.kpi-grid--tinted .kpi--tone-violet .kpi__value { color: var(--illus-violet); }
.kpi-grid--tinted .kpi--tone-settled .kpi__value { color: var(--state-settled); }
/* a zero still reads as nothing, whatever colour its card carries */
.kpi-grid--tinted .kpi .kpi__value--zero { color: var(--ink-faint); }
.kpi__icon--violet { background: var(--illus-violet-soft); color: var(--illus-violet); }
.kpi__icon--brand { background: var(--signal-soft); color: var(--signal); }

/* TEAM — the same band, carrying the team artwork. The "สร้าง Sub-agent"
   button sits over the art exactly as in the reference, so the art is pinned
   behind the header rather than after it. */
.page-hero--team {
  --hero-art-w: 820px;
  padding-bottom: calc(var(--space-7) + var(--space-6) + var(--space-4));
  background:
    radial-gradient(240px 170px at 62% 52%, rgba(253, 172, 148, .22), rgba(253, 172, 148, 0) 72%),
    var(--hero-band-report);
}
.page-hero--team .page-hero__art { top: auto; bottom: 0; z-index: 0; }
.page-hero--team .page-header { position: relative; z-index: 1; margin-bottom: 0; }
.page-hero--team { --hero-text-inset: 0; }
.page-hero--team .page-header__subtitle { max-width: var(--measure-form); }

/* The hand-off illustration under the share bar: two people and the commission
   passing between them, lifted from the reference. The wave they stand on is a
   wash, so it is painted here and re-tints itself in dark mode. */
/* The ledger reads down the money column, so that column is the one figure the
   eye should land on first (rule 1 — brand colour marks focus, not status).
   Rows breathe a little more here than in a plain list. */
.table-card--commission .table > tbody > tr > td { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.table-card--commission .num--money { color: var(--signal-ink); font-weight: 700; }

/* the "what counts as which" hint next to a card title */
.card-header__hint {
  display: inline-flex;
  color: var(--ink-faint);
  cursor: help;
  margin-left: var(--space-1);
  vertical-align: middle;
}
.card-header__hint .icon { width: 16px; height: 16px; }

.source-art {
  position: relative;
  margin: var(--space-5) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
  padding: var(--space-4) var(--space-3) var(--space-2);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.source-art::before {
  content: '';
  position: absolute;
  inset: 30% 0 0;
  background:
    radial-gradient(120% 120% at 18% 140%, var(--state-running-soft), transparent 62%),
    radial-gradient(120% 120% at 80% 130%, var(--signal-soft), transparent 62%);
}
.source-art img { position: relative; width: 100%; max-width: 380px; height: auto; }

/* Two-part share bar. Direct income takes the brand colour because it is the
   agent's own work; team income takes a chart mark, not a status colour — this
   is a proportion, not a state. */
.split-bar { display: flex; height: 34px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-3); }
.split-bar__part {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 700;
  min-width: 0;
  overflow: hidden;
}
.split-bar__part--direct { background: var(--signal); color: var(--on-signal); }
.split-bar__part--team { background: var(--mark-2); color: var(--on-state); }
.split-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.split-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
.split-legend strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.split-legend__dot { width: 12px; height: 12px; border-radius: var(--radius-pill); flex: 0 0 auto; }
.split-legend__dot--direct { background: var(--signal); }
.split-legend__dot--team { background: var(--mark-2); }

/* Donut (partials/chart.php type 'donut') */
.donut { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.donut__svg { width: 180px; height: 180px; flex: 0 0 auto; }
.donut__track { stroke: var(--paper-sunken); }
.donut__slice--1 { stroke: var(--mark-1); }
.donut__slice--2 { stroke: var(--mark-2); }
.donut__slice--3 { stroke: var(--mark-3); }
.donut__slice--4 { stroke: var(--mark-4); }
.donut__slice--5 { stroke: var(--mark-5); }
.donut__total-label { fill: var(--ink-muted); font-size: 10px; }
.donut__total { fill: var(--ink); font-size: 15px; font-weight: 700; }
.donut__legend { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; min-width: 0; display: grid; gap: var(--space-2); }
.donut__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
.donut__swatch { width: 12px; height: 12px; border-radius: var(--radius-pill); flex: 0 0 auto; }
.donut__swatch--1 { background: var(--mark-1); }
.donut__swatch--2 { background: var(--mark-2); }
.donut__swatch--3 { background: var(--mark-3); }
.donut__swatch--4 { background: var(--mark-4); }
.donut__swatch--5 { background: var(--mark-5); }
.donut__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut__value { margin-left: auto; font-variant-numeric: tabular-nums; }
.donut__share { color: var(--ink-muted); width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }

/* Product label in a dense table. Neutral by design: a product is not a state,
   and colouring by name would need a new rule for every category added. */
.product-badge {
  display: inline-block;
  background: var(--paper-alt);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.source-chip { display: inline-block; border-radius: var(--radius-pill); padding: 2px var(--space-3); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.source-chip--direct { background: var(--signal-soft); color: var(--signal-ink); }
.source-chip--team { background: var(--state-running-soft); color: var(--state-running); }
.section-heading__meta { margin-left: auto; font-size: var(--text-sm); color: var(--ink-muted); }
.filter-bar__field--wide { flex: 2 1 260px; }
.mono { font-family: var(--font-mono); font-size: var(--text-sm); }

@media (max-width: 575.98px) {
  .donut { justify-content: center; }
}

/* ============================================================
   PROFILE & SETTINGS (Phase 52)
   ============================================================ */

.profile-summary { margin-bottom: var(--space-4); }
.profile-summary__grid { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.profile-summary__lead { display: flex; gap: var(--space-3); flex: 1 1 300px; min-width: 0; }
.profile-summary__icon {
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--signal-soft);
  color: var(--signal-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.profile-summary__label { font-size: var(--text-md); color: var(--ink-muted); margin: 0; }
.profile-summary__value { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-2); }
.profile-summary__note { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-2) 0 0; }
.profile-summary__hint {
  flex: 1 1 240px;
  background: var(--state-attention-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
.progress-track { height: 8px; border-radius: var(--radius-pill); background: var(--paper-sunken); overflow: hidden; max-width: 320px; }
.progress-track__fill { display: block; height: 100%; background: var(--signal); border-radius: var(--radius-pill); }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); flex: 1 1 260px; }
.check-item { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-md); color: var(--ink-muted); }
.check-item svg { color: var(--state-attention); flex: 0 0 auto; }
.check-item--done { color: var(--ink); }
.check-item--done svg { color: var(--state-settled); }

.profile-panel[hidden] { display: none; }
.profile-panel { margin-top: var(--space-3); }

.avatar-row { display: flex; gap: var(--space-4); align-items: center; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: var(--line-1) solid var(--rule); }
.avatar-row__image {
  width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--paper-alt);
  border: var(--line-1) solid var(--rule);
  color: var(--ink-faint);
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar-row__image img { width: 100%; height: 100%; object-fit: cover; }
.avatar-row__image svg { width: 44px; height: 44px; }
.avatar-row__name { font-size: var(--text-xl); font-weight: 700; margin: 0 0 2px; }
.avatar-row__meta { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-2); }
.avatar-row__form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.avatar-row__hint { font-size: var(--text-sm); color: var(--ink-muted); }

.form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--line-1) solid var(--rule); }

.why-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.why-list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-muted); }
.why-list svg { color: var(--state-settled); flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }

.password-rules { background: var(--paper-alt); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.password-rules__title { font-weight: 600; margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.password-rules__title svg { color: var(--signal-ink); }
.password-rules ul { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--ink-muted); }

.page-note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-muted); }
.page-note svg { color: var(--signal-ink); flex: 0 0 auto; }
.measure-form { max-width: var(--measure-form); }
.measure-panel { max-width: var(--measure-panel); }

@media (max-width: 767.98px) {
  .avatar-row { flex-direction: column; align-items: flex-start; }
  .form-actions .btn { width: 100%; }
}

/* ============================================================
   TEAM & CREATE SUB-AGENT (Phase 53)
   ============================================================ */

.person { display: flex; align-items: center; gap: var(--space-3); }
.person__avatar {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--signal-soft);
  color: var(--signal-ink);
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.person__name { font-weight: 600; }
.person__meta { font-size: var(--text-sm); color: var(--ink-muted); }
.badge-chip--muted { background: var(--paper-sunken); color: var(--ink-muted); }
.rate-line { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--text-sm); }
.rate-line__name { color: var(--ink-muted); }
.rate-line__value { font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.row-actions { display: inline-flex; gap: var(--space-2); justify-content: flex-end; }

/* A map of what the single form asks for — not a wizard; the form submits once. */
.step-strip { list-style: none; display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--paper); border: var(--line-1) solid var(--rule); border-radius: var(--radius-md); flex-wrap: wrap; }
.step-strip__item { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-weight: 500; flex: 1 1 auto; }
.step-strip__item:not(:last-child)::after { content: ''; flex: 1; height: var(--line-1); background: var(--rule); margin-left: var(--space-3); }
.step-strip__num { width: 28px; height: 28px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--paper-alt); color: var(--ink-muted); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.step-strip__item--active { color: var(--ink); }
.step-strip__item--active .step-strip__num { background: var(--signal); color: var(--on-signal); }

.create-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.85fr); gap: var(--space-3); align-items: start; }
.card-header__step { width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--signal-soft); color: var(--signal-ink); font-size: var(--text-sm); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-right: var(--space-2); }
.create-summary { background: var(--paper-alt); }
.inline-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-3) 0 0; }
.inline-note svg { color: var(--signal-ink); flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }

.rate-hold { background: var(--signal-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.rate-hold__label { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.rate-hold__value { font-size: var(--text-3xl); font-weight: 700; color: var(--signal-ink); margin: 0; font-variant-numeric: tabular-nums; }
.rate-hold__note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

.allocation { border-top: var(--line-1) solid var(--rule); padding-top: var(--space-3); }
.allocation__figures { display: flex; gap: var(--space-4); margin-bottom: var(--space-2); }
.allocation__figures > div { flex: 1 1 0; min-width: 0; }
.allocation__label { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.allocation__value { font-size: var(--text-2xl); font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.allocation__value--mine { color: var(--signal-ink); }
.allocation__bar { display: flex; height: 28px; border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-sunken); }
.allocation__part { display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 700; overflow: hidden; }
.allocation__part--mine { background: var(--signal); color: var(--on-signal); }
.allocation__part--child { background: var(--paper-sunken); color: var(--ink); }
.allocation__legend { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-1); }
.allocation__note { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-2) 0 0; line-height: 1.7; }
.form-actions--split { justify-content: space-between; }

@media (max-width: 1199.98px) {
  .create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .create-grid { grid-template-columns: minmax(0, 1fr); }
  .step-strip__item:not(:last-child)::after { display: none; }
  .row-actions { flex-wrap: wrap; }
}

/* --- Artwork sits FLUSH, not blended ---------------------------------
   Earlier these crops used `mix-blend-mode: multiply` to melt into the panel.
   That only works over pure white: multiplying the cream ground by itself
   darkens it (242 x 242 / 255 = 230 on the blue channel), which is exactly the
   visible rectangle that showed up around the hero image on the deployed site.
   The panel is already the crop's own sampled ground colour, so no blending is
   needed at all — remove it and the seam disappears. */
.site-hero__media img,
.site-product__media img,
.auth-canvas__art { mix-blend-mode: normal; }

/* ============================================================
   AUTH — one viewport on desktop (Phase 63)
   Both signed-out pages share this block; nothing below is page-specific, so
   login and forgot-password cannot drift apart. The rule is simple: on a
   desktop-width screen the split is exactly the viewport tall and never
   scrolls — the ARTWORK gives up height first (object-fit keeps its aspect
   ratio), then the spacing steps down at shorter heights. Copy is never cut.
   ============================================================ */

@media (min-width: 992px) {
  .auth-split { height: 100dvh; min-height: 100dvh; overflow: hidden; }

  /* Each column owns its own height, so the form stays optically centred no
     matter how tall the canvas content is. */
  .auth-canvas,
  .auth-panel { height: 100dvh; min-height: 0; }

  .auth-canvas__body { min-height: 0; overflow: hidden; padding-bottom: 0; }
  .auth-canvas__keel { flex: 0 0 auto; }

  /* The one flexible element: it absorbs whatever height is left and scales
     inside that box instead of being cropped or stretched. */
  .auth-canvas__art {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom right;
    align-self: flex-end;
    margin-top: var(--space-3);
  }

  .auth-panel { display: flex; flex-direction: column; }
  .auth-panel__body { flex: 1 1 auto; min-height: 0; justify-content: center; padding-block: var(--space-3); }
  .auth-panel__legal { flex: 0 0 auto; }
}

/* Short laptops (1366x768 and anything under ~820px tall): tighten the type
   scale and the gaps rather than dropping any of the content. */
@media (min-width: 992px) and (max-height: 860px) {
  .auth-canvas__body { padding: var(--space-4) var(--space-5) 0; }
  .auth-canvas__brand img { height: 38px; margin-bottom: var(--space-3); }
  .auth-canvas__title { font-size: clamp(1.5rem, .9rem + 1.6vw, 2.25rem); margin-bottom: var(--space-2); }
  .auth-canvas__lead { margin-bottom: var(--space-3); line-height: 1.7; }
  .auth-points { gap: var(--space-1); }
  .auth-points li { padding-bottom: var(--space-2); gap: var(--space-2); }
  .auth-points__icon { width: 40px; height: 40px; }
  .auth-canvas__keel { padding: var(--space-3) var(--space-5); gap: var(--space-4); }
  .auth-card { padding: var(--space-5); }
  .auth-card__brand { margin-bottom: var(--space-3); }
  .auth-card__brand img { height: 40px; }
  .auth-card__lead { margin-bottom: var(--space-4); }
  .auth-field { margin-bottom: var(--space-3); }
  .auth-panel { padding: var(--space-3) var(--space-5); }
}

@media (min-width: 992px) and (max-height: 720px) {
  .auth-canvas__lead { display: none; }   /* the three points below say the same thing */
  .auth-points li:last-child { padding-bottom: 0; }
  .auth-keel-item__note { display: none; }
  .auth-card { padding: var(--space-4); }
  .auth-submit { height: 44px; font-size: var(--text-md); }
}

/* Forgot password keeps everything in ONE card — the helper note is part of it,
   not a second panel that pushes the page past the fold. */
.auth-hint {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--line-1) solid var(--rule);
}
.auth-hint__icon { color: var(--signal-ink); flex: 0 0 auto; }
.auth-hint__text { margin: 0; font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.7; }
.auth-hint__text strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* The trust strip stays ONE row on desktop — three equal cells rather than a
   wrapping flex line, which is what pushed it to two rows (and ate the
   artwork's height) at 1366x768. */
@media (min-width: 992px) {
  .auth-canvas__keel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .auth-keel-item { min-width: 0; }
  .auth-keel-item__title { font-size: var(--text-sm); }
  .auth-keel-item__note { font-size: var(--text-xs); line-height: 1.5; }
}
@media (min-width: 992px) and (max-height: 820px) {
  .auth-keel-item__note { display: none; }   /* the label alone still reads */
  .auth-canvas__keel { padding-block: var(--space-3); }
}

/* ============================================================
   CUSTOMER LANDING — /apply/{token} (Phase 55)

   The public face of one agent's referral link, in three interchangeable
   presentations (config/landing-themes.php). Everything a theme controls
   arrives as two custom properties set inline on .landing, plus a photo and a
   copy deck: no theme gets its own stylesheet, and none of them can reach the
   form inside the card — that markup is shared and identical everywhere.

   Layout follows the reference: a full-height photo panel carrying the pitch
   on the left, the application card floating over its right edge. Below 992px
   the photo becomes a banner and the card takes the full width, because this
   link is opened from LINE on a phone far more often than on a desktop.
   ============================================================ */

.landing {
  --landing-ground: var(--sheet);
  --landing-ink: var(--ink);
  --landing-ink-muted: var(--ink-muted);
  position: relative;
  min-height: 100vh;
  background: var(--landing-ground);
}
/* the storm-sky theme puts light copy on the photo instead of dark */
.landing--ink-light {
  --landing-ink: #FFFFFF;
  --landing-ink-muted: rgba(255, 255, 255, .84);
}

.landing__grid {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: stretch;
  min-height: 100vh;
}

/* --- the photo panel ------------------------------------------------- */
/* The photo holds the first screen while the form scrolls beside it — the
   reference is a one-screen composition and the form under it is long. */
.landing-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  min-width: 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  color: var(--landing-ink);
}
/* the photo runs past its own column so the card lands on top of it, the way
   the reference floats the card over the picture instead of beside it */
/* the <picture> wrapper must leave the flow too, or it becomes a flex item
   and squeezes the copy column next to it */
.landing-panel > picture { position: absolute; inset: 0; z-index: 0; display: block; }
.landing-panel__photo {
  position: absolute;
  inset: 0 -110px 0 0;
  width: calc(100% + 110px);
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}
.landing-panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 -110px 0 auto;
  width: 190px;
  background: linear-gradient(90deg, rgba(244, 246, 248, 0) 0%, var(--landing-ground) 92%);
}
/* brand at the top, the privacy pill at the bottom, the pitch between — the
   reference spreads the panel over its whole height rather than centring it */
/* The reference lays a scrim under its copy so the photo cannot fight it.
   Direction is the same on all three; only the colour follows the theme's ink. */
.landing-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.landing--ink-dark .landing-panel::before {
  background: linear-gradient(102deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .44) 46%, rgba(255, 255, 255, 0) 74%);
}
.landing--ink-light .landing-panel::before {
  background: linear-gradient(102deg, rgba(18, 24, 34, .76) 0%, rgba(18, 24, 34, .48) 46%, rgba(18, 24, 34, 0) 76%);
}

.landing-panel__inner {
  position: relative;
  z-index: 2;
  max-width: 30rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.landing-brand { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.landing-brand__logo { width: 40px; height: 40px; object-fit: contain; }
.landing-brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.landing-brand__text strong { font-size: var(--text-lg); font-weight: 700; }
.landing-brand__text span { font-size: var(--text-sm); color: var(--landing-ink-muted); }

.landing-headline {
  margin: 0 0 var(--space-4);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.028em;
}
.landing-headline__line { display: block; }
.landing-headline__line--accent { color: var(--landing-accent); }

.landing-sub {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--landing-ink-muted);
  max-width: 26rem;
}

.landing-benefits { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.landing-benefits--row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.landing-benefits--row { gap: var(--space-4); flex-wrap: nowrap; }
.landing-benefits--row .landing-benefit { flex: 1 1 0; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-2); }
.landing-benefits--list { display: grid; gap: var(--space-4); }
.landing-benefit { display: flex; gap: var(--space-3); align-items: flex-start; }
.landing-benefit__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  color: var(--landing-accent);
  box-shadow: var(--shadow-sm);
}
.landing-benefit__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.landing-benefit__title { font-weight: 600; line-height: 1.45; }
.landing-benefit__text { font-size: var(--text-sm); color: var(--landing-ink-muted); line-height: 1.6; }

.landing-note {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: auto 0 0;              /* pinned to the foot of the panel */
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(23, 25, 31, .84);
  color: #FFFFFF;
  max-width: 24rem;
}
.landing-note strong { display: block; font-size: var(--text-md); font-weight: 600; }
.landing-note span span { font-size: var(--text-sm); color: rgba(255, 255, 255, .78); }
.landing-note__icon { flex: 0 0 auto; display: inline-flex; }

/* --- the application card --------------------------------------------- */
.landing-form {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-5) var(--space-6);
  min-width: 0;
}
.landing-form__card {
  width: 100%;
  max-width: 46rem;
  background: var(--paper);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.landing-form__head { padding: var(--space-5) var(--space-5) 0; text-align: center; }
.landing-form__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--landing-cta);
  color: #FFFFFF;
}
.landing-form__mark .icon { width: 26px; height: 26px; }
.landing-form__title { font-size: var(--text-2xl); font-weight: 700; margin: 0; letter-spacing: -.022em; }
.landing-form__lead { margin: var(--space-2) 0 var(--space-5); font-size: var(--text-md); color: var(--ink-muted); }
.landing-form__body { padding: 0 var(--space-5) var(--space-4); }
.landing-form__legal {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: center;
}
.landing-form__legal .icon { width: 14px; height: 14px; vertical-align: -2px; }

/* The card's primary buttons take the theme colour; everything else on the
   page keeps the system's. All three CTA values measure 4.7:1 or better
   against white, so the white lettering on them still clears AA. */
.landing-form .btn-primary {
  --bs-btn-bg: var(--landing-cta);
  --bs-btn-border-color: var(--landing-cta);
  --bs-btn-hover-bg: var(--landing-cta);
  --bs-btn-hover-border-color: var(--landing-cta);
  background: var(--landing-cta);
  border-color: var(--landing-cta);
  color: #FFFFFF;
}
.landing-form .btn-primary:hover { filter: brightness(1.08); color: #FFFFFF; }
.landing-form .stepper__item.is-active .stepper__dot {
  background: var(--landing-cta);
  border-color: var(--landing-cta);
  color: #FFFFFF;
}
.landing-form .stepper__item.is-active::before { background: var(--landing-cta); }

.landing-preview {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-sm);
  text-align: center;
}
.landing-preview .icon { width: 16px; height: 16px; vertical-align: -3px; }

/* --- opened from LINE on a phone: the photo becomes a banner ---------- */
@media (max-width: 991.98px) {
  .landing__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .landing-panel {
    position: static;
    height: auto;
    min-height: 0;
    padding: var(--space-5) var(--space-4);
    align-items: flex-end;
  }
  .landing-panel__photo { inset: 0; width: 100%; object-position: center 62%; }
  /* the vertical scrim below does the contrast work here — keeping the desktop
     side-wash as well would leave nothing of the photo to see */
  .landing-panel::before { background: none; }
  .landing-panel::after {
    inset: auto 0 0 0;
    width: auto;
    height: 62%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--landing-scrim, rgba(252, 253, 254, .94)) 74%);
  }
  .landing--ink-light { --landing-scrim: rgba(17, 22, 30, .88); }
  .landing-panel__inner { max-width: none; }
  .landing-brand { margin-bottom: var(--space-5); }
  .landing-headline { font-size: 1.625rem; }
  .landing-sub { font-size: var(--text-md); margin-bottom: var(--space-4); max-width: none; }
  .landing-benefits { margin-bottom: var(--space-4); }
  .landing-benefits--list { gap: var(--space-3); }
  .landing-benefit__icon { width: 38px; height: 38px; }
  .landing-note { max-width: none; margin-top: 0; }
  .landing-form { padding: var(--space-4) var(--space-3) var(--space-6); }
  .landing-form__card { max-width: none; }
}

@media (max-width: 575.98px) {
  .landing-panel { padding: var(--space-4) var(--space-3); }
  .landing-headline { font-size: 1.4375rem; }
  .landing-benefits--row { gap: var(--space-3); }
  .landing-benefits--row .landing-benefit { flex: 1 1 6.5rem; max-width: none; }
  .landing-form__head,
  .landing-form__body,
  .landing-form__legal { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* --- landing-theme picker (links page) -------------------------------
   Three presentations of one link. Picking one only rewrites the customer
   URL's query string, which every share button already reads at click time. */
.theme-picker {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: var(--line-1) solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-alt);
}
.theme-picker__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.theme-picker__title { font-size: var(--text-md); font-weight: 600; }
.theme-picker__preview {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.theme-picker__options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.theme-chip {
  position: relative;
  flex: 1 1 9rem;
  min-width: 0;
  padding: var(--space-2);
  border: var(--line-2) solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.theme-chip:hover { border-color: var(--rule-strong); }
.theme-chip.is-active { border-color: var(--signal); box-shadow: var(--shadow-sm); }
.theme-chip input { position: absolute; opacity: 0; pointer-events: none; }
.theme-chip__thumb {
  display: block;
  width: 100%;
  height: 68px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
}
.theme-chip__thumb--default {
  display: flex; align-items: center; justify-content: center;
  background: var(--signal-soft);
  color: var(--signal-ink);
}
.theme-chip__name { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.theme-chip__blurb { display: block; font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.5; }

@media (max-width: 575.98px) {
  .theme-chip { flex: 1 1 7rem; }
  .theme-chip__thumb { height: 52px; }
  .theme-chip__blurb { display: none; }
}

/* ============================================================
   AGENT ONBOARDING TOUR (Phase 56)

   A layer over the real dashboard: the page behind it keeps its layout, its
   data and its scroll position, and the tour only dims it and cuts a hole
   over whatever the current step is about. Nothing in this block styles a
   dashboard element — if every rule here were deleted the app would look
   exactly as it did before the tour existed.

   The tour's own violet is deliberately NOT the brand orange: it has to read
   as "the system is talking to you", not as a pressable thing in the product.
   ============================================================ */

.ob {
  --ob-violet: #6D3BE4;
  --ob-violet-deep: #4C1FB8;
  --ob-surface: var(--paper);
  --ob-ink: var(--ink);
  --ob-ink-muted: var(--ink-muted);
  position: fixed;
  inset: 0;
  z-index: 1080;
  pointer-events: none;
}
body.ob-locked { overflow: hidden; }

.ob__scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 21, 30, .74);
  pointer-events: auto;
}

/* the hole: one element the size of the target, with the dim painted around
   it by a very large spread instead of four separate cover elements */
.ob__spotlight {
  position: fixed;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(18, 21, 30, .74), 0 0 0 3px rgba(140, 105, 255, .9);
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
  pointer-events: none;
}
.ob__spotlight:not([hidden]) ~ .ob__scrim,
.ob:has(.ob__spotlight:not([hidden])) .ob__scrim { opacity: 0; }
.ob-target { position: relative; z-index: 1081; }

.ob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--transition), box-shadow var(--transition);
}
.ob-btn--primary { background: linear-gradient(135deg, var(--ob-violet) 0%, var(--ob-violet-deep) 100%); color: #FFFFFF; }
.ob-btn--primary:hover { color: #FFFFFF; filter: brightness(1.08); }
.ob-btn--ghost { background: transparent; color: var(--ob-ink-muted); }
.ob-btn--sm { min-height: 34px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.ob-btn--block { display: flex; width: 100%; border-radius: var(--radius-sm); background: var(--paper-alt); color: var(--ob-ink); }
.ob-btn--block:hover { background: var(--paper-sunken); color: var(--ob-ink); }
.ob-btn .icon { width: 18px; height: 18px; }
.ob-link {
  border: 0; background: none; padding: 0;
  color: var(--ob-ink-muted); font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer;
}
.ob-link:hover { color: var(--ob-ink); }

.ob-dots { display: inline-flex; gap: 6px; align-items: center; }
.ob-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--rule-strong); }
.ob-dot.is-done { background: rgba(109, 59, 228, .45); }
.ob-dot.is-active { width: 26px; background: var(--ob-violet); }

/* ---------------------------------------------------- the welcome modal */
.ob-modal {
  position: absolute;
  top: 50%;
  /* nudged right of centre so it clears the checklist panel, which the
     reference also keeps to its left without overlapping */
  left: calc(50% + 62px);
  transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - var(--space-5) * 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 238px;
  grid-template-areas: "copy art" "foot foot";
  background: var(--ob-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px -12px rgba(12, 14, 22, .55);
  overflow: hidden;
  pointer-events: auto;
}
.ob-modal__copy { grid-area: copy; padding: var(--space-5) var(--space-4) var(--space-4) var(--space-5); }
.ob-modal__eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 600; color: var(--ob-violet); }
.ob-modal__title { margin: 0 0 var(--space-3); font-size: 1.75rem; font-weight: 700; line-height: 1.3; letter-spacing: -.026em; }
.ob-modal__text { margin: 0 0 var(--space-4); font-size: var(--text-md); line-height: 1.85; color: var(--ob-ink-muted); }

.ob-features { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); }
.ob-feature { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); flex: 1 1 0; min-width: 0; }
.ob-feature__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  color: var(--ob-violet);
  box-shadow: var(--shadow-xs);
}
.ob-feature__label { font-size: var(--text-xs); color: var(--ob-ink-muted); text-align: center; }

/* the character sits on the same lavender panel the reference gives him */
.ob-modal__art {
  grid-area: art;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(160deg, #F6F3FE 0%, #EFE9FD 100%);
}
.ob-modal__art img { display: block; width: 100%; max-width: 238px; height: auto; }

.ob-modal__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--ob-surface);
}
.ob-modal__count { font-size: var(--text-sm); font-weight: 600; color: var(--ob-ink-muted); }
.ob-modal__foot .ob-btn { margin-left: auto; }
.ob-modal__close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .8);
  color: var(--ob-ink-muted);
  cursor: pointer;
  z-index: 1;
}
.ob-modal__close:hover { background: #FFFFFF; color: var(--ob-ink); }

/* ------------------------------------------------ the walkthrough card */
.ob-step {
  position: fixed;
  width: 320px;
  padding: var(--space-4);
  background: var(--ob-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px -12px rgba(12, 14, 22, .5);
  pointer-events: auto;
}
.ob-step--default { top: var(--space-5); right: var(--space-5); left: auto; }
.ob-step__head { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.ob-step__num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--ob-violet);
  color: #FFFFFF;
  font-size: var(--text-sm);
  font-weight: 700;
}
.ob-step__title { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.4; }
.ob-step__text { margin: 0 0 var(--space-3); font-size: var(--text-md); line-height: 1.7; color: var(--ob-ink-muted); }
.ob-step__foot { display: flex; align-items: center; gap: var(--space-3); }
.ob-step__count { margin-left: auto; font-size: var(--text-sm); color: var(--ob-ink-muted); }

/* ------------------------------------------------- getting-started panel */
.ob-panel {
  position: absolute;
  /* clear of the sidebar, like the reference — the rail is 216px at this width */
  left: 236px;
  top: 50%;
  transform: translateY(-50%);
  width: 246px;
  max-height: calc(100vh - var(--space-6) * 2);
  overflow: auto;
  padding: var(--space-4);
  background: var(--ob-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px -12px rgba(12, 14, 22, .5);
  pointer-events: auto;
}
.ob-panel__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.ob-panel__title { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.ob-panel__close {
  margin-left: auto; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ob-ink-muted); cursor: pointer;
}
.ob-panel__close:hover { background: var(--paper-alt); color: var(--ob-ink); }

.ob-check { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 2px; }
.ob-check__item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.ob-check__item.is-current { background: #F3EFFE; }
.ob-check__num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--paper-alt);
  color: var(--ob-ink-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.ob-check__item.is-current .ob-check__num { background: var(--ob-violet); color: #FFFFFF; }
.ob-check__item.is-done .ob-check__num { background: var(--state-settled-soft); color: var(--state-settled); }
.ob-check__item.is-done .ob-check__num .icon { width: 15px; height: 15px; }
.ob-check__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ob-check__title { font-size: var(--text-md); font-weight: 600; }
.ob-check__item.is-done .ob-check__title { color: var(--ob-ink-muted); text-decoration: line-through; }
.ob-check__text { font-size: var(--text-xs); color: var(--ob-ink-muted); line-height: 1.5; }

.ob-panel__progress { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.ob-progress { height: 6px; border-radius: var(--radius-pill); background: var(--paper-sunken); overflow: hidden; margin-bottom: var(--space-3); }
.ob-progress__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ob-violet), #9A7BF5); }

.ob-reward {
  display: flex; gap: var(--space-2); align-items: center;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: linear-gradient(120deg, #FBF4E8 0%, #F5EDFD 100%);
  font-size: var(--text-sm);
}
.ob-reward strong { display: block; font-weight: 600; }
.ob-reward span span { color: var(--ob-ink-muted); font-size: var(--text-xs); }
.ob-reward__icon { color: #C9962C; display: inline-flex; }

/* ---------------------------------------------------- bottom shortcuts */
.ob-shortcuts {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  width: min(660px, calc(100vw - var(--space-5) * 2));
  text-align: center;
  pointer-events: auto;
}
.ob-shortcuts__label { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.ob-shortcuts__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: var(--space-4); }
.ob-shortcuts__list > li { flex: 1 1 0; min-width: 0; }
.ob-shortcut { display: block; text-decoration: none; color: #FFFFFF; }
.ob-shortcut__disc {
  position: relative;
  width: 60px; height: 60px;
  margin: 0 auto var(--space-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 12px 30px -8px rgba(0, 0, 0, .55);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ob-shortcut:hover .ob-shortcut__disc { transform: translateY(-3px); box-shadow: 0 0 0 8px rgba(255, 255, 255, .22), 0 16px 34px -8px rgba(0, 0, 0, .6); }
.ob-shortcut__disc .icon { width: 26px; height: 26px; }
.ob-shortcut--teal .ob-shortcut__disc { color: #10A37F; }
.ob-shortcut--amber .ob-shortcut__disc { color: #E9640C; }
.ob-shortcut--violet .ob-shortcut__disc { color: #7C3FE6; }
.ob-shortcut--blue .ob-shortcut__disc { color: #2563EB; }
.ob-shortcut--indigo .ob-shortcut__disc { color: #4338CA; }
/* the pointing hand from the reference, resting on the lower right of each disc */
.ob-shortcut__hand { position: absolute; right: -8px; bottom: -12px; width: 34px; height: auto; pointer-events: none; }
.ob-shortcut__title { display: block; font-size: var(--text-md); font-weight: 600; color: #FFFFFF; }
.ob-shortcut__text { display: block; margin-top: 2px; font-size: var(--text-xs); line-height: 1.5; color: rgba(255, 255, 255, .74); }

/* ------------------------------------------------------- support card */
.ob-support {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 320px;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--ob-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px -12px rgba(12, 14, 22, .5);
  pointer-events: auto;
}
.ob-support__body { flex: 1 1 auto; min-width: 0; }
.ob-support__title { margin: 0; font-size: var(--text-md); font-weight: 700; }
.ob-support__text { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--ob-ink-muted); }
.ob-support__art { width: 84px; height: auto; flex: 0 0 auto; }
.ob-support__close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ob-ink-muted); cursor: pointer;
}
.ob-support__close:hover { background: var(--paper-alt); }

/* --------------------------------------------------------- tablet ---- */
@media (max-width: 1199.98px) {
  .ob-panel { left: var(--space-3); width: 260px; }
  .ob-shortcuts { width: calc(100vw - var(--space-4) * 2); }
  .ob-shortcuts__list { gap: var(--space-2); }
  .ob-shortcut__text { display: none; }
  .ob-support { width: 280px; }
}

/* On a phone the tour stops trying to be a composition and becomes what it
   actually is there: one card at a time, with the step it is describing lit
   behind it. Everything that cannot earn its space steps aside. */
@media (max-width: 991.98px) {
  .ob-modal {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 120px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .ob-modal__copy { padding: var(--space-4) var(--space-2) var(--space-3) var(--space-4); }
  .ob-modal__title { font-size: 1.375rem; }
  .ob-modal__text { margin-bottom: var(--space-3); }
  .ob-modal__art { align-items: flex-end; }
  .ob-modal__foot { padding: var(--space-3) var(--space-4) var(--space-4); }
  .ob-feature__icon { width: 38px; height: 38px; }

  .ob-step {
    position: fixed !important;
    left: var(--space-3) !important;
    right: var(--space-3);
    top: auto !important;
    bottom: var(--space-3);
    width: auto;
  }
  .ob-panel,
  .ob-shortcuts,
  .ob-support { display: none; }
}

@media (max-width: 575.98px) {
  .ob-modal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art" "foot"; }
  .ob-modal__art { height: 190px; align-items: flex-end; }
  .ob-modal__art img { max-width: 172px; }
  .ob-features { gap: var(--space-2); }
  .ob-feature__label { font-size: 10px; }
}

/* ----------------------------------------------------------- dark ---- */
:root[data-theme="dark"] .ob {
  --ob-surface: #1E2330;
  --ob-ink: #E7EAF0;
  --ob-ink-muted: #9AA4B6;
}
:root[data-theme="dark"] .ob-check__item.is-current { background: rgba(109, 59, 228, .18); }
:root[data-theme="dark"] .ob-modal__close { background: rgba(30, 35, 48, .8); }
:root[data-theme="dark"] .ob-modal__close:hover { background: #2A3040; }
:root[data-theme="dark"] .ob-reward { background: linear-gradient(120deg, rgba(201, 150, 44, .18) 0%, rgba(124, 63, 230, .18) 100%); }
/* the artwork keeps its own colours in both themes — only its panel changes */
:root[data-theme="dark"] .ob-modal__art { background: linear-gradient(160deg, #2A2440 0%, #221E36 100%); }

/* the dotted connector layer sits above the scrim but below every card */
.ob__arrow { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* stacking inside the tour: arrow < panel/shortcuts/support < step card < modal */
.ob-panel, .ob-shortcuts, .ob-support { z-index: 2; }
.ob-step { z-index: 3; }
.ob-modal { z-index: 4; }