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

   Owner "end": the end of the page on the phone, after the desktop (r11-s7.css, r11-s8.css):
   - #s7 the Disclaimer band (the owner's pick "B"): full bleed, 72px under s6's last line.
   - #s8 Method and Limitations: two folds whose whole heading row is the button; the Method's six tiny
     boxes and the two Limitations (the owner's picks of 2026-10-21) at the phone's type floors; four
     boxes open their Appendix sheet, as on the desktop (r3, E2).
   - the footer (Oil's layout, one column): name, about, Contact, Appendix, Sources, the fine print;
     every link a 44px row, nothing a reader reads under 12px.
   - the Appendix sheets (.r11-apx, native popovers): a full-height phone sheet like the s5 reading panel,
     opaque at once, only its content fading in. r3: no sideways swipe left but the code itself: the
     Examples and Feature tables become stacked lists (E1, E5), the error table fits from 360 (E1b).
   r11-s7.css and r11-s8.css each carry a phone block written before the phone system existed (r11-s8's
   "blind"); this file overrides them and never edits them. Selectors carry an id or a parent where they
   must beat m-base.css's `.r11-sec > * { margin: 0 }` or r11-s8.css's own phone rules. */

@media (max-width: 767px) {

  /* ======================================================================
   * #s7 The Disclaimer band
   * ==================================================================== */
  /* The band is the section's box (m-base gives #s7.r11 no padding). Its top edge sits 36px under s6's
     36px of padding: 72px under s6's source line, as every section break. The text keeps the 24px gutter
     of .r11-sec; the band itself bleeds to both edges (r11-s7.css: box-shadow + clip-path). */
  /* 2026-10-21: the owner removed the band (R11 rule 26), so the block is a plain section on the page's
     ground: 72px from s6's source line to "Disclaimer" (36 + 36) and 72px from its last line to "Method"
     (0 + #s8's 66 + the button's 6), the same join as every other section. */
  #s7 .r11-s7 {
    margin-top: var(--m-sec-half);
    padding: 0;
  }
  /* r5 (E1, D8): a jump to the band (/#s7, a hash, a link) lands it one section join (72) under the window's
     top edge, where a reader scrolling down meets it after s6, with the Method heading under it; flush at 0
     read as a cut. The section's box starts at the band (its 36px margin collapses through #s7), and s6's
     source line ends 72px above it, so the landed frame shows none of s6. (The desktop centres its band:
     r11-s7.css, from 768px.) story.js's preLand reads this margin. */
  #s7.r11 { scroll-margin-top: var(--m-sec); }
  #s7 .r11-s7-h {
    padding-bottom: var(--m-3);
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -.01em;
  }
  #s7 .r11-s7-lines {            /* the two hand-drawn red lines, 150px wide (desktop 170) */
    width: 150px;
    height: 16px;
    margin-left: -75px;
    bottom: -5px;
  }
  /* r5: balanced, as the desktop's own centred text (r11-s7.css from 768: "four balanced lines"). The owner's
     11:21 text under pretty left "establish wrongdoing." alone under five long lines at 402 (158 of 354px)
     and "not establish wrongdoing." at 767 (186 of 612): a centred block then reads as a jagged pyramid. Balanced
     it is one even block at the same height (402: six lines, 281-333px, band 314; 440: five, band 286; 767:
     four, 411-483, band 258). At 320-375 the text runs to seven or eight lines, past Chrome's balance limit,
     and wraps as before (no single-word last line: the   before "wrongdoing"). */
  #s7 .r11-s7-p {
    max-width: var(--m-measure);
    margin-top: 20px;
    font-size: 18px;
    line-height: 28px;
    text-wrap: balance;
  }

  /* ======================================================================
   * #s8 Method and Limitations
   * ==================================================================== */
  /* The band's lower edge -> the "Method" line box: 72px (the button's 6px padding is inside it).
     The last limitation's last line -> the footer's edge: 72px (r2: the two-item Limitations of
     2026-10-21 end on their text, with no row padding under it). */
  #s8.v3-method {
    padding-top: calc(var(--m-sec) - 6px);
    padding-bottom: var(--m-sec);
  }

  /* The folds: the heading in the serif, one step under .r11-h (32/36 450). */
  #s8 .r11-fold-h {
    font-family: var(--serif);
    font-weight: 450;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -.02em;
  }
  /* The whole heading row is the button: 44px tall (32px line + 6px above and below), the 14px gold
     chevron after the word, as on desktop. No tap highlight; a visible press instead. */
  #s8 .r11-fold-btn {
    display: flex;
    align-items: center;
    gap: var(--m-3);
    width: 100%;
    min-height: var(--m-tap);
    margin: 0;
    padding: 6px 0;
    border-radius: 0;
    touch-action: manipulation;
  }
  #s8 .r11-fold-btn:active { color: var(--slate-800); }
  #s8 .r11-fold-btn:active .r11-fold-mark path { stroke: var(--gold-lo); }
  #s8 .r11-fold-btn:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; border-radius: 4px; }
  #s8 .r11-fold-mark { margin-top: 3px; }
  /* Folded, the whole fold is a way in (r11-s8.js): no grey tap flash over the heading and the glimpse.
     r4: a deep link to a fold (/#limitations, /#r11-method) lands its heading 36px from the top, a
     section's own top padding on the phone (the desktop's polish r3 does the same with its 64), not flush
     with the window's edge. */
  #s8 .r11-fold { -webkit-tap-highlight-color: transparent; scroll-margin-top: var(--m-sec-half); }

  /* The Method and the Limitations are reference text: on the phone their blocks are simply there, with
     no entrance (story.js still marks them; this only keeps them from being hidden first). A fold that
     opens or closes brings text into view without a scroll; it must be whole at once, never fading in
     (SPEC-M "Motion"), and a flick through these four screens never meets a half-faded list. */
  html.has-reveal #s8 .rv:not(.is-in),
  html.has-reveal #s8 .rv.is-in:not(.rv-done) {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }

  /* Heading -> its content: 24px (the button's 6px below the line + 18). Method -> Limitations: 48px
     from the last box to the "Limitations" line box (inside a section nothing is farther apart). */
  #s8 .r11-fold-body { margin-top: calc(var(--m-head) - 6px); }
  #s8 .r11-fold + .r11-fold { margin-top: calc(var(--m-7) - 6px); }
  /* Folded: a short glimpse, so the next heading stays near. r4 (E3), as the desktop's polish r3: the
     glimpse at full ink, no fade (a ghosted block read as a loading state), cut on a line box so no part-
     drawn thing shows. Method keeps only its lede: 48px is the one-line lede (24) and the 24px gap down to
     the chain at 402-767, the two balanced lines (48) under ~390; the first box starts at 48 or 72, so no
     box pixel shows from 320 to 767. Limitations keeps its first rule and title, down to the title's line
     box: 2 + 15.5 + 27 = 44.5; its paragraph starts 8px lower (52.5), so no paragraph pixel shows. Still
     inert; a tap anywhere on it opens it (r11-s8.js), at once, and y never moves. */
  #s8 .r11-fold.is-folded > .r11-fold-body { opacity: 1; -webkit-mask-image: none; mask-image: none; }
  #s8 #r11-method.is-folded > .r11-fold-body { max-height: 48px; }
  #s8 #limitations.is-folded > .r11-fold-body { max-height: 44.5px; }

  /* Method as six tiny boxes (the owner's pick "A", 2026-10-21; r11-s8.css draws them at every width).
     On the phone only the type moves to the phone floors: the lede at 15/24 (balanced, r4: "…in six /
     small steps." at 375 left two words alone), 24px over the chain (a head -> its first block); in each
     box the step 15/20 600 and its line in IBM Plex Mono 12/16 (r11-s8's phone 11px is under the 12px
     floor for lowercase text). r4 (E4): the desktop's own proportions (its polish r2): boxes 52px tall
     (1 + 6 + 20 + 2 + 16 + 6 + 1; the gold box's 1.5px edge takes .5px of each padding), 24px apart, the
     gold arrow's line 17px with its head 8px over the box: 6 x 52 + 5 x 24 = 432px (was 510). Still the
     owner's 240px wide (r3 D4), radius 8 (B3), so "one table · 7,294,483 lines" fits its 216px at 12px. */
  #s8 .r11-s8-lede {
    max-width: var(--m-measure);
    font-size: var(--m-small);
    line-height: var(--m-small-lh);
    text-wrap: balance;
  }
  #s8 .r11-s8-chain { margin-top: var(--m-head); }
  #s8 .r11-s8-box { width: 240px; min-height: 52px; padding: 6px 12px; border-radius: 8px; }   /* B3: 8 */
  #s8 .r11-s8-box.is-gold { padding-top: 5.5px; padding-bottom: 5.5px; }
  #s8 .r11-s8-box + .r11-s8-box { margin-top: var(--m-5); }
  #s8 .r11-s8-box + .r11-s8-box::before { top: calc(-1 * var(--m-5)); height: 17px; }
  #s8 .r11-s8-box b { font-size: 15px; line-height: 20px; }   /* r3 E4: the desktop's 15 (14 is off the scale) */
  #s8 .r11-s8-box span { font-size: 12px; line-height: 16px; }
  /* r4 (E5): the Score box on the page's one flagged wash (the desktop's polish r3; was #FBF6E9). */
  #s8 .r11-s8-box.is-gold { background: var(--m-wash); }

  /* r3 (E2): four boxes open their Appendix sheet, as on the desktop (r11-s8.js part 3, from 768px):
     Download -> Example of invoices, Feature engineering -> Feature engineering, Autoencoder -> Code
     example, Score -> Top 20. On the phone each carries a native popovertarget button (`.ph` in s8.html),
     laid over the whole box (240 x 60, its border included), so r11-s8.js records it as the opener (focus
     comes back to it) and the history script in foot.html gives the sheet a Back entry. A phone has no
     hover, so the cue is at rest: the title underlined (slate-500, the page's link underline; tile-gold on Score). A press shows the
     desktop's hover edge (slate-500; gold-lo on Score) and the title's underline in full; keyboard focus a
     2px ring round the box. "Clean" and "Keep 2023" stay plain boxes. */
  #s8 .r11-s8-go {
    position: absolute;
    inset: -1px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #s8 .r11-s8-box.is-gold > .r11-s8-go { inset: -1.5px; }
  #s8 .r11-s8-box:has(> .r11-s8-go) > b {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--slate-500);   /* the page's link underline (there is no slate-400 token) */
  }
  #s8 .r11-s8-box.is-gold:has(> .r11-s8-go) > b { text-decoration-color: var(--tile-gold); }
  #s8 .r11-s8-box:has(> .r11-s8-go:active) { border-color: var(--slate-500); }
  #s8 .r11-s8-box.is-gold:has(> .r11-s8-go:active) { border-color: var(--gold-lo); }
  #s8 .r11-s8-box:has(> .r11-s8-go:active) > b { text-decoration-color: currentColor; }
  @media (hover: hover) {
    #s8 .r11-s8-box:has(> .r11-s8-go:hover) { border-color: var(--slate-500); }
    #s8 .r11-s8-box.is-gold:has(> .r11-s8-go:hover) { border-color: var(--gold-lo); }
    #s8 .r11-s8-box:has(> .r11-s8-go:hover) > b { text-decoration-color: currentColor; }
  }
  #s8 .r11-s8-go:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; }
  /* r4 (E4): the keyboard ring round the box is a box-shadow, as the desktop's polish r3 (3px of the page
     ground, then 2px slate-900), with the desktop's focus edge: the gold arrow into the next box (its
     ::before, later in tree order) is drawn over the ring, so the chain stays whole. The transparent outline
     is the ring in forced-colors mode, where shadows are dropped. */
  @supports selector(:has(*)) {
    #s8 .r11-s8-go:focus-visible { outline: none; }
    #s8 .r11-s8-box:has(> .r11-s8-go:focus-visible) {
      border-color: var(--slate-500);
      outline: 2px solid transparent;
      outline-offset: 3px;
      box-shadow: 0 0 0 3px var(--slate-50), 0 0 0 5px var(--slate-900);
    }
    #s8 .r11-s8-box.is-gold:has(> .r11-s8-go:focus-visible) { border-color: var(--gold-lo); }
    #s8 .r11-s8-box:has(> .r11-s8-go:focus-visible) > b { text-decoration-color: currentColor; }
  }

  /* Limitations as two (the owner's pick "C", 2026-10-21), stacked: the serif title at the system's
     sub-heading size (22/27, weight 400 as the desktop), the text at the end matter's 15/24, the two 32px
     apart (r11-s8's phone 28 is off the scale). */
  #s8 .r11-s8-two { gap: var(--m-6); }
  #s8 .r11-s8-two-i h4 { font-size: var(--m-step-h); line-height: var(--m-step-h-lh); text-wrap: balance; }
  #s8 .r11-s8-two-i p {
    max-width: var(--m-measure);
    margin-top: var(--m-2);
    font-size: var(--m-small);
    line-height: var(--m-small-lh);
  }

  /* ---- Dormant: the six text steps, the run line and the seven-row Limitations (markup before
     2026-10-21, kept by the owner in tools/r11/s8-before-tiny-boxes.html / s8-before-two-limits.html).
     Nothing matches today; kept so the phone stays right if the owner brings that markup back. ---- */
  /* Shared: the step / limitation title and text. Text keeps the desktop's dimmed grey (#5D6168,
     5.9:1 on slate-50): the Method is the quiet end matter, a step under the story's slate-800. */
  #s8 .r11-s8-h {
    font: 600 16px/22px var(--sans);
    letter-spacing: -.006em;
  }
  #s8 .r11-s8-step p,
  #s8 .r11-s8-limit p {
    max-width: var(--m-measure);
    font: 400 var(--m-small)/var(--m-small-lh) var(--sans);
  }

  /* Method: six steps in one column, 28px apart; each a gold mono number on a hairline, the title 8px
     under it, the text 4px under the title. */
  #s8 .r11-s8-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #s8 .r11-s8-step .r11-s8-h { margin-top: var(--m-2); }
  #s8 .r11-s8-step p { margin-top: var(--m-1); }

  /* The two links inside the steps' text ("eight numbers" opens the Feature engineering sheet, "the map"
     goes back to #s3): drawn as text links, each with a 44px tall hit area over its line. */
  #s8 .r11-s8-step a,
  #s8 .r11-s8-link {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #s8 .r11-s8-step a::after,
  #s8 .r11-s8-link::after {
    content: "";
    position: absolute;
    inset: -10px -6px;
  }
  #s8 .r11-s8-step a::after { inset: -12px -6px; }   /* a link's inline box is ~20px: 44 tall (r2 E3b) */
  #s8 .r11-s8-step a:active,
  #s8 .r11-s8-link:active { text-decoration-color: currentColor; color: var(--slate-800); }

  /* The run behind the map: the mono label, then two short paragraphs at 13/20 in the dim grey; the
     layer chain only breaks at an arrow (its two halves are nowrap in the markup). */
  #s8 .r11-s8-run {
    display: block;
    max-width: var(--m-measure);
    margin-top: var(--m-6);
    font: 400 var(--m-meta)/20px var(--sans);
    color: var(--r11-dim);
  }
  #s8 .r11-s8-run-k {
    display: block;
    margin: 0 0 var(--m-1);
    font: 500 11px/16px var(--mono);
    letter-spacing: .1em;
    color: var(--slate-900);
  }

  /* Limitations: a register on hairlines (slate-300 on top, as the desktop); a 32px number column, the
     title and the text in the second column. */
  #s8 .r11-s8-limit {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 0;
    padding: var(--m-4) 0 20px;
  }
  #s8 .r11-s8-limit .r11-s8-n { line-height: 22px; }
  #s8 .r11-s8-limit p { grid-column: 2; margin-top: var(--m-1); }
  /* ---- end of the dormant block ---- */

  /* ======================================================================
   * The footer
   * ==================================================================== */
  .site-footer {
    padding: var(--m-7) var(--m-gutter) calc(var(--m-6) + env(safe-area-inset-bottom, 0px));
  }
  /* r5 (E2, D6): the signature in the serif, as the desktop's polish r3 (500 23/28, -.01em), one step under
     it on the phone's sub-heading tier (22/27, the s6 step heads and the Limitations titles above it), so the
     page closes in the voice it opens with; the about line 8px under it (the desktop's 8). */
  .r11-ft-name {
    font: 500 var(--m-step-h)/var(--m-step-h-lh) var(--serif);
    letter-spacing: -.01em;
    font-optical-sizing: auto;
    color: var(--slate-900);
  }
  /* r4: pretty, as the page's other notes: at 402-440 it changes nothing (a 4-line rag, 327/335/255/127px);
     at 767 it lifts the last line from 127 to 185px ("and interpretation." no longer sits alone under two
     full lines). Balance was tried and dropped: at 402 it narrows every line to ~260px of 354. */
  .r11-ft-about {
    max-width: var(--m-measure);
    margin-top: var(--m-2);
    font: 400 var(--m-small)/var(--m-small-lh) var(--sans);
    text-wrap: pretty;
  }
  /* r2 (E1): the desktop's top row read in order: name -> about -> Contact (the desktop puts it level
     with the name, on the right) -> Appendix -> Sources -> the fine print. The grid becomes one column,
     the brand block (a plain div) steps aside (display: contents) so its children and the Contact column
     are siblings, and `order` sets the reading order. The DOM is unchanged, so Tab still reaches
     Contact after Sources (a footer's links; noted for the owner).
     Groups 32px apart (+ the last row's 11px); the label sits 2px over its first row's 11px padding,
     so a label is always closer to its links than to the group before. */
  .r11-ft-grid { display: flex; flex-direction: column; align-items: stretch; row-gap: 0; }
  .r11-ft-brand { display: contents; }
  .r11-ft-name { order: 0; }
  .r11-ft-about { order: 1; }
  .r11-ft-col { order: 2; margin-top: var(--m-6); }
  .r11-ft-group { order: 3; margin-top: var(--m-6); }
  /* r3 (E4, B1): the page's one label voice (mono 500 11/16, .1em; the desktop's .1em since polish r1). */
  .r11-ft-label { font: var(--m-label-font, 500 11px/16px var(--mono)); letter-spacing: var(--m-label-track, .1em); }
  .r11-ft-links { gap: 0; margin-top: 2px; }
  /* Every row 44px (11 + a 22px line + 11): the link's hit area is its own line made 44px tall, so hit
     areas never overlap (the blind block's 32px rows overlapped them by 12px). */
  .r11-ft-links li {
    max-width: var(--m-measure);
    min-height: var(--m-tap);
    padding: 11px 0;
    font-size: var(--m-small);
    line-height: 22px;
  }
  /* The row is 44px: a button (22px tall) reaches 11px up and down, a link (its 19px inline box sits
     1.5px into the 22px line) 12.5px: each hit area is exactly its row, never into the next one. */
  .r11-ft-link::after { inset: -11px -6px; }
  .r11-ft-links a::after { inset: -12.5px -6px; }
  /* Contact's links are the li's own flex items (r11-s8.css makes the li a flex row), so their box is
     the 22px line, as a button's: 11px up and down, or the two rows' hit areas overlap by 3px (r2). */
  .r11-ft-links li > a::after { inset: -11px -6px; }
  .r11-ft-links a,
  .r11-ft-link { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .r11-ft-links a:active,
  .r11-ft-link:active { text-decoration-color: currentColor; color: var(--slate-800); }

  /* r5: a Swedish proper name is never split across two lines in the footer (the `lang="sv"` spans: Örebro
     kommun, Jarl Sandin Guld och Silver AB). The fine print broke the store's name at every width from 320 to
     440 ("…Jarl Sandin Guld och / Silver AB" at 402, "…Jarl / Sandin…" at 320), the about line "…of Örebro /
     kommun's" at 390-440. The longest, the store's name, is ~205px at 13px, so it fits the 272px column at
     320. Only the footer's own text (.r11-ft): the sheets' committee names must still wrap at 320. */
  .r11-ft [lang] { white-space: nowrap; }
  .r11-ft-base { margin-top: 21px; padding-top: var(--m-4); }
  .r11-ft-base p { font-size: var(--m-meta); line-height: var(--m-meta-lh); text-wrap: pretty; }   /* r4: 13/18, the meta pair (was 19) */

  /* ======================================================================
   * The Appendix sheets: full-height phone sheets, like the s5 reading panel
   * ==================================================================== */
  /* The whole screen (100dvh, 100vh where dvh is missing), no frame; the bar with the title, its one
     line under it and the 44px close; the content scrolls inside (overscroll contained). The page under
     it stays where it was (r11-s8.css: html:has(.r11-apx:popover-open) { overflow: hidden }). */
  .r11-apx {
    --apx-pad: var(--m-gutter);
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .r11-apx::backdrop { background: rgba(36, 38, 42, .44); }
  /* r2 (E2), as the s5 reading sheet (S5-1): the sheet's white ground and its bar (the title, its line,
     the close) are there, opaque, in the first frame after the tap, so the page never shows through and
     the reader sees at once what opened. r4 (E2, D3): the content is opaque from that first frame too (a
     landed frame is complete; a sheet is a landing): it only settles 8px up over 160ms, with no fade and no
     delay. Closing is instant (a native popover). The desktop's whole-sheet fade (r11-s8.css) and the
     scrim's fade are off here: the sheet covers the whole screen. Reduced motion: nothing moves. */
  .r11-apx:popover-open,
  .r11-apx:popover-open::backdrop { animation: none; }
  @media (prefers-reduced-motion: no-preference) {
    .r11-apx:popover-open .r11-apx-body { animation: m-apx-in .16s cubic-bezier(.2, .7, .2, 1); }
  }

  .r11-apx-head {
    gap: var(--m-2);
    min-height: 56px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 8px 12px var(--apx-pad);
  }
  .r11-apx-t { font-size: 22px; line-height: 28px; }
  .r11-apx-sub { margin-top: 2px; font-size: var(--m-meta); line-height: var(--m-meta-lh); text-wrap: balance; }
  .r11-apx-x {
    width: var(--m-tap);
    height: var(--m-tap);
    margin: -8px 0 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* r4 (E2): iOS keeps :hover on a tapped element, so after a Back / Forward re-open the close could keep
     r11-s8.css's grey hover fill: no hover fill on the phone (as s5's close); the press keeps slate-100. */
  .r11-apx-x:hover { background: transparent; color: var(--slate-800); }
  .r11-apx-x:active { background: var(--slate-100); }
  .r11-apx-body {
    padding: 20px var(--apx-pad) calc(var(--m-6) + env(safe-area-inset-bottom, 0px));
  }
  .r11-apx-lede { font-size: var(--m-small); line-height: var(--m-small-lh); }
  /* r4: the sheets' rhythm on the phone's space scale (the desktop's 14 / 30 / 8 sit between its steps):
     block -> block 16, a sub-heading 32 under the block before it and 8 over its own, and a source line
     8px under the table it notes, as on the page (SPEC-M "Labels, captions, sources"); two source lines
     in a row read as one footnote, 8 apart. */
  .r11-apx-body > * + * { margin-top: var(--m-block); }
  .r11-apx-body > .r11-apx-h { margin-top: var(--m-6); }
  .r11-apx-body > .r11-apx-h + * { margin-top: var(--m-2); }
  .r11-apx-body > .r11-apx-tbl + .r11-apx-src,
  .r11-apx-body > .r11-apx-src + .r11-apx-src { margin-top: var(--m-cap); }
  /* the "Swipe the code sideways" hint (shown by r11-s8.js only while its box scrolls: the Code sheet) is the
     box's own caption, above it: 8px over the box it names, 16 under the lede */
  .r11-apx-body > .r11-apx-swipe.is-on + * { margin-top: var(--m-cap); }

  /* The sheets' small print at the phone floors: uppercase mono labels 11px, everything else 12px. The
     column heads' Swedish / qualifier lines join the heads' uppercase so they may sit at 11.
     r3: the column heads speak the page's one label voice (mono 500 11/16, .1em; B1). */
  .r11-apx-tbl thead th {
    font: var(--m-label-font, 500 11px/16px var(--mono));
    letter-spacing: var(--m-label-track, .1em);
  }
  /* r4 (E5c, D4): the Swedish source names keep the desktop's own quieter voice under the label voice:
     11/16 uppercase, weight 400, --ink-dim, tracked .04em (the desktop's; was .1em). */
  .r11-apx-sh { font-size: 11px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; }
  /* r4: the tags ("followed up", "differs", "96% of the error") as the desktop's polish r3 has them: plain
     gold mono text in the label voice, no outline (an outlined chip reads as a button, more so under a
     finger). */
  .r11-apx-tag {
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font: var(--m-label-font, 500 11px/16px var(--mono));
    letter-spacing: var(--m-label-track, .1em);
  }
  /* r4 (E5a, D7): the page's one flagged wash on the Top 20's note (was the 9% gold wash, ~#F6F2EA).
     r5 (E3c, D9): and the find's mark at its left, as s4's flagged row draws it: 3px --tile-gold (was
     r11-s8.css's 2px --gold #977011); the radius stays. */
  .r11-apx-flag { background: var(--m-wash); }
  #r11-apx-top20 .r11-apx-flag { border-left: 3px solid var(--tile-gold); }
  .r11-apx .r11-apx-code-i { font-size: 12px; line-height: 16px; }
  .r11-apx-src code { font-size: 1em; }   /* file names in a 12px source line: 12, not .9em = 10.8 */
  .r11-apx-codebar { font-size: 12px; line-height: 16px; }
  /* r3 (E4): the code at 12 on its 20px line (was 12.5: no half pixels), so the line numbers stay aligned. */
  .r11-apx-pre { font-size: 12px; line-height: 20px; }
  /* r3: the sheets' text on the phone scale. The desktop sets the paragraphs, steps, notes, the flag and the
     definitions all at 14 (14 and 13.5 are off the phone's scale): here they take the card text, 15/24, as
     the lede does; inline code in the lede 13 (the desktop's 14 in 16), never .9em = 13.5. */
  .r11-apx-p,
  .r11-apx-steps,
  .r11-apx-notes,
  .r11-apx-flag,
  .r11-apx-defs dd { font-size: var(--m-small); line-height: var(--m-small-lh); }
  .r11-apx-lede code { font-size: 13px; }
  /* definition terms (Score, Amount, Log amount…) in the label voice, stacked over their text */
  .r11-apx-defs dt { font: var(--m-label-font, 500 11px/16px var(--mono)); letter-spacing: var(--m-label-track, .1em); }

  /* r3: from ~600px a full-width sheet is wider than a reading line: its text and the stacked lists keep
     the page's measure (34em), left-aligned under the bar (at 402 nothing changes). r4: the Top 20 is a
     stacked list too (E1), so it and its note take the measure as well. */
  .r11-apx-lede,
  .r11-apx-p,
  .r11-apx-steps,
  .r11-apx-notes,
  .r11-apx-defs,
  .r11-apx-src,
  #r11-apx-examples .r11-apx-tbl--ex,
  #r11-apx-features .r11-apx-tbl--feat,
  #r11-apx-top20 .r11-apx-flag,
  #r11-apx-top20 .r11-apx-tbl--top { max-width: var(--m-measure); }
  /* r4: the lists' frames on the text's em (15px), so their 34em ends on the same x as the text's (510px at
     767, was 544); every cell inside sets its own size, so nothing else changes. */
  #r11-apx-examples .r11-apx-tbl--ex,
  #r11-apx-features .r11-apx-tbl--feat,
  #r11-apx-top20 .r11-apx-tbl--top { font-size: var(--m-small); }

  /* ---- r3 (E1a): "Example of invoices" as a stacked ledger list, in the s4 row's anatomy (no sideways
     swipe). The <table> stays the source; its display values change here, so foot.html carries the
     table roles (role=table/rowgroup/row/columnheader/rowheader/cell: the implicit ones on desktop), and
     VoiceOver keeps the table. Each row, in order: the payment date and the amount on line 1; the
     supplier; the committee; the account; the org. number, 12px, the invoice number. The head row is the
     key on top, in the label voice, each head followed by the source file's Swedish name. Hairlines
     between rows, the s4 ledger's 1.5px slate-900 rule under the key. The cells keep their DOM order
     (date, committee, supplier, org. no., invoice no., account, amount); `order` places them. ---- */
  #r11-apx-examples .r11-apx-tbl--ex { overflow: visible; }
  #r11-apx-examples .r11-apx-tbl--ex table,
  #r11-apx-examples .r11-apx-tbl--ex thead,
  #r11-apx-examples .r11-apx-tbl--ex tbody { display: block; }
  #r11-apx-examples .r11-apx-tbl--ex table { min-width: 0; }   /* the inline --tbl-min:940px is on the wrapper */
  #r11-apx-examples .r11-apx-tbl--ex tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 2px;
    padding: 12px 16px;
  }
  #r11-apx-examples .r11-apx-tbl--ex tbody tr + tr { border-top: 1px solid var(--slate-200); }
  #r11-apx-examples .r11-apx-tbl--ex tr > * {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    white-space: normal;
  }
  #r11-apx-examples .r11-apx-tbl--ex tr > :nth-child(1) { order: 0; flex: 0 0 auto; }
  #r11-apx-examples .r11-apx-tbl--ex tr > :nth-child(7) { order: 1; flex: 1 1 0; margin-left: var(--m-3); text-align: right; }
  #r11-apx-examples .r11-apx-tbl--ex tr > :nth-child(3) { order: 2; flex: 0 0 100%; }
  #r11-apx-examples .r11-apx-tbl--ex tr > :nth-child(2) { order: 3; flex: 0 0 100%; }
  #r11-apx-examples .r11-apx-tbl--ex tr > :nth-child(6) { order: 4; flex: 0 0 100%; }
  #r11-apx-examples .r11-apx-tbl--ex tr > :nth-child(4) { order: 5; flex: 0 0 auto; }
  #r11-apx-examples .r11-apx-tbl--ex tr > :nth-child(5) { order: 6; flex: 0 0 auto; margin-left: var(--m-3); }
  /* the rows */
  #r11-apx-examples .r11-apx-tbl--ex tbody tr > * { font: 400 13px/18px var(--sans); color: var(--slate-800); }
  #r11-apx-examples .r11-apx-tbl--ex tbody tr > :nth-child(1) { font: 600 15px/22px var(--sans); color: var(--slate-900); white-space: nowrap; }
  #r11-apx-examples .r11-apx-tbl--ex tbody tr > :nth-child(7),
  #r11-apx-examples .r11-apx-tbl--ex tbody tr > :nth-child(3) { font: 400 15px/22px var(--sans); color: var(--slate-900); }
  /* one figure per row: proportional lining figures (Schibsted's tabular comma and point are figure-wide) */
  #r11-apx-examples .r11-apx-tbl--ex tbody tr > :nth-child(7) { font-variant-numeric: lining-nums proportional-nums; white-space: nowrap; }

  /* ---- Code example, part 2 (2026-10-21): the credit note's one ledger row as a label/value list (no sideways
     swipe; the amount first), and x as eight rows: index, number, what it measures. The column heads stay in
     the table for screen readers, visually hidden; each cell shows its head from data-label. ---- */
  #r11-apx-code .r11-apx-swipe:has(+ .r11-apx-tbl--row) { display: none; }
  #r11-apx-code .r11-apx-tbl--row { overflow: visible; }
  #r11-apx-code .r11-apx-tbl--row table,
  #r11-apx-code .r11-apx-tbl--row tbody { display: block; min-width: 0; }
  #r11-apx-code .r11-apx-tbl--row thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #r11-apx-code .r11-apx-tbl--row tbody tr { display: flex; flex-direction: column; row-gap: 10px; padding: 14px 16px; }
  #r11-apx-code .r11-apx-tbl--row td {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    white-space: normal;
    font: 400 15px/21px var(--sans);
    color: var(--slate-900);
  }
  #r11-apx-code .r11-apx-tbl--row td::before {
    content: attr(data-label);
    display: block;
    font: 500 11px/16px var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  #r11-apx-code .r11-apx-tbl--row td:nth-child(7) { order: -1; font-weight: 600; font-variant-numeric: lining-nums proportional-nums; }
  #r11-apx-code .r11-apx-tbl--row td.is-mono { font: 400 13px/20px var(--mono); }
  #r11-apx-code .r11-apx-vec { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  #r11-apx-code .r11-apx-vk span { font-size: 12px; }
  #r11-apx-code .r11-apx-vrow { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 8px 0; }
  #r11-apx-code .r11-apx-vrow li {
    display: grid;
    grid-template-columns: 16px 76px minmax(0, 1fr);
    column-gap: 12px;
    align-items: baseline;
    padding: 3px 8px;
    text-align: left;
  }
  #r11-apx-code .r11-apx-vi { font-size: 11px; }
  #r11-apx-code .r11-apx-vrow b { text-align: right; }
  #r11-apx-code .r11-apx-vl { font-size: 12px; line-height: 16px; }
  #r11-apx-code .r11-apx-vstep { margin-left: 4px; font-size: 12px; }
  #r11-apx-code .r11-apx-vstep code { font-size: 12px; }
  #r11-apx-examples .r11-apx-tbl--ex tbody tr > .is-mono { font: 400 12px/16px var(--mono); color: var(--ink-dim); white-space: nowrap; }
  /* the key */
  #r11-apx-examples .r11-apx-tbl--ex thead tr {
    row-gap: var(--m-1);
    border-bottom: 1.5px solid var(--slate-900);
    border-radius: 7px 7px 0 0;
    background: var(--slate-50);
  }
  #r11-apx-examples .r11-apx-tbl--ex thead th {
    font: var(--m-label-font, 500 11px/16px var(--mono));
    letter-spacing: var(--m-label-track, .1em);
    text-transform: uppercase;
    color: var(--slate-800);
  }
  /* the key's org. and invoice heads are long (with their Swedish names): one line each, from the left */
  #r11-apx-examples .r11-apx-tbl--ex thead th:nth-child(4),
  #r11-apx-examples .r11-apx-tbl--ex thead th:nth-child(5) { flex: 0 0 100%; margin-left: 0; }
  #r11-apx-examples .r11-apx-tbl--ex thead .r11-apx-sh { display: inline; margin: 0 0 0 var(--m-2); font-weight: 400; color: var(--ink-dim); text-wrap: balance; }
  #r11-apx-examples .r11-apx-tbl--ex thead th:nth-child(1) .r11-apx-sh,
  #r11-apx-examples .r11-apx-tbl--ex thead th:nth-child(7) .r11-apx-sh { display: block; margin: 0; }
  /* Without the script the hint would show: nothing scrolls sideways here. */
  html:not(.r11-apx-js) .r11-apx-swipe:has(+ .r11-apx-tbl--ex) { display: none; }

  /* ---- r4 (E1, D1): "Top 20 flagged invoices 2023" as a stacked list in the Examples anatomy, with
     nothing hidden (r11-s8.css's phone block drops Paid, Committee, Account and Invoice no. and sets 12px;
     its .is-ph-off is overridden here, never edited; without the script its hint stays hidden by its own
     `:has(+ .r11-apx-tbl--top)` rule). foot.html carries the table roles (21 rows, 8 column heads, 20 row
     heads, 140 cells), as for the Examples. Each row: the rank (mono 500 12, --ink-dim) right-aligned in a
     20px margin at 16px (the Features list's numbered margin), on line 1's baseline; line 1 the paid date
     (15/22 600) left and the amount (15/22, right); line 2 the supplier (15/22, as given), rank 5 with its
     tag; line 3 the committee, line 4 the account (13/18; rows 2 and 20 keep their several accounts);
     line 5 the invoice number (mono 12/16 dim) left and the score (mono 12/16, slate-800) right, where the
     Examples list has the org. number. Lines 2px apart. The key on top, the same five lines in the label
     voice, its "Rank" visually hidden (it does not fit the 20px margin; the numbers under "Top 20 flagged
     invoices 2023" speak for themselves). DOM order: rank, paid, committee, supplier, account, amount,
     invoice no., score; `order` places them. Rank 5 keeps the find's wash over the whole row and its tag,
     nothing else is gold. A door that names the find opens the sheet with this row centred (foot.html). ---- */
  #r11-apx-top20 .r11-apx-tbl--top { overflow: visible; }
  #r11-apx-top20 .r11-apx-tbl--top table,
  #r11-apx-top20 .r11-apx-tbl--top thead,
  #r11-apx-top20 .r11-apx-tbl--top tbody { display: block; }
  #r11-apx-top20 .r11-apx-tbl--top table { min-width: 0; }   /* the inline --tbl-min:1000px is on the wrapper */
  #r11-apx-top20 .r11-apx-tbl--top tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 2px;
    padding: 12px 16px 12px 44px;
  }
  #r11-apx-top20 .r11-apx-tbl--top tbody tr + tr { border-top: 1px solid var(--slate-200); }
  #r11-apx-top20 .r11-apx-tbl--top tr > * {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    white-space: normal;
  }
  /* the rank stays in line 1's flow (so it shares the date's baseline), pulled into the 44px margin:
     -28 + 20 + 8 = 0, so it takes no room on the line */
  #r11-apx-top20 .r11-apx-tbl--top tr > :nth-child(1) { order: 0; flex: 0 0 20px; margin: 0 8px 0 -28px; text-align: right; }
  #r11-apx-top20 .r11-apx-tbl--top tr > :nth-child(2) { order: 1; flex: 0 0 auto; }
  #r11-apx-top20 .r11-apx-tbl--top tr > :nth-child(6) { order: 2; flex: 1 1 0; margin-left: var(--m-3); text-align: right; }
  #r11-apx-top20 .r11-apx-tbl--top tr > :nth-child(4) { order: 3; flex: 0 0 100%; }
  #r11-apx-top20 .r11-apx-tbl--top tr > :nth-child(3) { order: 4; flex: 0 0 100%; }
  #r11-apx-top20 .r11-apx-tbl--top tr > :nth-child(5) { order: 5; flex: 0 0 100%; }
  #r11-apx-top20 .r11-apx-tbl--top tr > :nth-child(7) { order: 6; flex: 0 0 auto; }
  #r11-apx-top20 .r11-apx-tbl--top tr > :nth-child(8) { order: 7; flex: 1 1 0; margin-left: var(--m-3); text-align: right; }
  /* the rows */
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > * { font: 400 13px/18px var(--sans); color: var(--slate-800); }
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(1) { font: 500 12px/16px var(--mono); color: var(--ink-dim); }
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(2) { font: 600 15px/22px var(--sans); color: var(--slate-900); white-space: nowrap; }
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(4),
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(6) { font: 400 15px/22px var(--sans); color: var(--slate-900); }
  /* one figure per row: proportional lining figures, as the Examples (Schibsted's tabular comma is figure-wide) */
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(6) { font-variant-numeric: lining-nums proportional-nums; white-space: nowrap; }
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(7),
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(8) { font: 400 12px/16px var(--mono); color: var(--ink-dim); white-space: nowrap; }
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(8) { color: var(--slate-800); }
  /* the find: the page's one flagged wash over the whole row (E5a), and its "followed up" tag, flush under
     the name on a line of its own (after the name it wrapped from 320 to 440 anyway, 6px in from the
     name's edge; the desktop sets it the same way from 1440) */
  #r11-apx-top20 .r11-apx-tbl--top tbody tr.is-find { background: var(--m-wash); }
  #r11-apx-top20 .r11-apx-tbl--top .r11-apx-tag { display: block; width: fit-content; margin: 2px 0 0; }
  /* r5 (E3b, D10): the score says what it is. A door that names the find lands with rank 5 centred and the
     key row ~600px up, so "18.73" stood unlabelled: each body row's score is preceded by "score" in the row's
     mono 12, --ink-dim (CSS text with empty alt, so VoiceOver reads the cell once, under its "Score" head).
     No number is added; line 5 still fits one line at 320 (the invoice number left, "score 18.73" right). */
  #r11-apx-top20 .r11-apx-tbl--top tbody tr > :nth-child(8)::before {
    content: "score\00a0";
    content: "score\00a0" / "";
    color: var(--ink-dim);
  }
  /* r5 (E3a, D12): rank 5 legible where the door lands. On the wash, --ink-dim is 4.50:1 (AA, just): the
     rank goes slate-800, as the score beside it, and the row's dim mono (the invoice number, the "score"
     label) --r11-dim (5.47:1). No size, weight or gold change (r4 D14). */
  #r11-apx-top20 .r11-apx-tbl--top tbody tr.is-find > :nth-child(1) { color: var(--slate-800); }
  #r11-apx-top20 .r11-apx-tbl--top tbody tr.is-find > :nth-child(7),
  #r11-apx-top20 .r11-apx-tbl--top tbody tr.is-find > :nth-child(8)::before { color: var(--r11-dim); }
  /* the key */
  #r11-apx-top20 .r11-apx-tbl--top thead tr {
    row-gap: var(--m-1);
    border-bottom: 1.5px solid var(--slate-900);
    border-radius: 7px 7px 0 0;
    background: var(--slate-50);
  }
  #r11-apx-top20 .r11-apx-tbl--top thead th {
    font: var(--m-label-font, 500 11px/16px var(--mono));
    letter-spacing: var(--m-label-track, .1em);
    text-transform: uppercase;
    color: var(--slate-800);
  }
  #r11-apx-top20 .r11-apx-tbl--top thead th:nth-child(1) {   /* "Rank": for VoiceOver only */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---- r3 (E1b): "Why the credit note scored high" fits from 360px: the Feature column wraps, the
     "96% of the error" tag sits on its own line under its feature, the numbers 13/18 tabular, right-
     aligned; the # column as narrow as its digit. 320-359: 4px cell sides, so it still fits at 320 (it
     has no swipe hint of its own, so it must never scroll). ---- */
  #r11-apx-features .r11-apx-tbl--err table { min-width: 0; }
  #r11-apx-features .r11-apx-tbl--err th,
  #r11-apx-features .r11-apx-tbl--err td { padding: 8px 6px; }
  #r11-apx-features .r11-apx-tbl--err tr > :first-child { width: 1px; padding-left: 10px; padding-right: 4px; }
  #r11-apx-features .r11-apx-tbl--err tr > :last-child { padding-right: 10px; }
  #r11-apx-features .r11-apx-tbl--err .is-num { width: 1px; }   /* the numbers' columns as narrow as their figures: the rest is the Feature's */
  #r11-apx-features .r11-apx-tbl--err td.is-nw { white-space: normal; }
  /* the tag on its own line under its feature */
  #r11-apx-features .r11-apx-tbl--err .r11-apx-tag {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 4px 0 0;
    white-space: normal;
    text-wrap: balance;
  }
  /* r4 (E5b, D9): always one line, a tag as on the desktop; where its column is narrower than the tag (under
     ~396px) it runs on into the empty space under the Input column (the row's numbers sit on its first line,
     so it covers none). Its box is 0 wide, so the one line adds nothing to the Feature column's min-content
     width (a plain nowrap widened the table by 22-57px and it scrolled sideways from 375 down). */
  #r11-apx-features .r11-apx-tbl--err .r11-apx-tag { width: 0; max-width: none; overflow: visible; white-space: nowrap; text-wrap: nowrap; }
  /* r4 (E5a): the found row on the page's one flagged wash (was the 9% gold wash, its # cell #F6F2EA). */
  #r11-apx-features .r11-apx-tbl--err tr.is-find > * { background: var(--m-wash); }
  #r11-apx-features .r11-apx-tbl--err tbody .is-num { font: 400 13px/18px var(--sans); font-variant-numeric: lining-nums tabular-nums; }
  /* The desktop's own trailing digits and figure space (`.dk`: "1.9[0]", "0[.00]", "143.7[ ]"), so the
     decimals line up in each column, as on the desktop (the r11 build hid them while the phone was frozen). */
  #r11-apx-features .r11-apx-tbl--err td .dk { display: inline !important; }
  @media (max-width: 359px) {   /* 320-359: 4px cell sides, so the table still fits at 320 */
    #r11-apx-features .r11-apx-tbl--err th,
    #r11-apx-features .r11-apx-tbl--err td { padding-left: 4px; padding-right: 4px; }
    #r11-apx-features .r11-apx-tbl--err tr > :first-child { padding-left: 8px; padding-right: 2px; }
    #r11-apx-features .r11-apx-tbl--err tr > :last-child { padding-right: 8px; }
  }

  /* ---- r3 (E5): Feature engineering's eight rows as a stacked list (no sideways swipe). foot.html carries
     the table roles, as for the Examples. Each row: the number (mono 12 gold-lo) in a 24px margin, then the
     feature's name 15/22 600 and its code name (mono 12/16 dim); what it measures (15/24); how (12/17
     dim); then the three values on a slate-50 strip, one per line, each after its head's own words (13/22
     dim, as s4's phone "Dated" / "Paid": "Typical (median, 2023)", "Credit note", "Invoice it cancelled"; CSS labels, kept out of the accessibility tree where `content`
     alt text is supported: the hidden head row names the cells), the figures 15/22 tabular, right-aligned,
     so their decimals line up. Row 7, the only one where the credit note and the invoice it cancelled
     differ, keeps its gold wash and its "differs" tag. The head row is visually hidden. ---- */
  #r11-apx-features .r11-apx-tbl--feat { overflow: visible; }
  #r11-apx-features .r11-apx-tbl--feat table,
  #r11-apx-features .r11-apx-tbl--feat tbody { display: block; min-width: 0; }
  #r11-apx-features .r11-apx-tbl--feat thead {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #r11-apx-features .r11-apx-tbl--feat tbody tr {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    padding: var(--m-4);
  }
  #r11-apx-features .r11-apx-tbl--feat tbody tr + tr { border-top: 1px solid var(--slate-200); }
  #r11-apx-features .r11-apx-tbl--feat tbody tr.is-find { background: var(--m-wash); }   /* r4 (E5a): one wash */
  #r11-apx-features .r11-apx-tbl--feat tbody tr > * {
    display: block;
    grid-column: 2;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
    white-space: normal;
  }
  #r11-apx-features .r11-apx-tbl--feat tbody tr > th {
    grid-column: 1;
    grid-row: 1;
    font: 500 12px/22px var(--mono);
    color: var(--gold-lo);
  }
  #r11-apx-features .r11-apx-tbl--feat td.is-feat { grid-row: 1; }
  #r11-apx-features .r11-apx-tbl--feat .r11-apx-fl { font: 600 15px/22px var(--sans); color: var(--slate-900); }
  #r11-apx-features .r11-apx-tbl--feat .r11-apx-code-i { margin-top: 2px; }
  #r11-apx-features .r11-apx-tbl--feat td.is-wide {
    grid-row: 2;
    margin-top: var(--m-2);
    font: 400 var(--m-small)/var(--m-small-lh) var(--sans);
    color: var(--slate-800);
  }
  #r11-apx-features .r11-apx-tbl--feat .r11-apx-how { margin-top: var(--m-1); }
  /* the label floats left; the figure (its text and the desktop's .dk digits, one inline run) sits right */
  #r11-apx-features .r11-apx-tbl--feat td.is-num {
    display: flow-root;
    padding: 0 var(--m-3);
    background: var(--slate-50);
    font: 400 15px/22px var(--sans);
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--slate-900);
    text-align: right;
    white-space: nowrap;
  }
  #r11-apx-features .r11-apx-tbl--feat td.is-num::before {
    float: left;
    max-width: calc(100% - 76px);
    margin-right: var(--m-3);
    font: 400 var(--m-meta)/22px var(--sans);
    font-variant-numeric: normal;
    color: var(--ink-dim);
    text-align: left;
    white-space: normal;
  }
  #r11-apx-features .r11-apx-tbl--feat td:nth-child(4) { grid-row: 3; margin-top: var(--m-3); padding-top: var(--m-2); border-radius: var(--m-panel-r) var(--m-panel-r) 0 0; }
  #r11-apx-features .r11-apx-tbl--feat td:nth-child(5) { grid-row: 4; }
  #r11-apx-features .r11-apx-tbl--feat td:nth-child(6) { grid-row: 5; padding-bottom: var(--m-2); border-radius: 0 0 var(--m-panel-r) var(--m-panel-r); }
  #r11-apx-features .r11-apx-tbl--feat td:nth-child(4)::before { content: "Typical (median, 2023)"; content: "Typical (median, 2023)" / ""; }
  #r11-apx-features .r11-apx-tbl--feat td:nth-child(5)::before { content: "Credit note"; content: "Credit note" / ""; }
  #r11-apx-features .r11-apx-tbl--feat td:nth-child(6)::before { content: "Invoice it cancelled"; content: "Invoice it cancelled" / ""; }
  #r11-apx-features .r11-apx-tbl--feat tr.is-find td.is-num { background: rgba(255, 255, 255, .6); }
  #r11-apx-features .r11-apx-tbl--feat td .dk { display: inline !important; }   /* the desktop's own digits: 0.330, 0.000 */
  html:not(.r11-apx-js) .r11-apx-swipe:has(+ .r11-apx-tbl--feat) { display: none; }

  @keyframes m-apx-in { from { transform: translateY(8px); } }   /* r4 (E2): no opacity: opaque from the first frame */
}