/* The battle station explorer. All previews use fictional data. */
.workspace-section { padding: 56px 32px; }
.workspace-section-head { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.workspace-section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.workspace-section-head > p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.extras-icons { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.workspace-section .extra-icon { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Each preview is a recording of the real app (see the HTML comment). Desktop recordings run at up to 1020px,
   an exact 2:1 downscale of the 2040px movie; the phone is a portrait movie in a bezel. */
.workspace-movie { display: grid; min-width: 0; margin: 0; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 12px 40px #0004; }
.extras-panel.is-wide .workspace-movie { width: 100%; max-width: 1022px; justify-self: center; }
.workspace-movie-media { position: relative; aspect-ratio: 2040 / 1272; overflow: hidden; background: #0e1116; }
.workspace-movie-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.workspace-movie-media:fullscreen { display: grid; place-items: center; padding: 24px; aspect-ratio: auto; background: #0e1116; }
.workspace-movie.is-phone { justify-self: center; width: min(100%, 380px); padding: 9px 9px 0; border-radius: 30px; border-color: color-mix(in srgb, var(--tone) 35%, var(--line)); }
.workspace-movie.is-phone .workspace-movie-media { aspect-ratio: 720 / 1280; border-radius: 22px; }
.workspace-movie.is-phone .workspace-movie-media:fullscreen { aspect-ratio: auto; border-radius: 0; }
/* No captions (owner, 2026-10-28): the bar is the progress line and the controls. */
.workspace-movie-bar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 52px; padding: 8px 14px 8px 18px; }
.workspace-movie.is-phone .workspace-movie-bar { min-height: 52px; padding: 8px 4px 8px 10px; }
.workspace-movie-controls { display: flex; flex: none; gap: 4px; }
.workspace-movie-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; }
.workspace-movie-controls button:hover { color: var(--text); background: var(--panel); border-color: var(--line); }
.workspace-movie-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.workspace-movie-controls [data-movie-play][aria-label^="Play"] path { fill: currentColor; }
.workspace-movie-track { position: absolute; inset: 0 0 auto; height: 2px; overflow: hidden; background: var(--line-soft); }
.workspace-movie-track > span { display: block; height: 100%; background: var(--tone, var(--accent)); transform: scaleX(0); transform-origin: left; }
.workspace-movie.is-phone .workspace-movie-track { inset-inline: 14px; }
/* Each tool has its own colour. The whole frame (tab outline, the line under the other tabs and the panel's
   border) takes the chosen tab's colour, so every line joins up into one shape. */
[data-tone="desk"] { --tone: var(--c-purple); }
[data-tone="graph"] { --tone: var(--c-blue); }
[data-tone="signals"] { --tone: var(--c-amber); }
[data-tone="phone"] { --tone: var(--accent); }

.extras-explorer { --frame: var(--tone, var(--accent)); min-width: 0; }
.extras-explorer [hidden] { display: none !important; }
.extras-tabs { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.extras-tabs [role="tab"] { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: max-content; gap: 16px; min-height: 88px; padding: 16px 22px; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -2px var(--frame); color: var(--muted); font-family: var(--mono); font-size: 16px; line-height: 1.25; text-align: left; cursor: pointer; transition: color 0.2s, background-color 0.2s, box-shadow 0.25s; }
.extras-tabs .extra-icon { width: 30px; height: 30px; color: var(--tone); }
.extra-tab-text { display: grid; gap: 5px; font-weight: 600; }
.extra-tab-text small { color: var(--muted); font-size: 12px; font-weight: 400; }
.extras-tabs [role="tab"]:hover { color: var(--text); background: color-mix(in srgb, var(--tone) 7%, transparent); }
.extras-tabs [role="tab"][aria-selected="true"] { color: var(--text); background: linear-gradient(color-mix(in srgb, var(--tone) 14%, var(--bg-2)), var(--bg-2)); box-shadow: inset 2px 0 var(--frame), inset -2px 0 var(--frame), inset 0 2px var(--frame); }
.extras-tabs [role="tab"]:focus-visible { outline-offset: -7px; }
.extras-panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 48px; min-height: 420px; padding: 40px; border: 2px solid var(--tone, var(--accent)); background: radial-gradient(70% 85% at 80% 100%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 70%), var(--bg-2); }
.extras-panel + .extras-panel { margin-top: 16px; }
.extras-panel-copy h3 { font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.2; }
.extras-panel-copy p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
/* A desktop recording needs the full width to stay readable, so its copy sits above it as one row. */
.extras-panel.is-wide { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 28px; padding: 34px 40px 40px; }
.extras-panel.is-wide .extras-panel-copy { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 12px 40px; width: 100%; max-width: 1022px; justify-self: center; }
.extras-panel.is-wide .extras-panel-copy h3 { margin: 0; }
/* The portrait phone keeps its copy beside it, the pair centred rather than pushed to the panel's edges. */
.extras-panel.is-phone { grid-template-columns: minmax(0, 420px) min(380px, 32vw); justify-content: center; gap: 72px; }
/* With tabs: the panels share one grid cell, so the frame keeps the tallest panel's height on every tab. */
.extras-explorer[data-tabs-ready] { display: grid; grid-template-columns: minmax(0, 1fr); }
.extras-explorer[data-tabs-ready] > * { grid-column: 1; }
.extras-explorer[data-tabs-ready] > .extras-panel { grid-row: 2; margin-top: 0; border-top: 0; }
.extras-explorer[data-tabs-ready] > .extras-panel[hidden] { display: grid !important; visibility: hidden; }
@media (max-width: 960px) {
  .extras-panel { gap: 28px; padding: 28px; }
  .extras-panel.is-wide { gap: 22px; padding: 26px 24px 28px; }
  .extras-panel.is-phone { grid-template-columns: minmax(0, 1fr) min(380px, 46vw); gap: 40px; }
  /* Here a portrait phone is far taller than a landscape recording, so each tab takes its own height
     rather than leaving the other three with an empty band. */
  .extras-explorer[data-tabs-ready] > .extras-panel[hidden] { display: none !important; }
  .extras-tabs [role="tab"] { gap: 12px; padding: 14px 12px; font-size: 15px; }
  .extras-tabs .extra-icon { width: 26px; height: 26px; }
}
@media (max-width: 760px) {
  .extra-tab-text small { display: none; }
  .extras-tabs [role="tab"] { min-height: 64px; }
  .extras-panel.is-wide .extras-panel-copy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .workspace-section { padding: 42px 18px; }
  .workspace-section-head { margin-bottom: 27px; text-align: left; }
  .workspace-section-head > p { font-size: 1rem; }
  /* Icon above the name, so four tabs still fit a phone at a readable size. */
  .extras-tabs [role="tab"] { flex-direction: column; min-height: 68px; gap: 6px; padding: 10px 4px; font-size: 12px; }
  .extras-tabs .extra-icon { width: 22px; height: 22px; }
  .extras-panel, .extras-panel.is-wide, .extras-panel.is-phone { grid-template-columns: minmax(0, 1fr); gap: 22px; min-height: 0; padding: 22px 14px; }
  .extras-panel-copy p { font-size: 0.95rem; }
  .workspace-movie-bar { gap: 6px; padding: 6px 6px 6px 12px; }
  .workspace-movie-controls { gap: 0; }
  .workspace-movie-controls button { width: 32px; height: 40px; }
}

/* The copy rises in when a tab opens; the recording itself is the motion. Reduced-motion visitors get neither:
   the recording waits on its poster until they press play. */
@keyframes extras-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes extras-pop { from { opacity: 0; transform: scale(0.9); } }
@media (prefers-reduced-motion: no-preference) {
  .extras-panel[data-play] .extras-panel-copy > * { animation: extras-rise 0.45s both; }
  .extras-panel[data-play] .extras-panel-copy > p { animation-delay: 0.08s; }
  .extras-panel[data-play] .workspace-movie { animation: extras-rise 0.45s 0.05s both; }
  .extras-tabs [role="tab"][aria-selected="true"] .extra-icon { animation: extras-pop 0.35s both; }
}