/* ═══════════════════════════════════════════════════════════════════════
   Traces — the site stylesheet.

   THE ONE RULE: a new page links this and uses these classes. It does not
   open a <style> block and invent a system.

   That rule exists because the system already existed and kept being
   reinvented anyway. The landing page and /download carry byte-identical
   tokens — same --primary, same --gradient-hero, same apex-glass card — in two
   separate inline blocks, and /leaderboard carries a third copy. Every page
   built after them started from scratch and had to be restyled afterwards.
   This file is that agreement, written once.

   Naming follows what the landing page already uses: a `tr-` prefix, BEM-ish
   double underscore for parts and double dash for variants, plus the bare
   `.btn` family and `.container`. Page-specific classes take their own prefix
   and live in their own sheet; anything general belongs here.

   See STYLE.md for when to use what, and for the mistakes this file exists to
   stop repeating.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* App palette — the same blue and navy the telemetry and library pages use,
     so the site and the data pages read as one product. */
  --primary: #409ed7;
  --primary-rgb: 64, 158, 215;
  --primary-dark: #2d8cc3;
  --primary-light: #5dbdf0;

  --gradient-hero: radial-gradient(ellipse at 55% 55%, #0f2450 0%, #09162d 62%, #04091a 100%);

  /* The telemetry pages' apex-glass card surface. Every container on the site
     uses these four so cards match the data pages exactly. */
  --apex-bg: linear-gradient(135deg, rgba(20, 41, 74, 0.9) 0%, rgba(13, 28, 54, 0.94) 100%);
  --apex-border: 1px solid rgba(255, 255, 255, 0.10);
  --apex-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
  --apex-radius: 10px;

  /* Ink scale, brightest to faintest. Body copy is --ink-2; --ink is for
     headings and figures that must carry. */
  --ink: #e6edf9;
  --ink-2: #cbd6ea;
  --ink-3: #96adcf;
  --ink-4: #6f84a6;
  --line: rgba(255, 255, 255, 0.10);

  /* State. Semantic, and separate from --primary: the accent must never be
     the thing that says "good" or "wrong". */
  --good: #4ade80;
  --warn: #e0913c;
  --bad: #ef4343;

  /* Section band grounds, alternated down a page. */
  --band-a: #112240;
  --band-b: #0a162e;
}

/* ── reset ──────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* .btn's display:inline-flex would otherwise beat the UA's [hidden] rule. */
[hidden] { display: none !important; }
img { max-width: 100%; }

body {
  font-family: var(--font-body);
  background: var(--gradient-hero);
  background-attachment: fixed;
  color: var(--ink-2);
  min-height: 100vh;
  line-height: 1.6;
  /* Full-bleed bands use a 100vw pseudo-element; absorb the scrollbar-width
     overflow so the page never scrolls sideways because of them. */
  overflow-x: hidden;
}

/* Set explicitly, or an unstyled anchor renders in the browser's default blue
   and then purple once visited — which is what happens every time a card
   title is built as a link and nobody sets a colour. */
a { color: var(--primary-light); text-decoration: none; }
a:hover { color: #7fccf5; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }

/* A full-bleed band behind content that stays in the grid. Vertical padding as
   LONGHAND: the `padding: 2.25rem 0` shorthand beats `.container`'s
   `padding: 0 16px` further up the sheet and every banded section loses its
   side gutter on a phone. */
.tr-sec { position: relative; z-index: 0; padding-top: 2.25rem; padding-bottom: 2.25rem; }
.tr-sec::before {
  content: ''; position: absolute; inset: 0 auto 0 50%;
  width: 100vw; transform: translateX(-50%);
  background: var(--sec-bg); z-index: -1;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.tr-sec--a { --sec-bg: var(--band-a); }
.tr-sec--b { --sec-bg: var(--band-b); }

/* ── grid ───────────────────────────────────────────────────────────────── */
/* One grid for everything. Set --min to the narrowest a cell may be; the
   column count follows from the space, so no breakpoints are needed. */
.tr-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 280px), 1fr));
}
/* A sidebar-and-body split: form on the left, results on the right. */
.tr-split { display: grid; gap: 1rem; grid-template-columns: minmax(280px, var(--aside, 360px)) 1fr; }
@media (max-width: 860px) { .tr-split { grid-template-columns: 1fr; } }
/* Grid children must be allowed to shrink. Without this a number input or a
   long word sets a floor and the last column pushes out through the side. */
.tr-grid > *, .tr-split > * { min-width: 0; }

/* ── type ───────────────────────────────────────────────────────────────── */
.tr-h1, .tr-h2, .tr-h3 {
  font-family: var(--font-display); color: #fff;
  letter-spacing: -0.01em; text-wrap: balance;
}
.tr-h1 { font-weight: 800; font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.02em; }
.tr-h2 { font-weight: 800; font-size: clamp(19px, 2.4vw, 28px); margin-bottom: 1rem; }
.tr-h3 { font-weight: 700; font-size: 15px; margin-bottom: .85rem; }
.tr-sub { color: var(--ink-3); font-size: 16px; }
.tr-note { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.tr-note + .tr-note { margin-top: .6rem; }
.tr-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.tr-hero-sec {
  background:
    radial-gradient(75% 60% at 15% 100%, rgba(var(--primary-rgb), 0.20), transparent 70%),
    radial-gradient(70% 80% at 100% 0%, rgba(96, 82, 200, 0.14), transparent 70%),
    linear-gradient(135deg, #0d1c38, #09162d);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tr-hero { text-align: center; padding: 2.75rem 0 2.25rem; }
.tr-hero__sub { color: var(--ink-3); font-size: 16px; max-width: 600px; margin: .5rem auto 0; }
.tr-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary-light); background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.35); border-radius: 999px; padding: .3rem .9rem;
}

/* ── cards ──────────────────────────────────────────────────────────────── */
.tr-card {
  background: var(--apex-bg); border: var(--apex-border);
  border-radius: var(--apex-radius); box-shadow: var(--apex-shadow);
  padding: 1.5rem;
}
/* Stacked cards get their gap from the sibling margin; cards laid out by a
   grid already have `gap`, so the margin must not apply there — otherwise
   every card after the first is pushed down and the row sits crooked. */
.tr-card + .tr-card { margin-top: 1rem; }
.tr-grid > .tr-card + .tr-card, .tr-split > .tr-card + .tr-card { margin-top: 0; }

/* A card that is itself a link. The title needs its colour set explicitly:
   inheriting from the anchor is how card headings end up blue then purple. */
.tr-card--link { display: block; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tr-card--link:hover {
  border-color: rgba(var(--primary-rgb), 0.45); transform: translateY(-2px);
  box-shadow: var(--apex-shadow), 0 12px 32px rgba(var(--primary-rgb), .12);
}
.tr-card--link h2, .tr-card--link h3, .tr-card--link .tr-h2, .tr-card--link .tr-h3 { color: #fff; }
.tr-card__go {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  font-size: 13px; font-weight: 700; color: var(--primary-light);
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-weight: 600; font-size: 16px;
  padding: .75rem 2rem; border-radius: .55rem;
  border: 1px solid transparent; cursor: pointer; color: #fff;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover:not(:disabled) { background-color: #4eb0ec; border-color: #4eb0ec; }
.btn-primary:active { background-color: var(--primary-dark); }
.btn-outline { border-color: rgba(248, 249, 250, 0.6); color: #f8f9fa; }
.btn-outline:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.btn-ghost { border-color: var(--line); color: var(--ink-3); }
.btn-ghost:hover:not(:disabled) { color: #fff; border-color: rgba(255, 255, 255, .25); }
.btn-sm { font-size: 13px; padding: .4rem 1rem; }
/* The subscription pill. Yellow is reserved for this and for the admin bar —
   it must not become a general accent. */
.btn-cta {
  background: #e1ca17; color: #0a162e; font-weight: 700;
  box-shadow: 0 4px 14px rgba(225, 202, 23, 0.25);
}
.btn-cta:hover:not(:disabled) { background: #f0da2e; transform: translateY(-1px); }

/* ── forms ──────────────────────────────────────────────────────────────── */
.tr-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: .85rem; }
.tr-field label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-4);
}
.tr-field input, .tr-field select, .tr-field textarea {
  padding: .55rem .7rem; border-radius: .5rem; background: rgba(4, 9, 26, .55);
  border: 1px solid rgba(255, 255, 255, .12); color: #fff;
  font-family: var(--font-mono); font-size: 14px;
  /* A number input carries an intrinsic width, and a grid column will not
     shrink below its content: without these the field pushes out through the
     side of its card. */
  width: 100%; min-width: 0;
}
.tr-field input:focus, .tr-field select:focus, .tr-field textarea:focus {
  outline: none; border-color: var(--primary);
}
.tr-field .hint { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
.tr-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tr-row > * { min-width: 0; }

/* ── figures ────────────────────────────────────────────────────────────── */
/* A headline number with its unit. One per view, or none of them lead. */
.tr-figure { display: flex; align-items: baseline; gap: .6rem; }
.tr-figure__v { font-family: var(--font-mono); font-size: 46px; font-weight: 800; color: #fff; line-height: 1; }
.tr-figure__u { font-size: 14px; color: var(--ink-3); }
/* Supporting figures: label above, value below, in a row. */
.tr-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.tr-stats .k {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
.tr-stats .v { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--ink-2); }

/* ── tables ─────────────────────────────────────────────────────────────── */
/* Always inside .tr-scroll: a wide table must scroll in its own box rather
   than making the page scroll sideways. */
.tr-scroll { overflow-x: auto; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tr-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
  padding: .5rem .6rem; border-bottom: 1px solid var(--line);
}
.tr-table td { padding: .6rem; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--ink-2); }
.tr-table td.m { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── tags ───────────────────────────────────────────────────────────────── */
/* State is carried by a word as well as a colour, so it survives a greyscale
   screenshot and colour-blindness. */
.tr-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: .12rem .5rem; border-radius: 999px; white-space: nowrap;
}
.tr-tag--good { color: var(--good); background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .3); }
.tr-tag--warn { color: var(--warn); background: rgba(224, 145, 60, .12); border: 1px solid rgba(224, 145, 60, .3); }
.tr-tag--bad  { color: var(--bad);  background: rgba(239, 67, 67, .12);  border: 1px solid rgba(239, 67, 67, .3); }
.tr-tag--info { color: var(--primary-light); background: rgba(var(--primary-rgb), .14); border: 1px solid rgba(var(--primary-rgb), .35); }

/* ── admin preview bar ──────────────────────────────────────────────────── */
/* Yellow on purpose and only here: a screenshot of an unreleased page must
   never be mistakable for the live site. */
.ac-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 20px; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: #0b1730; background: linear-gradient(90deg, #ffd166, #f7b733);
}
.ac-bar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.ac-bar nav a {
  color: #0b1730; padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(11, 23, 48, .28); font-weight: 600;
}
.ac-bar nav a.on { background: #0b1730; color: #ffd166; border-color: #0b1730; }
.ac-bar .ac-note { margin-left: auto; font-weight: 500; opacity: .8; }

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}