/* STAR MAP (reshift #10): "Salvaged Workhorse" nav console. Tokens come from style.css; the map-only ones are below. */
:root,
[data-theme="day"],
[data-theme="light"] {
  --sm-pow-0: #4fa3a5;
  --sm-pow-1: #d27d4a;
  --sm-pow-2: #c9b04a;
  --sm-pow-3: #9a7fc4;
  --sm-pow-4: #d0627a;
  --sm-pow-5: #6f9bd6;
  --sm-pow-6: #8a9a78;
  --sm-pow-ind: #7d7f72;
  --sm-sub-0: #6aa3c8;
  --sm-sub-1: #c89a5a;
  --sm-sub-2: #a07fb4;
  --sm-route-0: #f0d070;
  --sm-route-1: #7fd6c8;
  --sm-route-2: #f19a6a;
  --sm-route-3: #b7a0ee;
  --sm-route-4: #e88aa0;
  --sm-route-5: #9fcf72;
  --sm-shade-alpha: 34%;
}
[data-theme="night"],
[data-theme="dark"] {
  --sm-pow-0: #4a8f8a;
  --sm-pow-1: #c06a3a;
  --sm-pow-2: #b89a3a;
  --sm-pow-3: #8a6fb0;
  --sm-pow-4: #c0526a;
  --sm-pow-5: #5f88c0;
  --sm-pow-6: #7a8868;
  --sm-pow-ind: #6d6a5e;
  --sm-sub-0: #5a8fb0;
  --sm-sub-1: #b0864a;
  --sm-sub-2: #8a6fa0;
  --sm-route-0: #f1b66b;
  --sm-route-1: #8ec7a0;
  --sm-route-2: #e58a58;
  --sm-route-3: #b39ae0;
  --sm-route-4: #e07890;
  --sm-route-5: #a4c46e;
  --sm-shade-alpha: 30%;
}

/* ---- the location readout (HUD Timer slot and chat header): small and quiet */
.phosphor-screen .location-link {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 2px 0;
  border: 0;
  border-top: 1px dashed var(--phosphor-dim);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--phosphor);
  font: 11px/1.5 var(--font-mono);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phosphor-screen .location-link:hover,
.phosphor-screen .location-link:focus-visible {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.phosphor-screen .location-link:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}
.location-link[hidden],
.location-chip[hidden] {
  display: none;
}
.location-link[data-mode="transit"] {
  color: var(--lamp-amber);
}
.location-chip {
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
}
.location-chip:hover,
.location-chip:focus-visible {
  border-color: var(--brass);
}
.location-chip:active:not(:disabled) {
  transform: none;
}

/* ---- the dialog */
.starmap-dialog {
  padding: 0;
  width: min(1320px, 97vw);
  height: min(880px, 95vh);
  max-width: none;
  max-height: none;
  border: 3px ridge var(--brass);
  background: var(--bulkhead);
  color: var(--text);
  box-shadow: 0 0 40px #000b;
}
.starmap-dialog:not([open]) {
  display: none;
}
.starmap-dialog[open] {
  display: flex;
}
.starmap-dialog::backdrop {
  background: rgb(0 0 0 / 72%);
}
.starmap-host {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.starmap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(105deg, var(--bulkhead-hi), var(--bulkhead));
}
.starmap-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: linear-gradient(90deg, var(--primer), var(--primer-deep));
  border-bottom: 2px solid var(--line);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.starmap-title {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}
.starmap-serial {
  margin-left: auto;
  font: 10px var(--font-mono);
  color: var(--brass-hi);
  letter-spacing: 0.08em;
}
.starmap-close[hidden] {
  display: none;
}
.starmap-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
}
.starmap-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  gap: 8px;
}
.starmap-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: flex-start;
}
.sm-group {
  display: flex;
  gap: 6px;
}
.sm-group .hw-btn {
  padding: 6px 10px;
  min-width: 38px;
}
.sm-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 3px 10px 5px;
  border: 1px solid var(--line);
  background: var(--bulkhead-deep);
}
.sm-legend-title {
  padding: 0 4px;
  font: 600 10px var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brass-hi);
}
.sm-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 11px var(--font-mono);
  color: var(--text);
  cursor: pointer;
}
.sm-check input[type="checkbox"] {
  accent-color: var(--brass);
}
.sm-check select {
  background: var(--screen);
  color: var(--phosphor);
  border: 1px solid var(--line);
  font: 11px var(--font-mono);
}
.starmap-frame {
  position: relative;
  flex: 1;
  min-height: 280px;
  background: var(--screen);
  border: 3px inset var(--bulkhead-hi);
  overflow: hidden;
}
.starmap-svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.starmap-svg.is-dragging {
  cursor: grabbing;
}
.starmap-svg:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.starmap-hint {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font: 11px var(--font-mono);
  color: var(--phosphor);
  pointer-events: none;
}
.starmap-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: var(--phosphor);
  font: 13px var(--font-mono);
}
.starmap-legend {
  font: 11px var(--font-mono);
  color: var(--muted);
}
.sm-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sm-legend-ports {
  margin: 4px 0 0;
}
.sm-sw {
  display: inline-block;
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  border: 1px solid var(--line);
  background: transparent;
}
.sw-power[data-power="0"] { background: var(--sm-pow-0); }
.sw-power[data-power="1"] { background: var(--sm-pow-1); }
.sw-power[data-power="2"] { background: var(--sm-pow-2); }
.sw-power[data-power="3"] { background: var(--sm-pow-3); }
.sw-power[data-power="4"] { background: var(--sm-pow-4); }
.sw-power[data-power="5"] { background: var(--sm-pow-5); }
.sw-power[data-power="6"] { background: var(--sm-pow-6); }
.sw-power[data-power="ind"] { background: var(--sm-pow-ind); }
.sw-sub[data-sub="0"] { background: var(--sm-sub-0); }
.sw-sub[data-sub="1"] { background: var(--sm-sub-1); }
.sw-sub[data-sub="2"] { background: var(--sm-sub-2); }
.sw-zone-amber { border: 2px solid var(--lamp-amber); border-radius: 50%; }
.sw-zone-red { border: 2px dashed var(--signal-red); border-radius: 50%; }
.sw-reach { border: 2px solid var(--phosphor); background: color-mix(in srgb, var(--phosphor) 30%, transparent); }

/* ---- the chart itself */
.sm-band-0 { fill: color-mix(in srgb, var(--phosphor) 5%, transparent); }
.sm-band-1 { fill: color-mix(in srgb, var(--brass) 6%, transparent); }
.sm-band-label {
  fill: var(--phosphor-dim);
  font: 600 10px var(--font-label);
  letter-spacing: 0.35em;
}
.sm-cell {
  fill: none;
  stroke: var(--phosphor-dim);
  stroke-opacity: 0.4;
  stroke-width: 0.8;
}
.sm-shade {
  fill: transparent;
  stroke: none;
}
.sm-l-reach[data-shade="power"] .sm-shade[data-power="0"] { fill: color-mix(in srgb, var(--sm-pow-0) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="power"] .sm-shade[data-power="1"] { fill: color-mix(in srgb, var(--sm-pow-1) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="power"] .sm-shade[data-power="2"] { fill: color-mix(in srgb, var(--sm-pow-2) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="power"] .sm-shade[data-power="3"] { fill: color-mix(in srgb, var(--sm-pow-3) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="power"] .sm-shade[data-power="4"] { fill: color-mix(in srgb, var(--sm-pow-4) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="power"] .sm-shade[data-power="5"] { fill: color-mix(in srgb, var(--sm-pow-5) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="power"] .sm-shade[data-power="6"] { fill: color-mix(in srgb, var(--sm-pow-6) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="power"] .sm-shade[data-power="ind"] { fill: color-mix(in srgb, var(--sm-pow-ind) 22%, transparent); }
.sm-l-reach[data-shade="subsector"] .sm-shade[data-sub="0"] { fill: color-mix(in srgb, var(--sm-sub-0) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="subsector"] .sm-shade[data-sub="1"] { fill: color-mix(in srgb, var(--sm-sub-1) var(--sm-shade-alpha), transparent); }
.sm-l-reach[data-shade="subsector"] .sm-shade[data-sub="2"] { fill: color-mix(in srgb, var(--sm-sub-2) var(--sm-shade-alpha), transparent); }
.show-reach.has-reach .sm-shade:not(.is-reach):not(.is-here) { opacity: 0.4; }
.show-reach .sm-shade.is-reach {
  stroke: var(--phosphor);
  stroke-width: 2;
}
.sm-shade.is-here {
  stroke: var(--lamp-amber);
  stroke-width: 2;
}

.sm-route {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  pointer-events: none;
}
.sm-route.is-selected { stroke-width: 4; opacity: 1; }
.sm-route.is-dim { opacity: 0.25; }
.sm-route.route-net { stroke-width: 2; opacity: 0.8; }
.route-0 { stroke: var(--sm-route-0); }
.route-1 { stroke: var(--sm-route-1); }
.route-2 { stroke: var(--sm-route-2); }
.route-3 { stroke: var(--sm-route-3); }
.route-4 { stroke: var(--sm-route-4); }
.route-5 { stroke: var(--sm-route-5); }
.hide-routes .sm-route:not(.is-selected) { display: none; }
.sm-plan {
  fill: none;
  stroke: var(--lamp-green);
  stroke-width: 3.2;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.sm-world { cursor: pointer; }
.sm-hit { fill: transparent; }
.sm-dot {
  fill: var(--phosphor);
  stroke: var(--screen);
  stroke-width: 1.5;
}
.sm-ring {
  fill: none;
  stroke: var(--phosphor);
  stroke-width: 1.4;
}
.sm-world.port-X .sm-dot {
  fill: var(--screen);
  stroke: var(--phosphor);
  stroke-width: 1.4;
  stroke-dasharray: 2 1.6;
}
.sm-x {
  fill: none;
  stroke: var(--phosphor);
  stroke-width: 1.2;
}
.sm-zone {
  fill: none;
  stroke: var(--lamp-amber);
  stroke-width: 2.2;
}
.zone-red .sm-zone {
  stroke: var(--signal-red);
  stroke-dasharray: 3 2.2;
  stroke-width: 2.4;
}
.hide-zones .sm-zone { display: none; }
.sm-gas-body { fill: var(--lamp-amber); }
.sm-gas-ring { fill: none; stroke: var(--lamp-amber); stroke-width: 1; }
.hide-gas .sm-gas { display: none; }
.sm-job { display: none; }
.sm-world.has-jobs .sm-job { display: inline; }
.hide-jobs .sm-job { display: none !important; }
.sm-job-dot { fill: var(--lamp-amber); stroke: var(--screen); stroke-width: 1; }
.sm-job-count { fill: #211b12; font: 700 7.5px var(--font-mono); }
.sm-world.is-selected .sm-dot { stroke: var(--focus); stroke-width: 2.2; }
.sm-world:hover .sm-dot { stroke: var(--text); }
.show-reach.has-reach .sm-world:not(.is-reach) { opacity: 0.6; }
.has-route .sm-world:not(.in-route) { opacity: 0.45; }
.has-route .sm-world.in-route .sm-dot { stroke: var(--sm-route-0); stroke-width: 2; }

.sm-name {
  display: none;
  fill: var(--text);
  font: 600 10.5px var(--font-label);
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: var(--screen);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.sm-name.is-on { display: block; }
.sm-name.is-forced { fill: var(--focus); }
.hide-names .sm-name:not(.is-forced) { display: none; }

.sm-selected {
  fill: none;
  stroke: var(--focus);
  stroke-width: 2.4;
  pointer-events: none;
}
.sm-bracket {
  fill: none;
  stroke: var(--lamp-amber);
  stroke-width: 2.4;
  stroke-linecap: square;
}
.sm-pulse {
  fill: none;
  stroke: var(--lamp-amber);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: sm-pulse 2.4s ease-out infinite;
}
@keyframes sm-pulse {
  from { transform: scale(0.7); opacity: 0.95; }
  to { transform: scale(1.5); opacity: 0; }
}
.sm-tag-bg { fill: var(--lamp-amber); }
.sm-tag-text {
  fill: #211b12;
  font: 700 8.5px var(--font-label);
  letter-spacing: 0.14em;
}
.sm-transit-text { fill: var(--lamp-amber); paint-order: stroke; stroke: var(--screen); stroke-width: 3px; }
.sm-transit-line {
  stroke: var(--lamp-amber);
  stroke-width: 2.2;
  stroke-dasharray: 6 5;
}
.sm-ship { fill: var(--lamp-amber); stroke: var(--screen); stroke-width: 1; }
.sm-layer { pointer-events: none; }
.sm-l-worlds { pointer-events: auto; }

/* ---- the side panel */
.starmap-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 10px 10px 0;
}
.sm-panel {
  background: var(--bulkhead-deep);
  border: 1px solid var(--line);
  padding: 8px 10px 10px;
  overflow-wrap: anywhere;
}
.sm-h {
  margin: 0 0 6px;
  font: 600 12px var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brass-hi);
}
.sm-h4 {
  margin: 8px 0 3px;
  font: 600 11px var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sm-panel p {
  margin: 0 0 6px;
}
.sm-muted {
  color: var(--muted);
}
.sm-facts {
  margin: 0;
  padding-left: 16px;
}
.sm-link {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--brass-hi);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sm-link:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}
.sm-card {
  background: var(--paper);
  color: var(--paper-ink);
  border: 2px solid var(--brass);
}
.sm-card .sm-h {
  color: var(--paper-ink);
}
.sm-card-name {
  font-size: 17px;
  margin: 0;
}
.sm-card-meta {
  font: 11px var(--font-mono);
  color: color-mix(in srgb, var(--paper-ink) 75%, transparent);
  margin-bottom: 6px;
}
.sm-tagline {
  font-style: italic;
}
.sm-trip {
  margin: 8px 0;
  padding: 6px 8px;
  background: var(--screen);
  color: var(--phosphor);
  border: 2px inset var(--bulkhead-hi);
  font: 11.5px/1.5 var(--font-mono);
}
.sm-trip .sm-h4 {
  color: var(--brass-hi);
  margin-top: 0;
}
.sm-trip p {
  margin: 0 0 4px;
}
.sm-dl {
  display: grid;
  grid-template-columns: minmax(64px, 32%) minmax(0, 1fr);
  gap: 3px 10px;
  margin: 8px 0;
  font-size: 13px;
}
.sm-dl dt {
  font: 600 10.5px var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 2px;
}
.sm-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.sm-card .sm-link {
  color: var(--inline-accent);
}
.sm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.sm-actions .hw-btn {
  padding: 6px 10px;
  font-size: 12px;
}
.sm-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.sm-tabs .hw-btn {
  flex: 1;
  padding: 5px 8px;
}
.sm-tab[aria-selected="true"] {
  color: var(--phosphor);
  box-shadow: inset 0 0 0 2px var(--brass);
}
.sm-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: var(--screen);
  color: var(--phosphor);
  border: 2px inset var(--bulkhead-hi);
  font: 12px var(--font-mono);
}
.sm-search[hidden] {
  display: none;
}
.sm-list-body {
  max-height: 260px;
  overflow-y: auto;
}
.sm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sm-world-row,
.sm-route-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  width: 100%;
  padding: 5px 8px;
  margin: 0 0 3px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bulkhead);
  box-shadow: none;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.sm-world-row.is-selected,
.sm-route-row.is-selected {
  box-shadow: inset 0 0 0 2px var(--brass);
}
.sm-world-row:active:not(:disabled),
.sm-route-row:active:not(:disabled) {
  transform: none;
}
.sm-route-row {
  border-left: 5px solid currentColor;
}
.sm-wr-name {
  font: 600 13px var(--font-label);
  letter-spacing: 0.04em;
}
.sm-wr-meta {
  font: 11px var(--font-mono);
  color: var(--muted);
}
.sm-wr-blurb {
  flex-basis: 100%;
  font: 12px/1.45 var(--font-prose);
  color: var(--text);
  text-transform: none;
}

/* ---- narrow screens: the side panel stacks under the chart; the dialog fills the screen */
@media (max-width: 899px) {
  .starmap-dialog {
    width: 100vw;
    height: 100dvh;
    border-width: 0;
  }
  .starmap-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .starmap-stage {
    flex: none;
    height: min(72vh, 560px);
    padding: 8px;
  }
  .starmap-side {
    flex: none;
    overflow: visible;
    padding: 0 8px 12px;
  }
  .sm-list-body {
    max-height: 340px;
  }
  .starmap-serial {
    display: none;
  }
  .starmap-close {
    margin-left: auto;
  }
  .sm-layers {
    padding-bottom: 3px;
  }
}
@media (max-width: 479px) {
  .starmap-title {
    font-size: 14px;
  }
  .sm-check {
    font-size: 10.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sm-pulse {
    animation: none;
    opacity: 0.6;
  }
}