/* ═══════════════════════════════════════════════════════════════
   DROPZONE COMMANDER, ARMY BUILDER
   Design system ported from the Dropfleet builder: same tokens, same
   Art-Deco-tinged military look, components rebuilt around Groups,
   Squads and Transports rather than fleets and ships.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Theme Tokens ─────────────────────────────────────────── */
:root {
  --font-body: "Jost", "Segoe UI", -apple-system, sans-serif;
  --font-display: "Roboto Slab", Georgia, serif;
  --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-lore: "Libre Baskerville", Georgia, serif;
  --font-mono: Consolas, "Courier New", monospace;

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 34px;
  --text-hero: 42px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 48px;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ── Light theme ── */
  --paper: #ffffff;
  --paper-warm: #faf8f5;
  --paper-alt: #f3f1ec;
  --surface: #f4f1ea;
  --ink: #1c1a17;
  --ink-soft: #3a3834;
  --ink-muted: #6b6660;
  --ink-faint: #66615a;

  --navy: #1b3a5c;
  --navy-light: #2a5080;
  --navy-dark: #0f2640;
  --navy-subtle: rgba(27, 58, 92, 0.08);
  --navy-wash: rgba(27, 58, 92, 0.04);

  --gold: #b8932e;
  --gold-light: #d4ad4a;
  --gold-dark: #785e17;
  --gold-subtle: rgba(184, 147, 46, 0.10);
  --gold-line: rgba(184, 147, 46, 0.35);
  --accent: #b8932e;

  --faction-ucm: #3e9945;
  --faction-phr: #6a4c9c;
  --faction-scourge: #c43c2f;
  --faction-shaltari: #d98c1f;
  --faction-bioficer: #2a8c8c;
  --faction-resistance: #b04a2a;

  /* Force-organisation category accents. Transport is deliberately neutral —
     transports are bought as an attachment to a squad, not as a slot. */
  --cat-standard: #3e6ea8;
  --cat-vanguard: #2a8c8c;
  --cat-heavy: #b04a2a;
  --cat-support: #7a5aa8;
  --cat-transport: #6b6660;

  /* Transport symbol colours, matching the printed cards. */
  --sym-square: #008d36;
  --sym-triangle: #be1622;
  --sym-k9: #662483;
  --sym-diamond: #f9b233;
  --sym-circle: #1d71b8;
  --sym-pentagon: #e94e1b;

  --success: #3e9945;
  --success-ink: #2c6e49;
  --warning: #d98c1f;
  --warn-ink: #8a5a00;
  --warn-bg: #fdf3e0;
  --error: #c43c2f;
  --error-ink: #a32b20;
  --info: #2a5080;

  --stroke: #d8d4cc;
  --stroke-light: #e8e5df;
  --stroke-strong: #b8b2a8;
  --stroke-accent: rgba(27, 58, 92, 0.25);

  --shadow-sm: 0 0 1px rgba(28, 26, 23, 0.10), 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-md: 0 0 2px rgba(28, 26, 23, 0.08), 0 2px 4px rgba(28, 26, 23, 0.10);
  --shadow-lg: 0 0 2px rgba(28, 26, 23, 0.08), 0 4px 8px rgba(28, 26, 23, 0.12);
  --shadow-xl: 0 0 2px rgba(28, 26, 23, 0.08), 0 8px 16px rgba(28, 26, 23, 0.14);
  --shadow-dialog: 0 0 8px rgba(28, 26, 23, 0.12), 0 24px 56px rgba(28, 26, 23, 0.20);

  --z-topbar: 900;
  --z-overlay: 1000;
  --z-popover: 2000;
  --z-toast: 3000;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;

  --topbar-h: 48px;
  --sidebar-w: 268px;
}

/* ── Dark theme: only colour tokens flip ── */
html[data-theme="dark"] {
  --paper: #161a1f;
  --paper-warm: #1c212a;
  --paper-alt: #232a33;
  --surface: #232a33;
  --ink: #e9e7e2;
  --ink-soft: #c6c2ba;
  --ink-muted: #9aa0a8;
  --ink-faint: #8b919a;

  --navy: #4f8bcc;
  --navy-light: #74a7e0;
  --navy-dark: #356aa6;
  --navy-subtle: rgba(111, 166, 220, 0.16);
  --navy-wash: rgba(111, 166, 220, 0.08);

  --gold: #d8b24e;
  --gold-light: #ecc96c;
  --gold-dark: #e0bb55;
  --gold-subtle: rgba(216, 178, 78, 0.14);
  --gold-line: rgba(216, 178, 78, 0.40);
  --accent: #d8b24e;

  --cat-standard: #6ba3e0;
  --cat-vanguard: #44b8b8;
  --cat-heavy: #dd8163;
  --cat-support: #a98ada;
  --cat-transport: #9aa0a8;

  --success: #5cc063;
  --success-ink: #6ecf75;
  --warning: #e3ad3e;
  --warn-ink: #e3ad3e;
  --warn-bg: #3a2f18;
  --error: #e2685a;
  --error-ink: #e88a7e;
  --info: #74a7e0;

  --stroke: #353c45;
  --stroke-light: #2a313a;
  --stroke-strong: #49515b;
  --stroke-accent: rgba(111, 166, 220, 0.30);

  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.45);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,0.04), 0 6px 14px rgba(0,0,0,0.50);
  --shadow-xl: 0 0 0 1px rgba(255,255,255,0.05), 0 10px 24px rgba(0,0,0,0.55);
  --shadow-dialog: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.65);

  color-scheme: dark;
}
html[data-theme="dark"] .btn-primary { background: #2e6db5; border-color: #2e6db5; color: #fff; }
html[data-theme="dark"] .btn-primary:hover { background: #3a7cc6; border-color: #3a7cc6; }

/* ── 2. Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-warm);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

::selection { background: var(--gold-subtle); }

:focus-visible {
  outline: 2px solid var(--navy-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── 3. Typography ───────────────────────────────────────────── */
.view-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}
.text-overline {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.text-caption { font-size: var(--text-sm); color: var(--ink-muted); }
.text-mono { font-family: var(--font-mono); }

/* ── 4. Deco elements ────────────────────────────────────────── */
.deco-divider {
  display: flex; align-items: center; justify-content: center;
  margin: var(--sp-xl) auto; max-width: 320px; position: relative;
}
.deco-divider::before, .deco-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--gold-line);
}
.deco-diamond {
  width: 8px; height: 8px; margin: 0 var(--sp-md);
  background: var(--gold); transform: rotate(45deg);
}
.card-deco { position: relative; }
.card-deco::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid transparent; border-radius: var(--radius-md);
  transition: border-color var(--duration-normal);
}
.card-deco:hover::after { border-color: var(--gold-line); }

/* ── 5. Topbar ───────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 0 var(--sp-lg);
  background: var(--navy-dark);
  border-bottom: 2px solid var(--gold);
  color: #fff;
}
html[data-theme="dark"] .topbar { background: #0c1219; }
.topbar-brand { color: #fff; text-decoration: none; display: flex; align-items: center; }
.topbar-brand:hover { text-decoration: none; }
.topbar-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-md); font-weight: var(--weight-heavy);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.tw-thin { font-weight: var(--weight-regular); opacity: 0.75; margin-left: 0.4em; }
.topbar-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.25); }
.topbar-context {
  font-family: var(--font-condensed); font-size: var(--text-sm);
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.8);
}
.topbar-actions { margin-left: auto; display: flex; gap: var(--sp-sm); align-items: center; }
.topbar-global-settings-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.34);
  border-radius: var(--radius-md); color: #fff;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.topbar-global-settings-btn:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.6); }
.topbar .btn-topbar {
  padding: var(--sp-xs) var(--sp-md); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: var(--text-sm); font-weight: var(--weight-medium);
  display: inline-flex; align-items: center; gap: var(--sp-xs);
}
.topbar .btn-topbar:hover { background: rgba(255,255,255,0.26); }

/* ── 6. App shell ────────────────────────────────────────────── */
.app-shell { flex: 1; display: flex; flex-direction: column; }
.landing, .army-list, #view-builder, #view-shared { flex: 1; }

/* ── 7. Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-lg);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  border: 1px solid transparent; border-radius: var(--radius-md);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
  white-space: nowrap;
}
.btn-sm { padding: var(--sp-xs) var(--sp-md); font-size: var(--text-xs); }
.btn-block { width: 100%; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-light); border-color: var(--navy-light); }
.btn-outline { background: transparent; border-color: var(--stroke-strong); color: var(--ink-soft); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-wash); }
.btn-ghost { background: transparent; color: var(--ink-muted); }
.btn-ghost:hover { background: var(--paper-alt); color: var(--ink); }
.btn-danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── 8. Cards & layout helpers ───────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.grow { flex: 1; }

/* ── 9. Forms ────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--sp-xs); }
.form-label {
  font-family: var(--font-condensed); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.form-input, .form-textarea, .form-select {
  width: 100%; padding: var(--sp-sm) var(--sp-md);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--stroke); border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--navy);
}
.form-textarea { resize: vertical; font-family: var(--font-mono); font-size: var(--text-xs); }
.float-field { position: relative; }
.float-field .form-input { padding-top: 18px; padding-bottom: 6px; }
.float-label {
  position: absolute; left: var(--sp-md); top: 13px;
  font-size: var(--text-sm); color: var(--ink-faint);
  pointer-events: none; transition: all var(--duration-fast) var(--ease-out);
}
.float-field .form-input:focus + .float-label,
.float-field .form-input:not(:placeholder-shown) + .float-label {
  top: 4px; font-size: 11px; color: var(--navy);
  font-family: var(--font-condensed); letter-spacing: 0.06em; text-transform: uppercase;
}
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-sm) 0; border-bottom: 1px solid var(--stroke-light);
}
.switch-row:last-child { border-bottom: none; }
.switch-label { font-size: var(--text-sm); }
.switch {
  position: relative; width: 40px; height: 22px; flex: 0 0 40px;
  background: var(--stroke-strong); border-radius: 11px;
  transition: background var(--duration-fast);
}
.switch.on { background: var(--navy); }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-out);
}
.switch.on::after { transform: translateX(18px); }

/* ── 10. Modals ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(15, 20, 26, 0.55);
  display: none; align-items: center; justify-content: center;
  padding: var(--sp-lg);
  backdrop-filter: blur(2px);
}
.modal-overlay.active { display: flex; }
#modal-confirm { z-index: calc(var(--z-overlay) + 50); }
.modal-panel {
  background: var(--paper); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dialog);
  width: 100%; max-width: 560px; max-height: 88vh;
  display: flex; flex-direction: column;
  animation: modal-in var(--duration-normal) var(--ease-out);
}
.modal-panel--lg { max-width: 720px; }
.modal-panel--xl { max-width: 1080px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.99); } }
.modal-header {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-lg) var(--sp-xl);
  border-bottom: 1px solid var(--stroke-light);
}
.modal-title {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-bold); flex: 1;
}
.modal-close {
  width: 28px; height: 28px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-muted);
}
.modal-close:hover { background: var(--paper-alt); color: var(--ink); }
.modal-body { padding: var(--sp-xl); overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--sp-sm);
  padding: var(--sp-lg) var(--sp-xl);
  border-top: 1px solid var(--stroke-light);
}

/* ── 11. Badges & chips ──────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-xxs);
  padding: 2px var(--sp-sm); border-radius: var(--radius-sm);
  font-family: var(--font-condensed); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
}
.badge-neutral { background: var(--paper-alt); color: var(--ink-soft); border: 1px solid var(--stroke); }
.badge-rare { background: var(--gold-subtle); color: var(--gold-dark); border: 1px solid var(--gold-line); }
.badge-unique { background: var(--navy-subtle); color: var(--navy); border: 1px solid var(--stroke-accent); }
.badge-error { background: rgba(196,60,47,0.12); color: var(--error-ink); border: 1px solid rgba(196,60,47,0.35); }
.badge-cat {
  background: color-mix(in srgb, var(--cat) 12%, transparent);
  color: var(--cat); border: 1px solid color-mix(in srgb, var(--cat) 40%, transparent);
}
.cat-standard { --cat: var(--cat-standard); }
.cat-vanguard { --cat: var(--cat-vanguard); }
.cat-heavy { --cat: var(--cat-heavy); }
.cat-support { --cat: var(--cat-support); }
.cat-transport { --cat: var(--cat-transport); }

/* Transport symbols, drawn with CSS so they match the printed cards. */
.tsym {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 20px;
  font-family: var(--font-condensed); font-size: 11px; font-weight: var(--weight-bold);
  line-height: 1; color: #fff;
}
.tsym-square { background: var(--sym); border-radius: 2px; }
.tsym-triangle { clip-path: polygon(50% 6%, 100% 100%, 0 100%); padding-top: 6px; background: var(--sym); }
/* The Resistance's K9 symbol is the same outline inverted, and a separate slot. */
.tsym-k9 { clip-path: polygon(0 0, 100% 0, 50% 94%); padding-bottom: 8px; background: var(--sym); }
.tsym-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--sym); }
.tsym-circle { background: var(--sym); border-radius: 50%; }
.tsym-pentagon { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); background: var(--sym); }
.tsym.shape-square { --sym: var(--sym-square); }
.tsym.shape-k9 { --sym: var(--sym-k9); }
.tsym.shape-triangle { --sym: var(--sym-triangle); }
.tsym.shape-diamond { --sym: var(--sym-diamond); }
.tsym.shape-circle { --sym: var(--sym-circle); }
.tsym.shape-pentagon { --sym: var(--sym-pentagon); }
/* Hollow = carrying capacity; solid = the space a unit fills. */
.tsym.hollow { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--sym); }
.tsym.hollow.tsym-triangle, .tsym.hollow.tsym-k9,
.tsym.hollow.tsym-diamond, .tsym.hollow.tsym-pentagon {
  background: var(--sym); color: var(--ink);
  position: relative;
}
.tsym.hollow.tsym-triangle::before, .tsym.hollow.tsym-k9::before,
.tsym.hollow.tsym-diamond::before, .tsym.hollow.tsym-pentagon::before {
  content: ""; position: absolute; inset: 3px; background: var(--paper);
  clip-path: inherit;
}
.tsym.hollow > span { position: relative; z-index: 1; }
.tsym-group { display: inline-flex; align-items: center; gap: var(--sp-xs); }
/* Capacity traded away for a gun: shown, struck out, so the swap is legible. */
.tsym-lost { position: relative; display: inline-flex; opacity: 0.45; }
.tsym-lost::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
  height: 2px; background: var(--error); transform: rotate(-20deg);
}
/* A symbol printed inside a sentence sits on the text baseline. */
.card-note .tsym { vertical-align: -5px; margin: 0 2px; }

/* ── 12. Landing ─────────────────────────────────────────────── */
.landing { max-width: 1000px; margin: 0 auto; padding: var(--sp-4xl) var(--sp-xl); width: 100%; }
.landing-hero { text-align: center; }
.landing-title {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: var(--weight-heavy); letter-spacing: -0.015em; text-transform: uppercase;
}
.landing-sub {
  font-family: var(--font-condensed); font-size: var(--text-md);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--sp-xs);
}
.landing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-lg); margin-top: var(--sp-2xl);
}
.tool-card {
  background: var(--paper); border: 1px solid var(--stroke);
  border-radius: var(--radius-lg); padding: var(--sp-xl);
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--gold-line); }
.tool-card-icon { color: var(--navy); margin-bottom: var(--sp-md); }
.tool-card-title {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-bold); margin-bottom: var(--sp-xs);
}
.tool-card-desc { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.45; }
.landing-note {
  margin-top: var(--sp-3xl); text-align: center;
  font-size: var(--text-sm); color: var(--ink-faint);
}
.stagger > * { animation: fade-up var(--duration-normal) var(--ease-out) backwards; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ── 13. Army list ───────────────────────────────────────────── */
.army-list { max-width: 1100px; margin: 0 auto; padding: var(--sp-2xl) var(--sp-xl); width: 100%; }
.army-list-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-lg); margin-bottom: var(--sp-lg); flex-wrap: wrap;
}
.sort-bar { display: flex; align-items: center; gap: var(--sp-xs); margin-bottom: var(--sp-lg); flex-wrap: wrap; }
.sort-label {
  font-family: var(--font-condensed); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  margin-right: var(--sp-xs);
}
.sort-btn {
  padding: 3px var(--sp-md); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-muted);
  border: 1px solid transparent;
}
.sort-btn:hover { background: var(--paper-alt); color: var(--ink); }
.sort-btn.active { background: var(--navy-subtle); color: var(--navy); border-color: var(--stroke-accent); }

.army-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-lg); }
.army-card {
  background: var(--paper); border: 1px solid var(--stroke);
  border-left: 4px solid var(--faction, var(--navy));
  border-radius: var(--radius-lg); padding: var(--sp-lg);
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.army-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.army-card-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); }
.army-card-faction {
  font-family: var(--font-condensed); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faction, var(--navy));
  font-weight: var(--weight-semibold);
}
.army-card-desc { font-size: var(--text-sm); color: var(--ink-muted); }
.army-card-meta {
  display: flex; align-items: center; gap: var(--sp-md);
  margin-top: auto; padding-top: var(--sp-sm);
  border-top: 1px solid var(--stroke-light);
  font-size: var(--text-xs); color: var(--ink-muted);
}
.army-card-points { font-weight: var(--weight-bold); color: var(--ink); font-size: var(--text-sm); }
.army-card-actions { display: flex; gap: var(--sp-xs); margin-left: auto; }
.icon-btn {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted);
}
.icon-btn:hover { background: var(--paper-alt); color: var(--ink); }
.icon-btn.danger:hover { background: rgba(196,60,47,0.12); color: var(--error-ink); }

.empty-state { text-align: center; padding: var(--sp-4xl) var(--sp-xl); color: var(--ink-muted); grid-column: 1 / -1; }
.empty-state-title { font-family: var(--font-display); font-size: var(--text-md); color: var(--ink); margin-bottom: var(--sp-xs); }

/* ── 14. Builder layout ──────────────────────────────────────── */
/* The builder owns the whole viewport below the topbar and does not let the
   document scroll at all (see `body.in-builder`). Each of the three panes is a
   scroll container in its own right, so a wheel always acts on the pane under
   the pointer rather than being split between a pane and the page — which is
   what let a long Group list hide its own 'Add Group' button.
   `dvh` keeps that true on mobile browsers whose toolbars shrink the viewport;
   the `vh` line before it is the fallback for anything that lacks `dvh`. */
.builder-layout {
  display: flex; align-items: stretch;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
}
.builder-sidebar { flex: 0 0 var(--sidebar-w); }
.builder-overview { flex: 1 1 0; }
.builder-detail { flex: 1.05 1 0; }
.builder-sidebar {
  min-height: 0; overflow-y: auto;
  background: var(--navy-dark); color: rgba(255,255,255,0.92);
  padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-lg);
}
html[data-theme="dark"] .builder-sidebar { background: #0c1219; }
.army-info-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); color: #fff; }
.army-info-faction {
  font-family: var(--font-condensed); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65);
}
.builder-sidebar .badge-neutral { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.28); }
.game-size-detail { margin-top: var(--sp-sm); font-size: var(--text-xs); color: rgba(255,255,255,0.6); line-height: 1.6; }

.points-bar { background: rgba(255,255,255,0.07); border-radius: var(--radius-md); padding: var(--sp-md); }
.points-bar-header { display: flex; align-items: baseline; gap: var(--sp-xs); }
.points-current { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-heavy); color: #fff; }
.points-limit { font-size: var(--text-sm); color: rgba(255,255,255,0.6); }
.points-remaining { margin-left: auto; font-size: var(--text-xs); color: rgba(255,255,255,0.6); }
.points-track { height: 5px; background: rgba(255,255,255,0.16); border-radius: 3px; margin: var(--sp-sm) 0; overflow: hidden; }
.points-fill { height: 100%; background: var(--gold); transition: width var(--duration-normal) var(--ease-out); }
.points-fill.over { background: var(--error); }
.groups-line .text-overline { color: rgba(255,255,255,0.65); }

/* Category balance: Standard sets the ceiling the other three must sit under. */
.cat-balance { margin-top: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-xs); }
.cat-row { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--text-xs); }
.cat-row-name { width: 68px; color: rgba(255,255,255,0.72); font-family: var(--font-condensed); letter-spacing: 0.05em; text-transform: uppercase; }
.cat-row-track { flex: 1; height: 4px; background: rgba(255,255,255,0.14); border-radius: 2px; overflow: hidden; }
.cat-row-fill { height: 100%; background: var(--cat); }
.cat-row-val { width: 40px; text-align: right; color: rgba(255,255,255,0.8); font-variant-numeric: tabular-nums; }
.cat-row.over .cat-row-val { color: var(--error); font-weight: var(--weight-bold); }

.sidebar-section-label {
  font-family: var(--font-condensed); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-bottom: var(--sp-sm);
}
.alert {
  border-radius: var(--radius-md); padding: var(--sp-sm) var(--sp-md);
  font-size: var(--text-xs); line-height: 1.45; margin-bottom: var(--sp-sm);
  display: flex; gap: var(--sp-sm); align-items: flex-start;
}
.alert-error { background: rgba(196,60,47,0.20); color: #ffd9d4; border: 1px solid rgba(196,60,47,0.5); }
.alert-warn { background: rgba(217,140,31,0.18); color: #f7e2bd; border: 1px solid rgba(217,140,31,0.45); }
.alert-ok { background: rgba(62,153,69,0.16); color: #cfeed2; border: 1px solid rgba(62,153,69,0.4); }
.alert-icon { flex: 0 0 auto; margin-top: 1px; }

.commander-chip {
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md); padding: var(--sp-sm) var(--sp-md);
  display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-sm);
}
.commander-level {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: var(--gold); color: var(--navy-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--text-xs);
}
.commander-info { flex: 1; min-width: 0; }
.commander-name { font-size: var(--text-sm); color: #fff; font-weight: var(--weight-medium); }
.commander-where { font-size: 11px; color: rgba(255,255,255,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commander-chip .icon-btn { color: rgba(255,255,255,0.6); }
.commander-chip .icon-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* ── 15. Overview (groups) ───────────────────────────────────── */
/* The group list scrolls in its own right, like the rail and the detail pane,
   so a long list never pushes 'Add Group' out of reach. */
/* Three stacked bands: a fixed header, the scrolling list of Groups, and a
   pinned 'Add Group' footer. The button lives outside the scroll region on
   purpose — it must never be somewhere you have to scroll to find. */
.builder-overview {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0; overflow: hidden;
}
.overview-head { padding: var(--sp-xl) var(--sp-xl) var(--sp-md); }
.overview-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 var(--sp-xl) var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-lg);
}
/* Capping a column flex container's height makes its children shrink to fit,
   which would squash every Group card down to its header. */
.overview-list > * { flex-shrink: 0; }
.overview-foot {
  padding: var(--sp-md) var(--sp-xl) var(--sp-xl);
  border-top: 1px solid var(--stroke-light); background: var(--paper-warm);
}
.overview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }
.overview-title {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  display: flex; align-items: baseline; gap: var(--sp-sm);
}
.overview-count {
  font-family: var(--font-condensed); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--ink-muted);
}

.group-card {
  background: var(--paper); border: 1px solid var(--stroke);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.group-card:hover { border-color: var(--stroke-strong); }
.group-card.selected { border-color: var(--navy); box-shadow: var(--shadow-md); }
.group-card.invalid { border-left: 4px solid var(--error); }
.group-head {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--paper-warm); border-bottom: 1px solid var(--stroke-light);
}
.group-card:hover .group-head { background: var(--paper-alt); }
.group-index {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: var(--radius-sm);
  background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-condensed); font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.group-name {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--weight-bold); flex: 1;
}
.group-name-input {
  flex: 1; font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--weight-bold); color: var(--ink);
  background: var(--paper); border: 1px solid var(--navy);
  border-radius: var(--radius-sm); padding: 1px var(--sp-xs);
}
.group-points { font-family: var(--font-condensed); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.group-body { padding: var(--sp-sm) var(--sp-lg) var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-xs); }

.squad-row {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) 0; border-bottom: 1px solid var(--stroke-light);
}
.squad-row:last-child { border-bottom: none; }
/* Carried squads indent one step per level of nesting. */
.squad-row.is-aboard { padding-left: calc(var(--depth, 1) * var(--sp-xl)); position: relative; }
.squad-row.is-aboard::before {
  content: ""; position: absolute; top: 50%; width: 10px; height: 1px;
  left: calc((var(--depth, 1) - 1) * var(--sp-xl) + var(--sp-sm));
  background: var(--stroke-strong);
}
.squad-count {
  font-family: var(--font-condensed); font-weight: var(--weight-bold);
  color: var(--ink-muted); min-width: 22px;
}
.squad-name { flex: 1; font-size: var(--text-sm); min-width: 0; }
.squad-variant { color: var(--ink-muted); font-size: var(--text-xs); }
.squad-points { font-family: var(--font-condensed); font-size: var(--text-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.add-group-btn {
  border: 1px dashed var(--stroke-strong); border-radius: var(--radius-lg);
  padding: var(--sp-lg); width: 100%; color: var(--ink-muted);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.add-group-btn:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-wash); }

/* ── 16. Detail panel ────────────────────────────────────────── */
.builder-detail {
  padding: var(--sp-xl); border-left: 1px solid var(--stroke);
  background: var(--paper);
  min-height: 0; min-width: 0; overflow-y: auto;
}
.detail-header { display: flex; align-items: flex-start; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.detail-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); flex: 1; }
.detail-section { margin-bottom: var(--sp-xl); }
.detail-section-label {
  font-family: var(--font-condensed); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: var(--sp-xs); border-bottom: 1px solid var(--gold-line);
  margin-bottom: var(--sp-md);
}

.unit-block {
  border: 1px solid var(--stroke); border-radius: var(--radius-lg);
  margin-bottom: var(--sp-md); overflow: hidden;
}
.unit-block-head {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md); background: var(--paper-warm);
  border-bottom: 1px solid var(--stroke-light);
}
.unit-block-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); flex: 1; }
.unit-block-body { padding: var(--sp-md); }
/* A Squad drawn inside the Transport carrying it. */
.unit-block--aboard { margin-top: var(--sp-md); background: var(--paper-warm); }
.unit-block--aboard .unit-block-head { background: var(--paper-alt); }
.card-note {
  margin-top: var(--sp-sm); padding: var(--sp-sm) var(--sp-md);
  border-left: 3px solid var(--gold-line); background: var(--gold-subtle);
  font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.5;
}

.qty-bar { display: inline-flex; align-items: center; border: 1px solid var(--stroke); border-radius: var(--radius-md); overflow: hidden; }
.qty-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.qty-btn:hover { background: var(--paper-alt); color: var(--ink); }
.qty-val { min-width: 28px; text-align: center; font-family: var(--font-condensed); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── 17. Stat & weapon tables ────────────────────────────────── */
.stat-grid { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-md); }
.stat-cell {
  border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  padding: 2px var(--sp-sm); min-width: 46px; text-align: center; background: var(--paper-warm);
}
.stat-key {
  font-family: var(--font-condensed); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); display: block;
}
.stat-val { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); }

.weapon-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.weapon-table th {
  font-family: var(--font-condensed); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: left; color: var(--ink-muted);
  padding: var(--sp-xs) var(--sp-xs); border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
}
.weapon-table td { padding: var(--sp-xs); border-bottom: 1px solid var(--stroke-light); vertical-align: top; }
.weapon-table tr:last-child td { border-bottom: none; }
.weapon-table .wt-name { font-weight: var(--weight-medium); }
.weapon-table .wt-num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weapon-table .wt-special { color: var(--ink-muted); }
.wt-variant { color: var(--cat-support); font-size: 10px; text-transform: uppercase; font-family: var(--font-condensed); letter-spacing: 0.05em; }
.wt-upgrade { color: var(--success-ink); font-size: 10px; font-family: var(--font-condensed); letter-spacing: 0.05em; }
tr.wt-off td { opacity: 0.38; }
/* A weapon a swap has traded away: still listed, because the card lists it.
   The rule is struck out cell by cell rather than on the row, because
   text-decoration inherits and a descendant cannot cancel it — which would
   have struck through the 'replaced' badge as well. */
tr.wt-removed td { opacity: 0.5; }
tr.wt-removed td:not(.wt-name) { text-decoration: line-through; }
.wt-swapped {
  color: var(--error-ink); font-size: 10px; font-family: var(--font-condensed);
  letter-spacing: 0.05em; text-transform: uppercase; margin-left: var(--sp-xs);
}

.rule-chip {
  display: inline-block; padding: 1px var(--sp-sm); margin: 0 var(--sp-xxs) var(--sp-xxs) 0;
  border-radius: var(--radius-sm); background: var(--navy-subtle); color: var(--navy);
  font-size: 11px; font-family: var(--font-condensed); letter-spacing: 0.04em;
  border: 1px solid var(--stroke-accent); cursor: help;
}
.rule-chip:hover { background: var(--navy); color: #fff; }

.rule-entry { padding: var(--sp-md) 0; border-bottom: 1px solid var(--stroke-light); }
.rule-entry:last-child { border-bottom: none; }
.rule-entry-name { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: var(--sp-xxs); }
.rule-entry-text { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; }
.rule-group-label {
  font-family: var(--font-condensed); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
  margin: var(--sp-lg) 0 var(--sp-sm); padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--gold-line);
}

/* ── 18. Unit picker ─────────────────────────────────────────── */
.search-bar {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md); margin-bottom: var(--sp-md);
  border: 1px solid var(--stroke); border-radius: var(--radius-md);
  color: var(--ink-muted); background: var(--paper);
}
.search-input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--text-sm); }
.category-tabs { display: flex; gap: var(--sp-xs); flex-wrap: wrap; margin-bottom: var(--sp-md); }
.cat-tab {
  padding: var(--sp-xs) var(--sp-md); border-radius: var(--radius-md);
  border: 1px solid var(--stroke); font-size: var(--text-xs);
  font-family: var(--font-condensed); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: var(--weight-semibold);
}
.cat-tab:hover { border-color: var(--stroke-strong); color: var(--ink); }
.cat-tab.active { background: var(--cat, var(--navy)); border-color: var(--cat, var(--navy)); color: #fff; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); margin-bottom: var(--sp-md); flex-wrap: wrap; }
.results-bar { font-size: var(--text-xs); color: var(--ink-muted); }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-md); }
.unit-card {
  border: 1px solid var(--stroke); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer; background: var(--paper);
  display: flex; flex-direction: column;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.unit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--navy); }
.unit-card.disabled { opacity: 0.5; cursor: not-allowed; }
.unit-card.disabled:hover { transform: none; box-shadow: none; border-color: var(--stroke); }
.unit-card-art { aspect-ratio: 16 / 10; background: var(--paper-alt); position: relative; overflow: hidden; }
.unit-card-art img { width: 100%; height: 100%; object-fit: cover; }
.unit-card-cat {
  position: absolute; top: var(--sp-xs); left: var(--sp-xs);
  background: var(--cat); color: #fff;
  font-family: var(--font-condensed); font-size: 10px; font-weight: var(--weight-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px var(--sp-sm); border-radius: var(--radius-sm);
}
.unit-card-cost {
  position: absolute; top: var(--sp-xs); right: var(--sp-xs);
  background: rgba(15,20,26,0.78); color: #fff;
  font-family: var(--font-condensed); font-size: 11px; font-weight: var(--weight-bold);
  padding: 1px var(--sp-sm); border-radius: var(--radius-sm);
}
.unit-card-body { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-xs); flex: 1; }
.unit-card-name { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.25; }
.unit-card-meta { font-size: var(--text-xs); color: var(--ink-muted); display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.unit-card-tags { display: flex; gap: var(--sp-xs); flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-xs); }

/* ── 19. Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-2xl); transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast); background: var(--navy-dark); color: #fff;
  padding: var(--sp-sm) var(--sp-xl); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl); font-size: var(--text-sm);
  opacity: 0; pointer-events: none; transition: opacity var(--duration-normal), transform var(--duration-normal) var(--ease-out);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 20. Faction & size pickers ──────────────────────────────── */
.faction-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
.faction-opt {
  border: 1px solid var(--stroke); border-radius: var(--radius-md);
  padding: var(--sp-md) var(--sp-sm); text-align: center;
  border-top: 3px solid var(--faction);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.faction-opt:hover { background: var(--paper-alt); }
.faction-opt.selected { background: color-mix(in srgb, var(--faction) 10%, transparent); border-color: var(--faction); }
.faction-opt-name { font-family: var(--font-condensed); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.faction-opt-full { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }

.size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-sm); }
.size-opt {
  border: 1px solid var(--stroke); border-radius: var(--radius-md);
  padding: var(--sp-md); text-align: left;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.size-opt:hover { background: var(--paper-alt); }
.size-opt.selected { background: var(--navy-subtle); border-color: var(--navy); }
.size-opt-name { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.size-opt-meta { font-size: 11px; color: var(--ink-muted); line-height: 1.5; margin-top: 2px; }
.new-army-points-row { margin-top: var(--sp-md); }
.new-army-row { display: flex; gap: var(--sp-md); flex-wrap: wrap; }

/* Commander / transport option rows */
.opt-row {
  display: flex; align-items: center; gap: var(--sp-md);
  border: 1px solid var(--stroke); border-radius: var(--radius-md);
  padding: var(--sp-md); width: 100%; text-align: left;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.opt-row:hover:not(:disabled) { border-color: var(--navy); background: var(--navy-wash); }
.opt-row:disabled { opacity: 0.45; cursor: not-allowed; }
.opt-row-main { flex: 1; min-width: 0; }
.opt-row-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.opt-row-sub { font-size: var(--text-xs); color: var(--ink-muted); }
.opt-row-cost { font-family: var(--font-condensed); font-weight: var(--weight-bold); }

/* Tabs inside a dialog, for picking between two views of the same thing. */
.tab-row { display: flex; gap: var(--sp-xs); border-bottom: 1px solid var(--stroke); }
.tab {
  padding: var(--sp-sm) var(--sp-lg); margin-bottom: -1px;
  font-family: var(--font-condensed); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.share-preview {
  width: 100%; font-family: var(--font-mono); font-size: var(--text-xs);
  line-height: 1.5; resize: vertical;
}

/* ── 20b. Damage calculator ──────────────────────────────────── */
/* Chart colours are two steps of one hue, validated against both surfaces:
   the emphasis step marks outcomes that destroy the target, the recessive one
   carries the rest. One series, so the heading names it and there is no legend. */
:root {
  --chart-emphasis: #2a5080;
  --chart-recessive: #96a4b4;
  --chart-grid: #e8e5df;
}
html[data-theme="dark"] {
  --chart-emphasis: #74a7e0;
  --chart-recessive: #546376;
  --chart-grid: #2a313a;
}

.calc-view { max-width: 1180px; margin: 0 auto; padding: var(--sp-2xl) var(--sp-xl); width: 100%; }
.calc-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-2xl); align-items: start; }
.calc-block { margin-bottom: var(--sp-xl); }
.calc-mods { display: flex; gap: var(--sp-md); margin-top: var(--sp-md); }
.calc-mod {
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-xxs);
  font-family: var(--font-condensed); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.calc-headline { margin-bottom: var(--sp-lg); }

/* A handful of headline numbers is a KPI row, not a chart. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-md); margin-bottom: var(--sp-2xl); }
.kpi { border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--sp-md) var(--sp-lg); background: var(--paper); }
.kpi--emphasis { border-color: var(--chart-emphasis); }
.kpi-label { font-family: var(--font-condensed); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.kpi-value { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: var(--weight-heavy); line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.kpi--emphasis .kpi-value { color: var(--chart-emphasis); }
.kpi-note { font-size: var(--text-xs); color: var(--ink-faint); }

.chart { margin: 0 0 var(--sp-lg); }
.chart-title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: var(--sp-md); }
.chart-sub { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--ink-muted); margin-top: 2px; }
.chart-plot {
  display: flex; align-items: flex-end; justify-content: flex-start; gap: 2px;
  height: 210px; border-bottom: 1px solid var(--chart-grid);
}
/* Columns take a fixed slot rather than dividing the width, so a two-column
   distribution does not sprawl across the panel; with many columns they shrink
   and the bar's own 24px cap leaves the rest as air. */
.col {
  flex: 1 1 0; min-width: 0; max-width: 48px;
  display: flex; flex-direction: column; align-items: center; height: 100%;
}
.col-plot { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.col-bar {
  width: 100%; max-width: 24px;                        /* never fill the slot */
  background: var(--chart-recessive);
  border-radius: 4px 4px 0 0;                          /* rounded data-end, square baseline */
  min-height: 1px;
  transition: background var(--duration-fast);
}
.col-bar.is-kill { background: var(--chart-emphasis); }
.col:hover .col-bar { filter: brightness(1.12); }
.col-value {
  font-family: var(--font-condensed); font-size: 11px; font-weight: var(--weight-semibold);
  color: var(--ink-soft); margin-bottom: 2px; white-space: nowrap;
}
.col-tick { font-family: var(--font-condensed); font-size: 11px; color: var(--ink-muted); padding-top: var(--sp-xs); }
.chart-axis {
  font-family: var(--font-condensed); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); text-align: center; margin-top: var(--sp-xs);
}
.calc-table { margin-top: var(--sp-md); max-width: 460px; }
.wt-calc { width: 26px; }

@media (max-width: 900px) {
  .calc-layout { grid-template-columns: 1fr; }
}

/* ── 21. Shared view ─────────────────────────────────────────── */
.shared-container { max-width: 820px; margin: 0 auto; padding: var(--sp-2xl) var(--sp-xl); }
.share-code {
  font-family: var(--font-mono); font-size: var(--text-xs);
  background: var(--paper-alt); border: 1px solid var(--stroke);
  border-radius: var(--radius-md); padding: var(--sp-md);
  word-break: break-all; max-height: 160px; overflow-y: auto;
}

/* In the builder the document itself must not scroll: the panes do. The footer
   is part of the page, so it steps aside there and returns on every other view. */
body.in-builder { overflow: hidden; }
body.in-builder .game-info-footer { display: none; }

/* ── 22. Footer ──────────────────────────────────────────────── */
.game-info-footer {
  border-top: 1px solid var(--stroke); background: var(--paper-alt);
  padding: var(--sp-md) var(--sp-xl); margin-top: auto;
}
.gif-inner {
  max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--sp-sm);
  font-size: var(--text-xs); color: var(--ink-muted);
}
.gif-title { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--ink-soft); }
.gif-sep { opacity: 0.5; }

/* ── 23. Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* Too narrow for three columns, so the panes stack and the page scrolls as
     one — which means the builder must give the document back. */
  .builder-layout { display: block; height: auto; overflow: visible; }
  .builder-sidebar, .builder-overview, .builder-detail,
  .overview-list { height: auto; max-height: none; overflow: visible; }
  .overview-head, .overview-list, .overview-foot { padding-left: 0; padding-right: 0; }
  .builder-overview { padding: var(--sp-lg) var(--sp-md); }
  .overview-foot { border-top: none; background: transparent; }
  .builder-detail { border-left: none; border-top: 1px solid var(--stroke); }
  body.in-builder { overflow: visible; }
  body.in-builder .game-info-footer { display: block; }
}
@media (max-width: 640px) {
  .desktop-only { display: none; }
  .landing { padding: var(--sp-2xl) var(--sp-md); }
  .army-list, .builder-overview, .builder-detail { padding: var(--sp-lg) var(--sp-md); }
  .faction-picker { grid-template-columns: repeat(2, 1fr); }
  .modal-body, .modal-header, .modal-footer { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
  .unit-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 24. Print ───────────────────────────────────────────────── */
@media print {
  @page { margin: 12mm; }
  .topbar, .builder-sidebar, .builder-detail, .game-info-footer,
  .modal-overlay, .add-group-btn, .toast, .overview-actions,
  .icon-btn, .qty-bar { display: none !important; }
  body { background: #fff; color: #000; font-size: 10pt; }
  /* On screen the builder is a fixed-height, three-pane region that scrolls
     internally. On paper it must be one continuous flow, or only the first
     screenful of Groups would print. */
  body.in-builder { overflow: visible; }
  .builder-layout { display: block; height: auto; overflow: visible; }
  .builder-overview, .overview-list {
    padding: 0; height: auto; max-height: none; overflow: visible; display: block;
  }
  .overview-head, .overview-foot { display: none; }
  .group-card { break-inside: avoid; border: 1px solid #999; box-shadow: none; margin-bottom: 6pt; }
  .group-head { background: #eee; }
  .print-header { display: block !important; margin-bottom: 10pt; border-bottom: 2px solid #000; padding-bottom: 4pt; }
}
.print-header { display: none; }