/* pki.sgit.ai — shared stylesheet. Same design language as sgit.ai and nhi.sgit.ai (light theme). */
:root{
  --bg:#faf9f5; --panel:#ffffff; --panel2:#f2f0e9; --line:#e5e1d5; --line2:#d5d0c2;
  --fg:#1c1d21; --dim:#5c5f66; --dim2:#8a8d94;
  --accent:#0f766e; --accent-dk:#115e59; --yellow:#a16207; --warm:#b45309; --red:#b91c1c;
  --term-bg:#0d1117; --term-green:#3fb950; --term-red:#f85149; --term-cyan:#58a6ff;
  --term-yellow:#d29922; --term-dim:#8b949e;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:ui-serif,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --measure:960px; --wide:1360px;
  --shadow:0 1px 2px rgba(28,29,33,.05),0 4px 14px rgba(28,29,33,.04);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.65}
a{color:var(--accent-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em}
code,pre,kbd{font-family:var(--mono)}
p code,li code,td code,.note code{overflow-wrap:anywhere;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:.08em .35em;font-size:.84em;color:#24343f}
.inner{max-width:var(--measure);margin:0 auto;padding:0 1.1rem}
.dim{color:var(--dim)} .small{font-size:.85rem}

/* ---------- top nav ---------- */
nav.site{position:sticky;top:0;z-index:50;background:rgba(250,249,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.site .row{max-width:var(--wide);margin:0 auto;display:flex;align-items:center;gap:1.1rem;padding:.7rem 1.1rem;flex-wrap:wrap}
nav.site .brand{font-weight:800;font-size:1.05rem;color:var(--fg);letter-spacing:-.02em;white-space:nowrap}
nav.site .brand span{color:var(--accent)}
nav.site a.nl{color:var(--dim);font-size:.85rem}
nav.site a.nl.here{color:var(--fg);font-weight:600}
nav.site a.nl:hover{color:var(--fg);text-decoration:none}
nav.site .parent{border:1px solid var(--accent);border-radius:6px;padding:.28rem .7rem;
  color:var(--accent-dk);font-size:.78rem;white-space:nowrap;background:var(--panel);font-weight:500}
nav.site .parent b{font-weight:800}
nav.site .parent:hover{background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}
nav.site .gh{border:1px solid var(--line2);border-radius:6px;padding:.28rem .7rem;color:var(--fg);font-size:.78rem;white-space:nowrap;background:var(--panel)}
nav.site .gh:hover{border-color:var(--accent);text-decoration:none}
/* Two-level nav, the same component sgit.ai runs. The flat one here reached twelve
   items and wrapped to two rows on a laptop and four on a phone. Opening is :hover for
   a mouse and :focus-within for a keyboard — no JS needed for either — plus a click
   toggle (nav.js) for touch, where hover does not exist. Every group label is itself a
   link to that section's own page, so nothing is reachable only by opening a menu: the
   submenu is a shortcut, never the only door. */
nav.site .ni{position:relative}
nav.site .ni-has > .nl{display:inline-flex;align-items:center;gap:.25rem}
nav.site .caret{font-size:.55em;opacity:.55;transition:transform .15s ease}
nav.site .sub{position:absolute;left:-.7rem;top:100%;min-width:12rem;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 6px 24px rgba(28,29,33,.13);padding:.4rem;
  display:none;flex-direction:column;gap:.05rem}
nav.site .ni-has:hover > .sub,
nav.site .ni-has:focus-within > .sub,
nav.site .ni-has.open > .sub{display:flex}
nav.site .ni-has:hover .caret,
nav.site .ni-has.open .caret{transform:rotate(180deg)}
nav.site .sub a.sl{display:block;padding:.36rem .6rem;border-radius:6px;
  font-size:.83rem;color:var(--dim);white-space:nowrap}
nav.site .sub a.sl:hover{background:var(--panel2);color:var(--fg);text-decoration:none}
nav.site .sub a.sl.here{color:var(--accent-dk);font-weight:600}
/* Phone: the whole thing collapses behind one button, so the bar stays a single row and
   opening it gives a vertical list with each group's children indented under it. */
.nav-items{display:contents}
.nav-toggle{display:none}
@media (max-width:820px){
  nav.site .row{position:relative;gap:.6rem}
  .nav-toggle{display:block;margin-left:auto;order:3;background:var(--panel);
    border:1px solid var(--line2);border-radius:6px;padding:.3rem .7rem;
    font:600 .78rem/1 var(--sans);color:var(--fg);cursor:pointer}
  .nav-toggle:hover{border-color:var(--accent)}
  nav.site .parent{order:2}
  nav.site .gh{order:4;margin-left:0}
  .nav-items{display:none;order:5;width:100%;flex-direction:column;gap:.1rem;
    padding:.5rem 0 .3rem;border-top:1px solid var(--line);margin-top:.4rem}
  nav.site.open .nav-items{display:flex}
  nav.site .ni{width:100%}
  nav.site .ni > .nl{display:block;padding:.42rem .2rem;font-size:.95rem}
  nav.site .caret{display:none}
  nav.site .sub{position:static;display:flex;flex-direction:column;border:0;
    box-shadow:none;background:none;padding:0 0 .3rem .9rem;min-width:0;gap:0}
  nav.site .sub a.sl{padding:.3rem .2rem;font-size:.86rem}
}
.stage-pill{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--warm);
  border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.07);border-radius:99px;padding:.15rem .55rem;white-space:nowrap}
a.ver{font-family:var(--mono);font-size:.68rem;color:var(--dim2);border:1px solid var(--line);border-radius:99px;padding:.14rem .55rem;white-space:nowrap}
a.ver:hover{color:var(--accent-dk);border-color:var(--accent);text-decoration:none}

/* ---------- hero ---------- */
header.hero{text-align:center;padding:4.2rem 1.2rem 2.6rem;max-width:1000px;margin:0 auto}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
header.hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.1rem);margin:.9rem 0;color:#101114}
header.hero .sub{color:var(--dim);font-size:1.05rem;max-width:680px;margin:0 auto 1.7rem;line-height:1.6}
.ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;align-items:center}
.cta1{background:var(--accent-dk);color:#fff;border-radius:8px;padding:.6rem 1.2rem;font-size:.9rem;font-weight:600}
.cta1:hover{background:var(--accent);text-decoration:none}
.cta2{color:var(--accent-dk);font-size:.9rem;font-weight:600}

/* ---------- sections ---------- */
section.band{padding:3rem 0;scroll-margin-top:64px}
section.band.alt{background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band h2{font-family:var(--serif);font-size:1.9rem;color:#101114;text-align:center;margin:0 0 .6rem}
section.band .blurb{color:var(--dim);text-align:center;max-width:660px;margin:0 auto 1.8rem;font-size:.95rem}

/* ---------- cards ---------- */
.cards{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1160px;margin:0 auto;padding:0 1.1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.05rem 1.15rem;display:block;color:var(--fg);box-shadow:var(--shadow)}
a.card:hover{border-color:var(--accent);text-decoration:none}
.card .tag{font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--warm)}
.card h3,.card h4{margin:.25rem 0 .45rem;font-size:.95rem;color:#101114;font-family:var(--sans)}
.card p{margin:0;font-size:.8rem;color:var(--dim);line-height:1.55}
.card .go{display:inline-block;margin-top:.55rem;font-size:.75rem;color:var(--accent-dk);font-weight:600}

/* ---------- two-populations split table ---------- */
.split{max-width:1000px;margin:0 auto;padding:0 1.1rem}
.split table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.split th{background:var(--panel2);text-align:left;padding:.6rem .9rem;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.split th.run{color:var(--accent-dk)} .split th.rent{color:var(--warm)}
.split td{padding:.6rem .9rem;border-top:1px solid var(--line);vertical-align:top;line-height:1.5;color:#34363c}
.split td b.no{color:var(--red)} .split td b.yes{color:var(--accent-dk)}
.split .cap{font-size:.78rem;color:var(--dim);text-align:center;margin-top:.9rem;line-height:1.6}

/* ---------- terminal-style figure ---------- */
pre.shell{background:var(--term-bg);border-radius:10px;padding:.9rem 1.1rem;
  font-size:.79rem;line-height:1.65;overflow-x:auto;margin:1.1rem 0;color:#c9d1d9;box-shadow:var(--shadow)}
pre.shell .g{color:var(--term-green)} pre.shell .r{color:var(--term-red)} pre.shell .cy{color:var(--term-cyan)}
pre.shell .y{color:var(--term-yellow)} pre.shell .d{color:var(--term-dim)}

/* ---------- docs & content pages ---------- */
main.doc{max-width:var(--measure);margin:0 auto;padding:2.4rem 1.4rem 3.5rem}
main.doc .crumb{font-size:.75rem;color:var(--dim2);margin-bottom:1rem}
main.doc .crumb a{color:var(--dim)}
main.doc h1{font-family:var(--serif);font-size:2.1rem;color:#101114;margin:.2rem 0 .9rem}
main.doc h2{font-family:var(--serif);font-size:1.4rem;color:#101114;margin:2.2rem 0 .7rem;scroll-margin-top:70px}
main.doc h3{font-size:1.02rem;color:#101114;margin:1.7rem 0 .5rem}
main.doc .lead{color:#34363c;font-size:1.12rem}
main.doc p, main.doc li{color:#34363c;font-size:.98rem}
main.doc ul,main.doc ol{padding-left:1.3rem}
main.doc li{margin:.3rem 0}
main.doc table{width:100%;border-collapse:collapse;font-size:.88rem;margin:1.1rem 0;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
main.doc th{background:var(--panel2);text-align:left;padding:.55rem .8rem;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
main.doc td{padding:.55rem .8rem;border-top:1px solid var(--line);vertical-align:top;line-height:1.5;color:#34363c}
.tablewrap{overflow-x:auto}
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;font-size:.85rem;color:#34363c;margin:1.2rem 0;box-shadow:var(--shadow)}
.warnbox{border:1px solid var(--line);border-left:3px solid var(--yellow);background:var(--panel);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;font-size:.85rem;color:#34363c;margin:1.2rem 0;box-shadow:var(--shadow)}
.note b,.warnbox b{color:#101114}
blockquote.challenge{margin:1.6rem 0;padding:1.1rem 1.3rem;border-left:4px solid var(--warm);
  background:var(--panel);border-radius:0 10px 10px 0;font-size:1rem;font-style:italic;color:#34363c;
  box-shadow:var(--shadow);line-height:1.7}
.pagenav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.8rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.85rem}

/* evidence status boxes */
.evbox{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
  background:var(--panel);padding:1rem 1.15rem;box-shadow:var(--shadow);margin:.9rem 0 1.4rem}
.evbox.ev-warn{border-left-color:var(--warm)}
.evbox p:first-of-type{margin-top:.5rem}
.evbox p:last-child{margin-bottom:0}
.evtag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--accent);border-radius:99px;padding:.16rem .6rem}
.evbox.ev-warn .evtag{background:var(--warm)}

/* option assessment pages */
.opt-verdict{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  border-radius:99px;padding:.14rem .6rem;white-space:nowrap;vertical-align:middle}
.opt-yes{color:#0f766e;border:1px solid rgba(15,118,110,.35);background:rgba(15,118,110,.08)}
.opt-no{color:#b91c1c;border:1px solid rgba(185,28,28,.35);background:rgba(185,28,28,.08)}
.opt-part{color:#b45309;border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.08)}

/* task board */
.tstat{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;border-radius:99px;padding:.1rem .5rem;white-space:nowrap}
.t-done{color:#0f766e;border:1px solid rgba(15,118,110,.35);background:rgba(15,118,110,.08)}
.t-doing{color:#1d4ed8;border:1px solid rgba(29,78,216,.3);background:rgba(29,78,216,.07)}
.t-open{color:#b45309;border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.08)}
.t-need{color:#b91c1c;border:1px solid rgba(185,28,28,.35);background:rgba(185,28,28,.08)}

/* versions table */
table.vers td.vnum{font-family:var(--mono);font-weight:700;color:var(--accent-dk);white-space:nowrap}

/* the hope ladder */
.hopeladder{display:flex;flex-direction:column;gap:.9rem;margin:1.4rem 0 2rem}
.hopeladder .cap{position:relative;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:10px;padding:1.1rem 1.3rem 1.1rem 3.4rem;box-shadow:var(--shadow)}
.hopeladder .capnum{position:absolute;left:1.15rem;top:1.15rem;font-family:var(--mono);font-size:.78rem;
  font-weight:700;color:var(--accent);letter-spacing:-.03em}
.hopeladder .cap h3{margin:0 0 .5rem;font-size:1.05rem;color:#101114;letter-spacing:-.015em}
.hopeladder .cap p{margin:.5rem 0;font-size:.92rem;line-height:1.65;color:#34363c}
@media (max-width:560px){.hopeladder .cap{padding:2.4rem 1rem 1rem}.hopeladder .capnum{top:.85rem;left:1rem}}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);margin-top:3.5rem;padding:2.2rem 0 3rem;background:var(--panel2)}
footer.site .cols{max-width:var(--wide);margin:0 auto;padding:0 1.1rem;display:grid;gap:1.6rem;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr}
@media (max-width:1080px){footer.site .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
@media (max-width:940px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h4{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0 0 .6rem}
footer.site a{display:block;color:var(--dim);font-size:.82rem;padding:.15rem 0}
footer.site .brandline{font-weight:800;color:var(--fg)}
footer.site .brandline span{color:var(--accent)}
footer.site p{color:var(--dim);font-size:.76rem;line-height:1.65;max-width:420px}
footer.site .netline{color:var(--dim);font-size:.78rem;line-height:1.8;max-width:420px;
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:.55rem 0;margin:.9rem 0}
footer.site .netline a{display:inline;padding:0;color:var(--accent-dk)}
footer.site .netline a b{font-weight:800}
footer.site .partnote{color:var(--warm);opacity:.95}
footer.site .verline{font-family:var(--mono);font-size:.72rem;color:var(--dim2);margin-top:.6rem}
footer.site .verline a{display:inline;color:var(--accent-dk);padding:0}
@media (max-width:700px){footer.site .cols{grid-template-columns:1fr}}

/* print */
@page{margin:14mm}
@media print{
  html{print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#fff}
  body{background:#fff;font-size:10pt;line-height:1.5}
  nav.site{position:static;background:none;backdrop-filter:none}
  nav.site a.nl,nav.site .gh,nav.site .parent,.nav-items,.nav-toggle{display:none}
  .note,pre,table,blockquote{break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid}
  p,li{orphans:3;widows:3}
}

/* ---------- in-page markdown reader (documents/*) ---------- */
.mdread-label{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--panel2);
  border:1px solid var(--line2);border-bottom:1px dashed var(--line2);border-radius:10px 10px 0 0;
  padding:.5rem 1rem;margin:1.4rem 0 0;font-family:var(--mono);font-size:.7rem;color:var(--dim);letter-spacing:.03em}
.mdread-label a{color:var(--accent-dk)}
.mdread{border:1px solid var(--line2);border-top:none;border-radius:0 0 10px 10px;background:#fff;
  padding:2rem 2.4rem;margin:0 0 1.6rem;
  box-shadow:0 2px 6px rgba(28,29,33,.08),0 14px 32px rgba(28,29,33,.08)}
@media (max-width:560px){.mdread{padding:1.3rem 1rem}}
.mdread h1{font-family:var(--serif);font-size:1.7rem;color:#101114;margin:.2rem 0 .8rem}
.mdread h2{font-family:var(--serif);font-size:1.25rem;color:#101114;margin:1.8rem 0 .6rem}
.mdread h3{font-size:1rem;color:#101114;margin:1.4rem 0 .4rem}
.mdread p,.mdread li{color:#34363c;font-size:.94rem;line-height:1.65}
.mdread table{display:block;overflow-x:auto;border-collapse:collapse;font-size:.85rem;margin:1rem 0}
.mdread th{background:var(--panel2);text-align:left;padding:.5rem .7rem;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line)}
.mdread td{padding:.5rem .7rem;border:1px solid var(--line);color:#34363c;vertical-align:top}
.mdread blockquote{margin:1.2rem 0;padding:.8rem 1.1rem;border-left:4px solid var(--warm);
  background:var(--panel2);border-radius:0 8px 8px 0;color:#34363c}
.mdread pre{background:var(--term-bg);color:#c9d1d9;border-radius:8px;padding:.8rem 1rem;
  font-size:.78rem;overflow-x:auto;line-height:1.6}
.mdread hr{border:none;border-top:1px solid var(--line);margin:1.6rem 0}
.mdread a{overflow-wrap:anywhere}
.docmeta{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;box-shadow:var(--shadow);
  font-size:.86rem;margin:1rem 0 1.4rem}
.docmeta .k{color:var(--dim);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;padding-top:.15rem}
.docmeta .v{color:#34363c}

/* mermaid diagrams (concept pages + rendered inside .mdread) */
pre.mermaid{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;
  margin:1.2rem 0;box-shadow:var(--shadow);text-align:center;overflow-x:auto;font-size:.8rem}

/* ---------- pki additions ---------- */
/* the rules ladder — same component as nhi.sgit.ai's .hopeladder, named for what
   it holds here. Both selectors are kept so the stylesheet stays portable. */
.ladder{display:flex;flex-direction:column;gap:.9rem;margin:1.4rem 0 2rem}
.ladder .cap{position:relative;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:10px;padding:1.1rem 1.3rem 1.1rem 3.4rem;box-shadow:var(--shadow)}
.ladder .capnum{position:absolute;left:1.15rem;top:1.15rem;font-family:var(--mono);font-size:.78rem;
  font-weight:700;color:var(--accent);letter-spacing:-.03em}
.ladder .cap h3{margin:0 0 .5rem;font-size:1.05rem;color:#101114;letter-spacing:-.015em}
.ladder .cap p{margin:.5rem 0;font-size:.92rem;line-height:1.65;color:#34363c}
.ladder .cap .from{display:block;margin-top:.6rem;font-size:.76rem;color:var(--dim);
  border-top:1px dashed var(--line);padding-top:.5rem}
.ladder .cap .from b{color:var(--warm)}
@media (max-width:560px){.ladder .cap{padding:2.4rem 1rem 1rem}.ladder .capnum{top:.85rem;left:1rem}}

/* the split table's two verdict columns, in this site's terms */
.split th.safe{color:var(--accent-dk)} .split th.fatal{color:var(--red)}

/* dated timeline — the 2019 failure, in order */
.timeline{list-style:none;margin:1.4rem 0 2rem;padding:0 0 0 1.1rem;border-left:2px solid var(--line2)}
.timeline li{position:relative;padding:0 0 1.1rem 1.2rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-1.62rem;top:.42rem;width:.62rem;height:.62rem;
  border-radius:99px;background:var(--panel);border:2px solid var(--accent)}
.timeline li.bad::before{border-color:var(--red)}
.timeline .when{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim2)}
.timeline .what{color:#34363c;font-size:.95rem;line-height:1.6}

/* a stated rule, quoted as a claim the reader may check */
.claim{font-family:var(--serif);font-size:1.12rem;line-height:1.6;color:#101114;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin:1.3rem 0;box-shadow:var(--shadow)}

/* mermaid on hand-written concept pages (the reader styles pre.mermaid already) */
.mermaid{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;
  margin:1.2rem 0;box-shadow:var(--shadow);text-align:center;overflow-x:auto}

/* the pack download — a real affordance rather than a link in a paragraph */
.dl{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:1.1rem 1.3rem;margin:1.6rem 0;box-shadow:var(--shadow)}
.dl > div{flex:1 1 22rem}
.dl p{margin:.45rem 0 0;font-size:.88rem;color:#34363c;line-height:1.6}
.dlbtn{display:flex;flex-direction:column;align-items:center;gap:.15rem;white-space:nowrap;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:10px;
  padding:.75rem 1.3rem;font-weight:700;font-size:.9rem}
.dlbtn span{font-family:var(--mono);font-size:.68rem;font-weight:400;opacity:.85;letter-spacing:.04em}
.dlbtn:hover{background:var(--accent-dk);border-color:var(--accent-dk);text-decoration:none}

/* ==========================================================================
   wardley-maps.sgit.ai — the components this site adds to the house stylesheet.

   Everything above is the shared sgit.ai design language, ported unchanged. What
   follows exists because this site publishes three things the siblings do not:
   dated resource pages, maps that ship their source, and a chronology.
   ========================================================================== */

/* ---------- status and classification badges ----------
   Not decoration. On a resource page the state badge IS the reason to visit — the
   whole pitch is that five things the community's own indexes list as live are dead —
   so it is derived from the recorded status rather than assigned by hand, and it is
   the first thing under the title. */
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1.1rem;padding:0}
.badge{--bc:var(--dim2);display:inline-block;font:600 .7rem/1.5 var(--sans);letter-spacing:.02em;
  border:1px solid var(--bc);color:var(--bc);border-radius:99px;padding:.1rem .6rem;white-space:nowrap;
  background:color-mix(in srgb,var(--bc) 7%,transparent)}
.badge.s-active,.badge.s-live{--bc:var(--accent)}
.badge.s-dead{--bc:var(--red)}
.badge.s-dormant,.badge.s-quiet,.badge.s-unverified{--bc:var(--warm)}
.badge.b-original{--bc:var(--accent)}
.badge.b-extension{--bc:var(--yellow)}
.badge.b-standard{--bc:var(--dim2)}
.badge.b-primary,.badge.b-learning,.badge.b-tool,.badge.b-community,.badge.b-reference{--bc:var(--accent-dk)}
.badge.b-type{--bc:var(--dim2);font-weight:500}

/* ---------- screenshots, and the caption that makes one evidence ----------
   A screenshot without a provable date is worth much less than one with, in an
   ecosystem whose canonical indexes point at dead tools. So the caption carries the
   capture date, the HTTP status, the transformation applied to the published file,
   and the per-resource attribution string — never a global credit line. */
figure.shot{margin:1.3rem 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow)}
figure.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
figure.shot figcaption{font-size:.78rem;line-height:1.6;color:var(--dim);padding:.6rem .85rem;background:var(--panel2)}
figure.shot figcaption .attr{display:block;margin-top:.3rem;color:var(--dim2);font-style:italic}
.attr{font-size:.82rem;color:var(--dim)}

/* ---------- maps ----------
   White plate behind the SVG on purpose: mermaid renders these with a white ground,
   and a map floating on the page background reads as a hole rather than a figure. */
figure.mapfig{margin:1.6rem 0;padding:0;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow)}
figure.mapfig img{display:block;width:100%;height:auto}
figure.mapfig figcaption{font-size:.82rem;line-height:1.6;color:var(--dim);
  padding:.6rem .9rem;background:var(--panel2);border-top:1px solid var(--line)}
.mapentry{margin:2rem 0;padding-top:.6rem;border-top:1px solid var(--line)}
.mapentry:first-of-type{border-top:0}

/* ---------- the verification stamp ----------
   The one element on a resource page with no exceptions: validate.js fails the build
   if a page under /resources/ does not carry a data-verified attribute. */
.verify{background:rgba(15,118,110,.05);border:1px solid rgba(15,118,110,.25);border-left:3px solid var(--accent);
  border-radius:9px;padding:.75rem .95rem;margin:1.4rem 0;font-size:.86rem;line-height:1.65}
.verify p{margin:.25rem 0}
table.rfields{table-layout:auto}
table.rfields th{width:11rem;vertical-align:top;text-align:left;white-space:normal}

/* ---------- obituaries ----------
   `.stillwrong` is the point of the page: not that a thing died, but that the
   community's canonical index has not noticed. */
.obit{border:1px solid var(--line);border-radius:11px;padding:.9rem 1.05rem;margin:1.1rem 0;background:var(--panel)}
.obit h3{margin:0 0 .3rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:1.02rem}
.obit p{margin:.4rem 0}
.stillwrong{margin-top:.6rem;padding:.55rem .8rem;border-radius:8px;font-size:.83rem;
  background:rgba(185,28,28,.05);border:1px solid rgba(185,28,28,.22)}
.stillwrong ul.wrong{margin:.3rem 0 0;padding-left:1.1rem;color:var(--red)}

/* ---------- the three start-here routes ---------- */
.route{border-left:3px solid var(--line2);padding:.2rem 0 .2rem 1rem;margin:1.4rem 0}
.route h3{margin:0 0 .3rem}
ol.path{counter-reset:step;list-style:none;padding-left:0;margin:.7rem 0}
ol.path li{counter-increment:step;position:relative;padding-left:2.1rem;margin:.6rem 0;line-height:1.65}
ol.path li::before{content:counter(step);position:absolute;left:0;top:.05rem;width:1.5rem;height:1.5rem;
  border-radius:50%;background:var(--panel2);border:1px solid var(--line2);color:var(--dim);
  font:700 .72rem/1.45rem var(--mono);text-align:center}
ol.path.ranked li::before{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- the chronology ----------
   `.prec` renders the date-precision flag rather than hiding it. Seven of the 26 items
   are month-and-weekday only, because every mini-summit index renders the same stale
   schedule table; synthesising an exact date would be inventing evidence. */
.yr{margin:1.8rem 0}
.yr h3{border-bottom:1px solid var(--line);padding-bottom:.35rem}
.yr.silence h3{color:var(--dim2)}
.yr.silence{opacity:.85}
.item{border-left:2px solid var(--line);padding:.15rem 0 .15rem .95rem;margin:1rem 0}
.item.unver{border-left-color:var(--warm)}
.item h4{margin:.15rem 0 .2rem;font-size:1rem;line-height:1.35}
.item p{margin:.25rem 0}
.imeta{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.74rem;margin:0}
.idate{font:700 .74rem var(--mono);color:var(--fg)}
.itype,.irole{color:var(--dim2);text-transform:lowercase}
.irole::before{content:"· "}
.prec{font:600 .66rem var(--sans);letter-spacing:.02em;color:var(--warm);
  border:1px solid rgba(180,83,9,.3);background:rgba(180,83,9,.06);border-radius:99px;padding:.02rem .45rem}
.prec.bad{color:var(--red);border-color:rgba(185,28,28,.3);background:rgba(185,28,28,.06)}
.inote{font-size:.87rem;color:var(--dim);line-height:1.65}
.vid{position:relative;padding-top:56.25%;margin:.7rem 0;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- glossary terms ---------- */
.gterm{border-left:3px solid var(--line2);padding:.1rem 0 .1rem .95rem;margin:1.1rem 0}
.gterm.c-original{border-left-color:var(--accent)}
.gterm.c-extension{border-left-color:var(--yellow)}
.gterm h4{margin:.1rem 0 .35rem;font-size:1rem;line-height:1.35}
.gterm blockquote{margin:.5rem 0;padding-left:.9rem;border-left:2px solid var(--line);
  color:var(--fg);font-style:italic;font-size:.92rem;line-height:1.7}
.gterm p{margin:.3rem 0}
.gopage{margin-left:.5rem;font-weight:600;white-space:nowrap}

/* ---------- shared with doctrine.css ----------
   The headline grid and the id chip are used by the glossary and by the
   link-verification report as well as by the doctrine page. Defined here so those two
   pages do not have to load doctrine.css; doctrine.css loads second on /doctrine/ and
   restates them identically. */
.s-strong{--sc:var(--accent)} .s-partial{--sc:var(--yellow)}
.s-weak{--sc:var(--red)} .s-na{--sc:var(--dim2)}
.hgrid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:.8rem 0}
.hstat{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--sc);border-radius:10px;
  padding:.6rem .8rem;cursor:pointer;font:inherit;text-align:left;display:flex;flex-direction:column;gap:.1rem;
  color:inherit;text-decoration:none}
.hstat:hover{border-color:var(--sc);text-decoration:none}
.hstat .n{font-size:1.7rem;font-weight:800;line-height:1;color:var(--sc)}
.hstat .l{font-size:.76rem;color:var(--dim)}
.hsent{font-size:.92rem;line-height:1.7;margin:.5rem 0}
.did{font:700 .62rem var(--mono);letter-spacing:.06em;color:var(--dim2)}
.did.inline{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem;margin-right:.3rem}
.srcs{font-size:.88rem;line-height:1.9}

/* ---------- a pull quote that is doing the work of a paragraph ---------- */
blockquote.challenge.big{font-size:1.12rem;line-height:1.6;font-weight:600}

/* A code block that came from a prose field has no line breaks of its own — the source
   data writes its example inline. Wrap rather than overflow: a terminal block that runs
   off the right edge of a resource page is worse than one that wraps. Blocks written as
   blocks here still keep their own newlines. */
main.doc pre.shell{overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- the vault-app embed (assets/vault-app-embed.js) ---------- */
/* One live surface: the game, running out of the vault, over the embed protocol. The
   sgit.ai component stacks App Mode and the vault browser; here the browser is opt-in,
   so most of these rules exist to make a single frame sit well on a page. */
.sgv-app{margin:1.3rem 0}
.sgv-uiembed-label{font-family:var(--mono);font-size:.85rem;font-weight:600;
  color:var(--accent);margin:1.4rem 0 .1rem}
.sgv-app-note{font-size:.82rem;color:var(--dim);margin:.35rem 0 .55rem}
.sgv-app-note a{border-bottom:1px solid var(--line2)}
/* Chromeless: the status line still exists — a page that opens a vault says so — but it
   sits under the frame as a footnote rather than above it as a heading. */
.sgv-app-note-quiet{order:2;font-size:.76rem;color:var(--dim2);margin:.5rem 0 0}
.sgv-app:has(.sgv-app-note-quiet){display:flex;flex-direction:column}
.sgv-embed-frame{width:100%;height:clamp(560px,74vh,1000px);border:1px solid var(--line2);
  border-radius:12px;background:var(--panel);display:block;box-shadow:var(--shadow)}
.sgv-embed-frame:fullscreen{width:100vw;height:100vh;border-radius:0}
/* The board wants width. On a wide viewport the frame breaks out of the text measure —
   never past the viewport, and never on a phone, where it is already full width. */
.sgv-breakout{width:min(94vw,1560px);position:relative;left:50%;transform:translateX(-50%)}
@media (max-width:900px){
  .sgv-breakout{width:100%;left:auto;transform:none}
  .sgv-embed-frame{height:clamp(520px,80vh,820px)}
}
/* An iframe prints as an empty box, so say what was there instead of leaving a hole. */
@media print{
  .sgv-embed-frame{display:none!important}
  .sgv-app::after{content:"A live vault surface — open this page online to play.";
    display:block;font-family:var(--mono);font-size:.8rem;color:var(--dim);
    border:1px dashed var(--line2);border-radius:8px;padding:.9rem}
}

/* ---------- telemetry disclosure ---------- */
/* This used to be an amber warning panel. It was the wrong size for what it says: we
   count how far people get, with no cookies, no analytics script and nothing that
   identifies anyone — less than a default server log, and far less than the analytics
   on almost every site a reader will visit today. A box that shouts implies a risk
   that is not there, and a page that over-warns about something ordinary teaches
   readers to skim the next notice too.
   So: one quiet line, in the reading column, before the thing it describes. Still
   unmissable if you are looking, still enforced by the release gate, no longer
   dressed as a hazard. */
.disclose{font-size:.84rem;color:var(--dim);margin:1rem 0;padding:.1rem 0 .1rem .9rem;
  border-left:2px solid var(--line2);max-width:66ch}
.disclose p{margin:0}
.disclose p + p{margin-top:.4rem}
.disclose b{color:var(--fg);font-weight:600}
.disclose a{color:var(--accent-dk);border-bottom:1px solid var(--line2)}
.disclose a:hover{border-bottom-color:var(--accent);text-decoration:none}

/* ---------- maturity rungs ---------- */
/* The label is a claim with a test behind it (see /maturity/), so it gets one shape and
   five weights rather than five decorative colours. */
.rung{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;border-radius:999px;padding:.2rem .6rem;white-space:nowrap;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim)}
.rung-playable{border-color:var(--line2);color:var(--dim)}
.rung-scored{border-color:var(--accent);color:var(--accent-dk);background:#e8f2f0}
.rung-measured{border-color:var(--accent);background:var(--accent);color:#fff}
.rung-answered{border-color:var(--yellow);background:#fdf3e0;color:var(--yellow)}

/* ---------- game cards ---------- */
.gamegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem;margin:1.3rem 0}
.gamecard{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:1.15rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow)}
.gamecard h3{margin:0;font-size:1.05rem}
.gamecard .sub{font-size:.86rem;color:var(--dim);margin:0}
.gamecard .foot{margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.8rem}