/* ==========================================================================
   Fire Watch Live - base.css
   Shared design tokens, atmosphere, app shell, header, freshness bar,
   view toggle, push button. Owned by Stream B.
   ========================================================================== */

:root{
  --bg:#0b0a0d;
  --bg2:#15121a;
  --panel:#17141c;
  --panel2:#1d1924;
  --ink:#f4ece0;
  --muted:#9b9082;
  --faint:#6c6358;
  --line:rgba(255,236,210,.10);
  --line2:rgba(255,236,210,.18);
  --ember:#ff8a1f;
  --crit:#ff3526;
  --high:#ff7a18;
  --elev:#ffc02e;
  --watch:#ffc02e;
  --ok:#86d24a;
  --teal:#39c6b0;
  --route-a:#ffd24a;
  --route-b:#ff6a1a;
  --route-c:#e02a18;
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Barlow",system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- atmosphere ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos .glow{
  position:absolute;left:50%;top:-12%;width:120vmax;height:80vmax;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(255,110,30,.16),rgba(255,60,20,.05)38%,transparent 64%);
  filter:blur(8px);
}
.atmos .glow.bottom{top:auto;bottom:-26%;background:radial-gradient(ellipse at center,rgba(255,170,40,.12),transparent 60%)}
.topo{position:absolute;inset:0;opacity:.5;mix-blend-mode:screen}
.grain{position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.embers{position:absolute;inset:0}
.ember{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#ffd27a,#ff7a18);box-shadow:0 0 8px 1px rgba(255,140,40,.8);
  animation:rise linear infinite;opacity:0}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  12%{opacity:.9}
  80%{opacity:.55}
  100%{transform:translateY(-104vh) translateX(var(--drift,20px)) scale(.3);opacity:0}
}

.wrap{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 22px 80px}

@keyframes rise-in{to{opacity:1;transform:none}}

/* ==========================================================================
   Freshness bar  (#freshness-bar) - js/freshness.js
   Sticky top strip: LIVE / Updated Xm ago / source health dots / threat chip.
   ========================================================================== */
#freshness-bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
  padding:9px 22px;
  background:rgba(11,10,13,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;
}
#freshness-bar .fb-inner{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
  max-width:1160px;margin:0 auto;width:100%}
.fb-status{display:inline-flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.fb-status .dot{width:8px;height:8px;border-radius:50%;background:var(--crit);
  box-shadow:0 0 0 0 rgba(255,53,38,.7);animation:ping 1.8s ease-out infinite}
.fb-status.live{color:var(--crit)}
.fb-status.stale{color:var(--elev)}
.fb-status.stale .dot{background:var(--elev);animation:none;box-shadow:0 0 8px 1px rgba(255,192,46,.7)}
.fb-status.down{color:var(--crit)}
.fb-status.down .dot{background:var(--crit);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,53,38,.55)}70%{box-shadow:0 0 0 9px rgba(255,53,38,0)}100%{box-shadow:0 0 0 0 rgba(255,53,38,0)}}

.fb-updated{color:var(--muted);letter-spacing:.04em}
.fb-updated b{color:var(--ink);font-weight:500}

.fb-sources{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fb-src{display:inline-flex;align-items:center;gap:6px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.fb-src .sdot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.fb-src.ok .sdot{background:var(--ok);box-shadow:0 0 7px 0 rgba(134,210,74,.55)}
.fb-src.down .sdot{background:var(--crit);box-shadow:0 0 7px 0 rgba(255,53,38,.5)}
.fb-src.ok{color:var(--muted)}
.fb-src.down{color:#d99}

.fb-threat{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fb-chip{padding:4px 11px;border-radius:999px;font-weight:600;color:#1a1208;letter-spacing:.1em}
.fb-chip.t-normal{background:var(--ok)}
.fb-chip.t-watch{background:var(--elev)}
.fb-chip.t-elevated{background:var(--high)}
.fb-chip.t-critical{background:var(--crit);color:#fff}

/* ==========================================================================
   Header
   ========================================================================== */
header{padding:46px 0 18px;position:relative}
.kicker{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ember);display:flex;align-items:center;gap:12px;margin:0 0 18px;
}
.kicker::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--ember),transparent)}

h1{
  font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(40px,7.6vw,98px);line-height:.92;letter-spacing:.005em;margin:0;
  background:linear-gradient(180deg,#fff7ec 8%,#ffd9a3 52%,#ff7a2c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 50px rgba(255,120,40,.18);
}
h1 .arrow{color:var(--crit);-webkit-text-fill-color:var(--crit);font-size:.8em;padding:0 .08em;text-shadow:0 0 24px rgba(255,53,38,.6)}
.sub{margin:18px 0 0;max-width:62ch;color:var(--muted);font-size:clamp(15px,1.5vw,18px)}

/* ==========================================================================
   View toggle  (#view-toggle) - hero route/driving switch
   ========================================================================== */
#view-toggle{margin:30px 0 4px}
.vt-shell{
  display:inline-flex;position:relative;gap:2px;padding:6px;
  background:linear-gradient(160deg,var(--panel),var(--bg2));
  border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);
}
.vt-btn{
  position:relative;z-index:2;appearance:none;cursor:pointer;
  background:transparent;border:0;color:var(--muted);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:clamp(15px,1.8vw,19px);
  padding:13px 30px;border-radius:11px;display:inline-flex;align-items:center;gap:10px;
  transition:color .25s ease;
}
.vt-btn .vt-ico{font-size:1.05em;line-height:1}
.vt-btn[aria-pressed="true"]{color:#1a1208}
.vt-btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.vt-thumb{
  position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 8px);
  border-radius:11px;z-index:1;
  background:linear-gradient(150deg,var(--ember),var(--high));
  box-shadow:0 6px 20px -6px rgba(255,122,24,.7);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease;
}
.vt-shell[data-view="map"] .vt-thumb{transform:translateX(calc(100% + 4px));
  background:linear-gradient(150deg,var(--crit),var(--high))}

/* ==========================================================================
   Enable push button (#enable-push) - referenced here, styled by Stream C
   alerts.css too; base fallback so it never looks broken.
   ========================================================================== */
#enable-push{
  appearance:none;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:10px;padding:10px 16px;
  display:inline-flex;align-items:center;gap:9px;transition:border-color .2s,transform .1s;
}
#enable-push:hover{border-color:var(--ember)}
#enable-push:active{transform:translateY(1px)}
#enable-push .bell{color:var(--ember)}
#enable-push[hidden]{display:none}

.shell-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 4px}

/* ---------- view containers ---------- */
#view-route[hidden],#view-map[hidden]{display:none}

/* When Map Mode is active, the full-bleed map overlay covers the scrolling
   page; lock body scroll and hide the ambient chrome behind it. */
body.map-active{overflow:hidden}
body.map-active .atmos{display:none}

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

/* ---------- mobile ---------- */
@media(max-width:820px){
  .wrap{padding:0 16px 70px}
  header{padding:30px 0 12px}
  #freshness-bar{padding:9px 16px}
  .fb-threat{margin-left:0;width:100%}
  .vt-btn{padding:12px 22px}
  .vt-shell{width:100%}
  .vt-btn{flex:1;justify-content:center}
  .vt-thumb{width:calc(50% - 8px)}
}