:root {
  color-scheme: dark;   /* dark native form controls */
  scrollbar-color: var(--border-bright) transparent;   /* inherited by every scroller */
  scrollbar-width: thin;
  --bg-void: #05070a;
  --bg-panel: #0b141d;
  --bg-panel-raised: #0f1e2b;
  --border-dim: #1d3b4a;
  --border-bright: #2f6b7a;
  --accent-self: #49e6d4;
  --accent-hostile: #ff7a52;
  --accent-critical: #ff4848;
  --accent-warn: #f2c14e;
  --text-primary: #d2e6ea;
  --text-dim: #5f7d86;

  /* Type scale. Every font-size in the client uses one of these; A-/A+ in
     the nav bar only changes --ui-scale (set inline on <html> by js/ui.js),
     so the hierarchy between sizes never drifts. */
  --ui-scale: 1;
  --font-xs: calc(10px * var(--ui-scale));   /* meta lines, chips, badges */
  --font-sm: calc(11px * var(--ui-scale));   /* labels, tabs, titles */
  --font-md: calc(12px * var(--ui-scale));   /* lists, log, module buttons */
  --font-lg: calc(14px * var(--ui-scale));   /* body, inputs */
  --font-xl: calc(16px * var(--ui-scale));   /* headings */
}

* {
  box-sizing: border-box;
}

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

body {
  background: radial-gradient(ellipse at 50% 0%, #0a1620 0%, var(--bg-void) 70%);
  color: var(--text-primary);
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--font-lg);
}

/* --- Panes (the content of one dock tab) --- */
.pane { padding: 10px 12px; }
/* fills the whole tab, for panes that manage their own scrolling/sizing */
.pane--fill { position: absolute; inset: 0; display: flex; flex-direction: column; }

.panel-title {
  font-size: var(--font-sm);
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0 0 10px 0;
  display: flex;
  justify-content: space-between;
}

/* tint the dock frame by what it's currently showing */
.dock-stack:has(> .dock-content > .pane--self) { border-color: color-mix(in srgb, var(--accent-self) 45%, var(--border-dim)); }
.dock-stack:has(> .dock-content > .pane--target) { border-color: color-mix(in srgb, var(--accent-hostile) 45%, var(--border-dim)); }

/* --- Vital bars --- */
.vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.vital-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-sm);
  color: var(--text-dim);
  margin-bottom: 3px;
}
.vital-label .value { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.vital-track {
  height: 8px;
  background: #060b10;
  border: 1px solid var(--border-dim);
}
.vital-fill { height: 100%; transition: width 0.15s linear; }
.vital-fill--hull { background: var(--accent-warn); }
.vital-fill--shield { background: var(--accent-self); }
.vital-fill--energy { background: #6ba8ff; }
.unit-frame--hostile .vital-fill--shield { background: var(--accent-hostile); }

.activity-line {
  margin-top: 8px;
  font-size: var(--font-md);
  color: var(--text-dim);
}
.activity-line .current { color: var(--text-primary); }

.destroyed-banner {
  margin-top: 8px;
  color: var(--accent-critical);
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* --- Viewport / scope --- */
/* The scope is the largest square that fits its tab: the host is a size
   container, so 100cqw/100cqh are the host's width/height. */
.scope-host {
  container-type: size;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.scope {
  position: relative;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  border: 1px solid var(--border-dim);
  /* the grid is drawn in the overlay, in world units (ScopePanel.GridLines) */
  background: radial-gradient(circle at 50% 50%, rgba(73, 230, 212, 0.05), transparent 60%);
  background-color: #060c12;
  overflow: hidden;
}
/* a SignalIcon on the scope, centred on its position and tinted by
   category or, for ships, allegiance (drawn in currentColor) */
.blip {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  display: flex;
  color: var(--text-dim);
  cursor: pointer;
}
.blip .hull-icon, .blip .signal-icon { margin: 0; overflow: visible; }
.blip--self { color: var(--accent-self); filter: drop-shadow(0 0 3px var(--accent-self)); }
.blip--hostile { color: var(--accent-hostile); filter: drop-shadow(0 0 3px var(--accent-hostile)); }
.blip-label {
  pointer-events: none;   /* clicks fall through to .scope, keeping OffsetX relative to it */
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-xs);
  white-space: nowrap;
  color: var(--text-dim);
}
.scope-hint {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: var(--font-xs);
  color: var(--text-dim);
}

/* --- Module bar --- */
.module-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.module-button {
  position: relative;
  flex: 1 1 calc(140px * var(--ui-scale));
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-bright);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-md);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.module-button:hover:not(:disabled) { border-color: var(--accent-self); }
.module-button:disabled {
  cursor: default;
  color: var(--text-dim);
  border-color: var(--border-dim);
}
.module-button .mod-name { display: block; font-weight: bold; }
.module-button .mod-key {
  position: absolute;
  top: 4px; right: 6px;
  font-size: var(--font-xs);
  color: var(--text-dim);
  border: 1px solid var(--border-dim);
  padding: 0 4px;
}
.module-button .mod-meta { display: block; font-size: var(--font-xs); color: var(--text-dim); margin-top: 3px; }
.module-cooldown-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(5, 10, 14, 0.78);
  pointer-events: none;
}
.module-cooldown-text {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: var(--font-sm);
  color: var(--accent-warn);
}

/* --- Log --- */
/* height: 0 + flex: 1 = "fill whatever space you're given, but never ask
   for more" - a scrolling list must not decide its container's size. */
.log-feed {
  flex: 1;
  height: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  font-size: var(--font-md);
}
.log-entry { padding: 2px 0; border-bottom: 1px dashed var(--border-dim); }
.log-entry--damage { color: var(--accent-hostile); }
.log-entry--warning { color: var(--accent-warn); }
.log-entry--fatal { color: var(--accent-critical); font-weight: bold; }
.log-entry--ledger { color: var(--text-dim); font-size: var(--font-sm); }
.log-toggle { cursor: pointer; text-transform: none; }
.log-toggle input { vertical-align: middle; margin: 0 4px 0 0; }
.log-entry time { color: var(--text-dim); margin-right: 8px; }

.connection-indicator { color: var(--accent-warn); }
.connection-indicator--ok { color: var(--text-dim); }

/* --- App shell: nav bar on top, the current screen below --- */
.app-shell { height: 100%; display: flex; flex-direction: column; }
.app-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-screen[hidden] { display: none; }

.nav-bar {
  flex: none;
  display: flex;
  align-items: stretch;
  height: calc(20px * var(--ui-scale));
  padding: 0 0 0 8px;
  font-size: var(--font-sm);
  background: #08111a;
  border-bottom: 1px solid var(--border-dim);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--accent-self) 6%, transparent);
  user-select: none;
}
.nav-brand {
  align-self: center;
  padding: 0 14px 0 2px;
  color: var(--accent-self);
  font-weight: bold;
  letter-spacing: 0.3em;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 10px;
  cursor: pointer;
}
.nav-item:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-panel-raised); }
.nav-item:disabled { opacity: 0.35; cursor: default; }
.nav-item--active {
  color: var(--accent-self);
  background: color-mix(in srgb, var(--accent-self) 7%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent-self);
}
.nav-item--soon { opacity: 0.55; }
.nav-item--soon::after {
  content: "";
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}
.nav-spacer { flex: 1; }
.nav-status { display: flex; align-items: center; padding: 0 4px 0 10px; }
.nav-status .pilot-badge { margin-right: 10px; }
.nav-tools { display: flex; border-left: 1px solid var(--border-dim); }
.nav-item--tool { letter-spacing: 0; text-transform: none; padding: 0 8px; }
.nav-item--readout { min-width: 6ch; justify-content: center; font-variant-numeric: tabular-nums; }

/* --- Screens that don't exist yet --- */
.screen-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--border-dim) 45%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--border-dim) 45%, transparent) 39px 40px);
}
.screen-placeholder-card {
  width: min(100%, calc(420px * var(--ui-scale)));
  padding: 24px;
  border: 1px solid var(--border-bright);
  background: var(--bg-panel);
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.screen-placeholder-kicker { font-size: var(--font-xs); letter-spacing: 0.2em; color: var(--accent-warn); }
.screen-placeholder-card h1 { margin: 6px 0 12px; font-size: var(--font-xl); letter-spacing: 0.2em; color: var(--accent-self); }
.screen-placeholder-card p { margin: 0 0 16px; font-size: var(--font-md); line-height: 1.5; color: var(--text-dim); }

#blazor-error-ui {
  display: none;
  background: var(--accent-critical);
  color: #190000;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 8px 16px;
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* --- Casting, statuses --- */
.cast { margin-top: 8px; }
.cast .vital-track { height: 12px; border-color: var(--accent-warn); }
.cast .vital-label span:first-child { color: var(--accent-warn); }
.vital-fill--cast { background: var(--accent-warn); transition: none; }
.status-chip {
  display: inline-block;
  margin: 0 0 0 6px;
  padding: 2px 6px;
  font-size: var(--font-sm);
  border: 1px solid var(--accent-hostile);
  color: var(--accent-hostile);
}

/* --- Fitting / cargo lists --- */
.sub-title {
  font-size: var(--font-sm);
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 16px 0 6px 0;
  display: flex;
  justify-content: space-between;
  font-weight: normal;
}
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-md);
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-dim);
}
.dim, .item-row.dim { color: var(--text-dim); }
.overload { color: var(--accent-critical); font-size: var(--font-sm); }
.slot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  vertical-align: middle;
}
.slot--offensive { background: var(--accent-hostile); }
.slot--defensive { background: var(--accent-self); }
.slot--utility { background: var(--accent-warn); }
.small-button {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-xs);
  padding: 1px 6px;
  cursor: pointer;
}
.small-button:hover { border-color: var(--accent-self); color: var(--accent-self); }
.destroyed-banner .small-button { margin-left: 10px; }
/* a primary action (jump, loot, engage, follow) rather than just getting there */
.small-button--primary { border-color: var(--accent-self); color: var(--accent-self); }
.small-button:disabled { opacity: 0.4; cursor: default; }
.target-header-right { display: flex; align-items: center; gap: 8px; }
.target-icon { display: inline-flex; width: 12px; height: 12px; margin-right: 6px; vertical-align: middle; color: var(--accent-self); }

/* --- Scope extras --- */
.blip--debris { color: var(--accent-warn); }
.blip--gate, .blip--station { color: var(--accent-self); }
.blip--celestial { color: var(--text-primary); }
/* outside the scope window: parked on the rim, pointing the way */
.blip--edge { opacity: 0.35; filter: none; }
.blip--dead { opacity: 0.25; filter: none; }
.blip--targeted { outline: 1px solid var(--accent-hostile); outline-offset: 3px; }
/* the selection draws over everything, your own ship included */
.blip--selected { z-index: 2; outline: 1px solid var(--accent-self); outline-offset: 3px; }
/* you can't do anything with yourself: clicks go through to whatever you're parked on */
.blip--self { pointer-events: none; }
/* --- Target scan --- */
.scan { margin-top: 8px; font-size: var(--font-sm); }
.scan-chip {
  display: inline-block;
  margin: 0 0 0 6px;
  padding: 1px 6px;
  border: 1px solid var(--border-dim);
  color: var(--text-dim);
}
.scan-chip--ready { color: var(--accent-hostile); border-color: color-mix(in srgb, var(--accent-hostile) 50%, var(--border-dim)); }

/* --- Proximity list --- */
.contact {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--border-dim);
  font-size: var(--font-md);
  cursor: pointer;
}
.contact:hover { background: var(--bg-panel-raised); }
.contact--targeted { outline: 1px solid var(--accent-hostile); outline-offset: -1px; }
.contact--inert { opacity: 0.45; }
.contact-main { display: flex; flex-direction: column; min-width: 0; }
.contact-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* one glyph per signal (Ui/SignalIcon.razor), tinted by category */
.contact-icon { width: 12px; height: 12px; display: flex; justify-self: center; color: var(--text-dim); }
.contact-icon .hull-icon { margin: 0; }
.contact-icon--ship, .contact-icon--beacon { color: var(--accent-hostile); }
.contact-icon--debris { color: var(--accent-warn); }
.contact-icon--station, .contact-icon--gate { color: var(--accent-self); }
.contact-icon--celestial { color: var(--text-primary); }
.contact-icon--unknown { color: var(--accent-critical); }
.signal-icon { display: inline-block; flex: none; }
.contact-detail { font-size: var(--font-xs); color: var(--text-dim); }
.contact-range { font-size: var(--font-sm); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.contact-range--near { color: var(--accent-self); }

/* --- Module bar extras --- */
.module-button--charging { border-color: var(--accent-warn); }
.module-button--charging:disabled { color: var(--accent-warn); border-color: var(--accent-warn); }
.module-button--warp:not(:disabled) { border-color: var(--accent-warn); }

/* --- Scope: aggro rings, warp trails --- */
.scope-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.scope-grid {
  stroke: var(--border-dim);
  vector-effect: non-scaling-stroke;
}
.scope-aggro {
  fill: color-mix(in srgb, var(--accent-hostile) 6%, transparent);
  stroke: color-mix(in srgb, var(--accent-hostile) 40%, transparent);
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}
.scope-trail {
  stroke: var(--accent-hostile);
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.blip--beacon { color: var(--accent-hostile); }

/* --- Warp-out spool --- */
.vital-fill--warp { background: #b48cff; transition: none; }
.cast--warp .vital-track { border-color: #b48cff; }
.cast--warp .vital-label span:first-child { color: #b48cff; }

/* --- Combat view --- */
/* FTL-style stage: your side left, theirs right, no positions. */
.combat { gap: 10px; }
.combat .panel-title { margin: 0; color: var(--accent-hostile); }
.combat-field {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid var(--border-dim);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 122, 82, 0.06), transparent 65%),
    #060c12;
  padding: 12px;
  overflow: auto;
}
.combat-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.combat-ship {
  width: min(100%, calc(220px * var(--ui-scale)));
  padding: 8px;
  border: 1px solid var(--border-dim);
  background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
  font-size: var(--font-sm);
}
.combat-ship--hostile { cursor: pointer; }
.combat-ship--hostile:hover { border-color: var(--accent-hostile); }
.combat-ship--targeted { outline: 1px solid var(--accent-hostile); outline-offset: 3px; }
.ship-art {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  margin-bottom: 6px;
}
/* art is drawn facing right; the other side faces back at you */
.combat-ship--hostile .ship-art { transform: scaleX(-1); }
.combat-ship-name { margin-bottom: 4px; }
.mini-track {
  height: 5px;
  margin-bottom: 3px;
  background: #060b10;
  border: 1px solid var(--border-dim);
}
.combat-ship--hostile .vital-fill--shield { background: var(--accent-hostile); }
.mini-label { margin-top: 5px; font-size: var(--font-xs); }
.mini-label--cast { color: var(--accent-warn); }
.mini-label--warp { color: #b48cff; }
.mini-track--cast { border-color: var(--accent-warn); }
.mini-track--warp { border-color: #b48cff; }
.combat-ship .status-chip { margin: 5px 4px 0 0; font-size: var(--font-xs); }
.combat-hint { font-size: var(--font-sm); color: var(--text-dim); }
.combat-hint--warn { color: #b48cff; }
.combat-hint--bad { color: var(--accent-critical); }

/* --- Login --- */
.login-screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.login-card {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border-bright);
  background: var(--bg-panel);
}
.login-card h1 { margin: 0 0 8px; font-size: var(--font-xl); letter-spacing: 0.2em; color: var(--accent-self); }
.login-card label { font-size: var(--font-sm); letter-spacing: 0.08em; color: var(--text-dim); }
.login-card input {
  background: #060b10;
  border: 1px solid var(--border-bright);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-lg);
  padding: 8px;
}
.login-card input:focus { outline: none; border-color: var(--accent-self); }
.login-card .module-button { flex: none; }
.login-error { color: var(--accent-critical); font-size: var(--font-md); }
.login-hint { color: var(--text-dim); font-size: var(--font-sm); }
.pilot-badge { color: var(--accent-self); margin-right: 14px; }
.pilot-badge .small-button { margin-left: 6px; }

/* other players on the scope: neither you nor hostile */
.blip--player { color: #c9d6ff; filter: drop-shadow(0 0 3px #c9d6ff); }

/* --- Hull size icons, tiers, unscanned ships --- */
.hull-icon { display: inline-block; vertical-align: -1px; flex: none; margin-right: 4px; }
.unscanned {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  font-size: var(--font-sm);
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.unit-frame--hostile .unscanned .hull-icon { color: var(--accent-hostile); }
.status-chip--scan { border-color: var(--accent-self); color: var(--accent-self); }

.module-label { white-space: nowrap; }
.tier-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 3px;
  font-size: var(--font-xs);
  line-height: 1.4;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  color: var(--text-dim);
  vertical-align: 1px;
}
.tier-badge--3 { color: var(--accent-self); }
.tier-badge--4 { color: var(--accent-warn); }
.tier-badge--5 { color: var(--accent-hostile); }