/* V2 stylesheet manifest (UX1, 2026-10-02). Pages link this file; the build
   (scripts/build-v2-release.mjs) inlines the imports below into one hashed file.
   Order matters: later files win at equal specificity, so each wave-2 lane edits
   only its own partial, which loads after the shared rules. */
/* base.css */
/* Keune portal base (UX1, 2026-10-02): the one shared stylesheet.
   Loaded by every surface: V2 (through styles.css), the sign-in page, the privacy
   notice, Sales Upload (through styles.css) and the function-rendered pages (the
   build writes /portal-pages.css from this file plus css/invitation.css).
   Documented in docs/DESIGN-BASELINE.md, sections 2 and 8.

   Order: fonts, tokens, base, shell, components, accessibility.

   Breakpoints (max-width unless stated): 380px small phone, 430px phone,
   700px single column, 900px tablet and phone (bottom bar, 64px header),
   901px-1150px compact desktop. Use only these.

   Gutter: one value per breakpoint, shared by the header, the page, the footer
   and full-bleed bands: 48px above 900px, 20px at 900px and below, 16px at 380px
   and below. Widths come from the containing block (100%), never from 100vw,
   which includes a desktop scrollbar. */

@font-face { font-family: Acumin; src: url("/fonts/licensed/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Acumin; src: url("/fonts/licensed/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Acumin; src: url("/fonts/licensed/archivo-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Octave; src: url("/fonts/licensed/octave-display-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; unicode-range: U+0000-017F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: Octave; src: url("/fonts/licensed/octave-display-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; unicode-range: U+0000-017F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light;
  --backdrop-shade: rgb(0 0 0 / 45%);
  --on-clay: #151515; --shadow-tool: 0 10px 20px rgb(0 0 0 / 10%);
  --photo-text: #fff; --photo-shade: 0 0 0; --selector-paper: rgb(255 255 255 / 94%);
  --planner-sales: #e6d6ca; --planner-family: #7d5e4d; --planner-family-ink: #fff; --planner-shift: #e2d9cb;
  --pale-clay: #eadfd8; --light-gray: #8a8782; --pending-border: #cdbd9d; --attention-border: #d7aaa2;
  /* Palette (DESIGN-BASELINE section 2). */
  --ink: #151515; --paper: #fff; --dune: #f3f0e9; --clay: #c8a28d; --muted: #5e5b56; --rule: #d8d5cf;
  --rule-strong: #c8c3b9;
  /* Form field boundary: 3.96:1 on paper, 3.48:1 on dune (WCAG 1.4.11 needs 3:1). */
  --field-border: #857f77;
  /* Status tones. Text in these tones is at least 4.5:1 on paper and dune, and
     icons at least 3:1; the tints are the matching chip and notice backgrounds. */
  --ok: #2f6b3a; --ok-tint: #e7efe5;
  --warn: #6f531b; --warn-tint: #f5ecd8;
  --error: #8b2d22; --error-tint: #f6e4e0;
  --info: #2d5a7b; --info-tint: #e3ecf2;

  /* Type. Nothing below --text-xs (12px). */
  --font-text: Acumin, Arial, sans-serif;
  --font-display: Octave, Georgia, serif;
  --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem;
  --display-sm: clamp(1.75rem, 3vw, 2.5rem);
  --display-md: clamp(2.4rem, 4vw, 4.2rem);
  --display-lg: clamp(3.2rem, 5vw, 5.8rem);
  --lh-tight: 1; --lh-snug: 1.25; --lh-body: 1.5;
  --track-label: .1em; --track-eyebrow: .14em; --track-wordmark: .24em;

  /* Space, shape, layers. */
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 5rem; --space-7: 7.5rem;
  --radius: 0;
  --tap: 44px;
  --z-raised: 1; --z-dropdown: 10; --z-menu: 30; --z-header: 40; --z-panel: 45; --z-bar: 50; --z-skip: 100;
  --shadow-pop: 0 12px 24px rgb(0 0 0 / 7%);
  --focus: 2px solid var(--ink); --focus-offset: 4px;

  /* Frame. */
  --gutter: 48px;
  --page: min(1440px, 100% - 2 * var(--gutter));
  --header-h: 82px; --mobile-nav-h: 49.5px;
  /* D26-1: the bottom tab bar (50px + 1px rule) and its current visible height
     (version2/shell-nav.js documents the contract for other lanes). */
  --tabbar-h: 51px; --tabbar-visible: 0px;
}
/* D30 dark contrast: body 15.13/13.61, muted 8.46/7.61, field 5.61/5.04.
   Status text/tint: ok 7.60, warn 8.30, error 7.53, info 7.93 (WCAG AA). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --backdrop-shade: rgb(0 0 0 / 65%);
  --on-clay: #151515; --shadow-tool: 0 10px 20px rgb(0 0 0 / 40%);
  --ink: #f3f0e9; --paper: #1b1b1b; --dune: #262420; --clay: #c8a28d; --muted: #bbb5ab;
  --rule: #817a70; --rule-strong: #837d73; --field-border: #9a9287;
  --ok: #a4cba6; --ok-tint: #223127; --warn: #e4c58b; --warn-tint: #342c1e;
  --error: #f0aaa0; --error-tint: #382522; --info: #a8cbe4; --info-tint: #22303b;
  --shadow-pop: 0 12px 24px rgb(0 0 0 / 40%);
  --photo-text: #fff; --photo-shade: 0 0 0;
  --selector-paper: rgb(27 27 27 / 94%);
  --planner-sales: #4c3a30; --planner-family: #c8a28d; --planner-family-ink: #1b1b1b; --planner-shift: #4c463b;
  --pale-clay: #40342b; --light-gray: #bbb5ab; --pending-border: #e4c58b; --attention-border: #f0aaa0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --backdrop-shade: rgb(0 0 0 / 65%);
  --on-clay: #151515; --shadow-tool: 0 10px 20px rgb(0 0 0 / 40%);
  --ink: #f3f0e9; --paper: #1b1b1b; --dune: #262420; --clay: #c8a28d; --muted: #bbb5ab;
  --rule: #817a70; --rule-strong: #837d73; --field-border: #9a9287;
  --ok: #a4cba6; --ok-tint: #223127; --warn: #e4c58b; --warn-tint: #342c1e;
  --error: #f0aaa0; --error-tint: #382522; --info: #a8cbe4; --info-tint: #22303b;
  --shadow-pop: 0 12px 24px rgb(0 0 0 / 40%);
  --photo-text: #fff; --photo-shade: 0 0 0;
  --selector-paper: rgb(27 27 27 / 94%);
  --planner-sales: #4c3a30; --planner-family: #c8a28d; --planner-family-ink: #1b1b1b; --planner-shift: #4c463b;
  --pale-clay: #40342b; --light-gray: #bbb5ab; --pending-border: #e4c58b; --attention-border: #f0aaa0;
  }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; --header-h: 64px; --space-6: 3.5rem; --space-7: 6rem; }
}
@media (max-width: 700px) {
  /* D26-1: the phone top bar is about half its former height. */
  :root { --header-h: 44px; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
}

/* ---- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }
html { color: var(--ink); background: var(--paper); font-family: var(--font-text); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; }
body { margin: 0; min-width: 320px; line-height: var(--lh-body); }
body.menu-is-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
strong, b, th, h3, h4 { font-weight: 600; }
h1, h2, h3, p { overflow-wrap: anywhere; hyphens: auto; }
h1, h2 { font-family: var(--font-display); font-weight: 300; }
input, select, textarea { color: var(--ink); font-family: inherit; }
::placeholder { color: var(--muted); opacity: 1; }
[hidden] { display: none !important; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Keyboard focus: one ring for every interactive element. */
:focus-visible, :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
:is(input, select, textarea):focus-visible { outline-offset: 2px; }

/* Form controls: 16px on phones and tablets, so iOS does not zoom on focus. */
@media (max-width: 900px) {
  body :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { font-size: max(1rem, 16px); }
}

.skip-link { position: fixed; z-index: var(--z-skip); left: 1rem; top: -5rem; min-height: var(--tap); display: inline-flex; align-items: center; padding: .75rem 1rem; color: var(--paper); background: var(--ink); }
.skip-link:focus { top: 1rem; }
/* N29: at rest (and when focused by script after a pointer action) the skip link is clipped as well as moved off
   screen, so it never paints over content (it did in scrolled full-page captures of the portal preview); keyboard
   focus still shows it. */
.skip-link:not(:focus), .skip-link:focus:not(:focus-visible) { top: -5rem; clip-path: inset(50%); }

/* ---- Shell: header, account panel, menu, bottom bar, footer ------------- */
.site-header { position: relative; z-index: var(--z-header); min-height: var(--header-h); padding: 0 max(var(--gutter), (100% - 1440px) / 2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); background: var(--paper); }
/* The header text keeps the reviewed D17 positions (tests/d17-layout-browser);
   each control's 44 x 44 px target is an invisible ::before centred on it
   (Targets, under Accessibility below). */
.wordmark, .desktop-nav, .lang-switch, .mobile-account { line-height: normal; }
.wordmark { position: relative; font-size: 1.45rem; font-weight: 600; letter-spacing: var(--track-wordmark); }
/* Brand fonts (23 Oct 2026): the official logo (version2/brand-logo.js) replaces the KEUNE text, in
   currentColor, its letters as tall as the text's capitals were (cap height .686em; view box 116 / 114.01). */
.wordmark { display: inline-flex; align-items: center; }
/* Logo size matches keune.com (user, 23 Oct: option B): letters 22 px tall on desktop, 18 px on phones. */
.wordmark .keune-logo { display: block; flex: none; height: 22px; width: calc(22px * 500 / 116); }
.site-header .desktop-nav { margin-left: auto; }
.desktop-nav { display: flex; align-items: center; gap: 3.2rem; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: .12em; }
.desktop-nav a, .desktop-nav button, .mobile-account { position: relative; padding: 0; border: 0; background: none; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
.desktop-nav a:hover, .desktop-nav button:hover, .mobile-account:hover { text-decoration: underline; text-underline-offset: .45rem; }
.desktop-nav [aria-expanded="true"], .mobile-account[aria-expanded="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45rem; }
.mobile-account, .mobile-bottom-nav { display: none; }
.account-panel { position: absolute; z-index: var(--z-panel); right: max(var(--gutter), (100% - 1440px) / 2); top: calc(100% + 1px); width: min(390px, 100% - 2 * var(--gutter)); padding: 2rem; border: 1px solid var(--rule); border-top: 0; background: var(--paper); box-shadow: var(--shadow-pop); }
.account-panel p { margin: 0 0 .75rem; line-height: 1.45; }
.account-panel .account-name { font-family: var(--font-display); font-size: 1.75rem; }
.account-panel .muted { margin: 1.5rem 0 0; font-size: .82rem; color: var(--muted); }
.account-panel .account-sign-out { margin-top: 1.25rem; }
.account-panel .account-sign-out[disabled] { cursor: progress; }
.account-panel .account-sign-out-error { margin: 1rem 0 0; color: var(--error); font-size: var(--text-sm); }
/* D29: the two-step sign-in link (and, for a distributor admin, its Dismiss button) after Sign out; Keune staff see the Microsoft note. */
.account-panel .account-two-step { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 1rem 0 0; }
.account-panel p.account-two-step { display: block; color: var(--muted); font-size: var(--text-sm); }

.menu-backdrop { position: fixed; z-index: var(--z-menu); inset: var(--header-h) 0 0; background: rgb(0 0 0 / 25%); }
.portal-menu { position: absolute; inset: 0 0 auto; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow: auto; padding: var(--space-5) max(var(--gutter), (100% - 1440px) / 2) var(--space-6); background: var(--paper); }
.menu-heading { display: flex; justify-content: space-between; align-items: start; padding-bottom: var(--space-4); border-bottom: 1px solid var(--ink); }
.menu-heading h2 { margin: 0; font-size: clamp(3.5rem, 6vw, 6rem); line-height: .85; }
.menu-heading .eyebrow { margin-bottom: 1rem; }
.close-button { display: inline-flex; align-items: center; min-height: var(--tap); border: 0; background: none; text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--text-xs); cursor: pointer; }
.close-button span { margin-left: .75rem; font-size: 1.4rem; line-height: 1; }
.menu-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4vw; padding-top: 2.25rem; }
.menu-groups h3 { margin: 0 0 1.4rem; min-height: 2rem; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; }
.menu-groups a { min-height: 54px; display: flex; align-items: start; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.menu-groups a:hover > span:first-child { transform: translateX(.25rem); }
.menu-groups a > span { transition: transform .18s ease; }
.menu-groups small { display: none; color: var(--muted); font-size: var(--text-xs); }
.menu-groups a[aria-current="page"] > span:first-child { font-weight: 600; }
.menu-groups a[aria-current="page"] { border-bottom: 2px solid var(--ink); }

.page { width: var(--page); margin: 0 auto; padding: var(--space-6) 0 var(--space-7); }
.eyebrow { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; line-height: 1.4; letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.back-link { display: inline-flex; align-items: center; width: fit-content; min-height: var(--tap); font-size: var(--text-xs); line-height: 1.3; letter-spacing: .11em; text-transform: uppercase; }
.back-link:hover { text-decoration: underline; text-underline-offset: .45rem; }
.page > .back-link { margin-bottom: calc(var(--space-6) - 13px); }

.site-footer { border-top: 1px solid var(--rule); background: var(--paper); }
/* User note 2026-10-03: on a short page the footer rode up to mid-screen. The
   page column fills the window and the footer sits at the bottom. */
#app:not(:empty) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#app:not(:empty) > .site-footer { margin-top: auto; }
.site-footer-inner { width: var(--page); margin: 0 auto; padding: var(--space-4) 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 3rem; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.site-footer-inner p { margin: 0; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 0 2rem; color: var(--ink); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; }
.site-footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer-links a:hover { text-decoration: underline; text-underline-offset: .35rem; }

@media (max-width: 900px) {
  body:has(.mobile-bottom-nav) { padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); }
  /* The fixed bottom bar's space is the body padding above, so the page column fills only the rest. */
  body:has(.mobile-bottom-nav) #app:not(:empty) { min-height: calc(100vh - var(--mobile-nav-h) - env(safe-area-inset-bottom)); min-height: calc(100dvh - var(--mobile-nav-h) - env(safe-area-inset-bottom)); }
  html:has(.mobile-bottom-nav) { scroll-padding-bottom: calc(var(--mobile-nav-h) + 1rem); }
  .site-header .desktop-nav, .desktop-nav { display: none; }
  .mobile-account { display: block; font-size: var(--text-xs); }
  .wordmark { font-size: 1.15rem; }
  .wordmark .keune-logo { height: 18px; width: calc(18px * 500 / 116); }
  .account-panel { right: var(--gutter); top: 100%; }
  .mobile-bottom-nav { position: fixed; display: grid; z-index: var(--z-bar); bottom: 0; left: 0; right: 0; height: var(--mobile-nav-h); grid-template-columns: 1fr 1fr; background: var(--paper); border-top: 1px solid var(--ink); }
  .mobile-bottom-nav a, .mobile-bottom-nav button { position: relative; display: grid; place-items: center; border: 0; background: var(--paper); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: .13em; cursor: pointer; }
  .mobile-bottom-nav a:first-child { border-right: 1px solid var(--rule); }
  /* Current item: tint, weight and a bar (the bar survives forced colours). */
  .mobile-bottom-nav :is(.active, [aria-current="page"], .is-current) { background: var(--dune); font-weight: 600; }
  .mobile-bottom-nav :is(.active, [aria-current="page"], .is-current)::after { content: ""; position: absolute; inset: 0 0 auto; border-top: 3px solid var(--ink); }
  .menu-backdrop { inset: var(--header-h) 0 var(--mobile-nav-h); background: var(--paper); }
  .portal-menu { position: fixed; inset: var(--header-h) 0 var(--mobile-nav-h); max-height: none; padding: 1rem var(--gutter) 1.5rem; overflow-y: auto; scroll-padding-bottom: 1rem; }
  .menu-heading { align-items: center; padding-bottom: .75rem; }
  .menu-heading h2 { font-size: 2.25rem; }
  .menu-heading .eyebrow { display: none; }
  .menu-groups { display: block; padding-top: .7rem; }
  .menu-groups section + section { margin-top: .9rem; }
  .menu-groups h3 { min-height: 0; margin-bottom: .15rem; }
  .menu-groups a { min-height: 48px; padding: .55rem 0; align-items: center; }
  .menu-groups a > span:last-child { font-size: 1.2rem; }
  .page { padding-top: 1.5rem; padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom)); }
  .page > .back-link { margin-bottom: calc(var(--space-5) - 13px); }
  .eyebrow { margin-bottom: .75rem; }
  .site-footer-inner { display: block; padding: var(--space-3) 0; }
  .site-footer-links { margin-top: .5rem; gap: 0 1.5rem; }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .menu-groups { grid-template-columns: repeat(3, 1fr); }
}

/* ---- D26-1 shell: top bar, tab bar, consultant Menu, Search -------------- */
.header-actions { display: flex; flex: none; align-items: center; gap: .25rem; margin-left: auto; }
.header-actions .settings-control { margin-left: 0; }
.icon-button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.icon-button .shell-icon, .settings-toggle svg { width: 22px; height: 22px; }
.icon-button[aria-expanded="true"], .settings-toggle[aria-expanded="true"] { background: var(--dune); }
@media (hover: hover) { .icon-button:hover { color: var(--muted); } }
.shell-icon { display: block; flex: none; }
/* Desktop: Home · Leaderboard · Search · Menu after the wordmark, sentence case. */
.site-header .desktop-nav.shell-nav { align-self: stretch; align-items: stretch; gap: 2.25rem; margin: 0 auto 0 3rem; font-size: var(--text-sm); letter-spacing: normal; text-transform: none; }
.desktop-nav.shell-nav .shell-tab { display: flex; align-items: center; border-bottom: 2px solid transparent; letter-spacing: normal; text-transform: none; text-decoration: none; }
.desktop-nav.shell-nav .shell-tab:not([aria-disabled]):hover { text-decoration: underline; text-underline-offset: .45rem; }
/* The current item is marked by the 2px ink bar only: a semibold label would move the header text between pages (D17 geometry). */
.desktop-nav.shell-nav .shell-tab:is(.active, [aria-current="page"]) { border-bottom-color: var(--ink); text-decoration: none; }
@media (max-width: 900px) {
  .site-header { flex-wrap: nowrap; }
  .header-actions { margin-right: -12px; }
  :root:has(.mobile-bottom-nav--tabs) { --mobile-nav-h: var(--tabbar-h); --tabbar-visible: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  :root:has(.mobile-bottom-nav--tabs)[data-tabbar-hidden] { --tabbar-visible: 0px; }
  .mobile-bottom-nav.mobile-bottom-nav--tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--rule); background: var(--paper); transition: transform 200ms ease; }
  html[data-tabbar-hidden] .mobile-bottom-nav--tabs { transform: translateY(calc(100% + 1px)); }
  .mobile-bottom-nav.mobile-bottom-nav--tabs .shell-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 48px; min-height: 48px; height: calc(var(--tabbar-h) - 1px); padding: 2px 2px 0; border: 0; background: transparent; color: var(--muted); font-size: var(--text-xs); line-height: 1.1; letter-spacing: normal; text-transform: none; }
  .mobile-bottom-nav.mobile-bottom-nav--tabs .shell-tab:focus-visible { outline-offset: -4px; }
  .mobile-bottom-nav--tabs .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-bottom-nav--tabs .shell-icon { width: 23px; height: 23px; }
  .mobile-bottom-nav.mobile-bottom-nav--tabs .shell-tab:is(.active, [aria-current="page"]) { background: transparent; color: var(--ink); font-weight: 600; }
  .mobile-bottom-nav.mobile-bottom-nav--tabs .shell-tab:is(.active, [aria-current="page"])::after { inset: -1px 28% auto; border-top: 2px solid var(--ink); }
  .settings-panel { max-height: calc(100dvh - var(--header-h) - var(--tabbar-visible) - 1rem); }
}
/* Consultant Menu: Your tools, then Coming later (inert, unfocusable). */
.menu-sections { display: grid; gap: var(--space-4); padding-top: var(--space-4); }
.menu-section h3 { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.menu-row { display: flex; align-items: center; gap: .875rem; min-height: 60px; padding: .625rem .875rem; border: 1px solid var(--rule); border-top-width: 0; background: var(--paper); color: var(--ink); text-align: left; }
.menu-list > .menu-row:first-child { border-top-width: 1px; }
.menu-row .shell-icon { width: 22px; height: 22px; }
.menu-row-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.menu-row-title { font-size: var(--text-md); font-weight: 600; line-height: var(--lh-snug); }
.menu-row-description { color: var(--muted); font-size: var(--text-sm); line-height: 1.35; }
.menu-row-chevron { color: var(--muted); font-size: 1.25rem; line-height: 1; }
.menu-row .status-chip { flex: none; }
.menu-row[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ink); }
@media (hover: hover) { a.menu-row:hover { background: var(--dune); } }
.menu-row--later { background: transparent; color: var(--muted); cursor: default; }
.menu-row--later .menu-row-title { font-weight: 400; }
.menu-row--later .shell-icon { opacity: .6; }
.menu-row .status-chip--planned { color: var(--muted); background: transparent; border-style: dashed; }
.menu-row .status-chip--planned::before { display: none; }
@media (min-width: 901px) {
  .menu-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vw; }
}
@media (max-width: 900px) {
  .portal-menu--consultant .menu-sections { gap: var(--space-3); padding-top: var(--space-2); }
}
@media (forced-colors: active) {
  .menu-row[aria-current="page"] { border-left: 3px solid CanvasText; }
  .menu-row--later { color: GrayText; }
}
/* Search tab (the search lane mounts into #search-root). */
.search-root { padding-top: var(--space-4); }
.search-coming { max-width: 40rem; }
.search-coming h2 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl); line-height: var(--lh-snug); }
.search-coming p { margin: 0 0 var(--space-2); }
/* Gear (D26-1 extras): app install, help and privacy, sign out. */
.settings-group { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.settings-group-label { margin: 0 0 .25rem; font-weight: 600; }
.settings-row { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .settings-row:hover { text-decoration: underline; text-underline-offset: .3rem; } }

/* ---- Components ---------------------------------------------------------- */

/* Language switch: one pattern for V2 (buttons with aria-pressed), the sign-in
   page (buttons) and the privacy notice (links with aria-current). The current
   language is ink with a 2px text-width underline (a text decoration, so it
   survives forced colours); each control has an invisible 44 x 44 px target. */
.lang-switch { display: flex; align-items: center; gap: 1.5rem; margin-left: 2rem; font-size: var(--text-xs); letter-spacing: .12em; }
.lang-switch :is(button, a) { position: relative; padding: .35rem 0; border: 0; background: none; color: var(--muted); font: inherit; letter-spacing: inherit; text-transform: uppercase; cursor: pointer; }
.lang-switch :is(button[aria-pressed="true"], a[aria-current="page"], .is-current) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.lang-switch :is(button, a):hover { color: var(--ink); }
@media (max-width: 900px) {
  .lang-switch { margin-left: auto; margin-right: 1.5rem; }
}

/* Buttons. Solid for committing actions, outlined for secondary ones, quiet
   text for low-emphasis ones; arrows only on navigation links, never here. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .75rem 1.5rem; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--paper); font: 600 var(--text-xs)/1.3 var(--font-text); letter-spacing: var(--track-label); text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.btn--secondary { background: var(--paper); color: var(--ink); }
.btn--quiet { min-height: var(--tap); padding: .5rem 0 .4rem; border-width: 0 0 1px; background: transparent; color: var(--ink); }
.btn--danger { border-color: var(--error); background: var(--error); color: var(--paper); }
.btn--block { width: 100%; }
@media (hover: hover) {
  .btn:not(:disabled, [aria-disabled="true"]):hover { border-color: var(--clay); background: var(--clay); color: var(--on-clay); }
  .btn--secondary:not(:disabled, [aria-disabled="true"]):hover { border-color: var(--ink); background: var(--dune); color: var(--ink); }
  .btn--quiet:not(:disabled, [aria-disabled="true"]):hover { border-color: var(--ink); background: transparent; color: var(--ink); box-shadow: inset 0 -1px var(--ink); }
  .btn--danger:not(:disabled, [aria-disabled="true"]):hover { border-color: var(--error); background: var(--paper); color: var(--error); }
}
.btn:not(:disabled, [aria-disabled="true"]):active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Form fields. The boundary is --field-border (3:1 or better); errors add an
   icon-free text message, aria-invalid and a 2px error border. */
.field { display: grid; gap: .5rem; min-width: 0; }
.field-label, .field > label, .field > span:first-child { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.field-control, .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-width: 0; min-height: 48px; padding: .7rem .8rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 400 1rem/1.4 var(--font-text); letter-spacing: 0; text-transform: none; }
.field textarea { min-height: 7rem; resize: vertical; }
.field-hint { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.field-error { display: block; margin: 0; color: var(--error); font-size: var(--text-sm); font-weight: 600; text-transform: none; letter-spacing: 0; }
/* The required marker is a word, never colour alone (UX2, Sales Issues form). */
.field-required { color: var(--error); font-weight: 600; text-transform: none; letter-spacing: 0; }
:is(input, select, textarea)[aria-invalid="true"] { border: 2px solid var(--error); }

/* Notices: a tinted panel with a coloured bar; the variant also names itself in
   the text, so colour is never the only cue. */
.notice { display: block; margin: 0 0 var(--space-3); padding: 1rem 1.25rem; border-left: 3px solid var(--clay); background: var(--dune); color: var(--ink); line-height: 1.5; }
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice p { margin: 0 0 .5rem; }
.notice ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.notice a { text-decoration: underline; text-underline-offset: .2em; }
.notice a:hover { text-decoration-thickness: 2px; }
.notice[tabindex="-1"]:focus { outline: var(--focus); outline-offset: 2px; }
.notice--info { border-left-color: var(--info); background: var(--info-tint); }
.notice--warn { border-left-color: var(--warn); background: var(--warn-tint); }
.notice--error { border-left-color: var(--error); background: var(--error-tint); }
.notice--success { border-left-color: var(--ok); background: var(--ok-tint); }

/* Status chip: icon + word + colour. The icon is a mask, so it takes the text
   colour; the word is always present. */
.status-chip { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; padding: .2rem .55rem .2rem .45rem; border: 1px solid currentColor; background: var(--paper); color: var(--ink); font-size: var(--text-xs); font-weight: 600; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3C/svg%3E"); }
.status-chip::before { content: ""; flex: none; width: .85rem; height: .85rem; background: currentColor; -webkit-mask: var(--chip-icon) center / contain no-repeat; mask: var(--chip-icon) center / contain no-repeat; }
.status-chip--ok { color: var(--ok); background: var(--ok-tint);
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.6 2.6 8l1.4-1.4 2.2 2.2 5.8-5.8L13.4 4.4z'/%3E%3C/svg%3E"); }
.status-chip--warn { color: var(--warn); background: var(--warn-tint);
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15.5 14.5H.5zM7 6v4.5h2V6zm0 5.5v2h2v-2z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.status-chip--error { color: var(--error); background: var(--error-tint);
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zM5.4 4 4 5.4 6.6 8 4 10.6 5.4 12 8 9.4l2.6 2.6 1.4-1.4L9.4 8 12 5.4 10.6 4 8 6.6z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.status-chip--info { color: var(--info); background: var(--info-tint);
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zM7 7v5h2V7zm0-3v2h2V4z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.status-chip--neutral { color: var(--muted); }

/* Tabs: one pattern. The current tab is ink with a 2px bar; mark it with the
   class is-current (or .active) and aria-current. Desktop rows scroll never:
   they wrap. */
.tabs, .tool-nav { display: flex; flex-wrap: wrap; column-gap: clamp(1.5rem, 4vw, 4rem); border-block: 1px solid var(--rule); }
:is(.tabs, .tool-nav) a, .tabs button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: 48px; padding: .75rem 0; border: 0; background: none; color: var(--muted); font-size: var(--text-xs); line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; }
:is(.tabs, .tool-nav) :is(a, button):hover { color: var(--ink); }
:is(.tabs, .tool-nav) :is(.active, .is-current, [aria-current="page"], [aria-selected="true"]) { color: var(--ink); font-weight: 600; }
:is(.tabs, .tool-nav) :is(.active, .is-current, [aria-current="page"], [aria-selected="true"])::after { content: ""; position: absolute; inset: auto 0 -1px; border-bottom: 2px solid var(--ink); }

/* Data table: PC-first; on phones each row becomes a stacked card whose cells
   carry their column name in data-label. Numbers use tabular figures. */
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table th { padding: .75rem .65rem; border-bottom: 1px solid var(--ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-align: left; text-transform: uppercase; vertical-align: bottom; }
.data-table td { padding: .9rem .65rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data-table :is(th, td).numeric { text-align: right; }
@media (max-width: 700px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; min-width: 0; }
  .data-table tr { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
  .data-table td { padding: .25rem 0; border: 0; overflow-wrap: anywhere; }
  .data-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .1rem; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
  .data-table :is(th, td).numeric { text-align: left; }
}

/* Disclosure: details/summary. Opens with a tap, Enter or Space; pages that
   need Escape add it in script. */
.disclosure { border-top: 1px solid var(--rule); }
.disclosure > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: var(--tap); padding: .75rem 0; font-weight: 600; list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "+"; flex: none; font-size: 1.35rem; font-weight: 300; line-height: 1; }
.disclosure[open] > summary::after { content: "\2212"; }
.disclosure-body { padding: 0 0 var(--space-2); }

/* ---- Accessibility ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Forced colours (Windows High Contrast) drop backgrounds and box shadows: keep
   every current or selected state visible with borders and underlines. */
@media (forced-colors: active) {
  .status-chip::before { forced-color-adjust: none; background: CanvasText; }
  :is(.tabs, .tool-nav, .tool-nav-mobile, .mobile-bottom-nav) :is(.active, .is-current, [aria-current="page"]) { outline: 2px solid CanvasText; outline-offset: -4px; }
  .btn:disabled, .btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* Targets: the header controls keep their text geometry and get an invisible
   44 x 44 px hit area (lane 32 / D17). The language button (UX2: one button
   naming the other language) gets a 44px-high area spanning its width. Back
   links, footer links, Close, Dismiss and tabs have real 44px boxes (above). */
:is(.wordmark, .desktop-nav a, .desktop-nav button, .mobile-account, .lang-switch button, .lang-switch a)::before { content: ""; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); min-width: 44px; min-height: 44px; }
.lang-switch button::before { width: 44px; height: 44px; top: calc(50% - 22px); bottom: auto; right: auto; }
.lang-switch [data-lang="en"]::before { left: calc(50% - 24px); }
.lang-switch [data-lang="fr"]::before { left: calc(50% - 20px); }
.lang-switch :is(button, a):only-child::before { width: auto; left: 0; right: 0; }

/* D30: borderless approved 20px gear in a real 44px target, after Account. */
.settings-control { position: relative; display: flex; flex: none; align-items: center; margin-left: 2rem; }
.settings-control .settings-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.settings-toggle svg { display: block; }
.settings-toggle:hover { color: var(--muted); }
.settings-toggle:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.settings-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: var(--z-panel); width: 300px; max-width: calc(100dvw - 2 * var(--gutter)); max-height: calc(100dvh - var(--header-h) - 2rem); overflow-y: auto; padding: 1.25rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); font-size: var(--text-sm); }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.settings-heading .close-button { color: var(--ink); background: transparent; }
.settings-panel fieldset { margin: 1rem 0 0; padding: 0; border: 0; }
.settings-panel legend { margin-bottom: .35rem; font-weight: 600; }
.settings-panel label { display: flex; align-items: center; gap: .65rem; min-height: 44px; cursor: pointer; }
.settings-panel input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
@media (max-width: 900px) { .site-header .settings-control { margin-left: 1rem; } .site-header .mobile-account { margin-left: auto; } }

/* Page header (N30): all tool/admin titles; content heroes keep their own scale. */
.page:has(.page-header) { padding-top: var(--space-3); }
.page.state-page:has(.page-header) { display: block; min-height: 0; }
.page .page-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; margin: 0; padding: 0 0 var(--space-3); border-bottom: 1px solid var(--rule); }
.page-header > div { display: contents; }
.page .page-header + :is(.tabs, .tool-nav) { border-top: 0; margin-top: 0; }
.page .page-header h1 { margin: 0; max-width: 100%; font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; line-height: 1.1; letter-spacing: -.015em; text-align: left; text-wrap: balance; overflow-wrap: anywhere; }
.page .page-header p { margin: 0; max-width: 100%; font-size: var(--text-md); line-height: var(--lh-body); color: var(--ink); }
.page .page-header .eyebrow { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-eyebrow); color: var(--ink); }
.page:has(.page-header) > .back-link, .page-header .back-link { margin: 0 0 var(--space-2); }
.page-header .back-link { margin-bottom: 0; }
/* N30 repair: title 40/32/30px stays the largest heading; tool section h2s are capped at 2rem in their own CSS. */
@media (max-width: 900px) {
  .page .page-header h1 { font-size: 2rem; }
  .page .page-header .eyebrow + h1 { margin-top: calc(var(--space-1) - var(--space-2)); }
  /* Incentives tabs follow the title directly; their own top rule is the divider. */
  .page .page-header:has(~ .tool-nav-mobile) { padding-bottom: var(--space-2); border-bottom: 0; }
  /* Every in-portal return link goes to Portal Home; the bottom bar's Home replaces it wherever that bar is shown. */
  body:has(.mobile-bottom-nav) .page .back-link { display: none; }
}
@media (max-width: 700px) {
  .page .page-header h1 { font-size: 1.875rem; }
}

/* Header panels: 200ms out / 150ms in. Hidden remains the closed-state contract. */
.portal-menu, .account-panel { opacity: 0; transform: translateY(-8px); transition: opacity 150ms ease-in, transform 150ms ease-in; }
.portal-menu.is-open, .account-panel.is-open { opacity: 1; transform: translateY(0); transition-duration: 200ms; transition-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
  .portal-menu, .account-panel { transform: none; transition: none; }
}

body.tab-switching { overflow-anchor: none; }

/* css/app.css */
.identity h1 { margin: 0 0 1.25rem; font-size: clamp(3.4rem, 6vw, 6.8rem); line-height: .93; letter-spacing: -.035em; }
.identity-org { margin: 0 0 .35rem; font-size: 1.05rem; }.identity-role { margin: 0; color: var(--muted); }
.alex-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); min-height: 570px; border-bottom: 1px solid var(--rule); }
.alex-hero .identity { padding: var(--space-4) 9vw var(--space-6) 0; display: flex; flex-direction: column; justify-content: center; }
.incentive-block { padding: var(--space-5) clamp(2rem, 4vw, 4.5rem); background: var(--dune); display: flex; flex-direction: column; justify-content: center; }
.incentive-block h2 { margin: 0; font-size: clamp(2.4rem, 3.6vw, 4.2rem); line-height: 1; }.subheading { margin: .7rem 0 2.6rem; color: var(--muted); }
.rank { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; }.rank strong { font-family: Octave, Georgia, serif; font-size: 5.6rem; line-height: .8; font-weight: 300; }.rank span { color: var(--muted); }
.rank-details { display: flex; gap: 2rem; padding: 1.3rem 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }.rank-details p { margin: 0; }.data-date { color: var(--muted); font-size: .86rem; margin: 1rem 0 1.8rem; }
.program-start { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 0; margin: .8rem 0 2rem; border-block: 1px solid var(--rule-strong); }.program-start strong { font-family: Octave, Georgia, serif; font-size: 2rem; font-weight: 300; }.program-start span { color: var(--muted); }
.text-cta, .text-button { width: fit-content; display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .65rem 0 .45rem; border: 0; border-bottom: 1px solid var(--ink); background: transparent; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; cursor: pointer; }
.text-cta:hover, .text-button:hover { gap: 2.5rem; }
.section { padding: var(--space-6) 0 0; }.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }.section-head h2 { margin: 0; font-family: Acumin, Arial, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.rows { border-top: 1px solid var(--ink); }
.attention-row, .activity-row { min-height: 98px; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.attention-row h3, .activity-row h3 { margin: 0 0 .35rem; font-size: .95rem; }.attention-row p, .activity-row p { margin: 0; color: var(--muted); }.attention-row a { display: flex; gap: 2rem; text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; }.mobile-copy { display: none; }
.operational-block, .data-operations { margin-top: var(--space-6); padding: var(--space-5); background: var(--dune); display: grid; grid-template-columns: .9fr 1.4fr auto; gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.operational-block h2, .data-operations h2 { margin: 0; font-size: clamp(2.7rem, 4vw, 4.5rem); line-height: 1; }.operational-block dl { margin: 0; }.operational-block dl div { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--rule-strong); }.operational-block dt { color: var(--muted); }.operational-block dd { margin: 0; text-align: right; }
.data-operations { grid-template-columns: .85fr 1.15fr; }.data-intro > p:last-of-type { margin: 1rem 0 1.7rem; color: var(--muted); }.stat-list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--rule-strong); }.stat-list div { min-height: 105px; padding: 1.25rem 1rem; border-bottom: 1px solid var(--rule-strong); }.stat-list div:nth-child(odd) { border-right: 1px solid var(--rule-strong); }.stat-list dt { font-family: Octave, Georgia, serif; font-size: 2.7rem; }.stat-list dd { margin: .2rem 0 0; color: var(--muted); }
.stat-list dt.stat-unavailable { font-family: Acumin, Arial, sans-serif; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.activity-row time { color: var(--muted); font-size: .86rem; }.recent .section-head .text-cta { margin-left: auto; }
.tool-groups { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 5vw, 6rem); row-gap: 3rem; border-top: 1px solid var(--ink); padding-top: 2rem; }.tool-group h3 { margin: 0 0 1rem; min-height: 2rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; }.tool-row { min-height: 66px; padding: .9rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 1px solid var(--rule); }.tool-row:hover > span:first-child { transform: translateX(.25rem); }.tool-row > span { transition: transform .18s ease; }.tool-row small { display: block; margin-top: .25rem; color: var(--muted); font-size: .76rem; }.tool-row > span[aria-hidden] { font-size: 1.2rem; }
.placeholder .back-link { margin-bottom: calc(5rem - 13px); }.placeholder > h1, .state-page h1 { margin: 0; max-width: 950px; font-size: clamp(4rem, 8vw, 8rem); line-height: .9; }.placeholder > p:not(.eyebrow) { font-size: 1.2rem; color: var(--muted); }.placeholder-panel { width: min(760px, 100%); margin: 5rem 0 0 auto; padding: 3rem; background: var(--dune); }.placeholder-panel h2 { font-size: 2.5rem; margin: 1rem 0; }.status-label { width: fit-content; padding: .4rem .7rem; background: var(--ink); color: var(--paper); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }.route-note { margin-top: 2rem; color: var(--muted); }.route-note code { overflow-wrap: anywhere; }
.empty-state { margin: 0; padding: 2rem 0; border-block: 1px solid var(--rule); color: var(--muted); }.tool-unavailable { margin: 0; color: var(--muted); font-size: .9rem; }.state-page { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

/* Incentives V2 */
.incentives-page{padding-top:2.25rem}.tool-content{min-height:500px}
.rank-hero{min-height:470px;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:1fr auto;gap:2rem 6vw;align-items:center;padding:4.5rem clamp(2rem,5vw,5rem);background:var(--dune)}.rank-context h2,.ranking-head h2,.oversight-intro h2,.issues-head h2{margin:0;font-size:clamp(2.7rem,4.3vw,5rem);line-height:.94}.rank-context>p:last-child,.ranking-head p,.oversight-intro p,.issues-head p{color:var(--muted)}.rank-primary{align-self:end}.rank-primary>.eyebrow{margin-bottom:1.2rem}.rank-primary>strong{display:block;font-family: Octave, Georgia, serif;font-weight:300;font-size:clamp(6.5rem,11vw,11rem);line-height:.68}.qualifying{margin:2rem 0 0;display:flex;align-items:center;gap:.65rem}.qualifying i{width:8px;height:8px;border-radius:50%;background:var(--ink)}.rank-meta{display:flex;gap:3rem;border-top:1px solid var(--rule-strong);padding-top:1.4rem}.rank-meta p{margin:0}.rank-meta strong,.rank-meta span{display:block}.rank-meta span{margin-top:.3rem;color:var(--muted);font-size:.78rem}.rank-hero>.text-cta{justify-self:end}.status-banner{display:flex;gap:2rem;padding:1.15rem 0;border-bottom:1px solid var(--rule);font-size:.82rem}.status-banner span{color:var(--muted)}
.incentive-section{padding:5rem 0;border-bottom:1px solid var(--rule)}.section-title{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:2rem}.section-title .eyebrow{margin:0}.section-title>p:last-child{margin:0;color:var(--muted)}.metric-rows{margin:0;border-top:1px solid var(--ink)}.metric-rows>div{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:1.45rem 0;border-bottom:1px solid var(--rule)}.metric-rows dt{font-weight:600}.metric-rows dt small{display:block;margin-top:.35rem;color:var(--muted);font-weight:400}.metric-rows dd{margin:0;font-family: Octave, Georgia, serif;font-size:2.5rem}.route-rows{border-top:1px solid var(--ink)}.route-rows a{min-height:88px;display:grid;grid-template-columns:1fr 200px auto;gap:2rem;align-items:center;border-bottom:1px solid var(--rule)}.route-rows strong,.route-rows small,.route-rows b{display:block}.route-rows small{margin-top:.3rem;color:var(--muted);font-size:.78rem}.route-rows b{font-family: Octave, Georgia, serif;font-size:2rem;font-weight:300}
.program-photo{position:relative;height:min(650px,55vw);margin:6rem 0 0;overflow:hidden;background:var(--dune)}.program-photo img{width:100%;height:100%;object-fit:cover}.program-photo figcaption{position:absolute;inset:auto 0 0;padding:3rem;color:var(--photo-text);background:linear-gradient(transparent,rgb(var(--photo-shade) / 70%))}.program-photo h2{margin:0;font-size:clamp(2.5rem,5vw,5.5rem)}.program-photo figcaption span{display:block;margin-top:.75rem}.not-started{max-width:850px;padding:7rem 0}.not-started h2{margin:0;font-size:clamp(3rem,6vw,6.5rem);line-height:.92}.not-started>p:not(.eyebrow){max-width:600px;color:var(--muted);line-height:1.6}.not-started .text-cta{margin-top:2rem}
.oversight-intro,.ranking-head,.issues-head{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;padding:4rem 0 3rem}.campaign-select{display:flex;flex-direction:column;gap:.55rem;min-width:280px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.campaign-select select{min-height:48px;padding:0 2.5rem 0 1rem;border:1px solid var(--ink);border-radius:0;background:var(--paper);font:inherit;color:var(--ink)}.leaderboard-section{padding:3rem 0 0}.leaderboard{width:100%;border-collapse:collapse;font-size:.86rem}.leaderboard th{padding:1rem .65rem;text-align:left;border-bottom:1px solid var(--ink);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.leaderboard td{padding:1.15rem .65rem;border-bottom:1px solid var(--rule)}.leaderboard .numeric{text-align:right}.leaderboard td:first-child strong{font-family: Octave, Georgia, serif;font-size:1.65rem;font-weight:300}.leaderboard td small{display:block;color:var(--muted);font-size:.75rem}.leaderboard tr.current-user{background:var(--dune);box-shadow:inset 3px 0 var(--ink)}.row-status{font-size:.75rem}.privacy-note{margin:1.5rem 0 0;color:var(--muted);font-size:.75rem}
.editorial-lead{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:6rem 0;align-items:end}.editorial-lead h2{margin:0;font-size:clamp(3.5rem,6vw,7rem);line-height:.9}.editorial-lead>p{margin:0;font-size:1.25rem;line-height:1.6}.program-campaigns{border-top:1px solid var(--ink)}.program-campaigns article{display:grid;grid-template-columns:80px 1fr;gap:3rem;padding:3rem 0;border-bottom:1px solid var(--rule)}.program-campaigns article>span{font-family: Octave, Georgia, serif;font-size:2rem}.program-campaigns h3{margin:0;font-family: Octave, Georgia, serif;font-size:clamp(2.2rem,3.5vw,4rem);font-weight:300}.program-campaigns .period{color:var(--muted)}.program-campaigns dl{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0 0}.program-campaigns dl div{border-top:1px solid var(--rule);padding-top:1rem}.program-campaigns dt{color:var(--muted);font-size:.75rem}.program-campaigns dd{margin:.4rem 0 0}.bonus-section{margin-top:5rem;padding:4rem;background:var(--dune)}.bonus-section>p:not(.eyebrow){margin:.6rem 0;font-family: Octave, Georgia, serif;font-size:2.1rem}.bonus-section small{display:block;margin-top:2rem;color:var(--muted)}
.issue-list{border-top:1px solid var(--ink)}.issue-list article{display:grid;grid-template-columns:1fr auto;gap:1rem 3rem;padding:1.6rem 0;border-bottom:1px solid var(--rule)}.issue-list h3{margin:.4rem 0;font-size:1rem}.issue-list p{margin:0;color:var(--muted)}.issue-list article>div:nth-child(2){text-align:right}.issue-list article>div:nth-child(2) span{display:block;margin-top:.4rem;color:var(--muted);font-size:.75rem}.issue-list article>p{grid-column:1/-1}.scope-note{margin-top:3rem;padding:2rem;background:var(--dune)}.scope-note p{margin:.5rem 0 0;color:var(--muted);line-height:1.5}.form-notice{padding:1rem;border:1px solid var(--ink)}.faq-list{max-width:1000px;margin:5rem auto 0;border-top:1px solid var(--ink)}.faq-list section{border-bottom:1px solid var(--rule)}.faq-list h2{margin:0;font-family: Acumin, Arial, sans-serif}.faq-list button{width:100%;display:flex;justify-content:space-between;gap:2rem;padding:1.6rem 0;border:0;background:none;text-align:left;font-size:1rem;cursor:pointer}.faq-list [id^="faq-answer"]{max-width:780px;padding:0 3rem 1.6rem 0;color:var(--muted);line-height:1.6}

.incentives-state{max-width:850px;min-height:480px;display:flex;flex-direction:column;justify-content:center}.incentives-state h2{margin:0;font-size:clamp(3rem,6vw,6rem);line-height:.92}.incentives-state>p:last-child{color:var(--muted)}
@media (max-width: 900px) {.identity h1 { font-size: clamp(2.7rem, 12vw, 4rem); }.identity-role { font-size: .85rem; }
  .alex-hero { display: block; min-height: 0; border: 0; }.alex-hero .identity { padding: 0 0 2.5rem; }.incentive-block { margin-inline: calc(-1 * var(--gutter)); padding: 2.5rem var(--gutter); }.incentive-block h2 { font-size: clamp(2.15rem, 10.5vw, 2.7rem); }.subheading { margin-bottom: 2rem; }.rank strong { font-size: clamp(3.9rem, 19vw, 4.8rem); }.rank-details { display: block; }.rank-details p + p { margin-top: .5rem; }
  .section { padding-top: 3.5rem; }.section-head { margin-bottom: 1.5rem; }.attention-row, .activity-row { min-height: 82px; gap: 1rem; }.attention-row p, .activity-row p { font-size: .85rem; }.attention-row a { gap: .7rem; }.desktop-copy { display: none; }.mobile-copy { display: block; }
  .operational-block, .data-operations { margin: 2.5rem calc(-1 * var(--gutter)) 0; padding: 2.5rem var(--gutter); display: block; }.operational-block dl { margin: 2rem 0; }.operational-block dl div { grid-template-columns: 1fr; gap: .2rem; }.operational-block dd { text-align: left; }.data-intro { margin-bottom: 2rem; }.data-operations h2 { font-size: 3.1rem; }.stat-list div { min-height: 95px; padding-inline: .7rem; }.stat-list dt { font-size: 2.3rem; }.stat-list dd { font-size: .78rem; }
  .recent .section-head { display: block; }.recent .section-head .text-cta { margin-top: 1.2rem; }.activity-row { grid-template-columns: 1fr; gap: .35rem; }.activity-row time { font-size: .75rem; }
  .tool-groups { grid-template-columns: 1fr; gap: 2.5rem; }.tool-group h3 { min-height: 0; }.tool-row { min-height: 62px; }
  .placeholder .back-link { margin-bottom: calc(3rem - 13px); }.placeholder > h1, .state-page h1 { font-size: clamp(3.2rem, 16vw, 5rem); }.placeholder-panel { margin-top: 3rem; padding: 2rem var(--gutter); }.tool-nav{display:grid;grid-template-columns:1fr 1fr;gap:0}.tool-nav a{justify-content:flex-start;padding:.9rem .25rem;border-bottom:1px solid var(--rule)}.tool-nav a:nth-child(even){padding-left:1rem;border-left:1px solid var(--rule)}.tool-nav a:last-child{grid-column:1/-1}.tool-nav :is(.active,.is-current,[aria-current="page"])::after{inset:auto .25rem -1px}
  .rank-hero{display:block;min-height:0;margin-inline:calc(-1 * var(--gutter));padding:2.5rem var(--gutter)}.rank-context h2{max-width:320px;font-size:clamp(2.25rem,10vw,2.8rem)}.rank-context>p:last-child{margin-bottom:2.7rem}.rank-primary>strong{font-size:clamp(5.5rem,27vw,7.2rem)}.rank-meta{display:block;margin-top:2rem}.rank-meta p+p{margin-top:1rem}.rank-hero>.text-cta{margin-top:2rem}.status-banner{display:block}.status-banner strong,.status-banner span{display:block}.status-banner span{margin-top:.4rem;line-height:1.45}.incentive-section{padding:3.5rem 0}.section-title{display:block}.section-title>p:last-child{margin-top:.75rem}.metric-rows>div{display:block}.metric-rows dd{margin-top:1rem;font-size:2.2rem}.route-rows a{grid-template-columns:1fr auto 18px;gap:.75rem;min-height:100px}.route-rows a>span:nth-child(2){text-align:right}.route-rows strong{font-size:.88rem}.route-rows b{font-size:1.75rem}
  .program-photo{height:115vw;max-height:560px;margin:4rem calc(-1 * var(--gutter)) 0}.program-photo figcaption{padding:4rem var(--gutter) 2rem}.program-photo h2{font-size:2.6rem}.not-started{padding:4rem 0}.not-started h2{font-size:clamp(2.6rem,12vw,3.4rem)}.oversight-intro,.ranking-head,.issues-head{display:block;padding:3rem 0 2rem}.campaign-select{min-width:0;margin-top:2rem}.ranking-head h2,.oversight-intro h2,.issues-head h2{font-size:clamp(2.5rem,11vw,3.4rem)}.issues-head .text-button{margin-top:1.5rem}
  .leaderboard-section{padding-top:2rem}.leaderboard thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.leaderboard,.leaderboard tbody,.leaderboard tr,.leaderboard td{display:block}.leaderboard tr{position:relative;padding:1.15rem 0;border-bottom:1px solid var(--rule)}.leaderboard td{padding:.25rem 0;border:0}.leaderboard td::before{content:attr(data-label);display:inline-block;width:42%;color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.leaderboard td:nth-child(1){position:absolute;right:0;top:1rem}.leaderboard td:nth-child(1)::before,.leaderboard td:nth-child(2)::before{display:none}.leaderboard td:nth-child(2){padding-right:4rem;font-weight:600}.leaderboard .numeric{text-align:left}.leaderboard tr.current-user{margin-inline:-10px;padding-inline:10px}.row-status{font-size:.78rem}
  .editorial-lead{display:block;padding:4rem 0}.editorial-lead h2{font-size:clamp(3rem,14vw,4.4rem)}.editorial-lead>p{margin-top:2rem;font-size:1rem}.program-campaigns article{grid-template-columns:36px 1fr;gap:1rem;padding:2.5rem 0}.program-campaigns h3{font-size:2.25rem}.program-campaigns dl{display:block}.program-campaigns dl div+div{margin-top:1.5rem}.bonus-section{margin:3rem calc(-1 * var(--gutter)) 0;padding:3rem var(--gutter)}.bonus-section>p:not(.eyebrow){font-size:1.8rem}.issue-list article{display:block}.issue-list article>div:nth-child(2){margin-top:1rem;text-align:left}.issue-list article>p{margin-top:1rem}.faq-list{margin-top:3rem}.faq-list button{padding:1.4rem 0}.faq-list [id^="faq-answer"]{padding-right:0}
}
@media (max-width:430px){.identity h1 {font-size:clamp(2.55rem,11.5vw,3.2rem)}.placeholder>h1,.state-page h1{font-size:clamp(2.75rem,13vw,3.8rem)}}
@media (min-width: 901px) and (max-width: 1150px) { .tool-groups { grid-template-columns: repeat(2, 1fr); }.alex-hero { grid-template-columns: 1fr 1fr; }.operational-block { grid-template-columns: 1fr 1.3fr; }.operational-block .text-cta { grid-column: 1 / -1; } }

/* Read-only publication inspection */
.publication-review > .identity { border-bottom: 1px solid var(--rule); }
/* N30 repair: state messages and tool section headings under a page header stay at or below
   the page title. Bare error pages without a header keep their large state h2 as the title. */
.page:has(.page-header) .incentives-state:not(.results-state) h2, .ranking-head.admin-setup-head h2 { font-size: clamp(1.625rem, 2.5vw, 2rem); line-height: 1.1; }
.publication-queue .section-title { align-items: end; }
.publication-queue .section-title > p { max-width: 52ch; color: var(--muted); line-height: 1.55; }
.publication-filters { display: flex; align-items: end; gap: 1rem; margin: 2.5rem 0 1rem; padding: 1.25rem 0; border-block: 1px solid var(--rule); }
.publication-filters label { align-self: center; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.publication-filters select { min-width: 220px; padding: .85rem 2.5rem .85rem .8rem; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; }
.publication-filters .text-button { min-height: 46px; }
.publication-filters a { margin-left: auto; color: var(--ink); text-underline-offset: .3rem; }
.publication-queue-count { color: var(--muted); font-size: .82rem; }
.publication-candidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 2rem; background: var(--ink); border: 1px solid var(--ink); }
.publication-candidate { min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); }
.publication-candidate:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr); grid-template-rows: auto 1fr auto; column-gap: clamp(3rem, 7vw, 7rem); }
.publication-candidate:only-child .publication-candidate-heading { grid-column: 1; grid-row: 1; }
.publication-candidate:only-child .candidate-description { grid-column: 1; grid-row: 2; }
.publication-candidate:only-child .metric-rows { grid-column: 2; grid-row: 1 / span 3; }
.publication-candidate:only-child .candidate-actions { grid-column: 1; grid-row: 3; }
.publication-candidate-heading { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; }
.publication-candidate h3 { margin: .35rem 0 0; font-family: Octave, Georgia, serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 300; line-height: .95; }
.candidate-state { flex: 0 0 auto; max-width: 180px; padding: .55rem .7rem; border: 1px solid var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .07em; line-height: 1.3; text-align: center; text-transform: uppercase; }
.candidate-state--published { background: var(--ink); color: var(--paper); }
.candidate-state--blocked, .candidate-state--inactive { border-color: var(--muted); color: var(--muted); }
.candidate-description { min-height: 2.8em; margin: 1.4rem 0 1.8rem; color: var(--muted); line-height: 1.45; }
.publication-candidate .metric-rows > div { grid-template-columns: minmax(120px, .6fr) minmax(0, 1.4fr); }
.publication-candidate .metric-rows dd { margin: 0; font-family: Acumin, Arial, sans-serif; font-size: .86rem; overflow-wrap: anywhere; }
.candidate-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.candidate-actions .text-cta { flex: 1; width: auto; }
.candidate-actions > a:last-child { color: var(--ink); font-size: .8rem; text-underline-offset: .3rem; }
.publication-candidate-pagination { margin-top: 1.5rem; }
.publication-status { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); gap: clamp(2rem, 7vw, 7rem); margin-top: 3rem; padding: clamp(2rem, 5vw, 5rem); background: var(--dune); border: 1px solid var(--rule); }
.publication-status.is-visible { border-color: var(--ink); }
.publication-status h2 { max-width: 650px; margin: .3rem 0 1rem; font-size: clamp(2.7rem, 4.8vw, 5.3rem); line-height: .9; }
.publication-status > div > p:last-child, .publication-contract .section-title > p, .publication-results .section-title > p, .publication-audit .section-title > p { color: var(--muted); line-height: 1.55; }
.publication-status .metric-rows { align-self: end; }
.publication-status .metric-rows > div, .publication-contract .metric-rows > div { grid-template-columns: minmax(160px, .55fr) minmax(0, 1.45fr); }
.publication-status .metric-rows dd, .publication-contract .metric-rows dd { font-family: Acumin, Arial, sans-serif; font-size: 1rem; overflow-wrap: anywhere; }
.publication-contract .section-title, .publication-results .section-title, .publication-audit .section-title { align-items: end; }
.publication-contract .section-title > p, .publication-results .section-title > p, .publication-audit .section-title > p { max-width: 48ch; }
.publication-results .leaderboard td:nth-child(2), .publication-results .leaderboard td:nth-child(3) { max-width: 250px; overflow-wrap: anywhere; }
.publication-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.publication-pagination a { justify-self: start; color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .3rem; }
.publication-pagination a:last-child { justify-self: end; }
.publication-history { border-top: 1px solid var(--rule); }
.publication-history:last-child { border-bottom: 1px solid var(--rule); }
.publication-history summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; cursor: pointer; font-size: 1rem; font-weight: 600; list-style: none; }
.publication-history summary::-webkit-details-marker { display: none; }
.publication-history summary::after { content: '+'; order: 3; font-size: 1.35rem; font-weight: 300; }
.publication-history[open] summary::after { content: '−'; }
.publication-history summary span { margin-left: auto; color: var(--muted); font-weight: 400; }
.publication-history > p { max-width: 65ch; color: var(--muted); }
.publication-history ol { margin: 1rem 0 2rem; padding: 0; list-style: none; }
.publication-history li { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(180px, .5fr); gap: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.publication-history li span, .publication-history li small { overflow-wrap: anywhere; }
.publication-history li small { color: var(--muted); }

@media (max-width: 900px) {
  .publication-queue .section-title { display: block; }
  .publication-queue .section-title > p { margin-top: .75rem; }
  .publication-filters { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .publication-filters label { grid-column: 1 / -1; }
  .publication-filters select { min-width: 0; width: 100%; }
  .publication-filters a { grid-column: 1 / -1; margin-left: 0; }
  .publication-candidates { grid-template-columns: 1fr; margin-inline: calc(-1 * var(--gutter)); border-inline: 0; }
  .publication-candidate { padding-inline: var(--gutter); }
  .publication-candidate:only-child { display: block; }
  .publication-candidate-heading { display: block; }
  .candidate-state { display: inline-block; margin-top: 1rem; }
  .candidate-description { min-height: 0; }
  .publication-candidate .metric-rows > div { grid-template-columns: 1fr; gap: .35rem; }
  .publication-candidate .metric-rows dd { margin-top: 0; }
  .candidate-actions { display: block; }
  .candidate-actions > a:last-child { display: inline-block; margin-top: 1.25rem; }
  .publication-status { display: block; margin: 1.25rem calc(-1 * var(--gutter)) 0; padding: 2rem var(--gutter); border-inline: 0; }
  .publication-status h2 { font-size: 2.55rem; }
  .publication-status .metric-rows { margin-top: 2rem; }
  .publication-status .metric-rows > div, .publication-contract .metric-rows > div { grid-template-columns: 1fr; gap: .35rem; }
  .publication-status .metric-rows dd, .publication-contract .metric-rows dd { margin-top: 0; font-size: .9rem; }
  .publication-contract .section-title, .publication-results .section-title, .publication-audit .section-title { display: block; }
  .publication-contract .section-title > p, .publication-results .section-title > p, .publication-audit .section-title > p { margin-top: .75rem; }
  .publication-results .leaderboard td:nth-child(1) { position: static; }
  .publication-results .leaderboard td:nth-child(1)::before { display: inline-block; }
  .publication-results .leaderboard td:nth-child(2) { padding-right: 0; }
  .publication-results .leaderboard td:nth-child(2)::before { display: inline-block; }
  .publication-results .leaderboard td { overflow-wrap: anywhere; }
  .publication-history li { display: block; }
  .publication-history li span, .publication-history li small { display: block; margin-top: .45rem; }
}

/* Phase 2B: rich Incentives dashboard and explicit desktop/mobile modes */
.tool-nav-mobile { display: none; }
.rank-overview { margin-top: 3.5rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); border: 1px solid var(--ink); }
/* UX1: the hero text is in the flow, so larger text grows the box instead of being clipped. */
.rank-campaign { position: relative; min-height: 500px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--ink); color: var(--photo-text); }
.rank-campaign .campaign-visual { position: absolute; inset: 0; margin: 0; height: 100%; }
.rank-campaign .campaign-visual::after { content: ''; position: absolute; inset: 20% 0 0; background: linear-gradient(transparent, rgb(var(--photo-shade) / 76%)); }
.rank-campaign .campaign-visual figcaption { display: none; }
.rank-campaign > div:last-child { position: relative; z-index: var(--z-raised); padding: 3rem; }
.rank-overview:has(> .dashboard-campaign-select) .rank-campaign > div:last-child { padding-top: 7rem; }
.rank-campaign h2 { margin: 0; max-width: 520px; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .9; }
.rank-campaign p:last-child { margin: 1rem 0 0; }
.rank-summary { grid-column: 2; grid-row: 1; padding: 3.5rem clamp(2rem, 4vw, 4rem) 2rem; display: flex; align-items: end; justify-content: space-between; background: var(--dune); }
.rank-summary .eyebrow { margin-bottom: 2rem; }
.rank-number { display: block; font-family: Octave, Georgia, serif; font-size: clamp(7rem, 11vw, 10.5rem); font-weight: 300; line-height: .65; }
.rank-caption { display: block; margin-top: 1.8rem; color: var(--muted); }
.movement { padding-bottom: 2.2rem; text-align: right; }
.movement strong { display: block; font-family: Octave, Georgia, serif; font-size: 3.2rem; font-weight: 300; }
.movement span { color: var(--muted); }
.rank-facts { grid-column: 2; padding: 1.4rem clamp(2rem, 4vw, 4rem); background: var(--dune); border-top: 1px solid var(--rule-strong); }
.rank-facts p { display: flex; justify-content: space-between; gap: 1rem; margin: .75rem 0; }
.rank-facts p > span:not(.status-dot) { color: var(--muted); }
.rank-facts .status-dot { width: 8px; height: 8px; margin: .4rem .5rem 0 0; border-radius: 50%; background: var(--ink); }
.rank-facts p:first-child strong { margin-right: auto; }
.rank-overview > .text-cta { grid-column: 2; width: auto; padding: 1.25rem clamp(2rem, 4vw, 4rem); background: var(--dune); border-top: 1px solid var(--rule-strong); border-bottom: 0; }
@media (min-width: 901px) {
  /* Keep the full rank panel level with the image on desktop. */
  .rank-overview { border-color: transparent; grid-template-rows: minmax(0, 1fr) auto auto; }
  .rank-campaign { grid-column: 1; grid-row: 1 / span 3; outline: 1px solid var(--ink); outline-offset: -1px; }
  .rank-summary { padding-bottom: 3rem; box-shadow: inset 1px 0 var(--ink), inset -1px 0 var(--ink), inset 0 1px var(--ink); }
  .rank-facts { box-shadow: inset 1px 0 var(--ink), inset -1px 0 var(--ink); }
  .rank-overview > .text-cta { box-shadow: inset 1px 0 var(--ink), inset -1px 0 var(--ink), inset 0 -1px var(--ink); }
}
.campaign-visual { position: relative; height: min(560px, 42vw); margin: 5rem 0 0; overflow: hidden; background: var(--dune); }
.campaign-visual img { width: 100%; height: 100%; object-fit: cover; }
.campaign-visual figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 2rem; padding: 3rem; color: var(--photo-text); background: linear-gradient(transparent, rgb(var(--photo-shade) / 72%)); }
.campaign-visual figcaption span, .campaign-visual figcaption strong { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.incentive-section h2, .bonus-section h2 { margin: .35rem 0 0; font-size: clamp(2.6rem, 4vw, 4.6rem); line-height: .95; }
.routes-section .route-rows a { min-height: 118px; grid-template-columns: 92px 1fr 210px auto; }
.route-rows img { width: 72px; height: 72px; object-fit: cover; }
.dashboard-bonuses { display: grid; grid-template-columns: .6fr 1.4fr; gap: 6vw; margin: 0; padding: 5rem 0; background: transparent; border-bottom: 1px solid var(--rule); }
.dashboard-bonuses > div > p:last-child { color: var(--muted); }
.bonus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.bonus-grid article { min-width: 0; padding: 2rem 1.5rem; background: var(--dune); }
.bonus-grid article > strong { display: block; font-family: Octave, Georgia, serif; font-size: 2.8rem; font-weight: 300; }
.bonus-grid h3 { margin: 1.2rem 0 .7rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.bonus-grid p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.oversight-hero { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); min-height: 430px; margin-top: 3.5rem; background: var(--dune); }
.oversight-hero > div { grid-column: 1; grid-row: 2; padding: clamp(2rem, 5vw, 5rem); align-self: end; }
.oversight-hero > .campaign-visual { grid-column: 2; grid-row: 1 / -1; }
.oversight-hero h2 { margin: 0; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .9; }
.oversight-hero > div > p:last-child { color: var(--muted); }
.oversight-hero .campaign-visual { height: 100%; min-height: 430px; margin: 0; }
.oversight-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.oversight-metrics article { padding: 2.5rem; border-right: 1px solid var(--rule); }
.oversight-metrics span, .oversight-metrics small { display: block; }
.oversight-metrics span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.oversight-metrics strong { display: block; margin: 1rem 0; font-family: Octave, Georgia, serif; font-size: 4rem; font-weight: 300; }
.oversight-metrics small { color: var(--muted); }
.live-quality .metric-rows > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.live-quality .metric-rows dd { font-family: Acumin, Arial, sans-serif; font-size: 1.1rem; overflow-wrap: anywhere; }
.live-issue-editor { grid-column: 1 / -1; margin: 2rem 0; padding: 1.5rem; background: var(--dune); min-width: 0; }
.live-issue-editor h2 { font-size: 2rem; margin: 0 0 1rem; }
.live-issue-editor fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.live-issue-editor legend { font-weight: 600; margin-bottom: 1rem; }
.live-issue-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.live-issue-fields label { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; min-width: 0; }
.live-issue-fields input, .live-issue-fields textarea, .live-issue-fields select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: .75rem; border: 1px solid var(--field-border); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; }
.live-issue-fields textarea { resize: vertical; }
.live-issue-editor [data-save-feedback] { margin: 1rem 0; line-height: 1.5; overflow-wrap: anywhere; }
.live-issue-editor :disabled { opacity: .7; cursor: default; }
.live-issue-empty { min-height: 0; margin: 2rem 0; }
.live-issue-empty h2 { font-size: 1.75rem; line-height: 1.2; }
@media (max-width: 700px) { .live-issue-fields { grid-template-columns: minmax(0, 1fr); } .live-issue-editor { padding: 1rem; } }
.dashboard-actions { display: flex; gap: 4rem; padding-top: 3rem; }
.program-lead { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 540px; margin-top: 3.5rem; background: var(--dune); }
.program-lead > div { align-self: end; padding: clamp(2.5rem, 5vw, 5rem); }
.program-lead h2 { margin: 0; font-size: clamp(3.5rem, 6vw, 7rem); line-height: .88; }
.program-lead p:last-child { max-width: 55ch; margin-top: 2rem; line-height: 1.6; }
.program-lead img { width: 100%; height: 100%; object-fit: cover; }
.program-campaigns article { grid-template-columns: minmax(250px, .75fr) 1.25fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.program-campaigns article > img { width: 100%; height: 350px; object-fit: cover; }
.route-number { display: block; margin-bottom: 1.4rem; font-family: Octave, Georgia, serif; font-size: 2rem; }
.program-note { margin-top: 2rem; padding: 2rem; border: 1px solid var(--rule); }
.program-note p { margin: .5rem 0 0; color: var(--muted); line-height: 1.55; }
/* Lane MW: the coming-soon category, the Your Progress explanation and the Sales Issues intro. */
.coming-soon-badge { margin: 0 0 .75rem; }
.program-campaign--coming-soon .period { font-weight: 600; }
.progress-explain { max-width: 46rem; margin: 1.25rem 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-body); }
.issues-intro { max-width: 46rem; margin: 2rem 0 0; padding: 1rem 1.25rem; border-left: 3px solid var(--info); background: var(--info-tint); }
.issues-intro p { margin: 0; line-height: var(--lh-body); }
.issues-intro-lead { max-width: 46rem; line-height: var(--lh-body); }

@media (max-width: 900px) {.identity h1 { margin-bottom: .7rem; font-size: clamp(2rem, 9vw, 2.375rem); }
  .identity-org { font-size: .94rem; }
  .alex-hero .identity { padding-bottom: 1.5rem; }
  .incentive-block { margin-inline: calc(-1 * var(--gutter)); padding: 1.5rem var(--gutter); }
  .operational-block, .data-operations { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .incentive-block h2 { font-size: clamp(1.9rem, 8vw, 2.2rem); }
  .incentive-block .subheading { margin: .35rem 0 1rem; }
  .incentive-block .rank { margin-bottom: .9rem; }
  .incentive-block .rank strong { font-size: 3.75rem; }
  .incentive-block .rank-details { padding: .8rem 0; font-size: .9rem; }
  .incentive-block .data-date { margin: .65rem 0 .9rem; }
  .section { padding-top: 2rem; }
  .attention .section-head { margin-bottom: 1rem; }
  .attention-row, .activity-row { min-height: 64px; padding: .75rem 0; }
  .attention-row h3 { margin-bottom: .1rem; }
  .tool-nav--desktop { display: none; }
  /* Phone and tablet tab row (UX1): labels wrap onto two lines instead of
     shrinking below 12px; the current cell has a tint, semibold text and a 3px
     bar (the bar survives forced colours). UX2 marks the More cell current with
     is-current and aria-current when the page sits under More. */
  /* Three equal cells (2:1) while the labels fit; a cell whose single word is
     longer widens, and with enlarged text the cells wrap instead of overflowing. */
  .tool-nav-mobile { position: relative; display: flex; flex-wrap: wrap; border-block: 1px solid var(--rule); }
  .tool-nav-mobile > nav { display: flex; flex-wrap: wrap; flex: 2 1 0; min-width: min-content; }
  .tool-nav-mobile > details { flex: 1 1 0; min-width: min-content; }
  .tool-nav-mobile > nav > a { flex: 1 1 0; min-width: min-content; }
  .tool-nav-mobile a, .tool-nav-mobile summary { position: relative; min-height: 48px; display: flex; align-items: center; padding: .4rem 8px; font-size: .75rem; line-height: 1.25; letter-spacing: .09em; text-transform: uppercase; }
  .tool-nav-mobile nav a + a, .tool-nav-mobile details { border-left: 1px solid var(--rule); }
  .tool-nav-mobile :is(a, summary):is(.active, .is-current, [aria-current="page"]) { background: var(--dune); color: var(--ink); font-weight: 600; }
  .tool-nav-mobile > nav > a:is(.active, .is-current, [aria-current="page"])::after, .tool-nav-mobile summary:is(.active, .is-current, [aria-current="page"])::after { content: ""; position: absolute; inset: auto 0 -1px; border-bottom: 3px solid var(--ink); }
  .tool-nav-mobile details { position: static; }
  .tool-nav-mobile summary { justify-content: space-between; gap: .35rem; cursor: pointer; list-style: none; }
  .tool-nav-mobile summary::-webkit-details-marker { display: none; }
  .tool-nav-mobile details > div { position: absolute; z-index: var(--z-dropdown); top: 100%; right: 0; width: min(230px, 100%); padding: .35rem; border: 1px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-tool); }
  .tool-nav-mobile details > div a { min-height: 44px; }
  .tool-nav-mobile details > div a:is(.active, [aria-current="page"]) { border-left: 3px solid var(--ink); font-weight: 600; }
  .rank-overview { display: block; margin: 1.25rem calc(-1 * var(--gutter)) 0; border-inline: 0; }
  .rank-campaign { min-height: 132px; }
  .rank-campaign .campaign-visual img { object-position: center 62%; }
  .rank-campaign > div:last-child { padding: 1rem var(--gutter); }
  .rank-campaign .eyebrow { display: none; }
  .rank-campaign h2 { max-width: 250px; font-size: 1.9rem; }
  .rank-campaign p:last-child { margin-top: .3rem; font-size: .78rem; }
  .rank-summary { padding: 1.25rem var(--gutter) 1rem; }
  .rank-summary .eyebrow { margin-bottom: .6rem; }
  .rank-number { font-size: clamp(3.4rem, 15vw, 4rem); line-height: .72; }
  .rank-caption { margin-top: .6rem; font-size: .76rem; }
  .movement { padding-bottom: .2rem; }
  .movement strong { font-size: 2.2rem; }
  .movement span { font-size: .75rem; }
  .rank-facts { padding: .6rem var(--gutter); font-size: .8rem; }
  .rank-facts p { margin: .5rem 0; }
  .rank-overview > .text-cta { padding: .9rem var(--gutter); }
  .status-banner { gap: .3rem; padding: .8rem 0; }
  .incentive-section { padding: 2.25rem 0; }
  .incentive-section h2, .bonus-section h2 { font-size: 2rem; }
  .section-title { margin-bottom: 1.25rem; }
  .section-title > p:last-child { font-size: .85rem; line-height: 1.45; }
  .metric-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 1rem; padding: .9rem 0; }
  .metric-rows dd { min-width: 0; overflow-wrap: anywhere; }
  .metric-rows dt { font-size: .86rem; }
  .metric-rows dt small { font-size: .75rem; }
  .metric-rows dd { margin: 0; font-size: 1.6rem; text-align: right; }
  .routes-section .route-rows a { min-height: 78px; grid-template-columns: 1fr auto 16px; }
  .route-rows img { display: none; }
  .route-rows strong { max-width: 205px; }
  .route-rows small { font-size: .75rem; }
  .dashboard-bonuses { display: block; padding: 2.25rem 0; }
  .bonus-grid { grid-template-columns: 1fr; margin-top: 1.5rem; }
  .bonus-grid article { padding: 1rem 1.1rem; }
  .bonus-grid article > strong { font-size: 2rem; }
  .bonus-grid h3 { margin: .5rem 0 .25rem; }
  .campaign-visual { height: 210px; margin: 2.25rem calc(-1 * var(--gutter)) 0; }
  .campaign-visual figcaption { padding: 2.5rem var(--gutter) 1rem; }
  .campaign-visual figcaption span, .campaign-visual figcaption strong { font-size: .75rem; }
  .oversight-hero { display: block; min-height: 0; margin: 1.25rem calc(-1 * var(--gutter)) 0; }
  .oversight-hero > div { padding: 1.5rem var(--gutter); }
  .oversight-hero h2 { font-size: 2.35rem; }
  .oversight-hero .campaign-visual { height: 150px; min-height: 0; margin: 0; }
  .oversight-metrics { grid-template-columns: repeat(3, 1fr); }
  .oversight-metrics article { padding: 1rem .6rem; }
  .oversight-metrics span { font-size: .75rem; }
  .oversight-metrics strong { margin: .5rem 0; font-size: 2.3rem; }
  .oversight-metrics small { font-size: .75rem; }
  .oversight-metrics[aria-label="Data quality and freshness"] { grid-template-columns: minmax(0, 1fr); }
  .oversight-metrics[aria-label="Data quality and freshness"] article { border-right: 0; border-bottom: 1px solid var(--rule); }
  .dashboard-actions { display: grid; gap: 1rem; padding-top: 2rem; }
  .ranking-head, .issues-head { padding: 2rem 0 1.5rem; }
  .ranking-head h2, .issues-head h2 { font-size: 2.35rem; }
  .campaign-select { margin-top: 1.25rem; }
  .leaderboard-section { padding-top: 1rem; }
  .leaderboard tr { min-height: 154px; padding: 1rem 4.2rem 1rem 0; display: grid; align-content: start; }
  .leaderboard td { padding: .18rem 0; }
  .leaderboard td::before { width: 112px; }
  .leaderboard td:nth-child(1) { right: 0; top: .8rem; padding: 0; }
  .leaderboard td:nth-child(1) strong { font-size: 2.3rem; }
  .leaderboard td:nth-child(2) { padding-right: 0; font-size: .9rem; }
  .leaderboard td:nth-child(2) strong { display: inline; }
  .leaderboard tr.current-user { margin-inline: -8px; padding-left: 8px; }
  .program-lead { display: flex; flex-direction: column-reverse; min-height: 0; margin: 1.25rem calc(-1 * var(--gutter)) 0; }
  .program-lead img { height: 190px; }
  .program-lead > div { padding: 1.5rem var(--gutter); }
  .program-lead h2 { font-size: 2.5rem; }
  .program-lead p:last-child { margin-top: 1rem; font-size: .9rem; }
  .program-campaigns article { display: block; padding: 2rem 0; }
  .program-campaigns article > img { height: 150px; margin-bottom: 1.25rem; }
  .program-campaigns h3 { font-size: 2rem; }
  .program-campaigns dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .program-campaigns dl div + div { margin-top: 0; }
  .program-note { padding: 1.25rem; }
  .faq-list { margin-top: 2rem; }
  .faq-list button { padding: 1.1rem 0; font-size: .9rem; }
}

@media (max-width: 380px) {
  .rank-campaign { min-height: 122px; }
  .rank-campaign h2 { font-size: 1.75rem; }
  .rank-number { font-size: 3.4rem; }
  .metric-rows dd { font-size: 1.4rem; }
  .route-rows strong { max-width: 176px; }
}

.mapping-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.mapping-filters label { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.mapping-filters select { max-width: 100%; min-height: 44px; padding: .6rem; font: inherit; background: var(--paper); border: 1px solid var(--field-border); }
.mapping-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.mapping-card { border-top: 1px solid var(--rule); padding-top: 1.5rem; min-width: 0; overflow-wrap: anywhere; }
.mapping-card h2 { font-size: 2rem; margin: .5rem 0; }
.mapping-card .metric-rows { margin-top: 1rem; }
.mapping-card .metric-rows > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mapping-card .metric-rows dd { font-family: Acumin, Arial, sans-serif; font-size: 1rem; }
@media (max-width: 700px) { .mapping-list { grid-template-columns: minmax(0, 1fr); } }
.mapping-editor { margin-top: 1rem; }
.mapping-editor summary { cursor: pointer; padding: 1rem 0; }
.mapping-editor fieldset { border: 1px solid var(--rule); padding: 1rem; min-width: 0; }
.mapping-editor label { display: grid; gap: .5rem; margin-bottom: 1rem; }
.mapping-editor input, .mapping-editor select, .mapping-editor textarea { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; padding: .65rem; border: 1px solid var(--field-border); background: var(--paper); }
.mapping-editor textarea { min-height: 100px; resize: vertical; }
.mapping-history { margin-top: 1.5rem; }
.mapping-change { border-top: 1px solid var(--rule); padding-block: 1rem; }
.mapping-change h3 { font-size: 1rem; }
.mapping-change dl > div { margin-bottom: 1rem; }
.mapping-change dt { font-weight: 600; }
.mapping-change dd { margin: .35rem 0 0; }
.mapping-change dd span { display: block; margin-top: .25rem; }
#directory-search { box-sizing: border-box; width: min(100%, 24rem); min-height: 44px; padding: .65rem; font: inherit; border: 1px solid var(--field-border); }
.directory-permissions { margin-top: 1.5rem; }
.directory-permissions summary { cursor: pointer; padding-block: .75rem; }
.directory-permissions section { margin-block: 1.5rem; }

.account-confirm { display: flex !important; align-items: flex-start; gap: 0.65rem; }
.mapping-editor .account-confirm input { width: auto; min-height: 0; margin: 0.2rem 0 0; flex: 0 0 auto; }

.account-admin-page { min-width: 0; }

/* Authenticated incentive presentation uses the original V2 composition. */
.incentive-block--live { display: block; padding: 0; }
.home-campaign-image { display: block; width: 100%; height: 190px; object-fit: cover; }
.home-campaign-content { padding: 2.5rem clamp(2rem, 4vw, 4rem) 3rem; }
.home-campaign-content h2 { max-width: 560px; font-size: clamp(2rem, 3vw, 3.5rem); line-height: 1.05; font-weight: 600; }
.home-campaign-date { margin: .8rem 0 1.5rem; color: var(--muted); font-size: .85rem; }
.home-rank { display: flex; align-items: end; gap: 1.25rem; margin: 1.5rem 0; }
.home-rank strong { font-size: clamp(3.2rem, 6vw, 5rem); font-weight: 400; line-height: .9; }
.home-rank span { max-width: 190px; color: var(--muted); font-size: .82rem; }
.home-result-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.75rem; }
.home-result-metrics > div { padding-top: .8rem; border-top: 1px solid var(--rule-strong); }
.home-result-metrics dt { color: var(--muted); font-size: .75rem; }
.home-result-metrics dd { margin: .4rem 0 0; font-size: 1.25rem; font-weight: 600; }
.home-result-unavailable { margin: 1.5rem 0; color: var(--muted); }
.home-sample-note { padding: .7rem 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); font-size: .75rem; line-height: 1.4; }
.sample-banner { display: flex; gap: 1rem; margin: 1rem 0 2rem; padding: 1rem 1.25rem; background: var(--dune); border-left: 3px solid var(--clay); font-size: .8rem; line-height: 1.45; }
.sample-banner strong { white-space: nowrap; }
.rankings-feature { margin-top: 2rem; }
.rankings-feature h3 { margin: .4rem 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; }
.rankings-feature .campaign-visual { min-height: 330px; }
.rank-summary .rank-caption { display: block; margin-top: 1.5rem; color: var(--muted); font-size: .85rem; }
.rank-summary .rank-number { font-size: clamp(5rem, 9vw, 8rem); font-weight: 400; }
.rank-summary:has(.movement) .rank-number { white-space: nowrap; }
.rank-summary .movement { max-width: 14rem; margin-left: 1rem; }
.oversight-metrics article strong { overflow-wrap: normal; font-size: clamp(1.7rem, 3vw, 2.5rem); }
/* UX1: the three metrics share a row while they fit and stack when text is enlarged. */
.oversight-metrics--live { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.oversight-metrics--live article { min-width: 0; }
.oversight-metrics--live strong { overflow-wrap: anywhere; }
.oversight-quality { grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--dune); }
.oversight-quality article { min-width: 0; padding: 2rem 1.5rem; }
.oversight-quality strong { font-size: clamp(1.4rem, 2.4vw, 2rem); overflow-wrap: anywhere; }
.oversight-quality time { font: inherit; }
.leaderboard-section .section-title { margin-bottom: 1rem; }
@media (max-width: 700px) {
  .home-campaign-image { height: 130px; }
  .home-campaign-content { padding: 1.5rem var(--gutter) 2rem; }
  .home-campaign-content h2 { font-size: 1.75rem; }
  .home-result-metrics { grid-template-columns: 1fr; gap: .3rem; }
  .sample-banner { display: block; margin: .75rem 0 1.25rem; }
  .sample-banner strong { display: block; margin-bottom: .2rem; }
  .rankings-feature .campaign-visual { min-height: 150px; }
  .oversight-quality { grid-template-columns: minmax(0, 1fr); }
  .oversight-quality article { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* Restore the role-specific source compositions for authenticated views. */
.incentive-block--live { display: flex; padding: var(--space-5) clamp(2rem, 4vw, 4.5rem); }
.home-campaign-content { padding: 0; }
.home-campaign-content h2 { font-size: clamp(2.4rem, 3.6vw, 4.2rem); font-weight: 300; line-height: 1; }
.home-campaign-content .rank strong { font-size: 5.6rem; font-weight: 300; }
.home-campaign-content .rank-details { margin-bottom: 0; }
.operations-empty { max-width: 36ch; margin: 0; padding: 1.5rem 0; border-block: 1px solid var(--rule-strong); color: var(--muted); line-height: 1.5; }
.routes-section .route-rows a { grid-template-columns: 92px minmax(0, 1fr) minmax(170px, .8fr) auto; }
.route-rows .route-image-placeholder { display: block; width: 72px; height: 72px; background: var(--dune); }
.route-rows .route-basis b { max-width: 26ch; font-size: 1.05rem; line-height: 1.25; }
.program-artwork-pending { margin-top: var(--space-5); }
.program-artwork-warning { margin-top: var(--space-5); padding: var(--space-3); border: 1px solid var(--ink); }
.program-artwork-warning p { margin-bottom: 0; }
.faq-currency-note { max-width: 1000px; margin: var(--space-3) auto 0; font-size: .75rem; color: var(--muted); }
.program-intro { padding: 5rem 0 3rem; }
.program-campaigns .program-campaign--plain { grid-template-columns: minmax(0, 1fr); }
.home-operations .sample-banner { margin-bottom: 0; }
.home-operations .operational-block, .home-operations .data-operations { margin-top: 13px; }
.rank-overview, .oversight-hero { position: relative; }
.dashboard-campaign-select { position: absolute; z-index: 2; top: 1rem; left: 1rem; width: min(280px, calc(50% - 2rem)); min-width: 0; padding: .75rem; background: var(--selector-paper); }
/* UX1: on the oversight hero the selector has its own row instead of covering the heading. */
.oversight-hero > .dashboard-campaign-select { position: static; grid-column: 1; grid-row: 1; width: min(280px, 100% - 2rem); margin: 1rem 0 0 1rem; }
.dashboard-campaign-select select { width: 100%; }
.dashboard-sample { margin: 0; }
.performance dd.metric-unavailable { font-family: Acumin, Arial, sans-serif; font-size: 1.25rem; font-weight: 600; }
@media (min-width: 701px) {
  .oversight-quality { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oversight-quality article { min-height: 226px; box-sizing: border-box; }
}
@media (min-width: 901px) {
  .home-operations .operational-block { padding-block: calc(var(--space-5) - 12px); }
}
@media (max-width: 900px) {
  .dashboard-campaign-select, .rank-overview > .dashboard-campaign-select, .oversight-hero > .dashboard-campaign-select { position: static; box-sizing: border-box; width: 100%; margin: 0; padding: .5rem var(--gutter); background: var(--dune); font-size: .75rem; }
  .dashboard-campaign-select span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dashboard-campaign-select select { min-height: 44px; padding-inline: .5rem; }
  .campaign-select select { letter-spacing: 0; text-transform: none; }
  .home-operations .operational-block, .home-operations .data-operations { margin-top: 0; }
  .incentive-block--live { padding: 1.5rem var(--gutter); }
  .home-campaign-content h2 { font-size: clamp(1.9rem, 8vw, 2.2rem); }
  .home-campaign-content .rank strong { font-size: 3.75rem; }
  .routes-section .route-rows a { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) 16px; }
  .route-rows .route-image-placeholder { display: none; }
  .route-rows .route-basis b { font-size: .83rem; }
  .program-intro { padding: 2.5rem 0 2rem; }
}
@media (max-width: 700px) {
  .oversight-metrics--live article { padding: 1rem .45rem; }
  .oversight-metrics--live span { font-size: .75rem; letter-spacing: .04em; }
  .oversight-metrics--live strong.metric-unavailable { font-size: .85rem; overflow-wrap: anywhere; }
  .oversight-metrics--live small { font-size: .75rem; line-height: 1.25; }
  .oversight-quality article { padding: 1rem .6rem; }
}

/* Configured program content on Program Info (lane 3): purpose, event dates, costs. */
.program-lead .program-dates { margin-top: 2rem; }
.program-lead .program-purpose { max-width: 48ch; margin: 1.25rem 0 0; font-size: 1.15rem; line-height: 1.6; }
.program-lead .program-event-dates { margin-top: 1.25rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.program-costs { border-bottom: 0; }
.program-costs dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin: 0; }
.program-costs dl > div { min-width: 0; padding-top: 1rem; border-top: 1px solid var(--ink); }
.program-costs dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.program-costs dd { margin: .75rem 0 0; color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .program-lead .program-dates { margin-top: 1rem; }
  .program-lead .program-purpose { margin-top: .9rem; font-size: .95rem; }
  .program-lead .program-event-dates { margin-top: .9rem; }
  .program-costs dl { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* 2027 Planner (lane 3, D-09). Category tones stay within the ink, clay and
   dune palette; names are always shown in the legend and list, so colour is
   never the only cue. Grid placement uses classes (no inline styles, strict CSP). */
.planner-intro > p:last-child { max-width: 62ch; margin: 0; color: var(--muted); line-height: 1.55; }
.planner-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0 0; }
.planner-views { display: inline-flex; border: 1px solid var(--ink); }
.planner-views button { min-height: 44px; padding: 0 1.4rem; border: 0; background: var(--paper); color: var(--ink); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.planner-views button + button { border-left: 1px solid var(--ink); }
.planner-views button:hover { background: var(--dune); }
.planner-views button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.planner-manage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.planner-manage .text-button, .planner-actions .text-button, .planner-status .text-button, .planner-row .text-button { color: var(--ink); }
.planner-status, .planner-warning { max-width: 80ch; margin: var(--space-3) 0 0; padding: 1rem 1.25rem; border-left: 3px solid var(--clay); background: var(--dune); line-height: 1.5; }
.planner-status--error { border-left-color: var(--error); }
.planner-status .text-button { margin-left: 1rem; }
.planner-editor { margin: var(--space-4) 0 0; padding: var(--space-4); background: var(--dune); }
.planner-editor h2 { margin: 0 0 var(--space-3); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; }
.planner-editor .planner-warning { margin: 0 0 var(--space-3); background: var(--paper); }
.planner-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.planner-fields label { display: flex; flex-direction: column; gap: .5rem; min-width: 0; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.planner-fields input, .planner-fields select { width: 100%; min-width: 0; min-height: 48px; padding: .7rem .75rem; border: 1px solid var(--field-border); border-radius: 0; background: var(--paper); color: var(--ink); font: 400 1rem Acumin, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.planner-fields input:focus-visible, .planner-fields select:focus-visible { outline: var(--focus); outline-offset: 2px; }
.planner-form-error { margin: var(--space-3) 0 0; color: var(--error); font-weight: 600; }
.planner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.planner-primary { min-height: 48px; padding: .85rem 1.75rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.planner-primary:hover { background: var(--clay); color: var(--on-clay); }
.planner-primary:disabled, .planner-actions .text-button:disabled { opacity: .6; cursor: default; }
.planner-actions .planner-delete { color: var(--error); border-bottom-color: var(--error); }
.planner-empty { margin-top: var(--space-4); }
.planner-year { position: relative; margin-top: var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.planner-year:focus-visible { outline: var(--focus); outline-offset: 4px; }
.planner-year-inner { min-width: 1100px; border-bottom: 1px solid var(--ink); }
.planner-month-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1rem; padding: .5rem 0 .7rem; border-top: 1px solid var(--rule); }
.planner-month-row--quarter { border-top-color: var(--ink); }
.planner-month-label { display: flex; align-items: baseline; gap: .6rem; padding-top: .3rem; }
.planner-month-label span { width: 1.6rem; color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .12em; }
.planner-month-label h3 { margin: 0; font: 300 1.3rem Octave, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.planner-days, .planner-lanes { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 1px; }
.planner-day { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 1.9rem; border: 1px solid var(--rule); background: var(--paper); color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1; }
.planner-day small { margin-bottom: .12rem; font-size: .75rem; font-weight: 400; }
.planner-day--weekend { background: var(--dune); }
.planner-day--off { border-color: transparent; background: transparent; }
.planner-lanes { grid-auto-rows: 1.6rem; gap: 2px 1px; margin: 3px 0 0; padding: 0; list-style: none; }
.planner-lanes li { display: flex; min-width: 0; }
.planner-bar { display: flex; align-items: center; width: 100%; min-width: 0; margin: 0; padding: 0 .45rem; border: 1px solid transparent; font: 600 .75rem/1 Acumin, Arial, sans-serif; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
button.planner-bar { cursor: pointer; }
button.planner-bar:hover .planner-bar-label { text-decoration: underline; text-underline-offset: .2rem; }
button.planner-bar:focus-visible { outline: var(--focus); outline-offset: 1px; }
.planner-bar-label { overflow: hidden; text-overflow: ellipsis; }
.planner-bar--continues-before::before { content: "‹"; margin-right: .3rem; }
.planner-bar--continues-after::after { content: "›"; margin-left: auto; padding-left: .3rem; }
.planner-cat-kickoff { background: var(--ink); color: var(--paper); }
.planner-cat-education { background: var(--clay); color: var(--on-clay); }
.planner-cat-sales { background: var(--planner-sales); color: var(--ink); }
.planner-cat-family { background: var(--planner-family); color: var(--planner-family-ink); }
.planner-cat-other { background: var(--rule); color: var(--ink); }
.planner-cat-shift { background: repeating-linear-gradient(135deg, var(--dune) 0 5px, var(--planner-shift) 5px 10px); border-color: var(--muted); color: var(--ink); }
.planner-cat-review { background: var(--paper); border: 2px solid var(--clay); color: var(--ink); }
.planner-cat-unconfirmed { background: var(--paper); border: 1px dashed var(--muted); color: var(--muted); }
.planner-list { margin-top: var(--space-3); border-top: 1px solid var(--ink); }
.planner-month { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.planner-month-head { display: flex; align-items: baseline; gap: 1rem; }
.planner-month-head h3 { margin: 0; font: 300 clamp(1.8rem, 3vw, 2.4rem)/1 Octave, Georgia, serif; }
.planner-month-head span { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .14em; }
.planner-rows { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.planner-row { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 64px; padding: .75rem 0; border-top: 1px solid var(--rule); }
.planner-row:first-child { border-top: 0; }
.planner-row h4 { margin: 0 0 .25rem; font-size: .95rem; font-weight: 600; letter-spacing: .03em; overflow-wrap: anywhere; }
.planner-row p { margin: 0; color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
.planner-chip { display: inline-block; width: .75rem; height: 2.2rem; }
.planner-none { margin: .75rem 0 0; color: var(--muted); font-size: .86rem; }
.planner-legend { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--ink); }
.planner-legend h2 { margin: 0 0 1rem; font: 600 .75rem Acumin, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.planner-legend ul { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0; padding: 0; list-style: none; }
.planner-legend li { display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .82rem; }
.planner-legend .planner-chip { width: 1.4rem; height: .85rem; }
.planner-from-1{grid-column-start:1}
.planner-from-2{grid-column-start:2}
.planner-from-3{grid-column-start:3}
.planner-from-4{grid-column-start:4}
.planner-from-5{grid-column-start:5}
.planner-from-6{grid-column-start:6}
.planner-from-7{grid-column-start:7}
.planner-from-8{grid-column-start:8}
.planner-from-9{grid-column-start:9}
.planner-from-10{grid-column-start:10}
.planner-from-11{grid-column-start:11}
.planner-from-12{grid-column-start:12}
.planner-from-13{grid-column-start:13}
.planner-from-14{grid-column-start:14}
.planner-from-15{grid-column-start:15}
.planner-from-16{grid-column-start:16}
.planner-from-17{grid-column-start:17}
.planner-from-18{grid-column-start:18}
.planner-from-19{grid-column-start:19}
.planner-from-20{grid-column-start:20}
.planner-from-21{grid-column-start:21}
.planner-from-22{grid-column-start:22}
.planner-from-23{grid-column-start:23}
.planner-from-24{grid-column-start:24}
.planner-from-25{grid-column-start:25}
.planner-from-26{grid-column-start:26}
.planner-from-27{grid-column-start:27}
.planner-from-28{grid-column-start:28}
.planner-from-29{grid-column-start:29}
.planner-from-30{grid-column-start:30}
.planner-from-31{grid-column-start:31}
.planner-span-1{grid-column-end:span 1}
.planner-span-2{grid-column-end:span 2}
.planner-span-3{grid-column-end:span 3}
.planner-span-4{grid-column-end:span 4}
.planner-span-5{grid-column-end:span 5}
.planner-span-6{grid-column-end:span 6}
.planner-span-7{grid-column-end:span 7}
.planner-span-8{grid-column-end:span 8}
.planner-span-9{grid-column-end:span 9}
.planner-span-10{grid-column-end:span 10}
.planner-span-11{grid-column-end:span 11}
.planner-span-12{grid-column-end:span 12}
.planner-span-13{grid-column-end:span 13}
.planner-span-14{grid-column-end:span 14}
.planner-span-15{grid-column-end:span 15}
.planner-span-16{grid-column-end:span 16}
.planner-span-17{grid-column-end:span 17}
.planner-span-18{grid-column-end:span 18}
.planner-span-19{grid-column-end:span 19}
.planner-span-20{grid-column-end:span 20}
.planner-span-21{grid-column-end:span 21}
.planner-span-22{grid-column-end:span 22}
.planner-span-23{grid-column-end:span 23}
.planner-span-24{grid-column-end:span 24}
.planner-span-25{grid-column-end:span 25}
.planner-span-26{grid-column-end:span 26}
.planner-span-27{grid-column-end:span 27}
.planner-span-28{grid-column-end:span 28}
.planner-span-29{grid-column-end:span 29}
.planner-span-30{grid-column-end:span 30}
.planner-span-31{grid-column-end:span 31}
.planner-lane-1{grid-row-start:1}
.planner-lane-2{grid-row-start:2}
.planner-lane-3{grid-row-start:3}
.planner-lane-4{grid-row-start:4}
.planner-lane-5{grid-row-start:5}
.planner-lane-6{grid-row-start:6}
.planner-lane-7{grid-row-start:7}
.planner-lane-8{grid-row-start:8}
.planner-lane-9{grid-row-start:9}
.planner-lane-10{grid-row-start:10}
.planner-lane-11{grid-row-start:11}
.planner-lane-12{grid-row-start:12}
.planner-lane-13{grid-row-start:13}
.planner-lane-14{grid-row-start:14}
.planner-lane-15{grid-row-start:15}
.planner-lane-16{grid-row-start:16}
@media (max-width: 900px) {
  .planner-toolbar { padding: var(--space-3) 0 0; }
  .planner-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .planner-fields label:first-child, .planner-fields label:nth-child(2) { grid-column: 1 / -1; }
  .planner-editor { padding: var(--space-3) var(--gutter); }
}
@media (max-width: 430px) {
  .planner-toolbar { align-items: stretch; }
  .planner-views { width: 100%; }
  .planner-views button { flex: 1; }
  .planner-fields { grid-template-columns: minmax(0, 1fr); }
  .planner-status .text-button { display: flex; margin: .75rem 0 0; }
}


/* Lane 18: DSC wording, Your Progress, results status banners, sign-out, the
   work-in-progress note and the small-text rules: no text below 12px (.75rem),
   Regular or Semibold only below 16px, Octave only at heading sizes, and a
   darker --muted (#5e5b56: 6.8:1 on paper, 5.9:1 on dune; was #6d6a65). */
.faq-list button, .faq-list button span { font-weight: 400; }
.route-rows .route-basis b { font-family: Acumin, Arial, sans-serif; font-weight: 600; }
.oversight-metrics strong.metric-unavailable { font-family: Acumin, Arial, sans-serif; font-size: 1.25rem; font-weight: 600; }
.route-rows .route-standing small { min-height: 1.35em; }
.performance dd.metric-reached { font-family: Acumin, Arial, sans-serif; font-size: 1.25rem; font-weight: 600; }
.final-results { align-items: baseline; }
.final-results strong { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.final-results strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .6rem; border-radius: 50%; background: var(--clay); vertical-align: .08em; }
.final-results--confirmed strong::before { background: var(--ink); }
.dates-pending { font-weight: 600; }
.bonus-grid .bonus-pending { margin-top: .75rem; color: var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.program-ways-title { margin: 5rem 0 2rem; }
.program-ways-title h2 { margin: .35rem 0 0; font-size: clamp(2.6rem, 4vw, 4.6rem); line-height: .95; }
.program-lead + .program-ways-title + .program-campaigns { margin-top: 0; }
.wip-note { width: var(--page); margin: 1rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding: .5rem 1rem; background: var(--dune); border-left: 3px solid var(--clay); font-size: .875rem; line-height: 1.45; }
.wip-note p { margin: 0; }
.wip-note span { color: var(--muted); }
.wip-dismiss { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; font-size: .75rem; letter-spacing: .1em; text-decoration: underline; text-underline-offset: .35rem; text-transform: uppercase; cursor: pointer; }
@media (max-width: 900px) {
  .leaderboard td.status-empty { display: none; }
  .route-rows a > span:nth-child(2) { text-align: left; }
  .final-results strong { white-space: normal; }
  .program-ways-title { margin-top: 3rem; }
}
@media (max-width: 700px) {
  .wip-note { align-items: flex-start; flex-direction: column; }
  .program-ways-title h2 { font-size: 2rem; }
  .oversight-metrics--live strong.metric-unavailable { font-size: .875rem; }
}

/* On Keune-internal admin tools, a French user is told the tool is in English only. */
.internal-tool-note { width: var(--page); margin: 1rem auto 0; padding: .75rem 1rem; background: var(--dune); border-left: 3px solid var(--info); font-size: .875rem; line-height: 1.45; }

/* Lane 32: skeleton loading. The shared placeholder (skeleton() in
   i18n-shell.js) reuses the page's own layout classes; bars stand in for text.
   One slow, soft shine sweeps left to right across every bar at once (the
   gradient is fixed to the viewport), in the palette's warm neutrals: dune bars
   on paper, a dune/rule mix on dune panels, a paper-tinted shine. Static under
   prefers-reduced-motion. */
.skeleton { --skeleton-base: var(--dune); --skeleton-shine: color-mix(in srgb, var(--paper) 75%, transparent); }
.skeleton .incentive-block, .skeleton .skeleton-panel { --skeleton-base: color-mix(in srgb, var(--rule) 45%, var(--dune)); --skeleton-shine: color-mix(in srgb, var(--paper) 55%, transparent); }
.skeleton-bar { display: inline-block; max-width: 100%; height: .72em; vertical-align: middle; background-color: var(--skeleton-base); background-image: linear-gradient(100deg, transparent 0 40%, var(--skeleton-shine) 50%, transparent 60% 100%); background-size: 300vw 100%; background-repeat: no-repeat; background-attachment: fixed; animation: skeleton-sweep 1.8s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes skeleton-sweep { from { background-position: -200vw 0; } to { background-position: 0 0; } }
.skeleton-w10 { width: 10%; } .skeleton-w15 { width: 15%; } .skeleton-w20 { width: 20%; } .skeleton-w25 { width: 25%; } .skeleton-w30 { width: 30%; } .skeleton-w35 { width: 35%; } .skeleton-w40 { width: 40%; } .skeleton-w45 { width: 45%; } .skeleton-w50 { width: 50%; } .skeleton-w55 { width: 55%; } .skeleton-w60 { width: 60%; } .skeleton-w70 { width: 70%; } .skeleton-w80 { width: 80%; } .skeleton-w85 { width: 85%; } .skeleton-w100 { width: 100%; }
.skeleton h1, .skeleton h2, .skeleton .eyebrow, .skeleton p { color: transparent; }
.skeleton h1 .skeleton-bar, .skeleton h2 .skeleton-bar { height: .62em; }
.skeleton .skeleton-bar--back { width: 8.5rem; height: 1em; }
.skeleton-back { display: inline-block; }
.page > .skeleton--admin .skeleton-back { margin-bottom: var(--space-2); }
/* D26 navigation: the actual slim header and bottom tab bar remain in place.
   Home has one quiet photo block and a card at its foot, not the old welcome
   columns. Nothing here is fixed or layered above the shell. */
.page-loading:has(.skeleton--home) { width: 100%; padding: 0; }
.skeleton--home .skeleton-shape { position: relative; min-height: calc(100svh - var(--header-h) - var(--tabbar-h, 51px)); display: grid; align-content: end; padding: var(--space-4) var(--gutter); }
.skeleton-home-photo { position: absolute; inset: 0; background: var(--dune); }
.skeleton-home-card { position: relative; width: min(100%, 28rem); padding: var(--space-3); border: 1px solid var(--rule); background: var(--paper); }
.skeleton-home-card h2 { margin: var(--space-2) 0; font-size: var(--display-sm); line-height: var(--lh-tight); }
.skeleton-home-card p { margin: var(--space-1) 0; }
.skeleton-home-progress { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--rule); }
/* Leaderboard: compact heading, category tabs, own-result outline and list. */
.page-loading:has(.skeleton--tool) { padding-top: var(--space-4); }
.skeleton-leaderboard-heading { max-width: 48rem; }
.skeleton-leaderboard-heading p { margin: 0; }
.skeleton-leaderboard-heading h1 { margin: var(--space-1) 0 var(--space-3); font-size: var(--display-md); line-height: var(--lh-tight); }
.skeleton-leaderboard-tabs { display: flex; gap: var(--space-4); padding-block: var(--space-2); border-block: 1px solid var(--rule); }
.skeleton-leaderboard-tabs .skeleton-bar { max-width: 8rem; }
.skeleton-leaderboard-summary { border: 1px solid var(--rule); margin-block: var(--space-3); padding: var(--space-3); }
.skeleton-leaderboard-summary h2 { margin: 0; font-size: var(--display-sm); }
.skeleton-leaderboard-summary p { margin: var(--space-2) 0 0; }
.skeleton-leaderboard-list .skeleton-rows { border-top-color: var(--rule); }
/* Other tool placeholders retain their shared typography. */
.skeleton .page-header h1 .skeleton-bar { width: clamp(12rem, 40%, 36rem); }
.skeleton-tab { flex: 0 0 6rem; padding: 1.15rem 0 1rem; font-size: .75rem; }
.skeleton .tool-nav--desktop .skeleton-tab::before { content: ""; display: block; height: 1em; background-color: var(--skeleton-base); background-image: linear-gradient(100deg, transparent 0 40%, var(--skeleton-shine) 50%, transparent 60% 100%); background-size: 300vw 100%; background-repeat: no-repeat; background-attachment: fixed; animation: skeleton-sweep 1.8s cubic-bezier(.4, 0, .6, 1) infinite; }
.skeleton .tool-nav--desktop .skeleton-tab { font-size: 0; }
.skeleton .tool-nav--desktop .skeleton-tab::before { height: .75rem; margin-block: .08rem .12rem; }
.skeleton-panel { min-height: 22rem; padding: var(--space-5) clamp(2rem, 4vw, 4.5rem); background: var(--dune); display: flex; flex-direction: column; justify-content: flex-end; }
.skeleton-panel h2 { margin: 0 0 1rem; font-size: clamp(2.4rem, 3.6vw, 4.2rem); line-height: 1; }
.skeleton-panel p { margin: .35rem 0; }
/* Rows: the height of a table or list row. */
.skeleton-rows { border-top: 1px solid var(--ink); }
.skeleton-row { min-height: 66px; display: flex; align-items: center; gap: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.skeleton-row .skeleton-bar { flex: none; }
.skeleton-section h2 { margin: 0 0 var(--space-3); font-size: 2.5rem; line-height: 1; }
.skeleton-inline p { margin: .5rem 0; }
@media (max-width: 900px) {
  .page > .skeleton--admin .skeleton-back { margin-bottom: var(--space-5); }
  .skeleton .tool-nav-mobile { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .skeleton-tool-nav-mobile .skeleton-tab { min-height: 48px; display: flex; align-items: center; padding: 0 .65rem; }
  .skeleton-tool-nav-mobile .skeleton-tab + .skeleton-tab { border-left: 1px solid var(--rule); }
  .skeleton .page-header h1 .skeleton-bar { width: min(80%, 300px); }
  .skeleton--home .skeleton-shape { padding: 0; min-height: 0; height: calc(100svh - var(--header-h) - var(--tabbar-h, 51px) - env(safe-area-inset-bottom) - 1px); grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .skeleton-home-photo { position: static; min-height: 0; }
  .skeleton-home-card { width: auto; margin: var(--space-2) var(--gutter); }
  .page-loading:has(.skeleton--tool) { padding-top: var(--space-3); }
  .skeleton-panel { min-height: 15rem; padding: 2rem 1.25rem; }
  .skeleton-row { min-height: 62px; gap: 1rem; }
}
@media (max-width: 700px) {
  .skeleton-row .skeleton-bar:nth-child(n + 3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar, .skeleton .tool-nav--desktop .skeleton-tab::before { animation: none !important; background-image: none; }
}
/* The old spinner class (still used by Accounts & Intake until its owner moves
   to skeleton()): a placeholder block with the same shimmer. */
.loading-mark { width: min(100%, 40rem); height: 9rem; border: 0; border-radius: 0; background-color: var(--dune); background-image: linear-gradient(100deg, transparent 0 40%, color-mix(in srgb, var(--paper) 75%, transparent) 50%, transparent 60% 100%); background-size: 300vw 100%; background-repeat: no-repeat; background-attachment: fixed; animation: skeleton-sweep 1.8s cubic-bezier(.4, 0, .6, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .loading-mark { animation: none !important; background-image: none; } }

/* Tap targets (lane 32, narrowed by UX1): the header, language, back, footer,
   Dismiss and tab controls now have real 44px boxes (base.css); the inline text
   actions keep their look and get an invisible 44 x 44 hit area. */
:is(.text-cta, .text-button) { position: relative; }
:is(.text-cta, .text-button)::before { content: ""; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); min-width: 44px; min-height: 44px; }
/* Form fields show the focus ring whenever they have focus (date fields included). */
.live-issue-fields :is(input, select, textarea):focus, .campaign-select select:focus { outline: var(--focus); outline-offset: 2px; }


/* Before the page script has loaded, #app is empty: instead of a white page it
   shows the header rule and a first skeleton (return link, eyebrow, heading and
   a panel), drawn with backgrounds only, with the same slow shine. The script's
   own skeleton replaces it as soon as it runs. */
#app:empty {
  /* UX1: the page column comes from the padding (the shared gutter), not 100vw;
     the shine and the header rule span the whole box, the rest sits in the column. */
  --app-top: calc(var(--header-h) + var(--space-6));
  --app-rest: 0 calc(var(--header-h) - 1px), 0 calc(var(--header-h) / 2 - 8px), 0 var(--app-top), 0 calc(var(--app-top) + 16px + var(--space-6)), 0 calc(var(--app-top) + 16px + var(--space-6) + 12px + var(--space-4)), 0 calc(var(--app-top) + 16px + var(--space-6) + 12px + var(--space-4) + 4rem + var(--space-5));
  min-height: 100vh;
  padding-inline: max(var(--gutter), (100% - 1440px) / 2);
  background-origin: border-box, border-box, content-box, content-box, content-box, content-box, content-box;
  background-color: var(--paper);
  background-image: linear-gradient(100deg, transparent 0 40%, color-mix(in srgb, var(--paper) 75%, transparent) 50%, transparent 60% 100%),
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--dune), var(--dune)), linear-gradient(var(--dune), var(--dune)), linear-gradient(var(--dune), var(--dune)), linear-gradient(var(--dune), var(--dune)), linear-gradient(var(--dune), var(--dune));
  background-repeat: no-repeat;
  background-size: 300vw 100%, 100% 1px, 7.5rem 16px, 8.5rem 12px, 9rem 12px, min(34rem, 60%) 3.5rem, 100% 20rem;
  background-position: -200vw 0, var(--app-rest);
  background-attachment: fixed, scroll, scroll, scroll, scroll, scroll, scroll;
  animation: app-sweep 1.8s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes app-sweep { from { background-position: -200vw 0, var(--app-rest); } to { background-position: 0 0, var(--app-rest); } }
@media (max-width: 900px) {
  #app:empty { --app-rest: 0 calc(var(--header-h) - 1px), 0 calc(var(--header-h) / 2 - 7px), 0 var(--app-top), 0 calc(var(--app-top) + 16px + var(--space-5)), 0 calc(var(--app-top) + 16px + var(--space-5) + 12px + var(--space-3)), 0 calc(var(--app-top) + 16px + var(--space-5) + 12px + var(--space-3) + 3rem + var(--space-4)); background-size: 300vw 100%, 100% 1px, 6rem 14px, 8.5rem 12px, 9rem 12px, min(20rem, 70%) 2.5rem, 100% 15rem; }
}
@media (prefers-reduced-motion: reduce) { #app:empty { animation: none !important; background-position: -400vw 0, var(--app-rest); } }

/* D15: scoped quality statuses can contain several service-reported states. */
.oversight-quality { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oversight-quality article { min-width: 0; }
.oversight-quality article strong { overflow-wrap: anywhere; font-size: clamp(1.15rem, 2vw, 1.8rem); }
.rankings-scope { margin: 0 0 1.25rem; color: var(--muted); font-size: .85rem; }
@media (max-width: 900px) {
  .oversight-quality { grid-template-columns: minmax(0, 1fr); }
  .oversight-quality article { border-right: 0; border-bottom: 1px solid var(--rule); }
}

.home-upload-scope { max-width: 70ch; color: var(--muted); }
.home-upload-rows article { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.home-upload-rows h3 { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.home-upload-rows dl { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-bottom: 0; }
.home-upload-rows dt { font-size: .8rem; color: var(--muted); }
.home-upload-rows dd { margin: .35rem 0 0; font-size: 1.4rem; }

.home-upload-loading { display: grid; gap: 1rem; padding-block: 1rem; }
.home-upload-loading .skeleton-bar { width: min(100%, 28rem); height: 5rem; }

.issue-list summary, .attention-row a {min-width:44px;min-height:44px;box-sizing:border-box; padding-top:12px;padding-bottom:12px;}
.tool-nav a{white-space:nowrap;}
.tool-nav-mobile details > div a{min-width:0;}
.results-state{min-height:0;padding-block:2rem;}
.results-state h2{font-size:clamp(24px,4vw,32px);line-height:1.2;}
.results-next-actions{display:flex;flex-wrap:wrap;gap:24px;}
#my-position{scroll-margin-top:110px;}
@media(max-width:700px){.leaderboard tbody tr{padding:12px;gap:4px;}.leaderboard td{padding:4px 0;}.leaderboard td strong{font-size:16px;}.leaderboard td[data-label]{min-height:0;}.leaderboard td:before{max-width:45%;}.leaderboard td{overflow-wrap:anywhere;}}

/* Phone standings (UX1): the row label is 12px and takes a proportional
   column instead of a fixed 92px one, so long French labels wrap rather than shrink. */
@media(max-width:700px){.leaderboard tbody tr{min-height:0;padding:12px 76px 12px 8px;}.leaderboard td:nth-child(1){right:8px;top:10px;}.leaderboard td:nth-child(1) strong{font-size:24px;white-space:nowrap;}.leaderboard td:nth-child(2){padding-right:0;}.leaderboard td:nth-child(3):has(:empty){display:none;}.leaderboard td::before{width:38%;min-width:6rem;max-width:none;padding-right:.5rem;vertical-align:top;font-size:.75rem;line-height:1.3;letter-spacing:.02em;}.leaderboard td{font-size:.875rem;}.leaderboard td strong{font-size:.875rem;}}

@media(max-width:700px){.tool-nav-mobile a,.tool-nav-mobile summary{padding-inline:6px;letter-spacing:.02em;}.program-campaigns dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.program-campaigns dd{overflow-wrap:anywhere;}}

/* P1-E: reference tokens, shared controls, responsive reports and dialogs. */
.problem-footer-link { text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--text-xs); }
/* G7: in the footer row "Report a problem" (a button in V2, a link on Sales Upload) looks like its neighbour, the privacy link: quiet, uppercase, no rule, a 44px tap box; the row wraps on a phone. */
.site-footer-links .problem-footer-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; }
.site-footer-links .problem-footer-link:hover { gap: 0; text-decoration: underline; text-underline-offset: .35rem; }
/* P1-J: "Try again" and "Report this problem" are two separate quiet links in one wrapping row, each with its own underline. */
.problem-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); margin-block-start: var(--space-2); }
.problem-actions > * { margin: 0; }
.problem-dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--field-border); width: min(46rem, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--space-2)); padding: var(--space-3); overflow-y: auto; }
.problem-dialog::backdrop { background: rgb(0 0 0 / .5); }
.problem-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-2); }
.problem-dialog-heading h2 { margin: 0 0 var(--space-3); }
.problem-form { display: grid; gap: var(--space-3); }
.problem-form fieldset, .problem-page fieldset { border: 1px solid var(--field-border); padding: var(--space-2); min-width: 0; }
.problem-choice { display: flex; align-items: center; gap: var(--space-1); min-height: var(--tap); cursor: pointer; }
.problem-choice input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; accent-color: var(--ink); }
.problem-form textarea, .problem-page textarea { width: 100%; min-height: 8rem; resize: vertical; }
.problem-form .field, .problem-page .field { margin-block: var(--space-2); }
.problem-page .tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.problem-page .tabs [aria-current] { border-bottom: 2px solid var(--ink); }
.problem-page .data-table { width: 100%; margin-block: var(--space-3); }
.problem-page td small { display: block; color: var(--muted); }
.problem-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; align-items: end; gap: var(--space-2); }
.problem-filters .field { margin: 0; }
.problem-conversation { list-style: none; padding: 0; margin-block: var(--space-3); }
.problem-conversation li, .problem-alert { border-block-start: 1px solid var(--rule); padding-block: var(--space-2); }
.problem-conversation time { color: var(--muted); font-size: var(--text-sm); }
.problem-prose { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; }
.problem-reference, .problem-page code, .problem-dialog code { overflow-wrap: anywhere; }
.problem-details { display: grid; grid-template-columns: minmax(6rem,1fr) minmax(0,3fr); gap: var(--space-1); }
.problem-details dd { margin: 0; overflow-wrap: anywhere; }
.problem-dot { display: inline-block; margin-inline-start: var(--space-1); color: var(--ink); font-size: var(--text-xs); }
.problem-page .notice { margin-block: var(--space-2); }
.problem-page [data-pr-message] { max-width: 46rem; }
.problem-page .disclosure { margin-block: var(--space-2); }
@media (max-width: 900px) { .problem-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .problem-filters { grid-template-columns: 1fr; } .problem-dialog { padding: var(--space-2); } }
.problem-inline-form { border-block: 1px solid var(--rule); padding-block: var(--space-3); margin-block: var(--space-3); max-width: 46rem; }

/* css/consultant.css */
/* Lane UX4, sales consultant experience (wave 2): Dashboard hero, the
   positions-only standings window, compact Incentives header, Program Info and
   the sales consultant Home. Only UX4 edits this file. Use base.css tokens and
   components (.btn, .status-chip, .tabs, .disclosure, .data-table). */

/* ---- Compact Incentives header, every role (board notes #20, #37) ---------
   The program is the h1, "Incentives" the eyebrow, both on the left. The
   skeleton uses the same .page-header, so loading and loaded pages match. */
/* The loading placeholder keeps one heading line, the height of a one-line program name. */
.skeleton .page-header h1 { height: 1em; }

/* ---- Category switch above the hero (D24 item 2) -------------------------
   A segmented row of links: one row at every width, labels wrap rather than
   shrink, the current category is filled ink and semibold. */
.category-switch { margin-top: var(--space-4); }
.category-switch ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: fit-content; max-width: 100%; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ink); }
.category-switch li + li { border-left: 1px solid var(--ink); }
.category-switch a { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 48px; padding: .5rem 1.25rem; color: var(--ink); font-size: var(--text-xs); line-height: var(--lh-snug); letter-spacing: var(--track-label); text-align: center; text-decoration: none; text-transform: uppercase; overflow-wrap: break-word; hyphens: auto; }
.category-switch a[aria-current="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
@media (hover: hover) { .category-switch a:not([aria-current="true"]):hover { background: var(--dune); } }
@media (forced-colors: active) { .category-switch a[aria-current="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } }

/* ---- Dashboard hero (board note #22, D24 item 1) ------------------------- */
.consultant-hero { margin-top: var(--space-3); }
.consultant-hero .rank-campaign .eyebrow { color: var(--photo-text); }
.consultant-hero .movement { max-width: 11rem; padding-bottom: 1.6rem; color: var(--ink); font-size: var(--text-sm); line-height: var(--lh-snug); }
.consultant-hero .movement span { color: inherit; }
.consultant-hero .rank-number, .consultant-home .incentive-block .rank strong { font-variant-numeric: lining-nums; }
.consultant-hero .rank-facts p.consultant-status { justify-content: flex-start; }
.consultant-hero--waiting { grid-template-rows: 1fr; }
.consultant-waiting { align-items: center; }
.consultant-waiting h2 { margin: 0; font-size: clamp(2.2rem, 3vw, 3.25rem); line-height: 1.05; }
.consultant-waiting p:last-child { max-width: 34ch; margin: 1rem 0 0; color: var(--muted); }
@media (min-width: 901px) {
  .consultant-hero--waiting .consultant-waiting { box-shadow: inset 1px 0 var(--ink), inset -1px 0 var(--ink), inset 0 1px var(--ink), inset 0 -1px var(--ink); }
}

/* Focal points for the approved artwork, so the subject sits in the frame
   (board note #8: the tote is centred rather than cut at the right edge). */
:is(.program-lead, .rank-campaign, .campaign-visual) img[src$="/fg-tote.jpg"] { object-position: 85% 50%; }
:is(.program-lead, .rank-campaign, .campaign-visual) img[src$="/fg-hero-model.jpg"] { object-position: 50% 25%; }

/* ---- Positions-only window (board note #14, decision 2026-10-02) --------- */
.position-window-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-3) var(--space-5); align-items: start; }
.position-facts { margin: 0; border-top: 1px solid var(--ink); }
.position-facts > div { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.position-facts dt { color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.position-facts dd { margin: .35rem 0 0; font-size: var(--text-lg); font-weight: 600; line-height: var(--lh-snug); font-variant-numeric: lining-nums tabular-nums; }
.position-facts dd small { display: block; margin-top: .3rem; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.position-window { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.position-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 2.5rem; padding: .2rem .75rem; border-bottom: 1px solid var(--rule); font-size: var(--text-sm); }
.position-rank { font-family: Octave, Georgia, serif; font-size: 1.375rem; font-weight: 300; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.position-who { color: var(--muted); }
.position-row--own { padding-left: calc(.75rem - 3px); border-left: 3px solid var(--ink); background: var(--dune); }
.position-row--own .position-who, .position-own { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Peer amounts in the window (approximate, rounded to $100): never styled as the viewer's own. */
.position-amount { font-variant-numeric: tabular-nums; }
.position-line { display: flex; align-items: center; min-height: 2.5rem; padding: .2rem .75rem; border-bottom: 2px dashed var(--ok); color: var(--ok); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.position-gap { padding: .1rem .75rem; border-bottom: 1px solid var(--rule); color: var(--muted); line-height: 1.2; }
.position-disclosure { border-top: 1px solid var(--ink); }
.position-disclosure > summary { padding-inline: .75rem; }
.position-disclosure .position-window { border-top-color: var(--rule); }
.position-disclosure .disclosure-body { padding: 0; }

/* ---- Rankings before the first results (board note #32) ------------------ */
.rankings-explainer { max-width: 780px; padding: 0 0 var(--space-5); }
.rankings-explainer h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.05; }
.rankings-explainer-lead { margin: 1rem 0 var(--space-4); color: var(--muted); font-size: var(--text-md); }
.rankings-explainer ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.rankings-explainer li { position: relative; padding: 1rem 0 1rem 2rem; border-bottom: 1px solid var(--rule); }
.rankings-explainer li::before { content: ""; position: absolute; top: 1.75rem; left: 0; width: .9rem; border-top: 1px solid var(--ink); }
.rankings-first-update { margin: var(--space-3) 0 0; font-weight: 600; }
.rankings-first-update--pending { color: var(--muted); font-weight: 400; }

/* ---- Program Info, every role (board notes #8, #9) ----------------------- */
/* The display face draws old-style figures, so "3" dropped below "Categories".
   Lining figures keep a count level with its words. */
:is(.program-ways-title, .routes-section) h2, .program-campaigns .route-number { font-variant-numeric: lining-nums; }

/* ---- Sales consultant Home (board note #35, D24 item 3) ------------------
   Slimmer: the welcome on top, the current-incentive card in the left half and
   the Sales Issues summary beside it. The home skeleton shares .alex-hero. */
.alex-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "identity identity" "card side"; column-gap: var(--space-5); min-height: 0; border-bottom: 0; }
.alex-hero .identity { grid-area: identity; display: block; padding: 0 0 var(--space-4); }
.alex-hero .identity h1 { margin-bottom: .75rem; font-size: clamp(2.75rem, 4.4vw, 4.5rem); line-height: 1; }
.alex-hero .incentive-block { grid-area: card; justify-content: flex-start; }
.skeleton .alex-hero .skeleton-second-line { display: none; }
.consultant-home-side { grid-area: side; }
.consultant-home-side .section { padding-top: 0; }
.consultant-home .incentive-block { padding: 0; }
.consultant-home .home-campaign-content { padding: var(--space-4) clamp(1.5rem, 3vw, 3rem); }
.consultant-home .home-campaign-content h2 { font-size: clamp(2rem, 2.6vw, 2.75rem); }
.consultant-home .incentive-block .subheading { margin: .5rem 0 var(--space-3); }
.consultant-home .incentive-block .rank { margin-bottom: .75rem; }
.consultant-home .incentive-block .rank strong { font-size: clamp(4rem, 6vw, 5rem); }
.consultant-home .incentive-block .rank span small { display: block; margin-top: .2rem; font-size: var(--text-xs); }
.consultant-home .home-movement { max-width: none; margin: 0 0 .75rem; padding: 0; color: var(--ink); text-align: left; font-weight: 600; }
.consultant-home .incentive-block .rank-details { padding: .75rem 0; }
.consultant-home .incentive-block .data-date { margin: .75rem 0 1rem; }
.home-result-waiting { margin: 0 0 var(--space-3); }
.home-result-heading { margin: 0; font-family: Octave, Georgia, serif; font-size: var(--text-xl); font-weight: 300; line-height: 1.2; }
.home-result-waiting .home-result-unavailable { margin: .35rem 0 0; color: var(--muted); }

@media (max-width: 900px) {
  .category-switch { margin-top: 1.25rem; }
  .category-switch ul { width: 100%; }
  .category-switch a { padding: .4rem .5rem; }
  .consultant-hero { margin-top: 1rem; }
  .consultant-hero .rank-campaign .eyebrow { display: block; margin-bottom: .25rem; }
  .consultant-hero .movement { padding-bottom: .2rem; }
  .consultant-waiting { padding-block: 1.5rem; }
  .consultant-waiting h2 { font-size: 2rem; }
  .alex-hero .identity { padding-bottom: 1.5rem; }
  .alex-hero .identity h1 { margin-bottom: .5rem; font-size: clamp(2rem, 9vw, 2.375rem); }
  .consultant-home .home-campaign-content { padding: 1.5rem var(--gutter); }
  .consultant-home .incentive-block .rank strong { font-size: 3.75rem; }
  .consultant-home-side .section { padding-top: 2rem; }
}
@media (max-width: 700px) {
  /* Phones: sentence case and no tracking, so French labels such as
     « Précommandes » fit without breaking inside a word; cells share the row
     by content. */
  .category-switch ul { display: flex; }
  .category-switch li { flex: 1 1 auto; }
  .category-switch a { padding: .4rem .45rem; letter-spacing: 0; text-transform: none; }
  .position-window-layout { grid-template-columns: minmax(0, 1fr); }
  .position-row { grid-template-columns: 3.75rem minmax(0, 1fr) auto; gap: .75rem; min-height: 2.25rem; }
  .position-rank { font-size: 1.25rem; }
  .rankings-explainer h2 { font-size: 2.1rem; }
}
/* D26-3: the published Rankings table. Keep explicit table roles when phone
   rows use grid; supplemental cells remain available to assistive technology.
   The old sticky line strip and .jump-position link are gone (lane L2 put the
   line in the list as a divider row; the jump is a button). */
.rankings-rows #my-position { scroll-margin-block: calc(var(--header-h) + 1rem) 7rem; }
.rankings-rows .leaderboard th { text-transform: none; letter-spacing: normal; }
/* The legacy card breakpoint includes tablets; restore the table there. */
@media (min-width: 701px) and (max-width: 900px) {
  .rankings-rows .leaderboard { display: table; }
  .rankings-rows .leaderboard thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .rankings-rows .leaderboard tbody { display: table-row-group; }
  .rankings-rows .leaderboard tr { display: table-row; padding: 0; }
  .rankings-rows .leaderboard td {
    display: table-cell;
    position: static;
    padding: 1rem .5rem;
    border-bottom: 1px solid var(--rule);
  }
  .rankings-rows .leaderboard td::before { display: none; }
  .rankings-rows .leaderboard .numeric { text-align: right; }
}

/* Polish round (22 Oct): the Rankings controls use the portal's field and
   button styles. Desktop: search, sort and the two jumps on one row; phones:
   the search on its own row, then the sort and the jumps. The privacy
   explanation is a disclosure; the data-through date stays by the count. */
.ranking-head--list { padding-block: var(--space-3) var(--space-2); }
.ranking-head--list .eyebrow { margin: 0 0 var(--space-1); }
.ranking-head--list h2 { font-size: var(--display-sm); line-height: var(--lh-snug); }
.ranking-head--list + .status-banner { padding-block: .75rem; }
.rankings-rows { padding-top: var(--space-2); }
.ranking-controls { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-1); margin: 0; }
.ranking-search {
  position: relative;
  display: flex;
  flex: 1 1 18rem;
  align-items: center;
  min-width: 0;
  max-width: 32rem;
  min-height: 48px;
  border: 1px solid var(--field-border);
  background: var(--paper);
}
.ranking-search:focus-within { outline: var(--focus); outline-offset: 2px; }
.ranking-search-icon { display: inline-flex; flex: none; padding-left: .8rem; color: var(--muted); }
.ranking-search-label { flex: 1; min-width: 0; }
.ranking-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 .6rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 var(--text-md)/1.4 var(--font-text);
  appearance: none;
}
.ranking-search input:focus-visible { outline: none; }
.ranking-search input::-webkit-search-cancel-button { appearance: none; display: none; }
.ranking-clear {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  min-height: var(--tap);
  margin-right: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.ranking-clear[hidden] { display: none; }
.ranking-clear:focus-visible { outline-offset: -4px; }
.ranking-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.ranking-sort { position: relative; display: flex; min-width: 0; }
.ranking-sort-icon { position: absolute; top: 50%; left: .8rem; display: inline-flex; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
/* Safari's native select ignores the left padding, so the sort icon covered
   "Highest first" (Pasha's screenshot, 23 Oct): no native look, own chevron. */
.ranking-sort::after { content: ""; position: absolute; top: 50%; right: .9rem; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ranking-sort select {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  min-height: 48px;
  padding: 0 2.3rem 0 2.6rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-sm)/1.4 var(--font-text);
  cursor: pointer;
}
.ranking-sort select option { color: var(--ink); background: var(--paper); }
.ranking-jump { padding-inline: 1rem; white-space: nowrap; }
.ranking-jump .ranking-icon { flex: none; }
.ranking-label-short { display: none; }
/* Count and data-through on the left, the explanation's disclosure on the
   right; opened, the disclosure takes the full width below. */
.rankings-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.rankings-count-line { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; color: var(--muted); font-size: var(--text-xs); }
.rankings-about { flex: 0 1 auto; border-top: 0; }
.rankings-about > summary { gap: .6rem; padding-block: .5rem; font-size: var(--text-sm); }
.rankings-about[open] { flex-basis: 100%; border-bottom: 1px solid var(--rule); }
.rankings-about[open] > summary { justify-content: flex-start; }
.rankings-about .rankings-scope { max-width: 62ch; margin: 0; color: var(--muted); font-size: var(--text-sm); }
.rankings-divider { scroll-margin-block: 110px; }
.rankings-divider td { border-block: 2px solid var(--ink); background: var(--dune); font-weight: 600; }
.rankings-rows tr:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.position-who { min-width: 0; overflow-wrap: anywhere; }
.position-who small { display: block; font-size: var(--text-xs); }

/* Phones: the search on its own row, then the sort and the two jumps in
   one row (icons and short labels; the long label stays the button's
   accessible name). Rows are two lines: rank | name, distributor | amount,
   status. */
@media (max-width: 700px) {
  .ranking-head--list { padding-block: .75rem var(--space-1); }
  .ranking-head--list + .status-banner { padding-block: .6rem; }
  /* The current tab already says Rankings, and the select names itself:
     on phones the eyebrow and the Category label stay for assistive
     technology only. */
  .ranking-head--list .eyebrow,
  .ranking-head--list .campaign-select > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ranking-head--list h2 { font-size: 1.75rem; line-height: 1.1; }
  .ranking-head--list h2 + p { margin-block: .25rem 0; }
  .ranking-head--list .campaign-select { margin-top: .5rem; }
  .rankings-rows { padding-top: var(--space-1); }
  .rankings-meta { margin-bottom: var(--space-1); }
  .rankings-count-line { flex-direction: column; }
  .ranking-search { flex-basis: 100%; max-width: none; }
  .ranking-actions { display: grid; flex: 1 1 100%; grid-template-columns: minmax(0, 1fr) auto auto; }
  /* Room for the sort wording: the icons step aside on phones. */
  .ranking-sort-icon, .ranking-jump .ranking-icon { display: none; }
  .ranking-sort select { width: 100%; padding: 0 2rem 0 .75rem; }
  .ranking-sort::after { right: .75rem; }
  .ranking-jump { min-height: 48px; padding-inline: .75rem; }
  .ranking-label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ranking-label-short { display: inline; }
  .rankings-rows--compact .leaderboard-wrap { overflow: visible; }
  .rankings-rows--compact .leaderboard,
  .rankings-rows--compact .leaderboard tbody { display: block; }
  .rankings-rows--compact .leaderboard tr {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-areas: "rank name amount" "rank distributor status";
    align-items: baseline;
    column-gap: .75rem;
    row-gap: .1rem;
    min-height: 44px;
    margin: 0;
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--rule);
    font-size: var(--text-sm);
  }
  .rankings-rows--compact .leaderboard td {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: var(--text-sm);
  }
  .rankings-rows--compact .leaderboard td::before { display: none; }
  .rankings-rows--compact .leaderboard td:nth-child(1) { grid-area: rank; align-self: center; }
  .rankings-rows--compact .leaderboard td:nth-child(2) { grid-area: name; }
  .rankings-rows--compact .leaderboard td:nth-child(3) { grid-area: distributor; color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
  .rankings-rows--compact .leaderboard td:nth-child(4) { grid-area: amount; font-weight: 600; text-align: right; white-space: nowrap; }
  .rankings-rows--compact .leaderboard td:nth-child(5) { grid-area: status; text-align: right; }
  .rankings-rows--compact .leaderboard td:nth-child(5) .row-status { color: var(--muted); font-size: var(--text-xs); }
  .rankings-rows--compact .leaderboard td:first-child strong {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--lh-body);
    white-space: nowrap;
  }
  .rankings-rows--compact .leaderboard td:nth-child(2) > strong { display: inline; font-weight: 400; overflow-wrap: anywhere; }
  .rankings-rows--compact .leaderboard td:nth-child(2) small { display: inline; margin-left: .4rem; font-size: var(--text-xs); }
  .rankings-rows--compact .leaderboard td:nth-child(2) small + small { display: block; margin-left: 0; }
  .rankings-rows--compact .leaderboard tr.current-user {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    box-shadow: none;
  }
  .rankings-rows--compact .leaderboard .current-user td:nth-child(2) > strong { font-weight: 600; }
  .rankings-rows--compact .leaderboard tr.current-user :is(td, strong, small, .numeric, .row-status) { color: var(--paper); }
  /* The divider band spans the whole row (it was narrower in dark mode). */
  .rankings-rows--compact .leaderboard tr.rankings-divider { display: block; padding: .75rem .5rem; border-block: 2px solid var(--ink); background: var(--dune); }
  .rankings-rows--compact .rankings-divider td { display: block; border: 0; }
}
/* Small phones: the sort takes its own row, the two jumps share the next. */
@media (max-width: 380px) {
  .ranking-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ranking-sort { grid-column: 1 / -1; }
}

/* css/operations.css */
/* Lane UX5, operations for Keune admin and distributor admin (wave 2, PC-first):
   the shared distributor status table, Admin Home, Data Quality, Results Admin
   summary line and the distributor admin Home. Only UX5 edits this file. Use
   base.css tokens and components (.data-table, .status-chip, .disclosure, .btn). */

/* ---- Shared ------------------------------------------------------------- */
.ops-muted { color: var(--muted); }
.ops-intro, .ops-failures { max-width: 75ch; margin: 0 0 var(--space-1); color: var(--muted); line-height: var(--lh-body); }
.ops-failures { color: var(--ink); }
.ops-section-head { align-items: baseline; flex-wrap: wrap; row-gap: .25rem; }
.ops-asof { margin: 0; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.ops-more { margin: var(--space-2) 0 0; }
.ops-coming-later { margin-top: var(--space-2); font-size: var(--text-sm); }

/* ---- Network overview (Admin Home) -------------------------------------- */
.ops-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-items: center; margin-top: var(--space-4); padding: var(--space-4); background: var(--dune); }
.ops-overview-head h2 { margin: 0; font-size: var(--display-sm, clamp(2rem, 3vw, 3rem)); line-height: var(--lh-tight); }
.ops-overview-head .eyebrow { margin-bottom: var(--space-1); }
.ops-overview-scope { margin: var(--space-1) 0 0; color: var(--muted); line-height: var(--lh-body); }
.ops-overview-head [role="alert"], .ops-overview-head [role="status"] { margin: var(--space-1) 0 0; }
.ops-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.ops-stat { min-width: 0; border-bottom: 1px solid var(--rule-strong); }
.ops-stat + .ops-stat { border-left: 1px solid var(--rule-strong); }
.ops-stat > a, .ops-stat > div { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; height: 100%; min-height: var(--tap); box-sizing: border-box; padding: 1rem .9rem 1.1rem; color: var(--ink); text-decoration: none; }
.ops-stat > a:hover .ops-stat-label { text-decoration: underline; text-underline-offset: .2em; }
.ops-stat-figure { font-family: var(--font-text, Acumin, Arial, sans-serif); font-size: var(--text-xl); font-weight: 600; line-height: var(--lh-tight); font-variant-numeric: lining-nums tabular-nums; }
.ops-stat-label { font-size: var(--text-sm); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.ops-stat .status-chip { margin-top: auto; }

/* ---- Distributor status table ------------------------------------------- */
.ops-status .section-head { margin-bottom: var(--space-1); }
.ops-table-wrap { margin-top: var(--space-2); }
.ops-table { table-layout: auto; }
.ops-table th, .ops-table td { padding: .55rem .5rem; vertical-align: middle; }
.ops-table thead th { line-height: var(--lh-snug); overflow-wrap: normal; }
.ops-table tbody th { padding-left: 0; font-size: var(--text-sm); font-weight: 600; letter-spacing: normal; text-align: left; text-transform: none; border-bottom: 1px solid var(--rule); }
.ops-table--full th, .ops-table--full td { padding-inline: .4rem; }
.ops-table .status-chip { white-space: normal; overflow-wrap: normal; word-break: normal; }
.ops-row-toggle { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: var(--tap); padding: .35rem .5rem .35rem .65rem; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.ops-row-toggle > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; overflow-wrap: anywhere; }
.ops-row-toggle::after { content: "+" / ""; flex: none; font-size: 1.25rem; font-weight: 300; line-height: 1; }
.ops-row-toggle[aria-expanded="true"]::after { content: "\2212" / ""; }
.ops-row-toggle:hover > span:first-child { text-decoration-thickness: 2px; }
.ops-row--error > th { box-shadow: inset 3px 0 var(--error); }
.ops-row--warn > th { box-shadow: inset 3px 0 var(--warn); }
.ops-row:has(+ .ops-detail:not([hidden])) > * { border-bottom-color: transparent; }
.ops-detail > td { padding: 0 0 var(--space-2); border-bottom: 1px solid var(--rule); }
.ops-detail-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); gap: var(--space-2) var(--space-4); padding: 1rem 1.25rem; background: var(--dune); }
.ops-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem var(--space-3); margin: 0; }
.ops-facts dt { color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.ops-facts dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.ops-links { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.ops-links .text-cta { min-height: var(--tap); box-sizing: border-box; }
.ops-all-clear { margin: var(--space-1) 0 0; }

/* ---- Sales import history (Data Quality) --------------------------------- */
.ops-history-section .section-title { margin-bottom: var(--space-1); }
.incentive-section.ops-history-section h2 { font-size: clamp(1.625rem, 2.5vw, 2rem); } /* at or below the page title (N30 repair) */
.ops-history td { vertical-align: top; }
.ops-history time { white-space: nowrap; }
.ops-reference { border-top: 0; }
.ops-reference > summary { justify-content: flex-start; min-height: var(--tap); padding: .35rem 0; font-size: var(--text-sm); font-weight: 400; text-decoration: underline; text-underline-offset: .2em; }
.ops-reference code { overflow-wrap: anywhere; font-size: var(--text-sm); }
.ops-reference .disclosure-body p { margin: 0 0 .35rem; }

/* ---- Admin Home --------------------------------------------------------- */
.home-admin .section, .home-distributor .section { padding-top: var(--space-4); }
.home-admin .tool-groups, .home-distributor .tool-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); padding-top: 1.25rem; }
.home-distributor .tool-groups, .home-admin .tool-groups--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-admin .tool-group h3, .home-distributor .tool-group h3 { min-height: 0; margin-bottom: .5rem; }
.home-admin .tool-row, .home-distributor .tool-row { min-height: 52px; padding: .55rem 0; }

/* ---- Distributor admin Home: the upload action --------------------------- */
.ops-upload { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "title title" "action status"; gap: var(--space-2) var(--space-4); align-items: center; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--dune); }
.ops-upload-title { grid-area: title; margin: 0; font-family: var(--font-text, Acumin, Arial, sans-serif); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.ops-upload-action { grid-area: action; }
.ops-upload-status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--space-3); min-width: 0; }
.ops-upload-status > p { margin: 0; }
.ops-upload-status > .problem-inline-error { flex: 1 1 100%; min-width: 0; }
.ops-upload-status > .problem-inline-error > p { margin: 0; }
.ops-upload-last { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.ops-upload-last > span:first-child { font-weight: 600; }
.ops-upload-counts { display: flex; flex-wrap: wrap; gap: .25rem var(--space-3); margin: 0; }
.ops-upload-counts div { display: flex; gap: .4rem; align-items: baseline; }
.ops-upload-counts dt { color: var(--muted); font-size: var(--text-sm); }
.ops-upload-counts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-upload .home-upload-loading { padding: 0; }
.ops-upload .home-upload-loading .skeleton-bar { height: 1.5rem; }

/* ---- Incentives Dashboard for Keune admins and distributor admins -------- */
.ops-dashboard .section { padding-top: var(--space-4); }
.ops-dashboard .section-head { margin-bottom: var(--space-1); }
.ops-results-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--space-3); padding: .75rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.ops-results-line > p { flex: 1 1 22rem; margin: 0; line-height: var(--lh-body); }
.ops-results-line .text-cta { margin-left: auto; min-height: var(--tap); box-sizing: border-box; }
.ops-dashboard .attention .section-head { margin-bottom: var(--space-1); }

/* ---- Results Admin: one summary line, the list in a disclosure ------------ */
.results-distributor-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 var(--space-1); }
.results-distributor-summary > span:last-child { color: var(--muted); }
.results-distributor-details > summary { font-size: var(--text-sm); }

/* ---- Compact desktop and tablet ------------------------------------------ */
@media (max-width: 1150px) {
  .ops-overview { grid-template-columns: minmax(0, 1fr); }
  .home-admin .tool-groups, .home-distributor .tool-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-detail-body { grid-template-columns: minmax(0, 1fr); }
}
/* Below 900px the status table becomes one card per distributor, as the shared
   .data-table does below 700px; the cells keep their column names. */
@media (max-width: 900px) {
  .ops-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ops-stat:nth-child(4) { border-left: 0; }
  .ops-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .ops-table, .ops-table tbody { display: block; }
  .ops-table .ops-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem 1rem; padding: .5rem 0 .9rem; border-bottom: 1px solid var(--rule); }
  .ops-table .ops-row > * { display: block; min-width: 0; padding: 0; border: 0; }
  .ops-table .ops-row > th { grid-column: 1 / -1; box-shadow: none; }
  .ops-table .ops-row > td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .2rem; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); line-height: var(--lh-snug); text-transform: uppercase; }
  .ops-row--error { box-shadow: inset 3px 0 var(--error); padding-left: .75rem; }
  .ops-row--warn { box-shadow: inset 3px 0 var(--warn); padding-left: .75rem; }
  .ops-table .ops-row { padding-left: .75rem; }
  .ops-row-toggle { padding-left: 0; }
  .ops-table .ops-detail { display: block; }
  .ops-table .ops-detail[hidden] { display: none; }
  .ops-table .ops-detail > td { display: block; padding: 0 0 1rem; }
  .ops-history tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1rem; }
  .ops-history tr > td { padding: 0; border: 0; }
  .ops-history tbody tr { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
  .ops-history td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .2rem; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
  .ops-history :is(th, td).numeric { text-align: left; }
  .ops-upload { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "action" "status"; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-3) var(--gutter); }
  .ops-overview { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-3) var(--gutter); }
}
@media (max-width: 700px) {
  .ops-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-stat + .ops-stat { border-left: 0; }
  .ops-stat:nth-child(even) { border-left: 1px solid var(--rule-strong); }
  .ops-table .ops-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-history tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-history td:last-child { grid-column: 1 / -1; }
  .home-admin .tool-groups, .home-distributor .tool-groups { grid-template-columns: minmax(0, 1fr); }
  .ops-upload .btn { width: 100%; }
  .ops-results-line .text-cta { margin-left: 0; }
  .ops-asof { white-space: normal; }
  /* The Sales issues row stacks so its link never squeezes the counts. */
  :is(.home-admin, .home-distributor, .ops-dashboard) .attention-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

/* D32: distributor codes, periods and validation fields may be long. */
.ops-uploads .attention-row > div, .ops-mappings .attention-row > div { min-width: 0; overflow-wrap: anywhere; }

/* Distributor welcome remains a content hero (N30 item 8). */
.home-distributor .identity--compact { padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.home-distributor .identity--compact h1 { margin-bottom: .5rem; font-size: clamp(2.6rem, 4vw, 4.25rem); }
.home-distributor .identity--compact .eyebrow { margin-bottom: var(--space-2); }

/* css/lists.css */
/* Lane UX6, lists and actions (wave 2): Sales Issues cases, Product Mapping
   table, Accounts remove-access flow, Site Content publish button and the Sales
   Upload history rows. Only UX6 edits this file. Use base.css tokens and
   components (.btn, .data-table, .disclosure, .notice, .status-chip). */

/* ---- Sales Issues: compact cases (notes #10, #28) --------------------------
   Title line: case number, type and salon, then the status chip and the
   updated date. History and the update form sit behind disclosures. */
.issue-list .issue-case { display: block; padding: var(--space-2) 0; }
.issue-case-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem var(--space-3); }
.issue-list .issue-case-head h3 { margin: 0; font-size: var(--text-md); font-weight: 600; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.issue-case-number { margin-right: .35rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.issue-list .issue-case-status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 0; }
.issue-case-updated { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.issue-list .issue-case-people { margin: .25rem 0 0; font-size: var(--text-sm); }
.issue-list .issue-case-comments { max-width: 75ch; margin: .5rem 0 0; color: var(--ink); overflow-wrap: anywhere; }
.issue-case-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--space-4); margin-top: .25rem; }
.issue-case-actions > .disclosure { border-top: 0; }
.issue-case-actions > .disclosure > summary { font-size: var(--text-sm); }
.issue-case-actions > .disclosure[open] { flex: 1 1 100%; }
.issue-list .issue-case-history-empty { display: flex; align-items: center; min-height: var(--tap); margin: 0; font-size: var(--text-sm); }
.issue-case-history .disclosure-body section + section { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--rule); }
.issue-case-update .live-issue-editor { margin: 0; }
.issue-case-update .live-issue-fields { margin-top: 0; }
.issue-case-update legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.live-issue-editor .btn { margin-top: .25rem; }

/* ---- Product Mapping: one table row per mapping (note #27) -----------------
   Review expands the row in place: details, the decision form and history. */
.mapping-count { margin: 0 0 var(--space-1); color: var(--muted); }
.mapping-table td { overflow-wrap: anywhere; }
.mapping-code { display: block; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.mapping-distributor { display: block; margin-top: .15rem; color: var(--muted); font-size: var(--text-sm); }
.mapping-missing { color: var(--muted); }
.mapping-table .mapping-toggle-cell { width: 1%; text-align: right; white-space: nowrap; vertical-align: middle; }
.mapping-toggle { min-height: var(--tap); padding: .5rem 1rem; }
.mapping-entry.is-open > .mapping-row > td { border-bottom-color: transparent; background: var(--dune); }
.mapping-table .mapping-detail > td { padding: 0 .65rem var(--space-3); background: var(--dune); }
.mapping-detail-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; }
.mapping-detail-body .metric-rows { border-top-color: var(--rule-strong); }
.mapping-detail-body .metric-rows > div { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr); gap: 1rem; align-items: baseline; padding: .5rem 0; border-bottom-color: var(--rule-strong); }
.mapping-detail-body .metric-rows dt { font-size: var(--text-sm); }
.mapping-detail-body .metric-rows dd { margin: 0; font-family: var(--font-text); font-size: var(--text-sm); overflow-wrap: anywhere; }
.mapping-detail-body .mapping-history { grid-column: 1 / -1; margin-top: 0; }
.mapping-editor--inline { margin-top: 0; }
.mapping-editor--inline h3 { margin: 0 0 .75rem; font-size: var(--text-md); }
.mapping-editor--inline fieldset { background: var(--paper); }
.mapping-empty { margin: var(--space-2) 0; }
@media (max-width: 900px) {
  .mapping-detail-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mapping-table .mapping-toggle-cell { width: auto; padding-top: .5rem; text-align: left; white-space: normal; }
  .mapping-table .mapping-detail > td { padding: 1rem; }
  .mapping-entry.is-open > .mapping-row { border-bottom: 0; background: var(--dune); }
  .mapping-entry.is-open > .mapping-row > td { padding-inline: 1rem; }
  .mapping-detail-body .metric-rows > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .mapping-detail-body .metric-rows dd { margin: 0; text-align: left; }
  .mapping-entry.is-open > tr { padding-block: 0; border-bottom: 0; }
  .mapping-entry.is-open > .mapping-row { padding-top: .5rem; }
  .mapping-entry.is-open > .mapping-detail { margin-bottom: .75rem; }
}
.mapping-pending { min-height: var(--tap); cursor: pointer; }
.mapping-pending input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--ink); }

/* ---- Accounts: Remove access is a quiet text action (note #41) -------------
   The confirmation dialog names the person; only its confirm button is red. */
.accounts-live :is(.accounts-remove, .accounts-keep) { padding-inline: 0; white-space: nowrap; }
@media (max-width: 700px) {
  .accounts-live .dialog-actions .btn { width: 100%; }
  .accounts-live .accounts-table :is(.accounts-remove, .accounts-keep) { white-space: normal; }
}
.issue-case-actions > .disclosure > summary { justify-content: flex-start; width: fit-content; }

/* css/van-loader.css */
/* N31: first-document loading only. The van drives along a faded 1940s Amsterdam
   quay (scene E, credits in version2/van-loader.js). Images are CSS backgrounds from
   the publish root's brand/van-loader/, preloaded by the release HTML.
   To swap the street or road image (transparent webp is fine), replace the file and,
   if its displayed tile width changes, --houses-tile / --road-tile (CSS px). Speed is
   --van-speed (CSS px/s) for street, road and wheels together; --wheel-travel is the
   wheel circumference at the 190 px van width. Display colour comes from portal tokens;
   the #000 values in the masks are alpha stops only. */
.n31-pending .document-loading { visibility: hidden; }
.n31-loader {
  position: fixed; inset: 50% 0 auto; transform: translateY(-50%); display: grid; justify-items: center; gap: var(--space-1);
  pointer-events: none;
}
.n31-loader:not(.n31-art-ready) .street { visibility: hidden; }
.n31-loader p { margin: 0; font: inherit; color: var(--muted); }
.n31-loader .n31-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.n31-loader .street {
  --van-speed: 165; --houses-tile: 481; --road-tile: 400; --wheel-travel: 140.151;
  --scenery-filter: grayscale(1) contrast(.88); --scenery-blend: multiply;
  --houses-opacity: .58; --road-opacity: .64; --body-filter: brightness(1.04);
  position: relative; isolation: isolate; width: min(360px, calc(100% - 16px)); height: 210px; overflow: hidden; background: var(--paper);
}
:root[data-theme="dark"] .n31-loader .street {
  --scenery-filter: grayscale(1) brightness(.72) contrast(.88); --scenery-blend: normal;
  --houses-opacity: .42; --road-opacity: .35; --body-filter: brightness(1.22) contrast(.96);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .n31-loader .street {
    --scenery-filter: grayscale(1) brightness(.72) contrast(.88); --scenery-blend: normal;
    --houses-opacity: .42; --road-opacity: .35; --body-filter: brightness(1.22) contrast(.96);
  }
}
.n31-loader .houses, .n31-loader .cobbles { position: absolute; filter: var(--scenery-filter); mix-blend-mode: var(--scenery-blend); background-repeat: repeat-x; }
.n31-loader .houses {
  inset: 8px 0 auto; height: 150px; opacity: var(--houses-opacity);
  background-image: url('/brand/van-loader/amsterdam-street-soft.webp'); background-position: 0 100%; background-size: calc(var(--houses-tile) * 1px) 150px;
  mask-image: radial-gradient(ellipse 48% 73% at 50% 57%, #000 32%, #000b 59%, #0003 80%, transparent 100%);
  animation: n31-houses calc(var(--houses-tile) / var(--van-speed) * 1s) linear infinite;
}
.n31-loader .cobbles {
  inset: auto 0 12px; height: 56px; opacity: var(--road-opacity);
  background-image: url('/brand/van-loader/cobbles-soft.webp'); background-position: 0 0; background-size: calc(var(--road-tile) * 1px) 56px;
  mask-image: radial-gradient(ellipse 48% 100% at 50% 12%, #000 36%, #000b 62%, #0003 83%, transparent 100%);
  animation: n31-cobbles calc(var(--road-tile) / var(--van-speed) * 1s) linear infinite;
}
.n31-loader .van { position: absolute; z-index: 1; left: 50%; bottom: 28px; width: 190px; aspect-ratio: 660 / 369; margin-left: -95px; isolation: isolate; filter: var(--body-filter); }
.n31-loader .van div { position: absolute; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; filter: url(#n31-solid-alpha); }
.n31-loader .body { inset: 0; background-image: url('/brand/van-loader/van-body.webp'); animation: n31-bounce .32s ease-in-out infinite; }
.n31-loader .wheel { width: 23.48%; aspect-ratio: 1; animation: n31-spin calc(var(--wheel-travel) / var(--van-speed) * 1s) linear infinite; }
.n31-loader .w0 { left: 8.43%; top: 56.77%; background-image: url('/brand/van-loader/van-wheel-0.webp'); }
.n31-loader .w1 { left: 76.07%; top: 57.88%; background-image: url('/brand/van-loader/van-wheel-1.webp'); }
@keyframes n31-houses { to { background-position: calc(var(--houses-tile) * -1px) 100%; } }
@keyframes n31-cobbles { to { background-position: calc(var(--road-tile) * -1px) 0; } }
@keyframes n31-spin { to { transform: rotate(360deg); } }
@keyframes n31-bounce { 50% { transform: translateY(-.65px); } }
@media (prefers-reduced-motion: reduce) {
  .n31-loader { transition: none; }
  .n31-loader .houses, .n31-loader .cobbles, .n31-loader .wheel, .n31-loader .body { animation: none !important; }
}

/* css/home-hero.css */
/* N34: consultant Home only. Photo slot and token-based translucent card. */
.home-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.home-hero-layout:has(.consultant-home-side) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.home-hero-layout .consultant-home-side { grid-area: auto; }
.home-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 32.5rem; padding: var(--space-3); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); background: var(--ink); }
.home-hero-media, .home-hero-media::after { position: absolute; inset: 0; z-index: -1; }
.home-hero-media { overflow: hidden; }
.home-hero-media picture, .home-hero-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero-media canvas[hidden] { display: none; }
.home-hero-media::after { content: ""; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / .72), rgb(0 0 0 / .56) 25%, rgb(0 0 0 / .1) 50%, rgb(0 0 0 / .35)); }
.home-hero-media picture img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.home-hero-focal-center picture img { object-position: 50% 50%; }
.home-hero-focal-right picture img { object-position: 75% 50%; }
/* Lane HERO6 drew the picture at its own rectangle (not object-fit) so the
   shader, the fireworks and the overlays share one box; lane HERO7 (Desk
   Q102) keeps that and drops the outpainted extension: the picture file is the
   2880x1975 scene itself (hero-media.js: canvas = scene; phones: the approved
   1373 px slice), so FILE = KEEP and the scale s below is plain cover:
   max(W / keep-w, H / keep-h). The hero takes the scene's aspect at the full
   width again (deploy 24, 0e094fe), so s = W / 2880 and the scene shows whole,
   at the same scale and place as deploy 24; should the content ever need more
   room the box grows and the picture crops a little off the sides (anchored
   by --anchor-x / --anchor-y like the old object-position). All rectangles
   are scene pixels (scripts/export-home-hero.py); the file is the part of the
   scene the picture file holds. The derived values use container units, so
   they resolve against the box they are used in: the media box, or the
   celebrating hero (a size container of the same box). */
.home-hero--sea, .home-hero--celebrate {
  --file-x: 0; --file-y: 0; --file-w: 2880; --file-h: 1975;
  --keep-x: 0; --keep-y: 0; --keep-w: 2880; --keep-h: 1975;
  --photo-y: 0; --photo-h: 1619; --anchor-x: .5; --anchor-y: .5;
  --s: max(min(100cqw / var(--keep-w), 100cqh / var(--keep-h)), 100cqw / var(--file-w), 100cqh / var(--file-h));
  --pic-w: calc(var(--file-w) * var(--s)); --pic-h: calc(var(--file-h) * var(--s));
  --pic-x: clamp(100cqw - var(--pic-w), var(--anchor-x) * (100cqw - var(--keep-w) * var(--s)) - (var(--keep-x) - var(--file-x)) * var(--s), 0px);
  --pic-y: clamp(100cqh - var(--pic-h), var(--anchor-y) * (100cqh - var(--keep-h) * var(--s)) - (var(--keep-y) - var(--file-y)) * var(--s), 0px);
}
:is(.home-hero--sea, .home-hero--celebrate) .home-hero-media { container-type: size; }
:is(.home-hero--sea, .home-hero--celebrate) .home-hero-media picture { inset: auto; left: var(--pic-x); top: var(--pic-y); width: var(--pic-w); height: var(--pic-h); }
/* Overlays (RGB on black) over the picture, in scene pixels: the group lies
   exactly over the picture and screens onto it (and onto the grades above it). */
.home-hero-scene { position: absolute; z-index: 2; pointer-events: none; left: var(--pic-x); top: var(--pic-y); width: var(--pic-w); height: var(--pic-h); mix-blend-mode: screen; }
.home-hero-scene > * { position: absolute; display: block; max-width: none; left: calc((var(--x) - var(--file-x)) / var(--file-w) * 100%); top: calc((var(--y) - var(--file-y)) / var(--file-h) * 100%); width: calc(var(--w) / var(--file-w) * 100%); height: calc(var(--h) / var(--file-h) * 100%); }
/* Lane HERO6 (Q95 = 4x): the KEUNE sign's dusk glow (hero-media.js sign.rect). */
.home-hero-glow--sign { --x: 1678; --y: 1153; --w: 160; --h: 62; }
/* The celebration text's last lines fall on the sign (its bottom is at photo y
   556 of 751, the sign's base at 548): the glow is dimmed there so the white
   text keeps its contrast over the bulbs (measured, .local-data/hero6). */
.home-hero--celebrate .home-hero-glow--sign { opacity: .4; }
/* Lane HERO6 (Desk Q98 = all3, lane MOODS prototype): time-of-day moods on the
   normal hero. Home renders the mood (home-hero.js heroMood: an approximate
   sunset at 38 N from the date and the time zone) as a class, so it is in the
   first paint; Day has no class and no extra bytes. A mood = a grade on the
   picture and the water canvas (filters are affine per channel, so the
   canvas's premultiplied change over the picture grades exactly like the
   picture), a multiply gradient in .home-hero-media::before, a soft-light one
   in .home-hero-grade (not ::after: phones darken the welcome there), and
   screened overlays in .home-hero-scene, all after the picture in the DOM.
   Save-Data: the grades stay, the overlay images are not emitted. */
.home-hero-grade { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; }
.home-hero-glow--lights { --x: 595; --y: 357; --w: 1283; --h: 565; }
/* Golden hour: warmer, lower light; a sunset tint on the sky and the sea; deeper warm shadows. */
.home-hero--mood-golden .home-hero-media picture, .home-hero--mood-golden .home-hero-media canvas { filter: sepia(.28) saturate(1.22) brightness(.98) contrast(1.06); }
.home-hero--mood-golden .home-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgb(236 170 150), rgb(250 206 176) 12%, rgb(255 236 216) 34%, rgb(255 244 230) 62%, rgb(250 226 214) 80%, rgb(232 204 206)); }
.home-hero--mood-golden .home-hero-grade { display: block;
  background: radial-gradient(ellipse 75% 60% at 6% 0%, rgb(255 176 90 / .75), rgb(255 176 90 / 0) 100%),
    linear-gradient(180deg, rgb(255 150 70 / .35), rgb(255 160 80 / .25) 58%, rgb(255 160 80 / .1) 72%, rgb(255 120 110 / .35) 86%, rgb(240 120 140 / .35)); }
/* The sunset on the sea, screened, over the scene's sea (from just above the
   shoreline to the bottom). Tuned for phones too: the prototype's brown sheen
   looked muddy on the small picture, so a lighter, rosier, thinner one. */
.home-hero-sheen { --x: 0; --y: 1304; --w: 2880; --h: 671; background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(255 150 96 / .26) 8%, rgb(240 134 120 / .2) 30%, rgb(186 110 150 / .13) 68%, rgb(130 90 150 / .09)); }
.home-hero--mood-golden .home-hero-glow--sign { opacity: .55; }
/* Evening (blue hour): a cool, darker grade, flatter light, the sky deepening to the top;
   warm windows, path and pool lights; the KEUNE bulbs and their pool on the sand.
   Lane HERO7 (Desk Q102): moderately brighter (the grade was .7 and the multiply
   gradient a stop deeper), so the resort, the lit windows and the sign read at
   1440 and on phones; still blue hour, cooler and darker than the celebration. */
.home-hero--mood-evening .home-hero-media picture, .home-hero--mood-evening .home-hero-media canvas { filter: brightness(.82) saturate(.74) contrast(.97); }
.home-hero--mood-evening .home-hero-media canvas { opacity: .65; } /* fewer sun glints at night */
.home-hero--mood-evening .home-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgb(74 92 156), rgb(118 138 204) 14%, rgb(172 188 236) 40%, rgb(192 206 244) 62%, rgb(178 196 240) 82%, rgb(162 182 232)); }
.home-hero--mood-evening .home-hero-grade { display: block; background: radial-gradient(ellipse 38% 26% at 50% 42%, rgb(255 190 120 / .36), rgb(255 190 120 / 0)); }
.home-hero--mood-evening .home-hero-glow--lights { filter: brightness(1.25); }
.home-hero-welcome { color: #fff; }
.home-hero-welcome .eyebrow { color: inherit; margin: 0 0 var(--space-1); }
.home-hero-welcome h1 { color: inherit; margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: var(--lh-tight); }
/* N34-B: approved option B card. Worst case over a black or white photo keeps
   --muted at 5.1:1 (light) and 5.9:1 (dark) on the 88% paper (tests/n34-home-hero.test.mjs). */
.home-hero-card { width: min(100%, 28rem); padding: var(--space-2); display: grid; gap: var(--space-1); background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home-hero-card { background: color-mix(in srgb, var(--paper) 96%, transparent); }
}
.home-hero-card h2 { font: 600 var(--text-sm)/var(--lh-snug) Acumin, sans-serif; margin: 0; }
.home-hero-card p { margin: 0; }
.home-hero-rank { display: flex; gap: var(--space-2); align-items: center; }
.home-hero-rank > strong { font: 300 3rem/1 Octave, Georgia, serif; font-variant-numeric: lining-nums; white-space: nowrap; }
.home-hero-rank > div > span { display: block; font-size: var(--text-xs); color: var(--muted); }
.home-hero-card .home-hero-movement { text-align: left; color: var(--ink); font-size: var(--text-xs); }
.home-hero-track { position: relative; height: .375rem; background: color-mix(in srgb, var(--paper) 80%, var(--ink)); }
.home-hero-track--mini { height: .25rem; margin-top: var(--space-1); }
/* Bullet graph (Q43): the Top N line as a tick; the fill runs past it when ahead. */
.home-hero-tick { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; margin-left: -1px; background: var(--ink); }
.home-hero-tick-100 { margin-left: -2px; }
.home-hero-tick-0 { margin-left: 0; }
.home-hero-fill { display: block; height: 100%; background: color-mix(in srgb, var(--clay) 65%, var(--ink)); transform-origin: left; animation: home-hero-fill 1.6s cubic-bezier(.2,.7,.2,1) both; }
.home-hero-marks { display: flex; justify-content: space-between; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.home-hero-marks > :last-child { text-align: right; }
.home-hero-line-mark::before { content: ""; display: inline-block; width: 2px; height: .75rem; margin-right: .375rem; vertical-align: -.125rem; background: var(--ink); }
.home-hero-road { font-size: var(--text-sm); }
.home-hero-road b, .home-hero-other-line b { font-weight: 600; }
/* Other categories inside the same card, under a thin rule (N34-B follow-up). */
.home-hero-others { display: grid; gap: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--rule); }
.home-hero-card .home-hero-other-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.home-hero-other-line { font-size: var(--text-sm); font-variant-numeric: lining-nums; }
.home-hero-other--urgent .home-hero-other-line { font-weight: 600; color: var(--ink); }
.home-hero-card .status-chip { justify-self: start; }
.home-hero-date { font-size: var(--text-xs); color: var(--muted); }
/* Desk Q80: Pending verification / Official results for the shown category. */
.home-hero-card .home-hero-final { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.home-hero-card .home-hero-final--confirmed { color: var(--ink); }
.home-hero-card .home-hero-retry { min-height: var(--tap); justify-self: start; }
.home-hero-card .text-cta { min-height: var(--tap); display: flex; align-items: center; justify-self: start; }
.home-hero-card .home-result-heading { font: 300 var(--text-xl)/var(--lh-snug) Octave, Georgia, serif; }
/* Lane HERO2 (after lanes WHY, RF and HERO): the scene is the 2880x1619 photo
   plus 356 rows of synthesised sea below it (2880x1975). The hero box takes the
   scene's own aspect at the full hero width, so the picture shows whole,
   nothing cut off: the sky, the photo as shot, then the sea. Lane HERO3: the
   normal hero gets that height from its frame (a minimum: should the content
   need more room the box grows and the picture crops a little off the sides
   rather than the content overflowing). Lane HERO7 (Desk Q102): restored after
   lane HERO6's first-screen framing drew the resort 15-23% smaller on laptops.
   Phones: the whole phone slice at its own aspect, capped at 80svh, the card
   and the why below it. The celebration uses the same box, so the full sky
   holds the fireworks. Constants follow scripts/export-home-hero.py
   (tests/home-why.test.mjs). */
.home-hero--sea { --hero-top: var(--header-h); container-type: inline-size; min-height: 0; padding: 0; gap: 0; background: rgb(0 52 53); } /* the scene's deepest sea, should the content ever run past it */
.home-hero--sea:not(.home-hero--bleed) { --hero-top: calc(var(--header-h) + var(--space-6)); }
/* Lane HERO3: the frame is a grid: the welcome across the top, the card right
   below it (a tight gap, so the card ends well inside the first screen), and
   the why in the right-hand forest opposite the card, top-aligned with it, so
   the resort stays clear in the middle. The frame is the whole scene (still a
   minimum). */
.home-hero--sea .home-hero-frame { position: relative; flex: none; min-height: calc(100cqw * var(--keep-h) / var(--keep-w)); padding: var(--space-3); display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr) minmax(0, 23rem); grid-template-rows: auto auto minmax(0, 1fr); align-content: start; gap: var(--space-3) var(--space-4); }
.home-hero--sea .home-hero-welcome { grid-column: 1 / -1; }
.home-hero--sea .home-hero-card { grid-column: 1; grid-row: 2; align-self: start; }
/* The old darkening over the photo part (after the picture in paint order),
   continued gently over the sea. */
.home-hero--sea .home-hero-media::after { display: none; }
.home-hero--sea .home-hero-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .72), rgb(0 0 0 / .56) calc(25% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .1) calc(50% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .35) calc(100% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .45)); }
/* The why, an editorial quote in two parts: a short clay rule, the first
   sentence in the display face (light, upright), the second in the text face.
   No band or panel: a feathered darkening of the photo behind it (like the
   celebration text) and a soft shadow keep the body text at 4.5:1 or more over
   the brightest photo pixel behind it (.local-data/hero-harness/contrast-v3.mjs). */
.home-hero-why { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; position: relative; margin: 0; padding: 0; color: #fff; text-align: left; text-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 0 16px rgb(0 0 0 / .35); }
.home-hero-why::before { content: ""; display: block; width: 2.5rem; height: 1px; margin-bottom: var(--space-2); background: var(--clay); }
.home-hero-why::after { content: ""; position: absolute; z-index: -1; inset: -35% -22% -40%; pointer-events: none; background: radial-gradient(closest-side, rgb(0 0 0 / .5), rgb(0 0 0 / .38) 50%, rgb(0 0 0 / .14) 78%, rgb(0 0 0 / 0)); }
.home-hero-why > span { display: block; }
.home-hero-why-lead { max-width: 22ch; font: 300 clamp(1.5rem, 1.6vw, 2.1rem)/1.2 var(--font-display); text-wrap: balance; }
.home-hero-why-rest { max-width: 34ch; margin-top: .75rem; color: rgb(255 255 255 / .85); font: 400 1rem/1.5 var(--font-text); text-wrap: pretty; }
/* Lane HERO4 (the user, 16 Oct): B, .home-hero--why-bottom, is Home's
   placement (Home emits it); the rules above are the right-hand alternative A,
   what the hero shows without the modifier (the preview's "Why: Right", never
   Home). B: the quote centred at the bottom of the first screen, over the beach
   and the sea, as a short display headline on one line with the rest line under
   it. The frame's bottom padding lifts it from the hero's bottom to just above
   the first screen's bottom: max(margin, scene height - (100svh - the hero's
   top - margin)); a tall card pushes it down rather than under the card.
   --hero-top is where the hero starts: under the header (full bleed) or under
   the header and the page's top padding (framed). The feathered darkening is a
   wide ellipse behind the quote, strongest where the sand is brightest, so both
   parts keep 4.5:1 or more over the worst photo pixel behind them
   (.local-data/hero-harness/contrast-v4.mjs). */
.home-hero--why-bottom .home-hero-frame { padding-bottom: max(var(--space-4), 100cqw * var(--keep-h) / var(--keep-w) - (100svh - var(--hero-top) - var(--space-4))); }
.home-hero--why-bottom .home-hero-why { grid-column: 1 / -1; grid-row: 3; align-self: end; justify-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 0 18px rgb(0 0 0 / .5); }
.home-hero--why-bottom .home-hero-why::after { inset: -70% -30% -45%; background: radial-gradient(closest-side, rgb(0 0 0 / .72), rgb(0 0 0 / .6) 50%, rgb(0 0 0 / .3) 78%, rgb(0 0 0 / 0)); }
/* Lane HERO7: in deploy 24's framing the quote sits on the sand and the shallows,
   which the golden sheen and grade (and the brighter evening) lift: a deeper
   feathered darkening there keeps the rest line at 4.5:1 or more over the worst
   pixel (.local-data/hero7/contrast.mjs). Day is unchanged. */
:is(.home-hero--mood-golden, .home-hero--mood-evening).home-hero--why-bottom .home-hero-why::after { inset: -70% -38% -45%; background: radial-gradient(closest-side, rgb(0 0 0 / .86), rgb(0 0 0 / .76) 55%, rgb(0 0 0 / .42) 82%, rgb(0 0 0 / 0)); }
.home-hero--why-bottom .home-hero-why-lead { max-width: none; font-size: clamp(2rem, 2.8vw, 3.25rem); line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.home-hero--why-bottom .home-hero-why-rest { max-width: 64ch; margin-top: .6rem; color: rgb(255 255 255 / .94); font-size: clamp(1rem, 1.05vw, 1.2rem); text-wrap: balance; }
.home-hero--celebrate .home-hero-why { display: none; }
@keyframes home-hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Lane RF: a final, locked-in place. The welcome and the card give way to the
   celebration: the whole scene shows (the box above) so the hills and the full
   sky over the resort hold the fireworks, and the text sits on the photo itself
   (no panel), centred, in the dark forest band between the hotel and the beach.
   Position from the photo geometry: the hero is a size container of the media
   box, so the picture's own --s and --pic-y place the photo as shot (lane
   HERO6): its top at --pic-y + (photo-y - file-y) * s, its height photo-h * s
   (--photo-px). The hero takes the scene's aspect (lane HERO7: deploy 24's
   box again); phones: the slice's aspect, capped at 80svh. Round 5: the block's bottom (the sign-off
   line; the small link hangs just below it) sits at source y 556 of 751 of the
   photo, at least 8 source px above the sand under the centre (y ~565-585), and
   the sizes follow the photo height (--photo-px) so the top stays below the
   pool terrace (y ~425). */
.home-hero--celebrate { aspect-ratio: var(--keep-w) / var(--keep-h); padding: 0; container-type: size; --text-bottom: .7403; }
.home-hero > .home-hero-fireworks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* The old darkening over the photo part, continued gently over the sea. */
.home-hero--celebrate .home-hero-media::after { background: linear-gradient(180deg, rgb(0 0 0 / .72), rgb(0 0 0 / .56) calc(25% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .1) calc(50% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .35) calc(100% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .45)); }
/* A dusk grade on the daylight scene (and the water canvas that redraws it)
   while the fireworks play, so the colours pop; the gradient above stays. */
.home-hero--celebrate .home-hero-media picture, .home-hero--celebrate .home-hero-media canvas { filter: brightness(.97) saturate(.88) contrast(1.03); }
.home-hero--celebrate .home-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(150 160 220), rgb(205 205 238) 45%, rgb(232 230 246)); mix-blend-mode: multiply; }
.home-hero-celebration {
  --photo-px: calc(var(--photo-h) * var(--s));
  position: absolute; z-index: 1; left: 50%; transform: translateX(-50%);
  bottom: calc(100cqh - (var(--pic-y) + (var(--photo-y) - var(--file-y)) * var(--s) + var(--photo-px) * var(--text-bottom)));
  width: min(100cqw - 2 * var(--space-3), 52rem); display: flex; flex-direction: column; align-items: center; text-align: center; text-wrap: balance;
  color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 0 24px rgb(0 0 0 / .45);
}
/* A feathered darkening of the photo behind the text and the link below it: part of the grade, no edge. */
.home-hero-celebration::before { content: ""; position: absolute; z-index: -1; inset: -38% -12% -62%; pointer-events: none; background: radial-gradient(closest-side, rgb(0 0 0 / .58), rgb(0 0 0 / .44) 50%, rgb(0 0 0 / .18) 78%, rgb(0 0 0 / 0)); }
/* Round 5 typography: Octave Light display, Acumin text, a quiet eyebrow and an italic sign-off.
   The eyebrow and the link stay at .75rem: the portal allows no text below 12px (tests/css-system.test.mjs). */
.home-hero-celebration .eyebrow { margin: 0 0 min(.5rem, var(--photo-px) * .008); color: rgb(255 255 255 / .85); font: 500 .75rem/1.2 var(--font-text); letter-spacing: .24em; text-transform: uppercase; }
.home-hero-celebration h1 { margin: 0 0 min(.75rem, var(--photo-px) * .014); color: inherit; font: 300 clamp(1.7rem, var(--photo-px) * .06, 2.85rem)/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.home-hero-celebration .home-hero-celebration-earned { margin: 0; font: 400 clamp(.78rem, var(--photo-px) * .0245, 1.15rem)/1.4 var(--font-text); }
.home-hero-celebration .home-hero-celebration-see { margin: min(.35rem, var(--photo-px) * .0075) 0 0; font: italic 300 clamp(.82rem, var(--photo-px) * .026, 1.2rem)/1.25 var(--font-display); }
.home-hero-celebration-see > span { white-space: nowrap; } /* the sign-off stays whole */
/* The link on its own line, centred, hanging just below the block (about 1rem of
   clear space above its letters); its 44px target does not count in the block. */
.home-hero-celebration .text-cta { position: absolute; top: calc(100% - .2rem); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); margin: 0; padding: 0; color: inherit; border: 0; white-space: nowrap; font: 400 .75rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.home-hero-celebration .home-sample-note { font-size: var(--text-xs); }
/* Compact desktop and landscape tablets: a narrower card, and the picture
   anchored at its left edge (should the box ever grow past the scene's aspect,
   the crop comes off the right, not the left), keep the resort buildings
   (source x 520-770) clear of the card. The shader and the overlays follow
   the drawn picture box. */
@media (min-width: 901px) and (max-width: 1150px) {
  .home-hero-card { width: min(100%, 20rem); }
  .home-hero--sea { --anchor-x: 0; }
}
/* A narrower hero (1150 px wide or less, so 901-1150 px screens full bleed):
   the right-hand forest beside the resort is too narrow for the quote (it
   would cover the right-hand buildings), so it moves onto the sea, bottom
   right, opposite the card, on a wider measure so it stays off the sand.
   (Lane HERO3, decided on the 1024 and 1100 shots: under the card it sat on
   the shoreline and grew the hero.) */
@container (max-width: 71.875rem) {
  .home-hero--sea:not(.home-hero--why-bottom) .home-hero-why { grid-column: 2 / -1; grid-row: 2 / 4; align-self: end; }
  .home-hero--sea:not(.home-hero--why-bottom) .home-hero-why-lead { max-width: 30ch; }
  .home-hero--sea:not(.home-hero--why-bottom) .home-hero-why-rest { max-width: 40ch; }
}
@media (max-width: 900px) {
  .consultant-home:has(.home-hero) { padding-top: 0; }
  .home-hero-layout:has(.consultant-home-side) { grid-template-columns: minmax(0, 1fr); }
  .home-hero { margin-inline: calc(-1 * var(--gutter)); min-height: 28.75rem; padding: var(--space-2); }
  .home-hero-welcome { padding: var(--space-1) calc(var(--gutter) - var(--space-2)); }
  .home-hero-card { width: min(100%, 28rem); }
  .home-hero--sea { min-height: 0; padding: 0; }
  .home-hero--sea .home-hero-frame { padding: var(--space-2); }
  .home-hero--celebrate { padding: 0; }
}
/* Lane D26-2 (deploy 26 mockup, approved 17 Oct): phones and portrait tablets.
   The first screen runs from the top bar to the bottom tab bar (--first: the
   shell's --header-h and --tabbar-visible, which on Home is the bar's whole
   height since it never hides there). Repair (user, 17 Oct: "more zoomed in
   than the mockup"): the photo is never zoomed or cropped: the whole slice at
   its own aspect, the full width (deploy 25's phone framing), its foot
   dissolving (a mask, so no seam) into the still sea of the main, which fills
   the rest of the first screen on taller phones. The welcome sits on the sky;
   the score card floats at the bottom of the first screen as frosted glass
   (compact; the toggle opens the rest), over the beach and the sea; the why
   follows after the first screen (or after the photo, if that is longer). */
@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
  .home-hero { display: block; min-height: 0; padding: 0; background: transparent; }
  :is(.home-hero--sea, .home-hero--celebrate) { --first: max(22rem, 100svh - var(--header-h) - var(--tabbar-visible)); }
  .home-hero-welcome { position: absolute; top: var(--space-2); left: 0; right: 0; padding: var(--space-1) var(--gutter); }
  .home-hero--sea { padding: 0; --sea-top: calc(var(--pic-y) + (var(--photo-y) + var(--photo-h) - var(--file-y)) * var(--s)); }
  .home-hero--sea .home-hero-frame { display: contents; }
  .home-hero--sea .home-hero-frame::after { content: none; }
  .home-hero--sea { --photo-box: calc(100cqw * var(--keep-h) / var(--keep-w)); }
  .home-hero--sea .home-hero-media { position: relative; z-index: 0; height: var(--photo-box);
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
  /* The old darkening for the welcome, continued gently over the photo's sea. */
  .home-hero--sea .home-hero-media::after { display: block; background: linear-gradient(180deg, rgb(0 0 0 / .72), rgb(0 0 0 / .56) calc(var(--sea-top) * .25), rgb(0 0 0 / .1) calc(var(--sea-top) * .5), rgb(0 0 0 / .35) var(--sea-top), rgb(0 0 0 / .45)); }
  .home-hero--sea .home-hero-card { position: absolute; z-index: 1; top: var(--first); left: .75rem; right: .75rem; width: auto; margin: 0; transform: translateY(calc(-100% - .75rem)); }
  /* The why on the sea, white (16:1 and more on the darkest-to-lightest sea). */
  .home-hero--sea .home-hero-why { display: block; justify-self: stretch; margin: var(--space-5) var(--gutter) 0; color: #fff; text-align: left; text-shadow: none; }
  /* The rest of the first screen is sea: the why starts below it (on the why, not the photo's margin, which would collapse into the why's). */
  .home-hero--sea .home-hero-why { margin-top: calc(max(0px, var(--first) - var(--photo-box)) + var(--space-5)); }
  .home-hero--sea .home-hero-why::after { content: none; }
  .home-hero.home-hero--sea .home-hero-why-lead { max-width: 30ch; font-size: 2rem; line-height: 1.1; letter-spacing: normal; white-space: normal; }
  .home-hero.home-hero--sea .home-hero-why-rest { max-width: 40ch; margin-top: .75rem; color: rgb(255 255 255 / .92); font-size: 1rem; text-wrap: pretty; }
  /* The celebration keeps deploy 25's box: the whole picture at its own
     aspect (capped at 80svh; the hero is the size container), so every launch
     spot of the fireworks stays in view and the text in the same forest band;
     the still sea continues below it to the first screen's foot and on. The
     phone sizes follow the photo height: the sizes approved on the old 506 px
     photo (390x844) as fractions of it, never larger than they were, so the
     block keeps its place between the buildings and the beach. */
  .home-hero--celebrate { width: calc(100% + 2 * var(--gutter)); max-height: 80svh; padding: 0; }
  /* Repair: the foot dissolves (a mask, as on the normal hero) into the main's own sea; a fade to
     --sea-0 left a step where the main's gradient is already darker. */
  .home-hero--celebrate .home-hero-media { -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
  .home-hero--celebrate .home-hero-media::after { background: linear-gradient(180deg, rgb(0 0 0 / .72), rgb(0 0 0 / .56) calc(25% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .1) calc(50% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .35) calc(100% * var(--photo-h) / var(--keep-h)), rgb(0 0 0 / .45)); }
  .home-hero-celebration { width: calc(100cqw - 2 * var(--space-2)); }
  /* Lane HERO5: the eyebrow at .94 on phones (4.40:1 at the worst pixel at .85). */
  .home-hero-celebration .eyebrow { margin-bottom: min(.4rem, var(--photo-px) * .0126); color: rgb(255 255 255 / .94); }
  .home-hero-celebration h1 { font-size: clamp(1.75rem, var(--photo-px) * .0711, 2.25rem); margin-bottom: min(.55rem, var(--photo-px) * .0174); }
  .home-hero-celebration .home-hero-celebration-earned { font-size: clamp(.8rem, var(--photo-px) * .0285, .9rem); line-height: 1.35; }
  .home-hero-celebration .home-hero-celebration-see { font-size: clamp(.9rem, var(--photo-px) * .0332, 1.05rem); }
  /* The compact card: the movement, the date and the link wait behind the toggle. */
  .home-hero-card:not(.is-expanded) :is(.home-hero-more, .home-hero-more-link) { display: none; }
  /* Mockup: each other category is one line in the compact card (label and standing run on); its mini bar shows when opened. */
  .home-hero-card:not(.is-expanded) .home-hero-other { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
  .home-hero-card:not(.is-expanded) .home-hero-track--mini { display: none; }
  .home-hero-card .home-hero-toggle { display: grid; }
  .home-hero-card .home-hero-rank { padding-right: 2.25rem; }
}
/* Portrait tablets: the card at the left, the mockup's 27rem. */
@media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) {
  .home-hero--sea .home-hero-card { left: var(--gutter); right: auto; width: min(27rem, 100% - 2 * var(--gutter)); transform: translateY(calc(-100% - var(--space-3))); }
}
/* The phone picture (sources below 701 px) is the full-height slice of the scene (hero-media.js phoneRect). */
@media (max-width: 700px) {
  .home-hero--sea, .home-hero--celebrate { --file-x: 736; --file-w: 1373; --keep-x: 736; --keep-w: 1373; }
  /* D26-2: the phone top bar's 44px holds 44px controls, so its 1px rule comes on top. */
  .home-hero--sea { --first: max(22rem, 100svh - var(--header-h) - 1px - var(--tabbar-visible)); }
}
/* The narrowest phones: a smaller heading so the block stays below the main buildings. */
@media (max-width: 380px) {
  .home-hero-celebration h1 { font-size: clamp(1.75rem, var(--photo-px) * .0711, 2rem); }
}
/* Lanes HERO2/HERO3: full bleed, Home's desktop layout since lane HERO3 (the
   user, 15 Oct: "Full-bleed across the page does look very good"; Home emits
   .home-hero--bleed). The hero runs edge to edge straight under the header,
   still at the whole scene's aspect; the content keeps the page's measure.
   The hero preview removes the class for the Framed comparison. Phones are
   already full bleed and unchanged. */
@media (min-width: 901px) {
  .consultant-home:has(.home-hero--bleed) { width: 100%; padding-top: 0; }
  .consultant-home:has(.home-hero--bleed) > :not(.home-hero-layout) { width: var(--page); margin-inline: auto; }
  .home-hero-layout:has(.home-hero--bleed) { grid-template-columns: minmax(0, 1fr); }
  .home-hero-layout:has(.home-hero--bleed) .consultant-home-side { width: var(--page); margin-inline: auto; }
  .home-hero--bleed .home-hero-frame { padding-inline: calc((100% - var(--page)) / 2 + var(--space-3)); }
  .home-hero--bleed .home-hero-welcome { padding-top: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-media canvas:not(.home-hero-fireworks) { display: none; }
  .home-hero-media img, .home-hero-fill { animation: none; transform: none; }
}
@media (forced-colors: active) {
  .home-hero-tick, .home-hero-line-mark::before { background: CanvasText; forced-color-adjust: none; }
  .home-hero-card, .home-hero-celebration { background: Canvas; color: CanvasText; }
  .home-hero-celebration::before { display: none; }
  .home-hero-scene, .home-hero-grade { display: none; }
  .home-hero-why::after { display: none; }
  .home-hero-why { background: Canvas; color: CanvasText; forced-color-adjust: none; }
  .home-hero-fill { background: Highlight; forced-color-adjust: none; }
}
/* Lane D26-2: the compact card's parts. The toggle (phones and tablets only)
   sits in the rank row's corner, a 44px target; on desktop the whole card shows. */
.home-hero-card { position: relative; }
.home-hero-toggle { display: none; position: absolute; top: .25rem; right: .25rem; width: var(--tap); height: var(--tap); place-items: center; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.home-hero-toggle svg { transition: transform .2s ease; }
.home-hero-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.home-hero-more { display: grid; gap: var(--space-1); }
.home-hero-more:empty { display: none; }
.home-hero-card :is(.home-hero-more, .home-hero-more-link) .text-cta { min-height: var(--tap); }
.home-hero-card .home-hero-more .home-hero-movement { padding-bottom: 0; }
/* User, 17 Oct: the rank number a little higher, and clear space between it and
   the status chip, which is about 75% of the mockup's chip (12px sentence case
   instead of 12px capitals: the portal allows no text below 12px). */
.home-hero-rank { align-items: flex-start; }
.home-hero-rank > strong { line-height: .82; margin-top: -.1rem; }
.home-hero-card .home-hero-final { margin-top: var(--space-1); text-transform: none; letter-spacing: normal; }
.home-hero-card .home-hero-status { gap: .3rem; padding: .05rem .4rem .05rem .3rem; font-size: var(--text-xs); line-height: 1.25; letter-spacing: .01em; text-transform: none; }
.home-hero-card .home-hero-status::before { width: .7rem; height: .7rem; }
/* Lane D26-2: the sea below the photo, down to the footer line, on every
   width: a still colour fade from the photo's own water (measured at the foot
   of the drawn hero, darkening included, per mood). The moving water stays
   inside the photo as in deploy 25. The main runs edge to edge (below), so
   its own background is the sea. */
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) {
  --sea-0: rgb(0 29 29); --sea-1: rgb(0 23 26); --sea-2: rgb(0 16 21);
  background: linear-gradient(180deg, var(--sea-0), var(--sea-1) 45%, var(--sea-2));
}
.consultant-home:has(.home-hero--mood-golden) { --sea-0: rgb(8 24 27); --sea-1: rgb(6 19 24); --sea-2: rgb(4 13 19); }
.consultant-home:has(.home-hero--mood-evening) { --sea-0: rgb(4 17 22); --sea-1: rgb(3 13 19); --sea-2: rgb(2 9 15); }
.consultant-home:has(.home-hero--celebrate) { --sea-0: rgb(1 24 25); --sea-1: rgb(1 19 23); --sea-2: rgb(1 13 19); }
/* Phones and tablets: the main runs edge to edge (the page's gutter moves inside it), so the sea does too; desktop is already full bleed. */
@media (max-width: 900px) {
  .consultant-home:has(.home-hero--sea, .home-hero--celebrate) { width: 100%; padding-inline: var(--gutter); }
}
/* Sales issues on the water: a dark panel (no blur: the sea under it is a
   flat fade), white text, at least 4.5:1 everywhere (secondary text 11:1). */
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) .consultant-home-side .section { padding: var(--space-3); background: rgb(0 12 15 / .55); border: 1px solid rgb(255 255 255 / .16); color: #fff; }
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) .consultant-home-side :is(h2, h3, a, p) { color: #fff; }
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) .consultant-home-side .attention-row p { color: rgb(255 255 255 / .82); }
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) .consultant-home-side .attention-row { border-bottom: 0; border-top: 1px solid rgb(255 255 255 / .22); }
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) .consultant-home-side :is(a, button):focus-visible { outline-color: #fff; }
/* Portal Home content and uploads, if any, sit on paper panels on the water. */
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) > :is(.home-site-content, .section) { padding: var(--space-3); background: var(--paper); color: var(--ink); }
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) > :is(.home-site-content, .section):not(:first-child) { margin-top: var(--space-4); }
/* Desktop and landscape tablets keep the deploy 25 hero (card top left on the
   photo, the why at the first screen's bottom); its foot fades into the sea,
   and Sales issues sit on the water below it at a readable measure. */
@media (min-width: 901px) {
  .home-hero--sea .home-hero-frame::before { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 6%; background: linear-gradient(180deg, transparent, var(--sea-0)); pointer-events: none; }
  /* The order of deploy 25 on desktop: the other categories, then the date and the link. */
  .home-hero-card .home-hero-others { order: 1; }
  .home-hero-card .home-hero-more { order: 2; }
  .home-hero-card .home-hero-more-link { order: 3; }
  .consultant-home:has(.home-hero--sea, .home-hero--celebrate) .consultant-home-side .section { max-width: 40rem; }
}
/* The frosted card falls back to solid paper where blur costs too much or is
   unwanted: reduced motion and Save-Data (low-end and data-saving phones). */
@media (prefers-reduced-motion: reduce) {
  .home-hero-card { background: color-mix(in srgb, var(--paper) 96%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .home-hero-toggle svg { transition: none; }
}
.home-hero[data-save-data] .home-hero-card { background: color-mix(in srgb, var(--paper) 96%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Integer percent steps: no inline styles and no DOM mutation on navigation. */
.home-hero-step-0 { width: 0%; }
.home-hero-step-1 { width: 1%; }
.home-hero-step-2 { width: 2%; }
.home-hero-step-3 { width: 3%; }
.home-hero-step-4 { width: 4%; }
.home-hero-step-5 { width: 5%; }
.home-hero-step-6 { width: 6%; }
.home-hero-step-7 { width: 7%; }
.home-hero-step-8 { width: 8%; }
.home-hero-step-9 { width: 9%; }
.home-hero-step-10 { width: 10%; }
.home-hero-step-11 { width: 11%; }
.home-hero-step-12 { width: 12%; }
.home-hero-step-13 { width: 13%; }
.home-hero-step-14 { width: 14%; }
.home-hero-step-15 { width: 15%; }
.home-hero-step-16 { width: 16%; }
.home-hero-step-17 { width: 17%; }
.home-hero-step-18 { width: 18%; }
.home-hero-step-19 { width: 19%; }
.home-hero-step-20 { width: 20%; }
.home-hero-step-21 { width: 21%; }
.home-hero-step-22 { width: 22%; }
.home-hero-step-23 { width: 23%; }
.home-hero-step-24 { width: 24%; }
.home-hero-step-25 { width: 25%; }
.home-hero-step-26 { width: 26%; }
.home-hero-step-27 { width: 27%; }
.home-hero-step-28 { width: 28%; }
.home-hero-step-29 { width: 29%; }
.home-hero-step-30 { width: 30%; }
.home-hero-step-31 { width: 31%; }
.home-hero-step-32 { width: 32%; }
.home-hero-step-33 { width: 33%; }
.home-hero-step-34 { width: 34%; }
.home-hero-step-35 { width: 35%; }
.home-hero-step-36 { width: 36%; }
.home-hero-step-37 { width: 37%; }
.home-hero-step-38 { width: 38%; }
.home-hero-step-39 { width: 39%; }
.home-hero-step-40 { width: 40%; }
.home-hero-step-41 { width: 41%; }
.home-hero-step-42 { width: 42%; }
.home-hero-step-43 { width: 43%; }
.home-hero-step-44 { width: 44%; }
.home-hero-step-45 { width: 45%; }
.home-hero-step-46 { width: 46%; }
.home-hero-step-47 { width: 47%; }
.home-hero-step-48 { width: 48%; }
.home-hero-step-49 { width: 49%; }
.home-hero-step-50 { width: 50%; }
.home-hero-step-51 { width: 51%; }
.home-hero-step-52 { width: 52%; }
.home-hero-step-53 { width: 53%; }
.home-hero-step-54 { width: 54%; }
.home-hero-step-55 { width: 55%; }
.home-hero-step-56 { width: 56%; }
.home-hero-step-57 { width: 57%; }
.home-hero-step-58 { width: 58%; }
.home-hero-step-59 { width: 59%; }
.home-hero-step-60 { width: 60%; }
.home-hero-step-61 { width: 61%; }
.home-hero-step-62 { width: 62%; }
.home-hero-step-63 { width: 63%; }
.home-hero-step-64 { width: 64%; }
.home-hero-step-65 { width: 65%; }
.home-hero-step-66 { width: 66%; }
.home-hero-step-67 { width: 67%; }
.home-hero-step-68 { width: 68%; }
.home-hero-step-69 { width: 69%; }
.home-hero-step-70 { width: 70%; }
.home-hero-step-71 { width: 71%; }
.home-hero-step-72 { width: 72%; }
.home-hero-step-73 { width: 73%; }
.home-hero-step-74 { width: 74%; }
.home-hero-step-75 { width: 75%; }
.home-hero-step-76 { width: 76%; }
.home-hero-step-77 { width: 77%; }
.home-hero-step-78 { width: 78%; }
.home-hero-step-79 { width: 79%; }
.home-hero-step-80 { width: 80%; }
.home-hero-step-81 { width: 81%; }
.home-hero-step-82 { width: 82%; }
.home-hero-step-83 { width: 83%; }
.home-hero-step-84 { width: 84%; }
.home-hero-step-85 { width: 85%; }
.home-hero-step-86 { width: 86%; }
.home-hero-step-87 { width: 87%; }
.home-hero-step-88 { width: 88%; }
.home-hero-step-89 { width: 89%; }
.home-hero-step-90 { width: 90%; }
.home-hero-step-91 { width: 91%; }
.home-hero-step-92 { width: 92%; }
.home-hero-step-93 { width: 93%; }
.home-hero-step-94 { width: 94%; }
.home-hero-step-95 { width: 95%; }
.home-hero-step-96 { width: 96%; }
.home-hero-step-97 { width: 97%; }
.home-hero-step-98 { width: 98%; }
.home-hero-step-99 { width: 99%; }
.home-hero-step-100 { width: 100%; }

/* Tick positions: integer percent, like the fill steps. */
.home-hero-tick-0 { left: 0%; }
.home-hero-tick-1 { left: 1%; }
.home-hero-tick-2 { left: 2%; }
.home-hero-tick-3 { left: 3%; }
.home-hero-tick-4 { left: 4%; }
.home-hero-tick-5 { left: 5%; }
.home-hero-tick-6 { left: 6%; }
.home-hero-tick-7 { left: 7%; }
.home-hero-tick-8 { left: 8%; }
.home-hero-tick-9 { left: 9%; }
.home-hero-tick-10 { left: 10%; }
.home-hero-tick-11 { left: 11%; }
.home-hero-tick-12 { left: 12%; }
.home-hero-tick-13 { left: 13%; }
.home-hero-tick-14 { left: 14%; }
.home-hero-tick-15 { left: 15%; }
.home-hero-tick-16 { left: 16%; }
.home-hero-tick-17 { left: 17%; }
.home-hero-tick-18 { left: 18%; }
.home-hero-tick-19 { left: 19%; }
.home-hero-tick-20 { left: 20%; }
.home-hero-tick-21 { left: 21%; }
.home-hero-tick-22 { left: 22%; }
.home-hero-tick-23 { left: 23%; }
.home-hero-tick-24 { left: 24%; }
.home-hero-tick-25 { left: 25%; }
.home-hero-tick-26 { left: 26%; }
.home-hero-tick-27 { left: 27%; }
.home-hero-tick-28 { left: 28%; }
.home-hero-tick-29 { left: 29%; }
.home-hero-tick-30 { left: 30%; }
.home-hero-tick-31 { left: 31%; }
.home-hero-tick-32 { left: 32%; }
.home-hero-tick-33 { left: 33%; }
.home-hero-tick-34 { left: 34%; }
.home-hero-tick-35 { left: 35%; }
.home-hero-tick-36 { left: 36%; }
.home-hero-tick-37 { left: 37%; }
.home-hero-tick-38 { left: 38%; }
.home-hero-tick-39 { left: 39%; }
.home-hero-tick-40 { left: 40%; }
.home-hero-tick-41 { left: 41%; }
.home-hero-tick-42 { left: 42%; }
.home-hero-tick-43 { left: 43%; }
.home-hero-tick-44 { left: 44%; }
.home-hero-tick-45 { left: 45%; }
.home-hero-tick-46 { left: 46%; }
.home-hero-tick-47 { left: 47%; }
.home-hero-tick-48 { left: 48%; }
.home-hero-tick-49 { left: 49%; }
.home-hero-tick-50 { left: 50%; }
.home-hero-tick-51 { left: 51%; }
.home-hero-tick-52 { left: 52%; }
.home-hero-tick-53 { left: 53%; }
.home-hero-tick-54 { left: 54%; }
.home-hero-tick-55 { left: 55%; }
.home-hero-tick-56 { left: 56%; }
.home-hero-tick-57 { left: 57%; }
.home-hero-tick-58 { left: 58%; }
.home-hero-tick-59 { left: 59%; }
.home-hero-tick-60 { left: 60%; }
.home-hero-tick-61 { left: 61%; }
.home-hero-tick-62 { left: 62%; }
.home-hero-tick-63 { left: 63%; }
.home-hero-tick-64 { left: 64%; }
.home-hero-tick-65 { left: 65%; }
.home-hero-tick-66 { left: 66%; }
.home-hero-tick-67 { left: 67%; }
.home-hero-tick-68 { left: 68%; }
.home-hero-tick-69 { left: 69%; }
.home-hero-tick-70 { left: 70%; }
.home-hero-tick-71 { left: 71%; }
.home-hero-tick-72 { left: 72%; }
.home-hero-tick-73 { left: 73%; }
.home-hero-tick-74 { left: 74%; }
.home-hero-tick-75 { left: 75%; }
.home-hero-tick-76 { left: 76%; }
.home-hero-tick-77 { left: 77%; }
.home-hero-tick-78 { left: 78%; }
.home-hero-tick-79 { left: 79%; }
.home-hero-tick-80 { left: 80%; }
.home-hero-tick-81 { left: 81%; }
.home-hero-tick-82 { left: 82%; }
.home-hero-tick-83 { left: 83%; }
.home-hero-tick-84 { left: 84%; }
.home-hero-tick-85 { left: 85%; }
.home-hero-tick-86 { left: 86%; }
.home-hero-tick-87 { left: 87%; }
.home-hero-tick-88 { left: 88%; }
.home-hero-tick-89 { left: 89%; }
.home-hero-tick-90 { left: 90%; }
.home-hero-tick-91 { left: 91%; }
.home-hero-tick-92 { left: 92%; }
.home-hero-tick-93 { left: 93%; }
.home-hero-tick-94 { left: 94%; }
.home-hero-tick-95 { left: 95%; }
.home-hero-tick-96 { left: 96%; }
.home-hero-tick-97 { left: 97%; }
.home-hero-tick-98 { left: 98%; }
.home-hero-tick-99 { left: 99%; }
.home-hero-tick-100 { left: 100%; }

/* Compact ways summary on staff Home and below the consultant celebration.
   Staff use theme text colours; the consultant sea stays dark in both themes. */
.home-qualification-ways { min-width: 0; box-sizing: border-box; padding-block: 1.5rem; color: var(--ink); }
.home-qualification-ways h2 { margin: 0 0 1rem; font-size: clamp(1.625rem, 2.5vw, 2rem); }
.home-qualification-ways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.home-qualification-ways li { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
@media (min-width: 901px) {
  .home-hero-layout > .home-qualification-ways { width: var(--page); margin-inline: auto; }
}
.consultant-home:has(.home-hero--sea, .home-hero--celebrate) .home-qualification-ways { color: #fff; }

/* css/search.css */
/* D26 Search: scoped to the module; shared shell and theme tokens are unchanged. */
.portal-search { padding-bottom: var(--space-4); }
.portal-search-field { display: flex; align-items: center; gap: var(--space-1); border: 1px solid var(--field-border); background: var(--paper); padding: 0 var(--space-2); min-height: 48px; }
.portal-search-field:focus-within { outline: var(--focus); outline-offset: 2px; }
.portal-search-label { flex: 1; min-width: 0; }
.portal-search-field input { width: 100%; min-height: 48px; border: 0; padding: 0; color: var(--ink); background: transparent; font: inherit; font-size: var(--text-md); }
.portal-search-clear { flex: none; min-height: 44px; min-width: 44px; color: var(--ink); font-size: var(--text-xs); background: transparent; border: 0; text-decoration: underline; }
.portal-search-privacy, .portal-search-count, .portal-search-empty { font-size: var(--text-sm); color: var(--muted); margin: var(--space-2) 0; }
.portal-search-suggested { margin-top: var(--space-3); margin-bottom: var(--space-1); }
.portal-search-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.portal-search-suggestions button { min-height: 44px; padding: var(--space-1) var(--space-2); border: 1px solid var(--rule-strong); border-radius: 24px; color: var(--ink); background: var(--paper); font: inherit; font-size: var(--text-sm); text-align: left; }
.portal-search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
.portal-search-result { display: flex; flex-direction: column; gap: 4px; min-height: 44px; height: 100%; padding: var(--space-2); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.portal-search-result > span { font-size: var(--text-sm); color: var(--muted); }
.portal-search-result > strong { font-size: var(--text-md); font-weight: 600; }
.portal-search-result > .portal-search-kind { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); }
.portal-search-result mark { color: var(--ink); background: var(--warn-tint); font-weight: 600; }
@media (hover: hover) { .portal-search-result:hover, .portal-search-suggestions button:hover { background: var(--dune); } }
@media (max-width: 700px) { .portal-search-results { grid-template-columns: minmax(0, 1fr); } }
/* No animation or smooth scrolling: reduced-motion is also the default. */
@media (forced-colors: active) { .portal-search-result mark { background: Highlight; color: HighlightText; } }
.portal-search-icon { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--muted); border-radius: 50%; position: relative; margin-right: 4px; }
.portal-search-icon::after { content: ''; position: absolute; width: 7px; height: 1.5px; background: var(--muted); right: -5px; bottom: -3px; transform: rotate(45deg); }

/* install/install.css */
/* D26-5: scoped install guide; shell tokens supply both light and dark themes. */
.install-guide {
  position: fixed; inset: auto 0 0; margin: 0 auto; padding: 0;
  width: min(100%, 520px); max-width: 100%; max-height: 90dvh;
  border: 1px solid var(--rule); border-radius: 16px 16px 0 0;
  background: var(--paper); color: var(--ink); overflow: auto;
  font-family: var(--font-text); font-size: var(--text-md);
  animation: install-enter 180ms ease-out;
}
.install-guide::backdrop { background: rgb(0 0 0 / 45%); }
.install-guide--ios { inset: max(var(--space-3), env(safe-area-inset-top)) 0 auto; width: min(calc(100% - 32px), 520px); border-radius: 0; }
.install-content { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-2) max(var(--space-3), env(safe-area-inset-bottom)); }
.install-guide h2 { font-size: 1.75rem; line-height: 1.1; margin: 0; }
.install-guide p, .install-guide figure { margin: 0; }
.install-guide button, .install-guide a { min-width: var(--tap); min-height: var(--tap); }
.install-guide h2:focus-visible { outline: var(--focus); outline-offset: 4px; }
.install-note, .install-illustration figcaption { font-size: var(--text-sm); color: var(--muted); }
.install-note:empty { display: none; }
.install-app { display: flex; align-items: center; gap: var(--space-2); }
.install-app img { flex: none; border: 1px solid var(--rule); border-radius: 12px; }
.install-app p { font-size: var(--text-sm); color: var(--muted); }
.install-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.install-steps { margin: 0; padding-inline-start: var(--space-3); display: grid; gap: var(--space-2); }
.install-steps li { padding-inline-start: var(--space-1); }
.install-steps li::marker { font-weight: 600; }
.install-illustration { display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--dune); border: 1px solid var(--rule); }
.install-layout { display: grid; gap: var(--space-1); font-size: var(--text-xs); }
.install-toolbar, .install-share-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-1); padding: var(--space-1); background: var(--paper); border: 1px solid var(--rule); }
.install-toolbar svg, .install-highlight { outline: 2px solid var(--ink); outline-offset: 2px; }
.install-guide svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.install-share-row { font-size: var(--text-sm); }
.install-example-title { font-weight: 600; }
@keyframes install-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .install-guide { animation: none; } }