/* ==========================================================================
   Shade & Steam — design system
   --------------------------------------------------------------------------
   Principle: the site is a record, not a magazine. Provenance is the design.
   Every fact carries the document it came from, its edition and its date, as
   structure rather than as a footnote.

   Palette is drawn from the materials of the subject — anodised aluminium,
   powder coat, graphite — not from a warmth preset. Two type registers:
   a serif for argument, a grotesque for data. The register itself tells the
   reader which kind of document they are in.
   ========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */

/* --- 1. tokens -----------------------------------------------------------
   Identity: oxide on aluminium. The oxide is structural — it carries brand
   architecture only: the wordmark, section rules, focus rings, key headings.
   It never appears in visual proximity to a semantic state, which is how the
   oxide/amber closeness is resolved: by role, not by hue.
   ------------------------------------------------------------------------- */

:root {
  /* surface — anodised aluminium, faint green cast, not a warm neutral */
  --paper:        #EDEEEA;
  --paper-raised: #FAFAF7;
  --paper-sunk:   #E9EBE5;
  --paper-deep:   #191A16;

  /* ink */
  --ink:    #191A16;
  --ink-2:  #4E5049;
  --ink-3:  #676A63;   /* the provenance register — AA at 10–11px on all three surfaces */
  --ink-on-deep:   #E6E7E3;
  --ink-on-deep-2: #9BA09A;

  /* rules */
  --rule:      #D0D3CB;
  --rule-fine: #E3E5DF;
  --rule-deep: #343830;

  /* brand — structural only, never a state */
  --brand:      #5E3A24;
  --brand-ink:  #472B1A;
  --brand-wash: #EDE8E3;

  /* semantic — states only, never identity */
  --verified:  #1D5E3F;
  --check:     #845E07;
  --warning:   #9A4A1C;
  --stop:      #7A1F1F;
  --unknown:   #656B6C;
  --verified-wash: #E9EFEB;
  --check-wash:    #F2EDE0;
  --warning-wash:  #F3EAE3;
  --stop-wash:     #F1E7E7;

  /* type */
  --serif: Fraunces, Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --t-12: 0.75rem;    --t-13: 0.8125rem;  --t-15: 0.9375rem;
  --t-17: 1.0625rem;  --t-21: 1.3125rem;  --t-27: 1.6875rem;
  --t-34: 2.125rem;   --t-44: 2.75rem;    --t-58: 3.625rem;
  --t-11: 0.6875rem;  --t-10: 0.625rem;

  /* space — 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5.5rem;  --s-11: 7rem;

  /* grid */
  --canvas: 82.5rem;
  --gutter: 1.5rem;
  --margin: 1.25rem;
  --prose: 36rem;
}

@media (min-width: 60rem) { :root { --margin: 4rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-17);
  line-height: 1.62;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

/* --- 2. grid ------------------------------------------------------------- */

.canvas {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
@media (min-width: 48rem)  { .grid { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 60rem)  { .grid { grid-template-columns: repeat(12, 1fr); } }

/* placement helpers, desktop only — mobile stacks by default */
@media (min-width: 60rem) {
  /* Annotated records reserve columns 1-3 for the source rail. */
  .grid--annotated .col-prose  { grid-column: 4 / span 6; }
  .grid--annotated .col-margin { grid-column: 1 / span 3; }
  .grid--annotated .col-wide   { grid-column: 4 / span 9; }

  /* Everywhere else the measure starts at the left margin, where the eye
     expects it, and long-form headings run to a controlled maximum. */
  .col-prose  { grid-column: 1 / span 7; }
  .col-margin { grid-column: 9 / span 4; }
  .col-wide   { grid-column: 1 / span 9; }
  .col-full   { grid-column: 1 / span 12; }
  .col-half   { grid-column: span 6; }
}

/* A display line should break by design, not by viewport width. */
.display, .title { max-width: 18ch; }
.title { max-width: 22ch; }
.standfirst { max-width: var(--prose); }

.prose { max-width: var(--prose); }

/* --- 3. type ------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }

.display {
  font-family: var(--serif);
  font-size: clamp(var(--t-34), 1.6rem + 3.4vw, var(--t-58));
  line-height: 1.04; letter-spacing: -0.032em; font-weight: 300;
  max-width: 17ch;
}
.title {
  font-family: var(--serif);
  font-size: clamp(var(--t-27), 1.4rem + 2vw, var(--t-44));
  line-height: 1.1; letter-spacing: -0.026em; font-weight: 300;
  max-width: 22ch;
}
.heading   { font-family: var(--sans); font-size: var(--t-21); line-height: 1.25; }
.subheading{ font-family: var(--sans); font-size: var(--t-17); line-height: 1.3; }

.label {
  font-family: var(--mono); font-size: var(--t-11); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
}

.standfirst { font-size: var(--t-21); line-height: 1.48; color: var(--ink-2); font-weight: 400; }
.meta  { font-family: var(--sans); font-size: var(--t-13); line-height: 1.5; color: var(--ink-3); font-feature-settings: "tnum" 1; }
.num   { font-family: var(--sans); font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -0.01em; }

.prose p { margin: 0 0 1.1em; }
.prose h2 { font-family: var(--sans); font-size: var(--t-21); margin: var(--s-8) 0 var(--s-3); }
.prose h3 { font-family: var(--sans); font-size: var(--t-17); margin: var(--s-6) 0 var(--s-2); }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.1rem; }
.prose li { margin-bottom: 0.45em; }
.prose > *:first-child { margin-top: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: currentColor; }
.prose a { text-decoration-color: var(--ink-3); }

/* --- 4. masthead --------------------------------------------------------- */

.masthead { border-bottom: 1px solid var(--rule); }
.masthead .canvas {
  display: flex; align-items: center; gap: var(--s-5);
  padding-block: var(--s-4); flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif); font-weight: 400; font-size: var(--t-21);
  letter-spacing: -0.03em; line-height: 1; text-decoration: none; margin-right: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
.wordmark i { font-style: normal; color: var(--brand); }
.wordmark small { font-family: var(--sans); font-weight: 400; font-size: var(--t-13); color: var(--ink-3); letter-spacing: 0; margin-left: 0.5rem; }
.masthead nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.masthead nav a {
  font-family: var(--sans); font-size: var(--t-13); color: var(--ink-2);
  text-decoration: none; padding-block: 0.2rem; border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.masthead nav a[aria-current] { color: var(--ink); border-bottom-color: var(--verified); }

/* --- 5. record head — the site's one bold device -------------------------- */

.record {
  border-top: 1.5px solid var(--brand);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  align-items: baseline;
}
.record dl { display: contents; margin: 0; }
.record dt {
  font-family: var(--sans); font-size: var(--t-12); font-weight: 600;
  letter-spacing: 0.085em; text-transform: uppercase; color: var(--ink-3);
}
.record dd {
  margin: 0 var(--s-5) 0 0;
  font-family: var(--sans); font-size: var(--t-13); color: var(--ink);
  font-feature-settings: "tnum" 1;
}

/* --- 6. verification stamp ----------------------------------------------- */

.stamp {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--sans); font-size: var(--t-12); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.22rem 0.5rem 0.22rem 0.42rem;
  border: 1px solid currentColor; border-left-width: 3px;
}
.stamp::before { content: ""; width: 0.4rem; height: 0.4rem; }
.stamp--verified { color: var(--verified); }
.stamp--verified::before { background: currentColor; border-radius: 50%; }
.stamp--check    { color: var(--check); }
.stamp--check::before { background: currentColor; transform: rotate(45deg); }
.stamp--warning  { color: var(--warning); }
.stamp--warning::before { background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.stamp--stop     { color: var(--stop); }
.stamp--stop::before { background: currentColor; }

/* --- 7. state note ------------------------------------------------------- */

.state {
  border-left: 2px solid var(--ink-3); background: var(--paper-sunk);
  padding: var(--s-4) var(--s-5); margin: var(--s-6) 0;
  font-size: var(--t-15); line-height: 1.58;
}
.state > *:last-child { margin-bottom: 0; }
.state-head {
  font-family: var(--sans); font-size: var(--t-12); font-weight: 600;
  letter-spacing: 0.085em; text-transform: uppercase;
  display: block; margin-bottom: var(--s-2);
}
.state--verified { border-left-color: var(--verified); background: var(--verified-wash); }
.state--verified .state-head { color: var(--verified); }
.state--check    { border-left-color: var(--check); background: var(--check-wash); }
.state--check .state-head { color: var(--check); }
.state--warning  { border-left-color: var(--warning); background: var(--warning-wash); }
.state--warning .state-head { color: var(--warning); }
.state--stop     { border-left-color: var(--stop); background: var(--stop-wash); }
.state--stop .state-head { color: var(--stop); }

/* --- 8. plate — two opposing authorities --------------------------------- */

.plates { display: grid; gap: var(--s-4); margin: var(--s-7) 0; }
@media (min-width: 48rem) { .plates { grid-template-columns: 1fr 1fr; } }

.plate {
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-top: 2px solid var(--ink); padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex; flex-direction: column;
}
.plate--a { border-top-color: var(--verified); }
.plate--b { border-top-color: var(--check); }
.plate-head { font-family: var(--sans); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; margin: 0 0 var(--s-3); }
.plate--a .plate-head { color: var(--verified); }
.plate--b .plate-head { color: var(--check); }
.plate-body { font-size: var(--t-15); line-height: 1.5; margin: 0 0 var(--s-4); }
.plate-cite {
  font-family: var(--sans); font-size: var(--t-12); line-height: 1.45;
  color: var(--ink-3); margin: auto 0 0; padding-top: var(--s-3);
  border-top: 1px solid var(--rule-fine);
}

/* --- 9. data table ------------------------------------------------------- */

.data-wrap { margin: var(--s-6) 0; }
table.data { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--t-13); font-feature-settings: "tnum" 1; }
table.data caption { text-align: left; font-family: var(--sans); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--ink-3); padding-bottom: var(--s-3); }
table.data th, table.data td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule-fine); vertical-align: top; }
table.data thead th { font-size: var(--t-12); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.data tbody th { font-weight: 600; color: var(--ink); }
table.data td.n { text-align: right; padding-right: var(--s-5); white-space: nowrap; }
table.data tbody tr:hover { background: var(--paper-raised); }

/* --- 10. source block ---------------------------------------------------- */

.sources { border-top: 1px solid var(--rule); margin-top: var(--s-9); padding-top: var(--s-5); }
.sources ol { list-style: none; margin: 0; padding: 0; counter-reset: src; }
.sources li {
  counter-increment: src; display: grid; grid-template-columns: 2rem 1fr;
  gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-fine);
  font-family: var(--sans); font-size: var(--t-13); line-height: 1.5; color: var(--ink-2);
}
.sources li::before { content: counter(src, decimal-leading-zero); font-weight: 600; color: var(--ink-3); font-feature-settings: "tnum" 1; }
.sources .src-meta { display: block; color: var(--ink-3); font-size: var(--t-12); margin-top: 0.2rem; }

/* --- 11. margin note ----------------------------------------------------- */

.note {
  font-family: var(--sans); font-size: var(--t-13); line-height: 1.5;
  color: var(--ink-3); border-left: 2px solid var(--rule);
  padding-left: var(--s-3); margin: var(--s-5) 0;
}
@media (min-width: 60rem) {
  .col-margin .note { border-left: 0; border-right: 2px solid var(--rule); padding-left: 0; padding-right: var(--s-3); text-align: right; margin-top: 0; }
}

/* --- 12. entry (index listings) ------------------------------------------ */

.entry { border-top: 1px solid var(--rule); padding: var(--s-5) 0 var(--s-6); }
.entry:first-of-type { border-top: 1.5px solid var(--brand); }
.entry .label { display: block; margin-bottom: var(--s-2); color: var(--verified); }
.entry h2, .entry h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-27); line-height: 1.15; letter-spacing: -0.024em; margin: 0 0 var(--s-2); }
.entry h2 a, .entry h3 a { text-decoration: none; }
.entry h2 a:hover, .entry h3 a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.entry p { margin: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--t-15); line-height: 1.55; max-width: 34rem; }
.entry .meta { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }

/* --- 13. stat ------------------------------------------------------------ */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-5); margin: var(--s-6) 0; }
.stat { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.stat-n { display: block; font-family: var(--sans); font-size: var(--t-34); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-feature-settings: "tnum" 1; }
.stat-l { display: block; font-family: var(--sans); font-size: var(--t-12); color: var(--ink-3); margin-top: var(--s-2); line-height: 1.4; }

/* --- 14. controls -------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label { font-family: var(--sans); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--ink-3); }
select, input[type="text"], input[type="number"] {
  font-family: var(--sans); font-size: var(--t-15); color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--rule);
  padding: 0.55rem 0.7rem; width: 100%;
  border-radius: 0; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 1.05rem) 1.1rem, calc(100% - 0.75rem) 1.1rem; background-size: 0.3rem 0.3rem; background-repeat: no-repeat; padding-right: 2rem; }
select:focus, input:focus { outline: 2px solid var(--verified); outline-offset: 1px; }

.btn {
  font-family: var(--sans); font-size: var(--t-13); font-weight: 600;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  padding: 0.55rem 1rem; cursor: pointer; border-radius: 0; text-decoration: none;
  display: inline-block;
}
.btn:hover { background: var(--paper-deep); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* --- 15. footer ---------------------------------------------------------- */

footer.site { background: var(--paper-deep); color: var(--ink-on-deep); margin-top: var(--s-11); padding-block: var(--s-8) var(--s-7); }
footer.site a { color: var(--ink-on-deep); text-decoration-color: var(--rule-deep); }
footer.site a:hover { text-decoration-color: currentColor; }
footer.site .label { color: var(--ink-on-deep-2); }
footer.site nav { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
footer.site nav a { font-family: var(--sans); font-size: var(--t-13); text-decoration: none; }
footer.site nav a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
footer.site p { font-family: var(--sans); font-size: var(--t-13); line-height: 1.55; color: var(--ink-on-deep-2); max-width: 32rem; margin: 0 0 var(--s-3); }
.footer-cols { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); }
@media (min-width: 48rem) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.colophon { border-top: 1px solid var(--rule-deep); padding-top: var(--s-4); }

/* --- 16. a11y ------------------------------------------------------------ */

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--margin); top: var(--s-3); z-index: 20; background: var(--brand); color: var(--paper); padding: 0.6rem 0.9rem; font-family: var(--sans); font-size: var(--t-13); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- 17. section rhythm -------------------------------------------------- */

.section { padding-block: var(--s-9); }
.section + .section { padding-top: 0; }
.section-head { display: flex; align-items: baseline; gap: var(--s-4); border-bottom: 1px solid var(--rule); padding-bottom: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.section-head h2 { font-family: var(--sans); font-size: var(--t-17); margin: 0; }
.section-head .meta { margin-left: auto; }

/* --- 18. record cards and fit scoring ------------------------------------ */

.record-card { position: relative; }
.record-card.is-excluded { opacity: 0.66; }
.record-card.is-excluded:hover, .record-card.is-excluded:focus-within { opacity: 1; }

.record-score {
  position: absolute; top: var(--s-5); right: 0; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem;
}
.score-n { font-family: var(--sans); font-size: var(--t-34); font-weight: 600; line-height: 1; letter-spacing: -0.035em; }
.score-n small { font-size: var(--t-15); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.score-l { font-family: var(--sans); font-size: var(--t-12); color: var(--ink-3); max-width: 11rem; line-height: 1.35; }
.is-excluded .score-n { color: var(--ink-3); }
@media (max-width: 40rem) {
  .record-score { position: static; align-items: flex-start; text-align: left; margin-bottom: var(--s-3); flex-direction: row; align-items: baseline; gap: var(--s-3); }
  .score-l { max-width: none; }
}

.reasons { margin: var(--s-4) 0; border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.reasons .label { display: block; margin-bottom: var(--s-3); }
.reasons ul { list-style: none; margin: 0; padding: 0; }
.r {
  display: grid; grid-template-columns: 1.1rem 9rem 1fr auto; gap: var(--s-3);
  align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--rule-fine);
  font-family: var(--sans); font-size: var(--t-13);
}
.r-g { font-weight: 600; }
.r--true  .r-g { color: var(--verified); }
.r--false .r-g { color: var(--stop); }
.r--null  .r-g { color: var(--check); }
.r-k { font-weight: 600; }
.r-w { color: var(--ink-2); }
.r-p { color: var(--ink-3); font-size: var(--t-12); white-space: nowrap; }
@media (max-width: 40rem) {
  .r { grid-template-columns: 1.1rem 1fr auto; }
  .r-k { grid-column: 2; }
  .r-w { grid-column: 2 / span 2; color: var(--ink-3); }
}

.field-hint { font-family: var(--sans); font-size: var(--t-12); color: var(--ink-3); line-height: 1.4; }
.field .unit { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }

/* Responsive tables: below 40rem a wide table becomes stacked records rather
   than a horizontal scroll, which is unusable on a phone. */
@media (max-width: 40rem) {
  table.data, table.data tbody, table.data tr, table.data td, table.data th { display: block; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data tr { border-bottom: 1px solid var(--rule); padding: var(--s-3) 0; }
  table.data td, table.data th { border: 0; padding: 0.1rem 0; }
  table.data td.n { text-align: left; padding-right: 0; font-weight: 600; }
  table.data tbody th { font-size: var(--t-12); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
}

.toolbar { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.toolbar .meta { margin-right: auto; }

/* --- 19. claim provenance ------------------------------------------------ */

table.data tr.is-critical th[scope="row"] { position: relative; }
.crit-flag {
  display: block; font-size: var(--t-12); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--warning); margin-top: 0.15rem;
}
.validation {
  display: block; margin-top: var(--s-2); padding-left: var(--s-3);
  border-left: 2px solid var(--warning); color: var(--ink-2);
  font-size: var(--t-12); line-height: 1.5;
}
.sources li strong { color: var(--ink-2); font-weight: 600; }

/* --- 20. fit and evidence, scored apart ---------------------------------- */

.score-k { font-family: var(--sans); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--ink-3); }
.evidence-badge { position: absolute; top: var(--s-5); right: 0; text-align: right; display: flex; align-items: baseline; gap: 0.45rem; }
.record-score:not([hidden]) ~ .evidence-badge { position: static; justify-content: flex-start; margin: var(--s-3) 0 var(--s-2); }
.ev-n { font-family: var(--sans); font-size: var(--t-21); font-weight: 600; letter-spacing: -0.025em; }
.ev-l { font-family: var(--sans); font-size: var(--t-12); color: var(--ink-3); line-height: 1.1; text-align: left; }
table.data tr.is-total th, table.data tr.is-total td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 600; }
.claim-line { margin: 0 0 0.75em; }
.claim-line:last-child { margin-bottom: 0; }
.claim-k { display: block; font-family: var(--sans); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.085em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.2rem; }
.claim-line--juris .claim-k { color: var(--check); }

/* --- 21. why this score -------------------------------------------------- */

.whyscore { margin: var(--s-4) 0; border-top: 1px solid var(--rule); }
.whyscore summary {
  cursor: pointer; padding: var(--s-3) 0; font-family: var(--sans);
  font-size: var(--t-12); font-weight: 600; letter-spacing: 0.085em;
  text-transform: uppercase; color: var(--ink-2); list-style: none;
}
.whyscore summary::-webkit-details-marker { display: none; }
.whyscore summary::before { content: "+ "; color: var(--ink-3); }
.whyscore[open] summary::before { content: "\2212 "; }
.whyscore summary:hover { color: var(--ink); }
.whyscore .data-wrap { margin-top: 0; }
tr.r--PASS    .oc { color: var(--verified); font-weight: 600; }
tr.r--PARTIAL .oc { color: var(--check); font-weight: 600; }
tr.r--FAIL    .oc { color: var(--stop); font-weight: 600; }
tr.r--UNKNOWN .oc { color: var(--ink-3); font-weight: 600; }
tr.r--UNKNOWN td, tr.r--UNKNOWN th { background: var(--paper-sunk); }
.record-card.is-insufficient { border-left: 2px solid var(--warning); padding-left: var(--s-4); }

/* --- 22. three dimensions ------------------------------------------------ */

.score-sep { display: block; width: 2.25rem; height: 1px; background: var(--rule); margin: var(--s-3) 0 var(--s-2); margin-left: auto; }
.score-e { font-family: var(--sans); font-size: var(--t-15); font-weight: 600; letter-spacing: -0.01em; }
.evidence-badge { flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.evidence-badge .ev-l { text-align: right; max-width: 12rem; }
tr.r--CLEARS .oc      { color: var(--verified); font-weight: 600; }
tr.r--CONDITIONAL .oc, tr.r--OPEN_ENDED .oc { color: var(--check); font-weight: 600; }
tr.r--BELOW .oc       { color: var(--stop); font-weight: 600; }
tr.r--CONDITIONAL td, tr.r--CONDITIONAL th, tr.r--OPEN_ENDED td, tr.r--OPEN_ENDED th { background: var(--check-wash); }
@media (max-width: 40rem) {
  .score-sep { margin-left: 0; }
  .evidence-badge { align-items: flex-start; }
  .evidence-badge .ev-l { text-align: left; }
}

/* ===========================================================================
   23 · THE INFORMATION GRAMMAR
   ---------------------------------------------------------------------------
   Value, then a measured gap, then provenance in another register behind a
   vertical rule. Evidence is given its own space instead of being footnoted.

   This is a grammar, not a component template. It is used where a fact carries
   a source that changes how the fact should be read. It is deliberately absent
   from narrative passages, from navigation, and from summary figures, so that
   it stays recognisable through repetition without becoming mechanical.
   ========================================================================== */

.fact { padding-block: var(--s-4); border-bottom: 1px solid var(--rule-fine); }
.fact:last-child { border-bottom: 0; }
.fact-k { font-family: var(--sans); font-size: var(--t-12); font-weight: 500; color: var(--ink-3); }
.fact-v {
  font-family: var(--sans); font-size: var(--t-21); font-weight: 400;
  letter-spacing: -0.02em; margin-top: var(--s-1);
  font-variant-numeric: tabular-nums lining-nums;
}
.fact-gap { height: var(--s-3); }          /* the measured gap — the signature */
.fact-p {
  font-family: var(--mono); font-size: var(--t-11); line-height: 1.5;
  color: var(--ink-3); padding-left: var(--s-3); border-left: 1.5px solid var(--rule);
}
.fact-p b { font-weight: 500; color: var(--ink-2); }
.fact--verified .fact-p { border-left-color: var(--verified); }
.fact--unknown .fact-v { color: var(--ink-3); }
.fact--unknown .fact-p { border-left-color: var(--unknown); }

/* The datum is rare by rule: a critical measured value verified against a
   primary technical document. One or two per page, never a universal marker. */
.datum { display: inline-flex; align-items: center; gap: 0.4em; }
.datum::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 0.26em solid transparent; border-right: 0.26em solid transparent;
  border-bottom: 0.38em solid var(--brand); transform: translateY(0.05em);
}

/* --- 24 · accessibility carried over from the approved prototype ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 44px targets on coarse pointers. Padding grows; type and baseline do not. */
@media (pointer: coarse) {
  .masthead nav a { padding-block: 0.7rem; }
  select, input[type="text"], input[type="number"] { padding-block: 0.7rem; }
  .whyscore summary { padding-block: 1rem; }
  .entry h2 a, .entry h3 a { display: inline-block; padding-block: 0.3rem; }
  footer.site nav a { padding-block: 0.45rem; }
}

/* A seven-column scoring table cannot be read on a phone, and a horizontal
   scroll hides the reasoning the table exists to show. Each row becomes a
   self-describing record. */
@media (max-width: 44rem) {
  table.data, table.data tbody, table.data tr, table.data th, table.data td { display: block; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data tr { border-bottom: 1px solid var(--rule); padding-block: var(--s-4); }
  table.data th, table.data td { border: 0; padding: 0; }
  table.data tbody th {
    font-family: var(--sans); font-size: var(--t-17); font-weight: 500;
    letter-spacing: -0.015em; margin-bottom: var(--s-2); color: var(--ink);
    text-transform: none; letter-spacing: -0.015em;
  }
  table.data td { font-size: var(--t-13); color: var(--ink-2); padding-block: 0.1rem; }
  table.data td::before {
    content: attr(data-l) " ";
    font-family: var(--mono); font-size: var(--t-10); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3);
  }
  table.data td.n { text-align: left; padding-right: 0; }
  table.data tr.is-total th { border-top: 0; }
  table.data tr.r--CONDITIONAL th, table.data tr.r--OPEN_ENDED th {
    box-shadow: none; padding-left: var(--s-3); border-left: 2px solid var(--check);
  }
  .record { flex-direction: column; gap: var(--s-2); }
  .record dd { margin-right: 0; }
  .plates { gap: var(--s-4); }
}