/* ============================================================
   Ultrafast, explained — layout + shared components
   ============================================================ */

/* ---------- 1. Header / HUD ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 3.5rem;
  padding-block: .5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
  border-radius: var(--r-sm);
}

.brand__mark {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--uf-grad);
  box-shadow: var(--uf-glow);
}
.brand__mark svg { width: 17px; height: 17px; }

.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .93rem;
  font-weight: 720;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__sub {
  font-size: var(--t-xxs);
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.hud {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
}

/* Completion meter */
.meter {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .7rem .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.meter__track {
  width: 84px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  border: 1px solid var(--line);
}
.meter__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--uf-grad);
  transition: width var(--dur-3) var(--ease-out);
}
.meter__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  letter-spacing: -.02em;
}

.score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .32rem;
  padding: .34rem .78rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.score-chip:hover { border-color: var(--line-strong); background: var(--surface-3); }
.score-chip__value { font-weight: 700; font-size: .84rem; }
.score-chip__unit { color: var(--ink-3); font-size: var(--t-xxs); letter-spacing: .06em; }
.score-chip.is-bump { animation: chip-bump var(--dur-3) var(--ease-back); }

@keyframes chip-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.13); border-color: var(--uf-lime); }
  100% { transform: scale(1); }
}

/* Icon toggles */
.icon-btn {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-3); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn[aria-pressed="true"] {
  color: var(--ink-invert);
  background: var(--uf-grad);
  border-color: transparent;
}

/* Reading-progress hairline */
.readbar {
  height: 2px;
  background: var(--uf-grad);
  width: 0%;
  transform-origin: 0 50%;
  transition: width 90ms linear;
}

/* ---------- 2. Sections ---------- */

main { display: block; }

.section {
  position: relative;
  padding-block: clamp(3.25rem, 1.5rem + 6vw, 6.5rem);
  scroll-margin-top: 5rem;
}
.section + .section { border-top: 1px solid var(--line); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 74ch;
  margin-bottom: var(--sp-6);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--uf-grad);
  flex: none;
}
.eyebrow__no {
  font-variant-numeric: tabular-nums;
  color: var(--uf-text);
  font-weight: 700;
}

.section__lede {
  font-size: var(--t-md);
  color: var(--ink-2);
  line-height: 1.62;
  max-width: 62ch;
}

/* ---------- 3. Cards / panels ---------- */

.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.panel--pad { padding: clamp(1.05rem, .6rem + 1.6vw, 1.9rem); }
.panel--flush { overflow: hidden; }

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: .85rem 1.05rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.panel__title {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -.012em;
  margin: 0;
}
.panel__body { padding: clamp(1rem, .6rem + 1.3vw, 1.6rem); }

/* Tier-coded panels: the two colours are consistent page-wide. */
.tier-uf  { --tier: var(--uf-lime);  --tier-2: var(--uf-sky); --tier-grad: var(--uf-grad);  --tier-soft: var(--uf-grad-soft);  --tier-text: var(--uf-text); }
.tier-std { --tier: var(--std);      --tier-2: var(--std-deep); --tier-grad: var(--std-grad); --tier-soft: var(--std-grad-soft); --tier-text: var(--std-text); }

.tier-tag {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .22rem .62rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--tier-text, var(--ink-2));
  background: var(--tier-soft, var(--surface-2));
}
.tier-tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--tier-grad, var(--ink-3));
  flex: none;
}

/* ---------- 4. Buttons ---------- */

.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .6rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 660;
  letter-spacing: -.008em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              opacity var(--dur-1) var(--ease);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--line-strong); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary {
  --btn-bg: var(--uf-grad);
  --btn-fg: #04060A;
  --btn-bd: transparent;
  font-weight: 720;
  box-shadow: var(--uf-glow);
}
.btn--primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(201,255,77,.5), 0 12px 44px -12px rgba(120,230,190,.6); }

.btn--ghost { --btn-bg: transparent; --btn-bd: var(--line-2); color: var(--ink-2); }
.btn--ghost:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }

.btn--sm { min-height: 36px; padding: .35rem .8rem; font-size: var(--t-xs); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* ---------- 5. Readouts (the instrument look) ---------- */

.readout {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}
.readout__label {
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.readout__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
}
.readout__unit {
  font-size: .46em;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-3);
  margin-left: .18em;
}
.readout--tier .readout__value { color: var(--tier-text, var(--ink)); }

/* ---------- 6. Stat blocks ---------- */

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%; height: 3px;
  background: var(--tier-grad, var(--uf-grad));
  opacity: .9;
}
.stat__qual {
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.35rem, 1.3rem + 4.2vw, 3.9rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: .12em;
  flex-wrap: wrap;
}
.stat__value .u {
  font-size: .3em;
  font-weight: 640;
  letter-spacing: .01em;
  color: var(--ink-3);
  font-family: var(--font-sans);
}
.stat__value.is-grad {
  background: var(--uf-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat__value.is-grad { color: var(--uf-text); background: none; }
}
.stat__note {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- 7. Captions + provenance ---------- */

.caption {
  display: flex;
  gap: .6rem;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.55;
}
.caption::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--uf-grad);
  opacity: .7;
}
.caption b { color: var(--ink); font-weight: 660; }

/* "This number is derived, not published" — used everywhere an extrapolation appears */
.derived-tag {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .18rem .55rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--derived-line);
  background: var(--derived-bg);
  color: var(--derived);
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.derived-tag::before {
  content: "\0192";           /* ƒ — "a function of the stated ceiling" */
  font-family: var(--font-mono);
  font-style: italic;
}

.derived-note {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin-top: var(--sp-3);
  padding: .6rem .8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--derived-line);
  background: var(--derived-bg);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.derived-note strong { color: var(--derived); font-weight: 700; }

.src-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  letter-spacing: .06em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 600;
}
.src-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--uf-lime);
  flex: none;
}

/* ---------- 8. Grid helpers ---------- */

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 9. Reveal-on-scroll (information, not decoration) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* If motion is off or JS never runs, content must still be visible. */
.no-js .reveal,
:root[data-motion="off"] .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 10. Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-veil);
  padding-block: var(--sp-8) var(--sp-7);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
.site-footer h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.site-footer ul { display: flex; flex-direction: column; gap: .5rem; }
.site-footer li { line-height: 1.45; }

.disclosure {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--uf-lime);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: var(--sp-4);
  line-height: 1.6;
}
.disclosure strong { color: var(--ink); }

.colophon {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ---------- 11. Header responsive ---------- */

@media (max-width: 760px) {
  .brand__sub { display: none; }
  .meter__track { width: 56px; }
}
@media (max-width: 560px) {
  .site-header__bar { gap: .5rem; }
  .brand__title { font-size: .84rem; }
  .meter { padding: .28rem .5rem .28rem .42rem; }
  .meter__label { font-size: var(--t-xxs); }
  .hud { gap: .35rem; }
}
@media (max-width: 480px) {
  /* Below this the six-station meter, the score and the two switches are
     worth more than the repeated wordmark — the h1 is directly beneath. */
  .brand__text { display: none; }
  .icon-btn { width: 32px; height: 32px; }
  .score-chip { padding: .3rem .6rem; }
}
@media (max-width: 400px) {
  .meter__track { width: 40px; }
}