/* ---- monochrome palette: black / white / grey only. The single chromatic accents are the semantic
   value colors (green = good, red = bad); everything structural is greyscale. ---- */
:root{
  --acc-dark:#c9d1d9;   /* dark-mode links / rules / headings (light grey; links underlined) */
  --acc-bright:#e6ebf0; /* brighter grey for card headings */
  --acc-hover:#ffffff;  /* hover -> white */
  --headbar:#2f343b;    /* neutral dark-grey table-header / hero bar */
  --headbar-h:#3a4047;  /* header hover */
  --acc-light:#2d3138;  /* light-mode links / rules (near-black grey) */
}

/* ---- dark theme overrides; light remains the template default ---- */
html[data-theme="dark"] body{background:#1a1d21;color:#d6dce3}
html[data-theme="dark"] a{color:var(--acc-dark)}
html[data-theme="dark"] h1{border-bottom-color:var(--acc-dark)}
html[data-theme="dark"] h2{border-bottom-color:#313640}

/* surfaces */
html[data-theme="dark"] table,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .card,
html[data-theme="dark"] .chart,
html[data-theme="dark"] .scroll,
html[data-theme="dark"] .filterbar{background:#23272d;border-color:#313640}

/* table internals */
html[data-theme="dark"] th,html[data-theme="dark"] td{border-bottom-color:#313640}
html[data-theme="dark"] th{background:var(--headbar);color:#e8eef0}
html[data-theme="dark"] th:hover,
html[data-theme="dark"] table.sortable th:hover{background:var(--headbar-h)}
html[data-theme="dark"] tr:hover td{background:#2c313a}
html[data-theme="dark"] .tot{background:#2c313a}

/* muted text */
html[data-theme="dark"] .sub,
html[data-theme="dark"] .none,
html[data-theme="dark"] .kpi .l{color:#99a3ad}
html[data-theme="dark"] .bio{color:#c4ccd4}
html[data-theme="dark"] .biofacts{color:#9aa3ad} html[data-theme="dark"] .biofacts .bp{color:#7d8590}

/* card headings/notes (accent heading reads on the dark panel) */
html[data-theme="dark"] .card h3{color:var(--acc-bright)}
html[data-theme="dark"] .card .note,
html[data-theme="dark"] .mixline{color:#8a93a0}

/* value accents (semantic green/red — independent of the brand accent) */
html[data-theme="dark"] .pos{color:#4cc08e}
html[data-theme="dark"] .neg{color:#e8836a}
html[data-theme="dark"] .ws{color:#e0a93a}

/* tinted metric columns (sourcing % + Acq Lev) */
html[data-theme="dark"] .mixcol{background:#1f2329;color:#eef2f5}
html[data-theme="dark"] th.mixcol{background:var(--headbar-h);color:#eef2f5}
html[data-theme="dark"] tr:hover .mixcol{background:#2c313a;color:#fff}

/* metric / resources explainer pages */
html[data-theme="dark"] code{background:#23272d;color:#d6dce3}
html[data-theme="dark"] .worked{background:#1e242b;border-left-color:var(--acc-dark)}
html[data-theme="dark"] img{border-color:#313640;background:#f7f8fa}
html[data-theme="dark"] table.bins{background:#23272d}
html[data-theme="dark"] table.bins th{background:var(--headbar);color:#e8eef0}
html[data-theme="dark"] table.bins th,html[data-theme="dark"] table.bins td{border-bottom-color:#313640}
html[data-theme="dark"] table.bins tr:hover td{background:#2c313a}
html[data-theme="dark"] .binnote{color:#99a3ad}

/* form controls / nav buttons */
html[data-theme="dark"] select,
html[data-theme="dark"] .step,
html[data-theme="dark"] .seasontog a,
html[data-theme="dark"] .filterbar select{background:#23272d;color:#d6dce3;border-color:var(--acc-dark)}
html[data-theme="dark"] .step,
html[data-theme="dark"] .seasontog a{color:var(--acc-dark)}
html[data-theme="dark"] .seasontog a.on{background:var(--headbar-h);color:#fff}

/* amber banner -> muted dark amber */
html[data-theme="dark"] .banner{background:#332c1a;border-color:#7a5a1e;border-left-color:#e0a93a;color:#e7d9bd}

/* GM hero — outlined, barely-filled box in dark mode (grey outline; inner KPI cards a touch darker) */
html[data-theme="dark"] .hero{background:#1e2228;color:#d6dce3;border-color:#3a4047}
html[data-theme="dark"] .hero .trophy{border-left-color:#313640}
html[data-theme="dark"] .hero .trophy .lbl,
html[data-theme="dark"] .hero .kpi .k{color:#99a3ad}
html[data-theme="dark"] .hero .kpis{border-top-color:#313640}
html[data-theme="dark"] .hero .kpi{background:#24282e;border-color:#313640}
html[data-theme="dark"] .hero .kpi .v.pos{color:#4cc08e}
html[data-theme="dark"] .hero .kpi .v.neg{color:#e8836a}
html[data-theme="dark"] .hero .kpi .rank{background:#3a4047}

/* light/dark toggle — inline in the header nav */
#themetog{font-family:'Roboto Mono',ui-monospace,monospace;font-size:12px;font-weight:700;cursor:pointer;
  border:1px solid #2d3138;background:#fff;color:#2d3138;border-radius:0;padding:3px 10px;line-height:1.4}
#themetog:hover{filter:brightness(.97)}
html[data-theme="dark"] #themetog{background:#23272d;color:#d6dce3;border-color:var(--acc-dark)}

/* ---- shared orientation rail + footer ---- */
/* full-width rail: breaks out of each page's own max-width so the header is identical site-wide,
   with its content centered at one fixed width regardless of how wide the page below it is */
.topbar{position:relative;left:50%;transform:translateX(-50%);width:100vw;margin-bottom:18px;
  border-bottom:1px solid #cdd5dc;font-size:12px}
/* fixed height + line-height:1 so the header is identical on every page (it used to inherit each page's
   body line-height — 1.5 vs 1.55 — which made it shift slightly between pages) */
.topbar-inner{display:flex;align-items:center;gap:18px;max-width:1500px;margin:0 auto;padding:0 18px;height:40px;box-sizing:border-box;line-height:1}
.topbar .brand{font-weight:700;color:#2d3138;text-decoration:none;letter-spacing:.4px;text-transform:uppercase}
.topbar nav{display:flex;align-items:center;gap:15px;margin-left:auto}
.topbar nav a{color:#56616c;text-decoration:none}
.topbar nav a:hover,.topbar .brand:hover{color:var(--acc-light)}
/* utilities cluster (𝕏 + theme toggle) — sits at the right end of the topbar, after nav on desktop;
   moves to the brand row on mobile so nav can wrap onto its own line below */
.topbar-utils{display:flex;align-items:center;gap:15px}
.topbar-utils a{color:#56616c;text-decoration:none}
.topbar-utils a:hover{color:var(--acc-light)}
html[data-theme="dark"] .topbar-utils a{color:#9aa3ad}
html[data-theme="dark"] .topbar-utils a:hover{color:var(--acc-hover)}

/* nav dropdown ("Trades ▾" → Database / Simulator) — click-toggled, click-outside-closes */
.navdrop{position:relative;display:inline-block}
.navdrop-btn{font:inherit;font-size:12px;background:none;border:none;color:#56616c;cursor:pointer;padding:0;line-height:1;display:inline-flex;align-items:center;gap:3px}
.navdrop-btn:hover{color:var(--acc-light)}
.navdrop.open .navdrop-btn{color:var(--acc-light)}
.navdrop-caret{font-size:9px;opacity:.7;transition:transform .15s ease}
.navdrop.open .navdrop-caret{transform:rotate(180deg)}
.navdrop-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid #cdd5dc;min-width:140px;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:4px 0}
.navdrop.open .navdrop-menu{display:block}
.navdrop-menu a{display:block;padding:6px 14px;color:#2d3138;text-decoration:none;font-size:12px}
.navdrop-menu a:hover{background:#f3f6f8;color:#2d3138}
html[data-theme="dark"] .navdrop-btn{color:#9aa3ad}
html[data-theme="dark"] .navdrop-btn:hover,html[data-theme="dark"] .navdrop.open .navdrop-btn{color:var(--acc-hover)}
html[data-theme="dark"] .navdrop-menu{background:#23272d;border-color:#3a4047;box-shadow:0 4px 12px rgba(0,0,0,.4)}
html[data-theme="dark"] .navdrop-menu a{color:#d6dce3}
html[data-theme="dark"] .navdrop-menu a:hover{background:#2c313a;color:#fff}
.site-footer{border-top:1px solid #cdd5dc;margin-top:40px;padding:14px 0 30px;font-size:11px;color:#889;line-height:1.7}
.site-footer a{color:#667}
.site-footer .ft-brand{color:#2d3138;font-weight:700;text-transform:uppercase;letter-spacing:.4px}

html[data-theme="dark"] .topbar{border-bottom-color:#313640}
html[data-theme="dark"] .topbar .brand{color:#dde2e8}
html[data-theme="dark"] .topbar nav a{color:#9aa3ad}
html[data-theme="dark"] .topbar nav a:hover,html[data-theme="dark"] .topbar .brand:hover{color:var(--acc-hover)}
html[data-theme="dark"] .site-footer{border-top-color:#313640;color:#7d8590}
html[data-theme="dark"] .site-footer a{color:#9aa3ad}
html[data-theme="dark"] .site-footer .ft-brand{color:#cdd4dc}

/* ============================================================================
   MOBILE BASELINE — everything below fires ONLY at ≤720px wide.
   Desktop (≥721px) renders byte-identical to before. Page-specific tweaks live
   in each template's own <style>; this block handles only what's shared
   site-wide (topbar, footer) and the failure modes that hit every page.
   ============================================================================ */
@media (max-width: 720px){
  /* Topbar nav doesn't fit one 390px row, so split into two cleanly: brand + utils (𝕏, theme toggle)
     on the top row, all the nav links wrap onto the second row. The trick is `width:100%` + `order:3`
     on nav — it forces nav to its own row regardless of how many items it has, and `order:2` on utils
     pulls them next to the brand on row 1. Without this, utils would get orphaned to a third row. */
  .topbar-inner{height:auto;min-height:40px;padding:6px 12px;gap:8px 14px;flex-wrap:wrap;line-height:1.3}
  .topbar-utils{order:2;margin-left:auto;gap:13px}
  .topbar nav{order:3;width:100%;margin-left:0;gap:11px;flex-wrap:wrap;justify-content:flex-start}
  .topbar nav a{font-size:11.5px}
  .topbar-utils a{font-size:11.5px}
  .topbar .brand{font-size:13px}
  #themetog{font-size:11px;padding:2px 8px}
  /* Nav dropdown on mobile: render as a sub-list inline (no absolute overlay that overflows the
     narrow viewport). Indented under the parent button so it visually reads as nested nav. */
  /* Mobile nav: hide the "Trades ▾" dropdown toggle and just show Database + Simulator as regular
     sibling links inline with the rest of the nav. Toggling a dropdown on a touch device where the
     nav already wraps was creating layout shifts and looked broken. Flat is better here. */
  .navdrop{display:contents}                                           /* dissolve the wrapper so kids participate in flex */
  .navdrop-btn,.navdrop-caret{display:none}                            /* hide the "Trades ▾" toggle button on mobile */
  .navdrop-menu{position:static;display:contents;border:none;box-shadow:none;background:transparent;padding:0;min-width:0;width:auto;margin:0}
  .navdrop-menu a{display:inline;padding:0;font-size:11.5px;color:#56616c;background:transparent;text-decoration:none}
  .navdrop-menu a:hover{color:var(--acc-light);background:transparent}
  html[data-theme="dark"] .navdrop-menu a{color:#9aa3ad;background:transparent}
  html[data-theme="dark"] .navdrop-menu a:hover{color:var(--acc-hover);background:transparent}
  /* Footer: tighter padding, slightly looser line-height for readability on small fonts */
  .site-footer{font-size:10.5px;line-height:1.65;padding:12px 0 24px}
  /* Stop the topbar's left:50%/100vw trick from forcing horizontal page scroll
     on narrow phones (browser quirk: 100vw can include the scrollbar gutter) */
  html,body{overflow-x:hidden}
}