/* Quiet finishing layer. Load after experience.css; keep composition and themes intact. */
:root[data-theme="dark"] { --shadow: 0 6px 22px rgba(2,10,24,.24); }
:root[data-theme="light"] { --shadow: 0 5px 18px rgba(31,69,128,.08); }

/* Stable figures make live observations and comparisons easier to scan. */
.hero-temp, .hmm-v, .daily-summary strong, .simple-temperature, .simple-facts b,
.metric .mv, .gauge-val, .hour .ht, .st-hero-t, .st-strip, .sd-m b,
.cmp-v, .idx-sheet-v, .idx-all-v, .sea-values b, .sm-pop-v {
  font-variant-numeric: lining-nums tabular-nums;
}
.hdr-loc .name, .drw-brand, .sh-h, .pnl-title { letter-spacing: -.015em; }
.sec-h .t, .sec-h2 .t { font-weight: 700; letter-spacing: .045em; }
.drw-sec { font-weight: 700; letter-spacing: .07em; }
.hmm-l { font-weight: 650; letter-spacing: .045em; }
.hero-temp, .hmm-v, .simple-temperature { font-weight: 750; }
.daily-summary strong, .metric .mv { font-weight: 700; }
.ac-t, .drw-t, .menu-i, .sw-n { line-height: 1.35; }
.hero-cond, .hero-caption, .daily-summary span { line-height: 1.4; }

/* The same control shape reads consistently in navigation and utility sheets. */
.icon-btn, .sw-x, .drw-i, .drw-pin, .menu-i, .dt, .seg button,
.experience-launcher button, .experience-services button, .experience-all {
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.drw-pin { border-radius: 12px; }
.icon-btn:active, .sw-x:active, .drw-i:active, .drw-pin:active, .menu-i:active,
.experience-services button:active, .experience-all:active {
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--card-border);
}
/* Inset rings remain visible inside the metric strip and clipped webcam cards. */
.metric:focus-visible, .wc-open:focus-visible {
  outline: 2px solid var(--cold);
  outline-offset: -3px;
}
.sw-input:focus-visible, .drw-search:focus-visible, .cmp-sel:focus-visible,
.set-sel:focus-visible, .pr-note:focus-visible {
  border-color: var(--cold);
  outline: 2px solid var(--cold);
  outline-offset: 2px;
}
@media (hover:hover) and (pointer:fine) {
  .icon-btn:hover, .sw-x:hover, .drw-pin:hover, .menu-i:hover {
    background: var(--card-2);
  }
}
@media (prefers-reduced-motion:reduce) {
  .icon-btn, .sw-x, .drw-i, .drw-pin, .menu-i, .dt, .seg button,
  .experience-launcher button, .experience-services button, .experience-all {
    transition: none;
  }
}