/* =========================================
   Quack Stack — dev-page styles
   =========================================
   Patterns used ONLY by /dev/qs-* tooling pages (sim dashboard,
   scenario builder, card lab, card browser, etc.). Game-facing styles
   live in quack-stack.css; this file extends with dev-only patterns
   (data tables, code blocks, controls grids, etc.).

   Uses the same --qs-* token system so dev pages theme-switch in lock
   step with the main game. Prefix all classes with .qsd- to keep
   namespace clean from .qs-* (game) and .qsm-* (multi).
   ========================================= */

/* ── Page wrapper ─────────────────────────────────────────── */
.qsd-page {
  background: var(--qs-surface-page);
  color: var(--qs-text-primary);
  padding: var(--qs-space-5);
  font-family: var(--qw-font-sans);
  min-height: 100vh;
}

.qsd-page h1 {
  color: var(--qs-accent);
  margin: 0 0 var(--qs-space-2);
}
.qsd-page h2 {
  color: var(--qs-text-primary);
  font-size: var(--qs-text-lg);
  margin: var(--qs-space-5) 0 var(--qs-space-3);
}
.qsd-page p {
  color: var(--qs-text-secondary);
}

/* ── Status / info panel (used by sim dashboard header) ─────── */
.qsd-panel {
  background: var(--qs-surface-panel);
  color: var(--qs-text-primary);
  border: 1px solid var(--qs-border-normal);
  border-radius: var(--qs-radius-md);
  padding: var(--qs-space-3);
  margin: var(--qs-space-3) 0;
}
.qsd-panel strong { color: var(--qs-accent); }

/* ── Data tables (sim dashboard, card-trace fingerprints) ───── */
.qsd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--qs-text-xs);
  background: var(--qs-surface-card);
  border-radius: var(--qs-radius-sm);
  overflow: hidden;
}
.qsd-table th,
.qsd-table td {
  border: 1px solid var(--qs-border-subtle);
  padding: var(--qs-space-1) var(--qs-space-2);
  text-align: left;
  color: var(--qs-text-primary);
}
.qsd-table th {
  background: var(--qs-surface-panel);
  font-weight: 700;
}
.qsd-table td.qsd-num,
.qsd-table th.qsd-num {
  text-align: right;
}
.qsd-table tr:hover td {
  background: var(--qs-surface-raised);
}
.qsd-table-em {
  color: var(--qs-text-muted);
  font-style: italic;
}

/* Numeric cells colored by tier */
.qsd-num-good   { color: var(--qs-rarity-uncommon); }
.qsd-num-mid    { color: var(--qs-sandstorm); }
.qsd-num-low    { color: var(--qs-text-muted); }
.qsd-num-zero   { color: var(--qs-border-strong); }

/* ── Controls strip ─────────────────────────────────────────── */
.qsd-controls {
  display: flex;
  gap: var(--qs-space-3);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--qs-space-3) 0;
}
.qsd-controls > label {
  color: var(--qs-text-secondary);
  font-size: var(--qs-text-sm);
}
.qsd-controls select,
.qsd-controls input,
.qsd-controls textarea {
  background: var(--qs-surface-card);
  color: var(--qs-text-primary);
  border: 1px solid var(--qs-border-normal);
  border-radius: var(--qs-radius-sm);
  padding: var(--qs-space-1) var(--qs-space-2);
  font-family: inherit;
  font-size: var(--qs-text-sm);
}
.qsd-controls input::placeholder { color: var(--qs-text-muted); }
.qsd-controls button,
.qsd-btn {
  background: var(--qs-surface-card);
  color: var(--qs-text-primary);
  border: 1px solid var(--qs-border-normal);
  border-radius: var(--qs-radius-sm);
  padding: var(--qs-space-2) var(--qs-space-3);
  font-family: inherit;
  font-size: var(--qs-text-sm);
  cursor: pointer;
}
.qsd-controls button:hover,
.qsd-btn:hover { background: var(--qs-surface-raised); }
.qsd-btn-primary {
  background: var(--qs-accent);
  color: var(--qw-ink);
  border-color: var(--qs-accent);
  font-weight: 700;
}
.qsd-btn-primary:hover { background: var(--qs-accent-hover); }

/* ── Code / preformatted blocks ────────────────────────────── */
.qsd-code {
  background: var(--qs-surface-panel);
  color: var(--qs-text-primary);
  border: 1px solid var(--qs-border-subtle);
  border-radius: var(--qs-radius-sm);
  padding: var(--qs-space-3);
  font-family: monospace;
  font-size: var(--qs-text-xs);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ── Inline labels / tags ──────────────────────────────────── */
.qsd-tag {
  display: inline-block;
  background: var(--qs-surface-raised);
  color: var(--qs-text-secondary);
  border-radius: var(--qs-radius-pill);
  padding: 2px var(--qs-space-2);
  font-size: var(--qs-text-xs);
  font-weight: 700;
  margin-right: var(--qs-space-1);
}
.qsd-tag-accent {
  background: var(--qs-accent);
  color: var(--qw-ink);
}

/* ── Inline notes / em-rest ───────────────────────────────── */
.qsd-note {
  color: var(--qs-text-muted);
  font-size: var(--qs-text-xs);
}
.qsd-em { color: var(--qs-text-muted); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════
   .dev-* legacy class re-skin — tokenize the styles that were
   duplicated as <style> blocks in dev-qs-cards / dev-qs-sandbox /
   dev-qs-scenario / dev-qs-card-trace partials. Consolidating here
   means theme-flip propagates to every dev page in one move.
   ══════════════════════════════════════════════════════════════════ */
.dev-page { color: var(--qs-text-primary); }
.dev-page h2 { color: var(--qs-accent); }
.dev-page .card {
  background: var(--qs-surface-card);
  border-color: var(--qs-border-normal);
  color: var(--qs-text-primary);
}
.dev-page .card-body { background: var(--qs-surface-card); color: var(--qs-text-primary); }
.dev-page .card-header {
  background: var(--qs-surface-raised);
  border-bottom-color: var(--qs-border-normal);
  color: var(--qs-accent);
}
.dev-page .form-select,
.dev-page .form-control,
.dev-filter-bar .form-select,
.dev-filter-bar .form-control {
  background: var(--qs-surface-card);
  color: var(--qs-text-primary);
  border-color: var(--qs-border-normal);
}
.dev-page .form-select::placeholder,
.dev-page .form-control::placeholder {
  color: var(--qs-text-muted);
}
.dev-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--qs-space-2);
}
.dev-card-tile {
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.dev-card-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
}
.dev-json {
  background: var(--qs-surface-panel);
  color: var(--qs-text-secondary);
  border: 1px solid var(--qs-border-normal);
  padding: var(--qs-space-2);
  max-height: 60vh;
  overflow: auto;
  font-size: var(--qs-text-xs);
  white-space: pre;
}
.dev-inspector .card-header {
  background: var(--qs-surface-raised);
  border-bottom-color: var(--qs-border-normal);
  color: var(--qs-accent);
}
/* Generic dev tool card on the dev-index hub (was hardcoded dark
   originally; now follows the theme). */
.dev-tool-card {
  background: var(--qs-surface-card);
  border: 1px solid var(--qs-border-normal);
  transition: border-color 0.15s, transform 0.15s;
  color: var(--qs-text-primary);
}
.dev-tool-card:hover {
  border-color: var(--qs-accent);
  transform: translateY(-2px);
}
.dev-tool-card .card-title { color: var(--qs-accent); }

/* ── /dev/qs-rework — Barbarian rework proposal page (K-series) ──────── */
.qsd-rework-section {
  background: var(--qs-surface-panel);
  border: 1px solid var(--qs-border-subtle);
  border-radius: var(--qs-radius-lg);
  padding: var(--qs-space-4);
  margin-bottom: var(--qs-space-4);
}
.qsd-rework-section h3 { color: var(--qs-accent); margin: 0 0 var(--qs-space-3); }
.qsd-rework-section h4 { color: var(--qs-text-primary); font-size: var(--qs-text-lg); margin: var(--qs-space-3) 0 var(--qs-space-2); }
.qsd-rework-section h5 { color: var(--qs-text-primary); font-size: var(--qs-text-base); margin: 0 0 var(--qs-space-1); }
.qsd-rework-section p,
.qsd-rework-section li { color: var(--qs-text-secondary); }
.qsd-rework-section code { color: var(--qs-accent); background: var(--qs-surface-raised); padding: 1px 5px; border-radius: var(--qs-radius-sm); }

.qsd-callout {
  border-left: 4px solid var(--qs-border-strong);
  background: var(--qs-surface-card);
  padding: var(--qs-space-3);
  border-radius: var(--qs-radius-sm);
  color: var(--qs-text-secondary);
}
.qsd-callout-bad { border-left-color: var(--qs-damage); }
.qsd-callout strong { color: var(--qs-text-primary); }

.qsd-rework-list { padding-left: var(--qs-space-5); }
.qsd-rework-list li { margin-bottom: var(--qs-space-2); }

.qsd-tag {
  display: inline-block; font-size: var(--qs-text-xs); font-weight: 700;
  padding: 1px 7px; border-radius: var(--qs-radius-pill); color: #fff;
}
.qsd-tag-hi  { background: var(--qs-damage); }
.qsd-tag-mid { background: var(--qs-sandstorm); }
.qsd-tag-lo  { background: var(--qs-shield); }

.qsd-rework-table { color: var(--qs-text-secondary); }
.qsd-rework-table thead th { color: var(--qs-text-primary); border-bottom: 2px solid var(--qs-border-normal); }
.qsd-rework-table td, .qsd-rework-table th { border-color: var(--qs-border-subtle); }
.qsd-rework-table tbody tr:nth-child(odd) { background: var(--qs-surface-card); }

.qsd-principle {
  background: var(--qs-surface-card);
  border: 1px solid var(--qs-border-subtle);
  border-radius: var(--qs-radius-md);
  padding: var(--qs-space-3);
  height: 100%;
}
.qsd-principle p { font-size: var(--qs-text-sm); margin: 0; }

.qsd-rework-cards { display: flex; flex-direction: column; gap: var(--qs-space-4); }
.qsd-rework-card {
  display: flex; gap: var(--qs-space-4); align-items: flex-start;
  background: var(--qs-surface-card);
  border: 1px solid var(--qs-border-subtle);
  border-radius: var(--qs-radius-md);
  padding: var(--qs-space-3);
}
.qsd-rework-card-art { flex: 0 0 auto; }
.qsd-rework-card-meta { flex: 1 1 auto; }
.qsd-rework-card-note { color: var(--qs-text-secondary); font-size: var(--qs-text-sm); }