/* LowOps Learn — the web edition of the in-app ground courses.
   ---------------------------------------------------------------------------
   Built on the site's theme.css / chrome.css tokens: no colour is hardcoded
   here except the callout levels, which carry meaning (note / caution /
   warning) and so have their own small ramp, light and dark.

   Layout: a reading column (~68ch) beside a sticky chapter index on wide
   screens; the index folds into a <details> above the column on phones.
   Quick vs In-depth is one attribute on <body>: [data-mode="quick"] hides
   every .deep card. The site is light-first (theme.css): dark values apply only
   under an explicit html[data-theme="dark"], exactly as theme.css does. */

:root {
  --learn-col: 68ch;
  --learn-side: 280px;
  --note-bg: #eef4ff;      --note-edge: #0071e3;
  --caution-bg: #fff6e5;   --caution-edge: #b25e00;
  --warning-bg: #fff0ec;   --warning-edge: #c62d0b;
  --good: #10733f;         --bad: #c62d0b;
}
:root[data-theme="dark"] {
  --note-bg: rgba(10,132,255,.12);  --note-edge: #4aa3ff;
  --caution-bg: rgba(255,159,10,.12); --caution-edge: #ffb340;
  --warning-bg: rgba(255,69,58,.12);  --warning-edge: #ff6b5e;
  --good: #32d27a; --bad: #ff6b5e;
}

.learn { background: var(--bg); color: var(--txt); }
.learn main { padding-inline: 22px; padding-block: 104px 80px; }
/* build_chrome.py gives every stamped page body.chrome-pad (82px) for the fixed pill; the 104px
   above already clears it, so take that back here and the top lands in the same place either way. */
.learn.chrome-pad main { padding-block-start: 22px; }
.learn .shell { max-width: calc(var(--learn-col) + var(--learn-side) + 64px); margin-inline: auto; }

/* ── Course header ─────────────────────────────────────────────────────── */
.course-head { max-width: 860px; margin-inline: auto; text-align: center; display: grid; gap: 14px; padding-block: 24px 40px; }
.course-head .eyebrow { color: var(--accent-text); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.course-head h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.course-head p.lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--txt-dim); text-wrap: balance; }
.course-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 15px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.course-stats b { color: var(--txt); font-weight: 600; }

.draft-note { max-width: 860px; margin: 0 auto 40px; padding: 14px 18px; border-radius: 14px;
  background: var(--caution-bg); border-left: 4px solid var(--caution-edge); font-size: 15px; }

/* ── Mode switch ───────────────────────────────────────────────────────── */
.mode { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--line); }
.mode button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: transparent; color: var(--txt-dim);
  padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.mode button[aria-pressed="true"] { background: var(--bg); color: var(--txt); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Course map (overview page) ───────────────────────────────────────── */
.parts { max-width: 980px; margin-inline: auto; display: grid; gap: 44px; }
.part h2 { font-size: 26px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.part h2 .num { color: var(--accent-text); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; }
.part > p { color: var(--txt-dim); margin-block: 4px 16px; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; list-style: none; }
.chapters a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg); color: inherit; transition: border-color .15s, transform .15s; }
.chapters a:hover { border-color: var(--accent); transform: translateY(-1px); }
.chapters a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chapters .t { font-weight: 600; font-size: 17px; line-height: 1.25; }
.chapters .s { color: var(--txt-dim); font-size: 14px; line-height: 1.35; }
.chapters .m { font-size: 13px; color: var(--txt-dim); font-variant-numeric: tabular-nums; display: flex; gap: 10px; margin-top: 6px; }
.chapters .done .m::after { content: "Read"; color: var(--good); font-weight: 600; }

/* ── Chapter page layout ──────────────────────────────────────────────── */
.chapter-grid { display: grid; grid-template-columns: var(--learn-side) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 960px) { .chapter-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); max-height: calc(100vh - 120px); overflow: auto;
  font-size: 14px; padding-right: 6px; }
.toc summary { display: none; }
.toc .toc-part { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-dim); margin: 16px 0 6px; }
.toc ol { list-style: none; display: grid; gap: 2px; }
.toc a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--txt); line-height: 1.3; }
.toc a:hover { background: var(--bg-tint); }
.toc a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
@media (max-width: 960px) {
  .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; }
  .toc summary { display: list-item; cursor: pointer; padding: 10px 0; font-weight: 600; }
}

.chapter { max-width: var(--learn-col); min-width: 0; display: grid; gap: 28px; }
.chapter-head { display: grid; gap: 10px; }
.chapter-head .crumb { font-size: 14px; color: var(--txt-dim); }
.chapter-head .crumb a { color: var(--accent-text); }
.chapter-head h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.chapter-head .sub { font-size: 19px; color: var(--txt-dim); text-wrap: balance; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px;
  background: var(--caution-bg); color: var(--caution-edge); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card-b { display: grid; gap: 12px; scroll-margin-top: 100px; }
.card-b h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.card-b p, .card-b li { font-size: 17px; line-height: 1.6; color: var(--txt-body); }
.card-b ul { padding-left: 1.2em; display: grid; gap: 6px; }
.card-b strong { font-weight: 600; }
.deep-tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
body[data-mode="quick"] .deep { display: none; }

.essentials { padding: 20px 22px; border-radius: 18px; background: var(--bg-tint); }
.essentials h2 { font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); }

.callout { padding: 16px 20px; border-radius: 14px; border-left: 4px solid var(--note-edge); background: var(--note-bg); }
.callout.caution { border-color: var(--caution-edge); background: var(--caution-bg); }
.callout.warning { border-color: var(--warning-edge); background: var(--warning-bg); }
.callout .lvl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.callout.note .lvl { color: var(--note-edge); } .callout.caution .lvl { color: var(--caution-edge); } .callout.warning .lvl { color: var(--warning-edge); }

.story { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); }
.story .lvl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-dim); }
.story .lesson { border-top: 1px solid var(--line); padding-top: 12px; }
.story .lesson b { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; }

.facts-wrap { overflow-x: auto; }
.facts { width: 100%; border-collapse: collapse; font-size: 16px; }
.facts th, .facts td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { font-weight: 500; color: var(--txt-dim); width: 42%; }
.facts td { font-variant-numeric: tabular-nums; }

.figure { padding: 18px 20px; border-radius: 18px; border: 1px dashed var(--line-strong); display: grid; gap: 10px; }
.figure .app { font-size: 13px; font-weight: 600; color: var(--accent-text); }
.figure dl { display: grid; gap: 8px; font-size: 15px; }
.figure dt { font-weight: 600; }

sup.ref a { font-size: 11px; color: var(--accent-text); padding-left: 2px; }
.card-b .refs, .refs { font-size: 13px; line-height: 1.4; color: var(--txt-dim); }
.refs a { color: var(--accent-text); }

/* ── Quiz ──────────────────────────────────────────────────────────────── */
.quiz { padding: 20px 22px; border-radius: 18px; background: var(--bg-tint); display: grid; gap: 12px; }
.quiz .q { font-weight: 600; font-size: 18px; line-height: 1.4; }
.quiz .opts { display: grid; gap: 8px; }
.quiz button.opt { font: inherit; font-size: 16px; text-align: left; padding: 11px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--txt); }
.quiz button.opt:hover:not([disabled]) { border-color: var(--accent); }
.quiz button.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz button.opt[disabled] { cursor: default; }
.quiz button.opt.right { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.quiz button.opt.wrong { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); opacity: .85; }
.quiz .why { font-size: 16px; line-height: 1.55; }
.quiz .why b.ok { color: var(--good); } .quiz .why b.no { color: var(--bad); }

/* ── Chapter foot ──────────────────────────────────────────────────────── */
.sources { font-size: 14px; color: var(--txt-dim); display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 22px; }
.sources h2 { font-size: 15px; color: var(--txt); }
.sources ol { padding-left: 1.4em; display: grid; gap: 6px; }
.sources a { color: var(--accent-text); word-break: break-word; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); color: inherit; min-width: 0; }
.pager a:hover { border-color: var(--accent); }
.pager .dir { font-size: 13px; color: var(--txt-dim); }
.pager .nm { font-weight: 600; }
.pager .next { text-align: right; grid-column: 2; }
.disclaimer { font-size: 13px; color: var(--txt-dim); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .chapters a { transition: none; } .chapters a:hover { transform: none; } }

/* ── Interactive diagrams (assets/diagrams/*.js) — dark ground in both themes, like the app ── */
.dgm-frame { background: #0d1217; color: #fff; border-radius: 18px; overflow: hidden; display: grid; gap: 10px;
  padding-block: 8px 14px; padding-inline: 12px; }
.dgm-frame svg { max-width: 100%; touch-action: none; }
.dgm-caption { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.65); text-align: center; text-wrap: balance; }
.dgm-controls { display: grid; gap: 10px; }
.dgm-controls:empty { display: none; }
.dgm-toggle { display: flex; padding: 3px; border-radius: 10px; background: #1a1f26; gap: 2px; }
.dgm-toggle button { flex: 1 1 0; min-width: 0; font: inherit; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7);
  background: transparent; border: 0; border-radius: 8px; padding: 7px 8px; cursor: pointer; }
.dgm-toggle button[aria-pressed="true"] { background: #3a4048; color: #fff; }
.dgm-toggle button:focus-visible, .dgm-slider input:focus-visible { outline: 2px solid #ffb020; outline-offset: 2px; }
.dgm-slider { display: grid; grid-template-columns: 84px minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.dgm-slider label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); }
.dgm-slider input { width: 100%; accent-color: #ffb020; }
.dgm-slider output { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dgm-fallback { color: rgba(255,255,255,.7); font-size: 14px; padding: 18px; }
.figure .dgm { margin-top: 2px; }
.model3d { position: relative; background: #0d1217; border-radius: 18px; overflow: hidden; }
.model3d canvas { display: block; width: 100%; height: 380px; touch-action: none; }