/* Tactical GPS — Field Manual. Shared stylesheet for all /manual/ pages.
   Design tokens mirror tactical-gps/index.html — keep in sync by hand. */
:root{
  --bg:#070907; --bg2:#0c100c; --panel:#101510; --line:#1d251d;
  --grid:rgba(67,227,107,.05);
  --green:#43e36b; --green-dim:#2da34c; --amber:#ffb000;
  --text:#d7e0d7; --muted:#8b998b;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* black source SVGs → --green tint */
  --icon-tint:brightness(0) saturate(100%) invert(67%) sepia(61%) saturate(556%) hue-rotate(83deg) brightness(101%) contrast(93%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    var(--bg);
  background-size:44px 44px,44px 44px,auto;
  color:var(--text);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* header — same chrome as the landing page */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(7,9,7,.88);backdrop-filter:blur(10px);z-index:10}
.nav{display:flex;align-items:center;gap:12px;padding:14px 0}
.nav img{width:34px;height:34px;border-radius:8px;display:block}
.nav .name{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.04em}
.nav .name a{color:var(--text);text-decoration:none}
.nav .name span.g{color:var(--green)}
.nav .crumb{color:var(--muted);font-weight:400}
.nav .crumb a{color:var(--green)}
.nav a.dl{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--bg);background:var(--green);padding:8px 16px;border-radius:6px;text-decoration:none;font-weight:700;letter-spacing:.05em}
.nav a.dl:hover{background:#5aef7f}

/* chapter chip nav */
.chapnav{border-bottom:1px solid var(--line);background:var(--bg2)}
.chapnav .chips{display:flex;gap:8px;overflow-x:auto;padding:10px 24px;scrollbar-width:none}
.chapnav .chips::-webkit-scrollbar{display:none}
.chapnav a{
  flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted);text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;background:var(--panel)
}
.chapnav a:hover{color:var(--green);border-color:#2c3a2c}
.chapnav a.on{color:var(--bg);background:var(--green);border-color:var(--green);font-weight:700}

/* document */
main.doc{padding:48px 24px 24px}
.kicker{font-family:var(--mono);color:var(--green);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.kicker::before{content:"▸ "}
h1{font-family:var(--mono);font-size:clamp(26px,4vw,38px);line-height:1.15;letter-spacing:-.01em;margin:12px 0 14px;font-weight:700}
h1 em{color:var(--green);font-style:normal}
.lede{color:var(--muted);font-size:16.5px;max-width:62ch;margin-bottom:8px}
section{padding:34px 0 6px}
h2{font-family:var(--mono);font-size:clamp(18px,2.4vw,22px);margin-bottom:16px}
h2::before{content:"// ";color:var(--green-dim)}
.doc p{color:var(--muted);font-size:15px;max-width:68ch;margin-bottom:14px}
.doc p b,.doc p strong{color:var(--text);font-weight:600}
.doc a{color:var(--green)}
.doc code{font-family:var(--mono);font-size:.92em;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--text)}

/* feature rows: app icon + name + description */
.feature{display:flex;gap:14px;align-items:flex-start;padding:9px 0;max-width:68ch}
.ficon{flex:none;width:38px;height:38px;border-radius:9px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.ficon img{width:20px;height:20px;filter:var(--icon-tint)}
.feature h3{font-size:15px;font-weight:600;margin:0 0 2px;display:flex;align-items:center;gap:8px}
.feature p{font-size:14px;margin:0}
.pro{font-family:var(--mono);font-size:9.5px;color:var(--bg);background:var(--amber);border-radius:4px;padding:1px 6px;letter-spacing:.12em;font-weight:700}

/* screenshots */
.shotrow{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 6px}
.shot{flex:0 1 250px}
.shot img{width:100%;border-radius:18px;border:1px solid var(--line);display:block}
.shot figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.08em;text-transform:uppercase}
.shot figcaption::before{content:"+ ";color:var(--green)}

/* tips & notes */
.tip{display:flex;gap:10px;align-items:flex-start;padding:6px 0;color:var(--muted);font-size:14px;max-width:68ch}
.tip::before{content:"▸";color:var(--green);flex:none;font-weight:700}
.note{border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--panel);border-radius:8px;padding:12px 16px;font-size:14px;color:var(--muted);max-width:68ch;margin:14px 0}

/* prev / next */
.pn{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);margin-top:44px;padding:22px 0 8px;font-family:var(--mono);font-size:13px}
.pn a{color:var(--green);text-decoration:none}
.pn a:hover{text-decoration:underline}
.pn .lbl{display:block;color:var(--muted);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}
.pn .next{text-align:right;margin-left:auto}

/* manual index card grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.cards a.card{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:18px;text-decoration:none;color:var(--text);display:block
}
.cards a.card:hover{border-color:#2c3a2c}
.cards .num{font-family:var(--mono);font-size:10.5px;color:var(--green);letter-spacing:.14em}
.cards .ficon{margin:10px 0 10px}
.cards h3{font-size:15px;font-weight:600;margin-bottom:5px}
.cards p{font-size:13px;color:var(--muted);margin:0}

/* footer — same chrome as the landing page */
footer{border-top:1px solid var(--line);margin-top:40px;padding:36px 0 48px;font-family:var(--mono);font-size:12px;color:var(--muted)}
footer .row{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer a{color:var(--muted)}
footer a:hover{color:var(--green)}
.blink{animation:blink 1.2s steps(1) infinite;color:var(--green)}
@keyframes blink{50%{opacity:0}}

@media(max-width:820px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
  .cards{grid-template-columns:1fr}
  main.doc{padding-top:34px}
  .shot{flex-basis:100%}
}