/* ============================================================================
   Time Machine — 87-Year Climate Atlas
   Liquid-Glass full-bleed takeover for tinyblue.dev/weather
   Self-contained styles, prefixed .tm87-* to avoid collisions.
   Honors data-theme (light/dark) and prefers-reduced-motion.
   ============================================================================ */

:root {
  --tm87-warm: #d94a38;
  --tm87-warm-soft: #f5b84b;
  --tm87-cold: #21b7d7;
  --tm87-cold-soft: #5aa6ff;
  --tm87-glass: color-mix(in oklab, var(--bg-elev, #fff) 74%, transparent);
  --tm87-glass-strong: color-mix(in oklab, var(--bg-elev, #fff) 90%, transparent);
  --tm87-line: color-mix(in oklab, var(--ink, #1d1d1f) 14%, transparent);
  --tm87-ink: var(--ink, #1d1d1f);
  --tm87-mute: var(--ink-mute, #6e6e73);
  --tm87-shadow: 0 32px 90px rgba(8, 14, 28, .30);
}
:root[data-theme="dark"] {
  --tm87-glass: color-mix(in oklab, var(--bg-elev, #0b0b0d) 64%, transparent);
  --tm87-glass-strong: color-mix(in oklab, var(--bg-elev, #0b0b0d) 84%, transparent);
  --tm87-line: color-mix(in oklab, var(--ink, #f5f5f7) 16%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tm87-glass: color-mix(in oklab, var(--bg-elev, #0b0b0d) 64%, transparent);
    --tm87-glass-strong: color-mix(in oklab, var(--bg-elev, #0b0b0d) 84%, transparent);
    --tm87-line: color-mix(in oklab, var(--ink, #f5f5f7) 16%, transparent);
  }
}

/* ---- Launch button (lives in the status row) ---- */
.tm87-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--tm87-warm) 38%, transparent);
  background: linear-gradient(120deg,
    color-mix(in oklab, var(--tm87-cold) 22%, transparent),
    color-mix(in oklab, var(--tm87-warm) 22%, transparent));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--tm87-ink);
  font: 600 13px/1 system-ui, -apple-system, "SF Pro Text", sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.34, 1.32, .52, 1), box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 4px 16px rgba(217, 74, 56, .14);
}
.tm87-launch:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: color-mix(in oklab, var(--tm87-warm) 60%, transparent);
  box-shadow: 0 8px 26px rgba(217, 74, 56, .26);
}
.tm87-launch:focus-visible { outline: 2px solid var(--tm87-cold); outline-offset: 3px; }
.tm87-launch .tm87-launch-spark {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, var(--tm87-warm-soft), var(--tm87-warm));
  box-shadow: 0 0 10px var(--tm87-warm-soft);
  animation: tm87-pulse 2.6s ease-in-out infinite;
}
@keyframes tm87-pulse { 0%,100% { opacity: .55; transform: scale(.85);} 50% { opacity: 1; transform: scale(1.25);} }

/* ---- Full-bleed takeover ---- */
.tm87 {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  flex-direction: column;
  background: rgba(6, 9, 18, .58);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  opacity: 0;
  transition: opacity .42s ease;
  color: var(--tm87-ink);
  overscroll-behavior: contain;
}
:root[data-theme="light"] .tm87 { background: rgba(232, 238, 247, .60); }
.tm87.is-open { display: flex; opacity: 1; }

/* aurora era backdrop, tinted by the focused year's anomaly */
.tm87-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 20% -10%, var(--tm87-era-warm, rgba(245,184,75,.16)), transparent 60%),
    radial-gradient(120% 80% at 85% 110%, var(--tm87-era-cold, rgba(33,183,215,.18)), transparent 60%);
  transition: background .8s ease;
  opacity: .9;
}
.tm87-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transition: opacity .6s ease;
}
.tm87[data-playing="true"] .tm87-grain { opacity: .06; }

/* ---- Header ---- */
.tm87-head {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 16px;
  padding: clamp(14px, 2.4vw, 22px) clamp(16px, 3vw, 34px);
  border-bottom: 1px solid var(--tm87-line);
}
.tm87-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm87-kicker {
  font: 700 11px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tm87-warm-soft);
}
.tm87-title h2 {
  margin: 0; font: 700 clamp(18px, 2.6vw, 26px)/1.1 system-ui, -apple-system, sans-serif;
  letter-spacing: -.01em;
}
.tm87-sub { font: 500 12px/1.3 system-ui, sans-serif; color: var(--tm87-mute); }
.tm87-head-spacer { flex: 1; }
.tm87-close {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--tm87-line);
  background: var(--tm87-glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--tm87-ink); cursor: pointer; font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.tm87-close:hover { background: var(--tm87-glass-strong); transform: rotate(90deg); }
.tm87-close:focus-visible { outline: 2px solid var(--tm87-cold); outline-offset: 2px; }

/* ---- Stage / scroll body ---- */
.tm87-stage {
  position: relative; z-index: 2;
  flex: 1; min-height: 0;
  overflow-y: auto;
  /* extra bottom room so scrolled content clears the fixed timeline rail + dock */
  padding: clamp(14px, 2.4vw, 26px) clamp(16px, 3vw, 34px) 230px;
  display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 24px);
}

/* ---- View tabs ---- */
.tm87-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 14px; border: 1px solid var(--tm87-line);
  background: var(--tm87-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  align-self: flex-start; flex-wrap: wrap;
}
.tm87-tab {
  border: 0; background: transparent; color: var(--tm87-mute);
  font: 600 13px/1 system-ui, sans-serif; padding: 8px 14px; border-radius: 10px;
  cursor: pointer; transition: color .2s, background .2s;
}
.tm87-tab[aria-selected="true"] {
  color: var(--tm87-ink);
  background: var(--tm87-glass-strong);
  box-shadow: inset 0 0 0 1px var(--tm87-line), 0 2px 8px rgba(0,0,0,.10);
}
.tm87-tab:focus-visible { outline: 2px solid var(--tm87-cold); outline-offset: 2px; }

.tm87-view { display: none; }
.tm87-view.is-active { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }

/* ---- Glass card ---- */
.tm87-card {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--tm87-line);
  background: var(--tm87-glass);
  backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%);
  box-shadow: var(--tm87-shadow), inset 0 1px 0 rgba(255,255,255,.18);
  padding: clamp(16px, 2.2vw, 22px);
}
.tm87-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%);
}
.tm87-card h3 { margin: 0 0 4px; font: 700 15px/1.2 system-ui, sans-serif; }
.tm87-card .tm87-card-note { margin: 0 0 14px; font: 500 12.5px/1.4 system-ui, sans-serif; color: var(--tm87-mute); }

/* canvases */
.tm87-canvas-wrap { position: relative; width: 100%; }
.tm87-canvas-wrap canvas { width: 100%; display: block; border-radius: 12px; }

/* ---- Focused-year floating card ---- */
.tm87-yearcard {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: baseline;
  margin-top: 14px; padding: 16px 18px;
  border-radius: 16px; border: 1px solid var(--tm87-line);
  background: var(--tm87-glass-strong);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.tm87-yearcard .tm87-bigyear {
  grid-row: 1 / span 2;
  font: 800 clamp(34px, 6vw, 52px)/1 system-ui, sans-serif;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tm87-yearcard .tm87-stat { display: flex; flex-direction: column; gap: 2px; }
.tm87-yearcard .tm87-stat .lbl { font: 600 10.5px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tm87-mute); }
.tm87-yearcard .tm87-stat .val { font: 700 18px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.tm87-statgrid { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.tm87-anom { font-weight: 700; }
.tm87-anom.warm { color: var(--tm87-warm); }
.tm87-anom.cold { color: var(--tm87-cold); }

/* ---- Timeline rail ---- */
.tm87-rail-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  /* Bottom padding clears the shared network-bar chrome (~72px) so the dice /
     play controls are never overlapped or pointer-blocked by #tbn-root. */
  padding: 14px clamp(16px, 3vw, 34px) calc(90px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(6,9,18,.5) 40%);
}
:root[data-theme="light"] .tm87-rail-wrap { background: linear-gradient(180deg, transparent, rgba(232,238,247,.65) 40%); }
.tm87-rail {
  position: relative;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--tm87-line);
  background: var(--tm87-glass-strong);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--tm87-shadow);
  cursor: grab; touch-action: none; user-select: none;
  overflow: hidden;
}
.tm87-rail.is-dragging { cursor: grabbing; }
.tm87-rail-ticks { position: absolute; inset: 0; pointer-events: none; }
.tm87-rail-tick {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--tm87-line);
}
.tm87-rail-decade {
  position: absolute; bottom: 5px; transform: translateX(-50%);
  font: 600 10px/1 system-ui, sans-serif; color: var(--tm87-mute);
  font-variant-numeric: tabular-nums; pointer-events: none;
  transition: color .3s, opacity .3s;
}
.tm87-rail-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--tm87-cold) 26%, transparent),
    color-mix(in oklab, var(--tm87-warm) 26%, transparent));
  pointer-events: none;
}
.tm87-playhead {
  position: absolute; top: -6px; bottom: -6px; width: 3px;
  background: var(--tm87-ink);
  border-radius: 3px;
  pointer-events: none;
  box-shadow: 0 0 14px color-mix(in oklab, var(--tm87-warm) 55%, transparent);
}
.tm87-playhead::after {
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, var(--tm87-warm-soft), var(--tm87-warm));
  box-shadow: 0 0 16px var(--tm87-warm-soft);
}
.tm87-playhead-year {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 8px;
  background: var(--tm87-ink); color: var(--bg, #fff);
  font: 700 12px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Controls dock ---- */
.tm87-dock {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.tm87-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 12px;
  border: 1px solid var(--tm87-line);
  background: var(--tm87-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--tm87-ink); font: 600 13px/1 system-ui, sans-serif; cursor: pointer;
  transition: background .2s, transform .15s, border-color .2s;
}
.tm87-btn:hover { background: var(--tm87-glass-strong); transform: translateY(-1px); }
.tm87-btn:focus-visible { outline: 2px solid var(--tm87-cold); outline-offset: 2px; }
.tm87-btn--accent {
  border-color: color-mix(in oklab, var(--tm87-warm) 50%, transparent);
  background: linear-gradient(120deg,
    color-mix(in oklab, var(--tm87-cold) 26%, transparent),
    color-mix(in oklab, var(--tm87-warm) 26%, transparent));
}
.tm87-slot {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 12px;
  border: 1px solid var(--tm87-line); background: var(--tm87-glass);
  font: 600 12px/1 system-ui, sans-serif; color: var(--tm87-mute);
}
.tm87-slot input[type="number"], .tm87-slot select {
  width: 58px; padding: 5px 6px; border-radius: 8px;
  border: 1px solid var(--tm87-line); background: var(--bg-elev, #fff); color: var(--tm87-ink);
  font: 600 12px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.tm87-slot select { width: auto; }

/* coverage indicator */
.tm87-coverage {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 system-ui, sans-serif; color: var(--tm87-mute);
}
.tm87-coverage-bar { width: 60px; height: 6px; border-radius: 3px; background: var(--tm87-line); overflow: hidden; }
.tm87-coverage-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--tm87-cold), var(--tm87-leaf, #30a46c)); }

/* dice result chip */
.tm87-dice-result {
  display: none; align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid color-mix(in oklab, var(--tm87-warm) 40%, transparent);
  background: var(--tm87-glass-strong);
  animation: tm87-bloom .5s cubic-bezier(.34,1.32,.52,1);
}
.tm87-dice-result.is-show { display: flex; }
.tm87-dice-result .tm87-dice-big {
  font: 800 26px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
@keyframes tm87-bloom { from { opacity: 0; transform: scale(.92);} to { opacity: 1; transform: scale(1);} }

/* loading / empty */
.tm87-loading {
  display: flex; align-items: center; gap: 10px;
  color: var(--tm87-mute); font: 600 13px/1 system-ui, sans-serif; padding: 30px 4px;
}
.tm87-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--tm87-line); border-top-color: var(--tm87-warm);
  animation: tm87-spin .8s linear infinite;
}
@keyframes tm87-spin { to { transform: rotate(360deg); } }

.tm87-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font: 600 11px/1 system-ui, sans-serif; color: var(--tm87-mute); }
.tm87-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tm87-legend i { width: 22px; height: 9px; border-radius: 3px; display: inline-block; }

@media (max-width: 640px) {
  .tm87-yearcard { grid-template-columns: 1fr; }
  .tm87-yearcard .tm87-bigyear { grid-row: auto; }
  .tm87-tabs { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tm87, .tm87-launch, .tm87-close, .tm87-aurora, .tm87-btn,
  .tm87-launch-spark, .tm87-playhead::after, .tm87-spinner,
  .tm87-dice-result { transition: none !important; animation: none !important; }
}