/* /css/widgets.css: the lab frame, toolbar, controls, readouts, data tables, legends (§4.4, §5.0). */

figure.lab {
  position: relative;
  margin: var(--s-7) 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
}
/* A full-bleed lab (the home hero, the capstone simulator): figure.full's bleed margins must win over the lab
   card's margin, and a card edge at the viewport edge has no rounded side corners. */
figure.lab.full {
  margin-left: calc(-1 * var(--bleed-l));
  margin-right: calc(-1 * var(--bleed-r));
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
figure.lab.full .lab-stage { border-radius: 0; }
figure.lab > figcaption {
  padding: var(--s-3) var(--s-5) 0;
  margin: 0;
}
figure.lab > figcaption strong { color: var(--ink); font-weight: 700; }
figure.lab > details.long-desc { padding: 0 var(--s-5) var(--s-4); margin-top: var(--s-2); }
.lab-stage {
  position: relative;
  padding: var(--s-4) var(--s-5) var(--s-3);
  min-height: 120px;
  border-radius: var(--r-l) var(--r-l) 0 0;
  font-family: var(--font-sans);
  font-size: .85rem;
}
.lab-stage > .fallback {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: .85rem;
}
.lab-stage > svg.plate-svg { max-width: min(100%, 560px); }
figure.lab.is-mounting .lab-stage::after {
  content: "Loading the lab…";
  position: absolute;
  right: var(--s-4);
  top: var(--s-3);
  font-size: .72rem;
  color: var(--ink-muted);
}
figure.lab.mount-failed .lab-stage::after {
  content: "This lab couldn’t start. The picture and description still tell the story.";
  display: block;
  margin-top: var(--s-3);
  color: var(--c-bad);
  font-size: .8rem;
}
figure.lab.is-locked .lab-stage { filter: grayscale(.5); }
@media (max-width: 699px) {
  .lab-stage { padding: var(--s-3); }
  figure.lab > figcaption, figure.lab > details.long-desc { padding-left: var(--s-3); padding-right: var(--s-3); }
}

/* Toolbar */
.lab-toolbar-wrap { margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-5)) var(--s-4); border-bottom: 1px solid var(--rule); }
@media (max-width: 699px) { .lab-toolbar-wrap { margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-3)) var(--s-3); } }
.lab-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5);
  min-height: 48px;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  border-radius: var(--r-l) var(--r-l) 0 0;
}
.lab-title {
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lab-chip-slot { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; }
.lab-chip-slot:empty { display: none; }
.lab-tools { margin-left: auto; display: flex; gap: var(--s-1); }
.lab-tools .btn { min-height: 36px; padding: .35em .7em; font-size: .76rem; }
.lab-describe { padding: var(--s-3) var(--s-5) var(--s-4); background: var(--surface-2); font-size: .82rem; }
.lab-describe-text { margin-bottom: var(--s-3); line-height: 1.55; }
.lab-describe-fold > summary { cursor: pointer; font-family: var(--font-sans); font-weight: 600; color: var(--ink-muted); min-height: 24px; }
.lab-describe-fold[open] > summary { margin-bottom: var(--s-2); }
.table-scroll { position: relative; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; font-size: .78rem; background: var(--surface); }
.data-table th[scope="row"] { font-weight: 600; }
.data-table td, .data-table th { white-space: nowrap; }

/* Controls row */
.lab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  margin-top: var(--s-3);
}

/* Slider: a native range, custom-styled, with a filled track (--fill set by ui.slider) */
.ui-slider {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) 4.2em;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  min-width: min(100%, 300px);
  flex: 1 1 280px;
}
.ui-label {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}
.ui-value {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}
.ui-range {
  --fill: 50%;
  --range-accent: var(--c-lab);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 0;
  cursor: pointer;
  touch-action: pan-y;
}
.ui-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--range-accent) 0 var(--fill), var(--rule) var(--fill) 100%);
}
.ui-range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--rule); }
.ui-range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--range-accent); }
.ui-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--range-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform 120ms var(--ease);
}
.ui-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--range-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ui-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ui-range:focus-visible { outline: none; }
.ui-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.ui-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.ui-slider.rkt .ui-range { --range-accent: var(--c-rocket); }

/* Segmented toggle (radio group) */
.ui-toggle-wrap { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ui-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-family: var(--font-sans);
}
.ui-toggle-option {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 .9em;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.ui-toggle-option:hover { color: var(--ink); }
.ui-toggle-input:checked + .ui-toggle-option { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--ink-muted), var(--shadow); }
.ui-toggle-input:focus-visible + .ui-toggle-option { outline: 3px solid var(--focus); outline-offset: 2px; }
.ui-toggle-input:disabled + .ui-toggle-option { opacity: .55; cursor: not-allowed; }

/* Readouts */
.readouts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.readout {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  gap: .4em;
  font-family: var(--font-sans);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.readout-label { color: var(--ink-muted); font-size: .9em; }
.readout-value { font-weight: 650; color: var(--ink); min-width: 3ch; }
.readout--lab .readout-value { color: var(--c-lab); }
.readout--rkt .readout-value { color: var(--c-rocket); }
.readout--light .readout-value { color: var(--c-light-text); }
.readout--inv .readout-value, .readout-inv { color: var(--c-inv); }
.readout--inv { padding: .1em .55em; border: 1px solid color-mix(in srgb, var(--c-inv) 40%, var(--rule)); border-radius: var(--r-s); background: var(--tint-inv); }
/* On a panel (--surface-2) the tint blends to 4.27:1 behind teal text; a plain --surface chip keeps it above 4.5:1. */
.stx-panel .readout--inv { background: var(--surface); }
.readout-inv { font-weight: 700; }

/* Frame names in small caps: LAB, ROCKET (§4.2) */
.frame-name { font-family: var(--font-sans); font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; font-weight: 700; }
.frame-name.lab { color: var(--c-lab); }
.frame-name.rkt { color: var(--c-rocket); }

/* Legends */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-family: var(--font-sans); font-size: .76rem; color: var(--ink-muted); margin-top: var(--s-3); }
.legend-item { display: inline-flex; align-items: center; gap: .45em; }
.legend-swatch { width: 22px; height: 0; border-top: 2.5px solid var(--ink); }
.legend-swatch.lab { border-top-color: var(--c-lab); }
.legend-swatch.rkt { border-top: 2.5px dashed var(--c-rocket); }
.legend-swatch.light { border-top-color: var(--c-light); }
.legend-swatch.inv { border-top: 4px double var(--c-inv); }

/* Widget surfaces */
.widget-svg, .widget-canvas { display: block; width: 100%; height: auto; touch-action: pan-y; }
.widget-svg.compact, .widget-canvas.compact { max-width: 520px; margin-inline: auto; }
.widget-svg.square, .widget-canvas.square { aspect-ratio: 1; max-width: 560px; margin: 0 auto; }
.widget-message { font-family: var(--font-sans); font-size: .82rem; color: var(--ink-muted); margin-top: var(--s-2); }
.widget-message.is-bad { color: var(--c-bad); }
.widget-message.is-good { color: var(--c-ok); }
[data-draggable], .draggable { cursor: grab; touch-action: none; }
[data-draggable]:active, .draggable:active { cursor: grabbing; }

/* Hidden sandbox frame (runner-client.js) */
.sandbox-frame { display: none; }

/* Widgets mounted inside an exercise stage (diagram exercises) */
.ex-stage > .lab-toolbar-wrap { margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-3)) var(--s-3); }
.ex-stage > .lab-toolbar-wrap .lab-toolbar { border-radius: var(--r-m) var(--r-m) 0 0; padding-left: var(--s-4); }

/* ==========================================================================================================
   Shared widgets (F2): moved here from constructable stylesheets in the widget modules, so widget styles apply
   before first paint (no flash or layout shift on mount) and stay out of the JS budget. Scoped to .stx-*.
   ========================================================================================================== */

/* /js/core/diagram.js (DIAGRAM_CSS) */
.stx-ink{--k:var(--ink)}.stx-lab{--k:var(--c-lab)}.stx-rkt{--k:var(--c-rocket)}.stx-light{--k:var(--c-light)}
.stx-inv{--k:var(--c-inv)}.stx-you{--k:var(--c-you)}.stx-bad{--k:var(--c-bad)}
.stx-diagram{position:relative;width:100%;min-width:0}
.stx-svg{display:block;width:100%;height:auto;background:var(--surface);border-radius:var(--r-m);-webkit-user-select:none;user-select:none;font-family:var(--font-sans);overflow:hidden;-webkit-tap-highlight-color:transparent}
.stx-bg{fill:transparent}
.stx-grid-minor{stroke:var(--grid-minor);stroke-width:.75}
.stx-grid-major{stroke:var(--rule);stroke-width:1}
.stx-g-rkt{stroke:var(--c-rocket);stroke-opacity:.13}.stx-grid-major.stx-g-rkt{stroke-opacity:.3}
.stx-tint-time{fill:var(--c-timelike)}.stx-tint-space{fill:var(--c-spacelike)}
.stx-tint-time.is-hl{fill:var(--c-light);fill-opacity:.16}.stx-tint-space.is-hl{fill:var(--ink-muted);fill-opacity:.14}.is-dim{fill-opacity:.5}
.stx-region-name{font:600 11px var(--font-sans);letter-spacing:.12em;fill:var(--ink-muted)}
.stx-axis,.stx-axis-head,.stx-tick{stroke:var(--k);fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.stx-tick{stroke-width:1.25}
.stx-axis.stx-rkt{stroke-dasharray:6 4}
/* rocket now-lines dotted, unlike the dashed x′/t′ axes */
.stx-now.stx-rkt{stroke-dasharray:1.5 3.5;stroke-linecap:round;stroke-width:1.6}
.stx-num,.stx-axis-name,.stx-axis-unit,.stx-now-label,.stx-wl-label,.stx-ptick-label,.stx-ev-label{fill:var(--k);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.stx-num,.stx-now-label{font:11px var(--font-sans);font-variant-numeric:tabular-nums}
.stx-axis-name{font:italic 16px var(--font-serif);stroke-width:4px}
.stx-axis-unit{font:11px var(--font-sans);opacity:.85}
.stx-inv-outer{fill:none;stroke:var(--c-inv);stroke-width:2;stroke-linejoin:round;opacity:.85}.stx-inv-outer.is-space{opacity:.4}
.stx-inv-core{fill:none;stroke:var(--surface);stroke-width:.75}
.stx-trail{fill:none;stroke:var(--c-inv);stroke-width:1;stroke-opacity:.75;stroke-dasharray:1 2.5;stroke-linecap:round}
.stx-cone{stroke:var(--c-light);stroke-width:1.75;stroke-linecap:round}.stx-cone.is-past{stroke-opacity:.5}
.stx-light-head{fill:none;stroke:var(--c-light);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.stx-wl{stroke:var(--k);stroke-width:2.5;stroke-linecap:round;fill:none}
.stx-wl.stx-rkt{stroke-dasharray:6 4}.stx-wl.stx-light{stroke-width:1.75}
.stx-wl.is-bad{stroke:var(--c-bad);stroke-dasharray:2 5;stroke-width:3}
.stx-ptick{stroke:var(--k);stroke-width:1.6;stroke-linecap:round}
.stx-ptick-label{font:10px var(--font-sans);font-variant-numeric:tabular-nums}
.stx-wl-label{font:600 12px var(--font-sans);letter-spacing:.04em;stroke-width:4px}
.stx-wl-label.stx-light{fill:var(--c-light-text)}
.stx-now{stroke:var(--k);stroke-width:1.25;fill:none}.stx-now.stx-lab{stroke-dasharray:3 4;stroke-opacity:.8}
.stx-ev{color:var(--k);cursor:default;outline:none}
.stx-ev.is-draggable{cursor:grab;touch-action:none}.stx-ev.is-dragging{cursor:grabbing}
.stx-ev-hit{fill:transparent}.stx-ev:not(.is-draggable) .stx-ev-hit{r:12px}
.stx-ev-dot{fill:currentColor;stroke:var(--surface);stroke-width:2;paint-order:stroke;transition:r var(--t-ui) var(--ease)}
.stx-ev-spark{stroke:currentColor;stroke-width:1.4;stroke-linecap:round;opacity:.55;fill:none}
.stx-ev-ring{fill:none;stroke:currentColor;stroke-width:1.25;opacity:0;transition:opacity var(--t-ui) var(--ease)}
.stx-ev-ring.is-dashed{stroke-dasharray:3 2.5}
.stx-ev.is-draggable .stx-ev-ring{opacity:.45}
.stx-ev.is-draggable:hover .stx-ev-ring,.stx-ev.is-dragging .stx-ev-ring,.stx-ev.is-grabbed .stx-ev-ring,.stx-ev.is-selected .stx-ev-ring{opacity:1}
.stx-ev.is-dragging .stx-ev-dot,.stx-ev.is-grabbed .stx-ev-dot{r:6.5px}
.stx-ev-focus{fill:none;stroke:var(--focus);stroke-width:3;opacity:0}.stx-ev:focus-visible .stx-ev-focus{opacity:1}
.stx-ev.is-selected .stx-ev-dot{stroke-width:0}.stx-ev.is-selected .stx-ev-ring{stroke-width:2}
.stx-ev.is-hot .stx-ev-ring{opacity:1;stroke-width:2.5}.stx-ev.is-vertex .stx-ev-dot{r:4px}
.stx-ev.is-new .stx-ev-spark{animation:stx-burst .6s var(--ease)}
@keyframes stx-burst{0%{transform:scale(.3);opacity:1}60%{transform:scale(1.5);opacity:.9}100%{transform:scale(1);opacity:.55}}
.stx-ev-label{font:italic 15px var(--font-serif);stroke-width:4px;pointer-events:none}.stx-ev-label.stx-light{fill:var(--c-light-text)}
.stx-tag{pointer-events:none}
.stx-tag-bg{fill:var(--surface);stroke:var(--rule);filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}
.stx-tag-text{font:11.5px var(--font-sans);font-variant-numeric:tabular-nums;fill:var(--k,var(--ink))}
@media (prefers-reduced-motion:reduce){.stx-ev.is-new .stx-ev-spark{animation:none}.stx-ev-dot,.stx-ev-ring{transition:none}}

/* /js/core/diagram.js (SHELL_CSS) */
.stx-widget{container-type:inline-size;display:flex;flex-direction:column;gap:var(--s-3);font-family:var(--font-sans);color:var(--ink);min-width:0}
.stx-widget svg{overflow:hidden}
.stx-controls{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center}
.stx-widget .ui-slider{grid-template-columns:auto minmax(110px,1fr) auto}.stx-widget .lab-controls{margin-top:0}
@container (max-width:420px){.stx-widget .ui-slider{grid-template-columns:minmax(0,1fr) auto;min-width:0}.stx-widget .ui-slider .ui-label{grid-column:1/-1}}
.stx-readouts,.stx-btnrow{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center}
.stx-note,.stx-msg{font-size:.8rem;margin:0;line-height:1.45}.stx-note{color:var(--ink-muted)}.stx-msg:empty{display:none}
.stx-msg.is-bad{color:var(--c-bad)}.stx-msg.is-ok{color:var(--c-ok)}
.stx-checks{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);font-size:.75rem;align-items:center}
.stx-checks label{display:inline-flex;gap:6px;align-items:center;min-height:24px;cursor:pointer}
.stx-checks input{accent-color:var(--c-lab);width:16px;height:16px;margin:0}
.stx-small-caps,.stx-panel h4,.stx-panel-title{font:600 .68rem var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.stx-panel{background:var(--surface-2);border-radius:var(--r-m);padding:var(--s-3);font-size:.8rem;line-height:1.5}.stx-panel :is(h4,.stx-panel-title){margin:0 0 4px}
.stx-table-wrap{overflow:auto;max-height:15rem;border:1px solid var(--rule);border-radius:var(--r-s)}
.stx-table-wrap:has(.is-compact){width:fit-content;max-width:100%}
.stx-table{border-collapse:collapse;width:100%;font-size:.75rem;font-variant-numeric:tabular-nums}.stx-table.is-compact{width:auto;min-width:min(100%,26rem)}
.stx-table th,.stx-table td{padding:3px 8px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
.stx-table th{font-weight:600;color:var(--ink-muted)}.stx-table thead th{background:var(--surface-2);position:sticky;top:0}
.stx-table tbody th{color:var(--ink);font:italic 400 1em var(--font-serif)}
.stx-table th:first-child,.stx-table td:first-child{text-align:left}.stx-table tr.is-sel td{background:var(--surface-2)}
.c-lab,.stx-lab-c{color:var(--c-lab)}.c-rkt,.stx-rkt-c{color:var(--c-rocket)}.c-inv,.stx-inv-c{color:var(--c-inv)}.stx-bad-c{color:var(--c-bad)}.stx-ok-c{color:var(--c-ok)}
.stx-cls{display:inline-block;font-size:.56rem;font-weight:700;letter-spacing:.06em;padding:0 5px;border-radius:999px;border:1px solid currentColor}
.stx-cls.timelike,.stx-cls.lightlike{color:var(--c-light-text)}.stx-cls.spacelike{color:var(--ink-muted)}.stx-cls.lightlike{border-style:dashed}
.stx-kbd-help dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0}.stx-kbd-help dt{text-align:right}.stx-kbd-help dd{margin:0;color:var(--ink-muted)}
.stx-num-in{display:inline-flex;align-items:center;gap:6px;font-size:.8rem}
.stx-num-in input{width:5.5em;font:inherit;font-variant-numeric:tabular-nums;padding:4px 6px;border:1px solid var(--rule);border-radius:var(--r-s);background:var(--surface);color:var(--ink);min-height:32px}
.stx-var{font-family:var(--font-serif);font-style:italic;font-size:1.05em}
.stx-canvas-wrap{position:relative;width:100%;min-width:0;overflow:hidden;border-radius:var(--r-m)}
.stx-canvas-wrap canvas{display:block;border-radius:var(--r-m);background:var(--surface)}
.stx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* /js/widgets/spacetime-diagram.js (CSS) */
.stx-sd-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@container (min-width:720px){.stx-sd-main.has-side{grid-template-columns:minmax(0,1fr) minmax(14rem,17rem);align-items:start}}
.stx-sd-stage{position:relative;min-width:0}
.stx-frame-badge{position:absolute;left:10px;top:8px;font:600 .62rem var(--font-sans);letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--surface);border:1px solid currentColor;pointer-events:none;opacity:.92}
.stx-frame-badge.is-lab{color:var(--c-lab)}.stx-frame-badge.is-rocket{color:var(--c-rocket);border-style:dashed}
.stx-frame-badge.is-inline{position:static;display:inline-block;margin:0 0 var(--s-2)}
.stx-sd-side{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.stx-readout{margin:var(--s-2) 0 0;font:.82rem var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.stx-nudge{display:inline-flex;gap:var(--s-1)}
.stx-nudge .btn{min-width:44px;min-height:44px;padding:0;font-size:1.15rem}
.stx-pair dl{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;margin:0 0 6px;font-variant-numeric:tabular-nums}
.stx-pair dt{color:var(--ink-muted)}.stx-pair dd{margin:0;text-align:right}
.stx-verdict{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--rule)}
.stx-verdict b{display:block}

/* /js/widgets/two-frame.js (CSS) */
.stx-tf-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);align-items:center}
@container (min-width:640px){.stx-tf-panels{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
.stx-tf-panel{display:flex;flex-direction:column;gap:6px;min-width:0}
.stx-tf-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.stx-tf-head.is-lab{color:var(--c-lab)}.stx-tf-head.is-rkt{color:var(--c-rocket)}
.stx-tf-head small{font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink-muted);font-size:.72rem}
.stx-tf-badge{justify-self:center;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;
  border:2px solid var(--c-inv);outline:1px solid var(--c-inv);outline-offset:2px;border-radius:999px;padding:6px 14px;
  color:var(--c-inv);background:var(--surface);font-variant-numeric:tabular-nums;text-align:center;line-height:1.2}
@container (min-width:640px){.stx-tf-badge{flex-direction:column;border-radius:var(--r-l);padding:10px 8px;width:5.6rem;gap:2px}}
.stx-tf-badge .k{font:italic 1rem var(--font-serif)}
.stx-tf-badge b{font-size:1.05rem}
.stx-tf-badge .w{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}

/* /js/widgets/worldline-trip.js (CSS) */
.stx-wt-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@container (min-width:720px){.stx-wt-main{grid-template-columns:minmax(0,1fr) minmax(14rem,17rem);align-items:start}}
.stx-wt-side{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.stx-wt-ages{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.stx-wt-age{background:var(--surface-2);border-radius:var(--r-m);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.stx-wt-age span{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.stx-wt-age b{font:600 1.5rem var(--font-sans);font-variant-numeric:tabular-nums;color:var(--c-inv);line-height:1.1}
.stx-wt-age b::after{content:" ≡";font-size:.9rem}
.stx-wt-age.is-diff{grid-column:1 / -1;flex-direction:row;align-items:baseline;justify-content:space-between}
.stx-wt-age.is-diff b{font-size:1.15rem;color:var(--ink)}.stx-wt-age.is-diff b::after{content:""}
.stx-wt-ages.is-invalid b{color:var(--ink-muted);opacity:.45}
.stx-wt-board ol{margin:4px 0 0;padding-left:1.4em;font-variant-numeric:tabular-nums}
.stx-wt-cards{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline}
.stx-wt-cards b{font:600 1.1rem var(--font-sans);font-variant-numeric:tabular-nums;color:var(--c-light-text)}
.stx-table td.is-bad{color:var(--c-bad);font-weight:600}

/* /js/widgets/light-clock.js (CSS) */
.stx-lc-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@container (min-width:700px){.stx-lc-panels{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);column-gap:var(--s-5)}
  .stx-lc-panel+.stx-lc-panel{border-left:1px solid var(--rule);padding-left:var(--s-5)}}
.stx-lc-panel{display:flex;flex-direction:column;gap:6px;min-width:0}
.stx-lc-head{display:flex;justify-content:space-between;gap:8px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.stx-lc-head.is-lab{color:var(--c-lab)}.stx-lc-head.is-rkt{color:var(--c-rocket)}
.stx-lc-head small{font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink-muted);font-size:.72rem}
.stx-lc-count{font-size:.78rem;font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--ink-muted)}
.stx-lc-count b{color:var(--ink);font-weight:600}
.stx-lc-break{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;border:1px dashed var(--c-rocket);border-radius:var(--r-m);padding:var(--s-2) var(--s-3)}
.stx-lc-break fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:.78rem}
.stx-lc-break legend{float:left;margin-right:8px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--c-rocket)}
.stx-lc-break label{display:inline-flex;gap:6px;align-items:center;min-height:24px;cursor:pointer}
.stx-lc-break input{accent-color:var(--c-rocket);margin:0}
.stx-lc-dash{font:700 .78rem var(--font-sans);letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-s);border:1px solid currentColor}
.stx-lc-dash.is-ok{color:var(--c-ok)}.stx-lc-dash.is-bad{color:var(--c-bad);background:var(--surface)}
label.stx-checks{flex-wrap:nowrap;align-items:flex-start;gap:var(--s-2)}label.stx-checks input{flex:none;margin-top:.15em}
.stx-lc-dashwrap{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}.stx-lc-dash-name{font:600 .78rem var(--font-sans);color:var(--ink-muted)}

/* /js/widgets/clock-lattice.js (CSS) */
.stx-cl-read{font-size:.82rem;font-variant-numeric:tabular-nums;min-height:1.4em;margin:0}
.stx-cl-read b{font-weight:600}

/* /js/widgets/muon-shower.js (CSS) */
.stx-mu-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@container (min-width:720px){.stx-mu-main{grid-template-columns:minmax(0,1fr) minmax(14rem,17rem);align-items:start}.stx-mu-ctlcell{grid-column:1/-1;order:1}}
.stx-mu-side{display:flex;flex-direction:column;gap:var(--s-3)}
.stx-mu-colcell,.stx-mu-ctlcell{display:flex;flex-direction:column;gap:6px;min-width:0}
.stx-mu-legend{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:.72rem;line-height:1.4;color:var(--ink-muted);align-items:center;padding:0 2px}
.stx-mu-key{display:inline-flex;align-items:center;gap:5px}
.stx-mu-key-muon{flex:none;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:2px solid var(--c-rocket);border-left-color:color-mix(in srgb,var(--c-rocket) 35%,transparent);background:var(--surface)}
.stx-mu-key-x{flex:none;font:700 .95rem/1 var(--font-sans);color:var(--ink-muted)}
.stx-mu-key-hit{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c-light)}
.stx-mu-key-gauge{flex:none;width:5px;height:13px;border:1px dashed;background:linear-gradient(0deg,currentColor 30%,#0000 0)}
.stx-mu-slow{flex-basis:100%;font-style:italic}
.stx-mu-slow:empty{display:none}
.stx-mu-stat{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-variant-numeric:tabular-nums;align-items:baseline}
.stx-mu-stat b{font:600 1.05rem var(--font-sans);text-align:right}
.stx-mu-big{font:600 1.6rem var(--font-sans);font-variant-numeric:tabular-nums;line-height:1.1}
.stx-mu-nature{border-left:4px solid var(--c-light);background:var(--surface-2);border-radius:var(--r-s);padding:8px 10px;font-size:.78rem;line-height:1.45}
.stx-mu-nature b{color:var(--c-light-text)}

/* /js/widgets/surveyors-map.js (CSS) */
.stx-map-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
@container (min-width:720px){.stx-map-main{grid-template-columns:minmax(0,1fr) minmax(15rem,18rem);align-items:start}}
.stx-map-svg{display:block;width:100%;height:auto;overflow:hidden;background:var(--surface);border-radius:var(--r-m);-webkit-user-select:none;user-select:none;font-family:var(--font-sans)}
.stx-map-frame{fill:none;stroke:var(--rule);stroke-width:1}
.stx-map-frame.is-inner{stroke-width:.75;stroke-dasharray:1 3}
.stx-map-road{fill:none;stroke:var(--grid-minor);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.stx-map-road-edge{fill:none;stroke:var(--rule);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.stx-map-dgrid{stroke:var(--c-lab);stroke-opacity:.18;stroke-width:1}
.stx-map-dgrid.is-axis{stroke-opacity:.9;stroke-width:1.5}
.stx-map-ngrid{stroke:var(--c-rocket);stroke-opacity:.3;stroke-width:1;stroke-dasharray:6 4}
.stx-map-ngrid.is-axis{stroke-opacity:.95;stroke-width:1.5}
.stx-map-head{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stx-map-head.is-day{stroke:var(--c-lab)}.stx-map-head.is-night{stroke:var(--c-rocket)}
.stx-map-axlabel{font:600 12px var(--font-sans);letter-spacing:.08em;paint-order:stroke;stroke:var(--surface);stroke-width:4px}
.stx-map-axlabel.is-day{fill:var(--c-lab)}.stx-map-axlabel.is-night{fill:var(--c-rocket)}
.stx-map-rose{fill:none;stroke-width:1.2}
.stx-map-rose.is-day{stroke:var(--c-lab)}.stx-map-rose.is-night{stroke:var(--c-rocket)}
.stx-map-rose-fill.is-day{fill:var(--c-lab)}.stx-map-rose-fill.is-night{fill:var(--c-rocket)}
.stx-map-rose-text{font:600 10px var(--font-sans);letter-spacing:.1em}
.stx-map-rose-text.is-day{fill:var(--c-lab)}.stx-map-rose-text.is-night{fill:var(--c-rocket)}
.stx-map-legend{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-bottom:var(--s-2);font:600 .7rem var(--font-sans);letter-spacing:.04em}
.stx-map-legend[hidden]{display:none}
.stx-map-legend-item{display:inline-flex;align-items:center;gap:6px}
.stx-map-legend-rose{flex:none;overflow:visible}
.stx-map-lm{cursor:grab;outline:none;color:var(--ink)}
.stx-map-lm.is-fixed{cursor:default}
.stx-map-lm.is-dragging{cursor:grabbing}
.stx-map-lm .ink{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.stx-map-lm .solid{fill:currentColor}
.stx-map-lm .paper{fill:var(--surface);stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.stx-map-lm .hit{fill:transparent}
.stx-map-lm .focus{fill:none;stroke:var(--focus);stroke-width:3;opacity:0}
.stx-map-lm:focus-visible .focus{opacity:1}
.stx-map-lm.is-active{color:var(--c-inv)}
.stx-map-lm-label{font:italic 14px var(--font-serif);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.stx-map-dist{stroke:var(--c-inv);stroke-width:2;fill:none}
.stx-map-dist-core{stroke:var(--surface);stroke-width:.75;fill:none}
.stx-map-dist-label{font:600 12px var(--font-sans);fill:var(--c-inv);paint-order:stroke;stroke:var(--surface);stroke-width:4px;font-variant-numeric:tabular-nums}
.stx-map-scale{stroke:var(--ink-muted);stroke-width:1.2;fill:none}
.stx-map-scale-text{font:10px var(--font-sans);fill:var(--ink-muted)}
.stx-map-read{display:grid;grid-template-columns:auto 1fr 1fr;gap:3px 10px;font-variant-numeric:tabular-nums;align-items:baseline;font-size:.8rem}
.stx-map-read .hd{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.stx-map-read .num{text-align:right}
.stx-map-dist-row{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:2px}
.stx-map-dist-row b{font:600 1.35rem var(--font-sans);font-variant-numeric:tabular-nums}
.stx-map-factor{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.stx-map-factor input{width:8.5em}

/* /js/widgets/hero-boost.js (CSS) */
.stx-w-hero-boost{gap:var(--s-2)}
.stx-w-hero-boost .lab-toolbar-wrap{order:3;margin:0;border:0}
.stx-w-hero-boost .lab-toolbar{background:transparent;padding:0;min-height:0;justify-content:flex-end}
.stx-w-hero-boost .lab-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stx-hero-stage{position:relative;width:100%;height:clamp(340px,64vh,640px);touch-action:pan-y;cursor:ew-resize;overflow:hidden;
  border-radius:var(--r-l);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.stx-hero-stage canvas{position:absolute;inset:0;display:block}
.stx-hero-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.stx-hero-region{font:600 11px var(--font-sans);letter-spacing:.22em;fill:var(--ink-muted);opacity:.75}
.stx-hero-now{font:italic 15px var(--font-serif);fill:var(--c-light-text);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.stx-hero-axis{font:italic 14px var(--font-serif);fill:var(--ink-muted)}
.stx-hero-read{font:600 12px var(--font-sans);fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.stx-hero-read .r{fill:var(--c-rocket)}
.stx-hero-hint{font:12px var(--font-sans);fill:var(--ink-muted);paint-order:stroke;stroke:var(--bg);stroke-width:4px;transition:opacity .6s var(--ease)}
.stx-hero-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.stx-hero-bar .ui-slider{flex:1 1 320px}
.stx-w-hero-boost .lab-tools{flex-wrap:nowrap}
.stx-w-hero-boost .lab-tools .btn{white-space:nowrap}
/* Action buttons inside widget control rows read as buttons, not bold text (docs/requests: events-and-clocks 7, twins 6.4).
   Toolbar ghost buttons (.lab-tools) keep their quiet look. */
.stx-controls .btn.ghost,.stx-btnrow .btn.ghost{background:var(--surface);border-color:var(--rule)}
.stx-controls .btn.ghost:hover,.stx-btnrow .btn.ghost:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--rule));background:color-mix(in srgb,var(--surface-2) 60%,var(--surface))}
/* Phones: sliders stack their label above the track, and segmented toggles may wrap, so nothing pushes a 320px
   column sideways (WCAG 1.4.10). Widgets inside .stx-widget already do this with a container query. */
@media (max-width:479px){.ui-slider{grid-template-columns:minmax(0,1fr) auto;min-width:0}.ui-slider .ui-label{grid-column:1/-1;white-space:normal}.ui-toggle-wrap,.ui-toggle{max-width:100%;flex-wrap:wrap}}
/* Reserve a lab's live height before it mounts (no layout shift): set --lab-reserve on the figure in chapter CSS,
   e.g. [data-chapter="x"] #lab-x-1 { --lab-reserve: 520px }. main.js marks the figure .is-mounted / .mount-failed. */
@media (scripting:enabled){figure.lab:not(.is-mounted):not(.mount-failed)>.lab-stage{min-height:var(--lab-reserve,0px)}}