/* BraveUber — dark UI matching the in-game palette.
   Plain CSS, no build step and no CDN: the CSP is 'self' only. */

:root {
  --bg: #0e1116;
  --bg-raised: #161b22;
  --bg-inset: #1c232c;
  --border: #2b3440;
  --text: #d7dee7;
  --text-muted: #8b96a5;
  --accent: #f0a020;
  --accent-hover: #ffb845;
  --danger: #d9414d;

  /* Security-band colours, mirroring the in-game map. */
  --sec-high: #4fb477;
  --sec-low: #e0a13a;
  --sec-null: #d9414d;

  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* The full-bleed map is 100vw wide, which counts the vertical scrollbar and
     would otherwise push the page itself into horizontal scroll. Nothing here
     needs the page to scroll sideways — wide tables and the map each scroll
     inside their own container. */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }

.muted { color: var(--text-muted); }
.empty { color: var(--text-muted); font-style: italic; }

/* --- Layout --- */
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.site-header {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .75rem 1.5rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}
.brand { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }

.site-header nav { display: flex; gap: 1.1rem; flex: 1; flex-wrap: wrap; }
.site-header nav a { color: var(--text-muted); font-size: .92rem; }
.site-header nav a:hover { color: var(--text); text-decoration: none; }

.session { display: flex; align-items: center; gap: .6rem; }
.session .who { font-size: .9rem; color: var(--text-muted); }

.portrait { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); }
.portrait-large { width: 64px; height: 64px; vertical-align: middle; margin-right: .5rem; }

.site-footer {
  padding: 1.5rem; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: .82rem; text-align: center;
}

.subnav { display: flex; gap: 1rem; margin-bottom: 1.5rem; }

/* --- Hero --- */
.hero { text-align: center; padding: 3rem 1rem; }
.hero h1 { font-size: 2.2rem; }
.lead { font-size: 1.1rem; color: var(--text-muted); max-width: 34rem; margin: 0 auto 1.5rem; }
.fineprint { font-size: .82rem; color: var(--text-muted); margin-top: 1rem; }
.steps { max-width: 40rem; margin: 0 auto; text-align: left; line-height: 2; }

/* --- Buttons --- */
.btn {
  display: inline-block; padding: .45rem 1rem; border: 0;
  border-radius: var(--radius); cursor: pointer;
  background: var(--accent); color: #16191d;
  font: inherit; font-weight: 600; font-size: .9rem;
}
.btn:hover { background: var(--accent-hover); color: #16191d; text-decoration: none; }
.btn-large { padding: .65rem 1.5rem; font-size: 1rem; }
.btn-small { padding: .25rem .6rem; font-size: .8rem; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-inset); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #e85560; color: #fff; }

/* --- Cards and callouts --- */
.card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem;
}
.callout {
  background: var(--bg-inset); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.callout p { margin-top: 0; }

/* --- Forms --- */
.form { max-width: 34rem; }
.field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.field-check { flex-direction: row; align-items: center; gap: .5rem; }
.field-check label { margin: 0; }

input[type=text], input[type=number], select, textarea {
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  padding: .45rem .6rem; font: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
textarea { min-height: 5rem; resize: vertical; }

.hint { color: var(--text-muted); font-size: .8rem; }
.error { color: var(--danger); font-size: .8rem; }
.field-error input, .field-error select, .field-error textarea { border-color: var(--danger); }

.filters { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filters label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--text-muted); }

.inline-form { display: inline-flex; gap: .4rem; align-items: center; }
.inline-form input[type=text], .inline-form select { width: auto; }

.actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* --- Flash messages --- */
.flashes { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.flash {
  padding: .7rem 1rem; border-radius: var(--radius);
  margin-bottom: .5rem; border-left: 3px solid var(--text-muted);
  background: var(--bg-raised);
}
.flash-success { border-left-color: var(--sec-high); }
.flash-error   { border-left-color: var(--danger); }
.flash-warning { border-left-color: var(--sec-low); }
.flash-info    { border-left-color: var(--accent); }

/* --- Tables --- */
.grid {
  width: 100%; border-collapse: collapse;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.grid th, .grid td {
  padding: .55rem .75rem; text-align: left;
  border-bottom: 1px solid var(--border); font-size: .9rem;
}
.grid th {
  background: var(--bg-inset); color: var(--text-muted);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
}
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: var(--bg-inset); }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tables can exceed the viewport on narrow screens; scroll them, not the page. */
.grid { display: block; overflow-x: auto; white-space: nowrap; }

/* --- Definition lists --- */
.detail { display: grid; grid-template-columns: 10rem 1fr; gap: .5rem 1rem; margin: 0; }
.detail dt { color: var(--text-muted); font-size: .85rem; }
.detail dd { margin: 0; }

/* --- Badges --- */
.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; border: 1px solid currentColor;
}
.badge-open      { color: var(--sec-high); }
.badge-claimed   { color: var(--accent); }
.badge-in_flight { color: #5aa9e6; }
.badge-completed { color: var(--text-muted); }
.badge-cancelled { color: var(--danger); }
/* System no longer under alliance sovereignty — shown on historical rides. */
.badge-lost      { color: var(--text-muted); font-weight: 500; }

/* --- System security colouring --- */
.system { font-weight: 600; }
.system-highsec { color: var(--sec-high); }
.system-lowsec  { color: var(--sec-low); }
.system-nullsec { color: var(--sec-null); }
.system-unknown { color: var(--text-muted); }

/* --- Stats --- */
.stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stat {
  flex: 1 1 12rem; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem;
}
.stat-value { display: block; font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.stat-label { color: var(--text-muted); font-size: .85rem; }

/* --- Misc --- */
.ratings { list-style: none; padding: 0; }
.ratings li {
  padding: .6rem .8rem; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .5rem;
}
.pagination { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; color: var(--text-muted); font-size: .9rem; }

@media (max-width: 640px) {
  .site-header { gap: .75rem; }
  .detail { grid-template-columns: 1fr; }
  .detail dt { margin-top: .5rem; }
}

/* --- Star map ---------------------------------------------------------
   Grouped by region and constellation rather than plotted to scale. Region
   fills are the first three categorical slots of the data-viz reference
   palette, stepped for a dark surface and validated with the palette
   validator against #161b22 on the all-pairs list (worst CVD deltaE 9.4,
   worst normal-vision 20.9, all >= 3:1 contrast).

   Markers are lightly filled so the system name stays the loudest thing in
   the box; the same hue at full strength provides the border. Colour is
   reinforcement only — every marker is directly labelled and there is a
   legend, so nothing here depends on telling two hues apart. */

/* Full-bleed: the map is far wider than the 1100px text column, so it breaks
   out to the full window width. No max-height — the container grows to the
   map's full height rather than trapping it in an inner scroller. Only the
   horizontal axis scrolls, and only when the map is wider than the window. */
.map-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.starmap {
  /* Natural size, so text stays legible; the wrapper scrolls horizontally if
     the window is narrower. width/height come from the element's attributes. */
  display: block; max-width: none; margin: 0 auto;
}

/* Region hues. Each slot supplies a full-strength ink and a light fill. */
.map-region-region-1     { --region-ink: #3987e5; }
.map-region-region-2     { --region-ink: #d95926; }
.map-region-region-3     { --region-ink: #199e70; }
.map-region-region-other { --region-ink: #8b96a5; }
.map-node-region-1     { --region-ink: #3987e5; }
.map-node-region-2     { --region-ink: #d95926; }
.map-node-region-3     { --region-ink: #199e70; }
.map-node-region-other { --region-ink: #8b96a5; }

.swatch-region-1     { background: #3987e5; }
.swatch-region-2     { background: #d95926; }
.swatch-region-3     { background: #199e70; }
.swatch-region-other { background: #8b96a5; }
.swatch-link         { background: var(--border); }

/* Region band: a very light wash, just enough to group. */
.map-region rect {
  fill: color-mix(in srgb, var(--region-ink) 7%, transparent);
  stroke: color-mix(in srgb, var(--region-ink) 35%, transparent);
  stroke-width: 1;
}
.region-label {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; fill: var(--region-ink);
}

/* Constellations are labelled, not boxed. Dropping the container removed the
   blockiness and, with it, any box for a link to appear to cut through — the
   grouping now reads from position and from the link colouring below. */
.const-label {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  fill: color-mix(in srgb, var(--text-muted) 75%, transparent);
}

/* Stargate links carry the boundary they cross, the way dotlan's do. This is
   what replaces the constellation boxes: a route's structure is visible from
   the lines alone. Local links recede; boundary crossings are the ones a
   route actually turns on, so they read progressively stronger. */
.map-links line,
.map-links path { fill: none; stroke-linecap: round; }

.map-links .link-local {
  stroke: var(--text-muted); stroke-width: 1.25; opacity: .45;
}
.map-links .link-constellation {
  stroke: var(--sec-low); stroke-width: 1.5; opacity: .9;
}
.map-links .link-region {
  stroke: #9085e9; stroke-width: 1.75; opacity: .95;
}

.swatch-link-local         { background: var(--text-muted); }
.swatch-link-constellation { background: var(--sec-low); }
.swatch-link-region        { background: #9085e9; }

/* System marker: rounded rectangle, lightly filled, region-coloured. */
.map-node rect {
  fill: color-mix(in srgb, var(--region-ink) 18%, var(--bg-raised));
  stroke: var(--region-ink); stroke-width: 1.25;
}
.map-node text {
  font-size: 10px; font-weight: 600; fill: var(--text);
  text-anchor: middle; pointer-events: none;
}
.map-node:hover rect { fill: color-mix(in srgb, var(--region-ink) 32%, var(--bg-raised)); }

/* Route highlight, applied by the distance calculator. */
.map-node-route rect {
  fill: var(--accent); stroke: var(--text); stroke-width: 2;
}
.map-node-route text { fill: #16191d; font-weight: 700; }

/* --- Legend --- */
.map-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 1rem;
  padding: 0; margin: 0 0 .6rem; font-size: .85rem; color: var(--text-muted);
}
/* Give the map page room to breathe; the full-bleed map ignores this anyway. */
.map-page { max-width: 1400px; }
.map-legend li { display: flex; align-items: center; gap: .4rem; }
.swatch {
  width: 14px; height: 10px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(255,255,255,.15);
}

/* --- Distance calculator --- */
.calc { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.calc label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .85rem; color: var(--text-muted); font-weight: 600;
}
.calc-result {
  display: block; padding: .45rem .75rem; border-radius: var(--radius);
  background: var(--bg-inset); border: 1px solid var(--border);
  font-weight: 600; color: var(--accent); min-width: 14rem;
}
.calc-warn { color: var(--sec-low); }