/* Ch 2 below-decks (C02): widget and plate extras on top of plates.css; tokens only. */

[data-chapter="below-decks"] #lab-below-decks-1 .lab-stage { min-height: 600px; }
[data-chapter="below-decks"] #lab-below-decks-2 .lab-stage { min-height: 560px; }
[data-chapter="below-decks"] #lab-below-decks-3 { --lab-reserve: 480px; }
@media (max-width: 480px) { [data-chapter="below-decks"] #lab-below-decks-3 { --lab-reserve: 460px; } }
[data-chapter="below-decks"] figure.lab.is-mounted .lab-stage { min-height: 0; }

[data-chapter="below-decks"] .bd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
[data-chapter="below-decks"] .bd-row .ui-slider { flex: 1 1 240px; }
[data-chapter="below-decks"] .bd-msg { min-height: 1.45em; }
[data-chapter="below-decks"] .bd-keys { font-size: .72rem; }
[data-chapter="below-decks"] .bd-hatch { stroke: var(--rule); }
[data-chapter="below-decks"] :is(.bd-cabin-svg, .bd-mm-svg) { display: block; width: 100%; height: auto; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); font-family: var(--font-sans); overflow: hidden; }

[data-chapter="below-decks"] .bd-cabin-svg { max-width: 760px; }
[data-chapter="below-decks"] :is(.bd-sea, .bd-hull) { fill: var(--surface-2); }
[data-chapter="below-decks"] .bd-hull { stroke: var(--ink); stroke-width: 1.5; }
[data-chapter="below-decks"] .bd-room { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
[data-chapter="below-decks"] .bd-buoy { fill: var(--c-bad); stroke: var(--ink); }
[data-chapter="below-decks"] .bd-wave-fill { fill: var(--tint-light); }
[data-chapter="below-decks"] .bd-pulse { fill: none; stroke: var(--c-light); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
[data-chapter="below-decks"] .bd-hit { stroke: var(--c-light); stroke-width: 3; }
[data-chapter="below-decks"] .bd-wall { fill: var(--ink-muted); font-size: 10px; font-weight: 600; letter-spacing: .1em; }
[data-chapter="below-decks"] .bd-fly { stroke-width: 1.1; }
[data-chapter="below-decks"] .bd-cabin:not([data-experiment="ball"]) .bd-p-ball,
[data-chapter="below-decks"] .bd-cabin:not([data-experiment="pendulum"]) .bd-p-pendulum,
[data-chapter="below-decks"] .bd-cabin:not([data-experiment="light"]) .bd-p-light { opacity: .35; }
[data-chapter="below-decks"] .bd-est { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3); background: var(--tint-light); border-radius: var(--r-m); }
[data-chapter="below-decks"] .bd-est[hidden] { display: none; }
[data-chapter="below-decks"] .bd-est-input { width: 7em; min-height: 40px; padding: .3em .6em; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-s); }
[data-chapter="below-decks"] .is-hidden-value .ui-value { color: var(--c-light-text); font-weight: 700; }
[data-chapter="below-decks"] .bd-notebook summary { cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
[data-chapter="below-decks"] .bd-nb :is(td, th) { text-align: left; }
[data-chapter="below-decks"] .bd-notebook .stx-table-wrap { margin-top: var(--s-2); max-height: 13rem; }

[data-chapter="below-decks"] .bd-mm-scenes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
[data-chapter="below-decks"] .bd-mm-svg { flex: 1 1 260px; max-width: 380px; }
/* Turn row: under both drawings on a wide screen; between the apparatus and the eyepiece on a phone. */
[data-chapter="below-decks"] .bd-mm-app { order: 1; }
[data-chapter="below-decks"] .bd-mm-panel { order: 2; }
[data-chapter="below-decks"] .bd-mm-turn { order: 3; flex: 1 1 100%; }
@container (max-width: 560px) {
  [data-chapter="below-decks"] .bd-mm-svg { flex-basis: 100%; margin-inline: auto; }
  [data-chapter="below-decks"] .bd-mm-turn { order: 2; }
  [data-chapter="below-decks"] .bd-mm-panel { order: 3; }
}
[data-chapter="below-decks"] .bd-mm-mirror { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
[data-chapter="below-decks"] .bd-mm-fringe { fill: var(--c-light); opacity: .85; }
[data-chapter="below-decks"] .bd-mm-ring { fill: none; stroke: var(--ink); stroke-width: 6; }
[data-chapter="below-decks"] .bd-mm-note { font-size: 11.5px; }
[data-chapter="below-decks"] .bd-mm-bar { fill: var(--c-light); }
[data-chapter="below-decks"] .bd-mm-bar.is-you { fill: var(--c-you); }
[data-chapter="below-decks"] .bd-mm-bar.is-nature { fill: var(--ink); }
[data-chapter="below-decks"] .bd-mm-value { font-weight: 700; font-variant-numeric: tabular-nums; }
[data-chapter="below-decks"] .bd-mm-ghost { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .7; }
[data-chapter="below-decks"] .bd-mm-marker { fill: var(--c-bad); stroke: var(--surface); stroke-width: 1; }
[data-chapter="below-decks"] .bd-halo { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
[data-chapter="below-decks"] .bd-ghost { fill: none; stroke: var(--ink-muted); stroke-width: 1.2; stroke-dasharray: 4 3; }
[data-chapter="below-decks"] .bd-ghost-mark { stroke: var(--c-rocket); stroke-dasharray: none; stroke-width: 1.6; }
[data-chapter="below-decks"] .bd-lock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--c-light); background: var(--tint-light); border-radius: var(--r-s); }
[data-chapter="below-decks"] .bd-lock[hidden] { display: none; }
[data-chapter="below-decks"] .bd-lock p { margin: 0; flex: 1 1 16em; font-size: .9rem; }

[data-chapter="below-decks"] :is(.bd-plate-wood, .bd-plate-sea) { fill: var(--surface-2); }
[data-chapter="below-decks"] .bd-plate-wood { stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
[data-chapter="below-decks"] .bd-plate-paper { fill: var(--surface); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
[data-chapter="below-decks"] .bd-plate-water { fill: var(--tint-inv); stroke: var(--ink); stroke-width: 1.5; }
[data-chapter="below-decks"] .bd-plate-fish { fill: var(--c-rocket); }
[data-chapter="below-decks"] .bd-plate-gold { fill: var(--c-light); stroke: var(--ink); stroke-width: 1.25; }
[data-chapter="below-decks"] .bd-plate-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; paint-order: stroke; }
[data-chapter="below-decks"] :is(.bd-plate-faint, .bd-plate-wind, .bd-plate-cable, .bd-plate-ink) { fill: none; stroke: var(--ink-muted); stroke-width: 1; stroke-linecap: round; }
[data-chapter="below-decks"] .bd-plate-faint { stroke-dasharray: 2 4; }
[data-chapter="below-decks"] .bd-plate-wind { stroke-dasharray: 5 4; stroke-width: 1.2; }
[data-chapter="below-decks"] .bd-plate-ink { stroke: var(--ink); stroke-width: 1.5; }
[data-chapter="below-decks"] .bd-plate-read { fill: var(--c-light-text); font-family: var(--font-sans); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
[data-chapter="below-decks"] .bd-plate-head { fill: var(--ink); font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
[data-chapter="below-decks"] .bd-plate-earth { fill: var(--tint-lab); stroke: var(--c-lab); stroke-width: 1.5; }

[data-chapter="below-decks"] details.bd-stuck { margin: calc(-1 * var(--s-3)) 0 var(--s-5); padding: var(--s-2) var(--s-4); border-left: 3px solid var(--rule); font-size: .9rem; }
[data-chapter="below-decks"] details.bd-stuck summary { cursor: pointer; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; color: var(--ink-muted); }
@container (max-width: 520px) {
  [data-chapter="below-decks"] .bd-read { font-size: 26px; }
  [data-chapter="below-decks"] .bd-tag { font-size: 23px; }
  [data-chapter="below-decks"] .bd-wall { font-size: 17px; }
  [data-chapter="below-decks"] .bd-mark-tag { font-size: 18px; }
}

/* dock view: the chalk mark drawn bold, and a ring where the ball lands on it */
[data-chapter="below-decks"] .bd-mark-bold { stroke-width: 2.5; stroke-linecap: round; }
[data-chapter="below-decks"] .bd-land { fill: none; stroke: var(--c-rocket); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
[data-chapter="below-decks"] .bd-land.is-on { animation: bd-land-pop .6s ease-out both; }
@keyframes bd-land-pop { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-chapter="below-decks"] .bd-land.is-on { animation: none; } }
[data-chapter="below-decks"] .bd-secret { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 28px; padding: 0 var(--s-2); border: 1.5px dashed var(--c-light-text); border-radius: 999px; background: var(--tint-light); color: var(--c-light-text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
[data-chapter="below-decks"] .bd-secret[hidden], [data-chapter="below-decks"] .is-hidden-value .ui-range { display: none; }

/* orientation card and inline Sagredo (prologue patterns; docs/redesign/below-decks.md §3.1, §3.3) */
[data-chapter="below-decks"] .bd-orient { margin: var(--s-6) 0; max-width: 40rem; }
[data-chapter="below-decks"] .bd-orient ol { margin: var(--s-3) 0 0; padding-left: 1.5em; }
[data-chapter="below-decks"] .bd-orient li + li { margin-top: var(--s-2); }
[data-chapter="below-decks"] .bd-orient > :is(p, ol) + :is(p, ol) { margin-top: var(--s-3); }
[data-chapter="below-decks"] .sagredo.bd-inline { float: none; clear: none; width: auto; margin: var(--s-4) 0; padding: var(--s-1) 0 var(--s-1) var(--s-3); font-size: 1rem; }
[data-chapter="below-decks"] .reconcile .bd-reveal-note { font-size: .9rem; color: var(--ink-muted); }
/* Reconcile gate (below-decks.js gateReconcileCards): closed from first paint when scripts run; open as written
   without them. The verdict pill waits for the card too, so it can't give the answer away. */
@media (scripting: enabled) {
  [data-chapter="below-decks"] #reconcile .reconcile[data-predict]:not(.is-open) > :not(.reconcile-you, .bd-reveal-note, .bd-reveal) { display: none; }
}
@media (scripting: none) {
  [data-chapter="below-decks"] #reconcile :is(.bd-reveal-note, .bd-reveal) { display: none; }
}
[data-chapter="below-decks"] #reconcile .reconcile[data-predict]:not(.is-open) .reconcile-you :is(.pill, .reconcile-meta) { display: none; }

/* Before a lab mounts, a neutral placeholder: the stage's fallback text (which states the results) is for
   no-script, print and a failed mount only. */
@media (scripting: enabled) {
  [data-chapter="below-decks"] figure.lab:not(.mount-failed) > .lab-stage > .fallback { display: none; }
  [data-chapter="below-decks"] figure.lab:not(.is-mounted):not(.mount-failed) > .lab-stage::before {
    content: "The lab is loading…"; display: block; padding: var(--s-5); text-align: center;
    color: var(--ink-muted); font-family: var(--font-sans); font-size: .85rem;
  }
}

/* The checkpoint's "Feedback waits until you submit" note is stale once it has been submitted (shared fix requested). */
[data-chapter="below-decks"] .cp-footer:has(.cp-submit[hidden]) .cp-note { display: none; }

/* cabin dock view: the drip's trail dashed, so ball and drip read apart */
[data-chapter="below-decks"] .bd-trail-drip { stroke-dasharray: 3 4; opacity: .6; }
[data-chapter="below-decks"] .bd-trail-tag { font-size: 15px; }
@container (max-width: 520px) { [data-chapter="below-decks"] .bd-trail-tag { font-size: 21px; } }
[data-chapter="below-decks"] .bd-view-note { margin-top: calc(-1 * var(--s-2)); font-size: .8rem; }
[data-chapter="below-decks"] .bd-view-note[hidden] { display: none; }

/* falling room (below-decks-falling-room) */
[data-chapter="below-decks"] .bd-fr-scenes { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; }
[data-chapter="below-decks"] .bd-fr-room { flex: 1 1 300px; max-width: 640px; }
[data-chapter="below-decks"] .bd-fr-far { flex: 1 1 160px; max-width: 210px; }
[data-chapter="below-decks"] :is(.bd-fr-room, .bd-fr-far) { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); font-family: var(--font-sans); }
[data-chapter="below-decks"] :is(.bd-fr-far, .bd-fr-tidal)[hidden] { display: none; }
[data-chapter="below-decks"] .bd-fr-wall { fill: var(--surface-2); stroke: var(--rule); }
[data-chapter="below-decks"] .bd-fr-mark { fill: var(--ink-muted); font-size: 10px; font-weight: 600; }
[data-chapter="below-decks"] .bd-fr-ball { fill: var(--c-rocket); }
[data-chapter="below-decks"] .bd-fr-ghost { fill: none; stroke: var(--c-rocket); stroke-width: 1.2; stroke-dasharray: 2 2; }
[data-chapter="below-decks"] .bd-fr-gap { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 2; }
[data-chapter="below-decks"] .bd-fr-earth { fill-opacity: .55; }
[data-chapter="below-decks"] .bd-fr-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
[data-chapter="below-decks"] .bd-fr-ticks { grid-column: 2; position: relative; height: 1.2em; margin-top: calc(-1 * var(--s-2)); font-size: .72rem; color: var(--ink-muted); }
[data-chapter="below-decks"] .bd-fr-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
[data-chapter="below-decks"] .bd-fr-ticks span.is-start { transform: translateX(-.35em); }
[data-chapter="below-decks"] .bd-fr-ticks span:first-child { transform: none; }
[data-chapter="below-decks"] .bd-fr-ticks span:last-child { transform: translateX(-100%); }
[data-chapter="below-decks"] .stx-checks label.is-disabled { opacity: .5; cursor: not-allowed; }
@container (max-width: 520px) {
  [data-chapter="below-decks"] .bd-fr-far { flex-basis: 100%; max-width: none; max-height: 190px; }
  [data-chapter="below-decks"] .bd-fr-room .p-annot { font-size: 16px; }
  [data-chapter="below-decks"] .bd-fr-room .bd-plate-head { font-size: 15px; }
  [data-chapter="below-decks"] .bd-fr-mark { font-size: 12px; }
}
@container (max-width: 420px) { [data-chapter="below-decks"] .bd-fr-ticks { grid-column: 1; } }