:root {
  --bg: #0f1420;
  --panel: #171d2c;
  --panel-2: #1e2536;
  --border: #2a3244;
  --text: #e7ebf3;
  --text-dim: #9aa4b8;
  --accent: #5b8def;
  --good: #3fbf7f;
  --bad: #e2554d;
  --warn: #d9a441;
  /* the one page width: the header and every page share these edges, centred on a
     wide screen (Goliath, 2026-09-26, on a 3440 x 1440 monitor) */
  --page-max: 1760px;
  /* the four stat colours (2026-09-24): white base, green dock bonuses, yellow
     combat additions, gold in-combat total -- yellow and gold kept apart from
     each other and from the amber of a warning */
  --combat-y: #e6dc6a;
  --gold: #f6b93b;
  /* rarity palette — matches the Datamining workstream's ships.html */
  --rare1: #8b93a7;  /* Common    */
  --rare2: #3fae57;  /* Uncommon  */
  --rare3: #3d9fe0;  /* Rare      */
  --rare4: #a75be6;  /* Epic      */
  --rare5: #e08a2e;  /* Legendary */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.topbar {
  padding: 16px 24px 4px;
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { margin: 0; font-size: 20px; }
/* Fleet switcher -- moved OUT of the global topbar into the Fleet builder
   view itself (Goliath, 2026-09-05 part 3: "a large stats bar stuck in fleet
   ... needs to be relevant to the section" — same for this row). */
.fleet-switch-row {
  color: var(--text-dim); font-size: 13px; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fleet-switch-label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.fleet-switcher {
  font-size: 13px; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  max-width: 260px;
}
.fleet-switch-row .btn-link { font-size: 12px; }
.fleet-switch-row .btn-link:disabled { opacity: .35; cursor: default; text-decoration: none; }
.topbar-admiral { margin-left: 4px; }

/* Persistent profile switcher (Goliath, 2026-09-05 part 3) -- inline with the
   main nav, right-justified via topbar-row's flex layout, sticky with the
   rest of the header. Green outline = saved; orange = unsaved profile-scoped
   edits (research/talents/titles/etc, ticked on the Commander page today). */
.cprofile-switch {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim); padding: 4px 10px; border-radius: 7px;
  border: 2px solid var(--good); transition: border-color .15s;
}
.cprofile-switch.dirty { border-color: var(--warn); }
.cprofile-switch label { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.cprofile-switch select {
  font-size: 12px; padding: 2px 5px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  max-width: 180px;
}
.cprofile-switch .btn-link { font-size: 11.5px; }

.leadership-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 24px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lb-item { min-width: 90px; }
.lb-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.lb-value { font-size: 20px; font-weight: 600; }
.lb-value.good { color: var(--good); }
.lb-value.bad { color: var(--bad); }

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 8px;
}
.btn-link:hover { text-decoration: underline; }
.btn-link:disabled { opacity: .35; cursor: default; text-decoration: none; }

.panel {
  margin: 0 24px;
  padding: 14px 18px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.hidden { display: none !important; }

.view { padding: 20px 24px 60px; max-width: var(--page-max); margin-inline: auto; box-sizing: border-box; }
/* +100px so a 4-slot formation row never needs to scroll (Goliath, 2026-09-14:
   "no horizontal scroll on the fleet layout ... I would give another 100 pixels").
   Widest row anywhere is 4 slots = 428px; the strip now has ~490px. */
.fleet-panel { max-width: none; }   /* fills the page width (--page-max) */

.roster-panel h2, .fleet-panel h2 { margin: 0 0 4px; font-size: 15px; }
.hint { color: var(--text-dim); font-size: 12px; margin: 0 0 12px; }
.hint a { color: var(--accent); }

.roster-toolbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.roster-summary { font-size: 12px; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; }
.roster-summary b { color: var(--text); font-weight: 600; }
.roster-summary .q { padding: 2px 7px; border-radius: 10px; background: var(--panel-2); }
.roster-summary .q.warn { background: #4a3a1e; color: #f0c674; }
.roster-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.roster-filters input[type=text], .roster-filters select {
  font-size: 12px; padding: 4px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.roster-filters input[type=text] { min-width: 160px; }
.roster-chk { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }

.roster-grid {
  display: grid;
  /* wide enough for a ship at --ship-tile, so a catalogue card and a My-ships
     card show the hull at the same size (Goliath, 2026-09-14) */
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
}
.ship-card .dq-badges { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin-top: 3px; }
.ship-card .dq {
  font-size: 9px; line-height: 1.4; padding: 0 4px; border-radius: 3px;
  background: var(--panel-2); color: var(--text-dim);
}
.ship-card .dq.warn { background: #4a3a1e; color: #f0c674; }
.ship-card .dq.bad { background: #4a2020; color: #e08a8a; }

.ship-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color .1s;
}
.ship-card:hover { border-color: var(--accent); }
.ship-card.in-fleet, .ship-card.owned { border-color: var(--good); }
.ship-card img {
  width: 100%;
  /* the SAME height as the My-ships pane on the fleet builder — one variable
     drives both, so a hull can't look more important on one page than another */
  height: var(--ship-tile);
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.ship-card .no-image {
  width: 100%;
  height: var(--ship-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 10px;
}
.ship-card .name { font-size: 11px; margin-top: 4px; }
.ship-card .meta-line { font-size: 9px; color: var(--text-dim); display: flex; gap: 5px; justify-content: center; align-items: center; }
.ship-card .lc { font-size: 10px; color: var(--text-dim); }
.ship-card .cls { font-weight: 600; letter-spacing: .02em; }
.ship-card .did { opacity: .6; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.ship-card .capture-needed { color: var(--warn); font-size: 9px; }
.ship-card .datamined-tag { color: var(--text-dim); font-size: 9px; }

/* rarity — left-edge stripe + faint tint, same treatment as ships.html */
.ship-card.rare-1 { box-shadow: inset 3px 0 0 var(--rare1); background: color-mix(in srgb, var(--rare1) 8%, var(--panel)); }
.ship-card.rare-2 { box-shadow: inset 3px 0 0 var(--rare2); background: color-mix(in srgb, var(--rare2) 8%, var(--panel)); }
.ship-card.rare-3 { box-shadow: inset 3px 0 0 var(--rare3); background: color-mix(in srgb, var(--rare3) 9%, var(--panel)); }
.ship-card.rare-4 { box-shadow: inset 3px 0 0 var(--rare4); background: color-mix(in srgb, var(--rare4) 10%, var(--panel)); }
.ship-card.rare-5 { box-shadow: inset 3px 0 0 var(--rare5); background: color-mix(in srgb, var(--rare5) 11%, var(--panel)); }

/* datamined (bulk-imported, identity verified, stats not game-checked) */
.ship-card.datamined { opacity: .82; }
.ship-card.datamined:hover { opacity: 1; }
.ship-card.not-released { opacity: .4; }

/* fleet formation visual — see the "formation slots" block lower down */

.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 12px;
}
.btn-primary:hover { opacity: .9; }
.btn-danger {
  background: transparent;
  border: 1px solid var(--bad);
  color: var(--bad);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

/* it sits inline in the page head now, not under a button */
.save-status { font-size: 12px; color: var(--text-dim); }
.save-status.good { color: var(--good); }
/* unsaved / failed states are RED (Goliath, 2026-09-14) */
.save-status.bad { color: var(--bad); font-weight: 600; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(560px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 15px; }
.modal-body { padding: 14px 18px; overflow-y: auto; font-size: 13px; flex: 1; min-height: 0; }
.modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

.field-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.field-row.chk-first { justify-content: flex-start; }
.field-row.chk-first input[type=checkbox] { flex: none; width: auto; }
.field-row.chk-first label { width: auto; }
.field-row label { width: 110px; color: var(--text-dim); font-size: 12px; flex-shrink: 0; }
.field-row input, .field-row select {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 13px;
}

.subsection-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 16px 0 6px;
  letter-spacing: .03em;
}

/* Section heading (secHead() in app.js): the level between the page title and a
   card title, so a page's sections read at a glance over rich graphics. An accent
   bar, bright text, and a rule that fades from the accent across the page. */
.sec-head { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  margin: 26px 0 12px; padding: 0 0 8px 14px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--accent), var(--border) 40%, transparent) 1; }
.sec-head::before { content: ""; position: absolute; left: 0; top: 1px; width: 4px; height: 20px;
  border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.sec-head > h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 22px; color: var(--text); letter-spacing: .01em; }
.sec-head > .cmdr-cnt { margin-left: 0; font-size: 12.5px; }
.sec-sub { font-size: 12px; color: var(--text-dim); }
.sec-sub b { color: var(--text); font-weight: 600; }
.sec-actions { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
/* inside a panel (the ship editor's tabs): the same heading, one size down */
.sec-head.sm { margin: 4px 0 10px; padding-left: 12px; }
.sec-head.sm::before { width: 3px; height: 16px; top: 2px; }
.sec-head.sm > h3 { font-size: 14.5px; line-height: 20px; }
/* a heading over each of two side-by-side panels: the column holds both, and the
   panels keep their equal height */
.sec-col { display: flex; flex-direction: column; min-width: 0; }
.sec-col > .gia-card { flex: 1; }
.item-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.item-row select { flex: 2; }
.item-row input[type="number"] { flex: 1; width: 60px; }
.item-row .remove-item { background: none; border: none; color: var(--bad); cursor: pointer; font-size: 16px; }
.add-item-btn {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* ── ship editor: live stats + battle-system panel (Phase C3-C) ─────────── */
.editor-stats {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
}
.editor-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.editor-stats .stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 14px;
}
.editor-stats .stat-grid > div { display: flex; flex-direction: column; }
.editor-stats .sl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.editor-stats .sv { font-size: 14px; font-weight: 600; }
.tp-details { margin-top: 10px; }
.tp-details summary { cursor: pointer; color: var(--accent); font-size: 11px; }
.tp-group { margin-top: 8px; }
.tp-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 2px; }
.tp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; padding: 1px 0; }
.tp-row span:first-child { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bs-count { font-size: 11px; color: var(--text-dim); margin-left: 8px; font-weight: 400; }
.bs-stars { color: var(--warn); letter-spacing: 1px; }
/* the Perception Driver level in the ship editor's title, gold like the game's card badge */
.pd-badge { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-weight: 700;
  vertical-align: middle; cursor: help; }
.pd-chip { width: 15px; height: 15px; }
#bs-nodes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.bs-node {
  display: grid;
  grid-template-columns: 18px 16px 150px 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
}
.bs-node.bs-on { border-color: var(--good); }
.bs-node.bs-disabled { opacity: .45; cursor: not-allowed; }
.bs-node .bs-pos { color: var(--text-dim); }
.bs-node .bs-name { font-weight: 600; }
.bs-node .bs-effect { color: var(--text-dim); }
.bs-node .bs-base { color: var(--text-dim); }
.bs-node .bs-up { color: var(--good); }

/* ── ship editor: C4-D detail sections ─────────────────────────────────── */
.ed-sec { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; background: var(--panel); }
/* collapsible panels (ship editor, admiral info, Dock groups) take the section
   heading's look: bright title and an accent bar, sized for a panel */
.ed-sec > summary { cursor: pointer; padding: 9px 12px 9px 14px; font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
  color: var(--text); box-shadow: inset 3px 0 0 var(--accent); border-radius: 5px 0 0 0; }
.ed-sec:not([open]) > summary { border-radius: 5px 0 0 5px; }
.ed-sec[open] > summary { border-bottom: 1px solid var(--border); }
.ed-sec-body { padding: 10px 12px; }
.inline-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); flex: 0 0 auto; }

.indock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.idc { background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; display: flex; flex-direction: column; cursor: help; }
.idc-l { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px; }
/* in-game stat icon, shared by the in-dock grid, the dock-entry form and the
   validation table (Goliath, 2026-09-12: "add the icons in here too") */
.idc-ic { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.dv-table .idc-ic { width: 18px; height: 18px; vertical-align: middle; margin-right: 5px; }
.idc-v { font-size: 14px; font-weight: 600; }
.idc .wg { font-size: 10px; color: var(--text-dim); }
.idc .wg .w { color: var(--text); }
.idc .wg .g { color: var(--good); }
.idc .wg .y { color: var(--combat-y); }
.idc-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.idc-gold { font-size: 13px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.idc-gold.same { opacity: .55; font-weight: 600; }
.idc-legend { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.5; }
.idc-legend .w { color: var(--text); } .idc-legend .g { color: var(--good); }
.idc-legend .y { color: var(--combat-y); } .idc-legend .gold { color: var(--gold); font-weight: 600; }

.mini-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.mini-table th { text-align: left; color: var(--text-dim); font-weight: 500; padding: 3px 6px; border-bottom: 1px solid var(--border); text-transform: uppercase; font-size: 10px; }
.mini-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mini-table td.sk-empty { color: var(--text-dim); }
.sk-name { font-weight: 600; }
.sk-eff { color: var(--text-dim); margin-top: 2px; }
.sk-up { color: var(--good); margin-top: 2px; }
/* a skill (or part of one) the engine holds back, or that is not active in this seat */
.sk-held { color: #d9a441; margin-top: 2px; font-size: 10.5px; }
.sk-off { color: var(--text-dim); margin-top: 2px; font-size: 10.5px; }
.sk-wired { color: var(--good); }

.enh-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.enh-cell { background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.enh-l { font-size: 10px; text-transform: uppercase; color: var(--text-dim); }
.enh-v { font-size: 15px; font-weight: 700; }
.enh-s { color: var(--warn); font-size: 11px; letter-spacing: 1px; }

.slot-summary { margin-bottom: 8px; font-size: 11px; }
.slot-line { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; }
.slot-cat { width: 64px; text-transform: uppercase; font-size: 10px; color: var(--text-dim); }
.slot-sizes { flex: 1; font-family: ui-monospace, monospace; }
.slot-usage { font-weight: 600; }
.slot-usage.full { color: var(--good); }
.slot-usage.over { color: var(--bad); }

.ehp-math { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; margin: 6px 0; overflow-x: auto; }

/* ── ship editor: identity line, green-for-buff, resist row (feedback batch) ── */
.ship-id-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px;
  color: var(--text-dim); padding: 4px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.ship-id-line .id-unique { display: inline-flex; align-items: center; gap: 2px; color: #f0a64a; font-weight: 700; }
.ship-id-line .id-rare { font-weight: 600; }
.ship-id-line .id-rare.rare-1 { color: var(--rare1); } .ship-id-line .id-rare.rare-2 { color: var(--rare2); }
.ship-id-line .id-rare.rare-3 { color: var(--rare3); } .ship-id-line .id-rare.rare-4 { color: var(--rare4); }
.ship-id-line .id-rare.rare-5 { color: var(--rare5); }
/* which copy this is: database id | commander ship id - fleet, at the line's end */
.ship-id-line .id-ids { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 6px; opacity: .75; }
.ship-id-line .id-ids [title] { cursor: help; }
.ship-id-line .id-sep { opacity: .5; }
.id-notmined { color: #fff; background: var(--bad); border-radius: 3px; padding: 0 5px; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.editor-ship-meta { font-size: 12px; color: var(--text-dim); font-weight: 400; margin-left: 10px; }

.g { color: var(--good); }
.idc-buffed .idc-v { color: var(--text); }
.indock-grid .idc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.indock-grid .idc-resist { }
.idc-spacer { background: transparent; border: none; }
.idc-d { font-size: 9px; margin-top: 2px; align-self: flex-start; padding: 0 4px; border-radius: 3px; }
.idc-d.ok { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.idc-d.off { background: #4a3a1e; color: #f0c674; }

/* in-game dock stats validation panel */
.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin-bottom: 10px; }
.dv-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-dim); }
.dv-f input { width: 84px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--text); font-size: 12px; }
/* in-game dock entry — same 3-per-row layout as the in-dock grid above it, with
   the game's own white (base) + green (bonus) pair per stat (Goliath, 2026-09-12) */
.dv-grid2 { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.dv-grid2-resist { border-top: 1px dashed var(--border); padding-top: 8px; margin-bottom: 10px; }
.dvc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dvc { background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.dvc-spacer { background: none; border: none; }
.dvc-l { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-dim); }
.dvc-in { display: flex; gap: 4px; }
.dvc-in input { width: 100%; min-width: 0; padding: 3px 6px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--panel); color: var(--text); font-size: 12px; }
.dvc-in input.dv-g { color: var(--good); }
/* the white + green sum: the number to check against the game's own, so it reads first
   (Goliath, 2026-09-25: "larger and make it green in bold") */
.dvc-t { font-size: 15px; font-weight: 700; color: var(--good); min-height: 19px;
  font-variant-numeric: tabular-nums; }
/* the calculator's own number, suggested in an empty box: never saved or scored until
   it is edited or accepted (static/app.js suggestDockValidation) */
.dvc input.dv-sug { color: var(--text-dim); font-style: italic; border-style: dashed; }
.dvc-t.sug { color: var(--text-dim); font-weight: 600; font-style: italic; }
.dv-sug-hint { margin-top: -4px; }
.dv-accept:disabled { opacity: .45; cursor: default; }
.dv-table .dv-split { color: var(--text-dim); font-size: 11px; }
.dv-table .dv-split .g { color: var(--good); }
.dv-result { font-size: 12px; }
.dv-head { font-weight: 600; margin-bottom: 6px; }
.dv-head.g { color: var(--good); } .dv-head.warn { color: #f0c674; } .dv-head.bad { color: var(--bad); }
.dv-table td:not(:first-child), .dv-table th:not(:first-child) { text-align: right; }
.dv-table tr.dv-ok td:last-child { color: var(--good); }
.dv-table tr.dv-off td:last-child { color: #f0c674; font-weight: 600; }

.sk-val { font-size: 10.5px; margin-top: 2px; }

/* maxed breakthrough tier — green outline, like the datamining ships.html */
.mini-table tr.bt-maxed td { box-shadow: inset 0 0 0 1px var(--good); }
.mini-table td.bt-active { color: var(--good); }

/* ── slot-based equipment picker ──────────────────────────────────────── */
.slot-count { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-left: 6px; }
.slot-count.full { color: var(--good); }
.slot-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.slot { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; font-size: 11px;
  min-width: 120px; }
.slot.empty { border-style: dashed; color: var(--text-dim); }
.slot.filled { border-color: var(--good); }
.slot:hover { border-color: var(--accent); }
.slot .slot-sz { font-family: ui-monospace, monospace; font-weight: 700; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font-size: 10px; }
.slot .slot-nm { flex: 1; }
.slot .slot-x { color: var(--bad); font-weight: 700; padding: 0 2px; }

.modal-narrow { max-width: 520px; }

/* Ship editor -- lightbox-style, 7-tab left nav (Goliath, 2026-09-05 part 3
   phase 3: "7 tabs that are on the left hand side vertical stack that uses
   25% ish of the width then the rest is that tabs content"). */
/* Fixed height (not just a max) so switching tabs doesn't resize the whole
   modal (Goliath, 2026-09-10) — .et-content's own overflow-y:auto scrolls
   within this fixed area per pane. */
.modal-editor { width: min(980px, 94vw); height: min(900px, 90vh); max-height: 90vh; }
.et-shell { display: flex; flex: 1; min-height: 0; margin-top: 10px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.et-tabs { flex: 0 0 25%; max-width: 220px; display: flex; flex-direction: column;
  background: var(--panel-2); border-right: 1px solid var(--border); overflow-y: auto; }
.et-tab { background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text-dim); text-align: left; padding: 11px 14px; font-size: 12.5px;
  cursor: pointer; }
.et-tab:hover { color: var(--text); background: var(--panel); }
.et-tab.active { color: var(--text); background: var(--panel); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent); }
.et-content { flex: 1; overflow-y: auto; padding: 12px 16px; min-width: 0; }
.et-pane-hidden { display: none; }
#picker-search { width: 100%; margin-bottom: 8px; padding: 6px 9px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 5px; color: var(--text); }
.picker-list { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.picker-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 11px; }
.picker-row:hover { border-color: var(--accent); background: var(--panel-2); }
.picker-row .pk-nm { font-weight: 600; }
.picker-row .pk-sz { color: var(--text-dim); font-family: ui-monospace, monospace; }
.picker-row .pk-st { grid-column: 1 / -1; color: var(--text-dim); font-size: 10px; }

/* energy budget line */
.energy-line { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; font-size: 11px;
  color: var(--text-dim); padding: 6px 8px; margin-bottom: 8px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 5px; }
.energy-line .en-l { text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.energy-line b { color: var(--text); }
.stat-grid .sv.bad { color: var(--bad); }
.stat-grid .sv.g { color: var(--good); }

/* in-dock: two separate tables (3×3 + resist row) */
.indock-grid .idc-table { margin-bottom: 8px; }
.indock-grid .idc-table-2 { border-top: 1px dashed var(--border); padding-top: 8px; }

/* per-item equipment level (Goliath, 2026-09-12) — one stepSlider per fitted slot */
.eq-lv-box { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.eq-lv { display: grid; grid-template-columns: 150px 1fr 96px; gap: 10px; align-items: center; }
.eq-lv-nm { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-lv-v { font-size: 11px; font-weight: 600; text-align: right; }
.eq-lv-v .hint { font-weight: 400; }
.eq-lv-fixed { font-size: 11px; }

/* slot icons — enlarged with the picker's (Goliath, 2026-09-12) */
.slot .slot-ic { width: 40px; height: 40px; object-fit: contain; }

/* picker: type filter + icons */
.picker-filters { display: flex; gap: 8px; margin-bottom: 8px; }
.picker-filters select { background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); padding: 6px 8px; flex: 0 0 auto; }
.picker-filters #picker-search { flex: 1; margin-bottom: 0; }
/* Goliath, 2026-09-12: "make the engine, armor, units and weapon icons bigger,
   hard to see them" — picker rows and the fitted-slot chips both. */
.picker-row { grid-template-columns: 52px 1fr auto; gap: 4px 12px; }
.picker-row .pk-ic { width: 48px; height: 48px; object-fit: contain; }
.picker-row .pk-ic-none { display: inline-block; }
.picker-row .pk-nm, .picker-row .pk-sz { align-self: center; }
.picker-row .pk-st { grid-column: 2 / -1; }

/* breakthrough table — no green outline; bold white name, green running total */
.mini-table tr.bt-maxed td { box-shadow: none; }

/* in-dock: STACKED — 3×3 stats table, then the 1×3 weapon-resist table below it */
.indock-grid { display: block; }
.indock-grid .idc-table { margin-bottom: 8px; }
.indock-grid .idc-table-2 { border-top: 1px dashed var(--border); padding-top: 8px; }
.indock-grid .idc-table-2 .idc-row { grid-template-columns: repeat(3, 1fr); }

/* slot: rarity edge, level, hover */
.slot { position: relative; }
.slot[class*="rare-"] { border-left-width: 3px; }
.slot.rare-1 { border-left-color: var(--rare1); } .slot.rare-2 { border-left-color: var(--rare2); }
.slot.rare-3 { border-left-color: var(--rare3); } .slot.rare-4 { border-left-color: var(--rare4); }
.slot.rare-5 { border-left-color: var(--rare5); }
.slot .slot-lv { font-size: 9px; color: var(--text-dim); }

/* ship picker: 2-column card grid + Dock/Catalogue source toggle
   (Phase 4 remaining #2) — deliberately its own classes, NOT .picker-row/
   .picker-list, which stay the simple equipment (weapon/armor/unit) list. */
.modal-picker { width: min(680px, 92vw); }
.picker-source-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
.pk-src-btn { flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 5px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
.pk-src-btn:hover { border-color: var(--accent); color: var(--text); }
.pk-src-btn.active { border-color: var(--accent); color: var(--text); background: var(--panel); font-weight: 600; }
.ship-picker-grid { max-height: 55vh; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ship-picker-grid .pk-group-h { grid-column: 1 / -1; }
.ship-picker-card {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 2px 8px;
  position: relative; padding: 6px 8px 16px; border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 5px; cursor: pointer; font-size: 11px; background: var(--panel);
}
.ship-picker-card:hover { border-color: var(--accent); background: var(--panel-2); }
.ship-picker-card.rare-1 { border-left-color: var(--rare1); } .ship-picker-card.rare-2 { border-left-color: var(--rare2); }
.ship-picker-card.rare-3 { border-left-color: var(--rare3); } .ship-picker-card.rare-4 { border-left-color: var(--rare4); }
.ship-picker-card.rare-5 { border-left-color: var(--rare5); }
.ship-picker-card .pkc-ic { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: contain; align-self: center; }
.ship-picker-card .pkc-ic-none { grid-row: 1 / 3; width: 34px; }
.ship-picker-card .pkc-nm { font-weight: 600; align-self: end; }
.ship-picker-card .pkc-meta { color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 10px; }
.ship-picker-card .pkc-lv {
  position: absolute; top: 3px; left: 3px; background: rgba(0,0,0,.45); color: var(--text);
  font-size: 9px; padding: 0 4px; border-radius: 3px;
}
.ship-picker-card .pkc-lc {
  position: absolute; bottom: 3px; right: 5px; color: var(--text-dim); font-size: 9px; font-family: ui-monospace, monospace;
}
.ship-picker-card .pkc-stars {
  position: absolute; bottom: 3px; left: 5px; color: #caa23a; font-size: 9px; letter-spacing: -1px;
}
.ship-picker-card .pkc-tag {
  position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.45); color: var(--text-dim);
  font-size: 8px; padding: 0 4px; border-radius: 3px;
}

/* picker: score groups + rarity rows */
.pk-group-h { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
  margin: 8px 0 3px; padding-top: 6px; border-top: 1px solid var(--border); }
.pk-group-h:first-child { border-top: none; padding-top: 0; }
.pk-group-h .cmdr-sub { display: inline; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.picker-row[class*="rare-"] { border-left-width: 3px; }
.picker-row.rare-1 { border-left-color: var(--rare1); } .picker-row.rare-2 { border-left-color: var(--rare2); }
.picker-row.rare-3 { border-left-color: var(--rare3); } .picker-row.rare-4 { border-left-color: var(--rare4); }
.picker-row.rare-5 { border-left-color: var(--rare5); }

/* ── fleet page: formation visual (styled after the datamining ships/admirals
   pages' .formation-visual — dark tactical panel, class-restricted slot boxes) ── */
.fleet-visual {
  background: #0d1120; border: 1px solid #2a3454; border-radius: 8px;
  padding: 10px 12px; color: #dfe6f7; font-size: 12px;
  display: flex; flex-direction: column; height: 100%;
}
/* the rows share the leftover space instead of bunching at the top */
.fleet-visual .fv-row { flex: 1 1 auto; }
.fv-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid #2a3454;
}
.fv-name { font-weight: 700; font-size: 13px; color: #fff; }
.fv-passive { color: #9fb3d9; font-size: 11px; }
.fv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px dashed #232a44;
}
.fv-row:first-of-type { border-top: none; }
.fv-row.drop-hot { background: rgba(127, 161, 255, .10); border-radius: 6px; }
.fv-row-label {
  /* fixed, not min-width: a label that grows with its own text (the off-class
     warning, a long bonus line) shifts that row's slots and breaks the
     formation's symmetry (Goliath, 2026-09-13) */
  /* wider now that the type is bigger — still FIXED, so a long bonus line or the
     off-class warning can't shift that row's slots (Goliath, 2026-09-13) */
  width: 176px; flex: 0 0 176px; padding-top: 2px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #cdd7ef;
}
/* the row name reads at a glance from across the board (Goliath, 2026-09-14) */
.fv-row-label .fv-rt { font-weight: 700; font-size: 14px; letter-spacing: .05em;
  display: flex; align-items: center; gap: 7px; color: #eaf1ff; }
.fv-row-label .fv-row-ic { width: 24px; height: 24px; object-fit: contain; flex: none; }
.fv-row-bonus { text-transform: none; letter-spacing: 0; color: #7fe0a6; font-size: 12px; }
.fv-row-bonus-inactive { color: #5f708f; text-decoration: line-through; }
.fv-slot.fv-no-bonus { opacity: .7; filter: grayscale(55%); }
.fv-slot.fv-no-bonus .fv-badge-cls { color: #e08a8a; }
.fv-row-sum { text-transform: none; letter-spacing: 0; color: #cdd7f0; font-size: 11.5px; }
/* A row's slots must sit on ONE line — Goliath, 2026-09-14: "do not wrap fleet rows
   that have 4 ships, it needs to fit." Five 101px slots + gaps is ~545px, which the
   column now clears; nowrap means a genuinely over-wide row scrolls that row rather
   than silently reflowing and breaking the formation's shape. */
.fv-slots { display: flex; gap: 8px; flex-wrap: nowrap; flex: 1;
  justify-content: center; }
.fv-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; width: var(--ship-slot); }
.fv-slot {
  width: var(--ship-slot); height: var(--ship-slot); border: 2px solid #2f7d86; border-radius: 6px;
  background: linear-gradient(180deg, #123240, #0c2430);
  display: flex; align-items: center; justify-content: center; position: relative;
  cursor: pointer; overflow: hidden; flex: none;
}
.fv-slot:hover { border-color: #7fa1ff; }
.fv-slot.flagship { border-color: #caa23a; background: linear-gradient(180deg, #3a2f10, #241d0a); }
.fv-slot.drop-hot { outline: 2px solid #7fa1ff; outline-offset: 1px; }
.fv-slot.drop-ok { outline: 2px solid var(--good, #3fdc7a); outline-offset: 1px; background: rgba(63, 220, 122, .12); }
/* off-class drop: allowed (the game allows it too) but earns no formation row
   bonus — amber warning, never a "no entry" cursor (Goliath, 2026-09-12) */
.fv-slot.drop-warn { outline: 2px dashed #f0c674; outline-offset: 1px; background: rgba(240, 198, 116, .14); }
/* a second copy of a unique hull: refused, the game refuses it too (FC-015) */
.fv-slot.drop-bad { outline: 2px dashed var(--bad); outline-offset: 1px; background: rgba(226, 85, 77, .14); cursor: no-drop; }
.fv-slot.empty { border-style: dashed; }

/* admiral-first gate (Goliath, Phase 4): slots dimmed + inert until the
   fleet's admiral is confirmed owned */
.fleet-visual.locked .fv-slots { opacity: .4; filter: grayscale(70%); pointer-events: none; }
.fleet-visual.locked .fv-note { color: var(--bad, #e08a8a); font-style: normal; font-weight: 600; }
.admiral-gate {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #3a2410; border: 1px solid #caa23a; border-radius: 6px;
  padding: 6px 10px; font-size: 12px; color: #f0e0b0;
}
.admiral-gate select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.fv-slot .fv-cls { color: #eaf6fb; font-size: 9px; font-weight: 700; line-height: 1.15; text-align: center; padding: 0 2px; }
.fv-slot .fv-any { color: #8fd7ea; font-size: 22px; line-height: 1; }
.fv-slot .fv-plus { position: absolute; top: 2px; left: 4px; color: #5f708f; font-size: 11px; }
.fv-slot .fv-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.fv-slot .fv-badge-cls {
  position: absolute; top: 1px; left: 2px; background: rgba(4,10,20,.78);
  color: #eaf6fb; font-size: 8px; font-weight: 700; padding: 0 3px; border-radius: 3px;
}
.fv-slot .fv-chk { position: absolute; bottom: 1px; right: 3px; color: #3fdc7a; font-size: 10px; }
.fv-slot .fv-mship { position: absolute; top: 1px; right: 1px; background: rgba(4,10,20,.82);
  color: #8fd7ea; border: 1px solid #2f7d86; border-radius: 3px; font-size: 8px; line-height: 1.3;
  padding: 0 3px; cursor: pointer; }
.fv-slot .fv-mship:hover { border-color: #7fa1ff; color: #cfe8f2; }
.fv-slot .fv-mship.over { border-color: #d98a8a; color: #e08a8a; }

/* sub-fleet modal */
.sf-budget { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 5px; margin-bottom: 10px; }
.sf-budget.good { background: var(--checked-bg, var(--panel-2)); color: var(--good); }
.sf-budget.bad { background: #4a2020; color: #e08a8a; }
.sf-slots { display: flex; flex-direction: column; gap: 6px; }
.sf-slot { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); font-size: 12px; }
.sf-slot.sf-bad { border-color: var(--bad); background: #3a2020; }
.sf-slot .sf-n { width: 16px; text-align: center; color: var(--text-dim); font-weight: 700; }
.sf-slot .sf-cls { min-width: 62px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.sf-slot .sf-ship { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  background: none; border: none; color: var(--text); font-size: 12px; text-align: left; cursor: pointer; padding: 0; }
.sf-slot .sf-ship:hover { color: var(--accent); }
.sf-slot .sf-lc { font-size: 10px; color: var(--text-dim); }
.sf-slot .sf-stat { font-size: 10px; color: var(--text-dim); }
.sf-slot .sf-add { flex: 1; text-align: left; background: var(--panel-2); border: 1px dashed var(--border);
  border-radius: 4px; color: var(--accent); font-size: 11px; padding: 4px 8px; cursor: pointer; }
.sf-slot .sf-add:hover { border-color: var(--accent); }
.sf-slot .sf-x { background: none; border: none; color: var(--text-dim); font-size: 14px; cursor: pointer; }
.sf-slot .sf-x:hover { color: var(--bad); }
.fv-slot .fv-lc {
  position: absolute; bottom: 1px; left: 2px; background: rgba(4,10,20,.78);
  color: #cdd7f0; font-size: 8px; padding: 0 3px; border-radius: 3px;
}
.fv-slot .fv-x {
  position: absolute; top: 0; right: 1px; background: none; border: none; color: #d98a8a;
  font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .1s;
}
.fv-slot:hover .fv-x { opacity: 1; }
.fv-cap { font-size: 9px; color: #9fb3d9; text-align: center; line-height: 1.25; min-height: 12px; }
/* a mothership's bays, under its slot: its docked ships, or + where a bay is empty */
.fv-bays { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px;
  margin-top: 3px; padding: 3px 4px; border: 1px solid rgba(125,211,252,.35); border-radius: 6px;
  background: rgba(125,211,252,.06); }
.fv-bays.over { border-color: var(--bad); }
.fv-bays-l { width: 100%; text-align: center; font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  color: #9fd6ef; }
.fv-bays.over .fv-bays-l { color: var(--bad); }
.fv-bay { width: 28px; height: 28px; padding: 0; border-radius: 5px; border: 1px solid rgba(125,211,252,.45);
  background: rgba(4,10,20,.6); color: #9fd6ef; font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.fv-bay.empty { border-style: dashed; }
.fv-bay:hover, .fv-bay.drop-hot { border-color: var(--accent); color: #fff; background: rgba(91,141,239,.18); }
.fv-bay-img { width: 100%; height: 100%; object-fit: contain; }
.fdp-bay { margin-left: 4px; color: #9fd6ef; font-size: 10px; }
.fv-note { color: #7f8db3; font-size: 10px; font-style: italic; margin-top: 6px; }

.ship-card { cursor: grab; }

/* skills table: don't truncate the effect text */
#skills-table { overflow-x: auto; }
#skills-table .mini-table { table-layout: fixed; }
#skills-table .mini-table td { white-space: normal; word-break: break-word; }
.sk-eff, .sk-up, .sk-val, .sk-held, .sk-off { white-space: normal; word-break: break-word; }

.fleet-admiral { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.fleet-admiral select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 5px; padding: 3px 6px; font-size: 12px; margin: 0 6px; }

/* ── Commander page ─────────────────────────────────────────────────── */
.commander-panel { max-width: none; }   /* fills the page width (--page-max); reading pages cap below */
/* the reading pages keep a line length you can read */
/* THE page head, used by every view. Title, then optional page-specific context
   controls, then the actions and the primary button on the right. A page with no
   context controls behaves exactly as before (h2 takes the slack). */
.cmdr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cmdr-head h2 { flex: 1; }
.cmdr-head.has-ctx h2 { flex: 0 0 auto; }
.head-ctx { display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 12px; color: var(--text-dim); }
.head-ctx select { background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 5px; padding: 4px 7px; font-size: 13px; font-weight: 600; }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-actions .btn-link { font-size: 12px; }
.head-danger:hover { color: var(--bad, #e08a8a); }
.cmdr-grp { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 8px; background: var(--panel); }
.cmdr-grp > summary { cursor: pointer; padding: 9px 12px 9px 14px; font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
  color: var(--text); box-shadow: inset 3px 0 0 var(--accent); border-radius: 5px 0 0 0; }
.cmdr-grp:not([open]) > summary { border-radius: 5px 0 0 5px; }
.cmdr-grp[open] > summary { border-bottom: 1px solid var(--border); }
.cmdr-grp .cmdr-grp { margin: 8px 12px; }
.cmdr-cnt { font-weight: 400; color: var(--accent); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.cmdr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; padding: 8px 12px; }
.cmdr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; }
.cmdr-lbl { color: var(--text); }
.cmdr-ic { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 5px; }
.cmdr-sub { color: var(--text-dim); font-size: 10.5px; display: block; }
.cmdr-in { display: flex; align-items: center; gap: 4px; flex: none; }
.cmdr-in input { width: 54px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel-2); color: var(--text); font-size: 12px; text-align: right; }
.cmdr-max { color: var(--text-dim); font-size: 10.5px; }
.cmdr-maxbtn { font-size: 9px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--panel-2); color: var(--accent); cursor: pointer; letter-spacing: .03em; }
.cmdr-maxbtn:hover { background: var(--accent-bg, var(--panel-2)); border-color: var(--accent); }
/* checkbox-first rows: the tick sits before the thing it enables */
.cmdr-chk-row { justify-content: flex-start; gap: 8px; }
.cmdr-chk-row input { flex: none; margin: 0; }
.cmdr-chk-row .cmdr-lbl { text-transform: capitalize; }
.cmdr-row select, .cmdr-head select { background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 5px; padding: 3px 6px; font-size: 12px; }
.cmdr-titles .cmdr-title-row { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 12px; }
.cmdr-titles .cmdr-title-row input { margin-top: 2px; flex: none; }
.cmdr-note { color: var(--text-dim); font-size: 11px; font-style: italic; margin-top: 8px; }

/* commander header (name / level) */
.cmdr-identity { display: flex; align-items: center; gap: 10px; }
.cmdr-identity input[type="text"] { background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 5px; padding: 4px 8px; font-size: 14px; font-weight: 600; }
.cmdr-identity input[type="number"] { width: 56px; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 5px; padding: 4px 6px; font-size: 12px; }
.cmdr-identity label { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }

/* titles — active title gets a bold green highlight */
.cmdr-title-row.is-active { outline: 2px solid var(--good, #3ecf6a); outline-offset: 2px; border-radius: 4px; }
.cmdr-title-row .cmdr-lbl b.title-active-tag { color: var(--good, #3ecf6a); font-weight: 700; margin-left: 6px; }

/* alliance manual-entry fields */
.cmdr-alliance-fields input { width: 70px; }
.cmdr-alliance-instructions { font-size: 11px; color: var(--text-dim); margin: 4px 0 8px; }

/* station/building buffs — nested expandable list */
.cmdr-stations .cmdr-grp { margin: 6px 0 6px 12px; }
.cmdr-station-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px; padding: 8px 12px; margin-top: 4px; border-top: 1px dashed var(--border); }

/* About / Changelog pages */
.about-disclaimer p { font-size: 13px; line-height: 1.6; margin: 0 0 10px; max-width: 720px; }
.about-disclaimer ul { font-size: 13px; line-height: 1.6; margin: 0 0 10px; padding-left: 20px; max-width: 720px; }
.about-disclaimer li { margin-bottom: 6px; }
.about-disclaimer h3 { font-size: 15px; margin: 18px 0 6px; }
.about-disclaimer a { color: var(--accent, #4fc3f7); }
/* the public changelog: one release per date, each change under its kind */
.cl-intro { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.cl-release { margin-bottom: 26px; }
.cl-text { font-size: 13px; line-height: 1.55; margin: 6px 0 0; }
.cl-sec { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.cl-sec ul { margin: 0; padding-left: 18px; }
.cl-sec li { font-size: 13px; line-height: 1.5; margin: 0 0 5px; }
.cl-kind { align-self: start; justify-self: start; margin-top: 1px; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; border: 1px solid currentColor; white-space: nowrap; }
.cl-kind.cl-game-data { color: #3cc6c0; }  /* teal: apart from Changed's blue */
.cl-kind.cl-calculator { color: var(--gold); }
.cl-kind.cl-new { color: var(--good); }
.cl-kind.cl-changed { color: var(--accent); }
.cl-kind.cl-fixed { color: var(--warn); }
@media (max-width: 600px) { .cl-sec { grid-template-columns: 1fr; gap: 4px; } }
.badge-dim { background: var(--panel-2); color: var(--text-dim); border-radius: 4px; padding: 1px 6px; font-size: 10.5px; }

/* top nav — one flyout submenu per top-level group */
.topbar-row { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
  max-width: calc(var(--page-max) - 48px); margin-inline: auto; }
.topnav { display: flex; gap: 4px; }
.nav-group { position: relative; }
.topnav .nav-item { background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 13px; padding: 6px 12px; border-radius: 6px; }
.topnav .nav-item:hover:not(:disabled) { color: var(--text); background: var(--panel-2); }
.topnav .nav-item.active { color: var(--text); background: var(--panel-2); font-weight: 600; }
.topnav .nav-item:disabled { opacity: .4; cursor: default; }
.nav-drop { position: absolute; top: 100%; left: 0; display: none; flex-direction: column;
  min-width: 170px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); padding: 4px; z-index: 30; }
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { display: flex; }
/* Goliath, 2026-09-10: "the global nav bar drop down stays open after you
   click a menu item — it should close after you click." Clicking a
   .nav-sub keeps the browser's focus inside .nav-group (no real page
   navigation happens in this SPA), so :focus-within alone never releases,
   and the mouse is often still hovering the flyout too. JS adds this class
   on click and clears it on mouseleave (see the nav-sub click handler). */
.nav-group.nav-force-closed .nav-drop { display: none !important; }
.nav-sub { background: none; border: none; color: var(--text-dim); cursor: pointer; text-align: left;
  font-size: 12px; padding: 6px 10px; border-radius: 4px; white-space: nowrap; }
.nav-sub:hover:not(:disabled) { color: var(--text); background: var(--panel-2); }
.nav-sub.active { color: var(--accent); font-weight: 600; }
.nav-sub:disabled { opacity: .4; cursor: default; }

/* global footer -- game version / calc build moved here out of the topbar
   (Goliath, 2026-09-05 part 3: "A global footer can be introduced game version
   and calc build can go there for now.") */
.site-footer {
  color: var(--text-dim); font-size: 11px; padding: 14px 24px 20px;
  border-top: 1px solid var(--border); margin-top: 24px;
}

/* Profiles management page */
.profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.profile-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--panel); }
.profile-card.is-active { border-color: var(--good); border-width: 2px; }
.profile-card h3 { margin: 0 0 4px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.profile-card .pc-active-tag { color: var(--good); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.profile-card .pc-row { font-size: 12px; color: var(--text-dim); margin: 2px 0; }
.profile-card .pc-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Dock page (Goliath, 2026-09-05 part 3 phase 2) -- a simple grouped list for
   now; the fancier top-down-icon / rarity-bordered / star-rated 2-column
   card grid described for the fleet-build picker (phase 4) should replace
   this once that reusable picker component exists, rather than duplicating
   a bespoke design here. */
.dock-group { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 10px; }
.dock-row { display: grid; grid-template-columns: 26px 1fr auto auto auto; align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2); }
.dock-row[class*="rare-"] { border-left-width: 3px; }
.dock-row.rare-1 { border-left-color: var(--rare1); } .dock-row.rare-2 { border-left-color: var(--rare2); }
.dock-row.rare-3 { border-left-color: var(--rare3); } .dock-row.rare-4 { border-left-color: var(--rare4); }
.dock-row.rare-5 { border-left-color: var(--rare5); }
.dk-ic { width: 24px; height: 24px; object-fit: contain; }
.dk-ic-none { display: inline-block; }
.dk-nm { font-weight: 600; font-size: 13px; }
.dk-inst { color: var(--text-dim); font-weight: 400; font-size: 11px; }
.dk-meta { color: var(--text-dim); font-size: 11.5px; font-family: ui-monospace, monospace; }
.dk-actions { display: flex; gap: 8px; }

/* My Admirals page */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.adm-tile { position: relative; display: grid; grid-template-columns: 14px 84px 1fr; align-items: start; gap: 12px;
  border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--panel); }
.adm-tile.dragging { opacity: .5; }
.adm-drag { cursor: grab; color: var(--text-dim); align-self: center; user-select: none; }
.adm-portrait { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.adm-ic { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; background: var(--panel-2);
  border: 1px solid var(--border); }
.adm-ic-none { display: inline-block; width: 84px; height: 84px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); }
.adm-stars { display: flex; gap: 1px; }
.adm-star { cursor: pointer; color: var(--text-dim); font-size: 14px; line-height: 1; user-select: none; }
.adm-star.lit { color: #caa23a; }
.adm-star:hover { color: #e0b94a; }
.adm-stars.fixed .adm-star { cursor: default; }
.adm-stars.fixed .adm-star:hover { color: #caa23a; }
.adm-nm { font-weight: 600; font-size: 13.5px; }
.adm-title { color: var(--text-dim); font-weight: 400; }
.adm-sub { color: var(--text-dim); font-size: 11.5px; margin-top: 2px; }
.adm-formation-badge { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 4px; }
.adm-fields { display: flex; gap: 12px; margin-top: 8px; align-items: center; }
.adm-level-ro { font-size: 11px; color: var(--text-dim); }
.adm-level-ro b { color: var(--text); font-size: 12px; margin-left: 4px; }
.adm-info-btn { margin-top: 8px; }

/* MAX badge — no in-game asset exists for this, so it's a plain CSS pill
   reusing the same gold already used for lit stars (#caa23a). */
.adm-max-badge { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  color: #1a1608; background: #caa23a; border-radius: 3px; padding: 1px 5px; margin-left: 6px; }

/* Remove "×" — pinned to the tile corner (was a text button in the 4th grid
   column, which could overflow the tile), hidden until hover (Goliath,
   2026-09-10: "on hover is remove"). */
.adm-del { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; line-height: 18px;
  text-align: center; border-radius: 50%; background: none; border: none; color: var(--bad);
  font-size: 16px; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.adm-tile:hover .adm-del { opacity: 1; }
.adm-del:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.adm-del:disabled { color: var(--text-dim); cursor: default; }

.admiral-choice-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.admiral-choice-actions button { width: 100%; margin-top: 0; }

/* Admiral "Info" modal — top panel (Goliath, 2026-09-10: "copy what you did
   for the my admirals page") reuses the card tile's own .adm-portrait/
   .adm-main/.adm-nm/.adm-title/.adm-sub/.adm-fields markup verbatim
   (renderTopStars/renderTopSummary build the exact same inner HTML the
   tile's starsRow()/tile() do) — only sized up here via .ai-portrait-lg /
   scoping #admin-info-backdrop .adm-nm, never a parallel set of classes. */
/* Goliath, 2026-09-11: "its hard up against the picture add padding ...
   similar to the rest of the site" — the card grid's own .adm-tile uses a
   12px grid gap between portrait and text (static/style.css .adm-tile);
   this modal header lays the same two blocks out with plain flexbox
   instead, which has no gap of its own, so add the equivalent explicitly
   (and a bit more, since the portrait is much bigger here). */
#admin-info-backdrop .modal-header { gap: 20px; }
#admin-info-backdrop .ai-portrait-lg { flex: 0 0 auto; }
#admin-info-backdrop .ai-portrait-lg .adm-ic,
#admin-info-backdrop .ai-portrait-lg .adm-ic-none { width: 140px; height: 140px; }
#admin-info-backdrop .adm-main { display: flex; flex-direction: column; justify-content: center;
  padding: 6px 0 6px 20px; border-left: 1px solid var(--border); }
#admin-info-backdrop .adm-nm { font-size: 19px; }
.ai-tagline { display: block; color: var(--text-dim); font-size: 12px; font-style: italic;
  opacity: .85; margin-top: 2px; }
.ai-bio { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin: 6px 0 0;
  white-space: pre-line; }
.ai-stars { display: flex; gap: 2px; }
.ai-star { color: var(--text-dim); font-size: 18px; line-height: 1; }
.ai-star.lit { color: #caa23a; }
/* Generic data table (Goliath, 2026-09-11: "format it so it looks better...
   we will use this as the default styling for the majority of our tables
   moving forwards") -- title row with headings, plain row styling, a
   distinct total row. Not specific to the leadership table: any <table
   class="data-table"> gets this for free. */
/* Every link gets the site's look unless its component styles its own (2026-09-26:
   links on the fleet builder, Research Overview and Alliance Research were the
   browser's default blue / purple on the dark panels). Class rules still win. */
a, a:visited { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* a short message in the corner (_toast) */
.app-toast { position: fixed; right: 18px; bottom: 18px; z-index: 300; max-width: 420px;
  padding: 9px 14px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-size: 12.5px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.app-toast.show { opacity: 1; transform: none; }
.app-toast.good { border-color: var(--good); }
.app-toast.bad { border-color: var(--bad); }

.data-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
.data-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.data-table th.num, .data-table td.num { text-align: right; white-space: nowrap; }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:hover { background: var(--panel-2); }
/* My Fleets: one full-width table with its sort and admiral filter */
.ft-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 6px 0 10px;
  font-size: 12px; }
.ft-controls label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.ft-controls select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 5px; padding: 4px 8px; font-size: 12px; }
/* the fleets table spans the page (Goliath, 2026-09-25), not the 900px commander column */
.commander-panel.ft-panel { max-width: none; }
.ft-count { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.ft-table td { vertical-align: middle; }
.ft-table td.ft-drag { width: 16px; padding-right: 0; }
.ft-handle { cursor: grab; color: var(--text-dim); user-select: none; font-size: 14px; }
.ft-handle:hover { color: var(--accent); }
.ft-table tr.dragging { opacity: .45; }
.ft-name b { font-size: 13px; }
.ft-adm { white-space: nowrap; }
.ft-adm img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top;
  vertical-align: middle; margin-right: 8px; border: 1px solid var(--border); }
.ft-table td.num.warn { color: var(--warn); font-weight: 700; }
.ft-table td.num.bad { color: var(--bad); font-weight: 700; }
.ft-str[title] { cursor: help; }
.ft-act { white-space: nowrap; text-align: right; }
.ed-strength { color: var(--text); }
/* Buffs (e.g. Research / Nova Plus on the leadership table) are green; a
   plain row (Default / Admiral base / Skill 4) stays white -- Goliath,
   2026-09-10: "make buffs green and default/bases is white. skill 4 is
   white." */
.data-table tbody tr.buff td.num { color: var(--good); font-weight: 600; }
/* An unconfirmed contribution: real (measured in game) but not traced to a source yet.
   Purple so it reads as "flagged", distinct from the green .buff rows which are all
   accounted for. Goliath, 2026-09-13: "put in a purple or something a row that says
   unconfirmed source +50". That leadership row is closed (the game's base, 2026-10-01);
   the always-on +20% attack line uses this today. */
.data-table tbody tr.unconfirmed td { color: #c9a3ff; }
.data-table tbody tr.unconfirmed td.num { color: #c9a3ff; font-weight: 600; }
.data-table tbody tr.unconfirmed { background: rgba(160, 110, 255, 0.10); cursor: help; }
.idc-pop tr.unconfirmed td, .idc-pop tr.unconfirmed a { color: #c9a3ff; }
.idc-pop tr.unconfirmed { cursor: help; }
.data-table tbody tr.unconfirmed td:first-child::before { content: "? "; opacity: .8; }
.lb-unconfirmed { color: #c9a3ff; cursor: help; }
.data-table tfoot tr.total td { border-top: 2px solid var(--border); border-bottom: none;
  padding-top: 8px; font-weight: 700; background: var(--panel-2); }
/* Goliath, 2026-09-11: "make the icons for each skill lead the row (almost
   like a profile picture) so the icon is at least 2 rows of text high, it
   visually anchors the row" — icon is a fixed-size block spanning the
   name+slider line AND the description line below it, not squeezed inline
   with just the name. */
.ai-skill-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed var(--border); font-size: 12px; }
.ai-skill-row-icon { width: 48px; height: 48px; border-radius: 8px; object-fit: cover;
  flex: 0 0 auto; background: var(--panel-2); border: 1px solid var(--border); }
.ai-skill-row-icon-none { display: inline-block; }
.ai-skill-content { flex: 1; min-width: 0; }
.ai-skill-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Skill 4's branch <select> lost .field-row's styling once it moved out of
   a .field-row and into this shared row-head (Goliath, 2026-09-11: "skill 4
   give same treatment"). */
.ai-skill-row-head select { flex: 1 1 200px; min-width: 160px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 5px 8px;
  font-size: 13px; }
.ai-skill-nm { font-weight: 600; flex: 0 0 auto; min-width: 140px; }
.ai-skill-icon { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.ai-skill-desc { color: var(--text-dim); font-size: 11.5px; margin-top: 4px; line-height: 1.4; }
.ai-skill4 { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ai-row-nm { font-weight: 600; font-size: 13px; flex: 0 0 auto; min-width: 70px; }
.ai-row-bonus { color: var(--good); font-size: 12px; margin-top: 2px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px 2px; }
.ai-row-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 1px; }
.ai-row-slots { color: var(--text-dim); font-size: 10.5px; margin-top: 2px; }

/* Admiral Info sliders (level / skills / formation rows — Goliath, 2026-09-10:
   "level slider", "level by slider", "use sliders", all with a live value
   readout and, for skills/rows, the curve value updating as you drag). */
/* ── Step slider — the site-wide control for any level on a curve ──────────
   stepSlider() in app.js. A real range input over a track that shows the fill,
   a tick at every curve step (lit once passed), highlighted milestones and a
   hatched no-gain zone. Same visual language as the GIA step bars. */
.step-slider { position: relative; display: inline-block; flex: 1 1 auto; min-width: 120px; height: 26px;
  /* flex-basis auto (not flex: 1's 0%): in a column flex container a 0% basis collapsed it to 0px tall */
  --ss-thumb: 16px; vertical-align: middle; }
.ss-track { position: absolute; left: calc(var(--ss-thumb) / 2); right: calc(var(--ss-thumb) / 2);
  top: 50%; height: 10px; margin-top: -5px; border-radius: 5px; background: var(--panel);
  border: 1px solid var(--border); pointer-events: none; }
.ss-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 55%, transparent), var(--good)); }
.ss-dead { position: absolute; top: 0; bottom: 0; border-radius: 0 5px 5px 0;
  background: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, var(--warn) 40%, transparent) 3px 5px); }
.ss-tick { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px;
  background: var(--text-dim); opacity: .7; }
.ss-tick.hit { background: var(--text); opacity: 1; }
.ss-tick.major { top: -6px; height: 20px; width: 3px; margin-left: -1.5px; background: var(--warn); opacity: 1; }
/* high specificity + explicit resets: containers style inputs generically
   (.field-row input gives a text-box background/border that hid the track) */
.step-slider input.ss-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  flex: none; background: transparent; border: none; border-radius: 0; box-shadow: none;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.ss-input::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.ss-input::-moz-range-track { background: transparent; }
.ss-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--ss-thumb);
  height: var(--ss-thumb); margin-top: 5px; border-radius: 50%; background: var(--text);
  border: 3px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ss-input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--text);
  border: 3px solid var(--accent); }
.ss-input:focus { outline: none; }
.ss-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); }
.ai-slider-val { font-size: 12px; font-weight: 600; min-width: 24px; text-align: right; color: var(--text); }
.ai-max-all { text-align: right; margin-bottom: 6px; }
.ai-max-all .btn-link { font-size: 11px; }

/* My Fleets tile page — reuses .adm-tile/.adm-grid's look, simpler 2-col
   layout (no drag handle, actions live inside .adm-main) */
.fv-tile { grid-template-columns: 84px 1fr; }
.fv-tile-stat { font-size: 11px; color: var(--text-dim); background: var(--panel-2);
  border-radius: 4px; padding: 2px 6px; }
.fv-tile-stat.warn { color: #e0b94a; }
.fv-tile-stat.bad { color: var(--bad); font-weight: 600; }
.adm-del { align-self: start; }

/* Add-admiral picker modal */
.adm-picker-grid { max-height: 55vh; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-picker-card {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 2px 8px;
  align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 12px; background: var(--panel);
}
.adm-picker-card:hover { border-color: var(--accent); background: var(--panel-2); }
.adm-picker-card .apc-ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
  background: var(--panel-2); border: 1px solid var(--border); }
.adm-picker-card .apc-ic-none { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border); }
.adm-picker-card .apc-nm { font-weight: 600; align-self: end; }
.adm-picker-card .apc-meta { color: var(--text-dim); font-size: 10.5px; }

/* ── GIA page (Commander → GIA) ─────────────────────────────────────────── */
.gia-panel { max-width: none; }
.gia-partial { color: var(--warn); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.gia-na { color: var(--text-dim); font-weight: 400; font-style: italic; }
.gia-has { color: var(--good); }

/* in-game handbook art: white diamond icons on transparent — sized like the admirals page */
.gia-dia { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.gia-dia-sm { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 4px; }
.gia-dia-lg { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.gia-node-ic { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.gia-emblem { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(91, 141, 239, .45)); }

/* intro */
.gia-intro { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin-bottom: 12px; }
.gia-intro > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.gia-intro-grid { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 16px; padding: 4px 16px 14px; }
.gia-quote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); font-style: italic;
  color: var(--text); font-size: 12.5px; line-height: 1.5; background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 0 6px 6px 0; align-self: start; }
.gia-quote cite { display: block; margin-top: 6px; font-size: 10.5px; color: var(--text-dim); font-style: normal; }
.gia-how { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--text); }
.gia-how li { margin-bottom: 5px; }

/* cards */
.gia-card { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); padding: 10px 14px 12px; }
.gia-card > h3 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.gia-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.gia-explain { font-size: 12px; line-height: 1.5; color: var(--text-dim); margin: 0 0 10px; }

/* summary table + hover breakdown */
.gia-summary-tbl { width: 100%; }
.gia-summary-tbl .cmdr-sub { display: inline; }
.gia-sum-stat { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.gia-max { color: var(--text-dim); }
.gia-sum-bar { width: 22%; min-width: 60px; }
.gia-sum-bar span { display: block; height: 6px; border-radius: 3px; background: var(--good); min-width: 2px; }
.gia-popcell { position: relative; cursor: help; outline: none; }
.gia-popcell:hover, .gia-popcell:focus { background: var(--panel-2); }
.gia-pop { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 230px;
  text-align: left; background: var(--panel-2); border: 1px solid var(--accent); border-radius: 6px;
  padding: 8px 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: var(--text); font-weight: 400; white-space: normal; }
.gia-popcell:hover .gia-pop, .gia-popcell:focus .gia-pop { display: block; }
.gia-pop-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 4px; }
.gia-pop table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.gia-pop td { padding: 2px 0; border-bottom: 1px solid var(--border); }
.gia-pop td.num { text-align: right; color: var(--good); padding-left: 12px; }
.gia-pop-empty, .gia-pop-note { font-size: 11px; color: var(--text-dim); }
.gia-pop-note { margin-top: 6px; color: var(--warn); }
.gia-summary-note { margin: 6px 0 0; }

/* closest next rewards */
.gia-sort { margin-left: auto; display: inline-flex; font-weight: 400; }
.gia-sort button { background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 11px; padding: 2px 9px; cursor: pointer; }
.gia-sort button:first-child { border-radius: 4px 0 0 4px; }
.gia-sort button:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.gia-sort button.active { color: var(--text); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); }
.gia-sort button:last-child.active { border-left: 1px solid var(--accent); }
.gia-nx-note { margin: 0 0 6px; }
.gia-nx-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.gia-nx-row:last-child { border-bottom: none; }
.gia-nx-need { color: var(--warn); font-size: 11px; margin-left: 4px; }
.gia-nx-gain { color: var(--text-dim); margin-top: 2px; }
.gia-nx-gain b { color: var(--good); }
.gia-nx-empty { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin: 4px 0; }

/* collection bonus + step charts */
.gia-bonus { margin-bottom: 14px; }
.gia-globals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gia-global { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.gia-global-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.gia-chart { margin-top: 4px; }
.gia-svg { width: 100%; height: auto; display: block; }
.gia-svg-base { stroke: var(--border); stroke-width: 1; }
.gia-svg-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.gia-svg-area { fill: color-mix(in srgb, var(--good) 28%, transparent); }
.gia-svg-hatchline { stroke: color-mix(in srgb, var(--warn) 45%, transparent); stroke-width: 2; }
.gia-svg-deadlbl { fill: var(--warn); font-size: 10px; font-weight: 600; letter-spacing: .03em; }
.gia-svg-ceil { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gia-svg-axis { fill: var(--text-dim); font-size: 10px; }
.gia-svg-you { stroke: var(--good); stroke-width: 1; stroke-dasharray: 2 3; }
.gia-svg-dot { fill: var(--good); stroke: var(--bg); stroke-width: 2; }
.gia-svg-next { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.gia-svg-lbl { fill: var(--text); font-size: 11px; font-weight: 600; }

/* category cards */
.gia-cat { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin-bottom: 12px; overflow: hidden; }
.gia-cat-hd { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background-color: var(--panel-2);
  background-size: cover; background-position: right center; border-bottom: 1px solid var(--border); }
.gia-cat-title { flex: 1; min-width: 0; }
.gia-cat-title h3 { margin: 0; font-size: 18px; letter-spacing: .02em; display: flex; align-items: center; gap: 12px; }
.gia-cat-stat { font-size: 12px; font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; }
.gia-cat-desc { font-size: 11.5px; font-style: italic; color: var(--text-dim); margin-top: 3px; max-width: 620px; line-height: 1.4; }
.gia-cat-sum { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--text-dim); align-items: center; }
.gia-cat-sum b { color: var(--text); }
.gia-cat-toggle { flex: 0 0 auto; background: rgba(15, 20, 32, .7); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 5px 10px; font-size: 11.5px; cursor: pointer; }
.gia-cat-toggle:hover { border-color: var(--accent); color: var(--accent); }
.gia-cat.collapsed .gia-cat-nodes { display: none; }

/* node rows */
.gia-node { display: grid; grid-template-columns: minmax(200px, 1.2fr) 1fr 1fr; gap: 10px 12px;
  align-items: start; padding: 12px 14px; border-top: 1px solid var(--border); }
.gia-cat-hd + .gia-node { border-top: none; }
.gia-node-top { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.gia-node-id { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gia-node-id b { font-size: 14px; display: block; }
.gia-node-stat { display: block; font-size: 12px; color: var(--text); }
.gia-ships { display: flex; flex-wrap: wrap; gap: 5px; }
.gia-ship { width: 42px; height: 42px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border);
  opacity: .45; filter: grayscale(.6); }
.gia-ship.in-dock { opacity: 1; filter: none; outline: 2px solid var(--good); outline-offset: -1px; }
.gia-ship-noimg { display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
  background: var(--panel-2); color: var(--text-dim); }

/* tier blocks */
.gia-tier { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.gia-tier-hd { display: flex; align-items: center; gap: 8px; cursor: help; }
.gia-tier-nm b { display: block; font-size: 12.5px; }
.gia-tier-lbl { display: block; color: var(--text-dim); font-size: 10.5px; }
.gia-tier-in { display: flex; align-items: center; gap: 5px; }
.gia-in { width: 68px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--text); font-size: 12.5px; text-align: right; }
.gia-in::placeholder { color: var(--text-dim); font-style: italic; }
.gia-derived { font-weight: 700; font-size: 13px; min-width: 28px; text-align: right; }
.gia-tier-out b { font-weight: 600; }
.gia-next { color: var(--text-dim); font-size: 10.5px; }

/* progress bar with reward-step ticks */
.gia-bar { position: relative; height: 10px; border-radius: 5px; background: var(--panel); border: 1px solid var(--border); }
.gia-bar.unknown { opacity: .55; }
.gia-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 55%, transparent), var(--good)); transition: width .2s; }
.gia-dead { position: absolute; top: 0; bottom: 0; border-radius: 0 5px 5px 0;
  background: repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in srgb, var(--warn) 40%, transparent) 3px 5px); }
.gia-tick { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px;
  background: var(--text-dim); }
.gia-tick.hit { background: var(--text); }

.gia-ladders { grid-column: 1 / -1; font-size: 11px; }
.gia-ladders > summary { cursor: pointer; color: var(--text-dim); }
.gia-ladder-pair { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 6px; }
.gia-ladder-h { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.gia-ladder-tbl { width: auto; min-width: 130px; }
.gia-ladder-tbl td, .gia-ladder-tbl th { padding: 2px 8px; }

@media (max-width: 860px) {
  .gia-overview, .gia-globals, .gia-intro-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .gia-node { grid-template-columns: 1fr; }
  .gia-cat-hd { flex-wrap: wrap; }
}

/* ── Talents page (Commander → Talents) — modelled on the in-game Talent screen ── */
.tal-panel { max-width: none; }
.tal-how { padding: 4px 16px 14px 34px; }
.cmdr-moved { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 12px; }
.cmdr-moved a { color: var(--accent); }

.tal-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin-bottom: 8px; }
.tal-avail { text-align: right; min-width: 120px; }
.tal-big { font-size: 34px; font-weight: 700; line-height: 1; color: var(--text); }
.tal-big.bad { color: var(--bad); }
.tal-of { font-size: 16px; color: var(--text-dim); }
.tal-level { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-dim); }
.tal-level input { width: 80px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel-2); color: var(--text); font-size: 14px; }
.tal-spent { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.tal-spent-bar { height: 10px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.tal-spent-bar span { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--good) 55%, transparent), var(--good)); transition: width .2s; }
.tal-spent-bar.over span { background: var(--bad); }
.tal-alerts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }

/* talent builds — several named allocations, one active (nova_site/talent_builds.py).
   The active card is the only one that feeds the calc, so it is the only one that
   gets the accent; the rest read as plans. */
.tal-builds { margin-bottom: 10px; }
.tal-build-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.tal-build { display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 4px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.tal-build.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.tal-build.bad { border-color: var(--bad); }
.tal-build-main { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 3px 8px; border: 0; border-radius: 6px; background: none; color: var(--text);
  cursor: pointer; text-align: left; font: inherit; }
.tal-build.active .tal-build-main { cursor: default; }
.tal-build-main:hover { background: var(--panel-2); }
.tal-build.active .tal-build-main:hover { background: none; }
.tal-build-nm { font-size: 13px; font-weight: 600; }
.tal-build-sub { font-size: 11px; color: var(--text-dim); }
.tal-build.bad .tal-build-sub { color: var(--bad); }
.tal-build-flag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); padding: 1px 6px; border: 1px solid var(--accent); border-radius: 10px; }
.tal-build-acts { display: flex; gap: 1px; }
.tal-build-acts .btn-link { font-size: 13px; padding: 2px 5px; line-height: 1; opacity: .55; }
.tal-build-acts .btn-link:hover { opacity: 1; }
.tal-build-new { align-self: center; padding: 8px 12px; font-size: 12px; border-radius: 8px;
  border: 1px dashed var(--border); background: none; color: var(--text-dim); cursor: pointer; }
.tal-build-new:hover { color: var(--text); border-color: var(--text-dim); }

.tal-alert { font-size: 12px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); }
.tal-alert.bad { border-color: color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad); }
.tal-alert.warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); }
.tal-alert.info { color: var(--text-dim); }

/* the tree: columns left to right, like the game */
.tal-tree-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px;
  background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg) 70%); }
.tal-tree { display: flex; gap: 0; min-width: max-content; }
.tal-col { width: 214px; flex: 0 0 auto; display: flex; flex-direction: column; border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.tal-col:nth-child(even) { background: color-mix(in srgb, var(--panel) 45%, transparent); }
.tal-col-hd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 8px 12px 0; }
.tal-col-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 8px 12px 10px; }
.tal-col.locked .tal-col-body { opacity: .42; filter: grayscale(.6); }
.tal-col.bad-spend .tal-col-body { opacity: .75; outline: 1px dashed var(--bad); outline-offset: -4px; border-radius: 6px; }
.tal-gate { padding: 8px 12px 10px; font-size: 11px; text-align: center; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); min-height: 34px; }
.tal-gate-ok { color: var(--text); }
.tal-gate-no { color: var(--warn); }
.tal-gate-warn { display: block; color: var(--bad); font-size: 10.5px; margin-top: 2px; }

.tal-node { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.tal-nm { font-size: 12.5px; color: var(--text); height: 31px; line-height: 1.25; display: flex;
  align-items: flex-end; justify-content: center; overflow: hidden; }
.tal-unrel { font-size: 9.5px; color: var(--warn); text-transform: uppercase; }
.tal-frame { position: relative; width: 66px; height: 66px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  border: 2px solid var(--border); box-shadow: inset 0 0 12px rgba(0, 0, 0, .45); }
.tal-frame.partial { border-color: var(--good); box-shadow: inset 0 0 12px rgba(0, 0, 0, .45), 0 0 8px color-mix(in srgb, var(--good) 35%, transparent); }
.tal-frame.maxed { border-color: #d9a441; box-shadow: inset 0 0 12px rgba(0, 0, 0, .45), 0 0 10px rgba(217, 164, 65, .45); }
.tal-ic { width: 48px; height: 48px; object-fit: contain; }
.tal-pts { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700;
  padding: 0 6px; border-radius: 4px; background: rgba(10, 14, 22, .85); color: var(--text); }
.tal-frame.partial .tal-pts { color: var(--good); }
.tal-frame.maxed .tal-pts { color: #f0c46a; }
.tal-node .step-slider { width: 100%; min-width: 0; flex: none; height: 26px; }
.tal-eff { font-size: 11px; line-height: 1.35; height: 44px; overflow: hidden; }
.tal-cur { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tal-next { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--text-dim); font-size: 10.5px; }
.tal-cur + .tal-next { -webkit-line-clamp: 1; }

/* summary: full width under the unique row, in two columns when there is room */
.tal-sum-card { margin-bottom: 12px; }
.tal-sum-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.tal-sum-cols.one { grid-template-columns: minmax(0, 1fr); }
.tal-sum-eff { display: flex; align-items: center; gap: 8px; }
.tal-sum-ic { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.tal-econ { margin-top: 8px; }
.tal-econ > summary { cursor: pointer; font-size: 12px; color: var(--text-dim); padding: 4px 0; }
.tal-combat { display: inline-block; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 4px; padding: 0 5px; }

/* unique talents: one row of seven tiles under the tree, each showing only its pick */
.tal-uniq-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px;
  padding: 10px; border: 1px solid var(--border); border-radius: 8px;
  background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg) 70%); }
.tal-uq { position: relative; min-width: 0; }
.tal-uq-btn { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 8px 9px; text-align: center; font: inherit; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--border); border-radius: 8px; }
.tal-uq-btn:hover, .tal-uq.open .tal-uq-btn { border-color: var(--accent); }
.tal-uq.locked .tal-uq-btn { opacity: .5; filter: grayscale(1); cursor: not-allowed; }
.tal-uq.locked .tal-uq-btn:hover { border-color: var(--border); }
.tal-uq-hd { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; }
.tal-slot-lv { color: var(--text-dim); }
.tal-uq-frame { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 22px; color: var(--text-dim);
  background: color-mix(in srgb, var(--panel-2) 80%, transparent); border: 2px solid var(--border);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .45); }
.tal-uq-frame.sel { border-color: #d9a441; box-shadow: inset 0 0 12px rgba(0, 0, 0, .45), 0 0 10px rgba(217, 164, 65, .45); }
.tal-uq-frame.empty { border-style: dashed; }
.tal-uq-ic { width: 42px; height: 42px; object-fit: contain; }
.tal-uq-nm { font-size: 12px; font-weight: 600; line-height: 1.25; }
.tal-uq-nm.dim { color: var(--text-dim); font-weight: 400; }
.tal-uq-txt { font-size: 11px; line-height: 1.3; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.tal-uq-state { margin-top: auto; padding-top: 2px; font-size: 10.5px; }
.tal-uq-state .tal-gate-warn { margin-top: 1px; }
/* the picker: that slot's options, dropped under its tile */
.tal-pick { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 300px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.tal-pick.right { left: auto; right: 0; }
.tal-pick-hd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.tal-pick-clear { align-self: flex-end; font-size: 11.5px; }
.tal-opt { display: flex; align-items: center; gap: 8px; flex: none; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; color: var(--text); }
.tal-opt:hover { border-color: var(--accent); }
.tal-opt.sel { border-color: #d9a441; box-shadow: 0 0 0 1px #d9a441, 0 0 10px rgba(217, 164, 65, .3);
  background: color-mix(in srgb, #d9a441 10%, var(--panel)); }
.tal-opt.unreleased { opacity: .6; }
.tal-opt-ic { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.tal-opt-txt { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.3; }
.tal-opt-txt span { color: var(--text-dim); font-size: 11px; }
@media (max-width: 1100px) {
  .tal-uniq-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tal-sum-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tal-uniq-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tal-level-val { font-size: 18px; font-weight: 700; color: var(--text); }
.tal-level { gap: 2px; }
.tal-level a { color: var(--accent); }

/* My Profiles card: commander name + level (the one place they're edited) */
.pc-cmdr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0; font-size: 12px; color: var(--text-dim); }
.pc-cmdr label { display: flex; align-items: center; gap: 5px; }
.pc-cmdr input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 4px;
  padding: 3px 6px; font-size: 12.5px; }
.pc-cmdr .pc-name { width: 130px; }
.pc-cmdr .pc-level { width: 62px; }
.pc-status { font-size: 11px; color: var(--text-dim); }
.pc-status.bad { color: var(--bad); }

/* Investment page: identity is read-only here */
.cmdr-id-name { font-size: 16px; font-weight: 700; color: var(--text); }
.cmdr-id-level { font-size: 14px; color: var(--text-dim); }
.cmdr-id-edit { font-size: 12px; color: var(--accent); margin-left: 4px; }

/* the slim themed scroll bar is a SHARED treatment now — see .thin-scroll near
   the end of this file. It started here, bespoke to the talent tree; Goliath hit
   the browser default on the fleet builder's My-ships pane (2026-09-14) and the
   fix is one rule every scrollable panel uses, not a second copy of this one. */

/* column map: 1-14 coloured by state, bright = on screen, click to jump */
.tal-map { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: center; }
.tal-map-col, .tal-map-arrow { min-width: 24px; height: 22px; padding: 0 5px; border-radius: 4px; cursor: pointer;
  font-size: 11px; background: var(--panel); color: var(--text-dim); border: 1px solid var(--border); opacity: .55; }
.tal-map-arrow { font-size: 15px; line-height: 1; opacity: .9; }
.tal-map-col.vis { opacity: 1; border-color: var(--accent); }
.tal-map-col.has { color: var(--good); border-bottom: 2px solid var(--good); }
.tal-map-col.full { color: #f0c46a; border-bottom: 2px solid #d9a441; }
.tal-map-col.locked { color: var(--text-dim); border-bottom-color: var(--border); font-style: italic; }
.tal-map-col:hover, .tal-map-arrow:hover { opacity: 1; border-color: var(--accent); color: var(--text); }

/* ── Research (Commander → Research Overview / Research Trees) ─────────── */
.res-panel { max-width: none; }
.res-how { padding: 4px 16px 14px 34px; }
.res-overall { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: flex-end; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin-bottom: 12px; }
.res-overall > div { display: flex; flex-direction: column; gap: 2px; }
.res-big { font-size: 34px; font-weight: 700; line-height: 1; }
.res-mid { font-size: 18px; font-weight: 700; }
.res-tcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.res-tc { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid #1d3a55;
  text-decoration: none; color: var(--text); position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(64, 200, 255, .14), transparent 60%), linear-gradient(180deg, #0f2236, #0b1726); }
.res-tc:hover { border-color: #53d2f0; }
.res-tc-hd { display: flex; align-items: center; gap: 10px; }
.res-tc-hd > div { display: flex; flex-direction: column; }
.res-tc-ic { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(80, 220, 255, .5)); }
.res-tc-pct { font-size: 40px; font-weight: 700; line-height: 1; color: #bff3ff; text-shadow: 0 0 12px rgba(80, 220, 255, .45); }
.res-tc-pct span { font-size: 18px; margin-left: 2px; color: var(--text-dim); }
.res-tc-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.res-tc-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2bb3d9, #8ff0ff); }
.res-tc-line { font-size: 12px; color: var(--text-dim); }
.res-tc-cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 12px; }
.res-tc-cost > div { display: flex; flex-direction: column; }
.res-tc-cost b { font-size: 14px; }
.res-tc-cost small { color: var(--text-dim); font-weight: 400; }
.res-tc-go { font-size: 11.5px; color: #53d2f0; align-self: flex-end; }
.res-card { margin-bottom: 12px; }
.res-scroll { overflow: visible; }   /* popovers must not be clipped; scroll only when narrow */
.res-rows { width: 100%; }
.res-rows th { white-space: nowrap; }
.res-rowname { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.res-rowname img { width: 26px; height: 26px; object-fit: contain; }
.res-cell { min-width: 86px; }
.res-v { display: block; font-weight: 600; }
.res-mini { display: block; height: 4px; border-radius: 2px; background: var(--panel-2); margin: 3px 0 1px auto; width: 70px; overflow: hidden; }
.res-mini span { display: block; height: 100%; background: var(--good); }
.res-full .res-mini span { background: #d9a441; }
.res-of { display: block; font-size: 10.5px; color: var(--text-dim); }
.res-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.res-small td, .res-small th { font-size: 12px; }
.res-tag { font-size: 9.5px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-dim);
  margin-left: 4px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.res-t-Singularity { color: #8fe3ff; border-color: rgba(143, 227, 255, .4); }
.res-t-Matrix { color: #b9a6ff; border-color: rgba(185, 166, 255, .4); }
.res-t-Vanilla { color: #9fe0a8; border-color: rgba(159, 224, 168, .4); }
.res-on { display: flex; align-items: center; gap: 8px; }
.res-other-ic { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.res-other { margin-top: 6px; }
.res-other > summary { cursor: pointer; font-size: 12.5px; padding: 4px 0; }
.res-other-tbl { width: 100%; }
.res-next-tbl { width: 100%; }
.res-next-tbl td { font-size: 12px; white-space: nowrap; }
.res-nx-sort { margin-left: auto; display: flex; gap: 10px; font-weight: 400; font-size: 11.5px; }
.res-nx-sort .on { color: var(--text); text-decoration: underline; }

.rt-top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rt-jump { display: flex; gap: 8px; flex-wrap: wrap; }
.rt-chip { border: 1px solid #1d3a55; background: linear-gradient(180deg, #0f2236, #0b1726); color: var(--text); border-radius: 16px;
  padding: 5px 12px; cursor: pointer; font-size: 12px; }
.rt-chip:hover { border-color: #53d2f0; }
.rt-chip span { color: #8ff0ff; margin-left: 4px; }
.rt-lab { display: flex; align-items: center; gap: 10px; }
.rt-lab .step-slider { width: 220px; flex: none; }
.rt-lab-val { font-weight: 700; min-width: 64px; }
.rt-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rt-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid; margin-left: 6px; }
.rt-key-max { border-color: #53d2f0; }
.rt-key-part { border-color: #d9a441; }
.rt-key-zero { border-color: #3a4a5c; }
.rt-tree { margin-bottom: 18px; scroll-margin-top: 70px; }
.rt-tree-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 4px 2px 6px; }
.rt-tree-ic { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(80, 220, 255, .45)); }
.rt-tree-title { display: flex; flex-direction: column; }
.rt-tree-title b { font-size: 15px; }
.rt-tree-pct { display: flex; flex-direction: column; align-items: flex-start; }
.rt-pct { font-size: 22px; font-weight: 700; color: #bff3ff; line-height: 1; }
.rt-tree-hd .tal-map { margin-left: auto; }
.rt-tree-btns { display: flex; gap: 10px; font-size: 11.5px; }
.rt-wrap { --rt-col: 196px; border-color: #1d3a55;
  background: radial-gradient(rgba(120, 190, 255, .10) 1px, transparent 1.3px) 0 0 / 14px 14px, linear-gradient(180deg, #0e2034, #0a1624); }
.rt-grid { position: relative; display: grid; gap: 16px 0; padding: 18px 10px 16px; min-width: max-content; }
.rt-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.rt-links path { fill: none; stroke: #2a5a7a; stroke-width: 2; stroke-dasharray: 5 4; }
.rt-links path.on { stroke: #53d2f0; filter: drop-shadow(0 0 3px rgba(83, 210, 240, .55)); }
.rt-links path.rt-dia { fill: #0e2034; stroke: #2a5a7a; stroke-dasharray: none; }
.rt-links path.rt-dia.on { fill: #1b4a66; stroke: #8ff0ff; }
.rt-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 16px; text-align: center; }
.rt-frame { position: relative; width: 62px; height: 62px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #13283c, #0b1623); border: 2px solid #2b4760; box-shadow: inset 0 0 12px rgba(0, 0, 0, .5); cursor: help; }
.rt-frame.partial { border-color: #d9a441; }
.rt-frame.maxed { border-color: #53d2f0; box-shadow: inset 0 0 12px rgba(0, 0, 0, .5), 0 0 10px rgba(83, 210, 240, .4); }
.rt-frame.zero .rt-ic { opacity: .45; filter: grayscale(.7); }
.rt-frame.invalid { border-color: var(--bad); box-shadow: 0 0 10px color-mix(in srgb, var(--bad) 55%, transparent); }
.rt-ic { width: 46px; height: 46px; object-fit: contain; }
.rt-lv { position: absolute; top: -10px; left: calc(100% + 3px); font-size: 12.5px; font-weight: 700; color: #7c8fa3;
  text-shadow: 0 1px 2px #000; white-space: nowrap; }
.rt-frame.partial .rt-lv { color: #f0c46a; }
.rt-frame.maxed .rt-lv { color: #e8fbff; }
.rt-warn { position: absolute; bottom: -7px; right: -9px; width: 19px; height: 17px; font-size: 11px; font-weight: 800; line-height: 20px;
  text-align: center; color: #0b1623; background: #f0c46a; clip-path: polygon(50% 0, 100% 100%, 0 100%); cursor: help; }
.rt-warn.bad { background: var(--bad); color: #fff; }
.rt-warn-inline { position: static; display: inline-block; margin-left: 6px; }
.rt-nm { font-size: 12px; line-height: 1.25; height: 30px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; color: #d7ecff; }
.rt-node .step-slider { width: 100%; min-width: 0; flex: none; height: 24px; }
.rt-eff { font-size: 10.5px; line-height: 1.3; height: 40px; overflow: hidden; color: var(--text-dim); }
.rt-eff .tal-cur { -webkit-line-clamp: 2; }
.rt-eff .tal-gate-no, .rt-eff .tal-gate-warn { display: block; }
.rt-toggle { font-size: 11px; color: var(--text-dim); height: 24px; display: flex; align-items: center; gap: 5px; }
.rt-cat-station .rt-frame, .rt-cat-defense .rt-frame { border-style: dashed; }
.rt-flash .rt-frame { animation: rtFlash 1.1s ease-in-out 2; }
@keyframes rtFlash { 50% { box-shadow: 0 0 0 4px rgba(143, 240, 255, .6), 0 0 18px rgba(143, 240, 255, .7); } }
.tal-map-col.bad { color: var(--bad); border-bottom: 2px solid var(--bad); }
.rt-problems { margin: 4px 0 0; padding-left: 18px; }
.p-research-ro { font-weight: 600; }
@media (max-width: 900px) { .res-tcs, .res-trio { grid-template-columns: 1fr; } .res-scroll { overflow-x: auto; } }
.tal-alert a { color: inherit; text-decoration: underline; font-weight: 600; }
.gia-pop td.num.gia-max { color: var(--text-dim); }
.cmdr-row-slider { align-items: center; gap: 14px; grid-column: 1 / -1; }
.cmdr-sub a { color: var(--accent); }
.cmdr-in-slider { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cmdr-in-slider .step-slider { flex: 1 1 auto; max-width: 420px; min-width: 200px; }

/* ── Commander Summary / Titles / Buildings / Alliance (2026-09-11) ─────── */
.sum-panel { max-width: none; }
.sum-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sum-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text);
  cursor: pointer; text-align: left; font-size: 12px; }
.sum-chip span { color: var(--text-dim); font-size: 11px; }
.sum-chip:hover { border-color: var(--accent); }
.sum-chip.sel { border-color: #53d2f0; box-shadow: 0 0 0 1px #53d2f0; background: linear-gradient(180deg, #0f2236, #0b1726); }
.sum-chip .pc-active-tag { position: absolute; top: 6px; right: 8px; font-style: normal; }
.sum-new { justify-content: center; align-items: center; color: var(--accent); border-style: dashed; }
.sum-id { margin-bottom: 12px; }
.sum-id-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sum-id-title { display: flex; flex-direction: column; gap: 3px; }
/* "Profile: <name>" in large white text: the commander picture is gone (2026-09-27) */
.sum-id-title h3 { margin: 0; font-size: 22px; font-weight: 700; color: #fff; }
.sum-id-acts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* the identity card (tidied 2026-09-27, Goliath: "this bit is messy"): the four identity fields
   and the two account switches on the left, faction reputation on the right, the note and Save
   along the foot */
.sum-id-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 16px; }
@media (min-width: 1100px) {
  .sum-id-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 22px; }
  .sum-id-body > .sum-frep { border-left: 1px solid var(--border); padding-left: 22px; }
}
.sum-id-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sum-id-fields { display: grid; gap: 12px; align-items: end;   /* boxes stay in line when a label wraps */
  grid-template-columns: minmax(140px, 2fr) minmax(64px, .7fr) minmax(120px, 1.3fr) minmax(100px, 1.1fr); }
.sum-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sum-fld > span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.sum-fld input, .sum-fld select { width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2); color: var(--text); }
.sum-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sum-tog { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  cursor: pointer; font-size: 12px; color: var(--text); }
.sum-tog > span { display: flex; flex-direction: column; gap: 1px; }
.sum-tog b { font-size: 13px; }
/* Nova Plus is gold: a paid subscription */
.sum-nova { border: 2px solid #d9a441;
  background: linear-gradient(180deg, rgba(217, 164, 65, .10), rgba(217, 164, 65, .03)); }
.sum-nova.on { box-shadow: 0 0 0 1px #d9a441, 0 0 14px rgba(217, 164, 65, .45); }
.sum-nova b { color: #f0c46a; }
.sum-id-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border); }
.sum-id-foot .cmdr-note { margin: 0 auto 0 0; }
@media (max-width: 700px) {
  .sum-id-fields { grid-template-columns: 1fr 1fr; }
  .sum-toggles { grid-template-columns: 1fr; }
}
/* faction reputation — one stepSlider per faction that grants a FLEET stat.
   Sits on its own row of the identity card, beside Nova Plus. */
.sum-frep { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.frep-hd { display: flex; flex-direction: column; gap: 3px; font-size: 12px; margin-bottom: 2px; }
.frep-title { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.frep-hd .cmdr-sub { line-height: 1.45; }
.frep-row { display: grid; grid-template-columns: 96px minmax(160px, 1fr) minmax(170px, .75fr);
  align-items: center; gap: 12px; font-size: 12px; }
.frep-rank, .frep-sub { display: block; }
.frep-sub { font-size: 11px; color: var(--text-dim); }
.frep-name { color: var(--text); font-weight: 600; }
.frep-now { color: var(--text-dim); }
.frep-now b { color: var(--text); }
.frep-eff { color: var(--good); }
.frep-unset { opacity: .65; font-style: italic; }
@media (max-width: 760px) { .frep-row { grid-template-columns: 1fr; gap: 2px; } }

.sum-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.sum-list li { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--panel-2); }
.sum-list li > span { flex: 1; }
.sum-dot { flex: 0 0 auto !important; width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); margin-top: 3px; }
.sum-ck-bad .sum-dot { background: var(--bad); }
.sum-ck-warn .sum-dot { background: var(--warn); }
.sum-ck-info .sum-dot { background: #53d2f0; }
.sum-ck-ok .sum-dot { background: var(--good); }
.sum-pr li .cmdr-sub { display: inline; flex: 0 0 auto; }
.sum-go { color: var(--accent); white-space: nowrap; font-size: 11.5px; }
.sum-buffs { width: 100%; }
.sum-buffs th { white-space: nowrap; }
.sum-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.sum-total { font-weight: 700; }
.sum-bar-h { min-width: 160px; }
.sum-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--panel-2); min-width: 150px; }
.sum-bar span { display: block; height: 100%; }
.sum-bar-empty { opacity: .5; }
.sum-sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.sum-sys { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--panel-2); display: flex; flex-direction: column; gap: 2px; }
.sum-sys-hd { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.sum-sys-big { font-size: 20px; font-weight: 700; margin-top: 4px; }
.sum-tree { display: grid; grid-template-columns: 76px 1fr 44px; align-items: center; gap: 6px; font-size: 11px; margin-top: 3px; color: var(--text-dim); }
.sum-tree-bar { height: 5px; border-radius: 3px; background: var(--panel); overflow: hidden; }
.sum-tree-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2bb3d9, #8ff0ff); }
.sum-fleets { width: 100%; }
.sum-adm { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
.sum-ld { height: 6px; width: 140px; border-radius: 3px; background: var(--panel-2); overflow: hidden; margin-bottom: 2px; }
.sum-ld i { display: block; height: 100%; background: var(--good); }
.sum-ld.over i { background: var(--bad); }

.ttl-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; margin-bottom: 12px; }
.ttl-stat { display: flex; flex-direction: column; gap: 2px; }
.ttl-how { flex: 1 1 360px; margin: 0; }
.ttl-overview { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ttl-quick { display: flex; flex-wrap: wrap; gap: 12px; }
.ttl-econ { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-dim); }
.ttl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ttl-grid[data-filter="owned"] .ttl-card:not(.owned), .ttl-grid[data-filter="missing"] .ttl-card.owned { display: none; }
.ttl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel); font-size: 12px; opacity: .72; }
.ttl-card.owned { opacity: 1; background: var(--panel-2); }
.ttl-card.is-active { border: 2px solid var(--good); box-shadow: 0 0 10px color-mix(in srgb, var(--good) 35%, transparent); }
.ttl-own { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ttl-src { color: var(--text-dim); font-size: 11px; }
.ttl-eff { display: flex; flex-direction: column; line-height: 1.35; }
.ttl-equip { align-self: flex-end; }

.bld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.bld-hd { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.bld-lv { font-size: 20px; font-weight: 700; color: #bff3ff; }
.bld-slider { display: flex; align-items: center; gap: 8px; }
.bld-slider .step-slider { flex: 1 1 auto; min-width: 0; }
.bld-now { margin-top: 8px; font-size: 12.5px; color: var(--good); }

.all-member { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; }
.all-member > span { display: flex; flex-direction: column; }
.all-card.all-off { opacity: .45; filter: grayscale(.6); }
.all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 20px; }
@media (max-width: 900px) { .sum-two, .ttl-overview { grid-template-columns: 1fr; } }
.gia-explain a { color: var(--accent); }
.stat-ic { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.all-row { justify-content: flex-start; gap: 10px; }
.all-row .cmdr-lbl { flex: 1; }
.ttl-ic { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.ttl-card:not(.owned) .ttl-ic { filter: grayscale(.8); opacity: .6; }
.ttl-eq { flex-direction: row; align-items: center; gap: 10px; }
.ttl-eq > span { display: flex; flex-direction: column; }
.ttl-ic-big { width: 52px; height: 52px; object-fit: contain; }
.bld-hd { gap: 10px; justify-content: flex-start; }
.bld-hd .bld-lv { margin-left: auto; }
.bld-ic { width: 40px; height: 40px; object-fit: contain; }
.sum-sys-hd { gap: 8px; justify-content: flex-start; }
.sum-sys-hd .sum-go { margin-left: auto; }
.sum-sys-ic { width: 24px; height: 24px; object-fit: contain; }
.res-cost-ic { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 3px; }
.res-mid .res-cost-ic { width: 20px; height: 20px; vertical-align: -3px; }
.bld-hd { align-items: center; }
.sum-sys-wide { grid-column: span 2; }
.sum-gia { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.sum-gia-row { display: grid; grid-template-columns: 62px 1fr 44px 1fr 56px; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.sum-gia-hd { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.sum-gia-k { display: flex; align-items: center; gap: 5px; color: var(--text); font-weight: 600; }
.sum-gia-k img { width: 18px; height: 18px; object-fit: contain; }
.sum-gia-bar { height: 6px; border-radius: 3px; background: var(--panel); overflow: hidden; }
.sum-gia-bar i { display: block; height: 100%; }
.sum-gia-bar.ships i { background: linear-gradient(90deg, #b88a2e, #f0c46a); }
.sum-gia-bar.bs i { background: linear-gradient(90deg, #2bb3d9, #8ff0ff); }
.sum-gia-bar.full i { box-shadow: 0 0 6px rgba(143, 240, 255, .6); }
.sum-gia-n { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .sum-sys-wide { grid-column: auto; } }

/* Admiral Catalog / Unreleased (2026-09-11) */
.acat-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 12px; }
.acat-how { flex: 1 1 100%; margin: 0; }
.ttl-quick .on { color: var(--text); text-decoration: underline; }
.acat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; }
.acat-grid[data-filter="owned"] .acat-tile:not(.owned), .acat-grid[data-filter="missing"] .acat-tile.owned { display: none; }
.acat-tile { display: flex; gap: 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); }
.acat-tile.owned { border-color: color-mix(in srgb, var(--good) 55%, var(--border)); }
.acat-tile .adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.acat-owned { font-size: 10px; font-weight: 700; color: var(--good); border: 1px solid var(--good); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }
.acat-tag { font-size: 11.5px; font-style: italic; color: var(--text-dim); }
.acat-rows { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.acat-row { display: grid; grid-template-columns: 22px 64px 1fr; align-items: center; gap: 6px; font-size: 11.5px; }
.acat-row img { width: 20px; height: 20px; object-fit: contain; }
.acat-rn { color: var(--text-dim); }
.acat-bonus img { width: 16px; height: 16px; vertical-align: -3px; }
.acat-facts { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.acat-acts { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.acat-add { padding: 4px 10px; font-size: 12px; }
.ai-readonly input, .ai-readonly select, .ai-readonly button:not([data-ai-ro-add]):not(.et-tab), .ai-readonly .step-slider,
.ai-readonly [data-adm-star], .ai-readonly [data-ai-jump], .ai-readonly [data-ai-maxall] { pointer-events: none; opacity: .55; }
.ai-ro-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ai-ro-banner .btn-primary { margin-left: auto; }
.unrel-adm { margin-bottom: 14px; }
.unrel-hd { display: flex; gap: 14px; }
.unrel-hd .adm-main { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.unrel-note { margin: 2px 0 0; font-size: 12px; color: var(--warn); line-height: 1.4; }
.unrel-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.unrel-rows td { font-size: 12px; }
.unrel-skills { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; }
.roster-grid.unrel-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.unrel-ship { display: flex; gap: 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--border);
  border-left: 4px solid var(--rare-c, var(--border)); background: var(--panel); }
.unrel-ship.rare-1 { --rare-c: var(--rare1); } .unrel-ship.rare-2 { --rare-c: var(--rare2); }
.unrel-ship.rare-3 { --rare-c: var(--rare3); } .unrel-ship.rare-4 { --rare-c: var(--rare4); } .unrel-ship.rare-5 { --rare-c: var(--rare5); }
.unrel-art { flex: 0 0 120px; display: flex; align-items: center; justify-content: center; }
.unrel-art img { max-width: 120px; max-height: 110px; object-fit: contain; }
.unrel-art .no-image { width: 110px; height: 90px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: 8px; color: var(--text-dim); font-size: 11px; }
.unrel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.unrel-stats { font-size: 12px; color: var(--text-dim); }
.unrel-foot { grid-column: 1 / -1; }
@media (max-width: 900px) { .acat-grid { grid-template-columns: 1fr; } .unrel-cols { grid-template-columns: 1fr; } }
.unrel-chip { font-size: 10px; font-weight: 700; color: #e08a8a; background: #4a2020; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; letter-spacing: .03em; }
.roster-filters[hidden] { display: none; }

/* Equipment pages (2026-09-11) */
.eq-how { margin: 0 0 10px; }
.eq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.eq-bar input[type=text], .eq-bar select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.eq-bar input[type=text] { min-width: 200px; }
.eq-chips { display: inline-flex; gap: 4px; }
.eq-chip { background: var(--panel); color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-weight: 600; }
.eq-chip.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.eq-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); }
.eq-level { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 14px; }
.eq-level .step-slider { flex: 0 1 360px; min-width: 200px; }
.eq-level-lbl { font-size: 13px; }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.eq-sec { grid-column: 1 / -1; font-weight: 700; margin-top: 6px; color: var(--text-dim); text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }
.eq-card { display: flex; gap: 12px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel);
  border-left: 4px solid var(--rare-c, var(--border)); cursor: pointer; }
.eq-card:hover { border-color: var(--accent); border-left-color: var(--rare-c, var(--accent)); }
.eq-card.open { grid-column: 1 / -1; cursor: default; }
.eq-card.unrel { opacity: .8; }
.eq-card.rare-1 { --rare-c: var(--rare1); } .eq-card.rare-2 { --rare-c: var(--rare2); } .eq-card.rare-3 { --rare-c: var(--rare3); }
.eq-card.rare-4 { --rare-c: var(--rare4); } .eq-card.rare-5 { --rare-c: var(--rare5); }
.eq-ic { position: relative; flex: 0 0 64px; height: 64px; border-radius: 8px; background: color-mix(in srgb, var(--rare-c, var(--border)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--rare-c, var(--border)) 60%, transparent); display: flex; align-items: center; justify-content: center; }
.eq-ic img { max-width: 58px; max-height: 58px; object-fit: contain; }
.eq-noic { font-size: 10px; color: var(--text-dim); }
.eq-size { position: absolute; right: -4px; bottom: -4px; font-size: 10px; font-weight: 700; background: var(--bg, #111827); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.eq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eq-nm { font-weight: 600; }
.eq-best { white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #f2c14e; border: 1px solid #f2c14e; border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }
.eq-best-ic { color: #f2c14e; }
.eq-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.eq-st { display: inline-flex; gap: 4px; align-items: baseline; }
.eq-st i { font-style: normal; color: var(--text-dim); }
.eq-st.main b { color: var(--good); }
.eq-ab { font-size: 12px; color: #e8c872; }
.eq-dock { font-size: 11.5px; color: var(--good); }
.eq-detail { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; cursor: text; }
.eq-lore { margin: 0; font-size: 12px; font-style: italic; color: var(--text-dim); line-height: 1.45; }
.eq-tbl-wrap { overflow-x: auto; }
.eq-tbl td, .eq-tbl th { text-align: right; font-size: 12px; white-space: nowrap; }
.eq-tbl td:first-child, .eq-tbl th:first-child { text-align: left; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-bottom: 14px; }
.wf-card { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 2px 10px; text-align: left; padding: 9px 10px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; }
.wf-card .wf-tier { grid-row: 1 / 3; align-self: center; font-weight: 800; font-size: 15px; text-align: center; border-radius: 6px; padding: 5px 0; }
.wf-card.rep .wf-tier { background: color-mix(in srgb, var(--rare3) 30%, transparent); color: var(--rare3); }
.wf-card.scav .wf-tier { background: color-mix(in srgb, var(--rare5) 30%, transparent); color: var(--rare5); }
.wf-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.wf-nm { font-weight: 600; }
.wf-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.wf-q { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.wf-tbl td { vertical-align: middle; font-size: 12px; }
.wf-ic { width: 40px; }
.wf-ic img { width: 36px; height: 36px; object-fit: contain; }
.wf-ch { white-space: nowrap; text-align: right; }
.wf-bar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--border) 70%, transparent); margin-right: 6px; vertical-align: middle; overflow: hidden; }
.wf-bar span { display: block; height: 100%; background: var(--accent); }
.wf-tbl tr.eq-have td { background: color-mix(in srgb, var(--good) 10%, transparent); }
@media (max-width: 900px) { .eq-grid { grid-template-columns: 1fr; } .wf-cols { grid-template-columns: 1fr; } }
.btn-primary:disabled, button.btn-primary[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* Buildings + Alliance pages (rebuilt 2026-09-12) */
.bld-station { margin-bottom: 12px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.bld-hd { display: flex; align-items: center; gap: 12px; }
.bld-ic { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.bld-ic.big { width: 64px; height: 64px; flex-basis: 64px; }
.bld-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bld-nm .cmdr-sub { line-height: 1.35; }
.bld-lv { font-weight: 700; white-space: nowrap; }
.bld-slider { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.bld-slider .step-slider { flex: 1 1 auto; }
.bld-station-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 6px 0; }
.bld-station-stats span { display: flex; flex-direction: column; }
.bld-station-stats i { font-style: normal; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.bld-station-stats b { font-size: 15px; }
.bld-summary { margin-bottom: 12px; }
.bld-summary h3, .all-card h3, .all-sum h3 { margin: 0 0 6px; font-size: 14px; }
.bld-sum { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.bld-sum-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.bld-card { display: flex; flex-direction: column; gap: 4px; }
.bld-card.bld-off { opacity: .62; }
.bld-card.bld-warn { border-color: var(--warn); }
.bld-fx { font-size: 12.5px; }
.bld-fx.good b { color: var(--good); }
.bld-fx.off b { color: var(--text-dim); font-weight: 600; }
.bld-tag { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px; border: 1px solid var(--border); color: var(--text-dim); }
.bld-tag.in { color: var(--good); border-color: var(--good); }
.bld-tag.none { color: var(--text-dim); }
.bld-notrack { margin: 2px 0; line-height: 1.4; }
.bld-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }
.bld-skill { font-size: 11.5px; color: var(--text-dim); }
.bld-skill b { color: var(--text); }
.all-member { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.all-member span { display: flex; flex-direction: column; }
.all-sum { margin-bottom: 12px; }
.all-tbl td, .all-tbl th { font-size: 12.5px; }
.all-tbl td.num, .all-tbl th.num { text-align: right; white-space: nowrap; }
.all-tbl td .stat-ic { margin-right: 6px; vertical-align: -4px; }
.all-bar-cell { white-space: nowrap; }
.all-bar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--border) 70%, transparent); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.all-bar span { display: block; height: 100%; background: var(--accent); }
.all-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; align-items: start; }
.all-grid { display: flex; flex-direction: column; gap: 6px; }
.all-row { display: grid; grid-template-columns: 22px 1fr 130px; align-items: center; gap: 10px; }
.all-nm { display: flex; flex-direction: column; min-width: 0; }
.all-nm .cmdr-sub { line-height: 1.35; }
.all-in { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.all-in input { width: 86px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; text-align: right; }
.all-off { opacity: .5; }
.all-off input { pointer-events: none; }
@media (max-width: 900px) { .bld-grid, .all-cols { grid-template-columns: 1fr; } }

/* in-game dock validation: what the numbers actually include (Goliath, 2026-09-12
   — a commander can type good numbers and see a red delta purely because the
   calc applied a different admiral, or none) */
.dv-context { margin: 6px 0 10px; padding: 8px 10px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 5px; }
.dv-ctx-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; }
.dv-ctx-l { text-transform: uppercase; font-size: 10px; letter-spacing: .03em; color: var(--text-dim); }
.dv-adm { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.dv-adm img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: top;
  border: 1px solid var(--border); }
.dv-ctx-row select { background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); padding: 3px 6px; font-size: 11px; }
.dv-ctx-note { color: var(--text-dim); }
.dv-context .hint { margin: 6px 0 0; }

/* in-dock stat breakdown popover (Goliath, 2026-09-12: "we can do better than
   that and also explain the green and the in-combat") — same hover-or-focus
   pattern as the GIA summary's, so it works on touch too */
.idc-popcell { position: relative; cursor: help; outline: none; }
.idc-pop { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 270px; max-width: 380px; padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--accent); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  text-align: left; white-space: normal; }
.idc-popcell:hover .idc-pop, .idc-popcell:focus .idc-pop { display: block; }
/* v2's popover lists every source and every held-back buff: keep it on screen */
.idc-pop { max-height: 440px; overflow-y: auto; }
.idc-popcell:nth-child(3n) .idc-pop { left: auto; right: 0; }
.idc-pop-t { font-weight: 600; margin-bottom: 6px; }
.idc-pop-h { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 6px 0 3px; }
.idc-pop-h.g { color: var(--good); }
.idc-pop-h.c { color: var(--accent); }
.idc-pop-h.w { color: var(--text); }
.idc-pop-h.y { color: var(--combat-y); }
/* the damage-reduction lines the game shows at the top of its Armor / resist popouts */
.idc-pop-drs { margin: 2px 0 6px; padding: 5px 8px; background: var(--panel-2); border-radius: 5px; }
.idc-pop-dr { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 1px 0; }
.idc-pop-dr > span:first-child { color: #5cc8f2; font-weight: 600; }
.idc-pop-dr > span:last-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.idc-pop-dr .gold { margin-left: 6px; }
.idc-pop-sum { display: flex; justify-content: space-between; gap: 12px; font-size: 11px;
  font-weight: 600; padding: 3px 0 2px; border-top: 1px solid var(--border); margin-top: 2px; }
.idc-pop-sum.dock { color: var(--text); }
.idc-pop-sum.gold { color: var(--gold); }
/* a breakdown line that opens where it is set. Styled wherever it is drawn: the
   combat breakdown under the scorecard showed them as default links, dark blue
   on the dark panel (2026-09-25). */
a.idc-go { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
a.idc-go:hover, a.idc-go:focus { color: var(--accent); text-decoration-style: solid; }
.tp-group .y, .sc-dock .y { color: var(--combat-y); }
.gold { color: var(--gold); }
.sc-dock { font-size: 10.5px; color: var(--text-dim); margin: -2px 0 3px; }
.sc-chr-link { cursor: pointer; }
.sc-chr-link:hover .sc-chk, .sc-chr-link:focus .sc-chk { color: var(--accent); text-decoration: underline dotted; }
.sc-chv.gold { color: var(--gold); }
.idc-pop table { width: 100%; border-collapse: collapse; font-size: 11px; }
.idc-pop td { padding: 2px 0; border-bottom: 1px solid var(--border); }
.idc-pop td.num { text-align: right; padding-left: 12px; white-space: nowrap; }
.idc-pop-pct { color: var(--text-dim); }
.idc-pop-note { margin-top: 6px; font-size: 10.5px; color: var(--text-dim); }
/* the grid must not clip a popover */
.indock-grid, .idc-table, .idc-row { overflow: visible; }

/* Hologram fitting view (Goliath, 2026-09-12: "the hologram version of the ship
   is shown ... the dotted line similar to research starts at the ship and
   branches to each piece of equipment"). No hardpoint data exists in the
   client, so slots sit evenly down each side and the connectors meet the hull
   near its spine — the compromise Goliath asked for. */
.holo-box { margin: 6px 0 10px; }
.holo-wrap { display: grid; grid-template-columns: 106px 1fr 106px; gap: 6px; align-items: stretch;
  background: radial-gradient(ellipse at center, rgba(56,189,248,.10), transparent 70%),
    var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px; }
.holo-col { display: flex; flex-direction: column; justify-content: space-around; gap: 6px; }
.holo-stage { position: relative; min-height: 230px; display: flex; align-items: center; justify-content: center; }
.holo-ship { max-width: 100%; max-height: 280px; object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(56,189,248,.55)); }
.holo-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.holo-line { fill: none; stroke: rgba(125,211,252,.30); stroke-width: 1.4; stroke-dasharray: 4 4; }
.holo-line.on { stroke: rgba(125,211,252,.80); }
.holo-dot { fill: rgba(125,211,252,.35); }
.holo-dot.on { fill: #7dd3fc; }
.holo-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 6px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
  cursor: pointer; font-size: 12px; position: relative; }
.holo-slot:hover { border-color: var(--accent); }
/* a filled slot is outlined in its part's rarity colour (Goliath, 2026-09-25: an Epic unit
   showed orange); orange only when the part's rarity is unknown */
.holo-slot.filled { border-color: var(--rare-edge, rgba(251,146,60,.75));
  box-shadow: 0 0 8px var(--rare-glow, rgba(251,146,60,.22)); }
.holo-slot.empty { border-style: dashed; color: var(--text-dim); }
.holo-slot[class*="rare-"] { border-left-width: 3px; }
/* bigger — these were "too tiny" at 42px (Goliath, 2026-09-14) */
.holo-ic { width: 62px; height: 62px; object-fit: contain; }
.holo-ic-none { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-dim); }
.holo-sz { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.holo-lv { color: var(--text-dim); white-space: nowrap; font-weight: 600; }
.holo-slot.filled .holo-lv { color: var(--text); }
@media (max-width: 760px) { .holo-wrap { grid-template-columns: 90px 1fr 90px; } }

/* Ships in the fleet that landed in no slot — they still count toward the ship
   count and leadership, so they get a visible tray instead of vanishing
   (Goliath, 2026-09-12: "fleet 1 says 9/9 ships but only 8 are ... displayed") */
.fv-unplaced { margin: 10px 8px 4px; padding: 8px 10px; border: 1px dashed #f0c674;
  border-radius: 6px; background: rgba(240, 198, 116, .07); }
.fv-unplaced-h { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: #f0c674; margin-bottom: 6px; }
.fv-unplaced-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-unplaced .hint { margin: 6px 0 0; }
.fv-unplaced-chip { border-color: #f0c674 !important; }
/* off-class picker cards: offered, but flagged (the row bonus won't apply) */
.ship-picker-card.pkc-offclass { opacity: .72; border-style: dashed; }
.pkc-norow { font-size: 9px; color: #f0c674; text-transform: uppercase; letter-spacing: .03em; }
.ship-picker-card.pkc-unique-taken { opacity: .5; cursor: not-allowed; }
.fdp-card.unique-taken { opacity: .45; }
/* the game's own unique-hull mark (DM-035), before the ship's name */
.uq-badge { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.id-unique .uq-badge { width: 18px; height: 18px; margin-right: 0; }
.pkc-unique { font-size: 9px; color: var(--bad); text-transform: uppercase; letter-spacing: .03em; }
/* both labels run under the name, across the card (the grid's first column is the 34px icon) */
.ship-picker-card .pkc-norow, .ship-picker-card .pkc-unique { grid-column: 1 / -1; }

/* a row whose formation bonus is voided by an off-class ship — the whole row
   loses it, not just that ship (Goliath, 2026-09-13) */
.fv-row-void .fv-row-bonus { text-decoration: line-through; }
.fv-row-void-tag { display: block; font-size: 9.5px; color: #f0c674; margin-top: 2px;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }

/* "My ships" panel beside the formation — the game's own fleet-edit layout:
   a 2-wide card grid of everything you own, class filters, in-fleet marked
   (Goliath, 2026-09-13: "two columns like how the game has it") */
/* Both columns the same height (Goliath, 2026-09-14): the formation pads its rows
   out to fill, and My ships scrolls inside its cell once it outgrows it. */
.fleet-build-cols { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: stretch;
  grid-template-areas: "score score" "ships rows"; }
.fleet-build-cols > #fleet-scorecard { grid-area: score; min-width: 0; }
.fleet-build-cols > #fleet-scorecard > .sc { margin: 0; }
.fleet-build-cols > #fleet-dock-panel { grid-area: ships; }
.fleet-build-cols > #fleet-rows { grid-area: rows; min-width: 0; }
/* A wide screen puts the scorecard BESIDE the fleet (Goliath, 2026-09-26, step 2 of
   the wide-screen plan): My ships | formation | scorecard, so the whole fleet and
   what it is worth fit on one screen. The three KPIs stack in their column. */
@media (min-width: 1700px) {
  .fleet-build-cols { grid-template-columns: 240px minmax(0, 1fr) minmax(420px, 34%);
    grid-template-areas: "ships rows score"; }
  #fleet-scorecard .sc-3 .sc-main { flex-direction: column; }
  #fleet-scorecard .sc-3 .sc-kpi { flex: none; padding: 12px 0 0; margin-top: 12px;
    border-left: 0; border-top: 1px solid var(--border); }
  #fleet-scorecard .sc-3 .sc-kpi:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
  #fleet-scorecard .sc { height: 100%; box-sizing: border-box; margin: 0; }
}
.fleet-dock-panel {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; overflow-y: auto;
  /* SCROLL, never grow the row (Goliath, 2026-09-14: "I want the my ships to
     scroll not grow in size"). height:0 + min-height:100% is the trick: a zero
     height means this cell contributes NOTHING to the grid row's height — the
     formation decides that — while min-height fills whatever the row ends up
     being. Without it the panel's own content set the row height and stretched
     the formation to match, which is backwards. */
  height: 0; min-height: 100%;
}
.fdp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.fdp-title { font-weight: 600; font-size: 12px; }
.fdp-count { font-size: 10px; color: var(--text-dim); }
.fdp-classes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.fdp-chip { background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 4px; padding: 2px 8px; font-size: 10px; cursor: pointer; font-family: ui-monospace, monospace; }
.fdp-chip:hover { border-color: var(--accent); color: var(--text); }
.fdp-chip.active { border-color: var(--accent); color: var(--text); background: var(--panel-2); font-weight: 700; }
.fdp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fdp-list .hint { grid-column: 1 / -1; }
.fdp-card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 4px 4px; cursor: pointer; display: flex; flex-direction: column; gap: 1px;
  font-size: 9.5px; line-height: 1.2; }
.fdp-card:hover { border-color: var(--accent); }
.fdp-card.in-fleet { border-color: rgba(251,146,60,.85); box-shadow: 0 0 8px rgba(251,146,60,.20); }
.fdp-card[class*="rare-"] { border-left-width: 3px; }
.fdp-nm { font-weight: 600; font-size: 10px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }
.fdp-in { color: #fb923c; font-size: 8px; }
/* the art is the point of the tile — let it fill most of it */
/* The SAME size as a formation slot. Goliath, 2026-09-14: "the ship size in the my
   ships pane needs to be the same size as the fleet builder so there is no implied
   importance in visual hierarchy" — one variable drives both, so they cannot drift. */
.fdp-img { width: 100%; height: var(--ship-tile); object-fit: contain; margin: 0; }
.fdp-meta { display: flex; gap: 4px; color: var(--text-dim); font-family: ui-monospace, monospace;
  font-size: 9px; }
.fdp-cls { font-weight: 700; color: var(--text); }
.fdp-foot { display: flex; justify-content: space-between; align-items: center; min-height: 9px; }
.fdp-bs { color: #f0c674; font-size: 6.5px; letter-spacing: .5px; }
.fdp-str { color: var(--good); }
@media (max-width: 1100px) { .fleet-build-cols { grid-template-columns: 1fr;
    grid-template-areas: "score" "ships" "rows"; }
  /* stacked, nothing sits beside My ships to give it a height, so it takes its own
     (it had collapsed to a 30px strip) and scrolls past it */
  .fleet-dock-panel { position: static; height: auto; min-height: 0; max-height: 380px; } }

/* Fleet builder art: the same top-down renders the ship panel uses, turned 90°
   to the left in a formation slot (Goliath, 2026-09-13). The source art all
   faces left, so this points the hull down the board. */
.fv-thumb-td { transform: rotate(-90deg); }
/* renders drawn facing another way still end up nose-down (main._TOPDOWN_FACING) */
.fv-thumb-td.face-up { transform: rotate(180deg); }
.fv-thumb-td.face-right { transform: rotate(90deg); }
.fv-thumb-td.face-down { transform: none; }
.fdp-img { image-rendering: auto; }

/* ── Wafer builder (ship editor → Engine / Wafer tab) ─────────────────────────
   A wafer is built, not picked: type + activation effect + overload effect
   (Goliath, 2026-09-14 — they are rerollable in game to any combination). */
.wafer-builder { display: flex; flex-direction: column; gap: 6px; }
.wafer-builder select { min-width: 260px; }
.wf-eff-text {
  margin: -2px 0 4px 0; padding: 6px 9px; font-size: 12px; line-height: 1.45;
  border-left: 3px solid var(--buff, #5fd38d);
  background: rgba(95, 211, 141, 0.08); border-radius: 0 4px 4px 0;
}
.wf-eff-text.bad {
  border-left-color: #d9736b; background: rgba(217, 115, 107, 0.09);
}

/* the live wafer card — laid out like the in-game one Goliath screenshotted:
   rolled name, activation effect, System Overload Impact, Wafer Fixed Stats */
.wf-card-live {
  border: 1px solid var(--line, #2c3446); border-radius: 6px;
  padding: 10px 12px; margin-top: 6px; background: rgba(255,255,255,0.02);
}
.wf-card-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.wf-rare {
  display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 8px;
  font-size: 11px; font-weight: 700; color: #1d1405;
  background: linear-gradient(180deg, #ffcf63, #e5a52b);
}
.wf-fixed { margin-top: 8px; font-size: 12px; }
.wf-fixed .cmdr-sub { display: block; }

/* Rare rolls are outlined orange, the way the game flags them on the wafer card
   (Goliath, 2026-09-14: "orange outline if rare"). */
.wafer-builder select.wf-is-rare {
  border-color: #e5a52b; box-shadow: 0 0 0 1px rgba(229,165,43,0.45);
}
.wf-eff-text.rare {
  border-left-color: #e5a52b; background: rgba(229,165,43,0.10);
}

/* Score + faction, as the in-game wafer card heads them */
.wf-score { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--good); }
.wf-score-sub { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--text-dim); }

/* ═══ Fleet builder — toolbar, KPI strip, analytics (Goliath, 2026-09-14) ═══════ */

/* One number drives the ship art in BOTH the My-ships pane and the formation
   slots, so neither can imply importance the other doesn't. */
:root {
  --ship-tile: 92px;   /* My-ships pane */
  --ship-slot: 101px;  /* formation slot — deliberately 10% larger (Goliath,
                          2026-09-14: "make the fleet formation ships 10% larger").
                          Derived from --ship-tile so the pair stays proportional. */
}

/* KPI strip — leadership first, with the cap breakdown on hover */
/* grid, not flex-wrap: a lone item on a second row used to stretch to the full
   width and read like a heading rather than a KPI */
.fleet-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 10px; margin: 10px 0 14px; }
.fleet-kpis:empty { display: none; }
/* the fleet's admiral, first, square to the strip's height */
.fleet-kpis.has-portrait { grid-template-columns: 76px repeat(auto-fit, minmax(126px, 1fr)); }
.kpi.kpi-portrait { padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: inherit; }
.kpi-portrait img { display: block; width: 100%; height: 100%; min-height: 64px; object-fit: cover;
  object-position: center top; }
.kpi-portrait:hover, .kpi-portrait:focus-visible { border-color: var(--accent); }
.kpi {
  position: relative; min-width: 0;
  padding: 9px 12px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
}
.kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.kpi-v { font-size: 20px; font-weight: 700; line-height: 1.25; }
.kpi-v.good { color: var(--good, #3fdc7a); } .kpi-v.bad { color: var(--bad, #e08a8a); }
.kpi-v.warn { color: var(--warn); }
.kpi-of { font-size: 13px; font-weight: 400; color: var(--text-dim); }
.kpi-s { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.kpi-bar { display: block; height: 4px; border-radius: 2px; background: var(--panel); overflow: hidden; }
.kpi-bar > i { display: block; height: 100%; background: var(--good, #3fdc7a); }
.kpi-has-pop { cursor: help; }
.kpi-has-pop::after {
  content: "\2139"; position: absolute; top: 6px; right: 8px;
  font-size: 10px; color: var(--text-dim);
}
/* hover-or-focus, the same pattern the in-dock and GIA popovers use, so it works
   on touch too */
.kpi-pop {
  display: none; position: absolute; z-index: 40; left: 0; top: calc(100% + 6px);
  min-width: 300px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.kpi-has-pop:hover .kpi-pop, .kpi-has-pop:focus-within .kpi-pop { display: block; }
.kpi-pop-h { font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.kpi-pop-t { font-size: 11px; margin: 0; }
.kpi-pop-t tr.unconfirmed td { color: #c9a3ff; }
.kpi-pop-f { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* Analytics, below the formation */
.fleet-analytics:empty { display: none; }
.fa-wrap {
  margin-top: 14px; padding: 10px 12px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
}
.fa-summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.fa-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.fa-card { flex: 1 1 150px; padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; }
.fa-k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.fa-v { font-size: 18px; font-weight: 700; }
.fa-s { font-size: 10px; color: var(--text-dim); }
.fa-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 16px; margin-top: 10px; }
@media (max-width: 1100px) { .fa-cols { grid-template-columns: 1fr; } }
.fa-t { font-size: 11px; width: 100%; }
.fa-t td.dim { color: var(--text-dim); text-transform: capitalize; }
.fa-t tr.fa-noscore td { opacity: .75; }
.fa-flag { font-size: 9px; color: #f0c674; border: 1px solid #f0c674;
  border-radius: 3px; padding: 0 3px; margin-left: 4px; cursor: help; }
.fa-bar { display: block; width: 100%; min-width: 54px; height: 6px; border-radius: 3px;
  background: var(--panel-2); overflow: hidden; }
.fa-bar > i { display: block; height: 100%; background: #7fa1ff; }
.fa-bar.ehp > i { background: #7fe0a6; }

/* Perception Driver — its own section under Breakthrough (Goliath, 2026-09-14:
   "the perception driver get its own section under breakthrough so its more
   noticable"), showing what the level is worth on this hull. */
.pd-effect { margin-top: 8px; }
.pd-effect .data-table { font-size: 11px; }

/* ships withheld from the My-ships pane because another fleet holds them */
.fdp-elsewhere {
  grid-column: 1 / -1; margin: 8px 0 0; font-size: 10px; line-height: 1.5;
  color: var(--text-dim); border-top: 1px dashed var(--border); padding-top: 7px;
}
.fdp-elsewhere .dim { opacity: .8; }

/* ── Equipment rows: the slot list and the level sliders are ONE thing now
   (Goliath, 2026-09-14: "we have the equipment listed then the levels with
   sliders — merge the two, its a bit redundant, just do the levels with an
   icon"). The slot NUMBER is the key, because two slots can hold the same
   item name and nothing else tells them apart. ─────────────────────────── */
.eq-lv {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px;
  border: 1px solid transparent; border-radius: 6px;
}
.eq-lv + .eq-lv { margin-top: 2px; }
.eq-lv-n {
  flex: none; width: 26px; font-family: ui-monospace, monospace; font-size: 11px;
  font-weight: 700; color: var(--text-dim); text-align: right;
}
.eq-lv-ic { flex: none; width: 34px; height: 34px; object-fit: contain; }
.eq-lv-nm { flex: 0 0 190px; min-width: 0; font-size: 12px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.eq-lv-sz { margin-left: 5px; font-size: 9px; font-weight: 700; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; }
.eq-lv-v { flex: none; min-width: 92px; font-size: 11px; text-align: right; }
.eq-lv-x { flex: none; background: none; border: none; color: var(--accent);
  font-size: 11px; cursor: pointer; padding: 0 2px; }
.eq-lv-x:hover { text-decoration: underline; }

/* hovering a level row or its hologram slot lights BOTH, edged in the item's
   rarity colour, so it is obvious which is which */
.eq-lv.linked, .holo-slot.linked {
  border-color: var(--rare-edge, var(--accent));
  box-shadow: 0 0 10px 1px var(--rare-glow, rgba(127,161,255,.30));
  background: rgba(127,161,255,.06);
}
.eq-lv.rare-1, .holo-slot.rare-1 { --rare-edge: var(--rare1); --rare-glow: rgba(160,170,190,.35); }
.eq-lv.rare-2, .holo-slot.rare-2 { --rare-edge: var(--rare2); --rare-glow: rgba(90,190,120,.35); }
.eq-lv.rare-3, .holo-slot.rare-3 { --rare-edge: var(--rare3); --rare-glow: rgba(90,150,230,.35); }
.eq-lv.rare-4, .holo-slot.rare-4 { --rare-edge: var(--rare4); --rare-glow: rgba(180,120,230,.38); }
.eq-lv.rare-5, .holo-slot.rare-5 { --rare-edge: var(--rare5); --rare-glow: rgba(240,170,60,.40); }


/* The compact chip grid duplicated the hologram, which is itself the picker
   (Goliath, 2026-09-14: "the repeat of the equipment under the holographic, tidy
   that up"). It stays only as the fallback for the 4 hulls with no hologram art. */
.holo-box:not(:empty) + .slot-grid { display: none; }

/* The hull-level slider lives in a wrapper span so it can be redrawn once the
   breakthrough milestones arrive. The span was a plain inline flex item, so it
   sized to its content and the slider sat at its 120px minimum — "way too small"
   (Goliath, 2026-09-14). Make the wrapper the flexible one and the slider fill it,
   so it spans the Breakthrough section it lives in. */
#f-hull-slider { flex: 1 1 auto; min-width: 0; display: block; }
#f-hull-slider .step-slider { display: block; width: 100%; min-width: 0; }

/* ── Scroll bars ──────────────────────────────────────────────────────────────
   One slim, themed treatment for every panel of ours that scrolls. It began as
   a talent-tree-only rule; Goliath hit the raw browser default on the fleet
   builder's My-ships pane (2026-09-14: "an ugly scroll bar, keep it the same as
   the other scroll bars we use"), so it is shared rather than copied again.
   Firefox takes scrollbar-width/-color; Chromium and Edge take ::-webkit-*. */
.thin-scroll,
.fleet-dock-panel,
.tal-tree-wrap,
.modal-body,
.et-tabs,
.et-content,
#editor-body,
.picker-list,
.ship-picker-grid,
.adm-picker-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 141, 239, .55) transparent;
}
.thin-scroll::-webkit-scrollbar,
.fleet-dock-panel::-webkit-scrollbar,
.tal-tree-wrap::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.et-tabs::-webkit-scrollbar,
.et-content::-webkit-scrollbar,
#editor-body::-webkit-scrollbar,
.picker-list::-webkit-scrollbar,
.ship-picker-grid::-webkit-scrollbar,
.adm-picker-grid::-webkit-scrollbar { width: 8px; height: 8px; }

.thin-scroll::-webkit-scrollbar-track,
.fleet-dock-panel::-webkit-scrollbar-track,
.tal-tree-wrap::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.et-tabs::-webkit-scrollbar-track,
.et-content::-webkit-scrollbar-track,
#editor-body::-webkit-scrollbar-track,
.picker-list::-webkit-scrollbar-track,
.ship-picker-grid::-webkit-scrollbar-track,
.adm-picker-grid::-webkit-scrollbar-track { background: transparent; margin: 8px; }

.thin-scroll::-webkit-scrollbar-thumb,
.fleet-dock-panel::-webkit-scrollbar-thumb,
.tal-tree-wrap::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.et-tabs::-webkit-scrollbar-thumb,
.et-content::-webkit-scrollbar-thumb,
#editor-body::-webkit-scrollbar-thumb,
.picker-list::-webkit-scrollbar-thumb,
.ship-picker-grid::-webkit-scrollbar-thumb,
.adm-picker-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px; border: 2px solid transparent; background-clip: padding-box;
}
.thin-scroll::-webkit-scrollbar-thumb:hover,
.fleet-dock-panel::-webkit-scrollbar-thumb:hover,
.tal-tree-wrap::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.et-tabs::-webkit-scrollbar-thumb:hover,
.et-content::-webkit-scrollbar-thumb:hover,
#editor-body::-webkit-scrollbar-thumb:hover,
.picker-list::-webkit-scrollbar-thumb:hover,
.ship-picker-grid::-webkit-scrollbar-thumb:hover,
.adm-picker-grid::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 75%, transparent);
  background-clip: padding-box;
}
.thin-scroll::-webkit-scrollbar-corner,
.fleet-dock-panel::-webkit-scrollbar-corner { background: transparent; }

/* Wafer card header: the activation effect's art, large — that IS the wafer's
   icon, since the game names and pictures the item after its roll. */
.wf-card-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.wf-card-ic {
  width: 84px; height: 84px; flex: none; object-fit: contain;
  border: 1px solid var(--border); border-radius: 10px; padding: 4px;
  background: radial-gradient(circle at 50% 35%, rgba(127,161,255,.14), transparent 70%);
}
.wf-card-ic-none {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; color: var(--text-dim); font-size: 26px; cursor: help;
}
.wf-card-hd-txt { min-width: 0; }
.wf-card-sub { margin-top: 3px; }
.wf-card-title { font-weight: 600; font-size: 15px; margin: 0; }

/* ── EHP scorecard — one component, three levels (fleet tile, fleet builder,
   ship builder). Goliath's philosophy, 2026-09-14: EHP is the headline and it is
   made of HP and total DR; DPS is what that survivability buys you. ───────── */
.sc { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin: 10px 0; }
.sc-empty { color: var(--text-dim); }
.sc-hd { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin-bottom: 6px; }
.sc-main { display: flex; gap: 18px; flex-wrap: wrap; }
.sc-kpi { flex: 1 1 130px; min-width: 0; }
.sc-k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.sc-v { font-size: 22px; font-weight: 700; line-height: 1.2; }
.sc-ehp .sc-v { color: var(--good, #3fdc7a); }
.sc-eq { font-size: 10px; color: var(--text-dim); font-family: ui-monospace, monospace; }
.sc-parts { display: flex; gap: 14px; margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed var(--border); flex-wrap: wrap; align-items: center; }
.sc-part { display: flex; align-items: baseline; gap: 6px; font-size: 11px; }
.sc-pk { color: var(--text-dim); text-transform: uppercase; font-size: 9px; letter-spacing: .05em; }
.sc-pv { font-weight: 700; font-size: 13px; }
.sc-dr { flex: 1 1 190px; }
.sc-bar { position: relative; flex: 1; min-width: 90px; height: 6px; border-radius: 3px;
  background: var(--panel); overflow: visible; }
.sc-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--good, #3fdc7a); }
/* the ~98% soft cap, marked on the bar itself */
.sc-bar > b { position: absolute; top: -3px; width: 2px; height: 12px;
  background: #f0c674; border-radius: 1px; cursor: help; }
.sc-dr.capped .sc-pv { color: #f0c674; }
.sc-role { margin-top: 8px; font-size: 11px; color: var(--text-dim); }
.sc-role b { color: var(--text); }
/* tile variant: tighter, stacked */
.sc-tile { margin: 8px 0 0; padding: 8px 10px; }
.sc-tile .sc-v { font-size: 18px; }
.sc-tile .sc-main { gap: 12px; }

/* ── three co-equal KPIs: EHP | EDPS | ETD (Goliath, 2026-09-14) ─────────────
   EDPS and ETD are mirror images around EHP (our accuracy vs their evade /
   their accuracy vs our evade), so they get equal visual weight and their own
   accent. Each carries its child KPIs beneath it rather than in a shared strip,
   so it always reads which parent a child belongs to. */
.sc-3 .sc-main { gap: 0; align-items: stretch; }
.sc-3 .sc-kpi { flex: 1 1 190px; padding: 0 14px; border-left: 1px solid var(--border); }
.sc-3 .sc-kpi:first-child { padding-left: 0; border-left: 0; }
/* a tile is a glance: three headlines across, no children, no equation */
.sc-compact .sc-kpi { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.sc-compact .sc-v { font-size: 17px; }
.sc-compact .sc-k { font-size: 9px; }
.sc-compact .sc-eq { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-edps .sc-v { color: var(--accent, #6cc7ff); }
.sc-etd  .sc-v { color: #f0c674; }
/* a KPI's child rows */
.sc-ch { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border); }
.sc-chr { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 1.5px 0; font-size: 11px; }
.sc-chr[title] { cursor: help; }
.sc-chk { color: var(--text-dim); text-transform: uppercase; font-size: 9px; letter-spacing: .05em; }
.sc-chv { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
/* a child worth acting on — over the DR soft cap, missing penetration, a hit
   rate the benchmark punishes. Amber, never red: none of these is an error. */
.sc-chr.warn .sc-chv { color: #f0c674; }
/* a child's own small label (armour 8,931 / kinetic 4,155), and a line that is
   the sum of the ones above it (Total DR) */
.sc-chs { margin-left: 7px; font-size: 10px; text-transform: none; letter-spacing: 0;
  color: var(--text-dim); opacity: .8; font-variant-numeric: tabular-nums; }
.sc-chr-total { margin-top: 2px; padding-top: 3px; border-top: 1px solid var(--border); }
.sc-chr-total .sc-chk { color: var(--text); font-weight: 700; }
.sc-chr-total .sc-chv { font-size: 13px; }
/* the card's footer: short chips, never a sentence under all three KPIs */
.sc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px;
  padding-top: 8px; border-top: 1px dashed var(--border); font-size: 10.5px; color: var(--text-dim); }
.sc-chip, .sc-foot .sc-held > summary { display: inline-flex; align-items: center; padding: 2px 9px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel); line-height: 1.5; }
.sc-chip b { color: var(--text); }
.sc-chip[title] { cursor: help; }
.sc-foot .sc-held { margin: 0; }
.sc-foot .sc-held > summary { cursor: pointer; list-style: none; }
.sc-foot .sc-held > summary::-webkit-details-marker { display: none; }
.sc-foot .sc-held > summary::after { content: " \25B8"; }
.sc-foot .sc-held[open] { flex-basis: 100%; order: 9; }
.sc-foot .sc-held[open] > summary::after { content: " \25BE"; }
a.sc-link { color: var(--accent); text-decoration: none; }
a.sc-link:hover { text-decoration: underline; }
.sc-note { margin-top: 7px; font-size: 10px; line-height: 1.45; color: var(--text-dim); }
/* the "?" that deep-links the Math page */
.sc-why { display: inline-block; width: 13px; height: 13px; line-height: 13px;
  text-align: center; border-radius: 50%; font-size: 9px; font-weight: 700;
  text-decoration: none; color: var(--text-dim); border: 1px solid var(--border); }
.sc-why:hover { color: var(--accent); border-color: var(--accent); }
/* what every number on the card was scored against */
.sc-bench { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: 10px; line-height: 1.5; color: var(--text-dim); }
.sc-bench a { color: var(--accent); }
@media (max-width: 860px) {
  .sc-3 .sc-kpi { flex-basis: 100%; padding: 10px 0 0; border-left: 0;
    border-top: 1px solid var(--border); }
  .sc-3 .sc-kpi:first-child { padding-top: 0; border-top: 0; }
}

/* Item rank + score, as the game labels a part ("R195" = Rare, score 195).
   Coloured by rarity with the shared --rare1..5 palette. */
.score-tag {
  font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700;
  padding: 0 4px; border-radius: 3px; line-height: 1.6; white-space: nowrap;
  background: rgba(4, 10, 20, .72); border: 1px solid var(--border); color: var(--text-dim);
}
.score-tag.rare-1 { color: var(--rare1); border-color: var(--rare1); }
.score-tag.rare-2 { color: var(--rare2); border-color: var(--rare2); }
.score-tag.rare-3 { color: var(--rare3); border-color: var(--rare3); }
.score-tag.rare-4 { color: var(--rare4); border-color: var(--rare4); }
.score-tag.rare-5 { color: var(--rare5); border-color: var(--rare5); }
/* on a hologram slot it sits in the corner, over the art */
/* The R badge is on the equipment rows only (Goliath, 2026-09-14) — the slots
   themselves stay clean, and the picker's group headers carry it there. */
.eq-lv .score-tag { flex: none; }

/* the picker opens at your server's own R tier (My Commander -> Top item score) */
.pk-group-h.pk-mine { color: var(--accent); border-top-color: var(--accent); }

/* nav-race ("red") R tiers — paid event gear, the x2 partner of each standard
   tier (GAME_MECHANICS.md §7). Marked, never hidden. */
.pk-group-h.pk-nav, .eq-sec.eq-sec-nav { color: var(--rare5); }


/* ── fit scoring in the slot picker (Goliath, 2026-09-14) ──────────────────────
   What a part does to THIS ship, beside the R chip that says what it IS.
   Green better, red worse, dim for genuinely no change — armour really does
   nothing to EDPS and the card should say so rather than leave a blank. */
.pk-fit { display: flex; gap: 4px; align-items: center; flex: none; margin-left: auto; }
.pk-fit-wait { min-width: 118px; }
.fit-chip {
  font-family: ui-monospace, monospace; font-size: 9px; font-weight: 700;
  padding: 0 4px; border-radius: 3px; line-height: 1.7; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text-dim);
  background: rgba(4, 10, 20, .72);
}
.fit-chip.up   { color: var(--good, #3fdc7a); border-color: rgba(63, 220, 122, .5); }
.fit-chip.down { color: #ff7b72; border-color: rgba(255, 123, 114, .5); }
.fit-chip.flat { opacity: .45; }
.fit-chip.bad  { color: #ff7b72; border-color: #ff7b72; }
/* the "best for this ship" toggle, beside the picker's type filter */
.pk-fitsort { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.pk-fitsort input { cursor: pointer; }


/* ── the Math page (Goliath, 2026-09-14: "a bit wiki style") ───────────────────
   Long-form reference. Wide measure hurts readability, so the prose is capped
   while tables and formulas keep the full width. */
.mx-intro { font-size: 14px; color: var(--text); max-width: 70ch; }
.mx-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 26px;
  padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; }
.mx-toc a { font-size: 12px; color: var(--accent); text-decoration: none; }
.mx-toc a:hover { text-decoration: underline; }
.mx-sec { margin: 0 0 34px; scroll-margin-top: 76px; }
.mx-h { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.mx-subh { margin: 18px 0 8px; font-size: 13px; color: var(--text); }
.mx-sec p { max-width: 70ch; line-height: 1.6; }
.mx-sub { margin: 14px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--border); }
.mx-formula { background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; font-size: 12px; line-height: 1.6;
  overflow-x: auto; white-space: pre; }
.mx-tw { overflow-x: auto; margin: 12px 0; }
.mx-table td { vertical-align: top; line-height: 1.5; }
.mx-table .mx-rk { font-weight: 700; white-space: nowrap; }
/* the status tags — the difference between "we measured this" and "we chose
   this" is the most important thing on the page, so it is colour-coded */
.mx-notes { margin: 12px 0 0; display: flex; flex-direction: column; gap: 7px; }
.mx-note { display: flex; gap: 9px; align-items: baseline; font-size: 12px;
  line-height: 1.55; color: var(--text-dim); max-width: 76ch; }
.mx-tag { flex: none; min-width: 84px; text-align: center; font-size: 9px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border);
  cursor: help; }
.mx-measured  .mx-tag { color: var(--good, #3fdc7a); border-color: rgba(63,220,122,.5); }
.mx-game      .mx-tag { color: var(--accent); border-color: var(--accent); }
.mx-choice    .mx-tag { color: #f0c674; border-color: #f0c674; }
.mx-yardstick .mx-tag { color: #b39ddb; border-color: #b39ddb; }
.mx-open      .mx-tag { color: #ff7b72; border-color: #ff7b72; }
/* a jump target briefly lights up so you can see where you landed */
@keyframes mxflash { from { background: rgba(108,199,255,.14); } to { background: transparent; } }
.mx-flash { animation: mxflash 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .mx-flash { animation: none; } }

/* ── Comprehensive Rating chip + popover ─────────────────────────────────── */
/* Hover OR focus, the same pattern as .idc-pop and the GIA summary, so it
   works on touch. */
.cr-chip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid #3a4a63;
  border-radius: 10px;
  background: #16202e;
  font-size: 12px;
  line-height: 1.5;
  cursor: help;
  white-space: nowrap;
}
.cr-chip:focus { outline: 2px solid #5aa9ff; outline-offset: 1px; }
.cr-chip.cr-sm { padding: 1px 6px; font-size: 11px; }
.cr-lbl { color: #7f93ad; letter-spacing: .04em; font-size: .85em; }
.cr-tot { color: #cfe3ff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-chip.cr-partial .cr-tot { color: #e8c06a; }
.cr-star { color: #e8c06a; font-weight: 700; }

.cr-pop {
  display: none;
  position: absolute;
  z-index: 60;
  left: 0;
  top: calc(100% + 6px);
  width: 330px;
  max-width: 88vw;
  padding: 10px 12px;
  border: 1px solid #3a4a63;
  border-radius: 8px;
  background: #0f1720;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  cursor: default;
  white-space: normal;
  text-align: left;
  /* placed on the viewport by _placeCrPop() (static/app.js) while open */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
.cr-chip:hover .cr-pop,
.cr-chip:focus .cr-pop,
.cr-chip:focus-within .cr-pop { display: block; }

.cr-pop-t { color: #e6eefc; font-weight: 600; margin-bottom: 2px; }
.cr-ours {
  margin-left: 6px; padding: 0 6px;
  border: 1px solid #6b5aa0; border-radius: 8px;
  color: #c3b3ef; font-size: 10px; font-weight: 500; letter-spacing: .03em;
}
.cr-pop-note { color: #8ea3bd; font-size: 11px; line-height: 1.45; margin: 3px 0; }
.cr-pop-tbl { width: 100%; border-collapse: collapse; margin: 7px 0 4px; }
.cr-pop-tbl td { padding: 2px 0; font-size: 12px; color: #c8d6e8; }
.cr-pop-tbl td.cr-v { text-align: right; font-variant-numeric: tabular-nums; padding-right: 8px; }
.cr-pop-tbl tr.cr-undrv td { color: #8b7a4e; }
.cr-pop-tbl tr.cr-pop-sum td { border-top: 1px solid #2c3a4e; padding-top: 4px; font-weight: 600; color: #e6eefc; }
.cr-pop-warn {
  margin: 6px 0 2px; padding: 6px 8px;
  border-left: 3px solid #e8c06a; border-radius: 3px;
  background: #241f12; color: #d7c79b; font-size: 11px; line-height: 1.45;
}
.cr-pop-warn b { color: #e8c06a; }
.cr-pop-f { margin-top: 6px; border-top: 1px solid #22303f; padding-top: 6px; }
.cr-pop-f > div:first-child { color: #9fb3cc; font-size: 11px; }
.cr-pop-formula {
  margin: 3px 0;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10.5px; color: #8fc6a8; line-height: 1.5;
}

.fdp-card .cr-chip { margin-top: 2px; }
.dk-cr { margin-left: auto; }

/* "clear readings" — the deliberate delete for typed in-game numbers. Styled as
   a quiet link, not a button: it is rare and destructive, so it should not read
   as the obvious next action beside Apply. */
.dv-clear { margin-left: 8px; color: var(--bad, #e06c6c); }
.dv-clear:disabled { color: var(--text-dim); cursor: default; text-decoration: none; }

/* Ships roster: every card names the copy it edits and the fleet that owns it.
   Goliath, 2026-09-17: "display the fleet it belongs too or the word unassigned". */
.ship-card .copy-n { opacity: .65; font-weight: 600; }
.ship-card .roster-fleet {
  margin: 2px 0 1px; font-size: 10px; line-height: 1.3; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 8px; display: inline-block; cursor: help;
}
.ship-card .roster-fleet.assigned   { background: rgba(255,163,72,.16); color: #ffa348;
                                      border: 1px solid rgba(255,163,72,.35); }
.ship-card .roster-fleet.unassigned { background: rgba(140,160,190,.14); color: #9fb2cc;
                                      border: 1px solid rgba(140,160,190,.3); }
.ship-card .roster-fleet.owned      { background: rgba(63,191,127,.14); color: var(--good); }
.ship-card .roster-fleet.none       { background: transparent; color: #6a7789;
                                      border: 1px dashed rgba(140,160,190,.28); }

/* Alliance Research (Commander -> Alliance Research). The alliance's own tech
   tree: a separate channel from the star-map buffs on the Alliance page. Only
   52 of 146 nodes touch a ship stat, so the economy ones are greyed the way the
   Buildings page greys structures with no fleet effect. */
.ar-top { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start;
  margin: 10px 0 14px; }
.ar-sum { flex: 1; min-width: 340px; }
.ar-tree { margin-bottom: 18px; }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.ar-node { border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 4px; }
.ar-node.economy { opacity: .5; }
.ar-node.economy:hover { opacity: .8; }
.ar-node.timed { border-style: dashed; }
.ar-node-hd { display: flex; align-items: center; gap: 8px; }
.ar-ic { width: 30px; height: 30px; object-fit: contain; flex: none; }
.ar-node-nm { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.ar-lv { font-weight: 400; color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.ar-eff { display: flex; flex-direction: column; gap: 1px; font-size: 11px; min-height: 15px; }
.ar-cur { color: var(--good); }
.ar-next { color: var(--text-dim); }
.ar-noeffect { color: var(--text-dim); font-style: italic; }
.ar-timed { color: var(--warn, #e0a33e); }

/* v2 stat popover: buffs that did not apply, with the engine's reason */
.idc-pop-h.h { color: var(--muted, #8a93a6); }
.idc-pop-why { color: var(--muted, #8a93a6); font-size: 11px; white-space: normal; text-align: left; }

/* the same stat in combat (v2, modelled) under the dock value */
.idc-cbt { display: block; font-size: 11px; color: var(--accent); margin-top: 2px; }

/* v2: combat effects held back rather than guessed (kpiScorecard) */
.sc-held { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.sc-held summary { cursor: pointer; }
.sc-held ul { margin: 6px 0 0 18px; padding: 0; max-height: 260px; overflow: auto; }
.sc-held li { margin: 2px 0; }

/* ── the Guide: About, Getting started, How it works, the Math, Changelog ──
   one reading layout: the contents on the left, the page at a readable width,
   "Next" at its foot (Goliath, 2026-09-27) */
.guide { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.guide-nav { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto;
  padding: 18px 0; }
.gn-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); padding: 0 12px 8px; }
.gn-page { display: block; padding: 7px 12px; font-size: 13.5px; color: var(--text-dim);
  border-left: 2px solid var(--border); }
.gn-page:hover { color: var(--text); text-decoration: none; }
.gn-page.on { color: var(--text); font-weight: 600; border-left-color: var(--accent); }
.gn-secs { border-left: 2px solid var(--accent); padding: 0 0 6px; }
.gn-sec { display: block; padding: 3px 12px 3px 22px; font-size: 12px; line-height: 1.35;
  color: var(--text-dim); }
.gn-sec:hover { color: var(--text); text-decoration: none; }
.guide-main { max-width: 900px; min-width: 0; }
.guide-title { margin: 0 0 14px; }
.guide-lead { font-size: 15px; line-height: 1.6; color: var(--text); max-width: 72ch; margin: 0 0 12px; }
.guide-body p { font-size: 13.5px; line-height: 1.65; max-width: 72ch; margin: 0 0 11px; }
.guide-body .sec-head { scroll-margin-top: 76px; }
.guide-points { font-size: 13.5px; line-height: 1.6; max-width: 72ch; padding-left: 20px; margin: 0 0 12px; }
.guide-points li { margin-bottom: 7px; }
.guide-body p.guide-more { font-size: 12.5px; color: var(--text-dim); }
.guide-tw { overflow-x: auto; margin: 4px 0 14px; }
.guide-table td:first-child { white-space: nowrap; font-weight: 600; }
.g-white { color: #fff; font-weight: 700; }
.g-green { color: var(--good); font-weight: 700; }
.g-yellow { color: var(--combat-y); font-weight: 700; }
.g-gold { color: var(--gold); font-weight: 700; }
.guide-next { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--border);
  text-align: right; font-size: 14px; font-weight: 600; }
.guide-next:empty { display: none; }
@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; gap: 6px; }
  .guide-nav { position: static; max-height: none; padding: 10px 0 0; }
  .gn-secs { display: none; }
}

/* the Math page's plain-English summary at the top of each section, and its chapters */
.mx-short { display: flex; gap: 10px; align-items: baseline; max-width: 72ch; margin: 2px 0 14px;
  padding: 10px 14px; border-radius: 8px; background: var(--panel-2); border-left: 3px solid var(--good);
  font-size: 14px; line-height: 1.55; color: var(--text); }
.mx-short-k { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--good); }
.mx-chapter { margin: 38px 0 -8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim); }
.gn-ch { padding: 9px 12px 2px 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-dim); opacity: .8; }

/* the line under each app page's title: what the page is for, and where the Guide covers it.
   No line length of its own: it runs the page's width like everything else on an app page
   (Goliath, 2026-09-27: "it should be one line and overflow or resize"). */
.page-intro { max-width: none; }
.guide-link { white-space: nowrap; margin-left: 4px; }

/* the signed-in account's chip in the header, and its settings window */
.account-chip { display: flex; align-items: center; gap: 10px; margin-left: 12px; font-size: 12.5px; }
.account-chip[hidden] { display: none; }
.ac-who { font-weight: 600; color: var(--text); }
.account-modal { max-width: 520px; }
.account-modal h4 { margin: 14px 0 8px; }
.ac-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ac-form input { flex: 1 1 200px; padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); }
.ac-msg { margin-top: 12px; font-size: 13px; }
.ac-msg.ok { color: var(--good); }
.ac-msg.bad { color: var(--bad); }
.ac-codes { background: var(--panel-2); border: 1px solid var(--border); padding: 10px 12px; border-radius: 6px;
  color: var(--text); font-size: 14px; letter-spacing: .05em; }

/* the coating picker (FC-012): the skin shop's swatches, and the ship wearing the one picked */
.ct-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ct-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 8px 6px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim);
  font-size: 11.5px; cursor: pointer; }
.ct-tile img { width: 64px; height: 64px; }
.ct-tile:hover { border-color: var(--accent); color: var(--text); }
.ct-tile.on { border-color: var(--good); color: var(--text); box-shadow: 0 0 0 1px var(--good) inset; }
.ct-show { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ct-ship { width: 220px; height: 220px; object-fit: contain; }
.ct-text { flex: 1 1 240px; font-size: 13px; line-height: 1.5; }
.ct-text p { margin: 6px 0 0; }

/* Sync from the game (FC-013) */
.sync-tool { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.sync-tool code { font-size: 11px; word-break: break-all; }
.sync-result { margin-top: 14px; }
.sync-sum { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sync-sum > div { display: flex; flex-direction: column; align-items: center; min-width: 80px; padding: 8px 12px;
  border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.sync-sum b { font-size: 18px; }
.sync-sum span { font-size: 11px; color: var(--text-dim); }
.sync-list { margin: 8px 0; font-size: 13px; }
.sync-list summary { cursor: pointer; font-weight: 600; }
.sync-list ul { margin: 6px 0 0; padding-left: 20px; max-height: 320px; overflow: auto; }
.sync-list li { margin-bottom: 3px; }
.sync-go { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.sync-needs, .sync-steps { margin: 6px 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.5; max-width: 900px; }
.sync-needs li, .sync-steps li { margin-bottom: 4px; }
.sync-last { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between;
  padding: 10px 14px; margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.sync-warn { border: 1px solid var(--warn); background: rgba(217, 164, 65, 0.08); border-radius: 8px; padding: 8px 14px;
  margin: 10px 0 12px; font-size: 13px; }
.sync-warn-h { font-weight: 700; color: var(--warn); margin-bottom: 4px; }
.sync-warn ul { margin: 0; padding-left: 18px; }
.sync-warn li { margin-bottom: 6px; line-height: 1.45; }
.sync-keep { display: inline-flex; gap: 5px; align-items: center; margin-left: 4px; white-space: nowrap; font-weight: 600; }
.sync-sec { border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; padding: 4px 10px; }
.sync-sec > summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.sync-tick { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 14px; }
.sync-count { font-size: 12px; color: var(--text-dim); }
.sync-badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-dim); }
.sync-badge.warn { border-color: var(--warn); color: var(--warn); }
.sync-badge.amber { border-color: var(--warn); color: var(--warn); }
.sync-tbl { width: 100%; margin: 4px 0 8px; font-size: 12.5px; table-layout: fixed; }
.sync-tbl td { overflow-wrap: anywhere; }
.sync-tbl td { vertical-align: top; }
.sync-tbl col.c-l { width: 26%; }
.sync-tbl col.c-b { width: 35%; }
.sync-tbl col.c-x { width: 26px; }
.sync-tbl .sync-arrow { text-align: center; color: var(--text-dim); }
.sync-tbl .sync-b { color: var(--text-dim); }
.sync-tbl tr.sync-lower td { color: var(--warn); }
.sync-tbl tr.sync-read td { color: var(--warn); font-weight: 600; }
.sync-tbl tr.sync-held td { color: var(--text-dim); }
.sync-tbl tr.sync-new td:first-child { color: var(--good); }
.sync-fresh { display: inline-block; margin-left: 10px; font-size: 12px; color: var(--text-dim); }
.sync-fresh a { margin-left: 4px; }
.sync-needs code, .sync-steps code { font-size: 12px; }

/* The ship editor on a wide screen (Goliath, 2026-09-27): a bigger window, and the Stats pane
   pinned in a third column beside whichever tab is open, so the numbers change in view while
   parts are fitted. The ship editor only: the admiral window shares .modal-editor and the tab styles. */
@media (min-width: 1700px) {
  #ship-editor-backdrop .modal-editor { width: min(1720px, 94vw); height: 94vh; max-height: 94vh; }
}
/* the shell takes the height left under the scorecard (never under 520px, or the window
   scrolls as a whole), and the open tab and the stats each scroll inside it */
#editor-body.ed-wide { display: flex; flex-direction: column; }
#editor-body.ed-wide > * { flex: none; }
#et-shell.et-wide { flex: 1 0 520px; display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(460px, 42%); grid-template-rows: minmax(0, 1fr); }
#et-shell.et-wide .et-tabs { max-width: none; }
#et-shell.et-wide .et-content { display: contents; }
#et-shell.et-wide .et-pane { grid-row: 1; grid-column: 2; min-height: 0; overflow-y: auto; padding: 12px 16px; }
#et-shell.et-wide .et-pane[data-pane="indock"],
#et-shell.et-wide .et-pane[data-pane="indock"].et-pane-hidden { display: block; grid-column: 3;
  border-left: 1px solid var(--border); background: var(--panel-2); }
#et-shell.et-wide .et-tab[data-tab="indock"] { display: none; }

/* The Commander menu in groups, and Research as one page with two tabs (Goliath, 2026-09-27) */
.nav-head { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
  padding: 9px 10px 3px; margin-top: 4px; border-top: 1px solid var(--border); cursor: default; }
.cmdr-head.has-tabs h2 { flex: 0 0 auto; }
.page-tabs { display: flex; gap: 2px; margin-right: auto; padding: 2px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel-2); }
.page-tabs a.page-tab { padding: 4px 16px; border-radius: 6px; font-size: 12.5px; color: var(--text-dim);
  text-decoration: none; }
.page-tabs a.page-tab:hover { color: var(--text); }
.page-tabs a.page-tab.active { background: var(--panel); color: var(--text); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent); }
/* "In an alliance" on My Commander, beside Nova Plus: not gold, it is not a paid subscription */
.sum-ally { border: 2px solid var(--border); }
.sum-ally.on { border-color: var(--good); box-shadow: 0 0 10px rgba(63, 191, 127, .25); }
/* opt-in, its own row under the two account switches (2026-10-02) */
.sum-share { border: 2px solid var(--border); grid-column: 1 / -1; }
.sum-share.on { border-color: var(--accent); box-shadow: 0 0 10px rgba(91, 156, 255, .25); }
/* both alliance pages: where the tick stands, and the way back to it */
.all-mem { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 13px; }
.all-mem-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.all-mem.on .all-mem-dot { background: var(--good); }
.all-mem.off { color: var(--warn); }
.all-mem.off .all-mem-dot { background: var(--warn); }
.all-mem a { margin-left: 6px; }

/* GIA on a wide screen (Goliath, 2026-09-27): a category's nodes two to a row, each keeping its
   own name | ships collected | battle-system levels layout; the category total stays full width.
   Halves the page's height at 3,440 px. */
@media (min-width: 1700px) {
  .gia-cat-nodes { display: grid; grid-template-columns: 1fr 1fr; }
  .gia-cat-nodes > .gia-node { grid-template-columns: minmax(190px, 1fr) 1fr 1fr; }
  .gia-cat-nodes > .gia-node:nth-child(even) { border-left: 1px solid var(--border); }
}