/* anacreon.dev/learn: the explainer.
   Loaded after site.css and uses only its tokens. Every page reads plain
   first and goes deeper as you scroll; the deepest rules sit in <details>
   folds so a reader opens only what they want. Diagrams are inline SVG drawn
   with the classes below (never hard-coded colours), so both themes hold. */

.learn-page .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.learn-page .hero h1 { font-size: var(--step-3); max-width: 22ch; }
.learn-page .hero .lede { max-width: 42rem; }
.crumbs { font: 500 0.8rem/1.3 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin-bottom: 1.25rem; }
.crumbs a { color: var(--muted); }
.crumbs a + span::before, .crumbs a + a::before { content: "/"; margin-right: 0.5rem; color: var(--rule); }

/* Body: the depth rail beside the reading column. */
.learn-body { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 2rem 3.5rem; padding-block: 1rem 4rem; }
.learn-body > * { min-width: 0; }
.rail { position: sticky; top: 1rem; align-self: start; font: 500 0.9rem/1.35 var(--display); }
.rail .label { display: block; margin-bottom: 0.75rem; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; border-left: 2px solid var(--rule); }
.rail li a { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); padding: 0.4rem 0 0.4rem 0.75rem; color: var(--ink); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.rail li a:hover { color: var(--accent); }
.rail li a[aria-current="page"] { border-left-color: var(--accent); color: var(--accent); }
.rail .lv { font: 500 0.72rem/1.6 var(--mono); color: var(--muted); }
.rail .sub { margin-top: 1.25rem; display: grid; gap: 0.4rem; font-size: 0.85rem; }
.rail .sub a { color: var(--muted); }

.content { display: grid; gap: 3.25rem; max-width: 48rem; }
.content section { display: grid; gap: 1rem; scroll-margin-top: 1rem; }
.content h2 { font-size: var(--step-2); font-weight: 800; }
.content h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 0.5rem; }
.content p, .content li { max-width: var(--measure); }
.content ul, .content ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.content code { font: 400 0.88em/1 var(--mono); background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 0.05em 0.3em; overflow-wrap: anywhere; }
.content .record h2 { font: 700 1.15rem/1.3 var(--display); letter-spacing: -0.01em; margin-top: 0.9rem; max-width: 34ch; }
.content .record dl { display: grid; }
.kicker { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }

/* "In one line": the shallowest read of every page. */
.inshort { border-left: 3px solid var(--ink); padding: 0.25rem 0 0.25rem 1.1rem; font: 400 var(--step-1)/1.5 var(--body); max-width: 42rem; }
.inshort b { font-family: var(--display); }

/* The deepest level: folded until asked for. */
details.deeper { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
details.deeper > summary { cursor: pointer; padding: 0.8rem 1rem; font: 700 1rem/1.3 var(--display); list-style: none; display: flex; gap: 0.6rem; align-items: baseline; }
details.deeper > summary::-webkit-details-marker { display: none; }
details.deeper > summary::before { content: "+"; font: 500 1rem/1 var(--mono); color: var(--accent); width: 1ch; }
details.deeper[open] > summary::before { content: "−"; }
details.deeper > summary .label, details.deeper > summary .pill { margin-left: auto; }
details.deeper > .fold { padding: 0 1rem 1.1rem 2.1rem; display: grid; gap: 0.8rem; }

/* Tables: one wrapper scrolls sideways on a phone; the page never does. */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: 0.95rem; line-height: 1.45; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--rule); }
table.data tr:last-child td { border-bottom: 0; }
table.data th { font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
table.data td:first-child { font-family: var(--display); font-weight: 600; }
table.data .pill { white-space: nowrap; }
table.data td.yes { color: var(--accent); font-family: var(--display); font-weight: 600; }
table.data td.no { color: var(--muted); }
table.data.wide { min-width: 36rem; }

.pill.building { color: var(--accent); border-style: dashed; }
.pill.person { color: var(--seal); }

/* Figures: diagrams and charts. A wide diagram scrolls inside its frame. */
figure.diagram { margin: 0; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); padding: 1.1rem; display: grid; gap: 0.8rem; }
figure.diagram .scroll { overflow-x: auto; }
figure.diagram svg { display: block; width: 100%; height: auto; }
figure.diagram .scroll svg { min-width: 34rem; }
figure.diagram figcaption { font-size: var(--step--1); color: var(--muted); max-width: var(--measure); }
figure.diagram figcaption b { color: var(--ink); font-family: var(--display); }

svg .d-box { fill: var(--paper); stroke: var(--rule); stroke-width: 1.2; }
svg .d-box-ink { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
svg .d-box-accent { fill: var(--paper); stroke: var(--accent); stroke-width: 1.6; }
svg .d-box-seal { fill: var(--seal-wash); stroke: var(--seal); stroke-width: 1.8; }
svg .d-box-dash { fill: none; stroke: var(--rule); stroke-width: 1.2; stroke-dasharray: 4 4; }
svg .d-fill-accent { fill: var(--accent); }
svg .d-fill-seal { fill: var(--seal); }
svg .d-fill-muted { fill: var(--rule); }
svg .d-line { fill: none; stroke: var(--muted); stroke-width: 1.4; }
svg .d-line-accent { fill: none; stroke: var(--accent); stroke-width: 1.6; }
svg .d-line-seal { fill: none; stroke: var(--seal); stroke-width: 1.6; }
svg .d-line-dash { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 5 4; }
svg .d-grid { fill: none; stroke: var(--rule); stroke-width: 1; }
svg .d-head { fill: var(--muted); }
svg .d-head-accent { fill: var(--accent); }
svg .d-head-seal { fill: var(--seal); }
svg text { font-family: var(--display); font-size: 14px; fill: var(--ink); }
svg .t-bold { font-weight: 700; }
svg .t-small { font-size: 12px; fill: var(--muted); }
svg .t-mono { font-family: var(--mono); font-size: 11.5px; fill: var(--muted); }
svg .t-accent { fill: var(--accent); }
svg .t-seal { fill: var(--seal); font-weight: 700; }
svg .t-mid { text-anchor: middle; }
svg .t-end { text-anchor: end; }

/* A flow of steps that reflows: across on a wide screen, down on a phone. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 0.6rem; display: grid; gap: 0.3rem; align-content: start; max-width: none; }
.steps li::before { content: counter(s); font: 500 0.75rem/1 var(--mono); color: var(--muted); }
.steps li b { font-family: var(--display); }
.steps li span { font-size: 0.92rem; color: var(--muted); }
.steps li.person { border-top-color: var(--seal); }
.steps li.person b { color: var(--seal); }

/* Cards: the ladder on the start page, and the benefit tiles. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.card { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); padding: 1.1rem 1.1rem 1.2rem; display: grid; gap: 0.5rem; align-content: start; color: var(--ink); text-decoration: none; }
a.card:hover { border-color: var(--accent); }
a.card:hover h3 { color: var(--accent); }
.card h3 { margin: 0; font-size: 1.1rem; }
.card p { font-size: 0.97rem; }
.card .go { font: 700 0.9rem/1.2 var(--display); color: var(--accent); }
.card.lead { border-color: var(--ink); border-width: 2px; }

/* The depth ladder: each rung goes one level further. */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.ladder > li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); max-width: none; }
.ladder .lv { font: 500 0.78rem/1.5 var(--mono); color: var(--muted); }
.ladder h3 { margin: 0 0 0.3rem; }
.ladder .links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.5rem; font: 600 0.95rem/1.3 var(--display); }

/* Glossary. */
.alpha { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; font: 500 0.9rem/1.2 var(--mono); }
dl.glossary { margin: 0; display: grid; gap: 0; }
dl.glossary > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.35rem 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 1rem; }
dl.glossary dt { font: 700 1.02rem/1.35 var(--display); }
dl.glossary dd { margin: 0; max-width: var(--measure); }
dl.glossary dd .see { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--muted); }
h3.letter { font: 800 var(--step-2)/1 var(--display); color: var(--muted); padding: 1.25rem 0 0.5rem; margin: 0; border-bottom: 2px solid var(--ink); scroll-margin-top: 1rem; }

/* Next and previous, at the foot of each page. */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.pager a { display: grid; gap: 0.25rem; text-decoration: none; font: 700 1.05rem/1.3 var(--display); }
.pager a .label { font-weight: 500; }
.pager .next { text-align: right; grid-column: 2; }

.callout { border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; background: var(--surface); padding: 0.9rem 1.1rem; display: grid; gap: 0.5rem; }
.callout.person { border-left-color: var(--seal); }
.callout .label { color: var(--accent); }
.callout.person .label { color: var(--seal); }
.example-note { font-size: var(--step--1); color: var(--muted); font-style: italic; }

/* Home page teaser into the explainer. */
.learn-teaser { margin-top: 2.5rem; }

@media (max-width: 860px) {
  .learn-body { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .rail { position: static; border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }
  .rail ol { border-left: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .rail li a { display: inline-block; padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: 4px; margin: 0; }
  .rail li a[aria-current="page"] { border-color: var(--accent); }
  .rail .lv { display: none; }
  .rail .sub { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.75rem; }
  dl.glossary > div { grid-template-columns: minmax(0, 1fr); }
  .ladder > li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { grid-column: 1; text-align: left; }
}