/* m-s2.css (m12, 2026-10-20): the PHONE version of the r11 desktop design. Phone only: every rule sits
   inside @media (max-width: 767px); desktop must stay pixel-identical. Spec: tools/mob/SPEC-M.md.

   #s2 "the data" (owner "base_s2" from round 2). The head (pen, question, lede) is base's (m-base.css).
   Below it the desktop pair (r11-s2.css: the "Data from" card | the facts card, the source line under
   the first) STACKS with the peak first (round 2, director's decision D1): the facts card (CSS order -1),
   16px, the "Data from" card, 8px, the source line, which sits under the "Data from" box as on desktop
   (binding rule 3) and closes the unit. The DOM order is untouched; story.js enters units that come due
   together top-first on the phone, so the facts card also enters first. The revert is one rule
   (.r11-s2-facts order). The pair's height does not change, so #s3 (the pinned map) does not move.
   The facts card is the section's peak: the owner's pick D (one sentence, the figures large in the
   serif, the linking words small and italic, the gold pen stroke under 2,446,856, the block centred,
   its lines left-aligned: R11/SPEC.md rule 10). Entrances: fade only (story-reveal.css: #s2 has no
   rise). Section padding (48 / 44) is base's: it keeps the 72px join with #s3. */

@media (max-width: 767px) {

  /* ---------- The lede: its two sentences, one per line where the first one fits (round 3) ----------
     "I ran anomaly detection on public invoices." is 335.6px at 17px and "… invoices. Here" 377.9: a 21em
     measure (357px) ends line 1 at the full stop at 440 and 767 too, where it read "… invoices. Here / is
     what …". At 402 (a 354px column) and under it changes nothing; the lede stays 2 lines (3 at 375), so
     #s2's height, and #s3's pin, do not move. */
  .r11-s2-lede { max-width: 21em; }

  /* ---------- The pair: the facts card first, then "Data from", its source line under it ---------- */
  .r11-s2-pair { display: flex; flex-direction: column; }
  .r11-s2-pair > .r11-s2-facts { order: -1; margin-top: 0; }           /* the peak, right under the head */
  .r11-s2-pair > .r11-s2-src { margin-top: var(--m-block); }           /* card -> card: 16 */
  .r11-s2-pair > .r11-s2-srcline { margin-top: var(--m-cap); }         /* card -> its source: 8 (last in the DOM) */
  /* the data date (round 5, B1a; the .ph twin of the desktop's words) is one unit: "Data downloaded 9 Sep 2026."
     never splits, so a line ends at "kronor." and the date stands on the last line (402: it split "Data
     downloaded / 9 Sep 2026."; 320: "Data" stood alone at a line's end). The line count is unchanged at 402. */
  .r11-s2-date { white-space: nowrap; }

  /* ---------- "Data from": label, the lead in the serif, the body, the link ---------- */
  .r11-s2-src > * { margin: 0; }
  .r11-s2-src > .r11-s2-lead {
    margin-top: var(--m-3);
    font: 400 20px/26px var(--serif);          /* one step under --m-step-h (22/27) */
    letter-spacing: -.01em;
    font-optical-sizing: auto;
    text-wrap: balance;                        /* = desktop */
    max-width: 26em;                           /* 520px: about the body's measure */
    color: var(--slate-900);
  }
  .r11-s2-src > .r11-s2-body { margin-top: var(--m-3); }
  .r11-s2-body > p {
    max-width: var(--m-measure);               /* 510px: bites only at the top of the phone range */
    margin: 0;
    font: 400 var(--m-small)/var(--m-small-lh) var(--sans);
    text-wrap: pretty;
    color: var(--slate-800);
  }
  .r11-s2-body > p + p { margin-top: 10px; }                             /* = desktop */
  .r11-s2-src > .r11-s2-link { padding-top: 20px; }                      /* = desktop */
  .r11-s2-link a {
    position: relative;
    font: 600 15px/22px var(--sans);
    color: var(--slate-900);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--slate-500);
    text-underline-offset: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  /* the hit area: 44px tall, 8px past each end of the words (drawn size unchanged) */
  .r11-s2-link a::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    height: var(--m-tap);
    margin-top: calc(var(--m-tap) / -2);
  }
  /* the press: the page's one voice for text actions, slate-900 with a full-strength underline (round 4, B2 /
     D10 = the desktop's polish r3 "gold marks the finding only"); the ↗ keeps its gold, as on the desktop */
  .r11-s2-link a:active { color: var(--slate-900); text-decoration-color: currentColor; }
  .r11-s2-link a:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; border-radius: 3px; }
  .r11-s2-arr { color: var(--r11-ink); }

  /* ---------- The facts card: one sentence, the section's peak ---------- */
  /* 32 20, but 26 at the foot: the last line's box carries the serif's descent, so with 32 the ink sat
     35px under the top edge and 41.5 over the bottom one; 26 centres the ink (35 / 35.5). */
  .r11-s2-facts {
    display: flex;
    justify-content: center;
    padding: var(--m-6) var(--m-card-pad) 26px;
  }
  .r11-s2-sent { display: grid; row-gap: var(--m-3); min-width: 0; }    /* rows 12 apart */
  .r11-s2-line {
    margin: 0;
    font-family: var(--serif);
    font-size: 20px;               /* the spaces between the words take this size */
    line-height: 1.05;
    font-optical-sizing: auto;
    font-variant-numeric: lining-nums;
    color: #1B1C1F;
  }
  /* 46 at 402, 42.75 at 375, 41 at 360, 48 from 421. The floor is 36 (not 40) so that "2,446,856 invoices,"
     still fits the 232px card measure at 320 (it only bites under 351px); if it wrapped, the gold stroke
     would run through "invoices,". */
  .r11-s2-fig { font-size: clamp(36px, 11.4vw, 48px); letter-spacing: -.025em; white-space: nowrap; }
  .r11-s2-fig--s { font-size: clamp(26px, 7.5vw, 32px); letter-spacing: -.02em; }                       /* 30 at 402 */
  .r11-s2-w { font-size: 20px; font-style: italic; letter-spacing: 0; color: var(--slate-800); }

  /* the gold pen stroke under 2,446,856 (as desktop: 3px, non-scaling) */
  .r11-s2-mark { position: relative; display: inline-block; }
  .r11-s2-ul {
    position: absolute;
    left: -2%;
    bottom: -.2em;
    width: 104%;
    height: .24em;
    overflow: visible;
  }
  .r11-s2-ul path { fill: none; stroke: var(--r11-mark); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

  /* "paid from Jan 2018 to Jul 2026." is ~330px wide: wider than the card's 312. It always breaks before
     "to" (the same four-line shape at every phone width), the two rows 12px apart like the others.
     A flex row with a full-width break item between the 2nd and 3rd words; the spaces (dropped by
     flex) come back as the column gap (.225em = the serif's own space at 20px, 4.5px, as in lines 1-2).
     contain: inline-size keeps its unbroken width (330) out of the block's width, so the block shrinks
     to its widest line (2,446,856 invoices,) and centres in the card. */
  .r11-s2-line:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .225em;
    contain: inline-size;
  }
  .r11-s2-line:last-child::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .r11-s2-line:last-child > :nth-child(n + 3) { order: 2; margin-top: var(--m-3); }
}

@media (max-width: 767px) and (hover: hover) {
  /* slate-900, not gold, at the desktop's own pace (= r11-s2.css polish r3: .18s); touch presses stay instant */
  .r11-s2-link a { transition: text-decoration-color .18s ease; }
  .r11-s2-link a:hover { text-decoration-color: currentColor; }
}