/* Self-hosted fonts (latin subset) — no third-party requests.
   Archivo and JetBrains Mono ship as variable fonts (one file covers the
   whole weight range we use); Saira Condensed only exists as static cuts
   upstream, hence the three separate files. */
@font-face {
  font-family: "Saira Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/saira-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Saira Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/saira-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Saira Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/saira-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/archivo.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
}

/* ============================================================
   TOKENS
   Everything visual hangs off these. Theme switching swaps values
   only — no component rule ever names a literal color.
   ============================================================ */
:root {
  --bg: #07080a;
  --surf: #0e1014;
  --surf2: #141821;
  --surf3: #1b2029;
  --surfH: #1e242f;
  --line: #242a35;
  --line2: #1a1f28;
  --lineS: #2f3745;
  --txt: #edeff3;
  --txt2: #b9c0cc;
  --dim2: #98a1b0;
  --dim: #79828f;
  --cal: #6db3e8;
  --gal: #57d98f;
  --ama: #e0b954;
  --min: #e07a62;
  --pir: #a97fd4;
  --crit: #ff5257;
  --live: #4ade80;

  --fd: "Saira Condensed", "Arial Narrow", sans-serif;
  --fb: "Archivo", "Segoe UI", sans-serif;
  --fm: "JetBrains Mono", ui-monospace, monospace;
}

/* Faction and status colors re-tuned darker for AA contrast on white panels. */
:root[data-theme="light"] {
  --bg: #e9ecf0;
  --surf: #ffffff;
  --surf2: #f4f6f9;
  --surf3: #e8ecf1;
  --surfH: #dfe5ec;
  --line: #d5dbe3;
  --line2: #e6eaf0;
  --lineS: #c3ccd6;
  --txt: #12151a;
  --txt2: #39424e;
  --dim2: #525b68;
  --dim: #6d7684;
  --cal: #2f6d9e;
  --gal: #268051;
  --ama: #8d6f18;
  --min: #a04227;
  --pir: #7444a3;
  --crit: #c22a2e;
  --live: #1f8a4c;
}

/* ------------------------------------------------------------
   Layout tokens
   The whole responsive behaviour is expressed as token swaps at
   three breakpoints, so no component rule carries a media query.
   --tbl/--card flip the wide table and the stacked card list; JS
   reads the same breakpoint (see App.isNarrow) and renders only
   the variant that is actually visible, so rows never exist twice
   in the DOM.
   ------------------------------------------------------------ */
:root {
  --rail: 236px;
  --railD: flex;
  --botD: none;
  --labD: block;
  --pad: 26px;
  --cc: 1.6fr 1fr;
  --two: repeat(2, minmax(0, 1fr));
  --tbl: block;
  --card: none;
  --fs: 13px;
  --mapH: 640px;
  --hdr: 56px;
  --stripD: flex;
  --brandD: flex;
}

/* Rail collapses to icons only — labels would wrap below this. */
@media (max-width: 1400px) {
  :root { --rail: 66px; --labD: none; --cc: 1fr; }
}
/* Header runs out of room for the front strip well before the content grid
   collapses; the overview carries the same numbers in full. */
@media (max-width: 1100px) {
  :root { --two: 1fr; --cc: 1fr; --stripD: none; }
}
/* Wordmark gives way to the bare logo so the header controls stay reachable. */
@media (max-width: 620px) {
  :root { --brandD: none; }
}

/* Rail is replaced entirely by the fixed bottom nav. */
@media (max-width: 900px) {
  :root {
    --rail: 0px; --railD: none; --botD: flex; --pad: 14px;
    --tbl: none; --card: flex; --mapH: 420px; --fs: 13.5px;
    --hdr: 52px;
  }
}

/* ============================================================
   BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Reserve the scrollbar's width on every page, whether or not that page's
   content is tall enough to need one — otherwise the main column shifts a
   few px sideways on tab switches depending on scrollbar presence. */
html { scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--fb);
  font-size: var(--fs);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--txt2); text-decoration: none; }
a:hover { color: var(--txt); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cal);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surf); }
::-webkit-scrollbar-thumb { background: var(--lineS); }

.hidden { display: none !important; }
.mono { font-family: var(--fm); }

@keyframes bp { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sh { 0% { opacity: .4; } 50% { opacity: .85; } 100% { opacity: .4; } }

/* Loading placeholders — reserve roughly the space the real content will
   take once the ESI fetch resolves, so the page doesn't jump from near-empty
   to full height in one frame. */
.skel-fill {
  background: var(--surf3);
  animation: sh 1.4s ease-in-out infinite;
}

.error-box {
  padding: 28px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--crit);
  background: color-mix(in srgb, var(--crit) 7%, transparent);
  text-align: center;
  color: var(--crit);
  font: 400 12px var(--fm);
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: sticky;
  gap: clamp(8px, 2vw, 18px);
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  height: var(--hdr);
  padding: 0 var(--pad);
  background: var(--surf);
  border-bottom: 1px solid var(--line);
}
/* The strip is the only part that may be squeezed out; everything else in
   the header keeps its intrinsic width. */
.hdr > .hdr-brand, .hdr > .hdr-actions { flex-shrink: 0; }

.hdr-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; color: inherit; }
.hdr-brand:hover { color: inherit; }

.logo {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lineS);
  font: 700 13px var(--fd);
  letter-spacing: .02em;
  color: var(--txt);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}

.brand-text { display: var(--brandD); flex-direction: column; line-height: 1.15; }
.brand-name { font: 700 15px var(--fd); letter-spacing: .13em; color: var(--txt); }
.brand-tag { font: 400 8.5px var(--fm); letter-spacing: .2em; color: var(--dim); }

/* Front strip — the compact both-warzones summary that rides along in the
   header on every tab, not just the overview. Hidden once the header runs
   out of room; the overview carries the same numbers in full. */
.hdr-strip-wrap { flex: 1 1 auto; display: var(--stripD); justify-content: center; min-width: 0; }
.hdr-strip {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--surf2);
  max-width: 100%;
  overflow: hidden;
}
.strip-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-right: 1px solid var(--line2);
  white-space: nowrap;
}
.strip-cell:last-child { border-right: 0; }
.strip-tag { font: 500 8.5px var(--fm); letter-spacing: .16em; color: var(--dim); }
.strip-val { font: 700 12px var(--fm); }
.strip-bar { width: 52px; height: 5px; background: var(--surf3); display: block; position: relative; overflow: hidden; }
.strip-bar > span { position: absolute; left: 0; top: 0; bottom: 0; }

.hdr-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }

.chip-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--surf2);
  font: 500 9.5px var(--fm);
  letter-spacing: .08em;
  color: var(--live);
}
.chip-live.paused { color: var(--dim); }
.chip-live .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-live:not(.paused) .dot { animation: bp 2s ease-in-out infinite; }

.btn {
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--surf2);
  font: 500 9.5px var(--fm);
  letter-spacing: .08em;
  color: var(--dim2);
}
.btn:hover { border-color: var(--lineS); color: var(--txt); }

/* ============================================================
   SHELL: rail + main + bottom nav
   ============================================================ */
.shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--hdr)); }

.rail {
  display: var(--railD);
  flex-direction: column;
  flex: 0 0 var(--rail);
  width: var(--rail);
  background: var(--surf);
  border-right: 1px solid var(--line);
  position: sticky;
  top: var(--hdr);
  height: calc(100vh - var(--hdr));
  overflow-y: auto;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  border-left: 2px solid transparent;
  color: var(--dim2);
  text-align: left;
  width: 100%;
}
.rail a:hover { background: var(--surf2); color: var(--txt); }
.rail a.active { border-left-color: var(--cal); background: var(--surf2); color: var(--txt); }
.rail-icon { flex: 0 0 18px; font: 500 13px var(--fm); text-align: center; opacity: .9; }
.rail-label {
  display: var(--labD);
  font: 600 11px var(--fd);
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rail-foot {
  margin-top: auto;
  display: var(--labD);
  padding: 16px 18px;
  border-top: 1px solid var(--line2);
  font: 400 8.5px var(--fm);
  letter-spacing: .1em;
  color: var(--dim);
  line-height: 1.7;
}
.rail-foot span { color: var(--dim2); }

.main { flex: 1 1 auto; min-width: 0; padding: var(--pad) var(--pad) 92px; }

.bottom-nav {
  display: var(--botD);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--surf);
  border-top: 1px solid var(--line);
  overflow-x: auto;
}
.bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  padding: 9px 6px 10px;
  border-top: 2px solid transparent;
  color: var(--dim2);
}
.bottom-nav a.active { border-top-color: var(--cal); background: var(--surf2); color: var(--txt); }
.bottom-nav .rail-icon { font: 500 14px var(--fm); flex: none; }
.bottom-nav .rail-label {
  display: block;
  font: 600 8.5px var(--fd);
  letter-spacing: .1em;
}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.page-head h1 {
  font: 700 26px var(--fd);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt);
}
.page-head p {
  font: 400 11.5px var(--fb);
  color: var(--dim);
  margin-top: 3px;
  max-width: 640px;
}
.page-chips { display: flex; gap: 7px; flex-wrap: wrap; }

/* Filter/segment chips — shared by every view that switches a dataset. */
.chip {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: transparent;
  font: 500 9.5px var(--fm);
  letter-spacing: .09em;
  color: var(--dim2);
}
.chip:hover { border-color: var(--lineS); }
.chip.active { color: var(--txt); }
.chip-lg { padding: 7px 13px; font-size: 10px; letter-spacing: .07em; }
.chip-dot { width: 7px; height: 7px; transform: rotate(45deg); display: block; }
.chip-group { display: flex; gap: 7px; flex-wrap: wrap; }
.chip-group-label {
  font: 500 8.5px var(--fm);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 7px;
}

/* ============================================================
   PANELS
   ============================================================ */
.panel { border: 1px solid var(--line); background: var(--surf); }
.panel-pad { padding: 20px 22px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line2);
}
/* Same treatment whether the heading sits in a panel header strip or
   directly inside a padded panel (charts). */
.panel-head h2,
.panel-pad > h2 {
  font: 700 12px var(--fd);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt);
}
.panel-count { font: 400 9px var(--fm); letter-spacing: .1em; color: var(--crit); }

.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-two { display: grid; grid-template-columns: var(--two); gap: 16px; }
.grid-cc { display: grid; grid-template-columns: var(--cc); gap: 16px; align-items: start; }

/* Progress bars — one shape, sized by modifier. The fill is positioned
   rather than sized so a width transition never reflows the track. */
.bar { background: var(--surf3); position: relative; overflow: hidden; display: block; height: 5px; }
.bar > span { position: absolute; inset: 0 auto 0 0; transition: width .5s; }
.bar-7 { height: 7px; }
.bar-6 { height: 6px; }
.bar-4 { height: 4px; }

/* Key/value tiles, hairline-separated by the grid gap showing through. */
.stats { display: grid; gap: 1px; background: var(--line2); }
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.stats-2 { grid-template-columns: 1fr 1fr; }
.stats > div { background: var(--surf); padding: 11px 2px; }
.stat-k {
  font: 400 8.5px var(--fm);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.stat-v { font: 700 17px var(--fm); }

/* Small outlined label — status, role, occupier. Color is set inline from
   the faction/status the row carries. */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid currentColor;
  font: 500 9px var(--fm);
  letter-spacing: .08em;
}
.tag-lg { padding: 3px 9px; font-size: 9.5px; }

/* ============================================================
   OVERVIEW
   ============================================================ */
.wz-card h2 {
  font: 700 15px var(--fd);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--txt);
}
.wz-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.wz-card-total { font: 400 9.5px var(--fm); color: var(--dim); }

/* Two segments growing toward each other, with the slanted inner edges the
   design uses to read as a contested front rather than a plain stacked bar. */
.frontbar { display: flex; height: 22px; background: var(--surf3); margin-bottom: 9px; }
.frontbar > span { transition: width .6s; }
.frontbar .seg-a { clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.frontbar .seg-b { clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%); }
.frontbar .seg-gap { flex: 1; }
.frontbar-legend {
  display: flex;
  justify-content: space-between;
  font: 600 12px var(--fb);
  margin-bottom: 18px;
}

.row-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 20px;
  border-top: 1px solid var(--line2);
  text-align: left;
}
.row-btn:hover { background: var(--surf2); }
.row-accent { flex: 0 0 5px; height: 26px; }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-name { display: block; font: 600 13.5px var(--fb); color: var(--txt); }
.row-meta {
  display: block;
  font: 400 9.5px var(--fm);
  letter-spacing: .06em;
  color: var(--dim);
  margin-top: 1px;
}
.row-num { flex: 0 0 auto; text-align: right; }
.row-num b { display: block; font: 700 14px var(--fm); }
.row-num span { display: block; font: 400 9px var(--fm); margin-top: 1px; }

.flip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid var(--line2);
}
.flip-ago { flex: 0 0 46px; font: 400 9.5px var(--fm); color: var(--dim); }
.flip-sys {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 12.5px var(--fb);
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flip-move {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 9.5px var(--fm);
}
.flip-from { text-decoration: line-through; opacity: .65; }
.flip-arrow { color: var(--dim); }

.ins-panel { border-left: 3px solid var(--pir); }
.ins-panel .panel-head h2 { color: var(--pir); }
.ins-row { padding: 13px 20px; border-top: 1px solid var(--line2); }
.ins-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ins-name { font: 600 13px var(--fb); color: var(--txt); }
.ins-since { font: 400 9px var(--fm); color: var(--dim); }
.ins-origin { font: 400 10.5px var(--fm); color: var(--dim2); margin-top: 4px; }
.ins-bars { display: flex; gap: 14px; margin-top: 9px; }
.ins-bars > div { flex: 1; }
.ins-bar-k {
  display: flex;
  justify-content: space-between;
  font: 400 8.5px var(--fm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 3px;
}
.ins-bar-k b { color: var(--txt2); font-weight: 400; }

/* ============================================================
   TABLES (wide) + CARDS (narrow)
   Only one of the two is rendered at a time — see the layout token note.
   ============================================================ */
.table { display: var(--tbl); border: 1px solid var(--line); background: var(--surf); overflow-x: auto; }
.thead {
  display: flex;
  padding: 0 18px;
  background: var(--surf2);
  border-bottom: 1px solid var(--line);
}
.thead > * {
  padding: 10px 6px;
  text-align: left;
  font: 500 8.5px var(--fm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.thead button:hover { color: var(--txt); }
.thead .sorted { color: var(--txt); }
.trow {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 18px;
  border-top: 1px solid var(--line2);
  text-align: left;
}
.trow:hover { background: var(--surfH); }
.trow.crit { background: color-mix(in srgb, var(--crit) 6%, transparent); }
.trow.crit:hover { background: color-mix(in srgb, var(--crit) 11%, transparent); }

.cards { display: var(--card); flex-direction: column; gap: 10px; }
.card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surf);
  padding: 14px 16px;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.card-title { font: 600 16px var(--fb); color: var(--txt); }
.card-num { font: 700 15px var(--fm); }
.card-meta { display: block; font: 400 10.5px var(--fm); color: var(--dim); margin-top: 2px; }
.card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font: 400 10.5px var(--fm);
  color: var(--dim2);
}
.card-facts b { font-weight: 700; color: var(--txt2); }

/* --- warzone table columns --- */
.c-sys { flex: 0 0 172px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.c-sys .diamond { flex: 0 0 6px; height: 6px; transform: rotate(45deg); }
.c-sys .nm {
  font: 600 13.5px var(--fb);
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-reg { flex: 0 0 132px; font: 400 10.5px var(--fm); color: var(--dim); }
.c-occ { flex: 0 0 148px; font: 500 11.5px var(--fb); }
.c-role { flex: 0 0 118px; }
.c-vp { flex: 1 1 130px; display: flex; align-items: center; gap: 9px; min-width: 90px; padding-right: 14px; }
.c-vp .bar { flex: 1; }
.c-vp .val { flex: 0 0 44px; text-align: right; font: 700 12px var(--fm); color: var(--txt2); }
.c-d { flex: 0 0 76px; font: 500 11px var(--fm); }
.c-adv { flex: 0 0 74px; font: 400 11px var(--fm); color: var(--txt2); }
.c-kills { flex: 0 0 66px; font: 400 11px var(--fm); color: var(--txt2); }
.table-sys .thead, .table-sys .trow { min-width: 940px; }

/* ============================================================
   MAP
   ============================================================ */
.map-frame {
  border: 1px solid var(--line);
  background: var(--surf);
  height: var(--mapH);
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(var(--line2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line2) 1px, transparent 1px);
  background-size: 46px 46px;
}
.map-frame svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.map-frame svg:active { cursor: grabbing; }
.map-edges { stroke: var(--lineS); stroke-width: 1.2; opacity: .5; }
.map-edges line { vector-effect: non-scaling-stroke; }
.map-node { cursor: pointer; }
.map-node .diamond { transition: fill .2s; }
.map-node.critical .diamond { animation: bp 2s ease-in-out infinite; }
.map-label {
  font: 500 9px var(--fm);
  letter-spacing: .04em;
  fill: var(--dim2);
  pointer-events: none;
}
.map-node.selected .map-label { fill: var(--txt); }

.map-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  max-width: calc(100% - 28px);
  padding: 8px 12px;
  background: var(--surf2);
  border: 1px solid var(--line);
}
.map-legend > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 9px var(--fm);
  letter-spacing: .08em;
  color: var(--dim2);
}
.map-legend i { width: 7px; height: 7px; transform: rotate(45deg); display: block; }

.map-controls { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; }
.map-controls button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  background: var(--surf2);
  font: 500 12px var(--fm);
  color: var(--dim2);
}
.map-controls button:hover { border-color: var(--lineS); color: var(--txt); }

.detail { border: 1px solid var(--line); background: var(--surf); padding: 22px; }
.detail-k {
  font: 400 8.5px var(--fm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.detail-name { font: 700 24px var(--fd); letter-spacing: .07em; color: var(--txt); margin-top: 5px; }
.detail-region { font: 400 10.5px var(--fm); color: var(--dim2); margin-top: 2px; }
.detail-tags { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.detail-bar-k {
  display: flex;
  justify-content: space-between;
  font: 400 8.5px var(--fm);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 5px;
}
.detail-links { display: flex; gap: 8px; margin-top: 20px; }
.detail-links a {
  flex: 1;
  text-align: center;
  padding: 8px;
  border: 1px solid var(--line);
  font: 500 9.5px var(--fm);
  letter-spacing: .08em;
  color: var(--dim2);
}
.detail-links a:hover { border-color: var(--lineS); color: var(--txt); }
.detail-empty {
  display: grid;
  place-items: center;
  min-height: 200px;
  text-align: center;
  font: 400 10.5px var(--fm);
  color: var(--dim);
  line-height: 2;
}

/* ============================================================
   HISTORY
   ============================================================ */
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 14px; }
.chart-legend > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 10px var(--fm);
  color: var(--dim2);
}
.chart-legend i { width: 14px; height: 2px; display: block; }
.chart-legend b { font-weight: 700; }
.chart { display: block; width: 100%; height: 200px; }
.chart-axis {
  display: flex;
  justify-content: space-between;
  font: 400 9px var(--fm);
  color: var(--dim);
  margin-top: 7px;
}

.log-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 20px;
  border-top: 1px solid var(--line2);
}
.log-date { flex: 0 0 118px; font: 400 10px var(--fm); color: var(--dim); }
.log-sys { flex: 1 1 150px; font: 600 13px var(--fb); color: var(--txt); }
.log-move {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 10.5px var(--fm);
}
.log-move .from { opacity: .7; }

/* ============================================================
   LP STORE
   ============================================================ */
.c-item {
  flex: 2 1 240px;
  font: 500 13px var(--fb);
  color: var(--txt);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-lp { flex: 0 0 92px; font: 400 11.5px var(--fm); color: var(--txt2); }
.c-isk { flex: 0 0 108px; font: 400 11.5px var(--fm); color: var(--txt2); }
.c-mkt { flex: 0 0 120px; font: 400 11.5px var(--fm); color: var(--txt2); }
.c-ratio { flex: 1 1 150px; display: flex; align-items: center; gap: 10px; }
.c-ratio .val { flex: 0 0 62px; font: 700 12.5px var(--fm); }
.c-ratio .bar { flex: 1; }
.table-lp .thead, .table-lp .trow { min-width: 900px; }
.table-lp .trow { cursor: default; }
.table-lp .trow:hover { background: var(--surf2); }
.lp-foot { font: 400 10px var(--fm); color: var(--dim); margin-top: 14px; }

/* ============================================================
   LEADERBOARDS
   ============================================================ */
.lb-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--line2);
}
.lb-row.top { background: color-mix(in srgb, var(--ama) 5%, transparent); }
.lb-rank { flex: 0 0 40px; font: 700 20px var(--fd); color: var(--dim); }
.lb-rank.g1 { color: var(--ama); }
.lb-rank.g2 { color: var(--dim2); }
.lb-who { flex: 2 1 200px; min-width: 0; }
.lb-name {
  display: block;
  font: 600 14px var(--fb);
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-militia { display: block; font: 400 9.5px var(--fm); margin-top: 1px; }
.lb-val { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; min-width: 140px; }
.lb-val .bar { flex: 1; }
.lb-val .num { flex: 0 0 76px; text-align: right; font: 700 14px var(--fm); color: var(--txt); }

/* ============================================================
   CAMPAIGNS
   ============================================================ */
.cmp-card { border-top-width: 3px; border-top-style: solid; padding: 20px 22px; }
.cmp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-side { font: 400 9.5px var(--fm); color: var(--dim); }
.cmp-card h2 { font: 700 19px var(--fd); letter-spacing: .06em; color: var(--txt); margin-top: 12px; }
.cmp-text {
  font: 400 12px var(--fb);
  color: var(--dim2);
  margin-top: 8px;
  text-wrap: pretty;
}
.cmp-obj { margin-top: 16px; }
.cmp-obj + .cmp-obj { margin-top: 10px; }
.cmp-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font: 400 10.5px var(--fm);
}
.cmp-foot .lbl { color: var(--dim); }
.cmp-foot .val { color: var(--ama); font-weight: 500; }
.cmp-card.done { opacity: .55; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.faq-list details { border: 1px solid var(--line); background: var(--surf); padding: 16px 20px; }
.faq-list summary {
  cursor: pointer;
  font: 600 14px var(--fd);
  letter-spacing: .05em;
  color: var(--txt);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Marker is drawn rather than inherited so it can flip on open without
   depending on the UA's disclosure triangle. */
.faq-list summary::after { content: "+"; color: var(--dim); font-family: var(--fm); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p {
  font: 400 12.5px var(--fb);
  color: var(--dim2);
  margin-top: 11px;
  line-height: 1.7;
  text-wrap: pretty;
}
.faq-list p + p { margin-top: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 400 10.5px var(--fb);
  color: var(--dim);
  line-height: 1.8;
  max-width: 1100px;
}
.site-foot > div + div { margin-top: 8px; }
.site-foot .ver { font-family: var(--fm); font-size: 9.5px; letter-spacing: .06em; }

/* ============================================================
   LEGAL (standalone page, shares the header only)
   ============================================================ */
.legal { max-width: 820px; margin: 0 auto; padding: var(--pad) 0 64px; }
.legal h2 {
  font: 700 15px var(--fd);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt);
  margin: 28px 0 10px;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 { font: 600 12.5px var(--fb); color: var(--txt2); margin: 18px 0 6px; }
.legal p, .legal li { font: 400 12.5px var(--fb); color: var(--dim2); line-height: 1.75; }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 8px 0 0 18px; }
.legal a { color: var(--cal); }
.legal a:hover { text-decoration: underline; }
.legal-back { display: inline-block; margin-bottom: 22px; }