/* /css/chapters/velocity-addition.css: Ch 13 "Speed Is the Wrong Thing to Add" (package C13).
   Styles for the chapter's three widgets (number line, rocket stack and trip, circle and hyperbola) and its plates.
   Every rule is scoped to the chapter. Colors come only from the §4.1 tokens; base.css already removes
   transitions and animations under reduced motion (OS setting or the footer button). */

/* ---------------------------------------------------------------- shared bits */
[data-chapter="velocity-addition"] .va-wall { stroke: var(--c-light); stroke-width: 2.25; stroke-linecap: round; }
[data-chapter="velocity-addition"] .va-tick-label { fill: var(--ink-muted); font: 11.5px var(--font-sans); font-variant-numeric: tabular-nums; }
[data-chapter="velocity-addition"] .va-tick-label.is-light { fill: var(--c-light-text); font-weight: 600; }
[data-chapter="velocity-addition"] .va-hatch-line { stroke: var(--c-bad); stroke-width: 1.4; stroke-opacity: .32; }
[data-chapter="velocity-addition"] .va-you,
[data-chapter="velocity-addition"] .va-you .readout-value { color: var(--c-you); }
[data-chapter="velocity-addition"] .va-you-c { color: var(--c-you) !important; }
[data-chapter="velocity-addition"] .va-bad { color: var(--c-bad); font-weight: 600; }
/* Rocket-frame sliders get the rocket color (widgets.css defines --accent but its track ignores it). */
[data-chapter="velocity-addition"] .ui-slider.rkt .ui-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--c-rocket) 0 var(--fill), var(--rule) var(--fill) 100%); }
[data-chapter="velocity-addition"] .ui-slider.rkt .ui-range::-moz-range-progress { background: var(--c-rocket); }
[data-chapter="velocity-addition"] .ui-slider.rkt .ui-range::-webkit-slider-thumb { border-color: var(--c-rocket); }
[data-chapter="velocity-addition"] .ui-slider.rkt .ui-range::-moz-range-thumb { border-color: var(--c-rocket); }

/* Prose rhythm. layout.css spaces siblings with a zero-specificity :where(…) > * + * rule, but base.css's
   p, ul, ol { margin: 0 } outranks it, so consecutive paragraphs touch (see docs/requests/velocity-addition.md). */
[data-chapter="velocity-addition"] :is(.beat, .callout, .reconcile, .recap, .deep-dive, details.solution, details.hint, details.long-desc, .ex-prompt, .ex-model, .code-task, .sidenote, .sagredo) > :not(h2, h3, h4) + :is(p, ul, ol, pre, blockquote, table, .table-scroll) { margin-top: var(--flow, 1em); }

[data-chapter="velocity-addition"] :is(.va-nl, .va-stack, .va-trip, .va-rap) .ui-label { white-space: normal; }

/* Labs reserve their height so the page does not jump when they mount (only when scripts run: without them the
   short text fallback stays, and a reserved box would just be empty space). */
@media (scripting: enabled) {
  [data-chapter="velocity-addition"] #lab-velocity-addition-1 .lab-stage { min-height: 490px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-2 .lab-stage { min-height: 555px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-3 .lab-stage { min-height: 915px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-4 .lab-stage { min-height: 805px; }
}
@media (scripting: enabled) and (max-width: 999px) {
  [data-chapter="velocity-addition"] #lab-velocity-addition-1 .lab-stage { min-height: 565px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-2 .lab-stage { min-height: 555px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-3 .lab-stage { min-height: 860px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-4 .lab-stage { min-height: 870px; }
}
@media (scripting: enabled) and (max-width: 699px) {
  [data-chapter="velocity-addition"] #lab-velocity-addition-1 .lab-stage { min-height: 560px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-2 .lab-stage { min-height: 580px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-3 .lab-stage { min-height: 815px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-4 .lab-stage { min-height: 865px; }
}
@media (scripting: enabled) and (max-width: 520px) {
  [data-chapter="velocity-addition"] #lab-velocity-addition-1 .lab-stage { min-height: 757px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-2 .lab-stage { min-height: 735px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-3 .lab-stage { min-height: 952px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-4 .lab-stage { min-height: 786px; }
}
@media (scripting: enabled) and (max-width: 359px) {
  [data-chapter="velocity-addition"] #lab-velocity-addition-1 .lab-stage { min-height: 795px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-2 .lab-stage { min-height: 765px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-3 .lab-stage { min-height: 960px; }
  [data-chapter="velocity-addition"] #lab-velocity-addition-4 .lab-stage { min-height: 800px; }
}

/* ---------------------------------------------------------------- number line */
[data-chapter="velocity-addition"] .va-nl-stage { width: 100%; min-width: 0; background: var(--surface); border-radius: var(--r-m); }
[data-chapter="velocity-addition"] .va-nl-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
[data-chapter="velocity-addition"] .va-zone { stroke: none; }
[data-chapter="velocity-addition"] .va-zone-edge { fill: var(--tint-bad); stroke: none; }
[data-chapter="velocity-addition"] .va-zone-label { fill: var(--c-bad); font: 600 10.5px var(--font-sans); letter-spacing: .12em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
[data-chapter="velocity-addition"] .va-track { stroke: var(--rule); stroke-width: 2; }
[data-chapter="velocity-addition"] .va-track-live { stroke: var(--ink-muted); stroke-width: 2.5; stroke-linecap: round; }
[data-chapter="velocity-addition"] .va-tick { stroke: var(--ink-muted); stroke-width: 1; }
[data-chapter="velocity-addition"] .va-tick-major { stroke: var(--ink); stroke-width: 1.5; }
[data-chapter="velocity-addition"] .va-lamp-bulb { fill: var(--surface); stroke: var(--c-light); stroke-width: 1.75; transition: fill var(--t-ui) var(--ease); }
[data-chapter="velocity-addition"] .va-lamp-glow { fill: var(--c-bad); opacity: 0; transition: opacity var(--t-ui) var(--ease); }
[data-chapter="velocity-addition"] .va-lamp.is-on .va-lamp-bulb { fill: var(--c-bad); stroke: var(--c-bad); }
[data-chapter="velocity-addition"] .va-lamp.is-on .va-lamp-glow { opacity: .22; }
[data-chapter="velocity-addition"] .va-lamp.is-on.is-you .va-lamp-glow { animation: va-blink 1s var(--ease) 3; }
@keyframes va-blink { 50% { opacity: .5; } }
[data-chapter="velocity-addition"] .va-ghost-dot { fill: var(--surface); stroke: var(--ink-muted); stroke-width: 1.75; stroke-dasharray: 3 2.5; }
[data-chapter="velocity-addition"] .va-nl-ghost text { font-style: italic; }
[data-chapter="velocity-addition"] .va-nl-brace { fill: none; stroke: var(--c-rocket); stroke-width: 1.25; stroke-dasharray: 6 4; }
[data-chapter="velocity-addition"] .va-probe-dot { fill: var(--c-lab); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
[data-chapter="velocity-addition"] .va-probe-halo { fill: var(--tint-lab); stroke: var(--c-lab); stroke-width: 1; stroke-opacity: .5; }
[data-chapter="velocity-addition"] .va-nl-probe text { fill: var(--c-lab); font-weight: 600; }
[data-chapter="velocity-addition"] .va-nl-probe.is-light .va-probe-dot { fill: var(--c-light); }
[data-chapter="velocity-addition"] .va-nl-probe.is-light .va-probe-halo { fill: var(--tint-light); stroke: var(--c-light); }
[data-chapter="velocity-addition"] .va-nl-probe.is-light text { fill: var(--c-light-text); }
[data-chapter="velocity-addition"] .va-nl-probe.is-you .va-probe-dot { fill: var(--c-you); }
[data-chapter="velocity-addition"] .va-nl-probe.is-you .va-probe-halo { fill: var(--tint-you); stroke: var(--c-you); }
[data-chapter="velocity-addition"] .va-nl-probe.is-you text { fill: var(--c-you); }
[data-chapter="velocity-addition"] .va-ghost-readout .readout-value { color: var(--ink-muted); font-style: italic; }
[data-chapter="velocity-addition"] .va-nl-svg .va-nl-name { font-size: 11.5px; font-weight: 500; }
[data-chapter="velocity-addition"] .ui-slider.is-off { opacity: .45; }
[data-chapter="velocity-addition"] .stx-btnrow .btn[aria-pressed="true"] { background: var(--tint-light); border-color: var(--c-light); }

/* ---------------------------------------------------------------- rocket stack */
[data-chapter="velocity-addition"] .va-stack-stage { width: 100%; min-width: 0; }
[data-chapter="velocity-addition"] .va-stack-svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
[data-chapter="velocity-addition"] .va-bar-title { fill: var(--ink-muted); font: 700 10.5px var(--font-sans); letter-spacing: .1em; }
[data-chapter="velocity-addition"] .va-bar-track { fill: var(--surface-2); stroke: var(--rule); }
[data-chapter="velocity-addition"] .va-bar-forbid { fill: var(--tint-bad); stroke: var(--c-bad); stroke-opacity: .35; stroke-dasharray: 3 3; }
[data-chapter="velocity-addition"] .va-seg { fill: var(--c-lab); fill-opacity: .85; transition: width var(--t-morph) var(--ease), x var(--t-morph) var(--ease); }
[data-chapter="velocity-addition"] .va-seg.alt { fill-opacity: .55; }
[data-chapter="velocity-addition"] .va-block { fill: var(--c-rocket); fill-opacity: .55; }
[data-chapter="velocity-addition"] .va-block.alt { fill-opacity: .32; }
[data-chapter="velocity-addition"] .va-block.is-new, [data-chapter="velocity-addition"] .va-seg.is-new { animation: va-grow var(--t-morph) var(--ease); transform-box: fill-box; transform-origin: left center; }
@keyframes va-grow { from { transform: scaleX(0); } }
[data-chapter="velocity-addition"] .va-ghost-bar { fill: none; stroke: var(--ink-muted); stroke-width: 1.25; stroke-dasharray: 4 3; }
[data-chapter="velocity-addition"] .va-bar-note { fill: var(--ink-muted); font: italic 12px var(--font-sans); }
[data-chapter="velocity-addition"] .va-bar-val { fill: var(--surface); font: 700 12.5px var(--font-sans); font-variant-numeric: tabular-nums; }
[data-chapter="velocity-addition"] .va-bar-val.is-ink { fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
[data-chapter="velocity-addition"] .va-wall-tag { fill: var(--c-light-text); font: 600 11px var(--font-sans); }
[data-chapter="velocity-addition"] .va-stack-n { min-width: 6.5em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-chapter="velocity-addition"] .va-stack-tablewrap { max-height: 21rem; }
[data-chapter="velocity-addition"] .va-stack-rk { display: inline-block; vertical-align: -1px; color: var(--c-rocket); }
[data-chapter="velocity-addition"] .va-stack-rk.alt { opacity: .55; }
[data-chapter="velocity-addition"] .va-stack-note { margin-top: var(--s-2); font: italic .8rem var(--font-sans); color: var(--ink-muted); }
[data-chapter="velocity-addition"] .va-stack-rk svg { display: block; }
[data-chapter="velocity-addition"] .va-stack-table .va-th-early small { display: block; font-size: .7rem; font-weight: 500; }
/* Phones: let the headers wrap and tighten the cells so all five columns, θ included, fit without scrolling. */
@media (max-width: 520px) {
  [data-chapter="velocity-addition"] .va-stack-table thead th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
  [data-chapter="velocity-addition"] .va-stack-table :is(th, td) { padding-left: 5px; padding-right: 5px; }
}
[data-chapter="velocity-addition"] .va-stack-table tbody th { font: 600 .75rem var(--font-sans); white-space: nowrap; }
[data-chapter="velocity-addition"] .va-stack-table tr.is-sel td, [data-chapter="velocity-addition"] .va-stack-table tr.is-sel th { background: var(--tint-light); }

/* ---------------------------------------------------------------- trip */
[data-chapter="velocity-addition"] .va-trip-stage { width: 100%; min-width: 0; display: flex; justify-content: center; }
[data-chapter="velocity-addition"] .va-trip-svg { display: block; width: 100%; max-width: 560px; height: auto; background: var(--surface); font-family: var(--font-sans); }
[data-chapter="velocity-addition"] .va-smooth { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; }
[data-chapter="velocity-addition"] .va-kicked { fill: none; stroke: var(--c-rocket); stroke-width: 2.5; stroke-dasharray: 6 4; stroke-linejoin: round; }
[data-chapter="velocity-addition"] .va-kicked.is-you { stroke: var(--c-you); stroke-dasharray: none; }
[data-chapter="velocity-addition"] .va-asym { fill: none; stroke: var(--c-light); stroke-width: 1.25; stroke-dasharray: 2 4; stroke-linecap: round; }
[data-chapter="velocity-addition"] .va-kick { fill: var(--surface); stroke: var(--c-rocket); stroke-width: 1.5; }

/* ---------------------------------------------------------------- circle and hyperbola */
/* Always side by side, so turning and boosting can be compared at a glance (on phones the widget drops its small labels). */
[data-chapter="velocity-addition"] .va-rap-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); justify-items: center; align-items: end; }
[data-chapter="velocity-addition"] .va-rap-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100%; align-items: center; }
[data-chapter="velocity-addition"] .va-rap-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; width: 100%; max-width: 460px; font: 700 .68rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
[data-chapter="velocity-addition"] .va-rap-head small { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-muted); font-size: .76rem; font-family: var(--font-serif); font-style: italic; }
[data-chapter="velocity-addition"] .va-rap-head.is-inv { color: var(--c-inv); }
[data-chapter="velocity-addition"] .va-rap-head.is-ink { color: var(--ink-muted); }
[data-chapter="velocity-addition"] .va-rap-svg { display: block; width: 100%; max-width: 460px; height: auto; background: var(--surface); border-radius: var(--r-m); font-family: var(--font-sans); }
[data-chapter="velocity-addition"] .va-sec1 { fill: var(--c-rocket); fill-opacity: .2; stroke: var(--c-rocket); stroke-opacity: .45; stroke-width: 1; }
[data-chapter="velocity-addition"] .va-sec2 { fill: var(--c-rocket); fill-opacity: .42; stroke: var(--c-rocket); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 3 2; }
[data-chapter="velocity-addition"] .va-proj { fill: none; stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 2 3; }
[data-chapter="velocity-addition"] .va-ray1 { fill: none; stroke: var(--c-rocket); stroke-width: 1.25; stroke-opacity: .55; stroke-dasharray: 2 3; }
[data-chapter="velocity-addition"] .va-area { fill: var(--ink); font: 600 11.5px var(--font-sans); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
[data-chapter="velocity-addition"] .va-rap-sum { border-top: 1px dashed var(--rule); padding-top: var(--s-2); }
[data-chapter="velocity-addition"] .va-rap-total { width: 100%; max-width: 460px; margin: 0; font: 600 .8rem var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); }
[data-chapter="velocity-addition"] .va-phi-arc { fill: none; stroke: var(--ink); stroke-width: 1.25; }
[data-chapter="velocity-addition"] .va-phi { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

/* ---------------------------------------------------------------- plates and page bits */
[data-chapter="velocity-addition"] .va-plate-title { fill: var(--ink-muted); font: 700 10.5px var(--font-sans); letter-spacing: .1em; }
[data-chapter="velocity-addition"] .va-moon { fill: var(--surface-2); stroke: var(--ink-muted); stroke-width: 1.25; }
[data-chapter="velocity-addition"] .va-beam { fill: var(--c-light); fill-opacity: .16; stroke: none; }
[data-chapter="velocity-addition"] .va-spot { fill: var(--c-light); stroke: var(--surface); stroke-width: 2; paint-order: stroke; }
[data-chapter="velocity-addition"] .va-crater { fill: none; stroke: var(--ink-muted); stroke-width: .9; stroke-opacity: .6; }
[data-chapter="velocity-addition"] .va-lens { fill: var(--tint-inv); stroke: none; }
[data-chapter="velocity-addition"] .va-hook-art { display: block; width: 100%; max-width: 560px; height: auto; margin: var(--s-4) auto 0; overflow: visible; }
[data-chapter="velocity-addition"] .va-exhaust { fill: none; stroke: var(--c-light); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 4; }
[data-chapter="velocity-addition"] .va-q { fill: var(--c-light-text); font: italic 700 22px var(--font-serif); }
[data-chapter="velocity-addition"] .va-table { margin: var(--s-4) auto; font-family: var(--font-sans); font-size: .85rem; font-variant-numeric: tabular-nums; border-collapse: collapse; }
[data-chapter="velocity-addition"] .va-table th, [data-chapter="velocity-addition"] .va-table td { padding: 4px 12px; border-bottom: 1px solid var(--rule); text-align: right; }
[data-chapter="velocity-addition"] .va-table th:first-child, [data-chapter="velocity-addition"] .va-table td:first-child { text-align: left; }
[data-chapter="velocity-addition"] .va-table thead th { color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
[data-chapter="velocity-addition"] .va-table thead tr:first-child th { border-bottom: 0; padding-bottom: 0; }
[data-chapter="velocity-addition"] .va-table .va-table-sub th { font-size: .9em; padding-top: 0; }
[data-chapter="velocity-addition"] .va-table tbody th { white-space: nowrap; }
[data-chapter="velocity-addition"] .va-table-num { display: block; font-size: .85em; font-weight: 400; color: var(--ink-muted); }
/* Sagredo's searchlight challenge stays in the reading column on wide screens too, so it comes before the answer. */
@media (min-width: 900px) {
  [data-chapter="velocity-addition"] .sagredo.va-sagredo-inline { float: none; width: auto; margin: 1em 0; }
}
@media (max-width: 520px) { [data-chapter="velocity-addition"] .va-table th, [data-chapter="velocity-addition"] .va-table td { padding: 4px 6px; } [data-chapter="velocity-addition"] .va-table { font-size: .78rem; } }

/* Phones: plates drawn 560 wide shrink to about 0.6×, so their labels get larger user-unit sizes to stay legible. */
@media (max-width: 520px) {
  [data-chapter="velocity-addition"] :is(#fig-velocity-addition-2 svg, #fig-velocity-addition-4 svg) :is(.p-label, .p-annot) { font-size: 18px; }
  [data-chapter="velocity-addition"] .va-hook-art :is(.p-label, .p-annot) { font-size: 16px; }
  [data-chapter="velocity-addition"] #fig-velocity-addition-3 svg :is(.p-label, .p-annot, .p-label-var, .va-area) { font-size: 16px; }
  [data-chapter="velocity-addition"] :is(.va-hook-art, #fig-velocity-addition-2 svg, #fig-velocity-addition-3 svg, #fig-velocity-addition-4 svg) .va-plate-title { font-size: 14px; letter-spacing: .06em; }
}