* { box-sizing: border-box; }

/* Author display rules (e.g. button { display: inline-flex }) otherwise beat
   the UA's [hidden] { display: none }, silently showing hidden elements. */
[hidden] { display: none !important; }

/* FontAwesome brands (vendored free subset, e.g. browser logos) render through
   their own family — the Pro base css points .fa-brands at the Pro font. */
.fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400; }

:root {
  --bg: #05080f;
  --bg-elevated: #0a101c;
  --surface: #0e1624;
  --surface-2: #141e30;
  --border: #1e2d45;
  --border-glow: rgba(0, 229, 255, 0.35);
  --text: #c8d6e8;
  --text-bright: #e8f1ff;
  --muted: #6b7d96;
  --accent: #00e5ff;
  --accent-dim: #00a8bc;
  --accent-soft: rgba(0, 229, 255, 0.12);
  --accent-2: #7c5cff;
  --warn: #e0b84f;
  --error: #ff5c7a;
  --success: #3dffa8;
  --panel-glow: 0 0 0 1px rgba(0, 229, 255, 0.08), 0 0 24px rgba(0, 80, 120, 0.15);
  --font-display: "Michroma", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 2px;
  --scanline: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

html {
  color-scheme: dark;
  /* Safari 26 samples root background-color for chrome/overscroll tint. */
  background-color: #0a1220;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  /* Explicit color for iOS 26 Liquid Glass / overscroll sampling; gradients layer on top. */
  background-color: #0a1220;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(0, 120, 180, 0.14), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(90, 40, 180, 0.1), transparent 50%),
    linear-gradient(180deg, #070b14 0%, var(--bg) 40%, #04060c 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: var(--scanline);
  z-index: 9999;
  opacity: 0.55;
}

/* —— chrome —— */
/* Fixed inset shell: the document never scrolls. All page motion happens inside
   the clipped .app-scroll, so iOS 26 Liquid Glass cannot lift scrolled DOM
   pixels into the translucent status-bar band above the nav. */
.app-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Opaque lid over the status-bar / Dynamic Island band (above topbar content). */
.status-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background-color: #0a1220;
  z-index: 30;
  pointer-events: none;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
  /* Safe-area only — do not invent a 47px floor; on iOS 26 Safari the fixed
     shell often already sits below the status bar when inset-top is 0. */
  padding: calc(0.55rem + env(safe-area-inset-top, 0px)) 1.1rem 0.55rem;
  background-color: #0a1220;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 229, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 20;
}

/* Outer clip: WebKit can paint overflow:auto layers outside their box; this
   wrapper + clip-path keeps scrolled content geometrically inside. */
.app-scroll-clip {
  flex: 1 1 0%;
  min-height: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Sole vertical scrollport for page content. */
.app-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  touch-action: pan-y;
}

.brand {
  font-family: var(--font-display);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  font-weight: 400;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.brand i { font-size: 1rem; filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5)); }
.brand:hover { color: var(--text-bright); }

/* Material Symbols baseline */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  user-select: none;
}
.material-symbols-outlined.inline-mi {
  font-size: 1rem;
  padding: 0 0.15rem;
  margin-right: 0.1rem;
  opacity: 0.9;
  vertical-align: -0.15em;
}
/* Every icon glyph gets a little horizontal padding so it never sits flush
   against neighbouring text — material symbols, font-awesome (solid, regular,
   duotone, brands) and the info tips on research/colony pages alike. */
.material-symbols-outlined,
i.fa-solid, i.fa-regular, i.fa-duotone, i.fa-brands {
  padding: 0 0.15rem;
}
h1 .material-symbols-outlined,
h2 .material-symbols-outlined {
  color: var(--accent);
  font-size: 1.25em;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.45));
}
/* Capital colony marker (star) next to colony names */
i.fa-solid.fa-star.capital-star { color: var(--warn); }
/* Keep the capital star glued to the colony name — the icon is an atomic
   inline, so without nowrap the browser may break the line before it when
   the colonies table gets width-squeezed. */
.colony-title { white-space: nowrap; }

.mainnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}

/* Icon-only main nav + logout: label appears on hover via data-tip */
.nav-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.nav-ico .material-symbols-outlined { font-size: 1.35rem; }
.nav-ico i.fa-solid,
.nav-ico i.fa-duotone { font-size: 1.15rem; line-height: 1; }
.nav-reminder {
  position: absolute;
  top: 0.22rem;
  right: 0.22rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--surface), 0 0 8px rgba(239, 68, 68, 0.8);
}
.nav-ico:hover,
.nav-ico:focus-visible {
  color: var(--accent);
  border-color: rgba(0, 229, 255, 0.3);
  background: var(--accent-soft);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.15);
}
.nav-ico[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-bright);
  background: var(--surface-2);
  border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 229, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 200;
}
.nav-ico[data-tip]:hover::after,
.nav-ico[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

button.linklike.nav-ico {
  text-decoration: none;
  letter-spacing: 0;
  font-size: inherit;
  box-shadow: none;
  filter: none;
}
button.linklike.nav-ico:hover {
  filter: none;
  color: var(--accent);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.15);
}
/* Music player popup reports "playing" through a storage event; the green
   dot mirrors the one in the mini player bar (public/music/player.css). The
   icon itself keeps its normal nav colour. */
#music-toggle.music-playing::after {
  content: "";
  position: absolute;
  top: 0.22rem;
  right: 0.22rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 2px var(--surface), 0 0 8px rgba(61, 255, 168, 0.7);
}
/* Installed as an app (home-screen / PWA, display: standalone): window.open
   is impossible there, so the player button has nothing to offer — hide it.
   launcher.js hides via navigator.standalone for iOS builds that predate the
   media query; this covers everything else without a JS flash. */
@media (display-mode: standalone) {
  #music-toggle { display: none; }
}

.session {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.85rem;
}
.session > a:not(.nav-ico) {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.session > a:not(.nav-ico) .material-symbols-outlined { font-size: 1.05rem; }
.session > a:not(.nav-ico):hover { color: var(--accent); }
.session .player-tag {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--text-bright);
  border: 1px solid var(--border);
  padding: 0.3rem 0.55rem;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
.session a.player-tag:hover {
  color: var(--text-bright);
  border-color: rgba(0, 229, 255, 0.45);
}
.session .player-tag .material-symbols-outlined { font-size: 1rem; color: var(--accent); }

.vacation-badge {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.45);
  background: rgba(255, 209, 102, 0.08);
  padding: 0.25rem 0.45rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.settings-panel .inline-baseline {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  max-width: 28rem;
}
.settings-panel .inline-baseline input[type="number"] {
  width: 4.5rem;
}
.settings-panel .dnd-duration-group {
  max-width: 28rem;
  margin: 0.7rem 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  background: rgba(5, 8, 15, 0.35);
}
.settings-panel .dnd-duration-group .inline-baseline { margin: 0; }

/* Espionage operation picker: a short description under each act so the
   choice reads like the manual (GDD §10). */
.esp-op { margin-bottom: 0.4rem; }
.esp-op-desc {
  margin: 0.15rem 0 0 1.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.esp-op-note { color: var(--accent); }

/* Espionage intel signature on system pages + the siege dialog (GDD §10):
   the ground defense / orbital hull classes a scan learned, with its age. */
.scan-sig {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.scan-age { color: var(--accent-dim); }

/* Espionage history results (GDD §10): what a scan/steal/sabotage actually
   returned, linked to the scanned colony + system. */
td.esp-result { font-size: 0.85rem; }
.esp-buildings { color: var(--text-bright); }
.esp-stocks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin-top: 0.25rem;
}
.esp-stock {
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.1rem 0.4rem;
}

/* Survivor recovery banner (GDD §11): shown when a player has no colonies. */
.survivor-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.survivor-banner.sv-en_route,
.survivor-banner.sv-dispatched {
  border-color: rgba(0, 229, 255, 0.4);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.08), rgba(0, 229, 255, 0.02));
}
.survivor-banner.sv-en_route strong,
.survivor-banner.sv-dispatched strong { color: var(--accent); }
.survivor-banner.sv-fallen {
  border-color: rgba(255, 77, 77, 0.45);
  background: rgba(255, 77, 77, 0.07);
}
.survivor-banner.sv-fallen strong { color: #ff6b6b; }
.survivor-banner .countdown {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--text-bright);
}

.settings-panel {
  padding: 1rem 1.15rem 1.15rem;
  margin: 1.1rem 0;
}
.settings-panel h2 { margin-top: 0.15rem; }
.settings-panel .stack { max-width: 28rem; margin-top: 0.6rem; }
.settings-panel .push-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.7rem 0;
}
.settings-panel .push-devices {
  list-style: none;
  margin: 0.7rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.settings-panel .push-devices li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}
.settings-panel .push-devices i { color: var(--accent); width: 1.15rem; text-align: center; }
.settings-panel .push-devices span { flex: 1; }
.settings-panel .push-devices button.small { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.settings-panel .invite-rows .invite-link a { font-size: 0.78rem; word-break: break-all; }
.settings-panel .invite-rows a.small {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.settings-panel .invite-rows a.small:hover { color: var(--text-bright); }
.settings-panel .invite-rows .used-at { flex: 0 0 auto; color: var(--muted); font-size: 0.72rem; }
.invite-used { margin-top: 0.8rem; }
.invite-used-rows { opacity: 0.72; }
.settings-panel.danger-zone {
  border-color: rgba(255, 92, 122, 0.35);
}

main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.4rem 1.1rem 3rem;
  position: relative;
}

.site-footer {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.1rem 1.4rem;
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.site-footer a {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--text);
}

/* —— type —— */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-bright);
  letter-spacing: 0.08em;
  text-wrap: balance;
  line-height: 1.3;
}
h1 {
  font-size: 1.35rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-shadow: 0 0 24px rgba(0, 229, 255, 0.2);
}
h1::before {
  content: "";
  width: 4px;
  height: 1.1em;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px var(--accent);
  flex-shrink: 0;
}
h1 .fa, h1 .fas, h1 .far, h1 .fad,
h1 .material-symbols-outlined { color: var(--accent); filter: drop-shadow(0 0 6px rgba(0,229,255,0.5)); }
.colony-planet-type {
  margin-left: auto;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
h2 {
  font-size: 0.85rem;
  margin: 1.6rem 0 0.7rem;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
h2 .fa, h2 .fas, h2 .far, h2 .fad { font-size: 0.95rem; }
h3 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.1rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
h3 .fa, h3 .fas, h3 .far, h3 .fad { font-size: 0.85rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text-bright); text-shadow: 0 0 8px rgba(0, 229, 255, 0.35); }

.muted { color: var(--muted); }
.error {
  color: var(--error);
  background: rgba(255, 92, 122, 0.08);
  border: 1px solid rgba(255, 92, 122, 0.35);
  border-left: 3px solid var(--error);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius);
}

.effects, .unlocks { color: var(--accent); font-size: 0.85rem; }
.building-blurb { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.unlocks { opacity: 0.85; }
.done { color: var(--success); }

code, .token {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
  font-size: 0.88em;
}
.token { word-break: break-all; display: inline-block; color: var(--accent); }

/* —— panels / cards —— */
.colony-card,
.panel,
section.branch,
.chat-list,
.map-wrap {
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.04), transparent 40%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--panel-glow);
  position: relative;
}

.colony-card {
  padding: 0.85rem 1.1rem 1rem;
  margin: 1rem 0;
  border-radius: var(--radius);
}
.colony-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 12px; height: 12px;
  border-top: 1px solid var(--accent-dim);
  border-right: 1px solid var(--accent-dim);
  opacity: 0.7;
}
.colony-card h2 { margin-top: 0.2rem; }
.colony-card h2 a { text-decoration: none; letter-spacing: 0.1em; }
.colony-exceptions {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  line-height: 1.25;
}
.colony-exception {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.colony-exception.severity-critical { color: var(--error); }
.colony-exception.severity-warning { color: var(--warn); }
.colony-exception.severity-info { color: var(--accent); }
.colony-mobile-materials { display: none; }
.colony-queue-label { display: none; }

.claim {
  border: 1px solid var(--warn);
  border-left: 3px solid var(--warn);
  color: #e8d9a8;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius);
  background: rgba(224, 184, 79, 0.08);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}
.claim.mine {
  border-color: var(--accent);
  border-left-color: var(--accent);
  color: var(--text);
  background: var(--accent-soft);
}

/* —— tables —— */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--panel-glow);
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
th, td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
th {
  font-family: var(--font-display);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  font-weight: 400;
  background: var(--bg-elevated);
  border-bottom-color: rgba(0, 229, 255, 0.2);
}
td { font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(0, 229, 255, 0.03); }
tr.rates td { border-bottom: none; font-size: 0.85rem; }

/* —— forms —— */
.stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 28rem;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--panel-glow);
  border-radius: var(--radius);
}
.stack label {
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.stack label.checkbox {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: inherit;
  color: var(--text);
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
}
.route-create {
  width: min(100%, 42rem);
  max-width: 42rem;
  gap: 0;
  padding: 1.25rem 1.35rem;
}
.route-field {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0;
}
.route-field label { margin: 0; }
.route-field select,
.route-field input { min-width: 0; width: 100%; }
.route-cargo-controls {
  display: grid;
  grid-template-columns: minmax(5rem, 0.55fr) minmax(8rem, 1fr);
  gap: 0.5rem;
  min-width: 0;
}
.route-interval-control {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.route-interval-control input { flex: 1 1 auto; }
.route-interval-control .muted { white-space: nowrap; font-size: 0.75rem; }
.route-submit {
  width: calc(100% - 10.7rem);
  margin: 0.75rem 0 0 10.7rem;
}
@media (max-width: 640px) {
  .route-create { padding: 1rem; }
  .route-field {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .route-submit {
    width: 100%;
    margin: 0.75rem 0 0;
  }
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
select,
textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.25), 0 0 16px rgba(0, 229, 255, 0.1);
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.7rem 0.9rem 0.9rem;
}
legend {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 0.35rem;
}

button {
  font-family: var(--font-display);
  background: linear-gradient(180deg, #00f0ff 0%, #00b8cc 100%);
  color: #041018;
  border: 1px solid rgba(0, 229, 255, 0.6);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: filter 0.15s, box-shadow 0.15s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
button:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.danger {
  background: linear-gradient(180deg, #ff7a90 0%, #d63d58 100%);
  border-color: rgba(255, 92, 122, 0.6);
  box-shadow: 0 0 16px rgba(255, 92, 122, 0.2);
  color: #1a0508;
}
button.outline-danger,
button.deconstruct-open.danger {
  background: rgba(58, 7, 19, 0.9);
  border-color: rgba(255, 92, 122, 0.85);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 92, 122, 0.12), inset 0 1px 0 rgba(255, 130, 150, 0.12);
}
button.outline-danger:hover:not(:disabled),
button.deconstruct-open.danger:hover:not(:disabled) {
  background: rgba(88, 10, 27, 0.95);
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 92, 122, 0.24), inset 0 1px 0 rgba(255, 160, 175, 0.16);
}
button.btn-sm {
  padding: 0.28rem 0.55rem;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  gap: 0.25rem;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
a.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
a.btn-sm:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}
a.btn-sm .material-symbols-outlined {
  font-size: 0.95rem;
}
.fleet-send-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}
.fleet-send-actions .btn-sm {
  margin: 0.1rem 0;
}
.scan-drone .btn-sm + .btn-sm {
  margin-top: 0.15rem;
}
.scan-drone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.scan-drone-meta {
  font-size: 0.8rem;
  line-height: 1.3;
}
.linklike {
  background: none;
  color: var(--accent);
  padding: 0;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
  border: none;
  box-shadow: none;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
}
.linklike:hover:not(:disabled) {
  filter: none;
  color: var(--text-bright);
  box-shadow: none;
}
.inline { display: inline; }
.inline-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.energy > .inline-form {
  margin-top: 0.65rem;
  margin-bottom: 0.25rem;
}
.inline-form input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
}

/* —— auth pages —— */
body.auth {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body.auth main {
  background: rgba(5, 8, 15, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 2rem;
  max-width: 46rem;
  margin-top: 2rem;
  box-shadow: var(--panel-glow), 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}
body.auth .stack {
  background: rgba(8, 12, 22, 0.7);
  max-width: 100%;
}
body.auth.reg { background-image: url('/art/bg-register.webp'); }
body.auth.log { background-image: url('/art/bg-login.webp'); }

/* —— page background scenes —— */
body.pg-dashboard, body.pg-colony, body.pg-fleets, body.pg-research,
body.pg-routes, body.pg-market, body.pg-diplomacy, body.pg-espionage,
body.pg-designs, body.pg-battle, body.pg-manual,
body.pg-map, body.pg-system, body.pg-alliance, body.pg-chat,
body.pg-settings, body.pg-siege, body.pg-colonies, body.pg-adjutant,
body.pg-rankings, body.pg-empire, body.pg-contingency, body.admin {
  background-color: #05080f;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body.pg-dashboard { background-image: url('/art/bg-dashboard.webp'); }
body.pg-colony { background-image: url('/art/bg-colony.webp'); }
body.pg-fleets { background-image: url('/art/bg-fleets.webp'); }
body.pg-research { background-image: url('/art/bg-research.webp'); }
body.pg-routes { background-image: url('/art/bg-routes.webp'); }
body.pg-adjutant { background-image: url('/art/bg-adjutant.webp'); }
body.pg-rankings { background-image: url('/art/bg-rankings.webp'); }
body.pg-empire { background-image: url('/art/bg-empire.webp'); }
body.pg-contingency { background-image: url('/art/bg-contingency.webp'); }
body.pg-market { background-image: url('/art/bg-market.webp'); }
body.pg-diplomacy { background-image: url('/art/bg-diplomacy.webp'); }
body.pg-espionage { background-image: url('/art/bg-espionage.webp'); }
body.pg-designs { background-image: url('/art/bg-designs.webp'); }
body.pg-battle { background-image: url('/art/bg-battle.webp'); }
body.pg-manual { background-image: url('/art/bg-manual-body.webp'); }
body.pg-map { background-image: url('/art/bg-map.webp'); }
body.pg-system { background-image: url('/art/bg-system.webp'); }
body.pg-alliance { background-image: url('/art/bg-alliance.webp'); }
body.pg-chat { background-image: url('/art/bg-chat.webp'); }
body.pg-settings { background-image: url('/art/bg-settings.webp'); }
body.pg-siege { background-image: url('/art/bg-siege.webp'); }
body.pg-colonies { background-image: url('/art/bg-colonies.webp'); }
body.admin { background-image: url('/art/bg-admin.webp'); }

/* —— admin event queue table —— */
body.admin td.actions { text-align: right; white-space: nowrap; }
body.admin td.actions form.inline { display: inline-block; margin-left: 0.75rem; }
body.admin td.err-snippet {
  max-width: 28rem;
  overflow-wrap: anywhere;
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
}

/* Give the content column a translucent dark backdrop (same trick as the auth
   pages) so unwrapped headings/paragraphs always have a dark base underneath,
   while the scene stays visible around smaller UI pieces and at the edges.
   Panels keep their solid surfaces on top at full contrast. */
body.pg-dashboard main, body.pg-colony main, body.pg-fleets main,
body.pg-research main, body.pg-routes main, body.pg-market main,
body.pg-diplomacy main, body.pg-espionage main, body.pg-designs main,
body.pg-battle main, body.pg-manual main,
body.pg-map main, body.pg-system main, body.pg-alliance main,
body.pg-chat main, body.pg-settings main, body.pg-siege main,
body.pg-adjutant main, body.pg-rankings main, body.pg-empire main,
body.pg-contingency main,
body.pg-colonies main {
  background:
    linear-gradient(180deg, rgba(7, 11, 20, 0.66), rgba(5, 8, 15, 0.74));
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.05),
    0 16px 48px rgba(0, 0, 0, 0.45);
}

/* Skip heavy full-bleed page scenes on small screens (bandwidth + fixed-bg jank). */
@media (max-width: 640px) {
  body.pg-dashboard, body.pg-colony, body.pg-fleets, body.pg-research,
  body.pg-routes, body.pg-market, body.pg-diplomacy, body.pg-espionage,
  body.pg-designs, body.pg-battle, body.pg-manual,
  body.pg-map, body.pg-system, body.pg-alliance, body.pg-chat,
  body.pg-settings, body.pg-siege, body.pg-colonies, body.pg-adjutant,
body.pg-rankings, body.pg-empire, body.pg-contingency, body.admin {
    background-image: none;
    background-attachment: scroll;
  }
  /* backdrop-filter on main creates a composited layer that iOS Safari can
     paint above sticky chrome into the status-bar band while scrolling. */
  body.pg-dashboard main, body.pg-colony main, body.pg-fleets main,
  body.pg-research main, body.pg-routes main, body.pg-market main,
  body.pg-diplomacy main, body.pg-espionage main, body.pg-designs main,
  body.pg-battle main, body.pg-manual main,
  body.pg-map main, body.pg-system main, body.pg-alliance main,
  body.pg-chat main, body.pg-settings main, body.pg-siege main,
body.pg-adjutant main,
  body.pg-colonies main {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(7, 11, 20, 0.92);
  }
}

.faction {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s;
}
.faction:hover { background: var(--accent-soft); border-color: rgba(0, 229, 255, 0.2); }
.faction img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: cover;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

/* —— icons / art —— */
.ricon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
/* Transparent resource, map/world, and ship art should float cleanly without
   a card border or opaque backing. Building art keeps the framed treatment. */
.ricon,
.site-icon,
.hull-art {
  background: transparent;
  border: none;
  box-shadow: none;
}
table.stocks th .ricon, table.stocks td .ricon { display: none; }
/* Full-height art column in building / planet tables */
td.row-art {
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
  padding: 0.35rem;
  vertical-align: middle;
}
td.row-art img,
.build-icon,
.site-icon {
  display: block;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  background: var(--bg);
}
/* Reassert transparent treatment after the framed building/planet rule above. */
.site-icon,
.hull-art {
  background: transparent;
  border: none;
  box-shadow: none;
}
table.buildings tr {
  min-height: 4.5rem;
}
table.sites tr {
  min-height: 4.5rem;
}
table.buildings td {
  vertical-align: middle;
}
/* Site rows top-align: a foreign colony's right-hand info block can be much
   taller than the site-identity cell, and middle alignment made it float up
   against the divider above — reading as attached to the row's neighbour. */
table.sites td {
  vertical-align: top;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
/* "fissiles 0.23" is one unit — stat pairs wrap between, never inside. */
.site-stats span {
  white-space: nowrap;
}
table.buildings td {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
/* Action labels stay on one line — "Upgrade to 3" breaking inside the
   button reads as two controls. */
table.buildings td:nth-child(4) button {
  white-space: nowrap;
}
table.buildings td:nth-child(4) > form:not(.power-form),
table.buildings td:nth-child(4) > .deconstruct-open {
  width: 100%;
}
table.buildings td:nth-child(4) > form:not(.power-form) button,
table.buildings td:nth-child(4) > .deconstruct-open {
  width: 100%;
}

/* Dark settlement cell: header line, then one compact action row per form.
   All controls (select, number input, button) share one height. */
.dark-settlement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}
.dark-settlement form.inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.dark-settlement label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.dark-settlement select,
.dark-settlement input[type="number"],
.dark-settlement .btn-sm {
  box-sizing: border-box;
  height: 1.8rem;
  padding-top: 0;
  padding-bottom: 0;
}
.dark-settlement select,
.dark-settlement input[type="number"] {
  font-size: 0.8rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  min-width: 0;
  max-width: 100%;
}
.dark-settlement input[type="number"] { width: 4.5rem; }
.dark-settlement .btn-sm { flex: none; }
/* Row-pinned feedback (gift/absorb/siege result) sits flush in the stack. */
.dark-settlement p { margin: 0; }

.unavailable-buildings {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.12);
  color: var(--muted);
  font-size: 0.82rem;
}
.unavailable-buildings summary {
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.unavailable-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  padding-top: 0.45rem;
}
.unavailable-title {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.unavailable-group ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.2rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.unavailable-group li {
  white-space: nowrap;
  color: var(--muted);
}
.unavailable-group li + li::before {
  content: ' · ';
  color: var(--border);
}
.no-build-slots { margin: 0.35rem 0 0.45rem; }

/* —— badges / misc —— */
.badge.off {
  background: rgba(255, 92, 122, 0.15);
  color: #ff9aab;
  border: 1px solid rgba(255, 92, 122, 0.35);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.4rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  text-transform: uppercase;
}
.rate-breakdown {
  min-width: 34rem;
  margin: 0;
  background: var(--surface);
  border-left: 2px solid var(--accent-dim);
}
.rate-breakdown th,
.rate-breakdown td {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  text-align: right;
  white-space: nowrap;
}
.rate-breakdown thead th {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rate-breakdown tbody th {
  color: var(--text-bright);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
}
.rate-breakdown tr:last-child th,
.rate-breakdown tr:last-child td { border-bottom: none; }
.rate-breakdown .rate-net { color: var(--text-bright); font-weight: 600; }
.rate-breakdown .rate-net.negative { color: var(--error); }
.rate-breakdown-scroll {
  margin: 0.3rem 0 0.6rem;
}
.version {
  position: fixed;
  right: 0.75rem;
  bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0;
  z-index: 50;
}
.energy {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 0.65rem 0.9rem 0.75rem;
  margin: 0.6rem 0 1rem;
  box-shadow: var(--panel-glow);
}
.energy-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.energy-title {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.energy-nums { color: var(--muted); }
.energy-bar {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.7rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  box-shadow: none;
}
.energy-bar::-webkit-progress-bar {
  background: var(--bg);
  border-radius: var(--radius);
}
.energy-bar::-webkit-progress-value {
  background: linear-gradient(90deg, #00c8a0, var(--accent));
  border-radius: calc(var(--radius) - 1px);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}
.energy-bar::-moz-progress-bar {
  background: linear-gradient(90deg, #00c8a0, var(--accent));
  border-radius: calc(var(--radius) - 1px);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}
.energy-bar.warn::-webkit-progress-value {
  background: linear-gradient(90deg, #e0b84f, #ff9f43);
  box-shadow: 0 0 12px rgba(224, 184, 79, 0.35);
}
.energy-bar.warn::-moz-progress-bar {
  background: linear-gradient(90deg, #e0b84f, #ff9f43);
  box-shadow: 0 0 12px rgba(224, 184, 79, 0.35);
}
.energy-bar.critical::-webkit-progress-value {
  background: linear-gradient(90deg, #ff5c7a, #ff2d55);
  box-shadow: 0 0 12px rgba(255, 92, 122, 0.4);
}
.energy-bar.critical::-moz-progress-bar {
  background: linear-gradient(90deg, #ff5c7a, #ff2d55);
  box-shadow: 0 0 12px rgba(255, 92, 122, 0.4);
}
.energy-note {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
}
.reactor-form {
  gap: 0.7rem;
}
.reactor-slider-label {
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reactor-rating-value {
  min-width: 2.5rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}
.reactor-slider {
  width: min(17rem, 45vw);
  accent-color: var(--accent);
  cursor: pointer;
}

.reason {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.cost-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.cost-status .reason { margin: 0; }
.afford-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  cursor: help;
  vertical-align: middle;
}
.afford-tip .material-symbols-outlined {
  font-size: 1.05rem;
  margin: 0;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.35));
}
.afford-tip:hover .material-symbols-outlined,
.afford-tip:focus-visible .material-symbols-outlined {
  color: var(--text-bright);
}
.afford-tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 12rem;
  max-width: 18rem;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.35;
  white-space: pre-line;
  color: var(--text-bright);
  background: var(--surface-2);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 229, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 50;
  text-align: left;
}
.afford-tip[data-tip]:hover::after,
.afford-tip[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* —— reports —— */
.report-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.report-list li {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  background: var(--surface);
}
.report-list li:first-child { border-top: 1px solid var(--border); }
.report-list li.unread {
  font-weight: 600;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
}
.report-list .kind {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* —— research —— */
.branch {
  margin-bottom: 1.5rem;
  padding: 0.6rem 0.9rem 0.2rem;
}
.branch h2 { margin-top: 0.3rem; }
table.techs { border: none; box-shadow: none; background: transparent; }
table.techs tr.done td { opacity: 0.55; }
table.techs tr.capstone { background: var(--surface-2); }
table.techs td.state { text-align: right; white-space: nowrap; }

/* —— map —— */
/* The star map gets the page's full width; the battle/siege maps keep sharing
   `.map-wrap` for their panel chrome, so every star-map-only rule below is
   scoped to `.starmap-wrap`. */
body.pg-map main,
body.pg-map .site-footer { max-width: 96rem; }

.map-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  position: relative;
}
.starmap-wrap { overflow: hidden; }
/* The canvas handles its own panning and pinching, so the browser must not
   claim the gesture first (the app shell's scrollport sets `pan-y`). */
.starmap-wrap #starmap { touch-action: none; cursor: grab; }
.starmap-wrap #starmap:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: -2px; }

.map-zoom {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 2;
}
.map-zoom-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(10, 18, 32, 0.82);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.map-zoom-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.map-zoom-btn i { font-size: 0.85rem; }

.map-hint {
  position: absolute;
  left: 0.75rem;
  bottom: 0.5rem;
  margin: 0;
  font-size: 0.72rem;
  pointer-events: none;
}
.map-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/art/bg-map-nebula.webp') center/cover no-repeat;
  border-radius: var(--radius);
  opacity: 0.35;
  pointer-events: none;
}
/* Fills its column; JS sizes the backing store (DPR-aware) to match. */
#starmap {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(18rem, 52vh, 36rem);
}

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0.4rem 0 0.75rem;
}
.map-toolbar-label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.25rem;
}
.map-range-toggle { margin-bottom: 0; margin-left: auto; }

a.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
a.btn-ghost:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.map-finder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
  align-items: stretch;
}
.map-finder input[type="search"],
.map-finder select {
  min-height: 2.6rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}
.map-finder input[type="search"] { flex: 1 1 12rem; min-width: 10rem; }
.map-finder select { flex: 0 1 9rem; }
.map-finder button { min-height: 2.6rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.map-list-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem 0.85rem;
  /* Capped so the map itself still starts above the fold; the list scrolls. */
  max-height: 13rem;
  overflow: auto;
}
.map-list-panel.is-cluster { max-height: 17rem; }
.map-list-panel h2 {
  margin: 0 0 0.55rem;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.map-system-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.35rem;
}
.map-system-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  align-items: stretch;
}
a.map-system-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: rgba(0, 229, 255, 0.03);
}
a.map-system-row:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.map-system-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.map-system-meta {
  color: var(--muted);
  font-size: 0.78rem;
}
a.map-cluster-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
a.map-cluster-jump:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

/* Set by map.js when the pointer is over the matching hull, station or exit
   on the canvas — the same look a direct hover gives, so it reads as one
   thing whichever side you point at. */
.map-system-row.is-hot,
a.map-cluster-jump.is-hot,
a.btn-ghost.is-hot {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

@media (max-width: 900px) {
  .map-system-list {
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  }
  .map-list-panel,
  .map-list-panel.is-cluster {
    max-height: 12rem;
  }
  .map-range-toggle {
    margin-left: 0;
    width: 100%;
  }
}

/* —— designer —— */
.designer { display: flex; flex-direction: column; gap: 0.9rem; }
.designer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem;
  max-width: 58rem;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(5, 8, 15, 0.94);
  z-index: 4;
}
.designer-actions #slot-meter { flex: 0 0 auto; }
.designer-actions > button { margin-left: auto; }
.design-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.design-total strong { color: var(--text-bright); font-weight: 400; }
.design-total strong + span { margin-left: 0.35rem; }
.name-row, .hull-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.hull-row { align-items: flex-start; }
.name-row input[name="name"] { flex: 0 1 24rem; width: 24rem; max-width: 100%; min-width: 12rem; padding: 0.45rem 0.6rem; }
.hull-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  flex: 1 1 auto;
}
.hull-option .hull-art {
  width: 100%;
  height: 3.4rem;
  object-fit: contain;
  margin-bottom: 0.3rem;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.18));
}
.design-ship {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.design-ship .hull-art {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  flex-shrink: 0;
}
.hull-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg);
  color: var(--muted);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
}
.hull-option:hover { border-color: rgba(0, 229, 255, 0.3); }
.hull-option input[name="hull"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.hull-option .hull-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.hull-option .hull-meta { font-size: 0.72rem; color: var(--muted); }
.hull-option .hull-assault { font-size: 0.72rem; color: var(--muted); }
.hull-option.checked {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.18);
  color: var(--text-bright);
}
.hull-option.checked .hull-name { color: var(--text-bright); }
.hull-option.checked .hull-meta { color: var(--accent-dim); }
.hull-option.checked .hull-assault { color: var(--accent); }
.hull-option .hull-assault.muted { color: var(--muted); }
#slot-meter, .meter {
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  width: fit-content;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#slot-meter strong, .meter strong { color: var(--accent); font-weight: 400; }
#slot-meter.over { border-color: var(--error); color: var(--error); box-shadow: 0 0 12px rgba(255, 92, 122, 0.2); }
.module-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; max-width: 58rem; }
label.module {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
label.module:hover { background: var(--accent-soft); border-color: rgba(0, 229, 255, 0.3); }
label.module.checked {
  border-color: var(--accent);
  background: rgba(0, 229, 255, 0.1);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.12);
}
label.module .mod-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
label.module .mod-name { font-weight: 600; color: var(--text-bright); }
label.module .mod-meta { color: var(--muted); font-size: 0.78rem; }
label.module .mod-effect { color: var(--accent); font-size: 0.74rem; }
label.module .module-controls {
  display: grid;
  grid-template-columns: 1.8rem 1.8rem 1.8rem;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  width: 6.6rem;
  max-width: 100%;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(5, 8, 15, 0.55);
}
label.module .module-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.225rem;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: 0.68rem;
  line-height: 1.1;
}
label.module .module-controls button::before {
  content: '';
  position: absolute;
  inset: 0.225rem;
  z-index: -1;
  border: 1px solid rgba(0, 229, 255, 0.6);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #00f0ff 0%, #00b8cc 100%);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
label.module .module-controls button:hover:not(:disabled) { box-shadow: none; }
label.module .module-controls .module-remove,
label.module .module-controls .module-add { justify-self: center; }
label.module .module-controls .module-remove { grid-column: 1; }
label.module .module-controls .qty { grid-column: 2; }
label.module .module-controls .module-add { grid-column: 3; }
label.module .module-controls button:disabled {
  background: transparent;
  cursor: not-allowed;
  opacity: 0.35;
  filter: saturate(0.35);
}
label.module .module-controls button:disabled::before {
  border-color: var(--border);
  background: var(--surface-2);
  box-shadow: none;
}
label.module .qty {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  background: transparent;
  color: var(--text-bright);
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
}
label.module .qty::-webkit-inner-spin-button,
label.module .qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.designs .cost { margin-right: 0.55rem; }
.design-delete-cell { text-align: right; }

@media (max-width: 640px) {
  .designer-actions {
    position: sticky;
    top: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
  .designer-actions > button { min-height: 2.5rem; }
  .design-total { order: 3; flex-basis: 100%; }
  table.designs,
  table.designs tbody { display: block; }
  table.designs > tbody > tr:first-child { display: none; }
  table.designs tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 0.8rem;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(5, 8, 15, 0.88);
  }
  table.designs td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  table.designs td[data-label="Fit-out"],
  table.designs td[data-label="Cost"] {
    grid-column: 1 / -1;
  }
  table.designs .fitout { margin-top: 0; }
  table.designs td[data-label="Cost"] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.65rem;
  }
  table.designs td[data-label="Build time"] { white-space: nowrap; }
  table.designs .cost {
    display: inline-flex;
    margin-right: 0;
    white-space: nowrap;
  }
  table.designs td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 0.48rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  table.designs td[data-label="Cost"]::before { flex: 1 1 100%; }
  table.designs td:first-child { grid-column: 1 / -1; }
  table.designs .design-ship { min-width: 0; }
  table.designs .design-ship strong { overflow-wrap: anywhere; }
  table.designs .design-delete-cell {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  table.designs .design-delete-cell::before { display: none; }
  table.designs .design-delete-cell button { white-space: nowrap; flex-shrink: 0; }
}
.module-summary {
  max-width: 58rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(14, 22, 36, 0.8);
}
.module-summary strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.module-specs { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.module-specs th, .module-specs td { padding: 0.28rem 0.45rem; border-top: 1px solid var(--border); text-align: right; }
.module-specs thead th { border-top: 0; color: var(--muted); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
.module-specs th:first-child, .module-specs tbody th { text-align: left; color: var(--text); }
.module-specs tbody td { color: var(--accent); font-family: var(--font-display); }
label.module .mod-ico-static {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1rem;
}

/* Ship equipment icons (colony shipyard cards + design fit-out) */
.fitout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}
.fitout-empty {
  margin-top: 0.25rem;
  font-size: 0.78rem;
}
.mod-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.28rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--accent);
  font-size: 0.95rem;
  cursor: help;
  outline: none;
}
.mod-ico:hover,
.mod-ico:focus-visible {
  border-color: rgba(0, 229, 255, 0.45);
  background: var(--accent-soft);
  color: var(--text-bright);
}
.mod-ico .mod-qty {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Custom SVG module glyphs (fa-missile / fa-pd / fa-ion-drive) are swapped in
   by fa-replacements.css, which hides the FA glyph and paints an SVG mask over
   this box. Those classes have no Font Awesome codepoint, so an empty <i>
   collapses to 0 height — give it real dimensions to paint the mask on. */
.mod-ico i.fa-solid.fa-missile,
.mod-ico i.fa-solid.fa-pd,
.mod-ico i.fa-solid.fa-ion-drive {
  width: 1.25em;
  height: 1em;
}
.mod-ico[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 11rem;
  max-width: 18rem;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.35;
  white-space: pre-line;
  color: var(--text-bright);
  background: var(--surface-2);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 229, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 50;
  text-align: left;
}
.mod-ico[data-tip]:hover::after,
.mod-ico[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* —— fleets / ships —— */
.fleet-list { list-style: none; padding: 0; margin: 0; }
.fleet-list li {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}
.fleet-list li:first-child { border-top: 1px solid var(--border); }
/* System-page fleet rows: copy left, actions pinned to the right edge */
.sys-fleet-row { gap: 0.75rem; }
.sys-fleet-row-main { flex: 1 1 auto; min-width: 0; }
.sys-fleet-row-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}
.sys-fleet-row-actions form { margin: 0; }
@media (max-width: 640px) {
  .sys-fleet-row { flex-wrap: wrap; }
  .sys-fleet-row-actions { margin-left: 0; }
}
.ship {
  margin-right: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.1rem 0.35rem;
  display: inline-block;
  background: var(--bg);
}
.ship-more { color: var(--accent-dim); }
.gates {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.gates li {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.45rem 0.7rem;
  box-shadow: var(--panel-glow);
}

/* —— gate toll card —— */
.toll-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.9rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}
.toll-fields {
  display: flex;
  gap: 0.7rem;
}
.toll-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.toll-field label {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.toll-field input {
  width: 4.6rem;
  padding: 0.32rem 0.45rem;
  font-size: 0.8rem;
}
.toll-presets {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
}
.toll-presets span {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.15rem;
}
.toll-presets .btn-sm {
  padding: 0.2rem 0.42rem;
  font-size: 0.48rem;
}
.toll-submit {
  margin-left: auto;
  padding-bottom: 0.05rem;
}
.toll-cap {
  flex-basis: 100%;
  font-size: 0.6rem;
  margin: 0.35rem 0 0;
}

/* —— fleet management —— */
.fleet-mgmt {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.55rem 0 1.25rem;
}
.fleet-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.04), transparent 40%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--panel-glow);
  padding: 0;
  overflow: hidden;
}
.fleet-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem 1.2rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
}
.fleet-summary-main { flex: 1 1 auto; min-width: 0; }
.fleet-loc-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}
.fleet-name {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}
.fleet-status {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fleet-status.status-transit { border-color: rgba(0, 229, 255, 0.4); color: var(--accent); }
.fleet-status.status-committed { border-color: rgba(255, 179, 71, 0.55); color: #ffc46b; }
.fleet-composition-summary,
.fleet-doctrine-summary {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.fleet-composition-summary strong { color: var(--text); font-weight: 600; }
.fleet-doctrine-summary { font-size: 0.72rem; }
.fleet-ships {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.fleet-ship-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}
.fleet-ship-row .fitout { margin-top: 0; }
.fleet-ship-row .fitout-empty { margin-top: 0; font-size: 0.75rem; }
.ship-serial { font-size: 0.8em; color: var(--muted); font-variant-numeric: tabular-nums; }
.fleet-loc {
  margin: 0;
  color: var(--muted);
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}
.fleet-loc a { margin-left: 0; }
.fleet-origin { font-size: 0.72rem; color: var(--muted); }
.fleet-primary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.fleet-primary-actions form { margin: 0; }
.fleet-recall {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
.fleet-recall .btn-sm { align-self: flex-end; }
.fleet-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin: 0 0 0.6rem;
}
.fleet-card-actions .linklike i { margin-right: 0.3rem; }
.fleet-card-details {
  border-top: 1px solid var(--border);
}
.fleet-card-details > summary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}
.fleet-card-details > summary:hover,
.fleet-card-details > summary:focus-visible { color: var(--accent); }
.fleet-card-details[open] > summary { border-bottom: 1px solid var(--border); color: var(--accent); }
.fleet-card-detail-body { padding: 0.75rem 0.9rem 0.2rem; }
.fleet-card-details .fleet-doctrine { padding: 0.75rem 0.9rem 0.9rem; }

/* Fleet range profile — strength across the close/medium/long bands */
.fleet-strength { margin-bottom: 0.65rem; }
.fs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin-bottom: 0.25rem;
}
.fs-title {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.fs-hint { font-size: 0.7rem; color: var(--muted); }
.fs-chart { display: block; width: 100%; max-width: 480px; }
.fs-track { fill: rgba(255, 255, 255, 0.03); }
.fs-seg { fill-opacity: 0.32; stroke: none; }
.fs-seg:hover,
.fs-seg:focus-visible { fill-opacity: 0.55; }
.fs-main {
  fill-opacity: 0.62;
  stroke: #ffffff;
  stroke-opacity: 0.75;
  stroke-width: 1;
}
.fs-col-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted);
}
.fs-col-label.is-peak { fill: var(--text-bright); }
.fs-peak-note {
  font-size: 8px;
  letter-spacing: 0.06em;
  fill: var(--accent);
}
.fs-legend {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.fs-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
}
.fs-legend li.is-main .fs-name { color: var(--text-bright); }
.fs-chip { width: 10px; height: 10px; flex: none; }
.fs-name { font-weight: 600; }
.fs-range { color: var(--muted); font-variant-numeric: tabular-nums; }
.fs-share { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.fs-pd-row .fs-name,
.fs-pd-row .fs-range { color: var(--muted); }
.fs-pd-row .fs-name { font-weight: 500; }

.fleet-roster-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 1rem;
}
.fleet-roster-tools input,
.fleet-roster-tools select {
  min-height: 2.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.4rem 0.55rem;
}
.fleet-roster-tools input { flex: 1 1 15rem; }
.fleet-roster-tools select { flex: 0 1 10rem; }
.fleet-group-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 1.15rem 0 0.35rem;
  font-size: 0.72rem;
  color: var(--text-bright);
}
.fleet-group-head { display: inline-flex; align-items: center; gap: 0.35rem; }
.fleet-group-action {
  margin-left: auto;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fleet-filter-empty { margin: 1rem 0; }
.fleet-empty {
  max-width: 34rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.fleet-empty p { margin-top: 0; }
.fleet-empty-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.fleet-picked {
  display: inline-block;
  margin-left: 0.45rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.course-banner { margin-bottom: 0.8rem; }
.ship-cancel-form { margin: 0.35rem 0 0; }
.ship-cancel-form .btn-sm { color: #fff; }
.ship-queue li { display: flex; align-items: center; gap: 1rem; }
.ship-queue-info { flex: 1 1 auto; min-width: 0; }
.ship-queue-action { flex: 0 0 auto; margin-left: auto; text-align: right; }
.ship-queue-action .ship-cancel-form { margin: 0; }

/* Move-ships modal (native <dialog>) */
dialog.fleet-transfer-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(0, 229, 255, 0.06), transparent 42%),
    var(--surface);
  color: var(--text);
  box-shadow: var(--panel-glow);
  overflow: auto;
}
dialog.fleet-transfer-dialog::backdrop {
  background: rgba(4, 10, 18, 0.72);
}
.fleet-transfer-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.fleet-transfer-form { margin-top: 0.7rem; }
.ship-pick-preview {
  margin: -0.25rem 0 0.55rem;
  min-height: 1rem;
  color: var(--accent);
  font-size: 0.78rem;
}
.ship-pick-toolbar {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 0.55rem;
}
.fleet-join-peer {
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--border);
}
.fleet-join-peer:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.fleet-join-peer-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-bright);
  margin: 0 0 0.5rem;
}
.fleet-join-peer .ship-pick-list {
  margin-bottom: 0.25rem;
}
.ship-pick-list {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ship-pick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.ship-pick-row.is-selected {
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.06);
}
.ship-pick-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
}
.ship-pick-check input { flex: 0 0 auto; }
.ship-pick-name {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.ship-pick-row .fitout,
.ship-pick-row .fitout-empty { margin: 0; }
/* Send-fleet picker rows carry name, ship chips, and Gate/STL actions —
   three blocks that cannot share a radio-row grid. Stack them so long names
   wrap naturally, chips flow, and the buttons stay inside the card. */
#sendfleet-dialog .ship-pick-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  cursor: default;
}
#sendfleet-dialog .ship-pick-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
  min-width: 0;
}
#sendfleet-dialog .ship-pick-row > span.muted {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
#sendfleet-dialog .ship-pick-row .ship { margin-right: 0; }
#sendfleet-dialog .fleet-drone-filter {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
  cursor: pointer;
}
#sendfleet-dialog .fleet-drone-filter input { flex: 0 0 auto; }
#sendfleet-dialog .fleet-send-actions {
  margin-top: 0.1rem;
}
.ship-pick-qty {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ship-pick-qty input,
.fleet-transfer-dest select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius);
  width: 4.5rem;
  max-width: 100%;
  font-size: 0.9rem;
}
.fleet-transfer-dest {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fleet-transfer-dest select { width: 100%; max-width: 18rem; }
.fleet-transfer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}
.deconstruct-open { margin-top: 0.35rem; }
.deconstruct-recovery {
  margin: 0.45rem 0 0.55rem;
  padding-left: 1.15rem;
  font-size: 0.88rem;
}
.deconstruct-recovery li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.2rem 0;
}
@media (max-width: 560px) {
  .ship-pick-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ship-pick-row .fitout,
  .ship-pick-row .fitout-empty { grid-column: 1 / -1; }
  .ship-pick-qty { align-items: flex-start; }
}
.fleet-doctrine {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.25rem;
}
.stance, .order {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0;
}
.stance > label,
.order > label,
.order-param > label {
  font-family: var(--font-display);
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.stance select, .stance input, .order select, .order input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius);
  width: 100%;
  max-width: 100%;
}
.stance .retreat-label { margin-top: 0.2rem; }
.stance input { max-width: 6rem; }
.percent-field { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.percent-field span { font-size: 0.78rem; }
.order-hint { min-height: 1.25rem; margin: 0; font-size: 0.78rem; }
.order-param {
  display: none;
  flex-direction: column;
  gap: 0.35rem;
}
form.order:has(select[name="type"] option[value="blockade"]:checked) .order-param[data-for="gate"],
form.order:has(select[name="type"] option[value="evade"]:checked) .order-param[data-for="harbor"],
form.order:has(select[name="type"] option[value="reinforce"]:checked) .order-param[data-for="target"] {
  display: flex;
}
.order-summary {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
}
.order-summary strong { color: var(--text); font-weight: 600; }
.stance button, .order button {
  align-self: flex-start;
  margin-top: auto;
}
.order button[type="submit"] { align-self: flex-end; }
@media (max-width: 720px) {
  .fleet-doctrine { grid-template-columns: 1fr; }
  .fleet-card-head { align-items: flex-start; }
  .order button[type="submit"] { align-self: flex-start; }
}
@media (max-width: 560px) {
  .fleet-card-head { flex-direction: column; padding: 0.7rem; }
  .fleet-loc-col {
    width: 100%;
    align-items: flex-end;
  }
  .fleet-loc { justify-content: flex-end; }
  .fleet-primary-actions { width: 100%; justify-content: flex-end; }
  .fleet-card-details > summary { padding-inline: 0.7rem; }
  .fleet-card-detail-body,
  .fleet-card-details .fleet-doctrine { padding-inline: 0.7rem; }
  .fleet-status { margin-left: 0.35rem; }
  .fleet-roster-tools input { flex: 1 1 100%; }
  .fleet-roster-tools select { flex: 1 1 auto; }
  .fleet-roster-tools button { flex: 0 0 auto; }
}
table.rounds td, table.forces td { vertical-align: top; }

/* Espionage history stays tabular on wide screens, but each operation becomes
   a readable labelled card on phones instead of a five-column squeeze. */
@media (max-width: 640px) {
  table.esp-history,
  table.esp-history tbody,
  table.esp-history tr,
  table.esp-history td {
    display: block;
  }
  /* Pug renders the compact report header as the first table row. */
  table.esp-history > tbody > tr:first-child { display: none; }
  table.esp-history tr {
    padding: 0.7rem;
    margin-bottom: 0.7rem;
    border: 1px solid var(--border);
  }
  table.esp-history td {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
  }
  table.esp-history td:last-child { border-bottom: none; }
  table.esp-history td::before {
    content: attr(data-label);
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  table.esp-history td.esp-result {
    display: block;
  }
  table.esp-history td.esp-result::before {
    display: block;
    margin-bottom: 0.3rem;
  }
}

/* —— chat —— */
.chat-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.chat-tabs > a, .chat-tabs > span {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface);
}
.chat-tabs a.active {
  color: #041018;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 400;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.3);
}
.chat-tabs a:hover:not(.active) { color: var(--accent); border-color: rgba(0, 229, 255, 0.35); }
.chat-tab-reminder {
  top: -0.2rem;
  right: -0.2rem;
}
.private-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 24rem) minmax(0, 1fr);
  min-height: 34rem;
  border: 1px solid var(--border);
  background: rgba(5, 10, 20, 0.72);
}
.private-inbox {
  border-right: 1px solid var(--border);
  background: rgba(8, 15, 28, 0.78);
}
.private-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.private-inbox-head strong,
.private-inbox-head .muted {
  display: block;
}
.private-inbox-head .muted { margin-top: 0.2rem; font-size: 0.7rem; }
.private-new { position: relative; }
.private-new summary { list-style: none; cursor: pointer; white-space: nowrap; }
.private-new summary::-webkit-details-marker { display: none; }
.private-new[open] summary { color: #041018; background: var(--accent); }
.private-recipient {
  position: absolute;
  z-index: 2;
  right: 0;
  top: calc(100% + 0.45rem);
  width: min(18rem, 75vw);
  padding: 0.8rem;
  border: 1px solid var(--border-strong);
  background: var(--panel, #0a1220);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.45);
}
.private-recipient label { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.72rem; }
.private-new-row { display: flex; gap: 0.4rem; }
.private-new-row input { min-width: 0; flex: 1; }
.private-chat-tabs { display: flex; flex-direction: column; gap: 0; margin: 0; }
.private-conversation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-bottom: 1px solid rgba(30, 45, 69, 0.65);
  color: var(--text);
  background: transparent;
  text-decoration: none;
}
.private-conversation:hover { background: rgba(0, 229, 255, 0.06); }
.private-conversation.active {
  color: var(--text-bright);
  background: rgba(0, 229, 255, 0.12);
  box-shadow: inset 3px 0 var(--accent);
}
.private-conversation-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.private-conversation-main strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.private-preview {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.private-conversation-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.65rem;
  margin-left: 0.5rem;
  white-space: nowrap;
  text-align: right;
}
.private-conversation .nav-reminder { top: 0.75rem; right: 0.85rem; }
.private-empty { padding: 1.2rem 0.9rem; color: var(--muted); }
.private-thread { min-width: 0; display: flex; flex-direction: column; }
.private-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.private-thread-head h2 { margin: 0; font-size: 1rem; }
.private-thread-head p { margin: 0.25rem 0 0; font-size: 0.7rem; }
.private-thread-head form { margin: 0; }
.chat-list.private-messages,
.private-messages {
  flex: 1;
  max-height: 25rem;
  min-height: 20rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0;
  background: transparent;
  overflow-y: auto;
}
.chat-list.private-messages li,
.private-messages li {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.6rem 0.9rem;
  margin: 0.45rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.chat-list.private-messages .message-incoming,
.private-messages .message-incoming {
  background: rgba(18, 31, 51, 0.85);
}
.chat-list.private-messages .message-outgoing,
.private-messages .message-outgoing {
  background: rgba(0, 110, 135, 0.22);
  border-color: rgba(0, 229, 255, 0.35);
}
.message-meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; font-size: 0.7rem; }
.message-meta strong { color: var(--accent); }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.private-composer { margin: 0; padding: 0.8rem; border-top: 1px solid var(--border); }
.private-thread-empty { display: grid; place-items: center; align-content: center; min-height: 34rem; padding: 2rem; text-align: center; }
.private-thread-empty .material-symbols-outlined { color: var(--accent); font-size: 2.8rem; }
.private-thread-empty h2 { margin: 0.7rem 0 0.3rem; }
.private-thread-empty p { margin: 0; }
@media (max-width: 760px) {
  .private-shell { display: block; min-height: 0; }
  .private-inbox { border-right: 0; border-bottom: 1px solid var(--border); }
  .private-chat-tabs { display: flex; flex-direction: row; overflow-x: auto; }
  .private-conversation { flex: 0 0 12rem; border-right: 1px solid rgba(30, 45, 69, 0.65); }
  .private-thread-head { padding: 0.8rem; }
  .private-messages { min-height: 18rem; max-height: 50vh; }
  .private-thread-empty { min-height: 18rem; }
}
.chat-list {
  list-style: none;
  padding: 0.65rem 0.85rem;
  margin: 0.5rem 0;
  max-height: 24rem;
  overflow-y: auto;
}
.chat-list:not(.private-messages) li { padding: 0.25rem 0; font-size: 0.9rem; border-bottom: 1px solid rgba(30, 45, 69, 0.5); }
.chat-list .author { color: var(--accent); font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.04em; }
/* Player names never wrap across lines. */
.pname { white-space: nowrap; }

/* —— rankings —— */
.rank-gold {
  color: #ffd166;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.4);
}
.faction-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  vertical-align: middle;
}
.faction-logo {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}
.chatform { display: flex; gap: 0.5rem; }
.chatform input[type="text"] {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
}

/* —— queue / countdown / cost —— */
.queue { padding-left: 0; list-style: none; }
.scan-buildings {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.scan-buildings li {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  background: var(--surface);
}
.queue li {
  padding: 0.4rem 0.7rem;
  border-left: 2px solid var(--accent);
  background: var(--surface);
  margin-bottom: 0.3rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
}
.queue-action {
  margin-left: auto;
}
.build-queue li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.countdown {
  color: var(--accent);
  margin-left: 0.6rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}
.queue-meta {
  color: var(--muted);
  margin-left: 0.6rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}
.queue-meta .countdown {
  margin-left: 0;
}

/* Dashboard active tasks: label left, remaining duration right */
.task-count {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-left: 0.25rem;
}
.task-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--panel-glow);
}
.task-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: rgba(0, 229, 255, 0.03); }
.task-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}
.task-main .kind-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent);
  flex-shrink: 0;
}
.task-main .kind-icon .material-symbols-outlined {
  font-size: 1.15rem;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.35));
}
.task-label {
  color: var(--text-bright);
  text-decoration: none;
  font-weight: 500;
}
a.task-label:hover { color: var(--accent); }
.task-place {
  font-size: 0.85rem;
}
.task-eta {
  margin-left: 0;
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  min-width: 7.5rem;
}

/* Colonies table: a stock and its cap read as one unit — never split
   "406 / 17,000" across lines. */
table.colonies-table td.colony-material-cell {
  white-space: nowrap;
}

/* Market order line wraps between clusters (side / qty×resource / price),
   never between "@ 1" and "metals each". */
.market-order-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.market-order-line .order-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  table.colonies-table {
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  table.colonies-table thead { display: none; }
  table.colonies-table tbody,
  table.colonies-table tr {
    display: block;
  }
  table.colonies-table tr {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(5, 8, 15, 0.88);
  }
  table.colonies-table tr:last-child { margin-bottom: 0; }
  table.colonies-table tr:hover td { background: transparent; }
  table.colonies-table td {
    display: inline;
    width: auto;
    padding: 0;
    vertical-align: top;
    border-bottom: none;
  }
  table.colonies-table td.colony-name-cell {
    display: block;
    width: 100%;
    min-width: 0;
    margin-bottom: 0.2rem;
    overflow-wrap: anywhere;
  }
  table.colonies-table td.colony-system-cell,
  table.colonies-table td.colony-site-cell,
  table.colonies-table td.colony-queue-cell {
    font-size: 0.85rem;
  }
  table.colonies-table td.colony-site-cell::before,
  table.colonies-table td.colony-queue-cell::before {
    content: "·";
    margin: 0 0.4rem;
    color: var(--muted);
  }
  .colony-queue-label {
    display: inline;
    margin-right: 0.25rem;
    font-family: var(--font-display);
    font-size: 0.48rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  table.colonies-table td.colony-material-cell { display: none; }
  table.colonies-table td.colony-mobile-materials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.55rem 0 0.1rem;
    border-top: 1px solid var(--border);
  }
  .colony-mobile-material {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    min-width: 0;
  }
  .colony-mobile-res {
    font-family: var(--font-display);
    font-size: 0.48rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .colony-mobile-qty {
    min-width: 0;
    /* A stock and its cap are one unit — "406 / 17,000" never splits. */
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .task-row {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.7rem;
  }
  .task-eta {
    min-width: 6.25rem;
    font-size: 0.58rem;
    padding-top: 0.15rem;
  }
  .task-place {
    flex: 1 1 100%;
  }
}

.cost-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.65rem;
}
.cost-label {
  color: var(--muted);
  margin-right: 0;
}
.cost {
  display: inline-block;
  margin-right: 0;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
.cost-res { color: var(--muted); }
.cost-amt {
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  /* keep a real space in markup; nudge amount for readable separation */
  margin-left: 0.2em;
}
.cost::before { content: none; }
.cost-eta {
  color: var(--muted);
  white-space: nowrap;
  font-size: 0.85rem;
}

/* Shipyard rows: keep name / cost / action on one tight band */
table.ships td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  vertical-align: middle;
}
table.ships td.ship-actions {
  white-space: normal;
  text-align: right;
  min-width: 9rem;
}
table.ships td.ship-actions form {
  display: block;
}
table.ships td.ship-actions form button {
  width: auto;
  min-width: 7.5rem;
}
table.ships .reason {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.35rem;
  font-size: 0.8rem;
}

/* Nested shipyard cost breakdown */
table.cost-table {
  width: auto;
  min-width: 11rem;
  margin: 0 0 0.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: none;
}
table.cost-table th,
table.cost-table td {
  padding: 0.25rem 0.55rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
table.cost-table th {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
}
table.cost-table td.cost-res {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-variant-numeric: normal;
  white-space: nowrap;
  padding-right: 0.85rem;
}
table.cost-table td.cost-amt {
  color: var(--text-bright);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.cost-table tr:last-child td { border-bottom: none; }
table.cost-table tr:hover td { background: transparent; }

/* Per-level building power steps — label appears on hover above the control */
.power-form {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  width: fit-content;
}
.power-form[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-bright);
  background: var(--surface-2);
  border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 229, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 0.12s, transform 0.12s;
  z-index: 40;
  white-space: nowrap;
}
.power-form:hover[data-tip]::before,
.power-form:focus-within[data-tip]::before {
  opacity: 1;
  transform: translateY(0);
}
.power-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  line-height: 1;
}
.power-ico .material-symbols-outlined {
  font-size: 1.15rem;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.35));
}
.power-step .material-symbols-outlined {
  font-size: 0.9rem;
  padding: 0 0.05rem;
  vertical-align: -0.12em;
}
.power-steps {
  display: inline-flex;
  gap: 0.2rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  padding: 0.15rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.power-form .power-steps {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
button.power-step {
  flex: 0 0 auto;
  min-width: 2rem;
  height: 1.85rem;
  padding: 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: var(--radius);
}
button.power-step:hover:not(:disabled) {
  filter: none;
  color: var(--accent);
  border-color: rgba(0, 229, 255, 0.4);
  background: var(--accent-soft);
  box-shadow: none;
}
button.power-step.on {
  background: linear-gradient(180deg, #00f0ff 0%, #00b8cc 100%);
  color: #041018;
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

.report-list li {
  display: block;
}
.report-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.6rem;
}
.report-list .kind-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent);
  flex-shrink: 0;
}
.report-list .kind-icon .material-symbols-outlined {
  font-size: 1.15rem;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.35));
}
.report-links {
  display: inline-flex;
  gap: 0.3rem;
  margin-left: auto; /* push the jump buttons to the right edge of the row */
}
.report-subject {
  margin-top: 0.35rem;
  line-height: 1.35;
}
.report-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.report-link:hover { color: var(--text-bright); border-color: rgba(0, 229, 255, 0.45); }
.report-link .material-symbols-outlined { font-size: 0.85rem; color: var(--accent); }

.toggle {
  color: var(--muted);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* —— manual —— */
.manual table { border-collapse: collapse; margin: 0.6rem 0; }
.manual th, .manual td { border: 1px solid var(--border); padding: 0.35rem 0.6rem; }
.manual th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.58rem;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
}
.manual img {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.5rem 0;
  display: block;
  box-shadow: var(--panel-glow);
}
.manual td img {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: 0 0.4rem 0 0;
  vertical-align: middle;
  object-fit: cover;
  box-shadow: none;
}
.manual blockquote {
  border-left: 3px solid var(--accent);
  margin: 0.5rem 0;
  padding: 0.4rem 0.75rem;
  color: var(--muted);
  background: var(--accent-soft);
}
.manual code {
  background: var(--surface);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius);
}
.manual h1::before { display: none; }
.manual :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 1rem;
}
.manual :is(h1, h2, h3, h4, h5, h6) > a {
  color: inherit;
  text-decoration: none;
}
.manual :is(h1, h2, h3, h4, h5, h6) > a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* —— api token —— */
.api-token {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--panel-glow);
}

/* —— section spacing —— */
section.reports { margin-bottom: 1.5rem; }
.reports-more {
  margin: 0.55rem 0 0;
}
.reports-more form.inline {
  display: inline;
  margin: 0;
}

/* —— scrollbar —— */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* —— responsive —— */
@media (max-width: 900px) {
  .mainnav { justify-content: flex-start; }
  .nav-ico { width: 2.15rem; height: 2.15rem; }
  .nav-ico .material-symbols-outlined { font-size: 1.2rem; }
  main { padding: 1rem 0.75rem 2.5rem; }
  td.row-art { width: 3.5rem; min-width: 3.5rem; max-width: 3.5rem; }
  td.row-art img, .build-icon, .site-icon { width: 3rem; height: 3rem; }
}

/* Phones: stack dense tables, enlarge touch targets, avoid horizontal crush */
@media (max-width: 640px) {
  .topbar {
    padding: calc(0.45rem + env(safe-area-inset-top, 0px)) 0.65rem 0.45rem;
    gap: 0.55rem;
    align-items: stretch;
  }
  .brand { font-size: 0.78rem; letter-spacing: 0.16em; }
  .mainnav {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.15rem;
    padding-inline-end: 0.35rem;
  }
  .nav-ico {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
  }
  .nav-ico .material-symbols-outlined { font-size: 1.4rem; }
  .nav-ico i.fa-solid,
  .nav-ico i.fa-duotone { font-size: 1.2rem; }
  /* Hover tips are useless on touch; title still provides a fallback */
  .nav-ico[data-tip]::after { display: none; }
  .session {
    margin-left: auto;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .session > a:not(.nav-ico) span:not(.material-symbols-outlined) {
    display: none;
  }
  .session .player-tag {
    max-width: min(9rem, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  main { padding: 0.85rem 0.65rem 2.5rem; }
  h1 { font-size: 1.1rem; gap: 0.45rem; }
  h2 { font-size: 0.78rem; }

  .energy-head { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .energy-nums { font-size: 0.52rem; }

  /* Stocks / wide tables: sideways scroll instead of crushing columns */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--panel-glow);
  }
  .table-scroll table {
    margin: 0;
    min-width: 28rem;
    border: none;
    box-shadow: none;
  }
  /* Card-stack tables (colonies, designs) reflow into cards — do not force a
     desktop min-width that clips under overflow-x: hidden on .app-scroll. */
  .table-scroll.card-stack {
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .table-scroll.card-stack table {
    min-width: 0;
    width: 100%;
  }
  table.stocks th,
  table.stocks td {
    padding: 0.4rem 0.45rem;
    font-size: 0.82rem;
  }
  table.stocks.colonies-table td {
    padding: 0;
  }
  table.stocks th {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
  }
  table.stocks th .ricon,
  table.stocks td .ricon {
    display: inline-block;
  }

  .rate-breakdown { font-size: 0.78rem; padding: 0.45rem 0.55rem; }

  /* Buildings + shipyard: card stack instead of multi-column rows */
  table.buildings,
  table.ships {
    border: none;
    background: transparent;
    box-shadow: none;
  }
  table.buildings tbody,
  table.ships tbody {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  table.buildings tr,
  table.ships tr {
    display: grid;
    gap: 0.55rem 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--panel-glow);
    min-height: 0;
  }
  table.buildings tr {
    grid-template-columns: 3.25rem 1fr;
    grid-template-areas:
      "art info"
      "cost cost"
      "actions actions";
  }
  table.ships tr {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "cost"
      "actions";
    gap: 0.45rem;
    padding: 0.75rem;
    align-items: stretch;
  }
  table.buildings td,
  table.ships td {
    display: block;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    border-bottom: none;
    vertical-align: top;
  }
  table.buildings tr:hover td,
  table.ships tr:hover td { background: transparent; }
  table.buildings td.row-art {
    grid-area: art;
    width: 3.25rem;
    min-width: 3.25rem;
    max-width: 3.25rem;
    padding: 0;
  }
  table.buildings td.row-art img,
  .build-icon {
    width: 3.25rem;
    height: 3.25rem;
  }
  table.buildings tr > td:nth-child(2) { grid-area: info; }
  table.buildings tr > td:nth-child(3),
  table.ships tr > td:nth-child(2) { grid-area: cost; }
  table.buildings tr > td:nth-child(4),
  table.ships tr > td:nth-child(3) { grid-area: actions; }
  table.ships tr > td:nth-child(1) { grid-area: name; }

  .cost-line { gap: 0.15rem 0.55rem; }
  .cost {
    font-size: 0.85rem;
  }
  .cost-amt { margin-left: 0.25em; }
  .cost-eta { font-size: 0.8rem; }
  table.ships td.ship-actions,
  table.ships td:nth-child(3) {
    text-align: left;
    white-space: normal;
  }
  table.ships td.ship-actions form,
  table.ships td form {
    display: block;
  }
  table.ships td.ship-actions form button,
  table.ships td form button {
    width: 100%;
    min-width: 0;
    min-height: 2.6rem;
  }
  table.ships .reason {
    margin-top: 0.4rem;
    text-align: left;
    justify-content: flex-start;
  }

  .power-form {
    width: 100%;
    margin-bottom: 0.55rem;
  }
  .power-form[data-tip]::before { display: none; }
  .power-steps {
    flex: 0 1 auto;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .power-form .power-steps {
    width: 100%;
    justify-content: flex-start;
  }
  button.power-step {
    min-width: 2.4rem;
    height: 2.25rem;
    font-size: 0.58rem;
  }
  table.buildings td form:not(.power-form) {
    display: block;
  }
  table.buildings td form:not(.power-form) button {
    width: 100%;
    min-height: 2.6rem;
  }

  /* Site / tech tables: scroll when wide */
  table.sites,
  table.techs {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .chatform { flex-direction: column; }
  .chatform button { width: 100%; min-height: 2.6rem; }
  .stack { max-width: 100%; padding: 0.9rem; clip-path: none; }
  body.auth main { padding: 1.1rem 1rem; margin-top: 1rem; }
}

/* —— battle reports —— */
.pg-battle h1 .fa-burst { color: var(--accent); }
.pg-battle h1, .pg-siege h1 { margin-bottom: 0.45rem; padding-bottom: 0.4rem; }
.pg-battle h2, .pg-siege h2 { margin: 0.85rem 0 0.4rem; }
.pg-battle .battle-meta, .pg-siege .battle-meta { margin: 0 0 0.45rem; }
.battle-meta { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }

/* Verdict banner: outcome + the "why". Green for a win, red for a loss,
   amber for anything that ended without a decisive winner. */
.battle-verdict {
  margin: 0.35rem 0 0.65rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--surface);
  box-shadow: var(--panel-glow);
}
.battle-verdict.win      { border-left-color: var(--success); }
.battle-verdict.loss     { border-left-color: var(--error); }
.battle-verdict.retreat  { border-left-color: var(--warn); }
.verdict-line {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.verdict-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.battle-verdict.win .verdict-label      { color: var(--success); }
.battle-verdict.loss .verdict-label     { color: var(--error); }
.battle-verdict.retreat .verdict-label  { color: var(--warn); }
.verdict-text { flex: 1 1 auto; min-width: min(20rem, 100%); }
.verdict-weapons {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.86rem;
}
.verdict-wside strong { color: var(--text-bright); margin-right: 0.3rem; }
.verdict-engagement { margin-top: 0.25rem; font-size: 0.86rem; }
.verdict-engagement .vs, .verdict-weapons .vs { color: var(--muted); padding: 0 0.25rem; }

/* Per-fleet doctrine + speed + survivors strip under the verdict */
.verdict-fleets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.verdict-fleets .fleet-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  width: auto;
  gap: 0.3rem 0.7rem;
  font-size: 0.84rem;
}
.fleet-card-name {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.fleet-stat { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fleet-stat i { color: var(--accent); margin-right: 0.25rem; }

/* Tactical map */
.map-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--panel-glow);
  padding: 0.45rem;
}
svg.battle-map, svg.siege-map { display: block; width: 100%; height: auto; background: #070d18; }
/* One round at a time. `hidden` is inert inside an <svg>, so frames are
   switched by class — server-rendered with the last round already active. */
svg.battle-map .frame, svg.siege-map .frame { display: none; }
svg.battle-map .frame.active, svg.siege-map .frame.active { display: inline; }
.zone { stroke: none; }
.zone-close   { fill: rgba(255, 92, 122, 0.06); }
.zone-medium  { fill: rgba(124, 92, 255, 0.06); }
.zone-long    { fill: rgba(0, 120, 180, 0.07); }
.zone-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--muted);
  text-anchor: middle;
}
.zone-range {
  font-size: 10px;
  fill: var(--muted);
  text-anchor: middle;
  opacity: 0.75;
}
.axis-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 6; }

/* Weapon envelopes: min–max firing arcs around each fleet. The shape is
   filled flat; only its min/max arcs are stroked, so no radial edge cuts
   across the battlefield. */
.envelope { fill-opacity: 0.035; stroke: none; }
.envelope.in-range { fill-opacity: 0.09; }
.envelope-edge {
  fill: none;
  stroke-width: 1;
  stroke-opacity: 0.22;
  stroke-dasharray: 4 5;
}
.envelope-edge.in-range {
  stroke-opacity: 0.75;
  stroke-dasharray: none;
  stroke-width: 1.4;
}

/* Range calipers between the two fleet lines */
.contact-line { stroke-width: 1; stroke-dasharray: 2 5; }
.contact-a { stroke: rgba(0, 229, 255, 0.45); }
.contact-b { stroke: rgba(255, 92, 122, 0.45); }
.range-caliper { stroke: rgba(224, 240, 255, 0.35); stroke-width: 1; }
.range-readout {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  fill: var(--text-bright);
}

/* Ships, wrecks, shots */
.ship { stroke: #05080f; stroke-width: 0.8; }
.ship-a { fill: var(--accent); }
.ship-b { fill: #ff5c7a; }
.wreck line { stroke: rgba(150, 170, 190, 0.4); stroke-width: 1.6; }
.wreck-new line { stroke: rgba(255, 190, 120, 0.9); stroke-width: 2; }
.shot { opacity: 0.7; stroke-linecap: round; }
.shot-missile { stroke-dasharray: 9 7; }
.shot-kinetic { stroke-dasharray: 2 6; }
/* Killing salvos converge on the marker they destroy — solid, not dashed. */
.battle-map .shot.kill-shot { opacity: 0.95; stroke-dasharray: none; }

.marker { stroke: #05080f; stroke-width: 1.5; }
.attacker-marker { fill: var(--accent); }
.defender-marker { fill: #ff5c7a; }
/* Labels sit over envelopes and shot lines — a dark halo keeps them legible. */
.marker-label, .marker-remaining, .marker-damage, .range-readout, .zone-label, .zone-range, .scale-label {
  stroke: #070d18;
  stroke-width: 3.5;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.marker-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  fill: var(--text-bright);
  text-anchor: middle;
}
.marker-damage {
  font-size: 10px;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
  fill: rgba(255, 140, 160, 0.9);
}

/* Shared range scale + weapon-envelope ruler */
.scale-line, .scale-tick { stroke: var(--border); stroke-width: 1; }
.scale-label { font-size: 9px; fill: var(--muted); letter-spacing: 0.08em; }
.ruler-rule { stroke: var(--border); stroke-width: 1; }
.ruler-title {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--muted);
}
.ruler-key { font-size: 10px; fill: var(--muted); }
.ruler-name {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ruler-range { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ruler-bar { opacity: 0.2; }
.ruler-bar.in-range { opacity: 0.9; }
.ruler-row-line { stroke: rgba(224, 240, 255, 0.06); stroke-width: 1; }
.ruler-contact { stroke: #ff5c7a; stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.8; }
.ruler-own { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.8; }
.band-note {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-bright);
  text-anchor: middle;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.9));
}
.map-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
button.timeline-play {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  margin-right: 0.3rem;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  background: var(--bg-elevated);
  cursor: pointer;
}
button.timeline-play:hover { border-color: var(--accent); box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); }
button.timeline-play.playing { color: var(--warn); border-color: var(--warn); }
a.timeline-chip {
  font-family: var(--font-display);
  font-size: 0.62rem;
  min-width: 1.9rem;
  text-align: center;
  padding: 0.32rem 0.4rem;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--bg-elevated);
  text-decoration: none;
}
a.timeline-chip.active {
  color: #041018;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}
a.timeline-chip:hover:not(.active) { color: var(--accent); border-color: rgba(0, 229, 255, 0.35); }
a.timeline-chip.turning { border-color: var(--warn); color: var(--warn); }
a.timeline-chip.turning.active { background: var(--warn); color: #041018; border-color: var(--warn); box-shadow: 0 0 12px rgba(255, 209, 102, 0.35); }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.4rem;
}
.legend-item { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.82rem; }
.swatch { display: inline-block; width: 0.6rem; height: 0.6rem; align-self: center; }
.legend-name { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-bright); }
.legend-range { font-size: 0.78rem; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend-blurb { color: var(--muted); }
.map-note { margin-top: 0.35rem; }

/* Siege map: orbit above, surface below, front line descending between */
.siege-orbit { fill: rgba(0, 120, 180, 0.05); }
.siege-ground { stroke: none; }
.surface-line { stroke: rgba(107, 255, 184, 0.5); stroke-width: 1.5; }
.siege-taken { fill: rgba(255, 92, 122, 0.07); }
.front-line { stroke: #ff5c7a; stroke-width: 1.6; stroke-dasharray: 10 6; }
.front-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: #ff8fa3;
  stroke: #070d18;
  stroke-width: 3.5;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.siege-colony {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-bright);
}
.drop-fire { stroke: #4cc9f0; stroke-width: 2; opacity: 0.75; stroke-dasharray: 9 6; }
.flak-fire { stroke: #ffd166; stroke-width: 1.6; opacity: 0.7; stroke-dasharray: 2 5; }
/* Killing fire converges on the ship it brings down — same family as wreck-new. */
.siege-map .flak-fire.kill-shot { stroke: #ffab76; stroke-width: 2.4; opacity: 0.95; stroke-dasharray: none; }

.emplacement .emp-base, .emplacement .emp-barrel { fill-opacity: 0.85; stroke: #05080f; stroke-width: 1; }
.emplacement.partial .emp-base, .emplacement.partial .emp-barrel { fill-opacity: 0.4; }
.emplacement.spent .emp-base, .emplacement.spent .emp-barrel { fill-opacity: 0.12; }
.emplacement.spent .emp-value { fill: rgba(224, 240, 255, 0.25); }
.emp-value {
  font-size: 10px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
  stroke: #070d18;
  stroke-width: 3;
  paint-order: stroke fill;
}

/* Siege ledger: both sides' hardware on one scale, filled to what is left */
.ledger-track { opacity: 0.16; }
.ledger-fill { opacity: 0.85; }
.ledger-left { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.ledger-formula { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }

p.siege-contested {
  border-left: 3px solid var(--warn);
  background: var(--surface);
  padding: 0.5rem 0.7rem;
  margin-top: 0.8rem;
  font-size: 0.9rem;
}
p.siege-contested i { color: var(--warn); margin-right: 0.4rem; }

/* "Why" factors */
.factor-list { display: flex; flex-direction: column; gap: 0.4rem; }
.factor-row {
  border: 1px solid var(--border);
  border-left-width: 3px;
  padding: 0.35rem 0.55rem;
  background: var(--surface);
}
.factor-row.factor-won-it  { border-left-color: var(--success); }
.factor-row.factor-lost-it { border-left-color: var(--error); }
.factor-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.factor-head i { color: var(--accent); width: 1.1rem; text-align: center; flex-shrink: 0; }
.factor-label { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; flex: 0 1 auto; }
.factor-weight { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.factor-bar {
  flex: 1 1 5rem;
  height: 4px;
  background: var(--bg-elevated);
  margin: 0;
  min-width: 3.5rem;
}
.factor-fill { height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.factor-lost-it .factor-fill { background: linear-gradient(90deg, #a12c44, var(--error)); }
.factor-detail { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--text); line-height: 1.35; }

/* Post-loss coaching callout */
.advice {
  border-left: 3px solid var(--warn);
  background: var(--surface);
  padding: 0.5rem 0.7rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}
.advice i { color: var(--warn); margin-right: 0.4rem; }

.totals-table { margin-top: 0.7rem; }
.totals-table table { max-width: 34rem; }

/* Rounds table */
.rounds-table .heat-sat { color: var(--warn); }
.report-chart { margin-top: 0.85rem; border: 1px solid var(--border); background: var(--surface); padding: 0.55rem 0.7rem; }
.report-chart h3 { margin: 0 0 0.45rem; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.report-chart h3 i { color: var(--accent); margin-right: 0.35rem; }
.report-round-chart { display: block; width: 100%; height: auto; min-height: 10rem; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-label, .chart-round { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart-line { fill: none !important; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-troops { stroke: var(--accent); fill: var(--accent); }
.chart-defense { stroke: var(--warn); fill: var(--warn); }
.report-chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); }
.chart-key::before { content: ''; display: inline-block; width: 1.2rem; border-top: 2px solid currentColor; margin: 0 0.35rem 0.2rem 0; }
.chart-key-troops { color: var(--accent); }
.chart-key-defense { color: var(--warn); }
.chart-key-a, .chart-a { color: var(--accent); stroke: var(--accent); fill: var(--accent); }
.chart-key-b, .chart-b { color: var(--warn); stroke: var(--warn); fill: var(--warn); }
.chart-loss line { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.chart-loss-n {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  stroke: #070d18;
  stroke-width: 3;
  paint-order: stroke fill;
}
.chart-key-loss::before {
  content: '✕';
  width: auto;
  border: none;
  margin: 0 0.3rem 0 0;
  color: var(--text);
}

/* How-to-read */
ul.howto { margin: 0.35rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.28rem; }
ul.howto li { font-size: 0.9rem; }

/* Battle lists (/battles, fleet tabs) */
ul.battle-list { list-style: none; margin: 0.6rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.battle-row {
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface);
  box-shadow: var(--panel-glow);
  padding: 0.6rem 0.8rem;
}
.battle-row-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.battle-result {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
}
.battle-result.win  { color: var(--success); border-color: var(--success); }
.battle-result.loss { color: var(--error); border-color: var(--error); }
.battle-result.active { color: var(--accent); border-color: var(--accent); }
.battle-fight { font-size: 0.95rem; }
.battle-open {
  margin-left: auto;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}
.battle-open i { color: var(--accent); margin-right: 0.35rem; }
.battle-row-meta { margin-top: 0.3rem; font-size: 0.82rem; }

.destroyed-list .battle-row { border-left-color: var(--error); }

@media (max-width: 640px) {
  .map-wrap { padding: 0.35rem; }
  .marker-label { font-size: 10px; }
  .band-note { font-size: 11px; }
  .battle-open { margin-left: 0; }
  .verdict-line { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .verdict-text { flex: none; min-width: 0; }
  .factor-head { flex-wrap: wrap; }
  .factor-bar { flex-basis: 100%; order: 3; }
  .factor-weight { margin-left: auto; }
}
.marker-remaining {
  font-size: 10px;
  fill: var(--muted);
  text-anchor: middle;
}
.marker-label.lbl-end, .marker-remaining.lbl-end, .marker-damage.lbl-end { text-anchor: end; }
.marker-label.lbl-start, .marker-remaining.lbl-start, .marker-damage.lbl-start,
.zone-label.lbl-start { text-anchor: start; }
.marker-remaining.gone {
  fill: var(--error);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Manual shipments (colony page): action buttons, in-flight list, dialog form */
.transfer-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: -0.3rem;
}
.transfer-queue li {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.transfer-queue .countdown {
  margin-left: auto;
}
.transfer-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
}
.transfer-field select {
  width: 100%;
  max-width: 24rem;
}
.transfer-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.4rem 0.8rem;
  margin-bottom: 0.5rem;
}
.transfer-res {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
}
.transfer-res input {
  width: 4.5rem;
  margin-left: auto;
}
.transfer-avail {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.transfer-total [data-transfer-travel]::before {
  content: '· ';
}
.transfer-warning {
  color: var(--warn, #e0a34a);
  font-size: 0.78rem;
  margin: 0.2rem 0 0.5rem;
}

.res-short {
  color: var(--danger, #e05252);
}

.colony-evacuate-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.colony-evacuate-row form { margin-left: auto; }
@media (max-width: 640px) {
  .colony-evacuate-row { align-items: stretch; flex-direction: column; }
  .colony-evacuate-row form { margin-left: 0; align-self: flex-end; }
}

/* Attribution badge (issue #71 / GDD §6): marks a queue entry, task or sweep
   the Adjutant booked, so a delegated action can never be mistaken for one the
   player issued. Deliberately quiet — it is a label, not an alert. Styled after
   .vacation-badge in the ice-blue accent rather than the warning amber. */
.origin-badge {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64b5f6;
  border: 1px solid rgba(100, 181, 246, 0.45);
  background: rgba(100, 181, 246, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius);
  white-space: nowrap;
  margin: 0 0.35rem;
}

/* Adjutant page (GDD §6): doctrine editor. Panels carry their own padding —
   bare .panel leaves headings collapsed against the border. The doctrine
   forms drop .stack's 28rem cap: the resource-floor grids need the panel
   width, and unsized inputs would otherwise force grid tracks past it. */
.adjutant-panel {
  padding: 1rem 1.15rem 1.15rem;
  margin: 0.9rem 0;
}
.adjutant-panel > h2,
.adjutant-panel > h3 { margin-top: 0.15rem; }
.adjutant-panel > .stack {
  max-width: none;
  margin-top: 0.7rem;
}
.adjutant-facts {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.adjutant-directives {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0;
}
.adjutant-resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
}
.adjutant-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.adjutant-field input,
.adjutant-field select {
  width: 100%;
  min-width: 0;
}
.adjutant-radius {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.adjutant-radius label { margin: 0; }
.adjutant-radius input { width: 6.5rem; flex: none; }
.adjutant-mix {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.adjutant-mix select { flex: 1 1 auto; min-width: 0; }
.adjutant-mix input { flex: none; width: 7rem; }
.adjutant-preview {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.adjutant-preview .tag {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border);
  background: rgba(0, 229, 255, 0.06);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius);
  margin-right: 0.35rem;
  white-space: nowrap;
}
.adjutant-log td { overflow-wrap: anywhere; }
.adjutant-log .log-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.adjutant-log .log-self {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.1rem 0.35rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}
/* Doctrine plans: a saved doctrine and its one-line reading. */
.adjutant-plans {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.adjutant-plans li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
}
.adjutant-plans .adjutant-plan-body { flex: 1 1 auto; min-width: 0; }
.adjutant-plans form { margin: 0; }
.adjutant-plans li.is-default { border-color: var(--accent-dim); }
.adjutant-plans .plan-default {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border);
  background: rgba(0, 229, 255, 0.06);
  border-radius: var(--radius);
  padding: 0.15rem 0.4rem;
  margin-left: 0.45rem;
  white-space: nowrap;
}
/* Per-colony toolbar: pause + the load-a-doctrine combo, on one dense line. */
.adjutant-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.adjutant-toolbar .check { margin: 0; }
.adjutant-load {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.adjutant-load label {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}
.adjutant-load select { max-width: 14rem; }
.adjutant-works-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.adjutant-works-head .muted { font-size: 0.8rem; }
/* The build plan: one row per building this site can raise, priority top-down.
   Rows in the plan are lit; the rest are the menu you pick from. */
.adjutant-works { width: 100%; }
.adjutant-works th, .adjutant-works td { padding: 0.3rem 0.5rem; }
.adjutant-works th.num { text-align: right; }
.adjutant-works td.num { text-align: right; white-space: nowrap; }
.adjutant-works td.row-art { width: 2.4rem; padding-right: 0; }
.adjutant-works .build-icon {
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  opacity: 0.55;
}
.adjutant-works tr.in-plan .build-icon { opacity: 1; }
.adjutant-works tr.in-plan { background: rgba(0, 229, 255, 0.05); }
.adjutant-works tr.in-plan strong { color: var(--accent); }
.adjutant-works .works-cap { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.adjutant-works .works-cap input[type="number"] { width: 4.5rem; }
.adjutant-works .works-cap .check { margin: 0; font-size: 0.75rem; white-space: nowrap; }
/* A forever row ignores the number, so the number stops asking to be read. */
.adjutant-works tr:has(input[type="checkbox"]:checked) .works-cap input[type="number"] {
  opacity: 0.35;
}
.adjutant-works .works-move { width: 1%; }
.adjutant-works .works-move button {
  padding: 0.15rem 0.3rem;
  margin-left: 0.15rem;
}
.adjutant-works .works-move button[disabled] { opacity: 0.3; }
.adjutant-works .works-move .material-symbols-outlined { font-size: 0.95rem; }
.adjutant-catalogue { margin: 0.5rem 0 0.2rem; }
.adjutant-catalogue > summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
}
.adjutant-catalogue > p { font-size: 0.78rem; margin: 0.35rem 0; }
/* Save row: the commit button pins right. */
.adjutant-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.adjutant-submit { margin-left: auto; }
.adjutant-help summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
}
@media (max-width: 640px) {
  .adjutant-panel { padding: 0.85rem 0.9rem 1rem; }
  .adjutant-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adjutant-mix input { width: 6rem; }
  /* At phone widths the plan table must fit the panel, not the scroller: the
     "forever" tick and the arrows are the controls, and a control you have to
     scroll sideways to reach is a control nobody uses. */
  .adjutant-load { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .adjutant-load label { flex: 1 1 100%; }
  .adjutant-load select { flex: 1 1 auto; max-width: none; width: auto; min-width: 0; }
  .adjutant-submit { margin-left: 0; width: 100%; justify-content: center; }
  /* Fixed layout so the columns are the panel's, not the content's: the
     building names wrap instead of pushing the controls off the scroller.
     Opting out of the shared 28rem table floor is deliberate (same reason
     .card-stack does): these cells are CONTROLS, and a checkbox you have to
     scroll sideways to reach is a checkbox nobody ticks. */
  .table-scroll .adjutant-works {
    table-layout: fixed;
    min-width: 0;
    width: 100%;
  }
  .adjutant-works th.col-art { width: 2.2rem; }
  .adjutant-works th.col-cap { width: 4.4rem; }
  .adjutant-works th.col-move { width: 5rem; }
  .adjutant-works th, .adjutant-works td { padding: 0.25rem 0.3rem; }
  .adjutant-works td.row-art { width: 1.9rem; }
  .adjutant-works .build-icon { width: 1.6rem; height: 1.6rem; }
  .adjutant-works .works-cap {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
  }
  .adjutant-works .works-cap input[type="number"] { width: 3.6rem; }
  .adjutant-works .works-cap .check { font-size: 0.68rem; gap: 0.15rem; }
  .adjutant-works .works-cap .forever-word { display: none; }
  .adjutant-works .works-cap .check::after {
    content: '∞';
    font-size: 0.95rem;
    line-height: 1;
  }
  .adjutant-works .works-move button { padding: 0.1rem 0.2rem; margin-left: 0.1rem; }
}

/* Colony rows are collapsed: the summary line is name + status, the plan
   assignment opens inside. Plans are the editing surface — a colony only
   decides WHICH plan (and whether it is paused). */
.adjutant-colonies-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
}
.adjutant-colonies-head h2 { margin: 0; }
.adjutant-colonies-head .linklike { font-size: 0.85rem; }
.adjutant-colonies-intro { margin: 0.3rem 0 0.5rem; font-size: 0.85rem; }
.adjutant-colony > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  user-select: none;
}
.adjutant-colony > summary:hover strong,
.adjutant-colony > summary:focus-visible strong { color: var(--accent); }
.adjutant-colony[open] > summary { border-bottom: 1px solid var(--border); }
.adjutant-colony-body { padding: 0.75rem 0.9rem 0.9rem; }
.adjutant-colony-body .stack { max-width: none; margin: 0; }
/* A colony's plan badge — on the Adjutant's collapsed colony rows and on the
   colonies list, where it links to the colony's Adjutant row. */
.plan-follows { color: var(--accent); border-color: var(--accent-dim); }
a.plan-follows { text-decoration: none; }
.plan-paused { color: var(--warn); border-color: var(--warn); }
.tag-muted { color: var(--muted); }
.assign-hint { font-size: 0.78rem; margin: 0.45rem 0 0; }

/* The plans page: one editor panel per plan, its followers named so a save
   says what it will touch — expandable to the colonies themselves. */
.adjutant-followers { font-size: 0.8rem; }
.adjutant-followers > summary {
  cursor: pointer;
  color: var(--muted);
  user-select: none;
}
.adjutant-followers > summary:hover,
.adjutant-followers > summary:focus-visible { color: var(--accent); }
.adjutant-followers > ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
}
.adjutant-followers li {
  margin: 0.15rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.adjutant-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.55rem;
}
.adjutant-plan-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
}
.adjutant-plan-title h3 { margin: 0; }
.adjutant-plan-title .muted { font-size: 0.8rem; }
.adjutant-plan-actions { margin: 0; }
.adjutant-plan-name input { width: 14rem; }
.adjutant-works .col-remove { width: 1%; }
.adjutant-works .col-remove button { padding: 0.15rem 0.3rem; }
.adjutant-works .col-remove .material-symbols-outlined { font-size: 0.95rem; }
.add-forever { margin: 0; font-size: 0.75rem; white-space: nowrap; }
.adjutant-plan > .stack { max-width: none; }