/* ============================================================
   Essington Institute — inner pages (why.html, register.html,
   team.html) on top of the legacy component layer in site.css.
   Reshapes the old square, hairline-ruled sections into the plate
   system: plates per section, cards for charts/stats/quotes/notes,
   rounded segmented picker, system buttons.
   ============================================================ */

/* ---- Sections become plates ---- */
.body, .why-hero__lede, .bench__prose p, .register-page p { font-family: var(--sans); }
.pullquote p { font-family: var(--serif); }
.plate .body { margin: 0 0 1.2rem; }
.plate .h2 { margin-bottom: 1.5rem; }
.section { border-bottom: 0; }
.section__inner { max-width: var(--tc-page-max); padding-inline: var(--gutter); }
.section--why .section__inner { padding-top: 0; padding-bottom: 0; }
.section--sources { padding-block: 3rem; }
.h2 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; max-width: 16em; margin: 0 0 1.5rem; }
.section--why .body + .label-row { margin-top: var(--tc-plate-pad-y); }
.marginal-label { font-family: var(--sans); font-size: var(--t-small); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--copper); }
.body { }

/* Ink plate: everything that site.css pins to ink flips to cream. */
.plate--ink .h2, .plate--ink .body, .plate--ink .stat__label, .plate--ink .pullquote p { color: var(--cream); }
.plate--ink .body { color: var(--cream-soft); }
.plate--ink .marginal-label { color: var(--copper-light); }
.plate--ink .fn-ref a { color: var(--copper-light); }
.plate--ink .stat { background: rgba(244,240,229,0.06); border-color: transparent; box-shadow: none; }
.plate--ink .stat__fig { color: var(--copper-light); }
.plate--ink .stat__in { color: var(--cream-soft); }
.btn--ghost-ink { background: rgba(244,240,229,0.1); color: var(--cream); border-color: rgba(244,240,229,0.18); }
.btn--ghost-ink:hover { background: var(--cream); color: var(--ink); }
.why-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* ---- Ledger: segmented picker + chart card ---- */
.plate .bench__prose p { margin: 0 0 1rem; }
.plate .bench__prose p:last-child { margin-bottom: 0; }
.bench-picker.is-active {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem;
  margin: 2.5rem 0 1.25rem; padding: 0.35rem; border: 0; border-radius: 999px; background: var(--paper-deep); width: 100%;
}
.bench-picker__indicator {
  position: absolute; top: 0.35rem; bottom: 0.35rem; left: 0; width: 0; border-radius: 999px; background: var(--ink);
  box-shadow: 0 4px 12px -6px rgba(30,43,38,0.5); transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out); pointer-events: none;
}
.bench-picker__btn {
  position: relative; z-index: 1; font-size: var(--t-small); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-soft);
  border: 0; border-radius: 999px; padding: 0.65rem 0.5rem; background: transparent; transition: color 0.25s;
}
.bench-picker__btn:hover { background: transparent; color: var(--ink); }
.bench-picker__btn[aria-selected="true"] { background: var(--ink); color: var(--cream); box-shadow: none; }
/* With the sliding indicator present, the button itself goes transparent and the indicator carries the fill. */
.bench-picker.has-indicator .bench-picker__btn[aria-selected="true"] { background: transparent; }
@keyframes bench-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bench.is-entering { animation: bench-enter 0.5s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .bench.is-entering { animation: none; } .bench-picker__indicator { transition: none; } }
.bench-legend { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin-bottom: 1.5rem; }
.bench-grid { gap: 1.25rem; }
.bench {
  background: var(--paper); border-radius: var(--tc-radius-card); box-shadow: var(--tc-shadow-card);
  border: 1px solid rgba(255,255,255,0.6); padding: var(--tc-card-pad); gap: 2rem;
}
.bench__prose h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.9rem; }
.bench__title { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.bench__unit { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.bench__src { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
.hbar__fill { border-radius: 3px; }

/* ---- Stats: cards ---- */
.count-grid { gap: 1.25rem; margin: 2.5rem 0; }
.stat {
  margin: 0; padding: var(--tc-card-pad); text-align: left; border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--tc-radius-card); background: var(--paper); box-shadow: var(--tc-shadow-card);
}
.stat__row { justify-content: flex-start; }
.stat__fig { font-weight: 300; letter-spacing: -0.02em; }
.stat__label { font-family: var(--sans); font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); }

/* ---- Pull quote: a card ---- */
/* Centred as a shrink-to-fit grid, so the column is exactly as wide as the
   quote: the attribution then right-aligns to the quote's own right edge
   rather than the card's. site.css set the same geometry but capped the
   measure at 34ch, which is what broke the quote over two lines. */
.pullquote {
  display: grid; justify-content: center;
  margin: 2.5rem 0; padding: var(--tc-card-pad); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--tc-radius-card);
  background: var(--paper); box-shadow: var(--tc-shadow-card);
}
.pullquote p { font-style: normal; font-size: var(--t-lede); max-width: none; text-align: center; text-wrap: pretty; }
.pullquote cite { display: block; margin-top: 0.9rem; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; text-align: right; font-weight: 500; }

/* ---- Sources: a card ---- */
.endnotes-fold { background: var(--paper-light); border-radius: var(--tc-radius-card); box-shadow: var(--tc-shadow-card); border: 1px solid rgba(255,255,255,0.6); padding: var(--tc-card-pad); }
.endnotes-fold summary { cursor: pointer; display: block; font-family: var(--sans); font-size: var(--t-small); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 0; padding-bottom: 0; }
.endnotes { font-family: var(--sans); font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }

/* ---- Register / team pages ---- */
.register-page { min-height: 0; padding: var(--tc-plate-pad-y) var(--gutter); }
.register-page__inner { max-width: 720px; margin: 0 auto; }
/* The embed's prefers-color-scheme is derived from the frame element's color-scheme,
   so the form stays light on dark-mode devices (it paints no background of its own). */
.register-form { color-scheme: light; }
.register-page__title { font-family: var(--serif); font-weight: 400; font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 2rem; }
.register-form { border-radius: var(--tc-radius-card); }

@media (max-width: 900px) {

  .bench-picker.is-active { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; border-radius: var(--tc-radius-card); }
  .bench-picker__indicator { border-radius: 999px; }
}

/* ---- "Who is in charge": glyphs instead of prose in the yes/no columns ---- */
.matrix thead th { font-size: 0.8125rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
/* A numeric column needs its unit in the head: "Shelter" alone left the reader
   to guess what 285% counted. */
.matrix__unit { display: block; margin-top: 0.25rem; font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; line-height: 1.3; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.matrix tbody th { font-weight: 500; }
.matrix tbody td { font-size: var(--t-small); }
.matrix__mark { vertical-align: middle; }
.mark { position: relative; display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border-radius: 50%; vertical-align: middle; cursor: default; }
.mark svg { width: 1.1rem; height: 1.1rem; display: block; }
.mark--yes { color: var(--tc-ok); background: var(--tc-ok-soft); }
.mark--part { color: var(--copper); background: rgba(196, 106, 47, 0.14); }
.mark--no { color: var(--tc-no); background: var(--tc-no-soft); }
/* Tooltip: the original cell value, on hover or keyboard focus. */
.mark[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 0.5rem); transform: translate(-50%, 4px);
  background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; line-height: 1.3;
  padding: 0.45rem 0.7rem; border-radius: 8px; box-shadow: 0 8px 24px -8px rgba(30,43,38,0.45);
  /* These carry a sentence now, not a word, so they wrap and take a measure
     instead of running off the side of the viewport on one nowrap line. */
  white-space: normal; width: max-content; max-width: min(26rem, 70vw); text-align: left;
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s var(--ease-out); z-index: 5;
}
.mark[data-tip]:hover::after, .mark[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.mark:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.matrix__mark { overflow: visible; }
.plate .matrix__key { margin: 1.75rem 0 0; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
/* The key is a flex row, so a <br> would not break it: the trailing note
   takes a full basis and drops to its own line. */
.matrix__key-note { flex-basis: 100%; margin-top: 0.35rem; }
.matrix__key .mark { width: 1.25rem; height: 1.25rem; }
.matrix__key .mark svg { width: 0.9rem; height: 0.9rem; }
.mark--na { color: var(--ink-soft); background: rgba(30, 43, 38, 0.06); }
/* The Institute's own star, in the same copper as a partial: the two cells
   where the gap is filled by this Institute rather than by government. It
   reads as a partial, because that is what it is, and it scores nothing. */
.mark--ess { color: var(--copper); background: rgba(196, 106, 47, 0.14); }
.mark--ess svg { width: 0.95rem; height: 0.95rem; }
.matrix { table-layout: auto; }
.matrix thead th { padding-right: 0.75rem; }
.matrix__mark { width: 6.5rem; }
@media (max-width: 900px) { .matrix__mark { width: auto; } }
.matrix__num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Audit pass (2026-09-19): leftover square corners, hairlines, narrow measures ---- */
/* Counters ("When trouble comes"): cards, not flat cells. */
.count-cell {
  background: var(--paper); border-radius: var(--tc-radius-card); box-shadow: var(--tc-shadow-card);
  border: 1px solid rgba(255,255,255,0.6); padding: var(--tc-card-pad);
}
.counter__fig { font-weight: 300; letter-spacing: -0.02em; }
.counter__label { font-size: var(--t-small); max-width: none; }
.plate--ink .count-cell { background: rgba(244,240,229,0.06); border-color: transparent; box-shadow: none; }
.plate--ink .counter__fig { color: var(--cream); }
.plate--ink .counter__label { color: var(--cream-soft); }

/* No cap: a heading runs to the width of its column. An em-based cap broke
   headings the column could have held on one line. */
.h2 { max-width: none; }
.plate .h2 + .body { margin-top: 0.25rem; }

/* Bar charts: rounded tracks and fills. */
.hbar__track { border-radius: 5px; overflow: hidden; }
.hbar__fill { border-radius: 5px; }

/* Sources list inside its card: no hairline above. */
.endnotes { border-top: 0; padding-top: 1rem; margin-bottom: 0.5rem; }

/* Bench source line under each chart. */
.bench__src { font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }

/* Tier key table (air defence): plain sans, no uppercase. */
.tier-table th { font-weight: 600; font-size: var(--t-small); }
.tier-table td { font-size: var(--t-small); }