/* ===========================================================================
   Footnotes to Plato — site chrome
   Extends the design language the two viewers already use: serif display,
   mono for labels, calm blue-lavender, saturated colour reserved for data.
   ======================================================================== */
:root{
  --paper:#f7f8fb; --ink:#1c2230; --ink-soft:#5b6478; --rule:#d7dced;
  --lav:#8b86c9; --lav-deep:#5a5497;
  --p-floor:#5a5497; --p-band:#8f8ad0;
  --a-floor:#1f9e8a; --a-band:#5fc4ac;
  --uncertain:#b06a3a; --uncertain-soft:#e7d3c4;
  --shadow:0 1px 2px rgba(28,34,48,.06),0 4px 16px rgba(28,34,48,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --maxw:820px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:100; background:#fff; padding:8px 12px;
  border-radius:6px; box-shadow:var(--shadow)}

/* ---- header -------------------------------------------------------------- */
header.site{
  position:sticky; top:0; z-index:40; background:rgba(247,248,251,.94);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--rule);
}
header.site .bar{
  max-width:1120px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; gap:22px;
}
.brand{text-decoration:none; color:var(--ink); flex:none}
.brand .bt{
  font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.01em;
}
.mainnav{display:flex; gap:2px; flex-wrap:wrap; margin-left:auto}
.mainnav a{
  font-size:13.5px; color:var(--ink-soft); text-decoration:none;
  padding:6px 10px; border-radius:6px;
}
.mainnav a:hover{color:var(--ink); background:#eef1fa}
.mainnav a.on{color:var(--lav-deep); font-weight:600; background:#eef1fa}
.navtoggle{
  display:none; margin-left:auto; border:1px solid var(--rule); background:#fff;
  border-radius:7px; font-size:16px; padding:4px 10px; cursor:pointer;
}
@media (max-width:760px){
  .navtoggle{display:block}
  .mainnav{
    display:none; width:100%; flex-direction:column; margin:8px 0 2px;
    border-top:1px solid var(--rule); padding-top:8px;
  }
  .mainnav.open{display:flex}
  header.site .bar{flex-wrap:wrap}
}

/* ---- layout -------------------------------------------------------------- */
main{max-width:var(--maxw); margin:0 auto; padding:34px 24px 90px}
main.wide{max-width:1120px}
.pagehead{border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:22px}
.pagehead h1{
  font-family:var(--serif); font-weight:600; font-size:40px; line-height:1.12;
  letter-spacing:.01em; margin:0 0 6px;
}
.pagehead .sub{
  font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:16px;
}
@media (max-width:600px){ .pagehead h1{font-size:31px} }

/* ---- prose --------------------------------------------------------------- */
.prose{font-size:15.5px}
.prose h2{
  font-family:var(--serif); font-weight:600; font-size:25px; margin:34px 0 10px;
  padding-bottom:5px; border-bottom:1px solid var(--rule); scroll-margin-top:80px;
}
.prose h3{font-family:var(--serif); font-weight:600; font-size:19px;
  margin:26px 0 8px; scroll-margin-top:80px}
.prose h4{font-size:15px; font-weight:600; margin:20px 0 6px; color:var(--ink-soft);
  font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px; padding-left:22px}
.prose li{margin:4px 0}
.prose li > ul, .prose li > ol{margin:4px 0}
.prose a{color:var(--lav-deep); text-decoration:none; border-bottom:1px solid var(--rule)}
.prose a:hover{border-color:var(--lav)}
.prose strong{font-weight:600}
.prose code{
  font-family:var(--mono); font-size:12.5px; background:#eef1fa;
  border:1px solid var(--rule); border-radius:4px; padding:1px 5px;
}
.prose pre{
  background:#fff; border:1px solid var(--rule); border-radius:9px;
  padding:13px 15px; overflow-x:auto; box-shadow:var(--shadow); margin:0 0 16px;
}
.prose pre code{background:none; border:0; padding:0; font-size:12.5px; line-height:1.55}
.prose blockquote{
  margin:0 0 16px; padding:10px 16px; border-left:3px solid var(--lav);
  background:#eef1fa; border-radius:0 8px 8px 0; color:var(--ink-soft);
}
.prose hr{border:0; border-top:1px solid var(--rule); margin:28px 0}
.prose img{max-width:100%; height:auto; border-radius:8px}
.anchor{
  margin-left:8px; color:var(--rule); text-decoration:none; border:0;
  font-size:.75em; opacity:0; transition:opacity .12s;
}
h1:hover .anchor,h2:hover .anchor,h3:hover .anchor{opacity:1}

.tablewrap{overflow-x:auto; margin:0 0 16px}
.prose table{border-collapse:collapse; width:100%; font-size:13.5px; background:#fff}
.prose th,.prose td{border:1px solid var(--rule); padding:7px 10px; text-align:left;
  vertical-align:top}
.prose th{background:#eef1fa; font-weight:600; font-family:var(--sans)}

/* ---- table of contents --------------------------------------------------- */
.toc{
  background:#fff; border:1px solid var(--rule); border-radius:10px;
  box-shadow:var(--shadow); padding:14px 18px; margin:0 0 26px;
}
.toc-h{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lav-deep); margin-bottom:8px;
}
.toc ul{list-style:none; margin:0; padding:0; columns:2; column-gap:26px}
@media (max-width:640px){ .toc ul{columns:1} }
.toc li{margin:2px 0; break-inside:avoid; font-size:13px}
.toc li.l3{padding-left:14px; font-size:12.5px}
.toc a{color:var(--ink-soft); text-decoration:none}
.toc a:hover{color:var(--lav-deep)}

/* ---- landing-page components --------------------------------------------- */
.lede{font-size:17.5px; line-height:1.55; color:var(--ink); max-width:70ch}
.lede + .lede{margin-top:12px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px; margin:26px 0}
.card{
  background:#fff; border:1px solid var(--rule); border-radius:11px;
  box-shadow:var(--shadow); padding:18px 20px; text-decoration:none; color:inherit;
  display:block; transition:transform .1s, box-shadow .1s;
}
a.card:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(28,34,48,.08),0 10px 26px rgba(28,34,48,.10)}
.card h3{font-family:var(--serif); font-size:19px; margin:0 0 6px; font-weight:600}
.card p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5}
.card .go{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lav-deep); margin-top:10px; display:block;
}

.callout{
  border:1px solid var(--rule); border-left:3px solid var(--lav-deep);
  background:#eef1fa; border-radius:0 9px 9px 0; padding:14px 18px; margin:22px 0;
  font-size:14.5px;
}
.callout.warn{border-left-color:var(--uncertain); background:#faf1ea;
  border-color:var(--uncertain-soft)}
.callout.warn strong{color:var(--uncertain)}
.callout p:last-child{margin-bottom:0}
.callout h4{margin-top:0}

.figure{margin:24px 0}
.figure .cap{
  font-size:12.5px; color:var(--ink-soft); margin-top:9px; line-height:1.5;
  padding-top:8px; border-top:1px solid var(--rule);
}
.figure .cap b{color:var(--ink)}

.statrow{display:flex; flex-wrap:wrap; gap:10px 30px; margin:20px 0 24px;
  padding:16px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.stat{flex:1; min-width:120px}
.stat .n{font-family:var(--serif); font-size:27px; font-weight:600; line-height:1.1}
.stat .l{font-size:12px; color:var(--ink-soft); margin-top:2px}

.viewer-intro{font-size:14.5px; color:var(--ink-soft); max-width:78ch;
  margin:0 0 4px; line-height:1.55}
.viewer-intro p{margin:0 0 10px}
.viewer-intro strong{color:var(--ink)}

/* ---- footer -------------------------------------------------------------- */
footer.site{border-top:1px solid var(--rule); background:#fff; margin-top:40px}
.fwrap{
  max-width:1120px; margin:0 auto; padding:26px 24px 34px;
  display:flex; flex-wrap:wrap; gap:18px 40px; align-items:flex-start;
  font-size:13px; color:var(--ink-soft);
}
.fwrap > div:first-child{flex:1; min-width:280px; max-width:62ch}
.fwrap .muted{font-size:12px; line-height:1.5; display:block; margin-top:5px}
.flinks{display:flex; flex-direction:column; gap:3px}
.flinks a{color:var(--ink-soft); text-decoration:none; font-size:12.5px}
.flinks a:hover{color:var(--lav-deep)}

@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

/* ---- landing summary chart ------------------------------------------------ */
.lb-key{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  font-size:12px; color:var(--ink-soft); margin-bottom:18px}
.lb-key .k{display:flex; align-items:center; gap:6px}
.lb-key .sw{width:22px; height:11px; border-radius:2px; flex:none}
.lb-key .sw.floor{background:linear-gradient(90deg,var(--p-floor) 50%,var(--a-floor) 50%)}
.lb-key .sw.fade{background:linear-gradient(90deg,var(--p-floor),rgba(196,192,232,0))}
.lb-key .chip{width:11px; height:11px; border-radius:3px; flex:none}
.lb-key .chip.p{background:var(--p-floor)} .lb-key .chip.a{background:var(--a-floor)}

.lb-tier{margin:24px 0 6px}
.lb-h{display:flex; align-items:baseline; gap:11px; margin-bottom:3px}
.lb-h h3{font-family:var(--serif); font-size:20px; margin:0; font-weight:600}
.lb-h .tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; padding:2px 7px; border-radius:5px}
.lb-h .tag.t{color:var(--lav-deep); background:#eef1fa; border:1px solid var(--rule)}
.lb-h .tag.u{color:var(--uncertain); background:#faf1ea; border:1px solid var(--uncertain-soft)}
.lb-note{font-size:12.5px; color:var(--ink-soft); margin:0 0 12px; max-width:76ch;
  line-height:1.5}
.lb-note b{color:var(--ink)}
.lb-rows{display:flex; flex-direction:column; gap:2px}
.lb-row{display:grid; grid-template-columns:132px 1fr 62px; align-items:center;
  gap:10px; padding:2px 5px; border-radius:5px}
.lb-row:hover{background:#fff; box-shadow:var(--shadow)}
.lb-name{font-family:var(--serif); font-size:13.5px; text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-track{position:relative; height:15px; display:flex; align-items:center}
.lb-floor{height:15px; border-radius:2px 0 0 2px; min-width:1px; display:block}
.lb-fade{height:15px; border-radius:0 3px 3px 0; display:block}
.lb-val{font-family:var(--mono); font-size:11px; color:var(--ink-soft); text-align:right}
@media (max-width:600px){
  .lb-row{grid-template-columns:96px 1fr 48px; gap:7px}
  .lb-name{font-size:12px}
}

/* draft banner: only rendered when built with --draft. Deliberately loud —
   its job is to stop a half-checked figure being screenshotted and cited. */
.draftbar{
  background:var(--uncertain); color:#fff; text-align:center;
  font-size:12.5px; padding:6px 16px; letter-spacing:.01em;
  position:sticky; top:0; z-index:50;
}