/* ══════════════════════════════════════════════════════════════════
   NavNex — the six ride stage cards
   ------------------------------------------------------------------
   SHELL  — sedna.com overlay-panel recipe, faithful:
            dark glass rgba(0,0,0,.15) · blur(16px) · no border, no
            shadow, no transition · white diamonds at top/bottom
            centre. Sedna bakes NO margin into its PNGs — panel =
            image size, so the shell has NO padding and the sheet
            fills it edge-to-edge at the shell's own radius. The
            glass reads THROUGH the sheet (paper alpha .88), the way
            Sedna's transparent screenshot regions read, not around
            it. Emil, 3 Sep: the cards are about twice the size they
            were, so the radius went 12 → 16px and the diamonds
            7 → 10px; the glass values did not move.
   SIZE   — ONE NUMBER: --sc-scale (below). Every interior length is
            written as N × --sc-u, where --sc-u is a scaled pixel:
            --sc-scale px, but never more than the screen's height
            allows (the tallest card, 483px at scale 1, has to clear
            the masthead and the thread's dip below it) and, on a
            phone, never more than the card's own width allows. So
            the cards are as big as the screen can hold, up to the
            cap, and the cap is the knob:
              1440×900 laptop → 1.51   ·  1920×1080 → 1.85 (the cap)
              375-wide phone  → 1.31
            The card WIDTH is the other knob and is per beat: the
            article's own --sc-w (a clamp, tuned by the card track;
            doubled on 3 Sep — a card is ~50–56vw at 1440).
   THREAD — Sedna's cubic-Bézier connector SVG between panels is
            DELIBERATELY DEFERRED to the ride engine (it spans
            stages; this static per-stage preview has nothing to
            connect). The diamonds below are its endpoints — they
            are not orphaned, the ride draws the thread.
   SCREEN — the NavNex product, paper/ink/ember canon:
            ruled hairlines (1px, never scaled), square corners,
            status by shape (● fixed ◐ pending ○ open ✕ failed),
            money never red/green, at most one ember accent per
            card. Interiors are calm excerpts of the approved
            S1/S3/S9 screens, not new inventions.
   TYPE   — Emil, 3 Sep: the words in the boxes take the headline's
            face, Space Grotesk. Three voices, three tokens:
              --sc-title  titles, the wordmark, the figure note
              --sc-label  eyebrows, field labels, ledger keys, chips,
                          buttons, badges, status chips, footers
              --sc-fig    figures, ledger values, the clocks, the
                          Statement of Facts, vessel rows, timestamps
            html[data-cardfont="a"]  all three Space Grotesk, tabular
                                     figures on (columns still align)
            html[data-cardfont="b"]  titles + labels Space Grotesk,
                                     figures stay Fragment Mono — the
                                     instrument read (DEFAULT)
            html[data-cardfont="mono"] the 2 Sep look, for reference
   FIXTURE — locked by the audited landing copy: DEAL-7F3A,
            50,000 MT soybean meal, Santos → Alexandria,
            USD 21.75/MT, owner side 0.5% = USD 5,438.
   COPY   — Emil's ruling 2 Sep: every card carries a short stage
            heading + a 1–2 sentence description, Sedna-style, beside
            the screen (.stage-card-copy). Every description below is
            a verbatim sentence from the audited landing copy
            (bridge/knowledge/design-language/navnex-site-copy.md).
            Any future sentence that is NOT audited must carry
            data-copy-audit="pending" for the fixture checker. It is
            internal metadata and has no visible treatment.
   All classes prefixed .stage-card. No animation here — motion
   belongs to the ride engine. The ride page loads the three Google
   faces itself. Import from the ride page as-is.
   ══════════════════════════════════════════════════════════════════ */

.stage-card {
  /* geometry knob the ride/dev page sets per card */
  --sc-w: 760px;

  /* ── THE ONE NUMBER ── interior scale, as a multiple of the 2 Sep
     card. 1.85 is where the brief's sizes land (eyebrow 15px, title
     26px, ledger value 19px, headline figure 55px, clock 44px). */
  --sc-scale: 1.85;

  /* how much height a card may take. The ride's masthead is 98px and
     the thread dips ~55px below a card's bottom diamond as it leaves,
     so 174px of a screen's height is spoken for. The ride may set
     --sc-room itself when its copy sits above the card. */
  --sc-tall: 483;                          /* the tallest card at scale 1 (b1) */
  --sc-room-default: calc(100svh - 174px);

  /* the scaled pixel every interior length is written in */
  --sc-u: max(1px, min(calc(var(--sc-scale) * 1px),
                       calc(var(--sc-room, var(--sc-room-default)) / var(--sc-tall))));

  position: relative;
  width: min(var(--sc-w), calc(100vw - 48px));
  border-radius: 16px;
  background: rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 0;                    /* Sedna: panel = image size, no rim */
  border: 0;
  box-shadow: none;

  /* interior tokens — light NavNex product, committed.
     Paper is translucent (.88) so the blurred photo reads INSIDE
     the screen, the way Sedna's glass reads through its PNGs. */
  --sc-paper: rgba(242, 241, 236, .88);
  --sc-panel: #e9e8e1;
  --sc-card:  #ffffff;
  --sc-line:  #d3d1c7;
  --sc-ink:   #191a1c;
  --sc-dim:   #6b6a64;
  --sc-faint: #8f8e86;           /* ~3:1 on paper — labels stop dissolving */
  --sc-ember: #c93a15;
  --sc-ember-soft: rgba(201, 58, 21, .08);

  /* the faces */
  --sc-sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sc-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sc-grot: "Space Grotesk", "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* the three voices — option B by default (see TYPE above) */
  --sc-title: var(--sc-grot);
  --sc-label: var(--sc-grot);
  --sc-fig:   var(--sc-mono);
  --sc-title-w: 500;             /* Space Grotesk 500 sits right against the
                                    700 headline; Schibsted wanted 600 */
  /* the mono labels were tracked for a mono face (.10–.16em). Space
     Grotesk is wide already, so its labels take about 70% of that. */
  --sc-trk: .72;

  font-family: var(--sc-title);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;             /* the card's own leading — it must measure
                                    the same on the dev page and in the ride,
                                    whose body sets a looser line-height */
  color: var(--sc-ink);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* the switch — html[data-cardfont] on the page */
html[data-cardfont="a"] .stage-card {
  --sc-title: var(--sc-grot); --sc-label: var(--sc-grot); --sc-fig: var(--sc-grot);
  --sc-title-w: 500; --sc-trk: .72;
}
html[data-cardfont="b"] .stage-card {
  --sc-title: var(--sc-grot); --sc-label: var(--sc-grot); --sc-fig: var(--sc-mono);
  --sc-title-w: 500; --sc-trk: .72;
}
html[data-cardfont="mono"] .stage-card {
  --sc-title: var(--sc-sans); --sc-label: var(--sc-mono); --sc-fig: var(--sc-mono);
  --sc-title-w: 600; --sc-trk: 1;
}

/* Sedna's connector diamonds — part of the panel itself. 10px box,
   hung 6.5px outside the edge, so the diamond's CENTRE sits 1.5px
   beyond the card — the same 1.5px ride.js (DIAMOND_Y) has always
   aimed the thread at. */
.stage-card::before,
.stage-card::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, .8);
}
.stage-card::before { top: -6.5px; }
.stage-card::after  { bottom: -6.5px; }

/* ─────────────── the screen: one NavNex surface ─────────────── */

.stage-card__screen {
  background: var(--sc-paper);
  border-radius: 16px;           /* the shell's own radius — the sheet
                                    fills the panel edge-to-edge,
                                    matching Sedna's PNG-fills-panel
                                    geometry */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* product top bar — calm excerpt of the real 52px bar */
.stage-card__topbar {
  flex: 0 0 calc(28 * var(--sc-u));
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--sc-line);
  padding: 0 calc(12 * var(--sc-u));
}
.stage-card__wordmark {
  display: flex;
  align-items: center;
  font-family: var(--sc-title);
  font-weight: 700;
  font-size: calc(10 * var(--sc-u));
  letter-spacing: .09em;
  padding-right: calc(12 * var(--sc-u));
}
.stage-card__navon {
  display: flex;
  align-items: center;
  padding: 0 calc(8 * var(--sc-u));
  border-bottom: 2px solid var(--sc-ink);
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.15em * var(--sc-trk));
  color: var(--sc-ink);
}
.stage-card__who {
  margin-left: auto;
  display: block;                /* block, not flex: the company and the
                                    time are one run of text (the company
                                    is a span so a phone can drop it), and
                                    a flex box would eat the space between
                                    them */
  align-self: center;
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.1em * var(--sc-trk));
  color: var(--sc-dim);
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* mail topbar — the owner's own inbox, not a NavNex screen: the relay
   address sits where the wordmark and nav would, no navon underline.
   An address is an instrument string: it keeps the figure face. */
.stage-card__from {
  display: block;
  align-self: center;
  font-family: var(--sc-fig);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.1em * var(--sc-trk));
  color: var(--sc-dim);
  white-space: nowrap;
  padding-right: calc(12 * var(--sc-u));
}

/* screen header — the commercial register, it breathes */
.stage-card__head {
  padding: calc(12 * var(--sc-u)) calc(12 * var(--sc-u)) calc(11 * var(--sc-u));
  border-bottom: 1px solid var(--sc-line);
}
.stage-card__eyebrow {
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.16em * var(--sc-trk));
  color: var(--sc-faint);
  text-transform: uppercase;
}
.stage-card__title {
  font-family: var(--sc-title);
  font-size: calc(14 * var(--sc-u));
  font-weight: var(--sc-title-w);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin-top: calc(6 * var(--sc-u));
  text-wrap: balance;
}
.stage-card__meta {
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.11em * var(--sc-trk));
  color: var(--sc-dim);
  margin-top: calc(7 * var(--sc-u));
  font-variant-numeric: tabular-nums;
}
.stage-card__head--split {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--sc-u)) calc(12 * var(--sc-u));
  justify-content: space-between;
  flex-wrap: wrap;               /* narrow widths: chip drops under
                                    the title instead of starving it */
}

/* honesty badge — the copy's own promise: every screen says whether
   it runs on real data. Ink-bordered, never ember.
   Charterer seat: beats 1–4 read LIVE TODAY, beats 5–6 read BUILDING.
   Owner seat (captain's ruling, 3 Sep): beats 1 and 3 PART BUILT, beat 4
   LIVE TODAY, beats 2, 5 and 6 BUILDING — the masked relay and the
   from-your-inbox cycle are designed, not built, so the cards that ARE
   the relay cannot read greener than that. */
.stage-card__badge {
  display: inline-block;
  margin-left: calc(8 * var(--sc-u));
  border: 1px solid var(--sc-ink);
  padding: calc(2 * var(--sc-u)) calc(5 * var(--sc-u));
  font-family: var(--sc-label);
  font-size: calc(7.5 * var(--sc-u));
  letter-spacing: calc(.14em * var(--sc-trk));
  color: var(--sc-ink);
  white-space: nowrap;
  vertical-align: calc(1 * var(--sc-u));
  text-transform: uppercase;
}
.stage-card__badge--data {
  border-color: var(--sc-line);
  color: var(--sc-dim);
}

/* one-line market tape: dense evidence without turning the card into a dashboard */
.stage-card__strip {
  border-top: 1px solid var(--sc-line);
  border-bottom: 1px solid var(--sc-line);
  padding: calc(8 * var(--sc-u)) calc(12 * var(--sc-u));
  font-family: var(--sc-fig);
  font-size: calc(8 * var(--sc-u));
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--sc-dim);
  font-variant-numeric: tabular-nums;
}

/* status chip — shape, not colour */
.stage-card__status {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--sc-u));
  border: 1px solid var(--sc-ink);
  padding: calc(5 * var(--sc-u)) calc(8 * var(--sc-u));
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.13em * var(--sc-trk));
  color: var(--sc-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* the two clocks (beat 4, both seats — the 30 Aug ruling): FIXED / READY TO
   PAY stacked, right-aligned */
.stage-card__status-pair { display: flex; flex-direction: column; align-items: flex-end; gap: calc(5 * var(--sc-u)); margin-left: auto; }
.stage-card__status--pend { border-color: var(--sc-line); color: var(--sc-dim); }

/* status marks — pure CSS so the card ships with no SVG defs */
.stage-card__mk {
  display: inline-block;
  width: calc(8 * var(--sc-u));
  height: calc(8 * var(--sc-u));
  flex: 0 0 calc(8 * var(--sc-u));
  border-radius: 50%;            /* the one lawful circle: status */
  vertical-align: 0;
}
.stage-card__mk--full { background: currentColor; }
.stage-card__mk--open { border: max(1px, calc(.8 * var(--sc-u))) solid currentColor; }
.stage-card__mk--half {
  border: max(1px, calc(.8 * var(--sc-u))) solid currentColor;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50%);
}

/* generic body block */
.stage-card__body { padding: calc(4 * var(--sc-u)) calc(12 * var(--sc-u)) calc(12 * var(--sc-u)); }

/* tabular digits everywhere they carry numbers */
.stage-card .num { font-variant-numeric: tabular-nums; }

/* ─────────────── form rows (card 1 · post cargo) ─────────────── */

.stage-card__field {
  padding: calc(9 * var(--sc-u)) 0 calc(8 * var(--sc-u));
  border-bottom: 1px solid var(--sc-line);
}
.stage-card__field:last-of-type { border-bottom: 0; }
.stage-card__flabel {
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.15em * var(--sc-trk));
  color: var(--sc-faint);
  text-transform: uppercase;
}
.stage-card__fvalue {
  font-family: var(--sc-fig);
  font-size: calc(11.5 * var(--sc-u));
  letter-spacing: .04em;
  color: var(--sc-ink);
  margin-top: calc(5 * var(--sc-u));
  font-variant-numeric: tabular-nums;
}
.stage-card__fvalue small {
  font-size: calc(8.5 * var(--sc-u));
  letter-spacing: .1em;
  color: var(--sc-dim);
}
.stage-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 * var(--sc-u));
  margin-top: calc(6 * var(--sc-u));
}
.stage-card__chip {
  border: 1px solid var(--sc-line);
  padding: calc(3 * var(--sc-u)) calc(6 * var(--sc-u));
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.11em * var(--sc-trk));
  color: var(--sc-ink);
  white-space: nowrap;
}
/* the one chip that is a sentence — the owner's "BANK ACCOUNT · LENDER'S
   ASSIGNMENT OF EARNINGS NOTED" (Dealmaker's wording, 31 Aug) — fits the
   1440 card on one line and breaks at the separator on the 320px mobile
   card instead of clipping; the halves are nowrap spans in the markup. */
.stage-card__chip--wrap { white-space: normal; line-height: 1.5; }

/* ─────────────── actions — the ember law ─────────────── */

.stage-card__act {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--sc-u));
  border: 1px solid var(--sc-ember);
  color: var(--sc-ember);
  font-family: var(--sc-label);
  font-size: calc(9 * var(--sc-u));
  letter-spacing: calc(.13em * var(--sc-trk));
  padding: calc(8 * var(--sc-u)) calc(12 * var(--sc-u));
  white-space: nowrap;
}
.stage-card__act--quiet {
  border: 0;
  padding: 0;
  font-size: calc(9 * var(--sc-u));   /* never below the bordered CTAs */
}
/* ember on the darker panel strip needs a locally darker ember to
   clear the contrast floor */
.stage-card__next .stage-card__act--quiet { color: #b83411; }
.stage-card__actrow {
  display: flex;
  justify-content: flex-end;
  padding-top: calc(11 * var(--sc-u));
}

/* ─────────────── ranked rows (card 2) ─────────────── */

.stage-card__row {
  display: grid;
  grid-template-columns: calc(20 * var(--sc-u)) 1fr auto;
  column-gap: calc(10 * var(--sc-u));
  align-items: start;
  padding: calc(10 * var(--sc-u)) calc(12 * var(--sc-u));
  border-bottom: 1px solid var(--sc-line);
}
.stage-card__row--top {
  background: var(--sc-card);
  padding-bottom: calc(12 * var(--sc-u));
}
.stage-card__rowact {
  grid-column: 2 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: calc(10 * var(--sc-u));
}
.stage-card__rank {
  font-family: var(--sc-fig);
  font-size: calc(10.5 * var(--sc-u));
  color: var(--sc-faint);
  padding-top: calc(1 * var(--sc-u));
  font-variant-numeric: tabular-nums;
}
.stage-card__row--top .stage-card__rank { color: var(--sc-ink); }
/* owner-seat ladder: a status mark in the rank column, never a number */
.stage-card__row > .stage-card__mk { margin-top: calc(4 * var(--sc-u)); }
.stage-card__vname {
  font-family: var(--sc-fig);
  font-size: calc(11 * var(--sc-u));
  letter-spacing: .05em;
}
.stage-card__vsub {
  font-family: var(--sc-fig);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: .09em;
  color: var(--sc-dim);
  margin-top: calc(4 * var(--sc-u));
  font-variant-numeric: tabular-nums;
}
.stage-card__veta {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sc-u));
  font-family: var(--sc-fig);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: .09em;
  color: var(--sc-dim);
  margin-top: calc(5 * var(--sc-u));
  font-variant-numeric: tabular-nums;
}
.stage-card__marks {
  display: inline-flex;
  gap: calc(4 * var(--sc-u));
  color: var(--sc-ink);
}
.stage-card__warn {
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.07em * var(--sc-trk));
  color: var(--sc-faint);
  margin-top: calc(4 * var(--sc-u));
}
.stage-card__figs {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--sc-u));
}
.stage-card__fig {
  font-family: var(--sc-fig);
  font-size: calc(13 * var(--sc-u));
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stage-card__figsub {
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.09em * var(--sc-trk));
  color: var(--sc-dim);
  margin-top: calc(3 * var(--sc-u));
  font-variant-numeric: tabular-nums;
}
.stage-card__foot {
  padding: calc(9 * var(--sc-u)) calc(12 * var(--sc-u)) calc(11 * var(--sc-u));
  font-family: var(--sc-label);
  font-size: calc(9 * var(--sc-u));
  letter-spacing: calc(.11em * var(--sc-trk));
  color: var(--sc-dim);          /* sentence-length proof lines get the
                                    readable ink; --sc-faint is for
                                    short 1–3 word labels only */
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

/* ─────────────── headline figure (card 3) ─────────────── */

.stage-card__figure {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--sc-u));
  padding: calc(8 * var(--sc-u)) 0 0;
}
.stage-card__cur {
  font-family: var(--sc-label);
  font-size: calc(10 * var(--sc-u));
  letter-spacing: calc(.12em * var(--sc-trk));
  color: var(--sc-dim);
}
.stage-card__amt {
  font-family: var(--sc-fig);
  font-size: calc(30 * var(--sc-u));
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stage-card__figure-note {
  font-family: var(--sc-title);
  font-size: calc(10.5 * var(--sc-u));
  color: var(--sc-dim);
  margin-top: calc(8 * var(--sc-u));
}

/* ─────────────── ruled ledger rows (cards 3, 4, 6) ─────────────── */

.stage-card__ledger { margin-top: calc(6 * var(--sc-u)); }
.stage-card__lrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--sc-u));
  padding: calc(8 * var(--sc-u)) 0;
  border-bottom: 1px solid var(--sc-line);
}
.stage-card__lrow > .stage-card__mk { align-self: center; }
.stage-card__lrow > .stage-card__mk + .stage-card__lkey { flex: 1; }
.stage-card__lrow:last-child { border-bottom: 0; }
.stage-card__lkey {
  font-family: var(--sc-label);
  font-size: calc(8.5 * var(--sc-u));
  letter-spacing: calc(.1em * var(--sc-trk));
  color: var(--sc-dim);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.stage-card__lval {
  font-family: var(--sc-fig);
  font-size: calc(10.5 * var(--sc-u));
  letter-spacing: .02em;
  color: var(--sc-ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stage-card__lrow--sum { border-top: 1px solid var(--sc-ink); border-bottom: 0; }
.stage-card__lrow--sum .stage-card__lkey,
.stage-card__lrow--sum .stage-card__lval {
  color: var(--sc-ink);
  font-size: calc(10.5 * var(--sc-u));
}
.stage-card__lrow--sum .stage-card__lkey { letter-spacing: calc(.13em * var(--sc-trk)); }
.stage-card__lrow--sum .stage-card__lval { letter-spacing: .13em; }
/* a value the trade insists on saying in full (the recap's freight line
   "… DEM 18,500 PDPR DHDWTS BENDS", the priced card's "… IN BAND · SAME
   BAND BOTH SIDES" — captain's ruling 3 Sep) may take a second line,
   right-aligned, rather than clip at the 1440 card widths. The markup
   holds each half in a nowrap span so the break lands on the separator,
   never inside a term; the key stays on one line. Below 768px every
   value wraps already (see mobile). */
.stage-card__lrow--wrap .stage-card__lkey { flex-shrink: 0; }
.stage-card__lrow--wrap .stage-card__lval { white-space: normal; }

/* ─────────────── laytime clock (card 5) ─────────────── */

.stage-card__clock { padding: calc(12 * var(--sc-u)) calc(12 * var(--sc-u)) calc(4 * var(--sc-u)); }
.stage-card__clock-big {
  font-family: var(--sc-fig);
  font-size: calc(24 * var(--sc-u));
  line-height: 1;
  letter-spacing: -.02em;
  margin-top: calc(8 * var(--sc-u));
  font-variant-numeric: tabular-nums;
}
.stage-card__clock-sub {
  font-family: var(--sc-fig);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: .1em;
  color: var(--sc-dim);
  margin-top: calc(8 * var(--sc-u));
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.stage-card__gauge {
  height: calc(5 * var(--sc-u));
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  margin-top: calc(10 * var(--sc-u));
}
.stage-card__gauge i {
  display: block;
  height: 100%;
  background: var(--sc-ink);
}

/* SoF list — timestamps and events, one instrument line each */
.stage-card__sof { padding: calc(2 * var(--sc-u)) calc(12 * var(--sc-u)) calc(12 * var(--sc-u)); }
.stage-card__sofrow {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--sc-u));
  padding: calc(8 * var(--sc-u)) 0;
  border-bottom: 1px solid var(--sc-line);
  font-family: var(--sc-fig);
  font-size: calc(8.5 * var(--sc-u));
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.stage-card__sofrow:last-child { border-bottom: 0; }
.stage-card__sofrow .stage-card__mk { align-self: center; }
.stage-card__soft { color: var(--sc-ink); }
.stage-card__sofd { color: var(--sc-dim); white-space: nowrap; }
.stage-card__sofrow--pend .stage-card__soft { color: var(--sc-dim); }

/* ─────────────── next-cargo strip (card 6) ─────────────── */

.stage-card__next {
  border-top: 1px solid var(--sc-line);
  background: var(--sc-panel);
  padding: calc(10 * var(--sc-u)) calc(12 * var(--sc-u)) calc(11 * var(--sc-u));
}
.stage-card__next-line {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--sc-u));
  font-family: var(--sc-fig);
  font-size: calc(8.5 * var(--sc-u));
  letter-spacing: .06em;
  color: var(--sc-ink);
  margin-top: calc(7 * var(--sc-u));
  font-variant-numeric: tabular-nums;
}
.stage-card__next-line--dim { color: var(--sc-dim); }
.stage-card__next .stage-card__actrow { padding-top: calc(9 * var(--sc-u)); }

/* section label inside a body */
.stage-card__lbl {
  font-family: var(--sc-label);
  font-size: calc(8 * var(--sc-u));
  letter-spacing: calc(.16em * var(--sc-trk));
  color: var(--sc-faint);
  text-transform: uppercase;
  padding-top: calc(10 * var(--sc-u));
}

/* ─────────────── stage copy — heading + description beside the screen ───────────────
   Sedna's own register for the words OUTSIDE the panel: bold white
   display type on the photograph (their side labels: ~2.72vw / 700,
   line-height ~1.17) with a calm sub line at 85% white. No scrim of
   its own, no text-shadow — the stage's gradient carries legibility.
   Positioning belongs to the stage (ride/dev page); this is only the
   voice. One thought per card — the sparseness law applies out here
   too. */

.stage-card-copy {
  max-width: 460px;
  color: #fff;
  font-family: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.stage-card-copy__h {
  margin: 0;
  font-size: clamp(28px, 2.72vw, 56px);   /* sedna's full label scale */
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.56px;                /* sedna: -0.56px */
  text-transform: uppercase;              /* sedna: side labels are caps */
  color: #fff;
  max-width: 13ch;
  text-wrap: balance;
}
.stage-card-copy__d {
  margin: 14px 0 0;
  font-size: clamp(16px, 1.2vw, 24px);    /* sedna's sub-line scale */
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, .85);
  max-width: 40ch;
  text-wrap: pretty;
}

/* Copy-audit markers stay in the source for the fixture checker, but
   Emil's 4 Sep ruling removes their visible labels and outlines. */

/* ─────────────── mobile ─────────────── */

@media (max-width: 767px) {
  /* A phone card is 100vw − 48px wide whatever --sc-w says, so height
     is not the limit here — width is. The scaled pixel follows the
     card's width instead: a 375px phone lands at 1.21, a 430px one at
     1.41. That is a 327px card carrying the type a ~270px one would at
     scale 1, so the long rows (the ranked ships, the ledger keys) wrap
     where they used to fit — tidily, with the rule below. Bigger than
     this and the vessel names themselves start breaking. */
  .stage-card {
    --sc-u: max(1px, min(calc(var(--sc-scale) * 1px), calc((100vw - 48px) / 270)));
  }
  /* On a phone the numeric evidence moves below the vessel/cargo name.
     Keeping it in a third column starved long names and clipped five-digit
     TCE figures; the desktop row remains a three-column instrument. */
  .stage-card__row { grid-template-columns: calc(20 * var(--sc-u)) minmax(0, 1fr); }
  .stage-card__figs {
    grid-column: 2;
    max-width: none;
    justify-self: start;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    margin-top: calc(6 * var(--sc-u));
  }
  .stage-card__rowact { grid-column: 2; }
}

@media (max-width: 768px) {
  /* long fixture values (VESSEL, ROUTE) must wrap, never clip,
     at the ~327px mobile card width */
  .stage-card__lval {
    white-space: normal;
    text-align: right;
  }
  /* the owner's who-slot (ATLANTIC MARITIME LTD · date time) runs ~23px
     longer than the charterer's: ease the tracking so the time is never
     cut at the 320px card. On the mail card the relay address is the
     identity, so the company drops and the time stays. */
  .stage-card__who { letter-spacing: .04em; }
  /* 3 Sep, at the bigger type: the company no longer fits beside the time
     on ANY card at 375px, so it drops on every card the way it already
     did on the mail card — the time stays, the screen's header still
     names the deal. On a phone the seat is one tap away in the masthead. */
  .stage-card__who-org { display: none; }
}