/* ============================================================
   ATOM Intelligence Yield — command center stylesheet
   ============================================================ */

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

html { -webkit-text-size-adjust: none; scroll-behavior: smooth; scroll-padding-top: 132px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: 'ss01' 1;
  transition: background var(--dur-2) var(--ease-atom), color var(--dur-2) var(--ease-atom);
}

/* Ambient field — radial washes only. No grid background. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70rem 40rem at 78% -12%, var(--wash-1), transparent 62%),
    radial-gradient(58rem 34rem at 4% 4%, var(--wash-2), transparent 58%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-weight: var(--fw-bold);
}

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
sub, sup { font-size: 0.68em; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'zero' 1; }
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--line-accent); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); font-weight: var(--fw-medium);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.shell { width: min(1320px, 100% - var(--space-8)); margin-inline: auto; position: relative; z-index: 1; }
@media (max-width: 640px) { .shell { width: min(1320px, 100% - var(--space-6)); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint);
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: breathe 2.6s var(--ease-atom) infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.35; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1); } }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes scanline { from { transform: translateY(-100%); } to { transform: translateY(700%); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================== topbar ============================== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid var(--line-soft);
}
.topbar__inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); letter-spacing: -0.02em; line-height: 1.15; }
.brand__sub { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.atom-mark { flex: none; }
.atom-mark .orbits > * { transform-origin: 24px 24px; animation: orbit 26s linear infinite; }
.atom-mark .orbits > :nth-child(2) { animation-duration: 34s; animation-direction: reverse; }
.atom-mark .orbits > :nth-child(3) { animation-duration: 44s; }
.atom-mark .halo { animation: breathe 3.4s var(--ease-atom) infinite; transform-origin: 24px 24px; }

.topbar__live {
  margin-left: auto; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill); background: var(--surface-2);
}
.topbar__live-label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); }
.topbar__live-value { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--accent); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .topbar__live { display: none; } }

.icon-btn {
  margin-left: auto;
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-secondary);
  transition: color var(--dur) var(--ease-atom), border-color var(--dur) var(--ease-atom), transform var(--dur) var(--ease-atom);
}
.topbar__live + .icon-btn { margin-left: 0; }
.icon-btn:hover { color: var(--accent); border-color: var(--line-accent); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn .i-sun { display: none; }
[data-theme='light'] .icon-btn .i-sun { display: block; }
[data-theme='light'] .icon-btn .i-moon { display: none; }

/* ============================== hero ============================== */
.hero { padding-block: var(--space-12) var(--space-8); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1fr);
  gap: var(--space-12);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  max-width: 16ch;
  margin-top: var(--space-4);
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lede {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  max-width: 46ch;
  margin-top: var(--space-4);
}

/* live readout */
.readout {
  margin-top: var(--space-8);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface-2) 62%);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.readout__kicker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.readout__value {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-top: var(--space-1);
}
.readout__number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fs-num);
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.readout__unit { font-size: var(--fs-xs); color: var(--text-faint); font-family: var(--font-mono); }
.readout__delta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 34%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border-radius: var(--radius-pill); padding: 2px var(--space-3);
}
.readout__baseline { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-6); }
.mini { min-width: 0; }
.mini__label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.mini__value { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; margin-top: 2px; }
.mini__value.is-gold { color: var(--f-cost); }
.mini__value.is-success { color: var(--success); }

/* inline formula strip */
.formula-strip {
  margin-top: var(--space-6);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-sm);
}
.fchip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 3px var(--space-2); background: var(--surface-2);
  transition: border-color var(--dur) var(--ease-atom), background var(--dur) var(--ease-atom), transform var(--dur) var(--ease-atom);
}
.fchip[data-factor] { border-color: color-mix(in srgb, var(--fc) 40%, transparent); }
.fchip__key { color: var(--fc, var(--text-secondary)); font-weight: var(--fw-bold); }
.fchip__val { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fchip.is-hot { transform: translateY(-1px); background: color-mix(in srgb, var(--fc) 12%, var(--surface-2)); }
.fop { color: var(--text-faint); }

/* ============================== orbital stage ============================== */
.stage { position: relative; }
.stage__viz { width: 100%; aspect-ratio: 1 / 1; max-height: 620px; display: block; overflow: visible; }
.orbit-hit { cursor: pointer; }
.orbit-hit { outline: none; }
.orbit-hit:focus-visible { stroke: var(--accent); stroke-opacity: 0.45; stroke-width: 10; stroke-dasharray: 3 6; }
#main:focus { outline: none; }
.ring-base { fill: none; stroke: var(--track); stroke-width: 1.25; }
.ring-arc { fill: none; stroke-linecap: round; transition: stroke-dasharray var(--dur-2) var(--ease-atom), opacity var(--dur) var(--ease-atom); }
.ring-hot .ring-arc { filter: drop-shadow(0 0 8px currentColor); }
.ring-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; fill: var(--text-faint);
}
.ring-tag-bg {
  display: none;
}
.ring-hot .ring-label { fill: var(--text-primary); }
.ring-value { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; }
.ring-tag { display: none; }
/* Centre-disc type: family, colour and tracking only. Sizes are NOT set here.
   They are computed per render in layoutCore() from the live viewBox scale, so
   the composition is specified in rendered pixels and fits the disc by
   measurement. Five competing font-size overrides accumulated across V1-V4 in
   this file were the reason the score covered the INDEX kicker. */
.core-value {
  font-family: var(--font-mono); font-weight: 700;
  fill: var(--accent); letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
}
.core-value.is-veto { fill: var(--error); }
.core-label { font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--text-secondary); }
.core-disc { }
.conv-seg { fill: none; stroke-linecap: butt; transition: stroke-dasharray var(--dur-2) var(--ease-atom); }
.stage__caption {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--space-2);
}

/* convergence key */
.convkey {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin: var(--space-3) 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.convkey li { display: inline-flex; align-items: center; gap: var(--space-2); }
.convkey i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.convkey b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.convkey__total { margin-left: auto; }
.convkey__total b { color: var(--accent); }

/* legend / inspector */
.legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
.legend__item {
  --fc: var(--text-secondary);
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-2); text-align: left;
  transition: border-color var(--dur) var(--ease-atom), background var(--dur) var(--ease-atom), transform var(--dur) var(--ease-atom);
}
.legend__item:hover, .legend__item.is-hot { border-color: color-mix(in srgb, var(--fc) 55%, transparent); transform: translateY(-2px); }
.legend__name { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); display: flex; align-items: center; gap: 6px; }
.legend__name::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--fc); flex: none; }
.legend__val { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .legend { grid-template-columns: repeat(3, 1fr); } }

/* ============================== tabs ============================== */
.navbar {
  position: sticky; top: 60px; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--line-soft);
  margin-top: var(--space-8);
}
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; position: relative; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; white-space: nowrap;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) - 2px);
  min-height: 44px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-faint);
  transition: color var(--dur) var(--ease-atom);
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected='true'] { color: var(--accent); font-weight: var(--fw-bold); }
.tab__idx { font-family: var(--font-mono); font-size: var(--fs-2xs); opacity: 0.6; margin-right: 6px; }
.tab-indicator {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); border-radius: var(--radius-pill);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform var(--dur-2) var(--ease-atom), width var(--dur-2) var(--ease-atom);
}

main { padding-block: var(--space-12) var(--space-20); }
.panelview { display: none; }
.panelview.is-active { display: block; animation: riseIn 0.42s var(--ease-atom) both; }

.sec-head { margin-bottom: var(--space-8); max-width: 74ch; }
.sec-head h2 { font-size: var(--fs-lg); display: inline; }
.sec-head .sec-slash { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-faint); margin-left: var(--space-2); }
.sec-head p { color: var(--text-secondary); margin-top: var(--space-3); font-size: var(--fs-sm); }

/* ============================== control desk ============================== */
.desk { display: grid; grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr); gap: var(--space-8); align-items: start; }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--space-5); }
.card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
/* A card head that cannot wrap sets the card's min-content width, and a grid
   item defaults to min-width:auto -- which is how a long evidence-tier badge in
   the Equation Trace grid pushed the whole document 51px wider than a 390px
   viewport. The head wraps, the badge wraps, and the grid items are allowed to
   be narrower than their content. */
.card__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.card__meta { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.card__note { color: var(--text-faint); font-size: var(--fs-sm); margin-top: calc(var(--space-4) * -1 + 2px); margin-bottom: var(--space-5); }

/* scenario presets */
.presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.preset {
  min-height: 44px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-secondary);
  font-size: var(--fs-sm); text-align: left;
  transition: all var(--dur) var(--ease-atom);
}
.preset small { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.preset:hover { border-color: var(--line-accent); color: var(--text-primary); }
.preset[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); background: var(--accent-quiet); }
.preset[aria-pressed='true'] small { color: color-mix(in srgb, var(--accent) 78%, var(--text-faint)); }

/* sliders */
.control { --fc: var(--accent); padding-block: var(--space-3); border-top: 1px solid var(--line-soft); }
.control:first-of-type { border-top: 0; }
.control.is-hot { background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 8%, transparent), transparent 70%); }
.control__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.control__label { font-size: var(--fs-sm); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.control__label::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--fc); flex: none; }
.control__val { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fc); font-variant-numeric: tabular-nums; }
.control__hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 2px; }

.slider-wrap { position: relative; height: 44px; display: flex; align-items: center; }
.slider-wrap::before {
  content: ''; position: absolute; left: 0; right: 0; height: 6px; border-radius: var(--radius-pill);
  background: var(--track);
}
.slider-wrap::after {
  content: ''; position: absolute; left: 0; height: 6px; width: var(--fill, 0%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 45%, transparent), var(--fc));
  transition: width var(--dur) var(--ease-atom);
  pointer-events: none;
}
input[type='range'] {
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 2;
  width: 100%; height: 44px; background: transparent; outline: none; margin: 0;
}
input[type='range']::-webkit-slider-runnable-track { height: 6px; background: transparent; }
input[type='range']::-moz-range-track { height: 6px; background: transparent; }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--fc); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc) 60%, transparent), 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: grab; transition: transform var(--dur) var(--ease-atom), box-shadow var(--dur) var(--ease-atom);
}
input[type='range']::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--fc); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc) 60%, transparent);
  cursor: grab;
}
input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.14); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.22); cursor: grabbing; }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
input[type='range']:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }

/* result + trace column */
.result {
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface-2));
  padding: var(--space-6);
  box-shadow: var(--halo), var(--shadow-md);
  position: relative; overflow: hidden;
}
.result::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent), transparent);
  height: 14%; animation: scanline 6.5s linear infinite; opacity: 0.55;
}
.result__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.result__number { font-family: var(--font-mono); font-size: clamp(34px, 22px + 2.6vw, 54px); font-weight: var(--fw-bold); color: var(--accent); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.stat {
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: var(--surface-2); padding: var(--space-4);
}
.stat__label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.stat__value { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-bold); margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
.stat__value.is-accent { color: var(--accent); }

/* equation trace */
details.trace { margin-top: var(--space-5); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-2); }
details.trace > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary);
}
details.trace > summary::-webkit-details-marker { display: none; }
details.trace > summary::before {
  content: '+'; width: 18px; height: 18px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--accent);
}
details.trace[open] > summary::before { content: '−'; }
details.trace[open] > summary { border-bottom: 1px solid var(--line-soft); color: var(--accent); }
.trace__body { padding: var(--space-4) var(--space-5) var(--space-5); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }
.trace__step { color: var(--accent); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-2xs); margin-top: var(--space-4); }
.trace__step:first-child { margin-top: 0; }
.trace__line { margin-top: 3px; font-variant-numeric: tabular-nums; }
.trace__line.is-result { color: var(--text-primary); font-weight: var(--fw-bold); }

/* callouts */
.callout {
  border: 1px solid; border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); font-size: var(--fs-sm);
  color: var(--text-secondary); margin-top: var(--space-4);
  display: flex; gap: var(--space-3);
}
.callout::before { content: ''; width: 3px; border-radius: 2px; flex: none; background: currentColor; opacity: 0.5; }
.callout strong { color: var(--text-primary); }
.callout.is-info { border-color: color-mix(in srgb, var(--azure) 32%, transparent); background: color-mix(in srgb, var(--azure) 7%, var(--surface)); }
.callout.is-warn { border-color: color-mix(in srgb, var(--gold) 34%, transparent); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.callout.is-ok { border-color: color-mix(in srgb, var(--success) 32%, transparent); background: color-mix(in srgb, var(--success) 7%, var(--surface)); }

/* ============================== equations ============================== */
.eqcard {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--space-6);
  position: relative; overflow: hidden;
}
.eqcard + .eqcard { margin-top: var(--space-4); }
.eqcard::before { content: ''; position: absolute; inset-block: 0; left: 0; width: 2px; background: linear-gradient(180deg, var(--accent), transparent); }
.eqcard__kicker { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: var(--space-3); }
.eq { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--accent); line-height: 1.9; }
.eq .muted { display: block; color: var(--text-faint); font-size: var(--fs-xs); line-height: 1.7; margin-top: var(--space-2); }

/* live fraction */
.fraction { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-2); }
.fraction__stack { display: flex; flex-direction: column; gap: var(--space-2); }
.fraction__bar { height: 2px; border-radius: 1px; background: var(--text-faint); opacity: 0.55; }
.fraction__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fterm {
  --fc: var(--accent);
  display: flex; flex-direction: column; gap: 4px; min-width: 92px;
  border: 1px solid color-mix(in srgb, var(--fc) 38%, transparent);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--fc) 7%, var(--surface-2));
}
.fterm__k { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fc); }
.fterm__v { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.fterm__bar { height: 3px; border-radius: 2px; background: var(--track); overflow: hidden; }
.fterm__bar i { display: block; height: 100%; background: var(--fc); width: 0; transition: width var(--dur-2) var(--ease-atom); }
.fraction__eq { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--text-faint); }
.eq.muted {
  font-family: var(--font-body); color: var(--text-secondary);
  font-size: var(--fs-sm); line-height: 1.65; max-width: 82ch; margin-top: var(--space-4);
}
.fraction__out { font-family: var(--font-mono); font-size: clamp(28px, 20px + 1.6vw, 40px); font-weight: var(--fw-bold); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* ============================== tables ============================== */
.table-wrap { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: auto; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 880px; }
th {
  text-align: left; padding: var(--space-3) var(--space-4);
  background: var(--surface-3); color: var(--text-faint);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  position: sticky; top: 0;
}
td { padding: var(--space-4); border-top: 1px solid var(--line-soft); color: var(--text-secondary); vertical-align: top; }
td strong { color: var(--text-primary); }
tr.is-lead td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.yes { color: var(--success); font-family: var(--font-mono); }
.no { color: var(--error); font-family: var(--font-mono); }
.partial { color: var(--gold); font-family: var(--font-mono); }
.tag {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  padding: 1px var(--space-2); border-radius: var(--radius-xs); margin-left: var(--space-2);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.tag.is-best { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.tag.is-good { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.tag.is-conflict { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
.tag.is-layer { background: var(--surface-3); color: var(--text-faint); }

/* ============================== rationale ============================== */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.reason {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--space-6);
  position: relative; overflow: hidden;
  transition: border-color var(--dur) var(--ease-atom), transform var(--dur) var(--ease-atom);
}
.reason:hover { border-color: var(--line-accent); transform: translateY(-3px); }
.reason__num { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--line); }
.reason__term { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fc, var(--accent)); margin-top: var(--space-3); }
.reason h3 { font-size: var(--fs-md); margin-top: var(--space-2); }
.reason p { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: var(--space-3); }

.thesis {
  margin-top: var(--space-8);
  border: 1px solid var(--line-accent); border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--surface-3), var(--surface-2));
  padding: var(--space-8);
}
.thesis h3 { font-size: var(--fs-lg); margin-block: var(--space-2) var(--space-3); }
.thesis p { color: var(--text-secondary); font-size: var(--fs-sm); max-width: 78ch; }

/* ============================== methodology ============================== */
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.srcs { list-style: none; display: grid; gap: var(--space-3); }
.srcs li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm);
}
.srcs li:first-child { border-top: 0; }
.srcs .idx { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-faint); padding-top: 4px; }
.srcs a { display: inline-block; }
.srcs .url { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-faint); word-break: break-all; margin-top: 2px; }

/* ============================== footer + mobile bar ============================== */
footer {
  border-top: 1px solid var(--line-soft); padding-block: var(--space-10);
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-faint);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  text-transform: uppercase; letter-spacing: 0.08em;
}

.mobilebar { display: none; }

/* ============================== responsive ============================== */
@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__grid .stage { max-width: 560px; margin-inline: auto; width: 100%; }
  .desk { grid-template-columns: 1fr; }
  .reasons { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .hero { padding-block: var(--space-8) var(--space-4); }
  .hero h1 { max-width: 20ch; }
  .navbar { top: 56px; }
  main { padding-block: var(--space-8) 96px; }
  .legend { grid-template-columns: repeat(2, 1fr); }
  .stage__viz { max-height: none; }
  /* SVG text scales with the viewBox — enlarge so it stays legible on small screens */
  .ring-label, .ring-value { font-size: 17px; }
  .ring-tag { stroke-width: 5px; }
  .readout { padding: var(--space-5); }
  .card { padding: var(--space-5); }
  .thesis { padding: var(--space-6); }
  footer { padding-bottom: 96px; }

  .mobilebar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    position: fixed; inset-inline: var(--space-3); bottom: var(--space-3); z-index: 45;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-accent); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(16px); box-shadow: var(--shadow-lg);
  }
  .mobilebar__label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
  .mobilebar__value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .mobilebar__delta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--success); }
  .mobilebar__btn {
    min-height: 44px; padding-inline: var(--space-4); border-radius: var(--radius-md);
    border: 1px solid var(--accent); color: var(--accent); background: var(--accent-quiet);
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
  }
}
@media (max-width: 480px) {
  .readout__number { font-size: clamp(36px, 12vw, 46px); }
  .convkey { gap: var(--space-3) var(--space-4); }
  .convkey__total { margin-left: 0; width: 100%; }
  .presets { display: grid; grid-template-columns: 1fr 1fr; }
  .preset { padding: var(--space-2) var(--space-3); }
}

/* ============================== reduced motion ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .result::after { display: none; }
}

/* ============================================================
   V2 ADDITIONS — tier badges, KPI vector, sector orbit,
   reconciliation, waterfall, sensitivity, Pareto, evidence
   ============================================================ */

/* --- nav: V2 has a single sticky header, not a topbar + navbar --- */
.navbar { top: 0; margin-top: 0; }
@media (max-width: 780px) { .navbar { top: 0; } }
.navbar__inner {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 64px; padding-block: var(--space-2);
}
.navbar__inner .tabs { flex: 1 1 auto; min-width: 0; }
.navbar__inner .brand { flex: none; }
.brand__sub { display: block; }
.brand__sub b { color: var(--accent); }
html { scroll-padding-top: 96px; }

/* --- hero --- */
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.preset.is-primary { border-color: var(--accent); color: var(--accent); background: var(--accent-quiet); }
.preset.is-ghost { opacity: 0.75; }
.hero .card__note { max-width: 68ch; margin-top: var(--space-5); margin-bottom: 0; }
.hero__lede b { color: var(--text-primary); }

/* --- KPI vector --- */
.kpivec {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2);
  margin-top: var(--space-10);
  border-top: 1px solid var(--line-soft); padding-top: var(--space-5);
}
.kpi {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-atom);
}
.kpi:hover { border-color: var(--line-accent); }
.kpi__label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); line-height: 1.4; }
.kpi__value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi:last-child .kpi__value { color: var(--accent); }
.kpi__ci { font-size: var(--fs-2xs); color: var(--text-faint); }
@media (max-width: 1240px) { .kpivec { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px) { .kpivec { grid-template-columns: repeat(2, 1fr); } }

/* --- tier badges --- */
.tier-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-xs);
  white-space: normal; overflow-wrap: anywhere; max-width: 100%;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent);
  vertical-align: middle; margin-right: var(--space-2); cursor: help;
}
.tier-badge[data-tier='MEASURED']   { color: var(--success); }
.tier-badge[data-tier='SOURCED']    { color: var(--azure); }
.tier-badge[data-tier='MODELED']    { color: var(--gold); }
.tier-badge[data-tier='VENDOR']     { color: var(--coral); }
.tier-badge[data-tier='DESIGN']     { color: var(--iris); }
.tier-badge[data-tier='CONCEPTUAL'] { color: var(--error); }
.tier-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.unc-chip {
  display: inline-block; font-size: 10px; padding: 1px 6px; margin-right: var(--space-2);
  border-radius: var(--radius-xs); border: 1px dashed var(--line);
  color: var(--text-faint); vertical-align: middle;
}
.control__note { display: block; margin-top: 4px; line-height: 1.5; }
.srclink { font-family: var(--font-mono); font-size: 10.5px; word-break: break-word; }
.control__hint { display: block; margin-top: var(--space-2); }
.control.is-dim { opacity: 0.42; }
.control.is-dim input[type='range'] { pointer-events: none; }

/* per-group accent so sliders are not all teal */
.control[data-key^='w_']                    { --fc: var(--iris); }
.control[data-key='E_q'], .control[data-key='pue'], .control[data-key='serverPowerW'],
.control[data-key='powerUtilization'], .control[data-key='hostOverheadFraction'],
.control[data-key='fleetUtilization']       { --fc: var(--f-energy); }
.control[data-key='Q'], .control[data-key='R'], .control[data-key='n_a'] { --fc: var(--f-accuracy); }
.control[data-key^='ttft'], .control[data-key^='tpot'], .control[data-key='sloAttainment'],
.control[data-key='tpsSystem'], .control[data-key='concurrency'],
.control[data-key^='prefill'], .control[data-key^='decode'] { --fc: var(--f-speed); }
.control[data-key^='p_'], .control[data-key='pi_e'], .control[data-key='v'],
.control[data-key='gamma']                  { --fc: var(--f-cost); }
.control[data-key='phi']                    { --fc: var(--f-privacy); }
.control[data-key='x'], .control[data-key='S_hit'] { --fc: var(--conv-1); }
.control[data-key='P_route'], .control[data-key='M_serve'] { --fc: var(--conv-2); }
.control[data-key='f_net'], .control[data-key='N_net'] { --fc: var(--conv-3); }

/* --- layout helpers --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); }
.grid-2 > *, .grid-3 > * { min-width: 0; }
.grid-2 > .card + .card { margin-top: 0; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
.minigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.minigrid .mini {
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: var(--surface-2); padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.mini__sub { font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.45; }
.mini__value.is-warn { color: var(--error); }

/* --- scenario presets --- */
.preset { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.preset__name { font-weight: var(--fw-medium); }
.preset__tier {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 1px 5px; border-radius: var(--radius-xs); border: 1px solid currentColor;
}
.preset__tier[data-tier='MEASURED']   { color: var(--success); }
.preset__tier[data-tier='SOURCED']    { color: var(--azure); }
.preset__tier[data-tier='MODELED']    { color: var(--gold); }
.preset__tier[data-tier='CONCEPTUAL'] { color: var(--error); }
.preset.is-active { border-color: var(--accent); background: var(--accent-quiet); color: var(--accent); }
#scenarioNote { margin-top: var(--space-4); }
#scenarioNote .tier-badge { cursor: default; }

/* --- orbit (weighted sectors) --- */
.sector { cursor: default; outline: none; }
.sector__fill { transition: d var(--dur-2) var(--ease-atom); }
.sector:hover .sector__fill, .sector:focus-visible .sector__fill { filter: drop-shadow(0 0 10px currentColor); }
.sector:focus-visible .sector__fill { stroke-width: 2.5; }
.ring-label { fill: var(--text-secondary); font-size: 12px; }
.ring-value { font-size: 13px; }
.ring-tag { display: block; font-family: var(--font-mono); font-size: 10px; fill: var(--text-faint); letter-spacing: 0.08em; }
.guide-label { font-family: var(--font-mono); font-size: 9px; fill: var(--text-faint); opacity: 0.8; }
.floor-mark { font-family: var(--font-mono); font-size: 14px; fill: var(--gold); }
.core-kicker { font-family: var(--font-mono); letter-spacing: 0.22em; fill: var(--text-faint); text-transform: uppercase; }
.stage__caption { text-transform: none; letter-spacing: 0.02em; line-height: 1.55; display: block; }

.readout__delta.is-veto { color: var(--error); }
.readout__delta.is-warn { color: var(--gold); }
.legend { grid-template-columns: repeat(3, 1fr); }
.legend__item { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); cursor: help; }
.legend__item.is-veto { border-color: color-mix(in srgb, var(--error) 45%, transparent); }
.legend__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend__name::before { display: none; }
.legend__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.legend__w { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-faint); }
@media (max-width: 620px) { .legend { grid-template-columns: repeat(2, 1fr); } }

/* --- segmented control, checkboxes, selects --- */
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); }
.seg { min-height: 44px; padding-inline: var(--space-5); font-size: var(--fs-sm); color: var(--text-faint); transition: all var(--dur) var(--ease-atom); }
.seg + .seg { border-left: 1px solid var(--line); }
.seg.is-active { background: var(--accent-quiet); color: var(--accent); font-weight: var(--fw-bold); }
.seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.chk { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); align-items: center; padding: var(--space-2) 0; font-size: var(--fs-sm); cursor: pointer; min-height: 44px; }
.chk input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.chk em { grid-column: 2; font-style: normal; font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.4; }
.chk.is-locked { opacity: 0.6; cursor: not-allowed; }
.chk input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.boundarybox { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-2); padding: var(--space-4); margin-bottom: var(--space-5); }
.boundarybox__label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.select {
  min-height: 44px; width: 100%; margin-top: var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text-primary);
  padding-inline: var(--space-3); font-size: var(--fs-sm); font-family: var(--font-body);
}
.select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- reconciliation --- */
.recon { margin-top: var(--space-5); border: 1px solid var(--line-accent); border-radius: var(--radius-lg); background: var(--surface-2); padding: var(--space-5); }
.recon.is-collapsed { border-color: var(--line-soft); }
.recon__head { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: var(--space-4); }
.recon__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.recon__grid .mini { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.recon .card__note { margin: 0; }
.callout.is-error { border-color: color-mix(in srgb, var(--error) 45%, transparent); background: color-mix(in srgb, var(--error) 9%, var(--surface)); color: var(--text-secondary); }
#hardwarePairing { margin-top: var(--space-4); }

/* --- sensitivity bars --- */
.sbar { display: grid; grid-template-columns: minmax(150px, 210px) 1fr auto; gap: var(--space-3); align-items: center; padding-block: var(--space-2); border-top: 1px solid var(--line-soft); }
.sbar:first-child { border-top: 0; }
.sbar__label { font-size: var(--fs-xs); color: var(--text-secondary); }
.sbar__track { position: relative; height: 16px; background: var(--track); border-radius: var(--radius-xs); overflow: hidden; }
.sbar__st { position: absolute; inset-block: 0; left: 0; background: color-mix(in srgb, var(--accent) 32%, transparent); transition: width var(--dur-2) var(--ease-atom); }
.sbar__s1 { position: absolute; inset-block: 3px; left: 0; background: var(--accent); border-radius: 1px; transition: width var(--dur-2) var(--ease-atom); }
.sbar__val { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 700px) { .sbar { grid-template-columns: 1fr; gap: 4px; } }

/* --- waterfall --- */
.wf { display: grid; grid-template-columns: 120px 1fr 96px 168px; gap: var(--space-3); align-items: center; padding-block: var(--space-2); border-top: 1px solid var(--line-soft); }
.wf:first-child { border-top: 0; }
.wf--total { border-top: 1px solid var(--line-accent); margin-top: var(--space-2); }
.wf--total .wf__label, .wf--total .wf__val { color: var(--accent); font-weight: var(--fw-bold); }
.wf__label { font-size: var(--fs-xs); color: var(--text-secondary); }
.wf__track { position: relative; height: 14px; background: var(--track); border-radius: var(--radius-xs); overflow: hidden; }
.wf__bar { position: absolute; inset-block: 0; right: 0; opacity: 0.85; transition: width var(--dur-2) var(--ease-atom); }
.wf__bar.is-neg { right: auto; left: 0; }
.wf__val { font-size: var(--fs-xs); text-align: right; font-variant-numeric: tabular-nums; }
.wf__meta { font-size: 10.5px; color: var(--text-faint); text-align: right; }
@media (max-width: 780px) { .wf { grid-template-columns: 1fr auto; } .wf__track { grid-column: 1 / -1; } .wf__meta { text-align: left; } }

/* --- equation output line --- */
.eq--out { color: var(--text-primary); font-weight: var(--fw-bold); border-top: 1px dashed var(--line); margin-top: var(--space-2); padding-top: var(--space-2); font-size: var(--fs-sm); }
.eqcard .card__note { margin: var(--space-3) 0 0; }

/* --- tables --- */
.dtable { min-width: 640px; }
.dtable td .tier-badge { margin-left: var(--space-2); }
.dtable tr.is-you td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.srckey { display: block; font-size: 10px; color: var(--text-faint); }
.srcnote { display: block; font-size: var(--fs-2xs); color: var(--text-faint); margin-top: 3px; line-height: 1.45; }

/* --- charts --- */
.chart { width: 100%; height: auto; overflow: visible; }
.axis-label { font-family: var(--font-mono); font-size: 10px; fill: var(--text-faint); }
.axis-title { font-family: var(--font-mono); font-size: 11px; fill: var(--text-secondary); letter-spacing: 0.04em; }
.pt-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-secondary); }
.pt { outline: none; }
.pt:focus-visible circle { stroke: var(--accent); stroke-width: 4; }
.axisctl { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.axisctl label { font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); display: flex; align-items: center; gap: var(--space-2); }
.axisctl .select, .axisctl select {
  min-height: 36px; width: auto; margin-top: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-primary);
  padding-inline: var(--space-2); font-size: var(--fs-xs); font-family: var(--font-body);
  text-transform: none; letter-spacing: 0;
}
#providerEvidence h4 { font-size: var(--fs-sm); margin-bottom: var(--space-3); }
#providerEvidence p { font-size: var(--fs-sm); color: var(--text-secondary); padding-block: var(--space-3); border-top: 1px solid var(--line-soft); }
#providerEvidence em { color: var(--text-faint); font-style: normal; font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; }

/* --- evidence --- */
.tierlegend { display: grid; gap: var(--space-3); }
.tierrow { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-3); align-items: start; font-size: var(--fs-sm); color: var(--text-secondary); }
.method h4 { font-size: var(--fs-sm); color: var(--accent); margin-bottom: var(--space-2); }
.method p { font-size: var(--fs-sm); color: var(--text-secondary); }
.gaps { list-style: none; display: grid; gap: var(--space-3); }
.gaps li { font-size: var(--fs-sm); color: var(--text-secondary); padding-left: var(--space-5); position: relative; line-height: 1.6; }
.gaps li::before { content: '—'; position: absolute; left: 0; color: var(--text-faint); font-family: var(--font-mono); }
.gaps b { color: var(--text-primary); }

/* --- footer --- */
.foot { border-top: 1px solid var(--line-soft); margin-top: var(--space-16); padding-block: var(--space-8); }
.foot__inner { display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.foot p { font-size: var(--fs-2xs); color: var(--text-faint); max-width: 86ch; line-height: 1.6; }
.foot b { color: var(--text-secondary); }

/* --- tooltip --- */
.tooltip {
  position: fixed; z-index: 90; pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur) var(--ease-atom), transform var(--dur) var(--ease-atom);
  border: 1px solid var(--line-accent); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-deep) 96%, transparent);
  backdrop-filter: blur(12px); box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4); font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5;
}
.tooltip.is-on { opacity: 1; transform: translateY(0); }

/* --- responsive tail --- */
@media (max-width: 780px) {
  .navbar__inner { flex-wrap: wrap; gap: var(--space-3); min-height: 0; }
  .navbar__inner .tabs { order: 3; width: 100%; flex-basis: 100%; }
  .navbar__inner .brand { flex: 1 1 auto; }
  .ring-label { font-size: 15px; }
  .ring-value { font-size: 16px; }
  .ring-tag { font-size: 12px; }
  .guide-label { font-size: 12px; }
  .kpi__value { font-size: var(--fs-md); }
  .tierrow { grid-template-columns: 1fr; }
  .foot { padding-bottom: 96px; }
}

/* --- V2 fixes: callout flow, section spacing --- */
.callout { display: block; position: relative; padding-left: var(--space-6); }
.callout::before { position: absolute; left: var(--space-4); top: var(--space-4); bottom: var(--space-4); width: 3px; }
.callout strong, .callout b { color: var(--text-primary); }
#providerEvidence { margin-top: var(--space-8); }
#providerEvidence h4 { margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.chart-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.chart-legend div { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-secondary); }
.chart-legend i { width: 16px; height: 16px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--bg); }
.pt-idx { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: var(--bg-deep); pointer-events: none; }
.pt:hover circle, .pt:focus-visible circle { filter: drop-shadow(0 0 8px currentColor); }
.card__note { margin-top: var(--space-4); }
.card__head + .card__note { margin-top: calc(var(--space-4) * -1 + 2px); }
.readout__caveat { display: block; width: 100%; margin-top: var(--space-3); font-family: var(--font-body); font-size: var(--fs-xs); color: var(--gold); line-height: 1.55; text-transform: none; letter-spacing: 0; }

/* --- V2 final QA: narrow orbit frame + horizontally scrollable tab row --- */
#orbit.is-narrow .ring-label { font-size: 16px; }
#orbit.is-narrow .ring-value { font-size: 17px; }
#orbit.is-narrow .guide-label { font-size: 11px; }

/* Restrained edge fade telling the tab row it scrolls. A mask fades the label edge
   instead of covering it, and the class only appears on the side that can still move. */
.tabs { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .tabs { scroll-behavior: auto; } }
.tabs.can-scroll-end {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), rgba(0,0,0,0.15) 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), rgba(0,0,0,0.15) 100%);
}
.tabs.can-scroll-start {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.15) 0, #000 40px, #000 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.15) 0, #000 40px, #000 100%);
}
.tabs.can-scroll-start.can-scroll-end {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.15) 0, #000 40px, #000 calc(100% - 40px), rgba(0,0,0,0.15) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.15) 0, #000 40px, #000 calc(100% - 40px), rgba(0,0,0,0.15) 100%);
}
/* A mask would clip the focus ring, so the focused tab suppresses it. */
.tabs:focus-within { -webkit-mask-image: none; mask-image: none; }
.tabs.can-scroll-end::after,
.tabs.can-scroll-start::before { content: none; }

/* ===============================================================
   MERGE LAYER — executive folds, per-user vector, convergence
   stages, phrase ladder, provider arena editor
   =============================================================== */

.u-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.card__lede{margin:0 0 var(--space-3);color:var(--text-secondary);font-size:.86rem;line-height:1.6;max-width:72ch}

/* progressive disclosure ------------------------------------- */
.fold{margin-top:var(--space-3);border-top:1px solid var(--line);padding-top:var(--space-3)}
.fold__sum{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);
  font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--text-primary);padding:.45rem .1rem;border-radius:8px}
.fold__sum::-webkit-details-marker{display:none}
.fold__sum::before{content:"＋";font-family:var(--font-mono);color:var(--accent);font-size:.9rem;width:1rem}
.fold[open]>.fold__sum::before{content:"−"}
.fold__sum:hover{color:var(--accent)}
.fold__sum:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fold__hint{font-weight:400;font-size:.72rem;color:var(--text-faint);letter-spacing:0}
.fold__body{padding-top:var(--space-2)}

/* per-user / system vector ------------------------------------ */
.vecgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-5)}
.vecgroup{min-width:0}
.vecgroup__title{margin:0 0 var(--space-2);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-faint);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:.35rem}
.vec{display:grid;gap:.1rem;padding:.5rem 0;border-bottom:1px dashed var(--line-soft)}
.vec:last-child{border-bottom:0}
.vec__label{font-size:.76rem;color:var(--text-secondary);line-height:1.3}
.vec__value{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:var(--text-primary);
  font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.vec__basis{font-size:.68rem;color:var(--text-faint);line-height:1.4}

/* convergence stages ------------------------------------------ */
.convstage{display:grid;grid-template-columns:minmax(96px,1.2fr) minmax(60px,2fr) auto;
  grid-template-areas:"name bar val" "sub sub sub";gap:.3rem var(--space-2);align-items:center;padding:.4rem 0;
  border-bottom:1px dashed var(--line)}
.convstage:last-child{border-bottom:0}
.convstage__name{grid-area:name;font-size:.76rem;color:var(--text-secondary)}
.convstage__bar{grid-area:bar;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.convstage__fill{display:block;height:100%;background:var(--accent);border-radius:99px}
.convstage__val{grid-area:val;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.convstage__sub{grid-area:sub;font-size:.66rem;color:var(--text-faint)}
.eq--wrap{white-space:normal;overflow-wrap:anywhere;font-size:.7rem;line-height:1.7;margin-top:var(--space-2)}

/* phrase ladder ----------------------------------------------- */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);counter-reset:lad}
.ladder__step{position:relative;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.ladder__step::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--accent)}
.ladder__step:first-child::before{background:var(--warning)}
.ladder__kick{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.ladder__title{font-size:.95rem;font-weight:650;margin:.15rem 0 var(--space-2)}
.ladder__unit{font-size:.7rem;color:var(--accent);margin-top:.35rem}
.ladder__note{margin:var(--space-2) 0 0;font-size:.78rem;color:var(--text-secondary);line-height:1.65;max-width:78ch}

/* provider arena ---------------------------------------------- */
.dtable--wide th__sub,.th__sub{display:block;font-weight:400;font-size:.62rem;color:var(--text-faint);letter-spacing:0}
.dtable--wide td,.dtable--wide th{white-space:nowrap}
.dtable--wide td:first-child{white-space:normal;min-width:190px}
.cov{font-size:.68rem;color:var(--text-secondary);line-height:1.35;white-space:normal;display:block;max-width:150px}
.btn--xs{font-size:.7rem;padding:.3rem .6rem;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--text-primary);cursor:pointer;font-family:inherit}
.btn--xs:hover{border-color:var(--accent);color:var(--accent)}
.btn--xs:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tag.is-warn{background:color-mix(in srgb,var(--warning) 16%,transparent);color:var(--warning)}

.editor{margin-top:var(--space-5);padding:var(--space-5);border:1px solid var(--accent);border-radius:12px;
  background:var(--surface-2)}
.editor__head{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}
.editor__head h4{margin:0;font-size:.95rem}
.editrow{display:grid;grid-template-columns:minmax(150px,1.1fr) 120px minmax(180px,2fr);gap:var(--space-3);
  align-items:start;padding:.6rem 0;border-top:1px dashed var(--line)}
.editrow__label{display:grid;gap:.1rem;font-size:.78rem}
.editrow__input{width:100%;padding:.38rem .5rem;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--text-primary);font-size:.8rem;font-variant-numeric:tabular-nums}
.editrow__input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.editrow__prov{display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:baseline;font-size:.7rem}
.editrow__prov .mini__sub{flex:1 1 100%;color:var(--text-faint);line-height:1.45}
.editrow__prov a{color:var(--accent)}

.callout__link{background:none;border:0;padding:0;margin-left:.35rem;color:var(--accent);
  font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.callout__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:780px){
  .vecgrid{grid-template-columns:1fr;gap:var(--space-3)}
  .vec__value{font-size:.92rem}
  .editrow{grid-template-columns:1fr;gap:.35rem}
  .editrow__input{max-width:160px}
  .ladder__step{padding-left:var(--space-3)}
  .cov{max-width:none}
  .fold__hint{display:none}
}
@media (prefers-reduced-motion:reduce){.convstage__fill{transition:none}}


/* ===============================================================
   ORBIT LABEL FIX — pill callouts with leader lines
   The hero SVG renders far smaller than its 696-unit viewBox, so
   every glyph size below is chosen in USER UNITS to clear ~11px
   rendered at the smallest layout the hero ever uses.
   =============================================================== */
.ring-leader { stroke-width: 1.6; stroke-opacity: .75; stroke-linecap: round; stroke-linejoin: round; }
.ring-leader-dot { fill-opacity: .95; }
.ring-pill {
  stroke-width: 1.4; stroke-opacity: .55;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
[data-theme='light'] .ring-pill { filter: drop-shadow(0 2px 6px rgba(10,20,22,.10)); }
.ring-pill-key { fill-opacity: .9; }

.ring-label {
  font-family: var(--font-mono); font-size: 17px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; fill: var(--text-secondary);
}
.ring-value {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums;
}
.ring-tag {
  display: block; font-family: var(--font-mono); font-size: 14px;
  fill: var(--text-faint); letter-spacing: .04em;
}
.sector:hover .ring-pill, .sector:focus-visible .ring-pill { stroke-opacity: 1; }
.sector:hover .ring-label, .sector:focus-visible .ring-label { fill: var(--text-primary); }
.sector:focus-visible { outline: none; }
.sector:focus-visible .ring-pill { stroke: var(--accent); stroke-width: 2.4; }

.guide-label { font-size: 13px; }
.core-kicker { letter-spacing: .2em; }
.core-label { letter-spacing: .12em; }

/* The hero column must be wide enough that the pills never render below ~11px.
   Scoped to min-width so the single-column mobile stack is never overridden. */
.stage__viz { max-height: none; }
/* The two-column hero only earns its keep once the viz column is at least as
   wide as the 560px the single-column stack already gives it. At the old 900px
   breakpoint the orbit SHRANK from 560px to 464px as the viewport grew -- the
   centre disc lost lines at 900px that it kept at 768px. The hero is now a
   single column until 1200px, where the viz column is ~637px -- wider than the
   560px the single-column stack gives it -- so the figure only ever grows as the
   viewport grows. Below 1200px the six callouts render as the HTML legend under
   the figure (see .orbit-legend), which is what buys the disc its size back. */
@media (min-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(320px, 0.72fr) minmax(560px, 1fr); }
}
@media (max-width: 1199px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__grid .stage { max-width: 560px; margin-inline: auto; width: 100%; min-width: 0; }
  .stage__viz { max-width: 100%; }
}

#orbit.is-narrow .ring-label { font-size: 21px; }
#orbit.is-narrow .ring-value { font-size: 29px; }
#orbit.is-narrow .guide-label { font-size: 14px; }

/* ==============================================================
   V4 — METHODOLOGY KERNEL
   True fraction bars from an inline-grid stack: numerator, a
   border, denominator. Scales with font-size, reflows, zooms, and
   needs no remote math library.
   ============================================================== */
.kernel{
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 90% at 8% 0%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 62%),
    var(--surface-2);
  position: relative;
  overflow: hidden;
}
.kernel::before{
  content:''; position:absolute; inset:0 auto 0 0; width:2px;
  background: linear-gradient(180deg, var(--accent), transparent 78%);
}
.kernel__head{
  display:grid; grid-template-columns: minmax(0,1fr); gap: var(--space-3);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 900px){ .kernel__head{ grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items:end; gap: var(--space-5);} }
.kernel__kicker{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 var(--space-1); }
.kernel__title{ font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height:1.1; margin:0; letter-spacing:-.02em; }
.kernel__sub{ margin:.35rem 0 0; color: var(--text-secondary); font-size:1rem; }
.kernel__lede{ margin:0; color: var(--text-secondary); font-size:.9rem; max-width:58ch; }

.kernel__layers{ list-style:none; margin:0; padding:0; display:grid; gap: var(--space-5); counter-reset:none; }
.klayer{
  border:1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: var(--space-4); min-width:0;
}
.klayer[data-layer="C"]{ border-color: var(--line-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent) inset; }
.klayer__head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap: var(--space-3); align-items:start; margin-bottom: var(--space-4); }
@media (min-width: 760px){ .klayer__head{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center; } }
.klayer__id{
  width:2.1rem; height:2.1rem; display:grid; place-items:center; flex:none;
  border-radius:50%; border:1px solid var(--line-accent); color:var(--accent);
  font-size:.9rem; font-weight:600;
}
.klayer__titles{ min-width:0; }
.klayer__title{ margin:0; font-size:1.15rem; letter-spacing:-.01em; }
.klayer__lede{ margin:.2rem 0 0; color: var(--text-secondary); font-size:.85rem; }
.klayer__tag{
  grid-column:1 / -1; justify-self:start; font-size:.62rem; letter-spacing:.12em;
  padding:.28rem .55rem; border-radius:3px; white-space:nowrap;
  border:1px solid var(--line); color: var(--text-secondary); background: var(--surface-3);
}
@media (min-width: 760px){ .klayer__tag{ grid-column:auto; justify-self:end; } }
.klayer[data-layer="A"] .klayer__tag{ color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.klayer[data-layer="C"] .klayer__tag{ color: var(--accent); border-color: var(--line-accent); }
.kernel__sub-head{ margin: var(--space-4) 0 var(--space-2); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--text-faint); }
.kernel__note{ margin: var(--space-3) 0 0; color: var(--text-secondary); font-size:.85rem; line-height:1.6; }

/* ---- equation typesetting ---- */
.eq{
  overflow-x:auto; overflow-y:hidden; padding: var(--space-3) 0;
  -webkit-overflow-scrolling:touch;
}
.eq__row{
  display:inline-flex; align-items:center; flex-wrap:nowrap; gap:.34em;
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  color: var(--text-primary); white-space:nowrap; line-height:1.15;
}
.eq--hero .eq__row{ font-size: clamp(1.05rem, .82rem + .95vw, 1.6rem); }
.eq--sub .eq__row{ font-size: clamp(.92rem, .78rem + .55vw, 1.2rem); color: var(--text-secondary); }
.eq--small .eq__row{ font-size: clamp(.86rem, .76rem + .35vw, 1.02rem); color: var(--text-secondary); }
.eq .mi{ font-style: italic; font-family: inherit; }
.eq .mn{ font-style: normal; font-variant-numeric: tabular-nums lining-nums; font-family: var(--font-mono); font-size:.82em; }
.eq .mo{ font-style: normal; padding: 0 .12em; color: var(--text-secondary); }
.eq .msub{ font-size:.6em; font-style:normal; vertical-align:-.28em; letter-spacing:.02em; }
.eq .msup{ font-size:.6em; font-style:normal; vertical-align:.5em; }
.eq .paren{ font-size:1.5em; line-height:.7; color: var(--text-secondary); }
.eq__u{ font-family: var(--font-mono); font-size:.62em; color: var(--text-faint); margin-left:.5em; letter-spacing:.04em; }
.eq__result{ color: var(--accent); font-family: var(--font-mono); font-size:.9em; font-variant-numeric: tabular-nums; }
.eq__unit{ font-size:.7rem; letter-spacing:.06em; color: var(--text-faint); margin-top:.2rem; }
.frac{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  vertical-align:middle; margin:0 .18em; min-width:0;
}
.frac__n, .frac__d{
  display:inline-flex; align-items:center; gap:.28em; padding:.1em .34em; white-space:nowrap;
}
.frac__n{ border-bottom:1.5px solid currentColor; }
.frac .frac{ margin:0 .12em; font-size:.86em; }
.dtable--tight th, .dtable--tight td{ padding:.42rem .6rem; font-size:.8rem; }
.dtable .is-neg{ color: var(--warning); }
.kernel__legend{ margin-top: var(--space-5); }
.kernel__legend > summary{ cursor:pointer; font-size:.85rem; color: var(--accent); padding:.4rem 0; }
.kernel__legend .tiny{ font-size:.74rem; color: var(--text-secondary); }

/* ==============================================================
   V4 — BASELINE OBSERVATORY
   ============================================================== */
.segbar{ display:flex; flex-wrap:wrap; gap:.4rem; margin: var(--space-3) 0 var(--space-4); }
.seg{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  padding:.42rem .8rem; border-radius:999px; font:inherit; font-size:.82rem;
  border:1px solid var(--line); background: var(--surface-3); color: var(--text-secondary);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.seg:hover{ color: var(--text-primary); border-color: var(--line-accent); }
.seg.is-active{ background: color-mix(in srgb, var(--accent) 14%, var(--surface-3)); border-color: var(--line-accent); color: var(--text-primary); }
.seg__n{ font-size:.66rem; color: var(--text-faint); }
.seg:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.basis-badge{
  font-family: var(--font-mono); font-size:.6rem; letter-spacing:.06em; white-space:nowrap;
  padding:.2rem .4rem; border-radius:3px; border:1px solid var(--line); color: var(--text-secondary);
}
.basis-badge[data-basis="aggregate"]{ color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.basis-badge[data-basis="per-user-target"]{ color: var(--accent); border-color: var(--line-accent); }
tr.is-unsupported{ background: color-mix(in srgb, var(--warning) 8%, transparent); }
tr.is-unsupported th{ color: var(--warning); }
tr.is-expiring td.mono{ color: var(--text-secondary); }
.pill-ref{ font-size:.56rem; letter-spacing:.1em; color: var(--accent); border:1px solid var(--line-accent); border-radius:3px; padding:.1rem .3rem; }
.na{ color: var(--text-faint); }
.bl-section{ margin-bottom: var(--space-5); }
.sub-head{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color: var(--text-faint); margin: var(--space-4) 0 var(--space-2); }
.limits{ display:grid; gap: var(--space-3); }
@media (min-width: 760px){ .limits{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.limit{ display:grid; grid-template-columns:auto minmax(0,1fr); gap: var(--space-3); padding: var(--space-3); border:1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-3); }
.limit__n{ color: var(--accent); font-size:.7rem; }
.limit h5{ margin:0 0 .25rem; font-size:.88rem; }
.limit p{ margin:0 0 .3rem; font-size:.8rem; color: var(--text-secondary); line-height:1.55; }

/* ---- reference contract ---- */
.contract__list{ display:grid; gap:0; margin:0; }
.contract__row{ display:grid; grid-template-columns: minmax(0,1fr); gap:.2rem; padding:.7rem 0; border-bottom:1px solid var(--line-soft); }
@media (min-width: 760px){ .contract__row{ grid-template-columns: 15rem minmax(0,1fr); gap: var(--space-4); align-items:baseline; } }
.contract__row:last-child{ border-bottom:0; }
.contract__row dt{ font-size:.8rem; letter-spacing:.04em; color: var(--text-faint); text-transform:uppercase; }
.contract__row dd{ margin:0; min-width:0; }
.contract__row dd .mono{ color: var(--text-primary); font-size:.9rem; }
.contract__note{ display:block; margin-top:.25rem; font-size:.78rem; color: var(--text-secondary); line-height:1.55; }
.callout.is-quiet{ border-color: var(--line-soft); color: var(--text-secondary); }

/* tight baseline / kernel tables: readable row headers, no runaway first column */
.dtable--tight{ min-width: 760px; }
.dtable--tight tbody th[scope="row"]{
  white-space: normal; text-transform: none; letter-spacing: 0;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  color: var(--text-primary); vertical-align: top; line-height: 1.4;
  max-width: 15rem; min-width: 9rem;
}
.dtable--tight td{ vertical-align: top; }
.dtable--tight td.tiny{ font-size: .72rem; line-height: 1.5; color: var(--text-secondary); max-width: 17rem; }
.dtable--tight td.mono.num{ white-space: nowrap; }
.dtable--tight td:last-child{ min-width: 8rem; }
.dtable--tight tfoot th, .dtable--tight tfoot td{ border-top: 1px solid var(--line); font-weight: 600; }

/* ==============================================================
   V4.1 — SCROLL RAILS
   Equations and wide tables scroll inside their own rail instead of
   widening the document. A rail that overflows announces itself:
   edge fade, one-line cue, focusable region. A rail that fits shows
   nothing at all, so desktop stays uncluttered.
   ============================================================== */
.eq, .table-wrap{
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.eq::-webkit-scrollbar, .table-wrap::-webkit-scrollbar{ height: 7px; }
.eq::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track{ background: transparent; }
.eq::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb{
  background: var(--line); border-radius: 4px;
}
.eq:hover::-webkit-scrollbar-thumb, .table-wrap:hover::-webkit-scrollbar-thumb{ background: var(--line-accent); }

.eq.is-scrollable, .table-wrap.is-scrollable{
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent 100%);
}
.eq.is-scrollable.is-end, .table-wrap.is-scrollable.is-end{
  -webkit-mask-image: none; mask-image: none;
}
/* Trailing room inside the scroller so the final glyph is never read
   through the fade. Container padding is dropped by overflow in every
   engine, so it has to live on the scrolled content itself. */
.eq.is-scrollable .eq__row{ padding-right: 3.25rem; }
.table-wrap.is-scrollable > table{ margin-right: 3rem; }

.eq:focus-visible, .table-wrap:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

.rail-cue{
  display: flex; align-items: center; justify-content: flex-end; gap: .4rem;
  margin: .1rem 0 var(--space-2);
  white-space: nowrap; overflow: hidden;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint);
  user-select: none;
}
.rail-cue[hidden]{ display: none; }
/* An equation cue (afterend) can land directly above a table cue
   (beforebegin). Two hints are correct — they describe different rails —
   but they should read as one tight block, not two floating lines. */
.rail-cue + .rail-cue{ margin-top: calc(-1 * var(--space-2) + .1rem); }
.rail-cue__arrow{ color: var(--accent); font-size: .85rem; line-height: 1; }
@media (prefers-reduced-motion: no-preference){
  .rail-cue__arrow{ animation: railNudge 2.2s ease-in-out infinite; }
  @keyframes railNudge{ 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(3px);} }
}

/* The kernel adds no entrance animation of its own: the equations are the
   content, so they are present at first paint. */
@media (prefers-reduced-motion: reduce){
  .seg{ transition: none; }
  .rail-cue__arrow{ animation: none; }
}

/* Narrow screens: shrink the display equations one notch before relying on
   the rail, so fewer lines need scrolling at all. */
@media (max-width: 430px){
  .eq--hero .eq__row{ font-size: clamp(.95rem, .70rem + 1.6vw, 1.18rem); }
  .eq--sub .eq__row{ font-size: clamp(.86rem, .68rem + 1.1vw, 1.02rem); }
  .eq{ padding: var(--space-2) 0; }
}

/* Narrow screens: a row header must not eat the viewport, or the data columns
   it labels never get a chance to show. */
@media (max-width: 640px){
  .dtable--tight tbody th[scope="row"]{ min-width: 7.5rem; max-width: 10rem; font-size: .76rem; }
  .dtable--tight td.tiny{ max-width: 16rem; min-width: 11rem; }
  .dtable--tight th, .dtable--tight td{ padding: .38rem .5rem; }
  .rail-cue{ justify-content: flex-start; }
}

/* Wide tight tables: pin the row header so a swiped column keeps its label. */
@media (min-width: 0px){
  .dtable--tight tbody th[scope="row"],
  .dtable--tight thead th:first-child,
  .dtable--tight tfoot th[scope="row"]{
    position: sticky; left: 0; z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line-soft);
  }
  .dtable--tight thead th:first-child{ background: var(--surface-3); z-index: 3; }
  .dtable--tight tfoot th[scope="row"]{ background: var(--surface-2); }
  tr.is-unsupported th[scope="row"]{ background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
}

/* The one place the two version numbers are reconciled. Set apart from the
   surrounding lede so a reader can find it, without shouting. */
.kernel__naming{
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--accent);
  background: var(--surface-3);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: .88rem;
  color: var(--text-secondary);
}
.kernel__naming b{ color: var(--text-primary); }


/* ── stage caption lede ────────────────────────────────────────────
   Carries the score, reference and rate in words. It is the caption
   of record: the centre disc drops lines when the rendered disc is
   too small to hold them at a readable size, and this never does. */
.stage__caption-lede {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}


/* ── narrow orbit legend ───────────────────────────────────────────
   Below 780px the six callouts leave the SVG and become this list,
   so the figure can be a figure and the numbers can be readable.
   Two columns, colour key on the left edge, value right-aligned and
   tabular so the six values line up as a column of numbers. */
.orbit-legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; list-style: none; margin: var(--space-4) 0 0; padding: 0;
}
.orbit-legend__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 8px; row-gap: 1px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--key, var(--accent));
  border-radius: var(--radius-md); background: var(--surface-2);
  min-height: 44px;                       /* comfortable tap target */
  align-content: center;
}
.orbit-legend__name {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orbit-legend__w { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.orbit-legend__v {
  grid-column: 1 / -1; font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--key, var(--accent)); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.orbit-legend__item.is-veto { border-left-color: var(--error); }
.orbit-legend__item.is-veto .orbit-legend__v { color: var(--error); }
@media (max-width: 359px) { .orbit-legend { grid-template-columns: 1fr; } }


/* Long unbroken numeric strings (2.870979e-21 J / bit) and long identifiers
   must be allowed to break rather than widen their container. */
.mini__value, .mini__sub, .kpi__value, .kpi__ci { overflow-wrap: anywhere; }

/* --- touch target floor (WCAG 2.2 "Target Size (Minimum)", 24x24 CSS px) ---
   These three controls -- the evidence tier badges, the source links, and the
   inline callout jump links -- all sit below 24px tall at their natural type
   size. On pointer-coarse and narrow viewports the hit area is padded out to
   24px without changing the type size or the visible box, so the composition
   is unchanged while the target becomes reachable with a thumb. */
@media (max-width: 780px), (pointer: coarse) {
  .tier-badge,
  .callout__link,
  a.srclink {
    display: inline-flex; align-items: center;
    min-height: 24px; min-width: 24px;
  }
  a.srclink { padding-block: 5px; }
  .callout__link { padding-block: 2px; }
  /* Evidence-table and footnote links are set in small type; the same 24px
     floor is applied to their hit area. */
  td a, th a, li a, a.tiny, .tiny a,
  .editrow__prov a { display: inline-flex; align-items: center; min-height: 24px; }
}

/* V4.2 focus QA: pixel-diff testing of every focusable control type showed
   two with no visible focus indicator at all -- source links (which inherit
   only a colour change that :focus-visible did not alter) and the keyboard-
   focusable scroll rails. Both now carry an explicit ring. */
a.srclink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.table-wrap:focus-visible, .eq:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-md); }

/* ═══════════════════════════════ CREATOR SIGNATURE ══
   An editorial signature, not a banner: a hairline accent keyline, a small
   atom mark, and two tiers of type sitting on the same left edge as the hero
   eyebrow and headline. Separators are ::before marks rather than markup, so
   the stacked layout can switch them off and no wrapped line ever opens with
   an orphaned dot. */
.signature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-style: normal;                 /* <address> italicises by default */
  padding-left: var(--space-4);
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  margin-bottom: var(--space-6);      /* breathing room before the eyebrow */
}
.signature__mark { flex: none; color: var(--accent); opacity: 0.85; margin-top: 1px; }
.signature__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.signature__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin: 0; }

.signature__by {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint);
}
.signature__name {
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
  color: var(--text-primary); letter-spacing: 0.01em;
}
.signature__role { font-size: var(--fs-sm); color: var(--text-secondary); }

.signature__link {
  position: relative;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom: 1px;
  transition: color var(--dur-2) var(--ease-atom), border-color var(--dur-2) var(--ease-atom);
}
.signature__link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.signature__link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; color: var(--accent);
}
.signature__ext { margin-left: 3px; font-size: 0.9em; opacity: 0.7; }

/* The role always takes its own line. The full title is long enough that at
   every real hero-column width it would wrap anyway, and a wrapped line that
   opens with a separator dot is exactly the orphan this block must avoid. */
.signature__line--who .signature__role { flex-basis: 100%; }

/* Contact items carry no separator glyphs at all. Spacing and the accent
   underline do the separating, so the row can wrap at any width without ever
   leaving a dangling mark at the start or end of a line. */
.signature__line--contact { gap: 2px var(--space-5); }

@media (prefers-reduced-motion: reduce) {
  .signature__link { transition: none; }
}

/* Stacked layout: the two contact tiers become a column, every separator is
   withdrawn, and each link becomes a 44px practical touch target. */
/* Below 780px the contact links become separate tap actions. They stay in a
   wrapping ROW rather than a full column: three stacked 44px rows added enough
   hero height at 430px to push the primary CTAs under the sticky mobile bar,
   which is precisely the hero-height regression this block must not cause. */
@media (max-width: 780px), (pointer: coarse) {
  .signature__link { display: inline-flex; align-items: center; min-height: 24px; }
}
@media (max-width: 620px), (pointer: coarse) and (max-width: 820px) {
  .signature__line--contact { row-gap: 0; column-gap: var(--space-4); }
  .signature__link { min-height: 44px; }
}
@media (max-width: 460px) {
  .signature { gap: var(--space-2); padding-left: var(--space-3); margin-bottom: var(--space-3); }
  /* "Created by" stays on the same line as the name -- breaking it onto a third
     line cost ~20px of hero height, which was enough at 390px to push the
     primary CTAs under the sticky mobile bar. */
  .signature__line--who { gap: 0 var(--space-2); }
  .signature__mark { width: 18px; height: 18px; }
}


/* The sticky mobile readout used to be painted from the very first paint, so it
   sat on top of the hero's primary CTAs at the fold. That was survivable before
   the creator signature added height to the hero; at 375px it covered both
   buttons outright. The bar now stays out of the way until the hero call to
   action has scrolled away, which is also when a persistent readout starts
   being useful. `visibility: hidden` keeps it out of hit-testing and out of the
   accessibility tree while it is stowed. */
.mobilebar.is-stowed {
  visibility: hidden;
  opacity: 0;
  transform: translateY(120%);
  transition: transform var(--dur-2) var(--ease-atom), opacity var(--dur-2) var(--ease-atom), visibility 0s linear var(--dur-2);
}
.mobilebar { transition: transform var(--dur-2) var(--ease-atom), opacity var(--dur-2) var(--ease-atom); }
@media (prefers-reduced-motion: reduce) {
  .mobilebar, .mobilebar.is-stowed { transition: none; }
}