/* The campaign screen (campaign-screen.mjs) and the mission bar over the tactical view. Colours and fonts come from
   style.css. Every rule for the screen is under .cs, so nothing here can restyle the rest of the game. */
#campaign-dialog {
  width: min(1480px, calc(100vw - 36px));
  max-width: none;
  height: min(940px, calc(100vh - 36px));
  max-height: none;
  padding: 0;
  color: #dce6ef;
  background: #0d1520;
  border: 1px solid #3a566b;
  border-radius: 10px;
  box-shadow: 0 30px 90px #000d;
  overflow: hidden;
}
#campaign-dialog[open] {
  display: flex;
}
#campaign-dialog::backdrop {
  background: #050b14d9;
}

/* ── The screen ─────────────────────────────────────────────────────────────────────────────────── */
.cs {
  --well: #0c1825;
  --up: #8fe3a8;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'Barlow Condensed', sans-serif;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  color: #dce6ef;
  text-align: left;
}
.cs h2,
.cs h3,
.cs p,
.cs ul {
  margin: 0;
}
.cs ul {
  padding: 0;
  list-style: none;
}
.cs small,
.cs em,
.cs i,
.cs u {
  font-style: normal;
  text-decoration: none;
}
.cs button {
  font: inherit;
  color: inherit;
}
.cs-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 22px;
  margin-bottom: 10px;
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: 1.6px;
}
.cs-label > span {
  color: #5f7488;
  letter-spacing: 0.4px;
  text-align: right;
}
.cs-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--cyan);
  font-size: 12px;
  cursor: pointer;
}
.cs-link:hover {
  background: none;
  text-decoration: underline;
}
.cs-link.danger {
  color: var(--red);
}

/* Head */
.cs-head {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #112233, #0d1520 55%);
}
.cs-title small {
  color: var(--cyan);
  font: 9px var(--mono);
  letter-spacing: 2px;
}
.cs-title h2 {
  font: 600 32px var(--display);
  letter-spacing: 0.6px;
  line-height: 1.1;
}
.cs-ledger {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.cs-ledger span {
  display: grid;
  gap: 2px;
}
.cs-ledger small {
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 1.4px;
}
.cs-ledger b {
  font: 500 17px var(--mono);
  color: var(--gold);
}
.cs-close {
  padding: 9px 16px;
}

/* Body: the briefing in words, then the map over the ship, then the ready room. */
.cs-body {
  flex: 1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 372px;
  min-height: 0;
}
.cs-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cs-orders {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 20px 12px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #101c2a, #0d1520 60%);
  overflow-y: auto;
  scrollbar-width: thin;
}
.cs-orders > * {
  flex: none;
  width: 100%;
}
.cs-orders > .cs-link {
  width: auto;
  margin-bottom: 12px;
}
.cs-lead {
  font: 500 22px/1.22 var(--display);
  letter-spacing: 0.2px;
  color: #f1f6fa;
}
.cs-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 9px;
}
.cs-facts div {
  padding: 9px 10px 8px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.cs-facts b {
  display: block;
  font: 600 26px/1 var(--display);
  color: var(--gold);
}
.cs-facts b {
  white-space: nowrap;
}
.cs-facts b i {
  font-size: 13px;
  color: #8b7a55;
}
.cs-facts small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font: 8.5px var(--mono);
  letter-spacing: 1px;
}
.cs-points {
  display: grid;
  gap: 6px;
  margin-bottom: 10px !important;
}
.cs-points li {
  position: relative;
  padding-left: 14px;
  color: #a9bccd;
  font-size: 12px;
  line-height: 1.45;
}
.cs-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.cs-orders-full {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: #131b22;
}
.cs-orders-full p {
  color: #d9c08a;
  font-size: 11.5px;
  line-height: 1.6;
}
.cs-orders-full p + p {
  margin-top: 8px;
}
.cs-lift {
  margin-bottom: 12px;
}
.cs-lift-track {
  height: 6px;
  background: #22303f;
  border-radius: 3px;
  overflow: hidden;
}
.cs-lift-track i {
  display: block;
  height: 100%;
  background: var(--gold);
}
.cs-lift small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

/* Sector map */
.cs-sector {
  min-width: 0;
  padding: 12px 22px 9px;
  border-bottom: 1px solid var(--line);
}
.cs-seed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 10px var(--mono);
}
.cs-seed button {
  padding: 3px 8px;
  font: 10px var(--mono) !important;
  letter-spacing: 0.3px;
  color: #b5c7d7 !important;
}
.cs-seed input {
  width: 118px;
  padding: 3px 6px;
  background: var(--well);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  color: #dce6ef;
  font: 11px var(--mono);
}
.cs-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.cs-map .stage rect {
  fill: #0d1c2a;
}
.cs-map .stage.current rect {
  fill: #12283a;
}
.cs-map .stage text {
  fill: #5f7488;
  font: 9.5px var(--mono);
  letter-spacing: 1.2px;
  text-anchor: middle;
}
.cs-map .stage.current text {
  fill: var(--cyan);
}
.cs-map .edge {
  stroke: #2c4558;
  stroke-width: 2;
}
.cs-map .edge.hazard {
  stroke: #8a6238;
  stroke-dasharray: 5 5;
}
.cs-map .edge.walked {
  stroke: #6f93aa;
  stroke-width: 3;
}
.cs-map .edge.open {
  stroke: var(--cyan);
  stroke-width: 3;
}
.cs-map .edge.open.hazard {
  stroke: #f0a35e;
}
.cs-map .edge-ticks circle {
  fill: #0a1520;
  stroke: #5f7f95;
  stroke-width: 1.5;
}
.cs-map .edge-ticks text {
  fill: #dce6ef;
  font: 600 10.5px var(--mono);
  text-anchor: middle;
}
.cs .icon .shape {
  fill: #0d1b28;
  stroke: currentColor;
  stroke-width: 2;
}
.cs .icon .shape.inner {
  stroke-width: 1.2;
}
.cs .icon .glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.cs .icon .glyph.dot {
  fill: currentColor;
  stroke: none;
}
.cs .icon.fight,
.cs .icon.final {
  color: var(--red);
}
.cs .icon.choice {
  color: var(--gold);
}
.cs .icon.service {
  color: var(--cyan);
}
.cs .icon.starbase {
  color: #8fa3b8;
}
.cs-map .node {
  cursor: pointer;
  outline: none;
}
.cs-map .node .hit {
  fill: transparent;
}
.cs-map .node text {
  text-anchor: middle;
  paint-order: stroke;
  stroke: #0a1520;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.cs-map .node-label {
  fill: #dce6ef;
  font:
    500 12.5px Inter,
    sans-serif;
}
.cs-map .node-tag {
  fill: #8fa3b8;
  font:
    10.5px Inter,
    sans-serif;
}
.cs-map .node.here .node-tag {
  fill: var(--cyan);
}
.cs-map .node .you {
  fill: #7de7f51a;
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
.cs-map .node.done .icon .shape {
  fill: currentColor;
  fill-opacity: 0.22;
}
.cs-map .node .tick circle {
  fill: #0a1520;
  stroke: var(--up);
  stroke-width: 1.5;
}
.cs-map .node .tick path {
  fill: none;
  stroke: var(--up);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-map .node:hover .icon .shape,
.cs-map .node.selected .icon .shape,
.cs-map .node:focus-visible .icon .shape {
  stroke: #fff;
  stroke-width: 3;
}
.cs-site {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: auto;
  padding: 10px 12px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 5px;
  min-height: 74px;
}
.cs-site svg {
  flex: none;
  width: 34px;
  height: 34px;
}
.cs-site small {
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 1.3px;
}
.cs-site b {
  display: block;
  margin: 2px 0 3px;
  font: 600 17px var(--display);
  letter-spacing: 0.3px;
}
.cs-site p {
  color: #a9bccd;
  font-size: 11.5px;
  line-height: 1.45;
}
.cs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
}
.cs-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cs-legend svg {
  width: 15px;
  height: 15px;
}
.cs-legend .dash {
  width: 18px;
  border-top: 2px dashed #8a6238;
}
.cs-legend .num {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid #5f7f95;
  border-radius: 50%;
  color: #dce6ef;
  font: 600 8.5px var(--mono);
}

/* Command ship */
.cs-ship {
  padding: 10px 22px 8px;
}
.cs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.8fr);
  gap: 26px;
  align-items: center;
}
.cs-hero-art {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(140px, 20vh, 220px);
  border-radius: 8px;
  background: radial-gradient(ellipse at 38% 50%, #1b3a4f 0%, #0f2030 42%, #0b1622 75%), #0b1622;
  border: 1px solid var(--line);
  overflow: hidden;
}
.cs-hero-rings {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, #7de7f50a 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, #7de7f50a 0 1px, transparent 1px 48px);
  mask-image: radial-gradient(ellipse at 40% 50%, #000 20%, transparent 78%);
}
.cs-hero-art :is(canvas, img) {
  position: relative;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 84%;
  max-height: 80%;
  filter: drop-shadow(0 10px 26px #000a) drop-shadow(-14px 0 22px #7de7f522);
}
.cs-kicker {
  color: var(--cyan);
  font: 9px var(--mono);
  letter-spacing: 2px;
}
.cs-hero-copy h3 {
  font: 600 34px/1.05 var(--display);
  letter-spacing: 0.5px;
}
.cs-hero-copy h3 span {
  color: var(--muted);
  font-weight: 500;
}
.cs-hero-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 12px !important;
}
.cs-hero-meta em {
  color: var(--muted);
  font-size: 11px;
}
.cs-stars {
  color: var(--gold);
  letter-spacing: 1.5px;
  font-size: 13px;
}
.cs-stars i {
  color: #3a4656;
}
.cs-stat {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 10px;
  height: 22px;
}
.cs-stat small {
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: 1.3px;
}
.cs-stat-track {
  height: 5px;
  background: #22303f;
  border-radius: 3px;
  overflow: hidden;
}
.cs-stat-track i {
  display: block;
  height: 100%;
  background: var(--cyan);
  border-radius: 3px;
  transition: width 0.25s ease;
}
.cs-stat-track i.ok {
  background: var(--up);
}
.cs-stat-track i.warn {
  background: var(--red);
}
.cs-stat-track i.dim {
  background: #5f7f95;
}
.cs-stat b {
  font: 500 12px var(--mono);
  text-align: right;
  white-space: nowrap;
}
.cs-arms {
  margin-top: 10px !important;
  color: #a9bccd;
  font-size: 11.5px;
  line-height: 1.45;
}
.cs-picker {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}
.cs-picker button {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 2px 7px;
  background: #121d2a;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  min-width: 0;
}
.cs-picker button:hover {
  border-color: #4d7388;
  background: #162534;
}
.cs-picker button[aria-checked='true'] {
  border-color: var(--cyan);
  background: #18303a;
  box-shadow: inset 0 0 0 1px #7de7f555;
}
.cs-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 38px;
}
.cs-thumb img {
  max-width: 96px;
  max-height: 38px;
  object-fit: contain;
}
.cs-thumb img:not([src]) {
  visibility: hidden;
}
.cs-picker b {
  font: 600 13.5px var(--display);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cs-picker .cs-stars {
  font-size: 9.5px;
  letter-spacing: 0.6px;
}
.cs-rule,
.cs-locked {
  margin-top: 9px !important;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.cs-locked {
  margin-top: 14px !important;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.cs-locked b {
  color: #dce6ef;
  font-weight: 500;
}
.cs-condition {
  margin-bottom: 2px;
}

/* Ready room */
.cs-ready {
  padding: 18px 20px;
  border-left: 1px solid var(--line);
  background: var(--panel);
  overflow-y: auto;
  scrollbar-width: thin;
}
.cs-ready section + section {
  margin-top: 18px;
}
.cs-captain {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cs-captain > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #a3854f;
  border-radius: 50%;
  background: #2a2416;
  color: var(--gold);
  font: 600 17px var(--display);
  letter-spacing: 1px;
}
.cs-captain > div {
  flex: 1;
  min-width: 0;
}
.cs-captain b {
  display: block;
  font-weight: 500;
  font-size: 13.5px;
}
.cs-captain span {
  color: var(--gold);
  font: 10px var(--mono);
}
.cs-xp {
  height: 3px;
  margin: 6px 0 4px;
  background: #2b394b;
  border-radius: 2px;
  overflow: hidden;
}
.cs-xp i {
  display: block;
  height: 100%;
  background: var(--gold);
}
.cs-captain small {
  color: var(--muted);
  font: 9px var(--mono);
}
.cs-socket {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #121d2a;
  overflow: hidden;
}
.cs-socket + .cs-socket {
  margin-top: 6px;
}
.cs-socket.open {
  border-color: var(--cyan);
}
.cs-socket-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}
.cs-socket-head:disabled {
  opacity: 1;
  cursor: default;
}
.cs-socket-head:hover:not(:disabled) {
  background: #162534;
}
.cs-socket-head > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  font: 600 11px var(--mono);
  color: #0b2530;
  background: var(--cyan);
}
.cs-socket-head > i.weapon {
  background: var(--gold);
}
.cs-socket-head > span {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.cs-socket-head small {
  color: var(--muted);
  font: 8.5px var(--mono);
  letter-spacing: 1.3px;
}
.cs-socket-head b {
  font-size: 12.5px;
  font-weight: 500;
}
.cs-socket-head span span {
  color: #96abc0;
  font-size: 11px;
  line-height: 1.4;
}
.cs-socket-head u {
  flex: none;
  color: var(--cyan);
  font-size: 11px;
  margin-top: 1px;
}
.cs-choices {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.cs-choices button {
  display: grid;
  gap: 2px;
  padding: 8px 10px 8px 44px;
  background: var(--well);
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}
.cs-choices button:hover:not(:disabled) {
  background: #14283a;
}
.cs-choices button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cs-choices button[aria-selected='true'] {
  background: #13283a;
  box-shadow: inset 2px 0 var(--cyan);
}
.cs-choices b {
  font-size: 12px;
  font-weight: 500;
}
.cs-choices span {
  color: #96abc0;
  font-size: 10.5px;
  line-height: 1.4;
}
.cs-choices em {
  color: var(--gold);
  font: 9.5px var(--mono);
}
.cs-choices em.on {
  color: var(--cyan);
}
.cs-equip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #121d2a;
}
.cs-equip div {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.cs-equip b {
  font-size: 12px;
  font-weight: 500;
}
.cs-equip span {
  color: #96abc0;
  font-size: 11px;
}
.cs-equip button {
  flex: none;
  padding: 8px 12px;
  white-space: nowrap;
}
.cs-record {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 12px !important;
}
.cs-record li {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 11.5px;
  cursor: help;
}
.cs-record li > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid #46586c;
  border-radius: 50%;
  font-size: 9px;
  color: #0b2530;
}
.cs-record li.earned {
  color: #dce6ef;
}
.cs-record li.earned > i {
  border-color: var(--up);
  background: var(--up);
}
.cs-record-note {
  margin-top: 7px !important;
  color: #5f7488;
  font-size: 10.5px;
  line-height: 1.4;
}

/* Foot: the save on the left, the one primary action on the right. */
.cs-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  background: #0b131d;
}
.cs-save {
  flex: 1 1 0;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.cs-save p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.cs-save p b {
  margin-left: -8px;
  color: #dce6ef;
  font-weight: 500;
}
.cs-save small {
  display: block;
  margin: 3px 0 0 13px;
  color: #5f7488;
  font-size: 11px;
}
.cs-save.problem .live {
  background: var(--gold);
  box-shadow: 0 0 9px #e5bc7470;
}
.cs-save.problem p b {
  color: var(--gold);
}
.cs-notice {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 9px 22px;
  background: #2a2416;
  border-bottom: 1px solid #6b5a33;
  color: #d9c08a;
  font-size: 12px;
  line-height: 1.45;
}
.cs-notice b {
  flex: none;
  color: var(--gold);
  font-weight: 600;
}
.cs-notice.info {
  background: #10263a;
  border-bottom-color: #2e5a70;
  color: #b5d7e6;
}
.cs-notice.info span {
  flex: 1;
  min-width: 0;
}
.cs-notice.info button {
  flex: none;
}
/* While a strip is shown under the header, the screen gives its height back so that nothing below is cut off:
   a smaller map, and the two passages that repeat what is elsewhere on the screen put away. */
.cs:has(.cs-notice) .cs-map svg {
  max-height: 21vh;
}
.cs:has(.cs-notice) :is(.cs-points, .cs-record-note) {
  display: none;
}
.cs-go {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.cs-go p {
  color: #96abc0;
  font-size: 12px;
  text-align: right;
}
.cs-go p b {
  color: var(--up);
  font-weight: 500;
}
.cs-go p em {
  display: block;
  margin-top: 2px;
  color: var(--gold);
}
.cs-launch {
  flex: none;
  min-width: 248px;
  padding: 13px 18px;
  background: #77d9e6 !important;
  border: 0 !important;
  border-radius: 5px;
  color: #0b2530 !important;
  font:
    600 14px Inter,
    sans-serif !important;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 0 0 1px #7de7f540,
    0 6px 26px #7de7f530;
}
.cs-launch:hover {
  background: #a3ecf5 !important;
}
.cs-launch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

@media (max-width: 1320px) {
  .cs-body {
    grid-template-columns: 270px minmax(0, 1fr) 340px;
  }
  .cs-picker {
    gap: 4px;
  }
  .cs-picker b {
    font-size: 12px;
    letter-spacing: 0;
  }
}
@media (max-width: 1120px) {
  .cs-body {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr);
    overflow-y: auto;
  }
  .cs-orders {
    grid-column: 1;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  .cs-main {
    grid-column: 1;
    grid-row: 2;
    overflow: visible;
  }
  .cs-ready {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .cs-site {
    margin-top: 14px;
  }
  .cs-picker {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  #campaign-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
  }
  .cs-head {
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 12px 14px;
  }
  .cs-ledger {
    margin-left: 0;
    order: 3;
    width: 100%;
  }
  .cs-close {
    margin-left: auto;
  }
  .cs-body {
    display: block;
  }
  .cs-ready {
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .cs-hero {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cs-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cs-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
  }
  .cs-save {
    flex: none;
  }
  .cs-go {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cs-go p {
    text-align: left;
  }
}

/* Short windows (a 1280 × 800 laptop): keep the ship picker and the Refit Bay row above the fold. */
@media (max-height: 840px) and (min-width: 1121px) {
  .cs-head {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .cs-foot {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .cs-points,
  .cs-record-note,
  .cs-legend-note {
    display: none !important;
  }
  .cs-map svg {
    max-height: 24vh;
  }
  .cs-stat {
    height: 19px;
  }
  .cs-hero-meta {
    margin-bottom: 7px !important;
  }
  .cs-thumb,
  .cs-thumb img {
    height: 30px;
    max-height: 30px;
  }
  .cs-ready section + section {
    margin-top: 13px;
  }
  .cs-socket-head span span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* ── Mission bar: what stays in view during an encounter, across the top of the tactical view ───────────── */
#mission-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 52px;
  padding: 0 18px 0 22px;
  background: #0d1b28ee;
  border-bottom: 1px solid #2e4a5e;
}
#mission-bar small {
  display: block;
  color: var(--cyan);
  font:
    8.5px 'IBM Plex Mono',
    monospace;
  letter-spacing: 1.6px;
}
.mission-bar-where b {
  font:
    600 19px/1.1 'Barlow Condensed',
    sans-serif;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.mission-bar-goal {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #dce6ef;
  font-size: 12px;
}
.mission-bar-goal span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mission-bar-clock small {
  color: var(--muted);
}
.mission-bar-clock b {
  font:
    500 14px 'IBM Plex Mono',
    monospace;
  color: var(--gold);
  white-space: nowrap;
}
#campaign-withdraw {
  padding: 7px 12px;
  font-size: 11.5px;
  white-space: nowrap;
}

#mission-bar[hidden],
#campaign-alert[hidden] {
  display: none;
}
#campaign-alert {
  flex: 0 1 300px;
  margin: 0;
  color: var(--red);
  font-size: 11px;
  line-height: 1.35;
}
/* The view's own labels and switches move down by the height of the bar while it is shown. */
.viewport.has-mission-bar :is(.map-label, .view-controls) {
  transform: translateY(var(--mission-bar, 52px));
}
/* The briefing and the result card keep clear of the bar. */
.viewport.has-mission-bar :is(#banner, #result) {
  top: calc(48% + var(--mission-bar, 52px) / 2);
  max-height: calc(90% - var(--mission-bar, 52px));
}
#campaign-open {
  color: var(--cyan);
  border-color: #3e6a7c;
}
@media (max-width: 1050px) {
  #mission-bar {
    flex-wrap: wrap;
    height: auto;
    gap: 6px 16px;
    padding: 8px 12px;
  }
  .mission-bar-goal {
    order: 5;
    flex-basis: 100%;
  }
}

/* ── Operations without the staged map: the older routes, the linear chain and the proof chain ──────────── */
.cs-plain {
  color: #a9bccd;
  font-size: 12px;
  line-height: 1.5;
}
.cs-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.cs-steps li {
  counter-increment: step;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12.5px;
}
.cs-steps li::before {
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #46586c;
  border-radius: 50%;
  font: 600 10px var(--mono);
}
.cs-steps li.done {
  color: #a9d9b8;
}
.cs-steps li.done::before {
  content: '✓';
  border-color: var(--up);
  background: var(--up);
  color: #0b2530;
}
.cs-steps li.current {
  color: #dce6ef;
}
.cs-steps li.current::before {
  border-color: var(--cyan);
  color: var(--cyan);
}
.cs-save p > span:not(.live) {
  color: #96abc0;
}
.cs-save small.error {
  color: var(--red);
}
.cs button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* A socket that cannot be changed now is information, not a refused control. */
.cs .cs-socket-head:disabled {
  opacity: 1;
  cursor: default;
}
.cs-site p + p {
  margin-top: 4px;
}