/* Learn: the risk library.
 *
 * Institutional register, not a blog roll: dense numbered rows, hairline
 * rules, tabular metadata, a serif reading column. Everything is scoped under
 * .learn-page so none of it can leak into the Tailwind-ish site styles.
 *
 * The pages and the diagrams are generated by tools/build-learn.js from
 * tools/learn/source.html. Edit the source and re-run rather than
 * hand-editing the generated index.html files under site/learn.
 *
 * The brand orange is authored literally as #ff5c00 (and doubles as the
 * signal colour in the diagrams) so /theme.js can retint the whole section
 * from content.json before first paint. */

/* .learn-embed is the register on a page that is not a learn page: /blog
 * carries the same 28 rows, generated by the same script, and needs the
 * tokens the register rules read. Everything below the tokens is keyed off
 * the .learn-* class names, so the rows are identical in both places. */
.learn-page,
.learn-embed {
  --lrn-paper:   #ffffff;
  --lrn-surface: #fafafa;
  --lrn-raised:  #f5f5f4;
  --lrn-ink:     #191919;
  --lrn-ink-2:   #4a4a4a;
  --lrn-ink-3:   #767676;
  --lrn-rule:    #e1e1e1;
  --lrn-rule-2:  #ededed;
  --lrn-mute:    #e4e4e2;

  /* Chart hues. Validated for colour-vision deficiency against white;
   * s2 is the brand and gets retinted with everything else. */
  --lrn-s1:      #0f5c8c;
  --lrn-s2:      #ff5c00;
  --lrn-s3:      #6b4e9e;
  --lrn-s1-soft: #d3e2ec;
  --lrn-s2-soft: #ffdecc;

  --lrn-sans:  Helvetica, Arial, sans-serif;
  --lrn-serif: georgia, Georgia, "Times New Roman", serif;
  --lrn-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Two columns and only two: one to read in, one to draw in.
   *
   * These were ch, and ch resolves against the font-size of the block it is
   * set on, so blocks nominally on the same measure stopped in different
   * places. 66ch of the 17px serif prose ran 689px; 66ch of the 11px mono
   * caption under a figure ran 399px; the "Use it" box, 66ch of 15.5px serif,
   * ran 587px. One article carried six right edges down a single screen. A
   * length holds the column wherever it is set and whatever face is set in it.
   *
   * 690px is what 66ch of the serif prose already measured, so the reading
   * column has not moved. 820px is the width the figures and tables were
   * already written to. Every text block takes the measure and every exhibit
   * takes the figure width: nothing in the body is sized on its own. */
  --lrn-measure: 690px;
  --lrn-figure: 820px;
  --lrn-rail: 286px;
  --lrn-head: 64px;

  background: var(--lrn-paper);
  color: var(--lrn-ink);
  font-family: var(--lrn-sans);
}

.learn-page *, .learn-page *::before, .learn-page *::after,
.learn-embed *, .learn-embed *::before, .learn-embed *::after { box-sizing: border-box; }

.learn-shell { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.learn-main { padding-top: var(--lrn-head); }

.learn-eyebrow {
  font-family: var(--lrn-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
  margin: 0;
}

/* ── masthead ─────────────────────────────────────────── */
.learn-masthead { border-bottom: 1px solid var(--lrn-rule); padding: clamp(40px, 7vw, 80px) 0 0; }
.learn-masthead__inner { display: grid; gap: 28px; padding-bottom: 36px; }
/* Hidden: nothing small goes above a heading (CLAUDE.md). "The risk library"
   announced the h1 under it and said nothing the h1 does not, and the same
   words are already the page title, the rail heading and the crumb on all 28
   article pages. Markup is still emitted by tools/build-learn.js; drop the
   display line to bring it back. Same treatment as .art-num below and as the
   part heads at .learn-part__head. */
.learn-masthead .learn-eyebrow { display: none; }
.learn-masthead h1 {
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 700;
  /* 0, not the 12px that used to clear the eyebrow above it. */
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.learn-masthead p.learn-lede {
  font-family: var(--lrn-serif);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--lrn-ink-2);
  max-width: var(--lrn-measure);
  margin: 0;
}

/* The counters read as a research masthead: figures, then what they count. */
.learn-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--lrn-rule);
  border-left: 1px solid var(--lrn-rule);
}
.learn-stat { border-right: 1px solid var(--lrn-rule); border-bottom: 1px solid var(--lrn-rule); padding: 18px 20px; }
.learn-stat b {
  display: block;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.learn-stat > span {
  display: block;
  margin-top: 8px;
  font-family: var(--lrn-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
}
/* The unit rides inside the figure rather than dropping to its own line. */
.learn-stat b i { font-style: normal; font-size: 17px; font-weight: 400; color: var(--lrn-ink-3); }

/* ── filter bar ───────────────────────────────────────── */
.learn-filters {
  position: sticky;
  top: var(--lrn-head);
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--lrn-rule);
}
.learn-filters__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
.learn-filters__label {
  font-family: var(--lrn-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
  margin-right: 8px;
}
.learn-filter {
  font-family: var(--lrn-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lrn-ink-2);
  background: transparent;
  border: 1px solid var(--lrn-rule);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.learn-filter:hover { border-color: var(--lrn-ink-3); color: var(--lrn-ink); }
.learn-filter[aria-pressed="true"] { background: var(--lrn-ink); border-color: var(--lrn-ink); color: #fff; }

/* ── the register ─────────────────────────────────────── */
.learn-part { padding: 56px 0 0; }
.learn-part__head {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--lrn-ink);
}
/* "Part I · Articles 01-06" over "What a risk costs" is a label announcing the
   heading under it, and the numbers it carries are printed again down the left
   of every row. Hidden rather than cut from the markup, which the generator
   still writes, so restoring it is one line here. */
.learn-part__head .learn-eyebrow { display: none; }
.learn-part__head h2 {
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0;
}

.learn-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline;
  gap: 20px;
  padding: 18px 8px 18px 0;
  border-bottom: 1px solid var(--lrn-rule-2);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.learn-row:hover { background: var(--lrn-surface); }
.learn-row:hover .learn-row__title { color: #ff5c00; }
/* Set in the page's own face rather than the monospace one. The number is part
   of the row it labels, not machine output, and the column holds two digits, so
   nothing here needed a monospace grid. Tabular figures keep the pairs aligned
   down the column. */
.learn-row__num {
  font-family: var(--lrn-sans);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--lrn-ink-3);
  font-variant-numeric: tabular-nums;
}
.learn-row__title {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: 600;
  margin: 0 0 5px;
  transition: color .15s;
}
.learn-row__gloss {
  font-family: var(--lrn-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--lrn-ink-2);
  margin: 0;
  max-width: var(--lrn-measure);
}
.learn-row__meta {
  font-family: var(--lrn-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
  text-align: right;
  white-space: nowrap;
}
.learn-row[hidden] { display: none; }

.learn-note {
  font-family: var(--lrn-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--lrn-ink-3);
  max-width: var(--lrn-measure);
  margin: 40px 0 0;
  padding: 20px;
  border: 1px solid var(--lrn-rule);
  background: var(--lrn-surface);
}

/* ── article layout ───────────────────────────────────── */
.learn-doc { display: flex; align-items: flex-start; gap: 0; }

.learn-rail {
  width: var(--lrn-rail);
  flex: 0 0 var(--lrn-rail);
  position: sticky;
  top: var(--lrn-head);
  max-height: calc(100vh - var(--lrn-head));
  overflow-y: auto;
  border-right: 1px solid var(--lrn-rule);
  padding: 28px 20px 60px 0;
}
/* The rail is set in the page font throughout: no mono, no uppercase. A part is
 * told apart from the articles under it by size, weight and colour, so the
 * reader sees one typeface down the whole column. */
.learn-rail__title {
  font-size: 12.5px;
  color: var(--lrn-ink-3);
  margin: 0 0 16px;
}
/* 14.5px, not 15: "What your balance sheet can absorb" is the longest part name
 * and at 15 it runs to the rail's right edge. */
.learn-rail__part {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--lrn-ink);
  margin: 24px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--lrn-rule-2);
}
.learn-rail__part:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.learn-rail a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 5px 0;
  text-decoration: none;
  color: var(--lrn-ink-2);
  font-size: 12.5px;
  line-height: 1.32;
  text-wrap: pretty;
}
/* tabular-nums keeps the numbers in a straight column now the mono is gone. */
.learn-rail a span:first-child { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--lrn-ink-3); padding-top: 1px; }
.learn-rail a:hover { color: var(--lrn-ink); }
.learn-rail a[aria-current="page"] { color: var(--lrn-ink); font-weight: 700; }
.learn-rail a[aria-current="page"] span:first-child { color: #ff5c00; }

.learn-body { flex: 1 1 auto; min-width: 0; padding: 40px 0 96px clamp(24px, 4vw, 64px); }

.learn-crumbs {
  font-family: var(--lrn-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
  margin: 0 0 22px;
}
.learn-crumbs a { color: var(--lrn-ink-3); text-decoration: none; }
.learn-crumbs a:hover { color: #ff5c00; }

/* ── the article itself (markup shared with tools/learn/source.html) ── */
/* Hidden: nothing small goes above a heading (CLAUDE.md). The part title and
   the number are already in .learn-crumbs and the sidebar, so the line said the
   heading's own subject twice. Markup is still emitted by tools/build-learn.js;
   drop the display line below to bring it back. */
.learn-page .art-num {
  display: none;
  font-family: var(--lrn-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
  margin: 0 0 14px;
}
.learn-page .art-num b { color: #ff5c00; font-weight: 400; }
.learn-page .art h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.03;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 20px;
  max-width: 20ch;
  text-wrap: balance;
}
.learn-page .stand {
  font-family: var(--lrn-serif);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  font-style: italic;
  color: var(--lrn-ink-2);
  max-width: var(--lrn-measure);
  margin: 0 0 40px;
  padding-left: 18px;
  border-left: 2px solid #ff5c00;
}
.learn-page .art p {
  font-family: var(--lrn-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--lrn-ink);
  max-width: var(--lrn-measure);
  margin: 0 0 20px;
}
.learn-page .art strong { font-weight: 700; }

.learn-page .term {
  max-width: var(--lrn-measure);
  background: var(--lrn-surface);
  border: 1px solid var(--lrn-rule);
  border-left: 2px solid var(--lrn-s1);
  padding: 16px 20px;
  margin: 0 0 24px;
  font-family: var(--lrn-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lrn-ink-2);
}
.learn-page .term b {
  display: block;
  font-family: var(--lrn-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lrn-s1);
  font-weight: 400;
  margin-bottom: 6px;
}

.learn-page .use {
  max-width: var(--lrn-measure);
  border: 1px solid var(--lrn-rule);
  background: var(--lrn-surface);
  padding: 22px 24px;
  margin: 34px 0 0;
}
.learn-page .use h4 {
  font-family: var(--lrn-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff5c00;
  font-weight: 400;
  margin: 0 0 14px;
}
.learn-page .use ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
/* Each item is a bold lead-in followed by a bare text node. As a grid container
 * the li made that text node an anonymous grid item of its own, so it fell into
 * the 13px marker column and wrapped one word per line. Block flow keeps the
 * sentence together; the marker is taken out of it and positioned. */
.learn-page .use li {
  position: relative;
  padding-left: 25px;
  font-family: var(--lrn-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lrn-ink-2);
}
.learn-page .use li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border: 1.5px solid #ff5c00;
}
.learn-page .use li b { color: var(--lrn-ink); font-weight: 700; }

.learn-page .note-sm {
  font-family: var(--lrn-mono) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
  color: var(--lrn-ink-3) !important;
  max-width: var(--lrn-measure);
  padding: 14px 16px;
  border-left: 2px solid var(--lrn-rule);
  background: var(--lrn-surface);
}

/* ── tables ───────────────────────────────────────────── */
/* Tables size to the figure width, not the prose measure. At the measure the
 * wrapper was 587px against a 615px table, so it carried a 28px scrollbar at
 * every viewport, a 2560px display included. overflow-x stays as the phone
 * fallback. */
.learn-page .tbl-wrap { max-width: var(--lrn-figure); overflow-x: auto; margin: 0 0 24px; }
.learn-page table.t { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.learn-page table.t th {
  font-family: var(--lrn-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
  font-weight: 400;
  text-align: left;
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--lrn-rule);
  white-space: nowrap;
}
.learn-page table.t td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--lrn-rule-2); color: var(--lrn-ink-2); }
.learn-page table.t td:first-child { color: var(--lrn-ink); }
.learn-page table.t .num { text-align: right; font-family: var(--lrn-mono); font-size: 13px; }

/* ── figures ──────────────────────────────────────────── */
.learn-page figure.fig { margin: 34px 0; max-width: var(--lrn-figure); color: var(--lrn-ink-2); }
.learn-page .fig-frame {
  background: var(--lrn-paper);
  border: 1px solid var(--lrn-rule);
  padding: 24px 24px 20px;
  overflow-x: auto;
}
.learn-page .fig svg { display: block; width: 100%; height: auto; min-width: 480px; }
.learn-page .fig figcaption {
  font-family: var(--lrn-mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--lrn-ink-3);
  margin-top: 14px;
  /* The caption belongs to the exhibit above it, so it runs the exhibit's
     width. Capped on its own it stopped at 399px under an 820px figure. */
  max-width: 100%;
}
.learn-page .fig figcaption b { color: var(--lrn-ink-2); font-weight: 400; }
.learn-page .fig figcaption em { font-style: italic; }

/* SVG drawing conventions. The diagrams carry no literal colours: every
 * fill and stroke comes from one of these classes, which is what lets the
 * whole set be re-skinned (or retinted by /theme.js) in one place. */
.learn-page .fig text { font-family: var(--lrn-mono); font-size: 12px; fill: var(--lrn-ink-2); }
.learn-page .fig .t-strong { fill: var(--lrn-ink); }
.learn-page .fig .t-big { font-size: 16px; fill: var(--lrn-ink); }
.learn-page .fig .t-huge { font-size: 22px; fill: var(--lrn-ink); }
.learn-page .fig .t-sm { font-size: 10.5px; fill: var(--lrn-ink-3); }
.learn-page .fig .t-on-fill { fill: #ffffff; }
.learn-page .fig .t-s1 { fill: var(--lrn-s1); }
.learn-page .fig .t-s2 { fill: #ff5c00; }
.learn-page .fig .t-s3 { fill: var(--lrn-s3); }
.learn-page .fig .f-s1 { fill: var(--lrn-s1); }
.learn-page .fig .f-s2 { fill: #ff5c00; }
.learn-page .fig .f-s3 { fill: var(--lrn-s3); }
.learn-page .fig .f-s1s { fill: var(--lrn-s1-soft); }
.learn-page .fig .f-s2s { fill: #ffdecc; }
.learn-page .fig .f-mute { fill: var(--lrn-mute); }
.learn-page .fig .f-sheet { fill: var(--lrn-paper); }
.learn-page .fig .st { fill: none; stroke: currentColor; stroke-width: 1.5; }
.learn-page .fig .st-thin { fill: none; stroke: var(--lrn-rule); stroke-width: 1; }
.learn-page .fig .st-s1 { fill: none; stroke: var(--lrn-s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.learn-page .fig .st-s2 { fill: none; stroke: #ff5c00; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.learn-page .fig .st-s3 { fill: none; stroke: var(--lrn-s3); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.learn-page .fig .st-ink { fill: none; stroke: var(--lrn-ink); stroke-width: 1.5; }
.learn-page .fig .dash { stroke-dasharray: 4 4; }

.learn-page .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--lrn-mono);
  font-size: 11px;
  color: var(--lrn-ink-2);
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.learn-page .legend li { display: flex; align-items: center; gap: 7px; }
.learn-page .legend .sw { width: 11px; height: 11px; flex: 0 0 auto; }
.learn-page .sw1 { background: var(--lrn-s1); }
.learn-page .sw2 { background: #ff5c00; }
.learn-page .sw3 { background: var(--lrn-s3); }
.learn-page .swm { background: var(--lrn-mute); }

/* ── interactive figures ──────────────────────────────── */
.learn-page .tool { display: grid; gap: 16px; }
.learn-page .tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.learn-page .tool label {
  font-family: var(--lrn-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
}
.learn-page .tool input[type="range"] { flex: 1 1 200px; min-width: 160px; accent-color: #ff5c00; height: 22px; }
.learn-page .tool-row .val {
  font-family: var(--lrn-mono);
  font-size: 12.5px;
  color: var(--lrn-ink);
  font-variant-numeric: tabular-nums;
  min-width: 84px;
  text-align: right;
}
.learn-page .readout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  border-top: 1px solid var(--lrn-rule);
  padding-top: 16px;
}
.learn-page .readout div { display: grid; gap: 3px; }
.learn-page .readout .k {
  font-family: var(--lrn-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
}
.learn-page .readout .v {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--lrn-ink);
  font-variant-numeric: tabular-nums;
}
.learn-page .readout .v.sig { color: #ff5c00; }
.learn-page .btn {
  font-family: var(--lrn-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lrn-ink);
  background: var(--lrn-raised);
  border: 1px solid var(--lrn-rule);
  padding: 9px 15px;
  cursor: pointer;
}
.learn-page .btn:hover { border-color: var(--lrn-ink-3); }
.learn-page .strip { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; }
.learn-page .strip i { display: block; aspect-ratio: 1 / 1; background: var(--lrn-s1-soft); }
.learn-page .strip i.b { background: #ff5c00; }

/* ── prev / next ──────────────────────────────────────── */
.learn-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--lrn-rule);
  border: 1px solid var(--lrn-rule);
  margin: 56px 0 0;
  max-width: var(--lrn-figure);
}
.learn-pager a { background: var(--lrn-paper); padding: 20px 22px; text-decoration: none; color: inherit; }
.learn-pager a:hover { background: var(--lrn-surface); }
.learn-pager a:hover strong { color: #ff5c00; }
.learn-pager span {
  display: block;
  font-family: var(--lrn-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lrn-ink-3);
  margin-bottom: 8px;
}
.learn-pager strong { display: block; font-size: 15.5px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; transition: color .15s; }
.learn-pager .learn-pager__next { text-align: right; }
.learn-pager a[aria-disabled="true"] { pointer-events: none; opacity: .4; }

.learn-cta {
  border: 1px solid var(--lrn-rule);
  background: var(--lrn-surface);
  padding: 28px;
  margin: 28px 0 0;
  max-width: var(--lrn-figure);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.learn-cta h2 { font-size: 20px; letter-spacing: -.02em; font-weight: 700; margin: 0 0 6px; }
.learn-cta p { font-family: var(--lrn-serif); font-size: 15.5px; color: var(--lrn-ink-2); margin: 0; max-width: 46ch; }
.learn-cta a {
  flex: 0 0 auto;
  background: #ff5c00;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 12px;
}
.learn-cta a:hover { background: #ff7d33; }

.learn-disclaimer {
  font-family: var(--lrn-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--lrn-ink-3);
  /* Its rule is the last line on the page and sits directly under the pager,
     so it spans what the pager spans rather than stopping short of it. */
  max-width: var(--lrn-figure);
  margin: 32px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--lrn-rule);
}

/* ── mobile ───────────────────────────────────────────── */
.learn-railbtn {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  font-family: var(--lrn-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--lrn-ink);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .5);
}

/* The rail becomes a drawer at 1120px, not 1024px. The rail is a fixed 286px
 * against a 1240px shell, so below about 1110px the body column drops under the
 * 690px measure and the diagrams scale below 1:1, rendering .t-sm labels at
 * ~9px. Cutting over at 1120px means the page never gets worse as the window
 * gets wider. learn.js narrow() carries the same number: change both. */
@media (max-width: 1120px) {
  .learn-doc { display: block; }
  .learn-rail {
    position: fixed;
    inset: var(--lrn-head) auto 0 0;
    z-index: 45;
    width: min(84vw, 320px);
    max-height: none;
    background: var(--lrn-paper);
    border-right: 1px solid var(--lrn-rule);
    padding: 24px 20px 60px 20px;
    box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .6);
  }
  .learn-rail[hidden] { display: none; }
  .learn-body { padding-left: 0; }
  .learn-railbtn { display: block; }
}

@media (max-width: 720px) {
  .learn-row { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .learn-row__meta { display: none; }
  .learn-page .fig-frame { padding: 16px 14px 12px; }
  .learn-cta { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .learn-page * { transition: none !important; animation: none !important; }
}

@media print {
  .learn-rail, .learn-railbtn, .learn-filters, .learn-cta, .learn-pager { display: none; }
  .learn-body { padding: 0; }
  .learn-page figure.fig { break-inside: avoid; }
}