/* ═══════════════════════════════════════════════════════════════
   LEARN — article + hub styles for the guides section.
   External file by design: the site CSP is style-src 'self'
   (no inline <style> blocks, no style="" attributes anywhere).
   All tokens come from termi.css (:root).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Breadcrumbs ─── */
.crumbs{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px}
.crumbs a{color:var(--t3);transition:color var(--dur)}
.crumbs a:hover{color:var(--t1)}

/* ─── Article header ─── */
.art-h1{font-size:clamp(2.1rem,4.8vw,3.3rem);margin:10px 0 14px}
.art-lede{color:var(--t2);margin:0 0 18px}
.art-meta{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;color:var(--t4);padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:26px}

/* ─── Direct answer (snippet target) ─── */
.answer-box{border:1px solid var(--border);background:var(--bg-c);border-radius:var(--r);padding:18px 22px;margin:0 0 26px}
.answer-box .ab-k{display:block;font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.answer-box p{color:var(--t1);font-size:.98rem;line-height:1.7;margin:0}

/* ─── On this page ─── */
.art-toc{font-family:var(--f-mono);font-size:.78rem;line-height:2.1;color:var(--t3);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;margin-bottom:34px}
.art-toc a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}
.art-toc a:hover{color:var(--t1)}

/* ─── Prose ─── */
.art-prose h2{font-family:var(--f-display);font-weight:500;letter-spacing:.03em;font-size:clamp(1.45rem,2.8vw,2rem);margin:44px 0 14px;color:var(--t1);scroll-margin-top:90px}
.art-prose h3{font-size:1.05rem;font-weight:700;margin:26px 0 10px;color:var(--t1);scroll-margin-top:90px}
.art-prose p{color:var(--t2);font-size:.97rem;line-height:1.78;margin-bottom:15px}
.art-prose ul,.art-prose ol{padding-left:24px;margin:8px 0 18px}
.art-prose li{color:var(--t2);font-size:.96rem;line-height:1.72;margin-bottom:8px}
.art-prose a{color:var(--t1);text-decoration:underline;text-underline-offset:3px}
.art-prose strong{color:var(--t1)}
.art-prose blockquote{border:1px solid var(--border);background:var(--bg-c);border-radius:var(--r);padding:16px 20px;margin:18px 0;color:var(--t2);font-style:italic}
.art-prose blockquote cite{display:block;margin-top:8px;font-style:normal;font-family:var(--f-mono);font-size:.75rem;color:var(--t4)}
.art-prose code{font-family:var(--f-code);font-size:.85em;background:var(--bg-e);border:1px solid var(--border);border-radius:6px;padding:2px 6px;color:var(--t1)}
.art-prose pre{background:var(--bg-c);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin:16px 0 20px;overflow-x:auto}
.art-prose pre code{background:none;border:none;padding:0;font-size:.82rem;line-height:1.7;color:var(--t2);display:block;white-space:pre}

/* ─── Figures ─── */
.art-fig{margin:22px 0 26px}
.art-fig img{width:100%;height:auto;border:1px solid var(--border-h);border-radius:var(--r-lg);display:block}
.art-fig figcaption{font-family:var(--f-mono);font-size:.74rem;color:var(--t4);margin-top:10px;letter-spacing:.03em}
.art-fig-tall{max-width:520px;margin-left:auto;margin-right:auto}

/* ─── Tables ─── */
.tbl-scroll{overflow-x:auto;margin:18px 0 22px;border:1px solid var(--border);border-radius:var(--r)}
.art-tbl{width:100%;border-collapse:collapse;font-size:.85rem;min-width:640px}
.art-tbl th{font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-h);background:var(--bg-c)}
.art-tbl td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--t2);line-height:1.6;vertical-align:top}
.art-tbl tr:last-child td{border-bottom:none}
.art-tbl td strong{color:var(--t1)}

/* ─── In-article CTA ─── */
.art-cta{border:1px solid var(--border-h);border-radius:var(--r-lg);background:var(--bg-s);padding:26px 28px;margin:40px 0;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.art-cta h3{font-family:var(--f-display);font-weight:500;letter-spacing:.03em;font-size:1.15rem;margin-bottom:6px}
.art-cta p{color:var(--t2);font-size:.9rem;line-height:1.6;max-width:520px;margin:0}
.art-cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ─── FAQ heading + related ─── */
.art-faq-h{font-size:clamp(1.45rem,2.8vw,2rem);margin:46px 0 18px;scroll-margin-top:90px}
.art-related{margin:42px 0 8px;padding-top:26px;border-top:1px solid var(--border)}
.art-related .t-label{display:block;margin-bottom:14px}
.art-related a{display:inline-block;font-family:var(--f-mono);font-size:.82rem;color:var(--t2);border:1px solid var(--border);border-radius:999px;padding:8px 16px;margin:0 8px 10px 0;transition:all var(--dur)}
.art-related a:hover{color:var(--t1);border-color:var(--border-s);background:var(--accent-m)}

/* ─── Hub (learn.html) ─── */
.learn-head{padding:clamp(40px,6vw,64px) 0 clamp(20px,3vw,30px)}
.learn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(28px,4vw,40px)}
.learn-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-c);padding:24px 26px;display:flex;flex-direction:column;gap:10px;transition:border-color var(--dur),transform var(--dur)}
.learn-card:hover{border-color:var(--border-s);transform:translateY(-2px)}
.learn-card .lc-k{font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.learn-card h2{font-family:var(--f-display);font-weight:500;letter-spacing:.03em;font-size:1.2rem;line-height:1.35;color:var(--t1)}
.learn-card p{color:var(--t2);font-size:.9rem;line-height:1.65;flex:1}
.learn-card .lc-m{font-family:var(--f-mono);font-size:.72rem;color:var(--t4)}

@media (max-width:760px){
  .learn-grid{grid-template-columns:1fr}
  .art-cta{padding:22px}
}