:root { --bg:#14110f; --panel:rgba(20,17,15,.82); --line:#3a322b; --fg:#e8dcc8; --dim:#9a8d79; --accent:#d9a441; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); overflow:hidden; overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
/* the page never scrolls: pin it to the visible viewport so iOS toolbars can't shift or clip it */
html, body { position:fixed; inset:0; width:100%; }
#view { position:fixed; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; image-rendering:pixelated; }
#view.drag { cursor:grabbing; }
.dim { color:var(--dim); }
#hud { position:fixed; top:max(8px, env(safe-area-inset-top)); left:8px; padding:8px 10px; background:var(--panel); border:1px solid var(--line); font-size:12px; line-height:1.5; pointer-events:none; max-width:calc(100vw - 70px); }
#hud .brand { font-weight:700; letter-spacing:.04em; margin-bottom:2px; }
#hud .stats { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
#hud .sub { display:flex; gap:10px; flex-wrap:wrap; }
.food { display:inline-flex; align-items:center; gap:6px; }
.food i { display:inline-block; width:44px; height:6px; border:1px solid var(--dim); position:relative; }
.food i::after { content:""; position:absolute; inset:0; width:var(--p,0%); background:var(--accent); }
.food b { font-weight:400; }
#tools { position:fixed; top:max(8px, env(safe-area-inset-top)); right:8px; display:flex; flex-direction:column; gap:4px; }
button { font:inherit; color:var(--fg); background:var(--panel); border:1px solid var(--line); cursor:pointer; }
button:hover, button:focus-visible { border-color:var(--accent); outline:none; }
#tools button { width:40px; height:40px; font-size:18px; }
#foot { position:fixed; left:8px; right:8px; bottom:max(8px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:6px; align-items:stretch; max-width:760px; }
#ticker { text-align:left; padding:9px 12px; font-size:12px; min-height:40px; }
#ticker-text { display:block; }
#log { margin:0; padding:8px 12px 8px 30px; background:var(--panel); border:1px solid var(--line); font-size:12px; max-height:38vh; overflow:auto; display:flex; flex-direction:column-reverse; gap:3px; }
#log[hidden], #scrub[hidden], #status[hidden] { display:none; }
#log li { color:var(--dim); } #log li:first-child { color:var(--fg); }
#scrub { display:flex; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); padding:6px 8px; font-size:12px; }
#scrub input { flex:1; accent-color:var(--accent); min-width:0; }
#live { padding:4px 10px; } #live.on { border-color:var(--accent); color:var(--accent); }
#status { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--panel); border:1px solid var(--line); padding:10px 14px; font-size:12px; }
@media (max-width:520px) { #hud { font-size:11px; } #hud .stats { gap:8px; } }

#tools #about-btn { font-weight:700; }
dialog { padding:0; border:1px solid var(--line); background:#1b1713; color:var(--fg); width:min(640px, calc(100vw - 16px)); max-height:min(88vh, 900px); font:inherit; }
dialog::backdrop { background:rgba(10,8,6,.72); }
dialog article { padding:0 18px 20px; font-size:13px; line-height:1.6; }
dialog header { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; background:#1b1713; padding:12px 0 8px; border-bottom:1px solid var(--line); z-index:1; }
dialog h2 { margin:0; font-size:15px; letter-spacing:.04em; }
dialog h3 { margin:22px 0 8px; font-size:13px; color:var(--accent); letter-spacing:.03em; }
dialog p { margin:8px 0; } dialog ul { margin:6px 0; padding-left:18px; }
#about-close { width:32px; height:32px; }
.lede { font-size:14px; margin-top:12px; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cols > div { border:1px solid var(--line); padding:10px 12px; }
@media (max-width:560px) { .cols { grid-template-columns:1fr; } }
dialog svg { display:block; width:100%; max-width:380px; margin:8px auto; color:var(--dim); }
dialog svg text { fill:var(--fg); font:600 11px ui-monospace, Menlo, monospace; text-anchor:middle; }
dialog svg text.sm { font-weight:400; font-size:9.5px; fill:var(--dim); }
dialog svg .flow { stroke:currentColor; stroke-width:1.5; fill:none; stroke-dasharray:4 4; animation:flow 1.2s linear infinite; }
dialog svg .flow.dash { stroke-dasharray:2 5; opacity:.8; }
dialog svg text[x="192"] { text-anchor:start; }
dialog svg .box rect { fill:#14110f; stroke:var(--line); stroke-width:1.5; }
dialog svg .box.hot rect { stroke:var(--accent); }
dialog svg .box.ai rect { stroke:#3fb0a6; stroke-dasharray:4 3; }
@keyframes flow { to { stroke-dashoffset:-16; } }
@media (prefers-reduced-motion:reduce) { dialog svg .flow { animation:none; } }
.tiers { list-style:none; margin:8px 0; padding:0; display:grid; gap:4px; }
.tiers li { padding:6px 10px; border-left:6px solid; background:#14110f; }
.tiers b { display:block; font-weight:600; }
.tiers .t1 { border-color:#6fbf5a; } .tiers .t2 { border-color:#d9a441; } .tiers .t3 { border-color:#d4803a; } .tiers .t4 { border-color:#d4607c; }
.live { margin-top:14px; }

dialog h4 { margin:18px 0 6px; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; }
dialog code { background:#14110f; padding:0 4px; color:#e8c97a; }
.types { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0; }
.types div { border:1px solid var(--line); padding:8px 10px; display:flex; flex-direction:column; gap:3px; }
.types span { font-weight:600; } .types em { color:var(--dim); font-style:normal; font-size:12px; }
@media (max-width:560px) { .types { grid-template-columns:1fr; } }
dialog pre { background:#14110f; border:1px solid var(--line); padding:10px 12px; margin:10px 0; overflow-x:auto; font:11.5px/1.5 ui-monospace, Menlo, monospace; color:var(--fg); }
dialog pre .k { color:var(--accent); font-weight:700; }
.dec { display:grid; gap:8px; }
.dec article { padding:0; border:1px solid var(--line); font-size:12.5px; }
.dec h5 { margin:0; padding:7px 10px; background:#14110f; font-size:12.5px; color:var(--accent); }
.dec h5 i { color:var(--dim); font-style:normal; font-weight:400; margin-left:6px; }
.dec dl { margin:0; padding:8px 10px; display:grid; grid-template-columns:68px 1fr; gap:4px 10px; }
.dec dt { color:var(--dim); } .dec dd { margin:0; }
@media (max-width:560px) { .dec dl { grid-template-columns:1fr; gap:0; } .dec dt { margin-top:6px; } }
.life { margin:8px 0; padding-left:22px; } .life b { color:var(--accent); font-weight:600; margin-right:6px; }

.asks { list-style:none; margin:10px 0; padding:0; display:grid; gap:6px; }
.asks li { border:1px solid var(--line); padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.asks b { color:var(--accent); font-weight:600; } .asks span { color:var(--dim); }

/* ---------- debug panel ---------- */
#debug { padding:0; }
#debug[open] { display:flex; width:min(1280px, 96vw); height:min(92vh, 960px); max-height:none; }
#debug article { display:flex; flex-direction:column; width:100%; min-height:0; padding:0; font-size:13px; }
#debug header { position:static; display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); flex:none; }
#debug h2 { font-size:15px; margin:0; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.pill { font:400 10px/1 ui-monospace, monospace; padding:3px 6px; border:1px solid #3f6b3a; color:#7fcf6a; letter-spacing:.06em; text-transform:uppercase; }
#dbg-status { flex:1; font-size:11px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dbg-status::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#6fbf5a; margin-right:6px; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; } } @media (prefers-reduced-motion:reduce) { #dbg-status::before { animation:none; } }
#debug #dbg-close { width:40px; height:40px; flex:none; }
#dbg-tabs { display:flex; gap:0; flex:none; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:none; background:#14110f; }
#dbg-tabs::-webkit-scrollbar { display:none; }
#dbg-tabs button { flex:1 0 auto; min-width:84px; height:44px; padding:0 16px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--dim); font-size:13px; text-transform:capitalize; }
#dbg-tabs button.on { color:var(--accent); border-bottom-color:var(--accent); background:#1b1713; }
#dbg-body { flex:1; min-height:0; overflow:auto; padding:14px; overscroll-behavior:contain; }
#dbg-body.fill { overflow:hidden; display:flex; flex-direction:column; }
.err { color:#e8837a; padding:10px; border:1px solid #6b2f2a; }
.dim { color:var(--dim); }

.dsec { margin:0 0 18px; }
.dsec > h4, .dsec > summary { margin:0 0 8px; font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.09em; font-weight:600; }
details.dsec > summary { cursor:pointer; padding:6px 0; list-style:none; } details.dsec > summary::before { content:"▸ "; } details[open].dsec > summary::before { content:"▾ "; }
.note { color:var(--dim); font-size:12px; margin:6px 0 0; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px; align-items:start; }

/* stat cards + key/value grids */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:8px; margin-bottom:18px; }
.card { border:1px solid var(--line); background:#14110f; padding:9px 11px; min-width:0; }
.card .l { font-size:10.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.07em; }
.card .v { font-size:19px; font-weight:600; margin-top:2px; overflow-wrap:anywhere; }
.card .s { font-size:11px; color:var(--dim); margin-top:2px; }
.card.warn .v { color:#d9a441; } .card.bad .v { color:#e8837a; } .card.ok .v { color:#7fcf6a; }
.kvgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.kvi { background:#1b1713; padding:7px 10px; min-width:0; }
.kvi .l { font-size:10.5px; color:var(--dim); } .kvi .v { font-size:13px; overflow-wrap:anywhere; }
.bar { height:8px; border:1px solid var(--dim); margin-top:6px; } .bar i { display:block; height:100%; background:var(--accent); }
.bar.good i { background:#6fbf5a; }

/* tables */
.tscroll { overflow-x:auto; border:1px solid var(--line); }
.dtable { width:100%; border-collapse:collapse; font-size:12.5px; }
.dtable th { text-align:left; color:var(--dim); font-weight:400; padding:6px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:#14110f; }
.dtable td { padding:6px 10px; border-bottom:1px solid #2a231d; vertical-align:top; }
.dtable td.num, .dtable th.num { text-align:right; font-variant-numeric:tabular-nums; }
.badge { display:inline-block; padding:1px 7px; border:1px solid; font-size:11px; line-height:1.5; white-space:nowrap; }
.badge.clef { color:#6fbf5a; } .badge.cache { color:#6aa0e8; } .badge.fallback { color:#d9a441; }

/* decisions: list + detail */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; flex:none; }
.chips select { flex:1 1 150px; min-width:0; height:40px; font:inherit; background:#14110f; color:var(--fg); border:1px solid var(--line); padding:0 8px; }
.split { display:grid; grid-template-columns:minmax(300px, 400px) 1fr; gap:16px; flex:1; min-height:0; }
.pane { overflow:auto; min-height:0; overscroll-behavior:contain; }
.dlist { display:flex; flex-direction:column; gap:6px; }
.drow { text-align:left; padding:9px 11px; display:flex; flex-direction:column; gap:3px; border-left:3px solid var(--line); min-height:48px; }
.drow.clef { border-left-color:#6fbf5a; } .drow.cache { border-left-color:#6aa0e8; } .drow.fallback { border-left-color:#d9a441; }
.drow.sel { background:#2a231c; border-color:var(--accent); }
.drow .r1 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .drow .r1 b { font-weight:600; }
.drow .r2 { font-size:12px; color:#d8ccb6; overflow-wrap:anywhere; }
.drow .r3 { font-size:11px; color:var(--dim); overflow-wrap:anywhere; }
.empty { color:var(--dim); padding:30px 10px; text-align:center; border:1px dashed var(--line); }
.back { display:none; height:44px; width:100%; text-align:left; padding:0 12px; margin-bottom:12px; }
.dhead { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-bottom:12px; }
.dhead h3 { margin:0; font-size:15px; color:var(--fg); }
.reason { padding:8px 10px; border:1px solid var(--line); background:#14110f; margin-bottom:14px; overflow-wrap:anywhere; }
.reason.bad { border-color:#6b4a2a; }
.q { border:1px solid var(--line); padding:10px 12px; margin-bottom:10px; }
.q h5 { margin:0 0 2px; font-size:13px; } .q .ins { color:var(--dim); font-size:12px; margin:0 0 8px; overflow-wrap:anywhere; }
.opts { display:flex; flex-direction:column; gap:5px; }
.opt { position:relative; padding:6px 9px; border-left:3px solid var(--line); background:#14110f; overflow:hidden; }
.opt .fill { position:absolute; inset:0 auto 0 0; background:#3fb0a6; opacity:.16; }
.opt.chosen { border-left-color:var(--accent); } .opt.chosen .fill { background:var(--accent); opacity:.22; }
.opt .row { position:relative; display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.opt .name { font-weight:600; overflow-wrap:anywhere; } .opt .p { font-variant-numeric:tabular-nums; color:#c9bda8; white-space:nowrap; }
.opt .desc { position:relative; font-size:11.5px; color:var(--dim); margin-top:1px; overflow-wrap:anywhere; }
.tag { color:var(--accent); font-size:11px; margin-left:6px; font-weight:400; }
pre.json { background:#14110f; border:1px solid var(--line); padding:9px 11px; max-height:50vh; overflow:auto; font-size:11.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }

/* world: projects, crews */
.plist { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:8px; }
.proj { border:1px solid var(--line); padding:9px 11px; background:#14110f; }
.proj .t { display:flex; justify-content:space-between; gap:8px; font-weight:600; } .proj .m { font-size:11.5px; color:var(--dim); margin-top:2px; }

/* charts */
.charts { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; margin-bottom:18px; }
.chart { border:1px solid var(--line); padding:9px 11px; background:#14110f; }
.chart b { font-size:12.5px; } .chart .spark { width:100%; height:84px; display:block; margin:6px 0; }
.legend { display:flex; gap:6px 12px; flex-wrap:wrap; font-size:11.5px; } .legend i { display:inline-block; width:9px; height:9px; margin-right:5px; vertical-align:-1px; }
.axis { display:flex; justify-content:space-between; font-size:10.5px; color:var(--dim); }
.chron { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.chron li { background:#1b1713; padding:8px 11px; overflow-wrap:anywhere; } .chron .t { color:var(--dim); font-size:11px; margin-right:6px; }

/* phones: the sheet takes the whole screen, lists replace tables, list/detail become two screens */
@media (max-width:760px) {
  #debug[open] { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; border:0; }
  #debug header { padding:8px 12px; padding-top:max(8px, env(safe-area-inset-top)); }
  #dbg-body { padding:12px 12px max(14px, env(safe-area-inset-bottom)); }
  .split { display:block; overflow:auto; } .split .pane { overflow:visible; }
  .split.has-detail .list { display:none; } .split:not(.has-detail) .detailpane { display:none; }
  .back { display:block; }
  #dbg-status { display:none; }
  .card .v { font-size:17px; }
  .kvgrid { grid-template-columns:repeat(2, 1fr); }
  pre.json { max-height:40vh; }
}
@media (min-width:761px) { .back { display:none; } }
@media (min-width:1100px) { #dbg-body { padding:18px 20px; } .cards { grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); } }
.asks .when { color:var(--fg); font-style:normal; font-size:12px; margin-top:3px; } .asks .when::before { content:"when: "; color:var(--accent); }