/* ─────────────────────────────────────────────────────────────────────────
   Server 705 Reports — LCARS-derived theme.

   Derived, not literal. Full LCARS is a wall of curved colour blocks, which is
   hostile to a 2,000-row data table. What carries over is the palette, the
   typographic manner (condensed uppercase, wide tracking, monospace figures)
   and the elbow motif confined to the chrome, where it costs no reading space.
   The tables themselves stay dense and quiet.

   Dark-committed. LCARS is definitionally a black-screen interface and a light
   variant fights the reference, so there is no theme toggle. Every colour is a
   token, so a second palette could be added here without touching a rule.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Antonio";
  src: url("./fonts/antonio-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Antonio";
  src: url("./fonts/antonio-latin-ext.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* Ground and surfaces — blue-biased near-black, not neutral grey. */
  --ground:   #0A0B10;
  --panel:    #14161F;
  --panel-2:  #1B1E29;
  --edge:     #2A2E3D;

  /* LCARS accents. Each carries a meaning; see below. */
  --amber:    #FF9E3D;
  --lilac:    #B79BD6;
  --sky:      #7FB3E8;
  --rust:     #E0705C;
  --sand:     #E8C87A;
  --mint:     #6FBF9B;

  /* Ink */
  --ink:      #E7E8EE;
  --ink-dim:  #A7ACBC;
  --muted:    #7C8296;

  /* Chart tokens — the series colour is chosen against THIS surface. */
  --chart-accent: #7FB3E8;
  --chart-peak:   #B79BD6;
  --chart-grid:   #232733;
  --chart-axis:   #7C8296;

  --display: "Antonio", "Avenir Next Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  font-family: var(--body);
}

/* Colour means something here rather than decorating:
     amber  structure and controls      sky    links and data series
     lilac  section headings            rust   rogues, and later violations
     mint   active / healthy            sand   warning                        */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 64px;
  background: var(--ground);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── header: the elbow lives here, in the chrome ─────────────────────────── */

header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--edge);
  position: relative;
}

/* The LCARS elbow, reduced to a single bracket at the left of the header. */
header::before {
  content: "";
  width: 46px;
  height: 30px;
  flex: none;
  background: var(--amber);
  border-radius: 15px 0 0 4px;
}

header h1 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 30px;
  line-height: 1;
  margin: 0;
  color: var(--amber);
}

nav.reports {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}

nav.reports a {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 15px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-dim);
  text-decoration: none;
  white-space: nowrap;
}
nav.reports a:hover { background: var(--edge); color: var(--ink); }
nav.reports a[aria-current="page"] { background: var(--amber); color: var(--ground); }

/* ── controls ───────────────────────────────────────────────────────────── */

input, button {
  font-family: var(--body);
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
}
input { min-width: 200px; }
input::placeholder { color: var(--muted); }
input:focus { border-color: var(--sky); outline: none; }
button { cursor: pointer; }
button:hover { border-color: var(--amber); color: var(--amber); }

a { color: var(--sky); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.muted { color: var(--muted); }
.status { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

#count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── tables: dense and quiet, which is what people came for ─────────────── */

/* The table scrolls inside its own box, in both axes.

   Vertical scrolling is what makes the sticky header work at all. `overflow-x:
   auto` alone already made this a scroll container (per spec, a visible axis
   next to a non-visible one computes to auto), but with no height constraint
   the box was always exactly as tall as its content — so it never scrolled,
   and the header had nothing to stick to while the page moved beneath it.
   Capping the height gives it a real scrollport. */
.table-wrap {
  overflow: auto;
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid var(--edge);
  border-radius: 6px;
  overscroll-behavior: contain;
}

/* Report pages give the table whatever vertical space is left over.
   body is a flex column pinned to the viewport, the header and status line take
   their natural height, and the table takes the rest — so the visible rows grow
   with the window instead of being capped at an arbitrary 70vh.

   min-height:0 on the flex child is load-bearing: without it a flex item
   refuses to shrink below its content, the table would size to all 2,164 rows,
   and the whole thing would overflow the viewport instead of scrolling.

   100dvh, not 100vh — on mobile the dynamic unit accounts for the browser
   chrome that shows and hides on scroll. */
body.report {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 12px;
}
body.report header,
body.report .status { flex: 0 0 auto; }
body.report #root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.report .table-wrap {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  text-align: left;
  white-space: nowrap;
  padding: 9px 12px;
  background: var(--panel-2);
  position: sticky;
  top: 0;
  z-index: 2;
  user-select: none;
  /* inset shadow rather than border-bottom: with border-collapse the header's
     own border is not carried along when the cell is stuck, so the rule
     vanishes exactly when rows are scrolling underneath it. */
  box-shadow: inset 0 -1px 0 var(--edge);
}

/* Only the report tables sort; their headers carry data-col. The name-history
   table on the player page does not, and should not advertise a click. */
th[data-col] { cursor: pointer; }
th[data-col]:hover { color: var(--sand); }

td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--edge);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--ink-dim);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel); color: var(--ink); }

td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 13px;
}

a.row-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--edge); }
a.row-link:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* Marks a link as leaving the site, so a click that opens a new tab is not a
   surprise. */
a.row-link.external::after {
  content: " ↗";
  color: var(--muted);
  font-size: .85em;
}
a.row-link.external:hover::after { color: var(--amber); }

#sentinel { height: 1px; }

/* ── index ──────────────────────────────────────────────────────────────── */

nav.cards {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin-top: 18px;
}
nav.cards a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-left: 4px solid var(--lilac);
  border-radius: 4px;
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
}
nav.cards a:hover { background: var(--panel-2); border-left-color: var(--amber); }
nav.cards strong {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 19px;
  color: var(--amber);
}
nav.cards span { color: var(--muted); font-size: 14px; }

/* ── player detail ──────────────────────────────────────────────────────── */

.backlink {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 16px;
}
.tile { background: var(--panel); padding: 11px 14px; }
.tile dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.tile dd {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.meta { margin: 0 0 26px; font-size: 14px; }

section { margin-bottom: 30px; }
section h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 20px;
  font-weight: 600;
  color: var(--lilac);
  margin: 0 0 6px;
}

/* ── chart ──────────────────────────────────────────────────────────────── */

.chart-wrap { position: relative; }

#chart {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--panel);
}

.chart-line { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--chart-accent); opacity: .12; stroke: none; }
.chart-end, .chart-dot { fill: var(--chart-accent); }
.chart-dot { stroke: var(--panel); stroke-width: 2; }

/* Peak sits behind current power and reads as a ceiling, not a rival series —
   dashed, lighter weight, no fill. */
.chart-peak {
  fill: none;
  stroke: var(--chart-peak);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Two series, so identity is never colour alone: a legend is always present. */
.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.swatch.power { border-top-color: var(--chart-accent); }
.swatch.peak  { border-top-color: var(--chart-peak); border-top-style: dashed; }

/* Grid and axes orient; they do not compete with the series. */
.grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.axis { fill: var(--chart-axis); font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.axis-title { fill: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }
.crosshair { stroke: var(--chart-axis); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

#hit { cursor: crosshair; }
.hidden { display: none; }

.tip {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.tip strong { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--sky); }
.tip .peak-val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--lilac); }
.tip .muted { font-family: var(--mono); font-size: 11px; }

@media (max-width: 640px) {
  body { padding: 0 14px 48px; }
  header h1 { font-size: 24px; }
  nav.reports { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}