/*
 * /how-signals-work - the Signals explainer.
 *
 * A page-scoped layer. It adds the components this one route needs and
 * overrides nothing: every selector below is prefixed .hsw-, so the frozen
 * .ref-* register in reference.css keeps its own rules untouched and the
 * documented "reference.css loads last" contract stays meaningful.
 *
 * DARK MODE. There is not one colour literal and not one prefers-color-scheme
 * rule in this file, and there must never be either. Every colour is a
 * semantic role from tokens.css that is already mapped in both :root (light)
 * and :root[data-theme="dark"]. Dark is selected by the data-theme attribute
 * written by /js/theme-init.js.
 *
 * CONTRAST. No rule here sets opacity on a text element. Muted text uses the
 * --theme-ink-muted role, which is mapped for contrast in both themes, so the
 * rendered colour is the authored colour and the gate measures what a reader
 * actually sees.
 */

/* ---- Opening --------------------------------------------------------------
 * The principle sits between the masthead and the status block, set in the
 * display serif at reading size. It is the page's thesis, so it is given a
 * line of its own rather than being folded into the standfirst.
 */
.hsw-principle {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  max-width: 34ch;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  color: var(--theme-ink-primary);
}

/* ---- The status block -----------------------------------------------------
 * Three rows, opened on a heavy rule, in the same register as .ref-register.
 * It is deliberately the second thing on the page: a reader learns what is and
 * is not running before any explanation of how it would work.
 */
.hsw-status {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}

.hsw-status-h {
  margin: 0 0 0.9rem;
}

.hsw-status-list {
  margin: 0;
  border-top: 2px solid var(--theme-rule-strong);
}

.hsw-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1.25rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-status-row:last-child {
  border-bottom: 1px solid var(--theme-rule-standard);
}

.hsw-status-term {
  grid-column: 1;
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-primary);
}

.hsw-status-desc {
  grid-column: 1;
  margin: 0;
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

.hsw-status-state {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  align-self: start;
}

.hsw-status-note {
  margin: 1.1rem 0 0;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--theme-ink-muted);
}

.hsw-status-note a {
  color: var(--theme-ink-link);
}

/* ---- Jump links -----------------------------------------------------------
 * Two in-page anchors, not buttons. Both destinations are sections of this
 * page, so neither can become a dead control.
 */
.hsw-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hsw-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  text-decoration: none;
}

.hsw-jump-primary {
  color: var(--theme-ink-primary);
}

.hsw-jump-secondary {
  color: var(--theme-ink-link);
}

.hsw-jump a:hover {
  background: var(--theme-surface-hover);
}

@media (pointer: coarse) {
  .hsw-jump a { min-height: 48px; }
}

/* ---- The illustrative flag ------------------------------------------------
 * Every specimen on this page carries one. It is oxide, the role tokens.css
 * reserves for object identity, because that is exactly what it marks: which
 * object you are looking at, and that it is not a real one. It sits inside the
 * specimen so it survives a screenshot of the specimen alone.
 */
.hsw-flag {
  display: block;
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-object-identity-ink);
}

.hsw-flag-sub {
  display: block;
  margin: 0.4rem 0 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--theme-ink-muted);
}

/* ---- The opening specimen: one evaluation, four outcomes ------------------ */

.hsw-specimen {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 1.25rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-raised);
}

.hsw-specimen-cap {
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hsw-outcome {
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-outcome-object {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.hsw-outcome-name {
  color: var(--theme-object-identity-ink);
}

/*
 * The determination is a word, never a figure, so it is set in the reading
 * serif and never given tabular numerals. Colour is a second signal on top of
 * the word: the four states stay distinguishable in greyscale.
 */
.hsw-outcome-state {
  margin: 0.5rem 0 0;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  font-variant-numeric: normal;
  color: var(--theme-ink-primary);
}

.hsw-outcome-state[data-hsw-state="new"] { color: var(--theme-status-positive-ink); }
.hsw-outcome-state[data-hsw-state="continuing"] { color: var(--theme-ink-primary); }
.hsw-outcome-state[data-hsw-state="no-new"] { color: var(--theme-ink-secondary); }
.hsw-outcome-state[data-hsw-state="unavailable"] { color: var(--theme-status-warning-ink); }

.hsw-outcome-note {
  margin: 0.55rem 0 0;
  max-width: 40ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

@media (min-width: 60rem) {
  .hsw-outcomes {
    gap: 0 2.5rem;
  }
  /*
   * One row on a wide screen: the caption rule above already separates the
   * specimen, so no cell carries an underline. Clearing only the last two is
   * correct at two columns and leaves two dangling rules at four.
   */
  .hsw-outcome {
    border-bottom: 0;
    padding-bottom: 0.25rem;
  }
}

/* The key line. A single sentence given the weight of a pull quote. */
.hsw-keyline {
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  max-width: 30ch;
  padding-left: 1.1rem;
  border-left: 2px solid var(--theme-rule-strong);
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  color: var(--theme-ink-primary);
}

/* ---- The centrepiece: the specimen statement and its stages -------------- */

.hsw-statement-block {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 1.25rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-raised);
}

.hsw-statement {
  margin: 0.9rem 0 0;
  padding: 0;
  border: 0;
}

/*
 * The public sentence, set as the Briefing sets a headline: a fact at reading
 * rhythm, capped so it never runs the full spine.
 */
.hsw-statement p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: pretty;
  color: var(--theme-ink-primary);
}

.hsw-statement-meta {
  margin: 1rem 0 0;
  max-width: 62ch;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--theme-ink-muted);
}

/*
 * The stage spine. Five native <details>, numbered, hung off one vertical
 * rule. Native disclosure means the whole explanation is reachable with no
 * JavaScript and with the keyboard alone; the optional script only adds a
 * control to open them all at once.
 */
.hsw-stages {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  /*
   * The spine is a reading column, not a full-spine register. Left unbounded it
   * inherits the 1328px page measure, which strands the phase label a thousand
   * pixels from the title it belongs to and leaves every binding value floating
   * in empty space.
   */
  max-width: 58rem;
  padding: 0 0 0 clamp(1rem, 2.5vw, 1.75rem);
  border-left: 1px solid var(--theme-rule-standard);
  list-style: none;
  counter-reset: none;
}

.hsw-stage + .hsw-stage {
  margin-top: 0;
}

.hsw-stage-d {
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-stage:last-child .hsw-stage-d {
  border-bottom: 1px solid var(--theme-rule-standard);
}

.hsw-stage-summary {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  min-height: 44px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}

.hsw-stage-summary::-webkit-details-marker { display: none; }

.hsw-stage-num {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.08em;
  color: var(--theme-ink-muted);
}

.hsw-stage-title {
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--theme-ink-primary);
}

/* The pipeline phase, pushed right. It repeats across stages on purpose: two
   stages belong to eligibility, and the reader should be able to see that. */
.hsw-stage-phase {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.hsw-stage-phase::after {
  content: ' +';
  color: var(--theme-ink-secondary);
}

.hsw-stage-d[open] .hsw-stage-phase::after {
  content: ' \2212';
}

.hsw-stage-body {
  padding: 0 0 1.5rem;
}

@media (min-width: 60rem) {
  .hsw-stage-body {
    padding-left: 3.25rem;
  }
}

.hsw-prose {
  margin: 0 0 0.9rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--theme-ink-primary);
  text-wrap: pretty;
}

.hsw-prose:last-child { margin-bottom: 0; }

.hsw-inline-label {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--theme-ink-primary);
}

/* The binding list: what a real Signal would carry. Every value on this page
   reads "Illustrative", never a plausible-looking hash or identifier. */
.hsw-bind {
  margin: 1.1rem 0 0;
  max-width: 46rem;
  border-top: 1px solid var(--theme-rule-subtle);
}

.hsw-bind-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.2rem 1.25rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-bind-row dt {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.hsw-bind-row dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

@media (max-width: 40rem) {
  .hsw-bind-row { grid-template-columns: minmax(0, 1fr); }
}

/* The fixed-order note that closes the centrepiece. */
.hsw-order {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin: 1.5rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--theme-rule-subtle);
}

.hsw-order-label {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-primary);
}

.hsw-order-text {
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

/* ---- The unavailable specimen -------------------------------------------- */

.hsw-gap-figure {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 1.25rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-raised);
}

.hsw-gap {
  margin: 1rem 0 0;
  border-top: 2px solid var(--theme-rule-strong);
}

.hsw-gap-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-gap-row--result {
  border-bottom: 0;
  border-top: 1px solid var(--theme-rule-standard);
}

.hsw-gap-row dt {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

/* A measured figure is tabular. An absent one is a word, so it drops out of
   the figure register entirely and can never be scanned as a number. */
.hsw-gap-value {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--theme-ink-primary);
}

.hsw-gap-value--absent {
  font-variant-numeric: normal;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-status-warning-ink);
}

.hsw-gap-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

@media (max-width: 46rem) {
  .hsw-gap-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

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

.hsw-disclose {
  margin-top: 1.75rem;
}

/*
 * The shared disclosure sets its affordance as content: ' +' on a summary that
 * is display: flex, and a flex item has its leading whitespace stripped, so the
 * marker butts against the label. Restored as a gap here rather than by editing
 * the shared sheet, which this page must not change.
 */
.hsw-disclose > summary {
  gap: 0.4rem;
}

.hsw-disclose-body {
  padding: 0.5rem 0 1.25rem;
}

.hsw-dimensions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem 2.5rem;
  margin: 1.25rem 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--theme-rule-subtle);
}

.hsw-dimension .hsw-prose {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}

/* ---- Fairness: the paired comparison ------------------------------------- */

.hsw-compare {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 1.25rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-raised);
}

.hsw-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 3rem;
  margin: 1.25rem 0 0;
}

.hsw-compare-case {
  padding-top: 1rem;
  border-top: 2px solid var(--theme-rule-strong);
}

.hsw-compare-name {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.hsw-compare-fig {
  margin: 0.85rem 0 0;
}

.hsw-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-compare-row dt {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.hsw-compare-row dd {
  margin: 0;
}

.hsw-num {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.98rem;
  color: var(--theme-ink-primary);
}

/* The relative figure is the one the section is about, so it is the one given
   display size. Both cases use the same treatment: neither is favoured. */
.hsw-compare-row--lead {
  border-bottom: 0;
  padding-top: 0.7rem;
}

.hsw-compare-row--lead .hsw-num {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hsw-compare-read {
  margin: 0.9rem 0 0;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

.hsw-compare-verdict {
  margin: 1.5rem 0 0;
  max-width: 66ch;
  padding-top: 1rem;
  border-top: 1px solid var(--theme-rule-standard);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--theme-ink-primary);
}

/* ---- Readiness ------------------------------------------------------------ */

.hsw-ready-scroll {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.hsw-ready {
  min-width: 44rem;
}

.hsw-ready caption {
  text-align: left;
}

/*
 * A state word is never a figure, so the numeric register is switched off.
 *
 * These cells are set in sentence case rather than the usual mono uppercase.
 * Eleven of the twenty cells say the same nineteen-character phrase, and in
 * caps that column becomes a wall a reader skips. The honest repetition is the
 * point of the table, so it stays; what changes is that it stays legible.
 *
 * Colour is a second signal on top of the word, never the first: present,
 * partial and absent are already distinguishable in greyscale from the words
 * themselves, and the table reads correctly to someone who cannot separate the
 * hues.
 */
.hsw-ready tbody td {
  font-variant-numeric: normal;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--theme-ink-secondary);
}

.hsw-ready tbody td.hsw-cell-present {
  color: var(--theme-ink-primary);
}

.hsw-ready tbody td.hsw-cell-partial {
  color: var(--theme-status-warning-ink);
}

.hsw-ready tbody td.hsw-cell-absent {
  color: var(--theme-ink-muted);
}

.hsw-ready tbody th {
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 500;
  font-size: 1rem;
  color: var(--theme-ink-primary);
}

.hsw-milestones {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}

.hsw-milestones-label {
  margin: 0 0 0.9rem;
}

.hsw-milestone-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--theme-rule-strong);
}

.hsw-milestone-list li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-milestone-n {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.08em;
  color: var(--theme-ink-muted);
}

.hsw-milestone-t {
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--theme-ink-primary);
}

/* ---- Status flags in prose ------------------------------------------------ */

.hsw-draft-flag,
.hsw-caveat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0.9rem;
  margin: 1.4rem 0 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-draft-flag span:last-child,
.hsw-caveat span:last-child {
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

/* ---- Corrections timeline -------------------------------------------------
 * Four steps on one rule. Horizontal on a wide screen, vertical on a narrow
 * one, from the same DOM order: reading order and keyboard order never change.
 */
.hsw-timeline-figure {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 1.25rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-raised);
}

.hsw-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--theme-rule-strong);
}

.hsw-timeline li {
  padding: 1rem 1.25rem 1.1rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-timeline-label {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-primary);
}

.hsw-timeline-body {
  margin: 0.5rem 0 0;
  max-width: 34ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

@media (min-width: 60rem) {
  .hsw-timeline li {
    border-bottom: 0;
    border-right: 1px solid var(--theme-rule-subtle);
    padding-left: 1.25rem;
  }
  .hsw-timeline li:first-child { padding-left: 0; }
  .hsw-timeline li:last-child { border-right: 0; }
}

/* ---- One correction to a shared primitive, scoped to this page ------------
 * reference.css paints .ref-prov-sep with the disabled ink role, which renders
 * at 2.800:1 on paper: below AA. That sheet defines the .ref-* register but no
 * HTML had ever used it, so this page is the first surface to render the
 * separator and the first to measure it.
 *
 * The separator is decorative and aria-hidden, so it is arguably exempt. This
 * page does not ship sub-AA text on that argument: the character is still read
 * by someone who does not use a screen reader, and the muted role is the one
 * tokens.css maps for contrast in both themes while staying subordinate.
 *
 * Scoped under .hsw-page rather than fixed in reference.css, because a shared
 * change belongs in its own reviewed slice. Reported as a latent defect for
 * every future .ref-prov user.
 */
.hsw-page .ref-prov-sep {
  color: var(--theme-ink-muted);
}


/* ---- The governance chain -------------------------------------------------
 * Three tiers with the verb that binds them. Set in type rather than drawn,
 * because the relationship is a sentence and reads as one: the Constitution
 * governs a methodology version, which evaluates a determination.
 *
 * The verbs are real text, not aria-hidden decoration. They carry the meaning
 * of the diagram, so a reader who cannot see the layout still gets the claim.
 */
.hsw-chain {
  display: grid;
  gap: 0;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  max-width: 58rem;
  border-top: 2px solid var(--theme-rule-strong);
}

.hsw-chain-tier {
  padding: 1.15rem 0 1.25rem;
}

.hsw-chain-label {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.hsw-chain-name {
  margin: 0.45rem 0 0;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--theme-ink-primary);
}

.hsw-chain-note {
  margin: 0.5rem 0 0;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

/*
 * The verb sits on its own hairline between two tiers. It is the join, so it is
 * set apart from both rather than attached to either.
 */
.hsw-chain-verb {
  margin: 0;
  padding: 0.55rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  border-bottom: 1px solid var(--theme-rule-subtle);
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-object-identity-ink);
}

.hsw-chain-read {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--theme-rule-standard);
  max-width: 62rem;
}

@media (min-width: 60rem) {
  .hsw-chain-tier {
    display: grid;
    grid-template-columns: var(--layout-sidehead, 15.5rem) minmax(0, 1fr);
    column-gap: var(--layout-sidehead-gap, 48px);
    align-items: start;
  }
  .hsw-chain-label { grid-column: 1; padding-top: 5px; }
  .hsw-chain-name,
  .hsw-chain-note { grid-column: 2; }
  .hsw-chain-name { margin-top: 0; }
  .hsw-chain-verb {
    padding-left: calc(var(--layout-sidehead, 15.5rem) + var(--layout-sidehead-gap, 48px));
  }
}

/* ---- The version register ------------------------------------------------- */

.hsw-ver-scroll {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.hsw-ver {
  min-width: 52rem;
}

.hsw-ver caption {
  text-align: left;
}

/*
 * The layer is a side-note on the version, not a second name for it. Set above
 * the version in the mono register so the register can be scanned by layer
 * without a sixth column.
 */
.hsw-ver-layer {
  display: block;
  margin: 0 0 0.2rem;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.hsw-ver tbody th {
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--theme-ink-primary);
}

/* Status words are words, never figures. */
.hsw-ver tbody td {
  font-variant-numeric: normal;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  color: var(--theme-ink-secondary);
}

.hsw-ver tbody td.hsw-cell-present { color: var(--theme-ink-primary); }
.hsw-ver tbody td.hsw-cell-partial { color: var(--theme-status-warning-ink); }
.hsw-ver tbody td.hsw-cell-absent { color: var(--theme-ink-muted); }

/* The change summary is a sentence, so it leaves the mono register entirely. */
.hsw-ver tbody td.hsw-cell-prose {
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: var(--theme-ink-secondary);
}

.hsw-ver tbody td.hsw-cell-prose a {
  color: var(--theme-ink-link);
}

/* ---- The empty archive ----------------------------------------------------
 * The most important state this page has to render honestly. It is given the
 * weight of a real answer rather than the greyed-out apology an empty list
 * usually gets, because "nothing has been issued" IS the current answer.
 */
.hsw-empty {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: clamp(2rem, 5vw, 3.25rem) 1.25rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-raised);
  text-align: center;
}

.hsw-empty-state {
  margin: 0;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--theme-ink-primary);
}

.hsw-empty-note {
  margin: 1rem auto 0;
  max-width: 52ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

.hsw-bind--wide {
  max-width: 58rem;
}

/* ---- The revision chain ---------------------------------------------------
 * Five steps read downwards: the Signal, the determination it was given, the
 * status it carries now, the history of that status, and the underlying event.
 *
 * The status vocabulary is NOT defined by this page. It belongs to the separate
 * revision system, and the one status word rendered here is inside a specimen
 * that is labelled illustrative. Nothing in this block is a live status, a
 * governed status name, or a link to a route that does not exist.
 */
.hsw-revision {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 1.25rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-raised);
}

.hsw-revision-chain {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--theme-rule-strong);
  max-width: 58rem;
}

.hsw-rev-step {
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.hsw-rev-step:last-child {
  border-bottom: 0;
}

.hsw-rev-label {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.hsw-rev-body {
  margin: 0.45rem 0 0;
  max-width: 58ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--theme-ink-primary);
}

/* The original statement is a quotation of published wording, so it is set in
   the reading serif and never restyled by anything that happens to it later. */
.hsw-rev-body--quote {
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.014em;
  max-width: 34ch;
}

/* A status is a word, never a figure, and never a colour on its own. */
.hsw-rev-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  font-variant-numeric: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-status-warning-ink);
}

.hsw-rev-meta {
  margin: 0.5rem 0 0;
  max-width: 58ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

@media (min-width: 60rem) {
  .hsw-rev-step {
    display: grid;
    grid-template-columns: var(--layout-sidehead, 15.5rem) minmax(0, 1fr);
    column-gap: var(--layout-sidehead-gap, 48px);
    align-items: start;
  }
  .hsw-rev-label { grid-column: 1; padding-top: 4px; }
  .hsw-rev-body,
  .hsw-rev-meta { grid-column: 2; }
  .hsw-rev-body { margin-top: 0; }
}

/* ---- The independence line ------------------------------------------------ */

.hsw-independence {
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
  max-width: 34ch;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--theme-ink-primary);
}

/* ---- The optional stage control ------------------------------------------
 * Rendered by /js/how-signals-work.js only. With no JavaScript it never
 * appears, and nothing is lost: each stage still opens on its own.
 */
.hsw-stage-control {
  display: flex;
  justify-content: flex-end;
  /* Aligned to the spine it controls, not to the full page measure. */
  max-width: 58rem;
  margin: 1rem 0 0;
}

.hsw-stage-control button {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-link);
}

.hsw-stage-control button:hover {
  background: var(--theme-surface-hover);
}

.hsw-page button:focus-visible {
  outline: 2px solid var(--theme-rule-focus, var(--theme-ink-link));
  outline-offset: 2px;
}

/* ---- Mobile recomposition -------------------------------------------------
 * The page recomposes rather than shrinking. Every grid collapses to one
 * column from the same DOM order, the stage spine keeps its rule, and no
 * container is allowed to widen the document.
 */
@media (max-width: 46rem) {
  .hsw-status-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .hsw-status-state {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.5rem;
  }
  .hsw-stage-summary {
    grid-template-columns: 2rem minmax(0, 1fr);
    row-gap: 0.3rem;
  }
  .hsw-stage-phase {
    grid-column: 2;
  }
  .hsw-jump a {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 34rem) {
  .hsw-specimen,
  .hsw-statement-block,
  .hsw-gap-figure,
  .hsw-compare,
  .hsw-timeline-figure {
    padding: 1rem 0.9rem;
  }
}

/* ---- Reduced motion -------------------------------------------------------
 * There is no motion on this page to reduce: no transition, no transform and
 * no animation is declared anywhere in this file. The block is kept so that
 * any later addition inherits the correct default rather than shipping motion
 * by omission.
 */
@media (prefers-reduced-motion: reduce) {
  .hsw-page *,
  .hsw-page *::before,
  .hsw-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}