/* loswf plane — command deck. dark, tinted-slate, one electric accent.
   sans for structure, mono for data. status color only, never decoration. */

:root {
  --bg: oklch(0.17 0.012 255);
  --surface: oklch(0.21 0.014 255);
  --surface-2: oklch(0.25 0.016 255);
  --line: oklch(0.31 0.018 255);
  --line-2: oklch(0.38 0.02 255);
  --ink: oklch(0.96 0.008 255);
  --ink-2: oklch(0.80 0.012 255);
  --ink-3: oklch(0.62 0.014 255);
  --accent: oklch(0.70 0.15 255);
  --accent-ink: oklch(0.82 0.13 255);
  --accent-wash: oklch(0.30 0.06 255);
  --good: oklch(0.75 0.14 165);
  --warn: oklch(0.80 0.13 75);
  --bad: oklch(0.68 0.17 20);
  --good-wash: oklch(0.30 0.05 165);
  --warn-wash: oklch(0.30 0.05 75);
  --bad-wash: oklch(0.32 0.07 20);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --r-panel: 10px;
  --r-card: 8px;
  --r-ctl: 6px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

button { font-family: var(--sans); cursor: pointer; border: none; background: none; color: inherit; }
.ghost { border: 1px solid var(--line); color: var(--ink-2); border-radius: var(--r-ctl); padding: 6px 11px; font-size: 12px; }
.ghost:hover { border-color: var(--line-2); color: var(--ink); }
.primary { background: var(--accent); color: oklch(0.16 0.03 255); font-weight: 650; border-radius: var(--r-ctl); padding: 11px 20px; font-size: 14px; }
.primary:hover { filter: brightness(1.08); }

/* ---- topbar ---- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 18px;
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 750; letter-spacing: -0.01em; font-size: 15px; }
.brand span { color: var(--accent-ink); font-weight: 400; margin-left: 4px; }
.brand.big { font-size: 22px; }
.spacer { flex: 1; }
.crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs .sep { opacity: 0.5; }
.crumbs .here { color: var(--ink); }

.live {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
  padding: 4px 10px 4px 8px; border-radius: 100px; border: 1px solid var(--line);
  color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px;
}
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.live.on { color: var(--good); border-color: color-mix(in oklch, var(--good), transparent 55%); }

/* ---- app shell ---- */
.app { padding: 22px 18px 60px; max-width: 1400px; margin: 0 auto; }

/* ---- section eyebrow ---- */
.eyebrow {
  font-family: var(--mono); font-size: 11px; text-transform: lowercase;
  letter-spacing: 0.1em; color: var(--ink-3); margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 10px;
}
.eyebrow b { color: var(--ink-2); font-weight: 600; }

/* ===================== ROOT: engagements ===================== */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;
}
.engagement {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 16px 17px; transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.engagement:hover { border-color: var(--line-2); transform: translateY(-2px); }
.engagement.pulse { animation: pulse 0.7s var(--ease); }
@keyframes pulse { 0% { border-color: var(--accent); } 100% { border-color: var(--line); } }

.eng-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.active { background: var(--good); box-shadow: 0 0 0 3px color-mix(in oklch, var(--good), transparent 80%); }
.eng-name { font-weight: 650; letter-spacing: -0.01em; font-size: 15px; }
.eng-owner { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.eng-meta { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.eng-meta .count { color: var(--ink); font-weight: 600; }
.eng-meta .when { margin-left: auto; }

/* phase rail: segmented distribution bar */
.rail { display: flex; height: 8px; border-radius: 100px; overflow: hidden; background: var(--surface-2); gap: 1px; }
.rail .seg { min-width: 3px; }
.rail.empty { background: var(--surface-2); }
.rail-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.rail-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rail-legend i { width: 7px; height: 7px; border-radius: 2px; }
.rail-legend b { color: var(--ink-2); font-weight: 600; }

.badges { display: flex; gap: 6px; }
.badge {
  font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--ink-3);
}
.badge.blocked { color: var(--bad); border-color: color-mix(in oklch, var(--bad), transparent 55%); background: color-mix(in oklch, var(--bad-wash), transparent 40%); }
.badge.rejected { color: var(--warn); border-color: color-mix(in oklch, var(--warn), transparent 55%); }

/* sparkline */
.spark { display: block; height: 22px; }
.spark rect { fill: var(--accent); opacity: 0.85; }
.spark rect.zero { fill: var(--line-2); opacity: 0.5; }

/* ===================== DETAIL: engagement console ===================== */
:root { --surface-3: oklch(0.29 0.02 260); --good-ink: oklch(0.84 0.13 162); --bad-ink: oklch(0.80 0.14 22); }
/* phase ramp: cool violet -> warm green along the lifecycle */
.p-new { --c: oklch(0.62 0.11 292); } .p-product { --c: oklch(0.64 0.12 280); }
.p-architect { --c: oklch(0.66 0.13 268); } .p-planning { --c: oklch(0.68 0.13 256); }
.p-planned { --c: oklch(0.70 0.13 244); } .p-ready { --c: oklch(0.72 0.13 224); }
.p-building { --c: oklch(0.74 0.13 205); } .p-review { --c: oklch(0.76 0.13 190); }
.p-fixreview { --c: oklch(0.78 0.14 176); } .p-done { --c: oklch(0.80 0.15 162); }

.app > .status, .app > .spine, .app > .work, .app > .canon-band { margin-bottom: 22px; }
.sec-lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
.sec-lab b { color: var(--ink-2); font-weight: 600; }
.sec-lab .hint { letter-spacing: 0; text-transform: none; opacity: 0.8; }

/* status band */
.status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.id .kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.id h1 { margin: 5px 0 12px; font-size: 29px; font-weight: 730; letter-spacing: -0.03em; }
.id .sentence { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.state-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; padding: 6px 13px; border-radius: 100px; color: var(--ink); border: 1px solid color-mix(in oklch, var(--c), transparent 40%); background: color-mix(in oklch, var(--c), transparent 82%); }
.state-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px color-mix(in oklch, var(--c), transparent 30%); }
.id .say { color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.id .say b { color: var(--ink); font-weight: 620; }
.id .say .also { color: var(--ink-3); }
.vitals { display: flex; align-items: center; gap: 24px; }
.vital { display: flex; flex-direction: column; gap: 3px; }
.vital .vk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.vital .vv { font-size: 22px; font-weight: 680; letter-spacing: -0.02em; line-height: 1; }
.vital .vv small { font-size: 13px; font-weight: 400; color: var(--ink-3); font-family: var(--mono); }
.vital .vv.q { font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-family: var(--mono); display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; }
.vital .vv.q .d { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.vital.spark-cell { gap: 6px; }
.bspark { display: block; width: 124px; height: 34px; }
.vsep { width: 1px; align-self: stretch; background: var(--line); margin: 6px 0; }

/* lifecycle spine */
.spine { border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(180deg, var(--surface), color-mix(in oklch, var(--surface), var(--bg) 45%)); padding: 20px 26px 18px; }
.spine-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.spine-top .lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.spine-top .prog { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.spine-top .prog b { color: var(--accent-ink); }
.spine-scroll { overflow-x: auto; padding-top: 58px; }
.track { display: grid; grid-template-columns: repeat(10, minmax(60px, 1fr)); min-width: 640px; }
.node { position: relative; display: grid; grid-template-rows: 20px auto; justify-items: center; }
.bead-row { position: relative; width: 100%; height: 20px; display: grid; place-items: center; }
.bead-row::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2.5px; transform: translateY(-50%); background: var(--line); }
.node:first-child .bead-row::before { left: 50%; }
.node:last-child .bead-row::before { right: 50%; }
.node.done .bead-row::before, .node.cur .bead-row::before { background: var(--c); }
.bead { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line); position: relative; z-index: 1; }
.node.done .bead { background: var(--c); border-color: var(--c); }
.node.cur .bead { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 5px color-mix(in oklch, var(--c), transparent 80%), 0 0 16px color-mix(in oklch, var(--c), transparent 45%); }
.node .lbl { margin-top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); text-align: center; }
.node.done .lbl { color: var(--ink-2); }
.node.cur .lbl { color: var(--ink); font-weight: 600; }
.chips { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; }
.chips::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 1.5px; height: 9px; background: var(--c); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 100px; color: var(--ink); white-space: nowrap; background: var(--surface-2); border: 1px solid var(--c); box-shadow: 0 8px 22px -12px color-mix(in oklch, var(--c), transparent 30%); }
.chip:hover { background: var(--surface-3); }
.chip .ty { color: var(--c); filter: brightness(1.35); }
.chip.blocked { border-color: var(--bad); }
.chip.pulse { animation: pulse 0.8s var(--ease); }

/* working area */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

/* current focus */
.focus-card { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); overflow: hidden; }
.fc-head { padding: 17px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in oklch, var(--c), transparent 92%), transparent); }
.fc-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.fc-num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.fc-head h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.34; }
.fc-sub { margin-top: 11px; display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.fc-sub .gh { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--accent-ink); }
.fc-sub .gh:hover { text-decoration: underline; }
.more { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: 10px 2px 0; }

.tag { font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-3); }
.tag.feature { color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent), transparent 55%); }
.tag.bug { color: var(--bad-ink); border-color: color-mix(in oklch, var(--bad), transparent 55%); }
.tag.docs, .tag.chore { color: var(--good-ink); border-color: color-mix(in oklch, var(--good), transparent 55%); }
.tag.phase { color: var(--ink); border-color: color-mix(in oklch, var(--c, var(--accent)), transparent 40%); background: color-mix(in oklch, var(--c, var(--accent)), transparent 84%); }
.tag.blocked { color: var(--bad-ink); border-color: color-mix(in oklch, var(--bad), transparent 45%); }
.tag.rejected { color: var(--warn); border-color: color-mix(in oklch, var(--warn), transparent 45%); }

/* agency scoping tabs inside the focus card */
.scoping { padding: 6px 20px 20px; }
.sweep-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin: 15px 0 11px; }
.scoping .sweep-wait { padding: 6px 0; }
.tabs { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.tabs label { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); padding: 6px 15px; border-radius: 6px; cursor: pointer; transition: color 0.15s var(--ease), background 0.15s var(--ease); }
.tabs label:hover { color: var(--ink-2); }
.scoping input { position: absolute; opacity: 0; pointer-events: none; }
.panel { display: none; margin-top: 16px; }
#sw-product:checked ~ .tabs label[for=sw-product], #sw-architect:checked ~ .tabs label[for=sw-architect], #sw-plan:checked ~ .tabs label[for=sw-plan] { color: var(--ink); background: var(--surface-3); }
#sw-product:checked ~ #swp-product, #sw-architect:checked ~ #swp-architect, #sw-plan:checked ~ #swp-plan { display: block; }

/* key-value + pre used by rendered artifacts (focus scoping & brain sweeps) */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; font-size: 13px; margin: 0; }
.kv dt { font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.kv dd { margin: 0; color: var(--ink-2); line-height: 1.55; }
.kv dd b { color: var(--ink); font-weight: 600; }
.panel pre, .artifact pre { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px; }

/* activity pulse */
.actv { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); position: sticky; top: 68px; overflow: hidden; }
.actv h3 { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.actv h3 .c { margin-left: auto; color: var(--ink-3); }
.feed { list-style: none; margin: 0; padding: 5px 6px; max-height: 540px; overflow-y: auto; }
.ev { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 10px 9px 6px; }
.ev + .ev { border-top: 1px solid color-mix(in oklch, var(--line), transparent 45%); }
.ev.pulse { animation: rowflash 0.9s var(--ease); border-radius: var(--r-ctl); }
@keyframes rowflash { 0% { background: color-mix(in oklch, var(--accent-wash), transparent 20%); } 100% { background: transparent; } }
.ev .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); margin-top: 5px; justify-self: center; }
.dot.k-phase, .dot.k-issue { background: var(--accent); }
.dot.k-merge, .dot.k-open, .dot.k-branch, .dot.k-pr, .dot.k-review, .dot.k-create { background: var(--good); }
.dot.k-push { background: var(--warn); }
.dot.k-delete { background: var(--bad); }
.dot.k-comment { background: var(--ink-2); }
.ev-main { min-width: 0; }
.etxt { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.etxt b { color: var(--ink); font-weight: 600; }
.etxt .who { color: var(--ink); }
.etxt .to { color: var(--accent-ink); font-weight: 600; }
.etxt code { font-size: 10.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.ev-ti { color: var(--ink-3); font-size: 10.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-lnk { color: var(--ink-3); }
.ev-lnk:hover { color: var(--accent-ink); }
.etime { font-family: var(--mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; margin-top: 3px; }

/* project canon */
.canon-band { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.canon { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); padding: 6px 18px 8px; }
.crow { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; padding: 11px 0; }
.crow + .crow { border-top: 1px solid color-mix(in oklch, var(--line), transparent 40%); }
.crow .cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.crow .cat b { display: block; color: var(--ink-2); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; margin-bottom: 1px; }
.arts { display: flex; flex-wrap: wrap; gap: 7px; }
.art { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--line); color: var(--ink-3); }
.art .k { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.art .n { color: var(--good-ink); }
.art.on { color: var(--ink); border-color: color-mix(in oklch, var(--good), transparent 55%); background: color-mix(in oklch, var(--good), transparent 90%); }
.art.on .k { background: var(--good); }
a.art.on:hover { border-color: var(--good); background: color-mix(in oklch, var(--good), transparent 82%); }
.art.miss { border-style: dashed; opacity: 0.7; }

/* backlog summary (distinct from the overlay backlog drawer) */
.bklog { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); overflow: hidden; }
.bk-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; }
.bk-head h3 { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.bk-head .n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.bk-head .n b { color: var(--good-ink); }
.bk-list { list-style: none; margin: 0; padding: 6px; }
.bk { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: baseline; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.bk:hover { background: var(--surface-2); }
.bk .st { width: 7px; height: 7px; border-radius: 50%; background: var(--good); align-self: center; }
.bk .st.closed { background: var(--ink-3); }
.bk .bkm { min-width: 0; display: flex; gap: 7px; align-items: baseline; }
.bk .num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; }
.bk .bt { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-all { display: block; width: 100%; text-align: center; padding: 11px; border: none; border-top: 1px solid var(--line); background: none; font-family: var(--mono); font-size: 11px; color: var(--accent-ink); cursor: pointer; }
.bk-all:hover { background: var(--surface-2); }

/* ===================== agency brain (bento) ===================== */
.brain-sec { margin-top: 4px; }
.brain-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.brain-head h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.brain-head .repo { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.brain-head .cnt { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.doc { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.doc .dh { padding: 11px 15px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.doc .dh .n { color: var(--accent-ink); }
.doc .dh .b { color: var(--ink-3); }
.doc .db { padding: 15px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); max-height: 320px; overflow-y: auto; word-break: break-word; }
.doc .db.md > :first-child { margin-top: 0; }
.doc.profile { grid-column: span 5; }
.doc.memory { grid-column: span 4; }
.doc.col3 { grid-column: span 3; }
.doc.stack { border: none; background: none; overflow: visible; gap: 12px; }
.doc.stack > .doc { grid-column: auto; }

/* brain sweep cards (collapsible, below the bento) */
.sweeps { display: flex; flex-direction: column; gap: 10px; }
.sweep { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.sweep-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.sweep-head .iss { color: var(--ink); font-weight: 600; }
.sweep-head .phases { display: flex; gap: 6px; margin-left: auto; }
.sweep-head .pchip { font-size: 10px; padding: 1px 7px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-3); }
.sweep-head .pchip.on { color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent), transparent 55%); }
.sweep-body { padding: 0 14px 14px; display: none; }
.sweep.open .sweep-body { display: block; }
.artifact { margin-top: 12px; }
.artifact h5 { margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }

.empty.sm { padding: 16px; font-size: 11.5px; }

@media (max-width: 1000px) {
  .status { grid-template-columns: 1fr; }
  .vitals { overflow-x: auto; }
  .work, .canon-band { grid-template-columns: 1fr; }
  .actv { position: static; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .doc.profile, .doc.memory { grid-column: span 6; }
  .doc.col3 { grid-column: span 6; }
  .doc.stack { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .bento, .doc.stack { grid-template-columns: 1fr; }
  .doc.profile, .doc.memory, .doc.col3 { grid-column: 1; }
  .id h1 { font-size: 24px; }
  .crow { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- states ---- */
.empty { border: 1px dashed var(--line-2); border-radius: var(--r-panel); padding: 30px; text-align: center; color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; }
.empty code { color: var(--accent-ink); }
.skeleton { border-radius: var(--r-panel); background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)); background-size: 200% 100%; animation: sheen 1.3s linear infinite; min-height: 120px; }
@keyframes sheen { to { background-position: -200% 0; } }
.err { color: var(--bad); font-family: var(--mono); font-size: 12.5px; padding: 16px; border: 1px solid color-mix(in oklch, var(--bad), transparent 55%); border-radius: var(--r-panel); background: color-mix(in oklch, var(--bad-wash), transparent 55%); }

/* ---- gate ---- */
.gate { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 30; }
.gate[hidden] { display: none; }
.gate-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 34px; width: min(380px, 92vw); text-align: center; display: grid; gap: 16px; }
.note { color: var(--bad); font-size: 11.5px; font-family: var(--mono); min-height: 15px; }

/* ===================== BACKLOG + ISSUE DRAWER ===================== */
.detail-head .backlog-btn { margin-left: 4px; }
.backlog-btn .n { color: var(--ink); font-weight: 650; }

.overlay { position: fixed; inset: 0; z-index: 20; }
.overlay[hidden] { display: none; }
.backdrop { position: absolute; inset: 0; background: color-mix(in oklch, var(--bg), transparent 25%); opacity: 0; transition: opacity 0.2s var(--ease); }
.overlay.open .backdrop, .overlay.drawer-open .backdrop { opacity: 1; }

.backlog, .drawer {
  position: absolute; top: 0; bottom: 0; background: var(--surface);
  display: flex; flex-direction: column; will-change: transform;
  transition: transform 0.24s var(--ease);
}
.backlog { left: 0; width: min(380px, 90vw); border-right: 1px solid var(--line); transform: translateX(-101%); }
.drawer { right: 0; width: min(540px, 96vw); border-left: 1px solid var(--line); transform: translateX(101%); box-shadow: -24px 0 60px -30px oklch(0 0 0 / 0.6); }
.overlay.open .backlog { transform: translateX(0); }
.overlay.drawer-open .drawer { transform: translateX(0); }

.panel-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.panel-head .sub { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.panel-head .x { margin-left: auto; width: 26px; height: 26px; border-radius: var(--r-ctl); border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1; }
.panel-head .x:hover { border-color: var(--line-2); color: var(--ink); }

/* filter bar */
.bl-filter { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bl-filter input, .bl-filter select {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-ctl); padding: 6px 9px; font-family: var(--mono); font-size: 12px;
}
.bl-filter input { flex: 1; min-width: 0; }
.bl-filter input::placeholder { color: var(--ink-3); }

/* issue rows */
.bl-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.bl-row { text-align: left; width: 100%; background: none; border: 1px solid transparent; border-radius: var(--r-card); padding: 9px 10px; display: grid; gap: 5px; transition: background 0.14s var(--ease), border-color 0.14s var(--ease); }
.bl-row:hover { background: var(--surface-2); border-color: var(--line); }
.bl-row .r1 { display: flex; align-items: center; gap: 8px; }
.bl-row .st { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bl-row .st.open { background: var(--good); }
.bl-row .st.closed { background: var(--ink-3); }
.bl-row .num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.bl-row .managed { font-family: var(--mono); font-size: 9.5px; color: var(--accent-ink); border: 1px solid color-mix(in oklch, var(--accent), transparent 55%); border-radius: 100px; padding: 0 6px; margin-left: auto; }
.bl-row .ti { font-size: 12.5px; color: var(--ink); line-height: 1.35; }
.bl-row .r3 { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.bl-count { padding: 8px 14px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); border-top: 1px solid var(--line); }

/* issue detail in drawer */
.issue { overflow-y: auto; padding: 18px 20px; }
.issue .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.issue h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 12px; line-height: 1.25; }
.issue-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.issue-meta .st { text-transform: uppercase; letter-spacing: 0.04em; }
.issue-meta .st.open { color: var(--good); }
.issue-meta .st.closed { color: var(--ink-3); }
.issue-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

/* explicit exit-to-github action: names its destination, flags the new tab */
.gh-cta {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 4px;
  padding: 11px 14px; border: 1px solid color-mix(in oklch, var(--accent), transparent 45%);
  border-radius: var(--r-ctl); background: color-mix(in oklch, var(--accent-wash), transparent 30%);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.gh-cta:hover { border-color: var(--accent); background: var(--accent-wash); text-decoration: none; }
.gh-cta .lbl { font-weight: 650; font-size: 13px; color: var(--ink); }
.gh-cta .dest { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.gh-cta .ext { margin-left: auto; color: var(--accent-ink); font-size: 15px; }

/* small external-link glyph wherever a link leaves the plane */
.ext { color: var(--ink-3); font-size: 10px; }
.wi-title:hover .ext { color: var(--accent-ink); }

.comments { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.comment { border-top: 1px solid var(--line); padding-top: 12px; }
.comment .who { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-bottom: 6px; }
.comment .who .t { color: var(--ink-3); }

/* light markdown */
.md { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); word-break: break-word; }
.md h1, .md h2, .md h3 { color: var(--ink); font-weight: 650; letter-spacing: -0.01em; margin: 16px 0 8px; line-height: 1.3; }
.md h1 { font-size: 17px; } .md h2 { font-size: 15px; } .md h3 { font-size: 14px; }
.md p { margin: 8px 0; }
.md ul { margin: 8px 0; padding-left: 20px; } .md li { margin: 3px 0; }
.md code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.md pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px; overflow-x: auto; }
.md pre code { background: none; border: none; padding: 0; }
.md a { color: var(--accent-ink); }
.md a:hover { text-decoration: underline; }
.md em { font-style: italic; }
.md del { color: var(--ink-3); }
.md hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.md ol { margin: 8px 0; padding-left: 22px; }
.md ol li { margin: 3px 0; }
.md img { max-width: 100%; border-radius: var(--r-ctl); border: 1px solid var(--line); margin: 8px 0; }
.md blockquote { border-left: 2px solid var(--line-2); margin: 8px 0; padding-left: 12px; color: var(--ink-3); }
.md blockquote p { margin: 4px 0; }
.md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 12.5px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.md th { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.md tr:nth-child(even) td { background: color-mix(in oklch, var(--surface-2), transparent 55%); }

@media (max-width: 860px) {
  .detail-cols { grid-template-columns: 1fr; }
  .stream { position: static; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}