/* watsonx — Agent Operations Command · "The Operating Theater"
   IBM heritage futurism: carbon black, electric-blue core, Plex Serif italics,
   8-bar stripe motif, film grain. One screen, no scroll (desktop). */

:root {
  --void: #07090d;
  --carbon: #0c0f14;
  --carbon2: #12161d;
  --seam: #1d232c;
  --seam2: #2a323d;
  --ink: #e6ebf1;
  --dim: #94a0ad;
  --faint: #5a6673;
  --volt: #0f62fe;       /* IBM blue 60 — the core */
  --volt2: #4589ff;
  --glowc: rgba(15, 98, 254, .55);
  --tele: #3ddbd9;       /* telemetry cyan */
  --ok: #42be65;
  --warn: #f1c21b;
  --alert: #fa4d56;
  --serif: "IBM Plex Serif", Georgia, serif;
  --cond: "IBM Plex Sans Condensed", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background:
    radial-gradient(1200px 700px at 50% 42%, rgba(15,98,254,.10), transparent 62%),
    radial-gradient(900px 500px at 88% -10%, rgba(61,219,217,.05), transparent 55%),
    var(--void);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* film grain */
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite; }
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,3%)} }

/* ── Masthead ─────────────────────────────────────────── */
.mast { display: flex; align-items: center; gap: 26px; padding: 18px 30px 14px; border-bottom: 1px solid var(--seam); position: relative; z-index: 2; animation: descend .7s cubic-bezier(.2,.8,.2,1) both; }
.bars { display: flex; flex-direction: column; gap: 3px; width: 46px; flex: 0 0 46px; }
.bars i { height: 3px; background: var(--volt); display: block; transform-origin: left; animation: barIn .9s cubic-bezier(.2,.8,.2,1) both; }
.bars i:nth-child(odd) { background: var(--volt2); }
.bars i:nth-child(1){animation-delay:.05s} .bars i:nth-child(2){animation-delay:.1s} .bars i:nth-child(3){animation-delay:.15s} .bars i:nth-child(4){animation-delay:.2s}
.bars i:nth-child(5){animation-delay:.25s} .bars i:nth-child(6){animation-delay:.3s} .bars i:nth-child(7){animation-delay:.35s} .bars i:nth-child(8){animation-delay:.4s}
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes descend { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

.wm-ibm { font-family: var(--mono); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--volt2); }
.wordmark h1 { font-family: var(--cond); font-weight: 300; font-size: 26px; letter-spacing: 1px; margin-top: 2px; }
.wordmark h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--volt2); letter-spacing: 0; }

.mast-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.actas-mini { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.actas-mini select { background: var(--carbon2); color: var(--ink); border: 1px solid var(--seam2); font-family: var(--mono); font-size: 11px; padding: 6px 8px; }
.actas-mini select:focus { outline: none; border-color: var(--volt); }
.console-link { color: var(--dim); font-size: 11px; letter-spacing: 1px; text-decoration: none; border-bottom: 1px dotted var(--faint); padding-bottom: 2px; }
.console-link:hover { color: var(--volt2); border-color: var(--volt2); }

.emergency { background: repeating-linear-gradient(-45deg, rgba(250,77,86,.18) 0 14px, rgba(250,77,86,.06) 14px 28px); border-bottom: 1px solid var(--alert); color: #ffd7d9; font-size: 11px; letter-spacing: 2px; text-align: center; padding: 9px; animation: throb 1.5s infinite; position: relative; z-index: 2; }
@keyframes throb { 0%,100% { opacity: 1; } 50% { opacity: .65; } }

/* ── Stage ────────────────────────────────────────────── */
.stage { flex: 1; display: grid; grid-template-columns: 290px 1fr 330px; gap: 0; min-height: 0; position: relative; z-index: 1; }

.col-title { font-family: var(--cond); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.col-title em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--volt2); margin-right: 6px; }

/* Lifecycle stations */
.lifecycle { border-right: 1px solid var(--seam); padding: 24px 22px; overflow-y: auto; animation: fadeL .8s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeL { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
#stations { list-style: none; display: flex; flex-direction: column; }
#stations li { display: flex; gap: 13px; align-items: center; padding: 13px 10px; border-left: 2px solid var(--seam); position: relative; transition: all .25s; }
#stations li + li::before { content: ""; position: absolute; left: -2px; top: -9px; height: 9px; width: 2px; background: linear-gradient(var(--seam), transparent); }
#stations li b { font-family: var(--cond); font-weight: 300; font-size: 13px; color: var(--faint); }
#stations li span { font-family: var(--cond); font-size: 16px; font-weight: 500; letter-spacing: .5px; display: block; }
#stations li small { font-family: var(--mono); font-size: 9.5px; color: var(--faint); letter-spacing: .3px; display: block; margin-top: 3px; }
#stations li var { font-style: normal; font-family: var(--cond); font-weight: 300; font-size: 34px; margin-left: auto; color: var(--dim); line-height: 1; }
#stations li.hot { border-left-color: var(--volt); background: linear-gradient(90deg, rgba(15,98,254,.09), transparent 70%); }
#stations li.hot var { color: var(--volt2); text-shadow: 0 0 18px var(--glowc); }
#stations li[data-ph="sanctioned"].hot { border-left-color: var(--alert); background: linear-gradient(90deg, rgba(250,77,86,.09), transparent 70%); }
#stations li[data-ph="sanctioned"].hot var { color: var(--alert); text-shadow: 0 0 16px rgba(250,77,86,.5); }

.justice { display: flex; gap: 8px; }
.justice > div { flex: 1; border: 1px solid var(--seam); padding: 10px 8px; text-align: center; background: var(--carbon); }
.justice var { font-style: normal; font-family: var(--cond); font-weight: 300; font-size: 26px; color: var(--tele); display: block; }
.justice span { font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }

/* ── Orbital ──────────────────────────────────────────── */
.orbital-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 10px; min-height: 0; animation: fadeC 1s .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeC { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.orbital { width: min(96%, 74vh); aspect-ratio: 1; position: relative; }
.orbital svg { width: 100%; height: 100%; display: block; overflow: visible; }

.ring { fill: none; stroke: var(--seam); stroke-width: 1; }
.ring.pending-ring { stroke-dasharray: 3 7; stroke: #3a4350; }
.ring-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 2.5px; fill: var(--faint); text-transform: uppercase; }

.orbit-g { transform-box: fill-box; transform-origin: center; animation: spin 120s linear infinite; }
.orbit-g.r2 { animation-duration: 180s; animation-direction: reverse; }
.orbit-g.r3 { animation-duration: 240s; }
.orbit-g.r4 { animation: none; }
.node-g { transform-box: fill-box; transform-origin: center; animation: spin 120s linear infinite reverse; cursor: pointer; }
.orbit-g.r2 .node-g { animation-duration: 180s; animation-direction: normal; }
.orbit-g.r3 .node-g { animation-duration: 240s; animation-direction: reverse; }
.orbit-g.r4 .node-g { animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
body.halted .orbit-g, body.halted .node-g { animation-play-state: paused; }

.node-dot { stroke-width: 1.5; }
.node-dot.online { fill: #0d2a12; stroke: var(--ok); }
.node-dot.stale { fill: #2a230a; stroke: var(--warn); }
.node-dot.offline { fill: var(--carbon2); stroke: var(--faint); }
.node-dot.paused { fill: #2a0d10; stroke: var(--alert); }
.node-halo { fill: none; stroke-width: 1; opacity: .55; }
.node-halo.online { stroke: var(--ok); animation: halo 2.6s infinite; }
.node-halo.stale { stroke: var(--warn); }
.node-halo.offline, .node-halo.paused { stroke: transparent; }
@keyframes halo { 0% { r: 9; opacity: .55; } 100% { r: 20; opacity: 0; } }
.node-name { font-family: var(--mono); font-size: 9px; fill: var(--dim); letter-spacing: .5px; }
.node-phase { font-family: var(--mono); font-size: 7.5px; fill: var(--tele); letter-spacing: 1.5px; text-transform: uppercase; }
.node-org { font-family: var(--serif); font-style: italic; font-size: 8.5px; fill: var(--volt2); }
.node-sanction { font-family: var(--mono); font-size: 8px; fill: var(--alert); }
.node-g:hover .node-name { fill: var(--ink); }
.node-g:hover .node-dot { stroke-width: 2.5; }

.core { cursor: pointer; }
.core-heart { fill: var(--volt); animation: heart 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.core-glow { fill: none; stroke: var(--volt); opacity: .5; animation: coreglow 2.2s ease-in-out infinite; }
.core-label { font-family: var(--mono); font-size: 8px; letter-spacing: 3px; fill: var(--volt2); text-transform: uppercase; }
@keyframes heart { 0%,100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } }
@keyframes coreglow { 0%,100% { stroke-width: 1; opacity: .5; } 12% { stroke-width: 7; opacity: .14; } }
body.halted .core-heart { fill: var(--alert); animation: none; }
body.halted .core-glow { stroke: var(--alert); animation: throb 1.2s infinite; }
body.halted .core-label { fill: var(--alert); }

.orbital-legend { display: flex; gap: 20px; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 4px 0 10px; }
.lg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.lg.auto { background: var(--volt); } .lg.assist { background: var(--tele); } .lg.observe { background: var(--dim); } .lg.pending { background: transparent; border: 1px dashed var(--faint); }
.orbital-caption { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 12.5px; color: var(--faint); padding-top: 8px; }

/* ── Flight recorder ──────────────────────────────────── */
.recorder { border-left: 1px solid var(--seam); padding: 24px 20px; display: flex; flex-direction: column; min-height: 0; animation: fadeR .8s .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeR { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.rec-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); margin-left: 8px; animation: throb 1.4s infinite; }
.rec-feed { flex: 1; overflow-y: auto; min-height: 120px; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
.rec-row { font-size: 10.5px; line-height: 1.5; color: var(--dim); padding: 6px 9px; border-left: 2px solid var(--seam); background: var(--carbon); animation: recIn .3s ease both; }
.rec-row time { color: var(--faint); font-size: 9px; display: block; letter-spacing: 1px; }
.rec-row.bus { border-left-color: var(--tele); }
.rec-row.gov { border-left-color: var(--volt2); }
.rec-row.alarm { border-left-color: var(--warn); color: #d8c48a; }
.rec-row.critical { border-left-color: var(--alert); color: #f1a0a5; }
@keyframes recIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.alarm-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.alm { border: 1px solid var(--seam); border-left: 3px solid var(--warn); background: var(--carbon); padding: 8px 10px; font-size: 10.5px; color: var(--dim); display: flex; gap: 10px; align-items: center; }
.alm.critical { border-left-color: var(--alert); }
.alm.high { border-left-color: #ff832b; }
.alm small { display: block; color: var(--faint); font-size: 9px; margin-top: 3px; }
.alm .body { flex: 1; }
.alm button { background: none; border: 1px solid var(--seam2); color: var(--dim); font-family: var(--mono); font-size: 9px; padding: 4px 8px; cursor: pointer; letter-spacing: 1px; }
.alm button:hover { border-color: var(--volt); color: var(--ink); }
.alm-clear { font-family: var(--serif); font-style: italic; color: var(--faint); font-size: 12px; padding: 10px; }

/* ── Loop deck ────────────────────────────────────────── */
.loopdeck { border-top: 1px solid var(--seam); display: flex; align-items: center; gap: 26px; padding: 12px 30px; position: relative; z-index: 2; animation: ascend .7s .45s cubic-bezier(.2,.8,.2,1) both; overflow-x: auto; }
@keyframes ascend { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.loop-title { font-family: var(--cond); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.loop-title em { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--volt2); margin-right: 5px; }
.loop-agents { display: flex; gap: 22px; }
.powered { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); white-space: nowrap; padding-left: 20px; }
.loop-agent { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.loop-agent .nm { font-size: 10.5px; color: var(--dim); }
.loop-steps { display: flex; gap: 4px; }
.loop-steps i { font-style: normal; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); border: 1px solid var(--seam); padding: 3px 7px; }
.loop-steps i.on { color: var(--tele); border-color: var(--tele); background: rgba(61,219,217,.08); box-shadow: 0 0 12px rgba(61,219,217,.2); }

/* ── Dossier drawer ───────────────────────────────────── */
.dossier { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; background: linear-gradient(180deg, var(--carbon2), var(--carbon)); border-left: 1px solid var(--seam2); z-index: 30; padding: 26px 24px; overflow-y: auto; box-shadow: -30px 0 80px rgba(0,0,0,.6); animation: drawer .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drawer { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dossier .close { position: absolute; top: 16px; right: 16px; background: none; border: 1px solid var(--seam2); color: var(--dim); width: 30px; height: 30px; cursor: pointer; font-family: var(--mono); }
.dossier h2 { font-family: var(--cond); font-weight: 500; font-size: 22px; letter-spacing: .5px; margin: 6px 0 2px; }
.dossier .role { font-family: var(--serif); font-style: italic; color: var(--volt2); font-size: 13px; }
.dossier .desc { color: var(--dim); font-size: 12px; line-height: 1.6; margin: 14px 0; font-family: var(--serif); font-weight: 300; }
.d-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--seam); padding: 9px 0; font-size: 11px; color: var(--dim); }
.d-row b { color: var(--ink); font-weight: 500; }
.d-chip { display: inline-block; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--seam2); padding: 2.5px 8px; color: var(--dim); margin: 2px 3px 2px 0; }
.d-chip.ok { color: var(--ok); border-color: rgba(66,190,101,.5); }
.d-chip.warn { color: var(--warn); border-color: rgba(241,194,27,.5); }
.d-chip.bad { color: var(--alert); border-color: rgba(250,77,86,.5); }
.d-chip.volt { color: var(--volt2); border-color: rgba(69,137,255,.5); }
.d-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.d-actions button { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; padding: 9px 14px; cursor: pointer; background: var(--carbon2); border: 1px solid var(--seam2); color: var(--ink); }
.d-actions button:hover { border-color: var(--volt); }
.d-actions button.primary { background: var(--volt); border-color: var(--volt); color: #fff; }
.d-actions button.danger { color: var(--alert); border-color: rgba(250,77,86,.5); }
.d-mode { display: inline-flex; border: 1px solid var(--seam2); margin-top: 6px; }
.d-mode button { background: none; border: 0; border-right: 1px solid var(--seam2); color: var(--faint); font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 11px; cursor: pointer; }
.d-mode button:last-child { border-right: 0; }
.d-mode button.on { color: var(--volt2); background: rgba(15,98,254,.14); }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--carbon2); border: 1px solid var(--volt); color: var(--ink); padding: 11px 20px; font-size: 11.5px; z-index: 50; letter-spacing: .5px; }
.toast.err { border-color: var(--alert); color: #ffd7d9; }

@media (max-width: 1100px) {
  body { overflow: auto; }
  .stage { grid-template-columns: 1fr; }
  .lifecycle, .recorder { border: none; border-top: 1px solid var(--seam); }
  .orbital-wrap { order: -1; }
}