/* Watchtower R4 — Instrument + Ledger direction.
   One work surface per intent: coding agent first, incident planner second,
   attack drills selected on the left. Evidence rail always visible. */
:root{
  --bg:#0a121b;--bg-deep:#070e15;--panel:#0f1d27;--panel-2:#132430;
  --line:#243845;--line-soft:#1c2d39;--line-strong:#35505b;
  --text:#e9f3f1;--muted:#a3b4be;--muted-2:#8aa1ac;
  --mint:#78e5ca;--mint-ink:#0e2b26;--blue:#9cc4ea;--danger:#ffae91;--amber:#f1d08f;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:5px;--hair:1px solid var(--line);
}
*{box-sizing:border-box}
html{color-scheme:dark}
html,body{margin:0;min-height:100%}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--text);
  font:13px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,textarea:focus-visible,select:focus-visible,input:focus-visible,pre:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
a{color:var(--mint)}
noscript .noscript{margin:0;padding:12px 24px;background:#3a241d;color:#ffd9c9;font-size:12px}
.mono{font-family:var(--mono)}
.sr-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header ------------------------------------------------------------------ */
header{position:sticky;top:0;z-index:20;min-height:64px;padding:0 24px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;border-bottom:var(--hair);background:#0d1923}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand .mark{width:36px;height:36px;flex:0 0 auto;background:#10383a;border:1px solid #488d8b;
  color:var(--mint);font-size:24px;border-radius:6px;display:grid;place-items:center}
.brand strong{display:block;font-size:17px;letter-spacing:-.5px;line-height:1.1}
.brand strong span{font-weight:400;color:var(--mint)}
.brand small{display:block;color:#89a3ad;font-weight:750;letter-spacing:1.15px;font-size:8.5px;margin-top:3px}
.topstatus{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.7px;color:#a9c7c3;white-space:nowrap}
.topstatus b{font-size:8.5px;color:#a8e0d6;border:1px solid #3f7269;border-radius:4px;
  background:#17342f;padding:7px 9px;margin-left:8px;letter-spacing:.8px}
.online{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--mint);
  box-shadow:0 0 9px #68d9c466;flex:0 0 auto}

/* Layout ------------------------------------------------------------------ */
.layout{display:grid;grid-template-columns:238px minmax(0,1fr) 312px;flex:1 1 auto;align-items:start}
.left{padding:20px 13px 24px 22px;border-right:var(--hair);background:#0d1822;
  position:sticky;top:64px;max-height:calc(100vh - 64px);overflow:auto;
  display:flex;flex-direction:column}
main{min-width:0;padding:20px clamp(20px,2.4vw,38px) 44px}
.right{padding:20px 17px 22px;border-left:var(--hair);background:#0d1822;
  position:sticky;top:64px;max-height:calc(100vh - 64px);overflow:auto}

.smallhead,.eyebrow{font-weight:800;font-size:9px;letter-spacing:1.45px;color:#c2d3d5}
.smallhead b{color:var(--mint);margin-right:7px}
.eyebrow{display:flex;align-items:center;gap:8px;color:#9bdcd4;font-size:9px}
.eyebrow i{width:20px;height:1px;background:#46736f;flex:0 0 auto}

/* Left rail --------------------------------------------------------------- */
.left h2{font-size:21px;letter-spacing:-.6px;line-height:1.18;margin:14px 0 8px;font-weight:640}
.left>p{font-size:11px;line-height:1.55;color:var(--muted);margin:0 0 4px}
.group-label{font-size:9px;letter-spacing:1.3px;color:#89a1ab;margin:17px 0 6px;font-weight:800}
.scene{border:1px solid transparent;text-align:left;width:100%;padding:7px 8px;margin-bottom:4px;
  border-radius:var(--radius);display:grid;grid-template-columns:19px 1fr;gap:8px;align-items:center;
  background:transparent;color:#d3e1de;transition:background .15s,border-color .15s}
.scene:hover{background:#142430;border-color:#2b4350}
.scene[aria-pressed=true]{background:#11302e;border-color:#3f7d74;box-shadow:inset 2px 0 0 var(--mint)}
.scene i{font-style:normal;font-family:var(--mono);font-size:9px;color:#8fa8b2;text-align:center}
.scene span{font-size:11px;font-weight:650;line-height:1.25;min-width:0}
.scene small{display:block;color:#8ba1ab;font-size:8.5px;margin-top:2px;font-weight:500;letter-spacing:.3px}
.rail-note{margin-top:20px;border-top:var(--hair);padding-top:16px;color:var(--muted)}
.rail-note p{font-size:10px;line-height:1.6;margin:6px 0 0}

/* Hero + work title ------------------------------------------------------- */
.hero{margin:11px 0 15px}
.hero h1{font-size:clamp(22px,2.2vw,30px);line-height:1.12;font-weight:640;letter-spacing:-1.05px;margin:0 0 6px}
.hero h1 em{font-style:normal;font-weight:400;color:var(--mint)}
.hero p{max-width:620px;color:var(--muted);line-height:1.55;margin:0;font-size:11.5px}
.work-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.work-title h2{font-size:18px;letter-spacing:-.35px;margin:6px 0 3px;line-height:1.2}
.work-title p{font-size:11px;color:var(--muted-2);margin:0;max-width:580px}
.status-pill{border:1px solid #3f6d6a;background:#173735;color:var(--mint);font-size:9px;
  font-weight:800;letter-spacing:.9px;border-radius:3px;padding:6px 8px;white-space:nowrap;margin-top:3px}
.status-pill.fail{border-color:#7a4a3d;background:#2c1c18;color:var(--danger)}

.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}
.phase{background:#10202b;border:1px solid #2b414d;border-radius:4px;padding:7px 9px}
.phase span{color:var(--mint);font-family:var(--mono);font-size:9px;font-weight:600}
.phase b{display:block;margin:3px 0 1px;font-size:9.5px;letter-spacing:.55px}
.phase small{font-size:9.5px;color:#8ea6b0;line-height:1.35;display:block}

/* Controls ---------------------------------------------------------------- */
.control-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.control-row select,.control-row input{min-width:0;flex:1 1 260px;background:var(--bg-deep);
  color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:10px 11px;font:11.5px var(--mono)}
.control-row select{flex-basis:300px}
.control-row button{border:1px solid #4b9387;background:#1b4a42;color:#cdf3e7;
  border-radius:var(--radius);padding:10px 15px;font-size:11px;font-weight:800;white-space:nowrap;
  transition:background .15s}
.control-row button:hover:not(:disabled){background:#226055}
.control-row button:disabled{opacity:.45;cursor:not-allowed}
.hostile{display:flex;align-items:center;gap:6px;color:var(--danger);font-size:10.5px;
  font-weight:700;white-space:nowrap;padding:0 4px;border:1px solid #5a3a31;border-radius:var(--radius);
  background:#1d1512;cursor:pointer}
.hostile input{flex:none;accent-color:var(--danger);margin:0 0 0 7px}
.hostile span{padding-right:7px}
.issue{margin:7px 0 0;color:var(--muted-2);font-size:10.5px;line-height:1.5}
.inline-error{margin:9px 0 0;padding:9px 11px;border:1px solid #7a4a3d;border-radius:4px;
  background:#2a1a16;color:#ffc9b7;font-size:11px;line-height:1.45}

/* Incident bar ------------------------------------------------------------ */
.incident{margin:18px 0 22px;padding:12px 13px;border:1px solid #2e4651;border-radius:6px;background:#0f1f29}
.incident-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.incident-head p{margin:0;color:#8ea6b0;font-size:9.5px;line-height:1.4;max-width:420px}
.incident .control-row input{flex:1 1 320px}
.incident .control-row button{background:#173b3b;border-color:#477a73;flex:0 0 auto}

/* Console ----------------------------------------------------------------- */
.console-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#142834;border:1px solid #36525d;border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;
  padding:8px 12px;font-size:9px;letter-spacing:1.1px;font-weight:800;color:#b9d0ce;margin-top:12px}
.console-head span:last-child{font-family:var(--mono);color:#8eaeb1;letter-spacing:0;font-weight:500;white-space:nowrap}
.console{white-space:pre-wrap;overflow-wrap:anywhere;min-height:120px;max-height:300px;overflow:auto;
  padding:13px 14px;margin:0;background:var(--bg-deep);color:#b9e6da;
  font:11.5px/1.75 var(--mono);border:1px solid #36525d;border-radius:0 0 var(--radius) var(--radius)}
.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted-2);font-size:10px;margin-top:10px}
.actions>span{line-height:1.45}
.actions button{border:none;padding:11px 16px;border-radius:4px;font-size:11px;font-weight:800;
  background:var(--mint);color:var(--mint-ink);white-space:nowrap;transition:background .15s}
.actions button:hover:not(:disabled){background:#a6f6e3}
.actions button:disabled{opacity:.45;cursor:not-allowed}
.diff-area{margin-top:16px}
.diff-area pre{border:1px solid #33505a;background:#0e2027;padding:12px;white-space:pre-wrap;
  overflow-wrap:anywhere;font:11px/1.65 var(--mono);color:#b7ddc0;border-radius:4px;max-height:260px;overflow:auto;margin:5px 0 0}

/* Checks ------------------------------------------------------------------ */
.checks{margin-top:18px}
.check-list{margin-top:8px;border:1px solid #2b424d;border-radius:var(--radius);overflow:hidden}
.check{display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px 8px;align-items:baseline;
  padding:7px 10px;background:#0e1c26;border-bottom:1px solid #21323d;font-size:11px}
.check:last-child{border-bottom:0}
.check .mark{color:var(--mint);font-weight:800;font-size:12px;line-height:1}
.check .label{color:#dcebe7;line-height:1.35}
.check .expect{grid-column:2;font-family:var(--mono);font-size:9.5px;color:#8fb3ae;
  overflow-wrap:anywhere;line-height:1.4}
.check .detail{grid-column:2;font-size:10px;color:#93a9b3;line-height:1.4}
.check.fail{background:#241a17}
.check.fail .mark{color:var(--danger)}
.check.fail .label{color:#ffd2c2}
.check-empty{margin:0;padding:11px;color:#8da4ae;font-size:10.5px;background:#0e1c26}

/* Observables ------------------------------------------------------------- */
.limits{margin-top:22px;background:#0f1f29;border:1px solid #2e4651;border-radius:6px;padding:13px 14px}
.observables{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.observables div{border-right:1px solid #2a414b;padding-right:10px;min-width:0}
.observables div:last-child{border:0;padding-right:0}
.observables small{display:block;color:#8ba3b0;font-size:8.5px;letter-spacing:1px}
.observables strong{display:block;color:var(--mint);font-size:10.5px;line-height:1.35;margin-top:4px;letter-spacing:.2px}
.observables strong.warn{color:var(--danger)}

/* Evidence rail ----------------------------------------------------------- */
.receipt-subject{margin:5px 0 0;font-size:9px;letter-spacing:.6px;color:#8fa7b1}
.receipt-subject span{color:#cfe2de;font-family:var(--mono);letter-spacing:0}
.verdict{padding:14px 0 15px;border-bottom:var(--hair)}
#verdict-icon{width:38px;height:38px;border-radius:50%;border:1px solid #4d8579;background:#18453d;
  display:grid;place-items:center;color:var(--mint);font-size:20px;margin-bottom:11px}
#verdict-icon.fail{border-color:#7a4a3d;background:#2c1c18;color:var(--danger)}
.verdict>span{font-size:8.5px;letter-spacing:1.1px;color:#a9c3c1;font-weight:800}
.verdict h2{font-size:18px;line-height:1.18;letter-spacing:-.4px;margin:5px 0 5px}
.verdict p{font-size:10.5px;line-height:1.55;color:var(--muted);margin:0 0 9px}
.passchip{display:inline-block;background:#17342f;border:1px solid #46806f;color:var(--mint);
  padding:5px 7px;border-radius:3px;font-size:8.5px;font-weight:800;letter-spacing:.6px}
.passchip.fail{background:#2c1c18;border-color:#7a4a3d;color:var(--danger)}
.facts{display:grid;gap:8px;padding:13px 0;border-bottom:var(--hair)}
.facts div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.facts span{font-size:10px;color:#8fa8b5}
.facts strong{font-size:9.5px;text-align:right;color:#d2eee5;max-width:155px;overflow-wrap:anywhere;font-family:var(--mono)}
.facts strong.warn{color:var(--danger)}
.ledger-box,.gate-box{margin-top:14px;padding:11px 11px 12px;border:1px solid #29414c;border-radius:5px;background:#0f1d27}
.ledger-head,.gate-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:7px}
.ledger-head strong,.gate-head strong{font-size:10.5px;letter-spacing:.6px;color:var(--mint)}
.ledger-head strong.fail,.gate-head strong.fail{color:var(--danger)}
.ledger-head span,.gate-head span{font-size:9px;color:#8fa7b1;text-align:right}
#ledger-head{margin:5px 0 6px;font-size:9px;color:#86a3a8;overflow-wrap:anywhere}
.ledger-recent{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid #21353f}
.ledger-recent li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px;
  padding:4px 0;border-bottom:1px solid #1b2c36;font-size:9.5px;align-items:baseline}
.ledger-recent .seq{font-family:var(--mono);color:#7f9aa4}
.ledger-recent .name{color:#cfe2de;overflow-wrap:anywhere}
.ledger-recent .claim{color:#8fb8ae;font-size:8.5px;text-align:right;letter-spacing:.3px}
.ledger-recent li.empty{display:block;color:#8299a4;padding:6px 0}
.ghost{width:100%;margin-top:2px;padding:7px;background:#152b36;border:1px solid #3a5c68;
  border-radius:3px;color:#c8e8df;font-size:9.5px;font-weight:700;letter-spacing:.4px}
.ghost:hover{background:#1b3743}
.tiny{margin:8px 0 0;font-size:9px;line-height:1.5;color:#7f97a2}
.gate-details{margin-top:8px}
.gate-details summary{cursor:pointer;font-size:9px;letter-spacing:.55px;color:#a9c3c1;
  padding:4px 0;min-height:22px;font-weight:700}
.gate-details summary:hover{color:var(--mint)}
.gate-details[open] summary{margin-bottom:2px}
.gate-list{list-style:none;margin:2px 0 0;padding:0;border-top:1px solid #21353f}
.gate-list li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;
  border-bottom:1px solid #1b2c36;font-size:9px;line-height:1.35}
.gate-id{color:#d6a894;text-transform:capitalize}
.gate-action{color:#7f97a2;text-align:right}
.gate-list li.empty{display:block;color:#8fb8ae}
.export-bar{margin-top:12px}
.export-bar button{padding:10px;background:#1d3b3a;border:1px solid #477a73;color:#cdf3e7;
  border-radius:4px;font-size:10.5px;font-weight:700;width:100%;display:flex;
  align-items:center;justify-content:space-between;gap:8px}
.export-bar button:hover:not(:disabled){background:#245049}
.export-bar button:disabled{opacity:.45;cursor:not-allowed}
.receipt-footer{margin-top:14px;padding-top:12px;border-top:var(--hair)}
.receipt-footer p{font-size:10px;line-height:1.55;color:#94abb3;margin:0 0 8px}
.receipt-footer>span{font-size:8.5px;letter-spacing:1px;color:#7f9f98;display:block}

footer{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 24px;background:#0a141d;border-top:var(--hair);color:#74909c;
  font-size:8.5px;letter-spacing:.6px}

/* Responsive -------------------------------------------------------------- */
@media(max-width:1240px){
  .layout{grid-template-columns:212px minmax(0,1fr) 278px}
  .left{padding:18px 11px 20px 18px}
  .right{padding:18px 13px 20px}
  main{padding:18px 20px 38px}
  .scene small{display:none}
  .observables{grid-template-columns:repeat(2,1fr)}
  .observables div:nth-child(2){border:0;padding-right:0}
}
@media(max-width:1020px){
  .layout{grid-template-columns:200px minmax(0,1fr)}
  .right{grid-column:1/-1;position:static;max-height:none;overflow:visible;
    border-left:0;border-top:var(--hair);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 18px;align-content:start}
  .right>.smallhead,.right>.verdict,.right>.facts,.right>.export-bar,.right>.receipt-footer{grid-column:1/-1}
  .ledger-box,.gate-box{margin-top:12px}
}
@media(max-width:720px){
  header{position:static}
  .layout{display:flex;flex-direction:column}
  .left{position:static;max-height:none;overflow:visible;padding:12px 15px 13px;
    border-right:0;border-bottom:var(--hair);min-width:0;max-width:100%}
  .left h2,.left>p,.rail-note{display:none}
  .left>.smallhead{font-size:8px;letter-spacing:1.2px}
  .group-label{margin:8px 0 4px;font-size:8.5px}
  .group-label::after{content:" · swipe →";color:#6f8b95;font-weight:600;letter-spacing:.3px}
  #scenarios{display:flex;gap:5px;overflow-x:auto;padding-bottom:5px;min-width:0;max-width:100%;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  #scenarios .scene{flex:0 0 148px;min-width:148px;scroll-snap-align:start;margin:0;padding:7px 8px}
  .scene small{display:none}
  main{padding:14px 15px 32px}
  .hero{margin:6px 0 11px}
  .hero h1{font-size:22px;letter-spacing:-.7px}
  .hero p{display:none}
  .pipeline{grid-template-columns:repeat(2,1fr);gap:5px}
  .work-title{flex-direction:column;gap:6px}
  .status-pill{margin-top:0;align-self:flex-start}
  .control-row{flex-direction:column;align-items:stretch}
  .control-row select,.control-row input,.control-row button,
  .incident .control-row input{flex:1 1 auto;width:100%;min-height:40px}
  .hostile{padding:8px;justify-content:flex-start}
  .control-row .hostile input{flex:0 0 auto;width:14px;height:14px;min-height:0}
  .actions{flex-direction:column;align-items:stretch}
  .actions button{width:100%}
  .incident-head{display:block}
  .incident-head p{margin-top:4px}
  .right{display:block;padding:18px 15px 22px}
  .observables{grid-template-columns:repeat(2,1fr)}
  footer{padding:10px 15px;flex-wrap:wrap;font-size:8px}
}
@media(max-width:420px){
  header{padding:0 13px;min-height:58px}
  .brand strong{font-size:14px}
  .brand small{display:none}
  .brand .mark{width:30px;height:30px;font-size:19px}
  .topstatus{font-size:0;gap:0}
  .topstatus b{margin:0;font-size:8px;padding:6px 7px}
  .hero h1{font-size:21px}
  .check{grid-template-columns:14px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}