/* Rocket Builder brand: shared styles for the secondary pages (/sources, /ordersupplies,
   /terms, /admin). Same tokens and look as the app (index.html) and the launch simulator;
   the full guide is docs/brand/brand.md, the source tokens docs/brand/tokens.css.
   Light/dark follows the system; localStorage "theme" (set by the app's header button)
   pins one through data-theme on <html>. Page-specific CSS stays in each page. */

/* Self-hosted (OFL, static/fonts/LICENSE-*.txt): same on every device, no third-party request. */
@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 colours: Night, Paper, Launch orange (the one main action), Sky (balance point, links),
     Signal red (push point, stop), Go green (stable, OK), Grey (secondary). */
  --rb-night:#1D1A15; --rb-paper:#EFE9DC; --rb-orange:#E0A93B; --rb-sky:#7AB0DE; --rb-red:#E0573F; --rb-green:#6FAE68; --rb-grey:#6B6355;
  --rb-night-950:#15130F; --rb-night-800:#27231C; --rb-night-700:#342F27; --rb-night-600:#4A4337; --rb-night-300:#A89F8E;
  --rb-paper-white:#FBF8F1; --rb-paper-200:#E6DFD0; --rb-paper-300:#D9CFBB;
  --rb-orange-700:#9A6A12; --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-amber-700:#8A5A00; --rb-amber-300:#F0BB4E;
  --font-head:"Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --chamfer:polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);

  color-scheme: light;
  --bg:#F4F0E6; --panel:#FBF8F1; --card:#EFE9DC; --ink:#1D1A15; --muted:#6B6355; --line:#DDD4C2; --rowline:#EBE4D6;
  --field:#FBF8F1; --accent:#8A5A00; --accent-ink:#fff; --err:#B83A26; --errbg:#F8E1D9; --errline:#F08A6E;
  --ok:#3F7A3A; --okbg:#E3EFD9; --warn:#8A5A00; --warnbg:#FBEFD6;
  --tipbg:#F6EAD0; --tip:#8A5A00;
  --cta:var(--rb-orange); --cta-ink:var(--rb-night);
  --hover:rgba(21,19,15,.06); --shadow:0 12px 32px rgba(21,19,15,.16);
}
/* 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:#15130F; --panel:#1D1A15; --card:#27231C; --ink:#EFE9DC; --muted:#A89F8E; --line:#342F27; --rowline:#27231C;
    --field:#27231C; --accent:#E0A93B; --accent-ink:#1A1408; --err:#F08A6E; --errbg:#3A1F17; --errline:#6B3424;
    --ok:#8FC98A; --okbg:#1F2E1C; --warn:#F0BB4E; --warnbg:#3A2C0E;
    --tipbg:#2E2614; --tip:#F0BB4E;
    --hover:rgba(239,233,220,.07); --shadow:0 14px 36px rgba(0,0,0,.45);
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg:#15130F; --panel:#1D1A15; --card:#27231C; --ink:#EFE9DC; --muted:#A89F8E; --line:#342F27; --rowline:#27231C;
  --field:#27231C; --accent:#E0A93B; --accent-ink:#1A1408; --err:#F08A6E; --errbg:#3A1F17; --errline:#6B3424;
  --ok:#8FC98A; --okbg:#1F2E1C; --warn:#F0BB4E; --warnbg:#3A2C0E;
  --tipbg:#2E2614; --tip:#F0BB4E;
  --hover:rgba(239,233,220,.07); --shadow:0 14px 36px rgba(0,0,0,.45);
}

/* ---------- base ---------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; font:16px/1.55 var(--font-body); color:var(--ink); background:var(--bg); -webkit-tap-highlight-color:transparent; }
a { color:var(--accent); text-underline-offset:2px; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color:var(--accent); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
h1, h2, h3, h4 { font-family:var(--font-head); letter-spacing:-.01em; line-height:1.2; }
h1 { font-weight:700; font-size:clamp(1.6rem, 5.5vw, 2.15rem); margin:0 0 .35rem; }
h2 { font-weight:700; font-size:1.3rem; margin:0 0 6px; }
h3 { font-weight:600; font-size:1.15rem; margin:0 0 4px; }
code { font:.88em var(--font-mono); background:var(--card); padding:1px 5px; border-radius:4px; }
.lede { font-size:1.08rem; color:var(--muted); margin:.25rem 0 1rem; max-width:62ch; }
.rb-num { font-family:var(--font-head); font-variant-numeric:tabular-nums; }

/* ---------- header: the mark, "Rocket Builder" with the page name, links home ---------- */
.rb-header { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; min-height:56px;
  padding:calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  border-bottom:1px solid var(--line); background:var(--panel); }
.rb-brand { display:flex; align-items:center; gap:9px; margin-right:auto; color:var(--ink); text-decoration:none; min-width:0; }
.rb-brand svg { width:30px; height:30px; flex:none; display:block; }
.rb-brand span { display:flex; flex-direction:column; font:700 1.12rem/1.05 var(--font-head); letter-spacing:-.01em; white-space:nowrap; }
.rb-brand small { font:600 10px/1.2 var(--font-head); letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.rb-nav { display:flex; align-items:center; gap:4px 16px; flex-wrap:wrap; font-size:13.5px; }
.rb-nav a { color:var(--muted); text-decoration:none; }
.rb-nav a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
/* The way back (brand.py BACK / QUIVER): a button to the designer and Quiver, the parent site, on every screen. */
.rb-nav a { display:inline-block; line-height:36px; white-space:nowrap; }
.rb-nav a.rb-back { line-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font-weight:600; }
.rb-nav a.rb-back:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
@media (max-width:520px) { .rb-header { gap:4px 12px; } .rb-nav { gap:4px 12px; } .rb-nav .long { display:none; } }

/* ---------- content ---------- */
.rb-main { max-width:860px; margin:0 auto; padding:28px 16px 64px; }
.rb-footer { border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; padding:20px 16px calc(28px + env(safe-area-inset-bottom, 0px)); text-align:center; }
.rb-footer a { color:var(--muted); }
.rb-footer a:hover { color:var(--ink); }

/* Section labels: Barlow Condensed 600, small, uppercase, tracked. */
.rb-label { font:600 12px/1.4 var(--font-head); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
/* Chamfered tag (part letters, small badges). */
.rb-tag { display:inline-block; padding:2px 7px; font:700 10.5px/1.3 var(--font-head); letter-spacing:.08em; text-transform:uppercase;
  color:var(--panel); background:var(--ink); clip-path:var(--chamfer); vertical-align:1px; }
.rb-tag.outline { color:var(--muted); background:none; box-shadow:inset 0 0 0 1px var(--line); }
/* Step number: chamfered orange tag, Night number. */
.rb-step { display:inline-grid; place-items:center; width:28px; height:28px; flex:none; font:700 14px/1 var(--font-head);
  color:var(--rb-night); background:var(--rb-orange); clip-path:var(--chamfer); }
/* Callouts: Tip (sky) and Safety (red), as in the printed guide. */
.rb-tip, .rb-safety { padding:12px 14px; margin:14px 0; border-left:4px solid var(--rb-sky); background:var(--tipbg); border-radius:0 8px 8px 0; }
.rb-safety { border-left-color:var(--rb-red); background:var(--errbg); }
/* Jump links: small outline chips. */
.rb-chips { display:flex; flex-wrap:wrap; gap:6px 8px; margin:14px 0 6px; }
.rb-chips a { font-size:.88rem; font-weight:500; padding:4px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none; background:var(--panel); }
.rb-chips a:hover { border-color:var(--accent); color:var(--accent); }