@import url('../fonts/fonts.css'); /* self-hosted — see docs/fonts/fonts.css (CSP blocked the Google CDN) */

/* ============================================================================
   ATLAS DESIGN SYSTEM
   One sans (Figtree), even scale, white ground, violet as the only brand
   accent — the owner's B8 ruling (2026-08-24, measured from point.me).
   Monospace is for machine tokens only, never for quantities.
   No gradients or glow on UI surfaces — the ONLY exception is a subtle
   radial allowed behind the globe (.globe-glow).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. LIGHT TOKENS (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;   /* native widgets (selects, scrollbars) match the app theme */
  /* Core surfaces + ink — B8: white ground; cards separate by hairline border + shadow,
     never by a tinted surface. */
  --bg:             #ffffff;
  --surface:        #fbfbfc;
  --surface-raised: #ffffff;
  --ink:            #16151a;
  /* Modal/sheet backdrop dim — theme-adaptive so it actually dims in dark mode (a near-black
     overlay over the near-black dark surface was imperceptible). */
  --scrim:          rgba(14,12,20,.40);

  /* Muted ink ramp — neutral-cool grays, all ≥7:1 (AAA) on --bg AND --surface-raised (white is
     the binding case). A real 3-step ramp (1 darkest … 3 most subtle). Used for placeholders,
     eyebrows, ticket meta, list headers, tab-bar labels. */
  --muted-1:        #4a4a54;   /* 8.4:1 on white */
  --muted-2:        #50505a;   /* 7.7:1 on white */
  --muted-3:        #56565f;   /* 7.0:1 on white — lightest that still clears AAA */

  /* Borders */
  --border:         #e3e3e9;
  --border-soft:    #ededf1;

  /* ACCENT family — the BRAND VIOLET, per the final owner ruling (2026-08-24, point.me study):
     white ground, one sans, violet #5b3ba6 as the ONLY accent; brass is retired. The token NAMES
     keep "brass" because 145 call sites use them and a rename buys no pixels — the VALUES are
     violet. --brass is the fill/arc accent; --brass-deep is TEXT/link/focus (≈10.6:1 on white,
     AAA, ≥3:1 as the focus ring). Tints reuse the flare wash so the page carries ONE violet. */
  --brass:          #5b3ba6;
  --brass-deep:     #472d85;   /* TEXT/link/focus violet — AAA on --surface */
  --brass-tint-bg:  #efe8fb;
  --brass-tint-bd:  #d8c8f3;

  /* Brand violet — the logo + the OUTLIER "flare". A deep, professional purple. */
  --brand:          #5b3ba6;

  /* OUTLIER "flare" — the purple accent for outlier-designated fares (replaces the old gold/brass
     treatment, for a coherent palette). -deep = AA text/icon on the tint or paper; -line = the globe
     arc + nav accent; -glow = the soft outer flare on outlier cards. */
  --flare-line:     #5b3ba6;   /* the ONE violet — the old drifted lighter shade is retired */
  --flare-deep:     #5b3ba6;
  --flare-tint-bg:  #efe8fb;
  --flare-tint-bd:  #d8c8f3;
  --flare-glow:     rgba(91,59,166,.26);
  /* "Purchasable with your points" — a calm green/teal, DISTINCT from the purple OUTLIER flare.
     Purple = "great deal"; green = "your points can book it." --book-deep is AAA text on --surface. */
  --book-line:      #2d8a63;
  --book-deep:      #1d6b49;   /* ~7:1 text green on the cream surfaces */
  --book-tint-bg:   #e7f3ec;
  --book-tint-bd:   #bfe0cd;
  --book-glow:      rgba(45,138,99,.20);
  /* "New today" = a deal in today's pull not seen before. ORANGE — deliberately distinct from the purple
     OUTLIER flare and the green BOOKABLE flare so the three signals never read as the same thing. */
  --new-line:       #e07b39;
  --new-deep:       #a64a14;   /* WCAG AA orange text (>=5.1:1 on both the cream surface + the New tint) */
  --new-tint-bg:    #fdf0e4;
  --new-tint-bd:    #f3d2ad;
  --new-glow:       rgba(224,123,57,.26);

  /* Seat / award availability — seat-fg darkened to clear AA on the seat pill background. */
  --seat-bg:        #eef3ec;
  --seat-fg:        #56754e;

  /* Error / destructive (replaces stray hardcoded reds). */
  --error:          #b4453a;

  /* NS-2a (northstar Phase 2a): TRUST semantic tokens — the certainty component's ONE tuning point.
     Aliases onto the theme ramps (book = affirmatively checked / verified · brass = honest-unknown /
     over-cap · muted = unverified idea), so light+dark stay in lockstep automatically (the aliased
     vars flip per theme). Consumed by components.css (.trust-tier / .tier-chip / .trust-strip .tc /
     .constraint-flare--soft) — never hardcode these hues at a use site. Declared once here: var()
     aliases resolve at USE time, so the dark overrides of --book-*/--brass-*/--muted-* flow through. */
  --trust-ok-line:   var(--book-line);
  --trust-ok-deep:   var(--book-deep);
  --trust-ok-bg:     var(--book-tint-bg);
  --trust-ok-bd:     var(--book-tint-bd);
  --trust-warn-line: var(--brass);
  --trust-warn-deep: var(--brass-deep);
  --trust-warn-bg:   var(--brass-tint-bg);
  --trust-warn-bd:   var(--brass-tint-bd);
  --trust-idea-line: var(--muted-3);
  --trust-idea-deep: var(--muted-2);

  /* --- Globe (light) --- B8: cool neutral sphere; the arcs and dots are the color carriers. */
  --globe-ocean:    #f1f2f6;
  --globe-border:   #9aa0ac;
  --globe-pin-bg:   rgba(22,21,26,0.92);   /* fare-pin chip: near-black on the light globe */
  --globe-pin-ink:  #f6f6f9;
  /* Land palette (shared both themes, listed here for reference) — quiet gray ladder with a
     faint violet cast; countries stay distinguishable, data stays the loudest thing. */
  --globe-land-1:   #e3d3d2;
  --globe-land-2:   #dbc5c4;
  --globe-land-3:   #e8dcda;
  --globe-land-4:   #d2bcbb;
  --globe-land-5:   #dfcbc8;
  --globe-land-6:   #ccb4b3;
  --globe-land-7:   #e6dbd8;
  --globe-land-8:   #d6c2c0;

  /* --- Trip-length category colors (light) --- */
  --cat-all-line:          #6b6b77;
  --cat-all-bg:            #ececf1;
  --cat-weekend-line:      #6f978c;
  --cat-weekend-bg:        #dde8e2;
  --cat-one_week-line:     #8a9b5e;
  --cat-one_week-bg:       #e7ead4;
  --cat-two_weeks-line:    #bd8459;
  --cat-two_weeks-bg:      #f1e2d3;
  --cat-outlier-line:  #5b3ba6;   /* the brand violet — the tier the product is named after */
  --cat-outlier-bg:    #efe8fb;

  /* --- Radius --- */
  --r-card:  12px;  /* cards 11–12px */
  --r-pill:  20px;  /* pills / chips 18–20px */
  --r-input: 10px;  /* inputs 9–12px */
  --r-tile:  8px;   /* logo tile */

  /* --- Layout primitives (consumed by components.css) --- */
  --atlas-topbar-h: 60px;   /* top bar height */
  --atlas-rail-w:   222px;  /* left filter rail width (212–230) */
  --atlas-gap:      18px;   /* shell padding / gutter */
  --atlas-tile:     34px;   /* airline logo tile */
  --atlas-eyebrow:  12px;   /* eyebrow font-size, single source of truth. Nudged up from 11px: the label is no longer uppercase, so it no longer needs the extra optical size. */

  /* --- Shadow (light) --- FLAT ONLY: depth via shadow, never gradient/glow */
  --shadow-card:  0 1px 3px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.06);
  --shadow-float: 0 18px 50px rgba(0,0,0,.14);
}

/* ----------------------------------------------------------------------------
   2. DARK TOKENS (override)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;   /* native widgets dark whenever the manual toggle is dark, regardless of OS */
  /* Core surfaces + ink */
  --bg:             #131217;
  /* A9: raised must be LIGHTER than surface (it was darker, so a "raised" card read darker
     than the surface behind it). Lift raised above surface for a correct elevation ramp. */
  --surface:        #1b1a21;
  --surface-raised: #23222b;
  --ink:            #ececf2;
  /* Pure-black, higher-opacity dim reads as dimming even against the near-black dark surfaces. */
  --scrim:          rgba(0,0,0,.62);

  /* Muted ink ramp — cool grays, lightened to clear WCAG AAA (7:1) on the DARK surfaces (--surface
     AND the lighter --surface-raised, which is the binding case). A real 3-step ramp, all ≥7:1. */
  --muted-1:        #bcbcc7;   /* ≥8:1 on --surface-raised */
  --muted-2:        #b5b5c0;   /* ≥7.5:1 on --surface-raised */
  --muted-3:        #aeaeb9;   /* ≥7:1 on --surface-raised — lightest that still clears AAA */

  /* Borders */
  --border:         #33323e;
  --border-soft:    #2a2933;

  /* Brass accent family */
  --brass:          #b79bf0;   /* dark accent = the dark brand violet (matches --brand below) */
  --brass-deep:     #c9b4f5;
  --brass-tint-bg:  #271e3d;
  --brass-tint-bd:  #4a3a75;

  /* Brand violet — lighter on the dark surface so the logo + outlier flare stay vivid + legible. */
  --brand:          #b79bf0;

  /* OUTLIER "flare" (dark) */
  --flare-line:     #b79bf0;
  --flare-deep:     #cdb6f7;
  --flare-tint-bg:  #271e3d;
  --flare-tint-bd:  #4f3f7a;
  --flare-glow:     rgba(183,155,240,.30);
  /* "Purchasable with your points" green (dark) — lightened for ≥7:1 on the dark surfaces */
  --book-line:      #5cc08c;
  --book-deep:      #8fe0b3;
  --book-tint-bg:   #16271e;
  --book-tint-bd:   #2f5a44;
  --book-glow:      rgba(92,192,140,.26);
  /* "New today" (dark) — lightened orange for ≥7:1 on the dark surfaces */
  --new-line:       #f0a868;
  --new-deep:       #f3b87f;
  --new-tint-bg:    #2e2113;
  --new-tint-bd:    #5e421f;
  --new-glow:       rgba(240,168,104,.30);

  /* Seat / award availability */
  --seat-bg:        #1c2518;
  --seat-fg:        #86b06f;

  /* Error / destructive — lighter on the dark surface for readability. */
  --error:          #e0857a;

  /* --- Globe (dark) --- ocean + border flip; the neutral land ladder is shared across themes (it
     reads on both the white-light ocean and the near-black dark ocean), declared here too for parity. */
  --globe-ocean:    #1c1b26;   /* lifted plum-dark — the sphere must not sink into the near-black bg */
  --globe-border:   #4a4a58;
  --globe-pin-bg:   rgba(240,240,246,0.94);   /* fare-pin chip: light on the dark globe */
  --globe-pin-ink:  #16151a;                  /* dark label on the light chip */
  --globe-land-1:   #e3d3d2;
  --globe-land-2:   #dbc5c4;
  --globe-land-3:   #e8dcda;
  --globe-land-4:   #d2bcbb;
  --globe-land-5:   #dfcbc8;
  --globe-land-6:   #ccb4b3;
  --globe-land-7:   #e6dbd8;
  --globe-land-8:   #d6c2c0;

  /* --- Trip-length category colors (dark) --- */
  --cat-all-line:          #8b8b98;
  --cat-all-bg:            #2a2933;
  --cat-weekend-line:      #7fa89a;
  --cat-weekend-bg:        #1d2a26;
  --cat-one_week-line:     #a3b06a;
  --cat-one_week-bg:       #272a17;
  --cat-two_weeks-line:    #cf9469;
  --cat-two_weeks-bg:      #2c2117;
  --cat-outlier-line:  #b79bf0;   /* purple flare (was brass #d4a861) */
  --cat-outlier-bg:    #271e3d;

  /* --- Shadow (dark) --- heavier float opacity for legibility on dark bg */
  --shadow-card:  0 1px 3px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.06);
  --shadow-float: 0 18px 50px rgba(0,0,0,.4);
}

/* ----------------------------------------------------------------------------
   3. BASE LAYER
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Figtree', -apple-system, system-ui, sans-serif;
  transition: background .25s, color .25s;
}

/* ----------------------------------------------------------------------------
   4. TYPE UTILITIES
   -------------------------------------------------------------------------- */

/* Headlines — the one sans, carried by weight (Figtree 700 per the B8 ruling), never by a
   second face. */
.headline {
  font-family: 'Figtree', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 700;
}

/* Mileage / price numbers — the same face with tabular figures so columns align */
.price {
  font-family: 'Figtree', 'IBM Plex Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Eyebrows. The old treatment stacked two of the most-cited generated-interface tells at once: a
   MONOSPACE face on a label that is not machine output, and UPPERCASE with wide tracking, which is
   the default way a model dresses up a section header it has nothing to say about. Both are now
   gone. Small, quiet, in the text face, with normal case and the sentence's own capitalisation,
   reads as considered rather than as a template. Tracking stays very slightly open because the
   size is small; that is legibility, not decoration. */
.eyebrow {
  font-family: 'Figtree', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: .82rem;
  letter-spacing: .012em;
  color: var(--muted-3);
}

/* Monospace is for MACHINE TOKENS only: PNRs, flight numbers, ledger and admin ids, API payloads.
   Never for quantities. DM Mono's shipped binary exposes no figure features at all, so on a price
   or a mileage it buys a terminal aesthetic and nothing else, and mono numerals read as a
   developer's debug view of a database. Newsreader already carries true tabular lining figures
   (tnum/pnum), so alignment was never a reason to reach for this. */
.mono {
  font-family: 'DM Mono', ui-monospace, monospace;
}

/* Quantities: the text face, with figures that still line up in a column. */
.figure, .fig-num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Search placeholder — quiet italic in the one sans */
.search input::placeholder,
input.search::placeholder {
  font-family: 'Figtree', 'IBM Plex Sans', system-ui, sans-serif;
  font-style: italic;
}

/* ----------------------------------------------------------------------------
   5. GLOBE GLOW
   The single allowed soft effect: a subtle radial behind the globe only.
   Place this on an element sized/positioned behind the globe canvas.
   -------------------------------------------------------------------------- */
.globe-glow {
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--brand) 14%, transparent) 0%,
    transparent 68%
  );
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   6. BACK LINK
   Canonical "back to the map" affordance shared by every subpage (heatmap,
   distribution, audits). One quiet treatment so the subpages read as one app —
   subpages must NOT re-declare .back locally.
   -------------------------------------------------------------------------- */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-1);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 14px;
}
.back:hover { color: var(--ink); }
a.back:hover, a.back:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* Shared ERROR variant for subpage empty states: a failed load must look distinct from an
   intentional empty/loading state (red-tinted, bordered) — mirrors index.html's .panel-empty.is-error
   so every subpage gives the same polished failure feedback. */
.empty.is-error {
  border: 1px solid var(--error);
  background: color-mix(in srgb, var(--error) 8%, transparent);
  color: var(--ink);
}

/* The .back link is the first interactive element on every subpage — give it the same 44px
   touch-target floor on phones that the app's other controls get (text size unchanged). */
@media (max-width: 879.98px) {
  .back { min-height: 44px; padding-block: 11px; align-items: center; }
}