/* severe - one Deepavali night in Delhi's air.
   Warm ink, cream, saffron. Nothing on screen that does not earn its place. */
:root {
  --ink: #241c12;
  --ink-soft: #6b5a44;
  --cream: #f6ecdc;
  --cream-edge: rgba(84, 62, 38, 0.28);
  --night: #17110c;
  --accent: #c1502e;          /* terracotta - the one bright action */
  --accent-deep: #a03d20;
  --ring: rgba(193, 80, 46, 0.35);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --band-good: #3f7d4e; --band-sat: #8ba248; --band-mod: #e0ae3e;
  --band-poor: #d97b3a; --band-vpoor: #bf5233; --band-severe: #93311f;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--night); color: var(--cream);
  overflow: hidden; -webkit-tap-highlight-color: transparent;
}
#map { position: fixed; inset: 0; z-index: 1; }
.leaflet-container { background: #e9e4dc; font: inherit; }
/* warm the cool gray canvas toward parchment */
.leaflet-tile-pane { filter: sepia(0.24) saturate(1.12) hue-rotate(-10deg) brightness(0.99); }

/* warm haze: two slow-drifting breaths of smoke over the map */
#haze {
  position: fixed; inset: -20%; z-index: 4; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(ellipse 60% 45% at 25% 65%, rgba(214, 150, 84, 0.20), transparent 70%),
    radial-gradient(ellipse 55% 40% at 75% 35%, rgba(180, 110, 66, 0.16), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-3%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
#vignette {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 118% 105% at 50% 46%, transparent 55%, rgba(23, 17, 12, 0.42) 100%);
}

#brand {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 18px; z-index: 20;
  pointer-events: none;
}
.brand-title {
  display: inline-block;
  font-family: var(--serif); font-style: italic;
  font-size: 17px; font-weight: 500; letter-spacing: 0.03em;
  color: var(--cream);
  background: rgba(23, 17, 12, 0.55); border-radius: 8px; padding: 2px 9px;
}

/* ---- the gauge: AQI story always visible ---- */
#gauge {
  position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
  z-index: 18; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: opacity 0.5s ease;
}
#gauge.dim { opacity: 0.35; }
.gauge-track {
  position: relative; width: 8px; height: min(52vh, 420px);
  border-radius: 99px; overflow: visible; display: flex; flex-direction: column-reverse;
  box-shadow: 0 0 0 1px rgba(246, 236, 220, 0.18);
}
.g-band { flex: 2; width: 100%; }
.g-band[style*="--i:0"] { background: var(--band-severe); }
.g-band[style*="--i:1"] { background: var(--band-vpoor); }
.g-band[style*="--i:2"] { background: var(--band-poor); }
.g-band[style*="--i:3"] { background: var(--band-mod); }
.g-band[style*="--i:4"] { background: var(--band-sat); }
.g-band[style*="--i:5"] { background: var(--band-good); flex: 1; }
.g-band[style*="--i:0"] { border-radius: 0 0 99px 99px; }
.g-band[style*="--i:5"] { flex: 1; border-radius: 99px 99px 0 0; }
#g-marker {
  position: absolute; left: 50%; bottom: 0%;
  transform: translate(-50%, 50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--night);
  box-shadow: 0 0 0 2px rgba(246, 236, 220, 0.5), 0 2px 10px rgba(0,0,0,0.4);
  transition: bottom 1.1s var(--spring);
  display: none;
}
#g-marker.on { display: block; }
#g-value {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-weight: 600; font-size: 15px;
  color: var(--cream); white-space: nowrap;
  background: rgba(23, 17, 12, 0.55); border-radius: 7px; padding: 1px 7px;
}
.gauge-cap { font-size: 10px; letter-spacing: 0.14em; color: rgba(246, 236, 220, 0.55); font-weight: 600; }

/* ---- stage: full-screen visual scenes ---- */
#stage { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.scene {
  position: absolute; inset: 0; display: none;
  padding: 20px; overflow-y: auto;
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(120, 72, 32, 0.35), transparent 70%),
    linear-gradient(160deg, #1c130a 0%, #2b1b0e 55%, #38220f 100%);
}
.scene.on { display: flex; animation: sceneIn 0.6s var(--spring); }
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.scene-inner { width: min(680px, 100%); text-align: center; pointer-events: auto;
  margin: auto; padding: 28px 0 150px; /* scroll-safe centering; bottom pad clears the caption */ }
.scene-title {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(26px, 5.4vw, 40px); line-height: 1.15; margin-bottom: 10px;
  color: var(--cream);
}
.scene-sub { color: rgba(246, 236, 220, 0.75); font-size: 15px; max-width: 46ch; margin: 0 auto 18px; }
.scene .big-number {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(64px, 17vw, 130px); line-height: 1;
  color: var(--cream);
}
.scene .num-unit { font-size: clamp(15px, 3vw, 20px); color: rgba(246,236,220,0.7); font-family: var(--serif); font-style: italic; }

/* scale bar (scene: the 11pm reading) */
.scale-bar { margin: 26px auto 8px; max-width: 520px; }
.scale-track { position: relative; height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--band-good), var(--band-mod), var(--band-poor), var(--band-severe)); }
.scale-tick { position: absolute; top: -6px; width: 2px; height: 22px; background: rgba(246,236,220,0.8); }
.scale-tick span {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  font-size: 12px; white-space: nowrap; color: rgba(246,236,220,0.85);
}
.scale-tick b { font-weight: 600; }
/* peak label rides above the bar; small legend below names the two guidelines */
.scale-peak span { top: -32px; transform: translateX(-78%); }
.scale-tick span { font-size: 11px; color: rgba(246,236,220,0.55); }
.scale-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-top: 34px; font-size: 12.5px; color: rgba(246,236,220,0.8); }
.scale-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.scale-peak {
  position: absolute; top: -10px; transform: translateX(-50%);
  width: 14px; height: 30px; border-radius: 7px; background: var(--cream);
  box-shadow: 0 0 0 3px rgba(23,17,12,0.6), 0 0 18px rgba(246,236,220,0.35);
}
.scale-peak span {
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--cream);
}
.scale-note { font-size: 12.5px; color: rgba(246,236,220,0.6); margin-top: 34px; }

/* particle scale (scene: what PM2.5 is) */
.pm-vis { display: flex; align-items: flex-end; justify-content: center; gap: clamp(18px, 6vw, 48px); margin: 24px 0 8px; }
.pm-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pm-dot { border-radius: 50%; background: var(--cream); box-shadow: 0 0 24px rgba(246,236,220,0.25); }
.pm-label { font-size: 13px; color: rgba(246,236,220,0.85); }
.pm-label b { display: block; font-family: var(--serif); font-size: 15px; }

/* journey (scene: into the lung) */
.journey { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 22px); margin: 22px 0; }
.j-stop { text-align: center; }
.j-ico { width: clamp(64px, 17vw, 96px); height: clamp(64px, 17vw, 96px); margin: 0 auto 8px; border-radius: 24px;
  background: rgba(246,236,220,0.07); border: 1px solid rgba(246,236,220,0.16);
  display: grid; place-items: center; }
.j-ico svg { width: 70%; height: 70%; }
.j-label { font-size: 12.5px; color: rgba(246,236,220,0.8); max-width: 11ch; margin: 0 auto; }
.j-arrow { color: rgba(246,236,220,0.5); font-size: 20px; font-family: var(--serif); }

/* inversion lid (scene: why it stayed) */
.lid-vis { position: relative; height: clamp(220px, 38vh, 320px); margin: 20px auto; max-width: 540px;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #241a10 0%, #3a2716 55%, #57371c 100%);
  border: 1px solid rgba(246,236,220,0.14); }
.lid-layer {
  position: absolute; left: 8%; right: 8%; height: 14px; border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(246, 214, 160, 0.9), transparent);
  top: 26%;
}
.lid-label { position: absolute; top: calc(26% - 24px); left: 0; right: 0; font-size: 13px; color: rgba(246, 214, 160, 0.95); font-style: italic; font-family: var(--serif); }
.lid-smoke { position: absolute; left: 0; right: 0; bottom: 0; top: 34%;
  background:
    radial-gradient(ellipse 40% 60% at 30% 80%, rgba(214,150,84,0.35), transparent 70%),
    radial-gradient(ellipse 45% 65% at 70% 75%, rgba(180,110,66,0.3), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate; }
.lid-city { position: absolute; bottom: 0; left: 0; right: 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(23,17,12,0.85)); }
.lid-rise { position: absolute; bottom: 20%; width: 3px; background: rgba(246,236,220,0.25); border-radius: 2px; }
.lid-rise.blocked { top: 32%; }
.lid-rise.free { top: 4%; background: rgba(246,236,220,0.12); }

/* bands (scene: what the numbers mean) */
.bands-vis { display: flex; flex-direction: column; gap: 6px; margin: 18px auto; max-width: 480px; text-align: left; }
.band-row { display: grid; grid-template-columns: 14px 86px 1fr; gap: 12px; align-items: center;
  padding: 8px 12px; border-radius: 12px; background: rgba(246,236,220,0.05); }
.band-row.now { background: rgba(246,236,220,0.12); box-shadow: inset 0 0 0 1px rgba(246,236,220,0.25); }
.band-chip { width: 14px; height: 26px; border-radius: 5px; }
.band-name { font-family: var(--serif); font-weight: 600; font-size: 14.5px; }
.band-name small { display: block; font-family: inherit; font-weight: 400; font-size: 11.5px; color: rgba(246,236,220,0.6); }
.band-desc { font-size: 13px; color: rgba(246,236,220,0.8); line-height: 1.35; }

/* helps (scene: what actually helps) */
.helps-vis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px auto; max-width: 560px; }
.help-card { text-align: left; padding: 14px 16px; border-radius: 16px;
  background: rgba(246,236,220,0.06); border: 1px solid rgba(246,236,220,0.13); }
.help-card h3 { font-family: var(--serif); font-size: 15.5px; font-weight: 600; margin-bottom: 4px; color: var(--cream); }
.help-card p { font-size: 13px; color: rgba(246,236,220,0.75); line-height: 1.45; }
@media (max-width: 520px) { .helps-vis { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .help-card { padding: 11px 14px; } .help-card p { font-size: 12.5px; } }

@media (max-width: 420px) { .scale-tick.tick-lo span { display: none; } /* legend chips below carry 15/60 on tight screens */
  .leaflet-control-attribution { font-size: 9px; max-width: 62vw; } }


/* ---- caption card over map scenes ---- */
#caption {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(430px, calc(100vw - 32px));
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--cream-edge); border-radius: 20px;
  padding: 20px 22px 16px;
  box-shadow: 0 18px 50px rgba(10, 6, 3, 0.5);
  transition: opacity 0.4s ease, transform 0.4s var(--spring);
}
#caption.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px); }
.cap-kicker { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--accent); margin-bottom: 6px; }
.cap-kicker:empty { display: none; }
.cap-text { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.cap-text b { font-weight: 650; }
.cap-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.fraction { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

.btn {
  appearance: none; border: 0; cursor: pointer;
  min-width: 44px; min-height: 44px;
  padding: 12px 20px; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 600;
  transition: transform 0.22s var(--spring), background 0.25s, box-shadow 0.25s;
}
.btn:active { transform: scale(0.96); }
.btn.primary { background: var(--accent); color: #fdf3ea; box-shadow: 0 6px 18px var(--ring); }
.btn.primary:hover { background: var(--accent-deep); }
.btn.primary.big { font-size: 16.5px; padding: 14px 30px; }
.btn.ghost { background: transparent; color: var(--ink-soft); padding: 12px 14px; }
.btn.ghost:hover { color: var(--ink); }
.btn:focus-visible, .pill-btn:focus-visible {
  outline: 3px solid var(--ring); outline-offset: 2px;
}

#topRight { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 20; }
.pill-btn {
  appearance: none; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center;
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--cream); background: rgba(23, 17, 12, 0.55);
  border: 1px solid rgba(246,236,220,0.25); border-radius: 999px; padding: 7px 14px;
  transition: background 0.25s;
}
.pill-btn:hover { background: rgba(23, 17, 12, 0.75); }

/* ---- overlays ---- */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(14, 9, 5, 0.55);
  backdrop-filter: blur(4px);
  transition: opacity 0.45s ease;
}
.overlay.hidden { opacity: 0; pointer-events: none; }
.card {
  width: min(430px, calc(100vw - 40px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--cream-edge); border-radius: 22px;
  padding: 30px 26px 24px;
  box-shadow: 0 24px 70px rgba(5, 3, 1, 0.6);
  text-align: center;
}
.intro-card h1 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(44px, 11vw, 64px); line-height: 1.05; color: var(--accent);
  margin-bottom: 14px;
}
.lede { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 14px; }
.intro-card .btn { margin-top: 8px; }
.hint-line { margin-top: 16px; font-size: 12.5px; color: var(--ink-soft); opacity: 0.85; }
.ref-card { text-align: left; }
.ref-card h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; margin-bottom: 10px; }
.ref-card ul { margin: 12px 0 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.ref-card li { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.ref-card a { color: var(--accent); }
.ref-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 8px; }
.ref-card .btn { display: block; margin: 6px auto 0; }

/* map markers for stations */
.station {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(23,17,12,0.85);
  box-shadow: 0 0 0 2px rgba(246,236,220,0.6), 0 2px 10px rgba(0,0,0,0.5);
}
.station-label {
  background: rgba(23,17,12,0.72); color: var(--cream);
  font-size: 12px; font-weight: 600; border-radius: 8px; padding: 2px 8px;
  border: 0; box-shadow: none; white-space: nowrap;
}
.leaflet-tooltip.station-label:before { display: none; }

/* attribution clears the brand, stays visible (required) */
.leaflet-top.leaflet-left .leaflet-control-attribution {
  margin-top: 46px; max-width: calc(100vw - 150px);
  background: rgba(23, 17, 12, 0.5); color: rgba(246, 236, 220, 0.8);
  font-size: 10px; line-height: 1.4; border-radius: 8px; padding: 2px 6px;
}
.leaflet-top.leaflet-left .leaflet-control-attribution a { color: rgba(246, 236, 220, 0.95); }

@media (max-width: 520px) {
  .gauge-track { height: min(44vh, 340px); }
  #gauge { left: 10px; }
  .scene { padding-left: 62px; } /* content clears the persistent gauge */
  #caption { padding: 18px 18px 14px; }
  .cap-text { font-size: 15px; }
  .card { padding: 26px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, #caption, .overlay, #g-marker, #gauge { transition: none !important; }
  #haze, .lid-smoke { animation: none !important; }
  .scene.on { animation: none !important; }
}

/* landscape phones: dock the caption left so the map stays visible (kept last: overrides base #caption) */
@media (max-height: 500px) and (min-width: 640px) {
  #caption { left: 56px; right: auto; transform: none; width: min(400px, 44vw); bottom: 12px; }
  .cap-text { font-size: 13.5px; max-height: 32vh; overflow-y: auto; }
  .scene { padding-left: calc(56px + min(400px, 44vw) + 14px); } /* visual scenes clear the left-docked caption */
  .scene-inner { padding: 12px 0; }
  .scene-title { font-size: clamp(22px, 7.5vh, 34px); }
  .scene .big-number { font-size: clamp(56px, 24vh, 96px); }
  .j-ico { width: clamp(52px, 15vh, 80px); height: clamp(52px, 15vh, 80px); }
  .journey { gap: 12px; margin: 14px 0; }
  .lid-vis { height: clamp(140px, 32vh, 220px); margin: 12px auto; }
  .bands-vis { gap: 4px; margin: 10px auto; }
  .band-row { padding: 6px 10px; }
  .helps-vis { gap: 8px; margin: 10px auto; }
  .help-card { padding: 9px 12px; }
  .help-card p { font-size: 12px; }
  .scene-sub { font-size: 13.5px; margin-bottom: 10px; }
}