/* Minerva BR-1 Assembly Guide — GA Wing High Power Rocketry */
:root{
  --bg:#f6f5f2; --surface:#ffffff; --surface-2:#efeee9; --line:#dedcd5;
  --ink:#191813; --ink-2:#57544b; --ink-3:#84806f;
  --accent:#123a6d;          /* CAP blue */
  --accent-ink:#ffffff;
  --warn-bg:#fdf1e3; --warn-line:#e0a35a; --warn-ink:#7a4408;
  --tip-bg:#eaf1f8;  --tip-line:#7ba2cf;  --tip-ink:#153d68;
  --time-bg:#f0ecf8; --time-line:#a08cc9; --time-ink:#453168;
  --ok:#1d7a3e; --no:#b3241f;
  --shadow:0 1px 2px rgba(20,18,12,.06), 0 6px 20px rgba(20,18,12,.05);
  --radius:12px;
  --wrap:900px;
}
:root:not([data-theme="light"]){ }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14151a; --surface:#1c1e25; --surface-2:#23262f; --line:#31353f;
    --ink:#e9e8e4; --ink-2:#adaba4; --ink-3:#807d76;
    --accent:#7fb0ee; --accent-ink:#0d1420;
    --warn-bg:#3a2a15; --warn-line:#b9812f; --warn-ink:#f3cd94;
    --tip-bg:#182633;  --tip-line:#4e7bab;  --tip-ink:#b9d5f2;
    --time-bg:#252038; --time-line:#7f6cb0; --time-ink:#cfc2ee;
    --ok:#5cc27f; --no:#f2716a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#14151a; --surface:#1c1e25; --surface-2:#23262f; --line:#31353f;
  --ink:#e9e8e4; --ink-2:#adaba4; --ink-3:#807d76;
  --accent:#7fb0ee; --accent-ink:#0d1420;
  --warn-bg:#3a2a15; --warn-line:#b9812f; --warn-ink:#f3cd94;
  --tip-bg:#182633;  --tip-line:#4e7bab;  --tip-ink:#b9d5f2;
  --time-bg:#252038; --time-line:#7f6cb0; --time-ink:#cfc2ee;
  --ok:#5cc27f; --no:#f2716a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:64px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern","liga";
}
img{max-width:100%; display:block}
a{color:var(--accent); text-underline-offset:2px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:16px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:12px; height:56px}
.topbar .mark{display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; letter-spacing:.01em; color:var(--ink); text-decoration:none; white-space:nowrap}
.topbar .mark img{width:26px; height:26px}
.topbar .spacer{flex:1}
.iconbtn{
  appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:9px; height:34px; min-width:34px; padding:0 10px; font-size:13px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  white-space:nowrap; font-variant-numeric:tabular-nums; flex:none;
}
.iconbtn svg{width:16px; height:16px; display:block}
@media (max-width:430px){
  .topbar .mark .blk{display:none}
  .resetbtn{display:none}
}
.iconbtn:hover{border-color:var(--ink-3)}
.progressbar{position:absolute; left:0; bottom:-1px; height:2px; background:var(--accent); width:0; transition:width .25s ease}

/* ---------- hero ---------- */
.hero{padding:40px 0 8px; text-align:left}
.hero .eyebrow{font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:0 0 10px}
.hero h1{font-size:clamp(30px,7vw,50px); line-height:1.05; letter-spacing:-.02em; margin:0 0 12px; font-weight:800}
.hero p.lede{font-size:clamp(16px,2.4vw,19px); color:var(--ink-2); margin:0; max-width:56ch}
.hero .logo{width:74px; height:74px; margin-bottom:18px}
.metastrip{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
/* QR card so people in the back of the room can open the guide on a phone */
.hero{display:flex; flex-wrap:wrap; align-items:flex-start; gap:22px 36px}
.hero .hero-text{flex:1 1 340px; min-width:0}
.hero .qr{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 12px 10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); text-decoration:none; color:#333; margin-top:6px}
.hero .qr img{width:150px; height:150px; display:block}
.hero .qr .qr-label{font-size:12.5px; font-weight:600; text-align:center; max-width:160px; line-height:1.3}
.hero .qr .qr-url{font-size:10.5px; color:#666; word-break:break-all; text-align:center; max-width:160px}
@media (min-width:680px){ .hero .qr img{width:180px; height:180px} .hero .qr .qr-label,.hero .qr .qr-url{max-width:190px} }
@media (max-width:430px){ .hero .qr{align-self:stretch; flex-direction:row; justify-content:flex-start; gap:12px; text-align:left} .hero .qr img{width:110px; height:110px} .hero .qr .qr-label,.hero .qr .qr-url{text-align:left} }
.chip{font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}

/* ---------- generic card ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
section{scroll-margin-top:64px}
h2.sec{font-size:clamp(21px,3.6vw,27px); letter-spacing:-.01em; margin:44px 0 6px; font-weight:800}
h2.sec .idx{color:var(--ink-3); font-weight:700; margin-right:.5ch; font-variant-numeric:tabular-nums}
p.secblurb{color:var(--ink-2); margin:0 0 18px; max-width:62ch}

/* ---------- checklists (parts/tools) ---------- */
.twocol{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:680px){ .twocol{grid-template-columns:1.15fr 1fr} }
.listcard{padding:18px 18px 14px}
.listcard h3{margin:0 0 12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.checklist{list-style:none; margin:0; padding:0}
.checklist li{margin:0}
.checklist label{display:flex; gap:10px; align-items:flex-start; padding:6px 0; cursor:pointer; font-size:15px}
.checklist input{margin:4px 0 0; width:17px; height:17px; accent-color:var(--accent); flex:none}
.checklist input:checked + span{color:var(--ink-3); text-decoration:line-through}

/* ---------- callouts ---------- */
.callout{display:flex; gap:10px; padding:11px 13px; border-radius:10px; border:1px solid; font-size:14.5px; line-height:1.5; margin:10px 0}
.callout .ic{
  flex:none; width:19px; height:19px; border-radius:50%; margin-top:1px;
  display:grid; place-items:center; font-weight:800; font-size:12px; line-height:1;
  border:1.5px solid currentColor;
}
.callout.time .ic{border:0; font-size:15px; width:auto}
.callout.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink)}
.callout.tip {background:var(--tip-bg);  border-color:var(--tip-line);  color:var(--tip-ink)}
.callout.time{background:var(--time-bg); border-color:var(--time-line); color:var(--time-ink); font-weight:650}
.callout.link{background:var(--tip-bg); border-color:var(--tip-line)}
.callout.link a{color:var(--tip-ink); font-weight:650}
.callout a{color:inherit}

/* ---------- steps ---------- */
.step{padding:0; margin:14px 0; overflow:hidden}
.step-head{display:flex; gap:13px; align-items:flex-start; padding:16px 18px}
.step-num{
  flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:15px; font-variant-numeric:tabular-nums;
}
.step-title{margin:0; font-size:19px; line-height:1.3; letter-spacing:-.01em; font-weight:750; flex:1; padding-top:4px}
.step-done{flex:none; display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:650; color:var(--ink-3); cursor:pointer; padding-top:8px; user-select:none}
.step-done input{width:19px; height:19px; accent-color:var(--ok); margin:0}
.step-body{padding:0 18px 18px}
.step-body > ul{margin:0 0 4px; padding-left:20px}
.step-body > ul > li{margin:0 0 7px}
.step-body p{margin:0 0 11px}
.step.done{opacity:.62}
.step.done .step-num{background:var(--ok)}

/* video steps: the build-day segments, played during a cure wait */
.step.video .step-num{background:var(--time-ink); color:var(--time-bg)}
.step.video.done .step-num{background:var(--ok); color:var(--accent-ink)}
.videolink{
  position:relative; display:block; max-width:560px; margin:12px 0 2px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:#000; box-shadow:var(--shadow);
}
.videolink img{display:block; width:100%; height:auto}
.videolink .play{
  position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  background:rgba(18,58,109,.88); border:2px solid rgba(255,255,255,.85); box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.videolink .play::after{
  content:""; position:absolute; left:26px; top:19px; border-style:solid; border-width:13px 0 13px 20px;
  border-color:transparent transparent transparent #fff;
}
.videolink:hover .play, .videolink:focus-visible .play{background:rgba(18,58,109,1)}

/* ordered sub-steps rendered from "1." prefixes */
ol.substeps{counter-reset:s; list-style:none; margin:2px 0 12px; padding:0}
ol.substeps li{position:relative; padding-left:32px; margin:0 0 9px}
ol.substeps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2);
  font-size:12px; font-weight:800; display:grid; place-items:center;
}

/* ---------- figures ---------- */
.figs{display:grid; gap:12px; grid-template-columns:1fr; margin-top:14px}
@media (min-width:560px){ .figs.n2,.figs.n4{grid-template-columns:1fr 1fr} .figs.n3,.figs.n5{grid-template-columns:1fr 1fr} }
@media (min-width:820px){ .figs.n3{grid-template-columns:repeat(3,1fr)} .figs.n5{grid-template-columns:repeat(3,1fr)} }
figure{margin:0; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; overflow:hidden}
figure .imgwrap{position:relative; background:var(--surface-2); cursor:zoom-in}
figure img{
  width:100%; height:auto;
  max-height:min(58vh, 440px);
  object-fit:contain; object-position:center;
  background:var(--surface-2);
}
.figs{align-items:start}
figcaption{padding:9px 11px; font-size:13.5px; line-height:1.45; color:var(--ink-2)}
.tagbadge{
  position:absolute; top:8px; left:8px; z-index:2;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; font-weight:900; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.tagbadge.ok{background:var(--ok)}
.tagbadge.no{background:var(--no)}
figure.ok{border-color:var(--ok)} figure.no{border-color:var(--no)}

/* ---------- lightbox ---------- */
#lb{position:fixed; inset:0; z-index:200; background:rgba(8,8,10,.93); display:none; place-items:center; padding:18px}
#lb.open{display:grid}
#lb img{max-width:100%; max-height:82vh; width:auto; border-radius:8px}
#lb .cap{color:#ddd; text-align:center; font-size:14px; margin-top:12px; max-width:60ch}
#lb .close{position:absolute; top:14px; right:16px; font-size:26px; color:#eee; background:none; border:0; cursor:pointer; line-height:1}

/* ---------- toc ---------- */
.toc{padding:16px 18px; margin-top:22px}
.toc h3{margin:0 0 10px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.toc ol{margin:0; padding-left:20px; columns:1}
@media (min-width:620px){ .toc ol{columns:2; column-gap:26px} }
.toc li{margin:0 0 5px; break-inside:avoid}
.toc a{text-decoration:none; color:var(--ink)}
.toc a:hover{text-decoration:underline}
.toc .cnt{color:var(--ink-3); font-size:13px}

footer.site{margin:56px 0 40px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13.5px}
footer.site p{margin:0 0 7px}

/* ---------- print ---------- */
@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff;--line:#bbb;--ink:#000;--ink-2:#333;--ink-3:#666;--shadow:none}
  .topbar,.step-done,.toc,#lb,.themebtn,.resetbtn{display:none !important}
  body{font-size:11pt}
  .step{break-inside:avoid; border:1px solid #bbb; box-shadow:none}
  .figs{grid-template-columns:1fr 1fr !important}
  figure img{max-height:3.2in; width:auto; margin-inline:auto}
  .videolink{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
  .hero .qr::after{content:none}
  .hero .qr{box-shadow:none; border:1px solid #bbb}
}