/* m-s6.css (m12, 2026-10-20): the PHONE version of #s6 "inside documents" (r11 desktop: r11-s6t.css,
   r11-s6g.css; markup frags/s6a.html). Phone only: every rule sits inside @media (max-width: 767px);
   desktop must stay pixel-identical. Spec: tools/mob/SPEC-M.md ("The s6 rail", "Section plan").

   The head is base's (.r11-head: pen, the question, the lede). Then the three steps on the gold rail
   (owner's pick A): the number's circle on the rail at the left, the text and its figure hanging at the
   40px indent (a 314px column at 402), steps 48px apart.
     1 WHAT   the 169 gift dots in two rows, 3 + 4 (3 + 3 + 1 under 375), each row on one floor with
              its labels on one line, one shared scale for all seven clusters (area = count).
     2 WHEN   the simple timeline, redrawn VERTICAL: time runs down from 1 Dec 2023 to 10 Jan 2024;
              the year line marked FY 2023 / FY 2024; "= 0 kr" set as the sum of its two amounts.
     3 WHY    the same axis and scale: 15 Dec and 2 Jan ringed by the gold pen, the price per chain
              hand-written beside each ring, the payment it belongs to under it (phone-only .ph).
   Each timeline's gold question sits under it with a short drawn arrow up to the 2 Jan entry.
   Round 2 (2026-10-21, tickets S6-1..3 in tools/mob/rounds/r2/PLAN.md): see tools/mob/notes/s6.md.
   Round 3 (tools/mob/rounds/r3/PLAN.md): step 2's event words 13 (the desktop's), "= 0 kr" footed as on
   the desktop, the kickers and year marks in the page's one label voice (--m-label-*), and a step's
   number and rail enter with its text (the block at the end of this file).
   Round 5 (tools/mob/rounds/r5/PLAN.md S6-2): "FY" on both timelines from 370px (prices 20/24 under 390),
   and the hung " kr" of the 15 Dec sum >= 2.6px inside the column at every width (see "Small phones").
   Static: the only motion is story.js's entrance fade (the figures are data-reveal units; nothing here
   sets their opacity or transform; the number and rail only follow their step text's entrance). */

@media (max-width: 767px) {

  /* ---------- The steps on the rail ---------- */
  .r11-step {
    position: relative;
    padding-left: var(--m-rail-indent);
  }
  .r11-step + .r11-step { margin-top: var(--m-step-gap); }

  /* The rail: from under this number's circle to just above the next one (4px clear at both ends). */
  .r11-step:not(:last-of-type)::before {
    content: "";
    position: absolute;
    left: var(--m-rail-x);
    top: calc(var(--m-rail-n) + 4px);
    bottom: calc(4px - var(--m-step-gap));
    width: var(--m-rail-w);
    background: var(--r11-mark);
  }
  .r11-step-n {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--m-rail-n);
    height: var(--m-rail-n);
    border: var(--m-rail-w) solid var(--r11-mark);
    border-radius: 50%;
    background: var(--slate-50);
    font: 500 12px/1 var(--mono);
    color: var(--r11-ink);
  }

  .r11-step-text > * { margin: 0; }
  .r11-step-k {                       /* its 16px line centred on the 28px circle */
    padding-top: 6px;
    font: var(--m-label-font);        /* the page's one label voice (round 3, S6-3: .12em -> .1em, as desktop) */
    letter-spacing: var(--m-label-track);
    text-transform: uppercase;
    color: var(--r11-ink);
  }
  .r11-step-text > .r11-step-h {
    margin-top: 6px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--m-step-h);
    line-height: var(--m-step-h-lh);
    letter-spacing: -.01em;
    font-optical-sizing: auto;
    text-wrap: balance;
    color: var(--slate-900);
  }
  .r11-step-text > .r11-step-p {
    max-width: var(--m-measure);
    margin-top: var(--m-2);
    font: 400 var(--m-small)/var(--m-small-lh) var(--sans);
    text-wrap: pretty;
    color: var(--slate-800);
  }

  .r11-step-fig {
    min-width: 0;
    max-width: 440px;                 /* from ~530px wide the figures stop growing (767: tablet-ish) */
    margin-top: var(--m-fig);
  }
  .r11-step-fig > figure { margin: 0; }

  /* ---------- Step 1: the gifts, two rows (3 + 4) ----------
     Row 1: chains, watches, rings. Row 2: sets, pendants, earrings, bracelet. A flex row with
     space-between per row; the ul's ::after (order 1, full width) breaks the line after the third
     item. Round 2 (S6-1): the desktop's top-aligned staircase reads as one descending line only in
     one row; split in two it read ragged. So each row stands on ONE floor: every cluster sits on the
     bottom of a box as tall as the row's tallest cluster (row 1: the chains, 105; row 2: the sets,
     89), and every label of the row starts 8px under that floor. Rows 24px apart (deepest label of
     row 1 -> top of row 2's tallest cluster); the bracelet's label 4px clear of the column edge.
     ONE scale for all seven clusters (area = count), the largest that both rows allow:
       row 1 (three clusters, 295px at real size): two 16px gaps   -> (column - 32px) / 295
       row 2 (the sets' cluster, 86px, + three labels wider than their clusters: "19 diamond",
             "6 pairs of", "1 diamond" = --l2, measured: 183px at 13px, 173 at 12):
             three --g2 gaps + the 4px inset                      -> (column - --l2 - 3 --g2 - 4px) / 86
       and never above real size (dots r 3.75).
     At 402 (13px labels) row 2 binds: 0.921 (row 1's gaps 21, row 2's 16); real size from ~430px.
     Under 402 the row-2 gaps may close to 12 (--g2), under 390 the labels go to 12/16. */
  .r11-s6g-fig { container-type: inline-size; }
  .r11-s6g-row {
    --lf: 13px;                         /* the labels: 13/17 italic serif, all seven */
    --lf-lh: 17px;
    --g2: 16px;
    --l2: 184px;                        /* "19 diamond" + "6 pairs of" + "1 diamond" at 13px (182.8), rounded up */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .r11-s6g-row::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  .r11-s6g-c {
    --fh: 105;                          /* the row's floor: its tallest cluster */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .r11-s6g-c:nth-child(n + 4) { --fh: 89; order: 2; margin-top: var(--m-5); }
  .r11-s6g-c:last-child { margin-right: 4px; }   /* the bracelet's label: 4px clear of the column edge */
  .r11-s6g-c:nth-child(1) { --w: 103; --h: 105; }
  .r11-s6g-c:nth-child(2) { --w: 96;  --h: 94; }
  .r11-s6g-c:nth-child(3) { --w: 96;  --h: 92; }
  .r11-s6g-c:nth-child(4) { --w: 86;  --h: 89; }
  .r11-s6g-c:nth-child(5) { --w: 70;  --h: 66; }
  .r11-s6g-c:nth-child(6) { --w: 33;  --h: 40; }
  .r11-s6g-c:nth-child(7) { --w: 8;   --h: 8; }
  .r11-s6g-dots {
    display: flex;
    align-items: flex-end;              /* the cluster stands on the row's floor */
    justify-content: center;
    height: min(calc(var(--fh) * 1px), calc((100cqw - 32px) * var(--fh) / 295),
                calc((100cqw - var(--l2) - 3 * var(--g2) - 4px) * var(--fh) / 86));
  }
  .r11-s6g-svg {
    display: block;
    flex: none;
    width: min(calc(var(--w) * 1px), calc((100cqw - 32px) * var(--w) / 295),
               calc((100cqw - var(--l2) - 3 * var(--g2) - 4px) * var(--w) / 86));
    height: min(calc(var(--h) * 1px), calc((100cqw - 32px) * var(--h) / 295),
                calc((100cqw - var(--l2) - 3 * var(--g2) - 4px) * var(--h) / 86));
    overflow: visible;
    fill: var(--slate-700);
  }
  .r11-s6g-c.is-gold .r11-s6g-svg { fill: var(--r11-mark); }
  .r11-s6g-l {
    display: block;
    margin-top: var(--m-2);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--lf);
    line-height: var(--lf-lh);
    font-variant-numeric: lining-nums;
    text-align: center;
    white-space: nowrap;               /* every break is in the markup: the item is as wide as its longest line */
    color: var(--slate-800);
  }
  .r11-s6g-c.is-gold .r11-s6g-l { color: var(--r11-ink); }
  /* Row 2 needs narrower labels than the desktop's: a .ph copy (hidden from 768px) breaks
     "19 diamond / pendants", "6 pairs of / diamond / earrings" (the desktop keeps "diamond earrings"
     together with a no-break space) and "1 diamond / bracelet"; the desktop label then hides here. */
  .r11-s6g-c > .r11-s6g-l:not(:last-child) { display: none; }

  /* ---------- Steps 2 and 3: one vertical time axis ----------
     Day d (0 = 1 Dec 2023, 40 = 10 Jan 2024) sits at y = --t0 + d x --px, 6px a day: 2 Jan is 9px
     under the year change, enough to read "after". The axis is --ax in from the column's left; the
     dates hang left of it (right-aligned, --gap-l clear), the events right of it (--gap).
     Round 2: the axis' two ends ("1 Dec 2023", "10 Jan 2024") sit just OUTSIDE the line (2px above
     its start, 2px below its end; --t0 18 keeps them in the box). Centred on the end, "10 Jan 2024"
     stood level with the 2 Jan entry's last line ("New invoice paid" in step 3), which read as a row:
     "paid on 10 Jan". The event dates (15 Dec, 2 Jan) stay centred on their dot or tick. */
  .r11-s6t-fig {
    --px: 6px;
    --ax: 88px;
    --t0: 18px;
    --gap: 18px;
    --gap-l: 22px;
    --yl: calc(var(--t0) + 30.5 * var(--px));      /* midnight, 31 Dec -> 1 Jan */
    --amt: 17px;                                     /* the 15 Dec amounts and their sum, serif */
    --fig: 67px;                                     /* "+882,960" in that face (66.83 at 17) */
    --kr: 18.86px;                                   /* " kr" in the sum's face (17px serif 500) */
    --pfs: var(--m-ink);                             /* the hand-written prices: 24/28 (22/26 under 402) */
    --plh: var(--m-ink-lh);
    margin: 0;
  }
  .r11-s6t-tl {
    position: relative;
    height: calc(2 * var(--t0) + 40 * var(--px));
    min-width: 0;
  }
  .r11-s6t-tl > * { position: absolute; margin: 0; font-style: normal; }

  /* The axis: step 2's line, step 3's ruler (its day ticks dropped: one quiet line). */
  .r11-s6t-line,
  .r11-s6t-ruler {
    left: calc(var(--ax) - .75px);
    top: var(--t0);
    width: 0;
    height: calc(40 * var(--px));
    border: 0;
    border-left: 1.5px solid var(--slate-700);
    background: none;
  }
  .r11-s6t-ruler::after { content: none; }

  /* The year change: a hairline from the axis to the column's edge, the years at its right end.
     Round 2 (S6-2c): the marks recede (--ink-dim) and say what the line means, "FY 2023 / FY 2024"
     (the ledger's own word; the desktop's step 3 says "Fiscal"). Round 5 (S6-2a, r5 D11): "FY" from
     370px (every iPhone width), plain years 360-369 (the 20px "6,000 kr / chain" would come within
     3.6px of "FY 2024" at 360), none under 360. Step 3's desktop "Fiscal 2023 / 2024" spans give way
     to the .ph "2023 / 2024"; the "FY " is CSS, so both timelines read the same at every width.
     Every mark stays >= 12px from any text. */
  .r11-s6t-yl {
    left: var(--ax);
    right: 0;
    top: var(--yl);
    width: auto;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--slate-500);
  }
  .r11-s6t-fy {
    right: 0;
    font: var(--m-label-font);
    letter-spacing: var(--m-label-track);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-dim);
  }
  .r11-s6t-fy::before { content: "FY\00a0"; }
  .r11-s6t-fy--a { top: calc(var(--yl) - 19px); }
  .r11-s6t-fy--b { top: calc(var(--yl) + 3px); }
  .r11-s6t-tl--price .r11-s6t-fy:not(.ph) { display: none; }

  /* Dates, left of the axis. */
  .r11-s6t-date,
  .r11-s6t-day {
    right: calc(100% - var(--ax) + var(--gap-l));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transform: none;
  }
  .r11-s6t-date { top: calc(var(--t0) + var(--d) * var(--px) - 8px); font: 400 12px/16px var(--sans); color: var(--ink-dim); }
  .r11-s6t-date.is-first { top: calc(var(--t0) - 18px); }
  .r11-s6t-date.is-last { top: calc(var(--t0) + 40 * var(--px) + 2px); }
  .r11-s6t-day,
  .r11-s6t-date.is-pen { top: calc(var(--t0) + var(--d) * var(--px) - 9px); font: 600 13px/18px var(--sans); color: var(--slate-900); }

  /* Step 2: a dot on each payment day, the activity right of it. Only the 2 Jan dot is gold
     (owner, 2026-10-20; --gold as on desktop); its date, "2024" and the new invoice stay black. */
  .r11-s6t-pt {
    left: calc(var(--ax) - 6.5px);
    top: calc(var(--t0) + var(--d) * var(--px) - 6.5px);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--slate-900);
    box-shadow: 0 0 0 2px var(--slate-50);   /* a ground-coloured halo: the dot sits clear of the lines */
  }
  .r11-s6t-pt.is-gold {
    left: calc(var(--ax) - 7.5px);
    top: calc(var(--t0) + var(--d) * var(--px) - 7.5px);
    width: 15px;
    height: 15px;
    background: var(--gold);
  }
  .r11-s6t-act {
    left: calc(var(--ax) + var(--gap));
    top: calc(var(--t0) + var(--d) * var(--px) - 11px);
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: baseline;
    column-gap: 12px;
    font: 400 var(--m-meta)/22px var(--sans);   /* round 3 (S6-1): 13 = the desktop's event size and the dates'; the 22px row pitches them with the 17px amounts */
    white-space: nowrap;
    transform: none;
    color: var(--slate-900);
  }
  .r11-s6t-act > span { display: contents; }
  .r11-s6t-act .r11-num { font-size: var(--amt); text-align: right; }
  /* "= 0 kr" is the sum of that small ledger column (S6-3): the amounts' serif, size and figures,
     a step heavier, on their right edge. Round 3 (S6-1): footed as on the desktop ("15 Dec as an
     accounting footing"): a slate-300 hairline over it, as wide as the amounts' column.
     Round 4 (S6-1a, the desktop's polish r2): " kr" hangs OUTSIDE the figure column, so the "0"
     ends on the units digit of 882,960 and " kr" stands to its right, as an accountant sets a sum.
     The b is grid column 2, stretched: a negative right margin as wide as " kr" (--kr, measured in
     Chrome with Newsreader loaded) makes it reach --kr past the column (the column's width, set by
     the amounts, does not change; --fig is the floor, as on the desktop), and the hairline, drawn
     as a background, spans only the figure column. */
  .r11-s6t-act > b {
    grid-column: 2;
    box-sizing: border-box;
    min-width: calc(var(--fig) + var(--kr));
    margin-top: 4px;
    margin-right: calc(-1 * var(--kr));
    padding-top: 3px;
    background: linear-gradient(var(--slate-300), var(--slate-300)) left top / calc(100% - var(--kr)) 1px no-repeat;
    font-family: var(--serif);
    font-size: var(--amt);
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    font-optical-sizing: auto;
    letter-spacing: -.02em;
    text-align: right;
  }
  /* 2 Jan is 1.5 days after the new year: its entry hangs under the hairline, its ink >= 10px
     clear of it (S6-2b: closer read as struck through); the dot stays on its date. */
  .r11-s6t-act.is-gold { top: calc(var(--yl) + 6px); display: block; }
  .r11-s6t-act.is-gold > span { display: block; }
  /* Round 4 (S6-1b): the page's one amount size, 20/24 (s4's ledger; the desktop's polish r3), so
     this 1,014,000 reads as the same figure as s4's, one screen up (was 22/26). */
  .r11-s6t-act .r11-s6t-big { font-size: 20px; line-height: 24px; text-align: left; color: var(--slate-900); }

  /* Step 3: ticks at 15 Dec and 2 Jan, each date ringed by the gold pen (a ring sized to its label,
     centred on it), the price per chain hand-written right of the axis. */
  .r11-s6t-tick {
    left: calc(var(--ax) - 5px);
    top: calc(var(--t0) + var(--d) * var(--px) - .75px);
    width: 10px;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1.5px solid var(--slate-900);
  }
  .r11-s6t-ring {
    --rw: 68px;                        /* "15 Dec" is ~41px wide */
    --lw: 41px;
    top: calc(var(--t0) + var(--d) * var(--px) - var(--rw) * 34 / 78 / 2);
    right: calc(100% - var(--ax) + var(--gap-l) - (var(--rw) - var(--lw)) / 2);
    left: auto;
    width: var(--rw);
    height: calc(var(--rw) * 34 / 78);
  }
  .r11-s6t-tl--price svg.r11-s6t-ring:nth-of-type(2) { --rw: 60px; --lw: 33px; }   /* "2 Jan" */
  .r11-s6t-ring path { stroke-width: 1.8; }
  /* Each price is centred on its tick; a price after the new year (2 Jan) hangs under the hairline
     instead, its ink >= 10px clear of it. --after is 1 for a day after the year line, else 0, so
     the rule follows the data (--d), not the order of the markup. Under each price, the payment it
     belongs to in step 2's own words (S6-2a, phone-only .ph): the rings mark payment days, and the
     6,000 kr bill was dated 1 Dec, so the price did not "rise on 2 Jan". */
  .r11-s6t-price,
  .r11-s6t-paid {
    --after: clamp(0, (var(--d) - 30.5) * 100, 1);
    --py: max(calc(var(--t0) + var(--d) * var(--px) - var(--plh) / 2 - 1px),
              calc(var(--after) * (var(--yl) + 11px)));
    left: calc(var(--ax) + var(--gap));
    white-space: nowrap;
  }
  .r11-s6t-price {
    top: var(--py);
    transform: rotate(-1.5deg);
    transform-origin: 0 50%;
    font-size: var(--pfs);
    line-height: var(--plh);
  }
  .r11-s6t-paid {
    top: calc(var(--py) + var(--plh) + 2px);
    font: 400 var(--m-meta)/var(--m-meta-lh) var(--sans);
    color: var(--ink-dim);
  }

  /* ---------- The gold question under each timeline ----------
     It hangs in the events' column (--qx), its short arrow rising from beside the first line toward
     the 2 Jan entry above. In a narrow column it moves left so its lines (<= 200px) never wrap. */
  .r11-s6t-q {
    --qx: clamp(0px, calc(100% - 204px), calc(var(--ax) + var(--gap)));
    position: relative;
    display: block;
    margin: var(--m-4) 0 0;           /* 16 under the box = 34 under the axis' end, as before the hang */
    padding-left: var(--qx);
    font-size: var(--m-ink);
    line-height: var(--m-ink-lh);
  }
  .r11-s6t-ql { display: block; }
  .r11-s6t-arrow { position: absolute; display: block; }
  .r11-s6t-arrow.is-side { display: none; }
  /* The desktop's rising arrow (76x56, a shallow curve) at .75, turned 30deg steeper about its tail
     (transform-origin = the tail): the tail sits 8px left of the first line, --ty under its top; the
     head ends 3-8px under the 2 Jan entry's last line (step 2: 1,014,000 kr; step 3: "New invoice
     paid", one line deeper, so its tail sits 8px lower). Never toward "10 Jan 2024". */
  .r11-s6t-arrow.is-up {
    --ty: 11px;
    left: calc(var(--qx) - 14px);
    top: calc(var(--ty) - 36px);
    width: 57px;
    height: 42px;
    transform: rotate(-30deg);
    transform-origin: 10.1% 85.7%;
  }
  #s6-price .r11-s6t-arrow.is-up { --ty: 19px; }

  /* ---------- The source line, at the indent ---------- */
  #s6 .r11-steps-src {
    margin-top: var(--m-6);
    padding-left: var(--m-rail-indent);
  }
}

/* Small phones.
   Under 402: the row-2 gift gaps may close to 12px (the clusters keep their size), and the hand-written
     prices go to 22/26 so "6,000 kr / chain" stays 12px clear of "FY 2024" (at 390 the 24px price
     would come within 5px of it). Round 5 (S6-2b): the 15 Dec words-to-amounts gap 12 -> 8, so the
     hung " kr" ends 6px inside the column at 390 (it was 1.97: Safari's Newsreader may set it wider).
   Under 390 (a 302px column at 390, 287 at 375): the gift labels 12/16; the events start 12px from
     the axis (round 4: was 14; 12 keeps the words 5.5px clear of the 15 Dec dot) and the 15 Dec
     amounts sit a little tighter (serif 16, words to amounts 6: round 5, S6-2b, was 8), so " kr"
     ends >= 2.6px inside the column (0.7 before) and the "0" stays on the units digit. Round 5
     (S6-2a): "FY" stays (it was dropped here); the hand-written prices go to 20/24 so "6,000 kr /
     chain" keeps >= 12px from "FY 2024" (18.6 at 375, 13.6 at 370), and step 3's arrow rises 2px
     with the shorter price line (its tip 5.9px under "New invoice paid", as at 390-401).
     The question's arrow gets its own geometry (below) so it still points at the 2 Jan entry.
   Under 375 (272px at 360): the gifts go 3 + 3 + 1 (see there); the 15 Dec amounts 15, and the
     15 Dec entry goes one column, footed (see there).
   Under 370: plain years (no "FY "): the price would come within 3.6px of "FY 2024" at 360. */
@media (max-width: 401px) {
  .r11-s6g-row { --g2: 12px; }
  .r11-s6t-fig { --pfs: 22px; --plh: 26px; }
  .r11-s6t-act { column-gap: 8px; }
}
@media (max-width: 389px) {
  .r11-s6g-row { --lf: 12px; --lf-lh: 16px; --l2: 174px; }
  .r11-s6t-fig { --gap: 12px; --amt: 16px; --fig: 64px; --kr: 18.17px; --pfs: 20px; --plh: 24px; }   /* 63.84 / 18.17 at 16 */
  .r11-s6t-act { column-gap: 6px; }
  #s6-price .r11-s6t-arrow.is-up { --ty: 17px; }
  /* The question starts left of the events here (its lines need 204px), so a fixed place and a
     longer, flatter arrow (.9, -15deg) carry the head over to the 2 Jan entry (x ~118). */
  .r11-s6t-q { --qx: calc(var(--ax) - 5px); }
  .r11-s6t-arrow.is-up {
    left: calc(var(--qx) - 15px);
    top: calc(var(--ty) - 43px);
    width: 68px;
    height: 50px;
    transform: rotate(-15deg);
  }
}
@media (max-width: 374px) {
  /* Under 375 the four labels of row 2 alone are wider than the column allows with 12px gaps
     (247px of 272 at 360: "19 diamond 6 pairs of 1 diamond" would read as one line). The bracelet
     takes a third row (the ul's ::before breaks the line): 3 + 3 + 1, each row on its own floor,
     the columns of rows 1 and 2 roughly aligned. */
  .r11-s6g-row { --l2: 0px; --g2: 0px; }
  .r11-s6g-row::before { content: ""; order: 3; flex: 0 0 100%; height: 0; }
  .r11-s6g-c:nth-child(6) { margin-right: 4px; }
  .r11-s6g-c:nth-child(7) { --fh: 8; order: 4; }
  .r11-s6t-fig { --amt: 15px; --fig: 61px; --kr: 17.42px; }                 /* 60.77 / 17.42 at 15 */
  /* Round 4 (S6-1a): side by side, words | amounts | hung " kr" need 183px right of the axis at 360
     and the column leaves 170 (the dates' column cannot give: "10 Jan 2024" already starts 0.6px
     inside it, and the events stay 12px off the axis, 5.5 clear of the dot). So under 375 the entry
     goes one column, as under 360, but footed as on the desktop: each amount right-aligned in a
     --fig box under its words, the sum's box --fig + --kr wide, so its "0" ends on the units digit
     of 882,960 and " kr" hangs right of the figures; the hairline (the main rule's background)
     spans the figures only. 18px lines with the first on the dot: "= 0 kr" ends 15px clear of
     the year line. */
  .r11-s6t-act:not(.is-gold) {
    grid-template-columns: max-content;
    top: calc(var(--t0) + var(--d) * var(--px) - 9px);
    line-height: 18px;
  }
  .r11-s6t-act:not(.is-gold) .r11-num { justify-self: start; width: var(--fig); }
  .r11-s6t-act > b {
    grid-column: 1;
    justify-self: start;
    width: calc(var(--fig) + var(--kr));
    min-width: 0;
    margin-right: 0;
  }
  /* 360-374: the question at 68px (its 204px lines end on the column edge at 360); the arrow at the
     desktop's own size (76x56), almost as drawn (-9deg), reaches the 2 Jan entry. */
  .r11-s6t-q { --qx: calc(var(--ax) - 20px); }
  .r11-s6t-arrow.is-up {
    left: calc(var(--qx) - 16px);
    top: calc(var(--ty) - 48px);
    width: 76px;
    height: 56px;
    transform: rotate(-9deg);
  }
}
@media (max-width: 369px) {
  .r11-s6t-fy::before { content: none; }
}
/* Under 360px (old 320px phones: a 232px column) nothing may break: the 15 Dec amounts go under their
   words, the year marks drop (no room beside the 2 Jan entries; the hairline stays, and the heading
   says "Billed in 2023, paid in 2024"), and the arrows rest (the question still follows its timeline).
   The prices keep 20/24 (round 5: they were 19, one pixel from the 20px 1,014,000; "6,000 kr / chain"
   ends 17px inside the column at 320). */
@media (max-width: 359px) {
  .r11-s6t-act { grid-template-columns: max-content; line-height: 20px; }
  /* 15 Dec: five lines; at 18 (the meta line) with its first line on the dot, its footed "= 0 kr"
     ends 13px clear of the year line. The footing is as wide as "= 0 kr" here (the amounts sit
     left, under their words). */
  .r11-s6t-act:not(.is-gold) { top: calc(var(--t0) + var(--d) * var(--px) - 9px); line-height: 18px; }
  .r11-s6t-act .r11-num:not(.r11-s6t-big) { width: auto; text-align: left; }
  .r11-s6t-act > b {                 /* round 4: as before (the director's S6-1a): the sum left-set under its words, " kr" not hung */
    grid-column: 1;
    justify-self: start;
    width: auto;
    min-width: 0;
    margin-right: 0;
    border-top: 1px solid var(--slate-300);
    background: none;
    text-align: left;
  }
  .r11-s6t-fy { display: none; }
  .r11-s6t-q { --qx: max(0px, calc(100% - 204px)); }   /* as far right as its 204px lines allow */
  .r11-s6t-arrow.is-up { display: none; }
}

/* Round 3 (S6-2): a step enters as one unit. On arrival a step's number and its gold rail come up with
   the step's text, as on the desktop since its polish r1 (r11-s6t.css, the rule at its end): story.js
   makes the text an entrance unit (.rv; .is-in once, .rv-done when its entrance is over; .rv-quick on a
   quick landing, .rv-brisk on the move, .rv-now when shown with no entrance). Before, the gold circle stood
   alone beside a blank band until the text faded in.
   The phone translation: the number and rail hide at once while the text waits (never a fade OUT, e.g. at
   start-up), and fade in only while the text's own entrance runs (.is-in, not yet .rv-done), on its
   timing: calm .42s on the text's opacity curve (520ms x .8), brisk .2s front-loaded (no run-speed
   entrance lasts longer, RUN_PHONE_MS), quick 90ms (QUICK_PHONE_MS); with .rv-now nothing fades. Screens
   with motion and story.js only (html.has-reveal): no JS, reduced motion and print show everything at
   once; a browser without :has() drops these rules (everything shown, as before). */
@media screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.has-reveal .r11-step:has(> .r11-step-text.rv:not(.is-in)) > .r11-step-n,
  html.has-reveal .r11-step:has(> .r11-step-text.rv:not(.is-in))::before { opacity: 0; }
  html.has-reveal .r11-step:has(> .r11-step-text.is-in:not(.rv-done)) > .r11-step-n,
  html.has-reveal .r11-step:has(> .r11-step-text.is-in:not(.rv-done))::before {
    transition: opacity .42s cubic-bezier(.4, 0, .6, 1);
  }
  html.has-reveal .r11-step:has(> .r11-step-text.rv-brisk.is-in:not(.rv-done)) > .r11-step-n,
  html.has-reveal .r11-step:has(> .r11-step-text.rv-brisk.is-in:not(.rv-done))::before {
    transition: opacity .2s cubic-bezier(.2, .6, .35, 1);
  }
  html.has-reveal .r11-step:has(> .r11-step-text.rv-quick.is-in:not(.rv-done)) > .r11-step-n,
  html.has-reveal .r11-step:has(> .r11-step-text.rv-quick.is-in:not(.rv-done))::before {
    transition: opacity .09s linear;
  }
}