:root {
  --page: #1e1e1e;
  --card: #2b2d2a;
  --stroke: rgba(255, 255, 255, 0.06);
  --hi: #f4f6f2;
  --soft: #a7b8a0;
  --faint: #6e7a66;
  --gold: #ffc24d;
  --rain: #598fff;
  --font: 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing + radius */
  --pad: 18px;          /* page horizontal inset — used everywhere */
  --card-pad: 16px;
  --r-card: 14px;
  --r-pill: 12px;

  /* Type scale */
  --fs-hero: 1.75rem;   /* feels-like number */
  --fs-h1: 1.3rem;      /* app title */
  --fs-zone: 1.15rem;   /* zone name / section title */
  --fs-lg: 0.9375rem;   /* 15 — summary headline */
  --fs-md: 0.875rem;    /* 14 — meta line */
  --fs-sm: 0.8125rem;   /* 13 — sun times, summary sub */
  --fs-xs: 0.75rem;     /* 12 — floor: labels, weekday */
  --fs-axis: 0.6875rem; /* 11 — timeline axis ONLY (exempt from floor) */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--page);
  color: var(--hi);
  line-height: 1.4;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--soft); }

.site-header {
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad) 8px;
}
.site-header h1 {
  margin: 0; font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.logo-ico { color: #4a9e5e; font-size: 1.25rem; }
.refresh {
  background: none; border: none; color: var(--soft); font: inherit; font-size: var(--fs-sm);
  cursor: pointer; padding: 4px; display: inline-flex; gap: 6px; align-items: center;
  transition: transform .12s var(--ease-out);
}
.refresh:active { transform: scale(0.94); }
.refresh .ph { font-size: 1rem; }

/* Phosphor icons */
i[class^="ph"], i[class*=" ph"] { line-height: 1; vertical-align: -0.05em; }
.sun .ic-sun { color: var(--gold); }
.sun .ic-moon { color: var(--soft); }
.wx-icon { font-size: 1.5rem; line-height: 1; display: inline-flex; }
.meta-line .rn .ph { color: var(--rain); }
.meta-line .hum .ph { vertical-align: -0.08em; }

/* Day selector */
.day-nav {
  max-width: 560px; margin: 0 auto;
  display: flex; gap: 6px; overflow: hidden; padding: 6px var(--pad) 4px;
}
.day-pill {
  flex: 1 1 0; min-width: 0; background: var(--card); border: 1px solid var(--stroke);
  border-radius: var(--r-pill); padding: 8px 2px 7px; cursor: pointer; text-align: center;
  color: var(--soft); font: inherit;
  transition: background .14s var(--ease-out), border-color .14s var(--ease-out), transform .12s var(--ease-out);
}
.day-pill:active { transform: scale(0.97); }
.day-pill .dow { font-size: var(--fs-xs); font-weight: 500; display: block; }
.day-pill .dnum { font-size: 0.9375rem; font-weight: 600; color: var(--hi); display: block; margin-top: 1px; }
.pill-dot { display: block; width: 6px; height: 6px; border-radius: 50%; margin: 5px auto 0; }
.day-pill.weekend .dow { color: var(--gold); }
.day-pill.active { background: #3a3d39; border-color: rgba(255, 255, 255, 0.16); }
.day-pill.active .dow { color: var(--hi); }

/* Section header (day + sun) */
.section-head {
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px var(--pad) 0; gap: 12px;
}
.section-head .day-title { font-size: var(--fs-zone); font-weight: 600; }
.section-head .day-title .sub { color: var(--soft); font-weight: 400; font-size: var(--fs-sm); margin-left: 6px; }
.section-head .sun { color: var(--soft); font-size: var(--fs-sm); white-space: nowrap; }

/* Top-of-page day summary */
.day-summary {
  max-width: 560px; margin: 0 auto; padding: 10px var(--pad) 2px;
  display: flex; align-items: center; gap: 12px;
}
.day-summary .score-badge {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #10130f; font-weight: 700; font-size: 1.05rem;
}
.day-summary .summary-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.day-summary .summary-text strong { font-size: var(--fs-lg); font-weight: 600; }
.day-summary .summary-text span { font-size: var(--fs-sm); color: var(--soft); }

main { max-width: 560px; margin: 0 auto; padding: 12px var(--pad) 32px; }
.loading { text-align: center; color: var(--faint); padding: 50px 0; }
.error { text-align: center; color: #e5825a; padding: 40px 16px; }

/* Zone card */
.zone {
  background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-card);
  padding: var(--card-pad) var(--card-pad) 14px; margin-bottom: 12px;
}
.zone-head { display: flex; align-items: center; gap: 12px; }
.zone-head .left { flex: 1; min-width: 0; }
.zone-name { font-size: var(--fs-zone); font-weight: 600; margin: 0 0 5px; letter-spacing: -0.01em; }
.temp-row { display: flex; align-items: center; gap: 9px; }
.feels { font-size: var(--fs-hero); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.feels-meta { font-size: var(--fs-xs); color: var(--soft); line-height: 1.2; }
.feels-meta .lbl { color: var(--faint); font-weight: 500; letter-spacing: 0.06em; }

/* Niceness arc */
.arc { width: 40px; height: 40px; flex: 0 0 auto; }

/* Timeline */
.timeline { margin: 12px 0 0; }
.timeline svg { width: 100%; height: auto; display: block; }
.axis { display: flex; justify-content: space-between; color: var(--faint); font-size: var(--fs-axis); margin-top: 1px; }

/* Rain + humidity on one line */
.meta-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; font-size: var(--fs-md); font-weight: 500;
}
.meta-line .rn { color: var(--rain); }
.meta-line .hum { color: var(--soft); }
.meta-line .hum .val { font-weight: 600; }
.meta-line .hum .word { color: var(--soft); margin-left: 3px; }

.site-footer { text-align: center; padding: 16px 16px 36px; color: var(--faint); font-size: var(--fs-xs); }
.site-footer a { color: var(--faint); }