/* Qera: the partner portal and the admin console. The public site and the patient pages load site.css instead; the
   two files never merge, but they share one set of tokens: the first :root block below repeats site.css's under the
   same names, and the console names after it are aliases onto those, so one palette drives both.
   Loud brand, quiet result: Signal Jade is a field with white text on it (the partner hero, primary buttons, step
   numbers). Night Ink is the text, the dark panels and the current page in a menu. GREEN, AMBER and RED appear only
   as a level badge, always with the word and the pip-in-ring; RED fills nothing but the emergency call buttons.
   Errors and destructive actions use the form-error family, never RED. No orange anywhere.
   Outfit 700/800 sets headings, buttons and numbers; Figtree sets everything a clinic reads.
   Mobile first. Every control outside running text is at least 44 x 44. */

/* Outfit (Rodrigo Fuenzalida, SIL OFL 1.1, /public/fonts/Outfit-OFL.txt) and Figtree (Erik Kennedy, SIL OFL 1.1,
   /public/fonts/Figtree-OFL.txt). Self-hosted: the CSP allows fonts from self only. */
@font-face { font-family: "Outfit"; src: url("/public/fonts/outfit-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/public/fonts/outfit-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/public/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/public/fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/public/fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- The shared tokens, copied from site.css under the same names (test/polish-web-pages.test.js holds them equal). ---- */
:root {
  color-scheme: light;

  /* ---- Primitives: the approved palette. Contrast is WCAG 2.1, text on background. ---- */
  --jade: #00845E;          /* Signal Jade: brand field, primary buttons. White on it 4.71:1 */
  --jade-deep: #00654B;     /* hover and pressed; the green allowed as small text. 7.09:1 on white */
  --jade-bright: #13BF8A;   /* Night Ink grounds, and the logo's plus. Never under white text (2.37:1) */
  --jade-tint: #DDF7EC;     /* quiet panels, the family's chat bubbles */
  --night-ink: #0A2530;     /* all text, the dark button, dark panels. 15.91:1 on white */
  --mist: #F2F6F6;          /* page */
  --white: #FFFFFF;         /* cards and result cards */
  --slate: #4D6670;         /* secondary text. 6.09:1 on white, 5.59:1 on Mist */
  --line: #D5E0E2;          /* hairlines and card borders, never the only edge of a control */

  /* Triage: results only. pip = the dot in the ring, ink = the word, tint = the chip behind it. */
  --green-pip: #4C9A2A; --green-ink: #2E7D1F; --green-tint: #ECF6E4;
  --amber-pip: #F2B705; --amber-ink: #7A5200; --amber-tint: #FFF4D3;
  --red-pip: #D92D20; --red-ink: #B42318; --red-tint: #FDECEC;
  --red-call: #C8281F;      /* the emergency call button: white on it 5.56:1 */
  --red-call-press: #A11F18;

  /* Supporting shades */
  --night-ink-2: #143846;   /* a panel inside a Night Ink panel; the dark button's hover */
  --on-ink-soft: #B7C8CD;   /* secondary text on Night Ink, 9.6:1 */
  --sunk: #E7EEEF;          /* a quiet panel on white or Mist */
  --sunk-deep: #DCE6E8;
  --field-edge: #6E858D;    /* input edges: 3.9:1 on white, 3.6:1 on Mist (WCAG 1.4.11) */
  --chat-wall: #EFEAE2;     /* the WhatsApp wall in the mockups */
  --read-tick: #2C8FC4;     /* WhatsApp's blue read ticks, decorative */
  --error-ink: #8E1B12;     /* form errors: 8.3:1 on the error tint. Never the RED fill */
  --error-tint: #FBEDEB;

  /* ---- Semantic ---- */
  --bg: var(--mist);
  --surface: var(--white);
  --surface-sunk: var(--sunk);
  --text: var(--night-ink);
  --text-soft: var(--slate);
  --text-muted: var(--slate);
  --primary: var(--jade);
  --primary-hover: var(--jade-deep);
  --on-primary: var(--white);
  --link: var(--jade-deep);
  --focus: var(--night-ink);
  --focus-on-dark: var(--white);
  --bubble-out: var(--jade-tint);

  /* ---- Type ---- */
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-label: 0.75rem;                                        /* 12, bold, upper case */
  --fs-xs: 0.8125rem;                                         /* 13 */
  --fs-sm: 0.9375rem;                                         /* 15 */
  --fs-base: 1.0625rem;                                       /* 17 */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);    /* 18 -> 21 */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);           /* 20 -> 24 */
  --fs-h2: clamp(2.125rem, 1.35rem + 2.9vw, 3.5rem);          /* 34 -> 56 */
  --fs-h1: clamp(2.5rem, 1.45rem + 3.9vw, 4.5rem);            /* 40 -> 72 */
  --fs-hero: clamp(3.25rem, 1.2rem + 5.8vw, 6.25rem);         /* 52 -> 100 */
  --fs-num: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);             /* 36 -> 48 */

  /* ---- Space (4-based) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(64px, 8vw, 120px);
  --gutter: 20px;
  --target: 44px;

  /* ---- Shape and depth: flat by default, shadows only on things that float. ---- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;
  --float: 0 24px 48px -18px rgba(10, 37, 48, 0.4);
  --phone-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
  --bubble-shadow: 0 1px 1px rgba(10, 37, 48, 0.1);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-scene: 300ms;
}

/* ---- Console names, as aliases onto the shared tokens ---- */
:root {
  --ink: var(--night-ink);
  --muted: var(--text-muted);
  /* Errors, failed payments and destructive actions: the form-error family, never the RED triage fill.
     --alert-ink is 8.3:1 on --alert-tint. */
  --alert-ink: var(--error-ink);
  --alert-tint: var(--error-tint);
  --alert-line: #F0C9C4;
  --error-hover: #F6DCD8;
  --line-strong: #B9C9CD;
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --font: var(--font-body);
  --mono: var(--font-mono);
}
@media (min-width: 900px) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root { accent-color: var(--primary); }
::selection { background: var(--jade-tint); color: var(--night-ink); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-base)/1.55 var(--font-body);
  /* Glyphs outside the Latin subset fall back to a system font; match them to Figtree's x-height. */
  font-size-adjust: from-font;
  -webkit-font-smoothing: antialiased;
  /* Long email addresses and references wrap instead of pushing the page sideways at 320 px. */
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }

/* Outfit 800 for page titles, 700 below that, with tight tracking on the big sizes. */
h1, h2, h3 { margin: 0 0 0.5em; color: var(--night-ink); text-wrap: balance; font-family: var(--font-display); font-synthesis: none; font-variant-numeric: lining-nums; }
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3rem; }
li + li { margin-top: 0.25em; }
img, svg { max-width: 100%; }
code { font-family: var(--font-mono); font-size: 0.875em; background: var(--sunk); padding: 0.1em 0.4em; border-radius: 6px; word-break: break-all; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

a {
  color: var(--link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
a:hover { color: var(--night-ink); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

summary, select, label.check, input[type="checkbox"], input[type="radio"], [data-copy], [data-copy-target] { cursor: pointer; }
/* No double-tap-to-zoom wait on controls. */
a, button, input, select, textarea, summary, label { touch-action: manipulation; }

/* Read by screen readers, not shown. */
.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;
}

.muted { color: var(--text-muted); }
.lead { font-size: var(--fs-lead); line-height: 1.52; color: var(--text-soft); }
.hint { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 6px; }
.small { font-size: var(--fs-sm); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.tabular, [data-countdown] { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--night-ink);
  color: var(--white);
  font-weight: 700;
}
.skip:focus { top: 12px; color: var(--white); }

/* The pip-in-ring: how a triage level is drawn, always beside its word. --pip is the level's colour, --gap the
   colour of the ground it sits on. */
.badge::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--pip, var(--slate));
  background: var(--pip, var(--slate));
  box-shadow: inset 0 0 0 2px var(--gap, var(--white));
}

/* ------------------------------------------------------------------ layout */

.container {
  width: min(100% - 2 * var(--gutter), 760px);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px) 0 var(--s-8);
}
.container.wide { width: min(100% - 2 * var(--gutter), 1200px); }

/* The header matches the site's: Mist at 94% with a light blur and the ink lockup.
   Sticky only where there is room for it. On phones and at 200% zoom a pinned header would eat a third of
   the screen and hide whatever has keyboard focus underneath it (WCAG 2.4.11). */
.topbar {
  position: relative;
  z-index: 20;
  background: rgba(242, 246, 246, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
@media (min-width: 768px) and (min-height: 600px) {
  .topbar { position: sticky; top: 0; }
  html { scroll-padding-top: 8rem; }
}
.topbar-inner {
  width: min(100% - 2 * var(--gutter), 760px);
  margin-inline: auto;
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
}
.topbar-inner.wide { width: min(100% - 2 * var(--gutter), 1200px); }

/* The tag keeps the logo's clear space: one plus, 28 of the lockup's 74 units (15 px at 110 px wide). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: var(--target);
  margin-right: auto;
  color: var(--night-ink);
  text-decoration: none;
}
.brand:hover { color: var(--night-ink); }
.brand-lockup { display: block; width: 110px; height: auto; }
/* "partners" or "admin" beside the lockup: a small Night Ink pill, 12 px caps. */
.brand-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--night-ink);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.signout { display: flex; margin: 0; }
.nav a, .nav button.link, .signout button.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  min-width: var(--target);
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--night-ink);
  font: 700 var(--fs-sm)/1.2 var(--font-body);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.nav a:hover, .nav button.link:hover, .signout button.link:hover { background: var(--sunk); color: var(--night-ink); }
.nav a.active, .nav a[aria-current] { background: var(--night-ink); color: var(--white); }
.signout button.link { text-decoration: underline; text-underline-offset: 0.18em; }

/* The logo row is as tall as the site header's, so the logo doesn't jump between the site and a console page. */
.topbar-inner > .brand { min-height: 72px; }
/* Signed in, below 1100 px: the brand and Sign out share the first row and the menu gets a row of its own.
   Signed out there is no Sign out and the menu is short, so it stays on the logo's row. */
@media (max-width: 1099px) {
  .topbar-inner:has(.signout) .signout { order: 2; }
  .topbar-inner:has(.signout) .nav { order: 3; flex: 1 0 calc(100% + 20px); margin: 0 -10px; padding-bottom: 10px; }
  .topbar-inner:has(.signout) > .brand { min-height: var(--target); margin-block: 12px; }
  .nav a { padding: 0 12px; }
}
/* Signed out on a phone: the brand is the way home, so Home steps aside and the two other links fit beside it. */
@media (max-width: 559px) {
  .topbar-inner:not(:has(.signout)) .nav-home { display: none; }
  .topbar-inner:not(:has(.signout)) .nav { gap: 2px; }
  .topbar-inner:not(:has(.signout)) .nav a { padding: 0 10px; }
}
@media (max-width: 359px) {
  .topbar-inner { column-gap: 8px; }
  .brand-lockup { width: 92px; }
  .brand { gap: 12px; }
}
/* Four partner links fit one row down to 375 px. */
@media (max-width: 419px) {
  .nav { gap: 0; }
  .nav a { padding: 0 9px; font-size: 0.875rem; }
}
@media (min-width: 900px) {
  .brand-lockup { width: 126px; }
  .brand { gap: 18px; }
  .topbar-inner { min-height: 80px; }
}
@media (min-width: 1100px) {
  .signout { margin-left: 4px; padding-left: 8px; box-shadow: inset 1px 0 0 var(--line); }
}

/* Preview stage (admin only): a Night Ink strip, calm but impossible to miss. */
.preview-bar { background: var(--night-ink); color: var(--white); }
.preview-bar :focus-visible { outline-color: var(--focus-on-dark); }
.preview-inner {
  width: min(100% - 2 * var(--gutter), 760px);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  font-size: var(--fs-sm);
}
.preview-inner.wide { width: min(100% - 2 * var(--gutter), 1200px); }
.preview-inner p { margin: 0; padding: 10px 0; color: var(--on-ink-soft); }
.preview-inner strong { color: var(--white); }
.preview-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--jade-bright);
  font-weight: 700;
}
.preview-link:hover { color: var(--white); }

form.inline, .inline { display: inline; margin: 0; }

button.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* Footer: a Night Ink panel with rounded corners, inset from the screen edge, like the site's. */
.footer {
  margin: var(--s-7) 8px 8px;
  border-radius: var(--r-lg);
  background: var(--night-ink);
  color: var(--on-ink-soft);
  font-size: var(--fs-sm);
}
.footer .container { padding: 32px 0 24px; }
.footer-lockup { display: block; width: 110px; height: auto; margin: 0 0 16px; }
.footer p { margin-bottom: 8px; }
.footer strong { color: var(--white); }
.footer .muted { color: var(--on-ink-soft); }
.footer a { color: var(--white); }
.footer a:hover { color: var(--white); }
.footer :focus-visible { outline-color: var(--focus-on-dark); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 4px 0 8px -12px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  text-decoration: none;
}
.footer-links a:hover { background: var(--night-ink-2); text-decoration: underline; }
@media (min-width: 900px) {
  .footer { margin: var(--s-8) 16px 16px; border-radius: var(--r-xl); }
  .footer .container { padding: 44px 0 28px; }
  .footer-lockup { width: 126px; }
}

.section { margin: 36px 0; }
.back { margin: 0 0 8px; font-size: var(--fs-sm); }
.back a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; text-decoration: none; }
.back a:hover { text-decoration: underline; }
/* The arrow is decoration; the second declaration gives it empty alt text where supported. */
.back a::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; }
.narrow { max-width: 30rem; margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.grid + p { margin-top: 16px; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stack > * + * { margin-top: 16px; }
/* Hidden inputs take no room, so the first thing after them sits flush. */
.stack > input[type="hidden"] + * { margin-top: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* A page title with its status beside it (the clinic's name and "Active"). */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 24px; }
.toolbar h1, .toolbar h2 { margin: 0; }
.toolbar .pill { padding: 5px 14px; font-size: var(--fs-sm); }
/* Plain sections inside a page (admin fee findings): a clear break above each heading. */
.container > section:not([class]) { margin-top: 40px; }
.container > section:not([class]) > h2 { margin-bottom: 16px; }
.page-intro { max-width: 46rem; margin: -8px 0 24px; color: var(--text-muted); }

/* ------------------------------------------------------------------ buttons */

/* Pills in Outfit 700, flat. Signal Jade with white text is the main action; Night Ink outline the second.
   A press goes to Night Ink, so it reads on any ground. */
.btn, :where(button:not(.link)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  min-width: var(--target);
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  font: 700 1.0625rem/1.2 var(--font-display);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover, :where(button:not(.link)):hover { background: var(--primary-hover); color: var(--on-primary); text-decoration: none; }
.btn:active, :where(button:not(.link)):active { background: var(--night-ink); color: var(--white); }
/* The one main action on a page. .btn-cta and .btn-primary are the same button. */
.btn-primary, .btn-cta { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover, .btn-cta:hover { background: var(--primary-hover); color: var(--on-primary); }
/* Night Ink: the main action on a Signal Jade field. */
.btn-dark, .p-hero .btn-cta { background: var(--night-ink); color: var(--white); }
.btn-dark:hover, .p-hero .btn-cta:hover { background: var(--night-ink-2); color: var(--white); }
/* Outline in ink on light grounds. */
.btn-ghost { background: transparent; color: var(--night-ink); box-shadow: inset 0 0 0 2px var(--night-ink); }
.btn-ghost:hover { background: var(--night-ink); color: var(--white); }
.btn-ghost:active { background: var(--night-ink-2); color: var(--white); }
/* Destructive, never RED triage: the form-error family. */
.btn-danger { background: var(--alert-tint); color: var(--alert-ink); box-shadow: inset 0 0 0 2px var(--alert-ink); }
.btn-danger:hover { background: var(--error-hover); color: var(--alert-ink); }
.btn-danger:active { background: var(--alert-ink); color: var(--white); }
.btn[aria-disabled="true"], button:disabled { background: var(--line); color: var(--slate); box-shadow: none; cursor: not-allowed; }
/* Smaller type and padding only: the tap area stays 44 px. */
.btn-small { min-height: var(--target); padding: 0 18px; font-size: var(--fs-sm); }
.btn-block { display: flex; width: 100%; }
/* The one action at the end of a long form: bigger, and full width on phones. */
.btn-wide { width: 100%; min-height: 60px; padding: 0 32px; font-size: 1.1875rem; }
@media (min-width: 560px) { .btn-wide { width: auto; } }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; }
.actions form { margin: 0; }
/* Helper lines under a button or a row of buttons get room to breathe. */
.actions + p, .btn + .hint, form > .btn + p, form + p.muted, form + p.hint { margin-top: 12px; }

/* A standalone link outside running text: the box grows to the 44 px target, the text stays where it was. */
.link-target { display: inline-flex; align-items: center; min-height: var(--target); }

/* ------------------------------------------------------------------ cards, stats, tables */

/* Flat: a 1 px Line edge, no shadow. Shadows are for things that float. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  margin: 0 0 20px;
}
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { margin: 0; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); letter-spacing: -0.01em; }
.card-body > :last-child { margin-bottom: 0; }
@media (min-width: 640px) {
  .card { padding: 28px 32px; }
}

/* Stats: the label first, the figure in Outfit 800, then a hint. components.stat prints value, label, hint;
   the order is set here. */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); margin: 0 0 24px; }
@media (min-width: 900px) { .container.wide .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.stat-label { order: -1; font: 700 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.stat-value { margin-top: 8px; font: 800 clamp(2rem, 1.7rem + 1vw, 2.75rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--night-ink); font-variant-numeric: lining-nums tabular-nums; }
.stat-hint { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-muted); }
.stat-hint .btn { margin-top: 6px; }
.stat-hint a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; }

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
/* Baseline, not top: a 44 px link in one cell and plain text in the next still read along one line. */
th, td { padding: 12px 16px; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
th { background: var(--sunk); color: var(--slate); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background-color var(--t-fast) var(--ease); }
tbody tr:hover { background: var(--mist); }
td .link-target { font-weight: 700; }
/* Codes like SETTINGS_UPDATED stay whole on wide screens instead of breaking mid-word. */
td code:not(.details):not(.error-text) { white-space: nowrap; word-break: normal; }

/* Under 560 px of table width each row becomes a card of label/value pairs, so nothing scrolls sideways.
   The labels come from data-label on every cell (components.table). Without container queries the table scrolls. */
.table-stack { container-type: inline-size; }
@container (max-width: 559px) {
  .table-stack table, .table-stack tbody, .table-stack tr, .table-stack td { display: block; }
  .table-stack thead { display: none; }
  .table-stack tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  /* Label and value share a two-column grid, so a label that wraps pushes the row down instead of
     running into the next one. */
  .table-stack td { display: grid; grid-template-columns: 36% minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 4px 0; border: 0; }
  .table-stack td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-muted);
  }
  .table-stack td[data-label=""] { display: block; }
  .table-stack td[data-label=""]::before { content: none; }
  .table-stack td code:not(.details):not(.error-text) { white-space: normal; overflow-wrap: anywhere; }
  .table-stack td .actions { margin-top: 0; }
}

.empty {
  margin: 0;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  color: var(--text-soft);
  text-align: center;
}

/* ------------------------------------------------------------------ badges and pills */

/* Triage badge: the only way a level appears in the consoles. The word is always there, beside the pip, so colour
   is never the only signal. */
.badge {
  --gap: var(--sunk);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 10px 4px 6px;
  border-radius: var(--r-pill);
  background: var(--sunk);
  color: var(--night-ink);
  font: 700 0.75rem/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.badge-green { --pip: var(--green-pip); --gap: var(--green-tint); background: var(--green-tint); color: var(--green-ink); }
.badge-amber { --pip: var(--amber-pip); --gap: var(--amber-tint); background: var(--amber-tint); color: var(--amber-ink); }
.badge-red { --pip: var(--red-pip); --gap: var(--red-tint); background: var(--red-tint); color: var(--red-ink); }

/* Pills: status words that aren't a triage level. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--sunk);
  color: var(--slate);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.pill-ok { background: var(--jade-tint); color: var(--jade-deep); }
.pill-warn { background: var(--night-ink); color: var(--white); }
.pill-danger { background: var(--alert-tint); color: var(--alert-ink); box-shadow: inset 0 0 0 1px var(--alert-line); }
.pill-muted { background: var(--sunk); color: var(--slate); }

/* ------------------------------------------------------------------ forms */

.form { margin: 0; }
.field { display: grid; gap: 8px; margin: 0 0 20px; }
.field label { font-weight: 700; }
.field .hint { margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="url"], input[type="search"], input[type="date"], input[type="time"], select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border: 2px solid var(--field-edge);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--night-ink);
  font: 400 var(--fs-base)/1.4 var(--font-body);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea { min-height: 7rem; resize: vertical; }
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%230A2530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--night-ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--night-ink); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--alert-ink); box-shadow: inset 0 0 0 1px var(--alert-ink); }
/* Errors sit between the label and the field, dark red on a pale red box (the form-error family, never RED). */
.field-error { display: block; margin: 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--alert-tint); color: var(--alert-ink); font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; }
.field-check { margin: 0 0 8px; }
.field-check .check { margin: 0; }
.field-check .field-error { margin: 4px 0; }
.field-check.has-error, .hours-row.has-error { padding-left: 14px; box-shadow: inset 3px 0 0 var(--alert-ink); }
.error-summary ul { margin: 8px 0 0; }
.error-summary li + li { margin-top: 4px; }
.error-summary a { color: var(--alert-ink); font-weight: 700; }
.error-summary:focus-visible { outline-offset: 3px; }
.error-summary p { margin: 0; }
/* The whole label row is the target, so a 24 px box still gets a 44 px tap area. */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--target); padding: 10px 0; margin: 0 0 4px; cursor: pointer; line-height: 1.45; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; accent-color: var(--primary); }
/* Radio tiles: two or more choices laid out as cards (who do you treat, top-up amount). */
label.check:has(> input[type="radio"]) {
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
label.check:has(> input[type="radio"]):hover { box-shadow: inset 0 0 0 2px var(--night-ink); }
label.check:has(> input[type="radio"]:checked) { background: var(--jade-tint); box-shadow: inset 0 0 0 2px var(--jade); font-weight: 700; }
fieldset.choice { border: 0; padding: 0; margin: 0 0 20px; border-radius: 0; box-shadow: none; background: none; }
fieldset.choice > legend { padding: 0; margin-bottom: 8px; font: 700 var(--fs-base)/1.4 var(--font-body); float: none; }
fieldset.choice .check { margin-bottom: 8px; }
fieldset.choice.has-error { padding-left: 14px; box-shadow: inset 3px 0 0 var(--alert-ink); }
.choice-hint { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
/* min-width: 0 undoes the fieldset default of min-content, which pushes narrow screens sideways. */
fieldset { min-width: 0; margin: 0 0 20px; padding: 14px 18px 4px; border: 1px solid var(--line); border-radius: var(--r-md); }
legend { padding: 0 6px; font-weight: 700; }
.inline-form { display: inline-flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.inline-form .field { margin: 0; }

/* Long forms (sign-up, settings): each fieldset is a card with an Outfit heading. The legend floats so it sits
   inside the card instead of on its border. */
.form-sections > fieldset {
  padding: 22px 20px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.form-sections > fieldset > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 18px;
  font: 700 clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--night-ink);
  font-variant-numeric: lining-nums;
}
.form-sections > fieldset > legend + * { clear: both; }
.form-sections > .btn { margin-top: 4px; }
@media (min-width: 640px) {
  .form-sections > fieldset { padding: 28px 32px 14px; }
}

/* Flash and standing banners: role="status" lines above the page or a form. */
.flash {
  display: block;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--jade-tint);
  color: var(--night-ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.flash-ok { background: var(--jade-tint); box-shadow: inset 4px 0 0 var(--jade); }
.flash-warn { background: var(--sunk); box-shadow: inset 4px 0 0 var(--night-ink); }
.flash-danger { background: var(--alert-tint); color: var(--alert-ink); box-shadow: inset 0 0 0 1px var(--alert-line), inset 4px 0 0 var(--alert-ink); }
.flash-danger a { color: var(--alert-ink); }
.flash > :last-child { margin-bottom: 0; }
.flash ul { margin: 8px 0 0; }

/* Countdown: role="timer"; the ticking digits are aria-hidden and a fixed "ends at 14:35" is read instead. */
.countdown { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--night-ink); }
.countdown.expired { color: var(--text-muted); }

/* ------------------------------------------------------------------ emergency numbers */

/* components.emergencyCalls prints these. Calling is the RED instruction, so these are the one control RED
   fills. No console page prints them today; a page under /partner or /admin that does gets the site's look. */
.calls { display: grid; gap: 10px; }
.calls-label, .calls-none { margin: 0; font-weight: 700; }
.calls-else { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
/* Flex basis in rem: with large system text the buttons stack instead of clipping the numbers. */
.sos-calls { display: flex; flex-wrap: wrap; gap: 10px; }
.call {
  flex: 1 1 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--red-call);
  color: var(--white);
  line-height: 1.1;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.call:hover, .call:active { background: var(--red-call-press); color: var(--white); }
.call svg { width: 22px; height: 22px; flex: none; }
.call > span { display: grid; }
.call b { font: 800 1.375rem/1.1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; }
.call small { font-size: var(--fs-xs); font-weight: 500; }
.call-sm { min-height: 52px; justify-content: flex-start; }
.call-sm b { font-size: 1.1875rem; }
.call-long { justify-content: flex-start; }
.call-long b { font-size: 1.1875rem; letter-spacing: 0; }

/* ------------------------------------------------------------------ notices and documents */

/* One-message pages ("check your email", a lost case, the 404 under /partner or /admin). public.noticeView
   prints a bare .notice; the partner views print .card.notice with a .card-body. */
.notice {
  max-width: 40rem;
  margin: clamp(8px, 3vw, 32px) auto 0;
  padding: 30px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.notice h1 { font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); margin-bottom: 14px; }
.notice .lead { margin-bottom: 16px; }
.notice > :last-child, .notice .card-body > :last-child { margin-bottom: 0; }
.notice-danger { border-color: var(--alert-line); }
.notice-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%; background: var(--jade-tint); color: var(--jade-deep); }
.notice-mark svg { width: 26px; height: 26px; }
@media (min-width: 640px) {
  .notice { padding: 48px 52px; }
}

.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 20px; }
.doc ol { margin: 0; padding-left: 1.5em; }
.doc li { line-height: 1.65; padding-left: 6px; }
.doc li + li { margin-top: 14px; }
.doc li::marker { color: var(--jade-deep); font: 800 1.0625rem/1 var(--font-display); }
.doc p { line-height: 1.65; }
@media (min-width: 640px) { .doc { padding: 36px 44px; } }

/* ------------------------------------------------------------------ partner landing and sign-in */

/* The sign-in page widens to the console's 1200 px column for its jade field. */
.container:has(> .p-hero) { width: min(100% - 2 * var(--gutter), 1200px); padding-top: 12px; }
.p-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 32px;
  padding: 36px 20px 20px;
  border-radius: var(--r-lg);
  background: var(--jade);
  color: var(--white);
}
/* One ring, the Q's bowl, drawn as a border so no gradient is needed. */
.p-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 560px;
  right: -260px;
  bottom: -300px;
  border-radius: 50%;
  border: 72px solid rgba(255, 255, 255, 0.07);
}
.p-hero :focus-visible { outline-color: var(--focus-on-dark); }
.p-hero .form-card :focus-visible { outline-color: var(--focus); }
/* The kicker is a Night Ink chip, as on the site's hero. */
.p-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--r-pill);
  background: var(--night-ink);
  color: var(--white);
  font: 700 var(--fs-sm)/1.25 var(--font-body);
}
.p-kicker::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--jade-bright); }
/* On a phone the chip takes two lines: balanced, with corners that suit two lines. */
@media (max-width: 559px) {
  .p-kicker { border-radius: var(--r-md); padding: 9px 16px 9px 12px; text-wrap: balance; }
}
.p-hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem); line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 20px; color: var(--white); }
.p-lead { max-width: 34rem; margin: 0 0 28px; font-size: var(--fs-lead); line-height: 1.52; color: var(--white); }
.p-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.p-cta .btn { min-height: 60px; padding: 0 32px; font-size: 1.1875rem; }
.p-note { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--white); }
/* The sign-in card floats on the jade field, so it gets the one shadow on the page. */
.form-card {
  padding: 26px 22px 22px;
  background: var(--surface);
  color: var(--night-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--float);
}
.form-card h2 { margin: 0 0 8px; font: 800 clamp(1.5rem, 1.35rem + 0.6vw, 2rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.form-card > p { color: var(--text-soft); }
.form-card form { margin: 0; }
.form-card .btn { width: 100%; }
.form-card .after { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-soft); }
@media (min-width: 900px) {
  .p-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 56px; padding: 64px 56px; border-radius: var(--r-xl); }
  .p-hero::before { width: 820px; height: 820px; right: -300px; bottom: -420px; border-width: 96px; }
  .form-card { padding: 38px 38px 32px; border-radius: var(--r-xl); }
}
@media (min-width: 1100px) {
  .p-hero { padding: 80px 72px; gap: 72px; }
}

.p-section { margin-top: clamp(56px, 7vw, 96px); }
.p-section > h2, .p-split h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 24px; }

/* How it works: one card with rows on phones, a card per step from 900 px. */
.steps { list-style: none; margin: 0; padding: 4px 20px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; margin: 0; padding: 20px 0; }
.step + .step { margin-top: 0; border-top: 1px solid var(--line); }
.step-num { grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--jade); color: var(--white); font: 800 1.125rem/1 var(--font-display); font-variant-numeric: lining-nums; }
.step h3 { align-self: center; min-height: 40px; display: flex; align-items: center; margin: 0; }
.step p { grid-column: 2; margin: 0; color: var(--text-soft); }
@media (min-width: 900px) {
  .steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; padding: 0; background: none; border: 0; border-radius: 0; }
  .step { grid-template-columns: 1fr; align-content: start; row-gap: 12px; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .step + .step { border-top: 1px solid var(--line); }
  .step-num { grid-row: auto; width: 48px; height: 48px; font-size: 1.375rem; }
  .step h3 { min-height: 0; display: block; font-size: 1.375rem; }
  .step p { grid-column: auto; }
}

/* Who it's for, beside the covenant card: a Night Ink panel with the caps as big Outfit numbers. */
.p-split { display: grid; gap: 24px; margin-top: clamp(56px, 7vw, 96px); }
.p-who p { color: var(--text-soft); }
.p-covenant { padding: 30px 22px; border-radius: var(--r-xl); background: var(--night-ink); color: var(--on-ink-soft); }
.p-covenant h2 { color: var(--white); }
.p-covenant a { color: var(--white); }
.p-covenant strong { color: var(--white); }
.p-covenant :focus-visible { outline-color: var(--focus-on-dark); }
.p-covenant > :last-child { margin-bottom: 0; }
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 20px; }
.cap { min-width: 0; padding: 16px 18px; border-radius: var(--r-md); background: var(--night-ink-2); }
.cap small { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jade-bright); }
.cap b { display: block; margin: 6px 0 2px; font: 800 var(--fs-num)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--white); font-variant-numeric: lining-nums; }
.cap span { display: block; font-size: var(--fs-sm); color: var(--on-ink-soft); }
@media (min-width: 900px) {
  .p-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .p-covenant { padding: 44px 44px 40px; }
}

/* ------------------------------------------------------------------ partner waiting portal */

/* The open cases sit on a quiet panel as white cards, the way the site previews the portal to clinics. */
.leads-panel { margin: 0 0 24px; padding: 18px 12px 12px; border-radius: var(--r-lg); background: var(--surface-sunk); }
.leads-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 0 8px 14px; }
.leads-head h2 { margin: 0; }
@media (min-width: 640px) {
  .leads-panel { padding: 26px 24px 24px; border-radius: var(--r-xl); }
  .leads-head { padding: 0 4px 18px; }
}
.live-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.live-dot { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--jade); }
.live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--jade); opacity: 0; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.leads-panel .empty { background: var(--surface); }

.lead-list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .lead-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
/* Calm, like a result card: white, one level badge, no coloured edge. */
.lead-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 20px 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.lead-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 1.3125rem; }
.lead-card form { flex: 1 0 100%; margin: 0; }
.lead-card .btn { width: 100%; }
@media (min-width: 520px) {
  .lead-card form { flex: none; }
  .lead-card .btn { width: auto; }
}
.lead-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: 12px 16px; margin: 0; }
.lead-facts dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.lead-facts dd { margin: 2px 0 0; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.lead-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.lead-phone { margin: 0; font-size: var(--fs-sm); }
/* The first-look window: a Night Ink strip, the clock in Jade Bright. */
.exclusive { margin: 0; padding: 12px 16px; border-radius: var(--r-sm); background: var(--night-ink); color: var(--white); font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; }
.exclusive .countdown { color: var(--jade-bright); }
.blurred {
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.copy-done { outline: 2px solid var(--primary); }

/* A claimed case: the family's number first, as a big number. */
.case-header { margin-bottom: 24px; }
.case-header h1 { margin-bottom: 12px; }
.case-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.contact-number { margin: 0 0 4px; font: 800 clamp(2rem, 1.5rem + 2vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.contact-number a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--night-ink); text-decoration: none; }
.contact-number a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.case-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0 0 16px; }
.card-body > .case-meta:last-child { margin-bottom: 0; }
@media (min-width: 640px) { .case-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case-meta dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4; }
.case-meta dd { margin: 2px 0 0; font-weight: 700; line-height: 1.4; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.snap { display: grid; gap: 16px; margin: 0; padding: 16px; background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-md); }
@media (min-width: 720px) { .snap { grid-template-columns: 240px minmax(0, 1fr); } }
.snap-media img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--sunk); }
.snap-gone { display: grid; place-items: center; min-height: 120px; margin: 0; padding: 16px; border-radius: var(--r-sm); background: var(--surface-sunk); color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
.snap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.snap-body h3 { font-size: var(--fs-base); margin: 16px 0 6px; }
.snap-body ul { margin: 0 0 12px; padding-left: 1.25em; }
.snap-body > :last-child { margin-bottom: 0; }

/* Wallet: top-up amounts as a grid of tiles, the amounts in Outfit. */
.amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.amounts .check { margin: 0; }
.amounts .check:not(.amount-other) span { font: 800 1.25rem/1.2 var(--font-display); letter-spacing: -0.01em; }
@media (min-width: 640px) { .amounts { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); } }
.amount-other { grid-column: 1 / -1; }
@media (min-width: 640px) { .amount-other { grid-column: auto / span 2; } }

/* ------------------------------------------------------------------ partner settings and admin console */

.lead-phone .muted { margin-left: 4px; }
.hours-intro { margin: 0 0 12px; }
.hours-row { padding: 14px 0 6px; border-top: 1px solid var(--line); }
.hours-intro + .hours-row { border-top: 0; padding-top: 0; }
.hours-row > p { margin: 0 0 4px; }
.hours-row .field, .hours-row .check { margin-bottom: 8px; }
/* "Closed all day" ticked: the times don't apply (the server ignores them), so they step aside. Browsers without
   :has() keep showing them. */
.hours-row:has(input[name$="_closed"]:checked) .hours-times { display: none; }
/* A 24-hour practice is always open, so its opening hours step aside (the server skips them too). */
form:has(input[name="is_24h"]:checked) fieldset.hours { display: none; }

blockquote.appeal {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  box-shadow: inset 3px 0 0 var(--line-strong);
  white-space: pre-wrap;
}

/* Filters: the current one is solid Night Ink, the rest outlined. 44 px tall. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.filters .pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 18px;
  background: var(--white);
  color: var(--night-ink);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  font-size: var(--fs-sm);
  white-space: normal;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.filters .pill:hover { color: var(--night-ink); box-shadow: inset 0 0 0 2px var(--night-ink); }
.filters .pill[aria-current="page"] { background: var(--night-ink); color: var(--white); box-shadow: none; }

/* "Needs you": each item is a whole-row link. */
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { margin: 0; border-bottom: 1px solid var(--line); }
.todo li:last-child { border-bottom: 0; }
.todo a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 4px 0; color: var(--night-ink); font-weight: 700; text-decoration: none; }
.todo a::after { content: "\2192"; content: "\2192" / ""; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--jade-tint); color: var(--jade-deep); transition: transform var(--t-fast) var(--ease); }
.todo a:hover { text-decoration: underline; }
.todo a:hover::after { transform: translateX(3px); }

.plain-list { list-style: none; margin: 0 0 16px; padding: 0; }
.plain-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }
.plain-list li:has(> a.link-target:only-child) { padding: 0; }

.gate { margin: 0; }
.gate label { display: block; margin-bottom: 8px; font-weight: 700; }
.gate progress {
  display: block;
  width: 100%;
  height: 12px;
  border: 0;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--sunk-deep);
  accent-color: var(--primary);
}
.gate progress::-webkit-progress-bar { background: var(--sunk-deep); border-radius: var(--r-pill); }
.gate progress::-webkit-progress-value { background: var(--primary); border-radius: var(--r-pill); }
.gate progress::-moz-progress-bar { background: var(--primary); border-radius: var(--r-pill); }
.gate p { margin: 8px 0 0; font-size: var(--fs-sm); }

/* Admin row actions: a small outlined pill that opens in place. */
details.action { margin: 0; }
td .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0; }
td .actions > form { margin: 0; }
details.action > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target);
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--night-ink);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  font: 700 var(--fs-sm)/1.2 var(--font-display);
  list-style: none;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
details.action > summary::-webkit-details-marker { display: none; }
details.action > summary::after { content: "\25BE"; content: "\25BE" / ""; font-size: 0.8em; transition: transform var(--t-fast) var(--ease); }
details.action[open] > summary::after { transform: rotate(180deg); }
details.action > summary:hover { box-shadow: inset 0 0 0 2px var(--night-ink); }
details.action[open] { flex-basis: 100%; padding: 8px 14px 14px; border-radius: var(--r-md); background: var(--sunk); }
details.action[open] > summary { margin: 0 0 10px -6px; }

code.details, code.error-text {
  display: block;
  max-width: 36rem;
  padding: 0;
  background: transparent;
  font-size: 0.8125rem;
  white-space: pre-wrap;
  word-break: break-word;
}
code.error-text { color: var(--alert-ink); }
span.details { display: block; max-width: 30rem; font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; }

.card.violation { border-color: var(--alert-line); }
.card.dispute { border-color: var(--line-strong); }
.card.violation .card-head h2, .card.dispute .card-head h2 { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); }

/* Admin sign-in: the form card on its own, centred. */
.signin-card { max-width: 30rem; margin: clamp(8px, 4vw, 48px) auto 0; padding: 30px 22px; border-radius: var(--r-xl); }
.signin-card h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); }
.signin-card .btn { width: 100%; }
@media (min-width: 640px) { .signin-card { padding: 44px 48px; } }

/* Admin → WhatsApp setup. The number and webhook cards sit side by side once each has room for two fact columns. */
.wa-grid { display: grid; gap: 0 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .wa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-grid .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wa-env .table-wrap, .wa-templates .table-wrap { margin-bottom: 16px; }
.wa-webhook h3 { margin: 24px 0 8px; }
.wa-webhook form { margin-top: 12px; }
/* The callback URL and its Copy button: one line on a wide screen, the button under the URL on a phone. */
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 16px; }
code.copy-value {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  font-size: 0.9375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.wa-register form, .wa-test form, .wa-profile form { max-width: 34rem; }

/* ------------------------------------------------------------------ print */

@media print {
  .topbar, .footer, .actions, form, .skip, .back, .preview-bar { display: none !important; }
  body { background: #FFFFFF; }
  .card, .snap, .doc, .stat, .notice { box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

@media (forced-colors: active) {
  .btn, .call, .badge, .pill, .filters .pill, details.action > summary, label.check:has(> input[type="radio"]) { border: 2px solid ButtonText; }
  .badge::before, .live-dot, .p-kicker::before { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}