/* Ch 9 "Shrinking Rulers" (C09): chapter widgets + workarounds (see docs/requests/length-contraction.md). */
[data-chapter="length-contraction"] :where(.beat, .callout, .reconcile, .recap, .deep-dive, details.solution, details.hint, .ex-prompt, .ex-model, .code-task, .sidenote, .sagredo) > :not(h2, h3, h4) + :where(p, ul, ol, pre, blockquote, dl, table) { margin-top: var(--flow, 1em); }
[data-chapter="length-contraction"] .lc-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
[data-chapter="length-contraction"] .lc-pair > svg { display: block; flex: 0 1 310px; max-width: 100%; height: auto; overflow: visible; }

@media (scripting: enabled) {
  [data-chapter="length-contraction"] #lab-length-contraction-1 .lab-stage { min-height: 1150px; }
  [data-chapter="length-contraction"] #lab-length-contraction-2 .lab-stage { min-height: 1580px; }
  [data-chapter="length-contraction"] #lab-length-contraction-3 .lab-stage { min-height: 1050px; }
}
/* Q1: phone/tablet tiers at or just under the live stage heights measured in Chromium (320–699px), so mounting a lab
   no longer grows lab 2 by up to 250px at 320px or shrinks it by up to 460px at 540–699px. */
@media (scripting: enabled) and (min-width: 350px) { [data-chapter="length-contraction"] #lab-length-contraction-1 .lab-stage { min-height: 1200px; } [data-chapter="length-contraction"] #lab-length-contraction-2 .lab-stage { min-height: 1520px; } [data-chapter="length-contraction"] #lab-length-contraction-3 .lab-stage { min-height: 1020px; } }
@media (scripting: enabled) and (min-width: 410px) { [data-chapter="length-contraction"] #lab-length-contraction-1 .lab-stage { min-height: 1120px; } [data-chapter="length-contraction"] #lab-length-contraction-2 .lab-stage { min-height: 1340px; } [data-chapter="length-contraction"] #lab-length-contraction-3 .lab-stage { min-height: 940px; } }
@media (scripting: enabled) and (min-width: 530px) { [data-chapter="length-contraction"] #lab-length-contraction-1 .lab-stage { min-height: 1090px; } [data-chapter="length-contraction"] #lab-length-contraction-2 .lab-stage { min-height: 1260px; } [data-chapter="length-contraction"] #lab-length-contraction-3 .lab-stage { min-height: 925px; } }
@media (scripting: enabled) and (min-width: 640px) { [data-chapter="length-contraction"] #lab-length-contraction-1 .lab-stage { min-height: 830px; } [data-chapter="length-contraction"] #lab-length-contraction-2 .lab-stage { min-height: 935px; } [data-chapter="length-contraction"] #lab-length-contraction-3 .lab-stage { min-height: 925px; } }
@media (scripting: enabled) and (min-width: 700px) {
  [data-chapter="length-contraction"] #lab-length-contraction-1 .lab-stage { min-height: 860px; }
  [data-chapter="length-contraction"] #lab-length-contraction-2 .lab-stage { min-height: 920px; }
  [data-chapter="length-contraction"] #lab-length-contraction-3 .lab-stage { min-height: 940px; }
}
@media (scripting: enabled) and (min-width: 900px) {
  [data-chapter="length-contraction"] #lab-length-contraction-1 .lab-stage { min-height: 900px; }
  [data-chapter="length-contraction"] #lab-length-contraction-2 .lab-stage { min-height: 860px; }
  [data-chapter="length-contraction"] #lab-length-contraction-3 .lab-stage { min-height: 620px; }
}
[data-chapter="length-contraction"] :is(#lab-length-contraction-1, #lab-length-contraction-2, #lab-length-contraction-3):is(.is-mounted, .mount-failed) .lab-stage { min-height: 0; }
@media print { [data-chapter="length-contraction"] .lab-stage { min-height: 0 !important; } }

[data-chapter="length-contraction"] .lc-done {
  margin-left: .4em; padding: 0 .55em; border-radius: 999px; border: 1px solid; vertical-align: .15em;
  font: 600 .66rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ok); background: var(--tint-ok);
}

[data-chapter="length-contraction"] :is(.lc-scene, .pb-scene, .lc-diagram, .pb-diagram) {
  display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--r-m); font-family: var(--font-sans); user-select: none;
}
[data-chapter="length-contraction"] :is(.lc-diagram, .pb-diagram) { aspect-ratio: 1; }
[data-chapter="length-contraction"] .lc-lower { display: grid; gap: var(--s-3); align-items: start; }
@container (min-width: 640px) { [data-chapter="length-contraction"] .lc-lower { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } }
[data-chapter="length-contraction"] .lc-inset { margin: 0; width: 100%; max-width: 300px; justify-self: center; }
[data-chapter="length-contraction"] .lc-inset figcaption { margin-top: 4px; padding: 0; }
[data-chapter="length-contraction"] .lc-side { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
[data-chapter="length-contraction"] .lc-side .readouts { margin-top: 0; gap: var(--s-2) var(--s-4); font-variant-numeric: tabular-nums; }
[data-chapter="length-contraction"] :is(.lc-msg, .pb-verdict) { min-height: 2.9em; padding: 8px 10px; border-radius: var(--r-m); background: var(--surface-2); border-left: 4px solid var(--c-inv); }
[data-chapter="length-contraction"] .lc-msg { border-left-color: var(--rule); }
[data-chapter="length-contraction"] .lc-msg.is-ok { border-left-color: var(--c-ok); }
[data-chapter="length-contraction"] .lc-msg.is-bad { border-left-color: var(--c-bad); }
[data-chapter="length-contraction"] .lc-btns .btn { min-height: 44px; }
[data-chapter="length-contraction"] .pb-top { justify-content: space-between; }

[data-chapter="length-contraction"] .lc-clock-face { fill: var(--surface); stroke: var(--c-lab); stroke-width: 1.4; }
[data-chapter="length-contraction"] .lc-stem { opacity: .45; }
[data-chapter="length-contraction"] .lc-rae { color: var(--c-rocket); }
[data-chapter="length-contraction"] .lc-mark-lbl { font-size: 12px; font-variant-numeric: tabular-nums; }
[data-chapter="length-contraction"] :is(.lc-dim path, .lc-seg) { fill: none; stroke: var(--c-lab); stroke-width: 2; }
[data-chapter="length-contraction"] .lc-dim text { fill: var(--c-lab); }
[data-chapter="length-contraction"] :is(.lc-dim.is-bad path, .lc-seg.is-bad) { stroke: var(--c-bad); stroke-dasharray: 5 4; }
[data-chapter="length-contraction"] .lc-dim.is-bad text { fill: var(--c-bad); }
[data-chapter="length-contraction"] .lc-hollow-rkt { stroke: var(--c-rocket); }
[data-chapter="length-contraction"] .pb-spark { color: var(--c-light); }
[data-chapter="length-contraction"] .pb-badge { font-weight: 700; letter-spacing: .08em; font-size: 12px; fill: var(--c-lab); }
[data-chapter="length-contraction"] .pb-badge.is-rkt { fill: var(--c-rocket); }
[data-chapter="length-contraction"] .pb-shut { stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; fill: none; }
[data-chapter="length-contraction"] .pb-small { font-size: 11px; }
[data-chapter="length-contraction"] .pb-fit { margin: 0; font-size: .8rem; font-weight: 600; color: var(--c-ok); }
[data-chapter="length-contraction"] .pb-fit.is-bad { color: var(--c-bad); }
[data-chapter="length-contraction"] .pb-fit.is-rkt { color: var(--c-rocket); }
[data-chapter="length-contraction"] .pb-stopped { fill: var(--c-rocket); fill-opacity: .45; }
[data-chapter="length-contraction"] .lc-tick { font-size: 10px; }
[data-chapter="length-contraction"] .pb-list { margin: 4px 0 0; padding-left: 1.4em; font-size: .78rem; line-height: 1.5; }
[data-chapter="length-contraction"] .pb-li-t { display: inline-block; min-width: 5.6em; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
[data-chapter="length-contraction"] .pb-li.is-door { font-weight: 600; }

/* Plate 9.3: inward brushes on the outer ring, and the stripe of paint they leave on the inner ring. */
[data-chapter="length-contraction"] :is(.lc-brush-lab, .lc-brush-rkt) { fill: none; stroke-width: 1.6; stroke-linecap: round; }
[data-chapter="length-contraction"] .lc-brush-lab { stroke: var(--c-lab); }
[data-chapter="length-contraction"] .lc-brush-rkt { stroke: var(--c-rocket); }
[data-chapter="length-contraction"] :is(.lc-stripe-lab, .lc-stripe-rkt) { fill: none; stroke-width: 7; stroke-opacity: .4; }
[data-chapter="length-contraction"] .lc-stripe-lab { stroke: var(--c-lab); }
[data-chapter="length-contraction"] .lc-stripe-rkt { stroke: var(--c-rocket); }

/* Orientation card (Prologue pattern), the interval step-through's tables, the shorthand table, the reconcile hold. */
[data-chapter="length-contraction"] .lc-orient { margin: var(--s-6) 0 0; max-width: 40rem; }
[data-chapter="length-contraction"] .lc-orient ol { margin: var(--s-3) 0 0; padding-left: 1.5em; }
[data-chapter="length-contraction"] .lc-orient li + li { margin-top: var(--s-2); }
[data-chapter="length-contraction"] .lc-orient > :is(p, ol) + :is(p, ol) { margin-top: var(--s-3); }
[data-chapter="length-contraction"] .lc-two-books-wrap { margin-top: var(--s-3); }
[data-chapter="length-contraction"] .lc-inv-row :is(th, td) { color: var(--c-inv); font-weight: 600; border-bottom: 0; }
[data-chapter="length-contraction"] .lc-shorthand-wrap { margin: var(--s-4) 0; }
[data-chapter="length-contraction"] .lc-shorthand tbody th { font-weight: 600; }
[data-chapter="length-contraction"] .lc-shorthand .lc-key-row { background: var(--tint-inv); }
@media (max-width: 479px) { [data-chapter="length-contraction"] :is(.lc-shorthand, .lc-two-books) :is(th, td) { padding: .35em .4em; } }
[data-chapter="length-contraction"] .lc-hold { margin-top: var(--s-3); }
@media print { [data-chapter="length-contraction"] #reconcile [hidden] { display: block !important; } [data-chapter="length-contraction"] .lc-hold { display: none; } }
/* Practice "Place R′": Rae's now-line through F, drawn through the diagram engine (kind lcnow), like the rod lab's. */
[data-chapter="length-contraction"] .stx-lcnow { --k: var(--c-rocket); }
[data-chapter="length-contraction"] .stx-wl.stx-lcnow { stroke-width: 1.5; stroke-dasharray: 2 4; }