/* Sun seeker: layout and components. Every colour, size and font comes from tokens.css,
   which design-book generates from the Figma variables (tokens/sunseeker.tokens.mjs).

   Figma components → here:
     card (orientation=vertical / horizontal)  .band     colours from its own data-weather
     card (orientation=strip)                  .strip    in #strips, under the header
     Header (size=large / compact)             .top      always on top
     Logo, Location field                      .home-link, .where-field
     Footer                                    .credit
   The page (backdrop, desktop panel, chrome colour) follows today's card: body[data-weather].

   Layout: phone, one column of full-width vertical cards. From 720px, horizontal cards (action in
   a 338px column on the right). From 1100px, a 988px column on the page colour with the panel
   behind it (Figma desktop frames). */

:root {
  --shadow: 0 8px 18px -6px rgba(24, 39, 75, 0.12), 0 12px 42px -4px rgba(24, 39, 75, 0.12);
  /* Layout sizes come from the Figma layout/* variables: one 76px rhythm. */
  --strip: var(--layout-strip);          /* card orientation=strip: 12 + 52 + 12 */
  --header: var(--layout-header);        /* Header size=compact: 20 + 36 + 20 */
  --header-large: var(--layout-header);  /* phones keep the compact header; desktop below */
  --logo: var(--icon-size-medium);
  --action-width: 338px;                 /* card orientation=horizontal: action column */
  --column: var(--layout-column);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--page-background); }
html, body, .top { transition: background-color 0.4s ease; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;   /* the footer sits at the bottom of short pages */
  background: var(--page-background);
  color: var(--page-chrome);
  font: var(--type-summary-font-weight) var(--type-summary-font-size)/var(--type-summary-line-height) var(--type-summary-font-family);
  -webkit-font-smoothing: antialiased;
}
main {
  flex: 1 0 auto;
  display: flex; flex-direction: column; isolation: isolate; position: relative; z-index: 1;
  padding-top: var(--header-large);   /* padding, not margin: a margin would collapse through body */
}

/* ---------- header: logo + location field ---------- */
.top {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  height: var(--header-large);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--chrome-inset);
  padding: 0 var(--chrome-inset);
  background: var(--page-background);
  color: var(--page-chrome);
  transition: height 0.2s ease;
}
.scrolled .top { height: var(--header); }
.home-link {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer;
  width: var(--logo); height: var(--logo); transition: width 0.2s ease, height 0.2s ease;
}
.logo { display: block; width: 100%; height: 100%; }
.scrolled .home-link { --logo: var(--icon-size-medium); }

.where-field { position: relative; min-width: 0; }

/* Gear after the location field (Figma "Location field" with settings) and its popover ("settings"). */
.gear {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer;
  width: var(--icon-size-medium); height: var(--icon-size-medium); display: grid; place-items: center; border-radius: 50%;
}
.gear svg { display: block; width: var(--icon-size-small); height: var(--icon-size-small); transition: transform 0.3s ease; }
.gear[aria-expanded="true"] svg { transform: rotate(60deg); }
.back-link:not([hidden]) ~ .gear { display: none; }        /* places screens: no gear */
.settings {
  position: absolute; z-index: 2; top: calc(100% - var(--space-8)); right: var(--chrome-inset);
  display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-20);
  background: var(--shade-empty); border-radius: var(--radius-popover); box-shadow: var(--shadow);
}
.settings[hidden] { display: none; }
.seg { display: flex; border-radius: var(--radius-pill); background: var(--gradient-frozen-mammoth); }
.seg button {
  flex: 1 1 auto; appearance: none; border: 0; margin: 0; cursor: pointer; white-space: nowrap;
  padding: var(--space-8) var(--space-20); border-radius: var(--radius-pill); background: transparent; color: var(--primary-kotik);
  font: var(--type-small-font-weight) var(--type-small-font-size)/var(--type-small-line-height) var(--type-small-font-family);
}
.seg button[aria-checked="true"] { background: var(--gradient-bonne-nuit); color: var(--shade-empty); }
/* Places screens: "‹ back to Zürich" in the location field's place (same type, underlined). */
.back-link {
  justify-self: start; appearance: none; background: none; border: 0; padding: 0 var(--space-4); margin: 0;
  color: inherit; cursor: pointer; text-align: left; min-width: 0; max-width: 100%;
  font: var(--type-summary-font-weight) var(--type-summary-font-size)/var(--type-summary-line-height) var(--type-summary-font-family);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.back-link[hidden], .where-field[hidden] { display: none; }
.where-field input {
  width: 100%; margin: 0; border: 0; border-bottom: 2px solid currentColor; border-radius: 0;
  background: transparent; color: inherit; padding: 0 var(--space-4);
  font: var(--type-summary-font-weight) var(--type-summary-font-size)/var(--type-summary-line-height) var(--type-summary-font-family);
  text-overflow: ellipsis;
}
.where-field input::placeholder { color: inherit; opacity: 0.7; }
.where-field input::-webkit-search-cancel-button { display: none; }
.where-field input:focus { outline: none; border-bottom-width: 3px; margin-bottom: -1px; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--space-8)); z-index: 1;
  list-style: none; margin: 0; padding: var(--space-4) 0;
  background: var(--page-background); color: var(--page-chrome); box-shadow: var(--shadow);
}
.suggest button {
  appearance: none; background: none; border: 0; color: inherit; cursor: pointer; width: 100%;
  display: flex; justify-content: space-between; gap: var(--space-20); text-align: left;
  font: var(--type-summary-font-weight) var(--type-summary-font-size)/var(--type-summary-line-height) var(--type-summary-font-family); padding: var(--space-8) var(--space-12);
}
.suggest button:hover, .suggest button.active { text-decoration: underline; text-underline-offset: 4px; }
.suggest small { opacity: 0.75; font: var(--type-small-font-weight) var(--type-small-font-size)/var(--type-small-line-height) var(--type-small-font-family); white-space: nowrap; }

/* ---------- card ---------- */
.band {
  position: relative;
  background: var(--card-background);
  color: var(--card-text);
  box-shadow: var(--shadow);
  padding: var(--card-padding);
}
.band > .in { display: flex; flex-direction: column; gap: var(--card-section-gap); }

.main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.action { display: flex; align-items: center; min-width: 0; }
.band.tall { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }

.icon { width: var(--icon-size-large); height: var(--icon-size-large); display: block; flex: none; color: var(--card-icon); }

/* Sun glow look (default; Figma Page 3, B): the card's sky colour lit by a glow from the weather
   icon, its radius growing with the hours of sun (--sun, set per card). Flat look: card.background. */
html[data-look="gradient"] .band, html[data-look="gradient"] .strip {
  background-color: var(--card-sky-mid);
  color: var(--card-glow-ink);
  --glow: radial-gradient(circle calc(140px + var(--sun, 0) * 115px) at var(--glow-x, calc(var(--card-padding) + var(--icon-size-large) / 2)) var(--glow-y, calc(var(--card-padding) + var(--icon-size-large) / 2)),
    var(--timeline-sun-3), var(--timeline-sun-2) 30%,
    color-mix(in srgb, var(--timeline-sun-1) 55%, transparent) 65%, transparent);
}
html[data-look="gradient"] .lit { background-image: var(--glow); }
/* Night in the gradient look (Figma "After sunset · gradient"): the night radial gradient
   (card.gradient: Lunatic Lynx → Chilli → Galactic Compass → Raven), darkened from the moon icon. */
html[data-look="gradient"] .band[data-weather="night"], html[data-look="gradient"] .strip[data-weather="night"] {
  background-image:
    radial-gradient(circle 1520px at var(--glow-x, calc(var(--card-padding) + var(--icon-size-large) / 2)) var(--glow-y, calc(var(--card-padding) + var(--icon-size-large) / 2)),
      var(--gradient-raven), color-mix(in srgb, var(--gradient-galactic-compass) 90%, transparent) 30%,
      color-mix(in srgb, var(--gradient-chilli-con-carne) 55%, transparent) 65%, transparent),
    var(--card-gradient);
}
html[data-look="gradient"] .band .icon, html[data-look="gradient"] .strip .icon { color: var(--card-glow-ink); }

/* Title row: name + small tag (date or canton), bottoms aligned, tag raised by date-inset. */
.title { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: var(--card-inline-gap); max-width: 100%; }
.band h1, .band h2 { margin: 0; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.band h1 { margin-block: var(--space-4) var(--space-8); }
.tag { text-transform: uppercase; padding-bottom: var(--card-date-inset); white-space: nowrap; }
.sub { margin: 0; }
.times { margin: var(--space-24) 0 0; padding: 0; list-style: none; }
.meta { margin: var(--space-24) 0 0; }
.meta:empty { display: none; }

/* Action: "→ take me somewhere sunny thursday" */
.go {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  color: inherit; text-align: left; cursor: pointer; text-decoration: none;
}
.go u { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.12em; }
.go:hover u { text-decoration-thickness: 3px; }
.go[disabled] { opacity: 0.6; cursor: progress; }

.small-link {
  appearance: none; background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 3px;
}

/* distance choice on the "somewhere sunny" header */
.ranges { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin: var(--space-24) 0 0; }
.ranges button {
  appearance: none; background: none; border: 0; padding: var(--space-4) 0; cursor: pointer;
  color: inherit; font: var(--type-summary-font-weight) var(--type-summary-font-size)/var(--type-summary-line-height) var(--type-summary-font-family); opacity: 0.75;
}
.ranges button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ranges button:hover { opacity: 1; }

.status { margin: var(--space-24) 0 0; max-width: 34ch; min-height: 1.2em; }
.status code { font-size: 0.9em; background: color-mix(in srgb, currentColor 18%, transparent); padding: 1px 6px; border-radius: 6px; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

/* ---------- strips (card orientation=strip): full width, stacked under the header ---------- */
.strips { position: fixed; z-index: 20; top: var(--header); left: 0; right: 0; height: 0; }
.strip {
  position: absolute; left: 0; right: 0; top: 0; height: var(--strip);
  display: flex; align-items: center; gap: var(--strip-gap);
  padding: var(--strip-padding-block) var(--card-padding);
  background: var(--card-background);
  color: var(--card-text);
  box-shadow: var(--shadow);
  cursor: pointer; visibility: hidden; opacity: 0;
  will-change: transform, opacity;
}
.strip.on { visibility: visible; }
/* At the end of the page a half-done strip settles with a short fade instead of staying half-faded. */
.settled .strip.on, .settled .band > .in { transition: opacity 0.2s ease; }
.strip .icon { width: var(--icon-size-medium); height: var(--icon-size-medium); }
.strip { --strip-pad: var(--card-padding); padding-left: var(--strip-pad); --glow-x: calc(var(--strip-pad) + var(--icon-size-medium) / 2); --glow-y: 50%; }
.strip .label {
  font: var(--type-date-font-weight) var(--type-date-font-size)/var(--type-date-line-height) var(--type-date-font-family);
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; gap: var(--card-inline-gap); min-width: 0;
}
.strips.live { pointer-events: none; }
.strips.live .strip.on { pointer-events: auto; }

/* ---------- footer: at the bottom of the screen on short pages, after the content otherwise ---------- */
.credit {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8) var(--space-24);
  padding: var(--chrome-inset) var(--chrome-inset) calc(var(--chrome-inset) + env(safe-area-inset-bottom, 0px));
  background: var(--page-background);
  color: var(--page-chrome);
  font: var(--type-small-font-weight) var(--type-small-font-size)/var(--type-small-line-height) var(--type-small-font-family);
  transition: background-color 0.4s ease;
}
.credit a { color: inherit; text-underline-offset: 2px; }
/* Sync button before the forecast credits: loads the newest forecast run. */
.credit .credits { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-8); }
.refresh { appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; display: grid; }
.refresh svg { width: var(--icon-size-small); height: var(--icon-size-small); }
.credit.loading .refresh svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 719px) {
  /* Phones: "Made with SAD" and the switch on one line, the essential credits under them. */
  .credit { flex-direction: column; align-items: flex-start; gap: var(--space-8); padding-block: var(--space-12) calc(var(--space-12) + env(safe-area-inset-bottom, 0px)); }
  .credit .credits { justify-content: flex-start; }
  .credit .run, .refresh { display: none; }
}

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  /* card orientation=horizontal: main fills, action fixed on the right, centred. */
  .band > .in { display: grid; grid-template-columns: minmax(0, 1fr) var(--action-width); gap: 0; align-items: center; }
  .band > .in > .main:only-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  /* Desktop frames: header large (logo 64) at the top; 988px column; panel behind it from 206px.
     The location field and the strips' titles line up with the column. */
  :root { --header-large: var(--layout-header-large); }
  .top { grid-template-columns: minmax(0, 1fr) var(--column) minmax(0, 1fr); padding: 0; }
  .home-link { --logo: var(--icon-size-large); justify-self: start; margin-left: var(--chrome-inset); }
  .where-field, .back-link { grid-column: 2; }
  /* Field and gear share the card column: underline to 946px, gear at the column's right end. */
  .where-field { margin-right: calc(var(--icon-size-medium) + var(--space-8)); grid-row: 1; }
  .gear { grid-column: 2; grid-row: 1; justify-self: end; }
  .settings { right: calc(50% - var(--column) / 2); }
  .scrolled .home-link { --logo: var(--icon-size-medium); }
  main { width: var(--column); margin-inline: auto; }
  /* Panel: the column plus one gutter left, right and below, starting one gutter below the first card's top. */
  main::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: calc(var(--header-large) + var(--layout-gutter));
    left: calc(-1 * var(--layout-gutter)); right: calc(-1 * var(--layout-gutter));
    bottom: var(--layout-footer-gap);   /* = one gutter below the last card */
    background: var(--page-panel);
  }
  main { padding-bottom: calc(var(--layout-gutter) + var(--layout-footer-gap)); }
  .strip { --strip-pad: calc((100% - var(--column)) / 2 - var(--icon-size-medium) - var(--strip-gap)); }
}

@media (prefers-reduced-motion: no-preference) {
  .band { animation: rise 0.45s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .top, .home-link { transition: none; }
}