/* ═══════════════════════════════════════════════════════════════
   DROPFLEET COMMANDER — FLEET BUILDER
   Light Theme · Warm Off-White + Navy · Art Deco Gold Accents
   ═══════════════════════════════════════════════════════════════ */

/* Terminal Grotesque Open — Velvetyne / Studio Triple (OFL). Used only for the
   WarLore wordmark in the footer credit. */
@font-face {
  font-family: "Terminal Grotesque Open";
  src: url("../assets/fonts/terminal-grotesque-open.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

  /* Font Sizes */
  --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;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Spacing (4px grid) */
  --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;

  /* Border Radius — deliberate, not bubbly */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;   /* dialogs / drawers (Fluent 2XL) */

  /* ── Light Theme Colors ── */
  --paper: #ffffff;
  --paper-warm: #faf8f5;
  --paper-alt: #f3f1ec;
  --ink: #1c1a17;
  --ink-soft: #3a3834;
  --ink-muted: #6b6660;
  --ink-faint: #66615a;   /* WCAG AA: 5.4:1 on paper-alt beige (was #7e7870 = 3.9:1, failed on beige) */

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

  /* Art Deco Gold (secondary accent) */
  --gold: #b8932e;
  --gold-light: #d4ad4a;
  --gold-dark: #785e17;
  --gold-subtle: rgba(184, 147, 46, 0.10);
  --gold-line: rgba(184, 147, 46, 0.35);

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

  /* Faction text colors (darkened for WCAG AA on white) */
  --faction-ucm-text: #287030;
  --faction-shaltari-text: #946010;
  --faction-bioficer-text: #1f7070;

  /* Semantic */
  --success: #3e9945;
  --warning: #d98c1f;
  --error: #c43c2f;
  --info: #2a5080;

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

  /* Elevation — a strict ladder (Fluent: ambient ring + directional key shadow),
     warm-tinted to the theme. Each tier is unambiguously deeper than the last:
     sm resting cards · md raised · lg dropdowns/bars · xl popovers/hover ·
     sheet (28) bottom sheet/side nav · dialog (64) modals. */
  --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-sheet: 0 0 8px rgba(28, 26, 23, 0.10), 0 -12px 28px rgba(28, 26, 23, 0.16);
  --shadow-dialog: 0 0 8px rgba(28, 26, 23, 0.12), 0 24px 56px rgba(28, 26, 23, 0.20);

  /* Z-index scale (monotonic, no ad-hoc values): resting sheet < topbar <
     dialog scrim < sheet-floating-over-picker < popovers/tooltips < toasts.
     Transient popovers sit above dialogs so rule-tooltips work inside modals. */
  --z-sheet: 800;
  --z-topbar: 900;
  --z-overlay: 1000;
  --z-sheet-float: 1100;
  --z-popover: 2000;
  --z-toast: 3000;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;

  /* Layout */
  --topbar-h: 48px;
  --footer-h: 40px;
  --sidebar-w: 260px;
}

/* ── Dark Theme ──────────────────────────────────────────────────
   Opt-in via the topbar toggle (data-theme="dark" on <html>). Only the COLOUR
   tokens flip — every component reads them, so the whole on-screen UI re-themes.
   The print sheet uses hardcoded paper colours (not these tokens), so printouts
   stay light on paper regardless of theme. Contrast tuned for WCAG AA. */
html[data-theme="dark"] {
  --paper: #161a1f;
  --paper-warm: #1c212a;
  --paper-alt: #232a33;
  --ink: #e9e7e2;
  --ink-soft: #c6c2ba;
  --ink-muted: #9aa0a8;     /* AA on paper/paper-alt */
  --ink-faint: #8b919a;

  --navy: #4f8bcc;          /* accent; bright enough to read as text on dark */
  --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;     /* on dark, the "dark" gold must be LIGHT to read */
  --gold-subtle: rgba(216, 178, 78, 0.14);
  --gold-line: rgba(216, 178, 78, 0.40);

  /* Faction text tints re-lightened for dark surfaces */
  --faction-ucm-text: #5cc063;
  --faction-shaltari-text: #e3ad3e;
  --faction-bioficer-text: #44b8b8;

  --success: #5cc063;
  --warning: #e3ad3e;
  --error: #e2685a;
  --info: #74a7e0;

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

  /* Shadows read as near-black ambient + a hairline light ring for elevation. */
  --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-sheet: 0 0 0 1px rgba(255,255,255,0.05), 0 -12px 32px rgba(0,0,0,0.60);
  --shadow-dialog: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.65);

  color-scheme: dark;
}
/* Primary buttons keep white text on a saturated navy in dark mode (the lighter
   accent navy would fail contrast under white), and the page background fills. */
html[data-theme="dark"] body { background: var(--paper); }
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; }
/* Topbar theme toggle */
.topbar-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: var(--sp-xs); padding: 0;
  background: transparent; border: 1px solid var(--stroke); border-radius: var(--radius-md);
  color: var(--ink-soft); cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast);
}
.topbar-theme-btn:hover { background: var(--navy-subtle); border-color: var(--stroke-accent); color: var(--navy); }

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-warm);
  /* Flex column so the site footer always sits within the first screen when the
     view is short (e.g. the landing) and only scrolls when content overflows. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-light); }

::selection { background: var(--gold-light); color: var(--ink); }

/* WarLore wordmark — Terminal Grotesque Open throughout (local font), gold-on-black,
   inverts on hover. Standing brand rule (see memory: reference-warlore-brand). */
.warlore-mark {
  display: inline-block;
  font-family: var(--font-wordmark);
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  color: #FFCC00;
  background: #000;
  padding: 2px 10px;
  margin-bottom: var(--sp-md);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
/* "Lore" is part of the same wordmark — same Terminal Grotesque Open, no slab. */
.warlore-mark .wl-lore { font: inherit; }
.warlore-mark:hover { color: #000; background: #FFCC00; }
/* Inline variant for the credits footer: same gold-on-black brand, sized to sit
   on the footer text line instead of as a standalone hero badge. */
.warlore-mark.warlore-mark-inline {
  font-size: 15px;
  padding: 1px 6px;
  margin-bottom: 0;
  line-height: 1.3;
  vertical-align: -2px;
}

/* Global focus-visible ring — two-stroke (Fluent): a thin light halo tight to
   the element + a navy ring just outside it. The light inner stroke keeps focus
   visible on the dark navy sidebar; the navy stroke keeps it visible on light
   cards. Works on any surface. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid ButtonText; box-shadow: none; }
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: -1px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper-alt); }
::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* ── 3. Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--ink);
}

.text-display {
  font-family: var(--font-brand);
  font-size: var(--text-hero);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
  text-transform: none;
}
.text-title-1 { font-size: var(--text-3xl); }
.text-title-2 { font-size: var(--text-2xl); }
.text-title-3 { font-size: var(--text-xl); }
.text-subtitle { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.text-body { font-size: var(--text-base); }
.text-caption { font-size: var(--text-sm); color: var(--ink-muted); }
.text-overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.text-rules {
  font-family: var(--font-lore);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-muted);   /* grayed to match the namesake (AA: 5:1+) */
}
/* Restore paragraph spacing (the global reset zeroes <p> margins) so multi-
   paragraph lore in the detail modal / shared view reads as separate paragraphs. */
.text-rules p { margin: 0 0 0.7em; }
.text-rules p:last-child { margin-bottom: 0; }

/* Links inside lore / namesake (Wikipedia, tourism boards, etc.). Subtle: same
   colour as the surrounding lore text, distinguished only by a faint underline
   that strengthens a touch on hover. They open in a new tab. */
.lore-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(60, 56, 50, 0.3); /* fallback for no color-mix */
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
}
.lore-link:hover { text-decoration-color: color-mix(in srgb, currentColor 60%, transparent); }

/* ── 4. Art Deco Decorative Elements ─────────────────────────── */
.deco-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  margin: var(--sp-2xl) 0;
}

.deco-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin: var(--sp-xl) 0;
}
.deco-divider::before,
.deco-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-line);
}

.deco-diamond {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Gold corner accents for cards */
.card-deco { position: relative; }
.card-deco::before,
.card-deco::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-style: solid;
  border-color: var(--gold);
  opacity: 0.35;
  pointer-events: none;
}
.card-deco::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.card-deco::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ── 5. Topbar ───────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--navy-dark);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-xl);
  z-index: var(--z-topbar);
  gap: var(--sp-md);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(15, 38, 64, 0.35);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
  color: #fff;
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}
.topbar-brand svg { flex-shrink: 0; }
.topbar-logo { height: 22px; width: auto; display: block; }

.topbar-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.2);
}

.topbar-context {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.topbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.72);
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.topbar-back:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
/* Topbar actions: bright, obviously-clickable bordered pills with larger icons.
   Scoped under .topbar-actions so these beat .btn-ghost (which sets ink-muted).
   Font is Jost (--font-body), the app's primary UI face — unifies the chrome and
   drops Barlow Condensed. #fff on navy-dark = ~14:1. */
.topbar-actions .topbar-action-btn {
  color: #fff;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--radius-sm);
}
.topbar-actions .topbar-action-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.55);
}
.topbar-actions .topbar-action-btn svg { width: 18px; height: 18px; }
.topbar-actions .topbar-action-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: #fff;
}

.app-shell {
  padding-top: var(--topbar-h);
  /* Grow to fill the viewport so the footer is pinned to the bottom, but don't
     force 100vh (that pushed the footer below the fold). */
  flex: 1 0 auto;
}

/* ── 6. Sidebar (dark navy, Hobgoblin-style) ─────────────────── */
.builder-layout {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
}

.builder-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  overflow-y: auto;
  background: var(--navy-dark);
  color: #fff;
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.builder-overview {
  flex: 1;
  min-width: 0;
  max-width: 500px;
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--paper-warm);
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  position: sticky;
  top: var(--topbar-h);
}
.builder-detail {
  flex: 1.5;
  min-width: 0;
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--paper);
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  position: sticky;
  top: var(--topbar-h);
  border-left: 1px solid var(--stroke-light);
  container-type: inline-size;   /* enables width-based container queries below */
}
/* Stack the ship card (art on top, full-width stats/weapons) whenever the detail
   PANEL itself is narrow — independent of viewport — so weapon names and the
   stat grid never get squeezed at any 3-panel width. */
@container (max-width: 560px) {
  .group-ship-entry { flex-direction: column; }
  .group-ship-entry .ship-card-image { width: 100%; height: 130px; }
}
.builder-detail.hidden { display: none; }

/* Sidebar sections */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.sidebar-section-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.4);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-add-group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-sm);
  background: rgba(255,255,255,0.12);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.sidebar-add-group-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
}

/* Fleet info in sidebar */
.fleet-info-panel {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  border: 1px solid rgba(255,255,255,0.08);
}

.fleet-info-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
  /* Rename click target = the name text only, not the full sidebar width. */
  display: inline-block;
  cursor: pointer;
}

.fleet-info-faction {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}

/* Game size detail in sidebar */
#builder-fleet-size {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#builder-fleet-size:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

.game-size-detail {
  margin-top: var(--sp-xs);
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.game-size-detail div {
  white-space: nowrap;
}

/* Points bar (in sidebar) */
.points-bar {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  border: 1px solid rgba(255,255,255,0.08);
}

.points-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-sm);
}

.points-current {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--gold-light);   /* WCAG: 7.3:1 on the navy sidebar (gold-dark was 2.5:1, failed) */
}
/* Navy chrome (points sidebar + topbar): secondary/muted text must be light to
   pass WCAG on the dark bg — the beige-tuned dark grays fail there (~2.7:1). */
.builder-sidebar .text-overline,
.builder-sidebar .text-caption,
.builder-sidebar .points-limit,
.topbar .text-overline,
.topbar .text-caption { color: #c4bfb5; }
/* Add-slot placeholders ("Add Admiral", "Add Space Station") sit on the navy-dark
   sidebar — ink-faint (#66615a) only achieves 2.4:1 there (fails AA). Use #c4bfb5
   (7.7:1 on navy-dark, matches the sidebar label colour) and a white-wash hover. */
.builder-sidebar .add-ship-area { color: #c4bfb5; border-color: rgba(255,255,255,0.2); }
.builder-sidebar .add-ship-area:hover { color: #fff; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.45); }
.builder-sidebar .station-add-optional { color: #c4bfb5; border-color: rgba(255,255,255,0.2); }
.builder-sidebar .station-add-optional:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

.points-limit {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}
.points-remaining {
  margin-left: auto;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  font-weight: var(--weight-medium);
}
.points-remaining.points-over {
  color: var(--danger, #c43c2f);
}

.points-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.points-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--gold);
  transition: width var(--duration-slow) var(--ease-out);
}
.points-fill.over-budget { background: var(--error); }
.points-fill.near-limit { background: var(--warning); }

/* Fleet composition bar */
#fleet-composition:empty { display: none; }
#fleet-composition { margin-top: var(--sp-sm); }
.comp-bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  gap: 1px;
}
.comp-segment {
  min-width: 3px;
  transition: width 0.3s ease;
}
/* Groups composition bar in the sidebar card: 50% thicker, hover for the breakdown
   (the colour-key legend is gone). */
.comp-bar-thick { height: 6px; border-radius: 3px; cursor: help; }
.groups-line { margin-top: var(--sp-sm); }
.ap-line { display: block; margin-top: var(--sp-xs); }
.ap-line:empty { display: none; }
.comp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-sm);
  margin-top: 3px;
}
.comp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-condensed);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-transform: none;
  letter-spacing: 0.03em;
}
.comp-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* Fleet validation warnings */
#fleet-warnings:empty { display: none; }
.fleet-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  margin: var(--sp-xs) 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.3;
}
.fleet-warning-error {
  background: rgba(180, 50, 50, 0.12);
  color: #a8342a;   /* AA: 5.8:1 on the tint (was #c44 = 3.7:1) */
  border: 1px solid rgba(180, 50, 50, 0.25);
}
.fleet-warning-warn {
  background: rgba(180, 140, 30, 0.12);
  color: #8a5810;   /* AA: 5.3:1 on the tint (was #996b00 = 4.0:1) */
  border: 1px solid rgba(180, 140, 30, 0.25);
}

/* Group nav items (sidebar) */
.group-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  padding-left: calc(var(--sp-md) + 3px);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  border: 1px solid transparent;
  position: relative;
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
}

/* Tonnage accent bar on left edge */
.group-nav-item:not(.group-nav-overview)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--nav-accent, rgba(255,255,255,0.15));
  border-radius: 0 2px 2px 0;
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.group-nav-item:not(.group-nav-overview):hover::before,
.group-nav-item:not(.group-nav-overview).active::before {
  opacity: 1;
}

.group-nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.group-nav-item.active {
  /* The ship/group you're currently customizing — clearly highlighted in the roster. */
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.22);
}
.group-nav-item:not(.group-nav-overview).active::before {
  width: 5px;
  opacity: 1;
  box-shadow: 0 0 8px var(--nav-accent, rgba(255,255,255,0.4));
}

.group-nav-item.has-error {
  border-color: rgba(220, 50, 40, 0.3);
}

/* A famous admiral's flagship shown among the overview group cards — read-only
   (managed via the admiral slot), gold accent, "incl." instead of points since
   its cost is already counted with the admiral. */
.overview-flagship-card { cursor: default; }
/* The flagship is a hero ship: clicking opens its datasheet. */
.overview-flagship-clickable { cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.overview-flagship-clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.overview-flagship-pts {
  font-size: var(--text-xs) !important;
  color: var(--ink-faint);
  font-weight: var(--weight-semibold);
}
.flagship-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid var(--gold-line);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.group-nav-overview {
  margin-bottom: var(--sp-xs);
  padding-bottom: var(--sp-sm);
  padding-left: var(--sp-md);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.group-nav-overview.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}
.group-nav-overview .group-nav-name {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Ship art thumbnail in nav */
.group-nav-art {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}
.group-nav-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity var(--duration-fast);
}
.group-nav-item:hover .group-nav-art img,
.group-nav-item.active .group-nav-art img {
  opacity: 1;
}

/* Two-line body */
.group-nav-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.group-nav-top {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.group-nav-name {
  flex: 1;
  font-weight: var(--weight-semibold);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom meta row */
.group-nav-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.group-nav-cat {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.4);
}
.group-nav-pts {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.group-nav-count {
  font-family: var(--font-condensed);
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin-left: auto;
}

/* Validation dot */
.group-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.group-nav-dot-error {
  background: var(--error);
  box-shadow: 0 0 4px rgba(220, 50, 40, 0.6);
}

.group-nav-reorder {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: auto;
}
.group-move-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  border-radius: 2px;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.group-move-btn:hover:not(:disabled) {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.1);
}
.group-move-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

/* ── 7. Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
  min-height: 36px;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.btn svg,
.sidebar-btn svg {
  flex-shrink: 0;
  pointer-events: none;
}

.btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-light); border-color: var(--navy-light); box-shadow: var(--shadow-sm); }
.btn-primary:active { background: var(--navy-dark); transform: scale(0.97); box-shadow: none; }

.btn-gold {
  background: var(--gold);
  color: var(--navy-dark);   /* WCAG: dark text on bright gold = 5.3:1 (white was 2.9:1) */
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-outline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--stroke);
}
.btn-outline:hover { border-color: var(--navy); color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-outline:active { transform: scale(0.97); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  border: none;
}
.btn-ghost:hover { background: var(--navy-subtle); color: var(--ink); }
.btn-ghost:active { background: rgba(27, 58, 92, 0.12); transform: scale(0.97); }

/* Ghost variant for dark backgrounds */
.btn-ghost-light {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: none;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); color: #fff; }

.btn-danger {
  background: var(--paper);
  color: var(--error);
  border-color: var(--error);
}
.btn-danger:hover { background: var(--error); color: #fff; }

.btn-sm { padding: var(--sp-xs) var(--sp-md); font-size: var(--text-xs); min-height: 28px; }
.btn-lg { padding: var(--sp-md) var(--sp-2xl); font-size: var(--text-md); min-height: 44px; }
.btn-block { width: 100%; }

/* Icon-only button */
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-icon.btn-sm { width: 28px; height: 28px; }

/* Sidebar buttons */
.sidebar-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  width: 100%;
  text-align: left;
}
.sidebar-btn:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); }
.sidebar-btn-icon {
  width: auto;
  padding: var(--sp-sm);
  justify-content: center;
  flex-shrink: 0;
}

/* ── Settings Panel ──────────────────────────────────────────── */
.settings-group {
  margin-bottom: var(--sp-xl);
}
.settings-group-title {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--stroke);
  padding-bottom: var(--sp-xs);
  margin-bottom: var(--sp-lg);
}
.settings-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  padding: var(--sp-md) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--stroke-light);
}
.settings-toggle:last-child { border-bottom: none; }
.settings-toggle-label {
  flex: 1;
  min-width: 0;
}
.settings-toggle-name {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--ink);
}
.settings-toggle-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.settings-toggle input[type="checkbox"] {
  display: none;
}
.settings-toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--stroke);
  border-radius: 11px;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out);
}
.settings-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle input:checked + .settings-toggle-switch {
  background: var(--gold-dark);
}
.settings-toggle input:checked + .settings-toggle-switch::after {
  transform: translateX(18px);
}

/* ── 8. Cards ────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}

.card-interactive { cursor: pointer; }
.card-interactive:hover {
  border-color: var(--stroke-accent);
  box-shadow: var(--shadow-md);
}

/* ── 9. Forms ────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0.01em;
}

.form-input,
.form-select,
.form-textarea {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out);
  min-height: 40px;
}

.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--stroke-strong); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-subtle);
}
.form-input::placeholder { color: var(--ink-faint); }
.form-textarea { resize: vertical; min-height: 80px; }

/* ── 10. Modals ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* Plain dark scrim, NO backdrop blur: blur(4px) + transition:all forced the
     browser to animate and recompute a full-screen blur every frame, which
     tanked the popup framerate. A slightly darker flat scrim reads the same. */
  background: rgba(28, 26, 23, 0.55);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal) var(--ease-out);
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-panel {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dialog);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--sp-3xl) * 2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}
.modal-overlay.active .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* The admiral-abilities modal pops in (scale-up with a little overshoot) when
   it auto-opens after you add an admiral. */
@keyframes modal-pop {
  0%   { transform: scale(0.82); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
#modal-admiral-abilities.active .modal-panel,
#modal-secondary.active .modal-panel {
  animation: modal-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #modal-admiral-abilities.active .modal-panel,
  #modal-secondary.active .modal-panel { animation: none; }
}

/* Chosen secondary objectives shown as chips in the overview slot */
.overview-secondary-chosen { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.secondary-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 3px var(--sp-sm);
}

.modal-panel--lg { max-width: 800px; }
.modal-panel--xl { max-width: 1100px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-lg) var(--sp-xl);
  border-bottom: 1px solid var(--stroke-light);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 18px;
  transition: all var(--duration-fast) var(--ease-out);
}
.modal-close:hover { background: var(--paper-alt); color: var(--ink); }

.modal-body {
  padding: var(--sp-xl);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-sm);
  padding: var(--sp-lg) var(--sp-xl);
  border-top: 1px solid var(--stroke-light);
  flex-shrink: 0;
}

/* ── 11. Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: none;
}

.badge-navy { background: var(--navy-subtle); color: var(--navy); }
.badge-gold { background: var(--gold-subtle); color: var(--gold-dark); }
.badge-neutral { background: var(--paper-alt); color: var(--ink-muted); border: 1px solid var(--stroke-light); }
/* Status badges: darker text so the colour passes WCAG AA on its own light tint
   (the bright --success/--warning/--error hues only hit ~2.3-3.1:1 here). */
.badge-success { background: rgba(62,153,69,0.1); color: #287030; }
.badge-warning { background: rgba(217,140,31,0.1); color: #8a5810; }
.badge-error { background: rgba(196,60,47,0.1); color: #a8342a; }
.badge-lg { padding: var(--sp-xs) var(--sp-md); font-size: var(--text-sm); }

/* Faction badges */
.badge-ucm { background: rgba(62,153,69,0.1); color: var(--faction-ucm-text); }
.badge-phr { background: rgba(106,76,156,0.1); color: var(--faction-phr); }
.badge-scourge { background: rgba(196,60,47,0.1); color: var(--faction-scourge); }
.badge-shaltari { background: rgba(217,140,31,0.1); color: var(--faction-shaltari-text); }
.badge-bioficer { background: rgba(42,140,140,0.1); color: var(--faction-bioficer-text); }
.badge-resistance { background: rgba(176,74,42,0.1); color: var(--faction-resistance); }

/* ── 12. Landing Page ────────────────────────────────────────── */
.landing {
  /* Sized so the hero + tool cards + the site footer all fit one screen without
     scrolling. No forced 100vh (that pushed the footer below the fold). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl) var(--sp-2xl);
  background: var(--paper);
}

.landing-hero {
  text-align: center;
  margin-bottom: var(--sp-xl);
  max-width: 640px;
}

.landing-logo {
  max-width: 300px;
  margin: 0 auto var(--sp-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Tighter divider inside the landing (the generic .deco-divider stays roomy). */
.landing .deco-divider { margin: var(--sp-md) 0; }
.landing-logo-img { width: 100%; height: auto; display: block; }

.landing-title {
  font-family: var(--font-brand);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-hero));
  font-weight: var(--weight-heavy);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--navy-dark);
  margin-bottom: var(--sp-md);
}

.landing-subtitle {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  color: var(--ink-muted);
  line-height: 1.6;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-lg);
  max-width: 800px;
  width: 100%;
}

.tool-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.tool-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
}

.tool-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--navy);
}

.tool-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--sp-sm);
  color: var(--ink);
}

.tool-card-desc {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.6;
}

/* Landing — Stats Bar */
.landing-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.landing-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.landing-stat-num {
  font-weight: 700;
  color: var(--navy);
}
.landing-stat-sep {
  color: var(--gold-line);
  margin: 0 2px;
  user-select: none;
}

/* Landing — Faction Showcase */
.landing-factions {
  margin-top: var(--sp-3xl);
  max-width: 800px;
  width: 100%;
}
.landing-factions-title {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: var(--sp-lg);
}
.faction-showcase {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-sm);
}
.faction-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke);
  background: var(--paper);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
  overflow: hidden;
}
.faction-chip:hover {
  border-color: var(--current-faction, var(--navy));
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.faction-chip:hover .faction-chip-heroes img {
  filter: brightness(1.08);
}

/* Hero ship art strip at top of faction chip */
.faction-chip-heroes {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: var(--sp-xs);
  background: linear-gradient(135deg,
    rgba(27,58,92,0.06) 0%,
    rgba(27,58,92,0.02) 100%);
  border-bottom: 1px solid var(--stroke);
  position: relative;
  overflow: hidden;
}
/* Faction color accent line at top */
.faction-chip-heroes::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--current-faction, var(--navy));
  opacity: 0.5;
}
.faction-chip-heroes img {
  height: 64px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 -8px;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
  transition: filter var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  position: relative;
}
.faction-chip-heroes img:nth-child(1) { z-index: 1; }
.faction-chip-heroes img:nth-child(2) { z-index: 2; transform: scale(1.1); }
.faction-chip-heroes img:nth-child(3) { z-index: 1; }
.faction-chip:hover .faction-chip-heroes img:nth-child(2) {
  transform: scale(1.15);
}

/* When no hero strip, accent the top of the info section */
.faction-chip-info:first-child {
  border-top: 2px solid var(--current-faction, var(--navy));
}

/* Info row below hero strip */
.faction-chip-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-sm) var(--sp-xs);
  width: 100%;
}

.faction-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--current-faction, var(--navy));
}
.faction-chip-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.faction-chip-name {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0.04em;
}
.faction-chip-count {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* Landing — Objectives Reference */
.landing-objectives {
  margin-top: var(--sp-3xl);
  max-width: 800px;
  width: 100%;
}
.objectives-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
  cursor: pointer;
  user-select: none;
}
.objectives-header:hover .objectives-title {
  color: var(--ink-soft);
}
.objectives-title {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  transition: color var(--duration-fast);
}
.objectives-toggle {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--navy-light);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.objectives-toggle svg {
  transition: transform var(--duration-normal) var(--ease-out);
}
.objectives-list-expanded .objectives-toggle svg {
  transform: rotate(180deg);
}
.objectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-md);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.objectives-list-expanded .objectives-grid {
  max-height: 2000px;
  opacity: 1;
}
.objective-card {
  padding: var(--sp-lg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--paper);
  border-left: 3px solid var(--gold);
}
.objective-card-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-xs);
}
.objective-card-desc {
  font-family: var(--font-reading);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── 13. Fleet List ──────────────────────────────────────────── */
.fleet-list {
  padding: var(--sp-3xl) var(--sp-2xl);
  max-width: 960px;
  margin: 0 auto;
}

.fleet-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
  gap: var(--sp-lg);
}
.fleet-tabs {
  display: flex;
  gap: 0;
}
.fleet-tab {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--sp-xs) var(--sp-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.fleet-tab:hover { color: var(--ink); }
.fleet-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-lg);
}

/* ── Collection (models you own) ─────────────────────────────── */
.coll-fac-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-md); }
.coll-fac-tab {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: 4px 12px; border: 1px solid var(--stroke-medium); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink-muted); cursor: pointer;
}
.coll-fac-tab:hover { border-color: var(--navy); color: var(--ink); }
.coll-fac-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.coll-summary { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--sp-md); }
.coll-cat {
  font-family: var(--font-header); font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em;
  margin: var(--sp-md) 0 var(--sp-sm); padding-bottom: 2px; border-bottom: 1px solid var(--stroke-light);
}
.coll-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-sm); }
.coll-card {
  display: flex; align-items: center; gap: var(--sp-sm);
  border: 1px solid var(--stroke-light); border-radius: var(--radius-md);
  padding: 6px 8px; background: var(--paper);
}
.coll-card.owned { border-color: var(--navy); background: var(--warm); }
.coll-art { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--paper-alt); }
.coll-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.coll-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); line-height: 1.2; }
.coll-pts { font-size: var(--text-xs); color: var(--ink-muted); }
.coll-step { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.coll-btn {
  width: 26px; height: 26px; border: 1px solid var(--stroke-medium); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.coll-btn:hover { border-color: var(--navy); background: var(--warm); }
.coll-count { min-width: 20px; text-align: center; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.coll-loading, .coll-empty { color: var(--ink-muted); font-size: var(--text-sm); padding: var(--sp-md) 0; }

/* Owned/spare badge on picker cards. */
.coll-badge { display: inline-block; margin-left: 6px; font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 0 6px; border-radius: var(--radius-pill); border: 1px solid currentColor; }
.coll-badge-ok { color: #2e7d32; }
.coll-badge-over { color: #c43c2f; }
.coll-badge-none { color: var(--ink-faint); }

.fleet-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fleet-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.fleet-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.fleet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-lg);
  border-bottom: 1px solid var(--stroke-light);
}

/* Fleet-card ⋮ overflow menu */
.fleet-card-menu-wrap { position: relative; }
.fleet-card-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.fleet-card-menu-btn:hover { background: var(--paper-alt); color: var(--ink); }
.fleet-card-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-xs);
  z-index: 20;
}
.fleet-card-menu-wrap.open .fleet-card-menu { display: block; }
.fleet-card-menu button {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.fleet-card-menu button:hover { background: var(--paper-alt); }
.fleet-card-menu button.danger { color: var(--danger, #c43c2f); }
.fleet-card-menu button.danger:hover { background: rgba(196, 60, 47, 0.08); }
.fleet-card-time { padding: 0 var(--sp-lg) var(--sp-md); font-size: var(--text-xs); }

/* Card body content */
.fleet-card-body {
  padding: var(--sp-md) var(--sp-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  flex: 1;
}

.fleet-card-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  padding: var(--sp-sm) var(--sp-lg) 0;
}

.fleet-card > .text-caption {
  padding: 0 var(--sp-lg);
}

.fleet-card-points-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--sp-lg);
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.fleet-card-points {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
}
.fleet-card-pts-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--ink-muted);
}
.fleet-card-bar {
  height: 4px;
  background: var(--stroke-light);
  border-radius: 2px;
  margin: var(--sp-xs) var(--sp-lg) 0;
  overflow: hidden;
}
.fleet-card-bar-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.fleet-card-bar-near { background: var(--gold); }
.fleet-card-bar-over { background: var(--danger, #c43c2f); }
.badge-error {
  background: #fef2f0;
  color: #c43c2f;
  border: 1px solid #f0c0b8;
  font-size: 12px;
}
.badge-warn {
  background: #fef9ea;
  color: #8a6d1e;
  border: 1px solid #e0c46c;
  font-size: 12px;
}

/* Fleet card ship composition previews */
.fleet-card-comp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-sm) var(--sp-lg);
}
.fleet-card-thumb {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--stroke);
  background: var(--paper-alt);
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fleet-card:hover .fleet-card-thumb {
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.fleet-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fleet-card-thumb-more {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-faint);
  margin-left: 2px;
}

.fleet-card-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: auto;
  padding: var(--sp-md) var(--sp-lg);
  border-top: 1px solid var(--stroke-light);
}

.fleet-card-new {
  border: 2px dashed var(--stroke);
  border-left-width: 2px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  padding: var(--sp-xl);
  min-height: 180px;
  color: var(--ink-faint);
}
.fleet-card-new:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-wash);
}

.fleet-card-new-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--navy);
}

/* Fastplay reference tab */
.fastplay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-md);
}
.fastplay-faction-btn {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) var(--ease-out);
}
.fastplay-faction-btn:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Fleet list empty state */
.fleet-list-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4xl) var(--sp-xl);
  min-height: 300px;
}
.fleet-list-empty-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
}
.fleet-list-empty-desc {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 380px;
  line-height: 1.6;
}

/* Fleet sort bar */
.fleet-sort-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
.fleet-sort-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-right: var(--sp-xs);
}
.fleet-sort-btn {
  background: none;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: var(--sp-xs) var(--sp-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.fleet-sort-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.fleet-sort-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── 14. Ship Stats Grid ─────────────────────────────────────── */
/* Stat block: stats STACKED one per row (a vertical datasheet list), NOT all
   across a single row. Each row: icon + stat name on the left, value on the
   right. Scans straight down. */
/* 2-col grid: each main stat paired with a save on its row (Scan|KS, Sig|ES,
   Thrust|BS); Hull spans the full width on the last row. */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-width: 320px;
}
.stat-cell-wide { grid-column: 1 / -1; }
.stat-cell-wide .stat-cell-value { font-size: 20px; }
/* Stats on the left, the weapon table in the empty space to their right.
   Wraps the gun table below the stats when the panel is too narrow. */
.stat-weapon-row { display: flex; gap: var(--sp-md); align-items: flex-start; flex-wrap: wrap; }
.stat-weapon-row .sw-stats { flex: 0 0 auto; }
.stat-weapon-row .sw-weapons { flex: 1 1 300px; min-width: 0; }
.stat-weapon-row .sw-weapons .weapon-list { margin: 0; }
.ship-rules-glossary { margin-top: var(--sp-sm); }

.stat-cell {
  background: var(--paper-alt);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  text-align: left;
  overflow: hidden;
}
.stat-cell-icon { flex-shrink: 0; display: inline-flex; align-items: center; }
.stat-cell-icon svg { width: 15px; height: 15px; opacity: 0.8; }
.stat-cell-text { display: flex; flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; }
/* Reinforced Armour chip, pinned to the right of the (full-width) Hull cell. */
.stat-ra-chip {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  cursor: help;
}

.stat-cell-value {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  /* Bold (700), NOT heavy (800): 800 closed up the apertures on 3 / 5 / 8 and
     read as a blob. Lining + tabular figures keep numerals open and aligned. */
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}

.stat-cell-label {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Color-coded stat cells */
.stat-cell-es { border-bottom: 2px solid #8b5e1a; }
.stat-cell-es .stat-cell-value { color: #8b5e1a; }
.stat-cell-ks { border-bottom: 2px solid var(--navy); }
.stat-cell-ks .stat-cell-value { color: var(--navy); }
.stat-cell-bs { border-bottom: 2px solid var(--gold-dark); }
.stat-cell-bs .stat-cell-value { color: var(--gold-dark); }
.stat-cell-none .stat-cell-value { color: var(--ink-faint); opacity: 0.4; }

/* A stat changed by a selected upgrade (e.g. a Drive Refit's +3" Thrust) reads
   in the upgrade colour so the boosted value is unmistakable. Placed after the
   save-colour rules so it wins when a save itself is upgraded. */
.stat-cell-modified {
  border-color: #2e7d32;
  background: rgba(46, 125, 50, 0.09);
  box-shadow: inset 3px 0 0 #2e7d32;
}
.stat-cell-modified .stat-cell-value,
.stat-cell-modified .stat-cell-label { color: #2e7d32; }
.stat-cell-modified .stat-cell-icon svg { opacity: 1; }

/* ── 15. Weapon Table ────────────────────────────────────────── */
.weapon-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.weapon-row {
  display: grid;
  /* Compact column mins so the row fits the narrow detail panel (~309px content)
     without clipping the SPECIAL column; the name & special columns expand via
     fr on wider layouts (the picker modal). */
  grid-template-columns: minmax(80px, 1.5fr) 38px 30px 30px 38px minmax(60px, 1.3fr);
  align-items: baseline;
  gap: 0;
  padding: 2px var(--sp-sm);
  background: var(--paper-alt);
  border-bottom: 1px solid var(--stroke-light);
  font-family: var(--font-condensed);
  font-size: 16px;   /* weapons are key game info — bigger than the old 14px (print unaffected) */
  line-height: 1.4;
}

.weapon-row:last-child {
  border-bottom: none;
}

/* Station armaments: one combined weapons table with cost + a +/- stepper on
   each row (two extra columns past the standard 6-column weapon grid). */
.station-arm-list .weapon-row.station-arm-row {
  grid-template-columns: minmax(90px, 1.4fr) 42px 30px 30px 40px minmax(60px, 1.1fr) 46px 94px;
  align-items: center;
}
.station-arm-row .station-arm-pts {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  font-weight: var(--weight-semibold);
}
.station-arm-row .station-arm-qty { display: flex; justify-content: flex-end; }
.station-arm-row .sys-opt-step { margin: 0; }
.station-arm-row.sys-opt-active { background: var(--paper); box-shadow: inset 2px 0 0 var(--navy); }
/* The hardpoint picker reuses this armaments table inside the narrow detail
   panel. Re-assert the full 8-column grid (ID-scoped to beat the panel's
   name-only weapon-row override) and restore the Special column to its own cell
   rather than the full-width-below treatment the detail panel applies. */
#builder-detail .station-arm-list .weapon-row.station-arm-row {
  grid-template-columns: minmax(76px, 1.4fr) 40px 28px 28px 38px minmax(52px, 1.1fr) 38px 80px;
}
#builder-detail .station-arm-list .weapon-col-special {
  grid-column: auto;
  margin-top: 0;
  padding-left: 0;
}
#builder-detail .station-arm-list .weapon-row-header .weapon-col-special { display: block; }

/* Hardpoint picker: two-line weapon entries that fit the narrow detail panel.
   Line 1 = name + cost + stepper; line 2 = the weapon stat line. */
.hp-opt-list { border: 1px solid var(--stroke-light); border-radius: var(--radius-sm); overflow: hidden; }
.hp-opt { padding: var(--sp-sm) var(--sp-md); background: var(--paper-alt); border-bottom: 1px solid var(--stroke-light); }
.hp-opt:last-child { border-bottom: none; }
.hp-opt-active { background: var(--paper); box-shadow: inset 3px 0 0 var(--navy); }
.hp-opt-head { display: flex; align-items: center; gap: var(--sp-sm); }
.hp-opt-name { flex: 1; min-width: 0; font-family: var(--font-condensed); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.hp-opt-pts { font-family: var(--font-condensed); color: var(--ink-muted); font-size: var(--text-sm); white-space: nowrap; }
.hp-opt-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-family: var(--font-condensed); font-size: var(--text-sm); }
.hp-stat { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.hp-stat-k { color: var(--ink-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.hp-stat-arc svg { vertical-align: middle; }
.hp-opt-special { display: inline-flex; flex-wrap: wrap; gap: 3px; }

/* In the narrow right detail panel, give the weapon name the full width and
   wrap SPECIAL onto its own row beneath it (the wide picker modal keeps the
   single-line 6-column layout). */
#builder-detail .weapon-row {
  grid-template-columns: 1fr 38px 30px 30px 38px;
}
#builder-detail .weapon-col-special {
  grid-column: 1 / -1;
  padding-left: 0;
  margin-top: 2px;
}
#builder-detail .weapon-col-name { white-space: normal; }
#builder-detail .weapon-row-header .weapon-col-special { display: none; }

/* Name-less datasheet: used in the systems picker where the option's bold name
   already heads the card, so repeating it (and the "Weapon" column) is just
   noise. Drop the first column. */
.weapon-list-noname .weapon-row {
  grid-template-columns: 38px 30px 30px 38px minmax(60px, 1.3fr);
}
#builder-detail .weapon-list-noname .weapon-row {
  grid-template-columns: 38px 30px 30px 38px;
}

.weapon-col {
  white-space: nowrap;
  color: var(--ink-soft);
  font-weight: var(--weight-medium);
}

.weapon-col-name {
  min-width: 0;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

.weapon-col-arc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
}
.weapon-col-arc svg { flex-shrink: 0; }
.arc-label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.weapon-col-att,
.weapon-col-lock {
  text-align: center;
  font-weight: var(--weight-semibold);
  font-size: 15px;
}
/* Dice glyph after a weapon's Attack count (you roll that many dice). */
.atk-die { width: 0.92em; height: 0.92em; vertical-align: -0.11em; margin-left: 1px; opacity: 0.7; }
.dp-weapons .atk-die { width: 0.85em; height: 0.85em; }
/* Critical-on value under the Lock (only for weapons whose rules use criticals). */
.weapon-col-crit {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1.05;
  color: var(--gold-dark);
  letter-spacing: 0.02em;
  margin-top: 1px;
  white-space: nowrap;
  cursor: help;
}
.weapon-col-dmg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: var(--weight-bold);
  font-size: 15px;
}
.weapon-col-dmg svg { flex-shrink: 0; }
/* Damage type carried as a colour-coded letter on the damage value (1E/2K/1C). */
.dmg-type { font-weight: var(--weight-bold); font-size: 0.85em; margin-left: 1px; }
.dmg-type-K { color: #0057A3; }   /* Kinetic */
.dmg-type-E { color: #92400E; }   /* Energy */
.dmg-type-C { color: #c43c2f; }   /* Core */

.weapon-col-special {
  min-width: 0;
  padding-left: var(--sp-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.weapon-row-header {
  background: var(--navy-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding: 1px var(--sp-sm);
}

.weapon-row-header .weapon-col-name {
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
}

.weapon-row-header .weapon-col-special {
  font-style: normal;
  font-weight: var(--weight-bold);
}

/* Launch assets */
.load-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.load-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-top: var(--sp-xs);
}

/* Combined Launch Assets table (one per unit). */
.launch-table-wrap { margin-top: var(--sp-xs); }
.launch-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.launch-table thead th {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--gold-dark);
  background: var(--gold-subtle);
  padding: 3px 6px;
  border-bottom: 1px solid var(--gold-line);
}
.launch-table thead th:first-child,
.launch-table thead th:nth-child(2) { text-align: left; }
.launch-table thead th:last-child { text-align: left; }
.launch-table td {
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid var(--stroke-light);
  color: var(--ink-soft);
  vertical-align: middle;
}
.launch-table tr:last-child td { border-bottom: none; }
.launch-table .lt-launch {
  text-align: center;
  font-weight: var(--weight-heavy);
  font-size: var(--text-md);
  color: var(--ink);
  border-right: 1px solid var(--stroke-light);
  width: 1%;
  white-space: nowrap;
}
.launch-table .lt-count {
  display: inline-block;
  margin-left: 3px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--navy);
  background: var(--navy-subtle);
  border-radius: 999px;
  padding: 0 5px;
  vertical-align: middle;
}
.launch-table .lt-launch-note {
  display: block;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}
.launch-table .lt-load {
  text-align: left;
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.launch-table .lt-special { text-align: left; color: var(--ink-muted); }
.launch-table .lt-range {
  white-space: nowrap;
  font-weight: var(--weight-semibold);
}
.launch-table .lt-range.has-tooltip { cursor: help; }
.launch-table .lt-range.has-tooltip:hover { color: var(--navy); text-decoration: underline dotted; }
.launch-table .lt-load-rule { cursor: help; text-decoration: underline dotted var(--stroke-accent); text-underline-offset: 2px; }
.launch-table .lt-load-rule:hover { color: var(--navy); }

.load-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--warm);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.load-row-name {
  font-weight: var(--weight-bold);
  color: var(--ink);
  flex-shrink: 0;
}

/* Launch block — the ship's Launch loads + the asset stat reference, grouped */
.launch-block {
  margin-top: var(--sp-xs);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1px solid var(--stroke-light);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
}
.launch-block .launch-ref { margin-top: 0; }
.launch-block .load-section-label { margin-top: 0; }

/* Launch asset reference panel */
.launch-ref {
  margin-top: var(--sp-md);
  border: 1px solid var(--stroke-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}

.launch-ref-header {
  font-family: var(--font-header);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--warm);
  border-bottom: 1px solid var(--stroke-light);
}

/* One aligned table (offensive assets + fighters share the same columns). */
.launch-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-stat);
  font-size: var(--text-sm);
}
.launch-ref-table th {
  background: var(--warm);
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 2px 6px;
  white-space: nowrap;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.launch-ref-table td {
  text-align: center;
  padding: 1px 6px;
  border-top: 1px solid var(--stroke-light);
  vertical-align: middle;
  line-height: 1.3;
}
.launch-ref-table .lar-name { text-align: left; font-weight: var(--weight-bold); color: var(--ink); white-space: nowrap; }
.launch-ref-table .lar-type svg { vertical-align: middle; }
.launch-ref-table .lar-special { text-align: left; }
.launch-ref-table .lar-special .weapon-special-chip { vertical-align: middle; }
/* Tighter for print + the dp- print sheet. */
.dp-groups + .launch-ref .launch-ref-table th,
.dp-groups + .launch-ref .launch-ref-table td { padding: 1px 6px; }
.pf-inksaver .launch-ref-table th { background: #fff !important; color: #000 !important; border: 1px solid #999; }

/* Loadout selectors */
.loadout-selector {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xs);
}

.loadout-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.loadout-select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 5px var(--sp-2xl) 5px var(--sp-sm);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.loadout-select:hover {
  border-color: var(--gold);
}
.loadout-select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Either/or loadout (e.g. Laser Refit): radio cards, each with its datasheet. */
.loadout-picker { margin-top: var(--sp-sm); }
.loadout-radio {
  display: flex;
  gap: var(--sp-sm);
  align-items: flex-start;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.loadout-radio:hover { border-color: var(--stroke-strong); }
.loadout-radio.selected { border-color: var(--navy); background: var(--navy-subtle); }
.loadout-radio-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.loadout-radio-dot {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border: 2px solid var(--stroke-strong);
  border-radius: 50%;
  margin-top: 2px;
  position: relative;
}
.loadout-radio.selected .loadout-radio-dot { border-color: var(--navy); }
.loadout-radio.selected .loadout-radio-dot::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--navy);
}
.loadout-radio-main { flex: 1; min-width: 0; }
.loadout-radio-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm); margin-bottom: 4px; }
.loadout-radio-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--ink); }
.loadout-radio-cost { font-weight: var(--weight-bold); font-size: var(--text-xs); color: var(--navy); white-space: nowrap; }

.loadout-weapons {
  border-left: 3px solid var(--gold);
  padding-left: var(--sp-xs);
}

/* Special rules chips */
.special-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.rule-chip {
  padding: 2px var(--sp-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--navy-subtle);
  color: var(--navy);
  cursor: help;
  transition: background var(--duration-fast) var(--ease-out);
}
.rule-chip.has-tooltip:hover {
  background: rgba(27, 58, 92, 0.18);
  text-decoration: underline;
}

/* Rule tooltip popup */
.rule-tooltip-popup {
  position: fixed;
  z-index: var(--z-popover);
  background: var(--paper);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-lg);
  max-height: 50vh;
  overflow-y: auto;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}
.rule-tooltip-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--navy);
  margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--stroke-light);
}
.rule-tooltip-page {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--ink-faint);
  margin-left: var(--sp-sm);
  font-style: italic;
}
.rule-tooltip-body {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Weapon type colors */
.weapon-type-k { color: var(--navy); font-weight: var(--weight-bold); }
.weapon-type-e { color: #8b5e1a; font-weight: var(--weight-bold); }
.weapon-type-c { color: var(--error); font-weight: var(--weight-bold); }
.weapon-col-type svg { vertical-align: middle; }

/* Weapon special chips */
.weapon-special-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  font-style: normal;
  background: var(--paper-alt);
  color: var(--ink-muted);
  border: 1px solid var(--stroke-light);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
/* "Alt" = a choose-one fire/load group, not a rated value. Dashed gold outline so
   it reads as a mode-link distinct from rated specials (Reave-2, Scald-1, etc.). */
.weapon-special-chip-alt {
  border-style: dashed;
  border-color: var(--gold-line);
  color: var(--gold-dark);
  background: var(--gold-subtle);
}
.weapon-special-chip-alt.has-tooltip:hover {
  background: var(--gold-subtle);
  border-color: var(--gold);
  color: var(--gold-dark);
}
.weapon-special-chip.has-tooltip {
  cursor: help;
  transition: all var(--duration-fast) var(--ease-out);
}
.weapon-special-chip.has-tooltip:hover {
  background: var(--navy-subtle);
  color: var(--navy);
  border-color: var(--stroke-accent);
  text-decoration: underline;
}

/* ── Ship Lore ──────────────────────────────────────────────── */
.ship-lore {
  margin-top: var(--sp-xs);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ship-lore-toggle {
  padding: var(--sp-xs) var(--sp-sm);
  /* The lore heading inside cards reads in Roboto Slab, a touch bigger — the
     display-serif treatment the wordmark deliberately does NOT use. */
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0;
  text-transform: none;
  list-style: none;
}

.ship-lore-toggle::-webkit-details-marker { display: none; }

.ship-lore-toggle::before {
  content: '+ ';
  font-weight: var(--weight-bold);
}

.ship-lore[open] .ship-lore-toggle::before {
  content: '\2013  ';
}

.ship-lore-text {
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-lore);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-muted);   /* grayed to match the namesake (AA: 5:1+) */
  background: var(--paper-alt);
  border-top: 1px solid var(--stroke-light);
}
.ship-lore-text p { margin: 0 0 0.7em; }
.ship-lore-text p:last-child { margin-bottom: 0; }
.lore-famous-ships {
  margin-top: var(--sp-sm);
  font-family: var(--font-lore);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: 1.5;
}
.lore-famous-ships strong {
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  display: block;
  margin-bottom: var(--sp-xs);
}
.lore-famous-ships ul {
  list-style: disc;
  padding-left: var(--sp-lg);
  margin: 0;
}
.lore-famous-ships li {
  font-style: italic;
  color: var(--ink-muted);
  break-inside: avoid;
}
/* Sub-faction split (e.g. Independents / Kalium) — separate underlined columns. */
.lore-famous-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-xl);
}
.lore-famous-col {
  min-width: 7rem;
}
.lore-famous-subhead {
  display: block;
  font-style: normal;
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  text-decoration: underline;
  margin-bottom: 2px;
}
/* Tarot "Namesake" etymology flavour */
.lore-namesake {
  margin-top: var(--sp-md);
  font-family: var(--font-lore);
  font-size: var(--text-xs);
  font-style: normal;
  line-height: 1.6;
  color: var(--ink-muted);
}
.lore-namesake-label {
  display: inline;
  font-style: normal;
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--gold-dark, #7a6320);
}

/* Ship Rules — always visible, build-critical (not an accordion) */
.ship-rules-block {
  margin-top: var(--sp-xs);
  border: 1px solid var(--stroke-light);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-alt);
}
.ship-rules-block-label {
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--navy);
  letter-spacing: 0.01em;
  text-transform: none;
}
.ship-rules-block-text {
  padding: 0 var(--sp-md) var(--sp-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Feature Carrier — required Deployable Feature pick */
.feature-carrier-block {
  margin-top: var(--sp-xs);
  padding: var(--sp-sm);
  border: 1px solid var(--stroke-light);
  border-left: 3px solid var(--gold, #8a5e10);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
}
.feature-carrier-block.feature-carrier-unset {
  border-left-color: #c43c2f;
  background: rgba(196, 60, 47, 0.05);
}
.feature-carrier-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-bottom: var(--sp-xs);
}
.feature-carrier-block .loadout-select { width: 100%; }

/* Deployable Feature radio list: every option shows its full rules inline. */
.feature-radio-list { display: flex; flex-direction: column; gap: var(--sp-xs); margin-top: var(--sp-xs); }
.feature-radio {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--paper);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.feature-radio:hover { border-color: var(--stroke-strong); }
.feature-radio.selected { border-color: var(--navy); background: var(--navy-wash); box-shadow: inset 2px 0 0 var(--navy); }
.feature-radio input { margin-top: 3px; flex-shrink: 0; accent-color: var(--navy); }
.feature-radio-art { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.feature-radio-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feature-radio-name { font-weight: var(--weight-bold); color: var(--ink); }
.feature-radio-cost { font-weight: var(--weight-bold); color: var(--gold-dark); font-size: var(--text-xs); }
.feature-rule { font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }
.feature-rule b { color: var(--ink); }

/* Systems / Hardpoint picker (Resistance Cruiser/Frigate/Dreadnought Systems) */
.systems-picker {
  margin-top: var(--sp-xs);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  overflow: hidden;
}
.systems-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--warm);
  border-bottom: 1px solid var(--stroke-light);
}
.systems-picker-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.systems-picker-count {
  font-family: var(--font-condensed);
  font-weight: var(--weight-heavy);
  font-size: var(--text-sm);
  color: var(--ink);
}
.systems-picker-incomplete .systems-picker-count { color: #c43c2f; }
.sys-cat { padding: 0 var(--sp-sm) var(--sp-xs); }
/* Each hardpoint category (Broadside / Turret / Structures) gets an obvious
   full-width banded header so the groups are easy to tell apart at a glance. */
.sys-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: var(--paper-alt);
  border-top: 2px solid var(--stroke);
  padding: 5px var(--sp-sm);
  margin: 0 calc(-1 * var(--sp-sm)) var(--sp-xs);
}
.sys-cat:first-child .sys-cat-head { border-top: none; }
.sys-cat-cap { color: var(--navy); font-family: var(--font-condensed); }
.sys-cat-cap-need { color: var(--warning); font-weight: var(--weight-bold); }
.sys-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 2px 0;
}
.sys-opt-active { }
.sys-opt-art { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.sys-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sys-opt-name { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink); }
.sys-opt-star { color: #8a5e10; font-weight: var(--weight-bold); }
.sys-opt-detail { font-size: 12px; line-height: 1.5; color: var(--ink); font-family: var(--font-condensed); }
.sys-opt-cost {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--navy);
  white-space: nowrap;
  flex-shrink: 0;
}
.sys-opt-step { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sys-opt-count { min-width: 20px; text-align: center; font-weight: var(--weight-bold); font-size: var(--text-sm); }
.sys-step-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--stroke);
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  line-height: 1;
  color: var(--ink);
  /* Springy press: the resting transition uses an overshoot curve, so when the
     :active squish is released the button pops back past its size and settles. */
  transition: transform 300ms cubic-bezier(0.34, 1.7, 0.5, 1),
              background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sys-step-btn:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); }
.sys-step-btn:active:not(:disabled) {
  transform: scale(0.78);
  transition-duration: 70ms;
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.sys-step-btn:disabled { opacity: 0.35; cursor: default; }
/* The + button carries the unit cost (e.g. "+10"), so it widens to fit the number. */
.sys-step-add { width: auto; min-width: 28px; padding: 0 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
/* Snap toggle for Structures (binary on/off — you only ever have 0 or 1). */
.sys-opt-structure { align-items: center; }
.sys-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 26px; padding: 2px 8px 2px 2px;
  border: 1px solid var(--stroke); border-radius: 999px;
  background: var(--paper-alt); color: var(--ink-muted); cursor: pointer;
  font-weight: var(--weight-semibold); font-size: var(--text-xs);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.sys-toggle-knob {
  width: 20px; height: 20px; border-radius: 50%; background: var(--ink-muted);
  flex-shrink: 0; transition: transform 180ms var(--ease-out), background-color 140ms ease;
}
.sys-toggle.on { background: var(--navy-subtle); border-color: var(--navy); color: var(--navy); }
.sys-toggle.on .sys-toggle-knob { background: var(--navy); transform: translateX(2px); }
.sys-toggle:hover:not(:disabled) { border-color: var(--navy); }
.sys-toggle:disabled { opacity: 0.4; cursor: default; }
.sys-toggle-cost { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .sys-toggle-knob { transition: background-color 140ms ease; } }
@media (prefers-reduced-motion: reduce) {
  .sys-step-btn { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
  .sys-step-btn:active:not(:disabled) { transform: none; }
}

/* Keep wide tables from clipping on narrow screens — scroll instead of spill */
.weapon-list, .launch-ref, .launch-ref-table { max-width: 100%; overflow-x: auto; }
.sys-opt { flex-wrap: wrap; }
.sys-opt-main { flex: 1 1 60%; }
/* Full-width mini weapon-datasheet under a weapon hardpoint option. */
.sys-opt-sheet { flex-basis: 100%; width: 100%; margin: 2px 0 4px; }

/* ── 16. Ship Cards (selection modal) ────────────────────────── */
.ship-category-tabs {
  display: flex;
  gap: var(--sp-xs);
  padding: var(--sp-sm) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: wrap;
}
.ship-category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--stroke);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.category-tab:hover { background: var(--paper-alt); color: var(--ink); }
.category-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Ship search bar */
.ship-search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  margin-bottom: var(--sp-md);
  transition: border-color var(--duration-fast);
}
.ship-search-bar:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy-subtle);
}
.ship-search-bar svg { color: var(--ink-faint); flex-shrink: 0; }
.ship-search-input {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  width: 100%;
  outline: none;
}
.ship-search-input::placeholder { color: var(--ink-faint); }

.ship-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  background: var(--paper-alt);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.ship-search-clear:hover {
  background: var(--navy);
  color: #fff;
}

/* Ship results bar */
.ship-results-bar {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  padding: var(--sp-xs) 0;
  margin-top: var(--sp-sm);
  border-bottom: 1px solid var(--stroke-light);
}
.ship-results-bar.hidden { display: none; }
.results-clear {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.results-clear:hover { text-decoration: underline; }
.results-count {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.results-context {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

/* Ship selection filters */
.ship-select-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
  align-items: flex-start;
  justify-content: space-between;
}
.ship-select-filters:empty { display: none; }
.ship-filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); flex: 1 1 auto; min-width: 0; }
/* Misc / In-collection aren't filters on the core list — they swap which pool you
   browse — so they read as labelled snap switches, set apart from the filter chips. */
.ship-filter-switches {
  display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center;
  margin-left: auto; padding-left: var(--sp-sm); border-left: 1px solid var(--stroke-light);
}
.picker-switch {
  display: inline-flex; align-items: center; gap: 16px;
  height: 30px; padding: 2px 22px 2px 4px;
  border: 1px solid var(--stroke); border-radius: 999px;
  background: var(--paper-alt); color: var(--ink-muted);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.picker-switch-knob {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0;
  transition: transform 180ms var(--ease-out), background-color 140ms ease;
}
.picker-switch.on { background: var(--navy-subtle); border-color: var(--navy); color: var(--navy); }
.picker-switch.on .picker-switch-knob { background: var(--navy); transform: translateX(14px); }
.picker-switch:hover { border-color: var(--navy); }
/* Miscellaneous Ships rides apart in a gold accent so it's the obvious "browse a
   different pool" switch, distinct from the navy filter controls. */
.picker-switch-misc { border-color: var(--gold-line); color: var(--gold-dark); font-weight: var(--weight-bold); }
.picker-switch-misc .picker-switch-knob { background: var(--gold); }
.picker-switch-misc:hover { border-color: var(--gold); }
.picker-switch-misc.on { background: var(--gold-subtle); border-color: var(--gold); color: var(--gold-dark); }
.picker-switch-misc.on .picker-switch-knob { background: var(--gold-dark); transform: translateX(14px); }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid var(--stroke-medium);
  background: var(--paper);
  color: var(--ink-faint);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.filter-chip:hover { background: var(--paper-alt); color: var(--ink); border-color: var(--stroke-strong); }
.filter-chip.active {
  background: var(--gold-dark);
  color: #fff;
  border-color: var(--gold-dark);
}

.ship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}

.ship-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.ship-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ship-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.ship-card-added {
  animation: cardAddFlash 0.5s var(--ease-out);
}
@keyframes cardAddFlash {
  0% { box-shadow: 0 0 0 0 rgba(62, 153, 69, 0.4); }
  40% { box-shadow: 0 0 0 4px rgba(62, 153, 69, 0.25); border-color: var(--success); }
  100% { box-shadow: var(--shadow-sm); }
}

.ship-card-top {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
}

.ship-card-image {
  position: relative;
  width: 120px;
  height: 120px;
  /* No frame — the ship art should float, not sit in a visible box */
  background: transparent;
  overflow: visible;
  flex-shrink: 0;
}
.ship-card-image img { width: 100%; height: 100%; object-fit: contain; }
/* Fully-modular ships (built entirely from chosen systems): the art is just a
   base-hull placeholder, so desaturate it to signal "not necessarily your config". */
.ship-card-image.ship-img-modular img,
.overview-group-art.ship-img-modular img {
  filter: grayscale(1) opacity(0.5);
}
/* TTCombat store link wrapping the unit-detail ship art — fills the art box so
   layout/img sizing is unchanged. The art itself is the link (no badge icon). */
.shop-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}
/* Alternate-sculpt store link line (e.g. PHR Agamemnon -> Leonidas kit). */
.ship-alt-sculpt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-family: var(--font-condensed);
}
.ship-alt-sculpt svg { color: var(--gold-dark); flex-shrink: 0; }
.ship-alt-sculpt a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.ship-alt-sculpt a:hover { text-decoration: underline; }
.ship-alt-sculpt-src { color: var(--ink-faint); }
/* Buyable model versions list (Plastic / Resin / Alternate resin). */
.ship-models { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--text-xs); color: var(--ink-muted); font-family: var(--font-condensed); }
.ship-models-lead { display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.ship-models-lead svg { color: var(--gold-dark); }
.ship-model-link { color: var(--gold-dark); font-weight: 600; text-decoration: none; border: 1px solid var(--gold-line); border-radius: var(--radius-sm); padding: 1px 7px; }
.ship-model-link:hover { background: var(--gold-subtle); text-decoration: none; }
.ship-models-src { color: var(--ink-faint); }
/* ×N multiplier on collapsed identical-ship cards */
.ship-qty-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-heavy);
  line-height: 1;
  color: #fff;
  background: var(--navy);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(28, 26, 23, 0.25);
}
.ship-name-qty {
  font-family: var(--font-condensed);
  font-weight: var(--weight-heavy);
  color: var(--navy);
}
.ship-card-cost-each {
  display: block;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  text-align: right;
}
.ship-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ship-card-info { flex: 1; min-width: 0; }

.ship-card-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
  color: var(--ink);
}

.ship-badge {
  display: inline-block;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
}
/* Rare/Unique read as a quiet uppercase label, not a coloured pill. */
.ship-badge-unique, .ship-badge-rare {
  background: none;
  padding: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.ship-badge-unique { color: var(--gold-dark); }
.ship-badge-rare { color: var(--navy); }
/* Misc = optional mercenary / cross-faction / civilian ship, shown only when the
   Misc filter reveals them. A muted pill so it reads as "secondary to the core list". */
.ship-badge-misc {
  background: var(--ink-faint, #6b6357);
  color: var(--paper);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
}
/* Famous admiral entries in the ship picker read as a small filled pill so they
   stand out from regular hulls. */
.ship-badge-admiral {
  background: var(--gold-dark);
  color: var(--paper);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}
/* Carrier tag — "Launch"/"Drop" so carriers read at a glance (replaces the star). */
.ship-badge-launch {
  background: var(--navy);
  color: var(--paper);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.ship-badge-group {
  background: var(--paper-alt);
  color: var(--ink-muted);
  border: 1px solid var(--stroke);
}

.ship-card-type {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.ship-tonnage-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.ship-tonnage-light { color: #2f6ba0; }
.ship-tonnage-medium { color: #2f7a3a; }
.ship-tonnage-heavy { color: #8a5e10; }
.ship-tonnage-colossal { color: #b83828; }
.ship-tonnage-payload { color: #6a4c9c; }

.ship-card-cost {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--navy);
  white-space: nowrap;
}

/* Ship select card extras */
.weapon-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--sp-xs);
}
.weapon-mini {
  font-family: var(--font-stat);
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--paper-warm);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
}
.weapon-mini svg { width: 9px; height: 9px; opacity: 0.6; }
/* Launch-capability icons on picker cards (fighters / fire ships / mines /
   dropships / torpedoes / other). */
.ship-card-launch { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: var(--sp-xs); }
/* Bombardment tag: same shape as Launches, gold accent so it reads as distinct. */
.ship-card-bombard .launch-type-chip { background: var(--gold-subtle); color: var(--gold-dark); }
.launch-cap-lead {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Launch capability shown as a WORDED chip (icon + label) so it's self-explanatory
   instead of a bare, download-looking glyph. */
.launch-type-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--navy-subtle); color: var(--navy);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.launch-type-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.weapon-mini-loadout {
  color: var(--gold-dark);
  border-color: var(--gold-line);
  background: rgba(184, 147, 46, 0.06);
  font-style: italic;
}
.launch-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-stat);
  font-size: 12px;
  color: var(--gold-dark);
}
.launch-indicator svg { opacity: 0.7; }

/* ── 17. Admiral Cards ───────────────────────────────────────── */
.admiral-card {
  background: var(--paper);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  position: relative;
}
.admiral-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.admiral-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--gold-dark);
}

/* Portrait-thumbnail slot beside an admiral's name: the portrait when one
   exists (famous), else the rank insignia fills the square (generic/faction).
   The insignia lives here now, not inline with the name text. */
.admiral-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admiral-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admiral-thumb svg { width: 100%; height: 100%; }

/* Rank insignia (shared js/rank-insignia.js) */
/* Rank insignia only renders inside the centred .admiral-thumb box now — no
   inline margin/baseline tweaks (they shoved the box svg off-centre). */

.admiral-level {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* Admiral lives on the left rail. Label is light-on-navy; the card itself keeps
   its light paper background so it reads fine against the navy sidebar. */
.sidebar-admiral { margin-top: var(--sp-lg); }
.sidebar-section-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4bfb5;
  margin-bottom: var(--sp-sm);
}
/* Compact flagship link inside the (light) admiral card -> opens its datasheet. */
.admiral-flagship-link {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  margin-top: var(--sp-sm); width: 100%; justify-content: flex-start;
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--gold-line); border-radius: var(--radius-md);
  background: var(--paper-warm); color: var(--navy);
  font-family: var(--font-condensed); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.admiral-flagship-link:hover { background: var(--navy-wash); border-color: var(--navy); }
.admiral-flagship-link svg { flex-shrink: 0; color: var(--gold-dark); }

/* Admiral abilities — innate (always shown) + Abilities-Table picker */
.admiral-abilities-block { margin-top: var(--sp-md); }
/* Draw attention to the picker while the admiral still has ability picks to
   make — adding an admiral should prompt you to choose its abilities. */
.admiral-abilities-block.admiral-abilities-unset {
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  background: var(--gold-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
}
.admiral-abilities-block.admiral-abilities-unset .admiral-picks-remaining { color: var(--gold-dark); font-weight: var(--weight-bold); }
.admiral-abilities-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--gold-dark);
  margin-bottom: var(--sp-xs);
}
.admiral-picks-remaining { color: var(--ink-muted); font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; }
.admiral-ability { margin-bottom: var(--sp-xs); font-size: var(--text-sm); line-height: 1.45; }
.admiral-ability-name { font-weight: var(--weight-semibold); color: var(--ink); }
.admiral-ability-cost {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  background: var(--navy-subtle, rgba(27,58,92,0.08));
  border-radius: var(--radius-sm);
  padding: 0 5px;
}
.admiral-ability-effect { display: block; color: var(--ink-muted); font-size: var(--text-sm); margin-top: 2px; }
.admiral-ability-picks { display: flex; flex-direction: column; gap: var(--sp-xs); }
/* Compact read-only ability lines in the sidebar slot */
.admiral-ability-lite {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  font-size: var(--text-sm);
  color: var(--ink);
}
.admiral-ability-lite .admiral-ability-name { font-weight: var(--weight-semibold); }
.admiral-ability-none { font-size: var(--text-sm); color: var(--ink-faint); font-style: italic; padding: 2px 0; }
.admiral-choose-btn { margin-top: var(--sp-sm); width: 100%; justify-content: center; }
/* Roomy two-column picker inside the modal (full effects readable) */
.admiral-ability-picks-modal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
@media (max-width: 640px) { .admiral-ability-picks-modal { grid-template-columns: 1fr; } }
.admiral-pick {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  width: 100%;
  text-align: left;
  background: var(--surface, #f4f1ea);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.admiral-pick:hover { border-color: var(--gold-line); }
.admiral-pick.is-selected { border-color: var(--gold); background: var(--gold-subtle); }
.admiral-pick.is-locked { opacity: 0.5; cursor: not-allowed; }
.admiral-pick-text { flex: 1; min-width: 0; }
.admiral-pick-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admiral-pick-radio {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--gold-line); border-radius: 50%;
  background: #fff;
  position: relative;
}
.admiral-pick.is-selected .admiral-pick-radio { border-color: var(--gold); }
.admiral-pick.is-selected .admiral-pick-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
/* Ability picker uses visible checkboxes (tick to select, no click-on/off). */
.admiral-pick-check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 2px solid var(--gold-line);
  border-radius: 5px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.admiral-pick.is-selected .admiral-pick-check {
  background: var(--gold); border-color: var(--gold); color: #1c1a17;
}
.kw-link {
  color: var(--navy, #1d3a5f);
  border-bottom: 1px dotted var(--navy, #1d3a5f);
  cursor: pointer;
}
.kw-link:hover { background: var(--gold-subtle); }
.admiral-modal-picks {
  margin-top: var(--sp-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gold-dark);
  letter-spacing: 0.02em;
}

/* Admiral -> Capital ship assignment */
.admiral-assign {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
.admiral-assign-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--gold-dark);
  flex-shrink: 0;
}
.admiral-assign-select {
  flex: 1;
  min-width: 0;
  padding: var(--sp-xs) var(--sp-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface, #f4f1ea);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.admiral-assign-empty {
  margin-top: var(--sp-md);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-style: italic;
}

/* Famous-admiral flagship datasheet (full stats + weapons) */
.admiral-flagship {
  margin-top: var(--sp-md);
  padding: var(--sp-sm);
  background: var(--surface, #f4f1ea);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-md);
}
.admiral-flagship-head { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-sm); }
.admiral-flagship-art { height: 56px; width: auto; max-width: 90px; object-fit: contain; }
.admiral-flagship-name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--navy); }
.admiral-flagship-sub { font-size: var(--text-xs); color: var(--ink-muted); }
.admiral-flagship-rules { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-sm); }

/* ── 17b. Space Station ─────────────────────────────────────── */
/* The empty "Add Space Station" call is deliberately quiet: a station is
   optional, so it must not compete with the required Add Ship / Admiral areas. */
.station-add-optional {
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px dashed var(--stroke);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  transition: all var(--duration-normal) var(--ease-out);
}
.station-add-optional:hover { border-color: var(--navy); color: var(--navy); }
.station-add-optional .opt-tag {
  font-size: 12px;
  opacity: 0.6;
}
.station-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  position: relative;
}
.station-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--navy);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.station-card-art {
  margin: calc(var(--sp-md) * -1) calc(var(--sp-md) * -1) var(--sp-md);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: var(--gold-subtle, #f7f2e6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.station-card-art img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}
.station-option-thumb {
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin-right: var(--sp-xs);
  vertical-align: middle;
  flex-shrink: 0;
}
.station-option-thumb img { width: 100%; height: 100%; object-fit: contain; }
.station-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.station-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: 2px;
}
.station-stat {
  font-family: var(--font-stat);
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--paper-warm);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
}
.station-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
}
.rule-chip-sm {
  font-size: 12px;
  padding: 1px 6px;
}

/* Station modal */
.station-option {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.station-option:hover {
  border-color: var(--navy);
  background: var(--navy-subtle);
}
.station-option-active {
  border-color: var(--navy);
  background: var(--navy-subtle);
}
.station-option-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.station-modal-rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-xs);
}

/* Deployable features reference */
.feature-ref-card {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-xs);
  background: var(--paper-warm);
}
.feature-ref-name {
  font-family: var(--font-stat);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* ── 18. Group View (builder main) ───────────────────────────── */
.group-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-xl);
  flex-wrap: wrap;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-lg);
  border-bottom: 2px solid var(--stroke);
  position: relative;
}
.group-header-bar::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--gold);
}

/* Fleet budget context bar */
.group-budget-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-xs) var(--sp-md);
  margin-bottom: var(--sp-md);
  background: var(--paper-alt);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.04em;
}
.group-budget-label {
  color: var(--ink-muted);
}
.group-budget-remaining {
  color: var(--navy);
}
.group-budget-bar.budget-tight .group-budget-remaining {
  color: var(--gold-dark);
}
.group-budget-bar.budget-over {
  background: #fef2f0;
  border-color: #f0c0b8;
}
.group-budget-bar.budget-over .group-budget-remaining {
  color: var(--error);
  font-weight: var(--weight-bold);
}

.group-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--navy-dark);
}
/* Ship class shown beside a named famous-admiral flagship (e.g. "Fortune's Fancy"). */
.flagship-class {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Battlegroup inline rename ───────────────────────────────── */
/* Click-to-rename names show a dotted underline on hover so the affordance is
   discoverable without cluttering the layout. */
/* Click target is the NAME TEXT only, not the whole row — inline-block shrinks
   the editable element to its content width (align-self stops flex stretch). */
.group-name-editable { cursor: pointer; display: inline-block; align-self: flex-start; max-width: 100%; }
.group-name-editable:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--navy);
}
.group-name-input {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  max-width: 100%;
  outline: none;
}
.group-name-input:focus { box-shadow: 0 0 0 3px var(--navy-subtle); }
/* Pencil button beside the detail-panel group title. */
.group-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  color: var(--ink-muted);
  cursor: pointer;
}
.group-rename-btn:hover { color: var(--navy); border-color: var(--navy); background: var(--navy-subtle); }

.badge-tonnage {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid;
}
.badge-tonnage-light { color: #2f6ba0; border-color: #2f6ba0; background: rgba(74, 141, 199, 0.08); }
.badge-tonnage-medium { color: #2f7a3a; border-color: #2f7a3a; background: rgba(62, 138, 69, 0.08); }
.badge-tonnage-heavy { color: #8a5e10; border-color: #8a5e10; background: rgba(196, 136, 32, 0.08); }
.badge-tonnage-super-heavy { color: #8a5e10; border-color: #8a5e10; background: rgba(196, 136, 32, 0.08); }
.badge-tonnage-colossal { color: #b83828; border-color: #b83828; background: rgba(184, 56, 40, 0.08); }
.badge-tonnage-payload { color: #6a4c9c; border-color: #6a4c9c; background: rgba(106, 76, 156, 0.08); }

.group-warnings {
  margin-bottom: var(--sp-lg);
  padding: var(--sp-sm) var(--sp-md);
  background: #fef2f0;
  border: 1px solid #f0c0b8;
  border-left: 3px solid var(--error);
  border-radius: var(--radius-sm);
}
.group-warning-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--error);
  padding: var(--sp-xxs) 0;
}

.group-ships-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.group-ship-entry {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-left: 3px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  padding-left: calc(var(--sp-lg) - 2px);
  /* Image on top, content in a capped reading column (matches mobile's
     ship-art-hero). The detail panel is wide; an uncapped row stretched stats,
     weapon tables and lore into hard-to-read full-width lines. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-md);
  max-width: 720px;
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}
.group-ship-entry:hover {
  border-color: var(--stroke-strong);
  border-left-color: var(--navy);
  box-shadow: var(--shadow-md);
}

/* Faction-colored left accent on ship entries */
[data-faction="ucm"] .group-ship-entry:hover { border-left-color: var(--faction-ucm); }
[data-faction="phr"] .group-ship-entry:hover { border-left-color: var(--faction-phr); }
[data-faction="scourge"] .group-ship-entry:hover { border-left-color: var(--faction-scourge); }
[data-faction="shaltari"] .group-ship-entry:hover { border-left-color: var(--faction-shaltari); }
[data-faction="bioficer"] .group-ship-entry:hover { border-left-color: var(--faction-bioficer); }
[data-faction="resistance"] .group-ship-entry:hover { border-left-color: var(--faction-resistance); }

.group-ship-entry .ship-card-image {
  width: 100%;
  height: 250px;
  align-self: stretch;
}

/* Compact view — smaller cards, no stat/weapon detail */
.group-ship-entry.compact {
  padding: var(--sp-md);
  padding-left: calc(var(--sp-md) - 2px);
  gap: var(--sp-md);
}
.group-ship-entry.compact .ship-card-image {
  width: 64px;
  height: 64px;
}

.group-ship-remove {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
}

/* ── Experimental 2×4 stat layout (Settings → "2×4 stat layout") ──
   Ship art on top, full-width; below it the stat grid (forced to 2 columns)
   sits to the LEFT of the special-rules block. The remove button is already
   absolutely positioned, so a column flow needs no extra handling. */
.group-ship-entry.alt2x4 {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-md);
}
.group-ship-entry.alt2x4 .ship-card-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  align-self: center;
}
.group-ship-entry.alt2x4 .ship-card-image img {
  max-height: 200px;
}
.alt-statblock-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-lg);
}
.alt-statblock-row .alt-stats {
  flex: 0 0 auto;
}
.alt-statblock-row .alt-stats .stat-grid {
  grid-template-columns: repeat(2, minmax(64px, 1fr));
}
.alt-statblock-row .alt-rules {
  flex: 1 1 0;
  min-width: 0;
}
/* On narrow viewports stack the rules under the stats again. */
@media (max-width: 600px) {
  .alt-statblock-row { flex-direction: column; gap: var(--sp-sm); }
  .alt-statblock-row .alt-stats { width: 100%; }
}
.settings-toggle-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--ink-faint);
  border: 1px solid var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Add ship area */
.add-ship-area {
  border: 2px dashed var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  color: var(--ink-faint);
  min-height: 80px;
}
.add-ship-area:hover {
  border-color: var(--navy);
  background: var(--navy-wash);
  color: var(--navy);
}
/* Add Group sits below the group list (like Add Admiral) but reads as the
   primary blue action: navy by default, filled navy on hover. */
.add-group-cta {
  border-color: var(--navy);
  color: var(--navy);
  padding: var(--sp-md);
  min-height: 0;
  margin-top: var(--sp-sm);
}
.add-group-cta:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Group Quantity Bar ── */
/* Group header right column: Remove on top, qty stepper below it. */
.group-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-sm);
  flex-shrink: 0;
}
.group-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--paper-alt);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 2px;
}
.group-qty-num {
  font-family: var(--font-condensed);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--navy);
  min-width: 30px;
  text-align: center;
}
.group-qty-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);
}
.group-qty-btn:hover:not(:disabled) { background: var(--navy); color: #fff; }
.group-qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--ink-faint);
}

/* ── Game Size Popover ── */
.game-size-popover {
  background: var(--paper);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover);
  min-width: 220px;
  padding: var(--sp-xs);
  animation: fadeSlideIn 0.15s var(--ease-out);
}
.game-size-popover-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.game-size-popover-item:hover {
  background: var(--navy-subtle);
}
.game-size-popover-item.active {
  background: var(--navy);
  color: #fff;
}
.game-size-popover-item.active .game-size-popover-desc {
  color: rgba(255,255,255,0.7);
}
/* Custom points limit (e.g. a 1500-pt Clash) — set it right in the size popover. */
.game-size-custom { padding: 10px 12px; border-top: 1px solid var(--stroke-light); display: flex; flex-direction: column; gap: 4px; }
.game-size-custom-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.game-size-custom-row { display: flex; align-items: center; gap: 6px; }
.game-size-custom-input { width: 96px; padding: 6px 8px; border: 1px solid var(--stroke); border-radius: var(--radius-sm); font-size: var(--text-base); font-family: var(--font-display); background: var(--paper); color: var(--ink); }
.game-size-custom-unit { font-size: var(--text-sm); color: var(--ink-muted); }
.game-size-custom-hint { font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.3; }
.game-size-popover-name {
  font-family: var(--font-condensed);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.game-size-popover-desc {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 19. Empty States ────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-4xl) var(--sp-2xl);
  color: var(--ink-faint);
}

.empty-state-icon {
  font-size: 36px;
  margin-bottom: var(--sp-lg);
  opacity: 0.3;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--ink-muted);
  margin-bottom: var(--sp-sm);
}

.empty-state-desc {
  font-size: var(--text-sm);
  max-width: 400px;
  margin: 0 auto var(--sp-lg);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ── 20. Sort Controls ───────────────────────────────────────── */
.ship-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-top: var(--sp-sm);
}
.ship-list-toolbar .ship-results-bar { margin: 0; }
.sort-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.sort-label {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sort-arrow { font-weight: var(--weight-heavy); }

.sort-btn {
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--stroke);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.sort-btn:hover { background: var(--paper-alt); color: var(--ink); }
.sort-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── 21. Faction-Colored Accents ─────────────────────────────── */
[data-faction="ucm"] .fleet-info-panel { border-left: 3px solid var(--faction-ucm); }
[data-faction="phr"] .fleet-info-panel { border-left: 3px solid var(--faction-phr); }
[data-faction="scourge"] .fleet-info-panel { border-left: 3px solid var(--faction-scourge); }
[data-faction="shaltari"] .fleet-info-panel { border-left: 3px solid var(--faction-shaltari); }
[data-faction="bioficer"] .fleet-info-panel { border-left: 3px solid var(--faction-bioficer); }
[data-faction="resistance"] .fleet-info-panel { border-left: 3px solid var(--faction-resistance); }

/* ── 22. Game Size Picker (visual indicators) ────────────────── */
.game-size-option {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  background: var(--paper);
}
.game-size-option:hover { border-color: var(--stroke-strong); }
.game-size-option.selected {
  border-color: var(--navy);
  background: var(--navy-wash);
  box-shadow: inset 3px 0 0 var(--navy);
}

/* Art Deco gold frame that draws itself on hover and stays on the chosen FACTION
   (New Fleet picker). The gold circling IS the selection cue, so the faction
   button keeps its outline look (no navy fill). non-scaling-stroke keeps an even
   2px line on the stretched box; rx:0 = sharp Deco corners. */
.gold-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.gold-frame rect {
  fill: none;
  stroke: #c9a227;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.8s var(--ease-out, ease);
}
.faction-pick-btn:hover .gold-frame rect,
.faction-pick-btn[data-selected] .gold-frame rect { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .gold-frame rect { transition: none; } }
/* The gold frame is the ONLY emphasis on the faction picker — kill the navy
   hover (border/text) and the navy focus ring so there's no blue highlight. */
.faction-pick-btn:hover { border-color: var(--stroke); color: var(--ink); box-shadow: none; }
.faction-pick-btn:focus-visible { outline-color: var(--gold); }

.game-size-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 22px;
  flex-shrink: 0;
}
.gs-block {
  aspect-ratio: 1;
  border: 1.5px solid var(--stroke-strong);
  border-radius: 1px;
  box-sizing: border-box;
  transition: background var(--duration-fast) var(--ease-out);
}
.gs-block.filled { background: var(--navy); border-color: var(--navy); }

.game-size-info { flex: 1; }
.game-size-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.game-size-details {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.game-size-time {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-style: italic;
}

/* New Fleet modal — compact so the whole thing fits with no scroll. */
.new-fleet-row { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.new-fleet-row .form-group { min-width: 180px; }
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.size-grid .game-size-option { padding: var(--sp-sm) var(--sp-md); }
.size-grid .game-size-name { font-size: var(--text-sm); }
.size-grid .game-size-details { font-size: var(--text-xs); line-height: 1.35; }
.game-size-sub { opacity: 0.85; }
/* Floating-label field (New Fleet modal: Fleet Name, Description, Points limit).
   Input first, label second (adjacent sibling). Label sits centered in the box,
   then shrinks and lifts to the top border on focus or when the field has a value. */
.float-field { position: relative; }
.float-field > .form-input { width: 100%; }
.float-field > .float-label {
  position: absolute; left: var(--sp-md); top: 50%;
  transform: translateY(-50%); transform-origin: left center;
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.1; min-height: 0; white-space: nowrap;
  max-width: calc(100% - var(--sp-lg)); overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-faint); pointer-events: none;
  background: var(--paper); padding: 0 4px;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.float-field > .form-input:focus + .float-label,
.float-field > .form-input:not(:placeholder-shown) + .float-label {
  transform: translateY(-50%) translateY(-19px) scale(0.82);
  color: var(--navy);
}
.new-fleet-points-row { display: inline-block; margin-top: var(--sp-md); }
.new-fleet-points-row #new-fleet-points { width: 220px; max-width: 100%; }
.new-fleet-points-hint { font-size: var(--text-xs); color: var(--ink-muted); }

.faction-pick-desc {
  margin-top: var(--sp-sm);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-style: italic;
  min-height: 1.2em;
  line-height: 1.4;
}

/* ── 23. Toast Notification ─────────────────────────────────── */
#app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--paper);
  border: 1px solid var(--stroke-strong);
  color: var(--ink);
  padding: var(--sp-md) var(--sp-2xl);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  z-index: var(--z-toast);
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
  box-shadow: 0 4px 16px rgba(28, 26, 23, 0.12), 0 1px 3px rgba(28, 26, 23, 0.08);
  pointer-events: none;
  white-space: nowrap;
}

/* ── 24. Animations ──────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Opacity-only: a transform here would make every view a containing block for
   its position:fixed children (e.g. the mobile fleet-summary bottom sheet),
   anchoring them to the tall view content instead of the viewport. */
@keyframes viewEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-in { animation: slideUp var(--duration-slow) var(--ease-out) forwards; }

/* View transitions */
#app > section:not(.hidden) {
  animation: viewEnter 0.2s var(--ease-out);
}

.stagger > * { opacity: 0; animation: slideUp var(--duration-slow) var(--ease-out) forwards; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }

/* ── 25b. Share Modal & Shared Fleet View ───────────────────── */
.share-url-row {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
}
.share-url-input {
  flex: 1;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper-alt);
  min-width: 0;
}
.share-url-input:focus { outline: 2px solid var(--navy-light); outline-offset: -1px; }
.share-text-export {
  width: 100%;
  min-height: 160px;
  padding: var(--sp-md);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--paper-alt);
  resize: vertical;
  line-height: 1.5;
}

.shared-fleet-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-2xl);
}
.shared-fleet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-xl);
  border-bottom: 2px solid var(--navy);
}
.shared-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.shared-faction-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.shared-fleet-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--navy-dark);
  margin: 0;
}
.shared-fleet-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xs);
}
.shared-fleet-sublabel {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0.04em;
}
.shared-header-right {
  text-align: right;
  flex-shrink: 0;
}
.shared-fleet-points {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
}
.shared-fleet-pts-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}
.shared-fleet-actions {
  display: flex;
  gap: var(--sp-sm);
  flex-shrink: 0;
  margin-top: var(--sp-sm);
}
.shared-desc {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  border-left: 3px solid var(--gold);
  background: var(--paper-warm);
}
.shared-comp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-xl);
}
.shared-comp-tag {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  color: var(--ink-soft);
}
.shared-comp-light { color: #2f6ba0; border: 1px solid #2f6ba0; }
.shared-comp-medium { color: #2f7a3a; border: 1px solid #2f7a3a; }
.shared-comp-heavy { color: #8a5e10; border: 1px solid #8a5e10; }
.shared-comp-super-heavy { color: #8a5e10; border: 1px solid #8a5e10; }
.shared-comp-colossal { color: #b83828; border: 1px solid #b83828; }
.shared-section {
  margin-bottom: var(--sp-xl);
}
.shared-section-title {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--stroke-light);
}
.shared-section-title .text-caption {
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.shared-admiral-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-left: 3px solid var(--gold);
  margin-bottom: var(--sp-xs);
  background: var(--paper-warm);
}
.shared-admiral-info {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.shared-admiral-name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.shared-admiral-level {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0.04em;
}
.shared-admiral-pts {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.shared-group-ships {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.shared-ship-card {
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.shared-ship-top {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.shared-ship-art {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-wash);
  border: 1px solid var(--stroke-light);
}
.shared-ship-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shared-ship-info {
  flex: 1;
  min-width: 0;
}
.shared-ship-name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--navy-dark);
}
.shared-ship-type {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.shared-ship-pts {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
  flex-shrink: 0;
}
.shared-ship-pts-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--ink-soft);
}
.shared-loadout {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .shared-fleet-header { flex-direction: column; }
  .shared-header-right { text-align: left; display: flex; align-items: baseline; gap: var(--sp-md); flex-wrap: wrap; }
  .shared-faction-icon { width: 36px; height: 36px; }
}
@media (max-width: 480px) {
  .shared-fleet-container { padding: var(--sp-lg); }
  .shared-fleet-name { font-size: var(--text-xl); }
  .shared-fleet-actions { width: 100%; }
  .shared-fleet-actions .btn { flex: 1; }
  .shared-ship-art { width: 60px; height: 60px; }
  .shared-ship-top { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 25. Utility Classes ─────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.gap-xl { gap: var(--sp-xl); }
.gap-2xl { gap: var(--sp-2xl); }
.text-center { text-align: center; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── 26. Print ───────────────────────────────────────────────── */
@media print {
  /* No forced size — adapt to whatever paper the user selects (A4 or US Letter).
     Margins are safe for both: content sits inside the A4 width (the narrower)
     and the US Letter height (the shorter), so nothing clips on either. */
  @page {
    margin: 12mm;
  }

  /* Hide everything except the print container */
  body { background: white !important; color: black !important; font-size: 10pt; }
  body > *:not(#print-container) { display: none !important; }
  #print-container { display: block !important; }

  /* macOS/WebKit fix: <body> is a column flexbox (display:flex on screen). In a
     paginated context WebKit will not fragment a flex item across pages and
     collapses the lone remaining child to ~zero height — printing ONE BLANK PAGE
     (Windows/Blink prints fine). Reset the body back to normal block flow for
     print so #print-container paginates as an ordinary block. */
  html, body {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  #print-container {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Stat grid — compact for print */
  .stat-grid { gap: 0; }
  .stat-cell {
    border-color: #999;
    background: #f5f5f5;
    padding: 2px 4px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .stat-cell-label { font-size: 7pt; gap: 1px; }
  .stat-cell-label svg { width: 8px; height: 8px; opacity: 0.7; }
  .stat-cell-value { font-size: 11pt; }
  .stat-cell-warn { background: #fff3e0; color: #8a5810; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stat-cell-good { color: #2e7d32; }

  /* Weapons — tight rows */
  .weapon-list { margin-top: 3px; }
  .weapon-row { background: #fafafa; border-color: #bbb; padding: 1px 6px; min-height: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .weapon-header { background: #eee; padding: 1px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .weapon-col-type svg { opacity: 0.9; }
  .weapon-special-chip { background: #eee; color: #333; border-color: #bbb; font-size: 7pt; padding: 0 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Launch ref */
  .launch-ref { border-color: #999; break-inside: avoid; margin-top: 8px; }
  .launch-ref-header { background: #f5f5f5; border-color: #bbb; font-size: 8pt; padding: 3px 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .launch-ref-row { border-color: #bbb; padding: 1px 6px; }
  .launch-ref-row-header { background: #f5f5f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Ship card print overrides */
  .print-ship { border-color: #999; border-left-color: #1b3a5c; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-ship-art { border-color: #bbb; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-dmg-box { border-color: #777; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Warnings */
  .print-warnings { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-warning-error { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Group category badges */
  .print-group-cat { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Cripple markers */
  .print-dmg-cripple { border-color: #c43c2f; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-dmg-cripple-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Description */
  .print-desc { border-left-color: #b8932e; background: #faf8f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Totals */
  .print-totals { break-inside: avoid; }

  /* Page break hints */
  .print-group { break-inside: avoid; }
  .print-ship { break-inside: avoid; }
  .print-glossary { break-before: auto; }
  .print-header { break-after: avoid; }
  .print-group-header { break-after: avoid; }

  /* Two-column units layout (Settings toggle) — packs ~4 units per page. The
     group header spans both columns; ships flow into two columns; tall groups
     may break across pages (they can't fit one column). Weapon rows tighten. */
  .print-2col .print-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: start; break-inside: auto; }
  .print-2col .print-group-header { grid-column: 1 / -1; }
  .print-2col .print-ship { break-inside: avoid; }
  .print-2col .print-ship .weapon-row { grid-template-columns: minmax(64px, 1.2fr) 26px 22px 22px 28px minmax(50px, 1.5fr); font-size: 7.5pt; }

}

/* Print Preview overlay — pick options + see the output before the print dialog. */
.print-preview-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: #5a5a5a; display: flex; flex-direction: column;
}
.print-preview-bar {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--navy); color: #fff; flex-wrap: wrap;
}
.print-preview-title { font-weight: var(--weight-bold); font-size: var(--text-md); }
.print-preview-opt { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); cursor: pointer; }
.print-preview-spacer { flex: 1; }
/* On the navy bar the buttons need their own colours: Close = white outline,
   Print = gold fill, so they read clearly and are visibly different. */
.print-preview-bar .pp-close-btn {
  background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.65); color: #fff;
}
.print-preview-bar .pp-close-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.print-preview-bar #pp-print {
  background: #ffcc00; border-color: #ffcc00; color: #1b2a3a; font-weight: var(--weight-bold);
}
.print-preview-bar #pp-print:hover { background: #ffd633; border-color: #ffd633; }
.print-preview-scroll { flex: 1; overflow: auto; padding: var(--sp-lg); display: flex; justify-content: center; align-items: flex-start; }
.print-preview-surface {
  position: relative;
  background: #fff; width: 210mm; max-width: 100%;
  padding: 12mm; box-shadow: 0 4px 24px rgba(0,0,0,0.4); border-radius: 2px;
}
/* Page-count readout + density select in the preview bar. */
.pp-pagecount { font-size: var(--text-sm); color: #cdd6e0; font-variant-numeric: tabular-nums; }
.pp-density-sel {
  background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px; padding: 1px 4px; font-size: var(--text-sm); cursor: pointer;
}
.pp-density-sel option { color: #1c1a17; }
.pp-density-sel:disabled, .print-preview-opt input:disabled { opacity: 0.4; cursor: default; }
/* Estimated page boundary on the continuous preview sheet (screen only). */
.pp-page-break {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1.5px dashed #b04a3a; pointer-events: none;
}
.pp-page-break-label {
  position: absolute; right: 0; top: 2px;
  background: #b04a3a; color: #fff; font-size: 8pt; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 0 0 3px 3px;
}
/* Simple Print View — compact roster list (screen + print). */
.print-simple { font-family: 'Jost', sans-serif; color: #1c1a17; font-size: 11pt; }
.print-simple .sp-head { font-size: 13pt; border-bottom: 2px solid #1c1a17; padding-bottom: 4px; margin-bottom: 8px; }
.print-simple .sp-section { margin-bottom: 10px; }
.print-simple .sp-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; border-bottom: 1px dotted #bbb; }
.print-simple .sp-qty { font-weight: 700; min-width: 26px; }
.print-simple .sp-name { font-weight: 600; }
.print-simple .sp-note { color: #555; font-size: 9.5pt; }
.print-simple .sp-pts { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.print-simple .sp-adm .sp-name { font-style: italic; }
/* Simple Print View renders the plain-text army list in a clean readable block. */
.print-simple-text {
  font-family: 'Jost', 'Segoe UI', sans-serif;
  font-size: 11pt;
  line-height: 1.5;
  color: #1c1a17;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Print layout classes (used by printFleet JS) */
.print-fleet {
  font-family: 'Jost', sans-serif;
  color: #1c1a17;
  max-width: 800px;
  margin: 0 auto;
}

.print-header {
  border-bottom: 3px double #1b3a5c;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.print-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.print-faction-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
}
.print-header-text {
  flex: 1;
}
.print-header-points {
  text-align: right;
  flex-shrink: 0;
}
.print-points-big {
  font-family: 'Roboto Slab', serif;
  font-size: 22pt;
  font-weight: 700;
  color: #1b3a5c;
  line-height: 1;
}
.print-points-cap {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8pt;
  color: #5f5f5f;
  text-transform: none;
  letter-spacing: 0.04em;
}
.print-fleet-name {
  font-family: 'Roboto Slab', serif;
  font-size: 18pt;
  font-weight: 700;
  color: #1b3a5c;
  line-height: 1.2;
}
.print-fleet-meta {
  font-size: 10pt;
  color: #555;
  margin-top: 2px;
}
.print-fleet-summary {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8pt;
  color: #5f5f5f;
  text-transform: none;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.print-fleet-date {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7.5pt;
  color: #bbb;
  margin-top: 1px;
}

/* Fleet description in print */
.print-desc {
  font-family: var(--font-lore);
  font-size: 9pt;
  color: #555;
  line-height: 1.5;
  padding: 6px 10px;
  margin-top: 10px;
  border-left: 3px solid #b8932e;
  background: #faf8f5;
}
.print-warnings {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid #e0c46c;
  border-radius: 3px;
  background: #fef9ea;
}
.print-warning {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8pt;
  font-weight: 600;
  color: #8a6d1e;
  margin-bottom: 1px;
}
.print-warning-error { color: #c43c2f; }

.print-section { margin-top: 16px; }
.print-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #767676;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.print-admiral {
  font-weight: 600;
  font-size: 11pt;
}
.print-admiral-card {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  break-inside: avoid;
}
.print-admiral-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.print-admiral-name {
  font-weight: 700;
  font-size: 11pt;
}
.print-admiral-pts {
  font-size: 10pt;
  color: #666;
}
.print-admiral-abilities {
  margin-top: 5px;
  padding: 4px 6px 5px;
  border: 1px solid var(--gold-line, #d9c089);
  border-left: 3px solid var(--gold, #b8932e);
  border-radius: 3px;
  background: rgba(184, 147, 46, 0.06);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-admiral-abilities-head {
  font-family: var(--font-header);
  font-size: 8pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a6d1e;
  margin-bottom: 2px;
}
.print-admiral-ability-sublabel {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #8a6d1e;
  margin-top: 4pt;
}
.print-admiral-abilities .print-admiral-ability-sublabel:first-child { margin-top: 0; }
.print-admiral-ability {
  font-size: 8pt;
  line-height: 1.35;
  color: #444;
  margin-bottom: 2px;
}
.print-ability-name {
  font-weight: 700;
  color: #1b3a5c;
}
.print-ability-cost {
  font-weight: 600;
  color: #8a6d1e;
  font-size: 7.5pt;
}

/* Print space station */
.print-station {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #bbb;
  border-radius: 4px;
  break-inside: avoid;
}
.print-station-stats {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9pt;
  color: #444;
  margin-top: 2px;
}
.print-station-rules {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8pt;
  color: #555;
  margin-top: 2px;
}

.print-group {
  margin-top: 16px;
  break-inside: avoid;
}
.print-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #1b3a5c;
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.print-group-name {
  font-family: 'Roboto Slab', serif;
  font-size: 13pt;
  font-weight: 700;
  color: #1b3a5c;
}
.print-group-pts {
  font-size: 10pt;
  color: #666;
}
.print-group-cat {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 1px 5px;
  border: 1px solid;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-left: 4px;
}
.print-group-cat-light { color: #2f6ba0; border-color: #2f6ba0; }
.print-group-cat-medium { color: #2f7a3a; border-color: #2f7a3a; }
.print-group-cat-heavy { color: #8a5e10; border-color: #8a5e10; }
.print-group-cat-colossal { color: #b83828; border-color: #b83828; }
.print-group-cat-payload { color: #6a4c9c; border-color: #6a4c9c; }

.print-ship {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid #ccc;
  border-left: 3px solid #1b3a5c;
  break-inside: avoid;
}
.print-ship-top {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.print-ship-art {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: 1px solid #ddd;
  overflow: hidden;
  background: #f8f8f8;
}
.print-ship-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.print-ship-content {
  flex: 1;
  min-width: 0;
}
.print-ship-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.print-ship-name {
  font-weight: 700;
  font-size: 11pt;
}
.print-ship-pts {
  font-size: 10pt;
  color: #555;
  font-weight: 600;
}
.print-badge {
  display: inline-block;
  font-size: 7pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border: 1px solid;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.print-badge-unique {
  color: #8a6d1e;
  border-color: #d4b94e;
  background: #fef9ea;
}
.print-badge-rare {
  color: #666;
  border-color: #bbb;
  background: #f5f5f5;
}

/* Damage tracking boxes for gameplay */
.print-dmg-track {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}
.print-dmg-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.04em;
  color: #888;
  margin-right: 2px;
}
.print-dmg-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid #999;
  background: #fff;
}
.print-dmg-cripple {
  border-color: #c43c2f;
  border-width: 2px;
  position: relative;
}
.print-dmg-cripple::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid #c43c2f;
}
.print-dmg-cripple-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7pt;
  color: #c43c2f;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

.print-loads {
  font-size: 9pt;
  color: #444;
  margin-top: 4px;
}
.print-load { font-weight: 600; }

.print-loadout-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8pt;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #767676;
  margin-top: 4px;
  margin-bottom: 1px;
}

.print-ship-tonnage {
  font-weight: 400;
  font-size: 9pt;
  color: #888;
  text-transform: none;
  letter-spacing: 0.04em;
}
.print-ship-qty {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12pt;
  color: #1b3a5c;
}
.print-ship-each {
  font-size: 8pt;
  font-weight: 400;
  color: #999;
}

.print-rules {
  font-size: 9pt;
  color: #444;
  margin-top: 4px;
  font-style: italic;
}

.print-rules-inline {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dotted #ddd;
}
.print-rules-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #999;
  margin-bottom: 2px;
}
.print-weapon-abilities {
  border-top-style: dashed;
}
.print-rule-entry {
  font-size: 8pt;
  line-height: 1.35;
  color: #444;
  margin-bottom: 2px;
}
.print-rule-name {
  font-weight: 700;
  color: #1b3a5c;
}

/* Fleet totals summary */
.print-totals {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 2px solid #1b3a5c;
  break-inside: avoid;
}
.print-totals-header {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9pt;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #1b3a5c;
  margin-bottom: 6px;
}
.print-totals-grid {
  max-width: 260px;
}
.print-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 9pt;
  color: #444;
}
.print-totals-total {
  border-top: 1px solid #1b3a5c;
  margin-top: 2px;
  padding-top: 4px;
  font-weight: 700;
  font-size: 10pt;
  color: #1b3a5c;
}
.print-totals-label { font-weight: 600; }
.print-totals-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.print-totals-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8pt;
  color: #5f5f5f;
}

/* Rules glossary */
.print-glossary {
  margin-top: 24px;
  page-break-before: auto;
  column-count: 2;
  column-gap: 20px;
  border-top: 3px double #1b3a5c;
  padding-top: 12px;
}
.print-glossary .print-section-title {
  column-span: all;
  border-bottom: none;
  font-size: 10pt;
  color: #1b3a5c;
  margin-bottom: 10px;
}
.print-glossary-entry {
  margin-bottom: 6px;
  font-size: 8.5pt;
  line-height: 1.4;
  break-inside: avoid;
  padding-bottom: 4px;
  border-bottom: 1px dotted #ddd;
}
.print-glossary-name {
  font-weight: 700;
  color: #1b3a5c;
}
.print-glossary-name::after { content: ': '; }
.print-glossary-page {
  font-weight: 400;
  font-size: 7pt;
  color: #888;
  font-style: italic;
}
.print-glossary-desc {
  color: #333;
  font-family: var(--font-lore);
  font-size: 7.5pt;
}

/* ── Dense print datasheet (.dp-*) ──────────────────────────────
   Compact, self-contained print markup that renders IDENTICALLY on screen (in the
   preview) and on paper, so the preview is WYSIWYG and a whole fleet fits onto a few
   readable pages (Army-App / Hobgoblin style). Backgrounds force colour in print. */
.dp-groups { margin-top: 10px; }
.dp-groups.dp-2col { column-count: 2; column-gap: 14px; column-fill: balance; }
/* Keep each group whole within a column: the header never orphans from its ships and
   a group never splits awkwardly across the gutter, so the two columns read cleanly.
   The browser still balances the columns between groups. */
.dp-group { margin-bottom: 8px; break-inside: avoid; }
.dp-2col .dp-group { break-inside: avoid; }
.dp-group-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 1.5px solid #1b3a5c; padding-bottom: 2px; margin-bottom: 4px;
  break-after: avoid; break-inside: avoid;
}
.dp-group-name { font-weight: 700; font-size: 10.5pt; color: #1b3a5c; }
.dp-group-cat {
  font-weight: 600; font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 4px;
}
.dp-group-cat-light { color: #2f6ba0; }
.dp-group-cat-medium { color: #2f7a3a; }
.dp-group-cat-heavy { color: #8a5e10; }
.dp-group-cat-colossal { color: #b83828; }
.dp-group-cat-payload { color: #6a4c9c; }
.dp-group-pts { font-size: 8.5pt; color: #555; white-space: nowrap; font-variant-numeric: tabular-nums; }

.dp-ship {
  break-inside: avoid; page-break-inside: avoid; border: 1px solid #bbb; border-left: 3px solid #1b3a5c;
  border-radius: 3px; padding: 4px 7px; margin-bottom: 6px; background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* If a card is taller than a page and MUST break, never split it through the
   stat block / head — force the page break to fall after the stats instead. */
.dp-ship-head { break-after: avoid; break-inside: avoid; page-break-inside: avoid; }
.dp-statgrid, .dp-big-top { break-inside: avoid; page-break-inside: avoid; }
.dp-ship-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dp-name { font-weight: 700; font-size: 9.5pt; color: #1c1a17; }
.dp-ton { font-weight: 600; font-size: 7.5pt; color: #777; text-transform: uppercase; letter-spacing: 0.03em; }
.dp-badge {
  font-size: 7pt; font-weight: 700; text-transform: uppercase; border: 1px solid #b83828;
  color: #b83828; border-radius: 3px; padding: 0 3px; margin-left: 3px;
}
.dp-pts { font-size: 8.5pt; font-weight: 700; color: #1b3a5c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-each { font-weight: 400; color: #777; font-size: 7.5pt; }

/* Stat grid (echoes the on-screen stat cells): icon | value over label, packed
   into an aligned grid instead of a loose flowing line. */
/* 2-column paired layout (Scan|KS, Sig|ES, Thrust|BS, Hull spans) — matches the
   on-screen stat grid. width:max-content keeps the block compact, not stretched. */
.dp-statgrid { display: grid; grid-template-columns: repeat(2, minmax(46px, 78px)); gap: 2px; margin: 3px 0; width: max-content; max-width: 100%; }
.dp-sc-wide { grid-column: 1 / -1; }
.dp-sc-none { opacity: 0.5; }
/* Hull tracking boxes occupy the Hull slot of the stat grid (replacing the number). */
.dp-statgrid .dp-sc-hull .dp-hull { margin-top: 0; }
.dp-statcell {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 3px;
  border: 1px solid #d4cec2; border-radius: 2px; padding: 1px 4px; background: #f6f4ef;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-sc-icon { grid-row: 1 / 3; display: inline-flex; color: #1b3a5c; }
.dp-sc-icon svg { width: 12px; height: 12px; display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dp-sc-val { font-weight: 700; font-size: 9pt; color: #1c1a17; line-height: 1.05; }
.dp-sc-lab { font-size: 6pt; text-transform: uppercase; letter-spacing: 0.02em; color: #777; line-height: 1; }
.dp-statcell.dp-stat-mod .dp-sc-val, .dp-statcell.dp-stat-mod .dp-sc-icon { color: #2e7d32; }
/* Firing-arc icon in the print weapon table (the little arc diagram + its label). */
.dp-w-arc { white-space: nowrap; }
.dp-arc { display: inline-flex; align-items: center; justify-content: center; gap: 2px; color: #1b3a5c; }
.dp-arc svg { width: 12px; height: 12px; display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dp-arc-lab { font-size: 6.8pt; color: #555; }

.dp-weapons { width: 100%; border-collapse: collapse; margin: 3px 0; font-size: 8pt; }
.dp-weapons th {
  /* Dark text on a light tint + a dark underline — readable even if the printer
     drops background fills (no white-on-navy). */
  text-align: center; background: #e7ebf0; color: #1b3a5c; font-weight: 700; padding: 1px 4px;
  font-size: 7pt; text-transform: uppercase; letter-spacing: 0.02em;
  border-bottom: 1.5px solid #1b3a5c;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-weapons td { text-align: center; padding: 1px 4px; border-bottom: 1px solid #e2ddd4; }
.dp-weapons tr:nth-child(even) td { background: #f6f4ef; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dp-w-name { text-align: left !important; font-weight: 600; }
.dp-w-spec { text-align: left !important; color: #555; }
/* Critical-on value under the Lock, only for weapons whose rules use criticals. */
.dp-w-crit {
  display: block; font-size: 6.8pt; font-weight: 700; line-height: 1.1;
  color: #8a6d1e; letter-spacing: 0.02em; white-space: nowrap; margin-top: 1px;
}
/* Secondary-objective checklist: every option with a tickbox to pick at the table. */
.dp-secobj-hint { font-weight: 400; font-style: italic; color: #8a6d1e; font-size: 0.82em; text-transform: none; letter-spacing: 0; }
/* Secondary-objective checklist is ALWAYS two columns for readability, regardless
   of the sheet's column/big/roster mode (the list is long and reads better split). */
.dp-secobj .dp-rules { column-count: 2; column-gap: 18px; }
.dp-secobj .dp-secobj-row { display: block; break-inside: avoid; -webkit-column-break-inside: avoid; }
.dp-secobj .dp-checkbox { font-family: var(--font-stat); font-size: 1.7em; line-height: 1; vertical-align: -0.18em; color: #1b3a5c; margin-right: 4px; }
.dp-secobj .dp-secobj-on { background: rgba(184, 147, 46, 0.08); border-radius: 3px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dp-secobj .dp-secobj-on .dp-checkbox { color: #8a6d1e; }

.dp-loads, .dp-systems { font-size: 8pt; margin: 2px 0; color: #1c1a17; line-height: 1.35; }
.dp-loads b, .dp-systems b { color: #1b3a5c; }
.dp-rules { font-size: 7.8pt; margin-top: 3px; color: #333; line-height: 1.35; }
.dp-rule { display: block; margin-bottom: 1px; }
.dp-rule b { color: #1b3a5c; }

.dp-hull { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.dp-hull-lab { font-size: 7pt; font-weight: 700; text-transform: uppercase; color: #777; }
.dp-hull-boxes { display: inline-flex; flex-wrap: wrap; gap: 2px 6px; }
.dp-hull-grp { display: inline-flex; gap: 1.5px; }
.dp-box {
  width: 12px; height: 12px; border: 1px solid #555; border-radius: 1px; display: inline-block;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-box-crip {
  border-color: #c43c2f; border-width: 1.5px;
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, #f3c0bb 2px, #f3c0bb 3px);
}

.dp-flagship {
  margin-top: 4px; padding: 3px 7px; border: 1px dashed #b8932e; border-radius: 3px;
  background: #faf8f5; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dp-flagship-name { font-weight: 700; font-size: 8.5pt; color: #1b3a5c; margin-bottom: 2px; }

/* Per-ship thumbnail — sits left of the ship name so the sheet can be matched to
   the model on the table. Sized by the density tier below. */
.dp-ship-head { align-items: center; }
.dp-name-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dp-thumb {
  width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain;
  border: 1px solid #ccc; border-radius: 2px; background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ── Density tiers (preview toggle) ──────────────────────────────
   Comfortable = arm's-length readable at the table (default). Compact = max
   density / fewest pages. Both stay 2-column when 2 columns is on. */
.pf-comfortable .dp-group-name { font-size: 11.5pt; }
.pf-comfortable .dp-name { font-size: 10.4pt; }
.pf-comfortable .dp-pts { font-size: 9.2pt; }
.pf-comfortable .dp-sc-val { font-size: 9.6pt; }
.pf-comfortable .dp-weapons { font-size: 8.8pt; }
.pf-comfortable .dp-weapons th { font-size: 7.6pt; }
.pf-comfortable .dp-loads, .pf-comfortable .dp-systems { font-size: 8.8pt; }
.pf-comfortable .dp-rules { font-size: 8.5pt; line-height: 1.4; }
.pf-comfortable .dp-ship { padding: 5px 8px; }
.pf-comfortable .dp-thumb { width: 58px; height: 58px; }
.pf-comfortable .dp-box { width: 10px; height: 10px; }

.pf-compact .dp-group-name { font-size: 10pt; }
.pf-compact .dp-name { font-size: 9.2pt; }
.pf-compact .dp-sc-val { font-size: 8.3pt; }
.pf-compact .dp-weapons { font-size: 7.6pt; }
.pf-compact .dp-loads, .pf-compact .dp-systems { font-size: 7.6pt; }
.pf-compact .dp-rules { font-size: 7.4pt; line-height: 1.28; }
.pf-compact .dp-ship { padding: 3px 6px; margin-bottom: 5px; }
.pf-compact .dp-thumb { width: 42px; height: 42px; }

/* ── Ink-saver (preview toggle) ──────────────────────────────────
   Strip the ink-heavy fills (navy weapon header, zebra striping) to white with
   black text, and grayscale the thumbnails. Safe for B&W / draft printing. */
.pf-inksaver .dp-weapons th { background: #fff !important; color: #000 !important; border: 1px solid #555; }
.pf-inksaver .dp-weapons tr:nth-child(even) td { background: #fff !important; }
.pf-inksaver .dp-group-name, .pf-inksaver .dp-pts, .pf-inksaver .dp-group-pts,
.pf-inksaver .dp-w-name, .pf-inksaver .dp-loads b, .pf-inksaver .dp-systems b,
.pf-inksaver .dp-rule b, .pf-inksaver .dp-flagship-name { color: #000 !important; }
.pf-inksaver .dp-group-head { border-bottom-color: #000 !important; }
.pf-inksaver .dp-ship { border-left-color: #000 !important; }
.pf-inksaver .dp-group-cat { color: #000 !important; }
.pf-inksaver .dp-flagship { background: #fff !important; border-color: #777; }
.pf-inksaver .dp-statline, .pf-inksaver .dp-rules,
.pf-inksaver .dp-loads, .pf-inksaver .dp-systems { color: #000; }
/* Hoisted faction-rule keyword chips on a card (full text is in the end glossary). */
.dp-hoist-chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.dp-hoist-chip {
  font-size: 7.5pt; font-weight: 700; color: #1b3a5c;
  border: 1px solid #c9c2b4; border-radius: 3px; padding: 0 5px; background: #f3f1ec;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Faction Rules glossary at the end of the sheet. */
.dp-glossary { break-inside: avoid; margin-top: 8px; border-top: 1.5px solid #1b3a5c; padding-top: 4px; }
.pf-comfortable .dp-hoist-chip { font-size: 8pt; }
.pf-inksaver .dp-hoist-chip { background: #fff !important; color: #000 !important; border-color: #999; }
.pf-inksaver .dp-glossary { border-top-color: #000; }

/* ── Roster table (compact 2-3 page print option) ───────────── */
.roster-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 7.5pt; margin-top: 6px; }
.roster-table th:nth-child(1) { width: 27%; }
.roster-table th:nth-child(2), .roster-table th:nth-child(3), .roster-table th:nth-child(4),
.roster-table th:nth-child(5), .roster-table th:nth-child(6), .roster-table th:nth-child(7),
.roster-table th:nth-child(8) { width: 5.2%; }
.roster-table th:nth-child(9) { width: 24%; }
.roster-table th:nth-child(10) { width: 5%; }
.roster-table th:nth-child(11), .roster-table th:nth-child(12), .roster-table th:nth-child(13) { width: 4%; }
.roster-table th {
  background: #e7ebf0; color: #1b3a5c; font-size: 6.5pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; padding: 2px 3px;
  border-bottom: 1.5px solid #1b3a5c; text-align: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.roster-table th.rt-name, .roster-table th.rt-w { text-align: left; }
.roster-table td { padding: 1px 4px; text-align: center; border-bottom: 1px solid #e2ddd4; vertical-align: top; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.roster-table td.rt-name { text-align: left; border-left: 3px solid #1b3a5c; }
.roster-table td.rt-w { text-align: left; }
.rt-group td {
  background: #f1efe8; color: #1b3a5c; font-weight: 700; padding: 3px 6px;
  border-top: 1.5px solid #1b3a5c;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rt-gcat { font-size: 6.5pt; text-transform: uppercase; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 4px; }
.rt-gpts { font-weight: 400; color: #555; font-size: 7pt; margin-left: 6px; }
.rt-shipname { font-weight: 700; color: #1c1a17; line-height: 1.2; }
.rt-ton { font-weight: 600; font-size: 6.5pt; color: #777; text-transform: uppercase; letter-spacing: 0.03em; }
.rt-pts { font-weight: 400; color: #1b3a5c; font-size: 7pt; }
.rt-rules { font-size: 6.8pt; color: #555; line-height: 1.3; margin-top: 1px; }
.rt-rules::before { content: 'Rules: '; color: #1b3a5c; font-weight: 700; }
.rt-hull { margin-top: 2px; }
.pf-roster .rt-hull .dp-hull-lab { display: none; }
.pf-roster .rt-hull .dp-hull { margin-top: 0; gap: 2px; }
.pf-roster .dp-box { width: 8px; height: 8px; }
.rt-wsp { color: #666; font-size: 7pt; }
.rt-load { color: #1b3a5c; font-size: 7.5pt; }
.rt-none { color: #999; font-style: italic; }
.roster-table tr.rt-first > td { border-top: 1px solid #c9c2b4; }
.pf-roster .dp-glossary { margin-top: 6px; }
.pf-inksaver .roster-table th, .pf-inksaver .rt-group td { background: #fff !important; }

.pf-inksaver .dp-thumb { filter: grayscale(1) contrast(1.05); }
.pf-inksaver .dp-sc-icon, .pf-inksaver .dp-arc { color: #000; }
.pf-inksaver .dp-sc-icon svg, .pf-inksaver .dp-arc svg { filter: grayscale(1); }
.pf-inksaver .dp-statcell { background: #fff !important; }
.pf-comfortable .dp-sc-icon svg, .pf-comfortable .dp-arc svg { width: 13px; height: 13px; }

/* ── Big mode ────────────────────────────────────────────────────
   Art + stat grid in a compact top row, then weapons and rules flow full-width
   beneath, so each card's height matches its content (no empty side gap). */
.pf-big .dp-ship { border-left-width: 4px; padding: 6px 10px; }
.pf-big .dp-big-top {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 5px;
}
.pf-big .dp-big-art-wrap { flex: 0 0 200px; }
.pf-big .dp-big-art {
  width: 100%; max-height: 124px; object-fit: contain;
  border: 1px solid #ccc; border-radius: 3px; background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pf-big .dp-big-stats { flex: 1 1 auto; min-width: 0; }
.pf-big .dp-big-stats .dp-statgrid { margin: 0; }
.pf-big .dp-big-below { margin-top: 7px; }
.pf-big .dp-big-below .dp-weapons { margin: 0; }
.pf-big .dp-big-below > .dp-rules:first-child,
.pf-big .dp-big-below > .dp-loads:first-child,
.pf-big .dp-big-below > .dp-systems:first-child { margin-top: 0; }
.pf-big .dp-hull { margin-top: 6px; border-top: 1px dotted #ccc; padding-top: 4px; }
.pf-big .dp-zone-empty { font-size: 8pt; color: #999; font-style: italic; }
/* On very narrow paper / preview overflow, stack art above the stats. */
@media (max-width: 560px) { .pf-big .dp-big-top { flex-direction: column; } .pf-big .dp-big-art-wrap { flex-basis: auto; max-width: 220px; } }

/* ── Fleet Overview (no group selected) ──────────────────────── */
.fleet-overview {
  max-width: 720px;
  margin: 0 auto;
}
.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-lg);
  border-bottom: 2px solid var(--navy);
}
.overview-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.overview-faction-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.8;
}
.overview-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
  line-height: 1.2;
}
.overview-subtitle {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
.overview-header-right {
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
}
.overview-legal-check { display: inline-flex; align-items: center; color: #2f7a3a; }
.overview-legal-check.is-illegal { color: var(--error, #c43c2f); }
.overview-pts-big {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
  line-height: 1;
}
.overview-pts-cap {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
/* Editable points limit — looks like text until focused, so "/ 1500 pts" can be
   overridden to any custom cap (e.g. a 1500-pt game in the Clash bracket). */
.overview-pts-cap-input {
  width: 4.5ch;
  font: inherit;
  color: var(--navy);
  font-weight: var(--weight-semibold);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--stroke);
  padding: 0 1px;
  text-align: center;
  -moz-appearance: textfield;
}
.overview-pts-cap-input::-webkit-outer-spin-button,
.overview-pts-cap-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.overview-pts-cap-input:focus { outline: none; border-bottom-color: var(--navy); background: var(--paper-alt); }
.overview-pts-reset {
  background: none; border: none; cursor: pointer; color: var(--ink-faint);
  font-size: var(--text-sm); padding: 0 2px; line-height: 1;
}
.overview-pts-reset:hover { color: var(--navy); }
/* Visible validation panel — errors were too easy to miss in the legal-mark tooltip. */
.overview-alerts {
  margin: var(--sp-sm) 0;
  border-radius: var(--radius-sm);
  padding: var(--sp-xs) var(--sp-sm);
  border-left: 3px solid var(--stroke);
}
.overview-alerts.has-errors { border-left-color: #c43c2f; background: rgba(196,60,47,0.06); }
.overview-alerts.has-warns { border-left-color: var(--gold-dark); background: rgba(180,140,30,0.06); }
.overview-alerts-head { font-weight: var(--weight-bold); font-size: var(--text-xs); margin-bottom: 2px; }
.overview-alerts-list { margin: 0; padding-left: 15px; font-size: var(--text-xs); line-height: 1.3; }
.overview-alerts-list .oa-error { color: #c43c2f; }
.overview-alerts-list .oa-warn { color: var(--ink-muted); }
/* Alerts now sit on the navy rail — give them an opaque light card so the
   paper-tuned red/amber text keeps its contrast (rail default text is white). */
.builder-sidebar #sidebar-alerts .overview-alerts { margin: 0; }
.builder-sidebar #sidebar-alerts .overview-alerts.has-errors { background: #fbecea; }
.builder-sidebar #sidebar-alerts .overview-alerts.has-warns { background: #fbf4e2; }
.builder-sidebar #sidebar-alerts .overview-alerts-head { color: var(--ink); }
.overview-section {
  margin-bottom: var(--sp-xl);
}
.overview-section-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-bottom: var(--sp-md);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--stroke-light);
}
.overview-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
/* Primary action: Add Group floats as a pinned footer at the bottom of the
   overview (middle) panel — always reachable while the group list scrolls. */
/* Battle Groups section header: label left, Add Group action right. Anchored
   at the top of the list so it never scrolls off and never floats over content
   (the old sticky bottom bar was persistently in the way). */
.overview-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.overview-section-head .overview-section-label { margin-bottom: 0; }
.overview-section-note { font-size: var(--text-xs); color: var(--ink-muted); font-weight: var(--weight-semibold); }

/* Secondary Objectives picker (choose 2) */
.secondary-list { display: flex; flex-direction: column; gap: var(--sp-sm); }
.secondary-item {
  display: flex;
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.secondary-item:hover { border-color: var(--stroke-strong); }
.secondary-item.selected { border-color: var(--gold); background: var(--gold-subtle); }
.secondary-item.locked { opacity: 0.5; cursor: default; }
.secondary-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--stroke-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: #fff;
  margin-top: 1px;
}
.secondary-item.selected .secondary-check { background: var(--gold); border-color: var(--gold); }
.secondary-name { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--gold-dark); margin-bottom: 2px; }
.secondary-desc { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.5; }
.overview-add-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: #fff;
  background: var(--navy);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.overview-add-group-btn:hover { background: var(--navy-deep, #142d47); }
.overview-add-group-btn:active { transform: scale(0.97); }

/* Empty state when a fleet has no groups yet */
.overview-groups-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xl) var(--sp-md);
  text-align: center;
  color: var(--ink-muted);
  background: var(--paper-alt);
  border: 1px dashed var(--stroke-light);
  border-radius: var(--radius-lg, 10px);
}
.overview-groups-empty p { margin: 0; font-size: var(--text-sm); }
/* Tonnage category section dividers in overview */
.overview-cat-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-xs) 0;
  margin-top: var(--sp-sm);
  border-bottom: 1px solid var(--stroke-light);
}
.overview-cat-divider:first-child { margin-top: 0; }
.overview-cat-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--cat-color, var(--ink-muted));
}
.overview-cat-count {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

.overview-group-card {
  padding: var(--sp-md) var(--sp-lg);
  border-left: 3px solid var(--navy);
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.overview-group-card:hover {
  background: var(--navy-wash);
  box-shadow: var(--shadow-md);
  transform: translateX(2px);
}
/* The group you're currently customizing — clearly marked in the roster. */
.overview-group-card.overview-group-active {
  background: var(--navy-subtle);
  box-shadow: inset 3px 0 0 0 var(--navy), 0 0 0 1px var(--navy-subtle), var(--shadow-md);
  border-left-width: 5px;
}
.overview-group-card.overview-group-active::after {
  content: 'Editing';
  float: right;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--navy);
  border-radius: 999px;
  padding: 1px 8px;
}
.overview-group-top {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.overview-group-art {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  overflow: visible;
  background: transparent;
}
.overview-group-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.overview-group-info {
  flex: 1;
  min-width: 0;
}
.overview-group-name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--navy);
  line-height: 1.3;
}
.overview-group-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: 2px;
}
.overview-group-ships {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.overview-group-pts {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--navy);
  flex-shrink: 0;
}

/* Right column of a group card: points above, inline qty stepper below.
   The stepper lets you set "×N of this ship" without opening the detail panel. */
.overview-group-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-xs);
  flex-shrink: 0;
}
/* Duplicate + close on one row at the top of the card, bigger, light up on hover
   (orange = duplicate, red = close). */
.overview-group-actions {
  order: -1;
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: 2px;
}
.overview-group-remove,
.overview-group-copy {
  background: none;
  border: none;
  padding: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  line-height: 0;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.overview-group-copy:hover { color: #e07b1a; background: rgba(224, 123, 26, 0.12); }
.overview-group-remove:hover { color: #c43c2f; background: rgba(196, 60, 47, 0.12); }
.overview-group-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: default;
}
.ovg-step {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 110ms ease, color 110ms ease, border-color 110ms ease;
}
.ovg-step:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Press feedback: gentle scale-down + fill on press, spring-back on release. */
.ovg-step:active:not(:disabled) { transform: scale(0.92); background: var(--navy); color: #fff; border-color: var(--navy); }
.ovg-step:disabled { opacity: 0.35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .ovg-step { transition: background-color 110ms ease, color 110ms ease, border-color 110ms ease; }
  .ovg-step:active:not(:disabled) { transform: none; }
}
/* At the minimum, − removes the whole group — hint with a danger tint. */
.ovg-step-remove { color: var(--danger, #c43c2f); border-color: rgba(196, 60, 47, 0.4); }
.ovg-step-remove:hover { background: var(--danger, #c43c2f) !important; color: #fff !important; border-color: var(--danger, #c43c2f) !important; }
.ovg-step-remove:active:not(:disabled) { background: var(--danger, #c43c2f) !important; border-color: var(--danger, #c43c2f) !important; }
.ovg-qty {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-md);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.overview-group-error {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--error);
  text-transform: none;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.overview-admiral {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--sp-sm) 0;
  border-bottom: 1px dotted var(--stroke-light);
}
.overview-admiral:last-child { border-bottom: none; }
.overview-admiral-name {
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.overview-admiral-abilities {
  flex-basis: 100%;
  margin-top: var(--sp-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.overview-ability-chip {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gold-dark);
  background: var(--gold-subtle);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
}
.overview-validation {
  margin-bottom: var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--paper-alt);
}
.overview-valid-item {
  font-size: var(--text-sm);
  padding: var(--sp-xs) 0;
  border-bottom: 1px dotted var(--stroke-light);
}
.overview-valid-item:last-child { border-bottom: none; }
.overview-valid-error {
  color: var(--error);
  font-weight: var(--weight-semibold);
}
.overview-valid-warn {
  color: var(--ink-soft);
}


.overview-desc {
  margin-bottom: var(--sp-lg);
}
/* Floating label: the "Add fleet notes" label sits inside the empty field and
   floats above the border once the field is focused or filled. */
.overview-desc.float-field { position: relative; }
.overview-desc .float-label {
  position: absolute;
  left: var(--sp-md);
  top: var(--sp-sm);
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-faint);
  pointer-events: none;
  background: var(--paper-warm);
  padding: 0 4px;
  transform-origin: left top;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.overview-desc-input:focus + .float-label,
.overview-desc-input:not(:placeholder-shown) + .float-label {
  transform: translateY(-17px) scale(0.82);
  color: var(--navy);
  font-style: normal;
}
.overview-desc-input {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--stroke-light);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.overview-desc-input:focus {
  outline: none;
  border-color: var(--navy);
  border-style: solid;
  background: var(--paper);
  color: var(--ink);
}
.overview-desc-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}

/* ── 27. Ship Detail Modal ───────────────────────────────────── */
.detail-hero {
  display: flex;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-md);
  align-items: stretch;
}
.detail-hero-image {
  position: relative;
  /* Ships are wide sculpts, so the art gets most of the hero width; the facts +
     stat grid fill the column beside it (no more empty space there). */
  width: 58%;
  min-width: 320px;
  height: 264px;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  border: 1px solid var(--stroke-light);
  overflow: hidden;
  flex-shrink: 0;
}
.detail-hero-image img {
  width: 100%;
  height: 100%;
  /* Ships are wide — show the whole sculpt rather than cropping it to a square. */
  object-fit: contain;
}
/* Facts (tonnage/cost/badges) at the top, stat grid filling the middle, and the
   Add button pinned to the bottom so it lines up with the foot of the art. */
.detail-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.detail-hero-info .stat-grid { max-width: 100%; }
.detail-hero-info .detail-add-btn { margin-top: auto; }
/* Hero art carousel: prev/next arrows (hover) + label & dots over the image. */
.hero-art-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 24px; height: 34px; border: none; cursor: pointer; padding: 0;
  background: rgba(15, 38, 64, 0.55); color: #fff; font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.12s; z-index: 2;
}
.detail-hero-image.has-alts:hover .hero-art-arrow,
.ship-card-image.has-alts:hover .hero-art-arrow { opacity: 1; }
.hero-art-prev { left: 0; border-radius: 0 4px 4px 0; }
.hero-art-next { right: 0; border-radius: 4px 0 0 4px; }
.hero-art-arrow:hover { background: rgba(15, 38, 64, 0.85); }
.hero-art-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 8px 6px 3px; background: linear-gradient(transparent, rgba(15, 38, 64, 0.72));
}
.hero-art-label { color: #fff; font-size: 12px; font-family: var(--font-condensed); font-weight: var(--weight-semibold); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-art-dots { display: flex; gap: 3px; flex-shrink: 0; }
.hero-art-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.hero-art-dot.active { background: #fff; }
.detail-hero-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.detail-hero-cost {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--navy);
}

.detail-section-label {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
  padding-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--stroke-light);
}

.detail-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.detail-rule-entry {
  font-size: var(--text-sm);
  line-height: 1.5;
}
.detail-rule-name {
  font-weight: var(--weight-bold);
  color: var(--navy);
}
.detail-rule-page {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-style: italic;
}
.detail-rule-desc {
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: 2px;
}
/* Famous-admiral ability cost (e.g. "2AP") + the "choose N from the table" note. */
.detail-ability-cost {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--gold-dark);
  letter-spacing: 0.03em;
}
.detail-ability-picks {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-style: italic;
  margin-top: var(--sp-xs);
}

.detail-loadout-group {
  margin-bottom: var(--sp-md);
}
.detail-loadout-title {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  margin-bottom: var(--sp-xs);
}
.detail-loadout-option {
  padding: var(--sp-sm) var(--sp-md);
  border-left: 2px solid var(--stroke);
  margin-bottom: var(--sp-sm);
}
.detail-loadout-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.detail-lore {
  margin-top: var(--sp-lg);
}

/* Ship name clickable in builder */
.ship-card-name-link {
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.ship-card-name-link:hover {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Fleet card faction icon */
.fleet-card-faction-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Game size popover with visual bars */
.game-size-popover .game-size-visual {
  flex-shrink: 0;
}
.game-size-popover-item.active .gs-block { border-color: rgba(255, 255, 255, 0.5); }
.game-size-popover-item.active .gs-block.filled { background: #fff; border-color: #fff; }

/* ── 28. Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .builder-sidebar { width: 220px; }
  .builder-overview { padding: var(--sp-xl); }
  .ship-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width: 768px) {
  .topbar { padding: 0 var(--sp-lg); }
  .topbar-context { display: none; }
  .topbar-brand { font-size: var(--text-sm); }
  .topbar-action-label { display: none; }
  .topbar-action-btn { padding: var(--sp-xs); }

  .landing { padding: var(--sp-2xl) var(--sp-lg); }
  .landing-grid { grid-template-columns: 1fr; }
  .landing-logo { max-width: 280px; }
  .faction-showcase { grid-template-columns: repeat(3, 1fr); }
  .faction-chip-heroes { height: 60px; }
  .faction-chip-heroes img { height: 50px; margin: 0 -6px; }
  .objectives-grid { grid-template-columns: 1fr; }

  .fleet-list { padding: var(--sp-2xl) var(--sp-lg); }
  .fleet-grid { grid-template-columns: 1fr; }
  .fleet-list-header { flex-direction: column; align-items: stretch; }
  .fleet-list-header .btn { width: 100%; justify-content: center; }
  .fleet-sort-bar { flex-wrap: wrap; }

  /* Fleet overview mobile */
  .overview-header { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
  .overview-header-right { text-align: left; display: flex; align-items: baseline; gap: var(--sp-sm); }
  .overview-pts-big { font-size: var(--text-2xl); }
  .overview-group-top { flex-wrap: wrap; }
  .overview-group-pts { margin-left: auto; }

  /* Sidebar becomes bottom sheet */
  .builder-layout { flex-direction: column; }
  .builder-sidebar {
    width: 100%;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    height: auto;
    max-height: 60vh;
    z-index: var(--z-sheet);
    border-top: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-sheet);
    transform: translateY(calc(100% - 48px));
    transition: transform var(--duration-slow) var(--ease-out);
    overflow: hidden;
  }
  .builder-sidebar.expanded {
    transform: translateY(0);
    overflow-y: auto;
  }
  /* The collapsed sidebar sits as a fixed 48px bottom peek here — give the
     footer room so the peek floats above it instead of covering it. */
  .game-info-footer { padding-bottom: calc(48px + var(--sp-lg) + env(safe-area-inset-bottom, 0px)); }

  /* Picker/reference tension: while the ship picker is open, float the collapsed
     fleet-summary sheet above it so running points & composition stay glanceable
     (tap to expand over the picker). The picker body gains bottom room for it. */
  body.picker-open .builder-sidebar { z-index: var(--z-sheet-float); }
  body.picker-open #modal-ship-select .modal-body { padding-bottom: 88px; }

  .sidebar-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--sp-sm) 0 var(--sp-xs);
    cursor: grab;
    touch-action: none;            /* let the JS own vertical drag */
    -webkit-user-select: none;
    user-select: none;
  }
  .sidebar-handle:active { cursor: grabbing; }
  .sidebar-handle-bar {
    width: 44px;
    height: 5px;
    background: rgba(255,255,255,0.45);
    border-radius: 3px;
  }
  .sidebar-handle-summary {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 var(--sp-lg);
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.55);
    font-family: var(--font-condensed);
    font-weight: var(--weight-semibold);
    text-transform: none;
    letter-spacing: 0.04em;
  }

  .builder-overview {
    padding: var(--sp-lg);
    padding-bottom: 64px;
  }

  .ship-grid { grid-template-columns: 1fr; }
  .modal-panel { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .modal-overlay { padding: 0; }
  .group-header-bar { flex-direction: column; align-items: stretch; }
  .detail-hero { flex-direction: column; }
  .detail-hero-image { width: 100%; height: 200px; }

  /* Touch-friendly targets */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .category-tab { min-height: 40px; padding: var(--sp-sm) var(--sp-md); font-size: var(--text-xs); }
  .group-nav-item { min-height: 44px; }
  .filter-chip { min-height: 36px; padding: var(--sp-xs) var(--sp-md); }
  .settings-toggle { padding: var(--sp-lg) 0; }

  /* Ship entries */
  .group-ship-entry { padding: var(--sp-lg); }
  .group-ship-remove { width: 36px; height: 36px; font-size: 16px; }

  /* Weapon table horizontal scroll at mid-widths */
  .weapon-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .weapon-row { min-width: 400px; }

  /* Category tabs: horizontal scroll instead of wrap */
  .ship-category-tabs { flex-wrap: nowrap; }

  /* Quantity bar */
  .group-qty-btn { width: 36px; height: 36px; }
}

@media (min-width: 640px) {
  .sidebar-handle { display: none; }
  .mobile-only { display: none !important; }
}

/* (Detail ship-card stacking is handled by the container query on .builder-detail.) */

@media (max-width: 639px) {
  .desktop-only { display: none !important; }
  /* Float the Add Group button above the collapsed fleet-summary sheet peek. */

  /* Master→detail on phones: selecting a group shows the detail as a full-screen
     view over the overview (not appended off-screen below it). Back button returns. */
  .builder-detail:not(.hidden) {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: var(--z-overlay);
    height: auto;
    max-height: none;
    overflow-y: auto;
    border-left: none;
    padding: var(--sp-md);
    padding-bottom: 88px;
  }
  .detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0 var(--sp-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--navy);
    cursor: pointer;
  }
}

/* Tablets (Fluent "large" ≥640px, incl. iPad portrait at 768) get the full
   three-panel builder layout — sidebar + overview + detail — rather than the
   phone bottom sheet. */
@media (min-width: 640px) and (max-width: 768px) {
  .builder-layout { flex-direction: row; }
  .builder-sidebar {
    width: 178px;
    position: sticky; top: var(--topbar-h); left: auto; right: auto; bottom: auto;
    height: calc(100vh - var(--topbar-h)); max-height: none;
    transform: none; border-radius: 0; border-top: none; box-shadow: none;
    overflow-y: auto; z-index: auto;
    padding: var(--sp-md);
  }
  body.picker-open .builder-sidebar { z-index: auto; }
  .builder-overview {
    flex: 1.05;
    position: sticky; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h)); max-width: none;
    padding: var(--sp-md); padding-bottom: var(--sp-md);
  }
  .builder-detail {
    flex: 1.1;
    position: sticky; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    padding: var(--sp-md); border-left: 1px solid var(--stroke-light);
  }
  .overview-group-pts { font-size: var(--text-md); }
  .overview-group-art { width: 44px; height: 44px; }
  /* The detail panel is narrow at this width — stack the ship card (art on top,
     full-width content below) so the name/points/stats aren't squeezed. */
  .builder-detail .group-ship-entry { flex-direction: column; }
  .builder-detail .ship-card-image { width: 100%; height: 120px; }
}

@media (max-width: 480px) {
  .landing-title { font-size: var(--text-2xl); }
  .landing-subtitle { font-size: var(--text-sm); }
  .faction-showcase { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .faction-chip-heroes { height: 50px; padding: 2px 2px 0; }
  .faction-chip-heroes img { height: 42px; margin: 0 -4px; }
  .faction-chip-info { padding: var(--sp-xs) 2px; }
  .faction-chip-icon { width: 18px; height: 18px; }
  .faction-chip-name { font-size: var(--text-xs); }

  /* Sort bar compact */
  .fleet-sort-btn { padding: var(--sp-xs) var(--sp-sm); font-size: 12px; }
  .fleet-sort-label { font-size: 12px; }

  /* Overview compact */
  .overview-faction-icon { width: 28px; height: 28px; }
  .overview-title { font-size: var(--text-lg); }
  .overview-group-art { width: 52px; height: 52px; }
  .overview-group-name { font-size: var(--text-sm); }
  .overview-group-pts { font-size: var(--text-md); }

  /* Stats stay a vertical stack on narrow widths too. */
  .stat-cell-value { font-size: 17px; }

  .ship-card-top { flex-direction: column; }
  .ship-card-image { width: 100%; height: 120px; border-radius: var(--radius-md); }
  .ship-card-image img { object-position: center; }

  /* Weapon rows stack on small screens */
  .weapon-list { overflow-x: visible; }
  .weapon-row { grid-template-columns: 1fr 32px 28px 28px 36px; min-width: 0; }
  .weapon-col-special { grid-column: 1 / -1; padding-left: 0; margin-top: 2px; }

  .load-row { flex-direction: column; align-items: flex-start; }
  .loadout-selector { flex-direction: column; align-items: flex-start; }
  .launch-ref-row { flex-wrap: wrap; }
  .launch-ref-col-name { flex-basis: 100%; }
  .launch-ref-col-special { flex-basis: 100%; padding-left: 0; }

  /* Tighter spacing */
  .builder-overview { max-width: none; height: auto; position: static; padding: var(--sp-md); padding-bottom: 64px; }
  .builder-detail { height: auto; position: static; padding: var(--sp-md); padding-bottom: 64px; border-left: none; border-top: 1px solid var(--stroke-light); }
  .group-ship-entry { padding: var(--sp-md); }
  .group-header-bar h2 { font-size: var(--text-xl); }
  .fleet-card-header { padding: var(--sp-xs) var(--sp-md); }
  .fleet-card-name { font-size: var(--text-md); padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .fleet-card-points-row { padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .fleet-card-bar { margin-left: var(--sp-md); margin-right: var(--sp-md); }
  .fleet-card-comp { padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .fleet-card-actions { padding-left: var(--sp-md); padding-right: var(--sp-md); }
  .fleet-card-points { font-size: var(--text-xl); }

  /* Ship cost repositioned for stacked layout */
  .ship-card-cost { font-size: var(--text-md); }
}

@media (max-width: 360px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 2px; }
  .stat-cell { padding: 2px; }
  .stat-cell-label { font-size: 7px; }
  .stat-cell-value { font-size: var(--text-xs); }
  .category-tab { padding: var(--sp-xs) var(--sp-sm); font-size: 12px; }
  .topbar-brand { font-size: var(--text-xs); }
  .topbar-logo { height: 18px; }
}

/* Keyboard shortcut key */
.kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px 8px;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-align: center;
  color: var(--navy);
  background: var(--paper-alt);
  border: 1px solid var(--stroke);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ── 28. Tooltip ─────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  z-index: 100;
  box-shadow: var(--shadow-md);
}
[data-tooltip]:hover::after { opacity: 1; }
/* The picker switches sit flush against the right edge of the filter row, so a
   centred tooltip overflows and gets clipped. Anchor it to the switch's right edge
   (extending left, into the panel) and let long copy wrap instead of running off. */
.picker-switch[data-tooltip]::after {
  left: auto; right: 0; transform: none;
  white-space: normal; width: max-content; max-width: min(260px, 70vw);
}

/* Disable tooltips on touch — they require hover */
@media (hover: none) {
  [data-tooltip]::after { display: none; }
}

/* ── 29. Touch & Active States ──────────────────────────────── */
@media (hover: none) {
  .fleet-card:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }
  .group-ship-entry:active { background: var(--paper-alt); }
  .group-nav-item:active { background: rgba(255,255,255,0.15); }
  .btn:active { transform: scale(0.97); }
  .category-tab:active { transform: scale(0.96); }
  .ship-card:active { transform: scale(0.98); }
}

/* ── Site footer (uniform across WarLore builders, themed to DFC) ── */
.game-info-footer {
  border-top: 1px solid var(--stroke);
  background: var(--paper-alt);
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
/* On the builder the three sticky panels already fill 100vh - topbar. Pin the
   footer to the very bottom of the viewport so it's always visible without any
   page scroll. Panels are shortened by --footer-h (see above) so they don't
   slide behind it. */
body[data-view="builder"] .game-info-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-topbar);
}
.gif-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  max-width: 1200px;
  margin: 0 auto;
}
.gif-title { font-weight: var(--weight-bold); color: var(--ink-soft); font-family: var(--font-display); }
.gif-sep { color: var(--ink-faint); }
.game-info-footer a { color: var(--navy); text-decoration: none; }
.game-info-footer a:hover { text-decoration: underline; }
/* The WarLore wordmark keeps its gold-on-black brand even inside the footer
   (the generic footer-link colour above would otherwise force it to navy). */
.game-info-footer a.warlore-mark { color: #FFCC00; }
.game-info-footer a.warlore-mark:hover { color: #000; background: #FFCC00; text-decoration: none; }
.gif-builder { margin-left: auto; }
.gif-builder a {
  font-family: var(--font-wordmark), var(--font-condensed);
  font-size: var(--text-md);
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .gif-inner { justify-content: center; gap: 4px var(--sp-sm); }
  .gif-builder { margin-left: 0; flex-basis: 100%; text-align: center; margin-top: var(--sp-xs); }
}

/* ===========================================================================
   Combat Calculator (js/calc-ui.js) — standalone tool + builder pane.
   Light Art Deco theme, no external chart library.
   =========================================================================== */

/* Weapon calculator affordance (builder main pane): the DAMAGE cell is the
   click target that sends the weapon to the Combat Calculator pane. */
.weapon-col-dmg--calc {
  cursor: pointer; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 4px; margin: -1px 0; border: 1px solid var(--gold-line);
  background: var(--navy-subtle); color: var(--navy);
  transition: color .12s, background .12s, border-color .12s;
}
.weapon-col-dmg--calc:hover { color: #fff; background: var(--navy); border-color: var(--navy); }
.weapon-col-dmg--calc:hover .dmg-type { color: #fff; }
.weapon-col-dmg--calc:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Builder far-right pane */
.builder-calc {
  width: 348px; flex-shrink: 0;
  background: var(--paper-warm);
  border-left: 1px solid var(--gold-line);
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  position: sticky; top: var(--topbar-h);
  overflow-y: auto;
}
.builder-calc.hidden { display: none; }
.builder-layout.calc-open .builder-detail { flex: 1; }
.calc-builder { position: relative; min-height: 100%; }
.calc-resize-handle { position: absolute; left: 0; top: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 5; transition: background .1s; }
.calc-resize-handle:hover, .calc-resize-handle:active { background: var(--gold-line); }
.calc-builder-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--gold-line);
  background: var(--navy-dark); color: #fff; position: sticky; top: 0; z-index: 2;
}
.calc-builder-title { font-family: var(--font-condensed); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--text-sm); }
.calc-builder-close { background: transparent; border: 0; color: rgba(255,255,255,.7); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
.calc-builder-close:hover { color: #fff; background: rgba(255,255,255,.12); }
.calc-builder-body { padding: var(--sp-sm) var(--sp-md) var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.calc-builder-body > section { display: flex; flex-direction: column; gap: 5px; }
.calc-builder-foot { border-top: 1px solid var(--stroke-light); padding-top: var(--sp-xs); text-align: center; }

/* Standalone view */
.calc-view { padding: var(--sp-md) var(--sp-lg) var(--sp-2xl); max-width: 1120px; margin: 0 auto; width: 100%; }
.calc-loading, .calc-empty { color: var(--ink-faint); font-size: var(--text-sm); padding: var(--sp-sm) 0; }
.calc-error { color: var(--warning); }
.calc-intro { text-align: center; margin-bottom: var(--sp-md); }
.calc-title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--navy-dark); margin: 0 0 1px; }
.calc-byline { color: var(--ink-muted); font-size: var(--text-xs); max-width: 560px; margin: 0 auto; }
.calc-byline a { color: var(--gold-dark); }
.calc-grid { display: flex; align-items: stretch; gap: 0; }
.calc-col { background: var(--paper); border: 1px solid var(--stroke-light); border-radius: var(--radius-md); padding: var(--sp-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-sm); }
.calc-col-target, .calc-col-weapons { min-width: 240px; }
.calc-col-results { flex: 1 1 0; min-width: 260px; }
.calc-vsplit { flex: 0 0 12px; align-self: stretch; cursor: col-resize; position: relative; }
.calc-vsplit::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--stroke-light); border-radius: 1px; transition: background .1s; }
.calc-vsplit:hover::before, .calc-vsplit:active::before { background: var(--gold); width: 3px; left: 4px; }

.calc-panel-title { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-xs); color: var(--gold-dark); font-weight: 600; display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: 1px; }
.calc-count { background: var(--navy-subtle); color: var(--navy); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }

/* Fields: label sits INLINE to the left of the control (saves a line each). */
.calc-field { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-muted); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .04em; }
.calc-field > span { flex: 0 0 auto; white-space: nowrap; }
.calc-field > .calc-select, .calc-field > .calc-num, .calc-field > .calc-combo { flex: 1 1 auto; min-width: 0; }
.calc-field-wide { width: 100%; }
.calc-select, .calc-num {
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink);
  background: var(--paper); border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  padding: 5px 8px; min-height: 34px; text-transform: none; letter-spacing: 0; width: 100%;
}
.calc-num { width: 64px; }
.calc-select:focus, .calc-num:focus { outline: 2px solid var(--gold-line); border-color: var(--gold); }
/* Type-to-search combobox (enemy ship + add-ship pickers) */
.calc-combo { position: relative; }
.calc-combo-input { width: 100%; }
.calc-combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 60;
  background: var(--paper); border: 1px solid var(--stroke); border-radius: var(--radius-sm);
  max-height: 260px; overflow-y: auto; box-shadow: var(--shadow-lg); display: none;
}
.calc-combo-list.open { display: block; }
.calc-combo-chips { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 3px; padding: 5px 6px; background: var(--paper); border-bottom: 1px solid var(--stroke-light); }
.calc-combo-chip { font-family: var(--font-condensed); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); background: var(--paper-alt); border: 1px solid var(--stroke-light); border-radius: var(--radius-sm); padding: 3px 7px; cursor: pointer; min-height: 24px; }
.calc-combo-chip:hover { color: var(--navy); border-color: var(--gold-line); }
.calc-combo-chip.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.calc-combo-item {
  display: flex; gap: 8px; align-items: baseline; padding: 6px 9px;
  font-size: var(--text-sm); color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0;
}
.calc-combo-item:hover, .calc-combo-item.active { background: var(--navy-subtle); }
.calc-combo-item.active { box-shadow: inset 2px 0 0 var(--gold); }
.calc-combo-group { position: sticky; top: 0; background: var(--paper-alt); color: var(--gold-dark); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; padding: 3px 9px; border-bottom: 1px solid var(--stroke-light); }
.calc-combo-custom { font-style: italic; color: var(--ink-muted); border-bottom: 1px solid var(--stroke-light); }
.calc-combo-fac { flex: 0 0 58px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-family: var(--font-condensed); }
.calc-combo-name { flex: 1; min-width: 0; }
.calc-combo-empty, .calc-combo-more { padding: 7px 9px; font-size: var(--text-xs); color: var(--ink-faint); }
.calc-field-note { font-style: italic; color: var(--ink-faint); text-transform: none; font-weight: 400; }
.calc-saves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.calc-saves-2 { grid-template-columns: repeat(2, 1fr); }
.calc-field-fr { grid-column: 1 / -1; }
.calc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-sm); margin-top: 2px; }
.calc-check, .calc-wtoggle { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer; padding: 3px 6px; border-radius: var(--radius-sm); min-height: 30px; transition: background .1s; }
.calc-check:hover, .calc-wtoggle:hover { background: var(--navy-subtle); }
.calc-check input, .calc-wtoggle input { accent-color: var(--navy); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.calc-mods summary { cursor: pointer; font-size: var(--text-xs); color: var(--gold-dark); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; padding: 4px 0; min-height: 26px; }

/* Weapons */
.calc-weapons-list { display: flex; flex-direction: column; gap: 5px; }
.calc-weapon { border: 1px solid var(--stroke-light); border-radius: var(--radius-md); padding: 6px 8px; background: var(--paper-warm); }
.calc-weapon-head { display: flex; align-items: center; gap: var(--sp-sm); }
.calc-weapon-name { flex: 1; font-family: var(--font-condensed); font-weight: 600; font-size: var(--text-sm); color: var(--navy-dark); background: transparent; border: 0; border-bottom: 1px dashed transparent; padding: 2px 0; }
.calc-weapon-name:hover { border-bottom-color: var(--stroke); }
.calc-weapon-name:focus { outline: none; border-bottom-color: var(--gold); }
.calc-weapon-del { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; background: transparent; border: 1px solid transparent; color: var(--ink-muted); cursor: pointer; padding: 0; border-radius: var(--radius-sm); }
.calc-weapon-del:hover { color: #c0392b; background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.25); }
.calc-weapon-stats { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.calc-field-sm { flex: 1 1 auto; min-width: 84px; }
.calc-field-sm .calc-select, .calc-field-sm .calc-num { width: 100%; }
.calc-weapon-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.calc-chip { font-size: 10.5px; font-family: var(--font-condensed); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); background: var(--navy-subtle); border: 1px solid var(--navy-subtle); border-radius: var(--radius-sm); padding: 1px 6px; }
.calc-weapon-toggles { display: flex; flex-wrap: wrap; gap: 2px var(--sp-sm); margin-top: 3px; }
.calc-weapon-add { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.calc-addship { font-family: var(--font-body); }

/* Results */
.calc-headline { text-align: center; padding: var(--sp-xs) 0; border-bottom: 1px solid var(--stroke-light); margin-bottom: var(--sp-sm); }
.calc-headline-num { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gold-dark); line-height: 1; }
.calc-headline-lbl { display: block; font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-condensed); margin-top: 1px; }
.calc-headline-sub { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 2px; }
.calc-chart-block { margin-top: var(--sp-sm); }
.calc-chart-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-family: var(--font-condensed); margin-bottom: 3px; display: flex; justify-content: space-between; }
.calc-chart-hint { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.calc-chart { width: 100%; height: 74px; display: block; overflow: visible; }
.calc-bar rect { fill: var(--navy); transition: fill .1s; }
.calc-bar:hover rect { fill: var(--gold); }
.calc-bar-x { font-size: 5px; fill: var(--ink-faint); font-family: var(--font-condensed); }
.calc-cum-area { fill: var(--gold-subtle); stroke: none; }
.calc-cum-line { fill: none; stroke: var(--gold-dark); stroke-width: 1.2; }
.calc-dot circle { fill: var(--gold-dark); }
.calc-dot:hover circle { fill: var(--navy); }
.calc-rowavgs { margin-top: var(--sp-sm); border-top: 1px solid var(--stroke-light); padding-top: var(--sp-xs); }
.calc-rowavgs-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-family: var(--font-condensed); margin-bottom: 1px; }
.calc-rowavg { display: flex; align-items: baseline; gap: var(--sp-sm); font-size: var(--text-sm); padding: 1px 0; }
.calc-rowavg-name { flex: 1; color: var(--ink-soft); }
.calc-rowavg-val { font-family: var(--font-display); color: var(--navy-dark); }
.calc-row-crip { font-size: 11px; color: var(--warning); }
.calc-share { margin-top: var(--sp-sm); }

@media (max-width: 880px) {
  .calc-grid { flex-direction: column; align-items: stretch; }
  .calc-vsplit { display: none; }
  .calc-col-target, .calc-col-weapons { flex: 1 1 auto !important; min-width: 0; }
  .calc-col-results { position: static; }
}

/* ── Combat Calculator faithful control set (full weapon controls) ───────── */
.calc-saves-3 { grid-template-columns: repeat(3, 1fr) !important; }
.calc-check-inline { justify-content: center; }
.calc-preset-tag, .calc-disabled { opacity: .85; }
.calc-disabled { opacity: .45; }
.calc-preset-tag { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--navy); background: var(--navy-subtle); border-radius: var(--radius-sm); padding: 0 6px; font-weight: 600; }
.calc-weapon-active { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--navy); cursor: pointer; }
.calc-weapon-preset { flex: 1; min-width: 0; }
.calc-weapon-off { opacity: .55; }
.calc-weapon-id { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.calc-weapon-name-lbl { font-family: var(--font-condensed); font-weight: 600; font-size: var(--text-sm); color: var(--navy-dark); }
.calc-weapon-arc { font-family: var(--font-condensed); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-dark); background: var(--gold-subtle); border: 1px solid var(--gold-line); border-radius: var(--radius-sm); padding: 0 5px; }
.calc-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 5px; }
.calc-rule { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; min-height: 26px; }
.calc-rule > span { flex: 1; }
.calc-rule input[type=checkbox] { accent-color: var(--navy); width: 15px; height: 15px; flex-shrink: 0; }
.calc-rule-num { width: 38px; flex-shrink: 0; font-size: var(--text-sm); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 3px 4px; }
.calc-rule-num:disabled { opacity: .4; }
.calc-flags { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; }
.calc-flag { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; min-height: 24px; }
.calc-flag input { accent-color: var(--navy); width: 15px; height: 15px; flex-shrink: 0; }
.calc-cal-group { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--ink-faint); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .03em; }
.calc-cal { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.calc-cal input { accent-color: var(--navy); width: 14px; height: 14px; }
.calc-wsit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--stroke-light); }
.calc-configcode { margin-top: var(--sp-sm); border-top: 1px solid var(--stroke-light); padding-top: var(--sp-sm); }
.calc-configcode .calc-select { font-family: var(--font-mono); font-size: 12px; }
.calc-code-btns { display: flex; gap: 6px; margin-top: 5px; }

/* ── Calc: segmented calibre, grouped situation, hints, compact builder card ── */
.calc-seg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-faint); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .03em; }
.calc-seg-btn { font-family: var(--font-condensed); font-size: 12px; font-weight: 600; min-width: 22px; min-height: 24px; padding: 2px 6px; border: 1px solid var(--stroke); background: var(--paper); color: var(--ink-muted); cursor: pointer; }
.calc-seg-btn + .calc-seg-btn { border-left: 0; }
.calc-seg-btn:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.calc-seg-btn:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.calc-seg-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.calc-seg-btn:disabled { opacity: .45; cursor: default; }
.calc-modgroup { margin-top: var(--sp-xs); }
.calc-modgroup-head { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; font-size: 10px; color: var(--gold-dark); margin-bottom: 1px; border-bottom: 1px solid var(--stroke-light); }
.calc-preset-hint { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.calc-linkbtn { background: none; border: 0; padding: 0; color: var(--gold-dark); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
.calc-weapon-compact .calc-weapon-head { gap: 6px; }
.calc-weapon-compact .calc-weapon-name-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-compact-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: var(--text-xs); color: var(--ink-muted); font-family: var(--font-condensed); }
.calc-compact-stats b { color: var(--navy-dark); font-weight: 700; }

/* Admiral card: flagship stat line + weapons */
.admiral-ship-block { margin-top: var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px dashed var(--stroke-light); }
.admiral-ship-name { font-family: var(--font-condensed); font-weight: 600; font-size: var(--text-sm); color: var(--navy-dark); margin-bottom: 3px; }
.admiral-ship-name .ton-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); border: 1px solid var(--stroke-light); border-radius: var(--radius-sm); padding: 0 5px; margin-left: 4px; }