:root {
  --bg:#fafaf8; --bg2:#f2f0eb; --bg3:#e8e5de; --card:#ffffff;
  --text:#1a1917; --text2:#5a5852; --text3:#8a8880; --border:#d8d5ce; --border2:#c8c5be;
  --amber:#b07010; --amber-bg:#fdf4e3; --amber-border:#e8c870;
  --teal:#0a6b52; --teal-bg:#e8f5f0; --teal-border:#80c8b0;
  --purple:#4a40b0; --purple-bg:#f0effe; --purple-border:#b0a8e8;
  --coral:#b03820; --coral-bg:#fdf0ec; --coral-border:#e8a090;
  --blue:#1850a0; --blue-bg:#eaf2fe; --blue-border:#90b8e8;
  --serif:'DM Serif Display',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:6px; --r-lg:10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#161512; --bg2:#1f1d19; --bg3:#2a2823; --card:#1c1b17;
    --text:#ecebe6; --text2:#b4b1a8; --text3:#86837a; --border:#36332d; --border2:#45423b;
    --amber:#e2a43c; --amber-bg:#2c2312; --amber-border:#6b5320;
    --teal:#4fc7a2; --teal-bg:#10291f; --teal-border:#21604b;
    --purple:#a59cf5; --purple-bg:#1f1c3a; --purple-border:#4a4390;
    --coral:#f08a70; --coral-bg:#33190f; --coral-border:#7a3a28;
    --blue:#7fb0f5; --blue-bg:#122036; --blue-border:#2f5590;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#161512; --bg2:#1f1d19; --bg3:#2a2823; --card:#1c1b17;
  --text:#ecebe6; --text2:#b4b1a8; --text3:#86837a; --border:#36332d; --border2:#45423b;
  --amber:#e2a43c; --amber-bg:#2c2312; --amber-border:#6b5320;
  --teal:#4fc7a2; --teal-bg:#10291f; --teal-border:#21604b;
  --purple:#a59cf5; --purple-bg:#1f1c3a; --purple-border:#4a4390;
  --coral:#f08a70; --coral-bg:#33190f; --coral-border:#7a3a28;
  --blue:#7fb0f5; --blue-bg:#122036; --blue-border:#2f5590;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.6 var(--sans); }
a { color:var(--blue); text-underline-offset:2px; }
code, .mono { font-family:var(--mono); font-size:.86em; background:var(--bg2); padding:1px 4px; border-radius:4px; overflow-wrap:anywhere; }
button { font:inherit; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.wrap { max-width:1060px; margin:0 auto; padding:0 16px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.top { border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:20; }
.top-in { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; flex-wrap:wrap; }
.brand { font-family:var(--serif); font-size:22px; color:var(--text); text-decoration:none; }
.top nav { display:flex; gap:4px 16px; font-size:14px; flex-wrap:wrap; align-items:center; }
.top nav a { color:var(--text2); text-decoration:none; }
.top nav a[aria-current="page"] { color:var(--text); font-weight:600; }
.top nav a:hover { color:var(--text); }
.help-btn { width:30px; height:30px; border-radius:50%; border:1px solid var(--border2); background:var(--card); color:var(--text);
  cursor:pointer; font-weight:600; }

.legal { margin:16px 0 0; padding:8px 12px; border-left:3px solid var(--amber-border); background:var(--amber-bg);
  color:var(--text); font-size:13.5px; border-radius:0 var(--r) var(--r) 0; }
.legal b { color:var(--amber); }
.intro h1 { font-family:var(--serif); font-weight:400; font-size:clamp(28px,5vw,40px); line-height:1.15; margin:28px 0 10px; }
.intro p { color:var(--text2); max-width:72ch; margin:0 0 16px; }

h2.sec { font-family:var(--serif); font-weight:400; font-size:24px; margin:34px 0 4px; display:flex; align-items:baseline; gap:10px; }
h2.sec .n { font:500 12px var(--mono); color:var(--text3); }
.hint { color:var(--text3); font-size:13.5px; margin:0 0 12px; max-width:80ch; }

/* reader picker */
.readers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:8px 0 0; }
.reader { text-align:left; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px;
  cursor:pointer; color:var(--text); display:flex; flex-direction:column; gap:2px; }
.reader:hover { border-color:var(--border2); }
.reader[aria-pressed="true"] { border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text); }
.reader .who { font-weight:600; }
.reader .what { font:500 11.5px var(--mono); color:var(--text3); text-transform:uppercase; letter-spacing:.04em; }
.reader .set { font-size:13px; color:var(--text2); }

/* status */
.statusbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:18px 0 10px; }
.badge { font:600 12px var(--sans); padding:3px 10px; border-radius:999px; border:1px solid; white-space:nowrap; }
.badge.ready, .badge.pass { color:var(--teal); background:var(--teal-bg); border-color:var(--teal-border); }
.badge.ready-with-recorded-gaps, .badge.warn, .badge.needs-decisions { color:var(--amber); background:var(--amber-bg); border-color:var(--amber-border); }
.badge.blocked, .badge.fail { color:var(--coral); background:var(--coral-bg); border-color:var(--coral-border); }
.badge.model { color:var(--purple); background:var(--purple-bg); border-color:var(--purple-border); }
.badge.sandbox { color:var(--blue); background:var(--blue-bg); border-color:var(--blue-border); }
.badge.gray { color:var(--text2); background:var(--bg2); border-color:var(--border); }
.meta { color:var(--text3); font:12px var(--mono); overflow-wrap:anywhere; }
.checks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; background:var(--card); }
.check { padding:12px 14px; border-right:1px solid var(--border); min-width:0; }
.check:last-child { border-right:0; }
.check .nm { font:500 11.5px var(--mono); color:var(--text3); display:flex; justify-content:space-between; gap:6px; }
.check .v { font-family:var(--serif); font-size:28px; line-height:1.2; }
.check.ok .v { color:var(--teal); } .check.bad .v { color:var(--amber); } .check.block .v { color:var(--coral); }
.check .d { font-size:12.5px; color:var(--text2); }

/* requirement table */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card); }
table.req { width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px; }
table.req th { text-align:left; font:500 10.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--text3);
  background:var(--bg2); padding:8px 12px; border-bottom:1px solid var(--border); }
table.req td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
table.req tr:last-child td { border-bottom:0; }
table.req tr.gap td { background:color-mix(in srgb, var(--amber-bg) 55%, transparent); }
.rid { font:500 12px var(--mono); white-space:nowrap; }
.rtitle { color:var(--text2); }
.ev { display:flex; flex-direction:column; gap:6px; }
.evi { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.evi .t { font-weight:500; }
.small { font-size:12px; color:var(--text2); }
.ok-t { color:var(--teal); } .bad-t { color:var(--coral); } .warn-t { color:var(--amber); }
.actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.btn { font:600 13px var(--sans); border-radius:var(--r); padding:6px 12px; cursor:pointer; border:1px solid var(--border2);
  background:var(--card); color:var(--text); }
.btn:hover { border-color:var(--text2); }
.btn.primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.btn.model { color:var(--purple); border-color:var(--purple-border); background:var(--purple-bg); }
.btn.good { color:var(--teal); border-color:var(--teal-border); background:var(--teal-bg); }
.btn.bad { color:var(--coral); border-color:var(--coral-border); background:var(--coral-bg); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.proposal { margin-top:8px; padding:10px 12px; border:1px dashed var(--purple-border); border-radius:var(--r); background:var(--purple-bg); }
.proposal .k { font:500 10.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--purple); }
.gapnote { margin-top:8px; padding:8px 12px; border-left:3px solid var(--coral-border); background:var(--coral-bg); font-size:13px; border-radius:0 var(--r) var(--r) 0; }
.decided { margin-top:6px; font-size:12.5px; color:var(--amber); }
.decide { display:none; margin-top:8px; gap:6px; flex-wrap:wrap; align-items:center; }
.decide.open { display:flex; }
.decide select, .decide input, .tool select, .tool input { font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--border2);
  border-radius:var(--r); background:var(--card); color:var(--text); min-width:0; }
.decide input { flex:1 1 220px; }

/* findings */
.findings { display:grid; gap:8px; }
.finding { background:var(--card); border:1px solid var(--border); border-left:3px solid var(--amber-border); border-radius:var(--r);
  padding:8px 12px; font-size:13.5px; }
.finding.block { border-left-color:var(--coral); background:var(--coral-bg); }
.finding.done { border-left-color:var(--teal-border); }
.finding .h { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.group { margin:0 0 14px; }
.group h3 { font:600 14px var(--sans); margin:0 0 6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* tools */
.tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tool { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px; display:flex;
  flex-direction:column; gap:8px; min-width:0; }
.tool h3 { margin:0; font:600 15px var(--sans); }
.tool p { margin:0; color:var(--text2); font-size:13.5px; }
.tool .row { display:flex; gap:6px; flex-wrap:wrap; }
.tool .row > * { flex:1 1 160px; }
.build { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; display:flex; gap:12px;
  align-items:center; flex-wrap:wrap; justify-content:space-between; }
.flow { counter-reset:f; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.flow li { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:10px 12px 10px 38px; position:relative; font-size:13px; color:var(--text2); }
.flow li b { display:block; color:var(--text); font-size:13.5px; }
.flow li::before { counter-increment:f; content:counter(f); position:absolute; left:10px; top:10px; width:20px; height:20px; border-radius:50%;
  background:var(--bg3); display:grid; place-items:center; font:600 11px var(--sans); color:var(--text); }

.toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:8px 14px;
  border-radius:var(--r); font-size:14px; z-index:40; max-width:calc(100vw - 32px); }
.toast.err { background:var(--coral); color:#fff; }
.status { min-height:22px; margin:10px 0 0; color:var(--text2); font-size:14px; }
.status.err { color:var(--coral); }
.spinner { display:inline-block; width:12px; height:12px; border:2px solid var(--border2); border-top-color:var(--text);
  border-radius:50%; animation:spin .8s linear infinite; vertical-align:-1px; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }
.foot { color:var(--text3); font-size:12.5px; padding-top:32px; padding-bottom:40px; }

/* help panel */
.helpp { position:fixed; top:0; right:0; height:100%; width:min(380px,100vw); background:var(--card); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .2s; z-index:30; padding:18px 18px 24px; overflow-y:auto; }
.helpp.open { transform:none; box-shadow:-8px 0 30px rgba(0,0,0,.12); }
.helpp h2 { font-family:var(--serif); font-weight:400; font-size:22px; margin:6px 0 6px; }
.helpp .close { float:right; }
.helpp p { color:var(--text2); font-size:14px; }
.helpp ol { padding-left:20px; font-size:14px; }
.helpp h3 { font:600 13px var(--sans); margin:14px 0 4px; }
.helpp a.rel { display:block; font-size:14px; margin:2px 0; }
[data-help] { cursor:help; }
.qmark { font:600 11px var(--sans); color:var(--text3); border:1px solid var(--border2); border-radius:50%; width:18px; height:18px;
  display:inline-grid; place-items:center; background:var(--card); cursor:pointer; padding:0; vertical-align:2px; }

/* ask page */
.askf { display:flex; gap:8px; align-items:stretch; margin-top:8px; }
.askf textarea { flex:1; min-width:0; resize:vertical; font:inherit; color:var(--text); background:var(--card);
  border:1px solid var(--border2); border-radius:var(--r-lg); padding:12px 14px; }
.askf button { font:600 15px var(--sans); border-radius:var(--r-lg); padding:0 22px; cursor:pointer; background:var(--text); color:var(--bg); border:0; }
.askf button:disabled { opacity:.5; cursor:wait; }
.samples { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.samples button { font:13px var(--sans); color:var(--text2); background:var(--bg2); border:1px solid var(--border);
  border-radius:999px; padding:5px 12px; cursor:pointer; text-align:left; }
.samples button:hover { color:var(--text); border-color:var(--border2); }
.summary { font-size:17px; margin:18px 0 12px; }
.points { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.point { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 16px 12px 48px; position:relative; }
.point .num { position:absolute; left:14px; top:12px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font:600 12px var(--sans); background:var(--bg3); }
.point p { margin:0 0 6px; }
.point blockquote { margin:0; padding:5px 10px; border-left:3px solid var(--border2); color:var(--text2); font-size:13.5px; background:var(--bg); }
.sources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.src { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px; font-size:13.5px; min-width:0; }
.src h3 { margin:0 0 4px; font:600 14px var(--sans); display:flex; gap:8px; align-items:baseline; }
.src h3 .num { font:600 11px var(--sans); background:var(--bg3); border-radius:50%; width:20px; height:20px; display:inline-grid; place-items:center; flex:none; }
.src dl { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:6px 0 0; }
.src dt { color:var(--text3); font-size:12px; }
.src dd { margin:0; font-size:12.5px; overflow-wrap:anywhere; }
.note { margin:12px 0 0; padding:10px 14px; border-radius:var(--r); background:var(--bg2); color:var(--text2); font-size:14px; }
.dropped { margin:12px 0 0; padding:10px 14px; border-radius:var(--r); background:var(--coral-bg); border:1px solid var(--coral-border); font-size:13.5px; }

@media (max-width:860px) {
  .readers, .tools, .sources { grid-template-columns:minmax(0,1fr); }
  .checks { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .check:nth-child(2) { border-right:0; }
  .check:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .flow { grid-template-columns:minmax(0,1fr); }
  .askf { flex-direction:column; } .askf button { padding:12px; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation:none; } .helpp { transition:none; } }

/* ---- MVP page: pick a system, two packs, metrics ---- */
.sysbar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:8px 0 0; }
.sysbar label { display:grid; gap:4px; font:500 11.5px var(--mono); color:var(--text3); text-transform:uppercase; letter-spacing:.04em; }
.sysbar select { font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--border2); border-radius:var(--r);
  background:var(--card); color:var(--text); min-width:240px; }
.btn.big { font-size:14px; padding:9px 18px; }
.callout { margin:14px 0 0; padding:10px 14px; border-left:3px solid var(--blue); background:var(--blue-bg); border-radius:0 var(--r) var(--r) 0;
  font-size:13.5px; color:var(--text2); }
.callout b { color:var(--blue); }
.packs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px; }
.pack { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.pack .what { font:500 11.5px var(--mono); color:var(--text3); text-transform:uppercase; letter-spacing:.04em; }
.pack h3 { margin:2px 0 2px; font:600 17px var(--sans); }
.mini { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.mc { padding:8px 10px; border-right:1px solid var(--border); min-width:0; }
.mc:last-child { border-right:0; }
.mc .nm { font:500 11px var(--mono); color:var(--text3); }
.mc .v { font-family:var(--serif); font-size:22px; line-height:1.2; }
.mc.ok .v { color:var(--teal); } .mc.bad .v { color:var(--amber); } .mc.block .v { color:var(--coral); }
.mc .d { font-size:12px; color:var(--text2); }
.flist { margin:8px 0 0; padding-left:18px; font-size:13px; color:var(--text2); display:grid; gap:6px; }
.packmeta { display:grid; gap:2px; }
.pack details summary { cursor:pointer; font-size:13px; font-weight:600; }
.mtable { width:100%; border-collapse:collapse; background:var(--card); }
.mtable th { text-align:left; font:500 11.5px var(--mono); color:var(--text3); text-transform:uppercase; letter-spacing:.04em; padding:8px 12px; }
.mtable td { border-top:1px solid var(--border); padding:10px 12px; vertical-align:top; }
.mlabel { font-weight:600; }
.mval { font-family:var(--serif); font-size:20px; line-height:1.3; }
@media (max-width:760px) {
  .packs { grid-template-columns:1fr; }
  .mini { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mc:nth-child(2) { border-right:0; } .mc:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .sysbar select { min-width:0; width:100%; } .sysbar label { flex:1 1 100%; }
}
@media (max-width:760px) {
  .mtable thead { display:none; }
  .mtable, .mtable tbody, .mtable tr, .mtable td { display:block; width:100%; }
  .mtable tr { border-top:1px solid var(--border); padding:6px 0; }
  .mtable td { border-top:0; padding:4px 12px; }
}