/* Phase 2 (2026-09-07): colour tokens now alias shared/wildfire-theme.css
   (--wf-*) instead of a hand-copy of Performance's own :root -- this is
   exactly the drift risk flagged when this shared file was scoped
   (this file's own comment already admitted it was "kept in sync by eye").
   Zero visual change: values matched Performance's exactly already. */
:root {
  --bg: var(--wf-bg);
  --panel: var(--wf-panel);
  --border: var(--wf-border);
  --text: var(--wf-text);
  --muted: var(--wf-muted);
  --accent: var(--wf-accent);
  --accent2: var(--wf-accent2);
  --good: var(--wf-good);
  --bad: var(--wf-bad);
  --tag-text: var(--wf-tag-text);
  --font-display: inherit;
}
:root[data-theme="nato"] {
  --font-display: 'Black Ops One', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; width: 100%; }
/* Opt the shell's OWN document out of the shared `scrollbar-gutter:
   stable both-edges` rule (../shared/wildfire-theme.css, 2026-09-08).
   That rule is for the five framed apps, whose documents actually
   scroll; this document never does (the iframe scrolls internally), so
   reserving gutters here would only shrink the iframe by 2x17px and
   push the app's scrollbar in from the window edge for no benefit. */
html { scrollbar-gutter: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="nato"] .brand,
:root[data-theme="nato"] .tab.active,
:root[data-theme="nato"] h2 {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}
:root[data-theme="nato"] .tab { text-transform: uppercase; letter-spacing: 0.03em; }
:root[data-theme="nato"] .card,
:root[data-theme="nato"] table,
:root[data-theme="nato"] .table-scroll,
:root[data-theme="nato"] .news-list li,
:root[data-theme="nato"] .chart-wrap,
:root[data-theme="nato"] #syncBtn,
:root[data-theme="nato"] #themeToggle,
:root[data-theme="nato"] #logoutBtn,
:root[data-theme="nato"] .tag {
  border-radius: 2px;
}
:root[data-theme="nato"] #syncBtn,
:root[data-theme="nato"] #themeToggle,
:root[data-theme="nato"] #logoutBtn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* header/.header-inner/.brand/.brand span/.header-spacer/.header-actions
   layout moved to the shared shared/wildfire-theme.css file (Phase 3,
   2026-09-07) -- this app's own copy had already drifted (was .brand
   accent-orange with a muted-grey span, unlike the other four apps which
   were switched to text/accent-orange in the 2026-09-05 brand-recolour
   pass; the shell itself was explicitly left out of that pass at the
   time). Removed here so the shell now renders "🔥 WILDFIRE APP" the
   same near-white as the other apps' "WILDFIRE" -- there's no separate
   section-name <span> in the shell's own markup for the orange half to
   apply to, so this is the one visible change from this pass: the shell's
   own top brand text goes from orange to near-white, matching everyone
   else's "WILDFIRE" half. Flagged for Rob to confirm he's happy with it. */
.status { color: var(--muted); font-size: 13px; }
.logout-link { color: var(--muted); font-size: 13px; text-decoration: none; }
.logout-link:hover { color: var(--accent); }
#syncBtn {
  background: var(--accent);
  border: none;
  color: #1a1a1a;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
#syncBtn:hover { opacity: 0.9; }
/* 2026-09-18: the Log out button shares the toggle's look (Rob asked for
   one once everything went behind the login). */
#themeToggle, #logoutBtn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
#themeToggle:hover, #logoutBtn:hover { border-color: var(--accent); }
nav#tabs {
  position: relative;
  /* 2026-09-08: give the row itself the panel colour. Each inactive
     .tab already fills with --panel and the active tab fills with
     --bg to fuse with the content below -- but nav#tabs had no
     background of its own, so the gaps around/behind the tabs (and
     the active tab's own "invisible" fill) showed the page's --bg
     straight through. On mobile, where only 3-4 tabs are visible at
     once, that read as the active tab's colour "stopping" partway
     and the nav continuing in a different, inconsistent background
     to the right (Rob, 2026-09-08). The right-edge scroll fade
     below already fades TO --panel, which only looks correct once
     the row actually IS --panel -- this was the missing piece. */
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
/* Fade hint on the non-scrolling parent (the scroll container itself is
   .tabs-inner) so it stays pinned to the edge instead of scrolling away. */
nav#tabs::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--panel));
  pointer-events: none;
}
.tabs-inner {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Rounded browser-style tabs, 2026-09-05 (Rob: the angled "folder tab"
   clip-path from earlier today looked "really odd" and "all different
   sizes" -- the trapezoid inset scaled with each tab's own width, so
   short labels (WIKI) and long ones (RW PAYMENTS) ended up looking like
   noticeably different shapes rather than one consistent tab style.
   Replaced with plain rounded-top corners, closer to Chrome's own tab
   shape (Rob's reference: https://codepen.io/hluebbering/pen/PoaWLrw) --
   same idea of "a tab poking up", but every tab now reads as the same
   shape regardless of label length. Inactive tabs sit at the header's own
   (--panel) colour; the active tab is coloured like the page body (--bg)
   so it visually fuses with the content beneath it rather than reading as
   a separate button. */
.tab {
  flex: 0 0 auto;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  color: var(--muted);
  padding: 10px 22px 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--border);
  margin-bottom: -1px;
  z-index: 1;
}
main { padding: 24px; max-width: 1280px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.card .value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
  border-radius: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0;
}
th, td { padding: 10px 12px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; }
/* League Table sortable column headers — click to sort, click again to flip
   direction. The arrow only shows on whichever column is currently active.
   Wrapped (not nowrap) so long labels like "ENERGY REFILLS" break onto a
   second line instead of forcing every column wider and pushing later ones
   (ELO) off the edge of the table. */
th.sortable { cursor: pointer; user-select: none; white-space: normal; max-width: 90px; }
th.sortable:hover { color: var(--text); }
th.sortable::after { content: ''; display: inline-block; width: 8px; }
th.sortable[data-dir="asc"]::after { content: '▲'; margin-left: 3px; color: var(--accent); }
th.sortable[data-dir="desc"]::after { content: '▼'; margin-left: 3px; color: var(--accent); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }
td a { color: var(--accent2); text-decoration: none; }
td a:hover { text-decoration: underline; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.controls select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
.controls .hint { color: var(--muted); font-size: 12px; flex: 1 1 260px; }
.score-cell { position: relative; min-width: 90px; font-weight: 700; }
.score-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  opacity: 0.18;
  border-radius: 4px;
}
.score-cell span { position: relative; z-index: 1; }
#leaderboardTable tbody tr:nth-child(1) td:first-child,
#leaderboardTable tbody tr:nth-child(2) td:first-child,
#leaderboardTable tbody tr:nth-child(3) td:first-child { font-size: 16px; }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li {
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.news-list .ts { color: var(--muted); margin-right: 10px; }
/* Torn's own news text comes with embedded <a href="...profiles.php?XID=..."> player
   links — style them to match the dark theme instead of the browser's default blue. */
.news-list a { color: var(--accent2); text-decoration: none; font-weight: 600; }
.news-list a:hover { text-decoration: underline; }
.news-list a:visited { color: var(--accent2); }
.tag { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--accent2); color: var(--tag-text); margin-right: 8px; text-transform: uppercase; }
.pos { color: var(--good); }
.neg { color: var(--bad); }
/* Training tab — the lifetime total shown alongside each windowed gain. */
.stat-total { color: var(--muted); font-size: 11px; }
.chart-wrap {
  position: relative;
  height: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
  /* 2026-09-08: previously forced the brand text ("WILDFIRE"/"APP") and
     the header-actions row (Guide/theme toggle) onto their own separate
     full-width rows below the brand -- a 3-line header (verified only
     by code inspection back on 2026-09-04, never on a real phone). Rob,
     testing for real on an iPhone 14 Pro Max (430px): "the 'WILDFIRE
     app' title has jumped to two lines, with 'guide' and theme toggle
     taking up too much space." Reworked to stay compact and let normal
     flex-wrap decide the line break (brand + actions comfortably fit
     one row at this width once trimmed down; on anything narrower it
     falls back to two clean rows -- brand alone, then actions -- rather
     than the old forced spread-to-edges layout). */
  .header-inner { padding: 10px 14px; gap: 8px; }
  .brand { font-size: 16px; }
  .brand span { font-size: 11px; margin-left: 6px; }
  .status { flex: 1 1 auto; min-width: 0; }
  .logout-link { font-size: 12px; }
  #syncBtn, #themeToggle, #logoutBtn { padding: 6px 10px; font-size: 12px; }
  .tabs-inner { padding: 8px 14px 0; }
  .tab { padding: 8px 12px; font-size: 13px; }
  main { padding: 14px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 16px; }
  .card { padding: 12px; }
  .card .value { font-size: 20px; margin-top: 4px; }
  .chart-wrap { height: 220px; padding: 10px; }
  h2 { font-size: 16px; }
  table { font-size: 12px; }
  th, td { padding: 8px 10px; }
  .news-list li { padding: 8px 10px; font-size: 12px; }
}

/* ============================================================
   WILDFIRE App shell additions — this file starts as an exact copy of
   WILDFIRE Faction Performance's own style.css (kept in sync by eye,
   not a build step) so the shell's header/nav/theme toggle look
   identical to both embedded apps. Everything below this line is
   shell-only: it turns <main> from a padded content column into a
   full-bleed iframe container. See claude/wildfire-decisions-log.md
   2026-09-03 "single front end" entry for why an iframe shell was
   chosen over a full front-end rewrite.
   ============================================================ */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
header, nav#tabs { flex: 0 0 auto; }
main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}
#appFrame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}

/* 2026-09-19 (Rob): widescreen. Every page centres its content at 1280px,
   but this shell's header bar, tab bar and iframe ran the full monitor
   width, so on a wide screen the chrome and the content didn't line up.
   The three bands now share that same 1280px column, centred, with a
   hairline edge either side once the window is wider than the column
   (the framed app's own header bar then fills the iframe = the column, so
   everything lines up top to bottom). Narrow/mobile: max-width never
   binds, nothing changes. */
header, nav#tabs, main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 1300px) {
  header, nav#tabs, main {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}