/* Kelly Online design system.
   Layers: TOKENS → DARK → REDUCED-MOTION → BASE → SHELL → COMPONENTS →
   MOTION → PAGES → UTILITIES. NHS blue is the anchor in both themes. */

/* ═══════════════════════ TOKENS (light) ═══════════════════════ */
:root {
  color-scheme: light;
  --c-brand: #005eb8;
  --c-brand-strong: #003d78;
  --c-brand-bright: #41b6e6;

  --bg-page: #f4f7fa;
  --bg-card: #ffffff;
  --bg-inset: #eef3f7;
  --bg-header: rgba(0, 94, 184, 0.9);
  --ink: #1a2733;
  --ink-muted: #5b6b79;
  --ink-faint: #8797a5;
  --line: #d9e1e8;
  --line-strong: #b9c6d1;
  --accent: var(--c-brand);
  --accent-ink: #ffffff;
  --link: var(--c-brand);
  --focus-ring: #ffd54f;

  --ok: #007f3b;   --ok-bg: #e8f5e9;   --ok-ink: #1b4d2b;
  --warn: #b45c00; --warn-bg: #fff3e0; --warn-ink: #6d3a00;
  --danger: #d5281b; --danger-bg: #fbe9e7; --danger-ink: #7f1c13;
  --info: var(--c-brand); --info-bg: #e3f0fa; --info-ink: var(--c-brand-strong);

  --tag-critical-bg: var(--danger); --tag-critical-ink: #ffffff;
  --tag-high-bg: #ffe0b2;   --tag-high-ink: #6d3a00;
  --tag-normal-bg: #e3f0fa; --tag-normal-ink: var(--c-brand-strong);
  --tag-self-bg: #eceff1;   --tag-self-ink: #5b6b79;
  --tag-status-bg: #ede7f6; --tag-status-ink: #4527a0;
  --tag-role-bg: #e0f2f1;   --tag-role-ink: #00695c;
  --tag-ai-bg: #fce4ec;     --tag-ai-ink: #880e4f;

  --msg-mine-bg: #dcebf8;
  --msg-theirs-bg: #ffffff;
  --msg-private-bg: #fff8e1;
  --msg-system-bg: #eceff1;
  --scrim: rgba(26, 39, 51, 0.5);

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --radius: var(--r-lg);

  --shadow-color: 210 40% 20%;
  --shadow-1: 0 1px 2px hsl(var(--shadow-color) / .08);
  --shadow-2: 0 2px 8px hsl(var(--shadow-color) / .10);
  --shadow-3: 0 6px 20px hsl(var(--shadow-color) / .14);
  --shadow-4: 0 12px 40px hsl(var(--shadow-color) / .22);

  --t-fast: 120ms; --t-quick: 200ms; --t-base: 280ms; --t-slow: 400ms; --t-hero: 8s;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .4);

  --fs-xs: .78rem; --fs-sm: .88rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: 1.35rem; --fs-xl: 1.7rem; --fs-2xl: 2.1rem;
  --lh-tight: 1.25; --lh-base: 1.55;

  --tabbar-h: 3.5rem;
  font-size: 16px;
}

/* ═══════════════════════ DARK ═══════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #0d1622;
  --bg-card: #16212e;
  --bg-inset: #101a26;
  --bg-header: rgba(13, 22, 34, 0.84);
  --ink: #e8eef5;
  --ink-muted: #9fb0c1;
  --ink-faint: #64778a;
  --line: #263445;
  --line-strong: #35485e;
  --accent: var(--c-brand-bright);
  --accent-ink: #06121e;
  --link: #6cc4f0;

  --ok: #34c377;   --ok-bg: #10281c;   --ok-ink: #86e0ae;
  --warn: #f0a44b; --warn-bg: #2b2013; --warn-ink: #f4c58a;
  --danger: #ff7b6e; --danger-bg: #301a18; --danger-ink: #ffada4;
  --info: var(--c-brand-bright); --info-bg: #12283a; --info-ink: #a7d9f2;

  --tag-critical-bg: #a82418; --tag-critical-ink: #ffe1dd;
  --tag-high-bg: #33261263;  --tag-high-ink: #f4c58a;
  --tag-normal-bg: #12283a;  --tag-normal-ink: #a7d9f2;
  --tag-self-bg: #1c2836;    --tag-self-ink: #9fb0c1;
  --tag-status-bg: #241d38;  --tag-status-ink: #c9b8f0;
  --tag-role-bg: #0f2a27;    --tag-role-ink: #8fdcd2;
  --tag-ai-bg: #331a26;      --tag-ai-ink: #f5b8d0;

  --msg-mine-bg: #163a5c;
  --msg-theirs-bg: #1b2836;
  --msg-private-bg: #2b2513;
  --msg-system-bg: #1c2836;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-color: 210 80% 2%;
}

/* No-JS fallback — keep in sync with [data-theme="dark"] surfaces. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-page: #0d1622; --bg-card: #16212e; --bg-inset: #101a26;
    --bg-header: rgba(13, 22, 34, 0.84);
    --ink: #e8eef5; --ink-muted: #9fb0c1; --ink-faint: #64778a;
    --line: #263445; --line-strong: #35485e;
    --accent: #41b6e6; --accent-ink: #06121e; --link: #6cc4f0;
  }
}

/* ═══════════════════════ REDUCED MOTION ═══════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════ BASE ═══════════════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-page);
  color: var(--ink);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-quick), color var(--t-quick);
}
a { color: var(--link); }
h1, h2, h3 { line-height: var(--lh-tight); }
h1 { font-size: var(--fs-xl); letter-spacing: -0.015em; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ═══════════════════════ SHELL ═══════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-header);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  color: #fff;
  padding: 0.7rem 1rem;
  padding-top: calc(0.7rem + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
@supports not (backdrop-filter: blur(8px)) {
  .site-header { background: var(--c-brand); }
  [data-theme="dark"] .site-header { background: #101a26; }
}
[data-theme="dark"] .site-header { color: var(--ink); }
.site-header .brand { font-weight: 700; font-size: 1.15rem; color: inherit; text-decoration: none; }
/* Only the Inbox bell and the hamburger live here — every destination is in
   the drawer, so there are no header links to style. */
.site-header nav { display: flex; gap: 0.35rem; align-items: center; }

/* "Health Staff Advisory" is nearly twice the width of the old wordmark. Below
   ~340px it, the bell and the hamburger no longer fit on one row, so the header
   wrapped to two rows and doubled in height. Step the brand down to keep them inline. */
@media (max-width: 360px) {
  .site-header { gap: 0.5rem; }
  .site-header .brand { font-size: 1rem; }
}

.badge-dot {
  display: inline-block; min-width: 1.2rem; padding: 0 0.3rem; text-align: center;
  background: var(--danger); color: #fff; border-radius: var(--r-full);
  font-size: 0.75rem; margin-left: 0.25rem;
}
/* An <a> to the Inbox, so it resets the link defaults itself — the nav no
   longer carries a generic <a> rule to inherit from. */
.bell-btn {
  position: relative; background: transparent; border: 0; color: inherit;
  cursor: pointer; padding: 0.4rem; border-radius: var(--r-sm); min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.bell-btn svg { width: 22px; height: 22px; }
.bell-btn .badge-dot { position: absolute; top: 2px; right: 0; margin: 0; }

/* Header hamburger + slide-in drawer (all viewports, signed in or out).
   With the header links gone, this is the whole of the site's navigation
   besides the mobile tab bar. */
.nav-toggle {
  background: transparent; border: 0; color: inherit;
  cursor: pointer; padding: 0.4rem; border-radius: var(--r-sm);
  min-height: 44px; min-width: 44px;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle:hover { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .nav-toggle:hover { background: rgba(108, 196, 240, 0.16); }

.nav-drawer {
  position: fixed; inset: 0; z-index: 95; display: flex;
  background: var(--scrim);
  opacity: 0; transition: opacity var(--t-quick);
}
.nav-drawer.open { opacity: 1; }
.nav-drawer-panel {
  margin-left: auto; width: min(20rem, 86vw); height: 100%; overflow-y: auto;
  background: var(--bg-page); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-4);
  padding: var(--sp-3) var(--sp-4);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out);
}
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-2); font-size: var(--fs-md);
}
.nav-drawer-close {
  background: var(--bg-inset); border: 0; border-radius: 50%;
  width: 2.1rem; height: 2.1rem; cursor: pointer;
  color: var(--ink-muted); font-size: 0.9rem;
}
.nav-drawer-group {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint);
  margin: var(--sp-4) 0 var(--sp-1);
}
.nav-drawer-group:first-child { margin-top: var(--sp-2); }
.nav-drawer-nav a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--sp-2); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none;
  transition: background-color var(--t-fast);
}
.nav-drawer-nav a:hover { background: var(--bg-inset); }
.nav-drawer-nav a[aria-current="page"] {
  background: var(--bg-inset); color: var(--accent); font-weight: 600;
}
body.drawer-open { overflow: hidden; }

main.wrap { max-width: 60rem; margin: 0 auto; padding: var(--sp-4); }
main.narrow { max-width: 30rem; }

/* Bottom tab bar (mobile, signed in) */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; 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);
  background: var(--bg-card);
  border-top: 1px solid var(--line);
  transition: transform var(--t-base) var(--ease-out);
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--ink-muted);
  font-size: 0.68rem; font-weight: 600; min-height: 44px; position: relative;
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  transition: color var(--t-fast);
}
.tab-item svg { width: 24px; height: 24px; }
.tab-item.active, .tab-item[aria-current="page"] { color: var(--accent); }
.tab-item .badge-dot { position: absolute; top: 4px; right: calc(50% - 1.6rem); }
.tab-item.accent-tab svg { color: var(--accent); }
.tab-indicator {
  position: absolute; top: 0; left: 0; height: 3px; width: 40%;
  margin-left: 30%; border-radius: var(--r-full); background: var(--accent);
  transition: transform var(--t-quick) var(--ease-spring);
}
body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + 1.5rem + env(safe-area-inset-bottom)); }
body.kb-open .tab-bar { transform: translateY(110%); }
@media (min-width: 768px) {
  .tab-bar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
}

/* Signed-out sticky CTA bar (public pages, mobile) */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: var(--bg-card); border-top: 1px solid var(--line);
}
.cta-bar .btn { flex: 1; text-align: center; }
body.has-ctabar { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .cta-bar { display: none; } body.has-ctabar { padding-bottom: 0; } }

/* ═══════════════════════ COMPONENTS ═══════════════════════ */
.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem; margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.hero { position: relative; overflow: hidden; background: var(--c-brand); color: #fff; padding: var(--sp-7) var(--sp-4); }
.hero::before, .hero::after {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(60px); opacity: 0.45; pointer-events: none;
}
.hero::before { background: radial-gradient(circle, var(--c-brand-bright), transparent 60%); top: -30vmax; right: -20vmax; animation: hero-drift var(--t-hero) ease-in-out infinite alternate; }
.hero::after { background: radial-gradient(circle, var(--c-brand-strong), transparent 60%); bottom: -35vmax; left: -15vmax; animation: hero-drift var(--t-hero) ease-in-out infinite alternate-reverse; }
.hero-inner { position: relative; max-width: 60rem; margin: 0 auto; }
.hero h1 { margin: 0 0 0.6rem; font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.hero p { max-width: 38rem; font-size: var(--fs-md); margin: 0 0 1.2rem; }
.hero-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.hero-chips li {
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; padding: 0.3rem 0.8rem; border-radius: var(--r-full); font-size: var(--fs-sm);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; gap: 0.4rem;
  background: var(--ok); color: #fff; border: 0; cursor: pointer;
  padding: 0.65rem 1.2rem; min-height: 2.75rem;
  font-size: var(--fs-base); font-family: inherit; border-radius: var(--r-md);
  text-decoration: none; font-weight: 600;
  transition: transform var(--t-fast), box-shadow var(--t-quick), filter var(--t-fast);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }
.btn.secondary { background: var(--bg-card); color: var(--accent); border: 2px solid var(--accent); }
.btn.quiet { background: transparent; color: var(--link); border: 1px solid var(--line-strong); font-weight: 500; }
.btn.danger { background: var(--danger); }
.btn.primary { background: var(--c-brand); }
.btn.small { padding: 0.3rem 0.7rem; font-size: var(--fs-sm); min-height: 2.1rem; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.loading { color: transparent; }
.btn.loading::after {
  content: ""; position: absolute; width: 1rem; height: 1rem;
  border: 2px solid #fff; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.quiet.loading::after, .btn.secondary.loading::after { border-color: var(--accent); border-right-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.quiet):not(.small):hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
}

form label, .field-label { display: block; font-weight: 600; margin: 0.9rem 0 0.25rem; }
/* .field-label names a group of option buttons — there is no single
   control for a <label> to point at. */
form .hint { font-weight: 400; color: var(--ink-muted); font-size: var(--fs-sm); margin: 0 0 0.3rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="search"], select, textarea {
  width: 100%; padding: 0.6rem; min-height: 2.75rem; font-size: var(--fs-base);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-card); color: var(--ink); font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 1px;
}

.notice { padding: 0.8rem 1rem; border-radius: var(--r-md); margin: 0.8rem 0; border: 1px solid transparent; }
.notice.error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-ink); }
.notice.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-ink); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.notice.info { background: var(--info-bg); border-color: var(--info); color: var(--info-ink); }
.notice a { color: inherit; font-weight: 600; }

.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1rem 0.55rem; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--tag-normal-bg); color: var(--tag-normal-ink);
  margin-right: 0.3rem; white-space: nowrap;
}
.tag.critical, .tag.high, .tag.normal, .tag.self_service { padding-left: 0.45rem; }
.tag.critical::before, .tag.high::before, .tag.normal::before, .tag.self_service::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.tag.critical { background: var(--tag-critical-bg); color: var(--tag-critical-ink); position: relative; }
.tag.critical::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid var(--danger); opacity: 0;
  animation: pulse-ring 2s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) { .tag.critical::after { display: none; } }
.tag.high { background: var(--tag-high-bg); color: var(--tag-high-ink); }
.tag.normal { background: var(--tag-normal-bg); color: var(--tag-normal-ink); }
.tag.self_service { background: var(--tag-self-bg); color: var(--tag-self-ink); }
.tag.status { background: var(--tag-status-bg); color: var(--tag-status-ink); }
.tag.role { background: var(--tag-role-bg); color: var(--tag-role-ink); }
.tag.ai { background: var(--tag-ai-bg); color: var(--tag-ai-ink); }

.due-chip {
  display: inline-block; padding: 0.1rem 0.55rem; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--bg-inset); color: var(--ink-muted); white-space: nowrap;
}
.due-chip.soon { background: var(--warn-bg); color: var(--warn-ink); }
.due-chip.today, .due-chip.overdue { background: var(--danger-bg); color: var(--danger-ink); }

.case-list { display: grid; gap: 0.7rem; }
.case-card {
  display: block; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 0.9rem 1rem;
  text-decoration: none; color: inherit; box-shadow: var(--shadow-1);
  transition: transform var(--t-quick), box-shadow var(--t-quick), border-color var(--t-quick);
}
.case-card:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .case-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-2); }
}
.case-card h3 { margin: 0 0 0.3rem; font-size: var(--fs-md); }
.case-card .meta { color: var(--ink-muted); font-size: var(--fs-sm); }
.case-card.next-up { border: 2px solid var(--accent); box-shadow: var(--shadow-2); }

.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.tabs button {
  border: 1px solid var(--line); background: var(--bg-card);
  padding: 0.45rem 0.85rem; min-height: 2.4rem; border-radius: var(--r-full);
  cursor: pointer; font-size: var(--fs-sm); color: var(--ink); font-family: inherit;
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.tabs button:active { transform: scale(0.96); }
.tabs button.active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
[data-theme="dark"] .tabs button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* One-line scrolling variant: used by the Account tabs, where five pills
   overflow the narrow column and a wrapped second row reads badly. */
.tabs.scroll {
  flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  /* room for the focus ring, which the overflow would otherwise clip */
  padding: 3px; margin: -3px -3px calc(var(--sp-4) - 3px);
}
.tabs.scroll::-webkit-scrollbar { display: none; }
.tabs.scroll button { flex: 0 0 auto; scroll-snap-align: start; }

/* Chat */
.msg { margin-bottom: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 18px; max-width: 92%; }
.msg .who { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: 0.2rem; }
.msg.member { background: var(--msg-mine-bg); border-bottom-right-radius: 4px; margin-left: auto; }
.msg.advisor { background: var(--msg-theirs-bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.private { background: var(--msg-private-bg); border: 1px dashed var(--warn); }
.msg.system { background: var(--msg-system-bg); font-size: var(--fs-sm); }
.msg p:first-of-type { margin-top: 0; } .msg p:last-of-type { margin-bottom: 0; }
.msg .body { white-space: pre-wrap; overflow-wrap: break-word; }
.msg.question-msg { border-left: 4px solid var(--accent); }
.day-divider {
  text-align: center; color: var(--ink-faint); font-size: var(--fs-xs);
  margin: var(--sp-4) 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-3);
}
.day-divider::before, .day-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th, table.data td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll { overflow-x: auto; }

.grid-2 { display: grid; gap: var(--sp-4); }
@media (min-width: 800px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.feature-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand), var(--c-brand-bright));
  color: #fff; font-weight: 700; margin-bottom: var(--sp-2);
}

.source-item { border-left: 4px solid var(--accent); padding: 0.4rem 0.8rem; margin: 0.5rem 0; background: var(--bg-inset); font-size: var(--fs-sm); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.source-item .kind { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; color: var(--ink-muted); }

/* Timeline rail */
.timeline { position: relative; padding-left: 1.4rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline-item { position: relative; display: flex; gap: 0.7rem; padding: 0.4rem 0; font-size: 0.92rem; border-bottom: none; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.4rem; top: 0.75rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--warn); border: 2px solid var(--bg-card); box-shadow: 0 0 0 2px var(--warn);
  background: var(--bg-card);
}
.timeline-item.confirmed::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.timeline-item .date { min-width: 6.2rem; font-weight: 600; color: var(--accent); }
[data-theme="light"] .timeline-item .date { color: var(--c-brand-strong); }
.timeline-item .unconfirmed { color: var(--warn); font-size: var(--fs-xs); }

/* Journey stepper (member case) */
.journey { display: flex; margin: var(--sp-4) 0; }
.journey-step { flex: 1; text-align: center; position: relative; }
.journey-step::before {
  content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 3px;
  background: var(--line); z-index: 0;
}
.journey-step:first-child::before { display: none; }
.journey-step.done::before, .journey-step.active::before { background: var(--accent); }
.journey-dot {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--bg-card); border: 3px solid var(--line);
  transition: border-color var(--t-quick), background-color var(--t-quick);
}
.journey-step.done .journey-dot { background: var(--accent); border-color: var(--accent); }
.journey-step.done .journey-dot::after { content: "✓"; color: var(--accent-ink); font-size: 11px; font-weight: 700; }
.journey-step.active .journey-dot { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.journey-label { display: block; font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 0.3rem; }
.journey-step.active .journey-label { color: var(--ink); font-weight: 700; }

/* Wizard */
.wiz-progress { height: 6px; background: var(--bg-inset); border-radius: var(--r-full); overflow: hidden; margin: var(--sp-2) 0 var(--sp-4); }
.wiz-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-bright));
  border-radius: var(--r-full); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.option-grid { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr; margin-top: var(--sp-2); }
.option-card {
  border: 1.5px solid var(--line-strong); background: var(--bg-card); color: var(--ink);
  border-radius: var(--r-md); padding: 0.7rem 0.6rem; min-height: 44px;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-align: center;
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.option-card:active { transform: scale(0.97); }
.option-card.on { border-color: var(--accent); background: var(--info-bg); color: var(--info-ink); }

/* Sticky action bar (advisor case) */
.action-bar {
  position: fixed; left: 0; right: 0; z-index: 55;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
  background: var(--bg-card); border-top: 1px solid var(--line);
}
.action-bar .btn { flex: 1; }
body.has-actionbar main.wrap { padding-bottom: 5rem; }
@media (min-width: 768px) {
  .action-bar { position: sticky; bottom: 0; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); margin-top: var(--sp-4); }
}

/* Bottom sheets */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 90; background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity var(--t-quick);
}
.sheet-overlay.open { opacity: 1; }
.sheet {
  background: var(--bg-page); width: 100%; max-height: 88vh; overflow-y: auto;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-2) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.sheet-overlay.open .sheet { transform: translateY(0); }
.sheet-grab { width: 2.4rem; height: 4px; border-radius: var(--r-full); background: var(--line-strong); margin: 0 auto var(--sp-2); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.sheet-close { background: var(--bg-inset); border: 0; border-radius: 50%; width: 2.1rem; height: 2.1rem; cursor: pointer; color: var(--ink-muted); font-size: 0.9rem; }
@media (min-width: 768px) {
  .sheet-overlay { align-items: center; }
  .sheet { max-width: 34rem; border-radius: var(--r-xl); transform: translateY(0) scale(0.96); opacity: 0; transition: transform var(--t-base) var(--ease-out), opacity var(--t-base); }
  .sheet-overlay.open .sheet { transform: scale(1); opacity: 1; }
}

/* Toasts */
#toast-region {
  position: fixed; z-index: 95; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
@media (min-width: 768px) { #toast-region { bottom: auto; top: 4.5rem; } }
.toast {
  background: var(--ink); color: var(--bg-card);
  padding: 0.6rem 1.1rem; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--shadow-3); opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-out);
  max-width: min(92vw, 30rem);
}
[data-theme="dark"] .toast { background: #e8eef5; color: #0d1622; }
.toast.in { opacity: 1; transform: translateY(0); }
.toast.out { animation: toast-out var(--t-quick) var(--ease-in) forwards; }
.toast-error { background: var(--danger); color: #fff; }
[data-theme="dark"] .toast-error { background: var(--danger); color: #fff; }

/* Skeletons */
.skel { position: relative; overflow: hidden; background: var(--bg-inset); border-radius: var(--r-sm); }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-card) 70%, transparent), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .skel::after { display: none; } }
.skel-line { height: 0.9rem; margin: 0.55rem 0; }
.skel-line[data-w="25"] { width: 25%; } .skel-line[data-w="30"] { width: 30%; }
.skel-line[data-w="35"] { width: 35%; } .skel-line[data-w="40"] { width: 40%; }
.skel-line[data-w="50"] { width: 50%; } .skel-line[data-w="60"] { width: 60%; }
.skel-line[data-w="75"] { width: 75%; } .skel-line[data-w="80"] { width: 80%; }
.skel-line[data-w="85"] { width: 85%; } .skel-line[data-w="90"] { width: 90%; }
.skel-line[data-w="100"] { width: 100%; }

/* Empty states */
.empty-state { text-align: center; padding: var(--sp-6) var(--sp-4); background: var(--bg-card); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty-state .empty-icon svg { width: 64px; height: 64px; color: var(--ink-faint); }
.empty-state h3 { margin: var(--sp-3) 0 var(--sp-1); }

/* Stat tiles (admin overview) */
.stat-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-4); }
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-tile {
  display: block; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-1);
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.stat-tile:active { transform: scale(0.97); }
@media (hover: hover) { .stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.stat-num { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; color: var(--accent); }
[data-theme="light"] .stat-num { color: var(--c-brand); }
.stat-label { font-size: var(--fs-sm); color: var(--ink-muted); }

/* Segmented control */
.seg { display: inline-flex; background: var(--bg-inset); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; color: var(--ink-muted); font-family: inherit;
  padding: 0.45rem 0.9rem; min-height: 2.4rem; border-radius: calc(var(--r-md) - 3px);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.seg button.on { background: var(--bg-card); color: var(--ink); box-shadow: var(--shadow-1); }

/* Permission list (mobile admin) */
.perm-item { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.perm-item:last-child { border-bottom: 0; }
.perm-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }

/* Notifications sheet */
.notif-item {
  display: block; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { font-weight: 600; }
.notif-item.unread::before { content: "●"; color: var(--accent); margin-right: 0.4rem; font-size: 0.7rem; }

/* Trust band (landing) */
.trust-band { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; margin: var(--sp-5) 0; }
@media (min-width: 700px) { .trust-band { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--ink-muted); font-size: var(--fs-sm); }
.trust-item svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }

.install-icon { vertical-align: -6px; border-radius: 6px; }

/* Assistant widget */
.assistant-fab {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 60;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--c-brand); color: #fff; font-size: 1.4rem; border: 0; cursor: pointer;
  box-shadow: var(--shadow-3);
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.assistant-fab:hover { background: var(--c-brand-strong); }
.assistant-fab:active { transform: scale(0.92); }
body.has-tabbar .assistant-fab { bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-tabbar .assistant-fab { bottom: 1rem; } }
.assistant-overlay {
  position: fixed; inset: 0; z-index: 70; background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: flex-end;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--t-quick), visibility 0s linear var(--t-quick);
}
.assistant-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--t-quick), visibility 0s; }
/* The closed panel still occupies its corner of the viewport. Without this it
   swallows clicks meant for the FAB underneath it (z-index 70 vs 60), which
   made the assistant unopenable on desktop. visibility also keeps the closed
   panel out of the tab order and the accessibility tree. */
.assistant-overlay:not(.open) .assistant-panel { pointer-events: none; }
.assistant-panel {
  background: var(--bg-page); width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); transition: transform var(--t-slow) var(--ease-out);
}
.assistant-overlay.open .assistant-panel { transform: translateY(0); }
@media (min-width: 700px) {
  .assistant-overlay { background: transparent; pointer-events: none; padding: 0 1rem 1rem 0; }
  .assistant-overlay.open { pointer-events: none; }
  .assistant-panel {
    pointer-events: auto; width: 24rem; height: 34rem; max-height: calc(100vh - 2rem);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-4);
    transform: translateY(0) scale(0.96); opacity: 0;
    transition: transform var(--t-base) var(--ease-out), opacity var(--t-base);
  }
  .assistant-overlay.open .assistant-panel { transform: scale(1); opacity: 1; }
}
.assistant-head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem; background: var(--c-brand); color: #fff;
}
[data-theme="dark"] .assistant-head { background: #101a26; color: var(--ink); border-bottom: 1px solid var(--line); }
.assistant-head .tag.ai { vertical-align: middle; }
.assistant-headbtn {
  background: rgba(255, 255, 255, 0.15); color: inherit; border: 0; border-radius: var(--r-sm);
  padding: 0.25rem 0.6rem; min-height: 2rem; cursor: pointer; font-size: var(--fs-sm);
}
.assistant-headbtn:hover { background: rgba(255, 255, 255, 0.3); }
.assistant-chatholder { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.assistant-chatwrap { flex: 1; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.assistant-tabs {
  display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center;
  padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); background: var(--bg-card);
}
.assistant-tab {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--line); background: var(--bg-page); color: var(--ink);
  padding: 0.2rem 0.55rem; min-height: 1.9rem; border-radius: var(--r-full); font-size: 0.8rem; cursor: pointer;
  font-family: inherit; transition: transform var(--t-fast);
}
.assistant-tab:active { transform: scale(0.95); }
.assistant-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.assistant-tab-x { opacity: 0.65; font-size: 0.75rem; }
.assistant-tab-x:hover { opacity: 1; }
.assistant-tab-new { font-weight: 700; }
.assistant-body { flex: 1; overflow-y: auto; padding: 0.8rem; min-height: 0; }
.assistant-body .msg { max-width: 100%; }
.assistant-body .msg.member { max-width: 88%; }
.assistant-body textarea { margin-top: 0.3rem; }
.assistant-body .msg.anim-msg-in { animation: msg-in var(--t-quick) var(--ease-out); }
.assistant-inputrow {
  display: flex; gap: 0.5rem; align-items: flex-end;
  padding: 0.6rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--bg-card);
}
.assistant-inputrow textarea { flex: 1; min-height: 2.75rem; }
.assistant-embed { height: 70vh; min-height: 24rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-page); }

/* Update banner */
.update-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  background: var(--ink); color: var(--bg-card);
  display: flex; gap: 0.8rem; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 0.7rem 1rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
  font-size: 0.92rem;
}
[data-theme="dark"] .update-banner { background: #e8eef5; color: #0d1622; }

/* ═══════════════════════ MOTION ═══════════════════════ */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes hero-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-6%, 5%) scale(1.12); }
}

.anim-page-enter { animation: rise var(--t-base) var(--ease-out); }
.anim-rise { animation: rise var(--t-base) var(--ease-out) both; animation-delay: calc(var(--stagger-i, 0) * 40ms); }
.anim-msg-in { animation: msg-in var(--t-quick) var(--ease-out); }

/* Landing scroll reveal — hidden state only when JS is present.
   FAILSAFE: the animation force-reveals everything ~1.8s in, so content can
   never stay hidden if the module that drives the observer stalls or errors.
   The normal path adds .revealed first, which cancels the failsafe. */
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
html.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
  animation: reveal-failsafe var(--t-slow) var(--ease-out) 1.8s forwards;
}
html.js .reveal.revealed { opacity: 1; transform: translateY(0); animation: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; animation: none; } }

/* ═══════════════════════ PAGES ═══════════════════════ */
.site-footer { color: var(--ink-muted); font-size: var(--fs-sm); padding: var(--sp-6) var(--sp-4); text-align: center; }
.site-footer a { color: var(--ink-muted); }

/* Admin audit cards on mobile */
@media (max-width: 699.98px) {
  .audit-table table, .audit-table thead, .audit-table tr, .audit-table td, .audit-table th { display: block; }
  .audit-table thead { display: none; }
  .audit-table tr { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.5rem 0.7rem; margin-bottom: 0.6rem; }
  .audit-table td { border: 0; padding: 0.1rem 0; }
}

/* ═══════════════════════ UTILITIES ═══════════════════════ */
.hidden { display: none !important; }
.right { text-align: right; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-sm); }
.mt0 { margin-top: 0; }
.stack > * + * { margin-top: 0.6rem; }
.greeting { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; margin: var(--sp-2) 0 var(--sp-4); }
.big-actions { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; margin: var(--sp-4) 0; }
.big-actions .btn { min-height: 3.4rem; font-size: var(--fs-md); }

/* ═══ BANDING & JOB EVALUATION ══════════════════════════════════════════ */
/* Components for the band review section. No new colour literals: every
   surface uses existing tokens, so dark mode works by construction. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.screen-only { }
.print-only { display: none; }

.check-row { display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.check-row input { margin-top: 0.2rem; flex-shrink: 0; width: 1.1rem; height: 1.1rem; }

.tag.ok-tag { background: var(--ok-bg); color: var(--ok-ink); }

.sheet-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

/* Offer card */
.offer-card { border-color: var(--c-brand); }
.offer-price { font-size: var(--fs-lg); margin: var(--sp-1) 0 var(--sp-2); }
.offer-price .muted { font-size: var(--fs-sm); }

/* Grouped wizard progress + save state */
.wiz-groups { display: flex; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-1); }
.wiz-group-seg { flex: 1; text-align: center; font-size: var(--fs-xs); color: var(--ink-faint); padding-bottom: var(--sp-1); border-bottom: 3px solid var(--line); }
.wiz-group-seg.done { border-bottom-color: var(--c-brand); color: var(--ink-muted); }
.wiz-group-seg.active { border-bottom-color: var(--c-brand-bright); color: var(--ink); font-weight: 600; }
.wiz-save-state { font-size: var(--fs-xs); margin: var(--sp-1) 0; color: var(--ink-muted); }
.wiz-save-state[data-kind="error"], .wiz-save-state[data-kind="conflict"] { color: var(--danger-ink); font-weight: 600; }
.wiz-save-state[data-kind="ok"] { color: var(--ok-ink); }
.wiz-exit { margin-left: auto; }
.wiz-resume { display: block; }

/* Band chips: indicative is dashed — provisional by design. */
.band-chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; border: 2px solid var(--c-brand); color: var(--c-brand); background: transparent; }
.band-chip.indicative { border-style: dashed; }
.band-chip.current { border-style: solid; background: var(--bg-inset); color: var(--ink); border-color: var(--line-strong); }

/* The band meter: solid fill = confirmed points; hatched = unresolved range. */
.band-meter { margin: var(--sp-2) 0; }
.band-meter-scale { position: relative; height: 1.5rem; background: var(--bg-inset); border-radius: var(--r-full); overflow: hidden; border: 1px solid var(--line); }
.band-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-bright)); border-radius: var(--r-full); transition: width var(--t-slow) var(--ease-out); }
.band-meter-range { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 4px, var(--c-brand-bright) 4px 6px); opacity: 0.45; }
.band-meter-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-strong); }
.band-meter-tick i { position: absolute; bottom: -0.1rem; left: 2px; font-style: normal; font-size: 0.55rem; color: var(--ink-faint); }
.band-meter-label { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); margin-top: var(--sp-1); }
.band-meter-sticky { position: sticky; top: 0; z-index: 5; background: var(--bg-page); padding: var(--sp-1) 0; }

/* Factor list (accordion, .perm-item disclosure lineage) */
.factor-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.factor-row { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-md); background: var(--bg-card); }
.factor-row.st-unreviewed { border-left-color: var(--line-strong); }
.factor-row.st-confirmed { border-left-color: var(--ok); }
.factor-row.st-changed { border-left-color: var(--info); }
.factor-row.st-insufficient { border-left-color: var(--warn); }
.factor-head { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; padding: var(--sp-3); cursor: pointer; list-style: none; flex-wrap: wrap; }
.factor-head::-webkit-details-marker { display: none; }
.factor-name { font-weight: 600; }
.factor-meta { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; }
.factor-body { padding: 0 var(--sp-3) var(--sp-3); }
.factor-state { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-xs); color: var(--ink-muted); }
.factor-state svg { width: 0.95rem; height: 0.95rem; }
.factor-state.confirmed { color: var(--ok-ink); }
.factor-state.changed { color: var(--info-ink); }
.factor-state.insufficient { color: var(--warn-ink); }
.factor-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

/* Level picker: a real radiogroup; 4-up grid (a .seg with 8 options
   overflows at 375px). */
.level-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); margin: var(--sp-2) 0; }
.level-picker [role="radio"] { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-inset); color: var(--ink); font-weight: 600; cursor: pointer; }
.level-picker [role="radio"][aria-checked="true"] { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.level-picker [role="radio"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* Evidence quotes */
.evidence-quote { margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-brand); background: var(--bg-inset); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-sm); }
.evidence-quote .provenance { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-muted); font-style: normal; }
.evidence-quote.rejected { opacity: 0.55; border-left-color: var(--line-strong); text-decoration: line-through; }

/* Checks & fairness list */
.checklist { display: flex; flex-direction: column; gap: var(--sp-2); }
.checklist-item { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-inset); font-size: var(--fs-sm); border-left: 3px solid var(--line-strong); }
.checklist-item.sev-critical { border-left-color: var(--danger); }
.checklist-item.sev-high { border-left-color: var(--warn); }
.checklist-item.sev-notice { border-left-color: var(--info); }
.checklist-item.done { opacity: 0.7; }

/* Duty log rows */
.duty-row { padding: var(--sp-3); }
.duty-row-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@media (max-width: 480px) { .duty-row-meta { grid-template-columns: 1fr; } }

/* Workbench header */
.wb-header h1 { margin-bottom: var(--sp-1); }
.wb-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Report / submission documents */
.doc-sheet { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.doc-meta h1 { margin-bottom: var(--sp-1); }
.doc-section { margin-top: var(--sp-4); }
.doc-section h2 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.doc-table th, .doc-table td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.print-footer { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.table-scroll { overflow-x: auto; }

/* ═══ PRINT ═════════════════════════════════════════════════════════════ */
/* The palette reset MUST override [data-theme="dark"], or a dark-mode user
   prints white-on-black. Reports print via the browser's Save as PDF. */
@media print {
  :root, [data-theme="dark"], :root:not([data-theme]) {
    --bg-page: #fff; --bg-card: #fff; --bg-inset: #fff; --bg-header: #fff;
    --ink: #000; --ink-muted: #333; --ink-faint: #555;
    --line: #999; --line-strong: #777;
    --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-4: none;
  }
  @page { size: A4; margin: 18mm 16mm; }
  .site-header, .tab-bar, .action-bar, .cta-bar, .assistant-fab, .assistant-overlay,
  #toast-region, .sheet-overlay, .update-banner, .btn, .screen-only, .bell-btn,
  .nav-toggle, .nav-drawer { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; }
  main.wrap { max-width: none; padding: 0; }
  .doc-sheet, .card { border: 0; box-shadow: none; padding: 0; background: #fff; }
  h1, h2, h3 { break-after: avoid; }
  table, .doc-section, .factor-row, .perm-item { break-inside: avoid; }
  .table-scroll { overflow: visible; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ═══ FAQ ═══════════════════════════════════════════════════════════════════
   Every value here is an existing token, so dark mode needs NO additions:
   neither the [data-theme="dark"] block nor the prefers-color-scheme fallback
   is touched. Keep it that way — if you reach for a colour literal, add a
   token instead. Motion is transition-only, so the global
   prefers-reduced-motion rule already neutralises it.
   ────────────────────────────────────────────────────────────────────────── */
.faq-toc { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.faq-toc a {
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 0.25rem 0.7rem; font-size: var(--fs-sm); color: var(--link); text-decoration: none;
}
.faq-toc a:hover { border-color: var(--line-strong); }

.faq-category { margin-bottom: var(--sp-6); scroll-margin-top: 4.5rem; }
.faq-category > h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }

/* Padding moves onto summary/body so the whole header row is the hit target. */
.faq-entry { padding: 0; scroll-margin-top: 4.5rem; }
.faq-entry > summary {
  padding: var(--sp-3) var(--sp-4); cursor: pointer; font-weight: 600;
  list-style: none; display: flex; gap: var(--sp-2); align-items: baseline;
}
.faq-entry > summary::-webkit-details-marker { display: none; }
.faq-entry > summary::before {
  content: "\25B8"; color: var(--ink-faint); flex-shrink: 0;
  transition: transform var(--t-quick) var(--ease-out);
}
.faq-entry[open] > summary::before { transform: rotate(90deg); }
.faq-entry[open] > summary { border-bottom: 1px solid var(--line); }
.faq-entry.targeted { box-shadow: 0 0 0 3px var(--focus-ring); }

.faq-answer { padding: var(--sp-3) var(--sp-4); }
.faq-answer > p:first-child { margin-top: 0; }
.faq-answer ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.faq-answer li { margin: 0.2rem 0; }
.faq-answer a { overflow-wrap: anywhere; }
.faq-anchor { color: var(--ink-faint); font-size: var(--fs-sm); text-decoration: none; }
.faq-anchor:hover { text-decoration: underline; }

.faq-search { position: relative; margin-bottom: var(--sp-1); }
.faq-search input { padding-right: 2.5rem; }
.faq-search.searching::after {
  content: ""; position: absolute; right: 0.9rem; top: 50%; width: 1rem; height: 1rem;
  margin-top: -0.5rem; border: 2px solid var(--line-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
/* Reserves a line so results do not jump when the status text appears. */
.faq-search-state { min-height: 1.4rem; margin: 0 0 var(--sp-4); }
.faq-results.stale { opacity: 0.55; transition: opacity var(--t-fast) var(--ease-out); }

.md-preview {
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: var(--sp-3); background: var(--bg-inset); min-height: 4rem;
}
.md-preview:empty::before { content: "Nothing to preview yet."; color: var(--ink-faint); }

/* ── contact message threads ───────────────────────────────────────────────
   Bubbles reuse .msg / .msg.member / .msg.advisor from the case thread above;
   lists reuse .case-list / .case-card. Only the unread marker is new. */
.case-card.unread { border-left: 4px solid var(--accent); }