/* ICD lookup presentation (/dc/icd-codes), approved design V1 2026-09-11.
 *
 * SCOPED to .icd-page on <body> so nothing here reaches another tool. Every
 * colour reads a live main.css token; the approved mockup's standalone
 * light-dark() palette is deliberately NOT copied, and neither is its Lora
 * heading face: the site's own --font-serif is the brand family.
 *
 * This file also absorbs the presentation the page used to carry in an inline
 * <style> block. Moving it here is what lets the markup ship as content
 * rather than as a stylesheet, and it is why two existing guards now read
 * THIS file for the style hooks they used to find in the HTML.
 *
 * Two rules this file exists to respect:
 *   - THE BUTTON LAW: every clickable card or button carries a 2px accent
 *     border plus card-fx's cursor glow (cardfx-pop in the markup), a hover
 *     lift, and a border that shifts to --color-primary.
 *   - THE SYMMETRY LAW: no paragraph here gets its own narrower max-width, so
 *     the shared --prose-measure band set by main.css still rules the reading
 *     flow. Cards and panels are their own measure, which is correct.
 *
 * Dark mode is declared with BOTH mechanisms (prefers-color-scheme AND
 * [data-theme="dark"]) because the Auto theme only sets the media query.
 */

/* --color-accent (#b07a1f) is 3.72:1 as TEXT on white, below AA. Gold text on
   this page reads this separate ink token instead; the accent itself stays the
   border colour in both themes. */
.icd-page { --icd-ink-accent: #8a5e12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icd-page { --icd-ink-accent: #f5c862; }
}
:root[data-theme="dark"] .icd-page { --icd-ink-accent: #f5c862; }

/* The two direction panels and the suggestion list toggle with the `hidden`
   ATTRIBUTE, and `hidden` loses to any explicit `display` rule, so nothing in
   this file gives them a display value and this states the closed case
   outright. */
.icd-page .icd-panel[hidden],
.icd-page .icd-suggestions[hidden] { display: none; }

/* A paragraph inside a card is card copy, not page prose: main.css gives every
   .editorial p a 1.25rem bottom margin, which stacks badly inside a panel. */
.icd-page .icd-editor p,
.icd-page .icd-result p,
.icd-page .icd-empty p,
.icd-page .icd-hero p,
.icd-page .icd-record-intro p,
.icd-page .icd-next-head p,
.icd-page .icd-reverse-title p,
.icd-page .icd-subpanel { margin-bottom: 0; }

/* main.css centres `.editorial h2` because a left-flush section title OVER
   centred prose was the reported SYMMETRY LAW defect. This page has no centred
   prose: the approved design left-aligns the hero, every panel and every card,
   so here a centred h2 IS the mismatch. The law is respected by matching the
   surrounding text, not switched off. */
.icd-page .icd-editor h2,
.icd-page .icd-result-head h2,
.icd-page .icd-record h2,
.icd-page .icd-next-head h2 { text-align: left; }

.icd-page .icd-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--icd-ink-accent);
  margin: 0 0 .35rem;
}

/* ---------- Hero ---------- */

.icd-page .icd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 2.25rem;
  align-items: center;
  margin: 0 0 1.9rem;
}
.icd-page .icd-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.95rem, 3.6vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--color-primary);
  margin: .1rem 0 .7rem;
}
.icd-page .icd-lede {
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  max-width: var(--prose-measure);
}
.icd-page .icd-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.15rem;
  align-items: baseline;
  margin-top: .8rem;
  font-size: .84rem;
  color: var(--color-text-muted);
}
.icd-page .icd-hero-links a { color: var(--color-primary); font-weight: 600; }
.icd-page .icd-hero-art {
  width: 232px;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  display: block;
}

/* ---------- Direction tabs ---------- */

.icd-page .icd-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin: 0 0 1.5rem;
}
/* THE BUTTON LAW: a direction tab is a clickable card. */
.icd-page .icd-tab {
  display: flex;
  align-items: center;
  gap: .95rem;
  text-align: left;
  min-height: 5.4rem;
  padding: 1.15rem 1.35rem;
  font: inherit;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.icd-page .icd-tab:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
}
.icd-page .icd-tab:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}
.icd-page .icd-tab[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.icd-page .icd-tab strong { display: block; font-size: 1rem; font-weight: 700; }
.icd-page .icd-tab small {
  display: block;
  font-size: .78rem;
  line-height: 1.5;
  margin-top: .25rem;
  color: var(--color-text-muted);
}
.icd-page .icd-tab[aria-selected="true"] strong { color: var(--color-on-primary); }
/* A literal pale blue here was 1.4:1 in dark mode, where --color-primary is a
   LIGHT blue and the selected tab's ink is near-black. The subtitle now reads
   the same on-primary token as the title and is only dimmed, so it follows the
   theme instead of assuming a navy background. */
.icd-page .icd-tab[aria-selected="true"] small { color: var(--color-on-primary); opacity: .85; }
.icd-page .icd-direction { font-size: 1.6rem; line-height: 1; color: var(--icd-ink-accent); }
.icd-page .icd-tab[aria-selected="true"] .icd-direction { color: var(--color-accent-light); }

/* ---------- Two-column working area ---------- */

.icd-page .icd-layout {
  display: grid;
  grid-template-columns: minmax(19rem, .8fr) minmax(0, 1.2fr);
  gap: 1.7rem;
  align-items: start;
}
/* A grid item's min-width is `auto`, so one long unbreakable code string can
   push a column wider than its track and scroll the whole phone sideways.
   Both columns are pinned, not just the panel inside one of them. */
.icd-page .icd-col-input,
.icd-page .icd-col-results { min-width: 0; }
.icd-page .icd-editor {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 1.5rem;
  min-width: 0;
}
.icd-page .icd-editor h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-primary);
  margin: 0 0 .5rem;
}
.icd-page .icd-editor-lede {
  font-size: .86rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
}
.icd-page .icd-label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1rem 0 .45rem;
}
.icd-page .icd-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: .8rem .9rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
}
.icd-page textarea.icd-input {
  min-height: 11rem;
  line-height: 1.75;
  resize: vertical;
  font-family: inherit;
}
.icd-page .icd-input:focus { outline: none; border-color: var(--color-accent); }
.icd-page .icd-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.icd-page .icd-actions {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: .9rem;
}
/* THE BUTTON LAW: the primary control is a button with the accent border. */
.icd-page .icd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .65rem 1.2rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.icd-page .icd-button.icd-primary {
  flex: 1 1 auto;
  color: var(--color-on-primary);
  background: var(--color-primary);
}
.icd-page .icd-button:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.icd-page .icd-button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
/* A 44px tap target that reads as a text control, not a rival to the primary. */
.icd-page .icd-quiet {
  min-height: 44px;
  padding: .4rem .3rem;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.icd-page .icd-quiet:hover { color: var(--color-text-strong); }
.icd-page .icd-quiet:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.icd-page .icd-input-note {
  font-size: .76rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-top: .65rem;
}
.icd-page .icd-sample {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .1rem .8rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1.05rem;
  padding-top: .5rem;
  font-size: .8rem;
  color: var(--color-text-muted);
}
.icd-page .icd-sample .icd-quiet { font-size: .8rem; }
.icd-page .icd-help-strip {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: .8rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.icd-page .icd-help-strip strong { color: var(--color-text); }
.icd-page .icd-help-strip a { display: inline-block; margin-top: .3rem; color: var(--color-primary); font-weight: 600; }

.icd-page .icd-subpanel {
  padding: 1.05rem .2rem 0;
  font-size: .8rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.icd-page .icd-subpanel strong { display: block; color: var(--color-text); font-weight: 600; margin-bottom: .2rem; }
.icd-page .icd-subpanel a { color: var(--color-primary); font-weight: 600; }

/* ---------- Result column ---------- */

.icd-page .icd-result-head { margin: 0 0 .8rem; }
.icd-page .icd-result-head h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0;
}
.icd-page .icd-result-count {
  font-size: .82rem;
  color: var(--color-text-muted);
  margin: 0 0 .8rem;
}
.icd-page .icd-result-count strong { color: var(--color-primary); }
.icd-page .icd-results-note {
  font-size: .76rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  padding-top: .9rem;
  margin: 0;
}
.icd-page .icd-result-list { display: grid; gap: .8rem; min-width: 0; }

/* One card per SOURCE ENTRY. Inside it, one target block per resolved target,
   so an ICD target, its VA code and that code's condition name are always in
   the same block. Stacking several codes beside several wrapped condition
   names put the second code level with the tail of the first name on a phone,
   which invites a reader to pair the wrong code with the wrong condition. */
.icd-page .icd-result {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.15rem 1.2rem;
  min-width: 0;
}
.icd-page .icd-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: 1.3rem;
}
.icd-page .icd-source { min-width: 0; }
.icd-page .icd-code-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}
.icd-page .icd-code-line h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  /* A code string must never break into misleading fragments. */
  white-space: nowrap;
}
.icd-page .icd-sys {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .1rem .35rem;
  white-space: nowrap;
}
.icd-page .icd-description {
  font-size: .82rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-top: .45rem;
  /* Long clinical descriptions may break; codes above never do. */
  overflow-wrap: break-word;
}
.icd-page .icd-bridge {
  font-size: .76rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: .45rem;
}
.icd-page .icd-bridge strong { font-style: normal; font-weight: 600; color: var(--color-text); white-space: nowrap; }
/* SNOMED rows say what the concept IS before what the map did with it. */
.icd-page .icd-type {
  display: inline-flex;
  align-items: center;
  margin-top: .45rem;
  padding: .2rem .45rem;
  border-radius: var(--radius-sm);
  background: rgba(176, 122, 31, .12);
  color: var(--icd-ink-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.icd-page .icd-sub {
  font-size: .78rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-top: .4rem;
}
.icd-page .icd-cands {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
  font-size: .8rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.icd-page .icd-cands li { margin-bottom: .2rem; }
.icd-page .icd-cands code { font-weight: 700; white-space: nowrap; font-family: inherit; }
.icd-page .icd-cond { color: var(--color-text-muted); font-style: italic; }

.icd-page .icd-rec {
  margin-top: .7rem;
}
/* "Record this entry" (2026-09-03): a real button on every result card,
   whether or not the entry reached a VA code. */
.icd-page .icd-rec-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .35rem .8rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.icd-page .icd-rec-btn:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.icd-page .icd-rec-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.icd-page .icd-targets {
  border-left: 1px solid var(--color-border);
  padding-left: 1.2rem;
  min-width: 0;
  display: grid;
  gap: .95rem;
  align-content: start;
}
.icd-page .icd-target { min-width: 0; }
.icd-page .icd-target .icd-eyebrow { font-size: .62rem; letter-spacing: .08em; margin-bottom: .25rem; }
/* A diagnostic code must never break mid-number: half a code is a different
   code, and at 375px an `anywhere` break split "DC 6523" into "652" and "3". */
.icd-page .icd-dc {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--icd-ink-accent);
  text-decoration: none;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.icd-page .icd-dc:hover { text-decoration: underline; }
/* Which of this entry's targets produced the VA code beside it. */
.icd-page .icd-tgt {
  font-size: .7rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: .15rem;
  white-space: nowrap;
}
.icd-page .icd-target-name {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
  margin-top: .15rem;
}
.icd-page .icd-view {
  display: inline-block;
  margin-top: .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-primary);
}
.icd-page .icd-no-map h4 {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--icd-ink-accent);
  margin: 0;
}
.icd-page .icd-no-map p {
  font-size: .8rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  margin: .35rem 0 0;
}
.icd-page .icd-no-map a { color: var(--color-primary); font-weight: 600; }

/* Empty, hint and failure states share the card frame so the column never
   collapses to nothing. "Could not be checked" is deliberately shaped like a
   result, not like an absence of one. */
.icd-page .icd-empty {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 1.7rem 1.5rem;
}
.icd-page .icd-empty h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--color-primary);
  margin: .5rem 0 .6rem;
}
.icd-page .icd-empty p {
  font-size: .92rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
}
.icd-page .icd-empty .icd-button { margin-top: 1.1rem; flex: 0 0 auto; }
.icd-page .icd-mini-map {
  display: grid;
  grid-template-columns: 1fr 1.6rem 1fr;
  gap: .6rem;
  align-items: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.2rem 0;
  margin: 1.2rem 0 .9rem;
}
.icd-page .icd-mini-map small {
  display: block;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.icd-page .icd-mini-map strong {
  display: block;
  margin: .25rem 0;
  font-size: 1.2rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.icd-page .icd-mini-map span { font-size: .78rem; color: var(--color-text-muted); }
.icd-page .icd-mini-arrow { font-size: 1.2rem; color: var(--icd-ink-accent); text-align: center; }

/* ---------- Reverse direction ---------- */

.icd-page .icd-reverse-wrap { position: relative; }
.icd-page .icd-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 18rem;
  overflow-y: auto;
}
.icd-page .icd-suggestions button {
  display: block;
  width: 100%;
  min-height: 46px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: .6rem .8rem;
  font: inherit;
  font-size: .88rem;
  color: var(--color-text);
  cursor: pointer;
}
.icd-page .icd-suggestions button:last-child { border-bottom: 0; }
.icd-page .icd-suggestions button:hover,
.icd-page .icd-suggestions button[aria-selected="true"] { background: var(--color-surface-hover); }
.icd-page .icd-suggestions .icd-sug-c {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--icd-ink-accent);
  margin-bottom: .15rem;
}

.icd-page .icd-reverse-title {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.3rem;
  margin-bottom: .8rem;
}
.icd-page .icd-reverse-title h3 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--color-primary);
  margin: .35rem 0 .5rem;
}
.icd-page .icd-reverse-title p { font-size: .82rem; line-height: var(--leading-loose); color: var(--color-text-muted); }
.icd-page .icd-reverse-list {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: .2rem 1.2rem;
}
.icd-page .icd-reverse-item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: .85rem 0;
  border-bottom: 1px solid var(--color-border);
}
.icd-page .icd-reverse-item:last-child { border-bottom: 0; }
/* An ICD code is a code: it never wraps mid-string either. */
.icd-page .icd-reverse-item strong {
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}
.icd-page .icd-reverse-item span {
  font-size: .84rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* ---------- Record findings host ---------- */

.icd-page .icd-record { margin-top: 1.7rem; }
.icd-page .icd-record-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.icd-page .icd-record-intro > div { min-width: 0; }
.icd-page .icd-record-add { flex: 0 0 auto; margin: 0; }

/* ---------- Disclosures ---------- */

.icd-page .icd-disclosures { display: grid; gap: .8rem; margin-top: 1.8rem; }
.icd-page .icd-disclosure {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.icd-page .icd-disclosure > summary {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 60px;
  padding: 1rem 1.35rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  cursor: pointer;
}
.icd-page .icd-disclosure > summary::-webkit-details-marker { display: none; }
.icd-page .icd-disclosure > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-primary);
}
.icd-page .icd-disclosure[open] > summary::after { content: '\2212'; }
.icd-page .icd-disclosure > summary:hover { color: var(--color-text-strong); }
.icd-page .icd-disclosure > summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.icd-page .icd-coverage-total { font-weight: 400; font-size: .8rem; color: var(--color-text-muted); }
.icd-page .icd-disclosure-body { padding: 0 1.35rem 1.35rem; }
.icd-page .icd-disclosure-body h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-primary);
  margin: 1.2rem 0 .5rem;
}
.icd-page .icd-disclosure-body p {
  font-size: .92rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  max-width: var(--prose-measure);
  margin: 0 auto .8rem;
}
.icd-page .icd-disclosure-body p:last-child { margin-bottom: 0; }
.icd-page .icd-disclosure-body strong { color: var(--color-text); }
.icd-page .icd-disclosure-body a { color: var(--color-primary); font-weight: 600; }

.icd-page .icd-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 1.5rem;
  margin-top: 1rem;
}
.icd-page .icd-chapter {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: .5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--color-border);
}
.icd-page .icd-chapter-l { font-size: 1rem; font-weight: 800; color: var(--icd-ink-accent); }
.icd-page .icd-chapter-t { font-size: .82rem; line-height: 1.45; color: var(--color-text); }
.icd-page .icd-chapter-n { display: block; font-size: .74rem; color: var(--color-text-muted); margin-top: .2rem; }
.icd-page .icd-hint { font-size: .86rem; line-height: var(--leading-relaxed); color: var(--color-text-muted); }

/* ---------- Next steps ---------- */

.icd-page .icd-next { margin-top: 2.2rem; }
.icd-page .icd-next-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.icd-page .icd-next-head h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0;
}
.icd-page .icd-next-all { flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--color-primary); }
.icd-page .icd-art-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}
/* THE BUTTON LAW: these are clickable cards. */
.icd-page .icd-art-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  transition: transform .15s ease, border-color .15s ease;
}
.icd-page .icd-art-card:hover { transform: translateY(-3px); border-color: var(--color-primary); }
.icd-page .icd-art-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.icd-page .icd-art-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.icd-page .icd-art-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.05rem;
}
.icd-page .icd-art-copy strong {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--color-primary);
}
.icd-page .icd-art-d {
  font-size: .8rem;
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  margin: .55rem 0 .85rem;
}
.icd-page .icd-art-go { margin-top: auto; font-size: .8rem; font-weight: 700; color: var(--icd-ink-accent); }
.icd-page .icd-other-links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
  margin: 1.3rem 0 0;
  font-size: .84rem;
}
.icd-page .icd-other-links a { color: var(--color-primary); font-weight: 600; }
.icd-page .icd-page-footnote {
  font-size: .78rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 2rem;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1000px) {
  .icd-page .icd-layout { grid-template-columns: minmax(17rem, .9fr) minmax(0, 1.1fr); gap: 1.25rem; }
  .icd-page .icd-map { grid-template-columns: 1fr; gap: .85rem; }
  .icd-page .icd-targets { border-left: 0; border-top: 1px solid var(--color-border); padding: .85rem 0 0; }
  .icd-page .icd-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .icd-page .icd-hero { grid-template-columns: 1fr; gap: 0; margin-bottom: 1.4rem; }
  /* The hero artwork is hidden on phones, as approved. */
  .icd-page .icd-hero-art { display: none; }
  .icd-page .icd-tabs { gap: .6rem; }
  .icd-page .icd-tab { padding: .95rem .8rem; gap: 0; align-items: flex-start; min-height: 6.3rem; }
  .icd-page .icd-direction { display: none; }
  .icd-page .icd-tab strong { font-size: .88rem; line-height: 1.4; }
  .icd-page .icd-tab small { font-size: .72rem; }
  .icd-page .icd-layout { grid-template-columns: 1fr; gap: 1.05rem; }
  .icd-page .icd-editor { padding: 1.2rem 1.05rem; }
  .icd-page .icd-editor h2 { font-size: 1.35rem; }
  .icd-page .icd-result-head h2 { font-size: 1.35rem; }
  .icd-page .icd-record-intro { display: block; }
  .icd-page .icd-record-add { margin-top: .9rem; }
  .icd-page .icd-next-head { display: block; }
  .icd-page .icd-next-head h2 { font-size: 1.55rem; }
  /* Measured at 320, 375 and 640px: these two inline links were 23px and 24px
     tall, under the 44px effective phone target this project requires. The
     text stays the same size; only the hit area grows. */
  .icd-page .icd-view,
  .icd-page .icd-next-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .icd-page .icd-next-all { margin-top: .3rem; }
  .icd-page .icd-reverse-item { grid-template-columns: 1fr; gap: .25rem; }
  .icd-page .icd-empty { padding: 1.3rem 1.1rem; }
  .icd-page .icd-empty h3 { font-size: 1.4rem; }
  .icd-page .icd-chapters { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

@media (max-width: 420px) {
  .icd-page .icd-tabs { grid-template-columns: 1fr; }
  .icd-page .icd-art-grid { grid-template-columns: 1fr; }
  .icd-page .icd-chapters { grid-template-columns: 1fr; }
  .icd-page .icd-mini-map { grid-template-columns: 1fr; text-align: left; }
  .icd-page .icd-mini-arrow { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .icd-page .icd-tab,
  .icd-page .icd-button,
  .icd-page .icd-rec-btn,
  .icd-page .icd-art-card { transition: none; }
  .icd-page .icd-tab:hover,
  .icd-page .icd-button:hover,
  .icd-page .icd-rec-btn:hover,
  .icd-page .icd-art-card:hover { transform: none; }
}
