/* Shared chrome for the Learn interactives.
 * External on purpose: style-src 'self' already covers it, and it keeps six
 * guide pages from carrying six copies of the same instrument panel.
 * Per-guide specifics stay in that guide's inline <style>.
 */

.ix { margin:40px 0; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); overflow:hidden; }

.ix-head { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border-bottom:1px solid var(--line); background:var(--panel2); }
.ix-head .t { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2.2px;
  color:#FFB01A; line-height:1.5; }
.ix-head .b { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.6px;
  color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:5px 9px;
  white-space:nowrap; }

.ix-stage { position:relative; }
.ix-viz { position:relative; background:#05080F; aspect-ratio:16/9; }
.ix-viz canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
@supports not (aspect-ratio:16/9) { .ix-viz { height:min(56vw,520px); } }

/* Overlay readout. Sits on the canvas on wide screens, drops below it on phones
 * where it would otherwise cover the thing it is describing. */
.ix-hud { position:absolute; top:12px; left:12px; width:min(280px,calc(100% - 24px)); z-index:2;
  background:rgba(8,12,20,0.78); border:1px solid var(--line); border-radius:9px; padding:12px 14px; }
@supports (backdrop-filter:blur(8px)) { .ix-hud { backdrop-filter:blur(8px); } }
.ix-hud-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.ix-hud-t { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:17px;
  letter-spacing:.5px; color:#FFB01A; line-height:1.15; text-transform:uppercase; }
.ix-hud-t.is-good { color:var(--green); }
.ix-hud-t.is-bad { color:var(--red); }
.ix-hud-t.is-info { color:var(--blue); }
.ix-hud-s { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.4px;
  color:var(--dim); white-space:nowrap; }
.ix-hud-n { font-size:11px; line-height:1.7; color:var(--dim); margin-top:8px; }

.ix-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px;
  border-top:1px solid var(--line); padding-top:10px; }
.ix-grid.two { grid-template-columns:repeat(2,1fr); }
.ix-grid > div { display:flex; flex-direction:column; justify-content:space-between; }
.ix-grid .k { display:block; font-size:8.5px; letter-spacing:1.3px; color:var(--faint); }
.ix-grid .v { display:block; font-size:11.5px; color:var(--text); margin-top:3px; white-space:nowrap; }
.ix-grid .v.is-bad { color:var(--red); }
.ix-grid .v.is-good { color:var(--green); }

/* Control deck */
.ix-ctl { padding:14px 16px; border-top:1px solid var(--line); }
.ix-k { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.8px;
  color:var(--faint); margin-bottom:9px; }
.ix-k + .ix-k, .ix-row + .ix-k { margin-top:15px; }
.ix-row { display:flex; flex-wrap:wrap; gap:7px; }

.ix-btn { flex:1 1 auto; min-width:88px; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:1.2px; color:var(--dim); background:transparent; border:1px solid var(--line);
  border-radius:6px; padding:10px 8px; cursor:pointer;
  transition:color .18s, border-color .18s, background .18s; }
.ix-btn:hover { color:var(--text); border-color:var(--dim); }
.ix-btn[aria-pressed="true"], .ix-btn.is-on { color:#FFB01A; border-color:#FFB01A;
  background:rgba(255,176,26,0.10); }
.ix-btn.is-off { color:var(--red); border-color:var(--red); text-decoration:line-through; opacity:.85; }
.ix-btn:focus-visible { outline:2px solid #FFB01A; outline-offset:2px; }

.ix-btn.big { flex:1 1 100%; font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:16px; letter-spacing:2.5px; padding:14px 12px; color:#FFB01A; border-color:#FFB01A; }
.ix-btn.big:hover { background:rgba(255,176,26,0.14); color:#FFB01A; border-color:#FFB01A; }
.ix-btn.danger { color:var(--red); border-color:var(--red); }
.ix-btn.danger:hover { background:rgba(255,90,90,0.12); color:var(--red); border-color:var(--red); }

.ix-slide { display:flex; align-items:center; gap:12px; }
.ix-slide .lab { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text);
  white-space:nowrap; min-width:76px; text-align:right; }
.ix-slide input[type=range] { flex:1; -webkit-appearance:none; appearance:none;
  height:18px; background:transparent; cursor:grab; margin:0; }
.ix-slide input[type=range]:active { cursor:grabbing; }
.ix-slide input[type=range]::-webkit-slider-runnable-track { height:3px; border-radius:2px;
  background:var(--line); }
.ix-slide input[type=range]::-moz-range-track { height:3px; border-radius:2px; background:var(--line); }
.ix-slide input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%; background:#FFB01A; border:2px solid #05080F;
  margin-top:-5.5px; }
.ix-slide input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%;
  background:#FFB01A; border:2px solid #05080F; }
.ix-slide input[type=range]:focus-visible { outline:2px solid #FFB01A; outline-offset:3px; }

.ix-verdict { font-size:12.5px; line-height:1.8; color:var(--text); margin-top:14px;
  border-top:1px solid var(--line); padding-top:13px; min-height:44px; }
.ix-verdict b { color:#FFB01A; font-weight:500; }
.ix-verdict .bad { color:var(--red); }
.ix-verdict .good { color:var(--green); }

.ix-tag { font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:1.4px;
  color:var(--faint); padding:11px 16px; border-top:1px solid var(--line);
  background:var(--panel2); line-height:1.7; }

.ix-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px;
  border-top:1px solid var(--line); padding-top:11px; }
.ix-legend span { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.1px;
  color:var(--faint); display:flex; align-items:center; gap:6px; }
.ix-legend i { width:9px; height:9px; border-radius:2px; display:block; flex:none; }

@media (max-width:640px) {
  .ix { margin:32px -24px; border-radius:0; border-left:none; border-right:none; }
  .ix-hud { position:static; width:auto; border:none; border-top:1px solid var(--line);
    border-radius:0; background:var(--panel); backdrop-filter:none; }
  .ix-btn { min-width:0; font-size:9px; letter-spacing:1px; padding:10px 5px; }
  .ix-slide .lab { min-width:64px; font-size:10px; }
}

/* Threshold ladder: a row of named values that light up as the model crosses
 * them. Real text rather than canvas labels, so it stays selectable and legible. */
.ix-steps { display:grid; gap:7px; margin-top:12px; }
.ix-step { display:flex; align-items:baseline; gap:12px; padding:9px 11px;
  border:1px solid var(--line); border-radius:7px; background:rgba(5,8,15,0.4);
  transition:border-color .2s, background .2s; }
.ix-step b { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:17px;
  color:var(--dim); min-width:58px; flex:none; letter-spacing:.5px; }
.ix-step span { font-size:11.5px; line-height:1.65; color:var(--faint); }
.ix-step.is-hit { border-color:var(--red); background:rgba(255,90,90,0.07); }
.ix-step.is-hit b { color:var(--red); }
.ix-step.is-hit span { color:var(--dim); }
.ix-step.is-hit.is-safe { border-color:var(--green); background:rgba(61,220,132,0.07); }
.ix-step.is-hit.is-safe b { color:var(--green); }