/* r11-s8.css (2026-10-20): #s8, Method and Limitations under the disclaimer band, and the footer with its
   Appendix sheets, after oil.majdjamal.se (tools/r11/OIL-FOOTER-REF.md), in the r11 system. Every width.

   Markup: tools/r11/frags/s8.html (slot r11:s8) and tools/r11/frags/foot.html (slot r11:foot, inside
   <footer class="site-footer">). Behaviour: r11-s8.js (the folds; the sheets' focus trap, focus return,
   outside click; without it both folds stay open and the sheets still open and close natively).

   - The old generated Method (#s8 .mx, tools/build_method.py) is retired from view at every width; its markup
     stays.
   - Folds as Oil's: the heading is the button (the word and a gold chevron that points up while open). Both
     open on load. Folded, a glimpse stays, inert (on phones at half strength under a fade; on desktop at full
     ink with no fade, polish r3: Method's one-line lede, Limitations' two rules and titles); a click anywhere
     on it opens it. On desktop a click folds and unfolds in .32s (r11-s8.js; jumps and reduced motion snap).
   - Method: six steps, each a mono numeral on a hairline, a short sans title and the text (3 columns, 2 from
     768 to 1099, 1 on phones), then one small line on the run behind the map.
   - Limitations: a register, numeral | title | text on slate-200 hairline rows (slate-300 on top, like the s4
     ledger's head rule), the full column wide; its text starts on the Method grid's column 2 (stacked on
     phones). The run line under Method sits on the same two axes from 1100px.
   - Footer: Oil's layout on a slate-100 ground (no rule between sections, SPEC 7): name, about, Appendix
     and Sources left, Contact right; a quiet bottom line. Lists are <ol> without visible numerals (Oil, owner
     3 Oct 2026). On phones one column, 32px rows with 44px targets.
   - Appendix sheets: native popovers ([popover] role=dialog) in the dress of s5's reading panel: white,
     a hairline, radius 14, the same scrim and close button. Tables scroll sideways inside their box. */

/* ---------- #s8: the shell ---------- */
#s8 .mx { display: none; }

#s8.v3-method { padding-top: 64px; padding-bottom: 96px; }

.r11-s8 {
  --s8-dim: var(--r11-dim, #5D6168);
  max-width: var(--story-wide);
  color: var(--slate-900);
}
.r11-s8 > * { margin: 0; }

/* ---------- The folds ---------- */
.r11-fold + .r11-fold { margin-top: 80px; }

.r11-fold-h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -.016em;
  font-optical-sizing: auto;
  color: var(--slate-900);
}

.r11-fold-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: -4px -8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.r11-fold-mark {
  flex: none;
  width: 14px;
  height: 9px;
  margin-top: .12em;
  overflow: visible;
  transform: rotate(180deg);            /* open: points up */
  transition: transform .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1));
}
.r11-fold-mark path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.r11-fold.is-folded .r11-fold-mark { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .r11-fold.is-folded .r11-fold-btn:hover .r11-fold-mark { transform: translateY(2px); }
}

.r11-fold-body { margin-top: 28px; }

.r11-fold.is-folded { cursor: pointer; }
.r11-fold.is-folded > .r11-fold-body {
  max-height: 200px;
  overflow: hidden;
  opacity: .5;
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}

/* ---------- Shared: numerals, hairlines, titles, text ---------- */
.r11-s8-steps,
.r11-s8-limits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.r11-s8-n {
  font: 500 12px/16px var(--mono);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-lo);
}

.r11-s8-h {
  margin: 0;
  font: 600 17px/24px var(--sans);
  letter-spacing: -.006em;
  text-wrap: balance;
  color: var(--slate-900);
}

.r11-s8-step p,
.r11-s8-limit p {
  margin: 0;
  font: 400 15px/24px var(--sans);
  text-wrap: pretty;
  color: var(--s8-dim);
}

.r11-s8 a {
  color: var(--slate-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--slate-500);
  text-underline-offset: 3px;
}
/* "eight numbers" in step 03 opens the Feature engineering sheet: a button dressed as the links above. */
.r11-s8-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--slate-900);
  text-align: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--slate-500);
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .r11-s8 a:hover,
  .r11-s8-link:hover { text-decoration-color: var(--slate-900); }
}

/* ---------- Method: six steps ---------- */
.r11-s8-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 48px;
}
.r11-s8-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.r11-s8-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--r11-rule);
}
.r11-s8-step .r11-s8-h { margin-top: 12px; }
.r11-s8-step p { margin-top: 6px; }

/* From 1100px: the label in Method column 1, the text on the column-2 axis (grid gap 48px, 3 columns). */
.r11-s8-run {
  display: grid;
  grid-template-columns: calc((100% - 96px) / 3 + 48px) minmax(0, 640px);
  align-items: baseline;
  margin: 40px 0 0;
  font: 400 13px/20px var(--sans);
  text-wrap: pretty;
  color: var(--slate-800);
}
.r11-s8-run-v > span { display: block; }
.r11-s8-nw { white-space: nowrap; }
.r11-s8-run-k {
  flex: none;
  font: 500 11px/20px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-900);
}

/* ---------- Limitations: a register ---------- */
/* numeral 48 + gap 24 + title + gap 24 = one Method column + its 48px gap, so the text starts on column 2. */
.r11-s8-limit {
  display: grid;
  grid-template-columns: 48px calc((100% - 96px) / 3 - 48px) minmax(0, 1fr);
  column-gap: 24px;
  align-items: baseline;
  padding: 16px 0 18px;
  border-top: 1px solid var(--r11-rule);
}
.r11-s8-limit:first-child { border-top-color: var(--slate-300); }
.r11-s8-limit p { max-width: 640px; }

@media (min-width: 768px) and (max-width: 1099px) {
  .r11-s8-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  .r11-s8-run { display: flex; gap: 14px; }
  .r11-s8-limit { grid-template-columns: 40px calc((100% - 40px) / 2 - 40px) minmax(0, 1fr); column-gap: 20px; }
}

/* ---------- The footer: Oil's layout on slate-100 ---------- */
.site-footer {
  padding: 48px var(--story-right) 32px var(--story-left);
  background: var(--slate-100);
  color: var(--slate-900);
}
.site-footer :focus-visible { outline-color: var(--slate-900); }

.r11-ft { max-width: var(--story-wide); }
:where(.r11-ft) :is(p, h2, ol, ul, address) { margin: 0; font-style: normal; }

.r11-ft-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  align-items: start;
}

.r11-ft-name {
  font: 600 16px/22px var(--sans);
  letter-spacing: -.01em;
  color: var(--slate-900);
}
.r11-ft-about {
  margin-top: 6px;
  max-width: 400px;
  font: 400 14px/22px var(--sans);
  text-wrap: pretty;
  color: var(--hero-lede);
}

.r11-ft-group { margin-top: 24px; }

.r11-ft-label {
  font: 500 11px/16px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-900);
}
.r11-ft-col > .r11-ft-label { margin-top: 3px; }   /* on the line of "Majd Jamal" */

.r11-ft-links {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding: 0;
  list-style: none;
}
.r11-ft-links li {
  font: 400 14px/22px var(--sans);
  color: var(--slate-900);
}
/* No underline at rest on any footer link, desktop or phone (owner, 21 Oct 2026); it shows on hover (and on a tap). */
.r11-ft-links a,
.r11-ft-link {
  position: relative;
  color: var(--slate-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: .2em;
  transition: text-decoration-color .15s linear;
}
.r11-ft-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .r11-ft-links a:hover,
  .r11-ft-link:hover { color: var(--slate-900); text-decoration-color: currentColor; }
}
.r11-ft-note,
.r11-ft-links .r11-ft-place,
.r11-ft-soon { color: var(--hero-lede); }

/* 768-1023 (Oil's tablet): one column, the brand block over Contact. */
@media (min-width: 768px) and (max-width: 1023px) {
  .r11-ft-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .r11-ft-col > .r11-ft-label { margin-top: 0; }
  .r11-ft-about { max-width: 480px; }
}

.r11-ft-base {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-300);
}
.r11-ft-base p {
  font: 400 12px/18px var(--sans);
  text-wrap: pretty;
  color: var(--hero-lede);
}

/* ---------- The Appendix sheets (native popovers) ---------- */
.r11-apx {
  --apx-pad: 28px;
  box-sizing: border-box;
  width: min(var(--apx-w, 960px), calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  background: var(--white);
  color: var(--slate-900);
  box-shadow: 0 28px 72px -24px rgba(24, 26, 30, .32);
  overflow: hidden;
  font-family: var(--sans);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.r11-apx:popover-open { display: flex; flex-direction: column; }
.r11-apx::backdrop { background: rgba(36, 38, 42, .44); }
@media (prefers-reduced-motion: no-preference) {
  .r11-apx:popover-open { animation: r11-apx-in .25s cubic-bezier(.2, .7, .2, 1); }
  .r11-apx:popover-open::backdrop { animation: r11-apx-fade .25s linear; }
}
@keyframes r11-apx-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes r11-apx-fade { from { opacity: 0; } }

/* Browsers without popovers: the sheets stay out of the page; r11-s8.js opens them as fixed panels. */
@supports not selector(:popover-open) {
  .r11-apx { display: none; }
  .r11-apx.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1000;
    height: fit-content;
    box-shadow: 0 0 0 100vmax rgba(36, 38, 42, .44);
  }
}

.r11-apx-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 16px 16px var(--apx-pad);
  border-bottom: 1px solid var(--slate-200);
}
.r11-apx-titles { flex: 1 1 auto; min-width: 0; }
.r11-apx-t {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-optical-sizing: auto;
  color: var(--slate-900);
}
.r11-apx-sub {
  margin: 4px 0 0;
  font: 400 13px/19px var(--sans);
  text-wrap: pretty;
  color: var(--ink-dim);
}
.r11-apx-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--slate-800);
  cursor: pointer;
}
.r11-apx-x:hover { background: var(--slate-100); color: var(--slate-900); }
.r11-apx-x path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.r11-apx-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px var(--apx-pad) 28px;
}
.r11-apx-body:focus { outline: none; }
.r11-apx-body > * { margin: 0; }
.r11-apx-body > * + * { margin-top: 14px; }
.r11-apx-body > .r11-apx-h { margin-top: 30px; }
.r11-apx-body > .r11-apx-h + * { margin-top: 8px; }

.r11-apx-lede {
  max-width: 54em;
  font: 400 16px/1.55 var(--sans);
  text-wrap: pretty;
  color: var(--slate-800);
}
.r11-apx-p {
  max-width: 64em;
  font: 400 14px/22px var(--sans);
  text-wrap: pretty;
  color: var(--slate-800);
}
.r11-apx-dim { color: var(--ink-dim); }
.r11-apx-h {
  font: 600 15px/22px var(--sans);
  letter-spacing: -.004em;
  color: var(--slate-900);
}
.r11-apx code {
  font-family: var(--mono);
  font-size: .9em;
}

.r11-apx-flag {
  max-width: 64em;
  padding: 12px 16px;
  border-left: 2px solid var(--gold);
  border-radius: 0 6px 6px 0;
  background: var(--gold-wash);
  font: 400 14px/22px var(--sans);
  color: var(--slate-900);
}
.r11-apx-flag b { font-weight: 600; }
.r11-apx--top20 .r11-apx-flag { max-width: none; }   /* as wide as the table under it */

.r11-apx-steps,
.r11-apx-notes {
  max-width: 64em;
  padding-left: 20px;
  font: 400 14px/22px var(--sans);
  color: var(--slate-800);
}
.r11-apx-steps li + li,
.r11-apx-notes li + li { margin-top: 4px; }
.r11-apx-steps li::marker { font-family: var(--mono); font-size: 12px; color: var(--gold-lo); }

.r11-apx-src {
  max-width: 72em;
  font: 400 12px/18px var(--sans);
  text-wrap: pretty;
  color: var(--ink-dim);
}
.r11-apx-src a,
.r11-apx-p a {
  color: var(--slate-900);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--slate-500);
}

.r11-apx-defs { display: grid; gap: 8px; max-width: 72em; }
.r11-apx-defs > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 16px;
}
.r11-apx-defs dt {
  font: 500 11px/20px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-900);
}
.r11-apx-defs dd {
  margin: 0;
  font: 400 13.5px/20px var(--sans);
  text-wrap: pretty;
  color: var(--slate-800);
}

/* "Swipe sideways" hints: r11-s8.js shows one (.is-on) only while its table or code box really scrolls
   sideways, at any width; without the script, narrow and touch screens always show them. */
.r11-apx-swipe { display: none; font: 400 12px/17px var(--sans); color: var(--ink-dim); }
.r11-apx-swipe.is-on { display: block; }
@media (max-width: 1099px), (pointer: coarse) {
  html:not(.r11-apx-js) .r11-apx-swipe { display: block; }
  html:not(.r11-apx-js) .r11-apx-tbl tr > :first-child { box-shadow: inset -1px 0 0 var(--slate-200); }
}

/* Tables: a hairline box that scrolls sideways when the sheet is narrower than the table. */
.r11-apx-tbl {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--white);
}
.r11-apx-tbl:focus-visible { outline-offset: 2px; }
.r11-apx-tbl table {
  width: 100%;
  min-width: var(--tbl-min, 0px);
  border-collapse: collapse;
  font: 400 13px/18px var(--sans);
  font-variant-numeric: lining-nums;
  color: var(--slate-900);
}
.r11-apx-tbl th,
.r11-apx-tbl td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--slate-200);
}
.r11-apx-tbl thead th {
  border-top: 0;
  background: var(--slate-50);
  font: 500 10.5px/15px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: bottom;
  color: var(--slate-800);
}
.r11-apx-tbl tbody th { font-weight: 400; }
.r11-apx-tbl .is-num { text-align: right; white-space: nowrap; }
.r11-apx-tbl .is-num,
.r11-apx-tbl .is-nw,
.r11-apx-tbl .is-mono { font-variant-numeric: lining-nums tabular-nums; }
.r11-apx-tbl thead th.is-num { white-space: normal; }
.r11-apx-tbl .is-acc { min-width: 170px; }
.r11-apx-tbl .is-feat { min-width: 170px; }
.r11-apx-tbl .is-nw { white-space: nowrap; }
.r11-apx-tbl .is-mono { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.r11-apx-tbl .is-wide { min-width: 300px; }
.r11-apx-tbl tr.is-find > * { background: var(--gold-wash); }
/* The first column stays put while a wide table scrolls sideways (opaque fills: white, slate-50, and the
   gold wash mixed onto white). */
.r11-apx-tbl tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
}
.r11-apx-tbl thead tr > :first-child { background: var(--slate-50); }
.r11-apx-tbl tr.is-find > :first-child { background: #F6F2EA; }
.r11-apx-tbl.is-scrolls tr > :first-child { box-shadow: inset -1px 0 0 var(--slate-200); }
.r11-apx-nw { white-space: nowrap; }
.r11-apx-sh {
  display: block;
  margin-top: 2px;
  font: 400 9.5px/13px var(--mono);
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.r11-apx-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid rgba(151, 112, 17, .4);
  border-radius: 4px;
  font: 500 9.5px/15px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-lo);
}
.r11-apx-fl { display: block; font-weight: 600; }
.r11-apx .r11-apx-code-i {
  display: block;
  margin-top: 2px;
  font: 400 11px/15px var(--mono);
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.r11-apx-how {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 17px;
  color: var(--ink-dim);
}
.r11-apx-tbl--err { max-width: 600px; }   /* room for the "96% of the error" tag on one line */

/* The code box: a bar, real line numbers from algorithms/AE.py, quiet token colours. */
.r11-apx-codebox {
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  overflow: hidden;
  background: var(--slate-50);
}
.r11-apx-codebar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--white);
  font: 500 11.5px/16px var(--mono);
  color: var(--slate-800);
}
.r11-apx-codecount { flex: none; color: var(--ink-dim); }
.r11-apx-codescroll { overflow-x: auto; overscroll-behavior-x: contain; }
.r11-apx-pre {
  margin: 0;
  padding: 14px 0 16px;
  font: 400 12.5px/20px var(--mono);
  tab-size: 4;
  color: var(--slate-900);
}
.r11-apx-pre code { display: block; width: max-content; min-width: 100%; font: inherit; }
.r11-apx-pre .lc {
  position: relative;
  display: block;
  padding: 0 24px 0 60px;
  white-space: pre;
}
.r11-apx-pre .lc::before {
  content: attr(data-n);
  content: attr(data-n) / "";            /* line numbers are not read aloud (where supported) */
  position: absolute;
  left: 0;
  width: 40px;
  text-align: right;
  color: rgba(132, 98, 12, .62);
  -webkit-user-select: none;
  user-select: none;
}
.r11-apx-pre .lc-gap { color: var(--ink-dim); font-style: italic; padding-top: 4px; padding-bottom: 4px; }
.r11-apx-pre .tk-c { color: var(--ink-dim); font-style: italic; }
.r11-apx-pre .tk-k { color: #5B3E8C; }
.r11-apx-pre .tk-f { color: var(--slate-900); font-weight: 600; }
.r11-apx-pre .tk-n { color: var(--gold-lo); }
.r11-apx-pre .tk-s { color: #2F6B4F; }
.r11-apx-pre .tk-b { color: #1F5D80; }

/* Code sheet, part 2 (build_apx_code.py): the credit note's ledger row, then x before and after scaling. */
.r11-apx-tbl--row td { vertical-align: top; }
.r11-apx-vstep {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 12px 14px;
  font: 400 12.5px/18px var(--sans);
  color: var(--ink-dim);
}
.r11-apx-vstep svg { flex: none; margin-top: 1px; fill: none; stroke: var(--gold-lo); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.r11-apx-vstep code { color: var(--slate-900); }
.r11-apx-vec { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.r11-apx-vk { margin: 0; font: 500 15px/20px var(--serif); font-style: italic; color: var(--slate-900); }
.r11-apx-vk span { display: block; font: 400 11.5px/16px var(--sans); font-style: normal; color: var(--ink-dim); }
/* Square brackets around the eight numbers, as a row vector. */
.r11-apx-vbox { position: relative; padding: 0 12px; }
.r11-apx-vbox::before,
.r11-apx-vbox::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  border: 1.5px solid var(--slate-800);
}
.r11-apx-vbox::before { left: 0; border-right: 0; }
.r11-apx-vbox::after { right: 0; border-left: 0; }
.r11-apx-vrow {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.r11-apx-vrow li { display: flex; flex-direction: column; align-items: center; padding: 2px 4px; border-radius: 6px; text-align: center; }
.r11-apx-vrow li.is-find { background: var(--gold-wash); }
.r11-apx-vi { font: 500 10px/14px var(--mono); color: var(--gold-lo); }
.r11-apx-vrow b { font: 500 15px/22px var(--mono); font-variant-numeric: tabular-nums; color: var(--slate-900); }
.r11-apx-vrow li.is-find b { color: var(--gold-lo); }
.r11-apx-vl { font: 400 10.5px/14px var(--sans); color: var(--ink-dim); text-wrap: balance; }
.r11-apx-vec + .r11-apx-src { margin-top: 14px; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  #s8.v3-method { padding-top: 40px; padding-bottom: 56px; }

  .r11-fold + .r11-fold { margin-top: 56px; }
  .r11-fold-h { font-size: 28px; line-height: 1.15; }
  .r11-fold-btn { gap: 12px; min-height: 44px; }
  .r11-fold-body { margin-top: 18px; }
  .r11-fold.is-folded > .r11-fold-body { max-height: 150px; }

  .r11-s8-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .r11-s8-h { font-size: 16px; line-height: 23px; }
  .r11-s8-step .r11-s8-h { margin-top: 10px; }
  .r11-s8-step p, .r11-s8-limit p { font-size: 15px; line-height: 24px; }
  .r11-s8-run { margin-top: 32px; }
  .r11-s8-run { display: block; }
  .r11-s8-run-k { display: block; margin: 0 0 2px; }

  .r11-s8-limit {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 8px;
    padding: 14px 0 16px;
  }
  .r11-s8-limit p { grid-column: 2; margin-top: 4px; }

  .site-footer { padding-top: 40px; padding-bottom: 32px; }
  .r11-ft-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .r11-ft-name { font-size: 17px; line-height: 24px; }
  .r11-ft-about { max-width: none; font-size: 15px; line-height: 23px; }
  .r11-ft-group { margin-top: 32px; }
  .r11-ft-col > .r11-ft-label { margin-top: 0; }
  .r11-ft-links { gap: 0; margin-top: 6px; }
  .r11-ft-links li {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 0;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 22px;
  }
  /* 44px targets (the rows are 32px; the hit area reaches 6px into the gaps) */
  .r11-ft-links a::after,
  .r11-ft-link::after {
    content: "";
    position: absolute;
    inset: -11px -4px;
  }
  .r11-ft-base { margin-top: 32px; }
  .r11-ft-base p { font-size: 13px; line-height: 19px; text-wrap: balance; }

  .r11-apx {
    --apx-pad: 18px;
    width: calc(100vw - 32px);
    margin: 16px auto auto;
    max-height: calc(100vh - 112px);
    max-height: calc(100svh - 112px);
    border-radius: 12px;
  }
  .r11-apx::backdrop { background: rgba(36, 38, 42, .56); }
  .r11-apx-head { padding: 14px 8px 12px var(--apx-pad); gap: 8px; }
  .r11-apx-t { font-size: 21px; }
  .r11-apx-x { width: 44px; height: 44px; margin: -6px 0 0; }
  .r11-apx-body { padding: 16px var(--apx-pad) 24px; }
  .r11-apx-lede { font-size: 15px; }
  .r11-apx-defs > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  /* Top 20: Rank, Supplier, Amount and Score only (Paid, Committee, Account, Invoice no. drop out); 12px so
     the longest supplier word fits a 402px phone unbroken (narrower phones scroll, with the hint). */
  .r11-apx-tbl--top .is-ph-off { display: none; }
  .r11-apx-tbl--top table { min-width: 0; font-size: 12px; }
  .r11-apx-tbl--top th,
  .r11-apx-tbl--top td { padding: 8px 5px; }
  html:not(.r11-apx-js) .r11-apx-swipe:has(+ .r11-apx-tbl--top) { display: none; }
  .r11-apx-codebar { flex-wrap: wrap; row-gap: 2px; }
  .r11-apx-pre .lc { padding: 0 16px 0 48px; }
  .r11-apx-pre .lc::before { width: 32px; }
  html:has(.r11-apx:popover-open) { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .r11-fold-mark,
  .r11-ft-links a,
  .r11-ft-link { transition: none; }
}

@media print {
  .r11-fold-mark { display: none; }
  .r11-fold.is-folded > .r11-fold-body { max-height: none; opacity: 1; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Method as six tiny boxes, top-down (owner's pick "A", 2026-10-21). Replaces the six text steps and the
   run line (kept in tools/r11/s8-before-tiny-boxes.html). Every width. ---------- */
.r11-s8-lede {
  margin: 0;
  font: 400 16px/1.5 var(--sans);
  color: var(--r11-dim);
}
.r11-s8-chain {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.r11-s8-box {
  position: relative;
  box-sizing: border-box;
  width: 240px;
  min-height: 60px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--slate-300);
  border-radius: 6px;
}
.r11-s8-box + .r11-s8-box { margin-top: 36px; }
.r11-s8-box + .r11-s8-box::before {          /* the gold arrow from the box above */
  content: "";
  position: absolute;
  left: calc(50% - 0.75px);
  top: -36px;
  width: 1.5px;
  height: 29px;
  background: var(--gold);
}
.r11-s8-box + .r11-s8-box::after {           /* its head */
  content: "";
  position: absolute;
  left: calc(50% - 4.5px);
  top: -8px;
  border: 4.5px solid transparent;
  border-top: 6px solid var(--gold);
  border-bottom: 0;
}
.r11-s8-box b { font: 600 14.5px/1.35 var(--sans); color: #1B1C1F; }
.r11-s8-box span { margin-top: 2px; font: 400 11.5px/1.4 var(--mono); color: var(--slate-800); }
.r11-s8-box.is-gold { background: #FBF6E9; border: 1.5px solid var(--tile-gold); }
.r11-s8-box.is-gold b { color: var(--gold-lo); }
@media (max-width: 767px) {
  .r11-s8-lede { font-size: 15px; }
  .r11-s8-chain { margin-top: 22px; }
  .r11-s8-box { width: 220px; min-height: 56px; }
  .r11-s8-box + .r11-s8-box { margin-top: 30px; }
  .r11-s8-box + .r11-s8-box::before { top: -30px; height: 23px; }
  .r11-s8-box b { font-size: 14px; }
  .r11-s8-box span { font-size: 11px; }
}

/* ---------- Limitations as just two, side by side (owner's pick "C", 2026-10-21). Replaces the seven-row list
   (kept in tools/r11/s8-before-two-limits.html). Every width; stacked on the phone. ---------- */
.r11-s8-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: 880px;
}
.r11-s8-two-i { padding-top: 16px; border-top: 1.5px solid var(--slate-500); }
.r11-s8-two-i.is-gold { border-top: 2px solid var(--tile-gold); padding-top: 15.5px; }
.r11-s8-two-i h4 { margin: 0; font: 400 26px/1.2 var(--serif); color: #1B1C1F; }
.r11-s8-two-i.is-gold h4 { color: var(--gold-lo); }
.r11-s8-two-i p { margin: 10px 0 0; font: 400 15px/1.55 var(--sans); color: var(--slate-800); }
@media (max-width: 767px) {
  .r11-s8-two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .r11-s8-two-i h4 { font-size: 23px; }
}

/* ---------- Desktop polish, round 1 (2026-10-21). Desktop only: every rule below sits in a min-width query, so
   the phone (the max-width 767 rules above) is untouched. ---------- */

/* A sheet holds the page still: a wheel or trackpad over the dim band no longer scrolls the page under it, and
   closing it scrolls on from the same place (as s5's reading panel). Two separate rules: a selector list with
   :popover-open would be dropped whole where popovers are unknown. */
@media (min-width: 768px) { html:has(.r11-apx:popover-open) { overflow: hidden; scrollbar-gutter: stable; } }
@media (min-width: 768px) { html:has(.r11-apx.is-open) { overflow: hidden; } }

@media (min-width: 768px) {
  /* Folds that fold (polish r3): the glimpse at full ink, no fade (a ghosted box read as a loading state).
     Method keeps its heading and one-line lede (the lede's line box, 18 x 1.55 = 27.9px; the chain starts 28px
     under it, so no box shows); Limitations keeps its two rules and titles, down to the titles' line boxes
     (gold: 2 + 15.5 + 27.6 = 45.1px; the paragraphs start 10px lower, so no paragraph pixel shows). */
  .r11-fold.is-folded > .r11-fold-body { opacity: 1; -webkit-mask-image: none; mask-image: none; }
  #limitations.is-folded > .r11-fold-body { max-height: 46px; }
  #r11-method.is-folded > .r11-fold-body { max-height: 28px; }

  /* A deep link to a fold (/#limitations, /#r11-method) lands its heading 64px from the top, as /#method and the
     sections do (their 64px top padding). */
  .r11-fold { scroll-margin-top: 64px; }

  /* Method's head on the section-head rhythm: the lede 12px under the heading, in the shared 18px lede. */
  .r11-fold + .r11-fold { margin-top: 64px; }
  #r11-method > .r11-fold-body { margin-top: 12px; }
  .r11-s8-lede { font-size: 18px; line-height: 1.55; }

  /* The chain, compact (polish r2): six 52px boxes 24px apart, 6 x 52 + 5 x 24 = 432px. In a box 1 + 6 + title 20
     + 2 + line 16 + 6 + 1 = 52 (the gold box's 1.5px edge takes 0.5px of each padding, so it is 52 too). The gold
     arrow scaled with the gap: its line 17px, the head still 8px over the box. */
  .r11-s8-box { border-radius: 4px; min-height: 52px; padding: 6px 12px; }
  .r11-s8-box.is-gold { padding-top: 5.5px; padding-bottom: 5.5px; }
  .r11-s8-box + .r11-s8-box { margin-top: 24px; }
  .r11-s8-box + .r11-s8-box::before { top: -24px; height: 17px; }
  .r11-s8-box b { font: 600 15px/20px var(--sans); }
  .r11-s8-box span { font-size: 11px; line-height: 16px; }

  /* The footer's labels and the sheets on whole sizes (the 9.5px Swedish column captions stay). */
  .r11-ft-label { letter-spacing: .1em; }
  .r11-apx-tbl thead th { font-size: 11px; }
  .r11-apx-defs dd { font-size: 14px; }
  .r11-apx-codebar { font-size: 11px; }
  .r11-apx-pre { font-size: 13px; line-height: 20px; }
  .r11-apx-src code { font-size: 11px; }     /* not .9em (10.8px, 14.4px) */
  .r11-apx-lede code { font-size: 14px; }

  /* Four Method boxes open their Appendix sheet (r11-s8.js marks them .is-apx and makes the title a button):
     at rest a quiet underline says so (slate-300; tile gold on Score; polish r2, no icons); hover and keyboard
     focus answer with a slate (gold) edge and the underline at full strength (the rules further down win). */
  .r11-s8-box > b {                        /* on every box (unseen on Clean and Keep 2023) */
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
  }
  .r11-s8-box.is-apx > b {
    text-decoration-color: var(--slate-300);
    scroll-margin-block: 40px;             /* a focused box shows its whole 3px-offset ring inside the window */
  }
  .r11-s8-box.is-apx.is-gold > b { text-decoration-color: var(--tile-gold); }
  .r11-s8-box.is-apx { transition: border-color .15s linear; }
  .r11-s8-box.is-apx > b { transition: text-decoration-color .15s linear; }
}
@media (min-width: 768px) and (hover: hover) {
  .r11-s8-box.is-apx { cursor: pointer; }
  .r11-s8-box.is-apx:hover { border-color: var(--slate-500); }
  .r11-s8-box.is-apx.is-gold:hover { border-color: var(--gold-lo); }
  .r11-s8-box.is-apx:hover > b { text-decoration-color: currentColor; }
}
/* The keyboard ring goes round the whole box (where :has is unknown, the title keeps the page's own ring).
   Polish r3: the ring is a box-shadow (3px of the page ground, then 2px slate-900), not an outline, so the
   gold arrow under the box (the next box's ::before, later in tree order) is drawn over it and the chain
   stays whole; the transparent outline is the ring in forced-colors mode, where shadows are dropped. */
@supports selector(:has(*)) {
  @media (min-width: 768px) {
    .r11-s8-box.is-apx > b:focus-visible { outline: none; }
    .r11-s8-box.is-apx:has(> b: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);
    }
    .r11-s8-box.is-apx.is-gold:has(> b:focus-visible) { border-color: var(--gold-lo); }
    .r11-s8-box.is-apx > b:focus-visible { text-decoration-color: currentColor; }
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .r11-s8-box.is-apx,
  .r11-s8-box.is-apx > b { transition: none; }
}

/* From 1024px Limitations and the footer stand on the page's two columns: 480 | flexible | 480, as s5's cards,
   symmetric about the Method chain's axis. The DOM order (and the phone) is unchanged. */
@media (min-width: 1024px) {
  .r11-s8-two {
    max-width: none;
    grid-template-columns: minmax(0, 480px) minmax(48px, 1fr) minmax(0, 480px);
    column-gap: 0;
  }
  .r11-s8-two { row-gap: 48px; }
  .r11-s8-two-i:nth-child(odd) { grid-column: 1; }
  .r11-s8-two-i:nth-child(even) { grid-column: 3; }   /* four limitations (owner, 21 Oct 2026): two rows of two */
  .r11-s8-two-i h4 { font-size: 23px; }

  .r11-ft-brand { display: contents; }
  .r11-ft-grid {
    grid-template-columns: minmax(0, 480px) minmax(48px, 1fr) minmax(0, 480px);
    grid-template-rows: auto 1fr auto;     /* a taller Contact grows the about row, never the name's */
    grid-template-areas:
      "name  . contact"
      "about . contact"
      "apx   . src";
    column-gap: 0;
  }
  .r11-ft-name { grid-area: name; }
  .r11-ft-about { grid-area: about; }
  nav.r11-ft-group { grid-area: apx; }
  section.r11-ft-group { grid-area: src; }
  .r11-ft-col { grid-area: contact; }
}

/* ---------- Desktop polish, round 2 (2026-10-21). Desktop only: every rule below sits in a min-width query, so
   the phone (the max-width 767 rules above, m-end.css) is untouched. ---------- */
@media (min-width: 768px) {
  /* 64px from the Limitations text to the footer band, the air round the red band (96 before; the phone keeps
     its own 56). */
  #s8.v3-method { padding-bottom: 64px; }

  /* The Limitations text on the page's 15/24 body. */
  .r11-s8-two-i p { line-height: 24px; }

  /* Sheet tables: the 12px mono cells on the 13px sans cells' baseline (they sat ~1px high on a shared top);
     the head row stays bottom-aligned. */
  .r11-apx-tbl tbody th,
  .r11-apx-tbl tbody td { vertical-align: baseline; }

  /* Footer Sources: no "30 Sep 2026)" alone on a last line. */
  .r11-ft-links li { text-wrap: pretty; }

  /* s4's "ranked 5th of 291,292" opens the Top 20 sheet (r11-s8.js arms it as a Method box): a quiet gold
     underline at rest, full strength on hover and keyboard focus. Colour, size and copy unchanged.
     Polish r3: the two-line flag hugs its words (its grid already starts them on the left, so no text moves),
     so the keyboard ring (r3 block at the end) can go round the dot and both lines. Where :has is unknown the
     rank keeps its own ring, at offset 0 (at 2 it cut the descenders of "Flagged by the scan"). */
  .r11-s4-flag { width: fit-content; }
  .r11-s4-rank.is-apx {
    width: fit-content;                    /* the hit area and the ring hug the words */
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(132, 98, 12, .4);
    transition: text-decoration-color .15s linear;
  }
  .r11-s4-rank.is-apx:focus-visible {
    outline: 2px solid var(--slate-900);
    outline-offset: 0;
    border-radius: 2px;
    text-decoration-color: currentColor;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .r11-s4-rank.is-apx:hover { text-decoration-color: currentColor; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .r11-s4-rank.is-apx { transition: none; }
}

/* Sticky column heads in the sheets, only where every table fits its 1120px sheet (no sideways scroll from
   1180px): the tables stop being scroll boxes (clip keeps the rounded corners), so the heads stick to the top
   of .r11-apx-body, flush under the sheet's header. Sticky insets count from the scroll box's padding edge, so
   the body's 20px top padding becomes its first block's margin (the same layout at rest): no rows show through
   a gap above a stuck head. The head's first cell sits over the sticky first column. */
@media (min-width: 1180px) {
  .r11-apx-body { padding-top: 0; }
  .r11-apx-body > :first-child { margin-top: 20px; }
  .r11-apx-tbl { overflow: clip; }
  .r11-apx-tbl thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--slate-200);
  }
  .r11-apx-tbl thead tr > :first-child { z-index: 3; }
}

/* ---------- Desktop polish, round 3 (2026-10-21). Desktop only: every rule below sits in a min-width query, and
   the fold motion in r11-s8.js is gated by one, so the phone (the max-width 767 rules above, m-end.css) is
   untouched. ---------- */

/* s4's flag: one keyboard ring round the dot, "Flagged by the scan" and "ranked 5th of 291,292" (the rank stays
   the button and keeps its full-strength underline). 2px out (measured in a 2x crop at 1512: at 3px the ring
   came within 1.5px of the "Credit note 24862111" glyphs; at 2px it is 2.5px clear), inside the row's wash. */
@supports selector(:has(*)) {
  @media (min-width: 768px) {
    .r11-s4-rank.is-apx:focus-visible { outline: none; }
    .r11-s4-flag:has(.r11-s4-rank.is-apx:focus-visible) {
      outline: 2px solid var(--slate-900);
      outline-offset: 2px;
      border-radius: 4px;
    }
  }
}

/* The folds move on a click: r11-s8.js sets an inline max-height from the current height to the new one and
   .is-anim for the .32s; jumps (links, hashes, load) and reduced motion snap. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .r11-fold-body.is-anim { overflow: hidden; transition: max-height .32s cubic-bezier(.2, .7, .2, 1); }
}

@media (min-width: 768px) {
  /* The footer's signature: the name in the serif on the 23px tier of the Limitations titles above it, at the
     s6 step heads' weight 500; the about line 8px under it. */
  .r11-ft-name { font: 500 23px/28px var(--serif); letter-spacing: -.01em; font-optical-sizing: auto; }
  .r11-ft-about { margin-top: 8px; }

  /* The footer ends 48px under the colophon line, the same air as over its first line (was 32). */
  .site-footer { padding-bottom: 48px; }

  /* Sheet tags: plain gold mono text at the page's 11px label size (the 9.5px outlined chips read as buttons).
     The Swedish column captions at 11px too: weight 400 and ink-dim keep them a step under the 500 slate-800
     column heads. "96% of the error" still fits one line in its 600px table. */
  .r11-apx-tag { border: 0; padding: 0; margin-left: 6px; font-size: 11px; line-height: 15px; letter-spacing: .08em; }
  .r11-apx-sh { font-size: 11px; line-height: 14px; }

  /* One flagged wash on the page: the s4 ledger's #F6F0E0 on the sheets' found rows (and their sticky first
     cell, was #F6F2EA), the Top 20 note (was the 9% gold wash) and the Score box (was #FBF6E9). */
  .r11-apx-tbl tr.is-find > *,
  .r11-apx-tbl tr.is-find > :first-child,
  .r11-apx-flag,
  .r11-s8-box.is-gold { background: var(--r11-wash, #F6F0E0); }
}

/* From 1024px, where Contact stands beside the name: CONTACT's baseline on the name's (23/28 serif against
   11/16 mono: 7px, measured). 768-1023 keeps 0 (Contact stands under the brand block there). */
@media (min-width: 1024px) {
  .r11-ft-col > .r11-ft-label { margin-top: 7px; }
}

/* A roomier Top 20 from 1440px: up to 1320px, 96px of window each side (1320 at 1512 and 1920, 1248 at 1440).
   At 1512, 10 of its 20 rows wrap (18 at 1120) and the table is 974px tall (1147). The Examples sheet stays at
   1120: at 1320 only 2 of its rows stop wrapping. */
@media (min-width: 1440px) {
  .r11-apx--top20 { width: min(1320px, calc(100vw - 192px)); }
  /* There the supplier's name takes one line and "followed up" wraps under it; with its 6px margin it stood
     6px in from the name, so it is its own line, flush under the name (at 1120 it still follows the name). */
  .r11-apx-tbl--top .r11-apx-tag { display: block; width: fit-content; margin: 2px 0 0; }
}

/* ---------- Footer (owner, 2026-10-21): Sources sits under the Appendix in the left column (Contact keeps the right
   column), and the Appendix items carry no underline at rest; hovering shows it. Desktop only. ---------- */
@media (min-width: 1024px) {
  .r11-ft-grid {
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "name  . contact"
      "about . contact"
      "apx   . ."
      "src   . .";
  }
}