/* ═══════════════════════════════════════════════════════════
   DFC Mobile — Fluent 2 Foundation + DFC Personality
   ═══════════════════════════════════════════════════════════ */

/* Terminal Grotesque Open — Velvetyne / Studio Triple (OFL). WarLore wordmark. */
@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. Design Tokens ──────────────────────────────────── */
:root {
  --font-wordmark: "Terminal Grotesque Open", "Roboto Slab", serif;
  /* — Fluent 2 Spacing (4px grid) — */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-s-nudge: 6px;
  --sp-s: 8px;
  --sp-m-nudge: 10px;
  --sp-m: 12px;
  --sp-l: 16px;
  --sp-xl: 20px;
  --sp-xxl: 24px;
  --sp-xxxl: 32px;

  /* — Fluent 2 Type Ramp — */
  --text-caption2: 12px;
  --text-caption1: 13px;
  --text-body1: 14px;
  --text-subtitle2: 16px;
  --text-subtitle1: 20px;
  --text-title3: 24px;
  --text-title2: 28px;

  --lh-caption2: 15px;
  --lh-caption1: 17px;
  --lh-body1: 20px;
  --lh-subtitle2: 22px;
  --lh-subtitle1: 26px;
  --lh-title3: 32px;

  /* — Fluent 2 Weights — */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* — DFC Palette — unified with the desktop app (the more accessible set:
     darker gold + text, lighter paper = higher contrast). — */
  --navy: #1b3a5c;
  --navy-dark: #0f2640;
  --gold: #b8932e;
  --gold-dim: #785e17;
  --ink: #1c1a17;
  --paper: #faf8f5;
  --paper-alt: #f3f1ec;
  --card-bg: #ffffff;
  --white: #ffffff;
  --danger: #c43c2f;
  --danger-bg: #fef6f4;

  /* — Neutral Foregrounds (Fluent-mapped to warm) — */
  --fg1: #1c1a17;       /* primary text (= desktop --ink) */
  --fg2: #3a3834;       /* secondary text */
  --fg3: #6b6660;       /* tertiary / captions */
  --fg4: #66615a;       /* disabled / hints — WCAG AA 5.4:1 on beige (was #7e7870 = 3.9:1, failed) */
  --fg-on-dark: #ffffff;
  --fg-on-dark-dim: rgba(255,255,255,0.6);

  /* — Strokes — */
  --stroke1: #d8d4cc;
  --stroke2: #e8e5df;
  --stroke3: #f3f1ec;

  /* — Fluent 2 Shapes — */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-pill: 10000px;

  /* — Fluent 2 Shadows — */
  --shadow2: 0 0 2px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.12);
  --shadow4: 0 0 2px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.12);
  --shadow8: 0 0 2px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.12);
  --shadow16: 0 0 2px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.12);
  --shadow28: 0 0 8px rgba(0,0,0,0.10), 0 14px 28px rgba(0,0,0,0.12);

  /* — Motion —
     The old curves were extremes: decelerate (0,0,0,1) snapped to the end then
     crawled; accelerate (1,0,1,1) hung then lurched away — both felt "off".
     These are the Material 3 emphasized/standard curves: a gentle glide in,
     a smooth fall-away out, and a balanced curve for taps. */
  --duration-fast: 140ms;     /* taps / state changes — snappy */
  --duration-normal: 200ms;   /* fades */
  --duration-gentle: 240ms;   /* sheets / fills */
  --duration-slow: 200ms;     /* screen navigation, iOS-snappy (JS cleanup waits 220ms) */
  --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);   /* enter — eases to rest */
  --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);   /* exit — eases away */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);        /* taps / UI micro-motion */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* press → spring-back overshoot */

  /* — Fonts (DFC personality) — kept in lockstep with css/app.css :root — */
  --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;

  /* — Touch targets — */
  --tap-min: 44px;

  /* — Header height — */
  --header-h: 48px;
}


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

html {
  font-size: var(--text-body1);
  line-height: var(--lh-body1);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--paper);
  overflow-x: hidden;
  min-height: 100dvh;
}

img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }
/* iOS Safari zooms the viewport when a focused form control's text is under
   16px. Force every control to >=16px so focusing never triggers an auto-zoom.
   (This rule wins over the smaller per-field sizes that follow.) */
input, textarea, select { font-size: 16px; }
/* Kill the 300ms tap delay and double-tap zoom on interactive targets. */
button, a, input, select, textarea,
.btn, .counter-btn, .ovg-step, .list-row, .pill, .chip,
[onclick], [role="button"] { touch-action: manipulation; }


/* ── 3. App Bar (Dark header) ──────────────────────────── */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-h);
  padding: 0 var(--sp-l);
  background: var(--navy);
  color: var(--fg-on-dark);
}

.app-bar-back {
  position: absolute;
  left: var(--sp-m);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  color: var(--fg-on-dark);
  font-size: var(--text-body1);
  font-weight: var(--weight-medium);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
}
.app-bar-back svg { width: 16px; height: 16px; }

.app-bar-title {
  font-family: var(--font-condensed);
  font-size: var(--text-body1);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.06em;
}

.app-bar-menu {
  position: absolute;
  left: var(--sp-m);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-on-dark);
  font-size: var(--text-subtitle1);
}

.app-bar-overflow {
  position: absolute;
  right: var(--sp-m);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-on-dark);
  font-size: var(--text-subtitle2);
  letter-spacing: 2px;
}

/* Points in app bar */
.app-bar-pts {
  position: absolute;
  right: 52px;
  font-family: var(--font-condensed);
  font-size: var(--text-caption1);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.app-bar-pts.pts-over { color: #ff8a7a; }

/* Long-press ship datasheet (in the rule bottom sheet) + picker hint */
.filter-hint { font-size: var(--text-caption2); color: var(--fg3); opacity: 0.8; }
.ss-stats { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-bottom: var(--sp-s); }
.ss-stat { font-size: var(--text-caption1); color: var(--fg2, var(--fg3)); }
.ss-stat b { font-family: var(--font-display); color: var(--fg1); }
.ss-weapon { padding: var(--sp-xs) 0; border-top: 1px solid var(--stroke2, #eee); }
.ss-wname { font-weight: var(--weight-bold); color: var(--fg1); }
.ss-wline { font-size: var(--text-caption1); color: var(--fg3); margin: 2px 0; }
.ss-rules { margin-top: var(--sp-s); }

/* Floating Add Group button */
.fab {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  left: 16px;
  right: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-s);
  height: 52px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--fg-on-dark);
  border: none;
  box-shadow: var(--shadow16);
  font-family: var(--font-condensed);
  font-size: var(--text-body1);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.fab:active {
  transform: scale(0.96);
  box-shadow: var(--shadow8);
}


/* ── 4. Screens / Navigation + Slide Transitions ─────── */
.screen-container {
  position: relative;
  overflow-x: hidden;
}

.screen {
  display: none;
  min-height: calc(100dvh - var(--header-h));
  will-change: transform, opacity;
}
.screen.active { display: block; }

/* iOS-style slide animations */
.screen.slide-in-right {
  display: block;
  animation: slideInRight var(--duration-slow) var(--ease-decelerate) forwards;
}
.screen.slide-out-left {
  display: block;
  animation: slideOutLeft var(--duration-slow) var(--ease-accelerate) forwards;
}
.screen.slide-in-left {
  display: block;
  animation: slideInLeft var(--duration-slow) var(--ease-decelerate) forwards;
}
.screen.slide-out-right {
  display: block;
  animation: slideOutRight var(--duration-slow) var(--ease-accelerate) forwards;
}

/* Incoming screen carries most of the motion (slides + fades in fully);
   the outgoing one drifts a short way and fades — a layered push, not a
   whole-screen swap. Shorter travel + the new easing reads as a glide. */
@keyframes slideInRight {
  from { transform: translateX(22%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-8%); opacity: 0; }
}
@keyframes slideInLeft {
  from { transform: translateX(-22%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(8%); opacity: 0; }
}

/* Bottom-padded for fixed bottom button */
.screen-padded { padding-bottom: 72px; }


/* ── 5. Fixed Bottom Action ───────────────────────────── */
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-m) var(--sp-l);
  padding-bottom: max(var(--sp-m), env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--paper) 40%);
  z-index: 50;
}


/* ── 6. Buttons ────────────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-s);
  min-height: var(--tap-min);
  padding: var(--sp-s) var(--sp-l);
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: var(--text-body1);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.04em;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--navy);
  color: var(--fg-on-dark);
}
.btn-primary:active { background: var(--navy-dark); }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--stroke1);
  color: var(--fg2);
}
.btn-ghost:active { background: var(--paper-alt); }

.btn-block { width: 100%; }


/* ── 7. List Rows ──────────────────────────────────────── */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  padding: var(--sp-m) var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
  min-height: var(--tap-min);
  transition: background var(--duration-fast) var(--ease-standard);
}
.list-row:active { background: var(--paper); }

.list-row-content { flex: 1; min-width: 0; }

.list-row-title {
  font-size: var(--text-body1);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rank insignia (shared ../js/rank-insignia.js) */
/* Rank insignia only renders inside the centred .rank-thumb box now. */

.list-row-sub {
  font-size: var(--text-caption1);
  line-height: var(--lh-caption1);
  color: var(--fg3);
  margin-top: var(--sp-xxs);
}
/* Launch-capability icons on picker rows. */
.list-row-rules { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-xs); }
.ship-card-launch { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: var(--sp-xs); }
.launch-cap-lead {
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Launch capability as a WORDED chip (icon + label) instead of a bare glyph. */
.launch-type-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 1px 5px;
  border-radius: var(--radius-s, 6px);
  background: var(--navy-subtle, rgba(27,58,92,0.1)); color: var(--navy, #1b3a5c);
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.launch-type-chip svg { width: 12px; height: 12px; flex-shrink: 0; }

.list-row-pts {
  font-family: var(--font-condensed);
  font-size: var(--text-body1);
  font-weight: var(--weight-bold);
  color: var(--navy);
  flex-shrink: 0;
}


/* ── 8. Ship Art Thumbnail ─────────────────────────────── */
.ship-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  overflow: hidden;
  flex-shrink: 0;
}
.ship-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ship-thumb-lg {
  width: 52px;
  height: 52px;
}

/* Rank insignia filling the portrait slot (admirals with no portrait). The SVG
   is centred and fills most of the square. */
.rank-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
}
.rank-thumb svg {
  width: 100%;
  height: 100%;
}


/* ── 9. Section Headers ───────────────────────────────── */
.section-header {
  padding: var(--sp-m) var(--sp-l) var(--sp-s);
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--fg3);
}


/* ── 10. Points Badge (circle) ─────────────────────────── */
.pts-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--fg-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pts-badge-value {
  font-family: var(--font-condensed);
  font-size: var(--text-subtitle1);
  font-weight: 800;
  line-height: 1;
}
.pts-badge-label {
  font-family: var(--font-condensed);
  font-size: 7px;
  text-transform: none;
  letter-spacing: 0.08em;
  opacity: 0.7;
}


/* ── 11. Stat Grid (3-col) ─────────────────────────────── */
.stat-grid {
  /* 2-col: Scan|KS, Sig|ES, Thrust|BS, Hull(full). Each save its own cell. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: var(--sp-m) var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}
.stat-cell-wide { grid-column: 1 / -1; }
.stat-cell-wide .stat-value { font-size: 20px; }
.stat-cell-es { border-bottom: 2px solid #8b5e1a; }
.stat-cell-es .stat-value { color: #8b5e1a; }
.stat-cell-ks { border-bottom: 2px solid var(--navy); }
.stat-cell-ks .stat-value { color: var(--navy); }
.stat-cell-bs { border-bottom: 2px solid #8a5e10; }
.stat-cell-bs .stat-value { color: #8a5e10; }
.stat-cell-none .stat-value { color: var(--fg4); opacity: 0.5; }

/* 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. */
.stat-cell-modified {
  border-color: #2e7d32;
  background: rgba(46, 125, 50, 0.10);
  box-shadow: inset 3px 0 0 #2e7d32;
}
.stat-cell-modified .stat-value,
.stat-cell-modified .stat-label { color: #2e7d32; }

/* Stacked: hero number on top, abbreviation on its own line beneath. */
.stat-cell-text { display: flex; flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; line-height: 1.02; }

.stat-value {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg1);
}

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


/* ── 12. Weapon Table ──────────────────────────────────── */
.weapon-table {
  padding: var(--sp-m) var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}

.weapon-row {
  display: grid;
  grid-template-columns: 1fr 34px 34px 34px 44px;
  align-items: center;
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--stroke3);
  font-size: 15px;   /* weapons are key game info — bigger than the old 13px (print unaffected) */
}
/* Firing-arc cell: compact SVG sector over its short code, so it never clips. */
.weapon-arc .arc-ico {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
  color: var(--fg2);
}
.weapon-arc .arc-ico svg { display: block; }
.weapon-arc .arc-label {
  font-size: 12px;
  font-family: var(--font-condensed);
  font-weight: var(--weight-semibold);
  color: var(--fg3);
}
.weapon-row:last-child { border-bottom: none; }

/* Name-less option datasheet: the option's bold name already heads the card, so
   the picker drops the repeated name column (and the "Weapon" header). */
.weapon-table-noname .weapon-row { grid-template-columns: 34px 34px 34px 44px; }

.weapon-row-header {
  font-weight: var(--weight-semibold);
  color: var(--fg3);
  border-bottom: 2px solid var(--stroke1);
  padding-bottom: var(--sp-s);
}

.weapon-name {
  font-weight: var(--weight-semibold);
  color: var(--fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weapon-val {
  text-align: center;
  color: var(--fg2);
  font-family: var(--font-condensed);
  font-weight: var(--weight-semibold);
}

.weapon-special {
  grid-column: 1 / -1;
  padding-left: 0;
  margin-top: var(--sp-xxs);
  margin-bottom: var(--sp-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xxs);
}

.weapon-special-chip {
  display: inline-block;
  padding: 1px var(--sp-s-nudge);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption2);
  font-weight: var(--weight-medium);
  background: var(--paper-alt);
  color: var(--fg2);
  border: 1px solid var(--stroke2);
  white-space: nowrap;
}


/* ── 13. Chips / Toggles ──────────────────────────────── */
.chip-row {
  display: flex;
  gap: var(--sp-xs);
  padding: var(--sp-s) var(--sp-l);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: var(--sp-s) var(--sp-m);
  border-radius: var(--radius-md);
  font-size: var(--text-caption1);
  font-weight: var(--weight-semibold);
  background: var(--paper);
  color: var(--fg2);
  border: 1px solid var(--stroke2);
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.chip.active {
  background: var(--navy);
  color: var(--fg-on-dark);
  border-color: var(--navy);
}
/* Attribute toggles (multi-select) read as filled gold when on, distinct from
   the navy radio Tonnage chips. */
.chip-toggle.active {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
}

/* Picker filter layout: stacked rows (Tonnage radio, then attribute toggles),
   each horizontally scrollable, with a live count + Clear. */
#picker-chips {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-xs);
  overflow-x: visible;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-label {
  flex-shrink: 0;
  width: 58px;
  font-size: var(--text-caption2);
  font-weight: var(--weight-bold);
  color: var(--fg3);
}
.filter-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2px;
}
.filter-count { font-size: var(--text-caption2); color: var(--fg3); font-weight: var(--weight-semibold); }
.filter-clear {
  font-size: var(--text-caption1);
  font-weight: var(--weight-bold);
  color: var(--navy);
  background: none;
  border: none;
  padding: 2px 6px;
}
.filter-clear:active { opacity: 0.6; }


/* ── 14. Rule/Keyword Cards ───────────────────────────── */
.rule-card {
  padding: var(--sp-m) var(--sp-l);
  background: var(--paper);
  border-bottom: 1px solid var(--stroke2);
}

.rule-card-name {
  font-size: var(--text-body1);
  font-weight: var(--weight-semibold);
  color: var(--fg1);
}

.rule-card-text {
  font-family: var(--font-lore);
  font-size: var(--text-caption1);
  line-height: 1.6;
  color: var(--fg2);
  margin-top: var(--sp-xs);
}

.rule-card-icon {
  color: var(--fg4);
  font-size: var(--text-body1);
  flex-shrink: 0;
  margin-left: var(--sp-s);
}


/* ── 15. Loadout Option Cards ─────────────────────────── */
.loadout-section {
  padding: var(--sp-m) var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}

.loadout-option {
  padding: var(--sp-m);
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke1);
  background: var(--white);
  margin-bottom: var(--sp-s);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.loadout-option:last-child { margin-bottom: 0; }

.loadout-option.selected {
  border: 2px solid var(--navy);
  background: var(--paper);
}
/* Either/or loadout: a radio dot + the option's full datasheet below. */
.loadout-radio-row { display: flex; align-items: center; gap: var(--sp-s); }
.loadout-radio-row .loadout-option-name { flex: 1; min-width: 0; }
.loadout-radio-dot {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border: 2px solid var(--stroke1);
  border-radius: 50%;
  position: relative;
}
.loadout-option.selected .loadout-radio-dot { border-color: var(--navy); }
.loadout-option.selected .loadout-radio-dot::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--navy);
}

.loadout-option-name {
  font-size: var(--text-caption1);
  font-weight: var(--weight-semibold);
}

.loadout-option-cost {
  font-family: var(--font-condensed);
  font-size: var(--text-caption1);
  font-weight: var(--weight-bold);
  color: var(--navy);
}

.loadout-option-desc {
  font-size: var(--text-caption2);
  color: var(--fg3);
  margin-top: var(--sp-xxs);
}
.feature-rule {
  font-size: var(--text-caption2);
  color: var(--fg2, var(--fg3));
  line-height: 1.4;
  margin-top: var(--sp-xxs);
}
.feature-rule b { color: var(--fg1); }
.feature-opt-art { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }

/* Swipe-left group row → reveal Remove (the qty stepper × is the visible fallback) */
.swipe-row { position: relative; overflow: hidden; }
.swipe-del {
  position: absolute; top: 0; right: 0; bottom: 0; width: 88px; border: none;
  background: var(--danger); color: #fff; cursor: pointer;
  font-family: var(--font-condensed); font-weight: var(--weight-bold);
  font-size: var(--text-body2, 14px); letter-spacing: .03em;
}
.swipe-fg {
  position: relative; background: var(--paper);
  transition: transform .18s var(--ease-standard); will-change: transform;
  touch-action: pan-y;
}

/* Visible game-size card picker (mobile New Fleet) */
.size-card-list { display: flex; flex-direction: column; gap: var(--sp-xs); }
.size-card {
  display: flex; align-items: center; gap: var(--sp-s); width: 100%;
  padding: var(--sp-s) var(--sp-m); text-align: left;
  border: 1px solid var(--stroke, #d8d2c8); border-radius: var(--radius-md);
  background: var(--paper, #fff); cursor: pointer;
}
.size-card.selected { border-color: var(--navy); background: var(--navy-wash, rgba(27,58,92,0.06)); box-shadow: inset 3px 0 0 var(--navy); }
.size-card-info { display: flex; flex-direction: column; min-width: 0; }
.size-card-name { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--fg1); }
.size-card-sub { font-size: var(--text-caption2); color: var(--fg3); }
.gs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; width: 20px; flex-shrink: 0; }
.gs-block { aspect-ratio: 1; border: 1.5px solid var(--fg3, #9e988f); border-radius: 1px; box-sizing: border-box; }
.gs-block.filled { background: var(--navy); border-color: var(--navy); }


/* ── 16. Points Summary Bar ───────────────────────────── */
.points-bar {
  padding: var(--sp-m-nudge) var(--sp-l);
  background: var(--paper);
  border-bottom: 1px solid var(--stroke1);
}

.points-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-caption1);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--sp-xs);
}

.points-track {
  height: 4px;
  background: var(--stroke2);
  border-radius: 2px;
  overflow: hidden;
}
.points-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 2px;
  transition: width var(--duration-gentle) var(--ease-standard);
}
.points-fill.over { background: var(--danger); }


/* ── 17. Validation Warnings ──────────────────────────── */
.warning-bar {
  padding: var(--sp-m-nudge) var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-s);
  font-size: var(--text-caption1);
  color: var(--danger);
  line-height: 1.4;
}
.warning-item + .warning-item { margin-top: var(--sp-s-nudge); }

.warning-icon {
  font-size: var(--text-body1);
  flex-shrink: 0;
  line-height: 1;
}
.status-svg { width: 16px; height: 16px; display: block; }
.warning-icon .status-svg { margin-top: 1px; }
.loadout-req-flag .status-svg { width: 14px; height: 14px; color: var(--gold-dim); }


/* ── 18. Fleet Header (on fleet detail) ────────────────── */
.fleet-header {
  padding: var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}

.fleet-header-name {
  font-family: var(--font-display);
  font-size: var(--text-title3);
  font-weight: var(--weight-bold);
  line-height: var(--lh-title3);
}

.fleet-header-sub {
  font-size: var(--text-caption1);
  color: var(--fg3);
  margin-top: var(--sp-xxs);
}

.fleet-header-actions {
  display: flex;
  gap: var(--sp-s);
  margin-top: var(--sp-m);
}


/* ── 19. Group Size Counter ───────────────────────────── */
.group-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-m) var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}

.group-counter-label {
  font-size: var(--text-body1);
  font-weight: var(--weight-semibold);
}

.group-counter-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
}

.group-counter-value {
  font-family: var(--font-condensed);
  font-size: var(--text-subtitle2);
  font-weight: 800;
  color: var(--navy);
  min-width: 24px;
  text-align: center;
}

.group-counter-range {
  font-size: var(--text-caption2);
  color: var(--fg3);
}

.counter-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--stroke1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-subtitle1);
  color: var(--fg2);
  transition: background-color 110ms var(--ease-standard),
              border-color 110ms var(--ease-standard),
              color 110ms var(--ease-standard),
              transform 300ms cubic-bezier(0.34, 1.7, 0.5, 1),
              box-shadow var(--duration-fast) var(--ease-standard);
}
/* Press feedback: a deep scale-down + colour fill flashes on tap, then the
   overshoot curve lets it pop back past its size on release for a fun spring. */
.counter-btn:active { transform: scale(0.8); transition-duration: 70ms; background: var(--navy); color: var(--white); border-color: var(--navy); }
.counter-btn:disabled { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) {
  .counter-btn { transition: background-color 110ms linear, color 110ms linear, border-color 110ms linear; }
  .counter-btn:active { transform: none; }
}
/* At the minimum, − removes the whole group — hint with a danger tint. */
.counter-btn-remove { color: var(--danger); border-color: var(--danger); }
.counter-btn-remove:active { background: var(--danger); border-color: var(--danger); color: var(--white); }
/* "Remove the whole group" state: a quiet × instead of an alarming red − (the
   glyph carries the meaning, so no danger colour). */
.counter-btn-x { color: var(--fg2, var(--fg3)); }
.counter-btn-x:active { background: var(--fg3); border-color: var(--fg3); color: var(--white); }

/* Compact stepper used inline on fleet-list group rows (set ×N without opening
   the group). 32px keeps a comfortable tap target while fitting the row. */
.counter-btn-sm {
  width: 32px;
  height: 32px;
  font-size: var(--text-body1);
}
.row-qty {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
  margin-right: var(--sp-xs);
}
.row-qty-num {
  font-family: var(--font-condensed);
  font-size: var(--text-subtitle2);
  font-weight: 800;
  color: var(--navy);
  min-width: 28px;
  text-align: center;
}


/* ── 20. Badges ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-xxs) var(--sp-s);
  border-radius: var(--radius-sm);
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.04em;
}

.badge-ghost {
  border: 1px solid var(--stroke1);
  color: var(--fg2);
}

.badge-navy {
  background: var(--navy);
  color: var(--fg-on-dark);
}

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


/* ── 21. Search Input ──────────────────────────────────── */
.search-bar {
  padding: var(--sp-s) var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}

.search-input {
  width: 100%;
  padding: var(--sp-m-nudge) var(--sp-m);
  border: 1px solid var(--stroke1);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-size: 16px; /* >=16px so iOS doesn't auto-zoom on focus */
  color: var(--fg1);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.search-input:focus { border-color: var(--navy); }
.search-input::placeholder { color: var(--fg4); }


/* ── 22. Ship Art (detail view) ────────────────────────── */
.ship-art-block {
  padding: var(--sp-l);
  background: var(--white);
  text-align: center;
}
.ship-art-block img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}


/* ── 23. Modal Overlay ─────────────────────────────────── */
.modal-overlay {
  /* Always laid out (display:flex) but hidden via opacity/visibility so the
     backdrop can FADE and the panel can RISE on open AND close — display
     toggling can't transition, which made modals snap. */
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.4);
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-xxxl) var(--sp-l);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-panel {
  background: var(--white);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 400px;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  box-shadow: var(--shadow28);
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: transform var(--duration-gentle) var(--ease-decelerate),
              opacity var(--duration-gentle) var(--ease-decelerate);
}
.modal-overlay.active .modal-panel { transform: none; opacity: 1; }

/* The ability picker pops in (scale-up with overshoot) when it auto-opens. */
@keyframes mobile-modal-pop {
  0%   { transform: scale(0.82); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
#modal-abilities.active .modal-panel-pop,
#modal-secondary.active .modal-panel-pop {
  animation: mobile-modal-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ability-lite { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-xs) var(--sp-l); font-weight: var(--weight-semibold); color: var(--fg1); }
@media (prefers-reduced-motion: reduce) {
  #modal-abilities.active .modal-panel-pop { animation: none; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-l);
  border-bottom: 1px solid var(--stroke2);
}

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

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-subtitle1);
  color: var(--fg3);
  border-radius: var(--radius-md);
}
.modal-close:active { background: var(--paper); }

.modal-body { padding: var(--sp-l); }

.modal-footer {
  padding: var(--sp-m) var(--sp-l) var(--sp-l);
}


/* ── 24. Form Elements ─────────────────────────────────── */
.form-group { margin-bottom: var(--sp-l); }
.form-group:last-child { margin-bottom: 0; }

.form-label {
  display: block;
  font-family: var(--font-condensed);
  font-size: var(--text-caption1);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--fg3);
  margin-bottom: var(--sp-xs);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--sp-m-nudge) var(--sp-m);
  border: 1px solid var(--stroke1);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 16px; /* >=16px so iOS doesn't auto-zoom on focus */
  color: var(--fg1);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus { border-color: var(--navy); }

.form-textarea { min-height: 80px; resize: vertical; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b6864' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}


/* ── 25. Launch Asset Picker ──────────────────────────── */
.launch-picker {
  display: flex;
  gap: var(--sp-xs);
}

.launch-option {
  flex: 1;
  padding: var(--sp-m-nudge);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--text-caption1);
  font-weight: var(--weight-semibold);
  border: 1px solid var(--stroke1);
  background: var(--paper);
  color: var(--fg2);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.launch-option.active {
  background: var(--navy);
  color: var(--fg-on-dark);
  border-color: var(--navy);
}


/* ── 26. Ship Detail Header ──────────────────────────── */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}

.detail-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
}
/* Tap the battlegroup name to rename it; dotted underline hints the affordance.
   inline-block keeps the tap target on the text, not the empty rest of the line. */
.detail-name-editable { cursor: pointer; display: inline-block; }
.detail-name-editable:active { opacity: 0.6; }
.gname-input {
  font: inherit;
  color: var(--fg1);
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: var(--radius-s, 6px);
  padding: 1px 6px;
  max-width: 100%;
  outline: none;
}

.detail-type {
  font-size: var(--text-caption1);
  color: var(--fg3);
  margin-top: var(--sp-xxs);
}


/* ── 27. Invalid marker ──────────────────────────────── */
.invalid-text { color: var(--danger); }


/* ── 28. 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(--danger); font-weight: var(--weight-bold); }


/* ── 29. Ship Art Hero (top of group detail) ──────────── */
.ship-art-hero {
  position: relative;
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, var(--navy) 0%, #2a5a8c 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hero art carousel (resin/variant sculpts): tappable arrows + label & dots. */
.ship-art-hero .hero-art-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 46px; border: none; padding: 0;
  background: rgba(15, 38, 64, 0.5); color: #fff; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.ship-art-hero .hero-art-prev { left: 0; border-radius: 0 6px 6px 0; }
.ship-art-hero .hero-art-next { right: 0; border-radius: 6px 0 0 6px; }
.ship-art-hero .hero-art-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 16px 10px 6px; background: linear-gradient(transparent, rgba(15, 38, 64, 0.62));
}
.ship-art-hero .hero-art-label { color: #fff; font-size: 12px; font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ship-art-hero .hero-art-dots { display: flex; gap: 4px; flex-shrink: 0; }
.ship-art-hero .hero-art-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.ship-art-hero .hero-art-dot.active { background: #fff; }
.ship-art-hero img {
  /* Fill more of the hero so the sculpt reads bigger, without growing the box
     (vertical space is precious on a phone). */
  max-width: 96%;
  max-height: 174px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* TTCombat store link wrapping ship art. The anchor fills its art box so the
   inner <img> sizing rules above are unchanged; inside the flex hero it stays
   centred. A small shop-bag badge sits faintly visible (touch has no hover). */
.shop-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ship-art-hero .shop-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fully-modular ships (Resistance cruisers/frigates built entirely from chosen
   systems): the art is just a base-hull placeholder, so desaturate it to
   signal "blank until configured" — mirrors the desktop ship-img-modular. */
.ship-thumb.ship-img-modular img {
  filter: grayscale(1) opacity(0.5);
}
.ship-art-hero.ship-img-modular {
  position: relative;
}
.ship-art-hero.ship-img-modular img {
  filter: grayscale(1) opacity(0.5) drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.modular-art-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-xs) var(--sp-m);
  background: rgba(0, 0, 0, 0.62);   /* darker scrim so white text stays legible over art */
  color: #fff;
  font-size: var(--text-caption2);
  text-align: center;
  z-index: 1;
}


/* ── 30. Points Badge (larger, gold accent) ───────────── */
.pts-badge-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--fg-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  box-shadow: var(--shadow4);
}
.pts-badge-lg .pts-badge-value {
  font-family: var(--font-condensed);
  font-size: var(--text-title3);
  font-weight: 800;
  line-height: 1;
}
.pts-badge-lg .pts-badge-label {
  font-family: var(--font-condensed);
  font-size: 7px;
  text-transform: none;
  letter-spacing: 0.08em;
  opacity: 0.7;
}


/* ── 31. Stat Icons (TAROT style) ─────────────────────── */
.stat-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--paper-alt);
  border-radius: var(--radius-sm);
}

.stat-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg3);
}
.stat-icon svg { width: 16px; height: 16px; }

.stat-icon-es svg { color: #8b5e1a; }
.stat-icon-ks svg { color: var(--navy); }
.stat-icon-bs svg { color: var(--fg3); }


/* ── 32. Faction Icon (fleet list rows) ───────────────── */
.faction-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  flex-shrink: 0;
}

.fleet-row-bar {
  height: 3px;
  background: var(--stroke2);
  border-radius: 1.5px;
  margin-top: var(--sp-s);
  overflow: hidden;
}
.fleet-row-bar-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 1.5px;
}
.fleet-row-bar-fill.over { background: var(--danger); }


/* ── 33. Utility ──────────────────────────────────────── */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--sp-xs); }
.gap-s { gap: var(--sp-s); }
.gap-m { gap: var(--sp-m); }
.text-center { text-align: center; }
.hidden { display: none !important; }


/* ── 34. Tappable affordance ──────────────────────────── */
.tappable {
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.tappable:active { opacity: 0.6; }

/* Tappable special chips get a subtle dotted underline cue */
.weapon-special-chip.tappable {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(27, 58, 92, 0.06);
}
.weapon-special-chip.tappable:active {
  background: rgba(27, 58, 92, 0.16);
}

/* Tappable stat cells get a faint affordance */
.stat-cell.tappable::after {
  content: "";
  position: absolute;
  inset: -4px -6px;
  border-radius: var(--radius-md);
}
.stat-cell.tappable:active { background: var(--paper-alt); border-radius: var(--radius-md); }


/* ── 35. Rule Bottom Sheet ────────────────────────────── */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
body.sheet-open .sheet-scrim {
  opacity: 1;
  pointer-events: auto;
}

.rule-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--white);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow28);
  padding: var(--sp-s) var(--sp-l) calc(var(--sp-xl) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--duration-gentle) var(--ease-decelerate);
  max-height: 70dvh;
  overflow-y: auto;
}
.rule-sheet.active { transform: translateY(0); }

/* The grabber is a clear, finger-sized swipe target. The bar itself is small,
   but the surrounding padding gives a ~24px tall hit/drag zone so a downward
   swipe anywhere near the top of the sheet dismisses it. */
.rule-sheet-handle {
  width: 100%;
  padding: var(--sp-s) 0 var(--sp-m);
  margin: 0;
  cursor: grab;
  touch-action: none;
  display: flex;
  justify-content: center;
}
.rule-sheet-handle::before {
  content: "";
  width: 48px;
  height: 5px;
  border-radius: 3px;
  background: var(--fg3);
  opacity: 0.55;
}
.rule-sheet-handle:active::before { opacity: 0.85; }

.rule-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-m);
}

.rule-sheet-title {
  font-family: var(--font-display);
  font-size: var(--text-subtitle1);
  font-weight: var(--weight-bold);
  color: var(--navy);
}

.rule-sheet-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-subtitle1);
  color: var(--fg3);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.rule-sheet-close:active { background: var(--paper); }

.rule-sheet-body {
  font-family: var(--font-lore);
  font-size: var(--text-body1);
  line-height: 1.65;
  color: var(--fg1);
}
.rule-sheet-body p { margin: 0 0 var(--sp-s); }
.rule-sheet-body p:last-child { margin-bottom: 0; }
.rule-sheet-unknown { color: var(--fg3); font-style: italic; }

.rule-sheet-page {
  margin-top: var(--sp-m);
  font-family: var(--font-condensed);
  font-size: var(--text-caption1);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--fg4);
}


/* ── 36. Action Sheet (overflow menus) ─────────────────── */
.action-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--paper);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow28);
  padding: var(--sp-s) var(--sp-m) calc(var(--sp-m) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--duration-gentle) var(--ease-decelerate);
}
.action-sheet.active { transform: translateY(0); }
.action-sheet-item {
  display: block;
  width: 100%;
  padding: var(--sp-l);
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-s);
  font-size: var(--text-subtitle2);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  text-align: center;
}
.action-sheet-item:active { background: var(--paper-alt); }
.action-sheet-item.danger { color: var(--danger); }
.action-sheet-cancel {
  display: block;
  width: 100%;
  padding: var(--sp-l);
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  margin-top: var(--sp-s);
  font-size: var(--text-subtitle2);
  font-weight: var(--weight-bold);
  color: var(--fg2);
}
.action-sheet-cancel:active { background: var(--paper-alt); }

/* ── 37. Add slot (admiral / station empty) ────────────── */
.add-slot {
  margin: var(--sp-s) var(--sp-l);
  padding: var(--sp-l);
  border: 1.5px dashed var(--stroke1);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--text-body1);
  font-weight: var(--weight-semibold);
  color: var(--fg3);
  background: transparent;
}
/* Optional slots (e.g. Space Station) read quieter than required ones so they
   don't compete with the Add Admiral / Add Group calls to action. */
.add-slot-optional {
  padding: var(--sp-s) var(--sp-m);
  border-style: dotted;
  font-size: var(--text-caption1);
  font-weight: 500;
  opacity: 0.85;
}
.add-slot-opt {
  font-size: 12px;
  color: var(--fg3);
  opacity: 0.7;
  margin-right: 2px;
}
.add-slot:active { background: var(--paper-alt); }

/* Admiral ability picker rows (radio-style) + tappable keyword links */
.ability-row {
  padding: var(--sp-m) var(--sp-l);
  border-bottom: 1px solid var(--stroke2);
}
.ability-row-innate { background: var(--paper-alt); }
.ability-pick { display: flex; gap: var(--sp-m); cursor: pointer; }
.ability-pick.locked { opacity: 0.45; cursor: default; }
.ability-pick:active:not(.locked) { background: var(--paper-alt); }
.ability-radio {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--stroke1);
  margin-top: 2px;
  position: relative;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.ability-pick.selected .ability-radio { border-color: var(--navy); }
.ability-pick.selected .ability-radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--navy);
}
/* Ability picker uses visible checkboxes (tick to select, no click-on/off). */
.ability-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--stroke1);
  margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ability-pick.selected .ability-check { background: var(--navy); border-color: var(--navy); }
.ability-pick-body { flex: 1; min-width: 0; }
.ability-pick-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ability-pick-name { font-weight: var(--weight-bold); color: var(--fg1); }
.ability-pick-cost {
  font-family: var(--font-condensed); font-size: var(--text-caption2);
  font-weight: var(--weight-bold); color: var(--navy);
  background: var(--paper-alt); border-radius: var(--radius-sm); padding: 0 5px;
}
.ability-always {
  font-size: var(--text-caption2); font-weight: var(--weight-bold);
  color: var(--gold-dim); background: rgba(201,168,76,0.14);
  border-radius: var(--radius-sm); padding: 0 5px;
}
.ability-pick-effect { font-size: var(--text-caption1); color: var(--fg2); line-height: 1.5; margin-top: 3px; }
.kw-link { color: var(--navy); border-bottom: 1px dotted var(--navy); font-weight: var(--weight-semibold); }
.kw-link:active { background: rgba(27,58,92,0.1); }

/* Secondary Objectives picker (choose 2) */
.section-header-note { font-weight: var(--weight-semibold); color: var(--fg3); font-size: var(--text-caption2); }
.secondary-list { padding: 0 var(--sp-l) var(--sp-s); display: flex; flex-direction: column; gap: var(--sp-s); }
.secondary-item {
  display: flex;
  gap: var(--sp-m);
  padding: var(--sp-m);
  background: var(--white);
  border: 1px solid var(--stroke2);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.secondary-item:active { background: var(--paper-alt); }
.secondary-item.selected { border-color: var(--gold); background: rgba(201, 168, 76, 0.08); }
.secondary-item.locked { opacity: 0.5; }
.secondary-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--stroke1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption1);
  color: var(--white);
  margin-top: 1px;
}
.secondary-item.selected .secondary-check { background: var(--gold); border-color: var(--gold); }
.secondary-name { font-weight: var(--weight-bold); color: var(--navy); margin-bottom: 2px; }
.secondary-desc { font-size: var(--text-caption1); color: var(--fg2); line-height: 1.5; }

/* A famous admiral's flagship, shown among the groups (its cost lives with the
   admiral, so no pts on this row). Gold accent marks it as the flagship. */
.flagship-row { border-left: 3px solid var(--gold); }
.flagship-tag {
  display: inline-block;
  font-size: var(--text-caption2);
  font-weight: var(--weight-bold);
  color: var(--gold-dim);
  background: rgba(201, 168, 76, 0.14);
  border-radius: var(--radius-sm);
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── 38. Empty states ──────────────────────────────────── */
.empty-state { padding: 56px 24px; text-align: center; }
.empty-state-title { font-size: var(--text-subtitle2); font-weight: var(--weight-semibold); color: var(--fg2); margin-bottom: var(--sp-s); }
.empty-state-sub { font-size: var(--text-caption1); color: var(--fg3); }
.empty-state-sm { padding: 24px; text-align: center; font-size: var(--text-caption1); color: var(--fg3); }

/* ── 39. Warnings (severity + actionable) ──────────────── */
.warn-error .warning-icon { color: var(--danger); }
.warn-error span:last-child { color: var(--danger); }
.warn-soft .warning-icon { color: var(--gold-dim); }
.warn-soft span:last-child { color: var(--gold-dim); }
.warn-ok .warning-icon { color: #3e9945; }
.warn-ok span:last-child { color: #3e9945; }
.warn-fix {
  font-weight: var(--weight-bold);
  text-decoration: underline;
  white-space: nowrap;
}

/* ── 40. List chevron + issue badge + ship tags ────────── */
.list-chevron { color: #736d64; font-size: var(--text-subtitle1); flex-shrink: 0; }
.row-badge-issue {
  display: inline-block;
  margin-left: var(--sp-s);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-bold);
  vertical-align: middle;
}
.ship-tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  color: var(--fg3);
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  vertical-align: middle;
}
.ship-tag-rare, .ship-tag-unique { background: none; padding: 0; border-radius: 0; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
.ship-tag-launch { background: var(--navy); color: var(--paper); text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
.ship-tag-rare { color: var(--navy); }
.ship-tag-unique { color: #8a5e10; }
.row-disabled { opacity: 0.4; pointer-events: none; }
.fleet-legal-check { display: inline-flex; align-items: center; vertical-align: -2px; color: #2f7a3a; }
/* Illegal: a tappable red pill (icon + caret) that visibly invites a tap to
   reveal the alerts, since a hover title is useless on touch. */
.fleet-legal-check.legal-bad {
  color: #a8342a;   /* AA on the light-red tint (was --error #c43c2f = 4.1:1) */
  background: rgba(196, 60, 47, 0.12);
  border-radius: 999px;
  padding: 1px 5px 1px 3px;
  cursor: pointer;
}
.fleet-legal-check.legal-bad:active { background: rgba(196, 60, 47, 0.22); }
.legal-bad-caret { font-size: 12px; line-height: 1; margin-left: 1px; }
.fleet-legal-check .status-svg { width: 17px; height: 17px; }

/* ── 41. Form hint + loadout group label ───────────────── */
.form-hint {
  margin-top: var(--sp-xs);
  font-size: var(--text-caption1);
  color: var(--fg3);
  font-style: italic;
  line-height: 1.4;
}
.loadout-group-label {
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--fg4);
  margin: var(--sp-s) 0 var(--sp-xs);
}
.loadout-group-label:first-child { margin-top: 0; }
/* Hardpoint category divider (Broadside / Turret / Structures) — an obvious
   full-width band so the groups are easy to tell apart while building. */
.sys-cat-label {
  font-family: var(--font-condensed);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy, var(--fg1));
  background: var(--surface-2, rgba(0,0,0,0.05));
  border-top: 2px solid var(--border, rgba(0,0,0,0.15));
  padding: 6px var(--sp-s);
  margin: var(--sp-s) calc(-1 * var(--sp-s)) var(--sp-xs);
}
.sys-cat-label:first-child { margin-top: 0; border-top: none; }


/* ── 42. Systems / Hardpoints picker ───────────────────── */
.sys-total {
  margin-left: var(--sp-s);
  font-family: var(--font-condensed);
  font-weight: var(--weight-bold);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
}
.sys-total.ok { background: #e3f0e4; color: #287030; }
.sys-total.incomplete { background: var(--danger-bg); color: var(--danger); }

.sys-cap-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-s);
}
.sys-cap-chip {
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-semibold);
  padding: 2px var(--sp-s);
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  color: var(--fg2);
}
.sys-cap-chip.full { background: var(--navy); color: var(--fg-on-dark); }

.sys-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-s);
  padding: var(--sp-s) var(--sp-m);
  border: 1px solid var(--stroke1);
  border-radius: var(--radius-lg);
  background: var(--white);
  margin-bottom: var(--sp-s);
}
.sys-option.selected { border-color: var(--navy); background: var(--paper); }
.sys-option-row {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
}
.sys-option-art { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.sys-option-main { flex: 1; min-width: 0; }
/* The option's mini datasheet sits full-width under the name/cost/controls. */
.opt-weapon-table { margin-top: 2px; }
/* Station armaments: one combined weapons table. Each weapon row is followed by
   a compact control line (special chips at left, cost + stepper at right) so the
   header isn't repeated per option. */
.station-arm-row.selected { background: var(--paper); }
.station-arm-ctrl {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  padding: 2px var(--sp-xs) 6px;
  border-bottom: 1px solid var(--stroke);
}
.station-arm-table .weapon-row:last-of-type { border-bottom: none; }
.station-arm-ctrl .station-arm-special {
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.station-arm-ctrl .loadout-option-cost { flex-shrink: 0; }
.sys-option-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  flex-shrink: 0;
}
.sys-option-count {
  font-family: var(--font-condensed);
  font-size: var(--text-subtitle2);
  font-weight: 800;
  color: var(--navy);
  min-width: 16px;
  text-align: center;
}


/* ── 43. Text link (secondary action) ──────────────────── */
.btn-textlink {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--sp-s);
  padding: var(--sp-s);
  background: none;
  border: none;
  color: var(--navy);
  font-size: var(--text-caption1);
  font-weight: var(--weight-semibold);
}
.btn-textlink:active { opacity: 0.6; }


/* ── 44. Copy-as-text preformatted block ───────────────── */
.copy-pre {
  margin-top: var(--sp-m);
  padding: var(--sp-m);
  background: var(--paper);
  border: 1px solid var(--stroke2);
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: var(--text-caption1);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 40dvh;
  overflow-y: auto;
  color: var(--fg1);
  -webkit-user-select: all;
  user-select: all;
}
/* Admiral picker — innate abilities + table-pick count */
.list-row-abilities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.ability-tag {
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--navy-subtle, rgba(27,58,92,0.10));
  color: var(--navy, #1b3a5c);
  white-space: nowrap;
}
.list-row-picks {
  margin-top: 4px;
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  color: var(--gold-dark, #8a6d1f);
}
.import-textarea {
  width: 100%;
  margin-top: var(--sp-m);
  padding: var(--sp-m);
  background: var(--paper);
  border: 1px solid var(--stroke2);
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: 16px; /* >=16px so iOS doesn't auto-zoom on focus */
  color: var(--fg1);
  resize: vertical;
  -webkit-appearance: none;
}
.import-textarea:focus { outline: none; border-color: var(--accent, var(--navy)); }

/* ── 45. Print / PDF export ────────────────────────────── */
#print-root { display: none; }

@media print {
  /* Hide the app shell; show only the print roster */
  body > *:not(#print-root) { display: none !important; }
  body.printing #print-root, #print-root { display: block; }
  body { background: #fff; color: #000; }

  #print-root {
    font-family: Georgia, 'Times New Roman', serif;
    color: #1a1a1a;
    padding: 0;
    max-width: 100%;
  }
  .pr-header { border-bottom: 2px solid #1b3a5c; padding-bottom: 6px; margin-bottom: 10px; }
  .pr-title { font-size: 20pt; font-weight: 700; color: #1b3a5c; }
  .pr-sub { font-size: 10pt; color: #444; margin-top: 2px; }

  .pr-group { border: 1px solid #ccc; border-radius: 4px; padding: 6px 8px; margin-bottom: 6px; break-inside: avoid; }
  /* Two-column units layout (Settings toggle) — ~4 units per page. */
  .pr-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
  .pr-2col .pr-weapons { font-size: 7pt; }
  .pr-group-head { display: flex; justify-content: space-between; align-items: baseline; }
  .pr-group-name { font-size: 12pt; font-weight: 700; }
  .pr-group-pts { font-size: 11pt; font-weight: 700; color: #1b3a5c; }
  .pr-stats { font-size: 8.5pt; color: #333; margin: 3px 0; }
  .pr-stat { display: inline-block; margin-right: 10px; }
  .pr-stat b { color: #1b3a5c; }
  /* Stat changed by a selected upgrade (e.g. Drive Refit +3" Thrust). */
  .pr-stat-mod, .pr-stat-mod b { color: #2e7d32; font-weight: 700; }
  /* Ship class shown in lighter weight after a custom battlegroup name. */
  .pr-group-class { font-weight: 400; color: #555; }

  .pr-weapons { width: 100%; border-collapse: collapse; font-size: 8pt; margin: 3px 0; }
  .pr-weapons th { text-align: left; border-bottom: 1px solid #999; padding: 1px 4px; color: #555; }
  .pr-weapons td { padding: 1px 4px; border-bottom: 1px solid #eee; }
  .pr-launch-label { font-size: 8pt; font-weight: 700; color: #555; margin-top: 3px; }

  .pr-rules-line, .pr-opts { font-size: 8.5pt; margin-top: 2px; }
  .pr-opts { color: #444; font-style: italic; }

  .pr-section-title { font-size: 12pt; font-weight: 700; color: #1b3a5c; margin: 10px 0 4px; border-bottom: 1px solid #ccc; }
  .pr-line { font-size: 10pt; margin: 2px 0; }

  .pr-glossary { columns: 2; column-gap: 16px; }
  .pr-gloss { font-size: 7.5pt; line-height: 1.35; margin-bottom: 4px; break-inside: avoid; }
  .pr-gloss b { color: #1b3a5c; }

  .pr-foot { margin-top: 12px; font-size: 7.5pt; color: #888; text-align: center; }

  @page { margin: 12mm; }
}


/* ── 46. Lore (flavour — separate from rules, Cardo serif) ─ */
.lore-card {
  padding: var(--sp-l);
  background: var(--paper);
  border-top: 1px solid var(--stroke2);
}
.lore-label {
  /* Roboto Slab, a touch bigger, no wide tracking — matches the desktop card
     lore heading. */
  font-family: var(--font-display);
  font-size: var(--text-body2, 14px);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-dim);
  margin-bottom: var(--sp-s);
}
.lore-body {
  font-family: var(--font-lore);
  font-size: var(--text-body1);
  line-height: 1.7;
  color: var(--fg3);   /* grayed to match the namesake (AA: 5:1+) */
}
.lore-body p { margin: 0 0 var(--sp-s); }
.lore-body p:last-child { margin-bottom: 0; }
/* Links inside lore / namesake: subtle — same colour as the text, faint underline only. */
.lore-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  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:active { text-decoration-color: color-mix(in srgb, currentColor 60%, transparent); }
.lore-famous {
  margin-top: var(--sp-m);
  font-family: var(--font-lore);
  font-size: var(--text-caption1);
  line-height: 1.6;
  color: var(--fg3);
}
.lore-famous-label {
  display: block;
  font-weight: var(--weight-bold);
  font-style: normal;
  color: var(--fg2);
  margin-bottom: 4px;
}
.lore-famous ul {
  list-style: disc;
  padding-left: var(--sp-l);
  margin: 0;
}
.lore-famous li {
  font-style: italic;
  color: var(--fg3);
  margin-bottom: 2px;
}
/* Sub-faction split (e.g. Independents / Kalium) — separate underlined columns. */
.lore-famous-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs, 4px) var(--sp-l);
}
.lore-famous-col {
  min-width: 7rem;
}
.lore-famous-subhead {
  display: block;
  font-style: normal;
  font-weight: var(--weight-bold);
  color: var(--fg2);
  text-decoration: underline;
  margin-bottom: 2px;
}
/* Namesake sits last, divided from the ship list; label bold, text upright. */
.lore-namesake {
  margin-top: var(--sp-m);
  font-family: var(--font-lore);
  font-size: var(--text-caption1);
  font-style: normal;
  line-height: 1.6;
  color: var(--fg3);
}
.lore-namesake-label {
  font-weight: var(--weight-bold);
  font-style: normal;
  color: var(--gold-dim);
}


/* ── 47. Guided coach banner ───────────────────────────── */
.coach {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-s);
  padding: var(--sp-m) var(--sp-l);
  background: #fbf6e9;                 /* warm gold tint */
  border-bottom: 1px solid #efe4c4;
}
.coach-icon {
  font-size: var(--text-subtitle2);
  font-weight: var(--weight-bold);
  color: var(--gold-dim);
  line-height: 1.3;
  flex-shrink: 0;
}
.coach-body { flex: 1; min-width: 0; }
.coach-msg {
  font-size: var(--text-body1);
  line-height: 1.45;
  color: var(--fg1);
}
.coach-btn {
  margin-top: var(--sp-s);
  padding: var(--sp-s) var(--sp-l);
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--fg-on-dark);
  font-family: var(--font-condensed);
  font-size: var(--text-caption1);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.04em;
  min-height: 36px;
}
.coach-btn:active { background: var(--navy-dark); }
.coach-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-subtitle2);
  color: var(--fg4);
  border-radius: var(--radius-sm);
}
.coach-dismiss:active { background: rgba(0,0,0,0.05); }

.coach-done {
  background: #e9f3ea;                 /* soft green */
  border-bottom-color: #d3e7d4;
  align-items: center;
}
.coach-done .coach-icon { color: #3e9945; }
.coach-done .coach-msg { font-weight: var(--weight-semibold); color: #2f7a36; }


/* ── 48. Picker sort row ───────────────────────────────── */
.sort-row {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  padding: var(--sp-s) var(--sp-l);
  background: var(--white);
  border-bottom: 1px solid var(--stroke2);
}
.sort-label {
  font-family: var(--font-condensed);
  font-size: var(--text-caption2);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--fg4);
}
/* Ship count + Clear sit at the far right of the sort row (not their own line). */
.picker-meta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-xs); flex-shrink: 0; }
.sort-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: var(--sp-xs) var(--sp-m);
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: var(--text-caption1);
  font-weight: var(--weight-semibold);
  color: var(--fg2);
  background: transparent;
  border: 1px solid var(--stroke2);
  min-height: 32px;
}
.sort-chip.active {
  background: var(--navy);
  color: var(--fg-on-dark);
  border-color: var(--navy);
}
.sort-arrow { font-size: var(--text-body1); line-height: 1; }

/* ── 49. Tonnage badges (visual weight cue) ────────────── */
.ton-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: var(--sp-s);
  border-radius: var(--radius-sm);
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: #fff;
  vertical-align: -2px;
}
.ton-light    { background: #8aa0b5; }   /* light slate — visually lightest */
.ton-medium   { background: var(--navy); }
.ton-heavy    { background: var(--ink); }
.ton-colossal { background: var(--gold); color: #2a2410; }
.ton-payload  { background: var(--fg4); }

/* Points: de-emphasise the "pts" unit so the number reads first */
.pts-unit {
  font-family: var(--font-body);
  font-size: var(--text-caption2);
  font-weight: var(--weight-regular);
  color: var(--fg4);
  margin-left: 1px;
}


/* ── 50. Site footer (uniform across WarLore builders) ─── */
.m-footer {
  /* Clear the fixed bottom-action (Create + 2 text links ≈ 156px) so the
     attribution isn't hidden behind it. */
  padding: var(--sp-l) var(--sp-l) calc(160px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: var(--text-caption1);
  line-height: 1.7;
  color: var(--fg3);
  border-top: 1px solid var(--stroke2);
  margin-top: var(--sp-s);
}
.m-footer-title { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--fg2); }
.m-footer a { color: var(--navy); text-decoration: none; }
.m-footer a:active { text-decoration: underline; }
/* WarLore wordmark keeps its gold-on-black brand in the footer (the generic
   footer-link colour above would otherwise force it to navy). */
.m-footer a.warlore-mark { color: #FFCC00; }
.m-footer a.warlore-mark:active { color: #000; background: #FFCC00; text-decoration: none; }
.m-footer-credit {
  margin-top: var(--sp-xs);
  font-family: var(--font-condensed);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: var(--text-caption2);
}
/* WarLore wordmark — Terminal Grotesque Open */
.wl-brand {
  font-family: var(--font-wordmark);
  font-size: var(--text-body);
  letter-spacing: 0.01em;
}
/* Gold-on-black brand wordmark (standing brand rule, both apps), inline size for
   the credits footer. Inverts on hover/active. */
.warlore-mark {
  display: inline-block;
  font-family: var(--font-wordmark);
  text-decoration: none;
  color: #FFCC00;
  background: #000;
  line-height: 1.3;
  transition: color .12s ease, background .12s ease;
}
.warlore-mark .wl-lore { font: inherit; }
.warlore-mark:active { color: #000; background: #FFCC00; }
.warlore-mark.warlore-mark-inline {
  font-size: 15px;
  padding: 1px 6px;
  vertical-align: -2px;
}


/* ── 51. Reduced motion ────────────────────────────────────
   Respect the OS "reduce motion" setting: drop slides/transforms,
   keep a near-instant cross-fade so the UI still feels responsive. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .screen.slide-in-right,
  .screen.slide-in-left { animation: rmFade var(--duration-normal) ease both; }
  .screen.slide-out-left,
  .screen.slide-out-right { animation: none; opacity: 0; }
}
@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }