/* Psychohistory — Foundation / Encyclopedia Galactica aesthetic
   deep navy/near-black bg, amber/gold headings, cyan live-data. */

:root {
  --bg:        #070b14;
  --bg-2:      #0c1322;
  --panel:     #111a2c;
  --panel-2:   #16223a;
  --border:    #223252;
  --border-2:  #2f4567;
  --ink:       #d7e0ef;
  --ink-dim:   #93a3bf;
  --ink-faint: #65748f;
  --gold:      #e8b24a;
  --gold-dim:  #b78a37;
  --cyan:      #48c9d6;
  --cyan-dim:  #2f9aa6;
  --green:     #6fcf86;
  --amber-warn:#e8a14a;
  --red:       #e86a5a;
  --violet:    #b08be0;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --maxw: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 50% -200px, #11203a 0%, rgba(17,32,58,0) 60%),
    radial-gradient(900px 500px at 90% 10%, #0e1a30 0%, rgba(14,26,48,0) 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--gold); font-weight: 600; line-height: 1.18; letter-spacing: 0.01em; }
h2 { font-size: 1.85rem; margin: 0 0 .35em; }
h3 { font-size: 1.25rem; color: var(--gold); margin: 0 0 .4em; }
h4 { font-size: 1.02rem; color: var(--ink); margin: 0 0 .3em; }

a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(72,201,214,0.25); transition: border-color .15s, color .15s; }
a:hover { color: #6fe0ec; border-color: var(--cyan); }

p { margin: 0 0 1em; color: var(--ink); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
code, .mono { font-family: var(--mono); font-size: 0.88em; color: var(--cyan); }

/* ---- section scaffolding ---- */
section { padding: 56px 0; border-top: 1px solid rgba(34,50,82,0.55); }
section:first-of-type { border-top: none; }
.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-dim); margin-bottom: 10px;
}
.lead { font-size: 1.08rem; color: var(--ink-dim); max-width: 760px; }

/* ---- nav ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,11,20,0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .wrap { display: flex; align-items: center; gap: 22px; height: 52px; }
.brand { font-family: var(--serif); color: var(--gold); font-weight: 600; letter-spacing: .02em; }
.brand .glyph { color: var(--cyan); margin-right: 7px; }
.navlinks { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.navlinks a { font-size: .82rem; color: var(--ink-dim); border: none; letter-spacing: .02em; }
.navlinks a:hover { color: var(--gold); }
@media (max-width: 720px){ .navlinks { display:none; } }

/* ---- hero ---- */
.hero { padding-top: 70px; padding-bottom: 64px; }
.hero h1 { font-size: 2.9rem; margin: 0 0 .3em; max-width: 16ch; }
.hero .thesis { font-size: 1.18rem; color: var(--ink-dim); max-width: 720px; margin-bottom: 30px; }
.headline-stat {
  font-family: var(--serif); font-size: 1.35rem; color: var(--ink);
  border-left: 3px solid var(--gold); padding: 6px 0 6px 18px; margin: 22px 0 30px; max-width: 760px;
}
.headline-stat b { color: var(--cyan); font-weight: 600; }

.chips-row { display: flex; gap: 16px; flex-wrap: wrap; }
.statchip {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 22px; min-width: 150px;
}
.statchip .num { font-family: var(--serif); font-size: 2rem; color: var(--cyan); line-height: 1; }
.statchip .lbl { font-size: .78rem; color: var(--ink-dim); margin-top: 8px; letter-spacing: .03em; }

/* ---- generic panel / card ---- */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 22px;
}
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px){ .grid-2 { grid-template-columns: 1fr; } }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--gold-dim); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
tr:last-child td { border-bottom: none; }
.maptable td:first-child { color: var(--gold); font-family: var(--serif); font-size: 1.02rem; white-space: nowrap; }
.maptable td:last-child { color: var(--ink-faint); font-family: var(--mono); font-size: .78rem; }
.objtable td:first-child { color: var(--ink); }
.objtable td:nth-child(2){ color: var(--cyan); }

/* ---- demos ---- */
.demo-card { margin-bottom: 26px; }
.demo-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom: 4px; }
.demo-tag { font-family: var(--mono); font-size:.7rem; color: var(--gold-dim); letter-spacing:.16em; }
.chart { width: 100%; height: 340px; }
.chart.tall { height: 380px; }
.controls { display:flex; flex-wrap:wrap; gap: 20px 30px; margin: 16px 0 6px; align-items:flex-end; }
.ctrl { display:flex; flex-direction:column; gap:6px; min-width: 220px; flex:1; }
.ctrl label { font-size:.82rem; color: var(--ink-dim); display:flex; justify-content:space-between; gap:10px; }
.ctrl label b { color: var(--cyan); font-family: var(--mono); }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px; background: var(--border); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background: var(--gold); cursor:pointer; border: 2px solid #2a2110; box-shadow: 0 0 0 3px rgba(232,178,74,0.12); }
input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background: var(--gold); cursor:pointer; border:2px solid #2a2110; }

.readouts { display:flex; flex-wrap:wrap; gap: 12px; margin: 14px 0; }
.readout { background: var(--bg); border:1px solid var(--border); border-radius:9px; padding: 9px 14px; min-width: 120px; }
.readout .k { font-size:.68rem; color: var(--ink-faint); letter-spacing:.08em; text-transform:uppercase; }
.readout .v { font-family: var(--mono); font-size:1.1rem; color: var(--cyan); margin-top:2px; }
.readout.pinned .v { color: var(--green); }

.verdict {
  border-radius: 10px; padding: 12px 16px; font-size: .96rem; margin-top: 8px;
  border:1px solid var(--border); background: var(--panel-2); color: var(--ink);
}
.verdict b { font-family: var(--serif); }
.verdict.good   { border-color: rgba(111,207,134,.5); background: rgba(111,207,134,.08); }
.verdict.warn   { border-color: rgba(232,161,74,.5);  background: rgba(232,161,74,.08); }
.verdict.crit   { border-color: rgba(232,106,90,.5);  background: rgba(232,106,90,.10); }
.verdict.info   { border-color: rgba(72,201,214,.4);  background: rgba(72,201,214,.07); }

/* ---- layer chips ---- */
.lchip { display:inline-block; font-family: var(--mono); font-size:.7rem; padding: 2px 7px; border-radius: 5px; margin: 2px 3px 2px 0; border:1px solid var(--border); color: var(--ink-dim); background: var(--bg); }
.lchip.L0{ color:#d9b3ff; border-color:#5a4480; }
.lchip.L1{ color:#9fd9ff; border-color:#3a5e80; }
.lchip.L2{ color:#ffd98a; border-color:#80672f; }
.lchip.L3{ color:#9fe8c0; border-color:#356b53; }
.lchip.L4{ color:#ffb4d9; border-color:#80456a; }
.lchip.L5{ color:#ff9b8a; border-color:#80453c; }
.lchip.L6{ color:#8ad6e0; border-color:#356b75; }
.lchip.L7{ color:#e8b24a; border-color:#80672f; }

/* ---- scope verdict pills ---- */
.scope { display:inline-block; font-family: var(--mono); font-size:.7rem; padding: 3px 9px; border-radius: 20px; letter-spacing:.05em; white-space:nowrap; }
.scope.MODELED               { color:#6fcf86; background: rgba(111,207,134,.12); border:1px solid rgba(111,207,134,.4); }
.scope.PARTIAL               { color:#48c9d6; background: rgba(72,201,214,.12);  border:1px solid rgba(72,201,214,.4); }
.scope.NEEDS-DATA            { color:#e8b24a; background: rgba(232,178,74,.12);  border:1px solid rgba(232,178,74,.4); }
.scope.NORMATIVE-AS-VALENCE  { color:#b08be0; background: rgba(176,139,224,.12); border:1px solid rgba(176,139,224,.4); }
.scope.TAUTOLOGY             { color:#93a3bf; background: rgba(147,163,191,.10); border:1px solid rgba(147,163,191,.35); }

/* ---- scenario panel ---- */
.phase-banner {
  font-family: var(--serif); font-weight: 600; font-size: 1.3rem;
  border-radius: 12px; padding: 14px 20px; margin: 4px 0 8px;
  border: 1px solid var(--border); background: var(--panel-2);
  letter-spacing: .01em; transition: background .2s, border-color .2s, color .2s;
}
.phase-banner .phase-sub { display:block; font-family: var(--sans); font-weight:400; font-size:.86rem; color: var(--ink-dim); margin-top:4px; letter-spacing:0; }
.phase-banner.worldcup   { color:#9fe8c0; border-color: rgba(111,207,134,.55); background: rgba(111,207,134,.10); }
.phase-banner.transition { color:#ffd98a; border-color: rgba(232,161,74,.55);  background: rgba(232,161,74,.10); }
.phase-banner.pluribus   { color:#ff9b8a; border-color: rgba(232,106,90,.6);   background: rgba(232,106,90,.13); }
.phase-note { font-size:.86rem; color: var(--ink-faint); font-style: italic; border-left: 2px solid var(--gold-dim); padding-left:12px; margin: 0 0 16px; }

.ood-block { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.ood-head { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom: 8px; }
.ood-head .btn { margin-top: 0; }
.ood-cap { font-size:.86rem; color: var(--ink-dim); flex:1; min-width: 240px; }
#chartShock { height: 280px; }
.ood-readout { font-size:.9rem; color: var(--ink-dim); margin-top: 6px; font-family: var(--mono); }
.ood-readout b { color: var(--cyan); }
.honesty-caption { margin-top: 18px; font-size:.9rem; line-height:1.55; }
.honesty-caption b { color: var(--gold); }

/* ---- concepts section ---- */
.concept-legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin: 18px 0 26px; }
.cbadge { font-family: var(--mono); font-size:.68rem; letter-spacing:.04em; padding:3px 9px; border-radius:6px; border:1px solid var(--border); color: var(--ink-dim); white-space:nowrap; }
.cbadge.live     { color: var(--cyan);   border-color: rgba(72,201,214,.45);  background: rgba(72,201,214,.08); }
.cbadge.figure   { color: var(--gold);   border-color: rgba(232,178,74,.45);  background: rgba(232,178,74,.07); }
.cbadge.schematic{ color: var(--violet); border-color: rgba(176,139,224,.45);  background: rgba(176,139,224,.08); }
.cbadge.honest   { color: var(--green);  border-color: rgba(111,207,134,.4);   background: rgba(111,207,134,.06); }

.concept-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px){ .concept-grid { grid-template-columns: 1fr; } }

.card.concept { margin-bottom: 0; display:flex; flex-direction:column; }
.card.concept.wide { grid-column: 1 / -1; }
.concept-head { display:flex; align-items:center; gap:10px; margin-bottom: 6px; }
.concept-head .cnum { font-family: var(--mono); font-size:.92rem; color: var(--gold-dim); letter-spacing:.08em; }
.card.concept h3 { margin-bottom:.5em; }
.card.concept > p.dim { font-size:.95rem; }

.concept-demo { margin: 6px 0 10px; }
.concept-demo .ctrl { min-width:0; margin-bottom: 10px; }
.concept-demo .readouts { margin: 4px 0 0; }

.concept-fig { margin: 8px 0 10px; }
.concept-fig img { width:100%; border-radius:10px; border:1px solid var(--border); background: var(--bg); display:block; }
.concept-fig figcaption { font-size:.8rem; color: var(--ink-faint); margin-top:8px; line-height:1.45; }
.concept-fig-row { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; margin: 8px 0 10px; }
@media (max-width: 860px){ .concept-fig-row { grid-template-columns: 1fr; } }

.honesty-rail { font-size:.84rem; color: var(--ink-dim); line-height:1.5; margin: auto 0 10px; padding: 10px 12px; border-radius:9px; border:1px solid rgba(111,207,134,.28); background: rgba(111,207,134,.05); border-left: 3px solid var(--green); }
.honesty-rail b { color: var(--green); font-family: var(--serif); }
.honesty-rail em { color: var(--ink); font-style: normal; border-bottom:1px dotted var(--ink-faint); }

.concept-link { font-family: var(--mono); font-size:.8rem; color: var(--cyan); border:none; align-self:flex-start; }
.concept-link:hover { color:#6fe0ec; }

/* concept schematics */
.concept-schematic { margin: 6px 0 10px; }
.flux-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px; }
.flux-node { background: var(--bg); border:1px solid var(--border); border-radius:9px; padding:8px 12px; font-size:.86rem; color: var(--ink); flex:1; min-width: 120px; text-align:center; }
.flux-node small { color: var(--ink-faint); font-size:.72rem; }
.flux-node.carrier { border-color: rgba(72,201,214,.5); }
.flux-node.drift   { border-color: rgba(232,178,74,.5); }
.flux-node.valence { border-color: rgba(176,139,224,.5); }
.flux-arrow { font-family: var(--mono); font-size:.78rem; color: var(--gold-dim); white-space:nowrap; }
.flux-caption { font-size:.8rem; color: var(--ink-faint); font-style: italic; margin: 6px 0 0; line-height:1.45; }
.flux-caption em { color: var(--ink-dim); font-style: normal; }

.mini-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.mini-table th { font-family: var(--mono); font-size:.64rem; letter-spacing:.1em; color: var(--gold-dim); text-transform:uppercase; padding:7px 10px; border-bottom:1px solid var(--border); }
.mini-table td { padding:7px 10px; border-bottom:1px solid var(--border); color: var(--ink-dim); vertical-align:top; }
.mini-table tr:last-child td { border-bottom:none; }
.mini-table td:first-child { color: var(--ink); }
.mini-table td.g { color: var(--green); } .mini-table td.w { color: var(--amber-warn); } .mini-table td.r { color: var(--red); }

.engine-flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
.estep { background: var(--bg); border:1px solid var(--border); border-radius:9px; padding:8px 11px; font-size:.8rem; color: var(--ink); flex:1; min-width: 130px; }
.estep small { display:block; color: var(--ink-faint); font-size:.7rem; margin-top:3px; }
.earrow { font-family: var(--mono); color: var(--gold-dim); align-self:center; font-size:.9rem; }
.earrow.ecycle { color: var(--cyan); width:100%; text-align:center; margin-top:4px; }

.trilemma { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tri-node { font-family: var(--serif); color: var(--gold); font-size:1rem; background: var(--bg); border:1px solid var(--border-2); border-radius:9px; padding:10px 16px; flex:1; min-width:120px; text-align:center; }

/* ---- coverage dashboard ---- */
.cov-caption { font-size:.92rem; color: var(--ink-dim); font-style: italic; border-left: 2px solid var(--gold-dim); padding-left:14px; margin-top:14px; }

/* ---- table filter controls ---- */
.filterbar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom: 14px; }
.filterbar select, .filterbar input[type=text] {
  background: var(--bg); color: var(--ink); border:1px solid var(--border); border-radius:8px;
  padding: 8px 11px; font-family: var(--sans); font-size:.88rem; outline:none;
}
.filterbar input[type=text]{ min-width: 240px; flex:1; }
.filterbar select:focus, .filterbar input:focus { border-color: var(--cyan); }
.filtercount { font-family: var(--mono); font-size:.78rem; color: var(--ink-faint); margin-left:auto; }

#readingsTable td { font-size:.9rem; }
#readingsTable .r-rank { color: var(--ink-faint); font-family: var(--mono); width: 44px; }
#readingsTable .r-title { color: var(--ink); }
#readingsTable .r-score { font-family: var(--mono); color: var(--ink-dim); text-align:right; white-space:nowrap; }
#readingsTable tr.head-row { cursor: pointer; }
#readingsTable tr.head-row:hover td { background: rgba(72,201,214,0.04); }
#readingsTable .expander { color: var(--gold-dim); font-family: var(--mono); width: 22px; user-select:none; }
.detail-row td { background: var(--bg); }
.detail-box { padding: 4px 6px 8px; }
.detail-box .lab { font-family: var(--mono); font-size:.68rem; letter-spacing:.1em; color: var(--gold-dim); text-transform:uppercase; }
.detail-box p { margin: 3px 0 12px; font-size:.92rem; color: var(--ink-dim); }
.detail-box .mech { color: var(--ink); }

/* ---- classifier ---- */
textarea#classifyInput {
  width:100%; min-height: 96px; resize: vertical;
  background: var(--bg); color: var(--ink); border:1px solid var(--border); border-radius:10px;
  padding: 12px 14px; font-family: var(--sans); font-size:.98rem; line-height:1.5; outline:none;
}
textarea#classifyInput:focus { border-color: var(--cyan); }
.btn {
  background: linear-gradient(180deg,#e8b24a,#caa03f); color:#1a1407; border:none; border-radius:9px;
  padding: 10px 22px; font-family: var(--sans); font-weight:600; font-size:.92rem; cursor:pointer;
  letter-spacing:.02em; margin-top:12px; transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink-dim); border:1px solid var(--border); margin-left:8px; }
.classify-out { margin-top: 20px; }
.classify-out.hidden { display:none; }
.suggest-link { font-family: var(--mono); font-size:.84rem; }

/* ---- limits ---- */
.limits-list { list-style:none; padding:0; margin:0; }
.limits-list li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--border); position:relative; color: var(--ink-dim); }
.limits-list li:last-child { border-bottom:none; }
.limits-list li::before { content:"§"; position:absolute; left:0; top:12px; color: var(--gold-dim); font-family: var(--serif); }
.limits-list li b { color: var(--ink); font-family: var(--serif); }

footer { padding: 40px 0 70px; border-top: 1px solid var(--border); color: var(--ink-faint); font-size:.88rem; }
footer .provlinks { display:flex; gap: 22px; flex-wrap:wrap; margin-bottom: 14px; }
footer .provlinks a { font-family: var(--mono); font-size:.84rem; }

.note { font-size:.8rem; color: var(--ink-faint); font-style:italic; }
.offline-note { font-size:.78rem; color: var(--ink-faint); margin-top:6px; }

/* ---- index (concept reference map) ---- */
.idxtable td:first-child { color: var(--gold); font-family: var(--serif); font-size: .98rem; white-space: normal; width: 26%; }
.idxtable td:nth-child(2) { font-size: .88rem; }
.idxtable td:last-child { color: var(--cyan); font-family: var(--mono); font-size: .76rem; white-space: nowrap; width: 16%; }
.idxtable td:last-child a { font-family: var(--mono); }

/* ---- engine walkthrough ---- */
.engine-intro { margin-top: 24px; }
.engine-intro-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 820px){ .engine-intro-grid { grid-template-columns: 1fr; } }
.engine-intro-grid h4 { color: var(--gold); }
.engine-honestyrail {
  margin-top: 18px; border-radius: 10px; padding: 12px 16px;
  border:1px solid rgba(232,178,74,.35); background: rgba(232,178,74,.06); border-left: 3px solid var(--gold);
  font-size: .86rem; color: var(--ink-dim); line-height: 1.55;
  display:flex; flex-direction:column; gap:8px;
}
.ehr-tag { font-family: var(--mono); font-size: .68rem; letter-spacing:.16em; color: var(--gold); text-transform:uppercase; }
.ehr-real { color: var(--green); font-family: var(--mono); font-size: .8em; }
.ehr-ill  { color: var(--amber-warn); font-family: var(--mono); font-size: .8em; }

.engine-layers { display:flex; flex-direction:column; gap: 20px; margin-top: 26px; }
.card.engine-layer { margin-bottom: 0; }
.card.engine-layer.wide { border-color: var(--border-2); }
.el-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 8px; }
.el-head h3 { margin: 0; flex: 1; min-width: 200px; }
.el-badge {
  font-family: var(--mono); font-weight: 600; font-size: .82rem; letter-spacing:.06em;
  padding: 4px 10px; border-radius: 7px; border:1px solid var(--border-2);
  background: var(--bg); color: var(--ink); white-space: nowrap;
}
.el-badge.L0{ color:#d9b3ff; border-color:#5a4480; }
.el-badge.L1{ color:#9fd9ff; border-color:#3a5e80; }
.el-badge.L2{ color:#ffd98a; border-color:#80672f; }
.el-badge.L3{ color:#9fe8c0; border-color:#356b53; }
.el-badge.L4{ color:#ffb4d9; border-color:#80456a; }
.el-badge.L5{ color:#ff9b8a; border-color:#80453c; }
.el-badge.L6{ color:#8ad6e0; border-color:#356b75; }
.el-badge.L7{ color:var(--gold); border-color:#80672f; background: rgba(232,178,74,.08); }
.el-tag {
  font-family: var(--mono); font-size: .66rem; letter-spacing:.06em; padding: 4px 9px;
  border-radius: 6px; white-space: nowrap;
}
.el-tag.real { color: var(--green);     border:1px solid rgba(111,207,134,.45); background: rgba(111,207,134,.08); }
.el-tag.ill  { color: var(--amber-warn);border:1px solid rgba(232,161,74,.45);  background: rgba(232,161,74,.07); }
.el-contrib { font-size: .94rem; color: var(--ink-dim); margin-bottom: 12px; }
.el-contrib b { color: var(--ink); }
.el-body { margin: 8px 0 12px; }
.el-honest {
  font-size: .82rem; color: var(--ink-dim); line-height: 1.5; margin: 4px 0 0;
  padding: 10px 12px; border-radius: 9px;
  border:1px solid rgba(111,207,134,.24); background: rgba(111,207,134,.04); border-left: 3px solid var(--green);
}
.el-honest b { color: var(--green); }
.el-honest em { color: var(--ink); font-style: normal; }

.el-statrow { display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 12px; }
.el-stat {
  flex: 1; min-width: 180px; background: var(--bg); border:1px solid var(--border);
  border-radius: 10px; padding: 12px 16px;
}
.el-stat.warn { border-color: rgba(232,161,74,.4); background: rgba(232,161,74,.05); }
.el-statnum { font-family: var(--serif); font-size: 1.5rem; color: var(--cyan); line-height: 1.1; }
.el-stat.warn .el-statnum { color: var(--amber-warn); }
.el-statlbl { font-size: .78rem; color: var(--ink-dim); margin-top: 6px; line-height: 1.4; }

.el-resolutions { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 820px){ .el-resolutions { grid-template-columns: 1fr; } }
.el-res { background: var(--bg); border:1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.el-res.coarse { border-color: rgba(111,207,134,.4); }
.el-res.medium { border-color: rgba(232,161,74,.4); }
.el-res.fine   { border-color: rgba(232,106,90,.4); }
.el-reshd { font-family: var(--mono); font-size: .7rem; letter-spacing:.06em; color: var(--ink-faint); text-transform:uppercase; margin-bottom: 8px; }
.el-resverdict { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; margin-bottom: 8px; }
.el-resverdict.good { color: var(--green); }
.el-resverdict.warn { color: var(--amber-warn); }
.el-resverdict.crit { color: var(--red); }
.el-res p { font-size: .84rem; margin: 0; }
.el-bottomline {
  border-radius: 10px; padding: 14px 18px; font-size: .96rem; color: var(--ink);
  border:1px solid var(--border-2); background: var(--panel-2); line-height: 1.6;
}
.el-bottomline b:first-child { font-family: var(--serif); color: var(--gold); }

/* ============================================================
   MULTI-PAGE additions (Home / Tutorial / Math / Tests & Data)
   ============================================================ */

/* active nav state + a couple of accent links */
.navlinks a.active { color: var(--gold); border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.navlinks a.pdf { color: var(--cyan); }

/* sub-page hero (smaller than the landing hero) */
.page-hero { padding-top: 52px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: 2.25rem; margin: 6px 0 .35em; max-width: 22ch; }
.page-hero .lead { font-size: 1.1rem; }
.crumb { font-family: var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-dim); }
.crumb a { color: var(--gold-dim); border:none; }
.crumb a:hover { color: var(--gold); }

/* ---- the 4-pillar navigation hub on the landing page ---- */
.hub-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 26px; }
@media (max-width: 820px){ .hub-grid { grid-template-columns: 1fr; } }
a.hub-card {
  display:block; border:1px solid var(--border); border-radius:16px; padding: 26px 26px 22px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  color: var(--ink); transition: border-color .16s, transform .16s, box-shadow .16s;
}
a.hub-card:hover { border-color: var(--gold-dim); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hub-card .hub-eyebrow { font-family: var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--cyan-dim); }
.hub-card h3 { font-size: 1.5rem; margin: 8px 0 .3em; }
.hub-card p { color: var(--ink-dim); margin-bottom: 14px; }
.hub-card .hub-go { font-family: var(--mono); font-size:.8rem; color: var(--gold); }
.hub-card .hub-meta { font-size:.76rem; color: var(--ink-faint); margin-top:10px; display:flex; gap:14px; flex-wrap:wrap; }

/* ---- verdict cards (tests & data) ---- */
.verdict-card { border:1px solid var(--border); border-left-width:4px; border-radius:12px; padding: 20px 22px; margin-bottom: 22px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%); }
.verdict-card.pass        { border-left-color: var(--green); }
.verdict-card.partial     { border-left-color: var(--amber-warn); }
.verdict-card.refuted     { border-left-color: var(--red); }
.verdict-card.contradicted{ border-left-color: var(--red); }
.verdict-card.supported   { border-left-color: var(--green); }
.verdict-card.mixed       { border-left-color: var(--violet); }
.verdict-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.verdict-head h3 { margin:0; }
.vtest { font-family: var(--mono); font-size:.74rem; color: var(--gold-dim); letter-spacing:.1em; }
.vbadge { font-family: var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.06em; padding: 3px 10px; border-radius: 999px; text-transform:uppercase; }
.vbadge.pass        { background: rgba(111,207,134,.14); color: var(--green); border:1px solid rgba(111,207,134,.4); }
.vbadge.partial     { background: rgba(232,161,74,.14);  color: var(--amber-warn); border:1px solid rgba(232,161,74,.4); }
.vbadge.refuted,
.vbadge.contradicted{ background: rgba(232,106,90,.14);  color: var(--red); border:1px solid rgba(232,106,90,.4); }
.vbadge.supported   { background: rgba(111,207,134,.14); color: var(--green); border:1px solid rgba(111,207,134,.4); }
.vbadge.mixed       { background: rgba(176,139,224,.14); color: var(--violet); border:1px solid rgba(176,139,224,.4); }

.statrow { display:flex; gap: 14px; flex-wrap:wrap; margin: 14px 0; }
.statbox { flex:1; min-width: 150px; border:1px solid var(--border); border-radius:10px; padding: 12px 14px; background: var(--panel-2); }
.statbox.warn { border-color: rgba(232,161,74,.4); }
.statbox.good { border-color: rgba(111,207,134,.4); }
.statbox .sb-num { font-family: var(--serif); font-size: 1.5rem; color: var(--cyan); line-height:1.1; }
.statbox.warn .sb-num { color: var(--amber-warn); }
.statbox.good .sb-num { color: var(--green); }
.statbox .sb-lbl { font-size:.76rem; color: var(--ink-dim); margin-top:6px; }

.testfig { margin: 14px 0 6px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#0a0f1a; }
.testfig img { width:100%; display:block; }
.testfig figcaption { padding: 10px 14px; font-size:.82rem; color: var(--ink-dim); border-top:1px solid var(--border); }
.testhonest { font-size:.84rem; color: var(--ink-faint); border-top:1px dashed var(--border); padding-top:10px; margin-top:6px; }
.testhonest b { color: var(--ink-dim); }

/* ---- methodology rail ---- */
.method-rail { border:1px solid var(--border-2); border-radius:12px; background: var(--panel-2); padding: 18px 22px; margin: 18px 0 30px; }
.method-rail h4 { color: var(--gold); }
.method-rail ul { margin: 6px 0 0; padding-left: 1.1em; }
.method-rail li { color: var(--ink-dim); margin-bottom: 6px; }

/* ---- falsifier scorecard ---- */
.scorecard td:first-child { font-family: var(--mono); font-size:.8rem; color: var(--gold); white-space:nowrap; }
.scorecard .sc-pass        { color: var(--green); font-weight:600; }
.scorecard .sc-partial     { color: var(--amber-warn); font-weight:600; }
.scorecard .sc-refuted,
.scorecard .sc-contradicted{ color: var(--red); font-weight:600; }
.scorecard .sc-open        { color: var(--ink-faint); }
.scorecard .sc-pending     { color: var(--violet); font-weight:600; }

/* ---- math page (KaTeX) ---- */
.math-block { border:1px solid var(--border); border-radius:12px; padding: 18px 22px; margin: 18px 0;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%); }
.math-block h3 { margin-bottom:.3em; }
.math-eq { background: var(--panel-2); border:1px solid var(--border); border-radius:8px; padding: 14px 16px; margin: 12px 0; overflow-x:auto; }
.katex { color: var(--ink); font-size: 1.06em; }
.math-where { font-size:.86rem; color: var(--ink-dim); }
.math-where code { color: var(--cyan); }
.math-link { font-family: var(--mono); font-size:.8rem; }
.tag-correction { display:inline-block; font-family: var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--amber-warn); border:1px solid rgba(232,161,74,.4); border-radius:999px; padding:2px 9px; margin-left:8px; }

/* prevtables used on several pages */
.kv { display:grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size:.9rem; margin: 8px 0; }
.kv dt { color: var(--gold-dim); font-family: var(--mono); font-size:.78rem; }
.kv dd { margin:0; color: var(--ink-dim); }