:root {
  --ground:#eceef1; --panel:#f7f8fa; --panel-2:#fff; --ink:#171b21; --ink-2:#454d59; --ink-3:#6c7683;
  --hair:#d7dbe1; --hair-2:#e4e7ec; --brass:#a97e26; --brass-ink:#7c5a14;
  --crit:#c0392b; --crit-bg:#fbeae7; --go:#1f7a4d; --go-bg:#e4f2ea; --sched:#2b5f9e; --sched-bg:#e6eef7; --idle:#6c7683; --idle-bg:#eceef1;
  --shadow:0 1px 2px rgba(20,25,33,.06),0 3px 12px rgba(20,25,33,.05);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0e1116; --panel:#161b22; --panel-2:#1c222b; --ink:#e8ebef; --ink-2:#aab3bf; --ink-3:#7b8695;
    --hair:#2a313b; --hair-2:#232a33; --brass:#d6a94a; --brass-ink:#e6c274;
    --crit:#ef6a5a; --crit-bg:#2e1614; --go:#4fb483; --go-bg:#12261c; --sched:#6ea8e0; --sched-bg:#14202e; --idle:#8892a0; --idle-bg:#1e242d;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 3px 14px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"]{--ground:#eceef1;--panel:#f7f8fa;--panel-2:#fff;--ink:#171b21;--ink-2:#454d59;--ink-3:#6c7683;--hair:#d7dbe1;--hair-2:#e4e7ec;--brass:#a97e26;--brass-ink:#7c5a14;--crit:#c0392b;--crit-bg:#fbeae7;--go:#1f7a4d;--go-bg:#e4f2ea;--sched:#2b5f9e;--sched-bg:#e6eef7;--idle:#6c7683;--idle-bg:#eceef1;}
:root[data-theme="dark"]{--ground:#0e1116;--panel:#161b22;--panel-2:#1c222b;--ink:#e8ebef;--ink-2:#aab3bf;--ink-3:#7b8695;--hair:#2a313b;--hair-2:#232a33;--brass:#d6a94a;--brass-ink:#e6c274;--crit:#ef6a5a;--crit-bg:#2e1614;--go:#4fb483;--go-bg:#12261c;--sched:#6ea8e0;--sched-bg:#14202e;--idle:#8892a0;--idle-bg:#1e242d;}

* { box-sizing: border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:2px solid var(--brass); }
.brandline { display:flex; align-items:center; gap:11px; }
.bolt { width:26px; height:26px; }
.wordmark { font-weight:800; letter-spacing:.13em; text-transform:uppercase; font-size:18px; }
.wordmark span { color:var(--brass); }
.subttl { font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.05em; }
.topright { display:flex; align-items:center; gap:12px; }
.asof { font-family:var(--mono); font-size:11px; color:var(--ink-3); }

.tabs { display:flex; gap:2px; padding:0 16px; background:var(--panel); border-bottom:1px solid var(--hair); overflow-x:auto; }
.tab { appearance:none; border:0; background:transparent; color:var(--ink-3); font-family:var(--sans); font-size:14px; font-weight:600; padding:12px 16px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.tab:hover { color:var(--ink-2); }
.tab.active { color:var(--ink); border-bottom-color:var(--brass); }

.wrap { max-width:1080px; margin:0 auto; padding:22px; }
.view { display:none; }
.view.active { display:block; }

.banner { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; border:1px solid var(--hair); background:var(--panel-2); }
.banner.warn { border-color:var(--crit); background:var(--crit-bg); color:var(--crit); }

.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:24px 0 12px; display:flex; align-items:center; gap:10px; }
.eyebrow:first-child { margin-top:4px; }
.eyebrow::after { content:""; flex:1; height:1px; background:var(--hair); }

.card { background:var(--panel-2); border:1px solid var(--hair); border-radius:10px; box-shadow:var(--shadow); }
.stack { display:flex; flex-direction:column; gap:10px; }

.row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--hair-2); }
.row:last-child { border-bottom:0; }
.row .grow { flex:1; min-width:0; }
.row .main { font-size:14px; font-weight:550; }
.row .meta { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.row .meta.due { color:var(--crit); }
.row .main a, .lib a { color:inherit; text-decoration:none; }
.row .main a:hover { text-decoration:underline; }

.pill { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill.crit{color:var(--crit);background:var(--crit-bg);} .pill.go{color:var(--go);background:var(--go-bg);}
.pill.sched{color:var(--sched);background:var(--sched-bg);} .pill.idle{color:var(--idle);background:var(--idle-bg);}
.pill.brass{color:var(--brass-ink);background:color-mix(in srgb,var(--brass) 16%,transparent);}

.check { appearance:none; width:20px; height:20px; border:1.5px solid var(--hair); border-radius:5px; cursor:pointer; flex:none; display:grid; place-items:center; background:var(--panel); }
.check:checked { background:var(--go); border-color:var(--go); }
.check:checked::after { content:"✓"; color:#fff; font-size:13px; font-weight:700; }
.done .main { text-decoration:line-through; color:var(--ink-3); }

.btn { appearance:none; font-family:var(--sans); font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; border:1px solid var(--brass); background:var(--brass); color:#fff; cursor:pointer; }
.btn:hover { filter:brightness(1.05); }
.btn.ghost { background:transparent; color:var(--ink-2); border-color:var(--hair); }
.btn.ghost:hover { border-color:var(--ink-3); color:var(--ink); }
.btn.sm { padding:5px 10px; font-size:12px; }
.rowbar { display:flex; justify-content:space-between; align-items:center; margin:24px 0 12px; }
.rowbar h2 { font-size:15px; margin:0; }

.lib { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.lib a { display:block; padding:14px 16px; border:1px solid var(--hair); border-radius:10px; background:var(--panel-2); box-shadow:var(--shadow); }
.lib a:hover { border-color:var(--brass); }
.lib .t { font-weight:600; font-size:14px; }
.lib .d { font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:4px; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; padding:18px; z-index:50; }
.modal[hidden] { display:none; }
.modal-card { width:100%; max-width:460px; background:var(--panel-2); border:1px solid var(--hair); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--hair-2); }
.modal-head h3 { margin:0; font-size:15px; }
#modal-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
label.f { font-size:12px; color:var(--ink-3); display:flex; flex-direction:column; gap:5px; }
input, select, textarea { font-family:var(--sans); font-size:14px; padding:9px 11px; border:1px solid var(--hair); border-radius:8px; background:var(--panel); color:var(--ink); }
textarea { min-height:120px; resize:vertical; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

.empty { color:var(--ink-3); font-size:14px; padding:14px 16px; }
@media (prefers-reduced-motion: no-preference){ .view.active{ animation:f .3s ease backwards;} @keyframes f{from{opacity:0;transform:translateY(6px);}} }
