/* ===========================================================================
   /gp/choosing-a-patient/ — page styles
   ---------------------------------------------------------------------------
   Migrated from the Claude Design project, which arrived as inline styles with
   raw hex. Nothing below reproduces those values — every colour, radius, shadow
   and space resolves to an existing token. Shared patterns (.wrap .block
   .section-head .eyebrow .rule .btn .pill .pill-row .calc-note) are reused, so
   this file covers only what the framework lacked.

   Hex → token mapping, recorded once:
     #225278 → --color-secondary   #438FB9 → --color-primary
     #67B8DC → --color-accent      #2B648C → --brand-600     #1C4159 → --brand-900
     #283641 → --color-ink         #5a6b78 → --color-ink-soft
     #EEF4F9 → --brand-50          #DCEBF4 → --brand-100
     #e7eef4 → --color-border-soft #eef2f6 → --color-border-soft
     #a8b6c1 → --color-ink-muted
   =========================================================================== */

/* ---- Shared bits this page leans on --------------------------------------- */
.cap-orb { position:absolute; z-index:0; border-radius:var(--radius-full);
  background:var(--brand-50); width:560px; height:560px; right:-200px; top:-240px; pointer-events:none; }
.cap-orb.sm { background:rgb(103 184 220 / .16); width:220px; height:220px; right:-80px; bottom:-80px; top:auto; }
.soft { color:var(--color-ink-soft); }

/* ---- Hero ----------------------------------------------------------------- */
/* clip, not hidden — `hidden` makes this a scroll container and freezes any .reveal inside it. */
/* Full padding declared, not just the top: `section.block` is element-qualified in
   components.css and this is a <header>, so it inherits none. */
.cap-hero { position:relative; overflow:clip; background:var(--color-surface);
  border-bottom:1px solid var(--color-border-soft);
  padding:calc(var(--space-3xl) + var(--space-xl)) 0 var(--space-3xl); }
.cap-hero .wrap { position:relative; z-index:1; }
.cap-hero-grid { display:grid; grid-template-columns:1fr; gap:var(--space-m); align-items:end; }
@media (min-width: 900px) { .cap-hero-grid { grid-template-columns:1.05fr .95fr; gap:var(--space-3xl); } }
.cap-hero h1 { font-size:var(--step-5); font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-tight); line-height:.97; color:var(--color-secondary);
  margin:0; text-wrap:balance; }
.cap-hero .lede { margin:0 0 var(--space-xs); }
.cap-hero .lede:last-child { margin-bottom:0; }

/* ---- The recognition grid ------------------------------------------------- */
.cap-grid { margin-top:var(--space-l); display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap:var(--space-m); }

/* Each of the six is a BUTTON, so it needs the appearance reset a card never does. */
/* ⚠️ display:flex, NOT block. A <button> stretched by the grid to its row height centres its own
   content vertically (UA behaviour), so a card with a short body floated mid-card while a taller
   neighbour filled. Column flex with a flex-start start keeps every card's content top-aligned. */
.cap-card { appearance:none; font:inherit; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  background:var(--color-surface); border:1.5px solid var(--color-border-soft);
  border-radius:var(--radius-xl); padding:var(--space-l); box-shadow:var(--shadow-xs);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             border-color .22s var(--ease), background .22s var(--ease); }
.cap-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cap-card:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.cap-card[aria-pressed="true"] { background:var(--brand-50); border-color:var(--color-accent);
  box-shadow:var(--shadow-md); }

.cap-card-top { display:flex; align-items:center; gap:var(--space-xs); margin-bottom:var(--space-s); }
.cap-num { font-size:var(--text-sm); font-weight:var(--weight-extrabold);
  color:var(--color-ink-muted); letter-spacing:var(--tracking-wide); transition:color .22s var(--ease); }
.cap-hr { flex:1 1 auto; height:1px; background:var(--color-border-soft); }
.cap-tag { font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-widest); text-transform:uppercase;
  color:var(--color-ink-muted); transition:color .22s var(--ease); white-space:nowrap; }
.cap-card[aria-pressed="true"] .cap-num,
.cap-card[aria-pressed="true"] .cap-tag { color:var(--color-primary); }

.cap-card-h { display:block; font-size:var(--text-lg); font-weight:var(--weight-extrabold);
  color:var(--color-secondary); margin-bottom:var(--space-2xs); }
.cap-card-b { display:block; font-size:var(--text-md); color:var(--color-ink-soft);
  line-height:var(--line-relaxed); }

/* The last tile is the stopping rule, not another option — hence not a button, and spanning the
   full row so the card count above it can change without orphaning it. */
.cap-answer { grid-column:1 / -1; position:relative; overflow:clip; background:var(--grad-deep);
  border-radius:var(--radius-xl); padding:var(--space-l); box-shadow:var(--shadow-lg); }
/* Row gap is 0 — the children carry their own margins already. */
.cap-answer-in { position:relative; display:grid; row-gap:0; }
/* The note hangs below the button ABSOLUTELY, so it takes no layout space — the grid centres the
   button alone against the card, and the note tags along underneath. It sits in the card's bottom
   padding; keep it to one short line. */
.cap-answer-act { position:relative; width:fit-content;
  justify-self:start; margin-top:var(--space-m); }
.cap-answer-act .btn { white-space:nowrap; }
/* Beats `.cap-answer p` on specificity, which would otherwise set it at body size. */
.cap-answer .cap-answer-note { position:absolute; top:calc(100% + var(--space-2xs));
  left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:var(--text-sm); color:rgb(255 255 255 / .68); line-height:var(--line-snug); }
/* Wide: copy in the left column, CTA in the right, spanning every copy row so it centres
   vertically against the card as a whole. */
@media (min-width: 720px) {
  .cap-answer-in { grid-template-columns:1fr auto; column-gap:var(--space-xl); }
  .cap-answer-act { grid-column:2; grid-row:1 / 4; align-self:center; justify-self:end; margin-top:0; }
}
.cap-answer .cap-tag { color:var(--color-accent); }
.cap-answer-ic { width:22px; height:22px; flex:0 0 22px; color:var(--color-accent);
  fill:none; stroke-width:2; }
.cap-answer h3 { font-size:var(--text-lg); font-weight:var(--weight-extrabold);
  color:var(--color-surface); margin:0 0 var(--space-2xs); }
.cap-answer p { margin:0; font-size:var(--text-md); color:rgb(255 255 255 / .9);
  line-height:var(--line-relaxed); }

/* ---- Two-column splits ---------------------------------------------------- */
.cap-split { display:grid; grid-template-columns:1fr; gap:var(--space-l); align-items:start; }
@media (min-width: 900px) { .cap-split { grid-template-columns:1fr 1fr; gap:var(--space-3xl); } }
.cap-split p { color:var(--color-ink); line-height:var(--line-relaxed); margin:0 0 var(--space-m); }
.cap-split p:last-child { margin-bottom:0; }
/* Zero only when the head IS the whole column (the reframe split). Where prose follows it in
   the same column (#eligible), it still needs its gap. */
.cap-split > .section-head:only-child, .cap-split > .reveal > .section-head:only-child { margin-bottom:0; }
.cap-split .section-head { margin-bottom:var(--space-m); }

/* Head in row 1 of the left column; prose and chips share row 2 so the chips align with the body
   copy, not the heading. Only above the breakpoint — below it everything is one column in source
   order (head, prose, chips), which is the right reading order anyway. */
@media (min-width: 900px) {
  /* row-gap:0 — the 3xl gap is a COLUMN gap, and once this split has two rows it applies
     between them as well, stacking on top of .section-head's own margin-bottom. The head's
     margin is the only spacing wanted here. */
  .cap-split-rows { grid-template-rows:auto auto; row-gap:0; }
  .cap-split-rows > :nth-child(1) { grid-column:1; grid-row:1; }
  .cap-split-rows > :nth-child(2) { grid-column:1; grid-row:2; }
  .cap-split-rows > :nth-child(3) { grid-column:2; grid-row:2; }
}

.cap-band { background:var(--brand-50);
  border-top:1px solid var(--color-border-soft); border-bottom:1px solid var(--color-border-soft); }

/* Pull quote — the single line the section turns on. */
.cap-pull { font-size:var(--text-xl); line-height:var(--line-snug);
  font-weight:var(--weight-bold); color:var(--color-secondary);
  letter-spacing:var(--tracking-snug); padding-left:var(--space-s);
  border-left:4px solid var(--color-accent); }

/* ---- Two plain cards ------------------------------------------------------ */
.cap-two { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap:var(--space-m); }
.cap-plain { background:var(--color-surface); border-radius:var(--radius-xl);
  padding:var(--space-l); box-shadow:var(--shadow-xs); }
.cap-plain-h { display:flex; align-items:center; gap:var(--space-xs); margin-bottom:var(--space-s); }
.cap-plain-h svg { width:26px; height:26px; flex:0 0 26px; color:var(--color-primary);
  fill:none; stroke-width:2; }
.cap-plain h3 { font-size:var(--text-lg); font-weight:var(--weight-extrabold);
  color:var(--color-secondary); margin:0; }
.cap-plain p { margin:0; color:var(--color-ink-soft); line-height:var(--line-relaxed); }

/* Closing note under the two cards — carries the "not an eligibility rule" clause, so it must
   read as body copy rather than as a disclaimer. Constrained to a measure so it does not run the
   full band width. */
.cap-list-note { max-width:72ch; margin:var(--space-m) 0 0;
  color:var(--color-ink-soft); line-height:var(--line-relaxed); }

/* ---- Dark panel ----------------------------------------------------------- */
.cap-panel { position:relative; overflow:clip; border-radius:var(--radius-xl);
  background:var(--grad-hero); box-shadow:var(--shadow-lg); padding:var(--space-2xl); }
.cap-panel-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(700px 380px at 88% -10%, rgb(103 184 220 / .34), transparent 60%); }
.cap-panel-in { position:relative; z-index:1; display:grid; grid-template-columns:1fr;
  gap:var(--space-xl); align-items:center; }
@media (min-width: 860px) { .cap-panel-in { grid-template-columns:1.35fr .65fr; } }
.cap-panel h2 { color:var(--color-surface); margin:0 0 var(--space-s); }
.cap-panel p { color:rgb(255 255 255 / .9); line-height:var(--line-relaxed); margin:0 0 var(--space-s); }
.cap-panel p.soft { color:rgb(255 255 255 / .72); margin-bottom:0; }
.cap-panel-cta { display:flex; flex-direction:column; gap:var(--space-2xs);
  align-items:stretch; max-width:340px; width:100%; justify-self:start; }
@media (min-width: 860px) { .cap-panel-cta { justify-self:end; } }
.cap-panel-cta .btn { justify-content:center; }

/* ---- Eligibility ---------------------------------------------------------- */
.cap-mark { font-weight:var(--weight-extrabold); color:var(--color-secondary);
  box-shadow:inset 0 -.5em 0 var(--brand-100); }
.cap-pill-note { background:var(--brand-50); box-shadow:none; }

/* ---- Sticky bar ----------------------------------------------------------- */
/* Only appears once a card is tapped. `hidden` on the element is the no-JS state, so a reader
   without JS never sees an empty bar. */
.cap-bar { position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex;
  justify-content:center; padding:0 var(--space-s) var(--space-m); pointer-events:none; }
.cap-bar[hidden] { display:none; }
.cap-bar-in { pointer-events:auto; display:flex; align-items:center; gap:var(--space-m);
  flex-wrap:wrap; justify-content:center; background:var(--color-surface);
  border:1px solid var(--color-border-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-m); }
.cap-bar-in p { margin:0; font-size:var(--text-md); font-weight:var(--weight-semibold);
  color:var(--color-secondary); }
.cap-bar-in .btn { white-space:nowrap; }

@media (prefers-reduced-motion: reduce) {
  .cap-card, .cap-card:hover { transition:none; transform:none; }
}

/* #stuck and #eligible were adjacent on the page ground (2026-09-16 sweep). */
section.block#eligible { background:var(--color-surface); }