@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces/fraunces-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces/fraunces-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


:root {
  --ink: #ffffff;
  --ink-dim: rgba(255,255,240,0.6);
  --bg: #0b0e12;
  --panel-bg: #171b22;
  --content-width: 540px;
  --strip-height: 52px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

/* splash: logo mark + name + tagline, shown while geolocation/forecast load */
#splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--panel-bg);
  transition: opacity 0.4s ease;
}
#splash.hidden { opacity: 0; pointer-events: none; }
.splash-logo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 72px;
}
.splash-band {
  height: 9px;
  border-radius: 2px;
  transform-origin: left;
  animation: bandPulse 1.6s ease-in-out infinite;
}
.splash-band:nth-child(1) { background: #2e4a5c; animation-delay: 0s; }
.splash-band:nth-child(2) { background: #4e6a52; animation-delay: 0.15s; }
.splash-band:nth-child(3) { background: #8a7238; animation-delay: 0.3s; }
.splash-band:nth-child(4) { background: #8a4a2e; animation-delay: 0.45s; }
@keyframes bandPulse {
  0%, 100% { transform: scaleX(0.35); opacity: 0.5; }
  50% { transform: scaleX(1); opacity: 1; }
}
.splash-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.splash-tagline {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin-top: -8px;
}
#splash-status {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin-top: 10px;
  text-align: center;
  padding: 0 32px;
}

/* full-bleed: bands fill the whole screen edge to edge. Only the readable
   content (hour/temp/signals row) is capped and centred so the eye doesn't
   have to travel far on a wide screen */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  position: relative;
}

/* fixed side arrows replace the old topbar nav, sitting flush against the
   screen edge as small triangles rather than buttons, so they never sit
   over any hour, temp, or signal content */
.side-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 60px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 12;
  padding: 0;
}
.side-arrow svg { display: block; width: 8px; height: 14px; }
.side-arrow[disabled] { opacity: 0.2; cursor: default; }
.side-arrow-left { left: 0; justify-content: flex-start; padding-left: 3px; }
.side-arrow-right { right: 0; justify-content: flex-end; padding-right: 3px; }

#scroller {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  min-height: 0;
}
#scroller::-webkit-scrollbar { display: none; }
.day {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* the band itself is full width and carries the flat temperature colour;
   a smooth per-band gradient overlay blends day/night back into the bar
   (colour stops meet exactly at each hour boundary, so 24 bands read as
   one continuous wash rather than blocky steps) */
.band {
  flex: 1 1 0;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.band:first-child { border-top: none; }
.band-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.band-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.band .hour {
  font-size: 11px;
  letter-spacing: 0.02em;
  width: 54px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.band .cond {
  font-size: 11px;
  letter-spacing: 0.01em;
  opacity: 0.9;
  flex: 1;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band .signals {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-right: 10px;
}
.band .wind {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.band .wind svg {
  display: block;
  transition: transform 0.2s;
}
.band .uv-badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid currentColor;
  opacity: 0.9;
}
.band .rain-drops {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.band .temp {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 15px;
  flex-shrink: 0;
}
.band .feels-like {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 4px;
  flex-shrink: 0;
}
.now-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.85);
  z-index: 3;
  pointer-events: none;
}

/* week-glance, now docked at the bottom for easy thumb reach. Seven
   condensed day columns plus an eighth cell that opens settings, so no
   separate top bar is needed at all */
#week-strip {
  display: flex;
  width: 100%;
  height: var(--strip-height);
  flex-shrink: 0;
  gap: 1px;
  background: var(--panel-bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.week-seg {
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-top: 2px solid transparent;
  opacity: 0.8;
  transition: opacity 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.week-seg:hover { opacity: 0.95; }
.week-seg.active {
  opacity: 1;
  border-top-color: var(--ink);
}
.week-seg-letter {
  font-family: 'Fraunces', serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.week-seg-letter-full { display: none; }
@media (min-width: 601px) {
  .week-seg-letter-short { display: none; }
  .week-seg-letter-full { display: inline; font-size: 12px; }
}
.week-seg-icon {
  display: flex;
  color: var(--ink);
}
.week-seg-icon svg { display: block; width: 13px; height: 13px; }
.week-seg-gear {
  background: var(--panel-bg);
  color: var(--ink-dim);
  font-size: 15px;
  border-top-color: transparent !important;
  opacity: 1;
}

#panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 39;
  display: none;
}
#panel-backdrop.open { display: block; }
/* drawer opens docked directly above the week-strip, not the viewport edge.
   Closed transform must clear its own height PLUS the strip offset, not
   just its own height, or a sliver stays visible behind the strip. */
#settings-panel {
  position: fixed;
  left: 50%;
  bottom: var(--strip-height);
  transform: translate(-50%, calc(100% + var(--strip-height) + 20px));
  width: 100%;
  max-width: var(--content-width);
  z-index: 40;
  background: var(--panel-bg);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px 14px 0 0;
  padding: 18px 20px 20px;
  transition: transform 0.25s ease;
  max-height: calc(100dvh - var(--strip-height) - 24px);
  overflow-y: auto;
}
#settings-panel.open { transform: translate(-50%, 0); }

/* on wide screens the drawer pops from the bottom-right corner instead of
   centring, mobile keeps the centred sheet */
@media (min-width: 601px) {
  #settings-panel {
    left: auto;
    right: 24px;
    width: var(--content-width);
    border-radius: 14px;
    transform: translateY(calc(100% + var(--strip-height) + 20px));
  }
  #settings-panel.open { transform: translateY(0); }
}

.panel-brand {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.panel-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-brand-logo {
  flex-shrink: 0;
  border-radius: 5px;
  display: block;
}
.panel-brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.panel-brand-tagline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 28px;
}
.panel-brand-tagline {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin-top: 4px;
}
.explainer-toggle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: none;
  color: var(--ink-dim);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.explainer-toggle[aria-expanded="true"] {
  background: var(--ink-dim);
  color: var(--panel-bg);
  border-color: transparent;
}
.explainer-content {
  max-height: 0;
  overflow: hidden;
  margin-left: 28px;
  transition: max-height 0.3s ease;
}
.explainer-content.open { max-height: 200px; }
.explainer-content p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 8px 0 0;
}
.explainer-content p:first-child { margin-top: 10px; }
.panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 12px;
  letter-spacing: 0.01em;
}
.panel-row:first-of-type { border-top: none; }
.panel-row-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.panel-row-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}
.panel-row-slider input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
}

.location-row { position: relative; }
.location-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.location-field input {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  text-align: right;
  width: 160px;
  padding: 2px 0;
}
.location-confirm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #7fae8a;
  color: #0b0e12;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.location-confirm.show { display: flex; }
.location-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  width: 240px;
  max-height: 160px;
  overflow-y: auto;
  background: #1f242d;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  z-index: 5;
  display: none;
}
.location-dropdown.show { display: block; }
.location-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: var(--ink);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
}
.location-option:first-child { border-top: none; }
.location-option:hover { background: rgba(255,255,255,0.06); }
.location-option .loc-sub {
  display: block;
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 1px;
}

.seg {
  display: flex;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  overflow: hidden;
}
.seg button {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
}
.seg button.active {
  background: var(--ink);
  color: var(--panel-bg);
}
.toggle {
  width: 34px;
  height: 19px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.toggle.on { background: #7fae8a; }
.toggle .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ink);
  transition: left 0.15s;
}
.toggle.on .knob { left: 17px; }