/* THE TOWER — mission control skin
   dark, calm, glassy. colour = health. never renders a secret. */
:root {
  --bg:#07090d; --bg2:#0b0e14; --panel:rgba(16,20,28,.82); --panel2:rgba(22,27,37,.92);
  --line:#1e2836; --line2:#2b3a4d; --txt:#e6ecf5; --dim:#8494a8; --dim2:#5a6a7e;
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --violet:#a855f7; --blue:#3b82f6;
  --cyan:#22d3ee; --gold:#eab308;
  --r:14px; --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--txt);
  font-family:var(--sans); overflow:hidden; -webkit-font-smoothing:antialiased; }
body { display:grid; grid-template-rows:auto 1fr auto; height:100vh; }
button { font-family:inherit; color:inherit; cursor:pointer; }

/* ── top bar ───────────────────────────────────────────────────────────── */
#topbar { display:flex; align-items:center; gap:18px; padding:10px 16px;
  background:linear-gradient(180deg,#0d1119,#0a0d13); border-bottom:1px solid var(--line); z-index:20; }
.brand { display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:.2px; white-space:nowrap; }
.brand .logo { width:26px; height:26px; }
.brand small { display:block; font-weight:500; font-size:10.5px; color:var(--dim2); letter-spacing:.06em; text-transform:uppercase; }
#mode-pill { font-size:10px; font-weight:800; letter-spacing:.09em; padding:3px 8px; border-radius:99px;
  border:1px solid var(--line); color:var(--dim); background:#0e131b; }
#mode-pill.live { color:#7ef0a5; border-color:#1d4d2f; background:#0c1a12; }
#mode-pill.demo { color:#ffd479; border-color:#4d3d1d; background:#1a160c; }
#views { display:flex; gap:6px; flex:1; flex-wrap:wrap; }
#views button { background:#0e131b; border:1px solid var(--line); color:var(--dim);
  padding:7px 12px; border-radius:10px; font-size:12.5px; font-weight:650; display:flex; align-items:center; gap:7px;
  transition:.15s; }
#views button:hover { color:var(--txt); border-color:#33435a; }
#views button.active { color:#fff; background:linear-gradient(180deg,#1d2836,#151c26); border-color:#3b4a61;
  box-shadow:0 2px 10px rgba(0,0,0,.4); }
#views .badge { font-size:10px; font-weight:800; background:var(--red); color:#fff; border-radius:99px;
  padding:1px 6px; min-width:18px; text-align:center; }
#kpis { display:flex; gap:14px; align-items:center; }
.kpi { text-align:right; line-height:1.15; }
.kpi b { display:block; font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; }
.kpi span { font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim2); }
.kpi.warn b { color:var(--amber); } .kpi.good b { color:var(--green); } .kpi.bad b { color:var(--red); }

/* ── 3-column body ─────────────────────────────────────────────────────── */
#body { display:grid; grid-template-columns:262px 1fr 330px; min-height:0; }
#floors, #detail { background:var(--panel); backdrop-filter:blur(14px); overflow-y:auto; }
#floors { border-right:1px solid var(--line); padding:12px 10px 26px; }
#detail { border-left:1px solid var(--line); padding:12px 14px 30px; }
.rail-title { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim2); margin:6px 6px 8px; }
.floor { display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; transition:.14s; margin-bottom:3px; }
.floor:hover { background:#131a25; }
.floor.sel { background:linear-gradient(180deg,#16202c,#111823); border-color:#33435a; }
.floor .lvl { font-family:var(--mono); font-size:10.5px; color:var(--dim2); width:26px; text-align:center;
  border:1px solid var(--line); border-radius:6px; padding:2px 0; background:#0c1118; }
.floor .nm { flex:1; min-width:0; font-size:12.5px; font-weight:650; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.floor .nm { white-space:normal; }            /* name on line 1, sub on line 2 */
.floor .nm .nm1 { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.floor .sub { display:block; font-size:10px; color:var(--dim2); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.floor.ghost .nm { color:var(--dim2); font-weight:600; }
.dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 8px currentColor; }
.d-green{background:var(--green);color:var(--green)} .d-amber{background:var(--amber);color:var(--amber)}
.d-red{background:var(--red);color:var(--red)} .d-violet{background:var(--violet);color:var(--violet)}
.d-grey{background:#3b4757;color:#3b4757} .d-blue{background:var(--blue);color:var(--blue)}
.rail-sep { height:1px; background:var(--line); margin:12px 6px; }

/* ── stage ─────────────────────────────────────────────────────────────── */
#stage { position:relative; min-width:0; min-height:240px; overflow:hidden; background:
  radial-gradient(1200px 700px at 50% 8%,#101725 0%,#080b11 55%,#05070a 100%); overflow:hidden; }
#cv { position:absolute; inset:0; width:100%; height:100%; display:block; }
#stage-hud { position:absolute; left:14px; bottom:12px; display:flex; gap:8px; }
#stage-hud button, .mini { background:rgba(14,19,27,.86); border:1px solid var(--line); color:var(--dim);
  border-radius:9px; padding:6px 10px; font-size:11.5px; font-weight:650; backdrop-filter:blur(8px); }
#stage-hud button:hover, .mini:hover { color:#fff; border-color:#3b4a61; }
#stage-title { position:absolute; left:16px; top:14px; pointer-events:none; }
#narrow-hint { display:none; position:absolute; left:50%; top:12px; transform:translateX(-50%);
  max-width:92%; padding:7px 12px; border-radius:9px; background:rgba(16,22,31,.92);
  border:1px solid var(--line); color:var(--dim); font-size:11.5px; text-align:center; pointer-events:none; }
body.narrow #narrow-hint { display:block; }
#stage-title h2 { margin:0; font-size:17px; font-weight:750; letter-spacing:.2px; }
#stage-title p { margin:3px 0 0; font-size:11.5px; color:var(--dim); }
#legend { position:absolute; right:14px; bottom:12px; display:flex; gap:12px; font-size:10.5px; color:var(--dim);
  background:rgba(10,13,19,.7); border:1px solid var(--line); border-radius:10px; padding:7px 11px; backdrop-filter:blur(8px); }
#legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }

/* ── DOM views (org / ops / blueprint) ─────────────────────────────────── */
.pane { position:absolute; inset:0; overflow-y:auto; padding:18px 22px 40px; }
.pane h2 { margin:0 0 4px; font-size:20px; }
.pane .lead { margin:0 0 18px; color:var(--dim); font-size:12.5px; max-width:900px; line-height:1.55; }
.grid { display:grid; gap:12px; }
.grid.c3 { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.grid.c2 { grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); }
.card { background:var(--panel2); border:1px solid var(--line); border-radius:var(--r); padding:14px; }
.card.hl { border-color:#3b4a61; box-shadow:0 8px 30px rgba(0,0,0,.35); }
.card h3 { margin:0 0 8px; font-size:13.5px; font-weight:750; display:flex; align-items:center; gap:8px; }
.card .muted { color:var(--dim); font-size:11.5px; line-height:1.5; }
.kv { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; padding:4px 0; border-top:1px dashed #1b2330; }
.kv span:first-child { color:var(--dim2); }
.kv span:last-child { font-variant-numeric:tabular-nums; text-align:right; }
.chip { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px;
  border:1px solid var(--line); background:#0e131b; color:var(--dim); margin:2px 4px 2px 0; }
.pill { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px;
  border-radius:99px; border:1px solid var(--line); color:var(--dim); }
.pill.working{color:#7ef0a5;border-color:#1d4d2f;background:#0c1a12}
.pill.blocked{color:#ffb4b4;border-color:#4d2020;background:#1a0d0d}
.pill.waiting-human{color:#ffd479;border-color:#4d3d1d;background:#1a160c}
.pill.idle{color:#9fb3c8;background:#0e131b}
.pill.locked{color:#c4b5fd;border-color:#3b2d5e;background:#140f22}
.btn { border:1px solid var(--line); background:#111823; border-radius:9px; padding:8px 13px; font-weight:700; font-size:12px; }
.btn:hover { border-color:#3b4a61; }
.btn.yes { background:linear-gradient(180deg,#14532d,#103d22); border-color:#1d6b3c; color:#b8f5cd; }
.btn.no { background:linear-gradient(180deg,#4a1414,#33100f); border-color:#6b2020; color:#ffc4c4; }
.btn.ghost { background:transparent; color:var(--dim); }
.btn.sm { padding:5px 9px; font-size:11px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer { flex:1; }
.tree { font-size:12.5px; }
.tree .n { border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin:6px 0; background:#0f141c; cursor:pointer; }
.tree .n:hover { border-color:#33435a; }
.tree .n .t { display:flex; align-items:center; gap:8px; font-weight:700; }
.tree .kids { margin-left:16px; border-left:1px dashed #223044; padding-left:10px; display:none; }
.tree .n.open > .kids { display:block; }
.tree .ag { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px; cursor:pointer; }
.tree .ag:hover { background:#141c27; }
.tree .ag .r { color:var(--dim2); font-size:10.5px; }
.feed { font-family:var(--mono); font-size:11px; line-height:1.6; }
.feed .e { display:flex; gap:8px; padding:4px 0; border-bottom:1px dotted #18202c; }
.feed .ts { color:var(--dim2); flex:0 0 52px; }
.feed .who { flex:0 0 118px; color:#9db4cc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kind { font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:5px; background:#131b26; color:var(--dim);
  border:1px solid var(--line); text-transform:uppercase; letter-spacing:.04em; }
.kind.gate\.open,.kind.guard\.block,.kind.veto { color:#ffd479; }
.kind.task\.done,.kind.report { color:#7ef0a5; }
.slot { display:flex; align-items:center; gap:10px; }
.ghostcard { border-style:dashed; opacity:.9; }
.notice { border:1px solid #4d3d1d; background:#17130a; color:#ffd479; border-radius:10px; padding:9px 11px; font-size:11.5px; }
.ok { border:1px solid #1d4d2f; background:#0b170f; color:#a7f3c4; border-radius:10px; padding:9px 11px; font-size:11.5px; }

/* ── detail panel ──────────────────────────────────────────────────────── */
#detail h3 { margin:2px 0 10px; font-size:14px; }
.dp-head { display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.dp-sub { color:var(--dim); font-size:11.5px; margin-bottom:12px; line-height:1.5; }
.sec { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim2);
  margin:16px 0 7px; border-top:1px solid var(--line); padding-top:11px; }
.link { display:flex; gap:8px; align-items:center; font-size:11.5px; padding:3px 0; }
.link .dir { font-family:var(--mono); color:var(--dim2); }
.hint { font-size:10.5px; color:var(--dim2); line-height:1.5; }

/* ── ticker ────────────────────────────────────────────────────────────── */
#ticker { display:flex; align-items:center; gap:12px; padding:7px 14px; border-top:1px solid var(--line);
  background:#080b10; font-size:11.5px; overflow:hidden; }
#ticker .lab { font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--green);
  border:1px solid #1d4d2f; background:#0c1a12; padding:3px 7px; border-radius:6px; white-space:nowrap; }
#ticker-track { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ticker-track b { color:#cfe3ff; font-weight:650; }
.tick-fade { animation:tickin .5s ease; }
@keyframes tickin { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* scrollbars */
::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:#1d2735;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:1450px){
  /* the KPIs are the first thing to crowd the nav. Revenue/spend have no source yet,
     so they are the ones that go. Nothing is lost: Ops shows the same numbers. */
  #kpis .kpi:nth-child(5), #kpis .kpi:nth-child(6) { display:none; }
}
@media (max-width:1180px){
  /* NOTE: when a rail is hidden its column must be removed too, otherwise #stage
     slides into the 0-width column and the canvas renders invisibly. */
  #body{grid-template-columns:210px minmax(0,1fr)}
  #detail{display:none}
}
@media (max-width:820px){
  #body{grid-template-columns:minmax(0,1fr)}
  #floors{display:none}
  #kpis{display:none}
  #legend{display:none}                 /* 7 items wrap over the HUD in a narrow pane */
  #ticker{font-size:11px}
}
@media (max-width:620px){
  #topbar{padding:8px 10px; gap:8px}
  #topbar .brand small{display:none}
  #stage-hud button{padding:4px 7px; font-size:11px}
  #legend{display:none}
}