/* ── Amplified Thinker · learning learning ────────────────────────────────
   Loaded by /learning/ and NOWHERE ELSE. Same scoping rule as auth-pages.css
   and pwned.js: styles.css and nav.js are already paid for by all 20 pages,
   and nothing else on the site needs a stacked bar chart. Adding these rules
   to the shared file would put weight on every page to serve one.

   Everything here consumes the semantic tokens from styles.css, so dark mode
   comes for free from the [data-theme="dark"] block there. The one exception
   is the data-viz layer below, which needs colours the brand palette does not
   carry — see the note on it.
──────────────────────────────────────────────────────────────────────────── */

/* ── data-viz colours ──────────────────────────────────────────────────────
   Chart series are NOT brand accents and must not be taken from the accent
   tokens: --accent-warm is a link/emphasis colour and reusing it here would
   make "in progress" and "this is a link" the same signal.

   --dv-doing comes from the design exploration's palette (#D9A05B, "data
   highlights"). It is not in styles.css because nothing outside this page
   uses it; if a second surface ever needs it, promote it there rather than
   copying it.

   ⚠️ Every series is ALSO labelled in the markup. These three must stay
   distinguishable in greyscale — check any change against that, not just
   against contrast. */
.learn {
  --dv-read: var(--deep-teal);
  --dv-doing: #A96B22;          /* amber, darkened from #D9A05B for 4.5:1 as text */
  --dv-doing-fill: #D9A05B;     /* the lighter original, fills only — never text */
  --dv-idle: rgba(31, 77, 74, .14);
  --dv-idle-line: rgba(31, 77, 74, .28);
  --dv-ring-track: #DCE7E2;
  --tile-hover-line: color-mix(in srgb, var(--deep-teal) 32%, transparent);
  /* Label ink, measured against each fill: white on #26605B is 5.40:1;
     charcoal on #D9A05B is 5.56:1 (white would be 2.3:1 and fail badly). */
  --dv-read-ink: #FFFFFF;
  --dv-doing-ink: var(--charcoal);
  --dv-idle-ink: var(--text-muted);
}
[data-theme="dark"] .learn {
  --dv-read: var(--teal);
  --dv-doing: #E0B073;
  --dv-doing-fill: #D9A05B;
  --dv-idle: rgba(255, 255, 255, .13);
  --dv-idle-line: rgba(255, 255, 255, .3);
  --dv-ring-track: rgba(255, 255, 255, .16);
  --tile-hover-line: rgba(172, 196, 182, .36);
  /* The read fill is the LIGHT teal here, so its ink flips to dark: charcoal
     on #5BA79F is 4.53:1, where white would be 2.84:1. */
  --dv-read-ink: var(--charcoal);
  --dv-doing-ink: var(--charcoal);
  --dv-idle-ink: #D3DEDA;
}

/* ── shell ─────────────────────────────────────────────────────────────── */
.learn {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
}
.learn-head { margin-bottom: var(--space-6); }
.learn-eyebrow {
  font-family:var(--font-display);
  font-size: 11px; font-weight:650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-brand); margin-bottom: 10px;
}
/* The editorial token on purpose: this is an editorial headline in the same
   sense the News and primer headlines are. It was a serif until 2026-08-23;
   now the whole site is Inter and the distinction is carried by WEIGHT —
   this runs light (380, 420 in dark) where display headlines run 650–700.
   Setting it heavier would silently reclassify it as a display headline. */
.learn-title {
  font-family: var(--font-editorial);
  font-weight:380; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.15;
  letter-spacing:-.034em; color: var(--fg-heading); text-wrap: balance;
}
/* ⚠️ No max-width on either of these. They are single sentences meant to sit
   on ONE line at full width — a measure limit was wrapping them with 300px of
   empty space to the right. They wrap only when the viewport genuinely runs
   out, which the breakpoints below allow. */
.learn-sub { color: var(--text-muted); font-size: 15px; margin-top: 10px; }
.learn-note { color: var(--text-muted); font-size: 14px; margin-top: 6px; }

/* The cross-reference back to the library. Quieter than the page's own links
   because it leaves the page — it belongs to the header, not to the data. */
.learn-back { color: var(--text-muted); font-size: 14px; margin-top: 8px; }
.learn-back a {
  color: var(--fg-brand); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
}
.learn-back a:hover { color: var(--fg-heading); }

/* Hairline before each section heading. A rule rather than a border on the
   card, so the divider spans the full measure and reads as a page-level
   separation rather than a box edge. */
.learn-section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-soft);
}
.learn-h2 {
  font-family:var(--font-display);
  font-size: 18px; font-weight: 600; color: var(--fg-heading);
  letter-spacing:-.014em; line-height: 1.35;
}

.learn-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

/* ── summary tiles ─────────────────────────────────────────────────────── */
.learn-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: var(--space-5);
}
/* Hover: the same gesture the Future Skills cards use — a small lift, a
   deepened shadow and a tinted edge, on --dur-base/--ease-standard — so the
   two pages feel like one site. Deliberately smaller than theirs (2px, not
   3px): those cards open something, these only report, and a control that
   moves as much as a real one implies it does something. */
.learn-tile {
  display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.learn-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--tile-hover-line);
}
.learn-tile-label { font-size: 13px; font-weight: 500; color: var(--text-muted); }
/* ⚠️ All three figure rows are the SAME HEIGHT and centred, and that is what
   keeps the captions on one line across the tiles. The ring is 72px and the
   numeral is 40px, so with the row sized to its content the ring tile's caption
   sat ~16px below the other two — visible the moment the three sit side by side.
   Centring in a shared 72px box puts every caption's centre on the same y.
   Baseline alignment reads slightly better WITHIN a tile, but it cannot align
   ACROSS tiles whose figures are different heights, and across is what matters
   here. */
.learn-tile-figure {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 72px;
}
.learn-tile-big {
  font-family:var(--font-display);
  font-size: 40px; font-weight: 600; line-height: 1; color: var(--fg-heading);
  font-variant-numeric: tabular-nums;
}
.learn-tile-of { font-size: 13px; color: var(--text-muted); }

/* Overall completion carries a ring instead of a bare figure. Same viewBox as
   the row rings (0 0 40 40, r=15), so the geometry, the stroke proportions and
   the sweep are literally the same — only the rendered size differs. Font sizes
   inside are user units and scale with it: 10 units at 72px reads as ~18px. */
/* Only the gap differs now — the ring needs more air beside it than a numeral
   does. Alignment is shared, deliberately: see the note on .learn-tile-figure. */
.learn-tile-figure.with-ring { gap: var(--space-4); }
.learn-tile-ring { width: 72px; height: 72px; flex: none; display: block; }
.learn-tile-ring .ring-track { fill: none; stroke: var(--dv-ring-track); stroke-width: 3; }
.learn-tile-ring .ring-value {
  fill: none; stroke: var(--dv-read); stroke-width: 3; stroke-linecap: round;
}
.learn-tile-ring .ring-pct {
  font-family:var(--font-display); font-size: 10px; font-weight: 600;
  fill: var(--fg-heading); text-anchor: middle; dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}

/* ── collapsible section ───────────────────────────────────────────────── */
/* The heading owns the button, not the other way round: a heading nested
   inside interactive content is announced inconsistently, and this way the
   section still appears in a screen reader's heading list. */
.learn-collapse {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-5);
}
.learn-collapse-head { background: var(--bg-sunken); }
.learn-collapse-head .learn-h2 { margin: 0; }
.learn-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px var(--space-5);
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.learn-toggle-text { display: flex; flex-direction: column; gap: 4px; }
/* The note sits inside an <h2>, so it inherits the heading's weight unless it
   is reset here — it is supporting text, not part of the heading. */
.learn-toggle .learn-note { margin-top: 0; font-weight: 400; letter-spacing: 0; }

/* styles.css carries no screen-reader-only class, so this page defines its own.
   Used to give each action button its own accessible name — five buttons all
   reading "Resume" is useless out of table context. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.learn-chev {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--fg-brand); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-standard);
}
.learn-toggle[aria-expanded="false"] .learn-chev { transform: rotate(-90deg); }
.learn-collapse-body { border-top: 1px solid var(--line-soft); }
.learn-collapse-body[hidden] { display: none !important; }

/* ── the skills table ──────────────────────────────────────────────────── */
/* A real <table>: five rows of two comparable measures is tabular data, and a
   screen reader gets row/column context free. It becomes a stack of cards
   under 860px, where the header row is hidden and each cell labels itself. */
.learn-table-wrap { overflow-x: auto; }
.learn-table { width: 100%; border-collapse: collapse; }
.learn-table th, .learn-table td {
  text-align: left; padding: 14px var(--space-5); vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
}
.learn-table thead th {
  font-family:var(--font-display);
  font-size: 11px; font-weight:650; letter-spacing:.1em; text-transform: uppercase;
  color: var(--fg-heading); padding-top: 11px; padding-bottom: 11px;
}
.learn-table tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
.learn-table tbody tr:hover { background: var(--bg-page); }
.learn-table tbody tr:last-child th, .learn-table tbody tr:last-child td { border-bottom: 0; }
.learn-skill {
  font-family:var(--font-display);letter-spacing:-.006em;
  font-size: 15px; font-weight: 600; color: var(--fg-heading); min-width: 150px;
}

/* one cell = ring + status line + action button */
.learn-cell { min-width: 290px; }
.learn-cell-inner { display: flex; align-items: center; gap: 11px; }
.learn-status { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.learn-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); flex: none; }
.learn-dot.done { background: var(--dv-read); }
.learn-dot.doing { background: var(--dv-doing-fill); }
.learn-dot.idle { background: var(--dv-idle-line); }
.learn-when { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }

/* ── rings ─────────────────────────────────────────────────────────────── */
.learn-ring { width: 48px; height: 48px; flex: none; display: block; }
.learn-ring .ring-track { fill: none; stroke: var(--dv-ring-track); stroke-width: 3; }
.learn-ring .ring-value {
  fill: none; stroke: var(--dv-read); stroke-width: 3; stroke-linecap: round;
}
.learn-ring .ring-value.doing { stroke: var(--dv-doing-fill); }
.learn-ring .ring-pct {
  font-family:var(--font-body); font-size: 10px; font-weight: 600;
  fill: var(--fg-heading); text-anchor: middle;
}
.learn-ring .ring-tick {
  fill: none; stroke: var(--dv-read); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── action buttons ────────────────────────────────────────────────────── */
/* Buttons, not text links: these are the page's one job. Filled for "go and
   do it" (Resume, Start), outline for the secondary "Review". The verb is the
   state, so a row still reads correctly with no colour at all. */
.learn-act {
  flex: none; min-width: 92px; text-align: center;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-family:var(--font-display);letter-spacing:-.006em; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  background: var(--bg-brand); color: var(--fg-on-brand);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.learn-act:hover { background: var(--navy); }
[data-theme="dark"] .learn-act:hover { background: var(--sage); }
.learn-act:active { transform: translateY(1px); }
.learn-act.quiet {
  background: transparent; color: var(--fg-heading);
  border-color: var(--line); font-weight: 500;
}
.learn-act.quiet:hover { background: transparent; border-color: var(--line-strong); }

/* ── the two charts, side by side ──────────────────────────────────────── */
/* The donut answers one question with one figure; the columns answer five.
   The 1 : 1.7 split is that difference, not a guess — five labelled columns
   need the room, and a donut squeezed wider only grows its whitespace. */
.learn-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: var(--space-5); align-items: start; margin-top: var(--space-5);
}
.learn-pair .learn-card { padding: var(--space-5) var(--space-5) var(--space-4); }
.learn-pair .learn-note { margin-bottom: var(--space-2); }

/* ── big donut ─────────────────────────────────────────────────────────── */
/* Column, not row: in a half-width card there is no space beside the ring, and
   a legend under a centred donut reads as one block rather than two. */
.learn-donut-row {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-5); margin-top: var(--space-5);
}
.learn-donut { flex: none; width: 190px; height: 190px; }
.learn-donut circle { fill: none; stroke-width: 26; }
.learn-donut .seg-track { stroke: var(--dv-idle); }
.learn-donut .seg-read  { stroke: var(--dv-read); }
.learn-donut .seg-doing { stroke: var(--dv-doing-fill); }
/* dominant-baseline central, so the figure sits on the ring's true centre
   whatever its width — it must not drift as the count-up runs from 0% to 45%. */
.learn-donut .donut-pct {
  font-family:var(--font-display); font-size: 30px; font-weight: 600;
  fill: var(--fg-heading); text-anchor: middle; dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}
.learn-donut .donut-cap {
  font-family:var(--font-body); font-size: 11px; fill: var(--text-muted); text-anchor: middle;
}

/* ── legend, shared by donut and bars ──────────────────────────────────── */
.learn-key { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.learn-key li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--text-dark); }
.learn-key .swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; transform: translateY(1px); }
.learn-key .swatch.read  { background: var(--dv-read); }
.learn-key .swatch.doing { background: var(--dv-doing-fill); }
.learn-key .swatch.idle  { background: var(--dv-idle); border: 1px solid var(--dv-idle-line); }
.learn-key b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg-heading); }

/* ── vertical stacked columns ──────────────────────────────────────────── */
/* Read at the bottom, unread above it — the column fills as the plan is worked
   through, which is the whole reason for standing the bars up.

   ⚠️ ONE GRID, TWO ROWS — the bars share a row and the names share a row.
   `.learn-vcol` is display:contents so its children become grid items directly.
   This is what keeps the bar BOTTOMS on one line: with each column its own
   flex stack, a name that wrapped to two lines made its column taller and
   pushed its bar up, so "Analytical thinking" floated above its neighbours.
   Row 1 is one height for every column, whatever happens beneath it. */
.learn-vbars {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px var(--space-4); margin-top: var(--space-5);
}
.learn-vcol { display: contents; }

.learn-vbar {
  height: 210px; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--dv-idle); border: 1px solid var(--dv-idle-line);
}

/* A segment is a positioned box holding two things: a fill that animates, and a
   label that does not. ⚠️ They are separate on purpose — scaling the segment
   itself would scale the number inside it, and a digit stretched from nothing
   to full height looks broken rather than animated. */
.learn-vbar .seg { position: relative; display: block; width: 100%; min-height: 0; }
.learn-vbar .seg-fill { position: absolute; inset: 0; transform-origin: bottom center; }
.learn-vbar .s-read  .seg-fill { background: var(--dv-read); }
.learn-vbar .s-doing .seg-fill { background: var(--dv-doing-fill); }
.learn-vbar .s-idle  .seg-fill { background: transparent; }
.learn-vbar .seg-label {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-family:var(--font-display);letter-spacing:-.006em; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Ink per segment. ⚠️ The read fill flips from dark teal to light teal between
   themes, so its label has to flip the other way — white reads 5.4:1 on the
   light-theme fill but only 2.8:1 on the dark-theme one. */
.learn-vbar .s-read  .seg-label { color: var(--dv-read-ink); }
.learn-vbar .s-doing .seg-label { color: var(--dv-doing-ink); }
.learn-vbar .s-idle  .seg-label { color: var(--dv-idle-ink); }

.learn-vname {
  font-size: 13px; color: var(--text-dark); text-align: center; line-height: 1.35;
  padding-top: 10px; border-top: 1px solid var(--line-soft);
  overflow-wrap: break-word; align-self: start;
}

/* legend laid out along a row, for under the columns */
.learn-key-row { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
.learn-key-row li { font-size: 13px; }
.learn-key-note { color: var(--text-muted); font-size: 12.5px; margin-left: auto; }

/* ── motion ────────────────────────────────────────────────────────────────
   Every animation is gated on `.is-in`, which learning.js adds when the
   section first scrolls into view. The base state is therefore the PRE-
   animation state — a ring fully offset, a bar at scaleX(0) — so anything
   that never gets observed would stay invisible. learning.js adds `.is-in`
   unconditionally when IntersectionObserver is missing, which is what keeps
   that from happening.
   ──────────────────────────────────────────────────────────────────────── */
@keyframes learnRingSweep { from { stroke-dashoffset: var(--sweep); } to { stroke-dashoffset: 0; } }
@keyframes learnGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes learnGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes learnFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes learnDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 160, 91, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(217, 160, 91, 0); }
}

.learn-ring .ring-value, .learn-tile-ring .ring-value,
.learn-donut .seg-read, .learn-donut .seg-doing { stroke-dashoffset: var(--sweep); }
.is-in .learn-ring .ring-value,
.is-in .learn-tile-ring .ring-value { animation: learnRingSweep 800ms 120ms var(--ease-standard) both; }
.is-in .learn-donut .seg-read  { animation: learnRingSweep 900ms 120ms var(--ease-standard) both; }
.is-in .learn-donut .seg-doing { animation: learnRingSweep 900ms 320ms var(--ease-standard) both; }

.learn-vbar .seg-fill { transform: scaleY(0); }
.is-in .learn-vbar .s-read .seg-fill { animation: learnGrowY 700ms var(--ease-standard) both; }
.is-in .learn-vbar .s-doing .seg-fill,
.is-in .learn-vbar .s-idle .seg-fill { animation: learnGrowY 700ms 160ms var(--ease-standard) both; }

/* The numbers arrive after the fills have all but landed, so they are never
   read against a bar that is still moving under them. */
.learn-vbar .seg-label { opacity: 0; }
.is-in .learn-vbar .seg-label { animation: learnFadeIn 300ms 620ms var(--ease-standard) both; }

/* The one looping animation on the page, and it marks exactly one thing: the
   skill you are part-way through. If everything pulsed it would signal nothing. */
.is-in .learn-dot.doing { animation: learnDotPulse 2400ms var(--ease-standard) infinite; }

@media (prefers-reduced-motion: reduce) {
  .learn-ring .ring-value, .learn-tile-ring .ring-value,
  .learn-donut .seg-read, .learn-donut .seg-doing { stroke-dashoffset: 0; }
  .is-in .learn-tile-ring .ring-value { animation: none; }
  .learn-vbar .seg-fill { transform: none; }
  .learn-vbar .seg-label { opacity: 1; }
  .is-in .learn-vbar .seg-fill, .is-in .learn-vbar .seg-label { animation: none; }
  .learn-chev, .learn-table tbody tr, .learn-act { transition: none; }
  /* The lift goes; the shadow and edge stay. Only the movement is the part
     anyone asked to be spared, and dropping the whole hover would leave the
     tiles with no response at all. */
  .learn-tile:hover { transform: none; }
  .is-in .learn-ring .ring-value, .is-in .learn-donut .seg-read, .is-in .learn-donut .seg-doing,
  .is-in .learn-dot.doing { animation: none; }
}

/* ── states ────────────────────────────────────────────────────────────── */
/* ⚠️ [hidden] is the weakest rule in the cascade and any author `display`
   beats the UA rule. These panels are flex/grid, so they need this explicit
   override or a hidden panel renders in full. Two defects already — CLAUDE.md. */
.learn-panel { display: block; }
.learn-panel[hidden], .learn[hidden], .learn-section[hidden],
.learn-tiles[hidden], .learn-pair[hidden] { display: none !important; }

.learn-msg { max-width: 620px; margin: var(--space-8) auto; text-align: center; }
.learn-msg h1 {
  font-family: var(--font-editorial); font-weight: 400;
  font-size: clamp(24px, 3vw, 34px); color: var(--fg-heading); line-height: 1.2;
}
.learn-msg p { color: var(--text-muted); font-size: 16px; margin-top: 14px; }
.learn-msg .learn-actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); flex-wrap: wrap; }
.learn-msg .learn-actions[hidden] { display: none !important; }
.learn-btn {
  font-family:var(--font-display);letter-spacing:-.006em; font-size: 14px; font-weight: 500;
  padding: 11px 22px; border-radius: var(--radius-pill); text-decoration: none;
  background: var(--bg-brand); color: var(--fg-on-brand); border: 1px solid transparent;
}
.learn-btn.quiet { background: transparent; color: var(--fg-brand); border-color: var(--line-strong); }

/* Skeleton while the rows are in flight. Deliberately the same height as the
   real thing so nothing jumps when data lands. */
.learn-skeleton { height: 320px; border-radius: var(--radius); background: var(--bg-sunken); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .learn-skeleton { animation: learn-pulse 1.6s var(--ease-standard) infinite; }
}
@keyframes learn-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .learn-sub, .learn-note { font-size: 13.5px; }
}
@media (max-width: 900px) {
  .learn-tiles { grid-template-columns: 1fr; }
  /* Below this the donut half is under ~260px — the ring nearly fills it and
     the five columns are squeezed to about 60px each. Stack instead. */
  .learn-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Five columns and five names cannot share this width. The names go
     vertical rather than shrinking to an unreadable size. */
  .learn-vbars { gap: var(--space-2); }
  .learn-vbar { height: 170px; }
  .learn-vname { font-size: 11.5px; }
  .learn-key-note { margin-left: 0; width: 100%; }
}
@media (max-width: 860px) {
  .learn-table-wrap { overflow-x: visible; }
  .learn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .learn-table, .learn-table tbody, .learn-table tr, .learn-table th, .learn-table td { display: block; width: 100%; }
  .learn-table tbody tr { padding: var(--space-4) var(--space-5); }
  .learn-table th, .learn-table td { border-bottom: 0; padding: var(--space-2) 0; min-width: 0; }
  .learn-table td::before {
    content: attr(data-label);
    display: block; font-family:var(--font-display); font-size: 11px; font-weight:650;
    letter-spacing: .1em; text-transform: uppercase; color: var(--fg-brand); margin-bottom: 8px;
  }
}
@media (max-width: 720px) {
  .learn { padding: var(--space-6) 20px var(--space-7); }
  .learn-donut { width: 150px; height: 150px; }
  .learn-cell-inner { flex-wrap: wrap; }
}

/* Light-on-dark thins the strokes; 420 in dark against 380 in light. */
[data-theme="dark"] .learn-title{font-weight:420}