[hidden] { display: none !important; }
:root{
  --bg:#000;
  --cyan:#39d7ff; --cyan-dim:#1b6f8a;
  --orange:#ff8a3d; --red:#ff6249;
  --green:#37f0b0;
  --ink:#cfe8f5; --ink-dim:#6f8aa0;
  --line:rgba(255,255,255,.08);
  --line-accent:rgba(57,215,255,.3);
  --card:rgba(10,12,15,.85);
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;
  background:var(--bg);
  color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.5;
}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
header,main,#login{position:relative;z-index:1}

header{display:flex;align-items:center;gap:18px;padding:14px 26px;border-bottom:1px solid var(--line)}
.brand{font-size:14px;letter-spacing:3px;color:var(--cyan);text-shadow:0 0 10px rgba(57,215,255,.3)}
.brand small{color:var(--ink-dim);letter-spacing:1px;font-size:11px}
header nav{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
header nav button{background:transparent;color:var(--ink-dim);border:0;font-family:var(--mono);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:8px 14px;cursor:pointer}
header nav button + button{border-left:1px solid var(--line)}
header nav button:hover{background:rgba(57,215,255,.08);color:var(--cyan)}

main{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px 26px;max-width:1180px;margin:0 auto}
main > .zone:first-child, main > .zone:last-child{grid-column:1 / -1}
.zone{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
}
.zone h2{margin:0 0 10px;font-size:10px;font-weight:400;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink-dim);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.zone h4{margin:10px 0 2px;font-size:9px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:var(--cyan-dim)}
.zone ul{margin:4px 0;padding-left:4px;list-style:none}
.zone li{margin:7px 0;padding-left:14px;position:relative;font-size:12px;line-height:1.45}
.zone li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 4px rgba(57,215,255,.5)}
.zone p{font-size:12px;margin:6px 0}

.age{font-size:10px;letter-spacing:1px;text-transform:none}
.age.ok{color:var(--green)}
.age.amber{color:var(--orange)}
.age.red{color:var(--red);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

.meta,.counts{color:var(--ink-dim);font-size:10px;letter-spacing:1px}
.stalled{color:var(--orange);font-size:9px;letter-spacing:2px;text-transform:uppercase;margin-left:8px}
.ok{color:var(--green)}
.red{color:var(--red)}
em{font-style:normal;font-size:10px;letter-spacing:1px}
em.prep-ok{color:var(--green)}
em.prep-no{color:var(--orange)}

a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--cyan-dim)}
a:hover{border-bottom-color:var(--cyan)}
a.back{border:1px solid var(--line);border-radius:6px;padding:2px 10px;font-size:9px;letter-spacing:2px;text-transform:uppercase;border-bottom-style:solid}

details.person{margin:8px 0;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);transition:border-color .15s}
details.person:hover{border-color:var(--line-accent)}
details.person summary{padding:9px 12px;cursor:pointer;font-size:12px;color:var(--ink);
  display:flex;align-items:baseline;gap:10px;list-style:none}
details.person summary::-webkit-details-marker{display:none}
details.person summary::before{content:'\203A';color:var(--cyan);transition:transform .15s;display:inline-block;width:10px;flex:0 0 auto}
details.person[open] summary::before{transform:rotate(90deg)}
details.person summary .counts{margin-left:auto;text-align:right}
details.person h4{margin:6px 12px 0}
details.person ul{margin:4px 12px 10px}

ul.projects li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
ul.projects li::before{top:9px}

/* system zone: trend sparklines + review queue fold */
svg.spark{vertical-align:middle;margin:0 4px}
svg.spark polyline{stroke:var(--cyan);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
svg.spark circle{fill:var(--cyan)}
.rq-kind{font-size:9px;letter-spacing:2px;text-transform:uppercase}
.rq-kind.rq-corr{color:var(--cyan-dim)}
.rq-kind.rq-wrong{color:var(--orange)}

#login{display:grid;place-items:center;min-height:100vh}
#login form{display:grid;gap:10px;width:280px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:26px}
#login h1{margin:0 0 6px;font-size:15px;font-weight:400;letter-spacing:4px;color:var(--cyan);text-align:center}
#login input{padding:10px;border-radius:8px;border:1px solid var(--line);background:#050607;
  color:var(--ink);font-family:var(--mono);font-size:13px;outline:none}
#login input:focus{border-color:var(--line-accent);box-shadow:none}
#login input::placeholder{color:var(--ink-dim)}
#login button{padding:10px;border-radius:8px;border:1px solid var(--line);background:rgba(57,215,255,.08);
  color:var(--cyan);font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
#login button:hover{border-color:var(--line-accent)}
#login-error{color:var(--orange);min-height:1em;font-size:11px;margin:0}

#capture-bar{position:relative;z-index:1;display:flex;gap:8px;padding:12px 26px 0;max-width:1180px;margin:0 auto}
#capture-bar textarea{flex:1;resize:none;padding:9px 12px;border-radius:8px;border:1px solid var(--line);
  background:#050607;color:var(--ink);font-family:var(--mono);font-size:12px;outline:none}
#capture-bar textarea:focus{border-color:var(--line-accent)}
#capture-bar button{padding:0 16px;border-radius:8px;border:1px solid var(--line);background:rgba(57,215,255,.08);
  color:var(--cyan);font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  white-space:nowrap;flex:0 0 auto}
#capture-chips{position:relative;z-index:1;display:flex;gap:6px;flex-wrap:wrap;padding:8px 26px 0;max-width:1180px;margin:0 auto}
.chip{font-size:10px;letter-spacing:1px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink-dim)}
.chip.pending{color:var(--cyan);border-color:var(--line-accent)}
.chip.deferred{color:var(--orange);cursor:pointer}
.chip.queued{color:var(--red)}

button.act{margin-left:8px;padding:1px 8px;font-size:9px;letter-spacing:1px;text-transform:uppercase;
  border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--cyan);cursor:pointer;font-family:var(--mono)}
button.act:hover{border-color:var(--line-accent)}
li.acted > a, li.acted > span{opacity:.45;text-decoration:line-through}
details.tasklist summary{cursor:pointer;list-style:none}
details.tasklist summary::-webkit-details-marker{display:none}

/* plans zone */
.zone.plans{grid-column:1 / -1}
ul.plans li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
ul.plans li::before{top:9px}
.badge{font-size:9px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;color:var(--ink-dim)}
.badge.gated{color:var(--green);border-color:rgba(55,240,176,.35)}
.badge.review{color:var(--orange);border-color:rgba(255,138,61,.35)}

/* plan walkthrough */
.plan-walk > .meta{display:block;margin:-4px 0 10px}
.plan-stale{border:1px solid rgba(255,138,61,.45);background:rgba(255,138,61,.08);color:var(--orange);
  border-radius:8px;padding:6px 10px;font-size:11px;letter-spacing:1px;margin:0 0 10px}
.plan-gate{position:sticky;top:0;z-index:2;background:var(--bg);padding:4px 0 8px;
  border-bottom:1px solid var(--line);margin-bottom:10px}
.plan-gate .cbx{margin:0}
.cbx{display:flex;align-items:baseline;gap:10px;margin:6px 0;padding:8px 12px;border:1px solid var(--line);
  border-radius:8px;background:rgba(255,255,255,.02);cursor:pointer;user-select:none;-webkit-user-select:none;
  font-size:12px;transition:border-color .15s}
.cbx:hover{border-color:var(--line-accent)}
.cbx .glyph{color:var(--ink-dim);flex:0 0 auto}
.cbx.checked{border-color:var(--line-accent)}
.cbx.checked .glyph,.cbx.checked .lbl{color:var(--cyan)}
.note-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.note-row .lbl{flex:0 0 auto;color:var(--ink-dim);font-size:11px;letter-spacing:1px}
.note-row input{flex:1;min-width:0;padding:8px 12px;border-radius:8px;border:1px solid var(--line);
  background:#050607;color:var(--ink);font-family:var(--mono);font-size:12px;outline:none}
.note-row input:focus{border-color:var(--line-accent)}
.md{font-size:12px;line-height:1.55;margin:8px 0}
.md h1,.md h2,.md h3{font-weight:400;letter-spacing:2px;text-transform:uppercase;margin:14px 0 4px}
.md h1{font-size:12px;color:var(--cyan)}
.md h2{font-size:11px;color:var(--cyan-dim)}
.md h3{font-size:10px;color:var(--cyan-dim)}
.md p{margin:6px 0}
.md ul{margin:4px 0;padding-left:18px;list-style:disc}
.md li{margin:3px 0;padding-left:0}
.md li::before{display:none}
.md blockquote{margin:6px 0;padding:2px 12px;border-left:2px solid var(--cyan-dim);color:var(--ink-dim)}
.md blockquote p{margin:4px 0}
.md code{background:rgba(57,215,255,.08);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:11px}
.md strong{color:var(--ink);font-weight:600}
.plan-apply{position:sticky;bottom:0;z-index:2;background:var(--bg);border-top:1px solid var(--line);
  margin-top:14px;padding:10px 0;display:flex;justify-content:flex-end}
.plan-apply button{padding:9px 18px;border-radius:8px;border:1px solid var(--line);background:rgba(57,215,255,.08);
  color:var(--cyan);font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.plan-apply button:hover:not(:disabled){border-color:var(--line-accent)}
.plan-apply button:disabled{opacity:.4;cursor:default}

/* workbench */
.zone.wb{grid-column:1 / -1}
.zone.wb h2 > span:first-child{display:flex;align-items:baseline;gap:8px}
.wb-status{font-size:9px;letter-spacing:1px;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--ink-dim)}
.wb-status.live{color:var(--green);border-color:rgba(55,240,176,.35)}
.wb-status.polling{color:var(--orange);border-color:rgba(255,138,61,.35)}
.wb-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:start}
.wb-rail{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto}
.wb-item{display:block;text-align:left;background:rgba(255,255,255,.02);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;color:var(--ink);font-family:var(--mono);font-size:12px;cursor:pointer;
  transition:border-color .15s}
.wb-item:hover{border-color:var(--line-accent)}
.wb-item.sel{border-color:var(--line-accent);background:rgba(57,215,255,.06)}
.wb-item .t{display:block}
.wb-item .meta{display:block;margin-top:2px;word-break:break-all}
.wb-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.wb-doc{margin:0;background:#050607;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  max-height:46vh;overflow:auto;font-size:11px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.wb-line.chg{background:rgba(57,215,255,.09);box-shadow:-2px 0 0 var(--cyan-dim)}
.wb-feed{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow:auto;padding:2px 0}
.wb-msg{font-size:12px;white-space:pre-wrap;word-break:break-word}
.wb-msg .who{display:inline-block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);margin-right:8px}
.wb-msg.assistant{color:var(--cyan)}
.wb-msg.system{color:var(--orange)}
.wb-msg.user{color:var(--ink-dim)}
.wb-thinking{color:var(--ink-dim);font-size:11px;letter-spacing:1px;animation:pulse 1.8s ease-in-out infinite}
.wb-prompt{display:flex;gap:8px}
.wb-prompt textarea{flex:1;resize:none;padding:9px 12px;border-radius:8px;border:1px solid var(--line);
  background:#050607;color:var(--ink);font-family:var(--mono);font-size:12px;outline:none}
.wb-prompt textarea:focus{border-color:var(--line-accent)}
.wb-prompt button{padding:0 16px;border-radius:8px;border:1px solid var(--line);background:rgba(57,215,255,.08);
  color:var(--cyan);font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;flex:0 0 auto}
.wb-prompt button:hover:not(:disabled){border-color:var(--line-accent)}
.wb-prompt button:disabled{opacity:.4;cursor:default}
.wb-err{color:var(--red);font-size:11px;min-height:1em;margin:0}
.wb-empty{color:var(--ink-dim)}
.wb-empty code{background:rgba(57,215,255,.08);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:11px}

@media (max-width:760px){
  main{grid-template-columns:1fr;padding:14px}
  header{flex-wrap:wrap;gap:10px;padding:12px 14px}
  header nav{margin-left:0}
  #capture-bar{position:sticky;top:0;background:var(--bg);padding:10px 14px 8px}
  #capture-chips{padding:6px 14px 0}
  .plan-gate{top:56px} /* clear the sticky capture bar */
  .wb-layout{grid-template-columns:1fr} /* rail stacks on top */
  .wb-rail{max-height:28vh}
  .wb-doc{max-height:38vh}
}
@media (prefers-reduced-motion: reduce){
  .age.red{animation:none}
  .wb-thinking{animation:none}
}