/* SPEC §10 layout and §11 tokens. M9 polishes; the tokens and positions are final here. */

:root {
  --bg: #f2f2f7;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-border: rgba(255, 255, 255, 0.45);
  --panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --text: #1c1c1e;
  --text-2: #6e6e73;
  --accent: #007aff;
  --banner: rgba(255, 204, 0, 0.85);
  --seg-track: rgba(118, 118, 128, 0.12);
  --seg-selected: #ffffff;
  --toggle-on: #34c759;
  --edge: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}
:root[data-theme="dark"] {
  --bg: #000000;
  --panel: rgba(28, 28, 30, 0.72);
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --text: #f2f2f7;
  --text-2: #98989d;
  --accent: #0a84ff;
  --banner: rgba(255, 214, 10, 0.85);
  --seg-track: rgba(118, 118, 128, 0.24);
  --seg-selected: #636366;
  --toggle-on: #30d158;
}
@media (min-width: 768px) {
  :root {
    --edge: 16px;
  }
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overscroll-behavior: none;
  overflow: hidden;
}
#map {
  position: fixed;
  inset: 0;
}
[hidden] {
  display: none !important;
}

.glass {
  background: var(--panel);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  border-radius: 20px;
  color: var(--text);
}

/* Top stack: segmented control, delayed banner, heat pop-up. */
.top {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--edge));
  left: calc(env(safe-area-inset-left) + var(--edge));
  right: calc(env(safe-area-inset-right) + var(--edge));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.banner {
  background: var(--banner);
  color: #1c1c1e;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* Mode segmented control (SPEC §11 Controls): 32 px tall inside a 44 px touch area. */
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 220px;
  height: 32px;
  padding: 2px;
  margin: 6px 0;
  border-radius: 10px;
  background: var(--seg-track);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--panel-shadow);
  pointer-events: auto;
  box-sizing: content-box;
}
.segmented button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  /* 44 px touch target around the 32 px segment */
  margin: -6px 0;
  padding: 6px 0;
}
.segmented button[aria-selected="true"] {
  font-weight: 600;
}
.segmented-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 8px;
  background: var(--seg-selected);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 180ms ease-out;
}
:root[data-mode="heat"] .segmented-thumb {
  transform: translateX(100%);
}

/* Heat pop-up and slider (SPEC §10, §11). */
.heat-popup {
  pointer-events: auto;
  padding: 12px 16px;
  width: min(320px, 100%);
  box-sizing: border-box;
  animation: drop 180ms ease-out;
}
@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
#heat-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}
#heat-days {
  --fill: 100%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
#heat-days::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill), rgba(120, 120, 128, 0.2) var(--fill));
}
#heat-days::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill), rgba(120, 120, 128, 0.2) var(--fill));
}
#heat-days::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
#heat-days::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.heat-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.button.small {
  min-height: 32px;
  min-width: 72px;
  font-size: 13px;
}

/* Bottom-left pills. */
.bottom-left {
  position: fixed;
  left: calc(env(safe-area-inset-left) + var(--edge));
  bottom: calc(env(safe-area-inset-bottom) + var(--edge));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100vw - 2 * var(--edge) - 60px);
}
.pill {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* Settings button and panel (SPEC §10, §11): above the MapLibre ⓘ in the bottom-right corner. */
.bottom-right {
  position: fixed;
  right: calc(env(safe-area-inset-right) + var(--edge));
  bottom: calc(env(safe-area-inset-bottom) + 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.settings-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 180ms ease-out;
}
.settings-button:hover,
.settings-button:focus-visible {
  opacity: 1;
}
.settings-panel {
  width: min(320px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 14px 16px;
  font-size: 15px;
  animation: rise 180ms ease-out;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.settings-header {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border-bottom: 1px solid rgba(120, 120, 128, 0.2);
}
.settings-footer {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.settings-footer p {
  margin: 0 0 8px;
}
.settings-footer a {
  color: var(--accent);
  text-decoration: none;
}

/* iOS toggle: 51 × 31 px, 27 px knob. */
.switch {
  position: relative;
  width: 51px;
  height: 31px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(120, 120, 128, 0.32);
  cursor: pointer;
  transition: background 180ms ease-out;
  flex: none;
}
.switch[aria-checked="true"] {
  background: var(--toggle-on);
}
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 180ms ease-out;
}
.switch[aria-checked="true"] .switch-knob {
  transform: translateX(20px);
}

/* First-load failure card. */
.card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 24px;
  text-align: center;
  width: min(300px, calc(100vw - 48px));
}
.card-title {
  font-size: 17px;
  font-weight: 600;
}
.card-body {
  margin: 6px 0 14px;
  font-size: 15px;
  color: var(--text-2);
}
.button {
  min-height: 44px;
  min-width: 96px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Popup (MapLibre). */
.maplibregl-popup-content {
  background: var(--panel);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  box-shadow: var(--panel-shadow);
  padding: 14px 16px;
  color: var(--text);
}
.maplibregl-popup-close-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  top: 6px;
  right: 6px;
  color: var(--text-2);
}
.popup {
  font-size: 15px;
  min-width: 220px;
}
.popup-title {
  font-size: 17px;
  font-weight: 600;
  padding-right: 24px;
  margin-bottom: 8px;
}
.priority-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}
.priority-pill.on-light {
  color: #1c1c1e;
}
.popup-row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
}
.popup-label {
  flex: 0 0 64px;
  color: var(--text-2);
  font-size: 13px;
  padding-top: 1px;
}
.popup-value {
  flex: 1;
}
.popup-units-heading {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 13px;
}
.popup-units {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.popup-units li {
  padding: 2px 0;
}

/* ---------- M9 polish (SPEC §11) ---------- */

/* Popup pointer takes the panel color in both themes. */
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--panel);
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--panel);
}
.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--panel);
}
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--panel);
}
.maplibregl-popup-close-button:hover {
  background: rgba(120, 120, 128, 0.16);
}

/* The compact attribution's text stays hidden until app.js collapses it on the first idle, so it never
   flashes open while the tiles load (it was also the page's largest paint, at ~4.6 s on a slow phone). */
:root:not(.attrib-ready) .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
  display: none;
}

/* Attribution ⓘ follows the theme and clears the home indicator. */
.maplibregl-ctrl-bottom-right {
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
:root[data-theme="dark"] .maplibregl-ctrl-attrib {
  background: var(--panel);
  color: var(--text);
}
:root[data-theme="dark"] .maplibregl-ctrl-attrib a {
  color: var(--text-2);
}
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button {
  filter: invert(1);
}

/* Visible focus for keyboard users. */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.segmented button:focus-visible {
  outline-offset: -2px;
  border-radius: 8px;
}

/* Smooth chrome transitions when the theme changes. */
.glass,
.pill,
.banner,
.segmented {
  transition: background-color 180ms ease-out, color 180ms ease-out;
}