/* ==== System story: the shared engine's look =====================================
   Lifted from project-pages.css on 2026-10-01 (see system-story.js). This file owns
   what every story shares: the stage frame, on-stage names, network cables and their
   travelling dot, the status pill and clock, the caption, the stepper and the
   controls, plus the no-JS, phone and reduced-motion states. Each page keeps its own
   stage drawing and its chapter-by-chapter movements, keyed on the root's
   data-chapter / data-beat. Network lines are ENTTEC blue when live, grey at rest. */
.ss-story .ss-stage { display: block; width: 100%; height: auto; }
.ss-bg { fill: #fff; stroke: #d9d9d9; stroke-width: 1.5; }
.ss-name { fill: #4c4c4c; font: 600 17px var(--enttec-font-body, sans-serif); letter-spacing: .01em; }
.ss-net, .ss-dmx { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.ss-net { stroke: #d9d9d9; }
.ss-dmx { stroke: #e3e3e3; }
.ss-switch rect { fill: #333; stroke: #4c4c4c; }
.ss-switch circle { fill: #8a8a8a; }
.ss-laptop__lid, .ss-laptop__base { fill: #333; }
.ss-laptop__screen { fill: #111; transition: fill .6s var(--eds-ease); }
.ss-laptop__logo { opacity: 0; transition: opacity .6s var(--eds-ease); }
.ss-part { transition: opacity .5s var(--eds-ease), transform .5s var(--eds-ease); }

/* Status pill, the page's button shape: REC while recording, PLAYING while playing.
   Red is #d32f2f so REC reads at 4.98:1 on white. */
.ss-rec { opacity: 0; transition: opacity .35s var(--eds-ease); }
.ss-rec__on, .ss-rec__playing { opacity: 0; }
.ss-rec__on .ss-rec__pill { fill: #fff; stroke: #d32f2f; stroke-width: 1.5; }
.ss-rec__on .ss-rec__dot { fill: #d32f2f; }
.ss-rec__on .ss-rec__t { fill: #d32f2f; }
.ss-rec__playing .ss-rec__pill { fill: #0ea5df; }
.ss-rec__playing :is(.ss-rec__play, .ss-rec__t) { fill: #fff; }
.ss-rec__t { font: 700 15px var(--enttec-font-body, sans-serif); letter-spacing: .08em; }
.ss-clock { opacity: 0; transition: opacity .4s var(--eds-ease); }
.ss-clock circle { fill: none; stroke: #333; stroke-width: 2; }
.ss-clock line { stroke: #333; stroke-width: 2; stroke-linecap: round; transform-origin: 0 0; }

/* One dot per live cable: a near-zero dash with a round cap, walked along the path.
   Hidden until the page's chapter rules set --ss-live on that cable. */
.ss-pulse { stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.01 99.99; stroke-opacity: var(--ss-live, 0); animation: ss-dot 2.4s linear infinite; }
.ss-dmx.ss-pulse { stroke-width: 6; }
@keyframes ss-dot { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes ss-rec { 50% { opacity: .35; } }
@keyframes ss-clock { to { transform: rotate(360deg); } }
/* Pause freezes every running animation in place. */
.ss-story.is-paused * { animation-play-state: paused !important; }

/* Caption bar and controls. */
/* Scoped to the root so a page's own `h3` / `p` spacing (loaded after this sheet)
   cannot reopen the gaps: project pages set h3 margins and won until this was scoped. */
.ss-story .ss-head { margin: 0; }
.ss-story .ss-head > h3 { margin-bottom: 0; }
.ss-bar { display: grid; gap: 12px; margin-top: 16px; }
.ss-caption { margin: 0; min-height: 3em; font-size: clamp(16px, 1.3vw, 19px); color: #4c4c4c; }
.ss-list { display: none; }
.ss-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-play, .ss-replay, .ss-dot {
  min-height: 44px; min-width: 44px; border: 1px solid #d9d9d9; border-radius: var(--enttec-radius-pill, 999px);
  background: #fff; color: #333; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px var(--enttec-font-body, sans-serif); padding: 0 14px;
  transition: border-color .2s var(--eds-ease), background .2s var(--eds-ease), color .2s var(--eds-ease);
}
.ss-play svg, .ss-replay svg { width: 18px; height: 18px; fill: currentColor; }
.ss-replay svg { fill: none; }
.ss-play .ss-i-play { display: none; }
.ss-story.is-paused .ss-play .ss-i-play { display: inline; }
.ss-story.is-paused .ss-play .ss-i-pause { display: none; }
.ss-dots { display: flex; gap: 8px; flex-wrap: wrap; }
/* The stepper: a dot per chapter down a rail, hollow grey ahead, solid blue once
   reached, the segment under the current dot filling as it plays (--p). */
.ss-dots .ss-dot { position: relative; overflow: visible; background: none; border: 0; border-radius: 0; min-height: 44px; padding: 0 0 0 30px; justify-content: flex-start; color: #4c4c4c; font-weight: 500; }
.ss-dots .ss-dot:hover { border-color: transparent; color: #000; }
.ss-dot__n { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; box-sizing: border-box; border: 2px solid #bfbfbf; border-radius: 50%; background: #fff; font-size: 0; transition: background .25s var(--eds-ease), border-color .25s var(--eds-ease); }
.ss-dot[data-state="done"] .ss-dot__n, .ss-dot[data-state="current"] .ss-dot__n { background: #0ea5df; border-color: #0ea5df; }
.ss-dot[data-state="current"] { color: #000; font-weight: 700; }
.ss-dot__bar { position: absolute; left: 5.5px; top: calc(50% + 9px); width: 3px; height: calc(100% - 18px); border-radius: 2px; background: #e3e3e3; }
.ss-dot__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #0ea5df; transform-origin: top; transform: scaleY(var(--p, 0)); }
.ss-dot:last-child .ss-dot__bar { display: none; }
.ss-play:hover, .ss-replay:hover { border-color: #0ea5df; }
.ss-play:focus-visible, .ss-replay:focus-visible, .ss-dot:focus-visible { outline: 2px solid #0ea5df; outline-offset: 3px; }
/* Desktop: the controls in a column on the left, the stage on the right. Visual order
   only; the markup keeps stage then controls, the phone's stacking order. */
@media (min-width: 900px) {
  .ss-story { display: grid; grid-template-columns: clamp(220px, 20vw, 280px) minmax(0, 1fr); gap: clamp(20px, 2vw, 32px); align-items: center; }
  .ss-bar { order: -1; margin-top: 0; align-content: center; gap: 18px; }
  .ss-caption { min-height: 6.5em; }
  .ss-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ss-dots { grid-column: 1 / -1; order: -1; display: grid; gap: 0; }
}
/* No JS: the markup already shows the final chapter; list every caption, drop the controls. */
.ss-story:not(.is-live) .ss-caption, .ss-story:not(.is-live) .ss-controls { display: none; }
.ss-story:not(.is-live) .ss-list { display: block; margin: 0; padding-left: 1.2em; color: #4c4c4c; }
/* Phone: on-stage names would render at about 5px, so they go and the caption carries
   the words; the stepper runs across as numbered dots. */
@media (max-width: 700px) {
  .ss-name { display: none; }
  .ss-dot__t { display: none; }
  .ss-dots .ss-dot { padding: 0; flex: 0 1 44px; min-width: 32px; justify-content: center; }
  .ss-dot__n { left: 15px; }
  .ss-dot__bar { left: calc(50% + 9px); top: 50%; width: calc(100% + 6px - 18px); height: 3px; margin-top: -1.5px; }
  .ss-dot__bar::after { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .ss-controls, .ss-dots { gap: 6px; }
  /* Never wrap: a wrapped dot reads as a sixth control. Five chapters + two buttons
     need 7x44 + 6x6 = 344px, inside the 358px a 390 phone leaves. */
  .ss-controls, .ss-dots { flex-wrap: nowrap; }
  /* On a column narrower than that (a 320 phone), the dots give a little width back
     (down to 32px, above the 24px WCAG 2.2 target minimum) instead of pushing the
     caption past the edge. */
  .ss-bar, .ss-controls, .ss-dots { min-width: 0; }
  .ss-dots { flex: 1 1 auto; justify-content: space-between; }
}
/* Reduced motion: nothing moves. Chapters still change on the dots, as still frames. */
@media (prefers-reduced-motion: reduce) {
  .ss-story *, .ss-story { animation: none !important; transition: none !important; }
  .ss-pulse { display: none; }
}