/* r11-s4.css: 04 The outlier (desktop, owner sketch 2). The head, a supplier strip (owner's pick "C",
   2026-10-20: the name, the trade and the town, one long row above the ledger), the ledger of the three documents with the fiscal year on each row, the flagged credit note in gold,
   the 1,014,000 emphasised, a caption and a source line. A research table: a strong rule on top and at
   the foot, hairlines between rows, a mid rule where fiscal 2023 ends. Phone untouched (.ph beat).
   From 1024px the strip is the ledger's header row: its label, name, trade and town sit on the ledger's
   column edges (polish r2).
   Columns (table-layout: fixed, widths on the head cells): the slack is shared out so the gutters between
   the columns' contents are about equal; the amount column is right-aligned, so its gutter sits in Paid.
   768-1023: the Number column folds into the Document cell, beside the document's name. */

@media (min-width: 768px) {
  #s4 { --s4-wash: var(--r11-wash, #F6F0E0); }   /* the page's one 'flagged' pale gold (r11-base.css, polish r3) */
  /* s5 continues the same "investigation" chapter (rule 16): a tighter join, s4's source line to the s5
     heading 24 + 56 = 80px, against 112px between chapters (polish r1). */
  #s4.r11 { --step-pb: 24px; }

  /* ---------- The supplier: one long, quiet strip above the ledger, as wide as it. Only the trade and the
     town (owner, 2026-10-20). The ledger and the strip: at most 800px, centred in the column. ---------- */
  .r11-s4-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    max-width: 800px;
    margin-inline: auto;
  }
  .r11-s4-grid > .r11-s4-fig { margin: 0; }
  .r11-s4-sup {                 /* discreet (owner, 2026-10-20): one quiet line on a pale fill, no border */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 22px;
    padding: 9px 16px;
    background: var(--slate-100);
    border-radius: 4px;
  }
  .r11-s4-sup > * { margin: 0; }
  .r11-s4-sup-k {                /* the page label (.r11-label): mono 11/16, .1em */
    font: 500 11px/16px var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-800);
  }
  .r11-s4-sup-name { margin-left: -10px; font: 500 16px/22px var(--serif); color: var(--slate-900); }
  .r11-s4-sup-dl { display: flex; gap: 20px; font: 400 14px/20px var(--sans); }
  .r11-s4-sup-dl > div { display: flex; align-items: baseline; gap: 6px; }
  .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 {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 1.5px solid var(--slate-900);
    border-bottom: 1.5px solid var(--slate-900);
    font: 400 15px/22px var(--sans);
    font-variant-numeric: tabular-nums;
    color: var(--slate-800);
  }
  .r11-s4-tbl .c-fy  { width: 12%; }
  .r11-s4-tbl .c-doc { width: 30%; }
  .r11-s4-tbl .c-no  { width: 14.5%; }
  .r11-s4-tbl .c-dt,
  .r11-s4-tbl .c-pd  { width: 16%; }
  .r11-s4-tbl .c-amt { width: 11.5%; }

  .r11-s4-tbl th,
  .r11-s4-tbl td {
    padding: 15px 16px 15px 0;
    text-align: left;
    vertical-align: middle;
  }
  /* One inner edge (polish r1): the first and last columns sit 16px inside the rules, like the strip's
     text, the caption and the source, so every left edge in the figure is at the strip's 16px. */
  .r11-s4-tbl tr > :first-child { padding-left: 16px; }
  .r11-s4-tbl tr > :last-child { padding-right: 16px; }
  /* Body rows: the stamp, the document's name, both dates and the amount share one first baseline; the
     flag note and "≈ 1 million" hang below it. The head row stays bottom-aligned. */
  .r11-s4-tbl tbody th,
  .r11-s4-tbl tbody td { vertical-align: baseline; }
  .r11-s4-tbl thead th {
    padding-top: 11px;
    padding-bottom: 10px;
    vertical-align: bottom;
    font: 500 11px/16px var(--mono);   /* the page label (.r11-label) */
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    border-bottom: 1px solid var(--slate-300);
  }
  .r11-s4-tbl tbody tr + tr > * { border-top: 1px solid var(--slate-200); }
  .r11-s4-tbl tbody th {
    font-weight: 600;
    color: var(--slate-900);
  }
  .r11-s4-tbl .c-amt { text-align: right; }

  .r11-s4-tbl td.c-no { font: 400 14px/22px var(--mono); letter-spacing: .02em; }
  .r11-s4-no-in { display: none; }

  .r11-s4-tbl .r11-num { font-size: 20px; line-height: 24px; }

  /* The fiscal year: plain report text, no stamp (polish r2: the outlined chips read as buttons or keys in
     a table with no controls). The year sits on the 16px inner edge, under the "Fiscal year" head and the
     strip's "The supplier". */
  .r11-s4-fy {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    font: 500 12px/16px var(--mono);
    letter-spacing: .04em;
    color: var(--slate-900);
  }

  /* The flagged credit note: a gold wash exactly as wide as the table and the strip (no bleed), a 3px
     gold mark inside its left end, gold figures and a gold note (polish r1). */
  .r11-s4-tbl tr.is-flag > * { background: var(--s4-wash); }
  .r11-s4-tbl tr.is-flag > :first-child { box-shadow: inset 3px 0 0 var(--r11-mark); }
  .r11-s4-tbl tr.is-flag > :last-child { box-shadow: none; }
  .r11-s4-tbl tr.is-flag .r11-num { color: var(--r11-ink); }
  .r11-s4-flag {
    display: grid;
    grid-template-columns: 7px auto;
    justify-content: start;
    column-gap: 7px;
    margin-top: 2px;
    font: 500 12px/16px var(--sans);
    color: var(--r11-ink);
  }
  .r11-s4-flag::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 4.5px;
    border-radius: 50%;
    background: var(--r11-mark);
  }

  /* Fiscal 2024: a mid rule where the year changes, lighter than the frame (polish r2: at the frame's weight
     it read as a footing or subtotal rule), stronger than the row hairlines; the years name the cut. The
     1,014,000 at the other amounts' size (owner, 2026-10-20). */
  .r11-s4-tbl tbody tr.is-next > * { border-top: 1px solid var(--slate-700); }
  .r11-s4-approx {
    display: block;
    margin-top: 2px;
    font: 400 12px/16px var(--sans);
    color: var(--ink-dim);
  }

  /* 12px under the table: the s3 map caption's step (story-map.css .aemap-cap; polish r3, was 14px). */
  .r11-s4-fig figcaption { margin-top: 12px; padding-left: 16px; padding-right: 16px; }
  .r11-s4-fig figcaption > p { margin-bottom: 0; }    /* no stray UA 1em under the source line */
  .r11-s4-fig figcaption .r11-cap { margin-top: 0; }
  .r11-s4-fig figcaption .r11-src { margin-top: 12px; }
  .r11-s4-fig .r11-src { max-width: 56em; text-wrap: pretty; }
}

/* 1024-1279 (a 904-1160px column): the amount column gets wider, the 1,014,000 a size smaller. */
@media (min-width: 768px) and (max-width: 1279px) {
  .r11-s4-tbl .c-fy  { width: 12%; }
  .r11-s4-tbl .c-doc { width: 32%; }
  .r11-s4-tbl .c-no  { width: 12%; }
  .r11-s4-tbl .c-dt,
  .r11-s4-tbl .c-pd  { width: 15%; }
  .r11-s4-tbl .c-amt { width: 14%; }
}

/* Owner, 2026-10-20: the ledger much narrower and centred in the column (at most 800px), so at every
   desktop width it is the compact five-column ledger: the number sits beside the document's name, the
   flag note breaks after "scan". */
@media (min-width: 768px) {
  .r11-s4-tbl { font-size: 14px; line-height: 20px; }
  .r11-s4-tbl th,
  .r11-s4-tbl td { padding-right: 12px; }
  .r11-s4-tbl .c-no { display: none; }
  .r11-s4-no-in {
    display: inline;
    margin-left: 4px;
    font: 400 12px/1 var(--mono);
    letter-spacing: .02em;
    color: var(--slate-800);
  }
  .r11-s4-tbl .c-fy  { width: 16%; }   /* "Fiscal year" stays on one line */
  .r11-s4-tbl .c-doc { width: 30%; }
  .r11-s4-tbl .c-dt,
  .r11-s4-tbl .c-pd  { width: 17%; }
  .r11-s4-tbl .c-amt { width: 20%; }
  .r11-s4-sep { display: none; }
  .r11-s4-rank { display: block; }
  .r11-s4-tbl .r11-num { font-size: 20px; line-height: 24px; }
}

/* From 1024px (polish r2): the supplier strip is the ledger's header row. The same five columns as the
   visible ledger (16 | 30 | 17 | 17 | 20 %, the block above), so "The supplier" sits over the years, the
   name over the documents, Trade over Dated and Town over Paid. Still one quiet line on the slate-100 fill,
   radius 4, no border (rule 17). Below 1024 the flex strip stays. */
@media (min-width: 1024px) {
  .r11-s4-sup {
    display: grid;
    grid-template-columns: 16% 30% 17% 17% 20%;
    column-gap: 0;
    row-gap: 0;
    align-items: baseline;
    padding: 9px 0;
  }
  .r11-s4-sup-k { padding: 0 12px 0 16px; }
  .r11-s4-sup-name { margin-left: 0; padding-right: 12px; min-width: 0; }
  .r11-s4-sup-dl { grid-column: 3 / 5; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .r11-s4-sup-dl > div { padding-right: 12px; }
}

/* From 1024px (polish r3): the caption and the source line end 12px before the Paid column, on the Dated
   column's text edge (476px from the 16px inner edge: x 848 at 1512), about 75 characters a line. Beats
   .r11-s4-fig .r11-src { max-width: 56em } (0,2,1 against 0,2,0) and .r11-cap's 52em. 768-1023 unchanged. */
@media (min-width: 1024px) {
  .r11-s4-fig figcaption > .r11-cap,
  .r11-s4-fig figcaption > .r11-src { max-width: 476px; }
}

/* ---------- The mirror twin and the 131,040 kr brace (owner's pick from the ideas canvas, 2026-10-21; desktop only,
   every element is .dk). Under the first invoice a quiet line mirrors the credit note's gold flag; from 1400px a
   hand-drawn gold brace in the right margin joins the credit note and the new invoice (placed by r11-s4.js on the
   two amounts); below 1400px the same words sit under 1,014,000 instead. ---------- */
@media (min-width: 768px) {
  .r11-s4-fig { position: relative; }
  .r11-s4-twin {
    display: grid;
    grid-template-columns: 7px auto;
    justify-content: start;
    column-gap: 7px;
    margin-top: 2px;
    font: 500 12px/16px var(--sans);
    color: var(--slate-700);
  }
  .r11-s4-twin::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 4.5px;
    box-sizing: border-box;
    border: 1.3px solid var(--slate-500);
    border-radius: 50%;
  }
  .r11-s4-diff { display: block; margin-top: 2px; font: 600 12px/16px var(--sans); color: var(--r11-ink); }
  .r11-s4-brace { display: none; position: absolute; left: calc(100% + 18px); top: 0; width: 190px; pointer-events: none; }
  .r11-s4-brace-svg { display: block; overflow: visible; }
  .r11-s4-brace-svg path { fill: none; stroke: var(--r11-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .r11-s4-brace-t {
    position: absolute;
    left: 34px;
    top: 0;
    margin: 0;
    transform: translateY(-50%) rotate(-1.5deg);
    font: 600 21px/1.05 'Caveat', 'Bradley Hand', cursive;
    white-space: nowrap;
    color: var(--r11-ink);
  }
}
@media (min-width: 1400px) {
  .r11-s4-brace.is-on { display: block; }
  .r11-s4-fig:has(.r11-s4-brace.is-on) .r11-s4-diff { display: none; }
}