/* NTH Bootcamp — shared stylesheet for all module HTMLs + the landing pages.
 * Hand-authored. Loaded by:
 *   modules/M1..M5*.html, modules/index.html → <link href="_shared.css">
 *   bootcamp-plan.html                         → <link href="modules/_shared.css">
 * After this loads, each page's inline <style> only carries page-specific
 * widget rules (.lab, .paintlab, .canvas-row, etc.).
 *
 * Source of canonical values: this stylesheet IS the source of truth for the
 * tokens below. If you change a token here, change the matching declarations
 * in build/_build_bootcamp.py too (that script still emits some inline CSS
 * for the plan page + M3). See dev-plans/POLISH_PLAN.md for context.
 */

:root{
  --ink:        #1c1c1a;
  --ink-2:      #3a3a36;
  --muted:      #6c6c66;
  --muted-2:    #9a9a93;
  --rule:       #d8d6cf;
  --rule-2:     #ebe9e2;
  --paper:      #ffffff;
  --paper-2:    #f8f8f6;
  --accent:     #d86f91;
  --accent-2:   #a83f63;
  --accent-wash:#fde7ef;
  --danger:     #8a3a1d;
  --code-bg:    #f7f7f4;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:16px;line-height:1.55}
::selection{background:var(--accent-wash);color:var(--ink)}

.page{max-width:1180px;margin:0 auto;padding:48px 36px 100px}
.col{max-width:720px}

header.masthead{border-bottom:1px solid var(--rule);padding-bottom:28px;margin-bottom:32px}
header.masthead .eyebrow{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
header.masthead h1{font-size:34px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;margin:12px 0 14px}
header.masthead p.lede{color:var(--ink-2);font-size:16px;max-width:760px;margin:0}
header.masthead .meta{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace}
header.masthead .meta strong{color:var(--ink);font-weight:600}

h2{font-size:22px;font-weight:600;letter-spacing:-0.01em;margin:52px 0 12px;color:var(--ink)}
h2 .num{color:var(--muted-2);font-variant-numeric:tabular-nums;margin-right:12px;font-weight:500}
h3{font-size:13px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);margin:24px 0 8px}
p{margin:0 0 12px;color:var(--ink-2)}
p.kicker{color:var(--ink);font-size:16px;margin-bottom:14px}
a{color:var(--accent-2);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}
code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:0.92em}
code{background:var(--code-bg);padding:1px 5px;border-radius:3px;color:var(--ink)}
hr.div{border:0;border-top:1px solid var(--rule);margin:48px 0}
ul.tight{margin:8px 0;padding-left:22px}
ul.tight li{margin:3px 0;color:var(--ink-2)}

/* Table of contents */
nav.toc{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:16px 0;margin-bottom:36px}
nav.toc a{padding:4px 18px 4px 0;border:0;font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--muted);text-decoration:none;display:flex;gap:8px;align-items:baseline}
nav.toc a:hover{color:var(--accent)}
nav.toc a .n{color:var(--muted-2);font-variant-numeric:tabular-nums}

/* Callouts */
aside.callout{border-left:3px solid var(--accent);background:var(--paper-2);
  padding:14px 18px;margin:22px 0;font-size:14.5px;color:var(--ink-2);
  border-radius:0 4px 4px 0;max-width:820px}
aside.callout strong{color:var(--ink)}
aside.warn{border-left-color:var(--danger);background:#faf2ee}
aside.warn strong{color:var(--danger)}
aside.todo{border-left-color:var(--muted-2);background:#fff}
aside.todo strong{color:var(--ink)}
aside.disclaimer{border-left:3px solid #c89a3a;background:#fbf3df;
  padding:12px 16px;margin:0 0 24px;font-size:13.5px;color:#5a4513;
  border-radius:0 4px 4px 0;max-width:820px;line-height:1.5}
aside.disclaimer strong{color:#3a2c0d}
aside.disclaimer .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:0.08em;color:#8a6a1c;
  display:inline-block;margin-right:8px;font-weight:600}

/* Pipeline strip */
.pipeline{display:flex;align-items:stretch;gap:0;margin:14px 0 28px;flex-wrap:wrap;max-width:920px}
.pipeline .step{flex:1 1 0;min-width:120px;background:#fff;border:1px solid var(--rule);
  padding:12px 14px;border-radius:5px;font-size:13px;color:var(--ink-2);position:relative}
.pipeline .step .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.pipeline .step .name{color:var(--ink);font-weight:600;margin-top:2px}
.pipeline .arr{display:flex;align-items:center;justify-content:center;width:20px;color:var(--muted-2);font-family:'JetBrains Mono',monospace}
.pipeline .step.active{border-color:var(--accent);background:var(--accent-wash)}
.pipeline .step.active .lbl{color:var(--accent-2)}
a.step{text-decoration:none;color:inherit;transition:border-color .15s}
a.step:hover{border-color:var(--accent)}
a.step:hover .name{color:var(--accent)}

/* Module-nav (prev / next bars) */
.module-nav{display:flex;gap:12px;margin:0 0 22px;flex-wrap:wrap}
.module-nav a{display:flex;flex-direction:column;gap:2px;padding:10px 16px;
  border:1px solid var(--rule);border-radius:6px;background:#fff;text-decoration:none;
  font-family:'JetBrains Mono',monospace;transition:border-color .15s}
.module-nav a:hover{border-color:var(--accent)}
.module-nav .mn-dir{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2)}
.module-nav .mn-name{font-size:13px;color:var(--ink)}
.module-nav a:hover .mn-name{color:var(--accent)}
.module-nav .mn-next{margin-left:auto;text-align:right}

/* Tools & references block — flat <ul> list style used by M1, M2, M3, M5.
 * M4 references use <ol> with its own scaling; M4 overrides these rules in
 * its inline <style>. The shared `.refs ul li` selector is scoped to the
 * unordered-list variant so the ordered-list variant stays clean. */
.refs{margin-top:40px;font-size:13px}
.refs h2{font-size:15px;margin-bottom:8px}
.refs ul{list-style:none;padding:0;margin:0}
.refs ul li{padding:6px 0;border-bottom:1px solid var(--rule-2);line-height:1.5}
.refs ul li:last-child{border-bottom:none}
.refs .rk{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}

/* Self-check prompts (chevron idiom) */
details.prompt{background:#fff;border:1px solid var(--rule);border-radius:5px;
  padding:10px 14px 10px 14px;margin:8px 0;max-width:820px}
details.prompt summary{cursor:pointer;font-weight:500;color:var(--ink);
  font-size:14px;line-height:1.45;list-style:none;
  display:flex;align-items:flex-start;gap:10px}
details.prompt summary::-webkit-details-marker{display:none}
details.prompt summary::marker{content:''}
details.prompt summary::before{
  content:'';flex:0 0 auto;display:inline-block;
  width:0;height:0;
  margin-top:6px;
  border-style:solid;
  border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent var(--muted-2);
  transition:transform 0.15s ease, border-left-color 0.15s ease;
  transform-origin:2px center;
}
details.prompt[open] summary::before{
  transform:rotate(90deg);
  border-left-color:var(--accent);
}
details.prompt summary:hover::before{border-left-color:var(--accent)}
details.prompt p{margin:8px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
details.prompt code{font-family:'JetBrains Mono',monospace;background:var(--code-bg);
  padding:1px 5px;border-radius:3px;font-size:0.92em;color:var(--ink)}

/* Footer */
footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace}
footer a{color:var(--muted);border-bottom:1px solid var(--rule-2);text-decoration:none}
footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}