/* Shared reading safeguards for standalone articles and scoped Wonder fragments. */
:root { --reading-focus: #d9b585; }
:focus-visible { outline: 2px solid var(--reading-focus); outline-offset: 4px; }
main { min-width: 0; }
main p, main li, figcaption { overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: pretty; overflow-wrap: anywhere; }
/* Let enlarged labels reflow instead of escaping the narrow article column. */
.canvas-legend .legend-item { white-space: normal; overflow-wrap: anywhere; }
.formal-details summary { flex-wrap: wrap; }
.formal-details summary h2 { flex: 1 1 min(12ch, calc(100% - 2em)); min-width: 0; }
.formal-details .summary-hint { white-space: normal; overflow-wrap: anywhere; }
.symbol-gloss { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
.symbol-gloss :is(dt, dd) { min-width: 0; overflow-wrap: anywhere; }
.symbol-gloss dt { white-space: normal; }
button, input, select, summary { touch-action: manipulation; }
output { font-variant-numeric: tabular-nums; }
/* State changes keep their geometry: feedback does not move adjacent prose. */
button, summary, select, .contents a, .next-page a {
  transition: color var(--neblux-motion-feedback, 120ms) ease, background-color var(--neblux-motion-feedback, 120ms) ease, border-color var(--neblux-motion-feedback, 120ms) ease;
}
button:not(:disabled), summary { -webkit-tap-highlight-color: rgba(217, 181, 133,.14); }
button:not(:disabled):not([aria-disabled="true"]):active, summary:active, .contents a:active, .next-page a:active {
  background-color: color-mix(in srgb, var(--reading-focus) 18%, transparent);
  border-color: var(--reading-focus);
  transition-duration: 0s;
}
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
button[aria-disabled="true"] { opacity: .6; }
button[aria-pressed="true"], button[aria-selected="true"] { box-shadow: inset 0 -2px 0 currentColor; }
summary:focus-visible, .contents a:focus-visible { outline-offset: -2px; }
input[data-depth-range] {
  appearance: none; -webkit-appearance: none; background: transparent;
  cursor: pointer; min-height: 44px; padding: 0;
}
.control input[data-depth-range] { color: inherit; }
/* Reserve the same hit area before the progressive controller mounts. */
input[type="range"] { min-height: 44px; padding: 0; }
input[data-depth-range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--depth-range-color) 0 var(--depth-range-progress), #3c485c var(--depth-range-progress) 100%);
}
input[data-depth-range]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px;
  margin-top: -6px; border-radius: 50%; border: 2px solid var(--depth-range-color);
  background: var(--depth-range-color);
}
input[data-depth-range]::-moz-range-track { height: 4px; border-radius: 2px; background: #3c485c; }
input[data-depth-range]::-moz-range-progress { height: 4px; background: var(--depth-range-color); }
input[data-depth-range]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--depth-range-color); border-radius: 50%; background: var(--depth-range-color); }
input[data-depth-range]:is(:active,:focus-visible)::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--depth-range-color) 22%, transparent); }
input[data-depth-range]:is(:active,:focus-visible)::-moz-range-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--depth-range-color) 22%, transparent); }
input[data-depth-range]:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) {
  button:not(:disabled):not([aria-disabled="true"]):hover, summary:hover { border-color: var(--reading-focus); }
  .article a:hover, .contents a:hover, .next-page a:hover { color: var(--reading-focus); }
}
@media (forced-colors: active) {
  input[data-depth-range] { forced-color-adjust: auto; }
  input[data-depth-range]::-webkit-slider-runnable-track { background: CanvasText; }
  input[data-depth-range]::-webkit-slider-thumb { background: Highlight; border-color: Highlight; }
  input[data-depth-range]::-moz-range-track { background: CanvasText; }
  input[data-depth-range]::-moz-range-progress, input[data-depth-range]::-moz-range-thumb { background: Highlight; border-color: Highlight; }
}
.motion-toggle {
  display: block; margin: 12px 0 16px; padding: 8px 16px; min-height: 44px;
  color: var(--ink); background: transparent; border: 0;
  border-radius: 3px; font: inherit; cursor: pointer;
}
.static-fallback { margin: 20px 0; padding: 20px; border: 1px solid var(--line); }
.static-fallback svg { display: block; width: 100%; max-height: 300px; color: var(--ink); }
.static-fallback figcaption { font-size: 15px; line-height: 1.8; padding: 16px 0 0; }
.lab-surface:has(noscript .static-fallback) :is(.canvas-wrap, .controls, .regime-strip, .token-strip, canvas) { display: none; }
.lab-surface:has(noscript .static-fallback) > :is(.canvas-legend, .control-row, .result-line) { display: none; }
.lab-surface:has(noscript .static-fallback) > :is(.interaction-layout, .canvas-grid, .how-to, .strip-hint) { display: none; }
.instrument:has(noscript .fallback) .legend { display: none; }

@media (max-width: 760px) {
  /* Every parameter remains discoverable without a second horizontal gesture. */
  .page-shell .controls { display: grid; grid-template-columns: 1fr; overflow: visible; gap: 16px; }
  .page-shell .control { min-width: 0; width: 100%; }
  .page-shell input[type="range"] { min-height: 44px; }
  .page-shell .token-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7ch), 1fr)); }
  .static-fallback { padding: 14px; }
  body.has-dock h1 { font-size: clamp(34px, 10.5vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}
@media print {
  :root { color-scheme: light; --ink: #111; --muted: #333; --bg: #fff; --panel: #fff; --panel-2: #fff; --line: #999; --gold: #463411; }
  html, body { background: #fff !important; color: #111 !important; }
  main, .page-shell { width: 100%; max-width: none; padding: 0; }
  main :is(p, li, dt, dd, h1, h2, h3, span, small, a, figcaption, summary) { color: #111 !important; text-shadow: none; }
  .site-header, .page-footer, .graph-link, .motion-toggle, .dock-extras, .dock-bar, .term-pop, .sym-tip, .series-directory, .skip, .skip-link { display: none !important; }
  details::details-content { content-visibility: visible; }
  .reading-layout { display: block; }
  .article section { break-inside: auto; }
  h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .equation, .comparison, .static-fallback { break-inside: avoid; }
  .equation { background: #fff; }
  .formula-display, .formal-details, .formal-details summary { background: #fff !important; color: #111 !important; }
  .lab-surface :is(.canvas-wrap, .controls, .control-row, .regime-strip, .token-strip, .result-line) { display: none !important; }
}