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

/* ============================================================================
   ATLAS DESIGN SYSTEM
   Flat, warm, editorial. Newsreader for headlines + ALL mileage numbers,
   system-ui for UI/body. 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 */
  --bg:             #efe9dd;
  --surface:        #f6f1e7;
  --surface-raised: #fdfbf6;
  --ink:            #2a2419;
  /* 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(20,16,10,.40);

  /* Muted ink ramp — darkened to clear WCAG AAA (7:1) on --surface AND --surface-raised (was AA-only,
     5.1–5.8:1). A real 3-step ramp (1 darkest … 3 most subtle), all ≥7:1. Used for placeholders,
     eyebrows, ticket meta, list headers, tab-bar labels. */
  --muted-1:        #4f4636;   /* 8.25:1 on --surface */
  --muted-2:        #534a39;   /* 7.75:1 on --surface */
  --muted-3:        #574e3c;   /* 7.29:1 on --surface — lightest that still clears AAA */

  /* Borders */
  --border:         #ddd3c0;
  --border-soft:    #e6dcc9;

  /* Brass accent family. --brass is the fill/arc accent; --brass-deep is the TEXT/link/focus brass,
     darkened to clear AA text (4.5:1) on light surfaces AND ≥3:1 as the keyboard focus ring (it was
     #956b1d = 3.95:1 text / fail). Now #85600f ≈ 4.7:1 on bg/surface/brass-tint. */
  --brass:          #b08a3e;
  --brass-deep:     #664909;   /* TEXT/link/focus brass — 7.40:1 on --surface (AAA); was #85600f (5.07, AA-only) */
  --brass-tint-bg:  #faf3e4;
  --brass-tint-bd:  #e7d3a6;

  /* 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:     #7a4fd0;
  --flare-deep:     #5b3ba6;
  --flare-tint-bg:  #efe8fb;
  --flare-tint-bd:  #d8c8f3;
  --flare-glow:     rgba(123,79,208,.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) --- */
  --globe-ocean:    #e8ece7;
  --globe-border:   #a89968;   /* darkened from #b8aa88: the old tone was ~1.1:1 on the warm land — borders/graticule were nearly invisible in light mode */
  --globe-pin-bg:   rgba(38,32,22,0.92);   /* fare-pin chip: warm-dark on the light paper globe */
  --globe-pin-ink:  #f2ede3;               /* cream label on the dark chip */
  /* Land palette (shared both themes, listed here for reference) */
  --globe-land-1:   #d6a9a0;
  --globe-land-2:   #d2a98f;
  --globe-land-3:   #cdaeb0;
  --globe-land-4:   #d3c3a0;
  --globe-land-5:   #b8c39a;
  --globe-land-6:   #cf988a;
  --globe-land-7:   #dab6ac;
  --globe-land-8:   #c4bd8f;

  /* --- Trip-length category colors (light) --- */
  --cat-all-line:          #6f6451;
  --cat-all-bg:            #ece3d2;
  --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:  #7a4fd0;   /* purple flare (was brass #b08a3e) */
  --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:             #19150f;
  /* A9: raised must be LIGHTER than surface (it was #1d1810 < #221d15, so a "raised" card read darker
     than the surface behind it). Lift raised above surface for a correct elevation ramp. */
  --surface:        #221d15;
  --surface-raised: #2b2418;
  --ink:            #f0e8d6;
  /* Pure-black, higher-opacity dim reads as dimming even against the near-black dark surfaces. */
  --scrim:          rgba(0,0,0,.62);

  /* Muted ink ramp — lightened to clear WCAG AAA (7:1) on the DARK surfaces (--surface AND the lighter
     --surface-raised, which is the binding case). Was AA-only (4.8–6.5:1). A real 3-step ramp, all ≥7:1. */
  --muted-1:        #c8bda5;   /* 8.24:1 on --surface-raised */
  --muted-2:        #c2b79f;   /* 7.72:1 on --surface-raised */
  --muted-3:        #bcb199;   /* 7.23:1 on --surface-raised — lightest that still clears AAA */

  /* Borders */
  --border:         #352e22;
  --border-soft:    #2c261c;

  /* Brass accent family */
  --brass:          #d4a861;
  --brass-deep:     #e3b977;
  --brass-tint-bg:  #2a2113;
  --brass-tint-bd:  #5a4a2a;

  /* 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 warm land palette is shared across themes (it reads
     well on both the light paper ocean and the near-black dark ocean), declared here too for token parity. */
  --globe-ocean:    #1f1a24;   /* P7-14: lifted plum-dark — the sphere was sinking into the near-black bg */
  --globe-border:   #4d4231;
  --globe-pin-bg:   rgba(239,233,221,0.94);   /* fare-pin chip: light paper on the dark globe (separates from the near-black ocean) */
  --globe-pin-ink:  #19150f;                  /* dark label on the light chip */
  --globe-land-1:   #d6a9a0;
  --globe-land-2:   #d2a98f;
  --globe-land-3:   #cdaeb0;
  --globe-land-4:   #d3c3a0;
  --globe-land-5:   #b8c39a;
  --globe-land-6:   #cf988a;
  --globe-land-7:   #dab6ac;
  --globe-land-8:   #c4bd8f;

  /* --- Trip-length category colors (dark) --- */
  --cat-all-line:          #857a5f;
  --cat-all-bg:            #2c261c;
  --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: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  transition: background .25s, color .25s;
}

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

/* Headlines — Newsreader serif, medium weight */
.headline {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
}

/* Mileage / price numbers — Newsreader with tabular figures so columns align */
.price {
  font-family: 'Newsreader', Georgia, 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: 'Newsreader', Georgia, 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 — Newsreader italic (per spec) */
.search input::placeholder,
input.search::placeholder {
  font-family: 'Newsreader', Georgia, 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(--brass) 16%, 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; }
}