/* Cancer Policy Lab — long-form reading design, and the "Two patients, one rule" explainer.
   On top of tokens.css and site.css; values come from tokens.css. Loaded by
   /coverage-watch/two-patients/ and by the toolkit hub (for "The rule in one minute"). */

/* =====================================================================================
   Part 1. Reading design: measure, byline, pull quote, footnotes that become sidenotes.
   ===================================================================================== */

/* A reading block (.rd): text set to a 65–72 character measure. 31em of the system sans
   holds about 69 characters a line at every body size in tokens.css (19 and 20px; phones are
   narrower than the measure). Measured in Chrome on macOS: 34em, the site's --measure, holds
   about 74. Fonts with wider letters (Segoe UI, Arial) fit a few fewer. */
.rd { --rd-measure: 31em; }
.rd p, .rd li, .rd dt, .rd dd { max-width: var(--rd-measure); }
.rd ul, .rd ol:not([class]) { padding-left: 1.25em; }
.rd li + li { margin-top: var(--space-2); }

/* Byline and date: one quiet line under a title. The date is a data-last-checked element, so
   site-data.js keeps it in step with data/site.json. */
.rd-byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-4); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }
.rd-byline b { font-weight: 600; color: var(--color-text); }
.hero .rd-byline { margin-top: var(--space-5); }
h2 + .rd-byline { margin-top: var(--space-2) !important; }

/* Pull quote. Only for quoting CMS's own text, always with its page. A short accent rule
   above, the words in the display face, the source under them. */
.rd-pull { margin: var(--space-6) 0 0; padding: 0; max-width: 36rem; }
.rd-pull::before { content: ""; display: block; width: 3rem; border-top: 3px solid var(--color-accent); margin-bottom: var(--space-3); }
.rd-pull blockquote { margin: 0; }
.rd-pull blockquote p { max-width: none; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.75rem); line-height: 1.3; letter-spacing: -0.005em; text-wrap: pretty; }
.rd-pull figcaption { margin-top: var(--space-3); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }
.rd-pull + * { margin-top: var(--space-6) !important; }

/* A pointer to a longer read at the end of a short one: a hairline, a small label, then the
   link set like the hero links (600 weight, 2px underline). */
.rd-next { margin-top: var(--space-5) !important; padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.rd-next-label { display: block; font-size: var(--text-small); font-weight: 600; line-height: 1.5; color: var(--color-text-muted); }
.rd-next a { font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; }
.rd-next a:hover { border-bottom-width: 3px; }

/* Footnotes. One markup everywhere: a numbered reference in the text (.rd-ref, role
   doc-noteref) links to its note in a list at the end (.rd-notes), and each note links back
   (role doc-backlink). Screen readers meet the notes in that order on every screen. Each
   reference names an anchor (style="anchor-name:--note-N") and its note uses it
   (style="position-anchor:--note-N"); see Sidenotes below. */
.rd-ref { font-size: 0.72em; line-height: 0; vertical-align: super; font-weight: 600; text-decoration: none; padding-inline: 0.15em 0.1em; font-variant-numeric: lining-nums tabular-nums; }
.rd-ref:hover { text-decoration: underline; }
.rd-notes { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-rule); }
.rd-notes-h { font-family: var(--font-sans); font-size: var(--text-small) !important; font-weight: 600; line-height: 1.5; margin: 0 !important; }
.rd-notes ol { list-style: decimal; padding-left: 1.5em !important; margin-top: var(--space-2); font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }
.rd-notes li { max-width: 40rem; padding-left: 0.25em; margin-top: var(--space-2) !important; }
.rd-notes li::marker { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.rd-notes li:target { color: var(--color-text); background: var(--color-band); box-shadow: -0.5em 0 0 var(--color-band), 0.5em 0 0 var(--color-band); }
.rd-back { padding-inline: 0.3em; text-decoration: none; font-weight: 600; }
.rd-back:hover { text-decoration: underline; }
/* A notes section of its own at the end of a page (the explainer). */
.rd-notes-sec .rd-notes { margin-top: 0; padding-top: 0; border-top: 0; }

/* Sidenotes, 1200px and wider, in browsers with CSS anchor positioning: each note leaves
   the list and sits in the label rail (columns 1-3 of .section-grid), level with its
   reference. The list's place in the page and its reading order do not change, so screen
   readers and keyboard users still find the notes at the end; the "Notes" heading is
   hidden from sight only. The containing block is .rd-scope, a full-width element (the
   explainer's <article>, the toolkit section), so the rail is found from the page width:
   left = the page margin plus the gutter; width = 3 of 12 columns plus 2 gaps. Other
   browsers keep the numbered notes at the end. */
@media (min-width: 75rem) {
  @supports (anchor-name: --rd) {
    .rd-scope { position: relative; }
    .rd-notes { margin: 0 !important; padding: 0; border: 0; }
    .rd-notes-sec { padding: 0 !important; border: 0 !important; }
    .rd-notes-sec .rail { display: none; }
    .rd-notes-h { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .rd-notes ol { margin: 0; padding: 0 !important; }
    .rd-notes li {
      --rd-inner: calc(min(100%, var(--page-max)) - 2 * var(--gutter));
      position: absolute;
      top: calc(anchor(top) - 0.1rem);
      left: calc((100% - min(100%, var(--page-max))) / 2 + var(--gutter));
      width: calc((var(--rd-inner) - 11 * var(--space-5)) / 4 + 2 * var(--space-5));
      margin: 0 !important; padding: 0 0 0 var(--space-3); max-width: none;
      list-style-position: inside;
      border-left: 2px solid var(--color-rule);
    }
    .rd-notes li:target { border-left-color: var(--color-accent); box-shadow: none; }
  }
}

/* =====================================================================================
   Part 2. "Two patients, one rule" (/coverage-watch/two-patients/).
   ===================================================================================== */

.tp-eyebrow { font-size: var(--text-small); font-weight: 600; color: var(--color-text); }
.hero .tp-eyebrow + h1 { margin-top: var(--space-3); }

/* "Not real patients" label, under the title. An ink rule, not the accent: it is a warning. */
.tp-flag { margin-top: var(--space-5); max-width: 46rem; padding: var(--space-4); background: var(--color-band); border-left: 4px solid var(--color-text); }
.tp-flag p { max-width: 40rem; }
.tp-flag p + p { margin-top: var(--space-2); }
.tp-flag .tp-src { margin-top: var(--space-3); }

/* Source lines under cards, figures and the label: small, muted, never the main text. */
.tp-src { font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }

/* The tiers, as a definition list in the reading measure. */
.tp-tiers { margin: var(--space-4) 0 0; max-width: var(--rd-measure, 31em); border-top: 1px solid var(--color-rule); }
.tp-tiers > div { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px solid var(--color-rule); }
@media (min-width: 30rem) { .tp-tiers > div { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-4); } }
.tp-tiers dt { font-weight: 600; }
.tp-tiers dd { margin: 0; }

/* ---------- Line illustrations ----------
   Inline SVG drawn with a slight hand wobble (the paths are generated once and pasted in;
   no script). No text inside: the words stay in HTML at full size, and each drawing has an
   aria-label. Ink for the drawing, the warm gray for what is absent or routine, the accent
   only for the mark that decides the step. */
.ill { display: block; width: 100%; max-width: 12.5rem; height: auto; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill .i-k { stroke: var(--color-text); }
.ill .i-m { stroke: #8C8B85; }          /* 3.4:1 on white, 3.2:1 on the band: graphics only */
.ill .i-a { stroke: var(--color-accent); }
.ill .i-d { stroke-dasharray: 3 4; }
.ill .i-w { stroke-width: 3; }
.ill .i-t { stroke-width: 1.5; }
.ill .i-f { fill: var(--color-band); stroke: none; }
.ill .i-fa { fill: var(--color-accent); stroke: none; }
.ill .i-fk { fill: var(--color-text); stroke: none; }
@media (forced-colors: active) { .ill { forced-color-adjust: none; } }

/* ---------- The two paths (figure) ----------
   One ordered list per woman, so each path reads in order. From 36rem the two lists sit
   side by side on shared rows (subgrid), so the same step is level in both. A 2px line runs
   down each path through a dot per step: filled ink where the step happens, the accent
   where Diana's case is decided, dashed gray where a step does not happen, an open circle
   where CMS's example gives no outcome. */
.content > .tp-glance { margin-top: var(--space-6); }
.tp-paths { display: grid; gap: var(--space-6); margin-top: var(--space-5); }
.tp-path { min-width: 0; }
.tp-who { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: end; column-gap: var(--space-3); padding-bottom: var(--space-4); }
.tp-who .ill { width: 3.5rem; }
.tp-who-name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); line-height: 1.2; }
.tp-who-meta { display: block; margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.4; color: var(--color-text-muted); }
.tp-path ol { list-style: none; padding: 0; margin: 0; }
.tp-path li { position: relative; padding: 0 0 var(--space-4) 2.25rem; font-size: var(--text-small); line-height: 1.45; }
.tp-path li:last-child { padding-bottom: 0; }
.tp-path li::before, .tp-path li::after { content: ""; position: absolute; left: calc(0.5rem - 1px); border-left: 2px solid var(--color-text); }
.tp-path li::before { top: 0; height: 0.75rem; }
.tp-path li::after { top: 0.75rem; bottom: 0; }
.tp-path li:first-child::before, .tp-path li:last-child::after { display: none; }
.tp-path li.is-skip::before, .tp-path li.is-skip::after, .tp-path li.is-skip + li::before, .tp-path li:has(+ .is-skip)::after { border-left: 2px dashed #8C8B85; }
.tp-dot { position: absolute; z-index: 1; left: 0; top: 0.25rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-text); }
.tp-dot--key { background: var(--color-accent); }
.tp-dot--skip { background: var(--color-bg); border: 2px dashed #8C8B85; }
.tp-dot--open { background: var(--color-bg); border: 2px solid var(--color-text); }
.tp-step-name { display: block; font-weight: 600; color: var(--color-text); }
.is-skip .tp-path-text { color: var(--color-text-muted); }
.tp-path-text { display: block; }
.tp-key { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-size: var(--text-small); line-height: 1.4; color: var(--color-text-muted); }
.tp-key li { display: flex; align-items: center; gap: var(--space-2); }
.tp-key .tp-dot { position: static; flex: none; }
@container fig (min-width: 36rem) {
  .tp-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(5, auto); column-gap: var(--space-6); row-gap: 0; }
  .tp-path { grid-row: 1 / span 6; display: grid; grid-template-rows: subgrid; }
  .tp-path ol { grid-row: 2 / span 5; display: grid; grid-template-rows: subgrid; }
}
@media (forced-colors: active) { .tp-dot, .tp-path li::before, .tp-path li::after { forced-color-adjust: none; } }

/* ---------- Step by step ----------
   Five steps, each a heading, what the rule says, and one card per woman. The step list
   (.tp-progress) links to each step; two-patients.js marks the step in view
   (aria-current="step", .is-current) as the reader scrolls. Nothing moves on its own.
   Phones and tablets: the list is a slim bar that sticks to the top of the screen while the
   steps are on it (the rail is display:contents, so the bar's sticky range is the whole
   section). 64rem and wider: a vertical list in the label rail, sticky beside the steps. */
.tp-rail { display: contents; }
.tp-progress { position: sticky; top: 0; z-index: 3; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter); background: var(--color-bg); border-bottom: 1px solid var(--color-rule); }
.tp-progress ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.tp-progress a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding-right: var(--space-2); color: var(--color-text); text-decoration: none; font-size: var(--text-small); line-height: 1.3; }
.tp-progress a:hover .tp-pl { text-decoration: underline; }
.tp-pn { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--color-text); background: var(--color-bg); font-weight: 600; font-variant-numeric: lining-nums; }
.tp-progress a[aria-current] .tp-pn { background: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; }
.tp-progress a[aria-current] .tp-pl { font-weight: 600; }
/* Under 48rem the numbers alone fit; the current step also shows its name. */
@media (max-width: 47.99rem) {
  .tp-progress .tp-pl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tp-progress a[aria-current] .tp-pl { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
  .tp-progress ol { flex-wrap: nowrap; gap: var(--space-1); }
  .tp-progress a { padding-right: 0; }
  .tp-progress a[aria-current] { padding-right: var(--space-2); }
}
/* Under 24rem (320px phones) smaller circles keep the bar on one row with the longest current
   name ("Claims check"); the links keep their 2.75rem height, so tap targets do not shrink. */
@media (max-width: 23.99rem) { .tp-pn { width: 1.75rem; height: 1.75rem; } }
@media (min-width: 64rem) {
  .tp-rail { display: block; grid-column: 1 / span 3; padding-top: 0.6rem; }
  .tp-progress { top: var(--space-5); margin: var(--space-5) 0 0; padding: 0; border: 0; background: none; }
  .tp-progress ol { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .tp-progress li { position: relative; }
  .tp-progress li + li::before { content: ""; position: absolute; left: calc(1rem - 1px); top: -0.375rem; height: 0.75rem; border-left: 2px solid var(--color-rule); }
  .tp-progress a { min-height: 3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .tp-pn, .tp-marker { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
}

.tp-intro { margin-top: var(--space-4); }
.tp-steps { list-style: none; padding: 0; margin: var(--space-6) 0 0; container: tp / inline-size; }
.tp-step { padding-top: var(--space-5); border-top: 1px solid var(--color-text); }
.tp-step + .tp-step { margin-top: var(--space-7); }
.tp-step-head { display: flex; align-items: center; gap: var(--space-3); }
.tp-marker { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--color-text); font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1; font-variant-numeric: lining-nums; }
.tp-step.is-current .tp-marker { background: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; }
.tp-step h3 { font-size: var(--text-h2); line-height: var(--leading-heading); }
.tp-rule { margin-top: var(--space-4); max-width: var(--rd-measure, 31em); padding-left: var(--space-4); border-left: 2px solid var(--color-text); }
.tp-rule-label { display: block; font-size: var(--text-small); font-weight: 600; line-height: 1.5; }
.tp-rule .tp-src { margin-top: var(--space-2); }
.tp-pair { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
/* The two women's cards side by side once the steps are 42rem wide (from about 752px, and
   beside the rail from 64rem, where the steps are 688px wide), so each step compares them level. */
@container tp (min-width: 42rem) { .tp-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }

/* A card per woman per step: the band, a drawing, plain words, then the source. Where a step
   does not happen for her, the card is an outline with a dashed edge and says so first. */
.tp-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); background: var(--color-band); }
.tp-card > .ill { max-width: 14rem; margin-bottom: var(--space-1); }
/* Stacked cards (under about 752px) are wider than the measure: hold their text to it. */
.tp-card > p, .tp-card li { max-width: 31em; }
.tp-card-who { margin: 0; font-family: var(--font-sans); font-size: var(--text-body); font-weight: 600; line-height: 1.3; }
.tp-card-who span { font-weight: 400; color: var(--color-text-muted); }
.tp-card .tp-src { margin-top: auto; padding-top: var(--space-2); }
.tp-card--skip { background: var(--color-bg); border: 2px dashed #8C8B85; padding: calc(var(--space-4) - 2px); }
.tp-card--skip .ill .i-f { fill: var(--color-bg); }
.tp-status { font-size: var(--text-small); font-weight: 600; line-height: 1.4; }
.tp-card--skip .tp-status { color: var(--color-text-muted); }
.tp-card ul { padding-left: 1.25em; }
.tp-card li + li { margin-top: var(--space-2); }

/* What the state's data show: CMS's codes as data labels (mono), each with CMS's words. */
.tp-codes { display: grid; gap: var(--space-3); margin: 0; }
.tp-codes dt { font-size: var(--text-small); font-weight: 600; line-height: 1.4; }
.tp-codes dd { margin: 0; }
.tp-codes ul { list-style: none; padding: 0 !important; display: grid; gap: var(--space-1); }
.tp-codes li { margin: 0 !important; font-size: var(--text-small); line-height: 1.45; }
.tp-code { font-family: var(--font-mono); font-size: var(--text-small); white-space: nowrap; }
.tp-code--key { color: var(--color-accent); font-weight: 600; }
/* CMS's determination, quoted as written. */
.tp-det { margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--color-text-muted); }
.tp-det-label { display: block; font-size: var(--text-small); font-weight: 600; line-height: 1.5; }

/* The 30 days, under the calendar drawing: what each kind of square means. */
.tp-cal-key { list-style: none; padding: 0 !important; display: grid; gap: var(--space-1); font-size: var(--text-small); line-height: 1.4; }
.tp-cal-key li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-2); align-items: start; margin: 0 !important; }
.tp-sw { width: 1rem; height: 1rem; margin-top: 0.1rem; box-shadow: inset 0 0 0 1.5px var(--color-text); }
.tp-sw--mail { box-shadow: none; border: 1.5px dashed #8C8B85; }
.tp-sw--first { box-shadow: inset 0 0 0 2.5px var(--color-accent); }
.tp-sw--last { background: var(--color-accent); box-shadow: none; }
@media (forced-colors: active) { .tp-sw { forced-color-adjust: none; } }

/* Notes and sources at the end of the page. */
.tp-sources > * + * { margin-top: var(--space-3); }
.tp-sources ul { padding-left: 1.25em; }
.tp-sources li + li { margin-top: var(--space-2); }
.tp-cite b { font-weight: 600; }

/* Forced colors (Windows High Contrast and the like). The drawings, path dots and lines and
   the calendar key opt out of forced colors above, so their shapes survive, but the page and
   card backgrounds still become Canvas, which is black in dark themes: draw them in the
   system's own colors instead, with Highlight where the page uses the accent, and mark the
   current step in Highlight too. */
@media (forced-colors: active) {
  .ill, .ill .i-k, .ill .i-m { stroke: CanvasText; }
  .ill .i-a { stroke: Highlight; }
  .ill .i-fk { fill: CanvasText; }
  .ill .i-fa { fill: Highlight; }
  .ill .i-f, .tp-card--skip .ill .i-f { fill: Canvas; }
  .tp-dot { background: CanvasText; }
  .tp-dot--key { background: Highlight; }
  .tp-dot--skip, .tp-dot--open { background: Canvas; border-color: CanvasText; }
  .tp-path li::before, .tp-path li::after,
  .tp-path li.is-skip::before, .tp-path li.is-skip::after, .tp-path li.is-skip + li::before, .tp-path li:has(+ .is-skip)::after { border-color: CanvasText; }
  .tp-sw { box-shadow: inset 0 0 0 1.5px CanvasText; }
  .tp-sw--mail { box-shadow: none; border-color: CanvasText; }
  .tp-sw--first { box-shadow: inset 0 0 0 2.5px Highlight; }
  .tp-sw--last { background: Highlight; box-shadow: none; }
  .tp-progress a[aria-current] .tp-pn, .tp-step.is-current .tp-marker { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
}

@media print {
  .tp-progress { display: none; }
  .tp-card, .tp-step-head { break-inside: avoid; }
  .tp-card, .tp-dot, .tp-sw, .ill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}