/* method.css: the Method (#s8 .mx, r10), the owner's pick of 17 Oct 2026: A desk-08/09 and phone-08/09.
   The markup is static and written by tools/build_method.py; method.js only typesets the Appendix's math
   (KaTeX, loaded on the Appendix's first open).

   Two screens, then one quiet line:
     .beat.mx-how   one sentence, the one-line pipeline (7,294,483 → clean → 8 features → X 291,292 × 8 →
                    8 → 2 → 8; a column of ↓ steps below 1024px) and what P(account | committee) means
     .beat.mx-end   the owner's quote on evaluation, centred; the end line with the two downloads on the
                    screen's foot
     .mx-apx        the closed Appendix: the feature sheet with its formulas, Make an X, the downward
                    autoencoder drawing, its callouts, rows and chips, and the code line
   The beats themselves (.beat: one screen, --beat-indent) are story-v3.css's; this file owns everything
   .mx-*. No cards, no band: the Method sits on the page's slate-50 like the rest of the story. Nothing moves
   here except story.js's shared once-only text entrances ([data-reveal] on the five text units). */

:root { --mx-dim: var(--ink-dim, #686E7A); }   /* 4.77:1 on slate-50 (slate-700 is 3.8:1) */

.mx { position: relative; color: var(--slate-900); }

/* ---------- Screen 1: the sentence, the pipeline, the gloss (A desk-08: say [168,245,800,115],
   pipe items x 168/376/571/791/1056 at y 425, gloss y 557 at 1440×900) ---------- */

.mx-say {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -.012em;
  max-width: 25em;
  text-wrap: balance;
  font-optical-sizing: auto;
  color: var(--slate-900);
}

.mx-pipe { display: flex; align-items: flex-start; margin: 64px 0 0; padding: 0; list-style: none; }
.mx-pipe li { display: flex; align-items: flex-start; }
/* The arrows carry the order (3.8:1, above the 3:1 for graphics); aria-hidden: the list's order reads it. */
.mx-pipe-op { font-family: var(--serif); font-size: 30px; line-height: 1; padding: 0 18px; color: var(--slate-700); }
.mx-pipe-op::before { content: "→"; }
.mx-pipe-t { display: flex; flex-direction: column; }
.mx-pipe-n { font-family: var(--mono); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; color: var(--slate-900); }
.mx-pipe-l { margin-top: 14px; max-width: 12.5em; font-family: var(--sans); font-size: 14px; line-height: 1.4; letter-spacing: .005em; color: var(--slate-800); }

.beat > .mx-gloss { margin-top: 48px; }
.mx-gloss { font-family: var(--sans); font-size: 17px; line-height: 1.55; max-width: 34em; text-wrap: pretty; color: var(--slate-800); }
.mx-gloss-f { font-family: var(--mono); font-size: .92em; }

/* 1024-1239: the row keeps A's look and shrinks with the width (numbers, arrows and the labels' measure),
   so it stays one line: at 1024 the numbers are 20.7px and the row ends 22px inside the column. From about
   1240 every min() picks A's own value. */
@media (min-width: 1024px) {
  .mx-pipe-n { font-size: min(26px, calc((100vw - 176px) * .02445)); }
  .mx-pipe-op { font-size: min(30px, calc((100vw - 176px) * .0282)); padding: 0 min(18px, calc((100vw - 176px) * .0169)); }
  /* never under 8.15em: "the autoencoder;" (about 112px) keeps its line, so no label opens on a lone "the" */
  .mx-pipe-l { max-width: max(8.15em, min(12.5em, calc((100vw - 176px) * .1316))); }
}

/* Below 1024 (iPad portrait, phones): the pipeline turns into a column of ↓ steps, as A phone-08. */
@media (max-width: 1023.98px) {
  .mx-pipe { flex-direction: column; margin-top: 48px; }
  .mx-pipe li { flex-direction: column; }
  .mx-pipe-op { padding: 10px 0 10px 2px; font-size: 26px; line-height: 26px; }
  .mx-pipe-op::before { content: "↓"; }
  .mx-pipe-t { flex-direction: row; align-items: baseline; gap: 16px; }
  .mx-pipe-n { font-size: 22px; }
  .mx-pipe-l { margin: 0; max-width: none; }
  .beat > .mx-gloss { margin-top: 40px; }
}

/* ---------- Screen 2: the quote and the end line (A desk-09: quote [168,271,714,163], by y 452, end line
   y 793 at 1440×900). The quote is centred where A has it, the end line sits on the screen's foot, in the
   flow, so a short screen never lets them overlap. 37px = A's 16svh foot less the end line's own band. ---------- */

.beat.mx-end { display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); justify-content: start; justify-items: start; padding-bottom: 62px; }
.mx-eval { align-self: center; margin: 0 0 37px; }
.mx-quote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1.2; max-width: 21em; text-wrap: balance; color: var(--slate-900); }
.mx-quote p { margin: 0; }
.mx-by { margin: 18px 0 14px; font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--slate-800); }
.mx-colophon { margin: 0; max-width: 62em; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--slate-800); }
.mx-colophon a { color: var(--slate-900); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--slate-500); text-underline-offset: 3px; }
.mx-colophon a:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; border-radius: 3px; }
@media (hover: hover) and (pointer: fine) {
  .mx-colophon a:hover { text-decoration-color: var(--slate-900); }
}

@media (max-width: 767.98px) {
  .mx-say { font-size: 24px; }
  .mx-pipe { margin-top: 40px; }
  .mx-pipe-op { padding: 10px 0 10px 2px; font-size: 24px; line-height: 24px; }
  .mx-pipe-t { gap: 14px; }
  .mx-pipe-n { font-size: 19px; }
  .mx-pipe-l { font-size: 13px; }
  .beat > .mx-gloss { margin-top: 32px; }
  .mx-gloss { font-size: 16px; }
  .beat.mx-end { padding-bottom: 41px; }
  .mx-quote { font-size: 24px; line-height: 1.22; }
  .mx-by { font-size: 13px; margin-bottom: 13px; }
  .mx-colophon { font-size: 13px; }
  /* finger-sized download links without moving the line */
  .mx-colophon a { padding: 6px 0; }
}

/* ---------- The Appendix: one quiet line under the end line, closed ----------
   A native <details> (it opens without JS, and a find in the page opens it); its summary is a real h3 so
   heading navigation files the parts under it. Schibsted 14px in the dim ink with the small gold chevron,
   on the beats' left edge; open, the body takes up to 960px. */

.mx-apx {
  max-width: 960px;
  margin: 0 0 0 var(--beat-indent, 0px);
  scroll-margin-top: 24px;
}

.mx-apx-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--mx-dim);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mx-apx-sum::-webkit-details-marker { display: none; }

.mx-apx-t { margin: 0; font: inherit; color: inherit; }

.mx-apx[open] > .mx-apx-sum .mx-defs-mark { transform: rotate(180deg); }

.mx-apx-sum:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .mx-apx-sum:hover { color: var(--slate-900); }
}

.mx-apx-body { padding: 8px 0 8px; }

.mx-apx-lede { margin-top: 0; }

/* A part: a hairline, its name, the tool top right. */
.mx-apx-part {
  position: relative;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-200);
}

.mx-apx-h {
  margin: 0;
  padding-right: 120px;
  font-family: var(--serif);
  font-weight: 450;
  font-size: 23px;
  line-height: 28px;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--slate-900);
}

.mx-meta {
  position: absolute;
  top: 20px;
  right: 0;
  max-width: 112px;
  margin: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: .02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--slate-800);
}

.mx-cap {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 23px;
  max-width: 40em;
  text-wrap: pretty;
  color: var(--slate-800);
}

.mx-apx .mx-sheet { margin-top: 20px; }

.mx-apx-fig { margin: 22px 0 0; }

/* The code line: the Appendix's last, quiet (inert until build_method.py's CODE["url"] is set). */
.mx-code-line {
  margin: 40px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--slate-200);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-wrap: pretty;
  color: var(--mx-dim);
}

/* ---------- The Appendix's GitHub link ---------- */

.mx-gh {
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--slate-300);
  white-space: nowrap;
}

.mx-gh[aria-disabled="true"] { cursor: default; }

.mx-gh-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .22em;
  vertical-align: -.1em;
  fill: currentColor;
}

.mx-gh:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .mx-gh:not([aria-disabled="true"]):hover { color: var(--slate-900); text-decoration-color: var(--slate-500); }
}

/* ---------- Math ---------- */

/* A soft block of display formulas that wrap onto new lines as the width runs out. */
.mx-math {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 30px;
  row-gap: 10px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--white);   /* on the slate-50 page (r10: no white band) */
}

/* One formula: shrinks to fit (method.js, --mx-fit), then scrolls inside itself, never the page.
   The 3px on the right holds KaTeX's few pixels of overhang, so a formula that fits never shows a
   scroll bar; only one that is still too wide at MIN_FIT scrolls (.is-scroll). */
.mx-eq {
  min-width: 0;
  max-width: 100%;
  padding: 2px 3px 2px 0;
  overflow: hidden;
  font-size: 16px;
  color: var(--slate-900);
}

.mx-eq.is-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* A line break between groups of formulas. */
.mx-br {
  flex-basis: 100%;
  height: 0;
}

.mx-eq.is-scroll:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: 2px;
  border-radius: 4px;
}

.mx-tex {
  display: inline-block;
  vertical-align: middle;
}

/* Until KaTeX has set it (or if it cannot): the TeX source, readable as it is. */
.mx-tex:not(.is-tex) {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--slate-800);
}

.mx-tex--inline:not(.is-tex) { display: inline; }

.mx-eq .katex { font-size: calc(1.12em * var(--mx-fit, 1)); }

.mx-tex .katex-display {
  margin: 0;
  text-align: left;
}

.mx-tex .katex-display > .katex { text-align: left; }

.mx-tex--inline .katex { font-size: 1.05em; }   /* about the x-height of the sans around it */

/* ---------- 03: the feature sheet ---------- */

.mx-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-800);
}

.mx-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--slate-200);
}

.mx-sheet > .mx-group:first-child { margin-top: 4px; }

.mx-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mx-row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  column-gap: 32px;
  align-items: center;
  padding: 16px 0;
}

.mx-row + .mx-row { border-top: 1px solid var(--slate-100); }

.mx-row-text { min-width: 0; }

.mx-row-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--slate-900);
}

.mx-row-n {
  flex: none;
  width: 18px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 22px;
  color: var(--gold-lo);
}

.mx-code {
  margin: 2px 0 0 28px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 18px;
  overflow-wrap: anywhere;
  color: var(--slate-800);
}

.mx-code code { font: inherit; }

.mx-row-plain {
  margin: 4px 0 0 28px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
  color: var(--slate-800);
}

.mx-row--def .mx-row-plain { margin-left: 0; }

/* Notation and shared formulas: folded (<details>), its summary dressed as a group heading with a
   gold chevron at the end of the rule. */
.mx-defs { margin-top: 32px; }

.mx-defs-sum {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 24px;
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-800);
}

.mx-defs-sum::-webkit-details-marker { display: none; }

.mx-defs-sum::after {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--slate-200);
}

.mx-defs-mark {
  order: 2;
  flex: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mx-defs[open] .mx-defs-mark { transform: rotate(180deg); }

.mx-defs-sum:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .mx-defs-sum:hover { color: var(--slate-900); }
}

/* Definitions: the symbols, then the shared formulas. */
.mx-notation {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 6px 28px;
  margin: 16px 0 6px;
}

.mx-notation div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mx-notation dt {
  flex: none;
  min-width: 26px;
  font-size: 15px;
  color: var(--slate-900);
}

.mx-notation dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 21px;
  color: var(--slate-800);
}

/* ---------- 04: Make an X ---------- */

.mx-x-body {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
}

.mx-mat {
  display: block;
  flex: none;
  width: 108px;
  height: 76px;
}

.mx-math--x { flex: 1; }

.mx-mat .mx-fade { opacity: .35; }

.mx-mat-row {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
}

/* The drawing's shades, pale to dark (the matrix glyph and the autoencoder's vectors). */
.mx-c1 { fill: var(--slate-200); }
.mx-c2 { fill: var(--slate-300); }
.mx-c3 { fill: var(--slate-500); }
.mx-c4 { fill: var(--slate-700); }
.mx-c5 { fill: var(--slate-900); }

/* ---------- 05: the autoencoder ---------- */

.mx-row-plain code {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .82em;
  overflow-wrap: anywhere;
  color: var(--slate-900);
}

.mx-draw {
  max-width: 300px;
  margin: 0 auto;
}

.mx-ae-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mx-body {
  fill: var(--slate-50);
  stroke: var(--slate-300);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* The straight paths the values take, as Oil's funnel hatch: thin gold, faint. */
.mx-flowl {
  fill: none;
  stroke: var(--gold);
  stroke-opacity: .32;
  stroke-width: .75;
}

.mx-wire {
  fill: none;
  stroke: var(--slate-300);
  stroke-width: 1;
}

/* A layer: a dotted column of units. */
.mx-col {
  fill: none;
  stroke: var(--slate-500);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0 7;
  opacity: .8;
}

.mx-z {
  fill: var(--white);
  stroke: var(--gold);
  stroke-width: 1.25;
}

.mx-zc {
  fill: var(--gold);
  fill-opacity: .55;
}

.mx-zh {
  fill: var(--gold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.mx-cell {
  stroke: var(--slate-300);
  stroke-width: 1;
}

/* The one rebuilt number that misses its original. */
.mx-err {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
}

.mx-lead,
.mx-zline {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}

.mx-zhead { fill: var(--gold); }

.mx-p {
  fill: var(--gold);
  opacity: 0;
}

/* Labels inside the drawing are decorative (aria-hidden); the same facts are in the text. */
.mx-ae-svg text { user-select: none; }

/* 11-12 units (the Appendix's downward drawing). */
.mx-lbl {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  fill: var(--slate-800);
}

.mx-caps {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  fill: var(--slate-800);
}

/* z's own label on stacked cards (the callouts are under the drawing there). */
.mx-tag {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .06em;
  fill: var(--slate-800);
}

/* The downward drawing's two variants of z's pointer and the x̂ leader (tools/build_method.py). */
.mx-only-side { display: none; }

.mx-sym {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  fill: var(--slate-900);
}

/* The callouts: what x̂ is for, what z is for. Stacked under the drawing (narrow cards) each sits on
   a hairline; the x̂ leader runs from the ringed cell to the bottom of the drawing, which is where the
   first callout's hairline starts, so the two meet at any scale. */
.mx-call {
  padding-top: 14px;
  border-top: 1px solid var(--slate-200);
}

.mx-call--z { margin-top: 24px; }

.mx-call-t {
  margin: 0;
  font-family: var(--serif);
  font-weight: 450;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.005em;
  text-wrap: pretty;          /* not balance: "used for the map" stays one unit (.mx-nw) on a line of its own */
  color: var(--slate-900);
}

.mx-nw { white-space: nowrap; }

.mx-v { font-style: italic; }

.mx-call-p {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
  color: var(--slate-800);
}

.mx-math--call {
  margin-top: 10px;
  padding: 8px 10px;
}

.mx-link {
  color: var(--slate-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
}

.mx-link:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .mx-link:hover { text-decoration-thickness: 2px; }
}

/* The network's formulas and its training settings, under the drawing. */
.mx-rows--ae {
  margin-top: 24px;
  border-top: 1px solid var(--slate-200);
}

.mx-rows--ae .mx-row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }

.mx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.mx-chips li {
  padding: 3px 9px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: var(--slate-800);
}

.mx-chips b {
  font-weight: 600;
  color: var(--slate-900);
}

/* Narrow desktop and iPad portrait: the maths goes under its words, as on phones, at full size. */
@media (min-width: 768px) and (max-width: 899.98px) {
  .mx-row,
  .mx-rows--ae .mx-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
}

/* ---------- Phone ---------- */

@media (max-width: 767.98px) {
  .mx-apx-h { font-size: 22px; }

  .mx-row-plain,
  .mx-call-p,
  .mx-notation dd {
    font-size: 15px;
    line-height: 23px;
  }

  /* A feature: name, code name, formula, then what it means. */
  .mx-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 0;
  }

  .mx-row-text { display: contents; }

  .mx-row-name { order: 1; }
  .mx-code { order: 2; }
  .mx-row .mx-math { order: 3; margin-top: 12px; }
  .mx-row-plain { order: 4; margin-top: 10px; }

  .mx-code,
  .mx-row-plain { margin-left: 28px; }

  .mx-row--def .mx-row-plain { margin-left: 0; }

  .mx-rows--ae .mx-row { grid-template-columns: minmax(0, 1fr); }

  .mx-math {
    padding: 10px 12px;
    column-gap: 22px;
  }

  .mx-notation { grid-template-columns: minmax(0, 1fr); }

  .mx-x-body {
    flex-direction: column;
    align-items: stretch;
  }

  .mx-mat { align-self: center; }

  /* A finger-sized hit area. */
  .mx-gh::after {
    content: "";
    position: absolute;
    inset: -10px -6px;
  }
}


/* ---------- Motion and print ---------- */

@media (prefers-reduced-motion: no-preference) {
  .mx-defs-mark { transition: transform .2s var(--ease-out, ease-out); }
}

/* method.js opens the Appendix (and the notation) for print. */
@media print {
  .mx-apx-sum .mx-defs-mark { display: none; }
}