/* ───────────────────────────────────────────────────────────────────────────
   Buoyancy Trainer — 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 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.

   This page was designed away from the site, against a placeholder palette of
   abyssal navy and a single aqua accent. That aqua did three different jobs at
   once — button, data line, alarm — and this theme has a separate colour for
   each of them already, so it is split rather than substituted:

   DIAGRAM COLOURS, carrying the same meanings as in the other three tools:

     · sky  #95D1EB — lift. The wing, the lungs, the depth trace: anything
       holding you up, and "what you actually get", as in the regulator page.
     · sea  #346B8F — weight. Lead and body, the two things that never argue.
     · sun  #FAC669 — the neoprene, and caution. It is the ambient/reference
       colour everywhere else on the site, and here it is the lift you are
       quietly losing on the way down.
     · coral #D2564E — the thing going wrong. Rate alarms, excursions outside
       the band, rule violations, and every primary action.

   Sun and coral are only ~ΔE 9 apart under deuteranopia, so nothing rests on
   hue alone: every bar is labelled, every stat carries its number, and the
   in-band / drifting / alarm states change border weight as well as colour.

   Dark only, like the rest of the site.
   ─────────────────────────────────────────────────────────────────────────── */

: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;
  --grid:      #233448;
  --axis:      #405060;
  --ink:       #FFFFFF;
  --ink-2:     #D3D6DA;
  --ink-muted: #A2AAB2;
  --hairline:  rgba(255,255,255,.14);

  /* ── status ── */
  --st-good:    #6FD48A;
  --st-warning: #FAC669;
  --st-bad:     #D2564E;

  /* ── diagram roles (see the header) ── */
  --c-lift:   #95D1EB;
  --c-weight: #346B8F;
  --c-suit:   #FAC669;
  --c-alarm:  #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-base: 200ms;
  --dur-fast: 120ms;

  --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; }
/* .ghost-btn sets display:inline-flex, which outranks the UA's [hidden]
   rule — so hiding a button by attribute needs saying again, louder. */
[hidden] { display: none !important; }
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; }

/* ── 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). Text painted into a <canvas> does NOT ride this — the
   app repaints those by hand on a switch. */
html[data-lang="en"] [data-lang="th"] { display: none; }
html[data-lang="th"] [data-lang="en"] { display: none; }

/* ── view switching ──
   Same idea one level up: all four screens ship in the markup and the router
   flips one attribute on <html>. No template engine, no re-render. */
html[data-view="picker"]   .view:not(.view--picker),
html[data-view="sandbox"]  .view:not(.view--dive),
html[data-view="exercise"] .view:not(.view--dive),
html[data-view="debrief"]  .view:not(.view--debrief) { display: none; }

/* Bits of the dive screen that only belong to a scored run, or only to the
   free sandbox. One screen, two modes — the instruments are the same. */
html:not([data-view="exercise"]) [data-only="exercise"] { display: none; }
html[data-view="exercise"] [data-only="sandbox"] { 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: 62ch;
  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--sm { padding: 5px 11px; font-size: 9.5px; }
.ghost-btn--wide { width: 100%; }

.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); }
.ghost-btn[disabled] { opacity: .4; cursor: not-allowed; }

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

.switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.switch--3 { grid-template-columns: repeat(3, 1fr); }
.switch .ghost-btn { width: 100%; }

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

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

.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; }

/* The column and the trace, side by side. They are a cause and its effect, and
   stacking them meant scrolling between the two halves of the same sentence.

   The cards stretch to a common bottom. The trace card carries a paragraph the
   column card does not — about 72 px of it — and rather than pad the column out
   with empty card, the water column canvas takes the difference. The spare
   height goes into more depth to look at, which is the only place on this row
   it is worth anything. */
.dive-pair {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: var(--gap);
  align-items: stretch;
}
.dive-pair__note { grid-column: 1 / -1; }
.dive-pair__note .hint { margin: 0; }

/* Anchor both plots to the foot of their card. The cards are already equal
   height, so a plot flush to the bottom of each lands on the same line as its
   neighbour — and it stays there even when one title wraps to two lines and
   the other does not, which is what happens around 1280 and 950 where the
   trace's heading plus its lag readout no longer fit on one line. Aligning the
   canvases directly is sturdier than trying to keep two headings the same
   height at every width. */
.dive-pair > .stagecard > .plot { margin-top: auto; }

/* ─────────────────────── 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);
}
.panel__aside { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-muted); }

.hint { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-muted); line-height: 1.45; }
.hint strong { color: var(--ink-2); }
.hint em { font-style: normal; color: var(--padum-sun); font-variant-numeric: tabular-nums; }

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

.control { display: flex; flex-direction: column; gap: 7px; }
.control + .control { margin-top: 14px; }

.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);
}
.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);
}

/* ─────────────────────── "try this" 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__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(150px, 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;
}

.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; }

/* The readout the whole page is built around. Net buoyancy is the only number
   that moves the diver, so it is the only one that changes colour — and it
   changes border weight too, because colour alone is not a signal. */
.stat--net { border-left: 3px solid transparent; }
.stat--net.is-good  { border-left-color: var(--st-good); }
.stat--net.is-drift { border-left-color: var(--st-warning); }
.stat--net.is-alarm { border-left-color: var(--st-bad); }
.stat--net.is-good  .stat__value { color: var(--st-good); }
.stat--net.is-drift .stat__value { color: var(--st-warning); }
.stat--net.is-alarm .stat__value { color: var(--st-bad); }

.swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.swatch--lift   { background: var(--c-lift); }
.swatch--weight { background: var(--c-weight); }
.swatch--suit   { background: var(--c-suit); }
.swatch--alarm  { background: var(--c-alarm); }

/* ─────────────────────────── canvases ─────────────────────────── */

.plot {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--plane);
  border: 1px solid var(--hairline);
}
/* The paired plots take a shared explicit height so their two cards line up;
   the full-width ones keep an aspect ratio. The column is portrait now, which
   is what a half-width slot wants and what the original artboard had — a
   vertical strip of water with the depth scale down its side. */
.plot--trace  { height: clamp(300px, 42vh, 460px); }
/* One height for both plots. The paired cards hold identical content — a title
   and a canvas, nothing else — so equal canvases mean the two dark rectangles
   end on the same line, which is the edge the eye actually reads. The card
   edges land together as a consequence.

   NEVER give these canvases `height: auto`. A <canvas> with an automatic height
   sizes itself from the aspect ratio of its own backing store, and fit() in
   render.js rewrites that backing store from the height it just measured; the
   two chase each other about a pixel per repaint and never converge. */
.plot--column,
.plot--trace  { height: clamp(300px, 42vh, 460px); }
.plot--band   { aspect-ratio: 16 / 6; }
.plot--debrief { aspect-ratio: 16 / 6; }

/* ──────────────────── the buoyancy breakdown bar ──────────────────── */

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

.bar {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
}
.bar__name { font-size: 11.5px; color: var(--ink-muted); }
.bar__track { position: relative; height: 14px; }
/* The zero line is the whole point of a diverging bar: everything to the right
   of it is holding you up, everything to the left is taking you down. */
.bar__track::before {
  content: "";
  position: absolute;
  left: 50%; top: -1px; bottom: -1px;
  width: 1px;
  background: var(--axis);
}
.bar__fill {
  position: absolute;
  top: 2px;
  height: 10px;
  border-radius: 2px;
  transition: width var(--dur-fast) linear, left var(--dur-fast) linear, right var(--dur-fast) linear;
}
.bar__val {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.bar--net { border-top: 1px solid var(--hairline); padding-top: 6px; margin-top: 3px; }
.bar--net .bar__name { color: var(--ink); font-weight: 600; }
.bar--net .bar__val { color: var(--ink); font-weight: 600; }

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

/* ─────────────────────────── gauge tiles ─────────────────────────── */

.gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.gauge {
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.gauge--warn { border-color: var(--st-warning); }
.gauge--alarm { border-color: var(--st-bad); }
.gauge__label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.gauge--warn .gauge__label { color: var(--st-warning); }
.gauge--alarm .gauge__label { color: var(--st-bad); }
.gauge__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-top: 4px;
}
.gauge__value .unit { font-family: var(--font-ui); font-size: 10.5px; font-weight: 400; color: var(--ink-muted); margin-left: 4px; }
.gauge--warn .gauge__value { color: var(--st-warning); }
.gauge--alarm .gauge__value { color: var(--st-bad); }

/* ─────────────────────────── the pad ───────────────────────────────
   Four controls a diver actually has. They are hold-to-act, not click-to-
   toggle, because that is what an inflator is — and because the delay only
   teaches anything if you can feel how long you held it. */

.pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 52px;
  padding: 9px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: background var(--dur-fast) var(--ease-swell), border-color var(--dur-fast) var(--ease-swell);
}
.key:hover { border-color: var(--padum-lagoon); }
.key:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.key__name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}
.key__hint { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-muted); }
.key[aria-pressed="true"] { background: rgba(149,209,235,.22); border-color: var(--padum-sky); }
.key[aria-pressed="true"] .key__name { color: var(--padum-sky); }
.key--kick[aria-pressed="true"] { background: rgba(210,86,78,.22); border-color: var(--padum-coral); }
.key--kick[aria-pressed="true"] .key__name { color: var(--padum-coral); }
.key[disabled] { opacity: .38; cursor: not-allowed; }
.key--wide { grid-column: 1 / -1; }

/* ─────────────────────────── the coach ─────────────────────────── */

.coach {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  background: rgba(255,255,255,.05);
  padding: 12px 14px;
  min-height: 74px;
}
.coach--good  { border-left-color: var(--st-good); }
.coach--drift { border-left-color: var(--st-warning); }
.coach--warn  { border-left-color: var(--st-warning); }
.coach--wait  { border-left-color: var(--padum-sky); }
.coach--alarm { border-left-color: var(--st-bad); }

.coach__mark {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
}
.coach__body { min-width: 0; }
.coach__eyebrow {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.coach__line { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ─────────────────────────── rule chips ─────────────────────────── */

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.chip--rule  { color: var(--padum-sun); border-color: rgba(250,198,105,.5); }
.chip--pass  { color: var(--st-good); border-color: rgba(111,212,138,.6); }
.chip--fail  { color: var(--st-bad); border-color: rgba(210,86,78,.6); }

/* ─────────────────────── live metrics list ─────────────────────── */

.metrics { display: flex; flex-direction: column; gap: 0; }
.metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 11.5px;
  color: var(--ink-muted);
}
.metric:last-child { border-bottom: 0; }
.metric__value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.metric.is-bad .metric__value { color: var(--st-bad); }
.metric.is-good .metric__value { color: var(--st-good); }

/* progress meter — used for time-in-band and for the run clock */
.meter { height: 4px; border-radius: var(--radius-pill); background: var(--grid); overflow: hidden; margin-top: 8px; }
.meter__fill { height: 100%; background: var(--st-good); transition: width var(--dur-fast) linear; }
.meter__fill--clock { background: var(--padum-sky); }

/* ─────────────────────────── the picker ─────────────────────────── */

.lede {
  max-width: 74ch;
  font-size: 15px;
  color: var(--ink-2);
  margin: 0 0 18px;
}

.entries { display: flex; flex-direction: column; gap: 10px; }

/* Deliberately the hub's own card. `site/styles.css` is never served under
   /buoyancy/, so these rules are copied rather than linked — the shape is the
   contract, not the file. */
.entry {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  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);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-swell),
              transform var(--dur-base) var(--ease-swell);
}
.entry:hover { border-color: var(--padum-lagoon); transform: translateY(-1px); }
.entry:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.entry__mark {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.entry__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.entry__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.entry__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}
.entry__num { font-family: var(--font-mono); font-size: 11px; color: var(--padum-sky); }
.entry__blurb { font-size: 12.5px; color: var(--ink-muted); max-width: 72ch; }
.entry__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}
.entry__best { text-align: right; }
.entry__best .n {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--st-good);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.entry__best .l {
  display: block;
  font-size: 9px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--padum-coral);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  white-space: nowrap;
}
.entry:hover .open-btn { background: var(--padum-coral-hover); }

.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}

/* ─────────────────────────── the debrief ─────────────────────────── */

.verdict { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.verdict__score {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.verdict__body { min-width: 0; flex: 1; }
.verdict__line {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}
.verdict__meta { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-top: 5px; }
.verdict__acts { display: flex; gap: 8px; flex-wrap: wrap; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.card {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.card--good { border-left-color: var(--st-good); }
.card--warn { border-left-color: var(--st-warning); }
.card--bad  { border-left-color: var(--st-bad); }
.card__label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.card__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.card__value .unit { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-left: 4px; }
.card__note { font-size: 10.5px; color: var(--ink-muted); margin-top: 4px; line-height: 1.4; }

.findings { display: flex; flex-direction: column; gap: 12px; }
.finding { display: flex; gap: 12px; align-items: flex-start; }
.finding__n {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--padum-sea);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.finding--bad .finding__n { background: var(--padum-coral); }
.finding--good .finding__n { background: #3f7d55; }
.finding__text { font-size: 12.5px; color: var(--ink-muted); line-height: 1.55; }

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

.notes { columns: 280px 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 code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: rgba(255,255,255,.10);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink);
}
.note--warn { border-left: 3px solid var(--padum-coral); padding-left: 13px; }
.note--key  { border-left: 3px solid var(--padum-sun); padding-left: 13px; }

/* ─────────────────────────── 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: 1100px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; overflow: visible; }
}

/* Below this the two plots are each too narrow to read, so they stack. Once
   stacked there is no sibling to match, so the column stops flexing and takes
   a height again — left on `auto` a canvas falls back to the aspect ratio of
   its own backing store, which feeds its width back into its height and grows
   without bound. */
@media (max-width: 900px) {
  .dive-pair { grid-template-columns: minmax(0, 1fr); }
}

@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; }
  .plot--column { height: 380px; }
  .plot--trace { height: 300px; }
  .plot--band, .plot--debrief { aspect-ratio: 4 / 3; }
  .bar { grid-template-columns: 58px minmax(0, 1fr) 48px; gap: 8px; }
  .bar-scale { padding-left: 66px; padding-right: 56px; }
  .entry { flex-direction: column; gap: 12px; }
  .entry__aside { flex-direction: row; align-items: center; width: 100%; }
  .verdict__score { font-size: 48px; }
  .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; }
  .key { min-height: 60px; }
  .open-btn { min-height: 44px; padding: 8px 18px; }
}

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