/* Space Factory — app shell and the Neocom rail.
 *
 * Dark only, deliberately. This is a space game and EVE has no light mode, so
 * there is no prefers-color-scheme: light block; `color-scheme: dark` below
 * makes scrollbars and form controls follow suit.
 *
 * No webfonts. The CSP Caddy sends for this origin is `font-src 'self' data:`
 * with no font CDN in `style-src`, so a Google Fonts <link> would be blocked
 * outright. The stack reaches for whatever condensed technical face the OS
 * already has — EVE's own Shentox is condensed — before falling back.
 */

:root {
  color-scheme: dark;

  /* Cool desaturated blue-blacks, one pale cyan accent, amber for anything
     asking for attention. Lifted from EVE's palette, not its assets. */
  --void: #05080c;
  --rail-top: #0c131a;
  --rail-bottom: #080d12;
  --panel: #0e161f;

  --line: rgba(150, 196, 224, 0.13);
  --line-strong: rgba(150, 196, 224, 0.28);

  --ink: #c3d3df;
  --ink-bright: #eaf4fb;
  --ink-dim: #76899a;

  --accent: #4fb6d9;
  --accent-wash: rgba(79, 182, 217, 0.1);
  --accent-glow: rgba(79, 182, 217, 0.5);
  --amber: #e0a83c;
  --danger: #d2563f;

  /* Star tiers. Read by starmap.js through getComputedStyle, so these are the
     single source of truth for the map's colours as well as the legend's.
     Tier 1 is 80% of every screen, so it is deliberately the quietest; tier 3
     is the one worth spotting, so it gets the brightest, coolest value. */
  --t1: #8fa9bd;
  --t2: #e0a83c;
  --t3: #7ee0ff;
  /* Galaxy haze, as raw channels because the canvas composes its own alpha. */
  --haze: 118, 186, 228;

  --rail-w: 52px;
  --rail-w-open: 214px;
  --row-h: 42px;

  --font: "Saira Condensed", "Roboto Condensed", "Barlow Condensed",
    "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  overflow: hidden; /* app shell: panes scroll, the page never does */
  background: var(--void);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Neocom --
 *
 * EVE's rail: pilot portrait on top, window launchers below in themed groups,
 * clock at the bottom. Icons alone are not self-explanatory, so each row gets
 * a flyout label on hover and on keyboard focus. The rail can also be pinned
 * open to show those labels inline.
 */

#neocom-root {
  flex: 0 0 auto;
  display: flex;
}

.neocom {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: calc(var(--rail-w) + env(safe-area-inset-left, 0px));
  height: 100%;
  padding-left: env(safe-area-inset-left, 0px);
  background: linear-gradient(180deg, var(--rail-top), var(--rail-bottom));
  border-right: 1px solid var(--line);
  /* The hairline of light down the inner edge is most of what makes EVE's
     chrome read as a lit panel rather than a flat block. */
  box-shadow:
    inset -1px 0 0 rgba(150, 196, 224, 0.05),
    2px 0 18px rgba(0, 0, 0, 0.55);
  transition: width 0.18s var(--ease);
}

.neocom.is-open { width: calc(var(--rail-w-open) + env(safe-area-inset-left, 0px)); }

/* Brand cap. The chamfered corner is EVE's signature panel cut. */
.neocom-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(79, 182, 217, 0.08), transparent 70%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  flex: 0 0 auto;
}

.neocom-brand svg { flex: 0 0 auto; filter: drop-shadow(0 0 6px var(--accent-glow)); }

.neocom-word {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-bright);
  white-space: nowrap;
}

/* Pilot. EVE puts the character portrait at the very top of the rail and
   treats it as the way into everything account-shaped. */
.neocom-pilot {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 10px;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.neocom-portrait {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--ink-dim);
  background: radial-gradient(circle at 50% 35%, #1b2a36, #0b1218);
  box-shadow: 0 0 0 1px var(--line-strong), inset 0 0 10px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.15s var(--ease), color 0.15s var(--ease);
}

.neocom-pilot:hover .neocom-portrait,
.neocom-pilot:focus-visible .neocom-portrait {
  color: var(--ink-bright);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px -2px var(--accent-glow);
}

.neocom-pilot-meta { min-width: 0; line-height: 1.25; }

.neocom-pilot-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.neocom-pilot-sub {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* Launcher groups */
.neocom-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 196, 224, 0.22) transparent;
}

.neocom-scroll::-webkit-scrollbar { width: 5px; }
.neocom-scroll::-webkit-scrollbar-thumb {
  background: rgba(150, 196, 224, 0.22);
}

.neocom-group {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Hairline that fades out at both ends, rather than a hard rule. */
.neocom-group + .neocom-group {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line) 25%, var(--line) 75%, transparent) 1;
}

.neocom-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--row-h);
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}

/* Left accent bar: hinted on hover, full on an open window. */
.neocom-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: translateY(-50%);
  transition: height 0.15s var(--ease);
}

.neocom-item:hover,
.neocom-item:focus-visible {
  background: var(--accent-wash);
  color: var(--ink-bright);
  outline: none;
}

.neocom-item:hover::before,
.neocom-item:focus-visible::before { height: 40%; }

.neocom-item:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.neocom-item[aria-pressed="true"] {
  color: var(--ink-bright);
  background: linear-gradient(90deg, rgba(79, 182, 217, 0.16), rgba(79, 182, 217, 0.02));
}

.neocom-item[aria-pressed="true"]::before { height: 100%; }

.neocom-item[aria-pressed="true"] .neocom-icon {
  filter: drop-shadow(0 0 5px var(--accent-glow));
}

.neocom-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.neocom-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed, the rail hides every label and the tooltip stands in for them. */
.neocom:not(.is-open) .neocom-text,
.neocom:not(.is-open) .neocom-word,
.neocom:not(.is-open) .neocom-pilot-meta,
.neocom:not(.is-open) .neocom-clock-label { display: none; }

.neocom:not(.is-open) .neocom-brand,
.neocom:not(.is-open) .neocom-pilot,
.neocom:not(.is-open) .neocom-item { justify-content: center; padding: 0; }

/* Badge. Collapsed it rides the icon's corner; open it sits at the row end. */
.neocom-badge {
  flex: 0 0 auto;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--amber);
  color: #16100a;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.02em;
  text-align: center;
}

.neocom-badge[data-tone="alert"] { background: var(--danger); color: #f6e7e3; }
.neocom-badge[hidden] { display: none; }

.neocom:not(.is-open) .neocom-badge {
  position: absolute;
  top: 5px;
  left: 28px;
  box-shadow: 0 0 0 2px var(--rail-top);
}

/* Footer: UTC clock, as EVE shows at the foot of the rail, plus the pin. */
.neocom-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}

.neocom-clock {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 3px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.neocom-clock-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.neocom-pin {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.13s var(--ease), border-color 0.13s var(--ease);
}

.neocom-pin:hover,
.neocom-pin:focus-visible {
  color: var(--ink-bright);
  border-color: var(--line-strong);
  outline: none;
}

.neocom-pin svg { transition: transform 0.18s var(--ease); }
.neocom.is-open .neocom-pin svg { transform: scaleX(-1); }

.neocom:not(.is-open) .neocom-foot { flex-direction: column; }
.neocom:not(.is-open) .neocom-clock { align-items: center; padding: 0; font-size: 11px; }

/* Flyout label. One element, parked on <body> and positioned with fixed
 * coordinates, because the rail's launcher list scrolls and anything absolute
 * inside it would be clipped at the edge.
 */
.neocom-tip {
  position: fixed;
  z-index: 60;
  padding: 6px 12px 5px;
  background: linear-gradient(180deg, #17242f, #0d161e);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  color: var(--ink-bright);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
}

.neocom-tip[data-show] { opacity: 1; transform: none; }

/* Avatar. Fills the portrait ring the glyph otherwise sits in. The ring's
 * box-shadow stays on the parent, so a square Google image reads as round. */
.neocom-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.neocom.is-signed-in .neocom-portrait { color: var(--accent); }
.neocom.is-signed-in .neocom-pilot-sub {
  text-transform: none;       /* an email address is not a label */
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------- pilot panel --
 *
 * Flies out beside the portrait button, the way EVE's character sheet hangs
 * off its rail. Parked on <body> and positioned in viewport coordinates for
 * the same reason the flyout label is: the rail is a narrow strip and an
 * absolutely positioned child would be clipped by it.
 */

.pilot-panel {
  position: fixed;
  z-index: 70;
  width: min(290px, calc(100vw - 72px));
  background: linear-gradient(180deg, rgba(20, 31, 42, 0.97), rgba(10, 16, 22, 0.97));
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
  color: var(--ink);
}

.pilot-panel[hidden] { display: none; }

.pilot-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px 8px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--accent-wash), transparent 75%);
}

.pilot-panel-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.pilot-panel-close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.pilot-panel-close:hover,
.pilot-panel-close:focus-visible {
  color: var(--ink-bright);
  border-color: var(--line-strong);
  outline: none;
}

.pilot-panel-body { padding: 14px 14px 16px; }

/* Signed-in identity card */
.pilot-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
}

.pilot-card[hidden] { display: none; }

.pilot-card-portrait {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--accent);
  background: radial-gradient(circle at 50% 35%, #1b2a36, #0b1218);
  box-shadow: 0 0 0 1px var(--accent), inset 0 0 10px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.pilot-card-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.pilot-card-meta { min-width: 0; line-height: 1.3; }

.pilot-card-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The address is the account key, so it is shown verbatim and allowed to
   wrap rather than being ellipsised into something unrecognisable. */
.pilot-card-email {
  display: block;
  font-size: 12px;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}

.pilot-note {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-dim);
}

/* Google renders its own button in here; it is left unstyled on purpose —
   Google's terms cover how that button looks. Only the box is ours. */
.pilot-gsi {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.pilot-gsi[hidden] { display: none; }

.pilot-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.pilot-facts[hidden] { display: none; }

.pilot-facts dt {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pilot-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pilot-signout {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.13s var(--ease), color 0.13s var(--ease),
    background 0.13s var(--ease);
}

.pilot-signout[hidden] { display: none; }

.pilot-signout:hover,
.pilot-signout:focus-visible {
  border-color: var(--danger);
  background: rgba(210, 86, 63, 0.12);
  color: #f0cfc8;
  outline: none;
}

.pilot-error {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--danger);
  background: rgba(210, 86, 63, 0.1);
  font-size: 12px;
  line-height: 1.5;
  color: #efc9c1;
}

.pilot-error[hidden] { display: none; }

/* ------------------------------------------------------------- star map --
 *
 * The map is the view: a canvas filling the viewport with an overlay on top.
 * The overlay is pointer-transparent so dragging anywhere that is not a
 * control still pans the map; each control turns pointer events back on.
 */

.viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; /* the map pans; the element never scrolls */
}

.starmap {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--void);
  cursor: grab;
  touch-action: none; /* we handle pan and pinch ourselves */
}

.starmap:active { cursor: grabbing; }
.starmap:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }

.map-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.map-ui > * { pointer-events: auto; }

/* --- search ---------------------------------------------------------- */

.map-search {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 0;
  width: min(380px, calc(100% - 24px));
}

.map-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-right: 0;
  background: rgba(10, 16, 22, 0.92);
  color: var(--ink-bright);
  font: inherit;
  font-size: 13px;
}

.map-search-input::placeholder { color: var(--ink-dim); }

.map-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-wash);
}

.map-search-go {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #16242f, #0d161e);
  color: var(--ink-bright);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.map-search-go:hover,
.map-search-go:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.map-results {
  position: absolute;
  top: 50px;
  left: 12px;
  width: min(380px, calc(100% - 24px));
  max-height: min(46vh, 380px);
  overflow-y: auto;
  background: rgba(10, 16, 22, 0.96);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 196, 224, 0.22) transparent;
}

.map-results[hidden] { display: none; }

.map-results-note {
  margin: 0;
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
}

.map-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 11px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.map-result:hover,
.map-result:focus-visible {
  background: var(--accent-wash);
  outline: none;
}

.map-result[data-tier="1"] { border-left-color: var(--t1); }
.map-result[data-tier="2"] { border-left-color: var(--t2); }
.map-result[data-tier="3"] { border-left-color: var(--t3); }

.map-result-name { font-size: 13px; color: var(--ink-bright); }

.map-result-meta {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

/* --- selected system ------------------------------------------------- */

.map-card {
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(272px, calc(100% - 24px));
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(20, 31, 42, 0.96), rgba(10, 16, 22, 0.96));
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.map-card[hidden] { display: none; }
.map-card[data-tier="1"] { border-left-color: var(--t1); }
.map-card[data-tier="2"] { border-left-color: var(--t2); }
.map-card[data-tier="3"] { border-left-color: var(--t3); }

.map-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.map-card-tier {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.map-card[data-tier="2"] .map-card-tier { color: var(--t2); }
.map-card[data-tier="3"] .map-card-tier { color: var(--t3); }

.map-card-close {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.map-card-close:hover,
.map-card-close:focus-visible {
  color: var(--ink-bright);
  border-color: var(--line-strong);
  outline: none;
}

/* The name is the shareable thing, so it is the biggest text in the card and
   is selectable even though the rest of the overlay is not. */
.map-card-name {
  margin: 4px 0 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-bright);
  overflow-wrap: anywhere;
  user-select: text;
}

.map-card-copy {
  width: 100%;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.map-card-copy:hover,
.map-card-copy:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.map-card-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.map-card-facts dt {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.map-card-facts dd {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.map-card-desig { user-select: text; }

/* --- legend and readouts --------------------------------------------- */

.map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 12px;
  background: rgba(8, 13, 18, 0.82);
  border: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.map-legend-row { display: flex; align-items: center; gap: 8px; }

.map-legend-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.map-legend-row[data-tier="1"] i { background: var(--t1); }
.map-legend-row[data-tier="2"] i { background: var(--t2); box-shadow: 0 0 6px var(--t2); }
.map-legend-row[data-tier="3"] i { background: var(--t3); box-shadow: 0 0 7px var(--t3); }

.map-legend-row b {
  margin-left: auto;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.map-readout {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  background: rgba(8, 13, 18, 0.82);
  border: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.map-readout-pos {
  font-variant-numeric: tabular-nums;
  color: var(--ink-bright);
}

.map-home {
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.map-home:hover,
.map-home:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

/* --- toast ----------------------------------------------------------- */

.map-toast {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  max-width: calc(100% - 48px);
  background: rgba(14, 22, 31, 0.95);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-bright);
  pointer-events: none;
  text-align: center;
}

.map-toast[hidden] { display: none; }

/* ------------------------------------------------------------ responsive --
 * Narrow screens keep the rail but never widen it; neocom.js holds the pinned
 * preference and stops honouring it below this width, so the tooltips come
 * back rather than labels being cut off. The pin itself is hidden here.
 */

@media (max-width: 720px) {
  .neocom-pin { display: none; }
  /* The rail never widens here, so the panel gets the rest of the width. */
  .pilot-panel { width: calc(100vw - 68px); }

  /* Search across the top, the card under it, readouts along the bottom —
     the three of them cannot sit in their corners on a 360px screen without
     covering the map entirely. */
  .map-search { width: calc(100% - 24px); }
  .map-results { width: calc(100% - 24px); max-height: 38vh; }
  .map-card {
    top: auto;
    bottom: 58px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  .map-legend {
    flex-direction: row;
    gap: 12px;
    bottom: 12px;
    padding: 7px 10px;
    font-size: 10px;
  }
  .map-legend-row b { display: none; }
  .map-readout { gap: 8px; padding: 6px 8px; font-size: 10px; }
  .map-readout-span, .map-readout-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}