/*
 * CancerDiscoveries Core — front-end component styles.
 *
 * Status is never communicated by color alone: every badge carries a text
 * label and a glyph. Color (via [data-variant]) is a secondary reinforcement.
 * Layout is responsive (card grid collapses to one column on small screens),
 * focus is always visible, and motion is reduced when the user prefers it.
 */

:root {
	/* Brand: a restrained scientific/editorial palette — deep navy as the
	   primary identity color, a calm teal as a secondary accent, white plus
	   very light cool-gray/blue section backgrounds. Semantic status colors
	   (warn/danger/ok, defined below) are used only where they communicate
	   meaning (evidence/regulatory/correction state), never decoratively. */
	--cdc-navy: #0f2942;
	--cdc-navy-ink: #0a1e30;
	--cdc-teal: #1a7a8c;
	--cdc-teal-dark: #135e6c;
	--cdc-ink: #1a1a1a;
	--cdc-muted: #55606b;
	--cdc-muted-2: #7c8894;
	--cdc-line: #dde3e8;
	--cdc-line-soft: #e9edf1;
	--cdc-bg-soft: #f4f7f9;
	--cdc-bg-cool: #f6f8fb;
	--cdc-accent: #0b5cad;
	--cdc-warn-bg: #fff4e5;
	--cdc-warn-line: #b26a00;
	--cdc-danger-bg: #fdecea;
	--cdc-danger-line: #a1150c;
	--cdc-ok-bg: #e7f4ea;
	--cdc-ok-line: #1c6b34;

	/* Typography scale — a deliberate hierarchy so no two unrelated elements
	   (a card headline and a metadata label, say) read at the same weight. */
	--cdc-fs-eyebrow: 0.8rem;
	--cdc-fs-meta: 0.85rem;
	--cdc-fs-label: 0.8rem;
	--cdc-fs-body: 1.05rem;
	--cdc-fs-card-title: 1.15rem;
	--cdc-fs-article-title: clamp(1.6rem, 3.4vw, 2.3rem);
	--cdc-fs-section-title: clamp(1.25rem, 2.4vw, 1.55rem);
	--cdc-fs-page-title: clamp(1.6rem, 3.4vw, 2.1rem);
	--cdc-fs-hero-title: clamp(2rem, 5vw, 3.1rem);
	--cdc-fs-deck: clamp(1.05rem, 2vw, 1.25rem);

	/* Spacing scale — used for section rhythm, card padding, and header/nav
	   spacing so vertical rhythm is consistent instead of ad hoc. */
	--cdc-space-1: 0.35rem;
	--cdc-space-2: 0.6rem;
	--cdc-space-3: 1rem;
	--cdc-space-4: 1.5rem;
	--cdc-space-5: 2.25rem;
	--cdc-space-6: 3.5rem;

	/* Containers. */
	--cdc-content-max: 1240px;
	--cdc-reading-max: 760px;
}

/* Base page setup: readable body copy, cool-white background so cards read
   as distinct surfaces rather than blending into a flat white page. */
html { -webkit-text-size-adjust: 100%; }
body { color: var(--cdc-ink); background: #fff; font-size: var(--cdc-fs-body); line-height: 1.55; }
h1, h2, h3 { color: var(--cdc-navy-ink); line-height: 1.2; }
a { color: var(--cdc-teal-dark); }

/* Escape a block-theme's "constrained layout" content width, then apply the
   plugin's OWN deliberate container: a sensible max-width, centered, with
   comfortable side padding. Modern FSE/block themes (and some classic
   themes' content wrappers) apply a narrow max-width + centered margin to
   every direct child of the post content area, on the assumption that
   children are prose. The plugin's own page/card-grid output is an
   application UI, not prose, and needs its own predictable width — not the
   theme's prose column, and not unbounded full width either. This is a
   defensive, theme-agnostic override: it only affects the plugin's own
   top-level container, never anything else on the page, and produces the
   same result on a theme/wrapper that never constrains width in the first
   place. Found via real-browser staging review at a 1440px viewport (a
   two-column card grid collapsing its key/value rows to ~40px-wide value
   columns before this container system existed). */
.cdc-page {
	max-width: var(--cdc-content-max);
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
	box-sizing: border-box;
}

/* The single-story template (.cdc-single) and the cd_story archive
   (.cdc-archive) are separate, bundled classic PHP templates — not routed
   through .cdc-page — so they get the same defensive container treatment
   directly. .cdc-single additionally uses a narrower max-width: a
   comfortable article-reading column rather than the wider application-UI
   width .cdc-page uses for card grids and filter panels. */
.cdc-archive {
	max-width: var(--cdc-content-max);
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
	box-sizing: border-box;
}
.cdc-single {
	max-width: 900px;
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
	box-sizing: border-box;
}

/* Hide the active theme's own site-header/footer template parts wherever a
   plugin page (.cdc-page) is present, so the visitor sees exactly one
   deliberate header and one deliberate footer — the plugin's own — instead
   of a redundant "theme chrome + plugin chrome" stack. Scoped with :has()
   so it only applies on the plugin's own routes, on any theme, without
   needing a specific body class or template-part naming convention (which
   themes are free to vary). :has() has full support in this project's
   tested-browser baseline (Chromium; see docs/prelaunch/SITE-PREVIEW-INDEX.md
   for exactly which browsers were tested) — on a browser without :has()
   support, this rule simply doesn't apply and the (redundant, but not
   broken) theme header/footer remain visible, a safe fallback. */
body:has(.cdc-page) > .wp-site-blocks > header.wp-block-template-part,
body:has(.cdc-page) > .wp-site-blocks > footer.wp-block-template-part,
body:has(.cdc-page) header.wp-block-template-part,
body:has(.cdc-page) footer.wp-block-template-part {
	display: none;
}

/* Screen-reader-only text (matches WP core .screen-reader-text semantics). */
.cdc-single .screen-reader-text,
.cdc-archive .screen-reader-text,
.cdc-block .screen-reader-text,
.cdc-status-row .screen-reader-text,
.cdc-source-list .screen-reader-text,
.cdc-card .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Status badges -------------------------------------------------------- */
.cdc-status-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0;
}

.cdc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--cdc-line);
	border-radius: 999px;
	background: var(--cdc-bg-soft);
	font-size: 0.85rem;
	line-height: 1.3;
	color: var(--cdc-ink);
}

.cdc-badge__glyph { font-weight: 700; }
.cdc-badge__text { font-weight: 600; }

/* Evidence stage progression (secondary color cue only). */
.cdc-badge[data-variant^="evidence-preclinical"] { background: var(--cdc-bg-soft); border-color: var(--cdc-line); }
.cdc-badge[data-variant^="evidence-early_human"] { background: #eef3fb; border-color: #9cbde6; }
.cdc-badge[data-variant^="evidence-emerging_clinical"] { background: #e9f0fb; border-color: #6f9fda; }
.cdc-badge[data-variant^="evidence-later_stage_human"] { background: #e2ecfa; border-color: #3f7fce; }
.cdc-badge[data-variant^="evidence-high_certainty"] { background: var(--cdc-ok-bg); border-color: var(--cdc-ok-line); }

/* Regulatory. */
.cdc-badge[data-variant="reg-fda_approved"] { background: var(--cdc-ok-bg); border-color: var(--cdc-ok-line); }
.cdc-badge[data-variant="reg-investigational"],
.cdc-badge[data-variant="reg-clinical_trial_access"],
.cdc-badge[data-variant="reg-expanded_access"] { background: var(--cdc-warn-bg); border-color: var(--cdc-warn-line); }
.cdc-badge[data-variant="reg-withdrawn"] { background: var(--cdc-danger-bg); border-color: var(--cdc-danger-line); }

/* Guideline. */
.cdc-badge[data-variant="guide-preferred_standard"] { background: var(--cdc-ok-bg); border-color: var(--cdc-ok-line); }
.cdc-badge[data-variant="guide-recommended_option"] { background: #eef3fb; border-color: #6f9fda; }
.cdc-badge[data-variant="guide-recommended_against"] { background: var(--cdc-danger-bg); border-color: var(--cdc-danger-line); }

/* Suppressed evidence label (load-bearing source retracted). */
.cdc-badge[data-variant="evidence-suppressed"] { background: var(--cdc-danger-bg); border-color: var(--cdc-danger-line); font-weight: 700; }

/* --- Content blocks --------------------------------------------------------
   Editorial callouts, not database-record boxes: a colored left accent plus
   a very light background tint carries the meaning; no all-around border
   competing for attention. The one exception is --warnings, a genuine
   caution callout that keeps its full warm background so it reads as
   distinctly more urgent than the others (never hidden, per the redesign's
   explicit "do not hide this" instruction for What This Does NOT Mean). */
.cdc-block {
	margin: var(--cdc-space-4) 0;
	padding: var(--cdc-space-3) var(--cdc-space-4);
	border-left: 4px solid var(--cdc-line);
	border-radius: 4px;
	background: var(--cdc-bg-cool);
}
.cdc-block__title {
	margin: 0 0 0.5rem;
	font-size: var(--cdc-fs-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cdc-muted-2);
}
.cdc-block--means { border-left-color: var(--cdc-ok-line); }
.cdc-block--doesnt-mean { border-left-color: var(--cdc-warn-line); background: #fffaf2; }
.cdc-block--population { border-left-color: var(--cdc-accent); }
.cdc-block--harms { border-left-color: var(--cdc-danger-line); background: #fff8f7; }
.cdc-block--funding { border-left-color: var(--cdc-muted); }
.cdc-block--warnings { border-left-color: var(--cdc-warn-line); background: var(--cdc-warn-bg); }
.cdc-warning-list { margin: 0; padding-left: 1.2rem; }
.cdc-warning-list__item { margin: 0.35rem 0; }
.cdc-applicability-warning { font-weight: 600; }

/* --- Correction banner ---------------------------------------------------- */
.cdc-correction-banner {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--cdc-warn-line);
	border-radius: 6px;
	background: var(--cdc-warn-bg);
}
.cdc-correction-banner[data-state="retracted"] { border-color: var(--cdc-danger-line); background: var(--cdc-danger-bg); }
.cdc-correction-banner[data-state="expression_of_concern"] { border-color: var(--cdc-danger-line); }
.cdc-correction-banner__severity { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

/* Review / staleness banner (text + glyph, not color-only). */
.cdc-review-banner {
	margin: 0.75rem 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--cdc-warn-line);
	border-left-width: 4px;
	border-radius: 6px;
	background: var(--cdc-warn-bg);
	font-size: 0.9rem;
}
.cdc-review-banner[data-state="stale"] { border-color: var(--cdc-danger-line); background: var(--cdc-danger-bg); }
.cdc-review-banner__glyph { font-weight: 700; }

/* Per-source correction/retraction marker (text, not color-only). */
.cdc-source__correction { font-weight: 700; }
.cdc-source__correction[data-state="retracted"] { color: var(--cdc-danger-line); }

/* --- Expandable details --------------------------------------------------- */
.cdc-details { margin: 1.25rem 0; border: 1px solid var(--cdc-line); border-radius: 6px; }
.cdc-details > summary {
	cursor: pointer;
	padding: 0.75rem 1rem;
	font-weight: 600;
	background: var(--cdc-bg-soft);
	border-radius: 6px;
}
.cdc-details[open] > summary { border-bottom: 1px solid var(--cdc-line); border-radius: 6px 6px 0 0; }
.cdc-kv-list { margin: 0; padding: 0.5rem 1rem; }
.cdc-kv {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 0.5rem;
	padding: 0.35rem 0;
	border-bottom: 1px dotted var(--cdc-line);
}
/* A grid item's default min-width is "auto," which refuses to shrink below
   its content's intrinsic width — for a long unbroken token (a DOI, an NCT
   identifier, a URL with no spaces) that pushes the row wider than its
   column and overflows the page horizontally. min-width: 0 lets the track
   shrink; overflow-wrap: anywhere then actually wraps the token instead of
   letting it run off the edge. Found via an automated 768px-viewport
   regression check (Milestone 14) on a real long DOI-bearing fixture. */
.cdc-kv dt, .cdc-kv dd { min-width: 0; }
.cdc-kv dt { font-weight: 600; margin: 0; }
.cdc-kv dd { margin: 0; overflow-wrap: anywhere; }

/* --- Sources -------------------------------------------------------------- */
.cdc-source-list { margin: 0; padding-left: 1.2rem; }
.cdc-source-list li { margin: 0 0 1rem; overflow-wrap: anywhere; }
.cdc-source__type, .cdc-source__id, .cdc-source__checked { color: var(--cdc-muted); font-size: 0.9em; }
.cdc-source__load-bearing {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.05rem 0.4rem;
	border: 1px solid var(--cdc-line);
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
}

/* --- Citation text + copy buttons (Milestones 10B/10C/10D/11B) — the
   citation text is ALWAYS visible; the button is a progressive enhancement,
   never the only way to get the text. */
.cdc-citation { margin: 0.4rem 0 0; }
.cdc-citation-text {
	margin: 0 0 0.4rem;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--cdc-line);
	border-radius: 6px;
	background: var(--cdc-bg-soft);
	font-size: 0.9em;
	overflow-wrap: anywhere;
}
.cdc-copy { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0.75rem 0.4rem 0; }
.cdc-copy button {
	font: inherit;
	font-size: 0.85em;
	font-weight: 600;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--cdc-line);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}
.cdc-copy button:hover { background: var(--cdc-bg-soft); }
.cdc-copy button:focus { outline: 3px solid var(--cdc-accent); outline-offset: 2px; }
.cdc-copy button:disabled { cursor: not-allowed; opacity: 0.6; }
.cdc-copy-status { font-size: 0.85em; color: var(--cdc-muted); }

/* --- Understanding Research / Glossary (native anchors only, no JS) ------- */
.cdc-glossary-jump {
	margin: 1rem 0 1.5rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--cdc-line);
	border-radius: 6px;
	background: var(--cdc-bg-soft);
}
.cdc-glossary-jump ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.cdc-glossary-jump a { font-weight: 600; text-decoration: none; }
.cdc-glossary-jump a:hover { text-decoration: underline; }
.cdc-glossary-section { margin: 1.75rem 0; }
.cdc-glossary-list { margin: 0; padding: 0; }
.cdc-glossary-term { padding: 0.6rem 0; border-bottom: 1px dotted var(--cdc-line); scroll-margin-top: 1rem; }
.cdc-glossary-term dt { font-weight: 700; margin: 0 0 0.25rem; }
.cdc-glossary-term dd { margin: 0; color: var(--cdc-ink); }

/* --- Per-jurisdiction records --------------------------------------------- */
.cdc-block--regulatory .cdc-jurisdiction,
.cdc-block--guideline .cdc-jurisdiction {
	margin: 0.75rem 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--cdc-line);
	border-left-width: 3px;
	border-radius: 5px;
}
.cdc-block--regulatory .cdc-jurisdiction { border-left-color: var(--cdc-accent); }
.cdc-block--guideline .cdc-jurisdiction { border-left-color: #6f9fda; }
.cdc-jurisdiction__title { margin: 0 0 0.35rem; font-size: 1rem; }
/* Admin record fieldsets. */
.cdc-record-row { border: 1px solid #dcdcde; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.cdc-record-field { display: block; margin: 0.25rem 0; }
.cdc-record-field input, .cdc-record-field select { width: 100%; max-width: 32rem; }

/* --- Discover / filter forms ------------------------------------------------
 * Shared by the Discover, Major Advances, Clinical Trials Finder and FDA
 * Approvals Explorer filter panels. A bare <fieldset> defaults to
 * `min-width: min-content` in every major browser (unlike a normal block
 * element, whose default min-width is 0/auto and shrinks freely) — so it was
 * forced as wide as its widest child's intrinsic content, overflowing a
 * 320px viewport by ~28px regardless of anything else on the page.
 * min-width: 0 plus border-box sizing on the <select>s is the standard fix,
 * carried forward here alongside the full visual treatment.
 */
/* §4 and §8 of the visual polish pass: the mobile filter panels and the
 * mobile footer accordion groups share one generic collapsible-panel
 * pattern (CDC_Components::toggle_panel(), cdcInitToggles() in cdc.js) — a
 * plain <button class="cdc-toggle-btn"> + <div class="cdc-toggle-panel">,
 * NOT a native <details>/<summary>. A <details> was tried first and
 * reverted: modern Chromium renders a closed <details>'s content through an
 * internal slot with its own content-visibility that authored CSS on the
 * slotted content cannot force open above a breakpoint — the panel rendered
 * as an empty box with no visible fields. The rules immediately below are
 * generic (shared shape); each of .cdc-filter-toggle-btn/.cdc-filter-panel
 * and .cdc-footer-toggle-btn/.cdc-footer-group carries only its own visual
 * differences further down.
 *
 * The panel is FULLY VISIBLE with no JavaScript at all — .cdc-toggle-btn is
 * only shown, and .cdc-toggle-panel only collapsed, once cdcInitToggles()
 * has added `cdc-js-ready` to <html> AND the mobile media query matches, so
 * a visitor whose JS fails to load always sees the panel open (exactly
 * today's desktop behavior), never a stuck, inert toggle with no way to
 * reach the content behind it.
 */
.cdc-toggle-btn {
	display: none;
	cursor: pointer;
	background: none;
	border: 0;
	text-align: left;
	font-family: inherit;
}
.cdc-toggle-btn:focus { outline: 3px solid var(--cdc-teal); outline-offset: 2px; }
@media (max-width: 860px) {
	html.cdc-js-ready .cdc-toggle-btn { display: inline-flex; align-items: center; gap: 0.35rem; width: 100%; }
	html.cdc-js-ready .cdc-toggle-btn::before {
		content: "\25B8";
		display: inline-block;
		font-size: 0.8em;
		transition: transform 0.15s ease;
	}
	html.cdc-js-ready .cdc-toggle-btn[aria-expanded="true"]::before { transform: rotate(90deg); }
	html.cdc-js-ready .cdc-toggle-panel { display: none; }
	html.cdc-js-ready .cdc-toggle-panel.cdc-toggle-panel--open { display: block; }
}

/* --- Filter panel (Discover / Latest / Clinical Trials / FDA Approvals) --- */
.cdc-filter-toggle-btn {
	padding: var(--cdc-space-3) var(--cdc-space-4);
	font-weight: 700;
	font-size: 1rem;
	color: var(--cdc-navy-ink);
	background: var(--cdc-bg-cool);
	border: 1px solid var(--cdc-line);
	border-radius: 12px;
	margin: var(--cdc-space-3) 0 0;
}
.cdc-filter-panel {
	background: var(--cdc-bg-cool);
	border: 1px solid var(--cdc-line);
	border-radius: 12px;
	margin: var(--cdc-space-3) 0 var(--cdc-space-5);
}
@media (max-width: 860px) {
	html.cdc-js-ready .cdc-filter-panel { margin-top: var(--cdc-space-2); }
}
.cdc-filter-panel > .cdc-discover-form { padding: var(--cdc-space-4); }
.cdc-discover-form fieldset {
	min-width: 0;
	border: 0;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--cdc-space-3) var(--cdc-space-4);
	align-items: start;
}
/* The section heading above the panel (an <h2>) already names it for sighted
   and AT users alike via aria-labelledby; the <legend> stays for fieldset/
   AT-grouping semantics but is visually redundant next to that h2, so it is
   visually hidden rather than duplicated on screen. */
.cdc-discover-form legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cdc-discover-form__note,
.cdc-discover-form__jurisdictions,
.cdc-discover-form .cdc-field--actions {
	grid-column: 1 / -1;
}
.cdc-discover-form__note {
	margin: 0;
	font-size: var(--cdc-fs-meta);
	color: var(--cdc-muted);
}
.cdc-discover-form .cdc-field { margin: 0; }
.cdc-discover-form .cdc-field label {
	display: block;
	font-size: var(--cdc-fs-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--cdc-muted);
	margin: 0 0 0.3rem;
}
.cdc-discover-form select,
.cdc-discover-form input[type="text"],
.cdc-discover-form input[type="search"] {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--cdc-line);
	border-radius: 7px;
	background: #fff;
	color: var(--cdc-ink);
	font-size: 0.95rem;
}
.cdc-discover-form select:focus,
.cdc-discover-form input[type="text"]:focus,
.cdc-discover-form input[type="search"]:focus {
	outline: 3px solid var(--cdc-teal);
	outline-offset: 1px;
	border-color: var(--cdc-teal);
}
.cdc-discover-form__jurisdictions {
	margin: var(--cdc-space-3) 0 0;
	font-size: var(--cdc-fs-meta);
	color: var(--cdc-muted);
}
.cdc-field--actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--cdc-space-4) !important;
	padding-top: var(--cdc-space-3);
	border-top: 1px solid var(--cdc-line);
}
.cdc-discover-form .cdc-field--actions button[type="submit"] {
	display: inline-block;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.65rem 1.3rem;
	border-radius: 8px;
	border: 2px solid var(--cdc-navy);
	background: var(--cdc-navy);
	color: #fff;
	cursor: pointer;
}
.cdc-discover-form .cdc-field--actions button[type="submit"]:hover,
.cdc-discover-form .cdc-field--actions button[type="submit"]:focus {
	background: var(--cdc-navy-ink);
	border-color: var(--cdc-navy-ink);
}
.cdc-discover-form .cdc-field--actions button[type="submit"]:focus {
	outline: 3px solid var(--cdc-teal);
	outline-offset: 2px;
}
.cdc-field--actions .cdc-btn--clear {
	display: inline-block;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.63rem 1.2rem;
	border-radius: 8px;
	border: 2px solid var(--cdc-line);
	background: #fff;
	color: var(--cdc-navy-ink);
	text-decoration: none;
}
.cdc-field--actions .cdc-btn--clear:hover,
.cdc-field--actions .cdc-btn--clear:focus {
	border-color: var(--cdc-teal);
	color: var(--cdc-teal-dark);
}
.cdc-field--actions .cdc-btn--clear:focus { outline: 3px solid var(--cdc-teal); outline-offset: 2px; }

/* --- Cards / grid --------------------------------------------------------- */
.cdc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--cdc-space-4);
}
.cdc-card {
	padding: var(--cdc-space-3) var(--cdc-space-3) var(--cdc-space-4);
	border: 1px solid var(--cdc-line);
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cdc-card:hover { border-color: #c3d6de; box-shadow: 0 4px 16px rgba(15, 41, 66, 0.06); }
.cdc-card__title { margin: 0 0 0.6rem; font-size: var(--cdc-fs-card-title); font-weight: 700; line-height: 1.3; }
/* Card headlines (and every other "title-as-link"): no underline by
   default — an obvious color/weight shift plus hover/focus underline is
   the link cue, not a permanently underlined multi-line headline. */
.cdc-card__title a,
.cdc-update-item__title a,
.cdc-brand {
	color: inherit;
	text-decoration: none;
}
.cdc-card__title a { color: var(--cdc-navy-ink); }
.cdc-card__title a:hover,
.cdc-card__title a:focus,
.cdc-update-item__title a:hover,
.cdc-update-item__title a:focus {
	color: var(--cdc-teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cdc-card__excerpt { color: var(--cdc-muted); line-height: 1.55; margin: 0.4rem 0; }
.cdc-card__meta { margin: 0.6rem 0; }
.cdc-card__details { margin: 0.75rem 0 0; }
.cdc-card__details > summary { font-size: 0.88rem; padding: 0.5rem 0.75rem; }
/* .cdc-kv's default label/value columns (grid-template-columns: 12rem 1fr)
   assume a wide container (a single story page). Inside a card-grid card
   (routinely 280-340px wide, per .cdc-card-grid's own minmax(280px, 1fr)),
   a fixed 12rem label column leaves too little room for the value column
   and every value wraps character-by-character. Stack label above value
   inside cards instead — readable at any card width, no math required.
   Found via real-browser staging review (a 4-column homepage grid at a
   1440px viewport). */
.cdc-card .cdc-kv { grid-template-columns: 1fr; }
.cdc-card__primary-source { color: var(--cdc-ok-line); font-weight: 600; margin: 0.35rem 0; }
.cdc-last-reviewed { color: var(--cdc-muted); font-size: 0.85rem; }
/* §5 of the visual polish pass: a short, record-adjacent reminder replaces
   the full disclaimer paragraph that used to repeat on every trial/FDA
   card — the full text now lives once, page-level, as .cdc-page-disclaimer
   (see trial_eligibility_disclaimer()/fda_regulatory_disclaimer()). */
.cdc-card__eligibility-short,
.cdc-card__note-short { color: var(--cdc-muted); font-size: var(--cdc-fs-meta); margin: 0.6rem 0 0; }
.cdc-page-disclaimer {
	background: var(--cdc-bg-cool);
	border: 1px solid var(--cdc-line);
	border-left: 3px solid var(--cdc-teal);
	border-radius: 6px;
	padding: 0.7rem 0.9rem;
	margin: 0 0 var(--cdc-space-4);
	color: var(--cdc-muted);
	font-size: 0.92rem;
}
.cdc-page-disclaimer strong { color: var(--cdc-ink); }

/* --- Featured Discovery (homepage) ----------------------------------------
 * §1 of the visual polish pass — a real editorial focal point above the
 * normal card grid. Deliberately typography/accent-led, not image-led: no
 * stock or fabricated scientific photography stands in for content the site
 * can't honestly show a real picture of.
 */
.cdc-featured-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
	gap: var(--cdc-space-4);
	align-items: stretch;
	margin-bottom: var(--cdc-space-4);
}
.cdc-featured-secondary { display: flex; flex-direction: column; gap: var(--cdc-space-4); }
.cdc-featured-secondary > .cdc-card { flex: 1; }
.cdc-card--featured {
	background: linear-gradient(180deg, var(--cdc-bg-cool) 0%, #fff 65%);
	border: 1px solid var(--cdc-line);
	border-top: 4px solid var(--cdc-navy);
	padding: var(--cdc-space-5) var(--cdc-space-4) var(--cdc-space-4);
}
.cdc-card__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--cdc-fs-eyebrow);
	font-weight: 700;
	color: var(--cdc-teal-dark);
	margin: 0 0 0.5rem;
}
.cdc-card__title--featured { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.cdc-card__excerpt--featured { font-size: 1.05rem; max-width: 62ch; }
.cdc-card__cta { margin-top: var(--cdc-space-3); }
@media (max-width: 900px) {
	.cdc-featured-grid { grid-template-columns: 1fr; }
}

/* --- Active filter summary (Discover / Latest Discoveries) ---------------- */
.cdc-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--cdc-line);
	border-radius: 6px;
	background: var(--cdc-bg-soft);
}
.cdc-active-filters__label { font-weight: 600; }
.cdc-active-filters ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.cdc-active-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--cdc-line);
	border-radius: 999px;
	background: #fff;
	font-size: 0.85rem;
}
.cdc-active-filter__remove { text-decoration: none; font-weight: 700; }
.cdc-active-filter__remove:hover { text-decoration: underline; }
.cdc-active-filter__remove:focus { outline: 3px solid var(--cdc-accent); outline-offset: 2px; }
.cdc-active-filters__clear { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-left: auto; }
.cdc-active-filters__clear:focus { outline: 3px solid var(--cdc-accent); outline-offset: 2px; }

/* --- Recently Updated feed -------------------------------------------------- */
.cdc-update-list { list-style: none; margin: 0; padding: 0; }
.cdc-update-item {
	padding: 0.9rem 1rem;
	margin: 0 0 0.9rem;
	border: 1px solid var(--cdc-line);
	border-left: 3px solid var(--cdc-accent);
	border-radius: 6px;
	background: #fff;
}
.cdc-update-item__title { margin: 0 0 0.35rem; font-size: 1.1rem; }
.cdc-update-item__meta { color: var(--cdc-muted); font-size: 0.9rem; margin: 0 0 0.35rem; }
.cdc-update-item__type { font-weight: 600; }
.cdc-update-item__summary { margin: 0.35rem 0 0; }
.cdc-update-item__blocked { color: var(--cdc-danger-line); font-weight: 600; margin: 0.5rem 0 0; }

/* --- Focus visibility ----------------------------------------------------- */
.cdc-single a:focus,
.cdc-archive a:focus,
.cdc-details > summary:focus,
.cdc-card a:focus,
.cdc-update-list a:focus {
	outline: 3px solid var(--cdc-accent);
	outline-offset: 2px;
}

/* --- Medical disclaimer --------------------------------------------------- */
.cdc-medical-disclaimer {
	margin-top: 1.5rem;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--cdc-muted);
	border-radius: 6px;
	color: var(--cdc-muted);
	font-size: 0.9rem;
}

/* --- Navigation / skip link ----------------------------------------------- */
.cdc-skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.5rem 0.9rem;
	background: #fff;
	border: 2px solid var(--cdc-accent);
	border-radius: 4px;
	z-index: 1000;
}

/* --- Site header: ONE deliberate header (see the :has() rule above that
   hides the active theme's own redundant header/footer chrome). --------- */
.cdc-site-header { background: var(--cdc-navy); margin-bottom: var(--cdc-space-4); }
.cdc-site-header__bar {
	max-width: var(--cdc-content-max);
	margin-inline: auto;
	padding: var(--cdc-space-3) clamp(1rem, 3vw, 2rem);
	display: flex;
	align-items: center;
	gap: var(--cdc-space-3);
}
.cdc-brand { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; line-height: 1.25; }
.cdc-brand__name { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.cdc-brand__tagline { font-size: 0.78rem; font-weight: 500; color: #a9c2cf; }
.cdc-brand:hover .cdc-brand__name,
.cdc-brand:focus .cdc-brand__name { text-decoration: underline; }
.cdc-env-badge {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--cdc-teal);
	color: #cdeef2;
	background: rgba(26, 122, 140, 0.25);
	white-space: nowrap;
}

/* Header search affordance (§7 of the visual polish pass) — a recognizable
   icon + label routing straight into the existing Discover search, not a
   separate search architecture. Visible at both desktop and mobile widths. */
.cdc-search-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	color: #eaf1f5;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	flex-shrink: 0;
}
.cdc-search-link:hover,
.cdc-search-link:focus { background: rgba(255, 255, 255, 0.12); }
.cdc-search-link:focus { outline: 3px solid var(--cdc-teal); outline-offset: 1px; }
.cdc-search-link__icon { font-size: 1.05rem; }

/* Mobile menu toggle — hidden by default; only shown at the mobile
   breakpoint below, and only made functionally meaningful once cdc.js has
   run (see the .cdc-js-ready guard below the breakpoint). */
.cdc-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.cdc-nav-toggle:focus { outline: 3px solid var(--cdc-teal); outline-offset: 2px; }
.cdc-nav-toggle__icon,
.cdc-nav-toggle__icon::before,
.cdc-nav-toggle__icon::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}
.cdc-nav-toggle__icon { position: relative; }
.cdc-nav-toggle__icon::before,
.cdc-nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.cdc-nav-toggle__icon::before { top: -6px; }
.cdc-nav-toggle__icon::after { top: 6px; }

.cdc-nav--primary { background: var(--cdc-navy); }
.cdc-nav--primary > ul {
	max-width: var(--cdc-content-max);
	margin-inline: auto;
	padding: 0 clamp(1rem, 3vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--cdc-space-4);
	list-style: none;
}
.cdc-nav--primary > ul > li { position: relative; }
.cdc-nav--primary a {
	display: inline-block;
	padding: 0.7rem 0.05rem;
	color: #eaf1f5;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.cdc-nav--primary a:hover,
.cdc-nav--primary a:focus { border-bottom-color: var(--cdc-teal); }
.cdc-nav--primary a:focus { outline: 3px solid var(--cdc-teal); outline-offset: -1px; }

/* "More" secondary menu — native <details>/<summary>, fully keyboard- and
   screen-reader-accessible with no JavaScript required. */
.cdc-nav-more summary {
	cursor: pointer;
	color: #eaf1f5;
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.7rem 0.05rem;
	list-style: none;
}
.cdc-nav-more summary::-webkit-details-marker { display: none; }
.cdc-nav-more summary::after { content: "\25BE"; margin-left: 0.3rem; font-size: 0.75em; }
.cdc-nav-more[open] summary::after { content: "\25B4"; }
.cdc-nav-more summary:focus { outline: 3px solid var(--cdc-teal); outline-offset: 2px; }
.cdc-nav-more details > ul {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.35rem;
	background: #fff;
	border: 1px solid var(--cdc-line);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(10, 30, 48, 0.18);
	padding: 0.4rem;
	min-width: 240px;
	list-style: none;
	z-index: 60;
}
.cdc-nav-more details > ul > li { list-style: none; }
.cdc-nav-more details > ul a {
	display: block;
	padding: 0.5rem 0.6rem;
	color: var(--cdc-ink);
	font-weight: 500;
	font-size: 0.92rem;
	border-bottom: none;
	border-radius: 6px;
}
.cdc-nav-more details > ul a:hover,
.cdc-nav-more details > ul a:focus { background: var(--cdc-bg-soft); text-decoration: none; }

.cdc-nav a { font-weight: 600; text-decoration: none; }

/* --- Site footer: grouped columns, like a real publication footer. ------- */
.cdc-site-footer { margin-top: var(--cdc-space-6); background: var(--cdc-bg-cool); border-top: 1px solid var(--cdc-line); }
.cdc-nav--footer {
	max-width: var(--cdc-content-max);
	margin-inline: auto;
	padding: var(--cdc-space-5) clamp(1rem, 3vw, 2rem) var(--cdc-space-3);
}
.cdc-footer-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--cdc-space-4) var(--cdc-space-5); }
/* §8 of the visual polish pass: each footer group is a collapsible panel
 * (CDC_Components::toggle_panel() — a plain button + class toggle, see its
 * docblock for why not <details>/<summary>) so the mobile footer starts
 * collapsed instead of unrolling into one long list of links; always
 * expanded above the mobile breakpoint so desktop keeps the existing clean
 * three-column footer completely unchanged. The group's own <h2> is the
 * button's content rather than being replaced by plain text, so the
 * heading a screen-reader user navigates by is unaffected — this wraps a
 * disclosure control around a still-real heading, it doesn't replace one
 * with the other. toggle_panel() emits the button and panel as siblings, so
 * .cdc-footer-group-wrap (not the button or panel individually) is the
 * actual .cdc-footer-groups grid item.
 */
.cdc-footer-group-wrap { border-bottom: 1px solid var(--cdc-line); }
/* Unlike .cdc-filter-toggle-btn (plain UI chrome, safely hidden at desktop
   since the real section heading lives elsewhere), this button's content
   IS the group's only heading — so it stays visible at every width,
   overriding the generic .cdc-toggle-btn { display: none } default. Only
   the disclosure affordance (pointer cursor, triangle marker — from the
   generic @media (max-width: 860px) rule above) is mobile+JS-only; at
   every other width this renders as a plain, non-interactive-looking
   heading row. */
.cdc-footer-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.7rem 0;
	width: 100%;
	cursor: default;
}
@media (max-width: 860px) {
	html.cdc-js-ready .cdc-footer-toggle-btn { cursor: pointer; }
}
.cdc-footer-group__title { display: inline; font-size: var(--cdc-fs-label); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cdc-muted-2); margin: 0; }
.cdc-footer-group ul { list-style: none; margin: 0; padding: 0 0 var(--cdc-space-3); display: flex; flex-direction: column; gap: 0.5rem; }
.cdc-footer-group a { color: var(--cdc-ink); font-weight: 500; text-decoration: none; }
.cdc-footer-group a:hover,
.cdc-footer-group a:focus { text-decoration: underline; color: var(--cdc-teal-dark); }
@media (min-width: 861px) {
	.cdc-footer-group-wrap { border-bottom: 0; }
}
.cdc-footer-disclaimer {
	max-width: var(--cdc-content-max);
	margin: var(--cdc-space-4) auto 0;
	padding: var(--cdc-space-3) clamp(1rem, 3vw, 2rem) var(--cdc-space-4);
	border-top: 1px solid var(--cdc-line);
	color: var(--cdc-muted);
	font-size: var(--cdc-fs-meta);
}
.cdc-footer-disclaimer a { color: var(--cdc-teal-dark); }

/* In-page jump nav on a single story (native <a href="#id"> anchors only —
   no JavaScript, no custom scroll behavior beyond the browser's own). */
.cdc-story-jump {
	margin: 1rem 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--cdc-line);
	border-radius: 6px;
	background: var(--cdc-bg-soft);
}
.cdc-story-jump ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.cdc-story-jump a { font-weight: 600; text-decoration: none; }
.cdc-story-jump a:hover { text-decoration: underline; }
.cdc-story-jump a:focus { outline: 3px solid var(--cdc-accent); outline-offset: 2px; }

/* --- Hero / page / sections ----------------------------------------------- */
.cdc-hero { padding: var(--cdc-space-5) 0 var(--cdc-space-4); border-bottom: 1px solid var(--cdc-line-soft); margin-bottom: var(--cdc-space-4); }
.cdc-hero__eyebrow {
	font-size: var(--cdc-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cdc-teal-dark);
	margin: 0 0 0.6rem;
}
.cdc-hero__title { font-size: var(--cdc-fs-hero-title); line-height: 1.08; margin: 0 0 0.85rem; font-weight: 800; letter-spacing: -0.01em; }
.cdc-hero__lede { font-size: var(--cdc-fs-deck); line-height: 1.5; color: var(--cdc-muted); max-width: 62ch; }
.cdc-hero__cta { margin-top: var(--cdc-space-3); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cdc-btn {
	display: inline-block;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.7rem 1.3rem;
	border-radius: 8px;
	text-decoration: none;
	border: 2px solid transparent;
}
.cdc-btn--primary { background: var(--cdc-navy); color: #fff; }
.cdc-btn--primary:hover, .cdc-btn--primary:focus { background: var(--cdc-navy-ink); }
.cdc-btn--secondary { background: #fff; color: var(--cdc-navy-ink); border-color: var(--cdc-line); }
.cdc-btn--secondary:hover, .cdc-btn--secondary:focus { border-color: var(--cdc-teal); color: var(--cdc-teal-dark); }
.cdc-btn:focus { outline: 3px solid var(--cdc-teal); outline-offset: 2px; }
.cdc-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--cdc-space-4);
	list-style: none;
	margin: var(--cdc-space-4) 0 0;
	padding: var(--cdc-space-2) 0 0;
	border-top: 1px dotted var(--cdc-line);
	color: var(--cdc-muted-2);
	font-size: var(--cdc-fs-meta);
	font-weight: 600;
}
.cdc-trust-strip li::before { content: "\2713"; margin-right: 0.35rem; color: var(--cdc-teal-dark); font-weight: 700; }
.cdc-cancer-type-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}
.cdc-cancer-type-list a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--cdc-line);
	border-radius: 999px;
	background: var(--cdc-bg-cool);
	color: var(--cdc-navy-ink);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
}
.cdc-cancer-type-list a:hover { background: #fff; border-color: var(--cdc-teal); color: var(--cdc-teal-dark); }
.cdc-cancer-type-list a:focus { outline: 3px solid var(--cdc-accent); outline-offset: 2px; }
.cdc-page__title { font-size: var(--cdc-fs-page-title); font-weight: 800; letter-spacing: -0.01em; }
.cdc-page__lede { color: var(--cdc-muted); font-size: var(--cdc-fs-deck); max-width: 65ch; }
.cdc-section { margin: var(--cdc-space-5) 0; }
.cdc-section__title { font-size: var(--cdc-fs-section-title); font-weight: 700; border-bottom: 2px solid var(--cdc-line); padding-bottom: 0.4rem; margin-bottom: var(--cdc-space-3); }
.cdc-empty { color: var(--cdc-muted); font-style: italic; padding: 0.5rem 0; }
.cdc-note { color: var(--cdc-muted); }
.cdc-newsletter-placeholder { border: 1px dashed var(--cdc-line); padding: 0.75rem 1rem; border-radius: 6px; }

/* --- Two-panel feature layout (Clinical Trials + FDA Approvals side by
   side on desktop) — a plain, opt-in utility class two homepage sections
   share; degrades to stacked single-column automatically below the
   breakpoint since it's a grid with a responsive minmax track. */
.cdc-section-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--cdc-space-5); align-items: start; }
.cdc-section-pair > .cdc-section { margin: 0; }
.cdc-caveat { border-left: 3px solid var(--cdc-muted); padding-left: 0.75rem; }

/* Jurisdiction filter nav (§4/§12). Active state uses a glyph + underline +
   weight — never color alone — plus aria-current for assistive tech. */
.cdc-juris-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; margin: 0.5rem 0 1rem; padding: 0; }
.cdc-juris__link { text-decoration: none; }
.cdc-juris__link--active { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cdc-juris__marker { font-weight: 700; }
.cdc-juris-nav a:focus { outline: 3px solid var(--cdc-accent); outline-offset: 2px; }
.cdc-standard { margin: 1.25rem 0; }
.cdc-resource-list, .cdc-correction-list, .cdc-disclaimer-list { padding-left: 1.2rem; }
.cdc-resource-item { margin: 0 0 1rem; }
.cdc-resource-item__name { font-weight: 700; }
.cdc-resource-item__org, .cdc-resource-item__jurisdiction { color: var(--cdc-muted); font-size: 0.9em; margin-left: 0.5rem; }
.cdc-resource-item__desc, .cdc-resource-item__checked { margin: 0.25rem 0 0; color: var(--cdc-muted); font-size: 0.92em; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 600px) {
	.cdc-kv { grid-template-columns: 1fr; }
	.cdc-card-grid { grid-template-columns: 1fr; }
	.cdc-footer-groups { grid-template-columns: 1fr; }
}

/* Mobile primary navigation: collapsed behind a hamburger toggle, but ONLY
   once cdc.js has confirmed it initialized (html.cdc-js-ready — see
   cdcInitNavToggle() in assets/js/cdc.js). Without JavaScript, the nav
   remains a plain, always-visible, fully navigable list at every width;
   the toggle button stays hidden and nothing is ever permanently collapsed
   with no way to reopen it — a visitor whose script fails to load is never
   stuck unable to reach the rest of the site. */
@media (max-width: 860px) {
	.cdc-site-header__bar { flex-wrap: wrap; }
	html.cdc-js-ready .cdc-nav-toggle { display: inline-flex; margin-left: auto; }
	html.cdc-js-ready .cdc-nav--primary { display: none; }
	html.cdc-js-ready .cdc-nav--primary.cdc-nav--open { display: block; padding-bottom: var(--cdc-space-2); }
	.cdc-nav--primary > ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 0.25rem clamp(1rem, 3vw, 2rem) var(--cdc-space-3);
	}
	.cdc-nav--primary > ul > li { width: 100%; }
	.cdc-nav--primary a { display: block; padding: 0.6rem 0; border-bottom: none; }
	.cdc-nav-more summary { padding: 0.6rem 0; }
	.cdc-nav-more details > ul {
		position: static;
		box-shadow: none;
		border: none;
		border-left: 2px solid rgba(255, 255, 255, 0.2);
		background: transparent;
		margin: 0 0 0 0.5rem;
		padding: 0;
		min-width: 0;
	}
	.cdc-nav-more details > ul a { color: #eaf1f5; }
	.cdc-nav-more details > ul a:hover,
	.cdc-nav-more details > ul a:focus { background: rgba(255, 255, 255, 0.08); }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Reader tools + reading list (Milestone 11) ---------------------------- */
.cdc-reader-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0.75rem 0;
}
.cdc-reader-tools button {
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--cdc-line);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}
.cdc-reader-tools button:hover { background: var(--cdc-bg-soft); }
.cdc-reader-tools button:focus { outline: 3px solid var(--cdc-accent); outline-offset: 2px; }
.cdc-reader-tools button[aria-pressed="true"] { background: var(--cdc-bg-soft); font-weight: 700; }
.cdc-reader-tools button:disabled { cursor: not-allowed; opacity: 0.6; }
.cdc-reading-list { list-style: none; margin: 0; padding: 0; }
.cdc-reading-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0.8rem;
	margin: 0 0 0.6rem;
	border: 1px solid var(--cdc-line);
	border-radius: 6px;
}
.cdc-reading-list__remove {
	font: inherit;
	font-size: 0.85em;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--cdc-line);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}
.cdc-reading-list__remove:hover { background: var(--cdc-bg-soft); }
.cdc-reading-list__remove:focus { outline: 3px solid var(--cdc-accent); outline-offset: 2px; }

/* Source pack (Original Vision Completion batch) — a structured, citable
   printable summary rendered on every story page but hidden on screen; the
   existing "Print this story" control (window.print()) reveals it. */
.cdc-print-only { display: none; }

/* --- Print (Milestone 11A) — keep the substantive evidence content, hide
   navigation, filter/search controls, and every interactive-only control.
   No separate print template: the same markup, minus chrome. ---------------- */
@media print {
	.cdc-skip-link,
	.cdc-nav,
	.cdc-story-jump,
	.cdc-glossary-jump,
	.cdc-juris-nav,
	.cdc-discover-form,
	.cdc-active-filters,
	.cdc-pagination,
	.cdc-reader-tools,
	.cdc-copy,
	noscript {
		display: none !important;
	}
	.cdc-print-only { display: block; }
	.cdc-source-pack { border-top: 2px solid #000; margin-top: 1.5em; padding-top: 1em; }
	.cdc-source-pack ul { padding-left: 1.2em; }
	a[href]::after { content: none !important; }
	body { color: #000; background: #fff; }
}

/* Demo/synthetic-content badge (visual redesign pass) — the "[STAGING
   DEMO]" / "[SYNTHETIC TEST]" / "[SYNTHETIC TEST DATA]" prefix is stripped
   from the visible headline text and rendered here instead, so it never
   distorts headline typography while remaining unmistakably visible,
   directly above the title it labels. */
.cdc-demo-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cdc-warn-line);
	background: var(--cdc-warn-bg);
	border: 1px solid var(--cdc-warn-line);
	border-radius: 4px;
	padding: 0.2rem 0.5rem;
	margin: 0 0 0.4rem;
}

/* Content-format label (Original Vision Completion batch) — a small,
   non-color-only tag naming the story's presentation shape (Myth vs.
   Evidence, Interview, Mechanism Explainer), visually distinct from the
   evidence/regulatory/guideline status badges above it. */
.cdc-content-format {
	display: inline-block;
	font-size: 0.85em;
	font-style: italic;
	color: var(--cdc-text-muted, #555);
	border: 1px dashed var(--cdc-line);
	border-radius: 4px;
	padding: 0.15em 0.6em;
	margin: 0.25em 0;
}

/* Interview / mechanism explainer blocks — kept visually distinct from
   verified-evidence blocks so a personal statement or an illustrative
   disclosure is never mistaken for independently verified evidence. */
.cdc-block--interview .cdc-interview__excerpt {
	border-left: 3px solid var(--cdc-line);
	padding-left: 1em;
	font-style: italic;
}
.cdc-mechanism__disclosure { border: 1px dashed var(--cdc-line); padding: 0.5em 0.75em; border-radius: 4px; }

/* Study-stage progression (§6 of the visual polish pass — homepage +
 * Understanding Research page) — a real visual step flow: a numbered marker
 * per stage connected by a line, laid out as a horizontal row on wide
 * screens and a vertical list on narrow ones. Still a semantic <ol>, and the
 * disclaimer text rendered above it (that steps are skipped/reordered/not
 * guaranteed) is unchanged — this only adds a visual layer on top of markup
 * that already reads perfectly well with no CSS at all.
 */
.cdc-stage-timeline {
	list-style: none;
	margin: var(--cdc-space-4) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.cdc-stage-timeline__step {
	display: flex;
	gap: 0.9rem;
	padding-bottom: var(--cdc-space-3);
	position: relative;
}
.cdc-stage-timeline__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 0.9rem;
	top: 1.9rem;
	bottom: 0;
	width: 2px;
	background: var(--cdc-line);
}
.cdc-stage-timeline__marker {
	flex-shrink: 0;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--cdc-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	z-index: 1;
}
.cdc-stage-timeline__content { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.15rem; }
.cdc-stage-timeline__label { font-weight: 700; }
.cdc-stage-timeline__desc { color: var(--cdc-muted); font-size: 0.92rem; line-height: 1.45; }

/* Horizontal progression — a single row of stages connected by a line
 * running through each marker, rather than a long vertical read. Requires
 * `flex-wrap: nowrap` (never `wrap`): with 8 steps, `:not(:last-child)`
 * only knows the true last child of the whole list, not the last item of
 * each visual row, so a wrapped multi-row layout would draw a connector
 * line off the end of every row-ending step (its `right: -50%` bleeding
 * past the row into space with no next marker) — a real horizontal-overflow
 * bug found via a real 1024px-viewport screenshot audit, not a hypothetical.
 * The breakpoint is content-max-width, not an arbitrary round number: it's
 * the width at which the page's own max-width container plus its side
 * padding guarantees enough room for all 8 steps (min-width 120px each
 * plus padding) on one row without ever needing to wrap.
 */
@media (min-width: 1240px) {
	.cdc-stage-timeline { flex-direction: row; flex-wrap: nowrap; gap: 0; }
	.cdc-stage-timeline__step {
		flex: 1 1 0;
		min-width: 120px;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0 0.5rem var(--cdc-space-3);
	}
	.cdc-stage-timeline__step:not(:last-child)::before {
		left: 50%;
		top: 0.9rem;
		bottom: auto;
		width: auto;
		right: -50%;
		height: 2px;
	}
	.cdc-stage-timeline__content { align-items: center; }
	.cdc-stage-timeline__desc { max-width: 22ch; }
}