/* ============================================================
   VGC Tool Suite — DyreWolf brand v1.2
   Royal Blue dominates · Pokéball Red accents only · sharp corners
   Bebas Neue throughout (display + body) — Share Tech Mono retired
   because its rendering at small sizes hurt readability.
   Light Data Gray background with 40px grid texture
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  /* DyreWolf palette (verbatim from DS-001 v1.2) */
  --royal-blue:        #1648D4;
  --royal-blue-soft:   rgba(22, 72, 212, 0.08);
  --royal-blue-mid:    rgba(22, 72, 212, 0.18);
  --deep-navy:         #050F2C;
  --pokeball-red:      #CC1526;
  --pokeball-red-soft: rgba(204, 21, 38, 0.08);
  --white:             #FFFFFF;
  --charcoal:          #0A0A0A;
  --data-gray:         #F1F3F8;
  --grid-line:         #D8DCE8;
  --label-gray:        #7A82A0;

  /* Semantic aliases — kept short so JS-set styles stay readable */
  --bg:           var(--data-gray);
  --panel:        var(--white);
  --border:       var(--grid-line);
  --text:         var(--charcoal);
  --muted:        var(--label-gray);
  --accent:       var(--royal-blue);
  --accent-alt:   var(--pokeball-red);

  /* Brand has no defined success/warning tokens. Royal Blue carries
     positive signal (it's the "data numbers" color); Pokéball Red
     carries negative/warning. Where we need a non-clashing positive
     callout that isn't a data number, we use a muted brand-aligned green. */
  --success: #2D7A4E;
  --warning: #C8A030;     /* matches the Rock type color in the brand guide */

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  /* Aliased to --font-display: every text element in the suite uses
     Bebas Neue now. Keeping the --font-mono token instead of removing it
     means every existing `font-family: var(--font-mono)` rule keeps
     working without a sweep. */
  --font-mono:    var(--font-display);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Brand "Existing Reference": animated Royal Blue → Deep Navy gradient.
     background-size > 100% gives the gradient room to drift via animation. */
  background: linear-gradient(135deg,
    var(--royal-blue) 0%,
    var(--deep-navy)  55%,
    var(--royal-blue) 100%);
  background-size: 220% 220%;
  background-attachment: fixed;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  animation: bg-drift 28s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* 32px white grid overlay at 5% opacity — brand's "Dark overlays" spec. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 0;
}

/* Scan line — 2px sweep, Royal Blue glow halo, 3s linear loop.
   z-index sits ABOVE the gradient/grid backdrop (z:0) but BELOW the
   .app stacking context (z:1) so it passes behind cards and the header. */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(180, 210, 255, 0.85) 50%,
    transparent 100%);
  box-shadow:
    0 0 12px rgba(22, 72, 212, 0.85),
    0 0 28px rgba(22, 72, 212, 0.45);
  pointer-events: none;
  z-index: 0;
  animation: scan-sweep 3.4s linear infinite;
}
@keyframes scan-sweep {
  0%   { transform: translateY(-4px); opacity: 0; }
  6%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* The .app wrapper needs explicit z-index so it sits above the grid overlay. */
.app { position: relative; z-index: 1; }

a { color: var(--royal-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: normal;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0 0 12px;
}
h1 { font-size: 30px; letter-spacing: 4px; }
h2 { font-size: 20px; letter-spacing: 3px; }
h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--label-gray);
  margin: 0 0 10px;
  font-weight: normal;
}

code, pre { font-family: var(--font-mono); }
code {
  background: var(--data-gray);
  border: 1px solid var(--grid-line);
  padding: 1px 5px;
  font-size: 13px;
  color: var(--charcoal);
}

/* ============================================================
   Layout
   ============================================================ */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--grid-line);
  position: relative;
}
/* Manual AdSense placements (slot IDs configured in ads.js).
   .ad-banner: horizontal unit injected at the top of .app-main, under the
   header. .ad-rail: vertical skyscraper fixed in the right margin; ads.js
   toggles its display based on available room so it never overlaps content. */
.ad-banner {
  margin: 0 0 16px;
  text-align: center;
  min-height: 90px;            /* reserve space to avoid layout shift */
}
.ad-rail {
  position: fixed;
  top: 110px;
  right: 16px;
  width: 160px;
  z-index: 40;
  display: none;               /* shown by ads.js only when the margin fits it */
}

/* Suite navigation in the header ribbon — links to every tool (incl. the EV
   Optimizer) so navigation is consistent across the whole suite. */
.suite-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.suite-nav .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .suite-nav { width: 100%; order: 3; justify-content: flex-start; margin-top: 8px; }
}

/* Pokéball-red rule beneath the header — the brand's "Red rule line" motif */
.app-header::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -1px;
  width: 110px;
  height: 2px;
  background: var(--pokeball-red);
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* ============================================================
   Wordmark
   ============================================================ */
.brand {
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}
.brand .wordmark {
  font-size: 22px;
  letter-spacing: 5px;
  color: var(--charcoal);
  line-height: 1;
}
.brand .wordmark .bar {
  color: var(--pokeball-red);
  margin: 0 2px;
}
.brand .wordmark .secondary {
  color: var(--charcoal);
  opacity: 0.85;
}
.brand .brand-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--label-gray);
  text-transform: uppercase;
}

/* ============================================================
   Progress bar
   ============================================================ */
.progress {
  display: flex;
  gap: 1px;
  background: var(--grid-line);
  padding: 1px;
  margin-bottom: 24px;
  border: 1px solid var(--grid-line);
}
.progress-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--white);
  color: var(--label-gray);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: background 0.12s, color 0.12s;
}
.progress-step:hover { background: var(--data-gray); text-decoration: none; }
.progress-step .step-num {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--label-gray);
  color: var(--label-gray);
  background: transparent;
  font-size: 13px;
  letter-spacing: 0;
  font-family: var(--font-mono);
}
.progress-step.is-active {
  color: var(--charcoal);
  background: var(--royal-blue-soft);
  box-shadow: inset 0 -3px 0 var(--royal-blue);
}
.progress-step.is-active .step-num {
  border-color: var(--royal-blue);
  background: var(--royal-blue);
  color: var(--white);
}
.progress-step.is-complete {
  color: var(--charcoal);
}
.progress-step.is-complete .step-num {
  border-color: var(--pokeball-red);
  background: var(--pokeball-red);
  color: var(--white);
}
.progress-step.is-locked { cursor: not-allowed; opacity: 0.5; }
.progress-step.is-locked:hover { background: var(--white); }

/* ============================================================
   Cards — white panel with 4px Pokéball Red left border
            + Royal Blue L-bracket markers in the top-right corner
   ============================================================ */
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--grid-line);
  border-left: 4px solid var(--pokeball-red);
  border-radius: 0;
  padding: 22px 26px;
  margin-bottom: 16px;
}
/* Top-right L-bracket corner marker */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--royal-blue);
  border-right: 2px solid var(--royal-blue);
  pointer-events: none;
}
/* Bottom-right L-bracket corner marker */
.card::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid var(--royal-blue);
  border-right: 2px solid var(--royal-blue);
  pointer-events: none;
}

.card-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.card-header h1, .card-header h2 { margin-bottom: 4px; }

/* Default `.muted` assumes we're on the dark body. Inside white panels
   (.card, .app-header, .progress-step, .team-row, .link-out-card) it
   flips to the original Label Gray so charcoal-on-white legibility holds. */
.muted { color: rgba(255, 255, 255, 0.72); }
.card .muted,
.card-header .muted,
.app-header .muted,
.progress-step .muted,
.team-row .muted,
.link-out-card .muted,
.ranker-table .muted { color: var(--label-gray); }
.small { font-size: 13px; }

/* Hint paragraph — body copy in Bebas Neue (the only face now), mid-gray */
.hint {
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 13px;
  margin: 0 0 18px;
  line-height: 1.55;
  max-width: 78ch;
}

/* Note / banner — Royal Blue rule on the left, no fill (red is accent-only) */
.note {
  padding: 10px 14px;
  border-left: 3px solid var(--royal-blue);
  background: var(--royal-blue-soft);
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 16px;
  border-radius: 0;
}
.note strong { font-family: var(--font-display); letter-spacing: 2px; font-weight: normal; }

/* ============================================================
   Buttons — sharp, mono labels, Royal Blue primary
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--charcoal);
  border-radius: 0;
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-decoration: none;
}
.btn:hover { background: var(--charcoal); color: var(--white); text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { background: var(--white); color: var(--charcoal); }

.btn-primary {
  background: var(--royal-blue);
  border-color: var(--royal-blue);
  color: var(--white);
}
.btn-primary:hover { background: var(--deep-navy); border-color: var(--deep-navy); color: var(--white); }

/* Ghost buttons default to on-dark colors (since they often live on the
   blue body), with an override for white-panel contexts so they don't
   wash out against a card. */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.75);
}

/* Buy Me a Coffee header button — inline anchor, not the floating widget.
   The widget script is blocked by most ad blockers and Brave Shields, so
   the suite ships a plain anchor styled in BMC yellow instead. Lives in
   the app-header next to the theme toggle on every page. */
.bmc-btn {
  background: #FFDD00;
  border: 1px solid #FFDD00;
  color: #000;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  text-transform: none;
  white-space: nowrap;
}
.bmc-btn:hover {
  background: #FFCC00;
  border-color: #FFCC00;
  color: #000;
  text-decoration: none;
}
/* On dark mode the BMC yellow already contrasts well with the navy
   surface, so no extra override is needed; just keep the same colors
   so the button doesn't visually flip. */
[data-theme="dark"] .bmc-btn,
[data-theme="dark"] .bmc-btn:hover {
  color: #000;
}
.btn-ghost:hover {
  background: transparent;
  color: var(--white);
  text-decoration: none;
}
.card .btn-ghost,
.app-header .btn-ghost { color: var(--label-gray); }
.card .btn-ghost:hover,
.app-header .btn-ghost:hover { color: var(--royal-blue); }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.btn-row.right { justify-content: flex-end; }

/* ============================================================
   Inputs
   ============================================================ */
input[type="text"], select, textarea {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--grid-line);
  border-radius: 0;
  color: var(--charcoal);
}
input[type="text"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--royal-blue);
  box-shadow: inset 0 -2px 0 var(--royal-blue);
}

/* ============================================================
   Team grid
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}
.team-row {
  display: grid;
  /* slot-num · sprite · input · status · actions */
  grid-template-columns: 36px 96px 1fr 130px auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--data-gray);
}
.team-row .slot-sprite {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--grid-line);
}
.team-row .slot-sprite .pkm-icon-empty { opacity: 0.35; }
.team-row .slot-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.team-row .slot-actions .btn {
  font-size: 13px;
  padding: 4px 9px;
  letter-spacing: 2px;
}
.team-row .ev-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--royal-blue);
  border: 1px solid var(--royal-blue);
  padding: 2px 6px;
  border-radius: 2px;
}
/* Per-slot remove button — sits in the same .slot-actions row as
   the Optimize link, but flagged in pokeball-red so it reads as a
   destructive action. Inherits font/padding overrides from
   .slot-actions .btn above. */
.team-row .slot-remove-btn {
  background: var(--white);
  border: 1px solid var(--pokeball-red);
  color: var(--pokeball-red);
  cursor: pointer;
}
.team-row .slot-remove-btn:hover {
  background: var(--pokeball-red);
  color: var(--white);
}
.team-row .slot-num {
  color: var(--label-gray);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
}
.team-row input[type="text"] {
  width: 100%;
}
.team-row .row-status {
  color: var(--label-gray);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: right;
}
.team-row .row-status.ok  { color: var(--royal-blue); }
.team-row .row-status.bad { color: var(--pokeball-red); }

/* ============================================================
   Stage 2/3 link-out cards
   ============================================================ */
.link-out-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin-bottom: 16px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}
.link-out-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--white);
}
.link-out-card .lo-name {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--charcoal);
}
.link-out-card .lo-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.link-out-card .btn { font-size: 13px; padding: 5px 10px; letter-spacing: 2px; }

/* ============================================================
   Showdown export
   ============================================================ */
.export-textarea {
  width: 100%;
  min-height: 360px;
  background: var(--data-gray);
  border: 1px solid var(--grid-line);
  border-radius: 0;
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  padding: 14px;
  resize: vertical;
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: var(--charcoal);
  border-left: 3px solid var(--royal-blue);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 1000;
}
.toast.show { opacity: 1; }

/* ============================================================
   Ranker table
   ============================================================ */
.ranker-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--charcoal);
  border-radius: 0;
  overflow: hidden;
}
.view-toggle button {
  border: 0;
  background: var(--white);
  color: var(--label-gray);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border-right: 1px solid var(--charcoal);
}
.view-toggle button:last-child { border-right: 0; }
.view-toggle button.active {
  background: var(--royal-blue);
  color: var(--white);
}

.ranker-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--grid-line);
  background: var(--white);
  max-height: 420px;
  overflow-y: auto;
}
.ranker-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 16px;
}
.ranker-table th,
.ranker-table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--grid-line);
  white-space: nowrap;
}
/* Body cells default to charcoal so columns without an explicit color
   class (Games / Limitless% / Showdown% / WR) stay readable on the
   white panel background. Specific colored cells (.lift-pos, .conf-*,
   .name-cell) still override below. */
.ranker-table tbody td { color: var(--charcoal); }
.ranker-table th:first-child,
.ranker-table td:first-child {
  text-align: left;
}
.ranker-table th {
  position: sticky;
  top: 0;
  background: var(--data-gray);
  color: var(--label-gray);
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid var(--royal-blue);
}
.ranker-table th:hover { color: var(--charcoal); }
.ranker-table th.sorted { color: var(--royal-blue); }
.ranker-table th.sorted::after { content: " ↓"; }
.ranker-table th.sorted.asc::after { content: " ↑"; }
.ranker-table tbody tr:hover { background: var(--data-gray); }

.ranker-table td.name-cell {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--charcoal);
}
.ranker-table .lift-pos { color: var(--royal-blue); }
.ranker-table .lift-neg { color: var(--pokeball-red); }
.ranker-table .conf-low  { color: var(--warning); }
.ranker-table .conf-mod  { color: var(--label-gray); }
.ranker-table .conf-hig  { color: var(--royal-blue); }
.ranker-table .add-btn {
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--charcoal);
  border-radius: 0;
  color: var(--charcoal);
  cursor: pointer;
}
.ranker-table .add-btn:hover { background: var(--royal-blue); border-color: var(--royal-blue); color: var(--white); }
.ranker-table .add-btn.in-team {
  background: var(--pokeball-red);
  border-color: var(--pokeball-red);
  color: var(--white);
  cursor: default;
}
.ranker-empty {
  padding: 28px;
  text-align: center;
  color: var(--label-gray);
  font-family: var(--font-mono);
  font-size: 15px;
}

/* Rankings page filters */
.rankings-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
}
.rankings-controls input[type="number"],
.rankings-controls input[type="text"],
.rankings-controls select {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--charcoal);
  background: var(--white);
  border-radius: 0;
  margin-left: 6px;
}

/* Ranker pager (below the table) */
.ranker-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 4px;
  flex-wrap: wrap;
}
.ranker-pager .pager-size {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 2px 4px;
  background: var(--white);
  border: 1px solid var(--charcoal);
  border-radius: 0;
}

/* ============================================================
   Cores row
   ============================================================ */
.cores-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.core-input-wrap {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.core-input-wrap label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--label-gray);
}
.core-input-wrap label::before { content: "// "; color: var(--pokeball-red); }
.core-input-wrap input[type="text"] {
  font-size: 16px;
  padding: 10px 12px;
}
.core-input-wrap .core-status {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--label-gray);
  font-family: var(--font-mono);
  min-height: 16px;
}
.core-input-wrap .core-status.ok  { color: var(--royal-blue); }
.core-input-wrap .core-status.bad { color: var(--pokeball-red); }

/* Sprite + three-stat strip shown under a populated core. Flex layout so
   the 88px sprite anchors the row and the three stats + add button flow
   to its right with consistent gridlines. */
.core-stats {
  display: flex;
  align-items: stretch;
  gap: 1px;
  margin-top: 6px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
}
.core-stats .core-sprite {
  background: var(--white);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.core-stats .core-sprite .pkm-icon {
  display: block;
}
.core-stats .stat {
  background: var(--white);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}
.core-stats .core-add-cell {
  flex: 0 0 auto;
  justify-content: center;
}
.core-stats .stat .lbl {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2.5px;
  color: var(--label-gray);
  text-transform: uppercase;
}
.core-stats .stat .lbl::before { content: "// "; color: var(--pokeball-red); }
.core-stats .stat .val {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--royal-blue);
}
.core-stats .stat .val.muted { color: var(--label-gray); }
.core-stats .stat .badge {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--pokeball-red);
  color: var(--white);
  padding: 2px 8px;
  width: max-content;
}
.core-stats .add-btn {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--charcoal);
  border-radius: 0;
  color: var(--charcoal);
  cursor: pointer;
}
.core-stats .add-btn:hover:not(:disabled) {
  background: var(--royal-blue);
  border-color: var(--royal-blue);
  color: var(--white);
}
.core-stats .add-btn.in-team {
  background: var(--pokeball-red);
  border-color: var(--pokeball-red);
  color: var(--white);
  cursor: default;
}
.core-stats .add-btn:disabled:not(.in-team) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   Custom autocomplete dropdown (replaces native <datalist>)
   Stays dark with white text consistently even when filtered to
   a single match. Used for the cores + team slot inputs.
   ============================================================ */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--deep-navy);
  border: 1px solid var(--royal-blue);
  border-top: 2px solid var(--royal-blue);
  max-height: 240px;
  overflow-y: auto;
  z-index: 200;
  display: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.ac-list.open { display: block; }
.ac-item {
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.ac-item:hover,
.ac-item.highlighted {
  background: var(--royal-blue);
}
.ac-item .ac-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-item .ac-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.ac-item.highlighted .ac-meta { color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   Mega-Pair panel — surfaces inline when a Mega is picked as Core 1
   ============================================================ */
.mega-pair-panel {
  background: var(--white);
  border: 1px solid var(--grid-line);
  border-left: 4px solid var(--royal-blue);
  padding: 14px 18px;
  margin-bottom: 16px;
  position: relative;
}
.mega-pair-panel::before,
.mega-pair-panel::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--royal-blue);
  border-style: solid;
  pointer-events: none;
}
.mega-pair-panel::before {
  top: -1px; right: -1px;
  border-width: 2px 2px 0 0;
}
.mega-pair-panel::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}
.mega-pair-panel h3 {
  margin: 0 0 8px;
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: none; /* keep H3 mono override out of this scope */
}
.mega-pair-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mega-pair-header h3 { margin: 0; }
.mega-pair-collapsed-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--label-gray);
  margin-left: 6px;
  text-transform: uppercase;
}
.mega-pair-toggle {
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--royal-blue);
  color: var(--royal-blue);
  cursor: pointer;
  white-space: nowrap;
}
.mega-pair-toggle:hover {
  background: var(--royal-blue);
  color: var(--white);
}
/* Scroll container for the Best Mega Pairings table. Caps height to match
   .ranker-table-wrap (420px) so the panel can't take over the page when
   the export ships a long partner list, and clips horizontal overflow
   from wide drilldown rows so the table can't push the page wider than
   .app-main's 1100px column. The expanded drilldown scrolls within
   this wrap rather than escaping the layout. */
.mega-pair-table-wrap {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--grid-line);
  background: var(--white);
}
.mega-pair-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 16px;
}
.mega-pair-table th,
.mega-pair-table td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid var(--grid-line);
  white-space: nowrap;
  /* Explicit color so cells don't inherit the body's white-on-dark text */
  color: var(--charcoal);
}
.mega-pair-table th:first-child,
.mega-pair-table td:first-child { text-align: left; }
.mega-pair-table th {
  background: var(--data-gray);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--label-gray);
  text-transform: uppercase;
  font-weight: normal;
  border-bottom: 2px solid var(--royal-blue);
  /* Sticky header inside the new .mega-pair-table-wrap scroll container,
     matching the .ranker-table behavior. Without this the column labels
     scroll out of view as soon as the user scrolls down to the lower
     partners. */
  position: sticky;
  top: 0;
  z-index: 1;
}
.mega-pair-table .mp-name {
  font-family: var(--font-display);
  letter-spacing: 1.5px;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--charcoal);
}
.mega-pair-table .combined-wr {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1.5px;
  color: var(--royal-blue);
}
.mega-pair-table .lift-pos { color: var(--royal-blue); }
.mega-pair-table .lift-neg { color: var(--pokeball-red); }
.mega-pair-table .solo-cell { color: var(--label-gray); }
.mega-pair-table .conf-low { color: var(--warning); }
.mega-pair-table .conf-mod { color: var(--label-gray); }
.mega-pair-table .conf-hig { color: var(--royal-blue); }
.mega-pair-panel .solo-baseline {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--label-gray);
  margin: 0 0 8px;
}
.mega-pair-panel .solo-baseline strong {
  font-family: var(--font-display);
  color: var(--royal-blue);
  letter-spacing: 1.5px;
  font-size: 16px;
}
.mega-pair-panel .formula-note {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--label-gray);
  margin: 6px 0 0;
}
.mega-pair-panel .formula-note::before { content: "// "; color: var(--pokeball-red); }
.mega-pair-table .add-btn {
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  cursor: pointer;
}
.mega-pair-table .add-btn:hover {
  background: var(--royal-blue);
  border-color: var(--royal-blue);
  color: var(--white);
}
.mega-pair-table .add-btn.in-team {
  background: var(--pokeball-red);
  border-color: var(--pokeball-red);
  color: var(--white);
  cursor: default;
}

/* ----- Per-opponent drilldown inside the mega pair panel ----- */
.mega-pair-table tr.mp-row { cursor: pointer; }
.mega-pair-table tr.mp-row:hover { background: var(--data-gray); }
.mega-pair-table tr.mp-row.expanded { background: var(--data-gray); }
/* First chevron click for a given mega triggers the per-opponent sidecar
   fetch. .loading marks the row while that ~50KB request is in flight; on
   a fast connection it's usually gone before the user notices. */
.mega-pair-table tr.mp-row.loading { opacity: 0.55; cursor: progress; }
.mega-pair-table tr.mp-row.loading td.mp-chev::after { content: " …"; }
.mega-pair-table td.mp-chev {
  width: 22px;
  text-align: center;
  color: var(--label-gray);
  font-size: 14px;
  user-select: none;
}
.mega-pair-table tr.mega-drill-row > td {
  background: var(--white);
  padding: 0;
  border-bottom: 1px solid var(--royal-blue);
}
.mega-drill-wrap {
  padding: 8px 10px 10px;
  /* Hard cap on width so the drilldown table can never push the parent
     mega-pair-table wider than its container. Anything that doesn't fit
     scrolls horizontally within this wrap rather than expanding the page. */
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}
.mega-drill-note {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--label-gray);
  margin: 0 0 6px;
  /* The note text used to inherit nowrap from no styling — explicitly
     allow wrapping so a long opponent name in body text doesn't add to
     the drilldown's horizontal footprint. */
  white-space: normal;
}
.mega-drill-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 14px;
  /* Fixed layout + percent widths below make the 6 columns share the
     available row width predictably instead of each column ballooning
     to fit its longest nowrap entry. */
  table-layout: fixed;
}
/* Column allocations chosen so the WR / Bring columns have just enough
   room for their content; usage and chosen WR are the narrowest. The
   first column carries the opponent chip and gets the most room. */
.mega-drill-table th:nth-child(1),
.mega-drill-table td:nth-child(1) { width: 26%; }
.mega-drill-table th:nth-child(2),
.mega-drill-table td:nth-child(2) { width: 11%; }
.mega-drill-table th:nth-child(3),
.mega-drill-table td:nth-child(3) { width: 16%; }
.mega-drill-table th:nth-child(4),
.mega-drill-table td:nth-child(4) { width: 16%; }
.mega-drill-table th:nth-child(5),
.mega-drill-table td:nth-child(5) { width: 19%; }
.mega-drill-table th:nth-child(6),
.mega-drill-table td:nth-child(6) { width: 12%; }
.mega-drill-table th,
.mega-drill-table td {
  padding: 5px 6px;
  text-align: right;
  border-bottom: 1px solid var(--grid-line);
  color: var(--charcoal);
  /* Allow cells to wrap so a long sprite-chip name doesn't force the
     column wider. Combined with the fixed column widths above this
     keeps the table inside its container. */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-drill-table th:first-child,
.mega-drill-table td:first-child { text-align: left; }
.mega-drill-table th {
  background: var(--data-gray);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--label-gray);
  font-weight: normal;
  border-bottom: 1px solid var(--royal-blue);
}
.mega-drill-table td.drill-opp { color: var(--charcoal); }
.mega-drill-table td.drill-chosen {
  background: rgba(65, 105, 225, 0.10);
  color: var(--royal-blue);
  font-weight: 600;
}
.mega-drill-table .drill-games {
  color: var(--label-gray);
  font-size: 13px;
  margin-left: 4px;
}
.mega-drill-table td.drill-bring-core,
.mega-drill-table td.drill-bring-partner {
  font-family: var(--font-display);
  letter-spacing: 1px;
  font-size: 14px;
  text-transform: uppercase;
}
.mega-drill-table td.drill-bring-core    { color: var(--royal-blue); }
.mega-drill-table td.drill-bring-partner { color: var(--pokeball-red); }
.mega-drill-table td.drill-bring-tie     { color: var(--label-gray); font-style: italic; }
.mega-drill-empty {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--label-gray);
  padding: 8px 14px 14px;
}

/* ============================================================
   Drilldown row — appears beneath an expanded ranker row
   ============================================================ */
.ranker-table tr.expanded { background: var(--data-gray); }
.ranker-table tr.drill-row td {
  background: var(--data-gray);
  padding: 0;
  border-bottom: 1px solid var(--royal-blue);
}
.ranker-drill {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--grid-line);
  padding: 0;
}
.ranker-drill .drill-section {
  background: var(--white);
  padding: 10px 12px;
}
.ranker-drill .drill-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2.5px;
  color: var(--label-gray);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ranker-drill .drill-title::before { content: "// "; color: var(--pokeball-red); }
.ranker-drill .drill-list { list-style: none; padding: 0; margin: 0; }
.ranker-drill .drill-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 3px 0;
  color: var(--charcoal);
  gap: 10px;
}
.ranker-drill .drill-list .drill-pct {
  font-size: 14px;
  color: var(--royal-blue);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ranker-drill .drill-empty {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--label-gray);
  font-style: italic;
}
.ranker-drill .drill-sample {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--label-gray);
  margin-top: 8px;
  text-transform: uppercase;
}

/* Add a tiny chevron to ranker rows so they read as expandable */
.ranker-table tbody tr {
  cursor: pointer;
}
.ranker-table td.expand-cell {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--label-gray);
  width: 22px;
  font-size: 14px;
}
.ranker-table tr.expanded .expand-cell { color: var(--royal-blue); }

/* ============================================================
   Metadata utility — the "// FOO" small-caps label pattern
   ============================================================ */
.meta-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}
.meta-label::before { content: "// "; color: var(--pokeball-red); }
/* Override inside white-panel contexts so the label reads on white. */
.card .meta-label,
.card-header .meta-label,
.app-header .meta-label,
.core-input-wrap .meta-label,
.team-row .meta-label,
.progress-step .meta-label { color: var(--label-gray); }
.meta-value {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--royal-blue);
}

/* ============================================================
   Pokémon sprite chips — sprite + name pair used everywhere a
   Pokémon name surfaces. Sprites come from play.pokemonshowdown.com
   (see sprites.js for the URL builders + id translation table).

   The chip is an inline-flex span so it slots into table cells,
   pills, autocomplete rows, etc. without breaking text-flow. Image
   sizing is driven from JS (width/height attrs) so each call site
   can pick its own scale; CSS just handles alignment.
   ============================================================ */
.pkm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  line-height: 1;
}
.pkm-chip-name {
  /* Inherit color from the surrounding cell — pills, .name-cell,
     ac-item etc. all set their own color, and the chip should not
     fight that. */
  color: inherit;
  white-space: nowrap;
}
.pkm-icon {
  display: inline-block;
  flex-shrink: 0;
  /* HOME sprites are square PNGs with transparent backgrounds.
     The white poké-ball SVG fallback needs the same square so
     it doesn't reflow neighbors when it appears. */
  background: transparent;
  /* image-rendering: keep the pixel-art Showdown fallbacks crisp
     if HOME 404s and we fall through to the dex set. */
  image-rendering: -webkit-optimize-contrast;
}

/* When chips live inside a name-pill, the pill provides the padding
   so the chip itself collapses. Also tighten the gap so the
   pill-text feels packaged. */
.name-pill .pkm-chip { gap: 4px; }
.name-pill .pkm-icon { margin: -1px 0; }

/* In the autocomplete dropdown the ac-name wraps the chip; flex
   alignment handles the rest. The dropdown is on a dark background
   so the icon's transparent corners blend in cleanly. */
.ac-item .ac-name .pkm-chip { color: inherit; }

/* Table name cells — sprite + name on one line, ellipsis still
   works on the name span via the inherited flex layout. */
.ranker-table td.name-cell .pkm-chip {
  /* a couple of px below the row baseline so the sprite optically
     centers against Bebas Neue's tall caps */
  margin-top: -1px;
}

/* Mega-pair partner cell — slightly larger sprite to match the
   panel's heavier visual weight. */
.mega-pair-table .mp-name .pkm-chip { gap: 8px; }

/* Drill rows in the mega-pair panel: opponent + bring cells render
   chips at 22px. Keep them compact horizontally so the table can
   still fit Bring + Chosen WR side-by-side on narrow viewports. */
.mega-drill-table .drill-opp .pkm-chip,
.mega-drill-table .drill-bring-core .pkm-chip,
.mega-drill-table .drill-bring-partner .pkm-chip { gap: 5px; }

/* Index-page summary line: a row of chips for both team and core.
   Gap > the chip's internal gap so the chips visually group. */
.pkm-chip-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  vertical-align: middle;
}

/* ============================================================
   Win Rate Identifier — Pikalytics-style rankings rail + combo
   calculator main column.

   The page widens the app-main to give the rail breathing room and
   the calculator a usable working width. Below 960px the grid
   collapses so the rail stacks above the calculator.
   ============================================================ */
.app-main.win-rate-layout {
  max-width: 1380px;
  padding: 20px;
}
.wri-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 960px) {
  .wri-grid { grid-template-columns: 1fr; }
}

/* The rail itself reuses .card chrome so the red border + L-brackets
   match the rest of the suite. Sticky so it stays put while the main
   column scrolls past it. */
.rankings-rail {
  position: sticky;
  top: 20px;
  padding: 16px 16px 12px;
  margin-bottom: 0;
  /* Cap height to the viewport so the inner list scrolls, not the page. */
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rankings-rail h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 3px;
}
.rankings-rail .rail-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rankings-rail .rail-controls input[type="text"],
.rankings-rail .rail-controls input[type="number"],
.rankings-rail .rail-controls select {
  width: 100%;
  padding: 6px 8px;
  background: var(--white);
  color: var(--charcoal);
  border: 1px solid var(--grid-line);
  font-family: var(--font-mono);
  font-size: 13px;
  box-sizing: border-box;
}
.rankings-rail .rail-controls input:focus,
.rankings-rail .rail-controls select:focus {
  outline: none;
  border-color: var(--royal-blue);
}
.rankings-rail .rail-row-controls {
  display: flex;
  gap: 8px;
}
.rankings-rail .rail-row-controls > label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--label-gray);
}

/* Win% / Usage% toggle — same visual language as .view-toggle but
   sized for the rail. */
.rail-sort-toggle {
  display: flex;
  border: 1px solid var(--charcoal);
}
.rail-sort-toggle button {
  flex: 1;
  background: var(--white);
  color: var(--charcoal);
  border: 0;
  border-right: 1px solid var(--charcoal);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.rail-sort-toggle button:last-child { border-right: 0; }
.rail-sort-toggle button.active {
  background: var(--royal-blue);
  color: var(--white);
}

.rail-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--label-gray);
  display: flex;
  justify-content: space-between;
}

/* Scrolling list of Pokemon rows. Each row is a single line:
   rank, sprite + name, win%, usage%. The metric the user sorted by
   is highlighted royal-blue so the eye knows which column is leading. */
.rail-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  background: var(--white);
}
.rail-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--grid-line);
  cursor: pointer;
  transition: background 0.1s;
}
.rail-row:last-child { border-bottom: 0; }
.rail-row:hover { background: var(--royal-blue-soft); }
.rail-row .rail-rank {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--label-gray);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rail-row .rail-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--charcoal);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-row .rail-name .pkm-chip { gap: 6px; }
.rail-row .rail-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--label-gray);
  min-width: 40px;
  text-align: right;
}
.rail-row .rail-stat.is-primary { color: var(--royal-blue); font-weight: 600; }
.rail-row.is-selected { background: var(--royal-blue-mid); }

/* ============================================================
   Misc
   ============================================================ */
input::-webkit-calendar-picker-indicator { display: none !important; }
::selection { background: var(--royal-blue); color: var(--white); }

/* ============================================================
   Brand home link — the .brand block is now an <a> so the entire
   wordmark + tagline returns the user to the suite index. Strip
   default link decoration; the wordmark already styles itself.
   ============================================================ */
a.brand,
a.brand:hover {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.brand { transition: opacity 0.12s; }
a.brand:hover { opacity: 0.78; }

/* ============================================================
   Theme toggle — small icon button that flips data-theme on <html>.
   Uses the same ghost-button visual language as other header controls.
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--grid-line);
  border-radius: 0;
  color: var(--label-gray);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.theme-toggle:hover {
  background: var(--royal-blue);
  border-color: var(--royal-blue);
  color: var(--white);
}
.theme-toggle .theme-icon-dark  { display: inline; }
.theme-toggle .theme-icon-light { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-dark  { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline; }

/* ============================================================
   DARK MODE
   Activated via data-theme="dark" on <html>. The body gradient stays
   (it's already dark), but every white panel / card / input flips to
   a deep navy surface with light text. We keep --white and --charcoal
   reserved for their original use (text on accent buttons, etc.) and
   introduce a dedicated surface palette only used by these overrides.
   ============================================================ */
[data-theme="dark"] {
  --surface:        #131A33;   /* panels & header (was --white)      */
  --surface-alt:    #1C2547;   /* subtle striping  (was --data-gray) */
  --surface-text:   #E6E9F2;   /* body text on panels (was charcoal) */
  --surface-border: #2A3155;   /* dividers & borders (was grid-line) */
  --surface-muted:  #8A93B5;   /* muted/label text on panels         */
  --grid-line:      #2A3155;
  --label-gray:     #8A93B5;
}

/* Body backdrop — push the gradient darker so the panels read as raised. */
[data-theme="dark"] html,
[data-theme="dark"] body {
  background: linear-gradient(135deg,
    #0A1432  0%,
    #050A1F 55%,
    #0A1432 100%);
  background-size: 220% 220%;
  background-attachment: fixed;
}

/* Panel surfaces — anything that was `background: var(--white)` */
[data-theme="dark"] .app-header,
[data-theme="dark"] .card,
[data-theme="dark"] .progress-step,
[data-theme="dark"] .link-out-card,
[data-theme="dark"] .ranker-table-wrap,
[data-theme="dark"] .mega-pair-panel,
[data-theme="dark"] .mega-pair-table-wrap,
[data-theme="dark"] .core-stats .core-sprite,
[data-theme="dark"] .core-stats .stat,
[data-theme="dark"] .ranker-drill .drill-section,
[data-theme="dark"] .rail-list,
[data-theme="dark"] .team-row .slot-sprite,
[data-theme="dark"] .mega-pair-table tr.mega-drill-row > td {
  background: var(--surface);
  color: var(--surface-text);
  border-color: var(--surface-border);
}

/* Subtle "alt" surfaces that used --data-gray */
[data-theme="dark"] .team-row,
[data-theme="dark"] .export-textarea,
[data-theme="dark"] .ranker-table th,
[data-theme="dark"] .mega-pair-table th,
[data-theme="dark"] .mega-drill-table th,
[data-theme="dark"] .ranker-table tr.expanded,
[data-theme="dark"] .ranker-table tr.drill-row td,
[data-theme="dark"] .mega-pair-table tr.mp-row:hover,
[data-theme="dark"] .mega-pair-table tr.mp-row.expanded,
[data-theme="dark"] code,
[data-theme="dark"] .progress-step:hover,
[data-theme="dark"] .ranker-table tbody tr:hover {
  background: var(--surface-alt);
  color: var(--surface-text);
}

/* The ranker-drill outer grid uses --grid-line as a backdrop — replaced
   above via the variable, but pin it explicitly too. */
[data-theme="dark"] .ranker-drill,
[data-theme="dark"] .team-grid,
[data-theme="dark"] .link-out-list,
[data-theme="dark"] .core-stats,
[data-theme="dark"] .progress {
  background: var(--surface-border);
}

/* Inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .rankings-rail .rail-controls input,
[data-theme="dark"] .rankings-rail .rail-controls select,
[data-theme="dark"] .ranker-pager .pager-size,
[data-theme="dark"] .rankings-controls input[type="number"],
[data-theme="dark"] .rankings-controls input[type="text"],
[data-theme="dark"] .rankings-controls select {
  background: var(--surface-alt);
  color: var(--surface-text);
  border-color: var(--surface-border);
}
[data-theme="dark"] input[type="text"]::placeholder,
[data-theme="dark"] input[type="number"]::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--surface-muted);
}

/* Text colors — anywhere we hardcoded var(--charcoal) on a now-dark surface */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] .brand .wordmark,
[data-theme="dark"] .brand .wordmark .secondary,
[data-theme="dark"] .hint,
[data-theme="dark"] .note,
[data-theme="dark"] .progress-step.is-active,
[data-theme="dark"] .progress-step.is-complete,
[data-theme="dark"] .link-out-card .lo-name,
[data-theme="dark"] .ranker-table tbody td,
[data-theme="dark"] .ranker-table td.name-cell,
[data-theme="dark"] .ranker-table th:hover,
[data-theme="dark"] .mega-pair-panel h3,
[data-theme="dark"] .mega-pair-table th,
[data-theme="dark"] .mega-pair-table td,
[data-theme="dark"] .mega-pair-table .mp-name,
[data-theme="dark"] .mega-drill-table th,
[data-theme="dark"] .mega-drill-table td,
[data-theme="dark"] .mega-drill-table td.drill-opp,
[data-theme="dark"] .ranker-drill .drill-list li,
[data-theme="dark"] .rail-row .rail-name,
[data-theme="dark"] code {
  color: var(--surface-text);
}

/* The data-numbers accent stays Royal Blue but light-blue reads better on dark */
[data-theme="dark"] {
  --royal-blue:      #5B83F0;
  --royal-blue-soft: rgba(91, 131, 240, 0.16);
  --royal-blue-mid:  rgba(91, 131, 240, 0.28);
}

/* Default ghost buttons (.btn-ghost) on white card contexts — re-color */
[data-theme="dark"] .card .btn-ghost,
[data-theme="dark"] .app-header .btn-ghost { color: var(--surface-muted); }
[data-theme="dark"] .card .btn-ghost:hover,
[data-theme="dark"] .app-header .btn-ghost:hover { color: var(--royal-blue); }

/* Default outlined .btn — flip to dark surface */
[data-theme="dark"] .btn {
  background: var(--surface-alt);
  border-color: var(--surface-text);
  color: var(--surface-text);
}
[data-theme="dark"] .btn:hover {
  background: var(--surface-text);
  color: var(--surface);
}

/* Specialty .add-btn inside tables uses the same swap */
[data-theme="dark"] .ranker-table .add-btn,
[data-theme="dark"] .core-stats .add-btn,
[data-theme="dark"] .mega-pair-table .add-btn {
  background: var(--surface-alt);
  border-color: var(--surface-text);
  color: var(--surface-text);
}
[data-theme="dark"] .ranker-table .add-btn:hover,
[data-theme="dark"] .core-stats .add-btn:hover:not(:disabled),
[data-theme="dark"] .mega-pair-table .add-btn:hover {
  background: var(--royal-blue);
  border-color: var(--royal-blue);
  color: var(--white);
}
[data-theme="dark"] .mega-pair-toggle {
  background: var(--surface-alt);
  border-color: var(--royal-blue);
  color: var(--royal-blue);
}
[data-theme="dark"] .mega-pair-toggle:hover {
  background: var(--royal-blue);
  color: var(--white);
}
[data-theme="dark"] .team-row .slot-remove-btn {
  background: var(--surface-alt);
  border-color: var(--pokeball-red);
  color: var(--pokeball-red);
}
[data-theme="dark"] .team-row .slot-remove-btn:hover {
  background: var(--pokeball-red);
  color: var(--white);
}
[data-theme="dark"] .mega-pair-collapsed-meta {
  color: var(--surface-muted, var(--label-gray));
}

/* View toggle + rail sort toggle */
[data-theme="dark"] .view-toggle {
  border-color: var(--surface-text);
}
[data-theme="dark"] .view-toggle button {
  background: var(--surface-alt);
  color: var(--surface-muted);
  border-color: var(--surface-text);
}
[data-theme="dark"] .view-toggle button.active,
[data-theme="dark"] .rail-sort-toggle button.active {
  background: var(--royal-blue);
  color: var(--white);
}
[data-theme="dark"] .rail-sort-toggle {
  border-color: var(--surface-text);
}
[data-theme="dark"] .rail-sort-toggle button {
  background: var(--surface-alt);
  color: var(--surface-text);
  border-color: var(--surface-text);
}

/* Rail rows */
[data-theme="dark"] .rail-row { border-color: var(--surface-border); }
[data-theme="dark"] .rail-row:hover { background: var(--royal-blue-soft); }
[data-theme="dark"] .rail-row.is-selected { background: var(--royal-blue-mid); }

/* Ranker-table chrome */
[data-theme="dark"] .ranker-table th,
[data-theme="dark"] .ranker-table td,
[data-theme="dark"] .mega-pair-table th,
[data-theme="dark"] .mega-pair-table td,
[data-theme="dark"] .mega-drill-table th,
[data-theme="dark"] .mega-drill-table td {
  border-color: var(--surface-border);
}

/* Drilldown title bar uses muted gray — already covered by --label-gray
   override. Same for .ranker-drill .drill-empty / .drill-sample. */

/* Theme-toggle button border on dark */
[data-theme="dark"] .theme-toggle {
  border-color: var(--surface-border);
  color: var(--surface-muted);
}

/* Header rule line stays Pokéball Red — no change needed. */

/* Make sure the dark drill row's accent-bg "chosen" cell stays readable */
[data-theme="dark"] .mega-drill-table td.drill-chosen {
  background: rgba(91, 131, 240, 0.18);
  color: var(--royal-blue);
}

/* ============================================================
   AD SLOTS — Google AdSense reservations
   ------------------------------------------------------------
   These rules reserve layout space for ad units BEFORE AdSense is
   wired up. The actual <ins class="adsbygoogle"> tags are inserted
   per-page (currently commented out) and the loader script is added
   to <head> once Google approves the site and issues a publisher ID.

   Slot inventory:
     .ad-ribbon          — anchored to the bottom of every page,
                           full viewport width. Sized for a responsive
                           leaderboard (728x90 desktop / 320x50 mobile)
                           plus chrome — reserve 100px on desktop, 70px
                           on mobile. iOS safe-area-inset respected.
     .ad-rail-left,
     .ad-rail-right      — fixed skyscrapers (160x600) flanking the
                           team builder. Only visible at viewports wide
                           enough that they don't crowd the main column
                           (>=1500px). Hidden everywhere else and on
                           every other page.

   Debug helper:
     body.ad-debug       — adds dashed outlines + "AD SLOT" labels so
                           we can visually confirm layout before ads
                           are live. Toggle by adding/removing the
                           class on <body>.
   ============================================================ */

/* Reserve space at the bottom of every page so content never sits
   behind the ribbon ad. */
body {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/* Toast already lives at bottom: 24px — push it above the ribbon
   so success messages don't hide behind ads. */
.toast {
  bottom: calc(124px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Base ad-slot shell ---------- */
.ad-slot {
  /* Slot is invisible by default — only the <ins> child becomes
     visible once AdSense renders into it. The container reserves
     the space regardless. */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}
.ad-slot > ins.adsbygoogle {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Bottom ribbon ---------- */
.ad-ribbon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--white);
  border-top: 1px solid var(--grid-line);
  z-index: 100;     /* above content, below toast (1000) and dropdowns (200) */
}
[data-theme="dark"] .ad-ribbon {
  background: var(--surface);
  border-top-color: var(--surface-border);
}

/* Subtle red rule above the ribbon — mirrors the .app-header motif. */
.ad-ribbon::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -1px;
  width: 110px;
  height: 2px;
  background: var(--pokeball-red);
}

@media (max-width: 720px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
  .ad-ribbon { height: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Side rails (team builder only) ---------- */
/* Skyscrapers are 160x600. They live fixed against the viewport edges
   and only appear when the viewport is at least 1500px wide so they
   never crowd the 1100px-wide .app-main. Below that, they collapse to
   display:none and the page falls back to ribbon-only.

   The .has-side-rails class is set on <body> in stage1-team.html so
   these rules don't accidentally affect other pages. */
.ad-rail {
  position: fixed;
  top: 90px;       /* clear of .app-header (~60px) + a little breathing room */
  width: 160px;
  height: 600px;
  background: var(--white);
  border: 1px solid var(--grid-line);
  z-index: 50;
  display: none;   /* off by default; media query below turns on */
}
[data-theme="dark"] .ad-rail {
  background: var(--surface);
  border-color: var(--surface-border);
}
.ad-rail-left  { left: 24px; }
.ad-rail-right { right: 24px; }

/* Only render the rails when there's actually room beside the content
   column. .app-main caps at 1100px, so we need ~1100 + 2*(160+24+24)
   = ~1516px before the rails fit without overlap. */
@media (min-width: 1500px) {
  body.has-side-rails .ad-rail { display: flex; }
}

/* ---------- Debug placeholders ---------- */
/* Add `class="ad-debug"` to <body> while developing to see exactly
   where the slots will land. Remove (or never add) in production —
   AdSense doesn't need this and policy frowns on fake ad placeholders. */
body.ad-debug .ad-slot {
  outline: 2px dashed var(--royal-blue);
  outline-offset: -4px;
  background: var(--royal-blue-soft);
  color: var(--label-gray);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
body.ad-debug .ad-slot::after {
  content: "// AD SLOT — " attr(data-ad-label);
}