/* Dawi design tokens — generated from brand-src/design_handoff_dawi_brand/tokens/.

   Do not edit here; edit nothing there either. See tools/lib/brand.js. */



/* ---- tokens/colors.css ---- */
:root {
  /* ---- Brand ---------------------------------------------------------- */
  /* The mark is #D90000 painted at 80% opacity; over paper it reads #E03333. */
  --dawi-red-ink: #d90000;
  --dawi-red: #e03333;
  --dawi-red-deep: #b5211d;
  --dawi-red-tint: #fdece9;

  /* ---- Warm neutrals (the "paper" family) ----------------------------- */
  --paper: #fdfbf7;
  --paper-raised: #ffffff;
  --paper-sunk: #faf3ea;
  --paper-deep: #f3e7da;

  --ink-900: #4a3a33;
  --ink-700: #57453c;
  --ink-500: #786359;
  --ink-300: #a08974;
  --ink-100: #cbb9a6;

  --line-strong: #e6d6c4;
  --line: #eee0d2;
  --line-soft: #f4e9dd;

  /* ---- Silk palette (sampled from the brand imagery) ------------------- */
  --silk-blush: #f9c9ce;
  --silk-rose: #f2a9a4;
  --silk-coral: #f0906e;
  --silk-peach: #fcd9b8;
  --silk-amber: #f2b24c;
  --silk-cream: #fcf0e4;
  --silk-sand: #f0d8cc;

  /* ---- Analytical accents (from the simulator) ------------------------- */
  --sage: #8fae98;
  --sage-tint: #eaf1eb;
  --violet: #9a8fc4;
  --violet-tint: #efedf7;

  /* ---- Semantic aliases ------------------------------------------------ */
  --surface-page: var(--paper);
  --surface-card: var(--paper-raised);
  --surface-sunk: var(--paper-sunk);
  --surface-inverse: #3a2d27;

  --text-display: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-300);
  --text-on-accent: #fffaf5;
  --text-link: var(--dawi-red-deep);
  --text-link-hover: var(--dawi-red);

  --border-default: var(--line);
  --border-strong: var(--line-strong);
  --border-focus: var(--dawi-red);

  --accent: var(--dawi-red);
  --accent-hover: var(--dawi-red-deep);
  --accent-quiet: var(--dawi-red-tint);

  --status-good: var(--sage);
  --status-good-tint: var(--sage-tint);
  --status-watch: var(--silk-amber);
  --status-watch-tint: #fdf1dc;
  --status-strain: var(--silk-coral);
  --status-strain-tint: #fdeae2;
  --status-note: var(--violet);
  --status-note-tint: var(--violet-tint);
}

/* ---- tokens/typography.css ---- */
:root {
  --font-display: "Questrial", ui-sans-serif, system-ui, sans-serif;
  --font-text: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  /* Same face as display today, but kept separate: the wordmark is a fixed
     asset and must not move if the display face is ever swapped. */
  --font-wordmark: "Questrial", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Wordmark lockup: Questrial 400, split "i", no leading pad — tracking sits
     between glyphs only, so the box equals the ink and centres correctly. */
  --wordmark-tracking: 0.66em;

  /* Questrial ships ONE weight (400), so display type has no weight axis:
     hierarchy comes from size and tracking alone. The weight tokens below
     apply to DM Sans text only. */
  --weight-display: 400;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-eyebrow: 700;

  /* Display scale — Questrial (single weight); tracking tightens as size grows */
  --type-hero: 76px;
  --type-hero-tracking: -2.6px;
  --type-display: 52px;
  --type-display-tracking: -1.6px;
  --type-title: 34px;
  --type-title-tracking: -0.9px;
  --type-heading: 24px;
  --type-heading-tracking: -0.5px;

  /* Text scale — DM Sans */
  --type-lead: 19px;
  --type-body: 16px;
  --type-body-sm: 14.5px;
  --type-caption: 12.5px;

  /* Eyebrow / label — DM Sans 700, wide tracking, uppercase */
  --type-eyebrow: 11px;
  --type-eyebrow-tracking: 1.8px;
  --type-label: 10.5px;
  --type-label-tracking: 1.4px;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.62;
  --leading-loose: 1.75;

  --measure: 68ch;
  --measure-narrow: 52ch;
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 34px;
  --space-8: 44px;
  --space-9: 58px;
  --space-10: 76px;
  --space-11: 104px;
  --space-12: 140px;

  --gutter-page: 40px;
  --gutter-page-sm: 22px;
  --width-content: 1180px;
  --width-prose: 720px;

  /* Sticky site header — the splash subtracts this so the two cannot drift apart */
  --nav-height: 51px;
}

/* ---- tokens/surfaces.css ---- */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--border-default);
  --border-dashed: 1px dashed var(--line-strong);

  /* Shadows are warm, wide and very low-opacity — light through fabric,
     never a grey drop shadow. */
  --shadow-none: none;
  --shadow-card: 0 12px 30px -30px rgba(120, 60, 40, 0.80);
  --shadow-raised: 0 18px 44px -34px rgba(120, 60, 40, 0.70);
  --shadow-float: 0 30px 70px -46px rgba(120, 60, 40, 0.85);
  --ring-focus: 0 0 0 3px rgba(224, 51, 51, 0.22);

  --veil-warm: linear-gradient(180deg, rgba(253, 251, 247, 0) 0%, rgba(253, 251, 247, 0.92) 78%, var(--paper) 100%);
  --wash-silk: linear-gradient(115deg, var(--silk-blush) 0%, var(--silk-peach) 46%, var(--silk-cream) 100%);
}

/* ---- tokens/motion.css ---- */
:root {
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;
  --duration-drift: 900ms;
  --transition-ui: all var(--duration-base) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-drift: 0ms; }
}

/* Page-level CSS shared by dawi.me and rounds.dawi.me.
   Everything here is built on the tokens generated from brand-src/; this file
   adds only what a token file cannot: the reset, the type classes, and the
   responsive behaviour the handoff never specified.

   The handoff's components style themselves with inline React styles, which
   outrank every selector here. That is fine — they are self-contained widgets.
   The page furniture around them is what these classes are for. */

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

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

/* One visible focus treatment everywhere. The tokens supply a warm ring rather
   than the browser's blue, which would be the only cool colour on the page. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

button { font-family: inherit; }

/* --------------------------------------------------------------- type scale */
/* Questrial ships ONE weight, so display hierarchy comes from size and tracking
   alone — and tracking only ever tightens as size grows, never the reverse. */

.display-hero, .display, .title, .heading {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  color: var(--text-display);
  margin: 0;
  text-wrap: pretty;
}
.display-hero { font-size: var(--type-hero); letter-spacing: var(--type-hero-tracking); }
.display { font-size: var(--type-display); letter-spacing: var(--type-display-tracking); }
.title { font-size: var(--type-title); letter-spacing: var(--type-title-tracking); line-height: var(--leading-snug); }
.heading { font-size: var(--type-heading); letter-spacing: var(--type-heading-tracking); line-height: var(--leading-snug); }

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--dawi-red);
  margin: 0;
}
.eyebrow--muted { color: var(--text-muted); }

.label {
  font-family: var(--font-text);
  font-size: var(--type-label);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Any number a reader might compare belongs in mono. */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* A lead fills the column it is in. It used to cap at --measure-narrow, which
   is 52ch against a 1100px content width — so every intro paragraph broke at
   about 60% and then ran ragged under a full-width grid of cards, which reads
   as a layout fault rather than as a considered measure. Where a genuinely
   narrow column is wanted, ask for it: `.measure` and `.measure-narrow` are
   still there to add. */
.lead {
  font-size: var(--type-lead);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
}

/* Prose fills its column. A measure is opt-in — add .measure or .measure-narrow
   where a genuinely narrow column is wanted. tools/lib/css-audit.js fails the
   build if a measure cap reappears on anything else. */
.prose {}
.prose p { margin: 0 0 var(--space-5); line-height: var(--leading-loose); color: var(--text-body); }
.prose p:last-child { margin-bottom: 0; }

.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

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

.page { max-width: var(--width-content); margin: 0 auto; padding: 0 var(--gutter-page); }
.page--prose { max-width: calc(var(--width-prose) + var(--gutter-page) * 2); }

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

/* --------------------------------------------------------------- responsive */
/* The handoff specifies one canvas width and no breakpoints. Rather than
   overriding hundreds of declarations, the type tokens themselves step down —
   every consumer that reads them, including the page classes above, comes with.
   Tracking is re-stated at each step because a display size that shrinks while
   keeping -2.6px of tracking reads as a mistake, not as a smaller headline. */

@media (max-width: 900px) {
  :root {
    --type-hero: 54px;      --type-hero-tracking: -1.7px;
    --type-display: 40px;   --type-display-tracking: -1.2px;
    --type-title: 29px;     --type-title-tracking: -0.7px;
    --gutter-page: 28px;
  }
}

@media (max-width: 560px) {
  :root {
    --type-hero: 40px;      --type-hero-tracking: -1.1px;
    --type-display: 31px;   --type-display-tracking: -0.8px;
    --type-title: 25px;     --type-title-tracking: -0.5px;
    --type-heading: 21px;   --type-heading-tracking: -0.3px;
    --type-lead: 17px;
    --gutter-page: var(--gutter-page-sm);
  }
}

/* An `fr` track is floored at min-content, so collapsing a grid to one column is
   not enough on its own — the track has to be minmax(0, 1fr) and the children
   need min-width: 0, or a long unbroken figure keeps the old width and the page
   scrolls sideways. Learned the hard way retrofitting the first prototype. */
.grid { display: grid; gap: var(--space-5); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Wide content must scroll inside its own box; the page body never does. */
.scroll-x { overflow-x: auto; }

/* ----------------------------------------------------------- link buttons */
/* The handoff's Button component always renders a <button>, which cannot be a
   link — and most of the buttons on a marketing site are navigation. These
   classes mirror it declaration for declaration on an <a>, so the two are
   indistinguishable on screen. Keep them in step with the Button in
   brand-src/design_handoff_dawi_brand/ui_kits/_shared/ds.jsx. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-ui);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }

.btn--secondary { background: var(--paper-raised); border-color: var(--border-strong); color: var(--ink-700); }
.btn--secondary:hover { background: var(--paper-sunk); color: var(--ink-900); }

.btn--sm { font-size: 10.5px; padding: 9px 16px; }
.btn--lg { font-size: 12.5px; padding: 17px 32px; }

/* ---- DAWI lockup ---- (generated: tools/lib/brand.js) */
.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lockup-gap, 34px);
}
.lockup__mark { height: var(--mark-h); width: auto; display: block; }
.lockup__word {
  /* Solved against the mark: advA + advW = 1.620em, mark width = 0.897 x its height. */
  --wm-gap: max(0px, calc(0.897 * var(--mark-h) - 1.620 * var(--wm-size)));
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: var(--wm-size);
  line-height: 1;
  color: var(--ink-900);
  white-space: nowrap;
  /* Both required for the solved gap to be the real gap. The handoff measures
     each letter in its own <span>, which suppresses kerning as a side effect;
     one text run does not, and Questrial kerns DAWI by 2.7px at hero size —
     enough to visibly break the alignment. At 0.55em of tracking, pair kerning
     is meaningless anyway, and the brand asks for no ligature in the wordmark. */
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: var(--wm-gap);
  /* Cancel the trailing gap CSS adds after the last letter. */
  margin-right: calc(-1 * var(--wm-gap));
  /* (advI - advD) / 2 — re-centres A...W under the mark. */
  transform: translateX(calc(-0.2330 * var(--wm-size)));
}

/* Side by side, for a header bar too short to stack. The centring offset is
   vertical-only in that arrangement, so it is cancelled. */
.lockup--row { flex-direction: row; align-items: center; gap: var(--lockup-gap, 10px); }
.lockup--row .lockup__word { transform: none; }

/* ---- patient avatar rig ---- (generated: tools/lib/rig.js) */
@keyframes rigBlink { 0%,6.2%,100% { transform: scaleY(1); } 2.5% { transform: scaleY(0.06); } }
@keyframes rigLook { 0%,100% { transform: rotate(-0.7deg) translateY(0); } 50% { transform: rotate(0.8deg) translateY(-1.6px); } }
@keyframes rigScan { 0%,100% { transform: rotate(0.35deg) translateY(-0.6px); } 28% { transform: rotate(-1deg) translateY(0.4px); } 62% { transform: rotate(-0.15deg) translateY(-1.4px); } }
@keyframes rigWince { 0%,68%,100% { transform: rotate(0deg) translateY(0); } 76% { transform: rotate(-0.9deg) translateY(2px) scale(0.997); } 88% { transform: rotate(0.35deg) translateY(0.5px); } }

.rig { display: block; }   /* size always comes from the component */
.rig__sway { animation: var(--rig-sway) var(--rig-sway-dur) ease-in-out infinite; animation-delay: var(--rig-delay, 0s); }
.rig__blink { animation: rigBlink var(--rig-blink, 5.8s) ease-in-out infinite; }

/* rounds.dawi.me — the furniture every page here shares.
   The masthead across the top and the rule along the bottom, used by the
   catalogue and by both simulations. Everything else belongs to one app:
   sim.css for Systems of Care, enroll.css for Choosing Coverage, catalog.css
   for the listing. tools/lib/css-audit.js checks those three stay disjoint,
   so a class defined twice fails the build instead of quietly restyling
   somebody else's screen.

   The components these style are in rounds-src/TopBar.jsx. */

/* ---------------------------------------------------------------- top bar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter-page);
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-raised);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar__brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar__lockup { display: inline-flex; }
.topbar__rule { width: 1px; height: 20px; background: var(--line); flex-shrink: 0; }
.topbar__title { white-space: nowrap; }
.topbar__right { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar__crumb { color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The way out of the simulation, set as a pill at the far right so it reads as
   a destination rather than as another control in the run. */
.topbar__pill {
  font-size: var(--type-label);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 7px 15px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  transition: var(--transition-ui);
}
.topbar__pill:hover { border-color: var(--accent); color: var(--dawi-red); }

/* Long/short label swap, used by the two run controls at narrow widths. */
.topbar__link-short { display: none; }

@media (max-width: 760px) {
  /* The breadcrumb repeats what the screen already says; on a phone the bar's
     job is just the way back. */
  .topbar { gap: 12px; }
  .topbar__rule, .topbar__title, .topbar__crumb { display: none; }
}

@media (max-width: 560px) {
  /* The lockup plus three nowrap controls do not fit a 320px bar. The two run
     controls shorten their labels first; wrapping is the backstop, because they
     are design-system buttons whose padding is set inline and cannot be trimmed
     from here. */
  .topbar { flex-wrap: wrap; gap: 8px 10px; }
  .topbar__right { flex-wrap: wrap; gap: 8px 10px; }
  .topbar__link-long { display: none; }
  .topbar__link-short { display: inline; }
  /* The bar carries three controls mid-run; trim its padding so they stand a
     chance of sharing one line before the wrap backstop kicks in. */
  .topbar { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------- footer */

.simfoot {
  border-top: 1px solid var(--line-soft);
  padding: 24px var(--gutter-page) 48px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-faint);
  max-width: var(--width-content);
  margin: var(--space-9) auto 0;
}

/* Systems of Care — page furniture.
   The design system's components style themselves; this is everything around
   them. Written with breakpoints from the start rather than retrofitted, which
   is what the previous build had to do to a prototype drawn at a fixed
   1360x940 with no media queries at all.

   The top bar and the footer are shared with the catalogue and with the
   enrollment simulation, so they live in rounds-src/shell.css. */

/* --------------------------------------------------------------- sections */

.sim-section { padding-top: var(--space-9); padding-bottom: var(--space-9); }
/* No measure on the headings either. 20ch was narrow enough to break a
   three-word title across two lines with 500px of empty column beside it —
   display type already sets its own line length, because at this size the
   content column only holds about forty characters anyway. */
.sim-h1 { text-wrap: balance; }
.sim-cards { margin-top: var(--space-7); }

/* Column counts, derived from the content rather than guessed.
 *
 * Both four-up grids share these, so the binding card is whichever needs more.
 * That is the country card, measured at 213px — below it the "Rationed by /
 * Price, prior auth" row runs out past the padding. The case card needs only
 * 149px now that it is a face, a name, a red line and a sentence; it used to
 * need 233 and set these breakpoints itself, until the label/value rows came
 * off it. Call it 215 for headroom and the arithmetic is forced:
 *
 *   four columns   4x215 + 3x20 gutter + 80 page gutter = 1000  -> 1020px
 *   two columns    2x215 + 1x20 gutter + 80 page gutter =  530  ->  560px
 *
 * Never squeeze the count to fit. The design system's own 900/560 defaults left
 * a band from 900 to 1000px where four cards sat at 187px, and nothing done
 * inside a card — shrinking, wrapping, truncating — rescues a card that is
 * simply too narrow for what is in it.
 *
 * Re-measure and move these if the content grows. `tools/check-journeys.js`
 * does not cover layout, so this one is on you: squeeze `.sim-cards` in the
 * inspector until a row spills, and read the card width off the result.
 *
 * `.sim-cards.grid--4` outranks `.grid--4` on specificity and sim.css is
 * concatenated after base.css, so both halves of the cascade agree. */
.sim-cards.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) {
  .sim-cards.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sim-cards.grid--2, .sim-cards.grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- world map */

.worldmap {
  margin-top: var(--space-7);
  height: 460px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--paper-raised);
  overflow: hidden;
}
@media (max-width: 760px) { .worldmap { height: 300px; } }
/* Below this the pins collide and the labels are unreadable; the four cards
   underneath already offer the same choice, so the map is decoration. */
@media (max-width: 480px) { .worldmap { display: none; } }

/* ------------------------------------------------------------------ cards */

.syscard, .plancard, .casecard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: var(--transition-ui);
  color: inherit;
  font: inherit;
}
.syscard:hover, .plancard:hover, .casecard:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-raised);
}

.syscard__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.syscard__country { min-width: 0; overflow-wrap: break-word; }

.syscard__line, .plancard__note { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

.syscard__funding { display: flex; height: 6px; border-radius: var(--radius-pill); overflow: hidden; margin-top: 4px; }
.fund--0 { background: var(--violet); }
.fund--1 { background: var(--silk-amber); }
.fund--2 { background: var(--silk-coral); }

.syscard__stats, .plancard__rows { display: grid; gap: 7px; margin-top: 4px; }
/* Grid rather than flex, because a flex row's min-content is its label plus its
   value and neither can give — which pushed the whole block out past the card's
   padding. The label track can shrink and wrap; the value keeps its own width. */
.syscard__stat {
  display: grid;
  /* `min-content`, not 0: a label track allowed to reach zero does not shrink
     the word inside it, it lets the word run out over the value — which is how
     "Engagement" ended up printed on top of "Cost-avoidant". The floor is the
     longest word, so the worst case is a row that overflows visibly rather than
     one that collides. The breakpoints above are what stop it happening. */
  grid-template-columns: minmax(min-content, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 7px;
}
.syscard__stat .mono { color: var(--ink-700); text-align: right; }

/* A country card's values are phrases, not figures: "Price, prior auth" is
   133px on its own, so holding it at nowrap put the whole block outside the
   padding. Those wrap; the figures that must NOT break — the specialist waits —
   carry a non-breaking space in the content instead. */
.syscard__stat .mono { overflow-wrap: break-word; }

.plancard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plancard__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.plancard__v { font-size: 13px; color: var(--ink-900); }
.plancard__bar { grid-column: 1 / -1; height: 4px; background: var(--paper-deep); border-radius: var(--radius-pill); overflow: hidden; }
.plancard__fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.plancard__fill--0 { background: var(--violet); }
.plancard__fill--1 { background: var(--silk-amber); }
.plancard__fill--2 { background: var(--silk-coral); }
.plancard__fill--3 { background: var(--sage); }

/* The face is the card. It goes first, centred, at a size that reads as a
   person rather than as an icon; then the name, then who they are, then what is
   happening — each band ruled off from the one above it. */
.casecard { align-items: center; text-align: center; gap: 0; padding: 26px 22px 24px; }
.casecard__portrait { display: block; margin-bottom: 16px; }
/* Two lines held open, and the name centred in them.
 *
 * "Marcus Thompson, 29" needs 215px and the narrowest four-column card offers
 * 173, so no font size keeps every name on one line at every width — and a name
 * that wraps on one card alone drops that card's rule below the other three.
 * Reserving the second line costs some air under the short names and buys the
 * rules lining up at every width the grid can build. Keep `line-height` and the
 * multiplier in step if either changes. */
.casecard__nameband {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Two lines of the name inside, which is why the multiplier is on the band's
     own font size — keep it in step with .casecard__name below. */
  min-height: calc(2 * 1.2 * 23px);
}
/* The band does the centring, not this: as a flex container the name and the
   age become separate flex items and stop being one run of text, so a long
   name overflows instead of wrapping. */
.casecard__name {
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: -0.6px;
  line-height: 1.2;
  color: var(--ink-900);
  text-wrap: balance;
}
/* One rule on the card, under the name. The diagnosis and the description sit
   together beneath it: the diagnosis is the first line of the description, not
   a separate field. */
.casecard__body {
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* Part of the name, set back a step so the name reads first. */
.casecard__age { color: var(--ink-300); }

/* Every diagnosis fits one line at the narrowest card the grid will build, so
   all four bands are the same height and the rules line up across the row
   without reserving space. Maria's used to read "Type 2 diabetes, newly
   diagnosed", wrapped to two lines alone, and pushed her description down past
   everyone else's — the fix was the content, not a min-height. Keep them short:
   the tagline underneath says the rest. */
.casecard__meta {
  display: block;
  font-size: var(--type-label);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--dawi-red);
  text-wrap: balance;
}

.casecard__tagline {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ brief */

.brief { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.brief__who { min-width: 0; }
/* The diagnosis, under the name and above the setting. Sentence case, because
   "New onset of type 2 diabetes" set in tracked uppercase reads as a banner. */
.brief__presenting {
  margin: 10px 0 0;
  font-size: 19px;
  line-height: 1.4;
  color: var(--dawi-red);
}
.brief__where { display: block; margin: 10px 0 0; }
.brief__opening { margin-top: var(--space-7); font-size: 17px; }

/* The coverage question, on the same screen as the introduction and below it:
   the student meets the patient, then picks the card they carry. */
.brief__coverage {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.brief__coverageh { margin: 12px 0 14px; }

.brief__go { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: var(--space-8); }
.brief__hint { font-size: 13.5px; color: var(--text-faint); }

/* A chosen plan has to look chosen — Begin does nothing until one is. */
.plancard.is-selected {
  border-color: var(--dawi-red);
  box-shadow: var(--shadow-raised), inset 0 0 0 1px var(--dawi-red);
}

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

.runlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 48px;
  align-items: start;
  padding-top: var(--space-8);
}
@media (max-width: 980px) {
  .runlayout { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  /* On one column the rail goes first: the running total is the context the
     decision underneath it is read against. */
  .runlayout .ledger { order: -1; position: static; }
}

/* ----------------------------------------------------------------- ledger */

.ledger {
  display: grid;
  gap: 18px;
  align-content: start;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 22px;
  position: sticky;
  top: 84px;
}
/* Portrait first, large and centred, with the name and the condition beneath —
   the same shape as the chooser card, so the patient reads as the same object
   throughout the run. */
.ledger__patient {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.ledger__name { font-size: 21px; margin-top: 10px; }
.ledger__condition { font-size: 13px; color: var(--text-muted); }
.ledger__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; gap: 12px; }
.ledger__value { font-size: 13px; color: var(--ink-900); white-space: nowrap; }
.ledger__value.is-good { color: #4d6b57; }
.ledger__value.is-bad { color: #b25436; }
.ledger__rows { display: grid; gap: 8px; }
.ledger__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

/* Risk as a position between low and high. No percentage: the reader would have
   to know whether 37 is bad, and the colour and the band say so directly. */
.riskgauge__track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #7d9e86 0%, #d9c48a 45%, #d98f6e 72%, #c4553a 100%);
}
.riskgauge__marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--paper-raised);
  border: 3px solid var(--ink-500);
  box-shadow: 0 1px 3px rgba(74, 58, 51, 0.28);
  transition: left var(--duration-slow) var(--ease-standard);
}
.riskgauge__marker.is-lower    { border-color: #4d6b57; }
.riskgauge__marker.is-moderate { border-color: #a08a4a; }
.riskgauge__marker.is-raised   { border-color: #b8863c; }
.riskgauge__marker.is-high     { border-color: #b25436; }

.riskgauge__word { font-size: 13px; font-weight: 700; }
.riskgauge__word.is-lower    { color: #4d6b57; }
.riskgauge__word.is-moderate { color: #a08a4a; }
.riskgauge__word.is-raised   { color: #b8863c; }
.riskgauge__word.is-high     { color: #b25436; }

.riskgauge__scale { display: flex; justify-content: space-between; margin-top: 6px; }
.riskgauge__scale .label { color: var(--text-faint); }

.weeks { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; }
.weeks__cell { height: 8px; border-radius: 1px; background: var(--paper-deep); }
.weeks__cell.is-spent { background: var(--silk-coral); }

/* -------------------------------------------------------- what happened */

.happened {
  border-left: 2px solid var(--accent-quiet);
  padding-left: var(--space-6);
  margin-bottom: var(--space-9);
}
.happened__prose { margin-top: var(--space-4); font-size: 16.5px; }
.happened__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.happened__stat { display: grid; gap: 5px; }
.happened__statv { font-size: 15px; color: var(--ink-900); }
@media (max-width: 640px) { .happened__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.receipt { margin-top: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.receipt__line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 16px;
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--line-soft);
}
.receipt__line:last-child { border-bottom: none; }
.receipt__label { font-size: 14.5px; color: var(--ink-700); }
.receipt__note { color: var(--text-faint); margin-top: 3px; }
.receipt__amounts { display: grid; justify-items: end; gap: 3px; white-space: nowrap; }
.receipt__patient { font-size: 14.5px; color: var(--ink-900); }
.receipt__payer { font-size: 12px; color: var(--text-faint); }
.receipt__none { font-size: 14px; color: var(--text-faint); margin-top: var(--space-5); }

/* ------------------------------------------------------------------- step */

.step__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.step__title { margin: 14px 0 16px; text-wrap: balance; }
.step__prompt { font-size: 17px; line-height: var(--leading-loose); color: var(--text-body); margin: 0; }
.step__options { display: grid; gap: 12px; margin-top: var(--space-7); }
.option__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-left: 26px; }

.dots { display: flex; gap: 7px; align-items: center; }
.dots__d { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-deep); border: 1px solid var(--line); }
.dots__d.is-done { background: var(--silk-peach); border-color: transparent; }
.dots__d.is-now { background: var(--dawi-red); border-color: transparent; }

/* ---------------------------------------------------------------- outcome */

.outcome__head { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.outcome__verdict { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.outcome__blurb { font-size: 15px; color: var(--text-muted); }
.outcome__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 34px;
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}
.outcome__h2 { margin: var(--space-10) 0 var(--space-6); }
.outcome__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-8); }

/* "Run the same patient in another country" is longer than a phone is wide, and
   .btn is nowrap by design. Here the label has to win, so it wraps and the
   button takes the column. */
@media (max-width: 560px) {
  .outcome__actions { display: grid; }
  .outcome__actions .btn { white-space: normal; text-align: center; line-height: 1.35; }
}

.journey { display: grid; gap: 2px; }
.journey__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.journey__n { font-size: 13px; color: var(--text-faint); padding-top: 2px; }
.journey__chapter { color: var(--text-faint); }
.journey__choice { font-family: var(--font-display); font-size: 21px; letter-spacing: -0.4px; color: var(--ink-900); margin: 6px 0 4px; }
.journey__cost { font-size: 12.5px; color: var(--text-muted); }

/* The debrief's own prose: the final narrative, the patient's account of it,
   and the full transcript of the three decisions. The run showed these one at a
   time; the debrief is where they sit together. */
.outcome__final { margin-top: var(--space-5); font-size: 17px; }

.saidso {
  margin: var(--space-8) 0 0;
  padding: 26px 30px;
  background: var(--paper-sunk);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.saidso__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.3px;
  color: var(--ink-900);
}
.saidso__who {
  margin: 14px 0 0;
  font-size: var(--type-label);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (max-width: 560px) { .saidso { padding: 20px 22px; } .saidso__quote { font-size: 17.5px; } }

.journey__prose { margin-top: 12px; font-size: 15.5px; }
.journey__prose p { margin: 0 0 10px; }
.journey__prose p:last-child { margin-bottom: 0; }

/* Choosing Coverage — page furniture.
   The design system's components style themselves; this is everything around
   them. Every class here begins with a prefix that no other stylesheet on
   rounds.dawi.me uses, because all three apps ship as one file — and
   tools/lib/css-audit.js fails the build if two of them ever define the same
   class name.

   Written with breakpoints from the start. The layout is checked at 320, 375,
   480, 560, 768, 980 and 1280 across every screen. */

/* ------------------------------------------------------------ chart colour */

/* Two hues carry every mark in this simulation, and both are a step darker
   than the design system's --violet and --silk-coral. Those are tints: against
   warm paper they sit at about 2.3:1, which is a fill a reader has to squint
   at. These clear 3:1 while keeping the same two hues, so the charts still
   read as part of the same system. Measured, not guessed — both pass a
   contrast, lightness, chroma and colour-vision separation check against
   #fdfbf7. Do not swap them back for the tints. */
:root {
  --chart-premium: #6f63a8;
  --chart-care: #d2694a;
}

/* --------------------------------------------------------------- sections */

.enr-section { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.enr-lead { margin-top: var(--space-5); }
.enr-h2 { margin: 0 0 var(--space-4); }
.enr-cards { margin-top: var(--space-7); }
.enr-prose { margin-top: var(--space-5); font-size: 17px; }
.enr-none { font-size: 15px; color: var(--text-faint); margin-top: var(--space-5); }
.enr-hint { font-size: 13.5px; color: var(--text-faint); }

/* A heading that opens a new section of a long screen, ruled off from the one
   above it. The debrief is five of these in a column. */
.enr-rule {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

.enr-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: var(--space-8); }
.enr-go--center { justify-content: center; }
@media (max-width: 560px) {
  .enr-go { display: grid; }
  .enr-go .btn { white-space: normal; text-align: center; line-height: 1.35; }
}

.enr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 34px;
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

/* Three short blocks of explanation, used on the account screen and again in
   the debrief's closing notes. */
.enr-point {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.enr-point__h { font-size: 19px; }
.enr-point__t { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* ------------------------------------------------------------ start screen */

.enr-menu { margin-top: var(--space-8); }
@media (max-width: 720px) { .enr-menu.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .enr-menu.grid--4 { grid-template-columns: minmax(0, 1fr); } }

.enr-planmini {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.enr-planmini__name { margin-top: 10px; }
.enr-planmini__rate { font-size: 14px; color: var(--ink-900); }
.enr-planmini__ded { font-size: 13px; color: var(--text-muted); }
.enr-menunote { margin-top: var(--space-5); font-size: 14px; line-height: 1.6; color: var(--text-faint); }

/* The carrier's mark and name, above the four plans. The note beside the
   name is a sentence, so it is set as one rather than as a label. */
.carrier {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}
.carrier-mark { display: block; flex-shrink: 0; }
.carrier__text { display: grid; gap: 3px; min-width: 0; }
.carrier__name { font-size: 21px; }
.carrier__note { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }

/* ------------------------------------------------------------------- quiz */

.enr-quiz__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.enr-quiz__count { font-size: 14px; color: var(--text-muted); }
.enr-quiz__prompt { font-size: 17px; line-height: var(--leading-loose); color: var(--text-body); margin: var(--space-5) 0 0; }
.enr-quiz__options { display: grid; gap: 12px; margin-top: var(--space-7); }
.enr-quiz__nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: var(--space-8); }

.enr-dots { display: flex; gap: 6px; align-items: center; }
.enr-dots__d { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-deep); border: 1px solid var(--line); }
.enr-dots__d.is-done { background: var(--silk-peach); border-color: transparent; }
.enr-dots__d.is-now { background: var(--dawi-red); border-color: transparent; }

/* ChoiceCard's surfaces and type, with a check box on the left. The box is
   large enough to read as a check box from across the room, which is the
   whole reason the card exists: a question that takes several answers has to
   look like one before anybody reads the prompt. */
.enr-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
  text-align: left;
  font-family: var(--font-text);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  cursor: pointer;
  color: inherit;
  transition: var(--transition-ui);
}
.enr-check:hover { border-color: var(--ink-100); }
.enr-check.is-on { background: var(--accent-quiet); border-color: var(--accent); }
.enr-check__box {
  width: 30px;
  height: 30px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--paper-raised);
  color: var(--text-on-accent);
  transition: var(--transition-ui);
}
.enr-check__box svg { opacity: 0; transition: var(--transition-ui); }
.enr-check.is-on .enr-check__box { background: var(--accent); border-color: var(--accent); }
.enr-check.is-on .enr-check__box svg { opacity: 1; }
.enr-check__body { display: grid; gap: 9px; min-width: 0; }
.enr-check__label { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.6px; line-height: 1.25; color: var(--ink-900); }
.enr-check__desc { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* --------------------------------------------------------------- the bars */

/* One dollar scale down the whole chart, so the rows are comparable by
   length. The bars float on the card surface rather than sitting in a track:
   the 2px gap between the two segments has to be the surface colour, and a
   filled track would show through it as a third colour. */
.costbars { margin-top: var(--space-8); }
.costbars__key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.costbars__key .label { margin-right: 14px; }
.costbars__kdot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.costbars__kdot--premium { background: var(--chart-premium); }
.costbars__kdot--care { background: var(--chart-care); }
.costbars__ktick { width: 2px; height: 14px; background: var(--ink-300); display: inline-block; }

.costbars__row {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 11px 0;
  border: none;
  border-top: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
}
.costbars__row.is-live { cursor: pointer; }
.costbars__row.is-live:hover { background: var(--paper-sunk); }
.costbars__name { font-size: 19px; }
.costbars__track { position: relative; height: 18px; }
.costbars__bar { display: flex; gap: 2px; height: 100%; align-items: stretch; }
/* Square at the baseline, rounded at the data end — the bar grows from the
   left and only the tip is a tip. */
.costbars__seg { display: block; height: 100%; }
/* Square where it meets the baseline, rounded only at the data end. The 2px
   gap between the two segments is the surface colour doing the separating. */
.costbars__seg--premium { background: var(--chart-premium); }
.costbars__seg--care { background: var(--chart-care); border-radius: 0 4px 4px 0; }
.costbars__tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--ink-300);
}
.costbars__total { font-size: 15px; color: var(--ink-900); white-space: nowrap; }
.costbars__axis { display: flex; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 2px; }

@media (max-width: 640px) {
  /* The name track and the bar cannot share a 320px row and stay readable, so
     the name goes above the bar and the total stays on the right of it. */
  .costbars__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
  .costbars__name { grid-column: 1 / -1; font-size: 17px; }
}

.splitbar { display: flex; gap: 2px; height: 8px; margin-top: 14px; }
.splitbar__seg { display: block; height: 100%; }
.splitbar__seg--premium { background: var(--chart-premium); }
.splitbar__seg--care { background: var(--chart-care); border-radius: 0 4px 4px 0; }

.catbars { margin-top: var(--space-6); display: grid; gap: 4px; }
.catbars__row {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}
.catbars__name { color: var(--text-muted); }
.catbars__track { height: 14px; }
/* One hue: this chart ranks sizes, it does not tell categories apart, so a
   second colour would be decoration carrying no information. */
.catbars__fill { display: block; height: 100%; background: var(--chart-care); border-radius: 2px 4px 4px 2px; }
.catbars__v { font-size: 14px; color: var(--ink-900); white-space: nowrap; }
@media (max-width: 560px) {
  .catbars__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
  .catbars__name { grid-column: 1 / -1; }
}

.plandisc { display: block; }

/* ------------------------------------------------------------ plan offers */

@media (max-width: 860px) { .enr-offers.grid--2 { grid-template-columns: minmax(0, 1fr); } }

.offer {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
/* The recommendation has to look like one. A second border inside the first,
   rather than a thicker one, so the card does not change size. */
.offer.is-pick { border-color: var(--dawi-red); box-shadow: var(--shadow-raised), inset 0 0 0 1px var(--dawi-red); }
.offer.is-blocked { background: var(--paper-sunk); }

.offer__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.offer__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.offer__blurb { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 12px 0 0; }
.offer__figure { margin-top: var(--space-6); }
.offer__split { display: flex; justify-content: space-between; margin-top: 7px; }

.offer__rows { display: grid; gap: 7px; margin-top: var(--space-6); }
.offer__row {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  border-top: 1px solid var(--line-soft);
  padding-top: 7px;
}
.offer__v { font-size: 13px; color: var(--ink-900); text-align: right; }

.offer__flags { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 10px; }
.offer__flag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.offer__dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: var(--ink-100); }
.offer__dot.is-block { background: #b25436; }
.offer__dot.is-caution { background: #b8863c; }
.offer__dot.is-good { background: #4d6b57; }
.offer__dot.is-note { background: var(--violet); }
.offer__flag.is-block { color: var(--ink-700); }

/* Pushed to the bottom of the card, so four cards of different lengths still
   line their buttons up across the row. The gap above it belongs to whatever
   comes last — the reasons, or the arithmetic — so the button keeps its own
   padding and margin-top: auto is not overridden. */
.offer__go { margin-top: auto; align-self: flex-start; }
.offer__flags, .math { margin-bottom: var(--space-6); }
@media (max-width: 380px) { .offer__go { align-self: stretch; white-space: normal; } }

/* The arithmetic, set as a small ledger. Mono on the right, because these are
   numbers a reader is meant to add up. */
.math { margin-top: var(--space-6); padding: 16px 18px; background: var(--paper-sunk); border-radius: var(--radius-sm); }
.math__h { display: block; margin-bottom: 10px; }
.math__row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; color: var(--text-muted); padding: 5px 0; }
.math__row--total { border-top: 1px solid var(--line-strong); margin-top: 5px; padding-top: 9px; color: var(--ink-900); font-weight: 500; }
.math__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-faint); }

/* --------------------------------------------------------- the assumptions */

.assume {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.assume__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.assume__list { margin-top: var(--space-7); display: grid; gap: 2px; }
.assume__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.assume__label { font-size: 15px; color: var(--ink-900); }
.assume__cat { color: var(--text-faint); white-space: nowrap; }
.assume__stepper { display: flex; align-items: center; gap: 4px; }
.assume__stepper button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  background: var(--paper-raised);
  border-radius: var(--radius-xs);
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-ui);
}
.assume__stepper button:hover { border-color: var(--accent); color: var(--dawi-red); }
.assume__n { width: 28px; text-align: center; font-size: 14px; color: var(--ink-900); }
.assume__billed { font-size: 14px; color: var(--text-muted); white-space: nowrap; min-width: 72px; text-align: right; }

.assume__add { margin-top: var(--space-6); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assume__add .label { margin-right: 6px; }
.assume__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--ink-700);
  background: var(--paper-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: var(--transition-ui);
}
.assume__chip:hover { border-color: var(--accent); color: var(--dawi-red); }
.assume__chip .mono { color: var(--text-faint); }

@media (max-width: 620px) {
  .assume__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; }
  .assume__cat { grid-row: 2; grid-column: 1; }
  .assume__stepper { grid-row: 1 / 3; grid-column: 2; }
  .assume__billed { grid-row: 2; grid-column: 2; text-align: right; }
}

/* --------------------------------------------------------- the contribution */

.elect { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: var(--space-8); }
.elect__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  text-align: left;
  padding: 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-ui);
  font: inherit;
  color: inherit;
}
.elect__opt:hover { border-color: var(--accent); }
.elect__opt.is-on { border-color: var(--dawi-red); background: var(--accent-quiet); }
.elect__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.elect__amount { font-size: 26px; color: var(--ink-900); }
.elect__per { color: var(--text-faint); }
.elect__save { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.elect__why { font-size: 12.5px; line-height: 1.55; color: var(--text-faint); }

/* ------------------------------------------------------------- the year run */

.enr-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
}
@media (max-width: 980px) {
  .enr-run { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  /* On one column the rail goes first: the running total is the context the
     months underneath it are read against. */
  .enr-run .tally { order: -1; position: static; }
}
.run-main { min-width: 0; }

.yearcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  padding: 26px 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: var(--transition-ui);
  font: inherit;
  color: inherit;
}
.yearcard:hover { border-color: var(--accent); box-shadow: var(--shadow-raised); }
.yearcard__blurb { font-size: 15px; line-height: 1.6; color: var(--text-body); }
.yearcard__note { color: var(--text-faint); line-height: 1.5; margin-top: auto; padding-top: 4px; }

.tally {
  display: grid;
  gap: 18px;
  align-content: start;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 22px;
  position: sticky;
  top: 84px;
}
.tally__plan { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-soft); display: grid; gap: 6px; justify-items: start; }
.tally__plan .carrier-mark { margin-bottom: 6px; }
.tally__name { font-size: 21px; }
.tally__tier { color: var(--text-faint); }
.tally__rows { display: grid; gap: 8px; }
.tally__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.tally__v { font-size: 13px; color: var(--ink-900); white-space: nowrap; }

.enr-readthis { margin-top: var(--space-6); font-size: 14px; line-height: 1.6; color: var(--text-faint); }
.months { display: grid; gap: 2px; margin-top: var(--space-6); }
.mon { border-top: 1px solid var(--line); padding: 16px 0; }
.mon__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.mon__name { font-size: 20px; }
.mon__total { font-size: 14px; color: var(--ink-900); }
.mon__lines { margin-top: 12px; display: grid; gap: 2px; }
.mon__line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 14px;
  background: var(--paper-sunk);
  border-radius: var(--radius-xs);
}
.mon__what { min-width: 0; }
.mon__label { font-size: 14.5px; color: var(--ink-700); }
.mon__note { color: var(--text-faint); margin-top: 3px; line-height: 1.5; }
/* A sentence, not a label, so it is set as one. The line under a month's
   charges says where the money came from and it reads as prose. */
.mon__paid { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: var(--weight-regular); }
.mon__amounts { display: grid; justify-items: end; gap: 3px; white-space: nowrap; }
.mon__patient { font-size: 14.5px; color: var(--ink-900); }
.mon__payer { font-size: 12px; color: var(--text-faint); }
.mon__paid { display: block; margin-top: 10px; color: var(--text-muted); }

.outcome-note {
  border-left: 2px solid var(--accent-quiet);
  padding-left: var(--space-6);
  margin-top: var(--space-7);
}
.outcome-note__h { margin: 0; font-size: 15px; font-weight: var(--weight-medium); color: var(--ink-900); }
.outcome-note__t { margin: var(--space-3) 0 0; font-size: 16px; line-height: var(--leading-loose); color: var(--text-body); }

.decision { margin-top: var(--space-9); }
.decision__when { margin: 0; font-size: 14px; color: var(--text-muted); }
.decision__title { margin: 14px 0 16px; text-wrap: balance; }
.decision__prompt { font-size: 17px; line-height: var(--leading-loose); color: var(--text-body); margin: 0; }
.decision__options { display: grid; gap: 12px; margin-top: var(--space-7); }

/* --------------------------------------------------------------- debrief */

.compare { margin-top: var(--space-7); display: grid; gap: 2px; }
.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto auto;
  gap: 20px;
  align-items: baseline;
  padding: 16px 14px;
  border-top: 1px solid var(--line);
}
.compare__row.is-mine { background: var(--accent-quiet); border-radius: var(--radius-xs); border-top-color: transparent; }
.compare__name { font-size: 19px; display: flex; align-items: center; flex-wrap: wrap; }
.compare__detail { color: var(--text-faint); line-height: 1.5; }
.compare__cost { font-size: 17px; color: var(--ink-900); white-space: nowrap; }
.compare__delta { font-size: 13px; color: var(--text-muted); white-space: nowrap; min-width: 82px; text-align: right; }
@media (max-width: 720px) {
  .compare__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .compare__detail { grid-row: 2; grid-column: 1; }
  .compare__delta { grid-row: 2; grid-column: 2; }
}

.taken { display: grid; gap: 2px; margin-top: var(--space-6); }
.taken__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.taken__when { font-size: 13px; color: var(--text-faint); padding-top: 3px; white-space: nowrap; }
.taken__q { color: var(--text-faint); }
.taken__choice { font-family: var(--font-display); font-size: 21px; letter-spacing: -0.4px; color: var(--ink-900); margin: 6px 0 4px; }
.taken__cost { font-size: 12.5px; color: var(--text-muted); }
.taken__outcome { margin: 12px 0 0; font-size: 15.5px; line-height: var(--leading-loose); color: var(--text-body); }
@media (max-width: 480px) {
  .taken__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* rounds.dawi.me catalogue. The masthead and footer are shared with the
   simulator (sim.css); this is only the listing. */

.cat { padding-top: var(--space-10); padding-bottom: var(--space-9); }
.cat__h1 { margin: 0 0 var(--space-8); }

.entry {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
  padding: 26px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: var(--transition-ui);
}
.entry:hover { border-color: var(--accent); box-shadow: var(--shadow-raised); color: inherit; }

/* Four equal wells spanning the card. `minmax(0, 1fr)` rather than `1fr`,
   because an fr track is floored at min-content and the SVG inside has one. */
.entry__art {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
/* A real border rather than an inset shadow: Canada crops to a white panel, and
   without an edge a white disc on a light card is not a disc at all. */
.entry__disc {
  display: block;
  box-sizing: border-box;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid rgba(74, 58, 51, 0.34);
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-deep);
}
.entry__disc > svg { display: block; width: 100%; height: 100%; }

.entry__title { display: block; }

@media (max-width: 560px) {
  .entry { padding: 20px; gap: 18px; }
  .entry__art { gap: 10px; }
}