/* N·T DRIVE — map screen styles.
   Extracted verbatim from the inline <style> that used to live in
   index.html. The legacy :root token block was REMOVED: the sheet is
   generated by spec/brand.clj into vendor/nt-drive.css and is the only
   token authority (BRAND.md §8). Do not reintroduce local tokens here.
*/

/* ═══ Tokens — BRAND.md §4/§5/§6 ═══════════════════════════════════════ */
/* Colours come from vendor/nt-drive.css (generated by `bb design:export`
   from pulse/src/lacite/tokens.edn). Nothing here may hard-code a hex.
   These are the NON-colour tokens that sheet does not carry. */

 (generated by
   `bb design:export` from pulse/src/lacite/tokens.edn). Nothing below
   may hard-code a hex — that is exactly the drift the token system exists
   to prevent. */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font);
  background: var(--navy);
  color: var(--text);
  font-size:15px;
  -webkit-font-smoothing: antialiased;
}

/* ═══ 1. MAP IS HOME — full-bleed, edge to edge ═════════════════════════ */
#map { position:fixed; inset:0; z-index:0; background:var(--navy-deep); }

/* ── No-tiles ground ────────────────────────────────────────────────────────
   When tiles cannot be fetched the pane must look DELIBERATE, not blank.
   A flat navy rectangle is indistinguishable from a map that failed to paint,
   and a driver cannot act on a difference he cannot see. The generated chevron
   ground says: the surface is here, the tiles are not. BRAND.md §3.4 permits
   a pattern only where it CARRIES something, and this is the one place on the
   map where it does — it is never the live background.

   The selector is `#map.no-tiles` with NO descendant, because #map IS the
   .leaflet-container: Leaflet adds that class to the div it is initialised on.
   The first version of this rule read `#map.no-tiles .leaflet-container`, a
   descendant selector that can never match its own element — the class was
   being applied and the background never rendered. It was caught by sampling
   the offline screenshot's pixels, not by the test that proved the class was
   set: asserting the JS half of a feature is not asserting the feature. */
#map.no-tiles {
  background-image: url("../icons/pattern-chevron-grid.png") !important;
  background-repeat: repeat !important;
  background-color: var(--navy-deep) !important;
}

/* Leaflet chrome stripped to nothing. Zero chrome, BRAND.md §3.4 */
.leaflet-container { background:var(--navy-deep) !important; font-family:var(--font); }
.leaflet-control-attribution {
  background:rgba(6,9,22,.7) !important; color:var(--text-3) !important;
  font-size:9px !important; padding:2px 6px !important; border-radius:0 !important;
}
.leaflet-control-attribution a { color:var(--text-3) !important; }
.leaflet-bar { display:none !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--surface-2) !important; color:var(--text) !important; }
.leaflet-popup-content { margin:12px 14px !important; font-family:var(--font) !important; }

/* ═══ 2. Top bar — the only chrome ══════════════════════════════════════ */
.top {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;
  background:linear-gradient(180deg, var(--navy) 0%, rgba(10,14,39,.86) 55%, transparent 100%);
  pointer-events:none;
}
.top > * { pointer-events:auto; }
.wordmark { display:flex; align-items:baseline; font-family:var(--mono); font-weight:700; font-size:19px; letter-spacing:-.6px; }
.wordmark .a { color:var(--surge); }
.wordmark .b { color:var(--signal); }
.live {
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.4px;
  padding:6px 11px; border-radius:999px;
  background:rgba(13,13,26,.86); border:1px solid var(--line);
  color:var(--text-2); backdrop-filter:blur(12px);
}
.live .dot { width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 rgba(0,255,148,.6); animation:pulse 2s infinite; }
.live.stale .dot { background:var(--high); animation:none; }
.live.down  .dot,
.live.connecting .dot { background:var(--text-3); animation:none; }
@keyframes pulse { 70% { box-shadow:0 0 0 7px rgba(0,255,148,0); } 100% { box-shadow:0 0 0 0 rgba(0,255,148,0); } }
@media (prefers-reduced-motion: reduce) { .live .dot { animation:none; } }

/* ═══ 3. The surge score — the hero, the decision ═══════════════════════ */
.hero {
  position:fixed; z-index:600; left:16px; right:16px;
  bottom:calc(var(--safe-b) + 18px);
  pointer-events:none;
}
.hero-card {
  pointer-events:auto;
  background:rgba(13,13,26,.93);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:18px 20px 16px;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
}
.hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.hero-zone { font-size:25px; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
.hero-sub  { font-size:12px; color:var(--text-2); margin-top:3px; }
.hero-score { display:flex; align-items:baseline; gap:3px; font-family:var(--mono); }
.hero-score .n { font-size:44px; font-weight:700; line-height:.9; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.hero-score .d { font-size:15px; color:var(--text-3); font-weight:500; }
.hero-right { display:flex; align-items:flex-end; flex-direction:column; gap:8px; }
.hero-eur {
  font-family:var(--mono); font-size:19px; font-weight:700; color:var(--earnings);
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}
.hero-eur .per { font-size:11px; color:var(--text-3); font-weight:500; }
.hero-travel {
  font-family:var(--mono); font-size:13px; color:var(--text-2);
  font-variant-numeric:tabular-nums; letter-spacing:-.2px;
}
.hero-travel.est { color:var(--nt-text-3); font-style:italic; }
.pill {
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.8px;
  text-transform:uppercase; padding:4px 9px; border-radius:999px;
  border:1px solid currentColor;
}

/* the reason — one line, always present */
.hero-why {
  display:flex; align-items:flex-start; gap:8px;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  font-size:13px; color:var(--text-2); line-height:1.45; min-height:19px;
}
.hero-why .ico { flex-shrink:0; opacity:.85; }

/* the one action that matters */
.go {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:15px; padding:15px;
  border:none; border-radius:var(--r-md);
  background:var(--nt-surge); color:var(--nt-on-surge);
  font-family:var(--font); font-size:15px; font-weight:700; letter-spacing:-.2px;
  cursor:pointer; transition:transform var(--d-fast) var(--ease-out), filter var(--d-fast);
}
.go:active { transform:scale(.975); filter:brightness(1.12); }
.go:disabled { background:var(--surface-2); color:var(--text-3); cursor:default; }
.hero-actions { display:flex; gap:8px; }
.here {
  flex:0 0 auto; padding:15px 16px; border-radius:var(--r-md);
  border:1px solid var(--nt-line); background:var(--nt-surface-2);
  color:var(--nt-text-2); font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer;
  transition:transform var(--d-fast) var(--ease-out);
}
.here:active { transform:scale(.96); }
.bands-toggle {
  margin-top:10px; padding:9px 14px; border-radius:var(--r-sm);
  border:1px solid var(--nt-line); background:transparent;
  color:var(--nt-text-3); font-family:var(--mono); font-size:10px;
  letter-spacing:.8px; text-transform:uppercase; cursor:pointer;
  transition:color var(--d-fast), border-color var(--d-fast);
}
.bands-toggle.on { color:var(--nt-med); border-color:rgba(255,184,0,.45); }

/* ═══ 4. Zone rail — swipeable, peek height ════════════════════════════ */
.rail {
  position:fixed; z-index:550; left:0; right:0;
  bottom:calc(var(--safe-b) + 232px);
  display:flex; gap:9px; overflow-x:auto; padding:0 16px 6px;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.rail::-webkit-scrollbar { display:none; }
.chip {
  flex:0 0 auto; scroll-snap-align:start;
  min-width:112px; padding:11px 13px;
  background:rgba(13,13,26,.9); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-left-width:3px;
  border-radius:var(--r-md);
  cursor:pointer; text-align:left;
  transition:transform var(--d-fast) var(--ease-out), border-color var(--d-normal);
}
.chip:active { transform:scale(.96); }
.chip.on { border-color:var(--surge); background:rgba(255,31,143,.1); }
.chip .z { font-size:12px; font-weight:600; margin-top:5px; white-space:nowrap;
          overflow:hidden; text-overflow:ellipsis; max-width:98px; }
.chip .s { font-family:var(--mono); font-size:19px; font-weight:700; letter-spacing:-.5px;
          font-variant-numeric:tabular-nums; }
.chip .e { font-family:var(--mono); font-size:10px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.chip .t { font-family:var(--mono); font-size:10px; color:var(--nt-text-2); margin-top:2px; font-variant-numeric:tabular-nums; }

/* ═══ 5. Markers ═══════════════════════════════════════════════════════ */
.mk {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transform:translate(-50%,-100%); cursor:pointer;
}
.mk .bubble {
  display:flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px;
  background:rgba(13,13,26,.94);
  border:1.5px solid currentColor;
  font-family:var(--mono); font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  box-shadow:0 3px 14px rgba(0,0,0,.55);
  transition:transform var(--d-fast) var(--ease-out);
}
/* Urgency must read at a glance: a 9/100 marker must not shout like a 65.
   Calm/low markers are small and translucent; only med/high/hot earn full
   weight and the halo pulse. */
.mk.t-calm .bubble, .mk.t-low .bubble {
  opacity:.5; padding:4px 8px; font-size:11px; border-width:1px;
  box-shadow:0 1px 5px rgba(0,0,0,.5);
}
.mk.t-calm .eur, .mk.t-low .eur { display:none; }
.mk.t-calm .stem, .mk.t-low .stem { height:5px; }
.mk.t-hot .bubble, .mk.t-high .bubble { font-size:14px; padding:7px 12px; }
/* ═══ 4. Zone rail — above the hero, never clipped ═══════════════════════ */
.rail {
  position:fixed; z-index:550; left:0; right:0;
  bottom:calc(var(--safe-b) + 300px);
  display:flex; gap:9px; overflow-x:auto; padding:0 16px 10px;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  /* Fade the ends so the rail reads as continuing, not clipped. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* glow ring, opacity by urgency */
.mk .halo {
  position:absolute; width:0; height:0; border-radius:50%;
  border:1.5px solid currentColor; opacity:0; pointer-events:none;
  animation:halo 3s var(--ease-out) infinite;
}
@keyframes halo { 0% { width:26px; height:26px; opacity:.5; } 100% { width:86px; height:86px; opacity:0; } }
@media (prefers-reduced-motion: reduce) { .mk .halo { display:none; } }

/* ═══ 6. Empty / error ══════════════════════════════════════════════════ */
.note {
  position:fixed; z-index:700; inset:auto 16px calc(var(--safe-b) + 18px) 16px;
  padding:16px 18px; border-radius:var(--r-lg);
  background:rgba(13,13,26,.95); border:1px solid var(--line);
  font-size:13px; color:var(--text-2); line-height:1.5;
}
.note b { color:var(--text); }
.note .h { font-size:14px; font-weight:700; color:var(--text); margin-bottom:5px; display:block; }