/* ============================================================================
   bd-dev.css — Battle Ducks dev-page design layer.

   Mirrors qs-dev.css: reuses the --bd-* token system so every /dev/bd-* page
   looks like Battle Ducks (light surfaces, gold accents) instead of an ad-hoc
   dark palette. Tokens reach these rules via the `.bd-dev` entry added to the
   --bd-* selector list in battle-ducks.css — so a page wraps its root in
   class="bd-dev bdd-page" and everything below inherits the tokens.

   Prefix is .bdd-* (NOT .bd-*) to avoid colliding with the game's ~709 .bd-*
   selectors. ACCENT TEXT uses --bd-gold-dark (deep amber) for WCAG contrast on
   the light surface; only button FILLS use bright --bd-gold.
   ========================================================================== */

.bdd-page {
  background: var(--bd-bg-page);
  color: var(--bd-text-primary);
  font-family: var(--bd-font);
  padding: var(--bd-space-5);
  min-height: 100vh;
}
.bdd-page h1 { color: var(--bd-text-primary); font-size: var(--bd-text-2xl); font-weight: 800; margin: 0 0 var(--bd-space-2); }
.bdd-page h2 { color: var(--bd-text-secondary); font-size: var(--bd-text-lg); font-weight: 700; margin: var(--bd-space-5) 0 var(--bd-space-3); }
.bdd-page p  { color: var(--bd-text-secondary); }
.bdd-tagline { color: var(--bd-text-muted); font-size: var(--bd-text-sm); }
.bdd-accent  { color: var(--bd-gold-dark); }           /* deep amber — AA on light */
.bdd-muted   { color: var(--bd-text-muted); }
.bdd-section { margin: var(--bd-space-5) 0; }

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.bdd-card, .bdd-panel {
  background: var(--bd-bg-card);
  color: var(--bd-text-primary);
  border: 1px solid var(--bd-border-normal);
  border-radius: var(--bd-radius-md);
  box-shadow: var(--bd-shadow-card);
}
.bdd-card  { padding: var(--bd-space-4); }
.bdd-panel { padding: var(--bd-space-3); margin: var(--bd-space-3) 0; }
.bdd-panel strong { color: var(--bd-gold-dark); }
.bdd-card-title { color: var(--bd-text-primary); font-weight: 700; font-size: var(--bd-text-lg); margin: 0 0 var(--bd-space-3); }

/* ── Form controls ─────────────────────────────────────────────────────── */
.bdd-controls { display: flex; flex-wrap: wrap; gap: var(--bd-space-3); align-items: flex-end; margin: var(--bd-space-3) 0; }
.bdd-field { display: flex; flex-direction: column; gap: 2px; }
.bdd-label { font-size: var(--bd-text-xs); color: var(--bd-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.bdd-input, .bdd-select {
  background: var(--bd-bg-card);
  color: var(--bd-text-primary);
  border: 1px solid var(--bd-border-normal);
  border-radius: var(--bd-radius-sm);
  padding: var(--bd-space-1) var(--bd-space-2);
  font-size: var(--bd-text-sm);
  font-family: var(--bd-font);
}
.bdd-input:focus, .bdd-select:focus { outline: 2px solid var(--bd-gold); outline-offset: -1px; }
.bdd-input-sm { width: 5.5rem; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.bdd-btn {
  background: var(--bd-bg-card-alt);
  color: var(--bd-text-primary);
  border: 1px solid var(--bd-border-normal);
  border-radius: var(--bd-radius-sm);
  padding: var(--bd-space-2) var(--bd-space-4);
  font-weight: 700;
  font-family: var(--bd-font);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.bdd-btn:hover { background: var(--bd-bg-page); border-color: var(--bd-border-strong); }
.bdd-btn:disabled { opacity: 0.5; cursor: default; }
.bdd-btn-primary {
  background: var(--bd-gold);
  color: var(--bd-gold-text);
  border-color: var(--bd-gold-dark);
}
.bdd-btn-primary:hover { background: var(--bd-gold-dark); color: var(--bd-bg-card); transform: translateY(-1px); }

/* ── Tables ────────────────────────────────────────────────────────────── */
.bdd-table { width: 100%; border-collapse: collapse; font-size: var(--bd-text-sm); background: var(--bd-bg-card); }
.bdd-table th, .bdd-table td { padding: var(--bd-space-1) var(--bd-space-3); text-align: left; border-bottom: 1px solid var(--bd-border-subtle); }
.bdd-table th { position: sticky; top: 0; background: var(--bd-bg-card-alt); color: var(--bd-text-secondary); font-weight: 700; z-index: 1; }
.bdd-table td.bdd-num, .bdd-table th.bdd-num { text-align: right; font-variant-numeric: tabular-nums; }
.bdd-table tbody tr:hover td { background: var(--bd-bg-card-alt); }
.bdd-table-wrap { max-height: 62vh; overflow-y: auto; border: 1px solid var(--bd-border-normal); border-radius: var(--bd-radius-md); }

/* ── Tags / result badges ──────────────────────────────────────────────── */
.bdd-tag {
  display: inline-block;
  background: var(--bd-gold-bg);
  color: var(--bd-gold-dark);
  border-radius: var(--bd-radius-pill);
  padding: 1px var(--bd-space-2);
  font-size: var(--bd-text-xs);
  font-weight: 700;
}
.bdd-badge { display: inline-block; border-radius: var(--bd-radius-sm); padding: 2px var(--bd-space-3); font-weight: 800; font-size: var(--bd-text-base); }
.bdd-badge-win  { background: var(--bd-color-win-bg);  color: var(--bd-color-win); }
.bdd-badge-loss { background: var(--bd-color-loss-bg); color: var(--bd-color-loss); }
.bdd-badge-draw { background: var(--bd-color-draw-bg); color: var(--bd-color-draw); }

/* ── Code ──────────────────────────────────────────────────────────────── */
.bdd-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bd-bg-card-alt);
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-sm);
  padding: 1px var(--bd-space-1);
  font-size: var(--bd-text-xs);
  color: var(--bd-text-secondary);
}

/* ── Combat-event label ────────────────────────────────────────────────────
   The timeline colors each event-type label via an inline var(--bd-color-*)
   set from a JS token map — so the dev viewer matches the exact combat colors
   the player sees in real fights. This just sets weight; color comes inline. */
.bdd-ev-type { font-weight: 700; }

/* ── Checklists (mastery nodes, relic picker) ──────────────────────────── */
.bdd-checklist {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 190px; overflow-y: auto;
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-sm);
  padding: var(--bd-space-1) var(--bd-space-2);
  background: var(--bd-bg-card);
}
.bdd-check { display: flex; align-items: baseline; gap: var(--bd-space-1); font-size: var(--bd-text-xs); line-height: 1.3; cursor: pointer; }
.bdd-check > input { margin: 3px 0 0; flex: 0 0 auto; }
.bdd-check-name { font-weight: 700; color: var(--bd-text-primary); }
.bdd-check-cost { color: var(--bd-gold-dark); font-weight: 700; }
.bdd-check-desc { color: var(--bd-text-muted); }
.bdd-check-group { font-size: var(--bd-text-xs); font-weight: 800; color: var(--bd-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin: var(--bd-space-1) 0 0; }
.bdd-details > summary { cursor: pointer; font-weight: 700; color: var(--bd-text-secondary); font-size: var(--bd-text-sm); padding: var(--bd-space-1) 0; }
.bdd-details[open] > summary { color: var(--bd-gold-dark); }

/* ── Token-preview swatches (/dev/bd-tokens) ───────────────────────────── */
.bdd-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--bd-space-2); }
.bdd-swatch {
  border-radius: var(--bd-radius-sm);
  border: 1px solid var(--bd-border-normal);
  min-height: 58px;
  display: flex; align-items: flex-end;
  padding: var(--bd-space-1) var(--bd-space-2);
  font-size: var(--bd-text-xs); font-weight: 700;
}
.bdd-swatch code { background: var(--bd-bg-card); color: var(--bd-text-primary); border-radius: 3px; padding: 0 4px; font-size: var(--bd-text-xs); }
.bdd-color-swatch { color: var(--bd-bg-card); align-items: center; justify-content: center; text-shadow: 0 1px 2px var(--bd-border-strong); }
.bdd-text-swatch  { background: var(--bd-bg-card); border: 1px solid var(--bd-border-normal); font-size: var(--bd-text-base); align-items: center; }