/* ==========================================================================
 * GENERATED. Do not edit.
 * ==========================================================================
 *
 *   node scripts/extract-product-ui.mjs
 *
 * Lifted verbatim from the files the vessel shell actually loads:
 *   client/design/tokens.css
 *   client/shells/vessel/src/vessel.css
 *
 * The tablet on the marketing site is styled by the product's own stylesheet,
 * so it cannot quietly become a prettier version of the real thing. If a
 * screen here looks wrong, the screen in the product looks wrong -- fix it
 * there and run this again.
 *
 * The density block is included: the vessel shell stamps data-density="ship"
 * in its markup, always, and the capture UI is sized for a gloved hand on a
 * pitching deck. Rendering it at desk density would be showing a screen no
 * crew member has ever seen.
 * ======================================================================== */

:root {
  /* -- density (design-system 1.4). Shore is 1.0; ship is 1.6. ------------ */
  --space-unit: 4px;
  --density-scale: 1;

  --space-1: calc(var(--space-unit) * 1 * var(--density-scale));
  --space-2: calc(var(--space-unit) * 2 * var(--density-scale));
  --space-3: calc(var(--space-unit) * 3 * var(--density-scale));
  --space-4: calc(var(--space-unit) * 4 * var(--density-scale));
  --space-5: calc(var(--space-unit) * 5 * var(--density-scale));
  --space-6: calc(var(--space-unit) * 6 * var(--density-scale));
  --space-8: calc(var(--space-unit) * 8 * var(--density-scale));
  --space-12: calc(var(--space-unit) * 12 * var(--density-scale));

  /* Absolute per density, never derived: a target size is a physical
   * guarantee and must not be a rounding artefact. */
  --control-h-sm: 28px;
  --control-h-md: 32px;
  --control-h-lg: 40px;
  --control-h-xl: 48px;
  --table-row-h: 32px;
  --touch-min: 32px;
  /* Transparent padding *outside* a control's visible edge. Zero ashore, where
   * a pointer lands where the user aimed it; `design-system.md` §1.4 sets 8px
   * under ship density, because a gloved contact patch is around 20mm and its
   * centroid lands low and right of where the user believes they pressed.
   *
   * Declared here at its shore value so the family is complete; the ship
   * override is below, under `[data-density="ship"]`. */
  --hit-slop: 0px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  /* Card radius. Larger than `--radius-lg` on purpose: it is the corner of a
   * *surface*, not of a control, and the two reading as one radius is what
   * made every block on the page read as the same kind of object. */
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-full: 999px;

  /* The rail's two widths. Collapsed keeps the icons and drops the labels;
   * it is never zero, because a rail that vanishes leaves no way back. */
  --rail-w: 232px;
  --rail-w-collapsed: 64px;

  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* -- elevation (design-system 1.5), layered by role, not by depth number. --
   *
   * Two channels, always both present, because neither works in both themes.
   * In light a shadow does the work. In dark a shadow is near-invisible and
   * `--surface-raised` being lighter than `--surface-card` does it instead --
   * which is why the ring is part of the token rather than an extra class. */
  --elev-flat: none;
  --elev-raised:
    0 1px 2px rgba(11, 17, 24, 0.08), 0 0 0 1px var(--border-subtle);
  --elev-float:
    0 4px 12px rgba(11, 17, 24, 0.12), 0 0 0 1px var(--border-subtle);
  --elev-modal: 0 16px 48px rgba(11, 17, 24, 0.22);
  /* A card at rest. Almost no blur close in and a long, very light spread --
   * enough to lift a panel off the page ground without the drop-shadow look
   * that makes a dashboard read as a stack of loose paper. Re-stepped for dark
   * below, where a shadow is invisible and a hairline ring does the work. */
  --elev-card:
    0 1px 2px rgba(16, 26, 38, 0.04), 0 18px 40px -28px rgba(16, 26, 38, 0.5);
  /* A stat tile's mark carries a shadow in its own tone. Set per tile from
   * `--tone-b`, which is why the token holds only the geometry. */
  --elev-tone: 0 8px 18px -8px;

  /* -- type (design-system 1.3). One family, never fetched. -------------- */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-display: 32px;
  --text-h1: 24px;
  --text-h2: 19px;
  --text-h3: 16px;
  --text-body: 14px;
  --text-label: 13px;
  --text-caption: 12px;
  --text-micro: 11px;

  /* The ramp's second column, which was published in design-system 1.3 and
   * never wired up here. Every step has a stated leading -- 32/38, 24/30,
   * 19/26 -- and rendering the whole page at one inherited line height is a
   * large part of why it read as undifferentiated: a 32px number on 21px of
   * leading is a headline, and the same number on 1.5 is a paragraph. */
  --line-display: 38px;
  --line-h1: 30px;
  --line-h2: 26px;
  --line-h3: 22px;
  --line-body: 1.5;
  --line-label: 18px;
  --line-caption: 16px;
  --line-micro: 14px;

  /* Weights, named. `--text-body-strong` in the ramp is the body size at 600;
   * it is a weight rather than a size, so it is expressed as one. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  /* Uppercase tracking. design-system 1.3: `0` for body, `+0.02em` for
   * uppercase labels. Micro badge text takes more, as it always has. */
  --track-label: 0.02em;
  --track-micro: 0.08em;

  /* The sticky offset. Group heads carry the claim that qualifies every row
   * beneath them, so they stick under the topbar rather than scrolling away --
   * a row read with its qualifier off-screen is read under no qualifier at all,
   * which is the failure the grouping exists to prevent. */
  --topbar-h: 57px;

  /* -- LIGHT roles. The full palette is defined here on bare `:root` so that
   * no colour has its only definition inside a media query. ---------------- */
  --surface-page: #eef2f6;
  --surface-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #e4eaf1;
  --surface-overlay: rgba(11, 17, 24, 0.55);
  /* Was defined ONLY inside the two dark blocks, which is the defect this
   * file's own header names: a colour whose only definition is inside a media
   * query resolves to nothing in the other theme. */
  --surface-chart: #f7f9fb;

  /* -- the console rail. A dark rail against a light page. ----------------
   *
   * Four tokens rather than hexes in `console.css`, for the reason this file's
   * header gives: a colour written into a shell stylesheet is a second palette
   * that only shows up when the first one is missing. They are defined in all
   * three theme blocks below, so the rail is never the thing that resolves to
   * nothing when somebody switches theme.
   *
   * The rail stays dark in **both** themes, and that is deliberate rather than
   * lazy. It is chrome, not content: an operator reads the page and navigates
   * the rail, and a rail that inverted with the page would make the one fixed
   * landmark on screen move. The dark mode values are darker than the light
   * mode ones so the rail still sits *behind* a dark page rather than glowing
   * out of it. */
  --surface-rail: #101a26;
  --surface-rail-raised: #1a2634;
  --text-on-rail: #e8eef5;
  --text-on-rail-muted: #93a3b6;

  --text-primary: #0d1520;
  --text-secondary: #3d4a5c;
  --text-muted: #5c6b7f;
  --text-on-accent: #ffffff;

  --border-subtle: #dde4ec;
  --border-strong: #b6c2d0;
  --border-focus: #0b5fbf;

  --accent: #0b5fbf;
  --accent-hover: #1a6fd4;
  --accent-wash: #e6f0fc;

  --feedback-info: #0b5fbf;
  --feedback-success: #0d6b53;
  --feedback-warning: #7a5800;
  --feedback-danger: #941814;

  /* The readiness scale -- validated light values, design-system 1.2.2. */
  --readiness-ready-mark: #148064;
  --readiness-ready-ink: #0d6b53;
  --readiness-ready-wash: #e2f2ec;
  --readiness-gaps-mark: #c28a00;
  --readiness-gaps-ink: #7a5800;
  --readiness-gaps-wash: #faf0d8;
  --readiness-notready-mark: #941814;
  --readiness-notready-ink: #941814;
  --readiness-notready-wash: #fbe6e4;
  --readiness-unknown-mark: #5c6b7f;
  --readiness-unknown-ink: #3d4a5c;
  --readiness-unknown-wash: #eef2f6;

  /* Brand marks, from the brochure. These carry no measured readiness claim
   * and are used only as eyebrow labels, hairlines and emphasis strokes. */
  --brand-eyebrow: #8a6a1f;
  --brand-stroke: #16697f;

  /* -- categorical series (data-viz).
   *
   * Six slots, assigned in fixed order and NEVER cycled: colour follows the
   * entity, not its rank, so a filter that removes a series must not repaint
   * the survivors. A seventh series folds into "Other" or becomes small
   * multiples rather than getting a generated hue.
   *
   * **Deliberately disjoint from the readiness scale.** Those four steps are a
   * status palette and are reserved: reusing `--readiness-gaps-mark` as
   * "series 4" would make a bar meaning *chapter 7* the same colour as a bar
   * meaning *GAPS*, on a screen that carries both.
   *
   * Validated, not eyeballed. `scripts/validate_palette.js` from the data-viz
   * method, against this file's own card surfaces:
   *   light on #ffffff -- lightness PASS, chroma PASS, CVD worst adjacent
   *     dE 9.1 (protan), normal-vision worst 19.6, contrast WARN on three
   *     slots below 3:1.
   *   dark on #18212b -- all six checks PASS, CVD worst adjacent dE 8.4.
   *
   * The light-mode contrast WARN is discharged rather than ignored: every
   * chart in this shell carries a legend with the count beside each name, and
   * no chart encodes anything by colour alone. That is the "visible labels"
   * relief the check requires, and it is why the legend is not optional.
   *
   * Dark is SELECTED, not derived -- the same six hues re-stepped against the
   * dark card, exactly as the readiness scale is. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #4a3aa7;

  /* Untrusted text -- CF-32's container. Shape carries it, not tint: mono
   * face, left rule, drawn quotation glyphs, a distinct fill. The tint is the
   * fourth channel here for the same reason colour is on the readiness scale. */
  /* -- stat-tile tones -----------------------------------------------------
   *
   * Four gradients, one per tile, and they are decoration rather than meaning:
   * the figure under each stays `--text-primary`, because a number that takes
   * its colour from its category reads as a status and none of these four are
   * statuses. They are here rather than reused from `--series-*` because those
   * are categorical *data* colours, and repainting a chart by editing a tile
   * would be the wrong coupling.
   * ---------------------------------------------------------------------- */
  --tone-register-a: #4a9bf5;
  --tone-register-b: #1d5fd0;
  --tone-declarations-a: #2fc08a;
  --tone-declarations-b: #0d8f61;
  --tone-inspections-a: #fb9a4b;
  --tone-inspections-b: #e2620f;
  --tone-contact-a: #a78bfa;
  --tone-contact-b: #6d3fe0;

  /* -- the drawn seascapes -------------------------------------------------
   *
   * `SeaScene` and `SunsetScene` in `icons.tsx` are drawn, not photographed.
   * The design of record carries stock photographs in the header and on the
   * reports card, and a fixed exposure cannot re-step for the dark theme: the
   * same sunrise behind a dark UI is a lit rectangle in a dark room, and 03:00
   * is a real hour for this audience to be reading this screen. Naming the
   * scene's colours here is what makes re-stepping possible at all.
   * ---------------------------------------------------------------------- */
  --scene-sky-top: #cfe3f7;
  --scene-sky-bottom: #f6fafe;
  --scene-sun: #fff6de;
  --scene-sea-far: #c3dcf2;
  --scene-sea-near: #a9cae9;
  --scene-hull: #8fb0d2;

  --scene-dusk-top: #10243f;
  --scene-dusk-mid: #d9793c;
  --scene-dusk-sun: #ffd7a0;
  --scene-dusk-sea-far: #a85c33;
  --scene-dusk-sea-near: #12283f;
  --scene-dusk-hull: #071523;

  --untrusted-surface: #f6f2e9;
  --untrusted-rule: #7a5800;
  --untrusted-ink: #3a2f16;
}

.tablet, .shore-screen, .product-mount {
  --elev-card: 0 0 0 1px var(--border-subtle);

  --surface-page: #071320;
  --surface-card: #0e2033;
  --surface-raised: #132a3e;
  --surface-sunken: #050e18;
  --surface-chart: #0b1c2d;

  /* Darker than the light-theme rail, so it reads as behind the page rather
   * than on top of it. See the light block for why it stays dark at all. */
  --surface-rail: #050e18;
  --surface-rail-raised: #0e2033;
  --text-on-rail: #eaf3fb;
  --text-on-rail-muted: #8aa3b8;

  --text-primary: #ffffff;
  --text-secondary: #9fb6c9;
  --text-muted: #8aa3b8;
  --text-on-accent: #0b1118;

  --border-subtle: #1c3a54;
  --border-strong: #4478a0;
  --border-focus: #5fd8f0;

  --accent: #29b6d8;
  --accent-hover: #5fd8f0;
  --accent-wash: #0d2f45;

  --feedback-info: #4d9df0;
  --feedback-success: #4fc39d;
  --feedback-warning: #e0b445;
  --feedback-danger: #ff8b8b;

  --readiness-ready-mark: #22886a;
  --readiness-ready-ink: #4fc39d;
  --readiness-ready-wash: #12302a;
  --readiness-gaps-mark: #b68c10;
  --readiness-gaps-ink: #e0b445;
  --readiness-gaps-wash: #2e2712;
  --readiness-notready-mark: #d24444;
  --readiness-notready-ink: #ff8b8b;
  --readiness-notready-wash: #33191c;
  --readiness-unknown-mark: #6b7d93;
  --readiness-unknown-ink: #a3b1c0;
  --readiness-unknown-wash: #16283a;

  --brand-eyebrow: #e8a33d;
  --brand-stroke: #29b6d8;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #9085e9;

  --tone-register-a: #3d84d8;
  --tone-register-b: #1a4f9e;
  --tone-declarations-a: #26a074;
  --tone-declarations-b: #0b7150;
  --tone-inspections-a: #d3803e;
  --tone-inspections-b: #b04f0c;
  --tone-contact-a: #8b74d6;
  --tone-contact-b: #5732b4;

  --scene-sky-top: #16283e;
  --scene-sky-bottom: #0f1b28;
  --scene-sun: #2c405a;
  --scene-sea-far: #16283c;
  --scene-sea-near: #101d2c;
  --scene-hull: #24384f;

  --scene-dusk-top: #060f1c;
  --scene-dusk-mid: #8a4a24;
  --scene-dusk-sun: #c9945c;
  --scene-dusk-sea-far: #6b3a20;
  --scene-dusk-sea-near: #08131f;
  --scene-dusk-hull: #030a12;

  --untrusted-surface: #221d10;
  --untrusted-rule: #e0b445;
  --untrusted-ink: #f0e3c4;
}

.tablet {
  /* §1.4: spacing derives, so nothing is authored twice. */
  --density-scale: 1.6;

  /* Absolute, per the rule above. §1.4's ship column, exactly. */
  --control-h-sm: 48px;
  --control-h-md: 56px;
  --control-h-lg: 64px;
  --control-h-xl: 72px;
  --touch-min: 56px;

  /* 8px of transparent padding outside every control's visible edge. A gloved
   * contact patch is around 20 mm and its centroid lands low and right of where
   * the user believes they pressed; this recovers most of that overshoot
   * without moving anything on screen. */
  --hit-slop: 8px;

  /* §1.4: "n/a -- ship has no tables". `DataTable` becomes `CardList`, which is
   * one of the six closed structural exceptions in §3.4. The token is held at
   * a sane value rather than removed, because a stylesheet that still reads it
   * should get a row height a thumb could hit if it ever renders one. */
  --table-row-h: 56px;

  /* §1.3's second column. Same steps, a higher floor -- ship truncates the
   * bottom of the ramp rather than inventing new sizes. */
  --text-display: 34px;
  --text-h1: 26px;
  --text-h2: 21px;
  --text-h3: 18px;
  --text-body: 17px;
  --text-label: 15px;
  --text-caption: 15px;
  /* Not 11px. See the note above: mapped to the caption floor. */
  --text-micro: 15px;

  --line-display: 42px;
  --line-h1: 34px;
  --line-h2: 28px;
  --line-h3: 26px;
  --line-body: 26px;
  --line-label: 22px;
  --line-caption: 22px;
  --line-micro: 22px;

  /* §1.3: body is 400 ashore and **500 ship**. Thin strokes lose to glare and
   * to a screen being read at arm's length on a moving deck. */
  --weight-regular: 500;

  /* §1.2.3: `--text-muted` clears AA but not the ship AAA target of 7:1, so it
   * is remapped rather than permitted. Same name, same component, different
   * value -- which is the whole point of density being a token set. */
  --text-muted: var(--text-secondary);
}

.ship {
  width: 100%;
  max-width: 390px;
  display: flex;
  flex-direction: column;
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: 500;
}

.ship-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption);
  line-height: var(--line-caption);
}

.ship-banner strong {
  font-weight: 600;
}

.ship-banner--offline {
  background: var(--readiness-gaps-wash);
  border-bottom: 1px solid var(--feedback-warning);
  color: var(--feedback-warning);
}

.ship-banner--offline span {
  color: var(--text-secondary);
}

.ship-banner--alarm {
  background: var(--readiness-notready-wash);
  border-bottom: 1px solid var(--readiness-notready-mark);
  color: var(--readiness-notready-ink);
}

.ship-banner--ready {
  background: var(--readiness-ready-wash);
  border-bottom: 1px solid var(--readiness-ready-mark);
  color: var(--readiness-ready-ink);
}

.ship-banner--warn {
  background: var(--readiness-gaps-wash);
  border-bottom: 1px solid var(--feedback-warning);
  color: var(--feedback-warning);
}

.ship-banner--warn span,
.ship-banner--ready span {
  color: var(--text-secondary);
}

.ship-head {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-5) var(--space-3) var(--space-4);
}

.ship-head h1 {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--line-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ship-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ship-sub {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  line-height: var(--line-caption);
  font-weight: 500;
  color: var(--text-secondary);
}

.ship-progress {
  display: flex;
  gap: 3px;
  margin-top: var(--space-4);
}

.ship-seg {
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background: var(--border-subtle);
}

.ship-seg--done {
  background: var(--readiness-ready-mark);
}

.ship-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
}

.ship-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.ship-card--alarm {
  border-color: var(--readiness-notready-mark);
}

.ship-card--done {
  border-color: var(--readiness-ready-mark);
}

.ship-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.ship-card-title {
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: 600;
}

.ship-label {
  font-size: var(--text-label);
  line-height: var(--line-label);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.ship-figure {
  font-size: var(--text-display);
  line-height: var(--line-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.ship-note {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--line-caption);
  font-weight: 500;
  color: var(--text-secondary);
}

.ship-count {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: 500;
  color: var(--text-secondary);
}

.ship-count strong {
  font-weight: 700;
  color: var(--text-primary);
}

.ship-size {
  font-size: var(--text-caption);
  line-height: var(--line-caption);
  font-weight: 600;
}

.ship-size--ready {
  color: var(--feedback-success);
}

.ship-size--gaps {
  color: var(--feedback-warning);
}

.ship-inset {
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  font-size: var(--text-caption);
  line-height: var(--line-caption);
  font-weight: 500;
}

.ship-inset--ready {
  background: var(--readiness-ready-wash);
  color: var(--feedback-success);
}

.ship-inset--gaps {
  background: var(--readiness-gaps-wash);
  color: var(--feedback-warning);
}

.ship-tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ship-no {
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ship-question-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: 600;
  color: var(--text-primary);
  text-wrap: pretty;
}

.ship-question-original {
  margin: 0;
  padding-left: var(--space-2);
  border-left: 2px solid var(--border-subtle);
  font-size: var(--text-body);
  line-height: var(--line-body);
  font-weight: 500;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.ship-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ship-field input {
  min-height: var(--control-h-md);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-body);
}

.ship-actions {
  display: flex;
  gap: var(--space-2);
}

.ship-action {
  flex: 1;
  height: var(--control-h-lg);
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  font: inherit;
  /* Body, not label. `--text-label` is §1.3's "field label, column header" --
   * the small type that names a value. This is the value: Verified, Gap, Skip,
   * on a 64px target that is the whole interaction on this screen. A button
   * whose words are smaller than the prose above it reads as a footnote. */
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.ship-action--go {
  background: var(--feedback-success);
  border-color: var(--feedback-success);
  color: var(--text-on-accent);
}

.ship-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ship-skip {
  min-height: var(--control-h-md);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.ship-primary {
  min-height: var(--control-h-xl);
  margin-top: auto;
  border: 0;
  border-radius: 12px;
  background: var(--border-focus);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-on-accent);
  cursor: pointer;
}

.ship-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ship-secondary {
  min-height: var(--control-h-md);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-card);
  font: inherit;
  /* Matches `.ship-primary`. Secondary is about weight and fill, not about
   * being harder to read. */
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.ship-footer {
  margin: 0;
  text-align: center;
  font-size: var(--text-caption);
  line-height: var(--line-caption);
  font-weight: 500;
  color: var(--text-secondary);
}

.ship-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 1000px) {
  .ship {
    /* Wide enough for a question and its answers to sit together, narrow
     * enough that a line of prose is still readable. Prose caps at ~75ch long
     * before a column this wide becomes hard to track.
     *
     * `max-width` stays: it is about line length, which *is* a width question.
     * The type that used to sit here -- 15/23, against the 17/26 this shell is
     * built on -- does not. See the note on the control heights below. */
    max-width: 780px;
  }

  .ship-head {
    padding: var(--space-6) var(--space-6) var(--space-4);
  }

  .ship-body {
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }

  .ship-card {
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-md);
  }

  .ship-primary,
  .ship-secondary {
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    transition:
      background var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  .ship-primary:hover:not(:disabled) {
    box-shadow: var(--elev-raised);
  }

  .ship-primary:focus-visible,
  .ship-secondary:focus-visible,
  .ship-action:focus-visible,
  .ship-skip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-wash);
  }

  .ship-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .ship-action {
    /* Layout only. `flex` lays the answers across the width instead of down a
     * column; the size is the density's. */
    flex: 1 1 200px;
    border-radius: var(--radius-sm);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      background var(--dur-fast) var(--ease-out);
  }

  .ship-action:hover:not(:disabled) {
    border-color: var(--border-focus);
  }

  .ship-field {
    gap: var(--space-1);
  }

  .ship-field input,
  .ship-field select,
  .ship-field textarea {
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  .ship-field input:hover:not(:disabled) {
    border-color: var(--text-muted);
  }

  .ship-field input:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-wash);
  }

  .ship-banner {
    padding: var(--space-3) var(--space-5);
  }

  .ship-skip {
    transition: color var(--dur-fast) var(--ease-out);
  }

  .ship-body > .ship-card {
    margin: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .ship-primary,
  .ship-secondary,
  .ship-action,
  .ship-skip,
  .ship-field input,
  .ship-field select,
  .ship-field textarea {
    transition: none;
  }

}

.nv-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  padding: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--nv-line);
  border-radius: var(--radius-xl);
  background: var(--nv-panel);
}

.nv-stat-top {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nv-stat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-lg);
  background: var(--nv-panel-2);
  color: var(--nv-info);
}

.nv-stat--alarm .nv-stat-icon {
  color: var(--nv-crit);
}

.nv-stat--warn .nv-stat-icon {
  color: var(--nv-warn);
}

.nv-stat--ready .nv-stat-icon {
  color: var(--nv-ok);
}

.nv-stat-label {
  font-size: var(--text-label);
  line-height: var(--line-label);
  font-weight: 600;
  color: var(--nv-ink-2);
}

.nv-stat-figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--text-display);
  line-height: var(--line-display);
  font-weight: 700;
}

.nv-stat-of {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--nv-ink-3);
}

.nv-stat-foot {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--line-caption);
  color: var(--nv-ink-3);
}

.nv-stat-foot {
  position: relative;
  z-index: 1;
}

.nv-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  height: 100%;
  border: 1px solid var(--nv-line);
  border-radius: var(--radius-xl);
  background: var(--nv-panel);
  min-width: 0;
}

.nv-panel--wide,
.nv-panel--narrow {
  grid-column: auto;
}

.nv-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nv-panel-head h2 {
  margin: 0;
  font-size: var(--text-h3);
  line-height: var(--line-h3);
  font-weight: 600;
}

.nv-panel-legend,
.nv-panel-note {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--line-caption);
  color: var(--nv-ink-3);
}

.nv-band {
  padding: 3px var(--space-1);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  line-height: 1.6;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.nv-band--critical {
  background: rgba(179, 38, 30, 0.1);
  color: var(--nv-crit);
}

.nv-band--attention {
  background: rgba(154, 106, 0, 0.12);
  color: var(--nv-warn);
}

.nv-band--upcoming {
  background: rgba(11, 111, 168, 0.1);
  color: var(--nv-info);
}

.nv-band--monitoring {
  background: rgba(117, 135, 157, 0.14);
  color: var(--nv-ink-2);
}

.nv-band--healthy {
  background: rgba(18, 128, 95, 0.1);
  color: var(--nv-ok);
}

.nv-stat {
  min-height: 104px;
  padding: 10px 12px;
  gap: 3px;
}

.nv-stat-icon {
  width: 28px;
  height: 28px;
}

.nv-stat-figure {
  font-size: 24px;
  line-height: 30px;
}

.nv-stat-of {
  font-size: var(--text-h3);
}

.nv-panel {
  padding: 12px;
  gap: 10px;
  border-radius: var(--radius-xl);
}

.nv-panel-head h2 {
  font-size: var(--text-h3);
}

.nv-band {
  padding: 2px 6px;
  font-size: 10px;
}

.nv-panel,
.nv-stat {
  background: var(--nv-panel);
  border-color: var(--nv-line);
}

.nv-panel,
.nv-stat {
  border-radius: 20px;
}

.nv-stat--ring {
  justify-content: center;
}