/* Rocket Builder Learn: the home-school rocketry unit at /learn.
   Hand-written; the pages are generated by docs/curriculum/tools/build_site.py.
   Tokens copied from docs/brand/tokens.css (keep in step with it). Theme follows the
   system; <html data-theme="light|dark"> overrides it, as in server/static/index.html. */

/* Self-hosted (OFL, static/fonts/LICENSE-*.txt) */
@font-face { font-family:"Barlow"; src:url(/static/fonts/barlow-400.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url(/static/fonts/barlow-500.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url(/static/fonts/barlow-600.woff2) format("woff2"); font-weight:600 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow Condensed"; src:url(/static/fonts/barlow-condensed-500.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow Condensed"; src:url(/static/fonts/barlow-condensed-600.woff2) format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow Condensed"; src:url(/static/fonts/barlow-condensed-700.woff2) format("woff2"); font-weight:700 900; font-style:normal; font-display:swap; }

:root {
  /* ---- Core (fixed) -------------------------------------------------------- */
  --rb-night:  #1D1A15;  /* ink, text, line drawings, dark backgrounds */
  --rb-paper:  #EFE9DC;  /* page, packaging stock */
  --rb-orange: #E0A93B;  /* launch: the one call to action, the fletching */
  --rb-sky:    #7AB0DE;  /* balance point (CG), links, blueprint lines */
  --rb-red:    #E0573F;  /* push point (CP), warnings, errors */
  --rb-green:  #6FAE68;  /* stable, OK, done */
  --rb-grey:   #6B6355;  /* secondary text (4.5:1 on Paper) */

  /* ---- Night ramp (backgrounds and lines in dark theme, tints in light) ---- */
  --rb-night-950: #15130F;
  --rb-night-900: #1D1A15;
  --rb-night-800: #27231C;
  --rb-night-700: #342F27;
  --rb-night-600: #4A4337;
  --rb-night-400: #7D7466;
  --rb-night-300: #A89F8E;  /* "Mist": secondary text on Night (7.8:1) */
  --rb-night-100: #DDD4C2;
  --rb-night-50:  #F1EDE4;

  /* ---- Paper ramp ---------------------------------------------------------- */
  --rb-paper-white: #FBF8F1; /* fields, cards that need to lift off Paper */
  --rb-paper-200:   #E6DFD0; /* card on Paper */
  --rb-paper-300:   #D9CFBB; /* rules and borders on Paper */
  --rb-paper-400:   #CFC3AB; /* stronger border, disabled */

  /* ---- Signal colours: 700 = text-safe on Paper/white (>= 4.5:1),
          300 = text-safe on Night, 100 = soft fill behind a light-theme message -- */
  --rb-orange-700: #8C600F;  /* web only: #9A6A12 was 4.2:1 on paper */  --rb-orange-300: #F0BB4E;  --rb-orange-100: #F6EAD0;
  --rb-sky-700:    #2F6A9E;  --rb-sky-300:    #A9CBE8;  --rb-sky-100:    #E4EDF5;
  --rb-red-700:    #B83A26;  --rb-red-300:    #F08A6E;  --rb-red-100:    #F8E1D9;
  --rb-green-700:  #3F7A3A;  --rb-green-300:  #8FC98A;  --rb-green-100:  #E3EFD9;
  /* Supporting amber for "check this" (not a core colour; keeps orange meaning "go") */
  --rb-amber-700:  #8A5A00;  --rb-amber-300:  #F0BB4E;  --rb-amber-100:  #FBEFD6;

  /* ---- Type ---------------------------------------------------------------- */
  --rb-font-head: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --rb-font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rb-font-num:  "Barlow Condensed", ui-monospace, monospace; /* add font-variant-numeric: tabular-nums */
  /* Scale: 1.25 (major third) from 16 px. App UI sits at 14 px body. */
  --rb-fs-xs:  0.75rem;   /* 12  labels, legends, part codes */
  --rb-fs-sm:  0.875rem;  /* 14  app body, captions */
  --rb-fs-md:  1rem;      /* 16  print/web body */
  --rb-fs-lg:  1.25rem;   /* 20  section heads */
  --rb-fs-xl:  1.5625rem; /* 25  page heads */
  --rb-fs-2xl: 1.953rem;  /* 31  */
  --rb-fs-3xl: 2.441rem;  /* 39  hero, packaging */
  --rb-fs-4xl: 3.052rem;  /* 49  */
  --rb-lh-tight: 1.1;   /* headings */
  --rb-lh-body:  1.5;
  --rb-track-label: 0.08em; /* UPPERCASE labels, "BY QUIVER DESIGN WORKS" uses 0.15em */

  /* ---- Shape --------------------------------------------------------------- */
  --rb-r-xs: 3px;
  --rb-r-sm: 6px;    /* inputs, small buttons (matches the app today) */
  --rb-r-md: 10px;   /* buttons, cards */
  --rb-r-lg: 16px;   /* panels, dialogs */
  --rb-r-pill: 999px;
  /* Chamfered corners: the Quiver lettering is cut at 45 degrees. Use on part-letter tags,
     step numbers and badges, not on every box. */
  --rb-chamfer: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
                calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);

  /* ---- Line drawing (guides, curriculum, packaging) ----------------------- */
  --rb-stroke-part:   2px;   /* outline of a part (at print size, 0.75 pt) */
  --rb-stroke-detail: 1px;   /* inner edges, threads, shock cord */
  --rb-stroke-hidden: 1px;   /* hidden edges: dashed 4 3 */
  --rb-stroke-arrow:  2px;   /* motion arrows: Orange */
  --rb-space-1: 4px; --rb-space-2: 8px; --rb-space-3: 12px; --rb-space-4: 16px;
  --rb-space-5: 24px; --rb-space-6: 32px; --rb-space-7: 48px;

  /* ---- Motifs (CSS-ready SVG) --------------------------------------------- */
  /* Blueprint grid: 8 px minor, 40 px major. Two versions; the theme picks one below. */
  --rb-grid-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M8.5 0V40M16.5 0V40M24.5 0V40M32.5 0V40M0 8.5H40M0 16.5H40M0 24.5H40M0 32.5H40' stroke='%237AB0DE' stroke-opacity='.13'/%3E%3Cpath d='M.5 0V40M0 .5H40' stroke='%237AB0DE' stroke-opacity='.32'/%3E%3C/svg%3E");
  --rb-grid-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M8.5 0V40M16.5 0V40M24.5 0V40M32.5 0V40M0 8.5H40M0 16.5H40M0 24.5H40M0 32.5H40' stroke='%23EFE9DC' stroke-opacity='.05'/%3E%3Cpath d='M.5 0V40M0 .5H40' stroke='%23EFE9DC' stroke-opacity='.13'/%3E%3C/svg%3E");
  /* Flight arc: a dashed parabola, pad bottom-left, apogee near the right. Stretches to fit
     (preserveAspectRatio none, non-scaling stroke). Colour is baked in, so two versions. */
  --rb-arc-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M2 98Q160 -30 398 30' fill='none' stroke='%231D1A15' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --rb-arc-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M2 98Q160 -30 398 30' fill='none' stroke='%23EFE9DC' stroke-width='2' stroke-dasharray='8 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* Fletching band: orange + ink chevron pairs, 40 px repeat, 24 px tall. */
  --rb-fletch-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 40 48'%3E%3Cpath d='M1 4L17 24L1 44H10L26 24L10 4Z' fill='%23E0A93B'/%3E%3Cpath d='M15 4L31 24L15 44H24L40 24L24 4Z' fill='%231D1A15'/%3E%3C/svg%3E");
  --rb-fletch-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 40 48'%3E%3Cpath d='M1 4L17 24L1 44H10L26 24L10 4Z' fill='%23E0A93B'/%3E%3Cpath d='M15 4L31 24L15 44H24L40 24L24 4Z' fill='%23EFE9DC'/%3E%3C/svg%3E");
}

/* ---- Theme mappings: same names as the app (server/static/index.html) ------- */
:root {
  color-scheme: light;
  --bg: #F4F0E6;                    /* a whisper lighter than Paper, so cards can sit on it */
  --panel: var(--rb-paper-white);
  --card: var(--rb-paper);
  --ink: var(--rb-night);
  --muted: var(--rb-grey);
  --line: var(--rb-paper-300);
  --rowline: var(--rb-paper-200);
  --field: var(--rb-paper-white);
  --accent: var(--rb-amber-700);      /* links, focus rings, selected */
  --accent-ink: #FFFFFF;
  --cta: var(--rb-orange);          /* the launch button: one per screen */
  --cta-ink: var(--rb-night);       /* Night on Orange = 5.2:1; white on Orange fails */
  --cg: var(--rb-sky);              /* balance-point dot */
  --cp: var(--rb-red);              /* push-point dot */
  --ok: var(--rb-green-700);
  --okbg: var(--rb-green-100);
  --warn: var(--rb-amber-700);
  --warnbg: var(--rb-amber-100);
  --err: var(--rb-red-700);
  --errbg: var(--rb-red-100);
  --errline: var(--rb-red-300);
  --view-top: var(--rb-paper);
  --view-bot: var(--rb-paper-200);
  --chip: rgba(251,248,241, .9);
  --grid: var(--rb-grid-paper);
  --arc: var(--rb-arc-night);
  --fletch: var(--rb-fletch-paper);
}
/* Dark by default, like quiverdesignworks.net and fevergeon.com; the header button picks the light look (data-theme="light", remembered in localStorage). */
@media screen {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--rb-night-950); --panel: var(--rb-night); --card: var(--rb-night-800);
    --ink: var(--rb-paper); --muted: var(--rb-night-300); --line: var(--rb-night-700); --rowline: var(--rb-night-800);
    --field: var(--rb-night-800); --accent: var(--rb-orange); --accent-ink: var(--rb-night);
    --cta: var(--rb-orange); --cta-ink: var(--rb-night); --cg: var(--rb-sky); --cp: var(--rb-red);
    --ok: var(--rb-green-300); --okbg: #1F2E1C; --warn: var(--rb-amber-300); --warnbg: #3A2C0E;
    --err: var(--rb-red-300); --errbg: #3A1F17; --errline: #6B3424;
    --view-top: var(--rb-night-800); --view-bot: var(--rb-night-950); --chip: rgba(21,19,15, .9);
    --grid: var(--rb-grid-night); --arc: var(--rb-arc-paper); --fletch: var(--rb-fletch-night);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--rb-night-950); --panel: var(--rb-night); --card: var(--rb-night-800);
  --ink: var(--rb-paper); --muted: var(--rb-night-300); --line: var(--rb-night-700); --rowline: var(--rb-night-800);
  --field: var(--rb-night-800); --accent: var(--rb-orange); --accent-ink: var(--rb-night);
  --cta: var(--rb-orange); --cta-ink: var(--rb-night); --cg: var(--rb-sky); --cp: var(--rb-red);
  --ok: var(--rb-green-300); --okbg: #1F2E1C; --warn: var(--rb-amber-300); --warnbg: #3A2C0E;
  --err: var(--rb-red-300); --errbg: #3A1F17; --errline: #6B3424;
  --view-top: var(--rb-night-800); --view-bot: var(--rb-night-950); --chip: rgba(21,19,15, .9);
  --grid: var(--rb-grid-night); --arc: var(--rb-arc-paper); --fletch: var(--rb-fletch-night);
}

/* Lesson pages ---------------------------------------------------------------- */
:root { --hover: rgba(21,19,15,.06); --callbg-tip: var(--rb-sky-100); --callbg-safety: var(--rb-red-100);
        --tip-ink: var(--rb-sky-700); --safety-ink: var(--rb-red-700); --quote: var(--rb-paper-white); }
@media screen {
  :root:not([data-theme="light"]) { --hover: rgba(239,233,220,.08); --callbg-tip: #2E2614; --callbg-safety: #3A1F17;
    --tip-ink: var(--rb-sky-300); --safety-ink: var(--rb-red-300); --quote: var(--rb-night); }
}
:root[data-theme="dark"] { --hover: rgba(239,233,220,.08); --callbg-tip: #2E2614; --callbg-safety: #3A1F17;
  --tip-ink: var(--rb-sky-300); --safety-ink: var(--rb-red-300); --quote: var(--rb-night); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--rb-font-body); }
a { color: var(--accent); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--panel); padding: 8px 12px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--rb-font-head); line-height: var(--rb-lh-tight); letter-spacing: -.01em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.6rem); margin: .2em 0 .35em; }
h2 { font-size: 1.5rem; margin: 2.2em 0 .6em; padding-top: .6em; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
h3 { font-size: 1.2rem; margin: 1.6em 0 .5em; }
p, ul, ol { margin: 0 0 1em; }
li { margin: .25em 0; }
li > p { margin: 0 0 .4em; }
strong, b { font-weight: 650; }
code { font-size: .9em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .6em 1.1em; min-height: 44px;
       font: 600 .95rem/1.2 var(--rb-font-body); border-radius: var(--rb-r-md); border: 1.5px solid transparent;
       cursor: pointer; text-decoration: none; background: none; color: var(--ink); }
.btn.launch { background: var(--cta); color: var(--cta-ink); box-shadow: inset 0 -3px 0 rgba(21,19,15,.18); }
.btn.launch:hover { filter: brightness(1.05); }
.btn.ink { background: var(--ink); color: var(--bg); }
.btn.outline { border-color: var(--line); }
.btn.outline:hover { border-color: var(--accent); color: var(--accent); }
.btn.print { flex-direction: column; gap: 2px; background: var(--ink); color: var(--bg); font: 700 1.2rem/1.2 var(--rb-font-head);
             padding: .8em 1.4em; border-radius: var(--rb-r-md); }
.btn.print small { font: 500 .8rem/1.2 var(--rb-font-body); opacity: .8; }
.btn.print:hover { filter: brightness(1.15); }
.btn.big { font-size: 1.05rem; padding: .8em 1.3em; }

/* Header */
header.site { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px max(16px, env(safe-area-inset-left));
              background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none;
         font: 700 1.15rem/1 var(--rb-font-head); letter-spacing: -.01em; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand small { font: 600 .72rem/1 var(--rb-font-head); text-transform: uppercase; letter-spacing: var(--rb-track-label);
               color: var(--cta-ink); background: var(--cta); padding: 3px 6px; margin-left: 4px; clip-path: var(--rb-chamfer); vertical-align: 2px; }
header.site nav { display: flex; gap: 2px; margin-right: auto; }
header.site nav a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; padding: 6px 10px; border-radius: 6px; }
header.site nav a:hover { color: var(--ink); background: var(--hover); }
header.site nav a[aria-current] { color: var(--ink); background: var(--hover); }
#theme { padding: 5px 12px; min-height: 34px; font: 500 12px var(--rb-font-body); color: var(--muted); background: none;
         border: 1px solid var(--line); border-radius: var(--rb-r-sm); cursor: pointer; }
#theme:hover { color: var(--ink); background: var(--hover); }
header.site .btn.launch { min-height: 38px; padding: .45em 1em; font-size: .9rem; }
header.site .btn.launch .short { display: none; }
@media (max-width: 640px) { header.site .btn.launch .long { display: none; } header.site .btn.launch .short { display: inline; } }

main { max-width: 74ch; margin: 0 auto; padding: 24px 16px 40px; }
footer.site { border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .9rem;
              padding: 20px 16px 28px; text-align: center; }
footer.site p { max-width: 70ch; margin: 0 auto .6em; }
footer.site .fine { font-size: .8rem; }

/* Tags: chamfered like the Quiver letters */
.tag { display: inline-grid; place-items: center; padding: 0 .55em; height: 1.75em; white-space: nowrap;
       font: 700 .78rem/1 var(--rb-font-head); text-transform: uppercase; letter-spacing: .06em;
       color: var(--rb-paper); background: var(--rb-night); clip-path: var(--rb-chamfer); }
:root[data-theme="dark"] .tag { color: var(--rb-night); background: var(--rb-paper); }
@media screen { :root:not([data-theme="light"]) .tag { color: var(--rb-night); background: var(--rb-paper); } }
.tag.big { font-size: 1rem; height: 2em; padding: 0 .8em; color: var(--rb-night) !important; background: var(--rb-orange) !important; }
.tag.red { background: var(--rb-red-700) !important; color: #fff !important; }  /* white on --rb-red is 3.7:1 */
.star { color: var(--rb-orange); }

/* Lesson */
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.daytag { margin: 0; }
.meta { color: var(--muted); font-size: .98rem; padding: 10px 14px; background: var(--card); border-radius: var(--rb-r-md); border: 1px solid var(--line); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.toc { margin: 10px 0 0; font-size: .95rem; }
.toc summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 6px 0; }
.toc ol { columns: 2; column-gap: 24px; margin: 4px 0 0; padding-left: 1.4em; }
.toc li { margin: .1em 0; break-inside: avoid; }

blockquote.aloud { margin: 0 0 1.2em; padding: 16px 20px 6px; background: var(--quote); border: 1px solid var(--line);
                   border-left: 4px solid var(--rb-orange); border-radius: 0 var(--rb-r-md) var(--rb-r-md) 0; font-size: 1.04rem; }
.lab { display: block; font: 700 .72rem/1 var(--rb-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
blockquote.aloud > .lab { color: var(--rb-orange-700); }
:root[data-theme="dark"] blockquote.aloud > .lab { color: var(--rb-orange-300); }
@media screen { :root:not([data-theme="light"]) blockquote.aloud > .lab { color: var(--rb-orange-300); } }

.call { border-left: 4px solid; padding: 12px 16px 2px; border-radius: 0 var(--rb-r-md) var(--rb-r-md) 0; margin: 0 0 1.2em; break-inside: avoid; }
.call > p:last-child, .call ol:last-child, .call ul:last-child { margin-bottom: .8em; }
.call.tip { background: var(--callbg-tip); border-color: var(--rb-sky); } .call.tip > .lab { color: var(--tip-ink); }
.call.safety { background: var(--callbg-safety); border-color: var(--rb-red); } .call.safety > .lab { color: var(--safety-ink); }
section.call.rules { padding-top: 2px; margin-top: 2em; }
section.call.rules h2 { border-top: 0; margin-top: .6em; padding-top: 0; color: var(--safety-ink); }

details.answers { margin: 0 0 1.2em; border: 1px solid var(--line); border-radius: var(--rb-r-md); background: var(--card); }
details.answers summary { cursor: pointer; padding: 10px 14px; font: 600 1rem var(--rb-font-head); min-height: 44px; }
details.answers ol { padding: 0 16px 6px 2.4em; }
.trk { padding: 10px 14px; border-radius: var(--rb-r-md); border: 1px solid var(--line); border-left: 4px solid var(--rb-sky); background: var(--card); }
.trk-print { border-left-color: var(--rb-orange); }

.tbl { overflow-x: auto; margin: 0 0 1.2em; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font: 600 .82rem/1.3 var(--rb-font-head); color: var(--muted); background: var(--card); }
td:first-child { white-space: nowrap; }

.prevnext { max-width: 74ch; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 36px 0 12px; }
.pn { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--rb-r-md); background: var(--panel);
      color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.35; }
.pn:hover { border-color: var(--accent); }
.pn .tag { margin-right: 4px; vertical-align: 1px; }
.pn.next { text-align: right; }
.back { font-size: .95rem; }

/* Overview */
.hero { padding: 8px 0 4px; }
.eyebrow { font: 600 .78rem/1.2 var(--rb-font-head); text-transform: uppercase; letter-spacing: var(--rb-track-label); color: var(--muted); margin: 0; }
.hero h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3rem); }
.lead { font-size: 1.15rem; }
.tracks { padding-left: 1.2em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 20px 0 14px; }
.small { font-size: .92rem; color: var(--muted); }
.days { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 10px; }
.days li { margin: 0; }
.days a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px; border: 1px solid var(--line);
          border-radius: var(--rb-r-md); background: var(--panel); color: var(--ink); text-decoration: none; }
.days a:hover { border-color: var(--accent); }
.days .tag { align-self: flex-start; }
.days b { font: 700 1.02rem/1.25 var(--rb-font-head); }
.days .hands { font-size: .88rem; color: var(--muted); line-height: 1.4; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--rb-r-lg); padding: 14px 16px 2px; }
.card h3 { margin: .5em 0 .35em; }
details.std summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--accent); }
details.std h3 { font-size: 1.05rem; }

@media (max-width: 640px) {
  body { font-size: 1rem; }
  header.site { gap: 4px 10px; padding: 8px 16px 4px; }
  header.site .brand { margin-right: auto; }
  header.site nav { order: 3; flex: 1; margin: 0 0 0 -10px; }
  #theme { order: 4; }
  header.site .btn.launch { padding: .4em .8em; }
  .two, .prevnext { grid-template-columns: 1fr; }
  .pn.next { text-align: left; }
  .toc ol { columns: 1; }
  .ctas .btn { width: 100%; }
  h2 { font-size: 1.35rem; }
}

/* Two tracks (2026-10-19): the chooser, the standards box and the teacher notes ------------------ */
.choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 12px; margin: 8px 0 12px; }
.chooser { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--rb-r-lg);
           background: var(--panel); color: var(--ink); text-decoration: none; border-top: 5px solid var(--rb-sky); }
.chooser.middle { border-top-color: var(--rb-orange); }
.chooser.teachers { border-top-color: var(--rb-green); }
.chooser:hover { border-color: var(--accent); }
.chooser .tag { align-self: flex-start; }
.chooser b { font: 700 1.35rem/1.2 var(--rb-font-head); }
.chooser span { color: var(--muted); font-size: .95rem; }
.chooser .go { margin-top: auto; color: var(--accent); font-weight: 600; }
main { overflow-wrap: break-word; }
blockquote.call { margin: 0 0 1.2em; }
main a { overflow-wrap: anywhere; }
header.site nav a { white-space: nowrap; }
.tag.grade { background: var(--rb-sky) !important; color: var(--rb-night) !important; }
section.stdbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--rb-r-md); padding: 2px 16px 4px; margin: 1.2em 0; }
section.stdbox h2 { border-top: 0; margin-top: .6em; padding-top: 0; font-size: 1.2rem; }
section.stdbox td:first-child { white-space: normal; min-width: 7.5em; }
section.call.notes { background: var(--callbg-tip); border-color: var(--rb-sky); padding-top: 2px; margin-top: 2em; }
section.call.notes h2 { border-top: 0; margin-top: .6em; padding-top: 0; color: var(--tip-ink); }
section.call.safety.rules { padding-top: 2px; }

/* Pictures and diagrams (2026-10-21): docs/curriculum/tools/visuals.py and art/ ------------------- */
:root { --p0: var(--rb-sky); --p1: var(--rb-orange); --p2: var(--rb-green); --p3: var(--rb-amber-300);
        --p0bg: var(--rb-sky-100); --p1bg: var(--rb-orange-100); --p2bg: var(--rb-green-100); --p3bg: var(--rb-amber-100);
        --sf: var(--rb-sky-700); --se: var(--rb-orange-700); --sg: var(--rb-green-700); }
@media screen {
  :root:not([data-theme="light"]) { --p0bg: #2E2614; --p1bg: #3A2418; --p2bg: #1F2E1C; --p3bg: #3A2C0E;
    --sf: var(--rb-sky-300); --se: var(--rb-orange-300); --sg: var(--rb-green-300); }
}
:root[data-theme="dark"] { --p0bg: #2E2614; --p1bg: #3A2418; --p2bg: #1F2E1C; --p3bg: #3A2C0E;
  --sf: var(--rb-sky-300); --se: var(--rb-orange-300); --sg: var(--rb-green-300); }
svg.ico { flex: none; vertical-align: middle; }

/* Activity pictures: always on a Paper-white card, so the line drawings read in dark mode too */
figure.art { margin: 1.2em 0 1.4em; padding: 12px 12px 4px; background: var(--rb-paper-white); border: 1px solid var(--line);
             border-radius: var(--rb-r-lg); break-inside: avoid; }
figure.art svg { display: block; max-width: 100%; margin: 0 auto; }
figure.art figcaption { color: #4F4A40; font-size: .9rem; line-height: 1.4; padding: 8px 4px 6px; border-top: 1px dashed var(--rb-paper-300); margin-top: 6px; }

/* At a glance chips (time, worksheet, Rocket Builder) */
ul.glance { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 8px; }
ul.glance li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; background: var(--card);
               border: 1px solid var(--line); border-radius: var(--rb-r-md); font-size: .93rem; line-height: 1.4; }
ul.glance li > svg { color: var(--accent); margin-top: 2px; }
ul.glance .lab { margin-bottom: 4px; }

/* "You are here" strip */
.minipath { margin: 0 0 14px; }
.minipath ol { list-style: none; display: flex; align-items: center; gap: 0; padding: 0; margin: 0 0 6px; }
.minipath li { flex: 1; display: flex; align-items: center; margin: 0; }
.minipath li:not(:last-child)::after { content: ""; flex: 1; height: 0; border-top: 2px dashed var(--line); margin: 0 2px; }
.minipath li.done:not(:last-child)::after { border-top-style: solid; border-color: var(--rb-sky); }
.minipath li:last-child { flex: none; }
.minipath a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; text-decoration: none;
              font: 700 .85rem/1 var(--rb-font-head); color: var(--muted); border: 2px solid var(--line); background: var(--panel); }
.minipath li.done a { border-color: var(--rb-sky); color: var(--ink); }
.minipath li.here a { width: 38px; height: 38px; background: var(--rb-orange); border-color: var(--rb-orange); color: var(--rb-night); font-size: 1rem; }
.minipath a:hover { border-color: var(--accent); color: var(--ink); }
.minipath p { margin: 0; font-size: .85rem; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.phase { display: inline-block; padding: 2px 8px; border-radius: var(--rb-r-pill); font: 600 .75rem/1.4 var(--rb-font-head);
         color: var(--ink); background: var(--p0bg); border: 1px solid var(--p0); }
.phase.p1 { background: var(--p1bg); border-color: var(--p1); } .phase.p2 { background: var(--p2bg); border-color: var(--p2); }
.phase.p3 { background: var(--p3bg); border-color: var(--p3); }

/* Step headings and the lesson time bar */
h3.stephead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.step { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.75em; padding: 0 .3em; font: 700 1rem/1 var(--rb-font-head);
        color: var(--rb-night); background: var(--rb-orange); clip-path: var(--rb-chamfer); }
h3 .mins, h3 .note { font: 600 .78rem/1 var(--rb-font-body); color: var(--muted); border: 1px solid var(--line); border-radius: var(--rb-r-pill); padding: 4px 9px; }
figure.flow { margin: 0 0 1.4em; }
figure.flow ol { list-style: none; display: flex; gap: 3px; padding: 0; margin: 0; }
figure.flow li { margin: 0; min-width: 3.4rem; }
figure.flow a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 8px 9px; text-decoration: none; color: var(--rb-night);
                border-radius: 4px; background: var(--rb-orange-100); border-bottom: 4px solid var(--rb-orange); line-height: 1.2; }
figure.flow li:first-child a { border-radius: var(--rb-r-md) 4px 4px var(--rb-r-md); }
figure.flow li:last-child a { border-radius: 4px var(--rb-r-md) var(--rb-r-md) 4px; }
figure.flow li.learn a { background: var(--rb-sky-100); border-color: var(--rb-sky); }
figure.flow li.plan a { background: var(--rb-amber-100); border-color: var(--rb-amber-300); }
figure.flow li.wrap a { background: var(--rb-green-100); border-color: var(--rb-green); }
figure.flow a:hover { filter: brightness(.96); }
figure.flow .n { font: 700 .75rem/1 var(--rb-font-head); color: #4F4A40; }
figure.flow .t { font: 600 .86rem/1.2 var(--rb-font-head); overflow-wrap: anywhere; }
figure.flow .m { font-size: .76rem; color: #4F4A40; }
figure.flow figcaption { font-size: .8rem; color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
figure.flow .k::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: var(--rb-orange); }
figure.flow .k.learn::before { background: var(--rb-sky); } figure.flow .k.plan::before { background: var(--rb-amber-300); }
figure.flow .k.wrap::before { background: var(--rb-green); }
@media (max-width: 640px) {
  figure.flow ol { flex-direction: column; }
  figure.flow li { flex: none !important; }
  figure.flow a { flex-direction: row; align-items: baseline; gap: 8px; border-radius: 4px !important; border-bottom: 0; border-left: 4px solid var(--rb-orange); }
  figure.flow li.learn a { border-left-color: var(--rb-sky); } figure.flow li.plan a { border-left-color: var(--rb-amber-300); }
  figure.flow li.wrap a { border-left-color: var(--rb-green); }
  figure.flow .m { margin-left: auto; white-space: nowrap; }
}

/* I can (checklist), words (cards), materials (tick boxes), check questions (cards) */
ul.ican, ul.checks { list-style: none; padding: 0; }
ul.ican li { position: relative; padding: 8px 12px 8px 42px; margin: 6px 0; background: var(--okbg); border-radius: var(--rb-r-md); }
ul.ican li::before { content: ""; position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--rb-green)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%231D1A15' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
ul.words { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 8px; }
ul.words li { margin: 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--rb-sky);
              border-radius: var(--rb-r-md); font-size: .95rem; line-height: 1.45; }
ul.words li strong:first-child { display: block; font: 700 1.05rem/1.3 var(--rb-font-head); }
ul.checks li { position: relative; padding-left: 30px; }
ul.checks li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 16px; height: 16px; border: 2px solid var(--muted); border-radius: 4px; }
ol.qs { list-style: none; padding: 0; counter-reset: q; }
ol.qs > li { counter-increment: q; position: relative; padding: 12px 14px 12px 52px; margin: 8px 0; background: var(--panel);
             border: 1px solid var(--line); border-radius: var(--rb-r-md); }
ol.qs > li::before { content: "Q" counter(q); position: absolute; left: 12px; top: 11px; font: 700 .85rem/1.7 var(--rb-font-head);
                     background: var(--rb-sky); color: var(--rb-night); padding: 0 6px; clip-path: var(--rb-chamfer); }

/* Track overview: the learning pathway */
figure.pathwrap { margin: 8px 0 1.4em; }
ol.path { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; width: min(calc(100vw - 32px), 1120px);
          position: relative; left: 50%; transform: translateX(-50%); }
ol.path > li.leg { flex: var(--k); margin: 0; min-width: 0; padding: 10px 8px 8px; border-radius: var(--rb-r-lg); background: var(--p0bg);
                   border-top: 4px solid var(--p0); }
ol.path > li.p1 { background: var(--p1bg); border-color: var(--p1); } ol.path > li.p2 { background: var(--p2bg); border-color: var(--p2); }
ol.path > li.p3 { background: var(--p3bg); border-color: var(--p3); }
.legname { display: block; font: 700 .78rem/1.2 var(--rb-font-head); text-transform: uppercase; letter-spacing: .07em; margin: 0 4px 10px; }
ol.path ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: 8px; position: relative; }
ol.path ol::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; border-top: 3px dashed var(--rb-sky); z-index: 0; }
ol.path ol > li { margin: 0; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
ol.path a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; flex: 1; padding: 0 6px 10px;
            color: var(--ink); text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rb-r-md); }
ol.path a:hover { border-color: var(--accent); }
ol.path .stop { display: grid; place-items: center; width: 34px; height: 34px; margin-top: -1px; font: 700 1.05rem/1 var(--rb-font-head);
                color: var(--rb-night); background: var(--rb-orange); clip-path: var(--rb-chamfer); }
ol.path a > svg { color: var(--ink); }
ol.path b { font: 700 .92rem/1.25 var(--rb-font-head); }
ol.path small { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.core { color: var(--rb-orange-700); }
:root[data-theme="dark"] .core { color: var(--rb-orange-300); }
@media screen { :root:not([data-theme="light"]) .core { color: var(--rb-orange-300); } }
.prep { display: flex; gap: 6px; align-items: flex-start; font-size: .76rem; line-height: 1.3; padding: 6px 8px; border-radius: var(--rb-r-sm);
        background: var(--panel); border: 1px dashed var(--muted); color: var(--ink); }
.prep svg { flex: none; }
.pathkey { font-size: .85rem; color: var(--muted); margin: 8px 0 0; display: flex; gap: 6px; align-items: center; }
@media (max-width: 900px) {
  ol.path { flex-direction: column; width: auto; left: 0; transform: none; }
  ol.path ol { grid-template-columns: 1fr; }
  ol.path ol::before { left: 33px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 3px dashed var(--rb-sky); }
  ol.path a { display: grid; grid-template-columns: 34px 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left;
              align-items: center; padding: 8px 12px 8px 16px; }
  ol.path .stop { grid-row: span 2; margin: 0; } ol.path a > svg { grid-row: span 2; }
  ol.path b, ol.path small { grid-column: 3; }
  .prep { margin-left: 56px; }
}

/* Track overview: standards as dots */
figure.smatrix { margin: 0 0 1em; }
figure.smatrix table { width: auto; min-width: 60%; }
figure.smatrix th, figure.smatrix td { text-align: center; padding: 6px 8px; border-bottom: 1px solid var(--rowline); }
figure.smatrix tbody th { text-align: left; white-space: nowrap; font: 700 .85rem/1.2 var(--rb-font-head); color: var(--ink); background: none; }
figure.smatrix thead th a { color: var(--ink); text-decoration: none; display: inline-grid; place-items: center; width: 26px; height: 26px;
                            background: var(--rb-orange); color: var(--rb-night); clip-path: var(--rb-chamfer); }
figure.smatrix td:first-child { white-space: normal; }
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; background: var(--c, var(--sf)); }
.dot.part { background: none; border: 3px solid var(--c, var(--sf)); }
.s-f { --c: var(--sf); } .s-e { --c: var(--se); } .s-g { --c: var(--sg); }
figure.smatrix figcaption { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; }
figure.smatrix figcaption .dot { width: 12px; height: 12px; margin-right: 4px; }
figure.smatrix figcaption .dot.part { border-width: 2px; }

/* Chooser: the two tracks side by side */
figure.tracksmap { margin: 6px 0 18px; display: grid; gap: 12px; }
.lane { padding: 12px 14px 4px; border-radius: var(--rb-r-lg); background: var(--p0bg); border-left: 5px solid var(--rb-sky); }
.lane.middle { background: var(--p1bg); border-left-color: var(--rb-orange); }
.lanehead { text-decoration: none; }
.lane ol { list-style: none; padding: 0; margin: 10px 0 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.lane li { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
           padding: 10px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rb-r-md); }
.lane li:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.lane li b { font: 700 .88rem/1.25 var(--rb-font-head); }
.lane li small { font-size: .76rem; color: var(--muted); }
.lanenote { font-size: .85rem; color: var(--muted); margin: 0 0 8px; }
figure.tracksmap figcaption { font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) {
  .lane ol { grid-template-columns: 1fr; gap: 14px; }
  .lane li { flex-direction: row; text-align: left; gap: 10px; }
  .lane li small { margin-left: auto; }
  .lane li:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -17px; transform: none; }
}

/* Teachers: grade 3–5 to grade 6–8 progression */
figure.progression { margin: 1em 0 1.6em; }
.progression .cols, .progression .strand { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 8px; align-items: stretch; }
.progression .cols span { font: 700 .78rem/1.2 var(--rb-font-head); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.progression .strand { margin: 6px 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--rowline); }
.progression .strand h3 { grid-column: 1 / -1; margin: .4em 0 0; font-size: 1.05rem; color: var(--c); }
.progression ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.progression li { margin: 0; padding: 7px 10px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c);
                  border-radius: var(--rb-r-sm); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: .88rem; cursor: help; }
.progression li b { font: 700 .9rem/1.3 var(--rb-font-head); }
.progression li span { color: var(--muted); }
.progression .grow { display: grid; place-items: center; font-size: 1.4rem; color: var(--c); font-weight: 700; }
.progression figcaption { font-size: .85rem; color: var(--muted); }
@media (max-width: 560px) {
  .progression .cols { display: none; }
  .progression .strand { grid-template-columns: 1fr; }
  .progression .grow { transform: rotate(90deg); }
  .progression ul.el::before { content: "Grades 3–5"; font: 700 .72rem var(--rb-font-head); text-transform: uppercase; color: var(--muted); }
  .progression ul.ms::before { content: "Grades 6–8"; font: 700 .72rem var(--rb-font-head); text-transform: uppercase; color: var(--muted); }
}

/* Print: the lesson only, black on white */
@media print {
  :root { color-scheme: light; --bg: #fff; --panel: #fff; --card: #fff; --ink: #1D1A15; --muted: #444; --line: #bbb; --accent: #1D1A15; --quote: #fff; }
  @page { size: Letter; margin: 0.6in; }
  body { font-size: 11pt; line-height: 1.45; background: #fff; }
  header.site, footer.site, .tools, .toc, .prevnext, .back, .skip, .ctas, .crumbs { display: none !important; }
  main { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  a.app::after { content: " (rocket.quiverdesignworks.net)"; font-size: .9em; }
  h2 { break-after: avoid; margin-top: 1.4em; }
  h3 { break-after: avoid; }
  .call, .trk, blockquote.aloud, details, table, li { break-inside: avoid; }
  .call, .trk, .tag, blockquote.aloud, .stdbox, .step, figure, ul.glance, ul.ican, .minipath { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .minipath { display: none; }
  figure.art { border: 0; padding: 0; break-inside: avoid; }
  figure.art svg { max-height: 3.4in; width: auto !important; }
  details.answers summary { list-style: none; }
  details.answers::details-content { content-visibility: visible; display: contents; }
  .tbl { overflow: visible; }
}

/* DIAGRAMS: from docs/curriculum/tools/diagrams.py (build_site.py rewrites this block) */
.dg-o{fill:none;stroke:#12203A;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.dg-w{fill:#FFFDF8;stroke:#12203A;stroke-width:2.4;stroke-linejoin:round}
.dg-f{fill:#DDEAFF;stroke:#12203A;stroke-width:2.4;stroke-linejoin:round}
.dg-p{fill:#FDE3D6;stroke:#12203A;stroke-width:2.4;stroke-linejoin:round}
.dg-g{fill:#E2D9C6;stroke:#12203A;stroke-width:2.4;stroke-linejoin:round}
.dg-n{fill:#12203A}
.dg-thin{fill:none;stroke:#12203A;stroke-width:1.4}
.dg-lead{fill:none;stroke:#6E6E73;stroke-width:1.3}
.dg-dash{fill:none;stroke:#3D8BFD;stroke-width:2.4;stroke-dasharray:9 7;stroke-linecap:round}
.dg-arc{fill:none;stroke:#12203A;stroke-width:2;stroke-dasharray:9 7;stroke-linecap:round}
.dg-t{font:500 15px Inter,system-ui,sans-serif;fill:#12203A}
.dg-tb{font:700 15px Inter,system-ui,sans-serif;fill:#12203A}
.dg-ts{font:500 12.5px Inter,system-ui,sans-serif;fill:#6E6E73}
.dg-th{font:700 17px "Space Grotesk",Inter,sans-serif;fill:#12203A}
.dg-cl{font:700 14px "Space Grotesk",Inter,sans-serif;fill:#FFFDF8}
/* END DIAGRAMS */