/* r11-mf.css (2026-10-21): the Method flow in #s8, from the owner's sketch ("Method from the sketch" canvas),
   refined after an art-director / information-design / ML review. Two fixed-size stages built by
   tools/r11/build_mf.py: .dk 880 wide (768 up) and .ph 358 wide (phones); r11-mf.js scales each to its column.
   Oil-style cards (12px corners, gold-tinted hairline, soft shadow), one gold accent, slate icons, dashed arrows
   that drift slowly while the flow is on screen (still under reduced motion). */

.r11-mf-fit { position: relative; margin-top: 36px; }
/* The wide stage from 900px (scaled to 0.89 at most there); below, phones and tablets get the narrow stage, scaled
   up to 1.3 so its type stays readable (the wide one at 0.74 set 10.5px mono at 7.7px). */
@media (max-width: 899.98px) { .r11-mf-fit.is-wide { display: none; } }
@media (min-width: 900px) { .r11-mf-fit.is-narrow { display: none; } }
/* Without r11-mf.js the stages keep their own height, so nothing runs over Limitations (JS sets the scaled height). */
.r11-mf-fit.is-wide { height: 1400px; }
.r11-mf-fit.is-narrow { height: 1204px; }
.r11-mf-stage {
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0;
  transform-origin: top center;
  transform: translateX(-50%);
  font-family: var(--sans);
  color: var(--slate-900);
}
.r11-mf-stage > * { position: absolute; margin: 0; }

.r11-mf-box,
.r11-mf-card,
.r11-mf-ghost,
.r11-mf-fe {
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid rgba(132, 98, 12, .22);
  border-radius: 12px;
}
.r11-mf-box,
.r11-mf-card { box-shadow: 0 1px 2px rgba(48, 50, 54, .04), 0 16px 34px -22px rgba(92, 70, 38, .3); }
.r11-mf-card { padding: 14px 16px; }

.r11-mf-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  margin: 0;
  font: 600 15px/20px var(--sans);
}
.r11-mf-h b { font-weight: 600; }
.r11-mf-ics { display: flex; align-items: center; gap: 8px; }
.r11-mf-i {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--slate-800);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.r11-mf-i.is-fill { fill: var(--slate-800); stroke: none; }
.r11-mf-i.is-sm { width: 14px; height: 14px; stroke-width: 1.8; }
.r11-mf-i .is-dot { stroke-width: 2.6; }
.r11-mf-sub { margin: 16px 0 0; font: 400 10.5px/17px var(--mono); color: var(--hero-lede); }
.r11-mf-sub.is-free { margin: 0; line-height: 15px; }

/* The dot chart: one block per year, one dot per 1,000 invoices, one colour. */
.r11-mf-k { font: 500 10.5px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-800); }
.r11-mf-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font: 400 11.5px/16px var(--sans);
  color: var(--hero-lede);
}
.r11-mf-legend i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--slate-500); }
.r11-mf-dots { overflow: visible; fill: var(--slate-500); }
.r11-mf-base { fill: none; stroke: var(--slate-300); stroke-width: 1; }
.r11-mf-yr { display: flex; flex-direction: column; align-items: center; text-align: center; }
.r11-mf-yr b { font: 500 11.5px/16px var(--mono); letter-spacing: .02em; color: var(--slate-900); }
.r11-mf-yr span {
  margin-top: 1px;
  font: 400 13.5px/18px var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--hero-lede);
}
.r11-mf-note { font: 400 11.5px/16px var(--sans); color: var(--hero-lede); }

/* Arrows: the story's spine at full gold, the two bundles (years in, 8 numbers on) lighter. */
.r11-mf-lines { overflow: visible; fill: none; stroke: var(--gold-lo); stroke-linecap: round; pointer-events: none; }
.r11-mf-flow,
.r11-mf-dash { stroke-dasharray: 5 4; }
.r11-mf-flow.is-spine { stroke-width: 1.25; }
.r11-mf-dash.is-bundle { stroke-width: 1; opacity: .55; }
.r11-mf-bus,
.r11-mf-buslab { transition: opacity .16s linear; }
.r11-mf-fit.is-math .r11-mf-bus,
.r11-mf-fit.is-math .r11-mf-buslab { opacity: 0; }
@keyframes r11-mf-dash { to { stroke-dashoffset: -18; } }
/* Only the five spine arrows drift (the two bundles stay still: animating all 22 repainted the whole diagram every
   frame); paused while the math is open or the Method is folded. */
@media (prefers-reduced-motion: no-preference) {
  .r11-mf-fit.is-live .r11-mf-flow { animation: r11-mf-dash 1.6s linear infinite; }
  .r11-mf-fit.is-math .r11-mf-flow,
  .r11-fold.is-folded .r11-mf-flow { animation-play-state: paused; }
}

/* Feature engineering: a small box; the whole box is the Read more button's hit area. */
.r11-mf-fe {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 7px 0 14px;
  box-shadow: 0 1px 2px rgba(48, 50, 54, .04), 0 10px 22px -16px rgba(92, 70, 38, .3);
}
.r11-mf-fe b { flex: 1; font: 600 13.5px/18px var(--sans); }
.r11-mf-more {
  flex: none;
  margin: 0;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: #F6F0E0;
  font: 600 11.5px/16px var(--sans);
  color: var(--gold-lo);
  cursor: pointer;
}
.r11-mf-more::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.r11-mf-more:hover { background: #F2E9D3; }
.r11-mf-more:focus-visible { outline: 2px solid var(--gold-lo); outline-offset: 2px; }
.r11-mf-lab { font: 400 10.5px/16px var(--mono); color: var(--gold-lo); }
.r11-mf-lab span { display: block; color: var(--hero-lede); }

/* Autoencoder: horizontal, inputs left, rebuilt right (as on the canvas board). */
.r11-mf-t { font: 600 15px/20px var(--sans); }
.r11-mf-m { font: 400 10.5px/16px var(--mono); color: var(--hero-lede); }
.r11-mf-m.is-r { text-align: right; }
.r11-mf-m.is-c { text-align: center; }
.r11-mf-logo { line-height: 0; }
.r11-mf-logo .r11-mf-i { width: 20px; height: 20px; }
.r11-mf-ae { overflow: visible; pointer-events: none; }
.r11-mf-trap { fill: var(--slate-100); stroke: var(--slate-300); stroke-width: 1; stroke-linejoin: round; }
.r11-mf-lat { fill: var(--tile-gold); }
.r11-mf-latd { fill: #FFFFFF; }
.r11-mf-in { fill: var(--slate-500); }
.r11-mf-out { fill: var(--slate-50); stroke: var(--hero-lede); stroke-width: 1; }

.r11-mf-map { display: block; object-fit: contain; }
.r11-mf-five { font: 600 11px/14px var(--mono); color: var(--gold-lo); }

.r11-mf-rank { padding: 0; list-style: none; }
.r11-mf-rank li {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 4px;
  padding: 0 8px;
  border-radius: 6px;
  font: 400 12px/16px var(--sans);
}
.r11-mf-rank b { flex: none; width: 18px; font: 500 10.5px/16px var(--mono); color: var(--hero-lede); }
.r11-mf-rank span { flex: 1; }
.r11-mf-rank em { font: normal 400 10.5px/16px var(--mono); color: var(--hero-lede); }
.r11-mf-rank li.is-gold { background: #F6F0E0; color: var(--gold-lo); font-weight: 600; }
.r11-mf-rank li.is-gold b,
.r11-mf-rank li.is-gold em { color: var(--gold-lo); }

/* The math, opened from Feature engineering: hangs from the box (caret), closes with ✕, Esc or the pill. */
.r11-mf-math {
  z-index: 2;
  box-sizing: border-box;
  padding: 22px 26px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(132, 98, 12, .22);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(48, 50, 54, .06), 0 28px 60px -24px rgba(48, 50, 54, .35);
}
.r11-mf-math[hidden] { display: none; }
/* Wide: tall enough to cover both bottom cards (their edges peeked out under it). */
.r11-mf-stage:not(.r11-mf--ph) .r11-mf-math { min-height: 672px; }
.r11-mf-math::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #FFFFFF;
  border-left: 1px solid rgba(132, 98, 12, .22);
  border-top: 1px solid rgba(132, 98, 12, .22);
  transform: rotate(45deg);
}
.r11-mf-x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hero-lede);
  cursor: pointer;
}
.r11-mf-x:hover { background: var(--slate-100); color: var(--slate-900); }
.r11-mf-x path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.r11-mf-mh { margin: 0; font: 500 22px/28px var(--serif); color: var(--slate-900); }
.r11-mf-mi { margin: 8px 0 0; font: 400 13px/20px var(--sans); color: var(--hero-lede); }
.r11-mf-mi.is-small { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--slate-200); font-size: 12px; line-height: 19px; }
.r11-mf-mi b { font-weight: 600; color: var(--slate-800); }

/* One feature per row: the question (its label in gold) and the count as a plain fraction. */
.r11-mf-fx { margin: 16px 0 0; padding: 0; list-style: none; }
.r11-mf-fx li {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--slate-200);
}
.r11-mf-fq { margin: 0; font: 400 13px/19px var(--sans); color: var(--slate-900); }
.r11-mf-fl { display: block; margin-bottom: 2px; font: 500 11px/16px var(--mono); color: var(--gold-lo); }
.r11-mf-ff {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 5px;
  row-gap: 4px;
  font: 400 15.5px/20px var(--serif);
  color: var(--slate-900);
}
.r11-mf-ff small { flex-basis: 100%; font: 400 12px/17px var(--sans); color: var(--hero-lede); }
.r11-mf-par { font-size: 34px; line-height: 1; font-weight: 300; color: var(--slate-700); }
.r11-mf-frac { display: inline-flex; flex-direction: column; align-items: stretch; text-align: center; }
.r11-mf-frac > span:first-child { padding: 0 6px 3px; border-bottom: 1px solid var(--slate-800); }
.r11-mf-frac > span:last-child { padding: 3px 6px 0; }

/* The phone stage's own type steps (the desktop's, one notch down). */
.r11-mf--ph .r11-mf-sub { margin-top: 12px; font-size: 11px; line-height: 16px; }
.r11-mf--ph .r11-mf-sub.is-free { margin: 0; line-height: 15px; }
.r11-mf--ph .r11-mf-h.is-free { font-size: 14px; }
.r11-mf--ph .r11-mf-k { font-size: 11px; line-height: 14px; }
.r11-mf--ph .r11-mf-legend { gap: 5px; font-size: 11px; line-height: 14px; }
.r11-mf--ph .r11-mf-legend i { width: 3px; height: 3px; }
.r11-mf--ph .r11-mf-yr b { font-size: 11px; line-height: 14px; }
.r11-mf--ph .r11-mf-note { font-size: 11px; line-height: 14px; }
.r11-mf--ph .r11-mf-fe { padding-left: 12px; }
.r11-mf--ph .r11-mf-fe b { font-size: 13px; }
.r11-mf--ph .r11-mf-more { padding: 5px 10px; font-size: 11px; }
.r11-mf--ph .r11-mf-lab,
.r11-mf--ph .r11-mf-m { font-size: 11px; line-height: 15px; }
.r11-mf--ph .r11-mf-t { font-size: 14px; }
.r11-mf--ph .r11-mf-rank li { height: 22px; font-size: 12px; }
.r11-mf--ph .r11-mf-math { padding: 18px 18px 20px; }
.r11-mf--ph .r11-mf-mh { font-size: 19px; line-height: 24px; }
.r11-mf--ph .r11-mf-mi { font-size: 12.5px; line-height: 19px; }
.r11-mf--ph .r11-mf-x { top: 4px; right: 4px; width: 44px; height: 44px; }
.r11-mf--ph .r11-mf-fx li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 12px 0; }
.r11-mf--ph .r11-mf-ff { font-size: 15px; }
.r11-mf--ph .r11-mf-fq { font-size: 13px; }
.r11-mf--ph .r11-mf-par { font-size: 30px; }
.r11-mf--ph .r11-mf-frac > span { text-wrap: balance; }
.r11-mf--ph .r11-mf-mi.is-small { font-size: 12px; line-height: 18px; }
/* The narrow stage is scaled to its column (r11-mf.js sets --mf-k): the math's small type is counter-scaled so it
   never renders under the phone floors (11px labels, 12px text) on screens narrower than the stage. */
.r11-mf--ph .r11-mf-fl { font-size: calc(11px / min(1, var(--mf-k, 1))); line-height: 1.45; }
.r11-mf--ph .r11-mf-fq,
.r11-mf--ph .r11-mf-ff small,
.r11-mf--ph .r11-mf-mi,
.r11-mf--ph .r11-mf-mi.is-small { font-size: calc(12px / min(1, var(--mf-k, 1))); line-height: 1.5; }