/* Scoped local explainer styles. Full SVG remains present in static, paused,
   reduced-motion and printed views. Author labels for the narrowest viewport;
   drawings scroll locally on mobile to keep the supplied labels readable. */
.technical-visual {
  color: #111;
  background: #fff;
  width: 100%;
  min-width: 0;
  margin-block: 2.5rem;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.technical-visual *, .technical-visual *::before, .technical-visual *::after { box-sizing: border-box; }
.technical-visual [hidden] { display: none !important; }
/* Additional technical source types can be long. Keep their bibliography rows
   within the page while the scientific drawing scrolls in its own region. */
.sources li > div { min-width: 0; }
.sources li p { overflow-wrap: anywhere; }
.technical-visual-kind { color: #555; font-size: .875rem; }
.technical-visual > h2 { margin-block: .25rem 1rem; }
.technical-visual figure { margin: 1.5rem 0; }
.technical-visual-figure { width: 100%; max-width: 100%; overflow-x: auto; background: #fff; padding-block: 1rem; }
.technical-visual-figure > svg { display: block; width: 100%; min-width: 600px; height: auto; overflow: hidden; color: #111; }
.technical-visual-figure text { font-family: Arial, Helvetica, sans-serif; }
.technical-visual figcaption { font-size: 1rem; line-height: 1.6; }
.technical-visual figcaption ul { padding-inline-start: 1.5rem; }
.technical-visual figcaption li + li { margin-block-start: .65rem; }
.technical-visual details { margin-block: 1.25rem; }
.technical-visual summary { cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.technical-visual a { color: #111; text-decoration: underline; text-underline-offset: .2em; }
.technical-visual-timing, .technical-visual-scroll-hint, .technical-visual [data-visual-reduced] { font-size: .9375rem; color: #444; }
.technical-visual-scroll-hint { display: none; }
@media (max-width: 799px) { .technical-visual-scroll-hint { display: block; } }
.technical-visual-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.technical-visual-controls button {
  min-width: 4.5rem;
  min-height: 44px;
  padding: .55rem .85rem;
  border: 1px solid #111;
  border-radius: 0;
  font: inherit;
  line-height: 1.3;
  color: #111;
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
.technical-visual-controls button:hover:not(:disabled) { color: #fff; background: #111; }
.technical-visual-controls button:disabled { color: #666; border-color: #aaa; background: #eee; cursor: default; }
.technical-visual :is(button, a, summary, [tabindex]):focus-visible { outline: 3px solid #111; outline-offset: 4px; }
.technical-visual-steps { padding-inline-start: 1.75rem; }
.technical-visual-steps > li { padding: .5rem .75rem; border-inline-start: 3px solid transparent; }
.technical-visual-steps > li[aria-current="step"] { border-color: #111; background: #f0f0f0; }
.technical-visual-steps h3 { font-size: 1rem; margin-block: .25rem; }
.technical-visual-steps p { margin-block: .25rem; }
/* Highlight without hiding or dimming evidence and without moving geometry. */
.technical-visual g[data-evidence].is-active text { text-decoration: underline; text-decoration-thickness: 1.5px; }
.technical-visual g[data-evidence].is-active { filter: drop-shadow(0 0 .5px #555); }
.technical-visual :is(.flow, .tech-flow) { animation: none; }
/* Source drawings remain stationary. The transport is a guided reading tour,
   not an independent CSS animation pretending to model the mechanism. */
.technical-visual.is-playing g[data-evidence].is-active :is(.flow, .tech-flow) {
  animation: none;
}
@keyframes technical-visual-flow { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
/* Preserve the source viewBox ratio. A height cap shrinks tall mechanisms and
   their labels inside a wide SVG viewport, leaving misleading empty space. */
@media (min-width: 800px) {
  .technical-visual-figure > svg { max-width: 1120px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .technical-visual.is-playing g[data-evidence].is-active :is(.flow, .tech-flow) { animation: none; }
}
@media print {
  .technical-visual-controls, .technical-visual [data-visual-status], .technical-visual-timing, .technical-visual-scroll-hint { display: none; }
  .technical-visual-figure { overflow: visible; }
  .technical-visual-figure > svg { min-width: 0; }
  .technical-visual g[data-evidence].is-active { filter: none; }
  .technical-visual.is-playing g[data-evidence].is-active :is(.flow, .tech-flow) { animation: none; }
}

/* The source card sits in the document flow, so it neither obscures geometry
   nor requires a hover gesture. Full evidence remains in the static disclosure. */
.technical-visual-exploration { min-width: 0; }
.technical-player{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);gap:24px;padding:24px;background:#f5f5f3;border-block:1px solid #ccc;align-items:start}
.technical-player .technical-visual-figure{margin:0;padding:0;background:transparent;max-height:550px}
.technical-player .technical-visual-figure>svg{min-width:0;max-height:550px;width:100%;object-fit:contain}
.technical-player-panel{min-width:0;position:sticky;top:100px}
.technical-player .technical-visual-controls{gap:6px}
.technical-player .technical-visual-controls button{font-size:14px;min-width:0;padding:10px 12px}
.technical-player [data-visual-action="play"]{background:#111;color:#fff;flex:1}
.technical-player .technical-visual-controls button{flex-shrink:0;white-space:nowrap}
.technical-player [data-visual-action="play"]{flex:1 0 70px;min-width:70px}
.technical-player [data-visual-action="pause"]:disabled{display:none}
.technical-player [data-visual-action="play"]:disabled{display:none}
.technical-timeline{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:13px;margin-top:16px;font-variant-numeric:tabular-nums}
.technical-timeline input{grid-column:1/-1;width:100%;margin:0;min-height:24px;accent-color:#111;cursor:pointer}
.technical-timeline output{grid-column:2;grid-row:1}
.technical-player [data-visual-status]{font-size:13px;color:#555;margin:14px 0}
.technical-active-caption h3{font-size:22px;line-height:1.2;margin:16px 0 10px;letter-spacing:-.02em}
.technical-active-caption p{font-size:16px;line-height:1.55;margin:0}
.technical-player .technical-visual-timing{font-size:12px;line-height:1.5;margin-top:16px}
.technical-player .technical-visual-scroll-hint{font-size:12px;margin:0 0 8px}
.technical-visual.has-selection g[data-evidence]{opacity:.65}
.technical-visual.has-selection g[data-evidence].is-active,.technical-visual.has-selection g[data-evidence].is-inspected{opacity:1}
.technical-active-caption details{margin:8px 0 0;font-size:12px}.technical-active-caption summary{min-height:32px;padding:4px 0}.technical-active-caption details p{font-size:14px;margin-top:8px}
.technical-visual.is-enlarged .technical-visual-figure{overflow:auto;max-height:550px}
.technical-visual.is-enlarged .technical-visual-figure>svg{min-width:1000px;max-height:none;width:1000px}
@media(max-width:900px){.technical-player{grid-template-columns:1fr;padding:16px;gap:16px}.technical-player-panel{position:static}.technical-player .technical-visual-figure{max-height:380px}.technical-player .technical-visual-figure>svg{max-height:380px}.technical-active-caption h3{font-size:20px}.technical-player .technical-visual-controls{position:static}.technical-player .technical-visual-timing{margin:12px 0 0}}
/* Default overview and transport fit a laptop/phone. Enlargement is explicit. */
.technical-player .technical-visual-figure,.technical-player .technical-visual-figure>svg{max-height:min(510px,58svh)}
@media(max-width:900px){.technical-player{gap:10px;padding:12px}.technical-player .technical-visual-figure,.technical-player .technical-visual-figure>svg{max-height:min(250px,28svh)}.technical-active-caption h3{font-size:18px;margin:10px 0 6px}.technical-active-caption>p{font-size:14px;line-height:1.45}.technical-player [data-visual-status]{font-size:12px;margin:8px 0}.technical-timeline{margin-top:10px;gap:2px}.technical-player .technical-visual-timing{font-size:11px;margin-top:8px}.technical-player .technical-visual-scroll-hint{font-size:11px;margin-bottom:5px}.technical-player .technical-visual-controls button{font-size:12px;padding:8px 10px}.technical-visual.is-enlarged .technical-visual-figure{max-height:min(510px,58svh)}.technical-visual.is-enlarged .technical-visual-figure>svg{max-height:none}}
@media(max-width:900px){.technical-player [data-visual-zoom]{flex-basis:100%;min-height:44px;text-align:left}.technical-player [data-visual-action="play"]{min-width:70px}}
@media(max-width:360px){.technical-player .technical-visual-scroll-hint{display:none}.technical-player .technical-visual-figure,.technical-player .technical-visual-figure>svg{max-height:min(200px,23svh)}.technical-visual.is-enlarged .technical-visual-figure{max-height:min(510px,58svh)}.technical-visual.is-enlarged .technical-visual-figure>svg{max-height:none}}
@media(max-width:360px){.technical-player .technical-visual-controls button{padding-inline:8px;min-width:44px}.technical-player .technical-visual-controls [data-visual-action="play"]{min-width:70px}}
.technical-evidence { border-block: 1px solid #aaa; padding-block: 1rem; margin-block: 1rem; min-width: 0; }
.technical-evidence h3, .technical-evidence h4 { margin-block: 0 .5rem; font-size: 1rem; }
.technical-evidence p { margin-block: .5rem; }
.technical-evidence-nodes { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.technical-evidence button { min-height: 44px; padding: .5rem .75rem; border: 1px solid #777; border-radius: 0; background: #fff; color: #111; font: inherit; line-height: 1.3; text-align: left; cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; max-width: 100%; }
.technical-evidence button:hover, .technical-evidence button.is-previewed { border-color: #111; background: #eee; }
.technical-evidence button[aria-pressed="true"] { color: #fff; background: #111; }
.technical-evidence [data-evidence-status] { font-size: .875rem; color: #444; }
.technical-evidence-panel { min-height: 2rem; }
.technical-evidence-panel section { border-inline-start: 3px solid #111; padding: .75rem 1rem; background: #f6f6f6; }
.technical-visual.has-evidence-explorer svg g[data-evidence] { cursor: pointer; }
.technical-visual g[data-evidence].is-inspected { filter: drop-shadow(0 0 1px #111); }
.technical-visual g[data-evidence].is-inspected text { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 1200px) {
  .technical-visual.has-evidence-explorer .technical-visual-exploration { display: block; }
  .technical-evidence { margin-block: 1rem; }
}
@media print {
  .technical-evidence { display: none; }
  .technical-visual.has-evidence-explorer .technical-visual-exploration { display: block; }
  .technical-visual g[data-evidence].is-inspected { filter: none; }
  .technical-visual details > * { display: block !important; }
}