/* enhancements.css — Globe v2
 *
 * Visual upgrades layered on top of globe.css, aligning the globe's UI with
 * the rest of the site (Fraunces serif + DM Mono + Spectral body, golden /
 * moon / dawn / twi accent palette). No structural change — purely cosmetic
 * overrides on the existing IDs/classes.
 */

/* Polices : @font-face auto-hébergés dans tokens.css, chargé avant ce fichier. */

:root {
  /* Site design-system tokens (mirrored from _layout.twig) */
  --ds-bg:        #06080f;
  --ds-bg2:       #0b0e1c;
  --ds-surface:   rgba(11, 15, 30, 0.86);
  --ds-surface2:  rgba(17, 23, 46, 0.62);
  --ds-border:    rgba(255, 255, 255, 0.065);
  --ds-border2:   rgba(255, 255, 255, 0.13);
  --ds-gold:      #e8a020;
  --ds-gold-b:    #ffb830;
  --ds-gold-dim:  rgba(232, 160, 32, 0.10);
  --ds-gold-glow: rgba(232, 160, 32, 0.22);
  --ds-moon:      #9ab8da;
  --ds-dawn:      #e05828;
  --ds-twi:       #3d60b0;
  --ds-text:      #d8e8f6;
  --ds-text2:     rgba(155, 188, 228, 0.70);
  --ds-muted:     rgba(88, 118, 170, 0.50);
  --ds-mono:      'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  --ds-serif:     'Instrument Serif', Georgia, serif;
  --ds-body:      'Inter', system-ui, sans-serif;
}

html, body {
  font-family: var(--ds-body);
  background: var(--ds-bg);
  color: var(--ds-text);
}

/* ── Cinematic deep-space background ────────────────────────────────────── */
/* Replaces the flat radial with a layered cosmic gradient: cold cosmos
 * dominant, warm sunset whisper at the bottom (echoes _layout.twig). */
#display {
  background:
    radial-gradient(ellipse 70% 35% at 50% 110%, rgba(220, 100, 20, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(14, 22, 55, 0.50) 0%, transparent 80%),
    radial-gradient(ellipse 70% 70% at 50% 50%, #0b1430 0%, #050912 55%, #02030a 100%);
}

/* Tighten the day-side ocean tint so land contrast actually shows */
.background-sphere { fill: #0a1838; }
.coastline {
  fill: #1c3a66;
  stroke: rgba(140, 195, 255, 0.45);
  stroke-width: 0.55;
}
.lakes {
  fill: #0c1f3c;
  stroke: rgba(80, 140, 200, 0.4);
}
.graticule {
  stroke: rgba(140, 195, 255, 0.07);
  stroke-width: 0.4;
}

/* ── Title — editorial wordmark ─────────────────────────────────────────── */
#globe-title {
  font-family: var(--ds-serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ds-text);
  opacity: 0.9;
  text-shadow: none;
  top: 22px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
#globe-title::before {
  content: '✦';
  color: var(--ds-gold);
  font-size: 11px;
  margin-right: 2px;
}
#globe-title::after {
  content: ' · Live Earth · Observatoire';
  font-family: var(--ds-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ds-muted);
  margin-left: 6px;
  align-self: center;
}

/* ── Atmospheric halo — multi-layer cinematic glow ──────────────────────── */
.globe-halo {
  stroke: rgba(150, 200, 255, 0.28);
  stroke-width: 6px;
  filter: blur(4px);
}
.globe-halo-outer {
  stroke: rgba(60, 110, 220, 0.10);
  stroke-width: 80px;
  filter: blur(40px);
}
.globe-halo-warm {
  stroke: rgba(232, 130, 40, 0.07);
  stroke-width: 48px;
  filter: blur(26px);
}
.foreground-sphere {
  stroke: rgba(160, 210, 255, 0.55);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 14px rgba(150, 200, 255, 0.45));
}

/* ── Terminator — warmer, broader glow ──────────────────────────────────── */
.terminator-line {
  stroke-width: 2.2;
  filter:
    drop-shadow(0 0 4px rgba(232, 160, 32, 0.8))
    drop-shadow(0 0 12px rgba(220, 100, 20, 0.45))
    drop-shadow(0 0 24px rgba(220, 100, 20, 0.18));
}

/* ── UTC / Sun / Moon clocks — editorial slim glass ─────────────────────── */
#utc-clock,
#sun-info,
#moon-widget {
  background: rgba(6, 10, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  padding: 9px 14px;
}

#utc-clock .label,
#sun-info .label,
#moon-widget .label {
  font-family: var(--ds-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ds-muted);
}
#utc-clock .time {
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  font-optical-sizing: auto;
}
#sun-info .value {
  font-family: var(--ds-mono);
  font-weight: 500;
  color: var(--ds-gold);
}
#moon-pct-widget {
  font-family: var(--ds-mono);
  color: var(--ds-moon);
}
#moon-widget {
  border-color: rgba(154, 184, 218, 0.18);
}

/* ── Search bar — frosted minimalism ────────────────────────────────────── */
#search-wrap {
  width: 360px;
  top: 60px;
}
#search-input {
  background: rgba(6, 10, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 12px 40px 12px 38px;
  font-family: var(--ds-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ds-text);
}
#search-input::placeholder {
  color: var(--ds-muted);
  letter-spacing: 0.06em;
}
#search-input:focus {
  border-color: rgba(232, 160, 32, 0.45);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.08);
}
#search-icon { font-size: 12px; opacity: 0.55; }
#search-results {
  background: rgba(6, 10, 22, 0.94);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.search-item { font-family: var(--ds-mono); font-size: 12px; }
.si-cc {
  font-family: var(--ds-mono);
  background: rgba(232, 160, 32, 0.10);
  color: var(--ds-gold);
}

/* ── Golden Hour Panel — editorial reskin ───────────────────────────────── */
#golden-panel {
  width: 252px;
  background: rgba(6, 10, 22, 0.78);
  border: 1px solid rgba(232, 160, 32, 0.16);
  border-radius: 10px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.gh-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 16px;
}
.gh-header-title {
  font-family: var(--ds-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--ds-gold);
}
.gh-header-icon { color: var(--ds-gold); }
.gh-live-badge {
  font-family: var(--ds-mono);
  letter-spacing: 0.10em;
}
.gh-entry {
  padding-top: 8px;
  padding-bottom: 8px;
}
.gh-city {
  font-family: var(--ds-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ds-text);
}
.gh-score-badge { font-family: var(--ds-mono); }
.gh-time { font-family: var(--ds-mono); }
.gh-sub  { font-family: var(--ds-mono); font-size: 10px; letter-spacing: 0.05em; }

/* ── Location popup — Fraunces-driven editorial card ────────────────────── */
#loc-popup {
  width: 296px;
  background: rgba(6, 10, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
}
.loc-header { padding: 16px 36px 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.loc-city {
  font-family: var(--ds-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ds-text);
  font-optical-sizing: auto;
}
.loc-coords { font-family: var(--ds-mono); letter-spacing: 0.04em; }
.loc-status {
  font-family: var(--ds-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  margin: 6px 18px 8px;
}
.loc-row { font-family: var(--ds-body); padding: 6px 18px; }
.loc-label { font-family: var(--ds-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ds-muted); }
.loc-val {
  font-family: var(--ds-mono);
  font-size: 13px;
  font-weight: 500;
}
.loc-golden .loc-val,
.loc-sunset-row .loc-val {
  font-family: var(--ds-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}
.loc-score-wrap {
  background: rgba(232, 160, 32, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 18px;
}
.loc-score-num {
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: 44px;
  color: var(--ds-gold);
  font-optical-sizing: auto;
  line-height: 1;
  min-width: 78px;
}
.loc-score-label-text,
.loc-score-details-text { font-family: var(--ds-mono); }
.loc-btn {
  font-family: var(--ds-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Time slider — pill button ──────────────────────────────────────────── */
#time-ctrl {
  background: rgba(6, 10, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 6px 14px;
}
#time-offset-label {
  font-family: var(--ds-mono);
  letter-spacing: 0.10em;
  color: var(--ds-gold);
}

/* ── Legend ─────────────────────────────────────────────────────────────── */
#legend-btn {
  background: rgba(6, 10, 22, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
}
#legend-card {
  background: rgba(6, 10, 22, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.legend-title { font-family: var(--ds-mono); letter-spacing: 0.18em; color: var(--ds-muted); }

/* ── Loading screen ─────────────────────────────────────────────────────── */
#loading {
  background: var(--ds-bg);
  font-family: var(--ds-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--ds-muted);
}
#loading::before {
  content: '✦';
  display: block;
  font-size: 22px;
  margin-bottom: 14px;
  color: var(--ds-gold);
  letter-spacing: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
#loading {
  flex-direction: column;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── Watermark: top-right brand-back-link ───────────────────────────────── */
.brand-back {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(6, 10, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: color .15s, border-color .15s;
}
.brand-back:hover { color: var(--ds-gold); border-color: rgba(232, 160, 32, 0.25); }
.brand-back .arrow { font-size: 12px; }

/* ── Stat strip (top-right cluster shows editorial dataline) ───────────── */
#globe-title { left: 50%; transform: translateX(-50%); top: 22px; }

/* Make the responsive max-width mobile media-query gracefully match */
@media (max-width: 720px) {
  #globe-title { font-size: 14px; top: 16px; }
  #search-wrap { width: 280px; top: 56px; }
  .brand-back { font-size: 9px; padding: 6px 10px; }
}

/* ── A tiny constellation tick across the limb (decorative) ─────────────── */
.foreground-sphere { filter: drop-shadow(0 0 16px rgba(150, 200, 255, 0.55)); }

/* ────────────────────────────────────────────────────────────────────────
 * MODE SWITCHER — top-center pills (Soleil · Éclipses · Lune)
 * ────────────────────────────────────────────────────────────────────── */
#globe-title { display: none; } /* replaced by the mode switcher */

#mode-switcher {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: 1px;
  background: rgba(6, 10, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 4px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.mode-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ds-text2);
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.mode-pill:hover { background: rgba(255, 255, 255, 0.04); color: var(--ds-text); text-decoration: none; }
.mode-pill.is-active {
  background: rgba(232, 160, 32, 0.10);
  color: var(--ds-text);
}
.mode-pill.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9px;
  border: 1px solid rgba(232, 160, 32, 0.32);
  pointer-events: none;
}
.mode-pill.is-soon { opacity: 0.55; }
.mode-pill.is-soon:hover { background: transparent; cursor: not-allowed; }
.mode-glyph {
  font-size: 18px;
  line-height: 1;
  color: var(--ds-gold);
}
.mode-pill.is-soon .mode-glyph { color: var(--ds-moon); }
.mode-text { display: flex; flex-direction: column; line-height: 1.15; }
.mode-label {
  font-family: var(--ds-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}
.mode-pill.is-active .mode-label { color: var(--ds-gold); }
.mode-meta {
  font-family: var(--ds-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-muted);
  margin-top: 1px;
}
@media (max-width: 720px) {
  #mode-switcher { top: 12px; }
  .mode-pill { padding: 7px 10px; gap: 7px; }
  .mode-meta { display: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * STAT STRIP — top-left live counters
 * ────────────────────────────────────────────────────────────────────── */
#stat-strip {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: rgba(6, 10, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#stat-strip .stat { display: flex; flex-direction: column; }
#stat-strip .stat-num {
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  font-optical-sizing: auto;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#stat-strip .stat:first-child .stat-num { color: var(--ds-gold); }
#stat-strip .stat-lbl {
  font-family: var(--ds-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-muted);
  margin-top: 3px;
}
#stat-strip .stat-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.06); }
@media (max-width: 720px) {
  #stat-strip { left: 12px; top: 76px; padding: 6px 10px; gap: 10px; }
  #stat-strip .stat-num { font-size: 14px; }
  #stat-strip .stat-lbl { font-size: 7px; }
  #stat-strip .stat-sep { height: 16px; }
}

/* The original UTC + sun-info blocks (bottom corners) carry the same info,
 * so hide them in v2 — stat-strip subsumes them at the top. */
#utc-clock, #sun-info { display: none; }

/* ────────────────────────────────────────────────────────────────────────
 * LAYERS PANEL — right side, collapsible
 * ────────────────────────────────────────────────────────────────────── */
#layers-panel {
  position: absolute;
  top: 90px;
  right: 24px;
  z-index: 30;
  font-family: var(--ds-body);
}
#layers-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(6, 10, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--ds-text2);
  font-family: var(--ds-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#layers-toggle:hover { color: var(--ds-gold); border-color: rgba(232, 160, 32, 0.22); }
#layers-panel:not(.is-collapsed) #layers-toggle {
  background: rgba(232, 160, 32, 0.10);
  color: var(--ds-gold);
  border-color: rgba(232, 160, 32, 0.32);
}
.lt-icon { font-size: 12px; }
.layers-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: rgba(6, 10, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.60);
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s;
}
#layers-panel.is-collapsed .layers-list {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}
.layers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.layers-title {
  font-family: var(--ds-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-text);
  letter-spacing: -0.01em;
}
.layers-close {
  background: none;
  border: none;
  color: var(--ds-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s;
}
.layers-close:hover { color: var(--ds-text); }

.layer-row {
  display: grid;
  grid-template-columns: 22px 26px 1fr 12px;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.025);
}
.layer-row:hover { background: rgba(255, 255, 255, 0.02); }
.layer-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.layer-row input[type="checkbox"]:checked {
  background: var(--ds-gold);
  border-color: var(--ds-gold);
}
.layer-row input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #06080f;
  font-weight: 600;
}
.layer-glyph {
  font-size: 14px;
  color: var(--ds-muted);
  text-align: center;
}
.layer-row input[type="checkbox"]:checked ~ .layer-glyph { color: var(--ds-gold); }
.layer-text { line-height: 1.25; }
.layer-label {
  font-family: var(--ds-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text);
}
.layer-hint {
  font-family: var(--ds-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ds-muted);
  margin-top: 2px;
}
.layer-pill {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.layer-row input[type="checkbox"]:checked ~ .layer-pill { background: var(--ds-gold); box-shadow: 0 0 8px rgba(232, 160, 32, 0.5); }

.layers-foot {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.layers-action {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 14px;
  font-family: var(--ds-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ds-text2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.layers-action + .layers-action { border-left: 1px solid rgba(255, 255, 255, 0.05); }
.layers-action:hover { background: rgba(232, 160, 32, 0.06); color: var(--ds-gold); }

/* ────────────────────────────────────────────────────────────────────────
 * LAYER VISIBILITY — toggled by body classes from controls.js
 * ────────────────────────────────────────────────────────────────────── */
body.no-aurora    #aurora-canvas { display: none !important; }
body.no-stars     #stars-canvas  { display: none !important; }
body.no-graticule .graticule     { display: none !important; }
body.no-twilight  .night-polygon,
body.no-twilight  .astro-band,
body.no-twilight  .nautical-band,
body.no-twilight  .blue-band,
body.no-twilight  .golden-band   { display: none !important; }
body.no-twilight  .terminator-line {
  /* keep the terminator hairline when twilight bands are off — that's the
   * cleanest visual outcome ("show me just the day/night line"). */
}
body.no-cities    #city-layer .city-dot,
body.no-cities    .city-dot-layer,
body.no-cities    .all-city-layer { display: none !important; }
body.no-halo      .globe-halo,
body.no-halo      .globe-halo-outer,
body.no-halo      .globe-halo-warm { display: none !important; }

/* ────────────────────────────────────────────────────────────────────────
 * Adjustments now that the title is replaced and clocks moved up
 * ────────────────────────────────────────────────────────────────────── */
#search-wrap { top: 96px; }
#moon-widget { right: 24px; bottom: 30px; }
#legend-btn  { bottom: 88px; }
#legend-card { bottom: 124px; }

/* Hide the original right-side "Live" badge on the golden-hour panel
 * once stat-strip takes over the role. */
.brand-back { top: auto; bottom: 30px; left: 24px; }