/* m-s4.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.

   #s4 "investigation" on the phone (owner "s4"). The base head (m-base.css), 24px, then:
   - the supplier strip (owner's pick "C", discreet): slate-100, no border, three short lines;
   - 16px under it, the ledger of the three documents, REDESIGNED from the same <table>: the desktop's
     six columns cannot fit 354px, so each document becomes one two-column row:
         2023   Invoice 24849251                    882,960
         Dated 15 Nov 2023 · Paid 15 Dec 2023
     the amount in the serif on the right, top-aligned (on the baseline) with the document's name. The
     table's display values change here, so the fragment carries role="table/rowgroup/row/columnheader/
     rowheader/cell" (VoiceOver keeps the table; the roles are the implicit ones on desktop). The head row
     shows the desktop's own words, "Fiscal year · Document" and "Amount (SEK)" (r2: it labels the years),
     in the page's one label voice (r3, S4-1: mono 500 11/16 .1em, = the desktop's thead th); Dated and
     Paid stay in it for screen readers only.
     "Dated" and "Paid" in the rows are phone-only aria-hidden words (.ph.r11-s4-w in the fragment).
     The fiscal year is plain mono report text, no outlined stamp (r3, = desktop polish r2: on a page
     with real controls an outlined chip reads as a button or a tag).
     Rules as on desktop: 1.5px slate-900 at the top and at the foot, a lighter 1px slate-700 rule at the
     2023 | 2024 change (r3, = desktop polish r2: at the frame's weight it read as a subtotal), hairlines
     between rows. The flagged credit note keeps its desktop look: the page's one flagged wash (--m-wash
     #F6F0E0, = the desktop's --r11-wash since its polish r3; 8px into the gutters,
     where the desktop keeps a 16px inner edge), the 3px gold mark at its left end, its amount in gold-lo,
     and "Flagged by the scan · ranked 5th of 291,292" as the row's last line. As on desktop (polish r2),
     "ranked 5th of 291,292" is a door to the Top 20 sheet: a phone-only native popovertarget button
     (.ph.r11-s4-go in the fragment) lies over the words, which carry the desktop's quiet gold underline;
     its keyboard ring goes round the whole flag, dot and words (r4, = the desktop's polish r3).
     The first invoice's row mirrors it, quietly (r5, S4-1, the desktop's twin line): "○ Ranked 37,652nd of
     291,292" as its third line, a hollow slate ring, --r11-dim words, inert.
   - the caption 8px under the ledger, the source 12px under the caption (m-base.css .r11-cap/.r11-src,
     r2: the caption belongs to the figure, the source is a footnote); the caption carries the desktop's
     sentence "The scan ranked the first invoice 37,652nd: it flagged the correction, not the bill." (a .ph twin).
   Budget (402x700, r5): figure with caption and source 507px, strip + 16 + figure 609px, so with the strip at the
   top of the view the strip, the whole ledger, its caption and source share one view. */

@media (max-width: 767px) {
  #s4 {
    --s4-wash: var(--m-wash);   /* the page's one flagged pale gold (m-base.css, r4 B2 = the desktop's --r11-wash) */
    --s4-bleed: 8px;        /* the flagged row's wash, into each gutter */
    --s4-pad: var(--m-4);   /* a row's padding, top and bottom: 16 */
    --s4-gap: var(--m-1);   /* line 1 -> line 2 -> line 3 inside a row: 4 */
    --s4-fy-w: 54px;        /* the fiscal year's column: four mono digits (31px) + a 23px gutter */
    --s4-flag-lh: 18px;     /* the flag note's line (13/18 = the meta size) */
    --s4-flag-lines: 1;     /* 2 under 340px, where the note breaks after "Flagged by the scan" */
  }

  /* The strip and the ledger, one column, 16px apart; never wider than the text measure (bites only
     from ~600px, so at 767 the ledger stays a compact two-column list, left-aligned with the head). */
  .r11-s4-grid {
    display: flex;
    flex-direction: column;
    gap: var(--m-block);
    max-width: var(--m-measure);
  }
  .r11-s4-grid > * { margin: 0; min-width: 0; }

  /* ---------- The supplier: a discreet strip, three short lines ---------- */
  .r11-s4-sup {
    padding: var(--m-3) var(--m-4);
    background: var(--slate-100);
    border-radius: 8px;       /* the phone's inner-panel radius (cards 12, panels and strips 8) */
  }
  .r11-s4-sup > * { margin: 0; }
  .r11-s4-sup-k {              /* the page's one label voice (m-base.css --m-label-font: mono 500 11/16, .1em) */
    font: var(--m-label-font);
    letter-spacing: var(--m-label-track);
    text-transform: uppercase;
    color: var(--slate-800);
  }
  .r11-s4-sup-name {
    margin-top: 2px;
    font: 500 18px/24px var(--serif);
    letter-spacing: -.005em;
    color: var(--slate-900);
  }
  .r11-s4-sup-dl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 2px;
    font: 400 var(--m-meta)/var(--m-meta-lh) var(--sans);
  }
  .r11-s4-sup-dl > div { display: flex; align-items: baseline; gap: 5px; }
  .r11-s4-sup-dl > div + div::before {          /* "Trade Jeweller · Town Gothenburg": a drawn-in separator */
    content: "\00B7";
    content: "\00B7" / "";
    margin: 0 3px 0 8px;      /* + the 5px gap: 8px either side of the dot */
    color: var(--r11-dim);
  }
  .r11-s4-sup-dl dt { color: var(--r11-dim); }
  .r11-s4-sup-dl dd { margin: 0; color: var(--slate-900); }

  /* ---------- The ledger ---------- */
  .r11-s4-tbl {
    display: block;
    width: 100%;
    border-top: 1.5px solid var(--slate-900);
    border-bottom: 1.5px solid var(--slate-900);
    font: 400 var(--m-meta)/var(--m-meta-lh) var(--sans);
    font-variant-numeric: tabular-nums;
    color: var(--slate-800);
  }
  .r11-s4-tbl thead,
  .r11-s4-tbl tbody { display: block; }
  .r11-s4-tbl th,
  .r11-s4-tbl td {
    display: block;
    min-width: 0;
    padding: 0;
    text-align: left;
    font-weight: 400;
  }
  .r11-s4-tbl .c-no { display: none; }   /* the number sits beside the document's name (as on desktop) */

  /* The head row, the desktop's own words: "Fiscal year · Document" left, "Amount (SEK)" right (it labels
     the years: the 2024 beside "Dated 1 Dec 2023" is the fiscal year of payment). Dated and Paid stay in
     it for screen readers only (the rows say them). */
  .r11-s4-tbl thead tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;            /* one line from 340px; under it "Amount (SEK)" drops, right-aligned */
    justify-content: flex-start;
    align-items: baseline;
    padding: 10px 0 9px;
    border-bottom: 1px solid var(--slate-300);
  }
  .r11-s4-tbl thead th {        /* the page's one label voice, = the desktop's thead th since polish r1 (r3, S4-1) */
    font: var(--m-label-font);
    letter-spacing: var(--m-label-track);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-dim);
  }
  .r11-s4-tbl thead .c-fy::after {
    content: "\00B7";
    content: "\00B7" / "";
    margin: 0 6px;
  }
  /* 24px at least between "Document" and "Amount (SEK)", so the two never read as one run of capitals:
     the head is 282px, one line from 340px (312px of room at 360); under it the amount head wraps. */
  .r11-s4-tbl thead .c-amt { margin-left: auto; padding-left: var(--m-5); }
  .r11-s4-tbl thead .c-dt,
  .r11-s4-tbl thead .c-pd {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* A document: one two-column row. Line 1: the FY stamp, the name and its number | the amount.
     Line 2: Dated … · Paid …   (columns: stamp | the rest of "Dated …" | "· Paid …" | the amount). */
  .r11-s4-tbl tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: var(--s4-fy-w) max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "fy doc doc amt"
      "dt dt  pd  amt";
    row-gap: var(--s4-gap);
    align-items: baseline;
    padding: var(--s4-pad) 0;
  }
  .r11-s4-tbl tbody tr + tr { border-top: 1px solid var(--slate-200); }
  .r11-s4-tbl tbody tr > :first-child { grid-area: fy; }
  .r11-s4-tbl tbody tr > th { grid-area: doc; }
  .r11-s4-tbl tbody tr > :nth-child(4) { grid-area: dt; }
  .r11-s4-tbl tbody tr > :nth-child(5) { grid-area: pd; }
  .r11-s4-tbl tbody tr > .c-amt { grid-area: amt; padding-left: var(--m-3); text-align: right; }

  /* The fiscal year: plain report text on line 1's baseline, no stamp (= desktop polish r2). */
  .r11-s4-fy {
    font: 500 12px/16px var(--mono);
    letter-spacing: .04em;
    color: var(--slate-900);
  }

  .r11-s4-tbl tbody th {
    font: 600 15px/20px var(--sans);
    color: var(--slate-900);
  }
  .r11-s4-no-in {
    margin-left: 3px;
    font: 400 12px/16px var(--mono);
    letter-spacing: .02em;
    color: var(--r11-dim);
  }

  /* Line 2: "Dated" and "Paid" dim, the dates in the body colour. */
  .r11-s4-tbl tbody tr > :nth-child(4),
  .r11-s4-tbl tbody tr > :nth-child(5) { white-space: nowrap; }
  .r11-s4-tbl tbody tr > :nth-child(5)::before {
    content: "\00B7";
    content: "\00B7" / "";
    margin: 0 6px;
    color: var(--r11-dim);
  }
  .r11-s4-w { color: var(--r11-dim); }

  /* The amounts: the serif at 20/24 (the 1,014,000 the same size, owner rule 5). "≈ 1 million" sits
     on line 2, beside the dates. */
  .r11-s4-tbl .r11-num { font-size: 20px; line-height: 24px; }
  .r11-s4-approx {
    display: block;
    margin-top: var(--s4-gap);
    font: 400 12px/16px var(--sans);
    color: var(--ink-dim);
  }

  /* The flagged credit note: the wash bleeds 8px into both gutters, the gold mark is its left 3px, the
     hairline above it stays the column's width (as on desktop). The note is the row's third line:
     it lives inside the row header (the document's cell, for screen readers) and is placed under the
     dates, in the room the row's bottom padding keeps for it. */
  .r11-s4-tbl tbody tr.is-flag {
    margin-inline: calc(-1 * var(--s4-bleed));
    padding: var(--s4-pad) var(--s4-bleed)
             calc(var(--s4-pad) + var(--s4-gap) + var(--s4-flag-lines) * var(--s4-flag-lh));
    border-top: 0;
    background: var(--s4-wash);
    box-shadow: inset 3px 0 0 var(--r11-mark);
    z-index: 1;               /* the rank door's hit area runs 6px into the next row (its rule, then empty padding) */
  }
  .r11-s4-tbl tbody tr.is-flag::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--s4-bleed);
    right: var(--s4-bleed);
    height: 1px;
    background: var(--slate-200);
  }
  .r11-s4-tbl tr.is-flag .r11-num { color: var(--r11-ink); }
  .r11-s4-flag {
    position: absolute;
    left: var(--s4-bleed);
    right: var(--s4-bleed);
    bottom: var(--s4-pad);
    display: flex;
    gap: 7px;
    font: 500 var(--m-meta)/var(--s4-flag-lh) var(--sans);
    color: var(--r11-ink);
  }
  .r11-s4-flag::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: calc((var(--s4-flag-lh) - 7px) / 2);   /* centred on the first line: 5.5 */
    border-radius: 50%;
    background: var(--r11-mark);
  }

  /* The first invoice's rank, the desktop's twin line (r5, S4-1; .ph.r11-s4-twin-ph in the fragment, word for
     word the desktop's .dk twin): row 1's third line, in the flag's anatomy but quiet. Row 1 makes room the way
     the flagged row does (16 + 4 + 18); the line sits where the flag sits (left on the column's edge, the row's
     bottom padding under it), so the two read one row apart:
         ○ Ranked 37,652nd of 291,292
         ● Flagged by the scan · ranked 5th of 291,292
     the flag's size and weight (13/18 500) in the dates' word colour (--r11-dim: 5.8:1 on slate-50), and the
     desktop's ring (7px, 1.3px slate-500) centred on the line as the flag's dot is. Inert: no underline, no
     button. One line at every width from 320 (it is 181px; 11px clear of the amount cell at 320). */
  .r11-s4-tbl tbody tr:first-child {
    padding-bottom: calc(var(--s4-pad) + var(--s4-gap) + var(--s4-flag-lh));
  }
  .r11-s4-twin-ph {
    position: absolute;
    left: 0;
    bottom: var(--s4-pad);
    width: fit-content;
    display: flex;
    gap: 7px;
    white-space: nowrap;
    font: 500 var(--m-meta)/var(--s4-flag-lh) var(--sans);
    color: var(--r11-dim);
  }
  .r11-s4-twin-ph::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: calc((var(--s4-flag-lh) - 7px) / 2);   /* centred on the line: 5.5, as the flag's dot */
    box-sizing: border-box;
    border: 1.3px solid var(--slate-500);
    border-radius: 50%;
  }

  /* "ranked 5th of 291,292" opens the Top 20 sheet, as on desktop (polish r2: r11-s8.js arms the words
     there; under 768 it takes its attributes off). Here a phone-only native button (popovertarget, the
     footer's own label) lies over the words: r11-s8.js records it as the opener, so focus comes back to
     it, and the sheet's phone history entry lets Back close it. The desktop's quiet gold underline at
     rest (a phone has no hover), full strength while pressed. The hit area is 44px tall: from the 4px
     gap under the dates (never over them) to 5px into the next row's empty top padding. */
  .r11-s4-rank:has(> .r11-s4-go) {
    display: inline-block;      /* its box is the 18px line, so the hit area below is measured from it */
    position: relative;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(132, 98, 12, .4);   /* --gold-lo at 40%: the desktop's rest */
  }
  .r11-s4-go {
    position: absolute;
    inset: calc(-1 * var(--s4-gap)) -8px calc(-1 * (var(--m-tap) - var(--s4-flag-lh) - var(--s4-gap))) -8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .r11-s4-go:focus { outline: none; }
  .r11-s4-rank:has(> .r11-s4-go:active),
  .r11-s4-rank:has(> .r11-s4-go:focus-visible) { text-decoration-color: currentColor; }

  /* Keyboard focus: ONE ring round the whole flag, the dot, "Flagged by the scan" and "ranked 5th…" (r4, S4-1
     = the desktop's polish r3). The flag hugs its words (fit-content beats its right: 8px; nothing moves), and
     the ring is the desktop's: 2px out, 2px slate-900, radius 4, drawn as a box-shadow over a 2px band of the
     row's own wash. Measured at 402 (dpr 2): 4px clear of the dates' digits above, 11.5px of wash below, 1px of
     wash between it and the 3px gold mark at the left. The rank keeps its full-strength underline. The
     transparent outline is the ring in forced-colors mode, where shadows are dropped. */
  .r11-s4-flag { width: fit-content; }
  .r11-s4-flag:has(.r11-s4-go:focus-visible) {
    border-radius: 4px;
    box-shadow: 0 0 0 2px var(--s4-wash), 0 0 0 4px var(--slate-900);
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  /* Fiscal 2024: a mid rule where the year changes, lighter than the frame and stronger than the
     hairlines (= desktop polish r2: at the frame's weight it read as a footing or subtotal rule). */
  .r11-s4-tbl tbody tr.is-next { border-top: 1px solid var(--slate-700); }

  /* Caption 8px under the ledger (.r11-cap's own margin), the source 12px under it (m-base.css). */
  .r11-s4-fig figcaption { margin: 0; }
}

/* Under 340px (a 292px column; the note needs ~274): the flag note on two lines, "Flagged by the scan" /
   "ranked 5th of 291,292", in two lines of room. Never wraps on its own over the dates. */
@media (max-width: 339px) {
  #s4 { --s4-flag-lines: 2; }
  .r11-s4-flag .r11-s4-sep { display: none; }
  .r11-s4-flag .r11-s4-rank { display: block; width: fit-content; }
  /* the door on its own (second) line: its hit area starts at the line, 44px down into empty padding */
  .r11-s4-go { inset: 0 -8px calc(-1 * (var(--m-tap) - var(--s4-flag-lh))) -8px; }
}

/* Where :has() is unknown (no underline, no flag ring above), the door keeps the rank's own ring, at offset 0
   (= the desktop's fallback): drawn by the button round the words' 18px line, which sits at --s4-go-top
   inside its hit area (4px down; 0 under 340, where the hit area starts at the line). */
@supports not selector(:has(*)) {
  @media (max-width: 767px) {
    .r11-s4-go:focus-visible::before {
      content: "";
      position: absolute;
      top: var(--s4-go-top, var(--s4-gap));
      left: 8px;
      right: 8px;
      height: var(--s4-flag-lh);
      border-radius: 2px;
      outline: 2px solid var(--slate-900);
    }
  }
  @media (max-width: 339px) {
    #s4 { --s4-go-top: 0px; }
  }
}