/* All Out of Space — 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;

  /* The accent is one colour, set twice: as a colour and as channels, so
     tints can be made from it with rgba(). "Accent colour" in Settings swaps
     both (the [data-accent] blocks below); everything else derives. */
  --accent: #4fb6d9;
  --accent-rgb: 79, 182, 217;
  --accent-wash: rgba(var(--accent-rgb), 0.1);
  --accent-glow: rgba(var(--accent-rgb), 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;

  /* Unresolved starlight in the baked galaxy layer, as raw channels because
     galaxyfield.js writes them into an ImageData buffer and interpolates
     between them. Arms are blue, cores are warm white — a galaxy's core is not
     a brighter version of its arms, and colouring it as one is most of why a
     density field ends up looking like fog. */
  --field-arm: 96, 150, 208;
  --field-core: 255, 242, 214;
  /* The faint glow along cosmic filaments, seen only past the zoom where
     individual galaxies stop being drawable. Deliberately dim — a deep field
     is black with things in it, not a lit background. */
  --web-glow: 92, 118, 184;

  --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; }

/* Scrollbars, the game's own: a slim bar on a faint rail that lights up in
 * the accent color under the pointer, square like every other edge here.
 * Chromium and Safari draw these from ::-webkit-scrollbar. Firefox only
 * knows the standard properties, and Chromium ignores the pseudo-elements
 * wherever those are set, so they go to Firefox alone. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(150, 196, 224, 0.04); }
::-webkit-scrollbar-thumb {
  background-color: rgba(150, 196, 224, 0.26);
  background-clip: padding-box;
  border: 3px solid transparent;
  min-height: 28px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--accent-rgb), 0.7); border-width: 2px; }
::-webkit-scrollbar-thumb:active { background-color: var(--accent); border-width: 2px; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(150, 196, 224, 0.3) rgba(150, 196, 224, 0.04); }
}

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(var(--accent-rgb), 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.12em;
  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; }

/* Developer accounts: the Settings line that stands in for the hidden email. */
.settings-dev { color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }

/* Developer accounts wear a tag under the handle (hidden for everyone else). */
.neocom-pilot-tag {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 3px;
  line-height: 1.3;
}
.neocom-pilot-tag[hidden] { display: none; }

.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;
}

/* The sidebar's list is narrow: a slimmer bar there. */
.neocom-scroll::-webkit-scrollbar { width: 6px; }
.neocom-scroll::-webkit-scrollbar-thumb { border-width: 1px; }

.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(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 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); }

/* Settings: a cog beside the clock, lit like a launcher while its window is
   open, and turning a little on hover. */
.neocom-cog {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.13s var(--ease), border-color 0.13s var(--ease), background 0.13s var(--ease);
}
.neocom-cog svg { transition: transform 0.3s var(--ease); }
.neocom-cog:hover,
.neocom-cog:focus-visible { color: var(--ink-bright); border-color: var(--line-strong); outline: none; }
.neocom-cog:hover svg { transform: rotate(45deg); }
.neocom-cog[aria-pressed="true"] { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); background: var(--accent-wash); }
.neocom .neocom-cog .neocom-badge { position: absolute; top: -4px; left: auto; right: -6px; }
.reduce-motion .neocom-cog svg { transition: none; }

.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);
}

.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);
}

.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;
  /* Opaque, unlike the pilot panel: windows stack, and at any translucency
     the text of the window behind ghosts through the one in front. */
  background: linear-gradient(180deg, #141f2a, #0a1016);
  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;
  /* The location code is read aloud and typed back in, so it gets a
     monospace face where 0/8 and B/8 are easy to tell apart. */
  font-family: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 1.08em;
  letter-spacing: 0.04em;
  color: var(--ink-bright);
}

/* --- 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-readout-band {
  color: var(--accent);
  letter-spacing: 0.16em;
}

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

/* Turns amber the moment a frame misses the budget, so a regression is
   visible rather than something you have to go measuring. */
.map-readout-fps[data-slow] { color: var(--amber); }

.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;
  z-index: 30; /* over the windows: a toast is often about one of them */
  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; }

/* ------------------------------------------------------------ map closed --
 * The map is opened and closed from its launcher (main.js, setMapOpen). Closed,
 * everything that belongs to it goes: the canvas, its overlay, and the system
 * view that grows out of it. Windows and toasts stay.
 */

.viewport.is-map-closed .starmap,
.viewport.is-map-closed .map-ui,
.viewport.is-map-closed .sysview,
.viewport.is-map-closed .stationview { display: none; }

.map-closed-hint {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  place-items: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.55;
  pointer-events: none;
}

.viewport.is-map-closed .map-closed-hint { display: grid; }

/* ---------------------------------------------------------- handle picker --
 * First visit: choose a handle (handlepicker.js). Covers the game area but not
 * the sidebar, so signing out stays reachable.
 */

.picker-overlay {
  position: absolute;
  inset: 0;
  z-index: 40; /* over windows and toasts' layer below the pilot panel */
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(3, 6, 10, 0.82);
  backdrop-filter: blur(2px);
}

.picker {
  display: grid;
  gap: 12px;
  width: min(440px, 100%);
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, #16222e, #0b131b);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.9);
}

.picker-kicker { margin: 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.picker-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--ink-bright); }
.picker-lede { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--ink); }

.picker-at {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.6);
  color: var(--ink-dim);
  font-size: 16px;
}

.picker-at:focus-within { border-color: var(--accent); }
.picker-at > span { padding: 0 2px 0 10px; }
.picker-at .win-input { border: 0; background: transparent; padding-left: 2px; font-size: 16px; }
.picker-ok { margin: 0; font-size: 12px; color: #7fd4a4; }
.settings-handle { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }

/* --------------------------------------------------------------- windows --
 * Floating windows over the map (windows.js): Comms, Alerts, Settings, and
 * whatever comes next. Same skin as the pilot panel — dark glass, a cyan edge,
 * one clipped corner — so everything that floats reads as one family. The
 * layer is click-through; only the windows themselves take the pointer.
 */

.win-layer {
  position: absolute;
  inset: 0;
  z-index: 20; /* over the map UI and the system view, under toasts and the pilot panel */
  pointer-events: none;
}

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 220px;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  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%);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
  color: var(--ink);
  pointer-events: auto;
  overflow: hidden;
  outline: none;
}

/* Resize grips (windows.js): a thin strip along each edge, a square at each
   corner, over the content. Thin enough to leave a body's scrollbar its
   thumb; the bottom-right corner shows two short lines, where the browser's
   own handle used to be. */
.win-grip { position: absolute; z-index: 3; touch-action: none; }
.win-grip.is-n { top: 0; left: 10px; right: 16px; height: 4px; cursor: ns-resize; }
.win-grip.is-s { bottom: 0; left: 10px; right: 14px; height: 5px; cursor: ns-resize; }
.win-grip.is-e { right: 0; top: 16px; bottom: 14px; width: 4px; cursor: ew-resize; }
.win-grip.is-w { left: 0; top: 10px; bottom: 10px; width: 5px; cursor: ew-resize; }
.win-grip.is-nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nwse-resize; }
.win-grip.is-ne { top: 0; right: 0; width: 18px; height: 18px; cursor: nesw-resize; }
.win-grip.is-sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: nesw-resize; }
.win-grip.is-se {
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 54%, var(--line-strong) 54%, var(--line-strong) 61%, transparent 61%,
      transparent 74%, var(--line-strong) 74%, var(--line-strong) 81%, transparent 81%);
}
.win-grip.is-se:hover,
.win.is-resizing .win-grip.is-se {
  background:
    linear-gradient(135deg, transparent 54%, var(--accent) 54%, var(--accent) 61%, transparent 61%,
      transparent 74%, var(--accent) 74%, var(--accent) 81%, transparent 81%);
}
.win.is-resizing { user-select: none; }

/* A structure the Factory Floor was asked to show (its menu's "Show on the
   Factory Floor"): lit up for a moment. */
@keyframes factory-flash {
  from { box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 0 999px rgba(var(--accent-rgb), 0.18); }
  to { box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 999px transparent; }
}
.factory-row.is-flash { animation: factory-flash 1.8s var(--ease); }

/* A corporation you gave a nickname (ui/corpnames.js): the nickname in its
   look, its real name after it, small and plain whatever the heading does. */
.corp-nick { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; flex-wrap: wrap; }
.corp-nick-real {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-dim);
  white-space: nowrap;
}

.win.is-front { border-left-color: var(--accent); }

/* "Window size" in Settings. Scaled from the top-left corner so dragging,
   which works in unscaled left/top, still lands where the pointer is. */
.win { transform: scale(var(--win-scale, 1)); transform-origin: 0 0; }

.win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 10px 6px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--accent-wash), transparent 75%);
  cursor: grab;
  touch-action: none; /* the bar is a drag handle, not a scroller */
  user-select: none;
}

.win.is-dragging .win-bar { cursor: grabbing; }

.win-title {
  flex: 1 1 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.win.is-front .win-title { color: var(--accent); }

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

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

.win-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

/* ---- shared controls */

.win-button {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  background: rgba(150, 196, 224, 0.04);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.win-button:hover:not(:disabled),
.win-button:focus-visible {
  border-color: var(--accent);
  color: var(--ink-bright);
  outline: none;
}

.win-button:disabled { opacity: 0.45; cursor: default; }

.win-button.is-primary {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: var(--accent-wash);
  color: var(--ink-bright);
}

.win-button.is-danger:hover:not(:disabled),
.win-button.is-danger:focus-visible {
  border-color: var(--danger);
  color: #ffd9cf;
}

.win-input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.6);
  color: var(--ink-bright);
  font: inherit;
  font-size: 14px;
}

.win-input:focus { border-color: var(--accent); outline: none; }

textarea.win-input { resize: vertical; line-height: 1.45; }

.win-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.win-field > span,
.settings-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.win-note,
.win-error {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
}

.win-error { color: #f0907a; }
.win-error[hidden] { display: none; }

.win-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  height: 100%;
  min-height: 140px;
  padding: 16px;
  text-align: center;
}

.win-empty p { margin: 0; max-width: 32ch; color: var(--ink-dim); line-height: 1.5; }

/* ---- Comms (also the frame Alerts uses) */

.comms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.comms-toolbar,
.comms-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.comms-toolbar[hidden] { display: none; }

.comms-spacer { flex: 1 1 auto; }

.comms-tab {
  padding: 5px 10px;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.comms-tab[aria-pressed="true"] { color: var(--ink-bright); border-bottom-color: var(--accent); }
.comms-tab:hover,
.comms-tab:focus-visible { color: var(--ink-bright); outline: none; }

.comms-pane { flex: 1 1 auto; min-height: 0; overflow: auto; }

.comms-list { list-style: none; margin: 0; padding: 0; }
.comms-list li + li { border-top: 1px solid var(--line); }

.comms-row,
.alerts-row {
  display: grid;
  width: 100%;
  padding: 8px 6px 8px 10px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.comms-row {
  grid-template-columns: 1fr auto;
  grid-template-areas: "who when" "subject subject" "snippet snippet";
  row-gap: 2px;
}

.comms-row:hover,
.comms-row:focus-visible,
.alerts-row:hover,
.alerts-row:focus-visible {
  background: rgba(150, 196, 224, 0.05);
  outline: none;
}

.comms-row.is-unread,
.alerts-row.is-unread { border-left-color: var(--accent); }

.comms-who { grid-area: who; color: var(--ink-bright); font-size: 13px; }
.comms-when { grid-area: when; color: var(--ink-dim); font-size: 11px; white-space: nowrap; }
.comms-subject { grid-area: subject; font-size: 14px; }
.comms-snippet {
  grid-area: snippet;
  color: var(--ink-dim);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.is-unread .comms-subject,
.is-unread .alerts-title { color: var(--ink-bright); font-weight: 600; }

.comms-message { display: flex; flex-direction: column; gap: 8px; }
.comms-message-subject { margin: 6px 0 0; font-size: 17px; font-weight: 600; color: var(--ink-bright); }
.comms-message-meta { margin: 0; font-size: 12px; color: var(--ink-dim); }
.comms-message-body {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  line-height: 1.55;
  white-space: pre-wrap;   /* the pilot's own line breaks, as written */
  overflow-wrap: anywhere; /* and a pasted 300-character token cannot widen the window */
}

.comms-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.win-field.is-grow { flex: 1 1 auto; }
.win-field.is-grow .win-input { flex: 1 1 auto; min-height: 120px; }

.comms-counter { font-size: 11px; color: var(--ink-dim); }

/* ---- Alerts and Patch Notes: two tabs of the Comms window */

.alerts-pane { display: flex; flex-direction: column; gap: 10px; }

/* ---- Alerts list */

.alerts-row {
  grid-template-columns: 22px 1fr auto;
  grid-template-areas: "glyph title when" "glyph text text";
  column-gap: 8px;
  row-gap: 2px;
  align-items: baseline;
}

.alerts-glyph { grid-area: glyph; color: var(--ink-dim); text-align: center; }
.alerts-row.is-unread .alerts-glyph { color: var(--accent); }
.alerts-row[data-kind="device"].is-unread .alerts-glyph { color: var(--amber); }
.alerts-row[data-kind="announcement"].is-unread .alerts-glyph { color: var(--amber); }
.alerts-title { grid-area: title; font-size: 14px; }
.alerts-text { grid-area: text; font-size: 12px; line-height: 1.45; color: var(--ink-dim); }

/* ---- Settings */

.settings { display: flex; flex-direction: column; gap: 16px; }
.settings-section { display: flex; flex-direction: column; gap: 14px; }

.settings-heading {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.settings-item { display: flex; flex-direction: column; gap: 6px; }
.settings-row { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-row .win-input { flex: 1 1 180px; width: auto; }
.settings-value { margin: 0; color: var(--ink-bright); overflow-wrap: anywhere; }

/* ---- Wallet: a bank account screen */

.wallet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-variant-numeric: tabular-nums; /* columns of money line up */
}

.wallet-card {
  display: grid;
  gap: 4px;
  padding: 16px 18px 14px;
  --acct: var(--accent);
  --acct-rgb: var(--accent-rgb);
  border: 1px solid rgba(var(--acct-rgb), 0.35);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--acct-rgb), 0.18), transparent 55%),
    linear-gradient(135deg, #16283a, #0c1620 70%);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.wallet-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wallet-bank { color: var(--accent); font-weight: 600; }
.wallet-product { color: var(--ink-dim); }
.wallet-holder { font-size: 15px; color: var(--ink-bright); }

.wallet-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.wallet-card .wallet-label { margin-top: 8px; }

.wallet-balance { display: flex; align-items: baseline; gap: 8px; }
.wallet-balance-value { font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--ink-bright); }
.wallet-unit { font-size: 14px; letter-spacing: 0.12em; color: var(--ink-dim); }

.wallet-card-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-dim);
}

.wallet-mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.wallet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.wallet-stat {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
}

.wallet-stat-value { font-size: 17px; }
.is-in { color: #7fd4a4; }
.is-out { color: var(--ink); }

.wallet-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.wallet-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.wallet-history-head .settings-heading { border-bottom: 0; padding-bottom: 0; }
.wallet-filters { display: flex; gap: 2px; }

.wallet-table { display: flex; flex-direction: column; }

.wallet-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 112px 112px;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}

.wallet-row.is-head {
  padding-top: 4px;
  border-top: 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: default;
}

.wallet-row.is-head + .wallet-line .wallet-row { border-top: 0; }
.wallet-row:not(.is-head):hover,
.wallet-row:not(.is-head):focus-visible { background: rgba(150, 196, 224, 0.05); outline: none; }
.wallet-row[aria-expanded="true"] { background: rgba(150, 196, 224, 0.04); }

.wallet-row .is-num { text-align: right; white-space: nowrap; }
.wallet-date { color: var(--ink-dim); font-size: 12px; white-space: nowrap; }
.wallet-desc { display: grid; min-width: 0; }
.wallet-desc > span:first-child { color: var(--ink-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-memo { font-size: 12px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-running { color: var(--ink-dim); }

.wallet-detail,
.wallet-review {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
}

.wallet-detail { padding: 4px 6px 12px 78px; }
.wallet-detail[hidden] { display: none; }
.wallet-detail dt,
.wallet-review dt { color: var(--ink-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; align-self: center; }
.wallet-detail dd,
.wallet-review dd { margin: 0; overflow-wrap: anywhere; }

.wallet-more { align-self: center; margin-top: 10px; }
.wallet-none { padding: 14px 6px; }

.wallet-form { display: flex; flex-direction: column; gap: 12px; }

.wallet-amount-input { font-size: 20px; font-variant-numeric: tabular-nums; }

.wallet-review { padding: 12px 14px; border: 1px solid var(--line); background: rgba(150, 196, 224, 0.03); }
.wallet-review-amount { margin: 0; font-size: 22px; font-weight: 600; color: var(--ink-bright); }

.wallet-receipt { display: grid; justify-items: center; gap: 4px; padding: 8px 0 4px; text-align: center; }
.wallet-receipt-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(127, 212, 164, 0.6);
  border-radius: 50%;
  color: #7fd4a4;
  font-size: 22px;
}
.wallet-receipt-title { margin: 6px 0 0; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }

.wallet-hero {
  display: grid;
  gap: 4px;
  padding: 14px 18px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    linear-gradient(135deg, #16283a, #0c1620 70%);
}

.wallet-hero .wallet-card-top { margin-bottom: 8px; }
.wallet-hero .wallet-product { text-transform: none; letter-spacing: 0.04em; font-size: 13px; color: var(--ink); }

.wallet-badge {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: 2px;
}

.wallet-accounts { list-style: none; margin: -4px 0 0; padding: 0; display: grid; gap: 6px; }

.wallet-account {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "mark name balance" "mark sub balance";
  column-gap: 12px;
  align-items: center;
  width: 100%;
  padding: 11px 14px 11px 10px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  background: rgba(150, 196, 224, 0.03);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wallet-account:hover,
.wallet-account:focus-within { border-left-color: var(--accent); background: rgba(150, 196, 224, 0.06); }

/* The account name: a button for the keyboard, styled as plain text. */
.wallet-account-open {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wallet-account-open:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.wallet-account-mark {
  grid-area: mark;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(var(--acct-rgb, var(--accent-rgb)), 0.45);
  background: rgba(var(--acct-rgb, var(--accent-rgb)), 0.1);
  color: var(--acct, var(--accent));
  font-size: 15px;
}

/* An account's colour (wallet-style.js) tints its tile's edge too. */
.wallet-account { --acct: var(--accent); --acct-rgb: var(--accent-rgb); }
.wallet-account:hover { border-color: rgba(var(--acct-rgb), 0.5); }
.wallet-account.is-preview { cursor: default; pointer-events: none; }

/* Choosing an account's look (wallet.js, styleForm). */
.wallet-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.wallet-swatch {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
  color: var(--ink);
  cursor: pointer;
}
.wallet-swatch:hover { border-color: var(--line-strong); color: var(--ink-bright); }
.wallet-swatch[aria-checked="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--ink-bright); }
.wallet-swatch:focus-visible { outline: 1px solid var(--accent); }
.wallet-swatch-color { position: relative; color: var(--acct); }
.wallet-swatch-color::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--acct);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}
.wallet-swatch-color[aria-checked="true"] { border-color: var(--acct); background: rgba(var(--acct-rgb), 0.15); }
.wallet-swatch-name { font-size: 13px; font-weight: 600; color: var(--acct, var(--ink-bright)); }
.wallet-swatch-name.is-plain { color: var(--ink-bright); }
.wallet-swatch-name[aria-checked="true"] { border-color: var(--acct, var(--accent)); background: rgba(150, 196, 224, 0.08); }
.wallet-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.wallet-font {
  grid-template-columns: 1fr;
  grid-template-areas: "sample" "label" "note";
  row-gap: 2px;
}
.wallet-font-sample {
  grid-area: sample;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  color: var(--ink-bright);
}
.wallet-account-name {
  grid-area: name;
  display: flex;
  flex-wrap: wrap; /* the Primary badge drops below the name on a narrow screen */
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  color: var(--ink-bright);
  font-size: 15px;
}

.wallet-account-name .wallet-badge { margin-left: 0; }
.wallet-account-sub { grid-area: sub; color: var(--ink-dim); font-size: 12px; }
.wallet-account-balance { grid-area: balance; display: grid; justify-items: end; }
.wallet-account-amount { font-size: 17px; color: var(--ink-bright); }
.wallet-account-avail { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }

.wallet-recent {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}

.wallet-recent:first-child { border-top: 0; }
.wallet-recent:hover,
.wallet-recent:focus-visible { background: rgba(150, 196, 224, 0.05); outline: none; }
.wallet-recent .is-num { text-align: right; white-space: nowrap; }

.wallet-back {
  align-self: flex-start;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.wallet-back:hover,
.wallet-back:focus-visible { color: var(--ink-bright); outline: none; }

.wallet-manage { display: grid; gap: 6px; }
.wallet-hint { font-size: 12px; color: var(--ink-dim); text-transform: none; letter-spacing: 0; }
/* Beats `.win-field > span`, which would set a hint in small capitals. */
.win-field > .wallet-hint { font-size: 12px; letter-spacing: 0; text-transform: none; }
.win-field[hidden] { display: none; }
.wallet-modes { align-self: flex-start; }

.wallet-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.wallet-type {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas: "mark label" "mark note";
  column-gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wallet-type .wallet-account-mark { grid-area: mark; }
.wallet-type-label { grid-area: label; color: var(--ink-bright); }
.wallet-type .wallet-hint { grid-area: note; }
.wallet-type[aria-checked="true"] { border-color: var(--accent); background: var(--accent-wash); }
.wallet-type:focus-visible { outline: 1px solid var(--accent); }

.wallet-group { display: flex; flex-direction: column; gap: 8px; }

.wallet-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.wallet-group-head .settings-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: 0;
}

.wallet-group[data-kind="corporation"] .settings-heading { color: var(--ink-bright); }
.wallet-group-total { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-group .wallet-accounts { margin: 0; }

/* The overview: one tile per group (Personal, each corporation), each with
   its total. Clicking one opens its accounts. */
.wallet-categories { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.wallet-category {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 14px;
  grid-template-areas: "mark name balance go" "mark sub balance go";
  column-gap: 12px;
  row-gap: 1px;
  align-items: center;
  width: 100%;
  padding: 12px 12px 12px 10px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  background: rgba(150, 196, 224, 0.03);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wallet-category[data-kind="corporation"] { border-left-color: rgba(224, 168, 60, 0.55); }
.wallet-category:hover,
.wallet-category:focus-visible { border-left-color: var(--accent); background: rgba(150, 196, 224, 0.06); outline: none; }

.wallet-category-mark {
  grid-area: mark;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: var(--accent-wash);
  color: var(--accent);
}

.wallet-category-mark svg { width: 20px; height: 20px; }
.wallet-category-mark.is-corp {
  border-color: rgba(224, 168, 60, 0.55);
  background: rgba(224, 168, 60, 0.08);
  color: var(--amber);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.wallet-category-name { grid-area: name; min-width: 0; overflow: hidden; font-size: 15px; color: var(--ink-bright); text-overflow: ellipsis; white-space: nowrap; }
.wallet-category-sub { grid-area: sub; font-size: 12px; color: var(--ink-dim); }
.wallet-category .wallet-account-balance { grid-area: balance; }
.wallet-category-go { grid-area: go; color: var(--ink-dim); font-size: 18px; }
.wallet-category:hover .wallet-category-go { color: var(--accent); }

.wallet-ticker {
  padding: 1px 6px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.wallet-add {
  align-self: flex-start;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.wallet-add:hover,
.wallet-add:focus-visible { color: var(--accent); outline: none; }

.wallet-holder { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.wallet-holder .wallet-badge { margin-left: 0; }
.wallet-holder .wallet-account-mark { width: 26px; height: 26px; }
.wallet-holder .wallet-account-mark svg { width: 15px; height: 15px; }

.wallet-edit {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  vertical-align: middle;
}

.wallet-edit[hidden] { display: none; }

.wallet-edit:hover,
.wallet-edit:focus-visible { color: var(--accent); border-color: var(--line-strong); outline: none; }

/* A name being renamed: a text box the size of the name it replaced. */
.wallet-name-input {
  min-width: 0;
  width: min(100%, 22ch);
  padding: 2px 6px;
  border: 1px solid var(--accent);
  background: rgba(5, 8, 12, 0.7);
  color: var(--ink-bright);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  outline: none;
}

.wallet-name-input:invalid { border-color: var(--danger); }
.wallet-card-name { font-size: 15px; }

.wallet-ticker-input { text-transform: uppercase; letter-spacing: 0.14em; max-width: 140px; }

/* Hovering an account on the overview: its latest transactions, in a panel
   on <body> beside it (wallet.js, showPreview), over every window. */
.wallet-preview {
  position: fixed;
  z-index: 75;
  width: 440px;
  max-width: calc(100vw - 16px);
  padding: 10px 12px 8px;
  background: linear-gradient(180deg, #16222e, #0b131b);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.85);
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  pointer-events: none; /* a preview, not a place to click */
}

.wallet-preview[hidden] { display: none; }

.wallet-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}

.wallet-preview-title { color: var(--ink-bright); font-weight: 600; }
.wallet-preview-sub { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }

.wallet-preview-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 92px;
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid var(--line);
}

.wallet-preview-row:first-child { border-top: 0; }
.wallet-preview-row .is-num { text-align: right; white-space: nowrap; }
.wallet-preview .wallet-desc > span:first-child { font-size: 13px; }
.wallet-preview-foot { margin: 6px 0 0; font-size: 11px; color: var(--ink-dim); }

select.win-input { appearance: auto; }

@media (max-width: 720px) {
  .wallet-row { grid-template-columns: 52px minmax(0, 1fr) 96px; }
  .wallet-recent { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .wallet-types { grid-template-columns: 1fr; }
  .wallet-running,
  .wallet-row.is-head > :last-child { display: none; }
  .wallet-detail { padding-left: 6px; }
}

/* ---- Corporations */

.corps { display: flex; flex-direction: column; gap: 12px; }
.corps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.corps-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  background: rgba(150, 196, 224, 0.03);
}

.corps-head { display: flex; align-items: baseline; gap: 10px; }
.corps-name { font-size: 16px; color: var(--ink-bright); }

.corps-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.corps-facts dt { color: var(--ink-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; align-self: center; }
.corps-facts dd { margin: 0; }

.corps-dissolve {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(210, 86, 63, 0.45);
  background: rgba(210, 86, 63, 0.06);
}

.corps-warning { margin: 0; color: #f0907a; font-weight: 600; }
.corps-consequences { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.win-button.is-danger:not(:disabled) { border-color: rgba(210, 86, 63, 0.55); }
/* A destructive button clicked once, waiting for the second click. */
.win-button.is-armed:not(:disabled) { border-color: var(--danger); background: rgba(210, 86, 63, 0.14); color: #ffd9cf; }

/* The list: invitations, then corporations as cards that open. A narrow
   window stacks the Roles tab, so the window is a size container. */
.corps { container-type: inline-size; }
.corps-section { display: flex; flex-direction: column; gap: 10px; }
.corps-empty { height: auto; min-height: 200px; }
.corps-card.is-invite { border-left-color: var(--accent); }

.corps-card.is-link {
  width: 100%;
  gap: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.corps-card.is-link:hover,
.corps-card.is-link:focus-visible { border-left-color: var(--accent); background: rgba(150, 196, 224, 0.06); outline: none; }
.corps-go { margin-left: auto; color: var(--ink-dim); font-size: 18px; line-height: 1; }
.corps-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; color: var(--ink-dim); }
.corps-card-meta .is-num { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* A role's colour comes in as --role; no colour reads as plain ink. */
.corps-standing { display: inline-flex; align-items: center; gap: 5px; color: var(--role, var(--ink)); }
.corps-standing.is-owner { color: var(--amber); }
.corps-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--role, var(--ink-dim)); }
.corps-crown { width: 13px; height: 13px; flex: 0 0 auto; fill: var(--amber); vertical-align: -1px; }

/* One corporation: title, tabs, then the tab. */
.corps-title { display: flex; align-items: baseline; gap: 10px; }
.corps-title-name { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink-bright); }
.corps-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.corps-pane { display: flex; flex-direction: column; gap: 14px; }
.corps-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.corps-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.corps-link:hover,
.corps-link:focus-visible { color: var(--ink-bright); outline: none; }

.corps-can { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.corps-can li { display: grid; gap: 1px; padding-left: 10px; border-left: 2px solid rgba(var(--accent-rgb), 0.45); }
.corps-can-label { font-size: 14px; color: var(--ink-bright); }

/* Role pills, Discord-style: a dot in the role's colour and its name. */
.corps-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }

.corps-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--role, var(--ink-dim)) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--role, var(--ink-dim)) 10%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.corps-pill.is-owner { border-color: rgba(224, 168, 60, 0.55); background: rgba(224, 168, 60, 0.08); color: var(--amber); }

.corps-pill-x {
  margin: 0 -3px 0 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.corps-pill-x:hover,
.corps-pill-x:focus-visible { color: #f0907a; outline: none; }

.corps-pill-add { width: 24px; justify-content: center; padding: 1px 0; border-style: dashed; color: var(--ink-dim); cursor: pointer; }
.corps-pill-add:hover,
.corps-pill-add:focus-visible { color: var(--ink-bright); border-color: var(--accent); outline: none; }

/* Members: grouped under their highest role, like Discord's member list. */
.corps-toolbar { flex-wrap: nowrap; }
.corps-toolbar .win-button { flex: 0 0 auto; white-space: nowrap; }
.corps-filter { flex: 1 1 auto; min-width: 0; }
.corps-members { display: flex; flex-direction: column; gap: 12px; }
.corps-group { display: flex; flex-direction: column; gap: 4px; }

.corps-group-head {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--role, var(--ink-dim));
}

.corps-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.corps-member {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, auto) 28px;
  align-items: center;
  column-gap: 10px;
  padding: 6px 6px 6px 8px;
  border: 1px solid transparent;
  background: rgba(150, 196, 224, 0.03);
}

.corps-member:hover,
.corps-member:focus-within { border-color: var(--line); background: rgba(150, 196, 224, 0.06); }
.corps-member.is-compact { grid-template-columns: 34px minmax(0, 1fr) 28px; }
.corps-member .corps-pills { justify-content: flex-end; }

.corps-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--role, var(--ink-dim)) 60%, transparent);
  background: color-mix(in srgb, var(--role, var(--ink-dim)) 18%, #0c141c);
  color: var(--ink-bright);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.corps-member-main { display: grid; min-width: 0; }
.corps-member-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; font-size: 14px; color: var(--ink-bright); white-space: nowrap; }
.corps-member-handle { overflow: hidden; font-size: 12px; color: var(--ink-dim); text-overflow: ellipsis; white-space: nowrap; }

.corps-you {
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.corps-more {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

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

.corps-member-wrap { display: grid; gap: 0; }
.corps-member.is-confirming { border-color: rgba(210, 86, 63, 0.45); }

.corps-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(210, 86, 63, 0.45);
  border-top: 0;
  background: rgba(210, 86, 63, 0.06);
  font-size: 13px;
}

.corps-tip { margin-top: -4px; }

.corps-invite { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid rgba(var(--accent-rgb), 0.35); background: var(--accent-wash); }
.corps-invite-row { display: flex; gap: 6px; }
.corps-invite-row .win-input { flex: 1 1 auto; min-width: 0; }
.corps-invite-row .win-button { flex: 0 0 auto; }

.corps-invited {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 10px;
  border-left: 2px dashed var(--line-strong);
  background: rgba(150, 196, 224, 0.03);
}

.corps-invited-who { color: var(--ink-bright); font-size: 14px; white-space: nowrap; }

/* Roles: the list on the left, the chosen role's editor on the right. */
.corps-roles { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.corps-role-list { display: flex; flex-direction: column; gap: 8px; }
.corps-role-list > .win-button { align-self: stretch; }
.corps-roles-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.corps-role {
  display: grid;
  grid-template-columns: 14px 8px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.corps-role:hover,
.corps-role:focus-visible { background: rgba(150, 196, 224, 0.05); outline: none; }
.corps-role.is-selected { border-left-color: var(--role, var(--accent)); background: rgba(150, 196, 224, 0.08); color: var(--ink-bright); }
.corps-role.is-dragging { opacity: 0.4; }
.corps-role.is-drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.corps-role.is-drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.corps-role[draggable="true"] { cursor: grab; }
.corps-role-name { min-width: 0; overflow: hidden; color: var(--role, inherit); text-overflow: ellipsis; white-space: nowrap; }
.corps-role-count { font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.corps-grip { color: var(--ink-dim); font-size: 11px; letter-spacing: -0.2em; }
svg.corps-grip { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.7; }

.corps-role-editor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.corps-role-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--role, var(--ink-bright)); }
.corps-role-title .win-note { margin-left: auto; font-weight: 400; }
.corps-subtabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.corps-lock { padding: 6px 10px; border-left: 2px solid var(--amber); background: rgba(224, 168, 60, 0.06); color: var(--ink); }
.corps-role-pane { display: flex; flex-direction: column; gap: 12px; }
.corps-role-delete { padding-top: 6px; border-top: 1px solid var(--line); }
.corps-perm-group { display: flex; flex-direction: column; }
.corps-perm-group + .corps-perm-group { margin-top: 8px; }
.corps-perm-group .corps-group-head { padding-bottom: 4px; }
.corps-perm.is-danger .settings-pref-label { color: #f0b0a0; }
.corps-perm-lack { color: var(--amber); }
.corps-perm .settings-switch:disabled { opacity: 0.4; cursor: not-allowed; }
.corps-add-member { flex: 1 1 auto; }

.corps-swatches { display: flex; flex-wrap: wrap; gap: 6px; }

.corps-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--role);
  cursor: pointer;
}

.corps-swatch.is-none { background: linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%), rgba(5, 8, 12, 0.6); }
.corps-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--ink-bright); }
.corps-swatch:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.corps-swatch:disabled { opacity: 0.4; cursor: not-allowed; }

/* Discord's "unsaved changes" bar, stuck to the bottom of the window. */
.corps-savebar {
  position: sticky;
  /* Flush with the window's bottom edge, past the body's own padding. */
  bottom: -12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: #0f1d29;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  color: var(--ink-bright);
}

.corps-savebar[hidden] { display: none; }

@container (max-width: 560px) {
  .corps-roles { grid-template-columns: minmax(0, 1fr); }
  .corps-member { grid-template-columns: 34px minmax(0, 1fr) 28px; }
  .corps-member .corps-pills { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; padding-top: 4px; }
  .corps-member .corps-more { grid-column: 3; grid-row: 1; }
  .corps-invited { grid-template-columns: minmax(0, 1fr) auto; }
  .corps-invited .win-note { grid-column: 1; grid-row: 2; }
  .corps-invited .win-button { grid-row: 1 / 3; grid-column: 2; }
}

/* ---- The game's own right-click menu (contextmenu.js), over everything. */

.ctx-menu {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  max-width: 280px;
  max-height: calc(100vh - 12px);
  overflow: auto;
  padding: 5px;
  border: 1px solid var(--line-strong);
  background: #0b131b;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  font-size: 13px;
}

.ctx-menu:focus { outline: none; }

.ctx-heading {
  padding: 5px 8px 4px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-dim);
}

.ctx-sep { height: 1px; margin: 4px 2px; background: var(--line); }

.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ctx-item:hover:not(:disabled),
.ctx-item:focus-visible { background: var(--accent-wash); color: var(--ink-bright); outline: none; }
.ctx-item:focus:not(:focus-visible) { outline: none; }
.ctx-item:disabled { opacity: 0.4; cursor: default; }
.ctx-item.is-danger { color: #f0907a; }
.ctx-item.is-danger:hover:not(:disabled),
.ctx-item.is-danger:focus-visible { background: rgba(210, 86, 63, 0.16); color: #ffd9cf; }
.ctx-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A few dim words at the end of a line: "Soon", or a shortcut. */
.ctx-note { margin-left: auto; padding-left: 14px; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-dim); white-space: nowrap; }
.ctx-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ctx-color); }

.ctx-box {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.6);
}

.ctx-item[aria-checked="true"] .ctx-box { border-color: var(--accent); background: var(--accent); }
/* One of a set (menuitemradio): a ring, filled with a dot when chosen. */
.ctx-item.is-radio .ctx-box { border-radius: 50%; }
.ctx-item.is-radio[aria-checked="true"] .ctx-box { background: rgba(5, 8, 12, 0.6); }
.ctx-item.is-radio[aria-checked="true"] .ctx-box::after {
  left: 3px;
  top: 3px;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  transform: none;
}
.ctx-item[aria-checked="true"] .ctx-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--void);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- Logistics, after Factorio's space-platform hub: panels of item slots */

.flog { display: flex; flex-direction: column; gap: 10px; }

.flog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
}

.flog-head-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.flog-head-name { font-size: 15px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-bright); }
.flog-picker { flex: 1 1 auto; min-width: 0; }

.flog-panels { display: grid; gap: 10px; transition: opacity 0.15s; }
.flog.has-dialog .flog-panels { opacity: 0.3; pointer-events: none; }

/* A frame: a title strip over an inset well of slots. */
.flog-panel {
  display: grid;
  gap: 8px;
  padding: 8px 10px 10px;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
}

.flog-panel.is-paused .fgrid { opacity: 0.5; }
.flog-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.flog-panel-head h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 44px);
  gap: 4px;
  padding: 6px;
  background: rgba(2, 4, 6, 0.75);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(150, 196, 224, 0.06);
}

/* One slot: an item, its number in the corner, a bar for how full. */
.fslot {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(150, 196, 224, 0.16);
  background: linear-gradient(180deg, #121c26, #0b131a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -2px 4px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.fslot:hover,
.fslot:focus-visible { border-color: var(--accent); background: linear-gradient(180deg, #16303d, #0d1b24); outline: none; }

.fslot.is-empty {
  cursor: default;
  border-color: rgba(150, 196, 224, 0.07);
  background: rgba(10, 16, 22, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.fslot.is-add {
  border-style: dashed;
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}

.fslot .item-icon { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }

.fslot-count {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
  pointer-events: none;
}

.fslot:has(.fslot-bar) .fslot-count { bottom: 6px; }
.fslot-bar { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 3px; background: rgba(0, 0, 0, 0.65); }
.fslot-bar i { display: block; height: 100%; background: var(--accent); transition: width 0.4s linear; }

/* How a slot is doing: green filled (or waiting for its low point), yellow
   filling, red short with nothing to fill it. */
.fslot { --slot-ok: #5fd17a; --slot-fill: #e9c94c; --slot-bad: #e0564a; }
.fslot.is-full,
.fslot.is-waiting,
.fslot.is-selling { border-color: rgba(95, 209, 122, 0.6); }
.fslot.is-full .fslot-bar i,
.fslot.is-waiting .fslot-bar i,
.fslot.is-selling .fslot-bar i { background: var(--slot-ok); }
.fslot.is-filling { border-color: rgba(233, 201, 76, 0.65); }
.fslot.is-filling .fslot-bar i { background: var(--slot-fill); }
.fslot.is-blocked,
.fslot.is-idle { border-color: rgba(224, 86, 74, 0.75); box-shadow: inset 0 0 0 1px rgba(224, 86, 74, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.45); }
.fslot.is-blocked .fslot-bar i,
.fslot.is-idle .fslot-bar i { background: var(--slot-bad); }
/* Waiting for a low point: green, but dashed, since nothing is wanted yet. */
.fslot.is-waiting { border-style: dashed; }
.fslot.is-off { opacity: 0.6; }
.fslot.is-idle .fslot-count { color: var(--ink-dim); }

/* Dragging a slot to a new place. */
.fslot.is-movable { touch-action: none; }
.fslot.is-dragging { opacity: 0.3; }
.flog-panels.is-dragging .fslot:hover { border-color: rgba(150, 196, 224, 0.16); background: linear-gradient(180deg, #121c26, #0b131a); }
.fslot-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.9;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
}
.fslot.is-drop-before::before,
.fslot.is-drop-after::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
}
.fslot.is-drop-before::before { left: -4px; }
.fslot.is-drop-after::after { right: -4px; }
.fgrid.is-drop-end { box-shadow: inset 0 0 0 1px var(--accent); }

/* A slot that starts a new line (src/rows.js); the empty slots before it are
   added by the window, this only makes sure it is first in its row. */
.fslot.is-line { grid-column-start: 1; }

/* While a slot is dragged, a row under each well it can go in: drop it there
   to start a new line. */
.fgrid-newline {
  display: none;
  grid-column: 1 / -1;
  place-items: center;
  height: 44px;
  border: 1px dashed var(--line-strong);
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  pointer-events: auto;
}
.flog-panels[data-drag-kind="stock"] .fgrid[data-drop-kind="stock"] .fgrid-newline,
.flog-panels[data-drag-kind="request"] .fgrid[data-drop-kind="request"] .fgrid-newline,
.flog-panels[data-drag-kind="export"] .fgrid[data-drop-kind="export"] .fgrid-newline { display: grid; }
.fgrid-newline.is-drop-here { border-color: var(--accent); border-style: solid; color: var(--ink-bright); background: rgba(var(--accent-rgb), 0.1); }

/* Groups of requests or exports, after Factorio's logistic sections. */
.flog-group { display: grid; gap: 6px; padding: 6px 8px 8px; border: 1px solid var(--line); background: rgba(2, 4, 6, 0.25); }
.flog-group.is-paused .fgrid { opacity: 0.5; }
.flog-group-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.flog-group-name { font-size: 14px; font-weight: 600; color: var(--ink-bright); }
.flog-group-count { font-size: 11px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flog-group-more { flex: 0 0 auto; }
.flog-switch.is-small .flog-switch-text { display: none; }
.flog-add-group { justify-self: start; }
/* "Only start buying when stock is below [ n ]": across the whole box, the
   tick right beside its words, the number after them. */
.flog-below { grid-column: 1 / -1; display: grid; gap: 4px; }
.flog-below-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.flog-below-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.flog-below-label input { flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.flog-below-input { width: 110px; }
.flog-below-note { margin: 0 0 0 21px; }

/* Tier, marked like Factorio's quality: a pip in an icon's corner. */
.item-tier.is-t2 { fill: var(--t2); }
.item-tier.is-t3 { fill: var(--t3); }

.flog-info { min-height: 1.4em; margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-dim); }

/* On or off for a whole panel. */
.flog-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--ink-dim);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.flog-switch-knob { position: relative; width: 28px; height: 14px; border-radius: 7px; background: rgba(150, 196, 224, 0.18); transition: background 0.15s; }

.flog-switch-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 0.15s, background 0.15s;
}

.flog-switch[aria-checked="true"] { color: var(--accent); }
.flog-switch[aria-checked="true"] .flog-switch-knob { background: rgba(var(--accent-rgb), 0.45); }
.flog-switch[aria-checked="true"] .flog-switch-knob::after { transform: translateX(14px); background: var(--ink-bright); }
.flog-switch:focus-visible { outline: 1px solid var(--accent); }

/* Adding or changing a request or an export. */
.flog-dialog-layer[hidden] { display: none; }

.flog-dialog {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  background: linear-gradient(180deg, rgb(22, 34, 46), rgb(12, 19, 26));
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9);
}

.flog-dialog-head { display: flex; align-items: center; gap: 10px; }
.flog-dialog-head h4 { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-bright); }

.flog-dialog-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-strong);
  background: rgba(2, 4, 6, 0.7);
}

.flog-dialog-title { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.flog-dialog-sub { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }

.flog-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }

.flog-tab {
  margin-bottom: -1px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-top-width: 2px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.flog-tab:hover,
.flog-tab:focus-visible { color: var(--ink-bright); outline: none; }
.flog-tab.is-on { border-color: var(--line); border-bottom-color: transparent; background: rgba(var(--accent-rgb), 0.06); color: var(--ink-bright); }
.flog-tab { display: inline-flex; align-items: center; gap: 7px; }
.flog-tab.is-on { border-top-color: var(--accent); }
.flog-tabs.is-searching .flog-tab { opacity: 0.6; }

/* The item picker: search, a tab per category, a shelf per subgroup. */
.flog-search { width: 100%; }
.flog-shelves { display: grid; gap: 10px; max-height: min(52vh, 460px); overflow-y: auto; padding-right: 2px; }
.flog-shelf { display: grid; gap: 5px; }
.flog-shelf-name {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.flog-picks-none { margin: 6px 0; }

.flog-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }

.flog-pick {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  background: rgba(2, 4, 6, 0.5);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.flog-pick:hover:not(:disabled),
.flog-pick:focus-visible { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); outline: none; }
.flog-pick:disabled { opacity: 0.4; cursor: default; }
.flog-pick.is-here { border-color: rgba(var(--accent-rgb), 0.45); }
.flog-pick-name { font-size: 12px; color: var(--ink-bright); }
.flog-pick-tier { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.flog-pick-tier.is-t1 { color: var(--t1); }
.flog-pick-tier.is-t2 { color: var(--t2); }
.flog-pick-tier.is-t3 { color: var(--t3); }
.flog-pick-note { min-height: 1.2em; font-size: 10px; letter-spacing: 0.06em; color: var(--accent); }
.flog-pick:disabled .flog-pick-note { color: var(--ink-dim); }

.flog-amount-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: 10px; }
.flog-slider { width: 100%; accent-color: var(--accent); }

.flog-sources { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }

.flog-sources legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.flog-source { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(2, 4, 6, 0.4); }
.flog-source.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.06); }
.flog-source.is-disabled { opacity: 0.55; }
.flog-source-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.flog-source.is-disabled .flog-source-label { cursor: default; }
.flog-source-label input { margin: 0; accent-color: var(--accent); }
.flog-source-title { font-size: 14px; color: var(--ink-bright); }
.flog-source-detail { margin: 0 0 0 22px; font-size: 12px; line-height: 1.4; color: var(--ink-dim); }
.flog-source-extra { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px 10px; margin: 4px 0 0 22px; }
.flog-both { color: var(--accent); }

/* "Sell excess" on an export: keep the station's full level, sell the rest. */
.flog-excess { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(2, 4, 6, 0.4); }
.flog-excess.is-on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.06); }
.flog-excess-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; cursor: pointer; }
.flog-excess-label input { align-self: center; margin: 0; accent-color: var(--accent); }
.flog-excess-title { font-size: 14px; color: var(--ink-bright); }
.flog-excess-sub { font-size: 12px; color: var(--ink-dim); }
.flog-source-detail.is-warn { color: var(--amber); }

@media (max-width: 720px) {
  .flog-source-extra { grid-template-columns: 1fr; }
  .flog-amount-row { grid-template-columns: minmax(0, 1fr) 90px; }
}

/* ---- Factory Floor: the building menu, then everything you have built */

.factory { display: flex; flex-direction: column; gap: 10px; }

/* Which system Place puts things in, or how to open one. */
.factory-where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  background: rgba(150, 196, 224, 0.03);
}

.factory-where.is-open { border-left-color: var(--accent); background: var(--accent-wash); }
.factory-where .win-note { flex: 1 1 200px; }
.factory-where-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.factory-where-name { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-bright); }

.factory-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.factory-count { margin-left: auto; font-weight: 400; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

.factory-menu,
.factory-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.factory-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  background: rgba(150, 196, 224, 0.03);
}

.factory-item.is-placing { border-left-color: var(--accent); background: var(--accent-wash); }

/* A machine goes in a station's slot: which station, and Build, under its
   description rather than beside it. */
.factory-item.is-machine { grid-template-columns: auto minmax(0, 1fr); }
.factory-machine-build { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.factory-machine-build .factory-station-pick { flex: 1 1 180px; min-width: 0; }
.factory-machine-build .factory-row-where,
.factory-machine-build .factory-rule { flex: 1 1 160px; }
.factory-machine-build .win-button { margin-left: auto; }

/* A station's build slots under it, each a way in. */
.factory-row.is-station { padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.factory-row.is-station:last-child { border-bottom: 0; }
.factory-row.is-station { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.factory-slots li { display: contents; }
.factory-slot { font: inherit; font-size: 12px; cursor: pointer; }
.factory-slot:hover,
.factory-slot:focus-visible { border-color: var(--accent); outline: none; }
.factory-slot .item-icon { flex: none; }
.factory-slot svg:not(.item-icon) { flex: none; color: var(--ink-dim); }
.factory-slot.is-working { border-color: rgba(95, 209, 122, 0.5); }
.factory-slot.is-working svg:not(.item-icon) { color: #5fd17a; }
.factory-slot.is-waiting { border-color: rgba(233, 201, 76, 0.55); }
.factory-slot.is-waiting svg:not(.item-icon) { color: #e9c94c; }
.factory-slot.is-full { border-color: rgba(var(--accent-rgb), 0.55); }
.factory-slot.is-off,
.factory-slot.is-idle { opacity: 0.65; }
.factory-slot.is-empty { border-style: dashed; color: var(--ink-dim); }
.factory-slot-num {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px dashed var(--line-strong);
  font-size: 10px;
}

.factory-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.6);
  color: var(--accent);
}

.factory-icon.is-small { width: 30px; height: 30px; }

.factory-text { display: grid; gap: 2px; min-width: 0; }
.factory-name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-bright); }
.factory-blurb { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.factory-rule { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-dim); }

/* Tiers wear the star map's tier colours. */
.factory-tier {
  padding: 0 5px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 15px;
  color: var(--t1);
}

.factory-tier[data-tier="0"] { color: var(--ink-dim); }
.factory-tier[data-tier="2"] { color: var(--t2); }
.factory-tier[data-tier="3"] { color: var(--t3); }

/* What a building costs: credits, or materials as icon chips. */
.factory-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; font-size: 12px; color: var(--ink); }
.factory-cost-label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.factory-cost-credits { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-bright); }
.factory-cost-item { display: inline-flex; align-items: center; gap: 3px; }
.factory-cost-item b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-bright); }
.factory-cost-from { flex-basis: 100%; font-size: 11px; color: var(--ink-dim); }

/* A tier its research has not unlocked: dimmed, with the way to it. */
.factory-item.is-locked { border-left-style: dashed; background: rgba(5, 8, 12, 0.35); }
.factory-item.is-locked .factory-icon { color: var(--ink-dim); border-style: dashed; }
.factory-item.is-locked .factory-blurb { color: var(--ink-dim); }
.factory-lock { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--amber); }

/* Once the next tier is researched: upgrading one of your buildings. */
.factory-upgrade {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-left: 38px;
  padding: 5px 8px;
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.04);
  font-size: 12px;
}
.factory-upgrade.is-armed { border-style: solid; background: var(--accent-wash); }
.factory-upgrade-label { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.factory-upgrade-cost { flex: 1 1 140px; color: var(--ink); }
.factory-upgrade .win-button { padding-top: 3px; padding-bottom: 3px; }
.factory-slot.is-done { border-color: rgba(var(--accent-rgb), 0.55); }

.factory-built { display: grid; gap: 14px; }
.factory-group { display: grid; gap: 6px; }

.factory-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.factory-system { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-bright); overflow-wrap: anywhere; }
.factory-here { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

.factory-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

/* A miner has a Split button too, and what it gathers underneath. */
.factory-row.is-miner { grid-template-columns: auto minmax(0, 1fr) auto auto auto; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.factory-row.is-miner:last-child { border-bottom: 0; }

/* The two main categories, Miners and Space stations, each folding shut. */
.factory-category { display: grid; gap: 10px; }
.factory-category[open] { padding-bottom: 4px; }
.factory-category-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  cursor: pointer;
  list-style: none;
}
.factory-category-head::-webkit-details-marker { display: none; }
.factory-category-head::after { content: "▾"; margin-left: auto; color: var(--ink-dim); transition: transform 150ms var(--ease); }
.factory-category:not([open]) .factory-category-head::after { transform: rotate(-90deg); }
.factory-category-head:focus-visible { outline: 1px solid var(--accent); }
.factory-category-title { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-bright); }
.factory-category-count {
  min-width: 20px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  text-align: center;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.factory-category-sub { font-size: 12px; color: var(--ink-dim); }

/* What a miner is gathering: a chip per resource with its share and rate. */
.factory-gather { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 0 0 38px; list-style: none; }
.factory-gather.is-empty { font-size: 12px; color: var(--ink-dim); }
.factory-gather-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 4px;
  border: 1px solid var(--line);
  background: rgba(2, 4, 6, 0.45);
  font-size: 12px;
  color: var(--ink);
}
.factory-gather-item.is-off { opacity: 0.5; }
.factory-gather-share { color: var(--ink-bright); font-variant-numeric: tabular-nums; }
.factory-gather-rate { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.factory-split-toggle.is-on { border-color: var(--accent); color: var(--accent); }

/* Changing a miner's split from the Factory Floor. */
.factory-split {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin-left: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  background: rgba(2, 4, 6, 0.55);
}
.factory-split-row { display: grid; grid-template-columns: auto minmax(70px, 9em) minmax(80px, 1fr) 4.2em 4.8em; align-items: center; gap: 8px; font-size: 13px; }
.factory-split-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-bright); }
.factory-split-slider { width: 100%; accent-color: var(--accent); }
.factory-split-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-bright); }
.factory-split-rate { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.factory-split-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* A miner split saving itself (ui/splitsave.js): "Saving…", "Saved.", or why not. */
.split-status { margin: 0; font-size: 12px; color: var(--ink-dim); }
.split-status.is-error { color: #f0907a; }
.split-status:empty { display: none; }
@media (max-width: 520px) {
  .factory-row .factory-age { display: none; }
  .factory-gather, .factory-split { padding-left: 0; margin-left: 0; }
  .factory-split-row { grid-template-columns: auto minmax(0, 1fr) 4.2em; }
  .factory-split-row .factory-split-slider { grid-column: 1 / -1; grid-row: 2; }
  .factory-split-rate { display: none; }
}

.factory-row-main {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.factory-row-main:hover,
.factory-row-main:focus-visible { border-color: var(--line-strong); outline: none; }
.factory-row-main .factory-name { font-size: 13px; }
.factory-row-where { overflow: hidden; font-size: 12px; color: var(--ink-dim); text-overflow: ellipsis; white-space: nowrap; }
.factory-age { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }

/* ---- Patch Notes: one message per day; categories open to show detail */

.notes { display: flex; flex-direction: column; gap: 16px; }

.notes-entry {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  background: rgba(150, 196, 224, 0.03);
}

.notes-entry.is-new { border-left-color: var(--accent); }
.notes-entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.notes-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink-bright); }
.notes-entry-head .wallet-badge { margin-left: 0; }

.notes-toggle {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.notes-toggle:hover,
.notes-toggle:focus-visible { color: var(--ink-bright); border-color: var(--accent); outline: none; }
.notes-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }

.notes-groups { display: grid; gap: 6px; }

.notes-group {
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.35);
}

.notes-group > summary {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-areas: "chevron title" ". summary";
  column-gap: 8px;
  row-gap: 2px;
  padding: 9px 12px;
  list-style: none;
  cursor: pointer;
}

.notes-group > summary::-webkit-details-marker { display: none; }

.notes-group > summary::before {
  content: "";
  grid-area: chevron;
  align-self: center;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-dim);
  border-bottom: 1.5px solid var(--ink-dim);
  transform: rotate(-45deg);
  transition: transform 150ms var(--ease);
}

.notes-group[open] > summary::before { transform: rotate(45deg); }
.notes-group > summary:hover,
.notes-group > summary:focus-visible { background: rgba(150, 196, 224, 0.05); outline: none; }
.notes-group > summary:hover::before { border-color: var(--accent); }

.notes-group-title { grid-area: title; font-size: 14px; font-weight: 600; color: var(--ink-bright); }
.notes-group-summary { grid-area: summary; font-size: 13px; line-height: 1.45; color: var(--ink-dim); }

.notes-list {
  margin: 0;
  padding: 2px 14px 12px 34px;
  display: grid;
  gap: 7px;
  font-size: 13px;
  line-height: 1.5;
  list-style: none;
}

/* One line: its tag (New, Fixed…) in a fixed-width column, then the text. */
.notes-line { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.notes-line > .notes-text:only-child { grid-column: 2; }

.notes-tag {
  justify-self: start;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.notes-tag.is-new { color: #7fd4a4; background: rgba(127, 212, 164, 0.08); }
.notes-tag.is-improved { color: var(--accent); background: var(--accent-wash); }
.notes-tag.is-changed { color: var(--amber); background: rgba(224, 168, 60, 0.08); }
.notes-tag.is-fixed { color: #b59cf0; background: rgba(181, 156, 240, 0.08); }
.notes-tag.is-removed { color: #f0907a; background: rgba(210, 86, 63, 0.08); }

/* ---- Settings: sections down the side, the chosen one beside them */

.settings-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; height: 100%; }

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.settings-nav-item {
  padding: 8px 10px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
}

.settings-nav-item:hover,
.settings-nav-item:focus-visible { color: var(--ink-bright); background: rgba(150, 196, 224, 0.05); outline: none; }
.settings-nav-item[aria-current="true"] { color: var(--ink-bright); border-left-color: var(--accent); background: var(--accent-wash); }

.settings-pane { min-width: 0; overflow: auto; }

.settings-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.settings-heading + .settings-pref { border-top: 0; }
.settings-pref.is-choice { flex-wrap: wrap; }
.settings-pref-text { display: grid; gap: 3px; min-width: 0; flex: 1 1 200px; }
.settings-pref-label { font-size: 14px; color: var(--ink-bright); }
.settings-pref-help { font-size: 12px; line-height: 1.45; color: var(--ink-dim); }
.settings-note[hidden] { display: none; }
.settings-try { justify-self: start; padding: 0; }
/* "Apply to all" beside a default for names: a small outlined button. */
.settings-apply-all {
  justify-self: start;
  margin-top: 4px;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.settings-apply-all:hover:not(:disabled),
.settings-apply-all:focus-visible { border-color: var(--accent); color: var(--ink-bright); outline: none; }
.settings-apply-all:disabled { opacity: 0.5; cursor: default; }
.settings-extra { padding-top: 6px; }

.settings-switch {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: rgba(5, 8, 12, 0.6);
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}

.settings-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 150ms var(--ease), background 150ms var(--ease);
}

.settings-switch[aria-checked="true"] { background: rgba(var(--accent-rgb), 0.3); border-color: var(--accent); }
.settings-switch[aria-checked="true"] .settings-switch-knob { transform: translateX(18px); background: var(--ink-bright); }
.settings-switch:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.settings-choice { display: flex; flex-wrap: wrap; gap: 0; }

.settings-choice-option {
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.settings-choice-option + .settings-choice-option { border-left: 0; }
.settings-choice-option[aria-checked="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--ink-bright); }
.settings-choice-option[aria-checked="true"] + .settings-choice-option { border-left: 1px solid var(--accent); }
.settings-choice-option:hover,
.settings-choice-option:focus-visible { color: var(--ink-bright); outline: none; }
.settings-select { width: auto; min-width: 200px; flex: 0 0 auto; }

/* ---- what some settings do, everywhere */

/* Reduce motion: no transitions or animations anywhere. */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* Hide balances until hovered (or focused). */
.hide-balances :is(.wallet-balance-value, .wallet-account-amount, .wallet-group-total, .wallet-running,
  .wallet-row .is-num, .wallet-recent .is-num, .wallet-preview .is-num, .wallet-stat-value, .corps-holdings .is-num,
  .corps-card-meta .is-num) {
  filter: blur(7px);
  transition: filter 120ms var(--ease);
}

.hide-balances :is(.wallet-card, .wallet-hero, .wallet-account, .wallet-category, .wallet-line, .wallet-recent, .wallet-stat,
  .wallet-group-head, .corps-holdings, .corps-card):is(:hover, :focus-within) :is(.wallet-balance-value, .wallet-account-amount,
  .wallet-group-total, .wallet-running, .is-num, .wallet-stat-value) {
  filter: none;
}

.hide-legend .map-legend,
.hide-fps .map-readout-fps { display: none; }

/* Brightness: the map, the inside of a system and the saved background (drawn
   on its own layer above so it can be filtered without the windows). Only set
   away from 100%, so the usual case has no filter at all. */
.has-brightness .starmap,
.has-brightness .sysview-canvas,
.has-brightness .sysview-preview,
.has-brightness .viewport::before { filter: brightness(var(--scene-brightness, 1)); }

.settings-pref.is-range { flex-wrap: wrap; }
.settings-range { display: flex; align-items: center; gap: 10px; flex: 0 1 260px; min-width: 0; }
.settings-range-input { flex: 1 1 140px; min-width: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.settings-range-value { flex: 0 0 4ch; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-bright); }
.settings-range-reset { align-self: center; }
.settings-range-reset:disabled { visibility: hidden; }

@media (max-width: 720px) {
  .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav { flex-direction: row; overflow-x: auto; padding: 0 0 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-nav-item { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; }
  .settings-nav-item[aria-current="true"] { border-bottom-color: var(--accent); }
  .settings-select { min-width: 0; width: 100%; }
}

/* ---- narrow screens: no room to float, so a window fills the viewport */

@media (max-width: 720px) {
  .win {
    inset: 0 !important; /* beats the inline left/top windows.js sets for floating */
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    min-width: 0;
    clip-path: none;
    transform: none; /* full screen already; "Window size" is for floating windows */
  }

  .win-grip { display: none; }

  .win-bar { cursor: default; }
}

/* ------------------------------------------------------------ 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; }
}

/* --- star system view ------------------------------------------------- */

/* The inside of one system, laid over the map. The canvas fills it; the bar
   and panel float on top like the map's own overlay, in the same panel style
   as the system card so it reads as the same game. */
.sysview {
  position: absolute;
  inset: 0;
  z-index: 5;
  /* Transparent: the canvas paints its own background, faded in with the
     zoom, so the map shows through while the system grows out of its star. */
  background: transparent;
  --sv-fade: 1;
}

/* The bar, panel and hint arrive with the system, and are not clickable
   until it has. */
.sysview-bar,
.sysview-panel,
.sysview-hint { opacity: var(--sv-fade); }

.sysview.is-arriving .sysview-bar,
.sysview.is-arriving .sysview-panel { pointer-events: none; }
.sysview.is-arriving .sysview-back { pointer-events: none; }

.sysview[hidden] { display: none; }

.sysview-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  outline: none;
  touch-action: none;
}

.sysview-bar {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.sysview-back {
  pointer-events: auto;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: rgba(10, 16, 22, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

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

.sysview-title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sysview-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-bright);
}

.sysview-spectral {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.sysview-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(280px, calc(100% - 24px));
  overflow-y: auto;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(20, 31, 42, 0.95), rgba(10, 16, 22, 0.95));
  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%);
}

.sysview-preview {
  display: block;
  width: 150px;
  height: 150px;
  margin: 2px auto 8px;
}

.sysview-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.sysview-panel-name {
  margin: 3px 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-bright);
  overflow-wrap: anywhere;
}

.sysview-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}

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

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

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

/* Every body in the system, innermost first, with your stations among them
   as if they were planets: the quick way to step through them without
   hunting for small dots on the canvas. A planet with your miners round it
   has a dropdown listing them. */
.sysview-list,
.sysview-sublist {
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.sysview-sublist { margin: 0 0 4px 18px; padding: 2px 0 0 6px; border-top: 0; border-left: 1px solid var(--line); }
.sysview-sublist[hidden] { display: none; }

.sysview-row { display: flex; align-items: stretch; gap: 4px; }

.sysview-pick {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 12px minmax(18px, auto) 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.sysview-pick:hover { border-color: var(--line-strong); }
.sysview-list li.is-on > .sysview-row .sysview-pick { border-color: var(--accent); background: var(--accent-wash); }

/* The dropdown: how many miners, and which way it is open. */
.sysview-caret {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--line);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}

.sysview-caret:hover,
.sysview-caret:focus-visible { border-color: var(--accent); outline: none; }
.sysview-caret[aria-expanded="true"] { background: var(--accent-wash); }

.sysview-list span { color: var(--ink-bright); font-weight: 600; }
.sysview-list em { font-style: normal; color: var(--ink-dim); }
.sysview-sublist em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sysview-list i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8a8580;
}

.sysview-list i[data-kind="gas giant"] { background: #c9a77d; }
.sysview-list i[data-kind="ice giant"] { background: #6f9fe0; }
.sysview-list i[data-kind="mini-neptune"] { background: #93acc0; }
.sysview-list i[data-kind="terran"] { background: #3f8f6a; }
.sysview-list i[data-kind="ocean"] { background: #2d6fa6; }
.sysview-list i[data-kind="desert"] { background: #c4874f; }
.sysview-list i[data-kind="lava"] { background: #ff6a1f; }
.sysview-list i[data-kind="ice"] { background: #dbe8f0; }
.sysview-list i[data-kind="super-earth"] { background: #8a8f7a; }
.sysview-list i[data-kind="belt"] { background: transparent; border: 1px dotted #a09080; border-radius: 0; }
/* Yours, in the accent colour: a station's hexagon, a miner's diamond. */
.sysview-list i[data-kind="station"] {
  border-radius: 0;
  background: var(--accent);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.sysview-list i[data-kind="miner"] {
  width: 8px;
  height: 8px;
  margin-left: 1px;
  border-radius: 0;
  background: var(--accent);
  transform: rotate(45deg);
}

.sysview-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  pointer-events: none;
}

/* Placing a building: what, how, and why not. Centred at the foot of the
   part of the view the panel leaves free (systemview.js sets left and top). */
.sysview-placing {
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  width: max-content;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 14px;
  max-width: min(460px, calc(100% - 24px));
  padding: 9px 12px;
  /* Opaque: on a phone it sits over the panel's text. */
  background: linear-gradient(180deg, rgb(20, 31, 42), rgb(10, 16, 22));
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
}

.sysview-placing[hidden] { display: none; }
.sysview-placing.is-over-panel { transform: translate(-50%, 0); }
.sysview-placing p { grid-column: 1; margin: 0; }

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

.sysview-placing-how { font-size: 12px; line-height: 1.4; color: var(--ink); }
.sysview-placing-error { font-size: 12px; line-height: 1.4; color: #f0907a; }
.sysview-placing-error:empty { display: none; }

.sysview-placing-stop,
.sysview-scrap {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: rgba(10, 16, 22, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.sysview-placing-stop { grid-column: 2; grid-row: 1 / span 3; }

.sysview-placing-stop:hover,
.sysview-placing-stop:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.sysview.is-placing .sysview-hint { display: none; }

/* A selected structure's own actions, in the panel. */
.sysview-actions { display: grid; gap: 6px; margin: 0 0 12px; }
.sysview-actions[hidden] { display: none; }
.sysview-scrap { border-color: rgba(210, 86, 63, 0.55); }

.sysview-scrap:hover:not(:disabled),
.sysview-scrap:focus-visible,
.sysview-scrap.is-armed {
  border-color: var(--danger);
  background: rgba(210, 86, 63, 0.14);
  color: #ffd9cf;
  outline: none;
}

.sysview-scrap:disabled { opacity: 0.5; cursor: default; }
.sysview-action-error { margin: 0; font-size: 12px; color: #f0907a; }
.sysview-action-error:empty { display: none; }

/* What a planet holds, or what a miner mines: one row per resource, with
   its class and how long a unit takes. On your own miner each row has a
   slider, and the sliders between them always make 100% (its split). */
.sysview-res {
  display: grid;
  gap: 9px;
  margin: 0 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.sysview-res[hidden] { display: none; }
.sysview-res-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }

.sysview-res-head h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.sysview-res-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 9px;
}

.sysview-res-icon { display: flex; width: 26px; height: 26px; }
.sysview-res-name { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--ink-bright); overflow-wrap: anywhere; }
.sysview-res-name small { font-size: 10px; letter-spacing: 0.04em; color: var(--ink-dim); }
.sysview-res-name small[data-tier="2"] { color: var(--t2); }
.sysview-res-name small[data-tier="3"] { color: var(--t3); }
.sysview-res-rate { font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sysview-res-share {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sysview-res-share b { font-size: 14px; font-weight: 600; color: var(--ink-bright); }
.sysview-res-share small { font-size: 10px; color: var(--ink-dim); }

/* A split's percentage (pctinput.js): click the number to type one. */
.pct-edit { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.pct-edit-show {
  padding: 0 2px;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: text;
}
.pct-edit-show:hover:not(:disabled),
.pct-edit-show:focus-visible { border-bottom-color: var(--accent); color: var(--ink-bright); outline: none; }
.pct-edit-show:disabled { cursor: default; }
.pct-edit-input {
  width: 3.2em;
  padding: 1px 3px;
  border: 1px solid var(--accent);
  background: rgba(2, 4, 6, 0.8);
  color: var(--ink-bright);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pct-edit-input::-webkit-outer-spin-button,
.pct-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pct-edit-input:focus { outline: none; }
.pct-edit-unit { color: var(--ink-dim); }
.sysview-res-share .pct-edit { font-size: 14px; font-weight: 600; color: var(--ink-bright); }
.sysview-res-slider { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sysview-res-slider:disabled { cursor: default; opacity: 0.5; }
.sysview-res-note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--ink-dim); }
.sysview-res-buttons { display: grid; gap: 6px; }

.sysview-res-even,
.sysview-res-all {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: rgba(10, 16, 22, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.sysview-res-even { padding: 3px 9px; font-size: 10px; }

.sysview-res-even:hover:not(:disabled),
.sysview-res-even:focus-visible,
.sysview-res-all:hover:not(:disabled),
.sysview-res-all:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.sysview-res-even:disabled,
.sysview-res-all:disabled,
.sysview-res-apply:disabled { opacity: 0.45; cursor: default; }
.sysview-res-apply:disabled:hover { background: var(--accent-wash); color: var(--accent); }

/* Into one of your stations, from its panel. Accent-filled like the map
   card's way into a system. */
.sysview-enter {
  padding: 8px 10px;
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.sysview-enter:hover,
.sysview-enter:focus-visible {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--ink-bright);
  outline: none;
}

/* --- inside a station: its build mode --------------------------------- */

/* Over the system view (z 5), under the windows (z 20). The station sits in
   the middle on a faint deck grid, its build slots round it. */
.stationview {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 50% 52%, rgba(var(--accent-rgb), 0.08), transparent 55%),
    linear-gradient(rgba(150, 196, 224, 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(150, 196, 224, 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--void);
}

.stationview[hidden] { display: none; }

.station-bar { display: flex; align-items: center; gap: 14px; padding: 12px; }

.station-back {
  padding: 7px 12px;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  background: rgba(10, 16, 22, 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

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

.station-title { display: flex; flex-direction: column; line-height: 1.2; }
/* The station's own upgrade, at the far end of its bar. */
.station-upgrade-open { margin-left: auto; white-space: nowrap; }
.station-name { font-size: 18px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-bright); }
.station-sub { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }

.station-stage { display: grid; place-items: center; min-height: 0; padding: 8px 16px; }
.station-svg { width: min(100%, 640px); height: 100%; max-height: 640px; overflow: visible; }

.station-orbit { fill: none; stroke: var(--line); stroke-dasharray: 3 7; }
.station-orbit.is-inner { stroke-dasharray: none; opacity: 0.6; }
.station-strut line { stroke: var(--line-strong); stroke-width: 2; }

.station-slot { cursor: pointer; outline: none; }

.station-slot-frame {
  fill: rgba(5, 8, 12, 0.8);
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  transition: stroke 0.15s, fill 0.15s;
}

.station-slot-plus { stroke: var(--ink-dim); stroke-width: 2.5; stroke-linecap: round; }
.station-slot text { fill: var(--ink-dim); font-family: var(--font); font-size: 11px; letter-spacing: 0.18em; }

.station-slot:hover .station-slot-frame,
.station-slot:focus-visible .station-slot-frame { stroke: var(--accent); stroke-dasharray: none; fill: rgba(var(--accent-rgb), 0.08); }
.station-slot:hover .station-slot-plus,
.station-slot:focus-visible .station-slot-plus { stroke: var(--accent); }
.station-slot:hover text,
.station-slot:focus-visible text { fill: var(--accent); }

.station-hub {
  cursor: pointer;
  outline: none;
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.25));
  transition: filter 0.15s;
}

.station-hub:hover,
.station-hub:focus-visible { filter: drop-shadow(0 0 24px rgba(var(--accent-rgb), 0.6)); }

.station-hull { fill: #0b141c; stroke: var(--accent); stroke-width: 3; }
.station-deck { fill: none; stroke: rgba(var(--accent-rgb), 0.35); stroke-width: 1.5; }
.station-spokes line { stroke: rgba(var(--accent-rgb), 0.55); stroke-width: 2; }
.station-core { fill: var(--accent); }
.station-dock { fill: none; stroke: rgba(var(--accent-rgb), 0.45); stroke-width: 3; stroke-linecap: round; }
.station-hub-label { fill: var(--ink-dim); font-family: var(--font); font-size: 11px; letter-spacing: 0.22em; }
.station-hub:hover .station-hub-label,
.station-hub:focus-visible .station-hub-label { fill: var(--accent); }

.station-hint { margin: 0; padding: 0 12px 14px; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); text-align: center; }

/* A slot with a machine in it: the machine's glyph in the corner, what it
   makes in the middle, a progress bar and its name. The frame and the dot
   say how it is doing: green working, yellow waiting for an input, blue
   full (holding its limit), grey off or with nothing to make. */
.station-slot { --machine-ok: #5fd17a; --machine-wait: #e9c94c; }
.station-slot.is-loading { cursor: progress; }
.station-slot.has-machine .station-slot-frame { stroke-dasharray: none; fill: rgba(9, 15, 21, 0.94); }
.station-slot.has-machine text { fill: var(--ink); font-size: 10px; }
.station-slot-glyph { color: var(--ink-dim); }
.station-slot-glyph.is-big { opacity: 0.55; }
.station-slot-dot { fill: var(--ink-dim); }
.station-slot-track { fill: rgba(0, 0, 0, 0.6); }
.station-slot-progress { fill: var(--ink-dim); }

.station-slot.is-working .station-slot-frame { stroke: rgba(95, 209, 122, 0.7); }
.station-slot.is-working .station-slot-dot,
.station-slot.is-working .station-slot-progress { fill: var(--machine-ok); }
.station-slot.is-working .station-slot-glyph { color: var(--machine-ok); }
.station-slot.is-waiting .station-slot-frame { stroke: rgba(233, 201, 76, 0.7); }
.station-slot.is-waiting .station-slot-dot,
.station-slot.is-waiting .station-slot-progress { fill: var(--machine-wait); }
.station-slot.is-full .station-slot-frame { stroke: rgba(var(--accent-rgb), 0.7); }
.station-slot.is-full .station-slot-dot,
.station-slot.is-full .station-slot-progress { fill: var(--accent); }
.station-slot.is-off { opacity: 0.6; }
.station-slot.is-idle .station-slot-frame { stroke-dasharray: 7 5; }

.station-slot.has-machine:hover .station-slot-frame,
.station-slot.has-machine:focus-visible .station-slot-frame { fill: rgba(var(--accent-rgb), 0.1); }
.station-slot.is-selected .station-slot-frame { stroke: var(--accent); stroke-width: 3; stroke-dasharray: none; fill: rgba(var(--accent-rgb), 0.1); }
.station-slot.is-selected text { fill: var(--accent); }

/* The panel beside the station for one slot: build in it, or set up the
   machine there. The station moves over to make room. */
.station-panel {
  position: absolute;
  top: 64px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(340px, calc(100% - 24px));
  overflow-y: auto;
  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(--accent);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.station-panel[hidden] { display: none; }
.stationview.has-panel .station-stage { padding-right: 368px; }
/* Moving over for the panel glides, a moment after the click that opened
   it (stationview.js HOLD_STILL_MS), so a double-click lands where it began. */
.station-stage { transition: padding-right 0.22s ease; }
.stationview.has-panel .station-hint { padding-right: 368px; }

.station-panel-head { display: flex; align-items: flex-start; gap: 10px; }
.station-panel-glyph { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line-strong); color: var(--accent); background: rgba(5, 8, 12, 0.6); }
.station-panel-title { display: grid; gap: 2px; min-width: 0; flex: 1; }
.station-panel-title h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-bright); }
.station-panel-sub { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.station-panel .win-note { margin: 0; }
.station-panel .win-error { margin: 0; }
.station-panel-back { align-self: flex-start; }

.station-builds { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.station-build {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.45);
}
.station-build .factory-icon { color: var(--accent); }
.station-build-text { display: grid; gap: 2px; min-width: 0; }
.station-build .win-button { grid-column: 1 / -1; justify-self: end; }

/* How the machine is doing, coloured like its slot. */
.station-status {
  --tone: var(--ink-dim);
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone);
  background: rgba(5, 8, 12, 0.5);
}
.station-status.is-working { --tone: #5fd17a; }
.station-status.is-waiting { --tone: #e9c94c; }
.station-status.is-full { --tone: var(--accent); }
.station-status-word { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tone); }
.station-status-text { font-size: 13px; line-height: 1.4; color: var(--ink); }

.station-progress { height: 4px; margin-top: -6px; background: rgba(0, 0, 0, 0.6); }
.station-progress i { display: block; width: 0; height: 100%; background: var(--ink-dim); }
.station-status.is-working + .station-progress i { background: #5fd17a; }
.station-status.is-waiting + .station-progress i { background: #e9c94c; }
.station-status.is-full + .station-progress i { background: var(--accent); }

.station-panel-section { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.station-panel-section h4 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.station-panel-section > .win-button { justify-self: start; }

/* A recipe: inputs, an arrow, the output. */
.station-recipe-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.station-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.station-part { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink); }
.station-part b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-bright); }
.station-arrow { color: var(--ink-dim); }
.station-recipe-line.is-big { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
.station-recipe-line.is-big .station-parts { display: grid; gap: 6px; }
.station-recipe-line.is-big .station-arrow { grid-column: 2; grid-row: 1; align-self: center; display: none; }
.station-recipe-line.is-big > .station-part {
  grid-column: 1 / -1;
  padding-top: 6px;
  border-top: 1px dashed var(--line-strong);
}
.station-recipe-line.is-big > .station-part::before { content: '→'; margin-right: 4px; color: var(--ink-dim); }
.station-part-text { display: grid; line-height: 1.2; margin-left: 4px; }
.station-part-name { font-size: 13px; color: var(--ink-bright); }
.station-part-text small { font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.station-recipe-time { margin: 0; font-size: 12px; color: var(--ink-dim); }

.station-panel-hint {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(233, 201, 76, 0.4);
  background: rgba(233, 201, 76, 0.06);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
}
.station-panel-hint[hidden] { display: none; }
.station-panel-hint .win-button { justify-self: start; }

.station-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink); }

.station-limit { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; align-items: center; gap: 8px; }
.station-limit-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.station-limit-label input { accent-color: var(--accent); }
.station-limit-input { width: 100%; }
.station-panel .flog-source-detail { margin: 0; }

.station-panel-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }

/* The recipe list. */
.station-shelves { display: grid; gap: 12px; }
.station-shelf { display: grid; gap: 6px; }
.station-shelf .flog-shelf-name { margin: 0; }
.station-recipe {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.45);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.station-recipe:hover:not(:disabled),
.station-recipe:focus-visible { border-color: var(--accent); outline: none; background: rgba(var(--accent-rgb), 0.06); }
.station-recipe:disabled { opacity: 0.5; cursor: default; }
.station-recipe.is-current { border-color: rgba(var(--accent-rgb), 0.6); background: var(--accent-wash); }
.station-recipe-head { display: flex; align-items: center; gap: 8px; }
.station-recipe-name { font-size: 14px; color: var(--ink-bright); }
.station-recipe-secs { margin-left: auto; font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.station-recipe-note { font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.station-recipe.is-ready:not(.is-current) .station-recipe-note { color: #5fd17a; }
/* A crafted building's recipe still waiting on research. */
.station-recipe.is-locked { border-style: dashed; }
.station-recipe.is-locked:disabled { opacity: 0.65; }
.station-recipe-note.is-locked { color: var(--amber); letter-spacing: 0; }
.station-recipe-note.is-ready { color: #5fd17a; }
/* What it could make right now, first. */
.station-shelf.is-ready .flog-shelf-name { color: #5fd17a; }
.station-shelf.is-ready { padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* What a machine (or an upgrade) costs, against what this station holds. */
.station-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; font-size: 12px; color: var(--ink); }
.station-cost-label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.station-cost-credits { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-bright); }
.station-cost-item { display: inline-flex; align-items: center; gap: 3px; }
.station-cost-item b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-bright); }
.station-cost-have { margin-left: 2px; font-size: 11px; color: #5fd17a; font-variant-numeric: tabular-nums; }
.station-cost-item.is-short .station-cost-have { color: var(--amber); }
.station-cost-from { flex-basis: 100%; font-size: 11px; color: var(--ink-dim); }
.station-build.is-locked { border-style: dashed; background: rgba(5, 8, 12, 0.3); }
.station-build.is-locked .factory-icon { color: var(--ink-dim); border-style: dashed; }
.station-build.is-locked .factory-blurb { color: var(--ink-dim); }

.station-upgrade-to { display: grid; gap: 2px; margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-dim); }
.station-upgrade-to b { font-size: 13px; font-weight: 600; color: var(--ink-bright); }
.station-upgrade-buttons,
.station-row-buttons { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.station-upgrade-buttons { justify-content: flex-end; }

/* A lab whose project is done, and one step of research as an output. */
.station-status.is-done { --tone: var(--accent); }
.station-status.is-done + .station-progress i { background: var(--accent); }
.station-slot.is-done .station-slot-frame { stroke: rgba(var(--accent-rgb), 0.7); }
.station-slot.is-done .station-slot-dot { fill: var(--accent); }
.station-part.is-step svg { color: var(--accent); }

/* Research: progress on a project, and the list a lab picks from. */
.research-now { display: grid; gap: 4px; }
.research-now-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-bright); }
.research-now-unlocks { margin: 0; font-size: 12px; color: var(--ink-dim); }
.research-now-steps { display: grid; gap: 1px; margin: 0; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.research-now-steps small { font-size: 11px; color: var(--ink-dim); }
.research-bar { height: 6px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.6); }
.research-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.6), var(--accent)); transition: width 0.6s var(--ease); }
.research-chip {
  padding: 0 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.research-chip:empty { display: none; }
.research-pick .station-recipe-secs { white-space: nowrap; }
.research-chip.is-done { border-color: rgba(95, 209, 122, 0.55); color: #5fd17a; }
.research-chip.is-locked { border-color: rgba(224, 168, 60, 0.5); color: var(--amber); }
.research-pick-glyph { display: grid; color: var(--accent); }
.research-pick.is-done .research-pick-glyph { color: #5fd17a; }
.research-pick.is-locked .research-pick-glyph { color: var(--ink-dim); }
.research-pick.is-locked .station-recipe-note { color: var(--amber); }
.research-pick.is-done .station-recipe-note { color: #5fd17a; }

/* On a phone the panel is a sheet across the bottom, under the station. */
@media (max-width: 720px) {
  .station-panel { top: auto; left: 12px; width: auto; max-height: 58%; }
  .stationview.has-panel .station-stage,
  .stationview.has-panel .station-hint { padding-right: 16px; }
  .stationview.has-panel .station-hint { display: none; }
  .stationview.has-panel .station-stage { align-items: start; }
  .stationview.has-panel .station-svg { max-height: 42vh; }
  .station-bar { flex-wrap: wrap; row-gap: 8px; }
  .station-upgrade-open { padding: 6px 10px; font-size: 10px; }
}

/* The card's way in. Accent-filled, since it is the main thing to do with a
   system once you have found one. */
.map-card-enter {
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.map-card-enter:hover,
.map-card-enter:focus-visible {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--ink-bright);
  outline: none;
}

/* On a phone the panel moves to the bottom third, so the system stays
   visible above it. */
@media (max-width: 640px) {
  .sysview-panel {
    top: auto;
    left: 12px;
    width: auto;
    max-height: 42%;
  }

  .sysview-preview { width: 96px; height: 96px; float: right; margin: 0 0 6px 10px; }
  .sysview-hint { display: none; }
}

/* 12-hour sidebar clock: AM/PM small, under the time (neocom.js, tick). */
.neocom-clock-value[data-period]:not([data-period=""])::after {
  content: attr(data-period);
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

/* ---- "Accent colour" (Settings → Interface). Cyan is the default above.
   Each sets the colour and its channels; washes and glows follow. */
:root[data-accent="violet"] { --accent: #a48cff; --accent-rgb: 164, 140, 255; }
:root[data-accent="green"] { --accent: #5fd39a; --accent-rgb: 95, 211, 154; }
:root[data-accent="amber"] { --accent: #e9b44c; --accent-rgb: 233, 180, 76; }
:root[data-accent="rose"] { --accent: #f2789a; --accent-rgb: 242, 120, 154; }
:root[data-accent="ice"] { --accent: #c9dcea; --accent-rgb: 201, 220, 234; }

/* Swatches in Settings: each option shows its own colour. */
.settings-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -1px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* ---- Background: a saved map view behind the closed map (background.js).
   A plain CSS background, so there is nothing to click or zoom. It sits on
   its own layer under everything else so Brightness can filter it alone. */
.viewport.is-map-closed.has-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(3, 6, 10, 0.25), rgba(3, 6, 10, 0.25)), var(--map-background);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.viewport.has-background .map-closed-hint { display: none; }

.settings-bg { padding-top: 12px; border-top: 1px solid var(--line); }

.settings-bg-preview {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  background: var(--void);
}

.settings-bg-preview.is-empty {
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--ink-dim);
}
/* A photo dragged over the preview: drop it to use it. */
.settings-bg-preview.is-drop { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); }

/* ---- Dev Panel: categories across the top; test checklists per request */

.dev { display: flex; flex-direction: column; gap: 12px; }

/* Dev Panel → Server (ui/devserver.js): tiles of numbers now, meters for
   shares, then line charts. Series wear the data palette's first two slots
   (#3987e5, #d95926, checked against this background); text never does. */
.devs { display: flex; flex-direction: column; gap: 12px; }
.devs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.devs-status { margin: 0; font-size: 12px; }
.devs-body { display: flex; flex-direction: column; gap: 10px; }
.devs-body[hidden] { display: none; }
.devs-heading { margin: 4px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.devs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.devs-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.35);
}
.devs-tile-label { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); }
.devs-tile-value { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ink-bright); overflow-wrap: anywhere; }
.devs-tile-sub { font-size: 11px; line-height: 1.35; color: var(--ink-dim); overflow-wrap: anywhere; }
.devs-tile.is-high .devs-tile-sub { color: var(--amber); }
.devs-tile.is-critical .devs-tile-sub { color: #f0907a; }
/* A meter: the track is a lighter step of the fill's own color. */
.devs-meter { display: block; height: 4px; border-radius: 2px; background: var(--accent-wash); overflow: hidden; }
.devs-meter[hidden] { display: none; }
.devs-meter-fill { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.devs-tile.is-high .devs-meter { background: rgba(224, 168, 60, 0.16); }
.devs-tile.is-high .devs-meter-fill { background: var(--amber); }
.devs-tile.is-critical .devs-meter { background: rgba(210, 86, 63, 0.18); }
.devs-tile.is-critical .devs-meter-fill { background: var(--danger); }

.devs-chart { margin: 4px 0 0; padding: 10px 12px 6px; border: 1px solid var(--line); background: rgba(5, 8, 12, 0.35); }
.devs-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 6px; }
.devs-chart-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-bright); }
.devs-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink); }
.devs-key { display: inline-flex; align-items: center; gap: 6px; }
.devs-key-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; flex: none; }
.devs-table-toggle { padding: 2px 8px; font-size: 11px; }
.devs-table-toggle[aria-pressed="true"] { color: var(--ink-bright); border-bottom-color: var(--accent); }
.devs-plot { position: relative; min-height: 60px; }
.devs-svg { display: block; overflow: visible; outline: none; }
.devs-svg:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.devs-grid { stroke: rgba(150, 196, 224, 0.12); stroke-width: 1; shape-rendering: crispEdges; }
.devs-axis { font-size: 10px; fill: var(--ink-dim); font-variant-numeric: tabular-nums; }
.devs-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.devs-dot { stroke: #0f1820; stroke-width: 2; }
.devs-cross { stroke: rgba(234, 244, 251, 0.45); stroke-width: 1; shape-rendering: crispEdges; }
.devs-hit { fill: transparent; cursor: crosshair; }
.devs-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 120px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 13, 18, 0.95);
  pointer-events: none;
  font-size: 12px;
  white-space: nowrap;
}
.devs-tip[hidden] { display: none; }
.devs-tip-time { font-size: 11px; color: var(--ink-dim); }
.devs-tip-row { display: flex; align-items: center; gap: 7px; color: var(--ink-dim); }
.devs-tip-row b { color: var(--ink-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.devs-empty { margin: 8px 0; }
.devs-table-wrap { max-height: 260px; overflow: auto; }
.devs-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.devs-table th { position: sticky; top: 0; padding: 4px 8px; background: #0d151d; color: var(--ink-dim); font-weight: 600; text-align: right; }
.devs-table td { padding: 3px 8px; border-top: 1px solid var(--line); color: var(--ink); text-align: right; }
.devs-table th:first-child,
.devs-table td:first-child { text-align: left; }
.dev-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }

.dev-tab {
  margin-bottom: -1px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.dev-tab[aria-selected="true"] { border-color: var(--line); border-bottom-color: var(--accent); background: var(--accent-wash); color: var(--ink-bright); }
.dev-tab:hover,
.dev-tab:focus-visible { color: var(--ink-bright); outline: none; }

.dev-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }

.dev-list {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  background: rgba(150, 196, 224, 0.03);
}

.dev-list.is-done { border-left-color: #7fd4a4; }
.dev-list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dev-date { font-size: 12px; color: var(--ink-dim); }
.dev-request,
.dev-setup { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.dev-setup { color: var(--ink-dim); }

.dev-label {
  margin-right: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.dev-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dev-meter { display: flex; flex: 1 1 160px; height: 6px; overflow: hidden; background: rgba(150, 196, 224, 0.1); }
.dev-meter-pass { background: #7fd4a4; }
.dev-meter-fail { background: var(--danger); }
.dev-progress-text { font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dev-progress .notes-toggle { margin-left: 0; }
.dev-reset.is-armed { border-color: var(--danger); color: #ffd9cf; background: rgba(210, 86, 63, 0.14); }
.dev-reset:disabled { opacity: 0.4; cursor: default; }

.dev-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.dev-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 26px;
  column-gap: 10px;
  align-items: start;
  padding: 6px 4px 6px 6px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.45;
}

.dev-item:hover { background: rgba(150, 196, 224, 0.04); }
.dev-item.is-pass .dev-item-text { color: var(--ink-dim); }
.dev-item.is-fail { border-left-color: var(--danger); background: rgba(210, 86, 63, 0.07); }
.dev-item-text { display: grid; gap: 2px; min-width: 0; color: var(--ink); }
.dev-hint { font-size: 12px; color: var(--ink-dim); }

.dev-check {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.6);
  cursor: pointer;
}

.dev-check:hover,
.dev-check:focus-visible { border-color: var(--accent); outline: none; }
.dev-check[aria-checked="true"] { border-color: #7fd4a4; background: #7fd4a4; }
.dev-check[aria-checked="true"]::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--void);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dev-flag {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}

.dev-item:hover .dev-flag,
.dev-flag:focus-visible { opacity: 1; }
.dev-flag:hover,
.dev-flag:focus-visible { color: #f0907a; border-color: rgba(210, 86, 63, 0.5); outline: none; }
.dev-flag[aria-pressed="true"] { opacity: 1; color: #ffd9cf; border-color: var(--danger); background: rgba(210, 86, 63, 0.25); }
.dev-note { grid-column: 2 / 4; margin-top: 6px; font-size: 13px; }

/* ---- Dev Panel, Players: every pilot, and everything about one -------- */

.devp { display: flex; flex-direction: column; gap: 12px; container-type: inline-size; }
.devp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.devp-search { flex: 1 1 220px; min-width: 0; }
.devp-count { font-size: 12px; color: var(--ink-dim); white-space: nowrap; }

.devp-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.devp-row {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.45);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.devp-row:hover,
.devp-row:focus-visible { border-left-color: var(--accent); background: rgba(150, 196, 224, 0.06); outline: none; }
.devp-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.devp-name { font-size: 15px; color: var(--ink-bright); }
.devp-handle { font-size: 12px; color: var(--ink-dim); }
.devp-row-facts { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--ink-dim); }
.devp-row-facts b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.devp-badge {
  padding: 0 5px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 15px;
  text-transform: uppercase;
}

/* Online now: a green dot; otherwise when they were last about. */
.devp-seen { margin-left: auto; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.devp-seen.is-online { color: #5fd17a; }
.devp-seen.is-online::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #5fd17a;
  box-shadow: 0 0 6px rgba(95, 209, 122, 0.8);
  vertical-align: 1px;
}

.devp-top { display: flex; align-items: center; gap: 8px; }
.devp-head { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.devp-head-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.devp-head-name .devp-name { font-size: 20px; font-weight: 600; }
.devp-head-sub { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 12px; color: var(--ink-dim); }
.devp-head-sub .devp-seen { margin-left: 0; }

.devp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.devp-tile { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(5, 8, 12, 0.45); }
.devp-tile-label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.devp-tile-value { font-size: 15px; font-weight: 600; color: var(--ink-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.devp-tile-sub { font-size: 11px; color: var(--ink-dim); }

.devp-body { display: grid; gap: 14px; }
.devp-section { display: grid; gap: 8px; }
.devp-h { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.devp-h-sub { letter-spacing: 0.04em; text-transform: none; font-size: 12px; font-weight: 400; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.devp-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-dim); }
.devp-tag { padding: 0 6px; border: 1px solid var(--line-strong); font-size: 11px; color: var(--ink); white-space: nowrap; }
.devp-tag.is-accent { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent); }

/* The activity feed, and lists like it. */
.devp-feed { display: grid; margin: 0; padding: 0; list-style: none; }
.devp-event {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  grid-template-areas: "kind text side";
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}
.devp-event:last-child { border-bottom: 0; }
.devp-event.is-unread .devp-event-text { color: var(--ink-bright); font-weight: 600; }
.devp-event-text { grid-area: text; display: grid; min-width: 0; overflow-wrap: anywhere; }
.devp-side { grid-area: side; display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
.devp-event-text small { font-size: 12px; color: var(--ink-dim); }
.devp-kind { grid-area: kind; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.devp-event.is-build .devp-kind { color: var(--accent); }
.devp-event.is-money .devp-kind { color: #5fd17a; }
.devp-event.is-market .devp-kind { color: var(--amber); }
.devp-event.is-corporation .devp-kind { color: var(--t3); }
.devp-when { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.devp-amount { color: #5fd17a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.devp-amount.is-out { color: #f0907a; }

/* Bank accounts and their statements. */
.devp-account { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(5, 8, 12, 0.45); }
.devp-account.is-closed { opacity: 0.6; }
.devp-account-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.devp-account-name { font-size: 14px; color: var(--ink-bright); }
.devp-balance { font-size: 15px; color: var(--ink-bright); font-variant-numeric: tabular-nums; }
.devp-ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
.devp-ledger td { padding: 5px 4px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.devp-ledger td:nth-child(2) { width: 100%; }
.devp-ledger td small { display: block; color: var(--ink-dim); }
.devp-ledger .devp-amount,
.devp-running { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.devp-running { color: var(--ink-dim); }

/* Stations, miners, listings. */
.devp-card { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(5, 8, 12, 0.45); }
.devp-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--accent); }
.devp-card-title { font-size: 14px; color: var(--ink-bright); }
.devp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.devp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 4px;
  border: 1px solid var(--line);
  background: rgba(2, 4, 6, 0.5);
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.devp-chip.is-machine svg:not(.item-icon) { color: var(--ink-dim); }
.devp-chip.is-working { border-color: rgba(95, 209, 122, 0.5); }
.devp-chip.is-working svg:not(.item-icon) { color: #5fd17a; }
.devp-chip.is-waiting { border-color: rgba(233, 201, 76, 0.55); }
.devp-chip.is-full { border-color: rgba(var(--accent-rgb), 0.55); }
.devp-chip.is-off,
.devp-chip.is-idle { opacity: 0.65; }
.devp-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.devp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--accent); }
.devp-line:last-child { border-bottom: 0; }
.devp-line-main { font-size: 13px; color: var(--ink-bright); }
.devp-line .devp-chips { flex-basis: 100%; padding-left: 26px; }

.devp-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13px; }
.devp-facts dt { color: var(--ink-dim); }
.devp-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

.devp-private { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line-strong); }
.devp-private > .win-button { justify-self: start; }
.devp-private.is-open { border-style: solid; border-color: rgba(224, 168, 60, 0.5); }

/* Narrow: what kind and when on one line, what happened under them. */
@container (max-width: 480px) {
  .devp-event { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind side" "text text"; }
}

/* ------------------------------------------------------------------ looks --
 * Names in their chosen font and colour, with an icon beside them (look.js,
 * src/looks.js). What a look leaves out follows the viewer's defaults, which
 * main.js puts on <html>: has-name-font / has-name-color with --name-font,
 * --name-tt, --name-ls, --name-color, and --icon-color (unset = match the
 * name). Chosen values are inline, so they always win.
 */

.look-label { display: inline-flex; align-items: center; gap: 0.4em; min-width: 0; max-width: 100%; vertical-align: middle; }
.look-label > .look-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-icon { flex: 0 0 auto; color: var(--look-icon, var(--icon-color, var(--look-name, var(--name-color, currentColor)))); }
.look-icon.is-match { color: var(--look-name, var(--name-color, currentColor)); }

:root.has-name-font .look-name:not(.has-font) {
  font-family: var(--name-font);
  text-transform: var(--name-tt);
  letter-spacing: var(--name-ls);
}
:root.has-name-color .look-name:not(.has-color):not(.is-plain) { color: var(--name-color); }

/* The editor: one popover for everything renamable. */
.look-pop {
  position: fixed;
  z-index: 70; /* over windows, toasts and the pilot panel; under the right-click menu */
  display: grid;
  gap: 10px;
  width: min(440px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 12px 14px 14px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  background: #0b131b;
  box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.85);
  color: var(--ink);
}
.look-pop.is-sheet { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-height: 80vh; }
.look-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.look-pop-head h4 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.look-preview {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: rgba(2, 4, 6, 0.6);
  font-size: 17px;
  color: var(--ink-bright);
}
.look-field { gap: 6px; }
.look-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.look-swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
  color: var(--ink);
  cursor: pointer;
}
.look-swatch:hover { border-color: var(--line-strong); color: var(--ink-bright); }
.look-swatch[aria-checked="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--ink-bright); }
.look-swatch:focus-visible { outline: 1px solid var(--accent); }
/* A palette colour is a dot; Default, Plain and Match are drawn as words. */
.look-swatch[style*="--swatch"]::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}
.look-swatches > .look-swatch.is-default,
.look-swatches > .look-swatch.is-plain,
.look-swatches > .look-swatch.is-match { width: auto; padding: 0 8px; font: inherit; font-size: 11px; letter-spacing: 0.06em; }
.look-swatches > .look-swatch.is-default:not(.look-swatch-icon)::after { content: "Default"; }
.look-swatches > .look-swatch.is-plain::after { content: "Plain"; color: var(--ink-bright); }
.look-swatches > .look-swatch.is-match::after { content: "Match"; }
.look-icons .look-swatch-icon.is-default { width: 30px; padding: 0; }
.look-icons .look-swatch-icon.is-default::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.look-none { font-size: 15px; color: var(--ink-dim); }
/* Icons: a search box over every icon, grouped under headings; searching
   shows the matches in one run. The list scrolls on its own. */
.look-icon-picker { display: grid; gap: 6px; min-width: 0; }
.look-icon-searchrow { display: flex; align-items: center; gap: 8px; }
.look-icon-search { flex: 1; min-width: 0; }
.look-icon-count { flex: none; font-size: 11px; color: var(--ink-dim); }
.look-icon-scroll {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 212px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 2px 2px;
}
.look-icon-heading {
  margin: 2px 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.look-icon-empty { margin: 4px 0; }
/* Any color: a rainbow dot until one is picked, then that color. */
.look-colors { display: grid; gap: 8px; min-width: 0; }
.look-swatch.is-custom::before,
.wallet-swatch-color.is-custom::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--custom, conic-gradient(#e0563f, #e2b55a, #b7d96a, #4fd1c5, #4fb6d9, #a98be8, #e06c8f, #e0563f));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}
.wallet-swatch-color.is-custom::before { width: 18px; height: 18px; }
.look-swatch.is-custom::after,
.wallet-swatch.is-custom::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-top: 4px solid var(--ink-dim);
  transform: rotate(-45deg);
}
.look-swatch.is-custom.is-open,
.wallet-swatch.is-custom.is-open { border-color: var(--line-strong); }
.wallet-swatch-name.is-custom { position: relative; }
.wallet-swatch-name.is-custom:not([style]) {
  background: conic-gradient(from 90deg, rgba(224, 86, 63, 0.25), rgba(79, 182, 217, 0.25), rgba(169, 139, 232, 0.25), rgba(224, 86, 63, 0.25));
}
.look-wheel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(2, 4, 6, 0.55);
}
.look-wheel[hidden] { display: none; }
.look-wheel-pad {
  position: relative;
  flex: none;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
}
.look-wheel-pad:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.look-wheel-disc { display: block; border-radius: 50%; }
.look-wheel-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.look-wheel-side { display: grid; gap: 10px; flex: 1; min-width: 140px; }
.look-wheel-label { display: grid; gap: 5px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.look-wheel-bright {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  margin: 0;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, #000, var(--wheel-hue, #fff));
  cursor: pointer;
}
.look-wheel-bright::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 18px;
  border: 2px solid #fff;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.look-wheel-bright::-moz-range-thumb {
  width: 8px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.look-wheel-hexrow { display: flex; align-items: center; gap: 8px; }
.look-wheel-chip { flex: none; width: 26px; height: 26px; border: 1px solid var(--line-strong); }
.look-wheel-hex { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; text-transform: lowercase; letter-spacing: 0.04em; }
.look-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.look-font {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.look-font:hover { border-color: var(--line-strong); }
.look-font[aria-checked="true"] { border-color: var(--accent); background: var(--accent-wash); }
.look-font:focus-visible { outline: 1px solid var(--accent); }
.look-font-sample { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--ink-bright); }
.look-font-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }

/* Settings: a whole palette as dots, named on hover. */
.settings-choice.is-compact { gap: 4px; }
.settings-choice.is-compact .settings-choice-option { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-left: 1px solid var(--line-strong); }
.settings-choice.is-compact .settings-choice-option[aria-checked="true"] { border-color: var(--accent); }
.settings-choice.is-compact .settings-swatch { width: 14px; height: 14px; margin: 0; }
.settings-choice.is-compact .settings-choice-option.is-word { width: auto; height: 28px; padding: 0 9px; border-left: 1px solid var(--line-strong); font-size: 12px; }
.settings-choice.is-compact .settings-choice-option.is-word[aria-checked="true"] { border-color: var(--accent); }
.settings-choice-option[style*="font-family"] { font-size: 14px; }

/* The pin in a window's bar (windows.js): to the top, to the bottom, forced
   (can't be moved or resized), or in the background. */
.win-pin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  opacity: 0.7;
}
.win-pin:hover,
.win-pin:focus-visible { color: var(--ink-bright); border-color: var(--line-strong); outline: none; opacity: 1; }
.win-pin svg { transition: transform 150ms var(--ease); }
.win[data-pin="top"] .win-pin { color: var(--accent); opacity: 1; }
.win[data-pin="top"] .win-pin svg { transform: rotate(-30deg); }
/* Pinned to the back: the pin turned point up, and the window a touch quieter. */
.win[data-pin="back"] .win-pin { color: var(--amber); opacity: 1; }
.win[data-pin="back"] .win-pin svg { transform: rotate(180deg); }
.win[data-pin="back"] { border-left-color: rgba(224, 168, 60, 0.45); }
.win[data-pin="top"] { border-left-color: var(--accent); }
.win[data-pin="top-lock"] .win-pin { color: var(--accent); opacity: 1; }
.win[data-pin="top-lock"] .win-pin svg { transform: rotate(-30deg); }
.win[data-pin="top-lock"] { border-left-color: var(--accent); }
.win[data-pin="back-lock"] .win-pin { color: var(--amber); opacity: 1; }
.win[data-pin="back-lock"] .win-pin svg { transform: rotate(180deg); }
.win[data-pin="back-lock"] { border-left-color: rgba(224, 168, 60, 0.45); }
/* Forced: a solid pin head, no resize grips, and a bar that doesn't drag. */
.win.is-locked .win-pin svg path:first-child { fill: currentColor; }
.win.is-locked .win-grip,
.win.is-still .win-grip { display: none; }
.win.is-locked .win-bar { cursor: default; }
/* In the background: part of the scenery. Only the pin takes the pointer. */
.win.is-still { pointer-events: none; box-shadow: none; border-left-color: var(--line); }
.win.is-still .win-pin { pointer-events: auto; color: var(--ink-dim); opacity: 1; }
.win.is-still .win-pin svg { transform: rotate(90deg); }
.win.is-still .win-close { visibility: hidden; }
.settings-name { align-items: center; }
.settings-name-value { font-size: 17px; color: var(--ink-bright); }
.corps-role-preview { font-size: 16px; }

/* ---- Market, after EVE's: a tree of items beside the book (market.js) */

/* A window whose panes scroll themselves rather than the window body. */
.win-body.is-flush { padding: 0; overflow: hidden; }

.mkt {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  container-type: inline-size;
  font-variant-numeric: tabular-nums;
}

.mkt-top {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 14px 0;
  border-bottom: 1px solid var(--line);
}

.mkt-tabs { display: flex; gap: 2px; }

.mkt-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 7px 14px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 18px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.mkt-tab[aria-selected="true"] { color: var(--ink-bright); border-bottom-color: var(--accent); }
.mkt-tab:hover,
.mkt-tab:focus-visible { color: var(--ink-bright); outline: none; }

.mkt-tab-badge {
  min-width: 18px;
  padding: 0 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-align: center;
}

.mkt-tabs-note { margin-left: auto; padding-bottom: 9px; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }

.mkt-body { display: flex; flex: 1 1 auto; min-height: 0; }

.mkt-browse {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 256px minmax(0, 1fr);
  min-width: 0;
}

.mkt-browse[hidden],
.mkt-page[hidden] { display: none; }

/* The left side: search, Browse / Quickbar, the tree. */
.mkt-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px 0 0 10px;
  border-right: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.28);
}

.mkt-search,
.mkt-sidetabs,
.mkt-only { margin-right: 10px; }
.mkt-search { padding: 6px 9px; font-size: 13px; }
.mkt-sidetabs { display: flex; gap: 2px; }
.mkt-sidetabs .comms-tab { flex: 1 1 0; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.mkt .comms-tab[aria-selected="true"],
.mkt .comms-tab[aria-checked="true"] { color: var(--ink-bright); border-bottom-color: var(--accent); }

.mkt-only {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-dim);
  cursor: pointer;
}

.mkt-only input { margin: 0; accent-color: var(--accent); }
.mkt-only:hover { color: var(--ink); }

.mkt-tree { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 6px 12px 0; }

.mkt-node {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px 4px calc(8px + var(--depth, 0) * 14px);
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.mkt-node:hover,
.mkt-node:focus-visible { background: rgba(150, 196, 224, 0.06); outline: none; }
.mkt-node[aria-current="true"] { border-left-color: var(--accent); background: var(--accent-wash); color: var(--ink-bright); }
.mkt-node.is-group { padding-top: 6px; padding-bottom: 6px; font-size: 13px; color: var(--ink-bright); }
.mkt-node.is-top { margin-top: 2px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

.mkt-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.75;
  transform: rotate(-45deg);
  transition: transform 120ms var(--ease);
}

.mkt-node[aria-expanded="true"] .mkt-chevron { transform: rotate(45deg); }
.mkt-node-name { display: grid; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mkt-node-name > span { overflow: hidden; text-overflow: ellipsis; }
.mkt-node-sub { font-size: 11px; color: var(--ink-dim); }
.mkt-node-price { font-size: 12px; color: var(--ink); }
.mkt-node-count { font-size: 11px; letter-spacing: 0.02em; color: var(--ink-dim); }
.mkt-node-count.is-active { color: var(--accent); }
.is-none { color: var(--ink-dim); opacity: 0.6; }
.mkt-node-price.is-none { opacity: 0.45; }

.mkt-quick-head {
  padding: 8px 8px 3px 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* The right side, and the full-width pages (My orders, Transactions). */
.mkt-detail,
.mkt-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px 18px;
}

.mkt-page { flex: 1 1 auto; }
.mkt-page-inner { display: flex; flex-direction: column; gap: 12px; }
.mkt-pad { padding: 12px; }
.mkt-back { display: none; }

.mkt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-dim); }
.mkt-crumb { padding: 0; border: 0; background: transparent; color: var(--ink-dim); font: inherit; cursor: pointer; }
button.mkt-crumb:hover,
button.mkt-crumb:focus-visible { color: var(--accent); outline: none; }
.mkt-crumb.is-here { color: var(--ink); cursor: default; }
.mkt-crumb-sep { opacity: 0.6; }

.mkt-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}

.mkt-link:hover,
.mkt-link:focus-visible { color: var(--accent); outline: none; }

.mkt-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-bright);
}

.mkt-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.mkt-head-count { font-size: 12px; color: var(--ink-dim); text-transform: none; letter-spacing: 0; font-weight: 400; }
.mkt-sub-head { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.mkt-sub-head .mkt-link { color: var(--accent); }

/* The exchange at a glance. */
.mkt-hero {
  display: grid;
  gap: 4px;
  padding: 14px 18px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    linear-gradient(135deg, #16283a, #0c1620 70%);
}

.mkt-hero .wallet-card-top { margin-bottom: 8px; }
.mkt-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mkt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mkt-stats.is-fit { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.mkt-stat {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
}

.mkt-hero .mkt-stat { padding: 0; border: 0; background: none; }
/* A figure on its own reads better in proportional digits. */
.mkt-stat-value { overflow: hidden; font-size: 19px; color: var(--ink-bright); font-variant-numeric: normal; text-overflow: ellipsis; white-space: nowrap; }
.mkt-hero .mkt-stat-value { font-size: 24px; font-weight: 600; }
.mkt-stat-sub { overflow: hidden; font-size: 12px; color: var(--ink-dim); text-overflow: ellipsis; white-space: nowrap; }

.mkt-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.mkt-cat { grid-template-columns: 44px minmax(0, 1fr) 14px; grid-template-areas: "mark name go" "mark sub go"; }
.mkt-cat-mark { border-color: var(--line-strong); background: rgba(5, 8, 12, 0.5); }
.wallet-category-mark.mkt-cat-mark svg { width: 26px; height: 26px; }

/* Tables: a grid per row, so columns line up without a <table>. */
.mkt-table { display: flex; flex-direction: column; }

.mkt-row {
  display: grid;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
}

button.mkt-row { cursor: pointer; }
button.mkt-row:hover,
button.mkt-row:focus-visible { background: rgba(150, 196, 224, 0.06); outline: none; }

.mkt-row.is-head {
  padding-top: 2px;
  padding-bottom: 5px;
  border-top: 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.mkt-row.is-head + .mkt-row,
.mkt-row.is-head + .wallet-line .mkt-row { border-top: 0; }
.mkt-row .is-num { text-align: right; white-space: nowrap; }

.mkt-items .mkt-row { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); }
.mkt-book-table.is-sell .mkt-row { grid-template-columns: minmax(84px, 0.9fr) minmax(84px, 0.9fr) minmax(0, 2.2fr) 74px 74px; }
.mkt-book-table.is-buy .mkt-row { grid-template-columns: minmax(84px, 0.9fr) minmax(84px, 0.9fr) 84px minmax(0, 2.2fr) 74px 74px; }
.mkt-order-table .mkt-row { grid-template-columns: minmax(0, 2.2fr) minmax(96px, 0.9fr) minmax(86px, 0.8fr) minmax(96px, 0.9fr) 70px minmax(132px, auto); }
.mkt-closed .mkt-row { grid-template-columns: minmax(0, 2fr) 104px 96px 118px 64px; }
.mkt-tx .mkt-row { grid-template-columns: 58px minmax(0, 2fr) 84px 96px 120px; }
.mkt-days .mkt-row { grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)); }
.mkt-recent .mkt-row { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.mkt-held-table .mkt-row { grid-template-columns: minmax(0, 1fr) 110px auto; }

.mkt-sort {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.mkt-sort.is-num { justify-content: flex-end; }
.mkt-sort[aria-sort="ascending"],
.mkt-sort[aria-sort="descending"],
.mkt-sort:hover,
.mkt-sort:focus-visible { color: var(--ink-bright); outline: none; }
.mkt-sort-mark { width: 8px; color: var(--accent); }

.mkt-item-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mkt-item-cell svg { flex: 0 0 auto; }
.mkt-item-text { display: grid; min-width: 0; }
.mkt-item-name { overflow: hidden; color: var(--ink-bright); text-overflow: ellipsis; white-space: nowrap; }
.mkt-item-sub { overflow: hidden; font-size: 11px; color: var(--ink-dim); text-overflow: ellipsis; white-space: nowrap; }
.mkt-item-link { display: grid; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mkt-cell-sub { display: block; font-size: 11px; color: var(--ink-dim); }
.mkt-change { margin-left: 6px; font-size: 11px; white-space: nowrap; }
.mkt-row .mkt-change { display: block; margin: 0; }
.mkt-change.is-up { color: #7fd4a4; }
.mkt-change.is-down { color: #f0907a; }

.mkt-tag {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 15px;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.mkt-item-sub .mkt-tag { margin-right: 6px; }
.mkt-tag.is-mine { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }

/* The book: sellers above buyers, yours marked, the best price brighter. */
.mkt-book { display: flex; flex-direction: column; }
.mkt-book-head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.mkt-book-head .settings-heading { padding-bottom: 0; border-bottom: 0; }
.mkt-small { padding: 3px 8px; font-size: 11px; }
.mkt-empty-book { padding: 10px 8px; border-top: 1px solid var(--line-strong); }
.mkt-qty { display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: 6px; }
.mkt-book-row.is-mine { background: rgba(var(--accent-rgb), 0.06); box-shadow: inset 2px 0 0 var(--accent); }
.mkt-book-row.is-best .mkt-price { color: var(--ink-bright); font-weight: 600; }
.mkt-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-col-ly,
.mkt-col-exp { color: var(--ink-dim); }
.mkt-held { padding: 8px 10px; border: 1px solid var(--line); }
.mkt-held .mkt-link { color: var(--accent); }

/* One item: its icon, name, groups, and Buy / Sell. */
.mkt-item-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }

.mkt-item-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.5);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.mkt-item-title { min-width: 0; }
.mkt-item-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; font-size: 12px; color: var(--ink-dim); }
.mkt-tier { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.mkt-tier.is-t1 { color: var(--t1); }
.mkt-tier.is-t2 { color: var(--t2); }
.mkt-tier.is-t3 { color: var(--t3); }
.mkt-item-actions { display: flex; gap: 6px; }
.mkt-item-actions .win-button { min-width: 76px; }

.mkt-star {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mkt-star.is-on,
.mkt-star:hover,
.mkt-star:focus-visible { color: var(--amber); outline: none; }

.mkt-subtabs { border-bottom: 1px solid var(--line); }

/* Price history. */
.mkt-history { display: flex; flex-direction: column; gap: 12px; }
.mkt-history-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mkt-chart { position: relative; display: flex; flex-direction: column; gap: 6px; }
.mkt-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-dim); }
.mkt-legend > span { display: inline-flex; align-items: center; gap: 6px; }

.mkt-chart-empty {
  display: grid;
  gap: 6px;
  padding: 28px 12px;
  border: 1px solid var(--line);
  text-align: center;
}

.mkt-chart-empty p { margin: 0; }

.pchart { position: relative; width: 100%; outline: none; cursor: crosshair; touch-action: pan-y; }
.pchart:focus-visible { box-shadow: 0 0 0 1px var(--accent); }
.pchart-svg { display: block; }
.pchart-grid { stroke: rgba(150, 196, 224, 0.09); stroke-width: 1; shape-rendering: crispEdges; }
.pchart-axis { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.pchart-tick { fill: var(--ink-dim); font-family: var(--font); font-size: 11px; font-variant-numeric: tabular-nums; }
.pchart-band { fill: rgba(var(--accent-rgb), 0.12); }
.pchart-range { stroke: rgba(var(--accent-rgb), 0.35); stroke-width: 2; stroke-linecap: round; }
.pchart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pchart-ma { fill: none; stroke: rgba(195, 211, 223, 0.7); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pchart-vol { fill: rgba(150, 196, 224, 0.38); }
.pchart-dot { fill: var(--accent); stroke: #0c141c; stroke-width: 2; }
.pchart-crossline { stroke: rgba(234, 244, 251, 0.4); stroke-width: 1; shape-rendering: crispEdges; }

.pchart-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 13, 18, 0.96);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.8);
  font-size: 12px;
  pointer-events: none;
}

.pchart-tip[hidden] { display: none; }
.pchart-tip-date { margin-bottom: 2px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.pchart-tip-row { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 7px; }
.pchart-tip-row strong { color: var(--ink-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.pchart-tip-row span:last-child { color: var(--ink-dim); }
.pchart-key { display: inline-block; width: 14px; height: 2px; background: var(--accent); }
.pchart-key.is-band { height: 8px; background: rgba(var(--accent-rgb), 0.25); }
.pchart-key.is-ma { background: rgba(195, 211, 223, 0.7); }
.pchart-key.is-vol { width: 6px; height: 9px; border-radius: 1.5px 1.5px 0 0; background: rgba(150, 196, 224, 0.38); }

/* Info: what it is, what makes it, what it makes. */
.mkt-about { max-width: 72ch; margin: 0; line-height: 1.5; color: var(--ink); }
.mkt-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mkt-recipe-in,
.mkt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mkt-recipe-arrow { font-size: 18px; color: var(--ink-dim); }

.mkt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.mkt-chip:hover,
.mkt-chip:focus-visible { border-color: var(--accent); color: var(--ink-bright); outline: none; }
.mkt-chip-n { color: var(--ink-dim); }

/* My orders. */
.mkt-orders { display: flex; flex-direction: column; }
.mkt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.mkt-fill { display: block; width: 64px; height: 3px; margin: 4px 0 0 auto; background: rgba(150, 196, 224, 0.12); }
.mkt-fill > span { display: block; height: 100%; background: #7fd4a4; }
.mkt-modify { display: grid; justify-items: end; gap: 4px; }
.mkt-price-input { width: 104px; padding: 4px 6px; font-size: 13px; text-align: right; }
.mkt-modify-buttons { display: flex; gap: 4px; }
.mkt-inline-error { font-size: 11px; text-align: right; white-space: normal; }
.win-button.is-armed { border-color: var(--danger); color: #ffd9cf; }
.mkt-order.is-flash { animation: mkt-flash 1.8s var(--ease); }
@keyframes mkt-flash { from { background: rgba(var(--accent-rgb), 0.24); } to { background: transparent; } }
.reduce-motion .mkt-order.is-flash { animation: none; background: rgba(var(--accent-rgb), 0.1); }

.mkt-state { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.mkt-state.is-filled { color: #7fd4a4; }
.mkt-state.is-expired { color: var(--amber); }
.mkt-state.is-canceled,
.mkt-state.is-gone { color: var(--ink-dim); }

/* Transactions. */
.mkt-tx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mkt-tx-item { width: auto; min-width: 170px; padding: 5px 8px; font-size: 13px; }

.mkt-side-tag {
  display: inline-block;
  margin-right: 7px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 15px;
  text-transform: uppercase;
  vertical-align: 1px;
  color: var(--ink);
}

.mkt-side-tag.is-sell { border-color: rgba(127, 212, 164, 0.45); color: #7fd4a4; }
.mkt-tx-row[aria-expanded="true"] { background: rgba(150, 196, 224, 0.04); }
.mkt-tx-detail { padding: 4px 8px 12px 76px; }

/* Buying and selling: a sheet over the window. */
.mkt-layer { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; }
.mkt-layer[hidden] { display: none; }
.mkt-scrim { position: absolute; inset: 0; background: rgba(3, 6, 9, 0.64); }

.mkt-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(580px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 14px 16px 16px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  background: linear-gradient(180deg, rgba(20, 31, 42, 0.99), rgba(10, 16, 22, 0.99));
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.9);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.mkt-sheet-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mkt-sheet-title { display: grid; }
.mkt-sheet-title strong { font-size: 18px; font-weight: 600; color: var(--ink-bright); }
.mkt-sheet-form { gap: 14px; }
.mkt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mkt-form-row[hidden] { display: none; }
.mkt-with-button { display: flex; gap: 6px; }
.mkt-with-button .win-input { flex: 1 1 auto; min-width: 0; }
.mkt-with-button .win-button[hidden] { display: none; }
.mkt-units,
.mkt-price-field { font-size: 17px; font-variant-numeric: tabular-nums; }
.mkt-hints { display: flex; flex-wrap: wrap; gap: 4px; }

.mkt-hint {
  display: inline-flex;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.mkt-hint strong { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.mkt-hint:hover,
.mkt-hint:focus-visible { border-color: var(--accent); outline: none; }

.mkt-summary {
  display: grid;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(150, 196, 224, 0.03);
}

.mkt-summary p { margin: 0; font-size: 13px; line-height: 1.45; }
.mkt-plan { color: var(--ink); }
.mkt-warn { color: var(--amber); }
.mkt-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--line); }
.mkt-total span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.mkt-total strong { font-size: 20px; font-weight: 600; color: var(--ink-bright); }
.mkt-confirm { min-width: 190px; }
.mkt-receipt { padding-top: 8px; }
.mkt-receipt p { margin: 0; }
.mkt-receipt-amount { font-size: 26px; font-weight: 600; color: var(--ink-bright); }
.mkt-receipt-actions { width: 100%; margin-top: 14px; }
.mkt-sheet-empty { min-height: 0; padding: 24px 8px; }

/* Logistics: a way from an item's request or export to its market page. */
.flog-market-link {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.flog-market-link:hover,
.flog-market-link:focus-visible { color: var(--ink-bright); outline: none; }

/* A narrow Market (a phone, or a small window): the tree or the page, not
   both, and the less important columns go. */
@container (max-width: 720px) {
  .mkt-browse { grid-template-columns: minmax(0, 1fr); }
  .mkt[data-pane="list"] .mkt-detail,
  .mkt[data-pane="detail"] .mkt-side { display: none; }
  .mkt-side { padding-right: 10px; border-right: 0; }
  .mkt-tree { padding-right: 0; }
  .mkt-back { display: inline-block; }
  .mkt-tabs-note { display: none; }
  .mkt-top { padding: 4px 6px 0; }
  .mkt-tab { padding: 7px 8px 8px; letter-spacing: 0.06em; }
  .mkt-subtabs .comms-tab { padding: 5px 7px; letter-spacing: 0.06em; }
  .mkt-stats,
  .mkt-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-col-ly,
  .mkt-col-exp,
  .mkt-col-min,
  .mkt-col-vol,
  .mkt-col-when,
  .mkt-col-total,
  .mkt-col-price { display: none; }
  .mkt-items .mkt-row { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  .mkt-book-table.is-sell .mkt-row,
  .mkt-book-table.is-buy .mkt-row { grid-template-columns: minmax(70px, 0.8fr) minmax(76px, 0.8fr) minmax(0, 1.6fr); }
  .mkt-order-table .mkt-row { grid-template-columns: minmax(0, 1.8fr) minmax(70px, 0.8fr) minmax(70px, 0.8fr) auto; }
  .mkt-closed .mkt-row { grid-template-columns: minmax(0, 2fr) 80px 80px 96px; }
  .mkt-tx .mkt-row { grid-template-columns: 50px minmax(0, 2fr) 64px 100px; }
  .mkt-item-head { grid-template-columns: auto minmax(0, 1fr); }
  .mkt-item-actions { grid-column: 1 / -1; }
  .mkt-form-row { grid-template-columns: 1fr; }
  .mkt-tx-detail { padding-left: 8px; }
}

/* ------------------------------------------------------------- places
   A location anywhere in the game is a link (ui/places.js): click to go
   there, right-click to name the system or copy its location code. Your
   own name for a system carries its location code beside it. */

.place-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-align: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.place-link:hover,
.place-link:focus-visible {
  color: var(--ink-bright);
  text-decoration-color: var(--accent);
  outline: none;
}

.place-code {
  margin-left: 0.45em;
  font-size: 0.86em;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.place-suffix { color: inherit; }

.place-pop { width: min(340px, calc(100vw - 16px)); }

.place-pop-real {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ink-dim);
}

.place-pop-real b { color: var(--ink-bright); font-weight: 600; }

.place-pop-note { margin: 2px 0 8px; }

.sysview-name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.sysview-code {
  margin-left: 0.5em;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.sysview-rename { pointer-events: auto; }

/* The map card: your own name for a system over its real one. */
.map-card-real {
  margin: -6px 0 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  user-select: text;
}

.map-card-buttons {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.map-card-buttons .map-card-copy { margin-bottom: 0; }
.map-card-buttons .map-card-rename { width: auto; flex: 0 0 auto; }

/* Factory Floor: whose split this is (every miner of yours round the planet). */
.factory-split-for {
  margin: 0;
  font-size: 12px;
  color: var(--ink-dim);
}

/* Logistics: the amount runs up to the most the station holds, "Max". */
.flog-ticks {
  display: flex;
  justify-content: space-between;
  margin: 2px 120px 0 2px;
  font-size: 11px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.flog-tick-max { color: var(--ink); }
.flog-amount-note { margin: 4px 0 0; }
.flog-amount-warn { margin: 4px 0 0; }
@media (max-width: 720px) { .flog-ticks { margin-right: 100px; } }

.flog-panel-sub { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-dim); white-space: nowrap; }

/* An inventory slot at the most its station holds: nothing more comes in. */
.fslot.is-capped { border-color: rgba(233, 201, 76, 0.65); }
.fslot.is-capped .fslot-bar i { background: var(--slot-fill); }

.flog-head-go { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }

/* ---- Comms: the bug report and suggestion boards (ui/feedback.js) */

.comms-tab-gap { width: 10px; }
.comms-compose-button[hidden] { display: none; }

/* The Bug Reports window (ui/bugreports.js): the bug board, out of Comms. */
.bugs-intro { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--ink-dim); font-size: 13px; line-height: 1.4; }

.fb { display: flex; flex-direction: column; gap: 8px; }
.fb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-sorts .comms-tab[aria-checked="true"] { color: var(--ink-bright); border-bottom-color: var(--accent); }
.fb-search { flex: 1 1 160px; min-width: 0; }

.fb-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fb-tags[hidden] { display: none; }

/* A tag: a small pill. Filters and suggestions are buttons; on a post you
   wrote, each has an × to take it off. */
.fb-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(150, 196, 224, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}
button.fb-tag { cursor: pointer; }
button.fb-tag:hover,
button.fb-tag:focus-visible { border-color: var(--accent); color: var(--ink-bright); outline: none; }
.fb-tag.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--ink-bright); }
.fb-tag.is-offer { border-style: dashed; color: var(--ink-dim); background: transparent; }
.fb-tag-count { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.fb-tag-x {
  padding: 0 0 0 2px;
  border: 0;
  background: none;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.fb-tag-x:hover,
.fb-tag-x:focus-visible { color: var(--ink-bright); outline: none; }

.fb-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 4px; }
.fb-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fb-row-main:hover .fb-row-title,
.fb-row-main:focus-visible .fb-row-title { color: var(--accent); }
.fb-row-main:focus-visible { outline: none; }
.fb-row-title { font-size: 14px; color: var(--ink-bright); overflow-wrap: anywhere; }
.fb-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fb-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fb-row-who { font-size: 11px; color: var(--ink-dim); }

/* The upvote: an arrow over a count, lit once you have upvoted. */
.fb-vote {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  padding: 4px 6px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  line-height: 1.1;
  cursor: pointer;
}
.fb-vote-arrow { font-size: 11px; }
.fb-vote-count { font-size: 13px; font-weight: 600; color: var(--ink-bright); font-variant-numeric: tabular-nums; }
.fb-vote:hover:not(:disabled),
.fb-vote:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.fb-vote.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.fb-vote:disabled { cursor: default; opacity: 0.75; }
.fb-vote.is-big { min-width: 48px; padding: 6px 8px; }
.fb-vote.is-big .fb-vote-count { font-size: 16px; }

.fb-post { display: flex; flex-direction: column; gap: 10px; }
.fb-post-head { display: flex; align-items: flex-start; gap: 12px; }
.fb-post-title { min-width: 0; }
.fb-post-title .comms-message-subject { margin-top: 0; overflow-wrap: anywhere; }

.fb-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fb-tagrow-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.fb-tag-editor { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; min-width: 0; }
.fb-tag-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fb-tag-input { flex: 1 1 120px; min-width: 100px; max-width: 220px; padding-top: 3px; padding-bottom: 3px; font-size: 12px; }
.fb-tag-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fb-tag-problem { font-size: 12px; }
.fb-tag-problem[hidden] { display: none; }

.fb-form-head { margin: 0; font-size: 15px; color: var(--ink-bright); }
.fb-form-tags { gap: 6px; }
/* In the form the editor stacks under its label: its 260px basis is meant
   as a width on a post's tag row, not a height here. */
.fb-form-tags .fb-tag-editor { flex: 0 0 auto; }
/* On your own post, the suggestions show while you are adding a tag. */
.fb-tagrow.is-mine { align-items: flex-start; }
.fb-tagrow.is-mine > .fb-tagrow-label { padding-top: 4px; }
.fb-tagrow.is-mine .fb-tag-offer { display: none; }
.fb-tagrow.is-mine:focus-within .fb-tag-offer { display: flex; }

/* Screenshots on bug reports (ui/screenshot.js): the camera button, a
   board row's count, and the tiles in the form and under a post. */
.fb-shot-button { display: inline-flex; align-items: center; gap: 6px; }
.fb-shot-button[hidden] { display: none; }
.fb-shot-button svg { flex: 0 0 auto; }
.fb-row-shots { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-dim); }
.fb-shots-row { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fb-shots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-form-shots { gap: 6px; }
.fb-shot { position: relative; }
.fb-shot-open {
  display: block;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: #05080c;
  cursor: zoom-in;
}
.fb-shot-open:hover,
.fb-shot-open:focus-visible { border-color: var(--accent); outline: none; }
.fb-shot-open img { display: block; width: 168px; height: 105px; object-fit: cover; }
.fb-shot-x {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.85);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.fb-shot-x:hover,
.fb-shot-x:focus-visible { border-color: var(--accent); color: var(--ink-bright); outline: none; }
.fb-shot-x.is-armed { border-color: var(--danger); background: rgba(52, 14, 10, 0.94); color: var(--ink-bright); font-size: 11px; }

/* A screenshot shown big, over everything. */
.shot-viewer {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: rgba(3, 6, 10, 0.9);
  backdrop-filter: blur(2px);
  outline: none;
}
.shot-viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 16px 10px;
}
.shot-viewer-img {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.9);
}
.shot-viewer-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 64px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.7);
  color: var(--ink);
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.shot-viewer-nav[hidden] { display: none; }
.shot-viewer-nav:hover,
.shot-viewer-nav:focus-visible { border-color: var(--accent); color: var(--ink-bright); outline: none; }
.shot-viewer-bar { display: flex; align-items: center; gap: 8px; padding: 0 16px 16px; }
.shot-viewer-count { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-dim); }
.shot-viewer a.win-button { text-decoration: none; }
.shot-viewer a.win-button[hidden] { display: none; }

@media (max-width: 720px) {
  .fb-shot-open img { width: 132px; height: 82px; }
  .shot-viewer-stage { padding: 8px; gap: 4px; }
  .shot-viewer-nav { width: 32px; }
}

/* ------------------------------------------------------------ Research */

.research { display: flex; flex-direction: column; gap: 10px; }
.research-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
}
.research-summary-big { font-size: 22px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-bright); font-variant-numeric: tabular-nums; }
.research-summary-text { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.research-how { margin: 0; }

.research-nolabs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
}
.research-nolabs .win-note { margin: 0; }
.research-nolabs .win-button { grid-column: 1 / -1; justify-self: end; }

.research-labs,
.research-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.research-lab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink-dim);
  background: rgba(5, 8, 12, 0.45);
}
.research-lab.is-working { border-left-color: #5fd17a; }
.research-lab.is-waiting { border-left-color: #e9c94c; }
.research-lab.is-done { border-left-color: var(--accent); }
.research-lab .factory-icon { color: var(--accent); }
.research-lab-text { display: grid; gap: 1px; min-width: 0; }
.research-lab-name { font-size: 13px; color: var(--ink-bright); }
.research-lab-name small { font-size: 11px; color: var(--ink-dim); }
.research-lab-where { font-size: 12px; color: var(--ink-dim); overflow-wrap: anywhere; }
.research-lab-doing { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; }
.research-lab-project { color: var(--ink); }
.research-lab-state { color: var(--ink-dim); }
.research-lab.is-working .research-lab-state { color: #5fd17a; }
.research-lab.is-waiting .research-lab-state { color: #e9c94c; }
.research-lab .win-button { grid-column: 3; grid-row: 1 / span 2; }

.research-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: rgba(150, 196, 224, 0.03);
}
.research-card.is-active { background: var(--accent-wash); }
.research-card.is-locked { border-left-style: dashed; border-left-color: var(--amber); background: rgba(5, 8, 12, 0.35); }
.research-card.is-done { border-left-color: #5fd17a; }
.research-card.is-flash { animation: factory-flash 1.8s var(--ease); }
.research-card-head { display: flex; align-items: center; gap: 8px; }
.research-card-name { font-size: 15px; font-weight: 600; color: var(--ink-bright); }
.research-card-head .research-chip { margin-left: auto; }
.research-card-blurb { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.research-card.is-locked .research-card-blurb { color: var(--ink-dim); }
.research-card-line { margin: 0; font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.research-card-line span:first-child { color: var(--ink); }
.research-card-step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--ink); }
.research-card-label { min-width: 62px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.research-card-dim { color: var(--ink-dim); }
.research-item { display: inline-flex; align-items: center; gap: 3px; }
.research-item b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-bright); }
.research-unlock { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--line-strong); color: var(--ink-bright); }
.research-unlock svg { color: var(--accent); }
.research-card-labs { margin: 0; font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.research-card .factory-lock { margin: 0; }

@media (max-width: 720px) {
  .research-lab { grid-template-columns: auto minmax(0, 1fr); }
  .research-lab .win-button { grid-column: 1 / -1; grid-row: auto; justify-self: end; }
}

/* ---- Favorites (ui/favorites.js, ui/places.js)
 * The star toggle: hollow and dim until a system is a favorite, then gold
 * and filled. Used on the map card, beside the system view's title and on
 * each row of the Favorites window. */
.fav-star {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.13s var(--ease), border-color 0.13s var(--ease);
}
.fav-star:hover,
.fav-star:focus-visible { color: #e2b55a; border-color: var(--line-strong); outline: none; }
.fav-star.is-on { color: #e2b55a; }
.fav-star.is-on svg path { fill: currentColor; }
.fav-star.is-on:hover svg path { fill: rgba(226, 181, 90, 0.35); }
.map-card-fav { margin-left: auto; width: 22px; height: 22px; }

.favorites { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.fav-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fav-search { flex: 1 1 180px; min-width: 0; }
.fav-sort { flex: 0 0 auto; width: auto; }
.fav-count { margin-left: auto; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.fav-add-slot:empty { display: none; }
.fav-add { display: inline-flex; align-items: center; gap: 6px; }
.fav-add svg { color: #e2b55a; }
.fav-list { flex: 1 1 auto; }
.fav-rows { display: flex; flex-direction: column; gap: 6px; }
.fav-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 10px;
  padding: 8px 10px 8px 6px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--t1);
  background: rgba(150, 196, 224, 0.03);
}
.fav-row[data-tier="2"] { border-left-color: var(--t2); }
.fav-row[data-tier="3"] { border-left-color: var(--t3); }
.fav-row:hover { background: var(--accent-wash); }
.fav-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fav-row-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fav-row-name { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-tier { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; color: var(--t1); }
.fav-tier[data-tier="2"] { color: var(--t2); }
.fav-tier[data-tier="3"] { color: var(--t3); }
.fav-row-facts,
.fav-row-built { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-dim); }
.fav-row-built.is-built { color: var(--ink); }
.fav-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fav-row-added { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.fav-empty .fav-empty-star { color: #e2b55a; opacity: 0.7; }
.fav-none { margin: 4px 2px; }

@media (max-width: 720px) {
  .fav-row { grid-template-columns: auto minmax(0, 1fr); }
  .fav-row-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- Factory Floor: the one line pointing at buildings research unlocks. */
.factory-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--line-strong);
  font-size: 12px;
  color: var(--ink-dim);
}

/* ---- Research: buildings a project unlocks, with what they cost. */
.research-unlocks { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.research-unlock-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.35);
}
.research-unlock-row .factory-icon svg { color: var(--accent); }
.research-unlock-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.research-unlock-text p { margin: 0; }
.research-unlock-name { font-size: 13px; font-weight: 600; color: var(--ink-bright); }
.research-unlock-blurb { color: var(--ink); line-height: 1.4; }
.research-unlock-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink); }
.research-unlock-cost .research-card-label { min-width: 0; }
.research-unlock-cost > b { font-weight: 600; color: var(--ink-bright); }

/* ---- Sidebar buttons, renamed and restyled (ui/sidebarstyle.js). The
 * editor's preview draws the button as the sidebar would: open, then
 * collapsed. */
.sidebar-preview { display: flex; align-items: center; gap: 10px; width: 100%; }
.sidebar-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--row-h);
  padding: 0 12px;
  background: linear-gradient(180deg, var(--rail-top), var(--rail-bottom));
  border: 1px solid var(--line);
  color: var(--ink-bright);
}
.sidebar-preview-row:first-child { flex: 1 1 auto; min-width: 0; }
.sidebar-preview-row.is-collapsed { flex: 0 0 auto; width: var(--row-h); justify-content: center; padding: 0; }
.sidebar-preview .neocom-text { font-size: 13px; }

/* ------------------------------------------------------------------------
   An Assembly Bay's floor (bayview.js): tools down the left, the floor on a
   canvas, the panel for what is selected on the right. Over the station. */
.viewport.is-map-closed .bayview { display: none; }
.bayview {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--void);
}
.bayview[hidden] { display: none; }

.bay-flow { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.bay-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.6);
  font-size: 12px;
  color: var(--ink-bright);
  font-variant-numeric: tabular-nums;
}
.bay-flow-chip small { color: var(--ink-dim); }

.bay-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0; }

.bay-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 22, 31, 0.96), rgba(8, 13, 18, 0.96));
  overflow-y: auto;
}
.bay-tool {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  width: 124px;
  padding: 7px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.bay-tool svg { grid-row: 1 / 3; }
.bay-tool kbd { font: inherit; font-size: 10px; letter-spacing: 0.12em; color: var(--ink-dim); }
.bay-tool:hover,
.bay-tool:focus-visible { border-color: var(--line-strong); color: var(--ink-bright); outline: none; }
.bay-tool.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.bay-tool.is-on kbd { color: var(--accent); }
.bay-tool.is-rotate svg { transform: rotate(var(--dir, 0deg)); transition: transform 0.15s; }
.bay-tool-gap { flex: 1; min-height: 6px; }

.bay-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.bay-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; touch-action: none; cursor: grab; }
.bay-canvas[data-tool="belt"],
.bay-canvas[data-tool="splitter"],
.bay-canvas[data-tool="machine"],
.bay-canvas[data-tool="remove"] { cursor: crosshair; }
.bay-canvas:focus-visible { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5); }

.bay-zoom { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 4px; }
.bay-zoom-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: rgba(10, 16, 22, 0.92);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.bay-zoom-btn:hover,
.bay-zoom-btn:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.bay-readout {
  position: absolute;
  left: 118px;
  bottom: 16px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  pointer-events: none;
}
.bay-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 8px 14px;
  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.04em;
  color: var(--ink-bright);
  pointer-events: none;
}
.bay-toast.is-bad { border-left-color: var(--danger); }
.bay-toast[hidden] { display: none; }

/* The panel sits in its own column rather than over the floor. */
.station-panel.bay-panel { position: relative; top: auto; right: auto; bottom: auto; width: 340px; margin: 8px 12px 8px 0; }
.bay-hint { padding-top: 8px; }

.bay-open { justify-self: stretch; }
.bay-flow-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.bay-flow-row b { font-weight: 600; color: var(--ink-bright); font-variant-numeric: tabular-nums; }
.bay-flow-label { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); }

.bay-recipe { display: grid; gap: 6px; }
.bay-recipe-part { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-bright); }
.bay-recipe-part b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bay-recipe-part small { font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.bay-recipe-part.is-out { padding-top: 6px; border-top: 1px dashed var(--line-strong); }

.bay-chosen { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(5, 8, 12, 0.5); }
.bay-chosen div { display: grid; line-height: 1.3; }
.bay-chosen b { font-weight: 600; color: var(--ink-bright); }
.bay-chosen small { font-size: 11px; color: var(--ink-dim); }
.bay-shelf { display: grid; gap: 4px; }
.bay-shelf .flog-shelf-name { margin: 4px 0 0; }
.bay-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.bay-pick {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.5);
  cursor: pointer;
}
.bay-pick small { position: absolute; right: 2px; bottom: 1px; font-size: 9px; color: var(--ink-bright); text-shadow: 0 0 3px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }
.bay-pick:hover,
.bay-pick:focus-visible { border-color: var(--accent); outline: none; }
.bay-pick.is-on { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }

.bay-how summary { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); cursor: pointer; }
.bay-how ul { display: grid; gap: 4px; margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.4; color: var(--ink); }

.station-slot.is-bay .station-slot-count { fill: var(--ink-dim); font-size: 8px; letter-spacing: 0.14em; }
.station-slot.is-bay.is-working .station-slot-count { fill: #5fd17a; }

/* On a phone: the floor on top, the tools in a row under it, the panel a
   sheet at the bottom. */
@media (max-width: 720px) {
  .bay-flow,
  .bay-hint { display: none; }
  .bay-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
  .bay-stage { grid-row: 1; }
  .bay-tools { grid-row: 2; flex-direction: row; justify-content: space-between; border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; }
  .bay-tool { grid-template-columns: auto; justify-items: center; width: auto; padding: 6px 8px; }
  .bay-tool svg { grid-row: auto; }
  .bay-tool-label,
  .bay-tool kbd,
  .bay-tool-gap { display: none; }
  .station-panel.bay-panel { grid-row: 3; width: auto; max-height: 36vh; margin: 0; }
  .bay-readout { display: none; }
}

/* Copy, cut and paste sit under a rule of their own; Paste waits for a copy. */
.bay-tool-rule { flex: none; height: 1px; margin: 4px 6px; background: var(--line); }
.bay-tool[hidden] { display: none; }
.bay-tool:disabled { opacity: 0.4; cursor: default; }
.bay-tool:disabled:hover { border-color: transparent; color: var(--ink); }
.bay-keys dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 6px 0 0; font-size: 12px; line-height: 1.4; }
.bay-keys dt { white-space: nowrap; }
.bay-keys dd { margin: 0; color: var(--ink); }
.bay-keys kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 12, 0.6);
  font: inherit;
  font-size: 11px;
  color: var(--ink-bright);
}
@media (max-width: 720px) {
  .bay-tool-rule { width: 1px; height: auto; margin: 4px 2px; }
}

/* ------------------------------------------------------------ sign-in gate
 * The whole page until a pilot is signed in (src/gate.js). Nothing of the
 * game shows behind it: the body starts .is-gated and the sidebar and the
 * viewport stay hidden until gate.js boots the game. */
.is-gated #neocom-root,
.is-gated #viewport { display: none; }

.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(96, 150, 208, 0.13), transparent 70%),
    radial-gradient(ellipse 60% 50% at 18% 85%, rgba(224, 168, 60, 0.06), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(var(--accent-rgb), 0.05), transparent 75%),
    var(--void);
}

.gate-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gate-card {
  position: relative;
  width: min(420px, 100%);
  padding: 34px 30px 26px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(14, 22, 31, 0.94), rgba(8, 13, 18, 0.94));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  text-align: center;
}

/* The accent rule across the top, fading out like the sidebar's cap. */
.gate-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.gate-mark {
  display: flex;
  justify-content: center;
  color: var(--accent);
}

.gate-mark svg { filter: drop-shadow(0 0 10px var(--accent-glow)); }

.gate-title {
  margin: 14px 0 6px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-bright);
  /* The letter spacing trails the last letter; this puts the words back in
     the middle. */
  text-indent: 0.16em;
}

.gate-tag,
.gate-note { text-wrap: balance; }

.gate-tag {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* Google renders its own button in here; it is left unstyled on purpose,
   since Google's terms cover how that button looks. Only the box is ours.
   The button is an iframe with a light color scheme, and under this dark
   page the browser paints such a frame an opaque white backdrop. Matching
   its scheme here is what makes that backdrop transparent. */
.gate-gsi {
  display: flex;
  justify-content: center;
  min-height: 44px;
  color-scheme: light;
}

.gate.is-busy .gate-gsi { opacity: 0.4; pointer-events: none; }

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

.gate-error[hidden],
.gate-retry[hidden] { display: none; }

.gate-retry {
  margin-top: 12px;
  padding: 8px 18px;
  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;
}

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

.gate-note {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-dim);
}

@media (max-width: 420px) {
  .gate-card { padding: 28px 18px 20px; }
  .gate-title { font-size: 21px; letter-spacing: 0.14em; text-indent: 0.14em; }
}