/* ═══════════════════════════════════════════════════════════════════════════
   /learn — page-specific layout only.

   Consumes the §1 tokens from style.css; redefines nothing. Two jobs:
   (1) the hub reads as the register's index — a contents strip, numbered
       lesson cards, one "see it live" list;
   (2) the lesson shell gets a second column, so a 72ch measure stops leaving
       half the desktop viewport empty.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The opt-out that used to live here (resetting `nav`/`nav a` bleed onto this
   page's semantic <nav> elements) is gone — style.css now scopes those rules
   to `.site-nav` (the header lockup only), so `nav.learn-index` and
   `nav.next-prev` never inherited them in the first place. Fixed as a shared
   change per CSS-REQUESTS-learn.md item 2. */

/* ── hub: opening ────────────────────────────────────────────────────────── */
.learn-open {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s5) var(--s7);
  align-items: start;
  margin-top: var(--s4);
}
.learn-open .lede { max-width: none; margin: 0; }
.learn-why {
  max-width: none; margin: 0;
  padding-left: var(--s4);
  border-left: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.95rem;
}

/* ── hub: the contents strip ─────────────────────────────────────────────────
   On desktop this is the index of a printed register. On mobile it is the only
   way to reach the fourth tier without scrolling past fifteen cards. */
.learn-index { margin: var(--s6) 0 var(--s7); }
.learn-index-h {
  font-family: var(--font-text);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s2); padding: 0; border: none;
}
.learn-index-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  /* hairline gutters, not gaps — the cells divide like table cells */
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden;
}
.learn-index-list li { background: var(--paper-2); margin: 0; }
.learn-index-list a {
  display: flex; flex-direction: column; gap: .22rem;
  /* the index must not read lighter than the cards it indexes */
  height: 100%; min-height: 5.6rem; padding: var(--s4);
  color: var(--ink); text-decoration: none;
  transition: background var(--motion-fast) ease;
}
.learn-index-list a:hover { background: var(--paper-3); text-decoration: none; }
.li-n {
  font-family: var(--font-display); font-size: .76rem; font-weight: 600;
  color: var(--accent); letter-spacing: .02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.li-name {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -.012em; line-height: 1.25;
}
.li-who {
  margin-top: auto; padding-top: var(--s2);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ── hub: tier sections ──────────────────────────────────────────────────── */
.tier-sec .sec-head { margin-top: var(--s8); }
.tier-sec .sec-head > h2 { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.tier-sec .sec-head .tier-badge { margin-left: .1rem; }
.tier-blurb {
  margin: calc(-1 * var(--s2)) 0 var(--s5);
  max-width: 62ch; color: var(--ink-3); font-size: .95rem;
}

/* one column per lesson in the tier, so every tier fills its own row — the ragged
   3+1 wrap of the shared auto-fit grid was the hub's loudest desktop defect, and a
   hard 4 left the 3-lesson tier ending on an empty cell */
.tier-sec .tier-grid { gap: var(--s4); margin: 0; }
.tier-sec .tier-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier-sec .tier-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tier-sec .tier-card {
  gap: .3rem;
  padding: var(--s4) var(--s4) var(--s3);
}
.card-n {
  font-family: var(--font-display); font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; color: var(--ink-4);
  font-variant-numeric: tabular-nums lining-nums;
}
.tier-sec .tier-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.tier-sec .tier-card p { flex: 1 1 auto; font-size: .875rem; line-height: 1.5; }
/* "Read →" appears on all 15 cards; at accent weight with its own hairline it made
   the lower two-thirds of the hub a field of identical rules and out-shouted the
   card titles. The whole card is already a link, so the affordance is demoted to a
   quiet marker that only takes accent on hover. */
.card-go {
  margin-top: var(--s3);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
  transition: color var(--motion-fast) ease;
}
.tier-sec .tier-card:hover .card-go { color: var(--accent-deep); }

/* ── hub: "then see it live" ─────────────────────────────────────────────── */
.learn-live {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  border-top: 1px solid var(--rule-ink);
}
.learn-live li { margin: 0; border-bottom: 1px solid var(--rule); }
.learn-live a {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: var(--s5); align-items: baseline;
  padding: var(--s4) var(--s2);
  color: var(--ink); text-decoration: none;
  transition: background var(--motion-fast) ease;
}
.learn-live a:hover { background: var(--paper-3); text-decoration: none; }
.ll-name { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; letter-spacing: -.012em; }
.ll-what { color: var(--ink-3); font-size: .92rem; line-height: 1.55; }
.ll-go { color: var(--accent); font-weight: 700; }
.learn-live a:hover .ll-go { color: var(--accent-deep); }

/* the soft delegate ask (hub foot + every lesson foot) is the shared `.soft-cta`
   in style.css — one definition, one wording, every interior page. */

/* ═══ lesson shell ════════════════════════════════════════════════════════ */

/* the article now owns the full measure; the prose column keeps its 72ch cap */
.lesson { max-width: none; }
.lesson > .crumb, .lesson > h1 { max-width: 72ch; }
.lesson-cols {
  display: grid;
  grid-template-columns: minmax(0, 72ch) minmax(0, 17rem);
  gap: var(--s7); align-items: start; justify-content: start;
  margin-top: var(--s5);
}
.lesson-main { min-width: 0; }
.lesson h2[id] { scroll-margin-top: calc(var(--header-h) + var(--s4)); }

/* long identifiers in prose broke mid-token (`Con` / `tractRegistry`) because the
   shared rule is word-break:break-all; break only when there is no other option */
.lesson code { word-break: normal; overflow-wrap: anywhere; }

/* Teaching figures are the shared `.figure-plate` (BRIEF §2.7) on a semantic
   <figure>/<figcaption>, exactly like the collection's quarter chart — the plate,
   the rule under it and the tracked uppercase "Figure" label all come from
   style.css. Only the two things a lesson figure genuinely does differently live
   here: an SVG that must fill the plate, and the legend under a band chart. */
.lesson .figure-plate > svg, .lesson .figure-plate > div > svg { display: block; width: 100%; height: auto; }
.lesson .figure-plate .bv-legend { margin-top: var(--s2); }

/* ── wide teaching schematics: frame, don't shrink ──────────────────────────
   `bandConcept` and `attestationFlow` are ~720pt landscape drawings with 10–12px
   internal labels. Scaled into the prose column they render at ~5px — BRIEF §2.7
   says redraw or frame, never shrink until it breaks. Neither figure ships a
   portrait redraw, and the shared `.fig-frame` is `display:none` below 760px, so
   it cannot be borrowed (CSS-REQUESTS-learn.md §3). This is the same mechanic,
   scoped here: a floor width, its own scroll frame, an explicit affordance. */
.lesson .figure-plate.has-wide-svg > div {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Same local/scroll gradient pair as the code blocks below: a shadow appears on
     whichever edge still has figure off-screen, so a shape clipped at the frame
     edge reads as "there is more" rather than as a broken drawing. */
  background-image:
    linear-gradient(to right, var(--paper-2), transparent),
    linear-gradient(to left,  var(--paper-2), transparent),
    linear-gradient(to right, var(--rule-2), transparent),
    linear-gradient(to left,  var(--rule-2), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.lesson .figure-plate.has-wide-svg > div > svg { min-width: 560px; }
.figscroll-hint { display: none; }
.lesson .figure-plate figcaption .figscroll-hint + b { margin-left: 0; }

/* A code sample that scrolls must say so (§2.6.3's reason, a different element).
   Two `local` gradients paint the paper edge and two `scroll` gradients paint a
   shadow, so the shadow only shows on the side that still has content off-screen —
   the affordance appears exactly when there is more to see and disappears at the
   end of the scroll. Colours are tokens fading to `transparent`, so dark mode
   inverts with the rest of the system. */
.lesson pre {
  overscroll-behavior-x: contain;
  background-image:
    linear-gradient(to right, var(--paper-3), transparent),
    linear-gradient(to left,  var(--paper-3), transparent),
    linear-gradient(to right, var(--rule-2), transparent),
    linear-gradient(to left,  var(--rule-2), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* a tier's closing "where to next" link is an action, not a clause — give it its
   own line at label weight instead of letting it trail off the end of a sentence */
.lesson .callout-go {
  display: block; margin-top: var(--s3);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  text-decoration: none;
}
.lesson .callout-go:hover { color: var(--accent-deep); text-decoration: underline; }

/* ── the rail ────────────────────────────────────────────────────────────── */
.lesson-rail {
  position: sticky; top: calc(var(--header-h) + var(--s4));
  font-size: var(--fs-ui);
  border-left: 1px solid var(--rule-ink);
  padding-left: var(--s4);
}
/* the denominator sits on the same line as the figure — a rank without its field
   size, or stacked under it as a stray label, is exactly what BRIEF §3.5 forbids */
.rail-pos {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem;
  margin: 0; max-width: none;
}
.rail-n {
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.012em;
  font-variant-numeric: tabular-nums lining-nums;
}
.rail-of {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-4);
  font-variant-numeric: tabular-nums lining-nums;
}
/* reading-position block — the shared rank device (§2.9), reused for sequence
   position. Sizes are trimmed to the rail; the component itself is not restated. */
.rail-pos-block { margin: 0 0 var(--s2); }
.lesson .rail-pos-block .rank-bar { margin-top: var(--s2); }
.lesson .rail-pos-block .rank-scale { font-size: .68rem; margin-top: .45rem; }
.lesson .rail-h {
  font-family: var(--font-text); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
  margin: var(--s5) 0 var(--s2); padding: 0; border: none;
}
.lesson .rail-toc, .lesson .rail-tier { list-style: none; margin: 0; padding: 0; }
.lesson .rail-toc { counter-reset: rail; }
.lesson .rail-toc li, .lesson .rail-tier li {
  margin: 0; padding: .34rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .855rem; line-height: 1.4; color: var(--ink-3);
}
.lesson .rail-toc li {
  position: relative; padding-left: 1.6rem;
  counter-increment: rail;
}
.lesson .rail-toc li::before {
  content: counter(rail, decimal-leading-zero);
  position: absolute; left: 0; top: .4rem;
  /* an ordinal the list order already carries — a marker, not an accent */
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  color: var(--ink-4); font-variant-numeric: tabular-nums lining-nums;
}
.lesson .rail-toc a, .lesson .rail-tier a { display: block; color: var(--ink-2); text-decoration: none; }
.lesson .rail-toc a:hover, .lesson .rail-tier a:hover { color: var(--accent-deep); text-decoration: none; }
.lesson .rail-tier .is-here {
  color: var(--ink); font-weight: 600;
  margin-left: -.55rem; padding-left: .55rem;
  box-shadow: inset 2px 0 0 var(--accent);
}
.rail-all {
  display: inline-block; margin-top: var(--s3);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}

/* ── "continue reading": two plates, not two bare links ─────────────────────
   Each cell names the direction, the destination lesson's tier and its title at
   reading size. A grid (not flex) so the two cells are always equal and a long
   title can never overrun its neighbour — the collision that produced
   "HOW A IQRIUS PSED FEDWARD BANDS" at 390px. */
.lesson .next-prev {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s8); padding-top: 0; border-top: none;
}
.lesson .next-prev a {
  display: flex; flex-direction: column; gap: .2rem;
  min-width: 0; min-height: 44px;
  padding: var(--s3) var(--s4);
  background: var(--paper-2);
  border: 1px solid var(--rule); border-top: 2px solid var(--rule-2);
  border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--motion-base) ease, background var(--motion-fast) ease;
}
.lesson .next-prev a:hover {
  border-top-color: var(--accent); background: var(--paper-3); text-decoration: none;
}
.lesson .next-prev .lbl {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
}
.lesson .next-prev .np-tier {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.lesson .next-prev .np-title {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -.012em; line-height: 1.3;
  overflow-wrap: anywhere;
}
.lesson .next-prev .np-next { text-align: right; align-items: flex-end; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  /* the rail is navigation only — no figure or claim lives in it — so it
     collapses above the prose rather than being dropped */
  /* `align-items: start` on the base rule means the cross axis is HORIZONTAL once
     this becomes a column flex container, which sizes .lesson-main to max-content —
     a 400px <pre> then dragged the whole document to scrollWidth 454 at a 390
     viewport (BRIEF H2). Stretch both children and cap them at the container. */
  .lesson-cols { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .lesson-main, .lesson-rail { width: 100%; max-width: 100%; min-width: 0; }
  .lesson-rail {
    order: -1; position: static;
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule);
    padding: var(--s4) 0; margin-bottom: var(--s6);
  }
  .rail-pos { flex-direction: row; align-items: baseline; gap: .45rem; }
  .lesson .rail-h { margin-top: var(--s4); }
  .lesson .rail-toc, .lesson .rail-tier { display: flex; flex-wrap: wrap; gap: .4rem; }
  .lesson .rail-toc li, .lesson .rail-tier li { border-bottom: none; padding: 0; }
  .lesson .rail-toc li { padding-left: 0; }
  .lesson .rail-toc li::before { display: none; }
  .lesson .rail-toc a, .lesson .rail-tier a, .lesson .rail-tier .is-here {
    display: inline-block; padding: .34rem .6rem;
    border: 1px solid var(--rule-2); border-radius: 2px;
    background: var(--paper-2); font-size: .8rem; line-height: 1.35;
  }
  .lesson .rail-tier .is-here {
    margin-left: 0; box-shadow: none;
    background: var(--accent-tint); border-color: var(--accent-hair); color: var(--accent-deep);
  }
  /* Two destinations must not wear one affordance: an "on this page" chip jumps
     within the article, a tier chip leaves it. The in-page chips drop the plate
     and become underlined text so the bordered plate reads as "another page". */
  .lesson .rail-toc a {
    border: none; background: none; padding: .34rem 0; margin-right: .9rem;
    color: var(--ink-2);
    text-decoration: underline; text-decoration-color: var(--accent-hair);
    text-underline-offset: 3px;
  }
  .lesson .rail-toc a:hover { color: var(--accent-deep); text-decoration-color: var(--accent); }
  .lesson .rail-toc { gap: 0 .2rem; }

  .tier-sec .tier-grid.cols-3, .tier-sec .tier-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .learn-open { grid-template-columns: 1fr; gap: var(--s4); }
  .learn-why { padding-left: 0; border-left: none; padding-top: var(--s3); border-top: 1px solid var(--rule); }
}

@media (max-width: 640px) {
  /* two plates side by side stop being real tap targets below this */
  .lesson .next-prev { grid-template-columns: 1fr; gap: var(--s3); }
  .lesson .next-prev .np-next { text-align: left; align-items: flex-start; }
}

@media (max-width: 760px) {
  .lesson .figure-plate { padding-left: var(--s4); padding-right: var(--s4); }
  /* the affordance for the framed schematics, stated in words like §2.6.3's */
  .figscroll-hint {
    display: block; margin-bottom: var(--s2);
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
  }
  /* Two rows, placed explicitly. Auto-placement sent the full-width `.ll-what` to
     row 2 and then pushed `.ll-go` onto a row of its own — an arrow orphaned under
     the description, reading as a third item rather than as the row's affordance.
     Pinning both keeps the arrow inline at the end of the name row. */
  .learn-live a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); padding: var(--s4) 0; }
  .ll-name { grid-column: 1; grid-row: 1; }
  .ll-go { grid-column: 2; grid-row: 1; justify-self: end; }
  .ll-what { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 560px) {
  .tier-sec .tier-grid.cols-3, .tier-sec .tier-grid.cols-4 { grid-template-columns: 1fr; }
  .learn-index-list { grid-template-columns: 1fr; }
}