/* Matches the Fleet Mafia site look (site.css tokens), standalone so the tool can live in its own folder */
:root {
  --void: #0b0910;
  --panel: rgba(24,19,31,.86);
  --panel-2: rgba(20,15,28,.86);
  --edge: #33284a;
  --text: #ece4d4;
  --muted: #a99d8e;
  --violet: #8b4dff;
  --violet-glow: rgba(162,89,255,.45);
  --thruster: #d4a84b;
  --cyan: #b57cff;
  --good: #6fcf73;
  --warn: #e0a84b;
  --bad: #ff6b6b;
  --display: "Arial Black", "Segoe UI Black", Impact, "Helvetica Neue", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hud: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  /* box colours by SCU size */
  --b1: #6b7280; --b2: #8b6f47; --b4: #2f8f83; --b8: #3b82c4; --b16: #8b4dff; --b24: #c2588f; --b32: #d4a84b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--void); color: var(--text); font: .9375rem/1.5 var(--body); }
/* Teal nebula behind the whole page, fixed so it stays put while the tables scroll; panels go see-through over it */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,9,16,.35) 0, rgba(11,9,16,.15) 40%, rgba(11,9,16,.5) 100%),
    url(/org/brand/trade-bg.webp) center / cover no-repeat, var(--void); }
@media (max-width: 700px) {
  body::before { background: linear-gradient(180deg, rgba(11,9,16,.3) 0, rgba(11,9,16,.5) 100%),
    url(/org/brand/trade-bg-1000.webp) center / cover no-repeat, var(--void); }
}

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px max(16px, 4vw);
  background: rgba(11,9,16,.88); border-bottom: 1px solid var(--edge); }
.nav .home { margin-right: auto; font: 900 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--text); text-decoration: none; }
.nav .home span { color: var(--violet); text-shadow: 0 0 12px var(--violet-glow); }
.nav a.link { font: 600 .74rem/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a.link:hover { color: var(--text); }
.nav a.link[aria-current="page"] { color: var(--text); border-color: var(--thruster); }
/* Active nav link: the gold underline gets a hologram emitter under it, like the buttons, with its own flicker. */
.nav a.link { position: relative; }
.nav a.link[aria-current="page"] { text-shadow: 0 0 8px color-mix(in srgb, var(--thruster) 55%, transparent);
  box-shadow: 0 6px 10px -6px color-mix(in srgb, var(--thruster) 90%, transparent); }
.nav a.link::after { content: ""; position: absolute; pointer-events: none; left: 14%; right: 14%; top: calc(100% + 2px); height: 12px; opacity: 0;
  background: linear-gradient(color-mix(in srgb, var(--thruster) 60%, #fff), color-mix(in srgb, var(--thruster) 60%, #fff)) 50% 100% / 45% 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--thruster) 40%, transparent), transparent 85%);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); transition: opacity .15s; }
.nav a.link[aria-current="page"]::after { opacity: 1; animation: fm-navholo 9s 2s infinite; }
@keyframes fm-navholo { 0%, 89%, 93%, 100% { opacity: 1; } 90% { opacity: .45; } 91% { opacity: .9; } 92% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .nav a.link[aria-current="page"]::after { animation: none; } }
.nav .home img { vertical-align: middle; margin: -4px 10px 0 0; border-radius: 6px; }
/* Shared nav: signed-in callsign and sign in/out, from /org/nav.js */
.nav .account { display: inline-flex; align-items: center; gap: 14px; padding-left: 14px; border-left: 1px solid var(--edge); }
.nav .account .callsign { font: 600 .74rem/1 var(--hud); letter-spacing: .1em; color: var(--cyan); text-decoration: none; }

.wrap { max-width: 1800px; margin: 0 auto; padding: 8px max(16px, 4vw) 0; }
/* Wide tables get more of the screen: less side gutter once the window is big enough */
@media (min-width: 1000px) { .wrap { padding-inline: max(16px, 2vw); } }
.hero { padding: 28px 0 8px; }
.kicker { margin: 0 0 10px; font: 500 .72rem/1 var(--hud); letter-spacing: .32em; text-transform: uppercase; color: var(--cyan); }
h1 { margin: 0; font: 200 clamp(2rem, 6vw, 3.2rem)/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.lede { max-width: 44rem; color: var(--muted); margin: 12px 0 0; }
h2 { display: flex; align-items: center; gap: 12px; margin: 36px 0 14px; font: 600 .8rem/1 var(--hud); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
h2::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--edge) 0 8px, transparent 8px 12px); }
.stale { margin: 14px 0 0; padding: 10px 14px; color: var(--warn); box-shadow: 0 0 0 1px var(--warn); max-width: 44rem; }
.unknown { color: var(--warn); }
.note { color: var(--muted); margin: -4px 0 12px; font-size: .9rem; }

.controls, .ship-card, .table-wrap, .grid-card { backdrop-filter: blur(6px); }
.controls { display: grid; gap: 12px 16px; margin-top: 24px; padding: 16px; background: var(--panel-2); box-shadow: 0 0 0 2px var(--edge);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: end; }
.field { display: grid; gap: 6px; font: 600 .68rem/1.2 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field.ship { grid-column: span 2; }
.field .hint { font: 400 .82rem/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.field .hint a { color: inherit; }
@media (max-width: 520px) { .field.ship { grid-column: auto; } }
select, input[type=number] { width: 100%; padding: 9px 10px; background: var(--void); color: var(--text); border: 1px solid var(--edge); font: .9375rem/1.2 var(--body); border-radius: 0; }
select:focus-visible, input:focus-visible, summary:focus-visible, tr:focus-visible { outline: 2px solid var(--thruster); outline-offset: 2px; }
.more { grid-column: 1 / -1; }
.more summary { cursor: pointer; padding: 4px 0; }
.more[open] { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: end; }
.more[open] summary { grid-column: 1 / -1; }
.check { display: flex; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; font: .9375rem/1.2 var(--body); color: var(--text); }

.ship-card { margin-top: 18px; padding: 16px 18px; background: var(--panel); box-shadow: 0 0 0 2px var(--edge); display: grid; gap: 8px; }
.ship-card h3 { margin: 0; font: 900 1.3rem/1.1 var(--display); text-transform: uppercase; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 22px; font: .85rem/1.4 var(--hud); color: var(--muted); }
.stats b { color: var(--text); font-weight: 600; }
.badge { display: inline-block; padding: 2px 7px; font: 600 .66rem/1.4 var(--hud); letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; vertical-align: middle; }
.badge.wiki { color: var(--good); } .badge.override { color: var(--cyan); } .badge.estimate, .badge.none { color: var(--warn); }
.badge.illegal { color: var(--bad); margin-left: 6px; }
.ship-notes { margin: 0; padding-left: 18px; color: var(--warn); font-size: .88rem; }

.table-wrap { overflow-x: auto; box-shadow: 0 0 0 2px var(--edge); background: var(--panel-2); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: 8px 7px; text-align: left; white-space: nowrap; border-bottom: 1px solid #241c33; }
th:first-child, td:first-child { padding-left: 10px; } th:last-child, td:last-child { padding-right: 10px; }
/* Headers and the small grey lines under values may wrap, so the routes table fits a normal desktop without scrolling sideways */
th { white-space: normal; vertical-align: bottom; }
th { font: 600 .66rem/1.2 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: #120d19; position: sticky; top: 0; }
th[title] { cursor: help; text-decoration: underline dotted rgba(169,157,142,.5); text-underline-offset: 3px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.term { white-space: normal; min-width: 130px; max-width: 175px; }
td .sub { display: block; color: var(--muted); font-size: .78rem; white-space: normal; }
td.boxes { min-width: 100px; }
td .nw { white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #1d1628; }
tbody tr.sel { background: #24183a; box-shadow: inset 3px 0 0 var(--thruster); }
.limit { color: var(--warn); font-size: .75rem; }
.profit { color: var(--good); font-weight: 600; }
.empty td { text-align: center; color: var(--muted); padding: 28px; cursor: default; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; font: .78rem/1 var(--hud); color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }
.layout { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid-card { padding: 12px 14px; background: var(--panel); box-shadow: 0 0 0 2px var(--edge); }
.grid-card h4 { margin: 0 0 4px; font: 600 .8rem/1.3 var(--hud); letter-spacing: .08em; text-transform: uppercase; }
.grid-card .meta { color: var(--muted); font: .78rem/1.4 var(--hud); margin-bottom: 8px; }
.layers { display: flex; flex-wrap: wrap; gap: 10px; }
.layer figcaption { font: .66rem/1 var(--hud); color: var(--muted); margin-bottom: 4px; letter-spacing: .08em; text-transform: uppercase; }
.layer svg { display: block; }
.layer svg rect.cell { fill: #0e0a14; stroke: #2a2238; stroke-width: 1; }
.layer svg rect.box { stroke: #0b0910; stroke-width: 1.5; }
.layer svg rect.box.off { opacity: .4; stroke-dasharray: 3 2; }
.layer svg text { font: 600 .5625rem var(--hud); fill: #0b0910; pointer-events: none; }

footer { margin-top: 48px; padding: 22px 0 40px; border-top: 2px dashed var(--edge); color: var(--muted); font: .76rem/1.5 var(--hud); letter-spacing: .06em; text-align: center; }
footer a { color: var(--cyan); }