/* etna.css — situational Etna / Sicily map.
   Rides on map.css: the shell, launchers, sheets, tiles, veil, headline and
   legend all come from there. This file only adds what a one-pollutant
   situational map needs and the Taranto map has no reason to carry.

   The ember accent marks "ongoing event" and is deliberately outside the
   site palette, where teal and gold already mean other things. */

:root {
  --ember:      #c2410c;
  --ember-deep: #8a2c08;
  --ember-soft: rgba(194, 65, 12, 0.10);
  --ember-line: rgba(194, 65, 12, 0.32);
}

/* ── situational badge, inside the right panel ──────────────────────── */
.etna-status {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem 0.55rem;
  border-radius: 0.75rem;
  background: var(--ember-soft);
  border: 1px solid var(--ember-line);
  color: var(--ember-deep);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.45;
}
.etna-status b { font-weight: 500; }
.etna-dot {
  width: 0.5rem; height: 0.5rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--ember);
  flex: 0 0 auto;
}

/* ── panel prose ────────────────────────────────────────────────────── */
.etna-info p {
  margin: 0.4rem 0 1.05rem;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--text);
  font-weight: 300;
}
.etna-info b { color: var(--sea); font-weight: 500; }
/* The section labels come from map.css sized for one-word tile captions;
   here they head paragraphs, so they need a little more presence. */
.etna-info .sheet-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  margin-top: 1.15rem;
  color: var(--ember-deep);
}
.etna-info a {
  color: var(--ember-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--ember-line);
  transition: color 0.16s ease, border-color 0.16s ease;
}
.etna-info a:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}
.etna-caveat {
  border-left: 2px solid var(--ember-line);
  padding-left: 0.8rem;
  color: var(--muted) !important;
}
.etna-sources {
  margin: 0.4rem 0 1rem 1.15rem;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text);
  font-weight: 300;
}
.etna-sources b { color: var(--sea); font-weight: 500; }
.etna-related {
  margin-top: 1.2rem !important;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem !important;
  color: var(--muted) !important;
}

/* ── station popup ──────────────────────────────────────────────────── */
.etna-pop { font-family: var(--font); min-width: 11rem; }
.etna-pop-name {
  font-size: 0.85rem;
  color: var(--sea);
  letter-spacing: 0.02em;
}
.etna-pop-val {
  font-size: 1.5rem;
  color: var(--text);
  font-weight: 300;
  margin: 0.15rem 0 0.1rem;
}
.etna-pop-val span {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.etna-pop-meta {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.5;
}
.etna-pop-stale {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--ember-deep);
  font-weight: 300;
}

/* The SO₂ scale is permanent here — one pollutant, no tile grid to toggle. */
#so2Legend { display: block; }

/* ── altitude rail ───────────────────────────────────────────────────
   On the map, on the right, VERTICAL — because it is altitude: bottom is
   the ground, top is 5 km. Bottom position colours the wind from MEASURED
   stations; every position above it from the CAMS model, and the badge
   flips to say so. Above ground the colour scale is RELATIVE, which is
   only honest when its numbers are on screen — hence .alt-range, which is
   never optional decoration. */
.alt-rail {
  position: fixed;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.6rem 0.7rem;
  border-radius: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(20, 45, 64, 0.10);
  font-family: var(--font);
}
.alt-rail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.alt-value {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.alt-kind {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sea);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.1rem 0.42rem 0.14rem;
  white-space: nowrap;
}
.alt-kind.is-model {
  color: var(--ember-deep);
  background: var(--ember-soft);
  border-color: var(--ember-line);
}

.alt-slider {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;                 /* low at the bottom, high at the top */
  width: 0.35rem;
  height: 9.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top,
              rgba(20, 45, 64, 0.16), var(--ember-line));
  outline: none;
  cursor: pointer;
}
.alt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(20, 45, 64, 0.28);
  cursor: pointer;
}
.alt-slider::-moz-range-thumb {
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(20, 45, 64, 0.28);
  cursor: pointer;
}

.alt-rail-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  max-width: 6.5rem;
  text-align: center;
}
.alt-range {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.35;
}
.alt-ground {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}

/* Phones: the rail would sit under the actions button, so shrink and lift. */
@media (max-width: 34rem) {
  .alt-rail { top: 42%; right: 0.6rem; padding: 0.6rem 0.5rem; }
  .alt-slider { height: 7rem; }
  .alt-rail-foot { max-width: 5rem; }
}