/* ============================================================ */
/* Lab 07 — per-lab styles                                        */
/* Shared chrome (palette/typography/.viz/.callout/glossary)      */
/* lives in ../_shared/lab-base.css                               */
/* ============================================================ */

/* Course-frame, terminal-snippet, time-tag — duplicated from     */
/* lab-01/lab-05/lab-06. Lift to shared base on next refactor.    */
.course-frame {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 10px 0 24px 0;
  padding: 6px 0 6px 16px;
  border-left: 3px solid var(--accent-soft);
}
.course-frame strong { color: var(--ink); }
body.presentation-mode .course-frame {
  font-size: 22px;
  padding-left: 22px;
  margin: 14px 0 32px 0;
}

.time-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-mute);
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 10px;
  vertical-align: 2px;
}

/* Numbered best-practice list (also in lab-05, lab-06) */
.practice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px 16px 12px 12px;
  background: var(--bg-elev);
  border-radius: 6px;
  border-left: 3px solid var(--accent-soft);
}
.practice-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
}
.practice strong { color: var(--ink); }

/* Inline-key hint for the red arrow in the try-it widget */
.ref-arrow-key {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
}
.ref-arrow-key::before {
  content: "→ ";
  font-family: var(--mono);
}

/* ============================================================ */
/*  Widget 1 · refusal-direction 2D visualizer                    */
/* ============================================================ */
.ref-svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  background: var(--bg-elev);
  border-radius: 6px;
  border: 1px solid var(--rule);
}
.ref-svg .axis { stroke: var(--ink-mute); stroke-width: 0.7; opacity: 0.4; }
.ref-svg .axis-label { font-family: var(--mono); font-size: 11px; fill: var(--ink-mute); }
.ref-svg .pt.comply { fill: var(--pos); stroke: var(--pos-stroke); stroke-width: 1.2; }
.ref-svg .pt.refuse { fill: var(--neg); stroke: var(--neg-stroke); stroke-width: 1.2; }
.ref-svg .boundary { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.ref-svg .refusal-arrow { stroke: var(--accent); stroke-width: 2.4; fill: none; }
.ref-svg .refusal-arrow-head { fill: var(--accent); }
.ref-svg .refusal-label {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--accent);
  font-weight: 600;
}
.ref-svg .probe { fill: white; stroke: var(--ink); stroke-width: 1.8; }
.ref-svg .probe.abliterated { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.2; }
.ref-svg .probe-trail { stroke: var(--ink-mute); stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.ref-svg .probe-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
}
.ref-svg .verdict-bg {
  fill: var(--bg-viz);
  stroke: var(--rule);
}
.ref-svg .verdict-text {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}
.ref-svg .verdict-text.refuse { fill: #5a8a6e; }
.ref-svg .verdict-text.comply { fill: var(--accent); }

.ref-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ref-readout {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex-grow: 1;
}
.ref-spacer { flex-grow: 1; }
.ref-eps {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ref-eps input[type="range"] {
  width: 140px;
  accent-color: var(--accent);
}
.ref-eps span {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

body.presentation-mode .ref-svg { max-width: 720px; }

/* ============================================================ */
/*  Widget 2 · defense-in-depth stack                             */
/* ============================================================ */
.stack-svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  background: var(--bg-elev);
  border-radius: 6px;
  border: 1px solid var(--rule);
}
.stack-svg .layer-row {
  fill: var(--bg-viz);
  stroke: var(--rule);
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.12s, stroke 0.12s;
}
.stack-svg .layer-row:hover,
.stack-svg .layer-row.active {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.stack-svg .layer-row.highlighted {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.4;
}
.stack-svg .layer-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--ink-mute);
  text-anchor: middle;
}
.stack-svg .layer-name {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  fill: var(--ink);
  dominant-baseline: middle;
}
.stack-svg .layer-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--ink-mute);
  dominant-baseline: middle;
}

.stack-detail {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--ink);
  min-height: 5em;
}
.stack-detail .stack-detail-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.stack-detail code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--bg-code);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ============================================================
   Embedded third-party iframe (e.g. chat.dphn.ai in §4)
   ============================================================ */
.embed-frame {
  margin: 14px 0 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: #14110d;
  position: relative;
  aspect-ratio: 16 / 11;
  min-height: 480px;
}
.embed-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: white;
}
.embed-frame noscript p {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--serif);
  text-align: center; padding: 0 24px;
}
.embed-fallback {
  font-family: var(--serif); font-size: 13px;
  color: var(--ink-mute); margin: 6px 0 0;
}
.embed-fallback code {
  font-family: var(--mono); font-size: 0.92em;
  background: var(--bg-code); padding: 1px 5px;
  border-radius: 3px;
}
@media (max-width: 760px) {
  .embed-frame { aspect-ratio: 3 / 4; min-height: 520px; }
}

/* ============================================================ */
/* §2 · latent-space analogy widget (#viz-latent)              */
/* ============================================================ */
#viz-latent .lat-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 4px 0 12px; font-family: var(--sans); font-size: 0.9rem;
}
#viz-latent .lat-controls select {
  font-family: var(--mono); font-size: 0.9rem; padding: 3px 6px;
  border: 1px solid var(--accent-soft); border-radius: 4px;
  background: #fff; color: var(--ink);
}
#viz-latent .lat-controls select:focus { outline: none; border-color: var(--accent); }
#viz-latent .lat-readout { font-family: var(--serif); font-size: 0.92rem; color: var(--ink-soft); }
#viz-latent .lat-readout code { font-family: var(--mono); font-size: 0.85em; background: var(--bg-code); padding: 1px 5px; border-radius: 3px; }
#viz-latent .lat-exact { color: #2f6b4a; font-weight: 600; font-size: 0.85em; }
#viz-latent .lat-near  { color: var(--ink-mute); font-size: 0.85em; }

#viz-latent .lat-svg {
  width: 100%; max-width: 520px; display: block; margin: 0 auto;
  background: var(--bg-viz); border: 1px solid var(--rule); border-radius: 8px;
}
#viz-latent .lat-pt { fill: #cfc8b8; stroke: #8a857d; stroke-width: 1; }
#viz-latent .lat-pt.lat-a { fill: var(--accent); stroke: var(--accent); }
#viz-latent .lat-pt.lat-b { fill: #d8a48a; stroke: #b14a2e; }
#viz-latent .lat-pt.lat-c { fill: #9ec3ae; stroke: #3f8c63; }
#viz-latent .lat-pt.lat-ans { fill: #f2c94c; stroke: #c79a1f; stroke-width: 2; }
#viz-latent .lat-lbl { font-family: var(--mono); font-size: 11px; fill: var(--ink); }
#viz-latent .lat-axis-lbl { font-family: var(--sans); font-size: 11px; fill: var(--ink-mute); font-weight: 600; }
#viz-latent .lat-rel { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
#viz-latent .lat-rel-c { stroke: #3f8c63; }
#viz-latent .lat-result { fill: none; stroke: #c79a1f; stroke-width: 2; }

/* ============================================================ */
/* §3 · activation-space ablation playgrounds                   */
/*      (#viz-ablate-22 shallow 2→2, #viz-ablate-232 deep 2→3→2) */
/* ============================================================ */
.abl-stage {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
  justify-content: center; margin: 6px 0 4px;
}
.abl-net-svg, .abl-space-svg {
  display: block; height: auto;
  background: var(--bg-viz);
  border: 1px solid var(--rule); border-radius: 8px;
}
.abl-net-svg  { width: 100%; max-width: 320px; flex: 1 1 280px; }
.abl-space-svg { width: 100%; max-width: 460px; flex: 1 1 360px; touch-action: none; cursor: crosshair; }

/* --- network diagram (toy-GPT idiom: □ = data, ○ = neuron) --- */
.abl-data { fill: #fffefa; stroke: var(--ink-mute); stroke-width: 1.3; }
.abl-neuron { fill: #fff3d6; stroke: var(--ink); stroke-width: 1.5; }
.abl-neuron.abl-out { fill: #fde0d2; stroke: var(--accent); stroke-width: 1.8; }
.abl-neuron.dead { fill: #efece3; stroke: var(--ink-mute); }
.abl-neuron.ghost { opacity: 0.4; stroke-dasharray: 4 3; }
.abl-vlabel { font-family: var(--mono); font-size: 12px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.abl-nlabel { font-family: var(--mono); font-size: 11px; fill: var(--ink-mute); text-anchor: middle; }
.abl-collabel { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--ink-mute); text-anchor: middle; }
.abl-ghostnote { font-family: var(--sans); font-size: 10.5px; fill: var(--accent); text-anchor: middle; }

/* --- activation space --- */
.abl-axis { stroke: var(--ink-mute); stroke-width: 0.7; opacity: 0.35; }
.abl-pt.harmful  { fill: var(--neg); stroke: var(--neg-stroke); stroke-width: 1; }   /* refuse side */
.abl-pt.harmless { fill: var(--pos); stroke: var(--pos-stroke); stroke-width: 1; }   /* comply side */
.abl-mean { stroke-width: 2.6; stroke-linecap: round; }
.abl-mean.harmful  { stroke: var(--neg-stroke); }
.abl-mean.harmless { stroke: var(--pos-stroke); }
.abl-meanlabel { font-family: var(--mono); font-size: 10px; fill: var(--ink-soft); }
.abl-dir { stroke: var(--accent); stroke-width: 2.6; }
.abl-dir-head { fill: var(--accent); }
.abl-dirlabel { font-family: var(--mono); font-size: 11.5px; font-weight: 700; fill: var(--accent); }
.abl-plane { stroke: var(--ink-mute); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.5; }
.abl-plane.on { stroke: var(--ink); stroke-width: 1.8; opacity: 1; stroke-dasharray: 6 4; }
.abl-planelabel { font-family: var(--mono); font-size: 10.5px; fill: var(--ink); font-weight: 600; }
.abl-a { stroke: var(--ink); stroke-width: 2; }
.abl-a.refuse { fill: var(--neg); }
.abl-a.comply { fill: var(--pos); }
.abl-aprime { fill: #fff; stroke: var(--accent); stroke-width: 2.4; }
.abl-projline { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 3; }
.abl-projhead { fill: var(--accent); }
.abl-alabel { font-family: var(--mono); font-size: 12px; font-weight: 700; fill: var(--ink); }
.abl-alabel.prime { fill: var(--accent); font-weight: 600; }

/* --- controls + readout --- */
.abl-sliders { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 6px; }
.abl-sliders label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; }
.abl-ctrl-name { font-family: var(--mono); font-weight: 700; color: var(--accent); min-width: 18px; }
.abl-sliders input[type="range"] { width: 150px; accent-color: var(--accent); }
.abl-ctrl-val { font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.abl-btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.abl-hook {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--ink-mute); background: var(--bg-elev); color: var(--ink-soft);
}
.abl-hook.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.abl-readout {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  white-space: pre; overflow-x: auto;
  background: var(--bg-code); border: 1px solid var(--rule); border-radius: 6px;
  padding: 10px 14px; margin-top: 10px; color: var(--ink);
}
.abl-readout .rk { color: var(--ink-mute); }
.abl-readout .rd { color: var(--accent); font-weight: 700; }
.abl-readout .ra { color: #2f6b4a; font-weight: 700; }
.abl-readout .rmute { color: var(--ink-mute); font-style: italic; }
.abl-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0;
  font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
}
.abl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.abl-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.abl-legend i.harmful  { background: var(--neg); border: 1px solid var(--neg-stroke); }
.abl-legend i.harmless { background: var(--pos); border: 1px solid var(--pos-stroke); }
.abl-legend i.dir { background: var(--accent); border-radius: 0; height: 3px; }

body.presentation-mode .abl-net-svg { max-width: 380px; }
body.presentation-mode .abl-space-svg { max-width: 560px; }

/* ============================================================
   §2 · Residual-stream spine diagram
   ============================================================ */
#resstream-svg { width: 100%; height: auto; display: block; }
.rs-channel { fill: var(--accent-soft); opacity: 0.22; stroke: var(--accent-soft); }
.rs-spine { stroke: var(--accent); stroke-width: 2.4; }
.rs-spine-lbl { font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; fill: var(--accent); }
.rs-cell { stroke-width: 1.4; }
.rs-cell-val { font-family: var(--mono); font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.rs-tag { font-family: var(--mono); font-size: 11px; fill: var(--ink-mute); }
.rs-plus { fill: var(--bg-elev); stroke: var(--accent); stroke-width: 2; }
.rs-plus-sign { font-family: var(--sans); font-size: 17px; font-weight: 700; fill: var(--accent); }

.rs-arch-band { fill: var(--bg-code); stroke: var(--rule); stroke-width: 1; }
.rs-arch-title { font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.05em; fill: var(--ink-soft); }
.rs-arch-sub { font-family: var(--sans); font-size: 10.5px; fill: var(--ink-mute); }

.rs-block-box { fill: var(--bg-viz); stroke: var(--ink-mute); stroke-width: 1.3;
  transition: stroke 0.15s, fill 0.15s; }
.rs-block { cursor: default; }
.rs-block-title { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--ink); }
.rs-block-sub { font-family: var(--mono); font-size: 10px; fill: var(--ink-mute); }
.rs-block-out { font-family: var(--mono); font-size: 11px; fill: var(--ink-soft); }

.rs-arrow { stroke-width: 1.6; }
.rs-arrow.rs-spine-arrow, .rs-arrow-head.rs-spine-arrow { stroke: var(--accent); fill: var(--accent); }
.rs-arrow.rs-read { stroke: var(--ink-mute); }
.rs-arrow-head.rs-read { fill: var(--ink-mute); stroke: none; }
.rs-arrow.rs-write { stroke: var(--accent); stroke-width: 2; }
.rs-arrow-head.rs-write { fill: var(--accent); stroke: none; }
.rs-edge-lbl { font-family: var(--sans); font-size: 10.5px; font-style: italic; fill: var(--ink-mute); }
.rs-final-lbl, .rs-refusal { font-family: var(--mono); font-size: 11.5px; fill: var(--ink-soft); }
.rs-refusal { fill: var(--accent); font-weight: 600; }

/* hover: light up a block's read + write + labels */
[data-rsgroup].lit.rs-read { stroke: var(--accent); stroke-width: 2.2; }
[data-rsgroup].lit.rs-arrow-head { fill: var(--accent); }
[data-rsgroup].lit.rs-block-box { stroke: var(--accent); fill: var(--accent-soft); }
[data-rsgroup].lit.rs-edge-lbl { fill: var(--accent); font-weight: 700; }
.rs-block-box[data-rsgroup]:hover { stroke: var(--accent); }

body.presentation-mode #resstream-svg { max-width: 620px; margin: 0 auto; }

/* ============================================================
   §2 · Refusal-direction-from-mean worked example (plot + table)
   ============================================================ */
#refmean-svg { width: 100%; height: auto; display: block; max-width: 620px; margin: 0 auto; }
.rm-axis { stroke: var(--ink-soft); stroke-width: 1; }
.rm-tick { stroke: var(--ink-mute); stroke-width: 1; }
.rm-tick-lbl { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-mute); }
.rm-axis-lbl { font-family: var(--mono); font-size: 11px; fill: var(--ink-soft); }
.rm-pt { stroke-width: 1.4; }
.rm-pt.rm-refuse, .rm-mean.rm-refuse { fill: var(--neg); stroke: var(--neg-stroke); }
.rm-pt.rm-comply, .rm-mean.rm-comply { fill: var(--pos); stroke: var(--pos-stroke); }
.rm-mean { stroke: var(--ink); stroke-width: 2; }
.rm-mean-lbl { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--ink); }
.rm-w { stroke: var(--accent); stroke-width: 2.4; }
.rm-w-head { fill: var(--accent); }
.rm-w-lbl { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--accent); }
.rm-legend-lbl { font-family: var(--sans); font-size: 11.5px; fill: var(--ink-soft); }

/* worked-example table row tints (match the plot colors) */
.refmean-table code { background: var(--bg-code); padding: 1px 5px; border-radius: 4px; }
.refmean-table .rm-row-refuse td { background: color-mix(in srgb, var(--neg) 45%, transparent); }
.refmean-table .rm-row-comply td { background: color-mix(in srgb, var(--pos) 45%, transparent); }
.rm-k-refuse { color: var(--neg-stroke); }
.rm-k-comply { color: var(--pos-stroke); }

/* shrink the wide worked-arithmetic equation so its long lines fit without overflow */
pre.equation.eq-worked { font-size: 12px; line-height: 1.55; }
body.presentation-mode pre.equation.eq-worked { font-size: 15px; }

/* optional-detail expander (supplementary math tucked behind a click) */
details.opt-note { margin: 14px 0; }
details.opt-note > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
details.opt-note[open] > summary { margin-bottom: 8px; }

/* image figures (matches lab-07/lab-08 convention) */
figure.lab-figure {
  margin: 14px 0 22px 0;
  padding: 0;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
figure.lab-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #f0eee5;
}
figure.lab-figure figcaption {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  padding: 9px 14px 10px;
  border-top: 1px solid var(--rule);
}
figure.lab-figure figcaption strong { color: var(--ink); }

/* §5.1 · GODMODE "fire at the fleet" simulation */
#viz-godmode .gm-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 12px 0; }
.gm-modes { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.gm-mode { font-family: var(--sans); font-size: 12.5px; padding: 6px 12px; border: none;
  background: var(--bg-elev); color: var(--ink-soft); cursor: pointer; }
.gm-mode + .gm-mode { border-left: 1px solid var(--rule); }
.gm-mode.active { background: var(--accent); color: #fff; font-weight: 600; }
.gm-fire { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.gm-fire:disabled { opacity: 0.55; cursor: default; }
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 8px; margin: 12px 0; }
.gm-chip { border: 1px solid var(--rule); border-radius: 7px; padding: 8px 10px;
  font-family: var(--mono); font-size: 11.5px; display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-elev); transition: background .18s, border-color .18s; }
.gm-name { color: var(--ink); font-weight: 600; }
.gm-status { color: var(--ink-mute); font-size: 10.5px; }
.gm-chip.idle { opacity: 0.7; }
.gm-chip.probing { border-color: var(--accent); animation: gm-pulse 0.8s ease-in-out infinite; }
@keyframes gm-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.gm-chip.refused { background: var(--neg); border-color: var(--neg-stroke); }
.gm-chip.refused .gm-status { color: #3f7d52; }
.gm-chip.liberated { background: var(--pos); border-color: var(--accent); }
.gm-chip.liberated .gm-name, .gm-chip.liberated .gm-status { color: var(--accent); }
.gm-readout { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: 8px; }
.gm-readout .gm-ok { color: #3f7d52; }
.gm-readout .gm-bad { color: var(--accent); font-weight: 600; }
.gm-readout .gm-mute { color: var(--ink-mute); }
.gm-readout b { color: var(--ink); }

/* § LoRA · low-rank matrix explorer */
#lowrank-svg { width: 100%; height: auto; display: block; max-width: 600px; margin: 0 auto; }
.lr-cell { stroke: var(--bg-viz); stroke-width: 0.5; }
.lr-lbl { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-mute); }
.lr-op { font-family: var(--sans); font-size: 20px; font-weight: 700; fill: var(--ink-soft); }
#viz-lowrank .lr-controls { display: flex; gap: 12px; align-items: center; margin: 10px 0;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
#viz-lowrank .lr-controls input[type="range"] { width: 200px; accent-color: var(--accent); }
.lr-num { color: var(--accent); font-weight: 600; min-width: 20px; }
.lr-readout { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: 8px; }
.lr-readout b { color: var(--ink); }
.lr-readout .lr-hi { color: var(--accent); font-weight: 600; }

/* outer-product "multiplication table" visual (rank-1) */
.outer-viz { margin: 16px 0 20px; }
.outer-table { border-collapse: collapse; font-family: var(--mono); font-size: 14px; }
.outer-table td { width: 46px; height: 40px; text-align: center; border: 1px solid var(--rule); }
.outer-table .oc-corner { font-size: 11px; font-family: var(--sans); color: var(--ink-mute); background: var(--bg-code); }
.outer-table .oc-vhead, .outer-table .oc-uhead { background: var(--pos); border-color: var(--pos-stroke);
  color: var(--accent); font-weight: 700; }
.outer-table .oc-prod { background: var(--bg-elev); color: var(--ink); }
.outer-table .oc-note { border: none; width: auto; text-align: left; padding-left: 12px;
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-mute); }
.outer-viz figcaption { font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--ink-mute); margin-top: 8px; max-width: 640px; }
.outer-viz figcaption strong, .outer-viz figcaption code { color: var(--ink); }