/* THE OBSERVATORY — planetary status-board styling. Rides the archive.css design tokens
   (teal --cyan #43BBA8 / gold --amber #D8A860 on midnight --bg #0A0B0D). Self-contained;
   pairs with assets/observatory.js. All map chrome themed dark teal/gold. */

.obs-rail .stat-n{font-size:1.7rem}
.obs-stage-wrap{padding:10px 0 20px}

/* ---- layer toolbar ---- */
.obs-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 0 16px}
.obs-toggle{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface);border:1px solid var(--line-2);
  padding:8px 14px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;border-radius:2px;
}
.obs-toggle:hover{color:var(--ink)}
.obs-toggle.is-on{color:var(--cyan);border-color:var(--cyan-dim);background:rgba(67,187,168,.07)}
.obs-toggle::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--line-2);margin-right:8px;vertical-align:middle}
.obs-toggle.is-on::before{background:var(--cyan);box-shadow:0 0 7px var(--cyan)}
.obs-arc{margin-left:auto;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---- map + callouts grid ---- */
.obs-grid{display:grid;grid-template-columns:1fr 320px;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.obs-map-col{background:var(--bg);position:relative}
.obs-map{width:100%;height:min(64vh,620px);min-height:400px;background:var(--bg)}

.obs-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:10px 16px;border-top:1px solid var(--line);background:var(--surface);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.obs-legend-ramp{display:flex;align-items:center;gap:8px}
.obs-legend-ramp i{font-style:normal}
.obs-legend-ramp .ramp{display:inline-block;width:88px;height:8px;border-radius:5px;
  background:linear-gradient(90deg,#2a6e63,#43bba8,#8fc986,#d8a860,#e6773a)}
.obs-legend-key{display:flex;align-items:center;gap:6px}
.obs-legend-key .k{width:14px;height:3px;border-radius:2px;display:inline-block}
.obs-legend-key .k-storm{background:var(--amber);height:0;border-top:2px dashed var(--amber)}
.obs-legend-key .k-smoke{background:#9aa1ab;height:8px;width:8px;border-radius:50%;opacity:.7}
.obs-legend-key .k-water{background:var(--cyan);height:8px;width:8px;border-radius:50%}
.obs-legend-key .k-mig{background:var(--cyan);height:0;border-top:2px dotted var(--cyan)}

.obs-readout{margin:0;padding:9px 16px;border-top:1px solid var(--line);background:var(--bg);
  font-size:.74rem;color:var(--cyan);min-height:1.4em}

/* ---- ranked callouts (also the no-JS fallback) ---- */
.obs-callouts{background:var(--bg);padding:18px 18px 20px;display:flex;flex-direction:column}
.obs-callouts-h{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0 0 12px}
.obs-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.obs-rank-row{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--bg);
  cursor:pointer;transition:background .18s}
.obs-rank-row:hover,.obs-rank-row.is-active{background:var(--surface)}
.obs-dot{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:0 0 8px rgba(0,0,0,.5)}
.obs-rank-body{display:flex;flex-direction:column;min-width:0;flex:1}
.obs-rank-name{font-family:var(--display);font-size:1rem;line-height:1.2}
.obs-rank-meta{font-size:.6rem;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obs-rank-score{flex:none;font-family:var(--mono);font-size:1.1rem;color:var(--amber)}
.obs-callouts-foot{margin:12px 0 0;font-size:.6rem;color:var(--ink-faint);letter-spacing:.04em;line-height:1.5}

/* ---- homepage panel ---- */
.obs-panel{padding-top:20px}
.obs-panel-grid{display:grid;grid-template-columns:minmax(220px,1fr) 1.4fr;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.obs-panel-lead{background:var(--bg);padding:20px 22px}
.obs-panel-note{color:var(--ink-3);font-size:.72rem;letter-spacing:.02em;max-width:40ch;margin:10px 0 0}
.obs-panel-list{list-style:none;margin:0;padding:0;background:var(--bg);display:flex;flex-direction:column}
.obs-panel-list li{display:flex;align-items:center;gap:11px;padding:14px 22px;border-top:1px solid var(--line)}
.obs-panel-list li:first-child{border-top:0}
.obs-panel-name{font-family:var(--display);font-size:1.06rem;flex:1}
.obs-panel-cat{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ---- MapLibre popup, re-skinned to the house palette ---- */
.maplibregl-popup{max-width:260px!important}
.maplibregl-popup-content{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);
  border-radius:3px;padding:13px 15px;box-shadow:0 16px 40px rgba(0,0,0,.6);font-family:var(--sans)}
.maplibregl-popup-tip{border-top-color:var(--surface-2)!important;border-bottom-color:var(--surface-2)!important}
.maplibregl-popup-close-button{color:var(--ink-3);font-size:1.1rem;padding:0 6px}
.maplibregl-popup-close-button:hover{color:var(--cyan);background:transparent}
.obs-pop-h{font-family:var(--display);font-weight:600;font-size:1.06rem;margin:0 0 3px}
.obs-pop-sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin:0 0 9px}
.obs-pop-rows{display:flex;flex-direction:column;gap:5px}
.obs-pop-row{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.72rem}
.obs-pop-row span:first-child{color:var(--ink-3)}
.obs-pop-row span:last-child{color:var(--ink)}
.obs-pop-tag{color:var(--amber)}

/* MapLibre control chrome -> dark */
.maplibregl-ctrl-group{background:var(--surface)!important;border:1px solid var(--line-2)!important;box-shadow:none!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)!important}
.maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(78%) sepia(12%) saturate(500%) hue-rotate(120deg)}
.maplibregl-canvas:focus{outline:none}

/* ---- responsive: stack the callouts under the map ---- */
@media(max-width:820px){
  .obs-grid{grid-template-columns:1fr}
  .obs-map{height:56vh;min-height:340px}
  .obs-panel-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .clock .live::before{animation:none}
}