/* Nexus control-room design system — shared by the monitor (/) and the control console (/control).
   A LIVING instrument panel: the plant is running now and being watched. Color is load-bearing (the three
   ontology bands + the three verdicts each own a fixed hue, used identically everywhere). Default "Paper"
   light theme; a night-shift "dark" theme via [data-theme="dark"]. Built to a control-room bar, not a
   generic dashboard. No framework — plain CSS + tokens; Alpine drives the data, inline SVG draws the graph.
   Fonts (Inter / JetBrains Mono / Newsreader) load from a CDN in the page head — demo-host tooling, like the
   Alpine CDN; the air-gapped product bundles them. */

:root {
  /* --- Paper (default) --- */
  --bg:        #F4F3EE;   /* warm off-white canvas, not pure white */
  --surface:   #FBFAF6;
  --surface-2: #FFFFFF;
  --raised:    #FFFFFF;
  --ink:       #0A1421;
  --muted:     #4A5562;
  --subtle:    #6B7480;
  --hair:      #E3DED3;
  --hair-2:    #CFC8B9;
  --bar:       #0A2540;   /* deep navy command bar */
  --bar-ink:   #E8EDF4;
  --bar-sub:   #9DB0C6;
  --accent:    #B8801F;   /* the single amber accent */
  --accent-2:  #9A6915;
  --gold:      #E2A23A;
  /* ontology bands — what things ARE / DO / CHANGE */
  --semantic:  #0A2540;
  --kinetic:   #B8801F;
  --dynamic:   #5B4FBF;
  --semantic-bg: rgba(10,37,64,.07);
  --kinetic-bg:  rgba(184,128,31,.10);
  --dynamic-bg:  rgba(91,79,191,.09);
  /* verdicts */
  --pass:  #1F7A52;  --pass-bg:  rgba(31,122,82,.12);
  --alert: #C2670F;  --alert-bg: rgba(194,103,15,.13);
  --block: #A8362D;  --block-bg: rgba(168,54,45,.12);
  --info:  #2E5688;  --info-bg:  rgba(46,86,136,.12);
  --shadow: 0 1px 2px rgba(10,20,33,.05), 0 6px 22px rgba(10,20,33,.06);
  --grid-line: rgba(10,20,33,.05);
  --font:  'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:        #0B0F15;   /* deep slate night shift */
  --surface:   #121823;
  --surface-2: #161E2B;
  --raised:    #1A2331;
  --ink:       #E6EAF1;
  --muted:     #93A0B2;
  --subtle:    #6C7888;
  --hair:      #222C3A;
  --hair-2:    #2E3A4C;
  --bar:       #0A1320;
  --bar-ink:   #E6EDF6;
  --bar-sub:   #7E91A8;
  --accent:    #D69A3C;
  --accent-2:  #B8801F;
  --gold:      #E8B65A;
  --semantic:  #5A8AC4;
  --kinetic:   #D69A3C;
  --dynamic:   #9183EC;
  --semantic-bg: rgba(90,138,196,.14);
  --kinetic-bg:  rgba(214,154,60,.14);
  --dynamic-bg:  rgba(145,131,236,.16);
  --pass:  #3FB877;  --pass-bg:  rgba(63,184,119,.14);
  --alert: #E0902B;  --alert-bg: rgba(224,144,43,.15);
  --block: #E5574B;  --block-bg: rgba(229,87,75,.15);
  --info:  #5A8FD6;  --info-bg:  rgba(90,143,214,.15);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.36);
  --grid-line: rgba(255,255,255,.04);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 13.5px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
  /* a faint instrument grid so the canvas reads as an operations surface, not paper */
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
::selection { background: var(--accent); color: #fff; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: 0; }
.ask  { font-family: var(--serif); font-style: italic; color: var(--gold); }
b, strong { font-weight: 650; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- command bar (mission-control header) --- */
.command-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 52px;
  background: var(--bar); color: var(--bar-ink);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.command-bar .brand { font-weight: 680; font-size: 15px; letter-spacing: .02em; display: flex; align-items: center; gap: 9px; }
.command-bar .brand .mark { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 3px rgba(184,128,31,.25); }
.command-bar .unit { color: var(--bar-sub); font-size: 12px; }
.command-bar .unit b { color: var(--bar-ink); font-weight: 600; }
.command-bar .clock { font-family: var(--mono); font-size: 12px; color: var(--bar-ink); }
.command-bar .clock .shift { color: var(--accent); }
.command-bar .spacer { flex: 1; }
.command-bar .stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bar-sub); }
.command-bar .stat .dot { width: 7px; height: 7px; border-radius: 50%; }
.command-bar a { color: var(--bar-sub); font-size: 12px; }
.command-bar a:hover { color: var(--bar-ink); text-decoration: none; }
.command-bar .iconbtn {
  background: rgba(255,255,255,.06); color: var(--bar-ink); border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px; padding: 5px 9px; font: 12px var(--font); cursor: pointer; line-height: 1;
}
.command-bar .iconbtn:hover { background: rgba(255,255,255,.12); }
.badge {
  font: 700 10px/1 var(--mono); letter-spacing: .12em; padding: 4px 7px; border-radius: 4px;
  background: var(--accent); color: #1c1206; vertical-align: middle;
}

/* --- layout --- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 18px 20px 64px; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; }
@media (max-width: 900px) { .grid > * { grid-column: span 12 !important; } }

/* --- panels --- */
.panel {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 11px;
  padding: 15px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.panel.k-semantic::before { background: var(--semantic); } .panel.k-kinetic::before { background: var(--kinetic); }
.panel.k-dynamic::before { background: var(--dynamic); }
.panel h2 { margin: 0 0 2px; font-size: 11px; font-weight: 670; letter-spacing: .085em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.panel h2 .h-meta { margin-left: auto; font: 11px var(--mono); color: var(--subtle); text-transform: none; letter-spacing: 0; }
.panel .tag { color: var(--subtle); font-size: 11.5px; margin: 0 0 12px; line-height: 1.45; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); }
.row:first-of-type { border-top: none; }
.row > span:first-child { color: var(--muted); }
.stale { opacity: .45; filter: saturate(.5); transition: opacity .3s; }

/* --- readout tiles (instruments) --- */
.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 9px; overflow: hidden; }
.readout { background: var(--surface-2); padding: 11px 13px; }
.readout .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--subtle); }
.readout .val { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1; margin-top: 3px; display: flex; align-items: baseline; gap: 5px; transition: color .25s; }
.readout .val .u { font-size: 12px; color: var(--subtle); font-weight: 500; }
.readout.flash .val { color: var(--accent); }
.readout .spark { display: block; width: 100%; height: 26px; margin-top: 5px; }
.readout .spark polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.readout.up .spark polyline { stroke: var(--alert); } .readout.flat .spark polyline { stroke: var(--subtle); }
.spark .area { fill: var(--accent); opacity: .07; }

/* --- verdicts (load-bearing) --- */
.verdict { font: 700 11px/1 var(--mono); letter-spacing: .06em; padding: 4px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; }
.verdict::before { font-family: var(--font); font-size: 11px; }
.PASS { background: var(--pass-bg); color: var(--pass); } .PASS::before { content: "✓"; }
.ALERT { background: var(--alert-bg); color: var(--alert); } .ALERT::before { content: "!"; }
.BLOCKED, .EVAL_ERROR { background: var(--block-bg); color: var(--block); } .BLOCKED::before, .EVAL_ERROR::before { content: "✕"; }
.big { font-family: var(--mono); font-size: 28px; font-weight: 600; }
.ok { color: var(--pass); } .bad { color: var(--block); }
.muted { color: var(--subtle); font-size: 12px; } .gap { color: var(--alert); font-size: 12px; margin-top: 3px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.up { background: var(--pass); box-shadow: 0 0 0 0 var(--pass); animation: pulse 2.4s infinite; }
.dot.down { background: var(--block); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63,184,119,.5); } 70% { box-shadow: 0 0 0 6px rgba(63,184,119,0); } 100% { box-shadow: 0 0 0 0 rgba(63,184,119,0); } }

/* --- ontology knowledge graph (inline SVG node-link) --- */
.graph { width: 100%; height: 320px; display: block; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 9px; }
.graph .lane { fill: none; }
.graph .lane-label { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.graph .edge { stroke-width: 1.2; fill: none; opacity: .35; }
.graph .node-c { cursor: pointer; transition: r .15s, stroke-width .15s; }
.graph .node-c:hover { stroke-width: 2.5; }
.graph .node-t { font: 9.5px var(--font); cursor: pointer; pointer-events: none; }
.legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--subtle); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.inspector { margin-top: 10px; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 8px; animation: fade .2s; }
.inspector .k { color: var(--subtle); font-family: var(--mono); font-size: 11px; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
/* compact band legend (also the inspector-less fallback) */
.bands { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.band { border: 1px solid var(--hair); border-radius: 8px; padding: 9px; }
.band.semantic { border-top: 2px solid var(--semantic); } .band.kinetic { border-top: 2px solid var(--kinetic); } .band.dynamic { border-top: 2px solid var(--dynamic); }
.band-label { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); margin-bottom: 7px; }
.nodes { display: flex; flex-wrap: wrap; gap: 5px; }
.node { font: 11px var(--mono); padding: 3px 8px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; }
.node.semantic { background: var(--semantic-bg); color: var(--semantic); } .node.kinetic { background: var(--kinetic-bg); color: var(--accent-2); }
.node.dynamic { background: var(--dynamic-bg); color: var(--dynamic); }
.node:hover { border-color: currentColor; }

/* --- streaming audit ledger --- */
.ledger { max-height: 240px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-2); }
.lrow { display: grid; grid-template-columns: 52px 1fr auto 120px; gap: 10px; align-items: center; padding: 6px 11px; border-top: 1px solid var(--hair); font-size: 12px; animation: slidein .25s; }
.lrow:first-child { border-top: none; }
.lrow .seq { font-family: var(--mono); color: var(--subtle); }
.lrow .rtype { color: var(--muted); }
.lrow .hash { font-family: var(--mono); font-size: 11px; color: var(--subtle); position: relative; }
.lrow .hash::before { content: "⛓"; opacity: .4; margin-right: 5px; }
@keyframes slidein { from { opacity: 0; transform: translateX(-6px); } }
.chainbar { display: inline-flex; align-items: center; gap: 6px; }

/* --- candidate / recommendation board --- */
.card { border: 1px solid var(--hair); border-left: 3px solid var(--hair-2); border-radius: 8px; padding: 10px 12px; margin-top: 8px; background: var(--surface-2); animation: fade .2s; }
.card.PASS { border-left-color: var(--pass); } .card.ALERT { border-left-color: var(--alert); } .card.BLOCKED { border-left-color: var(--block); }
.card .ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .ttl .id { font: 600 11px var(--mono); color: var(--subtle); }
.chip { font: 700 10px var(--mono); letter-spacing: .04em; padding: 2px 7px; border-radius: 9px; background: var(--pass-bg); color: var(--pass); }

/* --- controls --- */
button, .btn {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--hair-2);
  border-radius: 8px; padding: 7px 13px; font: 500 13px var(--font); cursor: pointer;
  transition: border-color .15s, background .15s; margin: 6px 6px 0 0;
}
button:hover, .btn:hover { border-color: var(--accent); }
button.act { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.act:hover { background: var(--accent-2); }
button.danger { border-color: var(--block); color: var(--block); }
label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--subtle); margin: 10px 0 4px; }
input, select { width: 100%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--hair-2); border-radius: 8px; padding: 8px 10px; font: 13px var(--font); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,128,31,.14); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* --- banners / results / feed (control) --- */
.banner { background: var(--block-bg); border: 1px solid var(--block); color: var(--block); border-radius: 9px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.result { margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 8px; font-size: 12.5px; animation: fade .2s; }
.result.bad { border-left-color: var(--block); } .result.ok { border-left-color: var(--pass); }
.feed { max-height: 320px; overflow-y: auto; margin-top: 8px; }
.ev { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 12px; animation: slidein .25s; }
.who { font-weight: 650; color: var(--accent-2); white-space: nowrap; }
.itype { font: 700 10px var(--mono); letter-spacing: .05em; padding: 2px 7px; border-radius: 9px; background: var(--kinetic-bg); color: var(--accent-2); white-space: nowrap; }
.forced { background: var(--block-bg); border: 1px solid var(--block); color: var(--block); border-radius: 8px; padding: 9px 11px; margin-top: 9px; font-size: 12px; }
ul { margin: 6px 0 0; padding-left: 18px; } li { margin: 3px 0; }