/* ============================================================
   F13LD.lab · v0.2.0-fft
   Design tokens, layout, and components.
   Tokens match the F13LD suite (Grain reference);
   --lab amber is the F13LD.lab tool accent.
   ============================================================ */

* { box-sizing:border-box; margin:0; padding:0 }
html, body {
  min-height:100vh; background:#06080f; color:#e0e0ff;
  font-family:'Exo 2', system-ui, sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased;
}

:root{
  --bg:#06080f;
  --panel:#111118;
  --panel-2:#0e0e1a;
  --panel-3:#0a0c14;
  --line:#2a2a3a;
  --line-soft:#1a1a2a;
  --line-green:#1a2a1a;
  --ink:#e0e0ff;
  --ink-2:#b8b8d0;
  --ink-mute:#888;
  --ink-dim:#555;
  --ink-head:#7c8aaa;
  --green:#1D9E75;       /* F13LD brand */
  --neon:#c8f542;        /* F13LD brand */
  --sec-green:#18f370;   /* (legacy) */
  --sec-cyan:#22d3ee;    /* section labels — pure cyan, complements jade/lime */
  --purple:#7c6ff7;      /* primary action */
  --lab:#fbbf24;         /* F13LD.lab tool accent */
  --lab-soft:rgba(251,191,36,0.10);
  --lab-glow:rgba(251,191,36,0.35);
  --warn:#f59e0b;
  --bad:#fb7185;
  --good:#34d399;
}

/* ============ LAYOUT ============ */
#app {
  display:flex; flex-direction:column; height:100vh;
  max-width:1680px; margin:0 auto; width:100%;
}

/* ============ HEADER (matches Grain) ============ */
.f13ld-header {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg); border-bottom:0.5px solid var(--line-green);
  padding:0 16px; height:48px; flex-shrink:0;
}
.fh-left { display:flex; align-items:center; gap:12px }
.fh-brand { display:flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer }
.fh-wordmark { font-size:17px; font-weight:700; letter-spacing:0.10em; line-height:1 }
.fh-divider { width:0.5px; height:24px; background:var(--line-green) }
.fh-tool-name {
  font-size:15px; font-weight:700; letter-spacing:0.10em;
  text-transform:uppercase; line-height:1; color:var(--lab);
}
.fh-right { display:flex; align-items:center; gap:10px }
.fh-version { font-size:10px; color:#3a2e1a; letter-spacing:0.10em }
.fh-icon {
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:#F6E7E7;
}
.fh-action-btn {
  font-size:11px; padding:5px 13px; border-radius:20px;
  border:0.5px solid var(--lab); background:var(--lab-soft);
  color:var(--lab); cursor:pointer; font-family:inherit; font-weight:600;
  white-space:nowrap; transition:background 0.15s; letter-spacing:0.04em;
}
.fh-action-btn:hover:not(:disabled) { background:rgba(251,191,36,0.18) }
.fh-action-btn:disabled { opacity:0.35; cursor:not-allowed }
.fh-action-btn.ghost {
  border-color:var(--line); background:transparent; color:var(--ink-mute);
}
.fh-action-btn.ghost:hover:not(:disabled) { color:var(--lab); border-color:var(--lab) }

/* ============ VIEW MODE STRIP ============ */
.view-strip {
  display:flex; align-items:center; gap:18px;
  background:var(--panel-3); border-bottom:0.5px solid var(--line);
  padding:9px 18px; flex-shrink:0;
}
.view-label {
  font-size:10px; color:var(--ink-dim); text-transform:uppercase;
  letter-spacing:0.16em; font-family:'JetBrains Mono', monospace;
}
.view-tabs { display:flex; gap:4px; flex-wrap:wrap }
.view-tab {
  font-size:11px; padding:4px 12px; border-radius:20px;
  border:0.5px solid var(--line); background:transparent;
  color:var(--ink-mute); cursor:pointer; font-family:inherit;
  letter-spacing:0.04em; transition:all 0.15s; white-space:nowrap;
}
.view-tab:hover { color:var(--ink); border-color:#3a3a5a }
.view-tab.active {
  background:var(--lab); color:#1a1408;
  border-color:var(--lab); font-weight:600;
}
.view-strip .right {
  margin-left:auto; display:flex; align-items:center; gap:14px;
  font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--ink-dim);
}
.view-strip .right .pill {
  padding:3px 9px; border:0.5px solid var(--line); border-radius:20px;
  color:var(--ink-mute); letter-spacing:0.06em;
}
.view-strip .right .pill.live {
  border-color:var(--good); color:var(--good);
}
.view-strip .right .pill.live::before {
  content:''; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--good); margin-right:5px; vertical-align:1px;
  box-shadow:0 0 6px var(--good);
}
.view-strip .right .pill.warn {
  border-color:var(--warn); color:var(--warn);
}

/* ============ COMPARE AREA ============ */
.compare {
  flex:1; min-height:0; padding:14px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  overflow:auto;
}
.compare.merged { grid-template-columns:1fr }

.design-col {
  display:flex; flex-direction:column;
  background:var(--panel); border:0.5px solid var(--line);
  border-radius:10px; overflow:hidden; min-height:0;
}

/* design header */
.dc-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:0.5px solid var(--line);
  background:var(--panel-2);
}
.dc-name { display:flex; flex-direction:column; gap:2px }
.dc-name .label {
  font-size:9px; color:var(--lab); letter-spacing:0.16em;
  text-transform:uppercase; font-family:'JetBrains Mono', monospace;
}
.dc-name .title {
  font-size:14px; font-weight:600; color:var(--ink); letter-spacing:0.02em;
}
.dc-name .source {
  font-size:10px; color:var(--ink-dim); font-family:'JetBrains Mono', monospace;
}
.dc-controls { display:flex; gap:6px; align-items:center }
.dc-status-dot {
  width:7px; height:7px; border-radius:50%; background:var(--good);
  box-shadow:0 0 6px var(--good);
}
.dc-status-dot.idle { background:var(--ink-dim); box-shadow:none }
.dc-status-dot.running {
  background:var(--lab); box-shadow:0 0 6px var(--lab);
  animation:pulse 1.6s infinite;
}
.dc-status-dot.done {
  background:var(--good); box-shadow:0 0 6px var(--good);
}
@keyframes pulse {
  0%, 100% { opacity:1 }
  50% { opacity:0.4 }
}
.dc-icon-btn {
  width:24px; height:24px; border-radius:6px;
  background:transparent; border:0.5px solid var(--line);
  color:var(--ink-mute); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:11px;
  transition:all 0.15s;
}
.dc-icon-btn:hover { color:var(--lab); border-color:var(--lab) }

/* viewport */
.dc-viewport {
  flex:1; min-height:180px; position:relative;   /* floor: raymarcher never collapses */
  background:radial-gradient(ellipse at center, #0d1018 0%, #06080f 70%);
  overflow:hidden;
}
.dc-viewport svg { width:100%; height:100%; display:block }

/* #5 — rotating axis-gimbal overlay.  Neutral slate triad (kept clear of the
   metric green/red/amber and the design blue/violet/magenta) so it reads as
   pure orientation; the X/Y/Z letters carry the identity and depth-opacity is
   set per-frame by labGimbalSetAxis(). */
.vp-gimbal {
  position:absolute; top:8px; right:8px; width:46px; height:46px;
  pointer-events:none; opacity:0.9;
}
.vp-gimbal svg { width:100%; height:100%; overflow:visible; display:block; }
.vp-gimbal .gax { stroke:#8fa3b3; stroke-width:1.6; stroke-linecap:round; }
.vp-gimbal .gctr { fill:#8fa3b3; opacity:0.65; }
.vp-gimbal .glb {
  fill:#cdd9e2; font-family:'JetBrains Mono', monospace; font-size:9px;
  font-weight:600; text-anchor:middle; dominant-baseline:middle;
}
.vp-readout {
  position:absolute; bottom:10px; left:10px;
  background:rgba(6,8,15,0.85); border:0.5px solid var(--line);
  border-radius:6px; padding:5px 10px; font-size:10px;
  color:var(--ink-mute); font-family:'JetBrains Mono', monospace;
  letter-spacing:0.04em; pointer-events:none;
}
.vp-readout .v { color:var(--lab); font-weight:600 }

/* Buckling-tab localization chip (top-left) — band-colored stoplight:
   green=global (stable whole-cell), amber=mixed, red=local (wall buckling). */
.vp-buckle-chip {
  position:absolute; top:10px; left:10px;
  background:rgba(6,8,15,0.85); border:0.5px solid var(--line);
  border-left-width:3px; border-radius:6px; padding:5px 9px;
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:0.04em; pointer-events:none; line-height:1.3;
  display:flex; flex-direction:column; gap:1px;
}
.vp-buckle-chip .lbl { font-weight:600; text-transform:uppercase; letter-spacing:0.1em; font-size:9px; }
.vp-buckle-chip .val { color:var(--ink-mute); }
.vp-buckle-chip.global { border-left-color:#1D9E75; }
.vp-buckle-chip.global .lbl { color:#1D9E75; }
.vp-buckle-chip.mixed  { border-left-color:#e0b020; }
.vp-buckle-chip.mixed .lbl { color:#e0b020; }
.vp-buckle-chip.local  { border-left-color:#ef4444; }
.vp-buckle-chip.local .lbl { color:#ef4444; }

/* Import-time buckling-grid prediction badge — rides the card's source/
   metadata line (40-design-grid.js).  Same color grammar as the post-solve
   m̄ chip above: green = resolves at the coarse grid, red = thin & buckling-
   prone, needs the fine grid.  Pre-solve spec tag, not a control. */
.dc-predict-pill {
  display:inline-block; vertical-align:middle; margin-left:6px;
  font-family:'IBM Plex Mono','JetBrains Mono',monospace;
  font-size:9px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding:1px 5px; border-radius:3px;
  border-left:2px solid var(--ink-dim);
  background:rgba(255,255,255,0.03); color:var(--ink-mute);
}
.dc-predict-pill.ok    { border-left-color:#1D9E75; color:#1D9E75; }
.dc-predict-pill.prone { border-left-color:#ef4444; color:#ef4444; }

.vp-deform-control {
  position:absolute; bottom:10px; right:10px;
  background:rgba(6,8,15,0.92); border:0.5px solid var(--line);
  border-radius:8px; padding:8px 12px; display:none;
  align-items:center; gap:10px; backdrop-filter:blur(6px);
}
.vp-deform-control.show { display:flex }
.vp-deform-control label {
  font-size:9px; color:var(--ink-dim); text-transform:uppercase;
  letter-spacing:0.12em; font-family:'JetBrains Mono', monospace;
}
.vp-deform-control input[type=range] {
  width:88px; accent-color:var(--lab); height:4px;
}
.vp-deform-control .v {
  font-size:10px; color:var(--lab); font-family:'JetBrains Mono', monospace;
  font-weight:600; min-width:42px; text-align:right;
}

/* property summary card */
.dc-summary {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--line); border-top:0.5px solid var(--line);
}
.dc-stat {
  background:var(--panel-2); padding:9px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.dc-stat .lbl {
  font-size:9px; color:var(--ink-dim); text-transform:uppercase;
  letter-spacing:0.12em; font-family:'JetBrains Mono', monospace;
}
.dc-stat .val {
  font-size:14px; font-weight:600; color:var(--ink);
  font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;
}
.dc-stat .val.lab { color:var(--lab) }
.dc-stat .delta {
  font-size:10px; font-family:'JetBrains Mono', monospace; margin-top:1px;
}
.dc-stat .delta.up { color:var(--good) }
.dc-stat .delta.down { color:var(--bad) }
.dc-stat .delta.neut { color:var(--ink-dim) }

/* ============ MERGED σ–ε PLOT ============ */
.merged-plot {
  background:var(--panel); border:0.5px solid var(--line);
  border-radius:10px; padding:18px 22px; height:100%;
  display:flex; flex-direction:column; min-height:0;
}
.mp-head {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:12px; flex-shrink:0;
}
.mp-head .mp-title {
  font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-0.01em;
}
.mp-head .mp-sub {
  font-size:10px; color:var(--ink-dim); letter-spacing:0.06em;
  font-family:'JetBrains Mono', monospace;
}
.mp-canvas { flex:1; min-height:0; position:relative }
.mp-canvas svg { width:100%; height:100%; display:block }
.mp-legend {
  display:flex; gap:18px; margin-top:14px; padding-top:12px;
  border-top:0.5px solid var(--line); flex-shrink:0; flex-wrap:wrap;
}
.mp-legend-item {
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--ink-2);
}
.mp-legend-item .swatch { width:14px; height:3px; border-radius:1px }
.mp-legend-item .marker {
  font-size:10px; color:var(--ink-dim);
  font-family:'JetBrains Mono', monospace; margin-left:6px;
}

.mp-empty {
  flex:1; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; color:var(--ink-dim);
}
.mp-empty .icon {
  font-size:42px; opacity:0.35;
}
.mp-empty .msg {
  font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
}

/* ============ CONTROLS PANEL ============ */
.controls {
  background:var(--panel); border-top:0.5px solid var(--line);
  padding:14px 18px; flex-shrink:0;
  display:grid; grid-template-columns:1fr 1fr auto; gap:24px; align-items:center;
}
.ctrl-block { display:flex; flex-direction:column; gap:8px; min-width:0 }
.ctrl-label {
  font-size:9px; color:var(--sec-cyan); text-transform:uppercase;
  letter-spacing:0.16em; font-family:'JetBrains Mono', monospace;
}
.ctrl-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center }

.phys-toggle {
  display:flex; align-items:center; gap:6px;
  padding:5px 12px 5px 10px; border-radius:20px;
  border:0.5px solid var(--line); cursor:pointer;
  font-size:11px; color:var(--ink-mute); transition:all 0.15s;
  user-select:none;
}
.phys-toggle .check {
  width:14px; height:14px; border-radius:3px;
  border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
  font-size:10px; line-height:1; color:transparent;
}
.phys-toggle.on { color:var(--lab); border-color:var(--lab); background:var(--lab-soft) }
.phys-toggle.on .check { background:var(--lab); border-color:var(--lab); color:#1a1408 }
.phys-toggle:hover:not(.on) { color:var(--ink); border-color:#3a3a5a }

.spec-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px; background:var(--panel-2);
  border:0.5px solid var(--line); border-radius:6px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--ink-2); letter-spacing:0.04em;
}
.spec-pill .key { color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.12em; font-size:9px }
.spec-pill .v { color:var(--ink); font-weight:600 }
.spec-pill .caret { color:var(--ink-dim); margin-left:-2px }
.spec-pill.lab .v { color:var(--lab) }
.spec-pill.green .v { color:var(--good) }
.spec-pill.warn .v { color:var(--warn) }
.spec-pill.bad .v { color:var(--bad) }
.spec-pill[onclick] { cursor:pointer; transition:border-color 0.15s }
.spec-pill[onclick]:hover { border-color:var(--lab) }

.run-block { display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.run-btn {
  font-size:13px; padding:10px 28px; border-radius:24px;
  border:0.5px solid var(--purple); background:var(--purple);
  color:#fff; cursor:pointer; font-family:inherit; font-weight:600;
  letter-spacing:0.06em; transition:all 0.15s; min-width:160px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.run-btn:hover:not(:disabled) { background:#9387ff; box-shadow:0 0 16px rgba(124,111,247,0.4) }
.run-btn:disabled { opacity:0.4; cursor:not-allowed }
.run-btn.running {
  background:transparent; color:var(--lab); border-color:var(--lab);
}
.run-btn.done {
  background:transparent; color:var(--good); border-color:var(--good);
}

/* ============ SELF-TEST LINK (Phase 2) ============ */
.selftest-link {
  font-size:10px; color:var(--ink-dim);
  font-family:'JetBrains Mono', monospace; cursor:pointer;
  letter-spacing:0.06em; padding:4px 8px;
  user-select:none; transition:color 0.15s;
  text-align:right; white-space:nowrap;
  max-width:380px; overflow:hidden; text-overflow:ellipsis;
}
.selftest-link:hover { color:var(--lab) }
.selftest-link.running { color:var(--lab) }
.selftest-link.pass    { color:var(--good) }
.selftest-link.fail    { color:var(--bad) }

/* progress row */
.prog-row {
  background:var(--panel-2); border-top:0.5px solid var(--line);
  padding:8px 18px; display:flex; align-items:center; gap:14px;
  font-family:'JetBrains Mono', monospace; font-size:11px;
}
.prog-bar {
  flex:1; height:4px; background:var(--line-soft); border-radius:2px;
  overflow:hidden; position:relative;
}
.prog-fill {
  height:100%; background:linear-gradient(90deg, var(--purple), var(--lab));
  border-radius:2px; width:0%; transition:width 0.4s;
}
.prog-status { color:var(--ink-mute); letter-spacing:0.04em; min-width:0; flex-shrink:0 }
.prog-status .v { color:var(--lab) }
.prog-eta { color:var(--ink-dim); letter-spacing:0.06em; flex-shrink:0 }

/* ============ LOAD-AXIS TOGGLE + STRESS OVERLAYS (promoted from inline) ============ */
.load-axis-toggle { display:inline-flex; gap:0; margin-right:8px }
.load-axis-btn {
  background:transparent; border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.55); font:11px 'JetBrains Mono', ui-monospace, monospace;
  padding:2px 7px; cursor:pointer; letter-spacing:0.05em; line-height:1;
}
.load-axis-btn.active { background:var(--neon); border-color:var(--neon); color:#0a0a0a }
.load-axis-toggle.six .load-axis-btn { padding:2px 6px; letter-spacing:0.04em }

.stress-colorbar-header {
  position:absolute; right:14px; top:30px;
  font:9px 'JetBrains Mono', ui-monospace, monospace;
  color:rgba(255,255,255,0.55); letter-spacing:0.08em; text-transform:uppercase;
}
.stress-colorbar {
  position:absolute; right:14px; top:46px; bottom:68px; width:8px;
  border-radius:1px; border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(to top,
    rgb(0,32,77) 0%, rgb(28,62,101) 14.3%, rgb(60,88,120) 28.6%,
    rgb(91,114,124) 42.9%, rgb(127,137,117) 57.1%, rgb(170,162,99) 71.4%,
    rgb(216,193,76) 85.7%, rgb(255,234,70) 100%);
}
.stress-colorbar-label-top {
  position:absolute; right:28px; top:42px;
  font:9px 'JetBrains Mono', ui-monospace, monospace;
  color:rgba(255,255,255,0.85); letter-spacing:0.05em;
  white-space:nowrap; text-align:right;
}
.stress-colorbar-label-bot {
  position:absolute; right:28px; bottom:64px;
  font:9px 'JetBrains Mono', ui-monospace, monospace;
  color:rgba(255,255,255,0.5); letter-spacing:0.05em;
}
.stress-colorbar-suffix {
  display:block; font-size:8px; color:rgba(255,255,255,0.45);
  letter-spacing:0.08em; margin-top:1px;
}

.stress-norm-toggle-group { display:none; align-items:center; gap:0; margin-left:12px }
.stress-norm-toggle-group.show { display:inline-flex }
.stress-norm-label {
  font:10px 'JetBrains Mono', ui-monospace, monospace;
  color:rgba(255,255,255,0.5); letter-spacing:0.08em;
  margin-right:6px; text-transform:uppercase;
}
.stress-norm-btn {
  background:transparent; border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.55); font:11px 'JetBrains Mono', ui-monospace, monospace;
  padding:3px 9px; cursor:pointer; letter-spacing:0.05em; line-height:1;
}
.stress-norm-btn.active { background:var(--neon); border-color:var(--neon); color:#0a0a0a }

/* ============ RESPONSIVE ============ */
@media (max-width: 1280px) {
  .compare { grid-template-columns:1fr 1fr }
  .design-col:nth-child(3) { grid-column:1 / -1 }
}
@media (max-width: 880px) {
  .compare { grid-template-columns:1fr }
  .design-col:nth-child(3) { grid-column:auto }
  .controls { grid-template-columns:1fr; gap:14px }
  .run-block { align-items:stretch }
  .selftest-link { text-align:left; max-width:none }
  .view-strip { flex-wrap:wrap; gap:10px }
  .view-strip .right { width:100% }
}

/* ============ Phase-6 tie-up #2 — solver "still working" spinner ============ */
.solver-spinner { display:none; line-height:0; }
.solver-spinner.active { display:flex; align-items:center; }
.solver-spinner svg { display:block; }
.solver-spinner .ss-hex { opacity:0.5; }
.solver-spinner .ss-arcs {
  transform-box: view-box; transform-origin: 20px 20px;
  animation: ss-spin 1.05s linear infinite;
}
.solver-spinner .ss-core {
  transform-box: view-box; transform-origin: 20px 20px;
  animation: ss-pulse 1.4s ease-in-out infinite;
}
@keyframes ss-spin  { to { transform: rotate(360deg); } }
@keyframes ss-pulse { 0%,100% { transform: scale(0.7); opacity:0.55; } 50% { transform: scale(1.18); opacity:1; } }

/* ============ Phase-6 tie-up #1 — Nonlinear tab: α cubes + scrubber ============ */
/* No-data state keeps the merged plot full-width (.compare.merged stays 1fr).
   Only when renderNonlinearViz() finds α data does it add .has-cubes, opening
   the right cube column and the bottom scrubber row. */
.merged-cubes,
.merged-metrics,
.merged-scrubber { display:none; }

.compare.merged.has-cubes {
  grid-template-columns: minmax(0,1fr) 248px;
  grid-template-rows: minmax(0,1fr) auto auto;   /* plot+cubes · metrics · scrubber */
  gap:12px;
  align-items:stretch;
}
.compare.merged.has-cubes .merged-plot     { grid-column:1; grid-row:1; }
.compare.merged.has-cubes .merged-cubes    { grid-column:2; grid-row:1; display:flex; }
.compare.merged.has-cubes .merged-metrics  { grid-column:1 / -1; grid-row:2; display:flex; }
.compare.merged.has-cubes .merged-scrubber { grid-column:1 / -1; grid-row:3; display:flex; }

/* Per-design crush metric cards (Nonlinear tab) */
.merged-metrics { gap:10px; }
.merged-metrics .nl-metric-card {
  flex:1 1 0; min-width:0;
  background:var(--panel); border:0.5px solid var(--line);
  border-left:2px solid var(--line); border-radius:8px; padding:8px 12px;
  font-family:'JetBrains Mono', monospace;
}
.nl-metric-card .nl-mc-head {
  display:flex; align-items:center; gap:7px; margin-bottom:6px;
  font-size:10px; color:var(--ink-2); letter-spacing:.05em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nl-metric-card .nl-mc-head .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.nl-metric-card .nl-mc-row {
  display:flex; justify-content:space-between; gap:10px; padding:2px 0;
  font-size:10px; color:var(--ink-dim);
}
.nl-metric-card .nl-mc-row b { color:var(--ink); font-weight:600; }

.merged-cubes {
  flex-direction:column; gap:10px; min-height:0; overflow:auto;
}
.merged-cubes .nl-cube {
  flex:1 1 0; min-height:118px;
  background:var(--panel); border:0.5px solid var(--line); border-radius:10px;
  display:flex; flex-direction:column; overflow:hidden;
}
.nl-cube .nl-cube-head {
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  padding:7px 10px; border-bottom:0.5px solid var(--line);
  font-family:'JetBrains Mono', monospace; font-size:10px;
  color:var(--ink-2); letter-spacing:0.04em;
}
.nl-cube .nl-cube-head .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.nl-cube .nl-cube-head .nm  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nl-cube .rm-mount { flex:1; min-height:0; width:100%; }
.nl-cube .nl-cube-readout {
  flex-shrink:0; padding:5px 10px; border-top:0.5px solid var(--line);
  font-family:'JetBrains Mono', monospace; font-size:9px;
  color:var(--ink-dim); letter-spacing:0.05em;
}

.merged-scrubber {
  align-items:center; gap:14px;
  background:var(--panel); border:0.5px solid var(--line); border-radius:10px;
  padding:9px 16px;
  font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--ink-dim);
}
.merged-scrubber .nl-play {
  cursor:pointer; flex-shrink:0;
  background:transparent; border:0.5px solid var(--line); border-radius:6px;
  color:var(--ink-2); font-size:10px; line-height:1; padding:5px 9px;
}
.merged-scrubber .nl-play:hover { border-color:var(--ink-dim); color:var(--ink); }
.merged-scrubber .nl-track-wrap { flex:1; position:relative; display:flex; align-items:center; }
.merged-scrubber input[type=range] { width:100%; accent-color:var(--good); margin:0; }
.merged-scrubber .nl-ticks { position:absolute; left:0; right:0; top:-7px; height:11px; pointer-events:none; }
.merged-scrubber .nl-tick  { position:absolute; top:0; width:2px; height:11px; border-radius:1px; transform:translateX(-1px); opacity:0.85; }
.merged-scrubber .nl-readout { flex-shrink:0; min-width:118px; text-align:right; color:var(--ink-2); }

@media (max-width: 880px){
  .compare.merged.has-cubes {
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) 150px auto auto;
  }
  .compare.merged.has-cubes .merged-plot     { grid-column:1; grid-row:1; }
  .compare.merged.has-cubes .merged-cubes    { grid-column:1; grid-row:2; flex-direction:row; overflow-x:auto; }
  .compare.merged.has-cubes .merged-cubes .nl-cube { min-width:160px; }
  .compare.merged.has-cubes .merged-metrics  { grid-column:1; grid-row:3; flex-wrap:wrap; }
  .compare.merged.has-cubes .merged-scrubber { grid-row:4; }
}

/* ============ Phase-6 readout pass — metrics drawer + state colors ============ */
/* Lit baseline star (amber) marks the comparison reference. */
.dc-icon-btn.is-baseline { color:var(--lab); border-color:var(--lab); text-shadow:0 0 6px var(--lab-glow); }

/* Collapsible metrics drawer: default open on wide screens, collapsed on small
   (set by JS via .collapsed); the raymarcher above keeps its min-height floor. */
.dc-drawer { flex-shrink:0; border-top:0.5px solid var(--line); background:var(--panel-2); }
.dc-drawer-bar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; cursor:pointer; user-select:none;
}
.dc-drawer-bar:hover { background:rgba(255,255,255,0.025); }
.dc-drawer-bar .db-left {
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-2);
}
.dc-drawer-bar .chev {
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border:1px solid var(--neon); border-radius:5px; background:rgba(200,245,66,0.10);
  color:var(--neon); font-size:11px; line-height:1; transition:transform .22s ease;
}
.dc-drawer-bar .db-teaser { font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--ink-dim); }
.dc-drawer-bar .db-teaser b { color:var(--ink); font-weight:600; }
.dc-drawer-panel { max-height:600px; overflow:hidden; transition:max-height .26s ease; }
.dc-drawer.collapsed .dc-drawer-panel { max-height:0; }
.dc-drawer.collapsed .chev { transform:rotate(180deg); }

.dc-rows { padding:2px 12px 10px; }
.dc-row {
  display:grid; grid-template-columns:1fr 116px; align-items:baseline; gap:10px;
  padding:5px 0; border-top:0.5px solid rgba(255,255,255,0.04);
}
.dc-row:first-child { border-top:none; }
.dc-row .rl {
  font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-dim);
}
.dc-row .rr { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; }
.dc-row .rv {
  font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:600; color:var(--ink);
  letter-spacing:0.02em;
}
.dc-row .rv.lab { color:var(--lab); }
.dc-row .rd { font-family:'JetBrains Mono', monospace; font-size:9px; line-height:1.2; }
.dc-row .rd.up   { color:var(--good); }     /* comparison only */
.dc-row .rd.down { color:var(--bad); }      /* comparison only */
.dc-row .rd.neut { color:var(--ink-dim); }
.dc-row .rd.warn { color:var(--warn); }     /* status descriptors (buckling-limited, governed…) */