/* WILDFIRE shared design tokens -- Phase 1 (2026-09-07)
   Canonical color tokens shared across all five WILDFIRE apps (Faction
   Performance, OC Manager, Pin Map, RW Payments, torn-wiki) and the
   WILDFIRE-app shell.

   Classic-theme values below match Faction Performance's own palette --
   per Rob's 2026-09-04 call ("best look is Faction Performance, repeat it
   across all sections"). Military/NATO values were already byte-identical
   across every app before this file existed, so nothing changes there.

   PHASE 1 ONLY: this file is linked from every app's <head>, ABOVE that
   app's own stylesheet -- but nothing consumes these --wf-* tokens yet.
   Each app's own CSS still defines its own (in some cases slightly
   different) hardcoded values, which win the cascade since they load
   after this file. Adding this file changes nothing visually.

   Phase 2 (next, one app at a time): each app's own CSS switches to
   reference these tokens (e.g. --accent: var(--wf-accent)) instead of
   its own hardcoded hex. At that point classic-theme panel/border/text/
   accent will shift slightly for OC Manager, Pin Map, RW Payments and
   torn-wiki to match Performance's -- those four don't currently agree
   with each other or with Performance on the exact classic-theme shade,
   even though the overall look is already consistent. NATO/Military
   won't visibly change at all, since it's already identical everywhere.

   Phase 3 (2026-09-07): shared header/.header-inner/.brand/.brand span/
   .header-spacer/.header-actions LAYOUT rules added below. Faction
   Performance, RW Payments, Pin Map, and the shell had already converged
   on nearly-identical versions of these five rules by hand (exactly the
   "kept in sync by eye" drift risk this file exists to close) -- Pin Map's
   gap and OC Manager's padding had each drifted slightly, and the shell's
   own .brand colour had been left out of the 2026-09-05 brand-recolour
   pass. OC Manager's .topbar-inner/.topbar-spacer/.topbar-actions/
   .topbar-link were renamed to .header-inner/.header-spacer/.header-
   actions/.logout-link to match everyone else, so it can consume this
   block too. Each app's own stylesheet no longer redeclares these five
   rules -- this file is now the single source for header LAYOUT.

   Deliberately NOT unified here: button-level visual styling (#syncBtn,
   #themeToggle, .logout-link's own color rules, Pin Map's .link-btn,
   RW Payments' .header-actions a, and OC Manager's own bordered/mono
   `button`/.logout-link look). OC Manager's console-style buttons
   (JetBrains Mono, bordered, uppercase) read as a deliberate distinct
   identity for that app rather than accidental drift -- worth Rob's
   explicit call before converging those too, so left local for now.

   torn-wiki: already uses matching header/.header-inner/.header-spacer/
   .header-actions class names and layout (its own CSS comment says so),
   just under its own `.navbar-torn` scope with its own `--torn-*` token
   scheme and `.navbar-brand` markup instead of `.brand`. Its colour
   palette remains on Rob's own separate hold (2026-09-05: "probably needs
   changing when I have enough usage credit") -- not touched here. */

:root {
  --wf-bg: #0f1115;
  --wf-panel: #171a21;
  --wf-border: #262b36;
  --wf-text: #e7e9ee;
  --wf-muted: #9aa1b1;
  --wf-accent: #ff6b35;
  --wf-accent2: #2dd4bf;
  --wf-good: #4ade80;
  --wf-bad: #f87171;
  --wf-tag-text: #06231f;
  /* 2026-09-19: scrollbar track/thumb -- the Wiki's own values, now shared */
  --wf-scroll-track: #121218;
  --wf-scroll-thumb: #35354a;
}

:root[data-theme="nato"] {
  --wf-bg: #161c10;
  --wf-panel: #222a17;
  --wf-border: #4b5320;
  --wf-text: #eef0e2;
  --wf-muted: #9aa37c;
  --wf-accent: #6b8e23;
  --wf-accent2: #c9c2a0;
  --wf-good: #8bc34a;
  --wf-bad: #e2453c;
  --wf-tag-text: #1c2410;
  --wf-scroll-track: #1c230f;
  --wf-scroll-thumb: #5c6626;
}

/* ---------- Shared header component layout (Phase 3) ---------- */
header {
  background: var(--wf-panel);
  border-bottom: 1px solid var(--wf-border);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
}
/* font-family added explicitly 2026-09-07 -- Rob spotted "WILDFIRE"
   rendering in a different font on OC Manager vs. Performance despite
   this shared rule being byte-identical between them. Root cause: this
   rule never set its own font-family, so it inherited each app's body
   font -- Performance's sans-serif stack vs. OC Manager's JetBrains
   Mono (OC Manager's whole page is deliberately mono/console-styled,
   so the brand text was just going along for the ride). Scoped fix:
   pin the brand text itself to the sans stack everywhere, leaving OC
   Manager's console look (body text, buttons, tabs) untouched. */
.brand {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--wf-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* 2026-09-08: without this, the flex layout could shrink .brand's own
     box below "WILDFIRE APP"'s full width and let the text wrap INSIDE
     the brand block -- "WILDFIRE" on one line, "APP"/"PERFORMANCE"/etc.
     alone on the next, reading as a broken title (Rob, iPhone 14 Pro Max:
     "the 'WILDFIRE app' title has jumped to two lines"). Pinning it to
     one line means the outer .header-inner flex-wrap now makes the
     line-break decision instead -- brand drops to its own row as a
     whole, rather than splitting mid-phrase. */
  white-space: nowrap;
}
.brand span {
  color: var(--wf-accent);
  font-weight: 700;
  font-size: 14px;
  margin-left: 8px;
  text-transform: uppercase;
}
.header-spacer { flex: 1; }
.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
/* 2026-09-08: compact header on phone-width screens -- Rob, testing on
   an iPhone 14 Pro Max (430px CSS width), found Guide/the theme toggle/
   the brand text "taking up too much space". Smaller brand text + tighter
   padding/gaps reclaim enough width that the brand and header-actions
   usually both fit on one row again instead of always stacking. */
@media (max-width: 480px) {
  .header-inner { padding: 12px 16px; gap: 10px; }
  .brand { font-size: 16px; }
  .brand span { font-size: 11px; margin-left: 6px; }
  .header-actions { gap: 6px 10px; }
}

/* ---------- Shared scrollbar gutter (2026-09-08) ---------- */
/* Every framed app reserves space for its vertical scrollbar on BOTH
   edges, always -- so a page's centred 1280px column sits at exactly the
   same x whether or not that page is tall enough to scroll, and whether
   the app draws a 17px system scrollbar or (the Wiki) a 6px custom one.
   Symmetric gutters keep the column centred on the window's true centre,
   which is where the shell's own header/tab bar is centred too -- before
   this, OC Manager alone reserved a one-sided gutter (its own
   `html { scrollbar-gutter: stable }`, added 2026-09-03 to stop its tabs
   jumping sideways) and so sat ~8px LEFT of every other app and of the
   shell's header, while Performance/Pin Map/RW Payments shifted ~8px the
   moment their content grew tall enough to scroll. Rob flagged the
   cross-tab width difference 2026-09-06 (then diagnosed as a scrollbar
   artifact) and asked for it corrected 2026-09-08. The shell's own
   stylesheet opts its own document back OUT of this (it never scrolls --
   the iframe does), so the iframe keeps the full window width. Browsers
   without scrollbar-gutter support (Safari) use overlay scrollbars that
   never shifted content anyway. */
/* 2026-09-19: `both-edges` -> `stable` (right edge only). The symmetric
   gutter made sense with a 17px system scrollbar (an 8px centring error
   otherwise); with the family's 6px scrollbar the asymmetry is 3px, and
   once the shell capped everything to a bordered 1280px column, the EMPTY
   left-hand reservation showed as a visible gap beside the app's header
   (Rob's screenshot, Wiki tab). Measured live: both-edges = 6px blank
   left + 6px slider right; stable = 0 left, slider right. */
html {
  scrollbar-gutter: stable;
}

/* ---------- Shared scrollbar (2026-09-19) ---------- */
/* Rob: "the wiki has a different scrollbar to the rest of the app, the wiki
   scroll bar looks the most elegant" -- so the Wiki's slim 6px bar is now
   the family's, via this file (the Wiki's own copy was removed). WebKit/
   Blink rules only, on purpose: Chromium ignores ::-webkit-scrollbar the
   moment `scrollbar-color` is set on the same element, so the standard
   properties are supplied ONLY where the pseudo-elements don't exist
   (Firefox). Hover colour is the theme accent, as in the Wiki. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--wf-scroll-track); }
::-webkit-scrollbar-thumb { background: var(--wf-scroll-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--wf-accent); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--wf-scroll-thumb) var(--wf-scroll-track); }
}

/* ---------- Shared login panel (2026-09-08) ---------- */
/* ONE login look across every WILDFIRE app -- Faction Performance's clean
   centred panel, built purely on the shared --wf-* tokens so it is
   pixel-identical everywhere and theme-aware (Tactical/Classic). Markup:
   .wf-login-wrap (full-viewport centre) > .wf-login-card with
   .wf-login-title / -sub / -input / -btn / -err / -fine inside. Each app
   keeps its own input/button/error ids for its own login JS; only the
   look is shared here. Rob (2026-09-08): "all login screens match
   Performance". */
.wf-login-wrap { min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center; padding:1rem; background:var(--wf-bg); box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.wf-login-card { width:100%; max-width:360px; padding:2rem; background:var(--wf-panel); border:1px solid var(--wf-border); border-radius:8px; text-align:center; box-sizing:border-box; }
.wf-login-card * { box-sizing:border-box; }
.wf-login-title { color:var(--wf-accent); font-size:1.4rem; font-weight:700; margin:0 0 0.5rem; font-family:inherit; letter-spacing:normal; text-transform:none; }
.wf-login-sub { color:var(--wf-muted); font-size:0.85rem; line-height:1.5; margin:0 0 1.25rem; font-family:inherit; }
.wf-login-input { width:100%; background:var(--wf-bg); border:1px solid var(--wf-border); color:var(--wf-text); font-size:0.9rem; padding:0.6rem 0.8rem; border-radius:6px; margin:0 0 0.75rem; text-align:center; font-family:inherit; }
.wf-login-input:focus { outline:none; border-color:var(--wf-accent); }
.wf-login-btn { display:block; width:100%; background:var(--wf-accent); color:#140b06; font-weight:600; font-size:0.85rem; padding:0.65rem 1.2rem; border:none; border-radius:6px; cursor:pointer; font-family:inherit; line-height:1.2; margin:0; text-transform:none; letter-spacing:normal; }
.wf-login-btn:hover:not(:disabled) { filter:brightness(1.06); }
.wf-login-btn:disabled { opacity:0.7; cursor:default; }
.wf-login-err { color:var(--wf-bad); font-size:0.78rem; margin:0.6rem 0 0; font-family:inherit; }
.wf-login-fine { color:var(--wf-muted); font-size:0.72rem; line-height:1.5; margin:1rem 0 0; font-family:inherit; }