/* FRAME — the shared screen chrome every view sits inside:
   silver button rows top and bottom, a green header strip with a lime
   location pill, and the royal blue panel in between. */

.frame {
  position: relative;
  z-index: var(--z-frame);
  display: grid;
  /* one column that never grows past the screen (a long alert line used to
     widen it on phones, letting focus scroll the page sideways) */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    calc(var(--frame-row-height) + env(safe-area-inset-top))
    var(--frame-header-height)
    auto
    minmax(0, 1fr)
    calc(var(--frame-row-height) + env(safe-area-inset-bottom));
  height: 100dvh;
  background: var(--frame-bg);
}

/* ---------- Silver button rows ---------- */

.frame-row {
  display: grid;
  grid-template-columns: var(--frame-columns);
  background: var(--frame-bg);
}

.frame-row--top {
  padding-top: env(safe-area-inset-top);
  border-bottom: var(--rule-thick) solid var(--frame-edge);
}

.frame-row--bottom {
  padding-bottom: env(safe-area-inset-bottom);
  border-top: var(--rule-thick) solid var(--frame-edge);
}

.frame-btn,
.frame-clock {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  background: var(--frame-btn-face);
  border: 0;
  box-shadow: var(--frame-btn-shadow);
  color: var(--frame-btn-text);
  font-size: var(--frame-btn-font);
  font-weight: var(--fw-bold);
  text-shadow: var(--frame-btn-text-shadow);
  white-space: nowrap;
}

/* thin double divider between neighbouring buttons */
.frame-row > * + * {
  border-left: var(--rule) solid var(--frame-divider);
  box-shadow: var(--frame-btn-shadow), inset var(--hairline) 0 0 var(--frame-divider-light);
}

.frame-btn-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover and press light a layer under the label, so the change can fade
   in (a gradient background can't fade by itself). Corner buttons brighten
   to a lighter silver; middle buttons, and any button while pressed, light
   up cyan with white text like the references. */
.frame-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--frame-btn-face-hover);
  opacity: 0;
  pointer-events: none;
}

.frame-btn--nav::before,
.frame-btn:not(:disabled):active::before {
  background: var(--frame-btn-face-active);
  box-shadow: var(--frame-btn-shadow-active);
}

.frame-btn:not(:disabled):active::before,
.frame-btn--nav.is-pressed::before {
  opacity: 1;
}

.frame-btn:not(:disabled):active,
.frame-btn--nav.is-pressed {
  color: var(--frame-btn-text-active);
  text-shadow: var(--frame-btn-text-shadow-active);
}

/* only real pointers hover; touch screens would leave the button lit */
@media (hover: hover) {
  .frame-btn:not(:disabled):hover::before {
    opacity: 1;
  }

  .frame-btn--nav:not(:disabled):hover {
    color: var(--frame-btn-text-active);
    text-shadow: var(--frame-btn-text-shadow-active);
  }
}

.frame-btn:focus-visible {
  outline-color: var(--focus-ring-on-light);
  outline-offset: calc(-1 * var(--focus-width) - var(--rule));
}

/* An empty slot keeps the frame's rhythm but does nothing. */
.frame-btn.is-empty {
  color: transparent;
  text-shadow: none;
}

.frame-btn.is-empty > * {
  visibility: hidden;
}

.frame-tri {
  flex: 0 0 auto;
  width: var(--frame-tri-size);
  height: var(--frame-tri-size);
  fill: currentColor;
}

/* Digital clock in the top-left slot */
.frame-clock {
  gap: var(--space-1);
  color: var(--frame-clock-text);
  font-family: var(--font-digital);
  font-size: var(--frame-clock-font);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
}

.frame-clock-digits {
  font-family: inherit;
}

.frame-clock-meridiem {
  align-self: flex-end;
  margin-bottom: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--frame-clock-meridiem-font);
  font-weight: var(--fw-heavy);
}

/* ---------- Green header strip ---------- */

.frame-header {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  min-width: 0;
  padding-right: var(--space-4);
  background: var(--header-strip);
  border-bottom: var(--rule) solid var(--header-strip-edge);
}

/* the green block stays put while the title text inside it moves */
.frame-title-block {
  position: relative;
  display: flex;
  flex: 0 0 var(--title-block-width);
  align-items: center;
  min-width: 0;
  padding: 0 var(--space-5);
  overflow: hidden;
  background: var(--title-block);
}

.frame-title {
  min-width: 0;
  color: var(--title-text);
  font-size: var(--title-font);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-caps);
  text-shadow: var(--title-text-shadow);
  text-transform: uppercase;
}

.frame-title.is-long {
  font-size: var(--title-font-long);
}

.frame-location,
.frame-search {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  margin: var(--pill-inset) 0;
  padding: 0 var(--space-6);
  background: var(--pill-face);
  border: var(--hairline) solid var(--pill-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--pill-shadow);
  color: var(--pill-text);
  font-size: var(--pill-font);
  font-weight: var(--fw-bold);
  text-shadow: var(--title-text-shadow);
}

/* glossy highlight along the top edge of the pill */
.frame-location::before,
.frame-search::before {
  content: "";
  position: absolute;
  top: var(--hairline);
  right: var(--space-4);
  left: var(--space-4);
  z-index: -1;
  height: 45%;
  background: var(--pill-gloss);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.frame-location-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-location:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--hairline);
}

/* While searching, the pill holds a field pressed into it and a raised Go button. */
.frame-search {
  justify-content: stretch;
  gap: var(--space-2);
  padding: var(--search-pad);
}

.frame-search-well {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  height: 100%;
  padding: 0 var(--space-5);
  background: var(--search-well-face);
  border: var(--hairline) solid var(--search-well-rim);
  border-radius: var(--radius-pill);
  box-shadow: var(--search-well-shadow);
}

/* the field you're typing in carries the cyan selection ring */
.frame-search-well:focus-within {
  border-color: var(--search-well-focus-rim);
  box-shadow: var(--search-well-shadow), var(--search-well-focus-glow);
}

.frame-search-icon {
  flex: 0 0 auto;
  width: var(--search-icon-size);
  height: var(--search-icon-size);
  fill: none;
  stroke: var(--search-icon);
  stroke-linecap: round;
  stroke-width: var(--search-icon-stroke);
}

.frame-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  caret-color: var(--search-caret);
  color: var(--search-field-text);
  font-size: var(--search-font);
  font-weight: var(--fw-bold);
  text-shadow: none;
}

.frame-search-input::placeholder {
  color: var(--search-field-placeholder);
  font-weight: var(--fw-regular);
}

.frame-search-input:focus {
  outline: none;
}

.frame-search-go {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  min-width: var(--search-go-width);
  height: 100%;
  padding: 0 var(--space-5);
  background: var(--pill-silver-face);
  border: var(--cyan-rim-width) solid var(--cyan-rim);
  border-radius: var(--radius-pill);
  box-shadow: var(--search-go-shadow);
  color: var(--pill-silver-text);
  font-size: var(--search-go-font);
  font-weight: var(--fw-heavy);
  text-shadow: var(--pill-silver-text-shadow);
}

/* gloss cap across the top of the button */
.frame-search-go::before {
  content: "";
  position: absolute;
  top: var(--hairline);
  right: var(--space-3);
  left: var(--space-3);
  z-index: -1;
  height: 46%;
  background: var(--pill-gloss-cap);
  border-radius: var(--pill-gloss-cap-radius);
  pointer-events: none;
}

/* stretches the tap area to the full pill height on small screens */
.frame-search-go::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--search-go-hit)) 0;
}

/* the cyan face sits under the gloss cap and fades in on hover */
.frame-search-go-face {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--frame-btn-face-active);
  border-radius: inherit;
  opacity: 0;
}

.frame-search-go:hover .frame-search-go-face,
.frame-search-go:focus-visible .frame-search-go-face,
.frame-search-go:active .frame-search-go-face {
  opacity: 1;
}

.frame-search-go:hover,
.frame-search-go:focus-visible,
.frame-search-go:active {
  border-color: var(--cyan-rim-hover);
  box-shadow: var(--search-go-shadow), var(--search-go-glow);
  color: var(--frame-btn-text-active);
  text-shadow: var(--frame-btn-text-shadow-active);
}

.frame-search-go:hover::before,
.frame-search-go:focus-visible::before,
.frame-search-go:active::before {
  opacity: 0.45;
}

.frame-search-go:focus-visible {
  outline-color: var(--focus-ring-on-light);
  outline-offset: var(--hairline);
}

/* ---------- Royal blue panel ---------- */

.frame-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--panel-face);
  color: var(--panel-text);
  text-shadow: var(--panel-text-shadow);
}

/* faint horizontal light streaks over everything */
.frame-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-footer);
  background: var(--panel-streaks);
  pointer-events: none;
}

/* satellite imagery of the city, tinted by the blue underneath */
.panel-sat {
  position: absolute;
  inset: 0;
  z-index: var(--z-sat);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: luminosity;
  opacity: var(--panel-sat-opacity);
  transition: opacity var(--dur-slow) ease;
  pointer-events: none;
}

.panel-sat.is-empty {
  opacity: 0;
}

.panel-viewport {
  position: absolute;
  inset: 0;
  z-index: var(--z-view);
  overflow: hidden;
  touch-action: pan-x pinch-zoom;
}

/* frame.js slides the track with a small bounce; this is where it rests */
.panel-track {
  height: 100%;
  transform: translateY(calc(var(--view-index, 0) * -100%));
}

.view {
  position: relative;
  height: 100%;
  padding: var(--panel-pad-top) var(--panel-pad-x) var(--panel-footer-space);
  overflow: hidden;
}

/* ---------- Page dots down the right edge ---------- */

.view-dots {
  position: absolute;
  top: 0;
  right: var(--dots-right);
  bottom: var(--panel-footer-space);
  z-index: var(--z-footer);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* screens cover the views, so their dots step aside too */
.frame[data-screen] .view-dots {
  visibility: hidden;
}

.view-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dot-hit-width);
  height: var(--dot-hit-height);
  padding: 0;
  background: none;
  border: 0;
}

.view-dot::before {
  content: "";
  width: var(--dot-size);
  height: var(--dot-size);
  background: var(--dot-face);
  border: var(--hairline) solid var(--dot-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--dot-shadow);
}

/* the current dot grows with a spring (transform, so hover can still scale it) */
.view-dot.is-current::before {
  transform: scale(var(--dot-current-scale));
  background: var(--dot-current-face);
  border-color: var(--dot-current-border);
  box-shadow: var(--dot-current-glow);
}

.view-dot:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

/* the view's name appears beside a dot you point at */
.view-dot-name {
  position: absolute;
  top: 50%;
  right: 100%;
  padding: var(--space-1) var(--space-3);
  background: var(--dot-tip-face);
  border-radius: var(--radius-pill);
  font-size: var(--dot-tip-font);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.view-dot:hover .view-dot-name,
.view-dot:focus-visible .view-dot-name {
  opacity: 1;
}

/* ---------- Big-number layout (Current / Today / Tomorrow) ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "temps    icon"
    "cond     icon"
    "readings readings";
  align-content: center;
  align-items: center;
  column-gap: var(--space-6);
  height: 100%;
}

.hero-temps {
  grid-area: temps;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-5);
  min-width: 0;
}

.hero-temp {
  color: var(--temp-high);
  font-size: var(--hero-temp-size);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-shadow: var(--temp-high-shadow);
}

/* forecast days show a high and a low side by side, so the pair runs smaller */
.hero--day {
  --hero-temp-size: var(--hero-day-temp-size);
}

.hero-temp--current {
  color: var(--temp-current);
  text-shadow: var(--temp-shadow);
}

.hero-low {
  color: var(--temp-low);
  font-size: calc(var(--hero-temp-size) * 0.5);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  text-shadow: var(--temp-shadow);
}

.hero-cond {
  grid-area: cond;
  align-self: start;
  margin-top: var(--space-3);
  overflow-wrap: anywhere;
  font-size: var(--hero-cond-size);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  text-align: center;
}

/* the big icon sits in a wrapper that can glow behind it or drip below it */
.wx-icon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
}

.hero > .wx-icon {
  grid-area: icon;
  justify-self: center;
}

.hero-icon {
  width: var(--hero-icon-size);
  height: var(--hero-icon-size);
  object-fit: contain;
  filter: var(--hero-icon-shadow);
}

/* Reading bubbles: icon, value on top, what it is underneath */
.readings {
  grid-area: readings;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--reading-gap);
  margin-top: var(--reading-top);
  list-style: none;
}

.reading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon value"
    "icon label";
  align-items: center;
  column-gap: var(--space-2);
  min-width: var(--reading-min-width);
  padding: var(--reading-pad-y) var(--reading-pad-x);
  background: var(--reading-face);
  border: var(--hairline) solid var(--reading-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--reading-shadow);
}

.reading-icon {
  grid-area: icon;
  width: var(--reading-icon-size);
  height: var(--reading-icon-size);
  fill: none;
  stroke: var(--reading-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--reading-icon-stroke);
  filter: var(--reading-icon-shadow);
}

.reading-value {
  grid-area: value;
  font-size: var(--reading-value-font);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.reading-label {
  grid-area: label;
  color: var(--panel-text-soft);
  font-size: var(--reading-label-font);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  white-space: nowrap;
}

/* mid-size screens split Current's seven bubbles four and three */
@media (min-width: 768px) and (max-width: 1279px) {
  #currentReadings {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
  }
}

/* ---------- 5-Day forecast: five equal columns ---------- */

.view--fiveday {
  display: flex;
  align-items: center;
  padding-right: var(--dots-gutter);
  padding-bottom: var(--panel-footer-slim);
  padding-left: var(--space-4);
}

.fiveday {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fiveday-gap);
  width: 100%;
  height: min(100%, var(--fiveday-max-height));
  list-style: none;
}

.fiveday-col {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0 var(--space-3);
  overflow: hidden;
  background: var(--fiveday-col-face);
  border: var(--hairline) solid var(--fiveday-col-border);
  box-shadow: var(--fiveday-col-shadow);
  color: var(--panel-text);
  text-shadow: var(--panel-text-shadow);
}

/* a brighter face fades in under the column on hover */
.fiveday-col::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fiveday-col-face-hover);
  opacity: 0;
  pointer-events: none;
}

.fiveday-col:active::before {
  opacity: 1;
}

@media (hover: hover) {
  .fiveday-col:hover::before {
    opacity: 1;
  }
}

.fiveday-col:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

.fiveday-day {
  align-self: stretch;
  justify-self: stretch;
  padding: var(--space-2) 0;
  background: var(--fiveday-head-face);
  font-size: var(--fiveday-head-font);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-caps);
  text-align: center;
}

.fiveday-day.is-weekend {
  color: var(--weekend-text);
}

.fiveday-icon {
  width: var(--fiveday-icon-size);
  height: var(--fiveday-icon-size);
  object-fit: contain;
  filter: var(--hero-icon-shadow);
}

.fiveday-high,
.fiveday-low {
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

.fiveday-high {
  color: var(--temp-high);
  font-size: var(--fiveday-high-font);
  text-shadow: var(--temp-high-shadow);
}

.fiveday-low {
  color: var(--temp-low);
  font-size: var(--fiveday-low-font);
  text-shadow: var(--temp-shadow);
}

/* ---------- 6-Hour weather: sub-header strip + four glossy tiles ---------- */

.view--sixhour {
  padding-top: 0;
  padding-bottom: var(--panel-footer-slim);
}

.sixhour {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* the smaller sub-header under the green header */
.sixhour-strip {
  align-self: flex-start;
  margin: 0 calc(-1 * var(--panel-pad-x));
  padding: var(--space-2) var(--panel-pad-x);
  padding-right: var(--space-9);
  background: var(--sixhour-strip-face);
  font-size: var(--sixhour-strip-font);
  font-weight: var(--fw-bold);
}

.sixhour-list {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: center;
  gap: var(--sixhour-gap);
  list-style: none;
}

.sixhour-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-2) var(--space-4);
  background: var(--sixhour-tile-face);
  border: var(--rule) solid var(--sixhour-tile-border);
  border-radius: var(--radius-md);
  box-shadow: var(--sixhour-tile-shadow);
  text-align: center;
}

.sixhour-icon {
  width: var(--sixhour-icon-size);
  height: var(--sixhour-icon-size);
  object-fit: contain;
  filter: var(--hero-icon-shadow);
}

.sixhour-temps {
  display: flex;
  gap: var(--space-2);
  font-size: var(--sixhour-temp-font);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

.sixhour-high {
  color: var(--temp-high);
}

.sixhour-low {
  color: var(--temp-low);
}

.sixhour-time {
  font-size: var(--sixhour-time-font);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  white-space: pre-line;
}

.sixhour-note {
  margin: auto;
  font-size: var(--hero-cond-size);
}

/* ---------- UV index ---------- */

.view--uv {
  padding-bottom: var(--panel-footer-slim);
}

.uv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 100%;
  text-align: center;
}

.uv-label {
  font-size: var(--hero-cond-size);
  font-weight: var(--fw-bold);
}

.uv-reading {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
}

.uv-value {
  color: var(--temp-high);
  font-size: var(--uv-value-font);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  text-shadow: var(--temp-high-shadow);
}

.uv-category {
  font-size: var(--uv-category-font);
  font-weight: var(--fw-heavy);
}

.uv-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-1);
  width: min(100%, var(--uv-scale-width));
  list-style: none;
}

.uv-band {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  font-size: var(--uv-band-font);
  font-weight: var(--fw-bold);
}

.uv-band-bar {
  height: var(--uv-band-height);
  align-self: stretch;
  margin-top: calc(var(--uv-band-active-height) - var(--uv-band-height));
  border: var(--rule) solid var(--uv-band-border);
  border-radius: var(--radius-sm);
}

.uv-band.is-current .uv-band-bar {
  height: var(--uv-band-active-height);
  margin-top: 0;
  box-shadow: 0 0 0 var(--rule) var(--panel-text);
}

.uv-band.is-current .uv-band-name {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.uv-band[data-band="Low"] .uv-band-bar { background: var(--uv-low); }
.uv-band[data-band="Moderate"] .uv-band-bar { background: var(--uv-moderate); }
.uv-band[data-band="High"] .uv-band-bar { background: var(--uv-high); }
.uv-band[data-band="Very High"] .uv-band-bar { background: var(--uv-very-high); }
.uv-band[data-band="Extreme"] .uv-band-bar { background: var(--uv-extreme); }

.uv-advice {
  max-width: 36ch;
  color: var(--panel-text-soft);
  font-size: var(--uv-advice-font);
  line-height: var(--lh-body);
}

/* ---------- Empty state ---------- */

/* Until a city loads, every view shows its empty message instead. */
.frame-panel:not(.has-data) .view-body,
.frame-panel.has-data .view-empty {
  display: none;
}

.view-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  height: 100%;
  text-align: center;
}

.view-empty-text {
  max-width: 28ch;
  font-size: var(--hero-cond-size);
  line-height: var(--lh-snug);
}

/* ---------- Panel footer: credit, wind band, As-of strip ---------- */

.panel-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-footer);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: end;
  pointer-events: none;
}

.panel-credit {
  padding: 0 var(--space-4) var(--space-2);
  color: var(--credit-text);
  font-size: var(--credit-font);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.panel-readout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.panel-wind {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-8);
  background: var(--wind-band);
  text-align: right;
}

.panel-wind-main {
  white-space: nowrap;
  font-size: var(--wind-font);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.panel-asof {
  padding: var(--space-1) var(--space-6);
  background: var(--asof-strip);
  font-size: var(--asof-font);
  font-weight: var(--fw-bold);
  text-align: right;
  white-space: nowrap;
}

/* ---------- Loading and errors: in the middle of the panel ---------- */

/* the panel dims while a city loads, with bouncing dots in the middle */
.panel-loading {
  position: absolute;
  inset: 0;
  z-index: var(--z-status);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--loading-scrim);
  text-align: center;
}

.loader-dots {
  display: flex;
  gap: var(--loader-dot-gap);
}

.loader-dot {
  /* squashes against the floor, not around its middle */
  transform-origin: 50% 100%;
  width: var(--loader-dot-size);
  height: var(--loader-dot-size);
  background: var(--loader-dot-1);
  border-radius: var(--radius-pill);
  box-shadow: var(--loader-dot-shadow);
}

.loader-dot:nth-child(2) {
  background: var(--loader-dot-2);
}

.loader-dot:nth-child(3) {
  background: var(--loader-dot-3);
}

.loader-dots--small {
  gap: var(--loader-dot-gap-small);
}

.loader-dots--small .loader-dot {
  width: var(--loader-dot-size-small);
  height: var(--loader-dot-size-small);
}

.panel-loading-text {
  max-width: 30ch;
  font-size: var(--loading-font);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* a friendly white card with one way forward */
.panel-error {
  position: absolute;
  inset: 0;
  z-index: var(--z-status);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: min(calc(100% - 2 * var(--space-6)), var(--error-card-width));
  height: fit-content;
  margin: auto;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--error-card-face);
  border: var(--rule) solid var(--error-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--error-card-shadow);
  color: var(--error-card-text);
  text-align: center;
  text-shadow: none;
}

.panel-error-text {
  font-size: var(--error-font);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.panel-error-btn {
  width: auto;
  min-width: var(--error-btn-width);
  border-color: var(--cyan-rim);
}

/* ---------- Small note pill (alerts couldn't load) ---------- */

.panel-status {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  z-index: var(--z-status);
  max-width: calc(100% - 2 * var(--space-5));
  padding: var(--space-3) var(--space-6);
  background: var(--status-face);
  border: var(--hairline) solid var(--status-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--status-shadow);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  transform: translateX(-50%);
}

.panel-status--error {
  background: var(--status-error-face);
  border-radius: var(--radius-lg);
}

/* on sub-screens the status pill sits low so it never covers the content */
.frame[data-screen] .panel-status {
  top: auto;
  bottom: var(--space-6);
}

.panel-status--note {
  top: auto;
  bottom: var(--panel-footer-space);
  font-size: var(--fs-sm);
}

.panel-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-status);
}

.view-empty-btn {
  width: auto;
  min-width: var(--chip-min-width);
}

/* ---------- Sub-screens (search, settings, alert, day, globe) ---------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: var(--z-screen);
  padding: var(--panel-pad-top) var(--panel-pad-x) var(--panel-footer-space);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel-face);
}

.screen-heading {
  margin-bottom: var(--space-5);
  font-size: var(--hero-cond-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.screen-note {
  margin-top: var(--space-5);
  color: var(--panel-text-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* Settings: glossy cards side by side, each holding rows of two choices */
.settings-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-6);
  max-width: var(--settings-cards-width);
}

.settings-card {
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--settings-card-face);
  border: var(--hairline) solid var(--settings-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--settings-card-shadow);
}

.settings-card-title {
  margin-bottom: var(--space-4);
  font-size: var(--settings-card-title-font);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-tight);
}

.settings-label {
  margin-bottom: var(--space-3);
  color: var(--panel-text-soft);
  font-size: var(--settings-label-font);
  font-weight: var(--fw-bold);
}

.settings-group + .settings-group {
  margin-top: var(--space-5);
}

.settings-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* long choices wrap onto two centred lines instead of being cut off */
.chip-btn.settings-choice {
  padding: var(--space-1) var(--space-3);
  line-height: var(--lh-snug);
  text-align: center;
  white-space: normal;
}

/* Silver buttons used inside the panel (recent cities, choices) */
.chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--chip-min-width)), 1fr));
  gap: var(--space-3);
  list-style: none;
}

.chip-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--chip-height);
  padding: 0 var(--space-4);
  overflow: hidden;
  background: var(--chip-face);
  border: var(--rule) solid var(--chip-border);
  border-radius: var(--radius-md);
  box-shadow: var(--chip-shadow);
  color: var(--frame-btn-text);
  font-size: var(--chip-font);
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  text-shadow: var(--frame-btn-text-shadow);
  white-space: nowrap;
}

/* the cyan face is a layer, so hovering and choosing fade it in */
.chip-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--frame-btn-face-active);
  opacity: 0;
  pointer-events: none;
}

.chip-btn:active::before,
.chip-btn.is-selected::before {
  opacity: 1;
}

.chip-btn:active,
.chip-btn.is-selected {
  color: var(--frame-btn-text-active);
  text-shadow: var(--frame-btn-text-shadow-active);
}

@media (hover: hover) {
  .chip-btn:hover::before {
    opacity: 1;
  }

  .chip-btn:hover {
    color: var(--frame-btn-text-active);
    text-shadow: var(--frame-btn-text-shadow-active);
  }
}

.chip-btn:focus-visible {
  outline-offset: var(--focus-offset);
}

/* a closing screen stays on top while it shrinks away, but takes no clicks */
.screen.is-leaving {
  pointer-events: none;
}

/* Clear screens (a single forecast day) keep the satellite panel behind
   them and hide the view stack instead. */
.screen--clear {
  overflow: hidden;
  background: none;
}

.frame[data-clear] .panel-viewport {
  visibility: hidden;
}

.frame[data-clear] .panel-footer {
  z-index: var(--z-status);
}

/* ---------- Desktop Home menu vs frame ---------- */

body.is-home .frame {
  display: none;
}

.home {
  display: none;
}

@media (min-width: 768px) {
  body.is-home .home {
    display: flex;
  }

  /* while a channel zooms open or shut, Home and the frame both show */
  body.is-launching .home {
    display: flex;
    pointer-events: none;
  }
}

body.is-launching .frame {
  display: grid;
}

body.is-returning .home {
  z-index: var(--z-home-returning);
}

/* ---------- Launch zoom (launch.js) ---------- */

/* a copy of the chosen Home tile that grows into the frame (body > keeps
   the tile's own position rules from winning) */
body > .launch-ghost {
  position: fixed;
  z-index: var(--z-launch);
  margin: 0;
  pointer-events: none;
}

/* phones: a Cirrus tile on the night sky as the app opens */
.launch-splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-launch);
  display: grid;
  place-items: center;
  background: var(--launch-splash-bg);
  pointer-events: none;
}

.launch-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: var(--launch-tile-width);
  aspect-ratio: var(--launch-tile-ratio);
  background: var(--tile-today-face);
  border-radius: var(--tile-radius);
  box-shadow: var(--tile-ring), var(--launch-tile-glow);
  color: var(--panel-text);
  font-size: var(--launch-tile-font);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-caps);
  text-shadow: var(--tile-text-shadow);
}

.launch-tile-icon {
  width: var(--launch-tile-icon);
  height: var(--launch-tile-icon);
  object-fit: contain;
}

@media (max-width: 767px) {
  /* phones never show the Home menu, so the frame is always on screen */
  body.is-home .frame {
    display: grid;
  }

  .frame-header {
    gap: var(--space-2);
    padding-right: var(--space-2);
  }

  .frame-title-block {
    padding: 0 var(--space-3);
  }

  .frame-location {
    padding: 0 var(--space-4);
  }

  /* the phone field is narrow, so the city name gets the room the icon took */
  .frame-search-well {
    padding: 0 var(--space-3);
  }

  .frame-search-icon {
    display: none;
  }

  .frame-search-go {
    padding: 0 var(--space-3);
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
  }

  .panel-footer {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .panel-credit {
    padding: 0 var(--space-3) var(--space-2);
    white-space: nowrap;
  }

  .panel-wind {
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6);
  }

  .panel-asof {
    padding: var(--space-1) var(--space-4);
  }

  .settings-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .settings-card {
    padding: var(--space-4);
  }

  /* phones navigate by swipe, so the dots only show where you are */
  .view-dots {
    pointer-events: none;
  }

  .view-dot-name {
    display: none;
  }

  /* bubbles pair up in two columns on phones */
  .readings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reading {
    min-width: 0;
  }

  /* an odd bubble out sits centred under the pairs */
  .reading:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--reading-gap) / 2);
  }

  /* four tiles become a 2 x 2 grid on phones */
  .sixhour-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}