/* ===========================================================================
   sim-lab.css — the live-simulation Explore kit (sim-lab.js)
   Built on explore-lab.css (banner, notebook, buttons, tokens). These rules add
   the sim bar, the stage with readout tiles, knobs, perturbation buttons, the
   charts, and the narrator / prediction panel on the right.
   =========================================================================== */
.sl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; border: 1px solid rgba(242,191,94,.32); border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--unit) 10%, var(--h-panel)), var(--h-panel) 60%); }
.sl-run, .sl-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: transparent; color: var(--h-text); font: 600 .9rem/1 var(--h-sans) !important; cursor: pointer; transition: background-color .2s, border-color .2s, transform .15s; }
.sl-run svg, .sl-reset svg { width: 18px; height: 18px; }
.sl-run[aria-pressed="true"] { border-color: transparent; background: var(--h-gold-grad); color: var(--h-on-gold); box-shadow: 0 4px 18px rgba(242,191,94,.22); }
.sl-run:hover, .sl-reset:hover { border-color: rgba(242,191,94,.55); background: rgba(242,191,94,.08); }
.sl-run[aria-pressed="true"]:hover { background: var(--h-gold-grad); transform: translateY(-1px); }
.sl-stat { display: grid; gap: 2px; min-width: 70px; }
.sl-k { font: 600 .7rem/1.2 var(--h-sans); letter-spacing: .03em; text-transform: none; color: var(--h-muted); }
.sl-stat b { font: 600 1.05rem/1.1 var(--h-sans); color: var(--h-gold-1); font-variant-numeric: tabular-nums; }
.sl-speed { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; margin-left: auto; min-width: 190px; }
.sl-speed .sl-k { grid-column: 1 / -1; }
.sl-speed input { width: 120px; min-height: 32px; accent-color: var(--h-gold-2); }
.sl-speed output { font: 600 .92rem/1 var(--h-sans); color: var(--h-gold-1); font-variant-numeric: tabular-nums; }
.sl-chal { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); color: var(--h-text); font: 600 .84rem/1 var(--h-sans); cursor: pointer; }
.sl-chal input { width: 18px; height: 18px; accent-color: var(--h-gold-2); margin: 0; }

.sl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--xl-gap, 16px); align-items: start; }
.sl-main { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--h-line); border-radius: 18px; background: var(--h-panel); min-width: 0; }
.sl-stage { position: relative; border-radius: 14px; overflow: hidden; background: radial-gradient(80% 90% at 50% 100%, color-mix(in srgb, var(--unit) 8%, transparent), transparent 70%), #0E0C0A; border: 1px solid var(--h-line); }
.sl-scene svg { display: block; width: 100%; height: auto; }
.sl-cap { margin: 0; min-height: 1.5em; font-size: .92rem; color: var(--h-text-2); line-height: 1.5; }
.sl-cap b { color: var(--h-text); }

.sl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.sl-tile { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--h-line); border-radius: 12px; background: var(--h-panel-2); }
.sl-tile b { font: 600 1.25rem/1.1 var(--h-sans); color: var(--h-gold-1); font-variant-numeric: tabular-nums; }
.sl-unit { font-size: .78rem; color: var(--h-muted); }

.sl-ctl { display: grid; gap: 14px; padding: 14px 16px; border: 1px solid var(--h-line); border-radius: 16px; background: var(--h-panel); }
.sl-knobs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 18px; }
.sl-knob { display: grid; gap: 6px; }
.sl-knob-l { display: flex; justify-content: space-between; align-items: baseline; font: 600 .74rem/1.2 var(--h-sans); letter-spacing: .03em; text-transform: none; color: var(--h-muted); }
.sl-knob output { font: 600 .95rem/1 var(--h-sans); letter-spacing: 0; text-transform: none; color: var(--h-gold-1); font-variant-numeric: tabular-nums; }
.sl-knob input { width: 100%; min-height: 32px; accent-color: var(--h-gold-2); }
.sl-knob.is-off { opacity: .45; }

.sl-actions { display: grid; gap: 10px; }
.sl-agroup { display: grid; gap: 6px; }
.sl-abtns { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-act { min-height: 40px; padding: 0 14px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: transparent; color: var(--h-text); font: 600 .86rem/1 var(--h-sans) !important; cursor: pointer; transition: background-color .2s, border-color .2s; }
.sl-act:hover:not(:disabled) { border-color: rgba(242,191,94,.6); background: rgba(242,191,94,.08); }
.sl-act:disabled { opacity: .35; cursor: default; }

.sl-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sl-chartbox { display: grid; gap: 6px; padding: 10px 12px 8px; border: 1px solid var(--h-line); border-radius: 12px; background: var(--h-panel-2); min-width: 0; }
.sl-chart-body { display: grid; gap: 6px; min-width: 0; }
.sl-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sl-chart-head .sl-chart-t { margin-right: auto; }
.sl-zoombtn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: transparent; color: var(--h-text-2); font: 600 .76rem/1 var(--h-sans) !important; cursor: pointer; }
.sl-zoombtn svg { width: 14px; height: 14px; }
.sl-zoombtn:hover { border-color: rgba(242,191,94,.6); color: var(--h-text); background: rgba(242,191,94,.08); }
.sl-zoom { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(8,7,6,.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: sl-in .25s ease; }
.sl-zoom[hidden] { display: none; }
.sl-zoom-box { position: relative; display: grid; gap: 10px; width: min(1100px, 100%); max-height: 100%; overflow: auto; padding: 18px 22px 16px; border: 1px solid rgba(242,191,94,.4); border-radius: 18px; background: var(--h-panel, #15120f); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.sl-zoom-head { padding-right: 52px; }
.sl-zoom-head .sl-chart-t { font-size: .95rem; }
.sl-zoom-body .sl-chart-note, .sl-zoom-body .sl-legend { font-size: .95rem; }
.sl-zoom-close { position: absolute; top: 10px; right: 12px; width: 42px; height: 42px; border: 1px solid var(--h-line-2); border-radius: 50%; background: transparent; color: var(--h-text); font: 400 1.5rem/1 var(--h-sans) !important; cursor: pointer; }
.sl-zoom-close:hover { border-color: rgba(242,191,94,.6); background: rgba(242,191,94,.08); }
body.sl-zoom-open { overflow: hidden; }
@media (max-width: 760px) { .sl-zoom { padding: 8px; } .sl-zoom-box { padding: 14px 12px 12px; } .sl-zoombtn span { display: none; } .sl-zoombtn { padding: 0 10px; min-height: 40px; } }
.sl-chart-t { margin: 0; font: 600 .84rem/1.2 var(--h-sans); letter-spacing: .02em; text-transform: none; color: var(--h-gold-1); }
.sl-chart { display: block; width: 100%; height: auto; }
.sl-plot { fill: rgba(255,255,255,.02); stroke: var(--h-line-2); }
.sl-gl { stroke: rgba(255,255,255,.07); }
.sl-tick { fill: var(--h-muted); font: 11px var(--h-sans); }
.sl-axis { fill: var(--h-text-2); font: 600 12px var(--h-sans); }
.sl-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.sl-dot { stroke: #0E0C0A; stroke-width: 1.5; }
.sl-mark { stroke: var(--h-gold-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.sl-marklab { fill: var(--h-gold-1); font: 600 10.5px var(--h-sans); }
.sl-ref { fill: none; stroke: rgba(158,208,240,.75); stroke-width: 1.6; stroke-dasharray: 6 4; }
.sl-trace { fill: none; stroke: rgba(242,191,94,.45); stroke-width: 1.2; }
.sl-pt { fill: var(--h-gold-1); stroke: #0E0C0A; stroke-width: 1.5; }
.sl-ptn { fill: var(--h-gold-1); font: 700 11px var(--h-sans); }
.sl-ptlab { fill: var(--h-text); font: 600 12px var(--h-sans); }
.sl-live { fill: #fff; stroke: var(--h-gold-1); stroke-width: 2.5; }
.sl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--h-text-2); }
.sl-leg { display: inline-flex; align-items: center; gap: 6px; }
.sl-leg i { width: 14px; height: 3px; border-radius: 2px; }
.sl-chart-note { margin: 0; font-size: .78rem; color: var(--h-muted); }
.sl-chart-note i { display: inline-block; vertical-align: middle; margin-right: 2px; }
.sl-refkey { width: 16px; height: 0; border-top: 2px dashed rgba(158,208,240,.9); }
.sl-livekey { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--h-gold-1); }
.sl-ptkey { width: 10px; height: 10px; border-radius: 50%; background: var(--h-gold-1); }
.sl-modes { display: flex; flex-wrap: wrap; gap: 4px; }
.sl-mode { min-height: 34px; padding: 0 10px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: transparent; color: var(--h-text-2); font: 600 .74rem/1 var(--h-sans) !important; cursor: pointer; }
.sl-mode.is-on { border-color: var(--unit); background: color-mix(in srgb, var(--unit) 16%, transparent); color: var(--h-text); }

.sl-side { display: grid; gap: 12px; min-width: 0; }
.sl-say { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid rgba(242,191,94,.3); border-radius: 16px; background: var(--h-panel); }
.sl-say.is-new { animation: sl-in .35s cubic-bezier(.25,1,.5,1); }
.sl-say-t { margin: 0; font: 600 .95rem/1.3 var(--h-sans); color: var(--h-gold-1); }
.sl-say-b { color: var(--h-text-2); line-height: 1.6; font-size: .92rem; }
.sl-say-b b { color: var(--h-text); }
.sl-say-b .sl-math { display: block; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font-variant-numeric: tabular-nums; color: var(--h-text); }
.sl-ask { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--unit); border-radius: 16px; background: linear-gradient(130deg, color-mix(in srgb, var(--unit) 12%, var(--h-panel)), var(--h-panel) 70%); animation: sl-in .35s cubic-bezier(.25,1,.5,1); }
.sl-ask[hidden] { display: none; }
.sl-ask-k { color: var(--unit); }
.sl-ask-q { margin: 0; color: var(--h-text); line-height: 1.5; }
.sl-part { display: grid; gap: 10px; }
.sl-part + .sl-part { padding-top: 12px; border-top: 1px solid var(--h-line); animation: sl-in .35s cubic-bezier(.25,1,.5,1); }
.sl-score { min-width: 118px; }
.sl-streak { font: 600 .74rem/1 var(--h-sans); color: var(--h-good); min-height: .74rem; }
.sl-choices { display: grid; gap: 8px; }
.sl-choices .xl-choice.is-right { border-color: var(--h-good); background: rgba(126,211,162,.1); }
.sl-choices .xl-choice:disabled { cursor: default; }
.sl-ask-fb { margin: 0; font-size: .9rem; line-height: 1.5; }
.sl-ask-fb:empty { display: none; }
.sl-ask-fb.is-right { padding: 10px 12px; border-radius: 12px; background: rgba(126,211,162,.08); color: var(--h-text); }
.sl-ask-fb.is-wrong { padding: 10px 12px; border-radius: 12px; background: rgba(240,132,110,.08); box-shadow: inset 3px 0 0 var(--h-bad); color: var(--h-text-2); }
.sl-extra:empty { display: none; }
.sl-nb { padding: 0; }
@keyframes sl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* sim-heat.js: the heating simulations (3.1, 3.3) */
.hs-open { fill: #0E0C0A; }
.hs-cold { fill: rgba(150,200,255,.25); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-chips .u3-chip { min-height: 40px; }

@media (max-width: 1000px) { .sl-grid { grid-template-columns: minmax(0, 1fr); } .sl-knobs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 760px) {
  .sl-bar { padding: 10px 12px; gap: 8px 12px; }
  .sl-speed { margin-left: 0; min-width: 0; width: 100%; grid-template-columns: auto 1fr auto; }
  .sl-speed input { width: 100%; }
  .sl-main { padding: 10px; }
  .sl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-charts { grid-template-columns: minmax(0, 1fr); }
  /* the 600-unit charts and the 540-unit scene draw at about half size on a phone, so their SVG text doubles */
  .sl-tick { font-size: 15px; } .sl-axis { font-size: 16px; } .sl-marklab, .sl-ptn, .sl-ptlab { font-size: 17px; }
  .sl .u3-small { font-size: 17px; } .sl .u3-label, .sl .u3-gold { font-size: 22px; } .sl .u3-big-svg { font-size: 30px; } .sl .x34-tk { font-size: 15px; } .sl .b22-note { font-size: 17px; }
  .sl-mode { min-height: 40px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .sl-say.is-new, .sl-ask { animation: none; } }