/* ───────────────────────────────────────────────────────────────────────────
   Underwater Navigation — PADUM DIVING theme.

   Tokens are the production theme's, by way of gradientfactor.padum-diving.com
   (padum.css v1.4.0): deep-ocean page gradient, white glass cards, Oswald over
   IBM Plex Sans, coral actions, 6/10/16/pill radii. The masthead, rail + stage
   shell, panels, sliders, readouts, drill checks and notes are deliberately
   identical to the regulator and photography pages — four teaching tools from
   the same shop should feel like one product, and a student who has used one
   should not have to learn where anything is a second time.

   DIAGRAM COLOURS carry meanings fixed across all four tools, and here they
   line up unusually well with the subject:

     · sky #95D1EB — what you BELIEVE. The dead-reckoned track, the compass
       reading, the swath you think you swept. It is the "what you actually
       get" colour on the regulator page and the strobe on the photography one:
       in every case, the thing the instrument tells you.
     · coral #D2564E — what is TRUE, and by implication what is going wrong.
       The real track, the real position, the gap you did not know about.
     · sun #FAC669 — the water's contribution. The current vector, the bezel
       gate, the miss line. What the sea adds without asking.

   Sky and coral are far apart under every common colour-vision deficiency, and
   that matters more here than on the other pages because the entire chart is a
   comparison of two lines. Nothing rests on hue alone anyway: the true track
   only ever appears alongside a numeric miss distance, and the legend under the
   chart names both lines in words.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* ── brand palette ── */
  --padum-ocean:  #244D78;
  --padum-sea:    #346B8F;
  --padum-lagoon: #539DB8;
  --padum-sky:    #95D1EB;
  --padum-coral:  #D2564E;
  --padum-coral-hover: #BC463F;
  --padum-sand:   #EEA570;
  --padum-sun:    #FAC669;

  --surface-page-top:  #14375A;
  --surface-page-mid:  #0E2740;
  --surface-page-deep: #0A1E33;
  --surface-card: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 100%);

  --surface-1: #0A1E33;
  --plane:     #0E2740;
  --ink:       #FFFFFF;
  --ink-2:     #D3D6DA;
  --ink-muted: #A2AAB2;
  --grid:      #233448;
  --axis:      #405060;
  --hairline:  rgba(255,255,255,.14);

  /* ── diagram roles ── */
  --c-amb:    #FAC669;
  --c-strobe: #95D1EB;
  --c-subj:   #E4F5FD;
  --c-bs:     #D2564E;

  --st-good:    #6FD48A;
  --st-warning: #FAC669;
  --st-bad:     #D2564E;

  /* ── type ── */
  --font-display: "Oswald", "DIN Condensed", "Arial Narrow", sans-serif;
  --font-ui: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --track-display: .06em;
  --track-eyebrow: .22em;
  --leading-body: 1.55;

  /* ── shape & motion ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 22px 46px rgba(4,14,26,.5), inset 0 1px 0 rgba(255,255,255,.16);
  --ring-focus: 0 0 0 3px rgba(83,157,184,.45);
  --blur-glass: saturate(130%) blur(14px);
  --ease-swell: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  --gap: 16px;
  --rail-w: 330px;
}

/* ─────────────────────────────── base ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--leading-body);
  color: var(--ink-2);
  background: var(--surface-page-deep);
  background-image: linear-gradient(180deg,
    var(--surface-page-top) 0%,
    var(--surface-page-mid) 45%,
    var(--surface-page-deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 500; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--padum-sky); text-decoration: none; }
a:hover { color: var(--ink); }
strong { color: var(--ink); font-weight: 600; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── language switching ──
   Both languages ship in the markup and CSS hides one, so a switch is a single
   attribute flip: no re-render, no flash, and the page still reads with JS off
   (it just shows both). */
html[data-lang="en"] [data-lang="th"] { display: none; }
html[data-lang="th"] [data-lang="en"] { display: none; }

/* ─────────────────────────── masthead ─────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--hairline);
}

.masthead__id { display: flex; align-items: flex-start; gap: 18px; }

.brand {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: block;
  /* The mark is a flat illustration with white keylines, so it sits on the
     dark ground unaided — no plate, no ring. */
}

.masthead .rule {
  display: block;
  width: 62px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--padum-coral);
  margin-bottom: 12px;
}

.masthead h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}
.masthead h1 em { font-style: normal; color: var(--padum-coral); }

.masthead__sub {
  margin: 10px 0 0;
  max-width: 66ch;
  color: var(--ink-muted);
  font-size: 13.5px;
}

.masthead__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chrome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.disclaimer {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
  max-width: 34ch;
  line-height: 1.7;
}
.disclaimer strong { color: var(--padum-coral); font-weight: 600; }

/* ─────────────────────────── buttons ─────────────────────────── */

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  padding: 7px 14px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-swell),
              color var(--dur-base) var(--ease-swell),
              background var(--dur-base) var(--ease-swell);
}
.ghost-btn:hover { border-color: var(--padum-coral); color: var(--ink); background: rgba(210,86,78,.14); }
.ghost-btn:active { transform: scale(.98); }
.ghost-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.ghost-btn--wide { width: 100%; margin-top: 10px; }
.ghost-btn--mini { padding: 4px 10px; font-size: 9px; margin-left: auto; }

.ghost-btn[aria-pressed="true"] {
  border-color: var(--padum-coral);
  background: var(--padum-coral);
  color: #fff;
}
.ghost-btn[aria-pressed="true"]:hover { background: var(--padum-coral-hover); border-color: var(--padum-coral-hover); }

.lang { display: flex; gap: 4px; }
.lang .ghost-btn { padding: 7px 12px; }

/* Mutually exclusive options laid out in one even row, however many there are.
   grid-auto-flow rather than a fixed column count because this page has both
   two-way and three-way switches and they should look like the same control. */
.switch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
/* Four-way choices need to wrap rather than squeeze four labels into a 330px
   rail, where each would get about sixty pixels and none would be readable. */
.switch--wrap { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.switch .ghost-btn { width: 100%; padding-left: 6px; padding-right: 6px; }

/* The shutter button. The only filled action on the page, because it is the
   only one that produces something. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--padum-coral);
  border: 1px solid var(--padum-coral);
  border-radius: var(--radius-pill);
  color: #fff;
  padding: 10px 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-swell);
}
.btn:hover { background: var(--padum-coral-hover); border-color: var(--padum-coral-hover); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* The input is a SIBLING of its label, tied by `for`, rather than sitting
   inside it. Nesting is legal HTML and it is what this used to do, but a click
   then reaches the input twice -- once directly and once forwarded by the
   label's activation behaviour -- so the box toggles on and straight back off
   and the control looks dead. Two of the five checkboxes on this page behaved
   exactly that way. An explicit `for` removes the second path entirely. */
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--ink-2);
  padding: 3px 0;
}
.check input { accent-color: var(--padum-coral); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.check label { cursor: pointer; }

/* ─────────────────────────── layout ─────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--gap) 28px 28px;
  align-items: start;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  position: sticky;
  top: var(--gap);
  max-height: calc(100vh - 2 * var(--gap));
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--axis) transparent;
}

.stage { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* ─────────────────────── panel (glass card) ─────────────────────── */

.panel, .stagecard {
  background: var(--surface-card);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.panel { padding: 18px 20px 20px; }
.stagecard { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}
.stagecard .panel__title { margin-bottom: 0; }

.panel__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--padum-sea);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.hint { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-muted); line-height: 1.45; }
.hint--tight { margin-top: 6px; }
.hint--key { color: var(--ink-2); border-left: 2px solid var(--padum-sun); padding-left: 9px; }
.hint strong { color: var(--ink-2); }
.hint em { font-style: normal; color: var(--padum-sky); }

.lede { margin: 0; font-size: 12.5px; color: var(--ink-muted); max-width: 84ch; }

/* ─────────────────────────── controls ─────────────────────────── */

.control { display: flex; flex-direction: column; gap: 7px; }
.control + .control { margin-top: 14px; }
[hidden] { display: none !important; }

.control__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.control__label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.control__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.control__value .unit { font-size: 10.5px; color: var(--ink-muted); margin-left: 3px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--grid);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--grid);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: var(--radius-pill);
  background: var(--padum-coral);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(4,14,26,.6);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--padum-coral);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(4,14,26,.6);
}
input[type="range"]:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-pill); }

.scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-muted);
}

/* Whole-stop labels under a third-stop slider. Each sits over the position it
   names because every dial list is 3n+1 long, so the whole stops fall on evenly
   spaced indices and space-between puts the labels on exactly those fractions.
   The point is that you can still count whole stops by eye; the thirds are
   somewhere to stand in between, not a finer grid to squint at. */
.scale--stops { font-size: 9px; letter-spacing: -.02em; }
.scale--stops span { flex: 0 0 auto; }

/* ─────────────────────── drill prompts ─────────────────────── */

.tries { display: flex; flex-direction: column; gap: 8px; }

.try {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-swell),
              background var(--dur-base) var(--ease-swell);
}
.try:hover { border-color: var(--padum-lagoon); background: rgba(83,157,184,.16); }
.try:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.try.is-active { border-color: var(--padum-sun); background: rgba(250,198,105,.14); }
.try__name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}
.try__note { font-size: 10.5px; color: var(--ink-muted); line-height: 1.4; }

/* ─────────────────────────── readouts ─────────────────────────── */

.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.stat {
  background: rgba(20, 55, 90, .82);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  padding: 13px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 3px solid transparent;
}
/* State is carried by border weight as much as by hue, so the three bands stay
   distinguishable without relying on red/green discrimination. */
.stat.is-good { border-left-color: var(--st-good); }
.stat.is-warn { border-left-color: var(--st-warning); }
.stat.is-bad  { border-left-color: var(--st-bad); }

.stat__label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: var(--track-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__value .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-left: 4px;
}
.stat__note { font-size: 11px; color: var(--ink-muted); line-height: 1.4; }
.stat__note strong { color: var(--ink-2); }

/* The readout the whole page is built to make visible: it must plainly NOT
   move while the shutter slider runs from one end to the other. */
.stat--pinned .stat__value { color: var(--padum-sky); }

.swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.swatch--amb    { background: var(--c-amb); }
.swatch--strobe { background: var(--c-strobe); }
.swatch--subj   { background: var(--c-subj); }
.swatch--bs     { background: var(--c-bs); }

/* ─────────────────────────── viewfinder ─────────────────────────── */

.stagecard--frame { gap: 10px; }

.viewfinder {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
}
.viewfinder canvas { display: block; width: 100%; height: 100%; }

.vf__hud {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.88);
  background: linear-gradient(180deg, rgba(6,18,30,0) 0%, rgba(6,18,30,.72) 100%);
  pointer-events: none;
}

.vf__warn {
  position: absolute;
  left: 10px; right: 10px; top: 10px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: rgba(210,86,78,.90);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.35;
  pointer-events: none;
}

/* A visible shutter. The frame is a still image, so without a flash of
   feedback there is nothing to tell you the button did anything. */
.viewfinder.is-firing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  animation: fire 260ms var(--ease-swell) forwards;
  pointer-events: none;
}
@keyframes fire { 0% { opacity: .85; } 100% { opacity: 0; } }

/* What the camera picked for itself. A readout, not a control -- it is styled
   like the HUD rather than like the rail so it never looks clickable. */
.auto-line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  border-left: 2px solid var(--padum-sea);
  padding-left: 10px;
}
.auto-line strong { color: var(--ink); font-weight: 500; }

.shootbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.verdict {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.verdict.is-good { color: var(--st-good); }
.verdict.is-warn { color: var(--st-warning); }
.verdict.is-bad  { color: var(--st-bad); }

.badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: none;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  white-space: nowrap;
}
.badge--good { color: var(--st-good); border-color: rgba(111,212,138,.45); background: rgba(111,212,138,.12); }
.badge--warn { color: var(--st-warning); border-color: rgba(250,198,105,.45); background: rgba(250,198,105,.12); }
.badge--bad  { color: var(--st-bad); border-color: rgba(210,86,78,.5); background: rgba(210,86,78,.14); }

/* ─────────────────────────── drill brief ─────────────────────────── */

.brief {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--padum-sea);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.05);
  padding: 12px 15px;
  transition: border-left-color var(--dur-base) var(--ease-swell);
}
.brief.is-passing { border-left-color: var(--st-good); }
.brief__free { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.brief__head { display: flex; align-items: baseline; gap: 10px; }
.brief__eyebrow {
  font-size: 9px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--padum-sun);
}
.brief h3 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}
.brief__text { margin: 7px 0 11px; font-size: 12.5px; color: var(--ink-muted); max-width: 80ch; }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.checks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  padding: 4px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.checks li:first-child { border-top: none; }
.checks__tick { color: var(--axis); font-size: 13px; text-align: center; }
.checks li.is-ok { color: var(--ink-2); }
.checks li.is-ok .checks__tick { color: var(--st-good); }
.checks__target { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.checks__now {
  font-size: 11.5px;
  color: var(--ink);
  min-width: 5.5ch;
  text-align: right;
  white-space: nowrap;
}
.checks li.is-ok .checks__now { color: var(--st-good); }

/* ─────────────────────── two-exposure bars ─────────────────────── */

.bars { display: flex; flex-direction: column; gap: 8px; }

.bar {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
}
.bar--sum { padding-top: 8px; border-top: 1px solid var(--hairline); margin-top: 2px; }

.bar__name {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
}
.bar--sum .bar__name { color: var(--ink-2); }

.bar__track {
  position: relative;
  display: block;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--plane);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  /* Not transitioned. A slider drag repaints this every frame, and an ease on
     top of that reads as lag rather than as smoothness — and the whole point
     is watching one bar stay still while its neighbours move. */
}
.bar__fill--amb    { background: linear-gradient(90deg, rgba(250,198,105,.35), var(--c-amb)); }
.bar__fill--strobe { background: linear-gradient(90deg, rgba(149,209,235,.35), var(--c-strobe)); }
.bar__fill--subj   { background: linear-gradient(90deg, rgba(228,245,253,.35), var(--c-subj)); }

/* Correct exposure. Everything on the chart is read against this line. */
.bar__mark {
  position: absolute;
  top: -1px; bottom: -1px;
  width: 0;
  border-left: 2px dashed rgba(255,255,255,.65);
}

.bar__val { font-size: 12px; color: var(--ink); text-align: right; }
.bar.is-off .bar__val { color: var(--axis); }

.mixline {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.mixline__label {
  font-size: 9.5px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
}
.mixline__track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--c-amb);
  overflow: hidden;
}
.mixline__fill {
  position: absolute;
  inset: 0 0 0 auto;
  background: var(--c-strobe);
}
.mixline__ends { font-size: 10.5px; color: var(--ink-muted); white-space: nowrap; }

/* ─────────────────────────── light path ─────────────────────────── */

.lightpath {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 6px;
}
.lightpath canvas { display: block; width: 100%; max-width: 620px; height: 320px; margin: 0 auto; }


/* ─────────────────────────── notes ─────────────────────────── */

.notes { columns: 300px 3; column-gap: 26px; }
.note { break-inside: avoid; margin-bottom: 20px; }
.note h3 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
.note p { margin: 0 0 9px; font-size: 12.5px; color: var(--ink-muted); }
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink-2); font-weight: 600; }
.note em { font-style: normal; color: var(--padum-sky); }
.note--warn { border-left: 3px solid var(--padum-coral); padding-left: 13px; }
.note--key  { border-left: 3px solid var(--padum-sun); padding-left: 13px; }
.note--key p { color: var(--ink-2); }

/* ─────────────────────────── footer ─────────────────────────── */

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 28px 26px;
  border-top: 1px solid var(--hairline);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.foot__id { display: flex; align-items: center; gap: 10px; }
.foot__mark { width: 26px; height: 26px; display: block; opacity: .85; }
.foot strong { color: var(--padum-coral); font-weight: 600; }

/* ─────────────────────────── narrow ─────────────────────────── */

@media (max-width: 1180px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; }
  .bar, .mixline { grid-template-columns: 150px minmax(0, 1fr) 52px; }
}

@media (max-width: 720px) {
  .masthead { padding: 22px 20px 16px; }
  .masthead__id { gap: 14px; }
  .brand { width: 48px; height: 48px; }
  .masthead .rule { width: 48px; }
  .masthead__meta { align-items: flex-start; width: 100%; }
  .disclaimer { text-align: left; max-width: none; }
  .shell { padding: var(--gap) 16px 24px; }
  .panel, .stagecard { padding: 16px; }
  .stat__value { font-size: 26px; }

  /* Bars stack: 150px of label beside a track leaves the track too short to
     read a two-stop difference off, which is the only thing the chart is for. */
  .bar, .mixline { grid-template-columns: minmax(0, 1fr) 52px; row-gap: 3px; }
  .bar__name, .mixline__label { grid-column: 1 / -1; text-align: left; }
  .mixline__ends { grid-column: 1 / -1; }

  .checks li { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 2px; }
  .checks__target { grid-column: 2 / -1; }

  .lightpath canvas { height: 260px; }
  .foot { padding: 16px 20px 24px; flex-direction: column; align-items: flex-start; gap: 8px; }

  /* 44px minimum hit target on touch. */
  .ghost-btn { min-height: 44px; }
  .switch .ghost-btn { font-size: 9px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════ navigation-specific ═══════════════════ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────── the helm ───────────────────────────
   The view and the instruments you steer it with, side by side. The compass
   has to be next to the view and not below it: holding a heading is a thing
   you do while looking at both, and a layout that makes you scroll between
   them teaches a habit that does not survive contact with water. */

.helm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 226px;
  gap: var(--gap);
  align-items: start;
}
.helm__side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.helm__side .control + .control { margin-top: 4px; }

.compass {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  touch-action: none;                 /* the bezel is a drag, not a scroll */
  cursor: grab;
}
.compass:active { cursor: grabbing; }
.compass canvas { display: block; width: 100%; height: 100%; }

/* No compass is a state the page has to show, not just a missing widget: the
   natural-navigation drills turn it off on purpose, and an empty box would
   read as a bug rather than as the point of the exercise. */
.compass.is-off { cursor: default; background: rgba(255,255,255,.04); }
.compass.is-off canvas { display: none; }
.compass__off[hidden] { display: none; }
.compass__off {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.steer { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
.steer .ghost-btn { padding: 8px 0; justify-content: center; }
.steer__hdg { display: block; }
.steer__hdg input {
  width: 100%;
  padding: 8px 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  color: var(--ink);
  -moz-appearance: textfield;
}
.steer__hdg input::-webkit-outer-spin-button,
.steer__hdg input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.steer__hdg input:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ─────────────────────────── HUD ───────────────────────────
   A dive computer's worth of numbers along the bottom of the view. Each one
   can be switched off in the rail, because "navigate without that instrument"
   is a drill and not a degraded mode. */

.vf__hud { flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; }
.hudpill { display: inline-flex; align-items: baseline; gap: 5px; }
.hudpill__k {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hudpill__v { font-size: 12.5px; color: #fff; font-variant-numeric: tabular-nums; }
.hudpill__v .unit { font-size: 9.5px; color: rgba(255,255,255,.6); margin-left: 2px; }

/* ─────────────────────────── plots ─────────────────────────── */

.plot {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 6px;
}
.plot canvas { display: block; width: 100%; height: 420px; }
.plot--tri { padding: 4px; }
.plot--tri canvas { height: 260px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legend__item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-muted);
}

.triobox {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.readouts--tri { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ─────────────────────────── the correction ───────────────────────────
   Set a course, get the heading that makes it good. Bordered rather than
   carded because it is a tool attached to the triangle above it and not a
   separate idea. */

.ferry {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ferry h3 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.ferry__out {
  margin: 0;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--axis);
  background: rgba(255,255,255,.05);
  font-size: 12.5px;
  line-height: var(--leading-body);
  color: var(--ink-2);
}
.ferry__out strong { color: var(--ink); font-weight: 600; font-family: var(--font-mono); }
.ferry__out.is-good { border-left-color: var(--st-good); }
.ferry__out.is-warn { border-left-color: var(--st-warning); }
.ferry__out.is-bad  { border-left-color: var(--st-bad); }
.ferry__warn { display: inline-block; margin-top: 6px; color: var(--padum-sun); font-size: 11.5px; }
/* The course slider is a control, not a banner: left at full stagecard width
   its label and value end up at opposite ends of a very wide row. */
.ferry .control { max-width: 460px; }
.ferry .ghost-btn--wide { margin-top: 0; }
.ferry .ghost-btn:disabled { opacity: .4; cursor: not-allowed; }
.ferry .ghost-btn:disabled:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }

/* ─────────────────────────── the slate ───────────────────────────
   The dive as a diver would have written it down. Monospaced and tabular
   because the whole value of it is that the columns line up and you can add
   the run column in your head. */

.slate {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: auto;
  background: rgba(255,255,255,.03);
  max-height: 320px;
}
.slate .hint { margin: 0; padding: 14px; }
.slate__table { width: 100%; border-collapse: collapse; font-size: 12px; }
.slate__table th {
  position: sticky; top: 0;
  background: #12293F;
  text-align: left;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline);
}
.slate__table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.slate__table tr:last-child td { border-bottom: none; }
.slate__table tr:last-child td { color: var(--ink); }
/* When a leg was flown on a ferry angle, the slate carries the course made
   good with the heading actually held beside it, smaller. Those are different
   numbers and the diver wrote down the first one. */
.slate__crab { color: var(--ink-muted); font-size: 10.5px; margin-left: 6px; }

/* ─────────────────────────── drill list ─────────────────────────── */

.try__n {
  display: inline-block;
  margin-right: 8px;
  color: var(--padum-lagoon);
  font-variant-numeric: tabular-nums;
}
.try.is-active .try__n { color: var(--padum-sun); }

.hint.is-bad { border-left-color: var(--padum-coral); color: var(--ink-2); }
.hint.is-bad strong { color: var(--padum-coral); }

/* ─────────────────────────── narrow ─────────────────────────── */

@media (max-width: 1180px) {
  .triobox { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* The compass drops under the view rather than shrinking with it: below
     about 200 px the bezel gate is smaller than a fingertip and the drag
     stops working, which turns the central interaction of the page into a
     picture of a compass. */
  .helm { grid-template-columns: 1fr; }
  .compass { max-width: 240px; margin: 0 auto; }
  .helm__side { align-items: stretch; }
}

@media (max-width: 720px) {
  .plot canvas { height: 320px; }
  .plot--tri canvas { height: 210px; }
  .slate { max-height: 260px; }
  .vf__hud { font-size: 9.5px; gap: 3px 10px; }
  .hudpill__v { font-size: 11px; }
  .steer { grid-template-columns: 52px minmax(0, 1fr) 52px; }
  .steer .ghost-btn { min-height: 44px; }
}

/* ═══════════════════ finding your way in ═══════════════════
   Added after the page was reported as "very confuse, i don't know how to
   practice at all". Everything needed was on screen and nothing said what to
   press, which is a sequencing problem rather than a missing-feature one — so
   nothing here removes a control, it just decides what you meet first. */

.welcome { display: flex; flex-direction: column; gap: 10px; }
.welcome h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.welcome p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: var(--leading-body); max-width: 76ch; }
.welcome__go { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.welcome__go .btn { padding: 11px 20px; }

.brief__label {
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* The numbered list of what to do next. The one you are on is the only one
   with any weight, because a list where every row shouts is a list nobody
   reads. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: s; }
.steps li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.steps__n {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  color: var(--axis);
}
.steps li.is-next {
  background: rgba(250,198,105,.12);
  border-left-color: var(--padum-sun);
  color: var(--ink);
}
.steps li.is-next .steps__n { color: var(--padum-sun); font-weight: 600; }
.steps li.is-done { color: var(--ink-muted); opacity: .62; }
.steps li.is-done .steps__n { color: var(--st-good); }
.steps li.is-done .steps__t { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.steps b { color: var(--ink); font-weight: 600; }
.steps li.is-done b { font-weight: 500; }

/* Folded rail sections. Everything is still one click away; it just is not all
   shouting at once on the way in. */
.fold {
  background: var(--surface-card);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.fold__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 4px 10px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}
.fold__head::-webkit-details-marker { display: none; }
.fold__head:hover { background: rgba(255,255,255,.04); }
.fold__head:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* Every child is pinned to a cell, and that is not belt-and-braces.
   The chevron alone carried `grid-row: 1 / span 2` with no column, and grid
   places row-locked items in an EARLIER pass than fully auto ones -- so the
   chevron claimed column 1 before the title was placed, the title was pushed
   into the 14px chevron column, and the heading rendered as two clipped
   letters jammed against the right edge. Auto-placement is only convenient
   while nothing has a definite position; the moment one child does, they all
   need one. */
.fold__title {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}
.fold__hint {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-muted);
}
.fold__chev {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--ink-muted);
  transition: transform var(--dur-base) var(--ease-swell);
}
.fold[open] .fold__chev { transform: rotate(180deg); }
.fold .panel {
  background: none;
  backdrop-filter: none;
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}

.steer__cap {
  display: block;
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 2px;
}

@media (max-width: 720px) {
  /* On a phone the masthead paragraph filled the entire first screen, so the
     first thing anyone saw was six lines of thesis and no way in. Clamped to
     three lines: it is still there, still says what the page is about, and the
     exercise list now starts above the fold. The full text stays on desktop,
     and nothing in it is load-bearing -- the welcome card restates the point
     in one sentence with a button under it. */
  .masthead__sub {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .masthead { padding: 18px 20px 14px; }
  .welcome h3 { font-size: 16px; }
  .welcome__go { flex-direction: column; align-items: stretch; }
  .welcome__go .btn, .welcome__go .ghost-btn { width: 100%; justify-content: center; min-height: 44px; }
  .steps li { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
}