/* Daisy Chain — component styles (LF-0, PR 0c).
 *
 * HAND-WRITTEN, unlike tokens.css next door, which is generated from
 * tools/design/tokens.json and drift-checked in CI. This file consumes those tokens and
 * never restates a value: no hex, no px scale of its own. If you find yourself typing a
 * colour here, the token is missing and belongs in tokens.json.
 *
 * Adapted from the Phase-D D2 component gallery, whose inline <style> block is split out
 * here so the served surfaces link the generated tokens rather than inlining them.
 *
 * THE INK LADDER. Text ink has three tiers — --ink (primary), --ink-secondary, --ink-muted
 * (quietest) — and ALL THREE are validated to the text bar (4.5:1) on every surface, in both
 * themes. Quieter means lower emphasis, not a lower conformance bar. So pick a tier by how
 * much attention the text should draw, never by how small it is.
 */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  -webkit-font-smoothing: antialiased;
  /* line-height comes from tokens.css's vendored AAA reading floor (SC 1.4.8);
     components override only upward. */

  /* Full-height column so the footer sits at the BOTTOM of a short page rather than
     floating directly under the content with empty page below it. The shell's empty state
     is deliberately sparse, so this is the common case here, not the edge case. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Two-tone focus ring: --focus outside a surface-coloured offset gap, so it reads on
   plain surfaces AND on solid fills. Both pairings are contrast-validated. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

/* ---- skip link: first in document order, visible only on focus ---- */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--sp-3);
  top: var(--sp-3);
  background: var(--surface);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  z-index: 20;
}

/* ---- header / nav / theme ---- */
header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  flex-wrap: wrap;
}
.brand { font-size: var(--fs-18); font-weight: 600; color: var(--ink); text-decoration: none; }
header.top nav { display: flex; gap: var(--sp-3); }
header.top nav a { font-size: var(--fs-14); font-weight: 600; }
.theme { display: flex; gap: var(--sp-2); margin-left: auto; }

/* ---- layout ---- */
main { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-12); }
main:focus-visible { outline-offset: 0; }
section { margin: 0 0 var(--sp-8); scroll-margin-top: 72px; }
h1 { font-size: var(--fs-28); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-18); margin: 0 0 var(--sp-1); }
footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-6);
  text-align: center;
}

/* ---- prose ---- */
.lede { color: var(--ink-secondary); font-size: var(--fs-14); max-width: 70ch; }
.empty { color: var(--ink-secondary); max-width: 60ch; }
.note { color: var(--ink-secondary); font-size: var(--fs-12); margin: 0; }
/* The quietest readable tier, matching the D2 gallery: these are reviewer/spec annotations
   on /styleguide, the lowest-emphasis prose we render. Now that the ladder's bottom rung is
   validated at 4.5:1 rather than 3:1, using it here is the intended design instead of a risk. */
.spec {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  border-top: 1px dashed var(--border);
  padding-top: var(--sp-2);
  margin-top: var(--sp-1);
  margin-bottom: 0;
}
.mono, code { font-family: ui-monospace, Menlo, monospace; }
code { font-size: .9em; background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; }
a { color: var(--accent); }

/* ---- demo containers (styleguide) ---- */
.demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* ---- controls ---- */
.btn, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-comfortable);   /* 44px, SC 2.5.5 */
  padding: 0 var(--sp-4);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.btn { background: var(--accent-solid); color: var(--accent-ink); border: 0; }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--border-strong); }
.tog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);           /* 24px, SC 2.5.8 */
  padding: 4px 10px;
  background: transparent;
  color: var(--ink-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
/* The pressed toggle is not colour-alone: aria-pressed carries it to assistive tech,
   and the accent border plus fill are a second, visual cue. */
.tog[aria-pressed="true"] {
  background: var(--state-tracked-chip-bg);
  color: var(--state-tracked-chip-ink);
  border-color: var(--state-tracked);
}

/* ---- state chips: colour + glyph + text ---- */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target-min);
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 600;
}
.chip svg { width: 16px; height: 16px; flex: none; }
.c-tracked      { background: var(--state-tracked-chip-bg);      color: var(--state-tracked-chip-ink); }
.c-developing   { background: var(--state-developing-chip-bg);   color: var(--state-developing-chip-ink); }
.c-mixed        { background: var(--state-mixed-chip-bg);        color: var(--state-mixed-chip-ink); }
.c-awaiting     { background: var(--state-awaiting-chip-bg);     color: var(--state-awaiting-chip-ink); }
.c-insufficient { background: var(--state-insufficient-chip-bg); color: var(--state-insufficient-chip-ink); }
.c-saved        { background: var(--state-saved-chip-bg);        color: var(--state-saved-chip-ink); }
.c-error        { background: var(--state-error-chip-bg);        color: var(--state-error-chip-ink); }
.c-suggested    { background: var(--state-suggested-chip-bg);    color: var(--state-suggested-chip-ink); }

/* ---- token swatches ---- */
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.swatches li {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(9rem, auto) minmax(9rem, auto);
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-14);
}
.sw-head { color: var(--ink-secondary); font-size: var(--fs-12); font-weight: 600; }
.sw-pair { display: flex; align-items: center; gap: var(--sp-2); }
.sw {
  width: var(--sp-8);
  height: var(--sp-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  flex: none;
}
.sw-name { font-family: ui-monospace, Menlo, monospace; }
.sw-val { color: var(--ink-secondary); }

/* ---- paths list (LF-1, PR 1b) -------------------------------------------------
 * The first learner-facing content. Tokens only — no hex, no private px scale.
 */
.lede { color: var(--ink-secondary); max-width: 60ch; }

.grp { margin: 0 0 var(--sp-6); }
.grp > h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-18); }

/* The group's one-line description: the authored competency phrase, under its heading.
 * `--ink-secondary`, not `--ink-muted` — both clear the 4.5:1 text bar on all four
 * surfaces, but secondary is the tier for supporting prose a reader is expected to read,
 * and muted is the quietest tier. This is the sentence that tells a clinician what the
 * competency IS, so it is not the quietest thing on the page. */
.grp-desc {
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
  color: var(--ink-secondary);
  font-size: var(--fs-14);
}

/* The positional sub-label beside a delta's title (`Contrast` under Acquisition
 * Protocols). Quiet, inline, and NOT a chip: a chip reads as a state, and this is a
 * fragment of an authored path. */
.t-sub { color: var(--ink-secondary); font-size: var(--fs-14); }

.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.topics > li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.t-title { font-weight: 600; }

/* The soft-prerequisite signpost. Chip + glyph + words, so hue is never the signal
 * (D1). It is text, not a control: nothing here gates (DC-0462). */
.t-hint {
  margin: var(--sp-2) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* ---- topic card control + topic surface (LF-1, PR 1c) ---- */
.topics > li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
/* The control sits after the hint in DOM order so the hint it references is already parsed,
 * and so a screen reader meets the signpost before the thing it describes. */
.t-open { margin-top: var(--sp-2); }
.crumb { margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-14); }

/* ─────────────────────────────────────────────────────────────────────────────
   The question card (D2, "Option C") and the reveal — LF-4b-iii.

   SPACIOUS AT THE HEADING, TIGHT IN THE RESPONSES, which is the decision D2
   finalized: the stem lives INSIDE the card on --sp-6 of breathing room, and the
   options are indented --sp-4 under it with ZERO gap between them.

   "Tight" means zero gap BETWEEN ADJACENT CONTROLS, never cramped text. Each
   option is a 44px target (--target-comfortable, SC 2.5.5) with 1.5 line-height
   (SC 1.4.8), so the two rules that look opposed are both satisfied: the D1
   paragraph-spacing floor governs PROSE, and an option list is controls.

   The border is on the WRAPPER and the <fieldset> is borderless — the visual card
   is the wrapper, while the fieldset/legend keep grouping semantics and shed their
   default chrome. Semantics unchanged, no double border.
   ───────────────────────────────────────────────────────────────────────────── */
.q-card-c {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  background: var(--surface-raised);
}
.q-card-c fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.q-card-c legend {
  font-size: var(--fs-16);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--sp-4);
  line-height: var(--lh-body);
}
.opts-v { display: flex; flex-direction: column; gap: 0; margin-left: var(--sp-4); }
.opt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target-comfortable);   /* 44px — SC 2.5.5, and axe's target-size rule */
  line-height: var(--lh-body);
}
/* The LABEL fills the row, so the 44px target is the whole line rather than the
   18px dot. A learner clicking beside the word must hit the control, which is what
   `target-size` measures. */
.opt label { flex: 1; padding: var(--sp-2) 0; cursor: pointer; }
.opt input { width: 18px; height: 18px; flex: none; accent-color: var(--accent-solid); }

.commit { margin-top: var(--sp-4); }
/* `Pick an option first.` — a status, never an error, so it wears ink rather than
   the error token (nothing has gone wrong). */
.prompt { color: var(--ink-secondary); font-size: var(--fs-14); }

.reflection { margin-top: var(--sp-4); }
.reflection .fld { display: block; font-weight: 600; font-size: var(--fs-14); margin-bottom: var(--sp-1); }
.reflection textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  font-size: var(--fs-14);
  background: var(--surface-raised);
  color: var(--ink);
}
.reflection .help { font-size: var(--fs-12); color: var(--ink-secondary); margin-top: var(--sp-1); }

/* The reveal. Correctness is carried by GLYPH + WORD in `.flag`; the background is
   redundant reinforcement, never the signal (D1 rule 2), which is why `.flagged`
   sets no colour of its own and the words do the work. */
.reveal { margin: 0 0 var(--sp-6); }
.reveal .vh {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--state-saved-chip-ink);
  background: var(--state-saved-chip-bg);
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-block;
  min-height: var(--target-min);
}
.item-options.revealed { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.item-options.revealed li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--target-comfortable);
  line-height: var(--lh-body);
}
.reveal .flag { font-size: var(--fs-12); font-weight: 700; color: var(--ink-secondary); }
.reveal .chosen { margin-top: var(--sp-2); }

/* ─────────────────────────────────────────────────────────────────────────────
   `Your activity` — the honest log (D3 §2.8).

   TABULAR NUMERALS ON THE TIMESTAMP are the whole reason this has a stylesheet
   entry at all: they make the times line up as a column, which is what turns a
   list of rows into something scannable. Without them proportional digits ragged
   the left edge of every row and the log reads as prose.

   Nothing here encodes a state by colour. `Seen` and `Responded` are distinguished
   by their WORDS (DC-0577) — the weight below is emphasis, not meaning, and the
   page is fully legible in monochrome.
   ───────────────────────────────────────────────────────────────────────────── */
.activity { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-direction: column; }
.act {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  line-height: var(--lh-body);
}
.act:first-child { border-top: 0; }
.act time {
  color: var(--ink-secondary);
  font-size: var(--fs-14);
  font-variant-numeric: tabular-nums;   /* the column alignment this block exists for */
  flex: none;
  min-width: 12ch;
}
.act .kind { font-weight: 600; font-size: var(--fs-14); }
.act .answer { color: var(--ink-secondary); }
.act .rationale-mark { color: var(--ink-muted); font-size: var(--fs-12); }