/* Learn pages only: the manual's sidebar, pager, module cards and figures.
   Daylight tokens from /styles.css; nothing here invents a colour or a font.
   Lives under site/learn/ so the sitewide stylesheet stays untouched (I5). */

/* ── layout: sticky module sidebar on desktop, single column below ── */
.learn-layout{max-width:var(--d-container);margin:0 auto;padding-inline:var(--d-gutter);display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1020px){.learn-layout{grid-template-columns:236px minmax(0,1fr);gap:var(--s-14)}}
.learn-side{display:none}
@media (min-width:1020px){.learn-side{display:block;position:sticky;top:92px;align-self:start;padding-block:var(--s-10)}}
.learn-side .label{margin-bottom:var(--s-4)}
.learn-nav{display:grid;gap:var(--s-1)}
.learn-nav a{display:flex;gap:10px;padding:9px 12px;border-radius:var(--d-radius-sm);border:1.5px solid transparent;text-decoration:none;color:var(--d-ink-2);font-size:var(--d-fs-sm);font-weight:500;line-height:1.35}
.learn-nav a:hover{background:var(--d-cream-deep);color:var(--d-ink)}
.learn-nav a[aria-current="page"]{background:var(--d-butter);border:var(--d-border);color:var(--d-ink);font-weight:600}
.learn-nav .num{flex:none;font-family:var(--d-font-display);font-weight:700;color:var(--d-ink);min-width:14px}
.learn-note{margin-top:var(--s-5);font-size:var(--d-fs-cap);color:var(--d-muted);line-height:1.5}

/* ── previous / next, named like the pages they lead to ── */
.pager{display:grid;gap:var(--s-4);margin-top:var(--s-14);padding-top:var(--s-8);border-top:1px solid var(--d-line)}
@media (min-width:640px){.pager{grid-template-columns:1fr 1fr}.pager .next:only-child{grid-column:2}}
.pager a{display:block;background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius);box-shadow:var(--d-shadow-sm);padding:var(--s-4) var(--s-5);text-decoration:none;transition:transform var(--d-dur) var(--d-ease),box-shadow var(--d-dur) var(--d-ease)}
.pager a:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--d-ink)}
.pager .label{display:inline-flex;margin-bottom:var(--s-1)}
.pager .pager-title{display:block;font-family:var(--d-font-display);font-weight:700;font-size:17px;line-height:1.3;color:var(--d-ink);letter-spacing:-.01em}
.pager .next{text-align:right}

/* ── module cards on the shell ── */
.module-list{display:grid;gap:var(--s-5);margin-top:var(--s-8)}
.module-card{display:block;background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius);box-shadow:var(--d-shadow);padding:var(--s-6);text-decoration:none;transition:transform var(--d-dur) var(--d-ease),box-shadow var(--d-dur) var(--d-ease)}
.module-card:hover{transform:translate(1px,1px);box-shadow:var(--d-shadow-hover)}
.module-card .card-top{display:flex;align-items:center;gap:var(--s-4)}
.module-card .label{display:inline-flex}
.module-card .h3{display:block;margin-top:var(--s-3)}
.module-card p{margin-top:var(--s-3);color:var(--d-ink-2)}

/* ── copyable artefacts: terms clauses, outreach messages, scripts ── */
.copy-block{margin-top:var(--s-5);background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius);padding:var(--s-5) var(--s-6);box-shadow:var(--d-shadow-sm)}
.copy-block .label{margin-bottom:var(--s-2)}
.copy-block p{margin-top:var(--s-3)}
.copy-block .label+p{margin-top:0}

/* ── figures in the reading column ── */
.reading .ph{margin-top:var(--s-6)}
.flow-fig{margin-top:var(--s-6);background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius);box-shadow:var(--d-shadow);padding:var(--s-5)}
.flow-fig svg{width:100%;height:auto;display:block}
.flow-fig figcaption{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--d-line);font-size:var(--d-fs-cap);color:var(--d-muted)}