:root {
    --bg-top: #1a0b2e;
    --bg-mid: #4a1942;
    --bg-bot: #f26c4f;
    --bg-glow: #ffb347;
    --card: rgba(20, 10, 35, 0.55);
    --card-border: rgba(255, 200, 150, 0.18);
    --text: #fff6e8;
    --text-dim: rgba(255, 246, 232, 0.72);
    --text-faint: rgba(255, 246, 232, 0.5);
    --accent: #ffb347;

    /* Typography system ------------------------------------------------ */
    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* Tracking (letter-spacing) presets */
    --tracking-tighter: -0.03em;
    --tracking-tight:   -0.018em;
    --tracking-normal:  0;
    --tracking-wide:    0.06em;
    --tracking-wider:   0.14em;
  }
  * { box-sizing: border-box; }
  /* Disable iOS double-tap-to-zoom page-wide. Pinch-to-zoom still works.
     Applying at html level so it covers disabled elements and any container
     a tap might fall through to — a disabled button's tap can otherwise
     bubble up and trigger the page's default zoom gesture. */
  html { touch-action: manipulation; }
  button, select, a, summary,
  .arrow-btn, .day-chip, .chip-best-clickable,
  .compare-row, .day-row,
  .compass-cell, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
  html, body { margin: 0; padding: 0; min-height: 100%; }
  body {
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "ss02", "ss03", "cv11";  /* Geist's stylistic sets */
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    background:
      radial-gradient(ellipse at 50% 110%, var(--bg-glow) 0%, transparent 45%),
      linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    /* Honour iOS safe areas (notch top, home indicator bottom) when installed as PWA */
    padding:
      max(16px, env(safe-area-inset-top, 0))
      max(20px, env(safe-area-inset-right, 20px))
      max(40px, env(safe-area-inset-bottom, 40px))
      max(20px, env(safe-area-inset-left, 20px));
    -webkit-font-smoothing: antialiased;
    transition: background 0.8s ease;
  }
  @media (max-width: 540px) {
    body { padding: max(12px, env(safe-area-inset-top, 0)) 12px max(28px, env(safe-area-inset-bottom, 28px)) 12px; }
  }
  /* Split background: cool dawn on the left, warm dusk on the right */
  body {
    background:
      linear-gradient(135deg, rgba(46, 74, 122, 0.35) 0%, transparent 45%),
      radial-gradient(ellipse at 50% 110%, var(--bg-glow) 0%, transparent 45%),
      linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%);
  }
  .stars {
    position: fixed; inset: 0;
    background-image:
      radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 42% 22%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 67% 12%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 81% 27%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 55% 6%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 90% 18%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 7% 32%, #fff 50%, transparent 51%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
  }
  .wrap { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
  header { text-align: center; margin-bottom: 22px; }
  h1 {
    font-size: clamp(26px, 4.6vw, 40px);
    margin: 0 0 8px;
    letter-spacing: var(--tracking-tighter);
    font-weight: 600;
    line-height: 1.05;
  }
  .sub {
    color: var(--text-dim);
    font-size: 14px;
    letter-spacing: var(--tracking-normal);
    margin: 0;
    font-weight: 400;
  }

  .controls {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 14px 16px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    margin-bottom: 18px;
  }
  /* Section label above the date strip — matches the "Select location" title
     pattern so both controls share a consistent heading style (centered). */
  .controls-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    letter-spacing: -0.015em;
    margin: 0 0 12px;
    text-align: center;
  }
  .detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }
  @media (max-width: 760px) {
    .detail-grid { grid-template-columns: 1fr; }
  }
  .detail-grid .tonight { margin-bottom: 0; padding: 22px 20px; }
  .detail-grid .tonight.sunrise { border-top: 3px solid #ffd56b; }
  .detail-grid .tonight.sunset  { border-top: 3px solid #ff8c5e; }
  /* When only one head card renders (eg. today's sunrise has passed the
     grace window and is hidden), center the remaining card rather than
     leaving it alone in a half-filled grid. */
  .detail-single {
    max-width: 560px;
    margin: 0 auto 20px;
  }
  .detail-single .tonight { margin-bottom: 0; padding: 22px 20px; }
  .detail-single .tonight.sunrise { border-top: 3px solid #ffd56b; }
  .detail-single .tonight.sunset  { border-top: 3px solid #ff8c5e; }
  .event-tag {
    display: inline-block;
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.18em; font-weight: 600;
    padding: 3px 8px; border-radius: 4px;
    margin-bottom: 6px;
  }
  .event-tag.sunrise { background: rgba(255,213,107,0.18); color: #ffd56b; }
  .event-tag.sunset  { background: rgba(255,140,94,0.2);   color: #ffb38a; }
  .detail-grid .score-circle { width: 100px; height: 100px; }
  .detail-grid .score-circle svg { width: 100px; height: 100px; }
  .detail-grid .score-num .n { font-size: 32px; }
  .detail-grid .score-num .max { font-size: 12px; }
  .detail-grid .verdict { font-size: 22px; }
  .detail-grid .verdict-desc { font-size: 14px; }
  .detail-grid .factors {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px; padding-top: 14px;
  }
  .detail-grid .factor { padding: 8px 10px; }
  .detail-grid .factor-value { font-size: 13px; }
  .detail-grid .factor-label { font-size: 10px; }

  /* Compass rose */
  .compass-block {
    flex-shrink: 0;
    text-align: center;
    width: 120px;     /* locked so the text label below can't widen it */
  }
  .compass-rose {
    position: relative;
    width: 110px; height: 110px;
    margin: 0 auto;
  }
  .compass-rose svg { display: block; width: 100%; height: 100%; }
  .compass-rose .compass-center-score {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    pointer-events: none;
  }
  .compass-rose .compass-center-score .best-dir {
    font-size: 11px; opacity: 0.85;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 4px rgba(0,0,0,0.7);
  }
  .compass-rose .compass-center-score .best-val {
    font-size: 16px; font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,0.7);
  }
  .compass-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
    line-height: 1.3;
    word-wrap: break-word;
    /* Locked height so compass-block has identical height in all view states —
       compass rose above it never shifts when you tap a direction. */
    height: 14px;
  }
  .sun-marker { fill: #ffe188; stroke: #fff; stroke-width: 0.8; }
  .wedge:hover { opacity: 1 !important; }
  .wedge-centre:hover { fill: rgba(0,0,0,0.7); }

  /* Same box model in both states (padding + transparent border) so the score
     row below doesn't shift vertically when toggling direction view. Only the
     visible styling changes. */
  .view-label {
    font-size: 13px;
    color: var(--text-dim);
    margin: 4px 0 10px;
    line-height: 1.35;
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
  }
  .view-label strong { color: var(--text); font-weight: 500; }
  .view-label.direction {
    color: var(--accent);
    font-weight: 500;
    border-color: rgba(255,179,71,0.35);
    background: rgba(255,179,71,0.08);
  }
  .view-label.direction strong { color: var(--accent); }

  /* Weather block — sits to the right of the compass rose, mirroring the score circle */
  .weather-block {
    flex-shrink: 0;
    text-align: center;
    width: 100px;
  }
  .weather-icon {
    width: 64px; height: 64px;
    margin: 0 auto 4px;
  }
  .weather-icon svg { width: 100%; height: 100%; display: block; }
  .weather-temp {
    font-family: var(--font-mono);
    font-size: 24px; font-weight: 500;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
  .weather-label {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    line-height: 1.2;
  }
  .detail-grid .weather-block { width: 80px; }
  .detail-grid .weather-icon { width: 48px; height: 48px; }
  .detail-grid .weather-temp { font-size: 20px; }
  .detail-grid .weather-label { font-size: 10px; }
  .detail-grid .compass-block { width: 104px; }
  .detail-grid .compass-rose { width: 96px; height: 96px; }
  .detail-grid .score-row { gap: 12px; }
  /* Center the score row so when the three blocks fit, they sit nicely.
     Align all three children to the top so heights of sub-labels don't throw
     the visual row out of line. */
  .score-row { justify-content: center; align-items: flex-start; }
  .score-row > * { margin-top: 0; }
  @media (max-width: 540px) {
    .weather-block { width: 90px; }
    .weather-icon { width: 56px; height: 56px; }
  }
  .compass-cell-text { font: 600 8.5px var(--font-mono); fill: #fff; letter-spacing: 0.04em; }
  .compass-cell-score { font: 600 9.5px var(--font-mono); fill: #fff; letter-spacing: -0.02em; }

  .day-strip-caption {
    font-size: 12px;
    color: var(--text-dim);
    margin: 10px 4px 2px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    text-align: center;
  }
  .day-strip-caption .caption-hl {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* Both icons in warm hues — both events produce warm light when skies
     cooperate. Slight differentiation (gold vs orange) keeps them distinct. */
  .day-strip-caption .caption-sunrise { color: #ffd56b; }
  .day-strip-caption .caption-sunset  { color: #ff8c5e; }
  /* Colour-metaphor legend — the highlighted words demonstrate the gradient
     they describe, so the explanation reads at a glance. */
  .day-strip-caption .caption-legend {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-faint);
  }
  .day-strip-caption .cap-warm {
    color: #ffb347;
    font-weight: 500;
  }
  .day-strip-caption .cap-cool {
    color: #cfd8dc;
    font-weight: 500;
  }
  @media (max-width: 540px) {
    .day-strip-caption { font-size: 11px; margin-bottom: 8px; }
  }
  .day-strip-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  .day-strip-wrap .arrow-btn {
    align-self: center;
  }
  .day-strip-wrap .arrow-btn:disabled {
    opacity: 0.3; cursor: not-allowed;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
  }
  .day-strip-wrap .arrow-btn:disabled:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
  }
  .day-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 6px;
    scrollbar-width: none;   /* Hide scrollbar — arrows handle navigation */
    flex: 1;
  }
  .day-strip::-webkit-scrollbar { display: none; }
  .day-chip {
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    text-align: center;
    min-width: 64px;
    line-height: 1.2;
    transition: all 0.2s;
  }
  .day-chip:hover { background: rgba(255,255,255,0.12); }
  .day-chip.active {
    background: rgba(255, 179, 71, 0.18);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
    font-weight: 600;
  }
  .day-chip { min-width: 110px; padding: 8px 10px; letter-spacing: var(--tracking-tight); }
  .day-chip .label { display: block; font-weight: 500; font-size: 14px; letter-spacing: -0.01em; }
  .day-chip .date { display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0; font-weight: 500; }
  .day-chip .chip-bests {
    display: block;
    margin-top: 5px; padding-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .day-chip .chip-best { font-family: var(--font-mono); }
  .day-chip.active .chip-bests { border-top-color: rgba(255,255,255,0.18); }
  .chip-best-clickable {
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 4px;
    margin: 0 -4px;
    transition: background 0.12s;
  }
  .chip-best-clickable:hover { background: rgba(255, 255, 255, 0.12); }
  .chip-best .load-dots {
    letter-spacing: 2px;
    color: var(--text-faint);
    animation: pulseDots 1.4s ease-in-out infinite;
  }
  @keyframes pulseDots {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.8;  }
  }
  .day-chip .chip-best {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
  }
  .day-chip .chip-best.loading-fallback { opacity: 0.55; }

  .tonight, .upcoming, .manual-card, .error-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 24px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    margin-bottom: 20px;
  }
  .tonight { padding: 28px 24px; }
  .tonight-head {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
  }
  .tonight-label {
    font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    font-size: 11px; color: var(--text-faint);
    font-weight: 500;
  }
  .sunset-time {
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: var(--tracking-tight);
  }
  .sunset-time strong { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; }
  .score-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .score-circle { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
  .score-circle svg { transform: rotate(-90deg); }
  .score-circle .track { stroke: rgba(255,255,255,0.1); }
  .score-circle .fill { stroke-linecap: round; transition: stroke-dashoffset 1s ease, stroke 0.6s; }
  .score-num {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-weight: 600;
    font-family: var(--font-mono);
  }
  .score-num .n { font-size: 44px; line-height: 1; letter-spacing: -0.04em; }
  .score-num .max { font-size: 13px; color: var(--text-faint); margin-top: 3px; font-weight: 500; letter-spacing: 0; }
  .verdict-block { flex: 1; min-width: 200px; }
  .verdict { font-size: 28px; font-weight: 600; letter-spacing: var(--tracking-tighter); margin: 0 0 8px; line-height: 1.05; }
  .verdict-desc { color: var(--text-dim); font-size: 15px; line-height: 1.55; margin: 0; letter-spacing: var(--tracking-tight); }

  .factors {
    margin-top: 22px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
  }
  .factor { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 10px 12px; }
  .factor-label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--text-faint);
    margin-bottom: 4px; display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-weight: 500;
  }
  .factor-label .weight { opacity: 0.6; font-size: 10px; letter-spacing: -0.01em; }
  .factor-hint {
    font-size: 10.5px;
    color: var(--text-faint);
    letter-spacing: -0.005em;
    margin-bottom: 3px;
    line-height: 1.35;
  }
  .factor-value { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
  .factor-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); margin-top: 6px; overflow: hidden; }
  .factor-bar > span { display: block; height: 100%; background: linear-gradient(to right, #ff6b6b, #ffb347, #ffd56b); border-radius: 2px; }

  .upcoming h2 {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--text-faint);
    margin: 0 0 14px; font-weight: 600;
    font-family: var(--font-mono);
  }
  .day-row {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    align-items: center; padding: 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06); gap: 14px;
    cursor: pointer; transition: background 0.15s;
    border-radius: 8px;
  }
  .day-row:hover { background: rgba(255,255,255,0.04); }
  .day-row:last-child { border-bottom: none; }
  .day-row.active {
    background: rgba(255, 179, 71, 0.10);
    box-shadow: 0 0 0 1px var(--accent) inset;
  }
  .day-name { font-weight: 500; font-size: 14px; letter-spacing: -0.015em; }
  .day-event {
    display: grid;
    grid-template-columns: 56px 1fr 32px;
    align-items: center; gap: 8px;
  }
  .day-time {
    color: var(--text-dim); font-size: 12px;
    font-family: var(--font-mono); font-weight: 500;
    letter-spacing: -0.015em;
  }
  .day-bar {
    height: 6px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden; position: relative;
  }
  .day-bar > span { display: block; height: 100%; border-radius: 3px; transition: width 1s ease; }
  .day-score {
    text-align: right; font-weight: 500;
    font-size: 14px;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
  }
  .upcoming-header {
    display: grid;
    grid-template-columns: 100px 1fr 1fr;
    gap: 14px; padding: 0 8px 6px;
    font-size: 10px; text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--text-faint);
    font-family: var(--font-mono); font-weight: 500;
  }
  .upcoming-header .uh-sunrise { color: #ffd56b; padding-left: 6px; }
  .upcoming-header .uh-sunset  { color: #ffb38a; padding-left: 6px; }
  @media (max-width: 540px) {
    .day-row { grid-template-columns: 80px 1fr 1fr; gap: 8px; }
    .upcoming-header { grid-template-columns: 80px 1fr 1fr; gap: 8px; }
    .day-event { grid-template-columns: 46px 1fr 28px; gap: 6px; }
    .day-time { font-size: 11px; }
  }

  .mountain-note {
    margin-top: 16px; padding: 12px 14px;
    background: rgba(255,179,71,0.08);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    font-size: 13.5px; line-height: 1.55;
    color: var(--text-dim);
    letter-spacing: -0.01em;
  }
  .mountain-note strong { color: var(--text); font-weight: 600; letter-spacing: -0.015em; }

  /* Arrival callout — above today's sunrise/sunset detail card to help
     photographers plan. Compact, pill-like appearance. */
  .arrival-callout {
    margin: 10px 0 14px;
    padding: 10px 14px;
    background: rgba(255, 246, 232, 0.06);
    border: 1px solid rgba(255, 246, 232, 0.12);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--text-dim);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    letter-spacing: -0.005em;
  }
  .arrival-callout strong {
    color: var(--text);
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
  }
  .arrival-callout .callout-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-faint);
    font-weight: 500;
  }
  .arrival-callout .callout-sub {
    color: var(--text-faint);
    font-size: 12.5px;
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
  }
  /* Tier classes (epic / good / fair / low) set the colour treatment by
     score, so the callout's tone matches reality — a bright pulse for a
     true epic event, a muted grey for a flat forecast. */
  .arrival-callout.tier-epic {
    background: rgba(255, 77, 109, 0.12);
    border-color: rgba(255, 77, 109, 0.38);
    color: #ffe0e5;
  }
  .arrival-callout.tier-epic strong { color: #ff8595; font-family: var(--font-sans); letter-spacing: -0.015em; }
  .arrival-callout.tier-good {
    background: rgba(111, 217, 143, 0.10);
    border-color: rgba(111, 217, 143, 0.28);
    color: #d5f0de;
  }
  .arrival-callout.tier-good strong { color: #b8eecb; font-family: var(--font-sans); letter-spacing: -0.015em; }
  .arrival-callout.tier-fair {
    background: rgba(255, 246, 232, 0.05);
    border-color: rgba(255, 246, 232, 0.10);
    color: var(--text-dim);
  }
  .arrival-callout.tier-low {
    background: rgba(255, 246, 232, 0.03);
    border-color: rgba(255, 246, 232, 0.07);
    color: var(--text-faint);
    opacity: 0.9;
  }
  .arrival-callout.tier-low strong { color: var(--text-dim); }
  /* Urgent state only adds a subtle tone-lift when the tier already warrants it */
  .arrival-callout.tier-epic.urgent { border-color: rgba(255, 77, 109, 0.55); }
  .arrival-callout.tier-good.urgent {
    background: rgba(255, 179, 71, 0.10);
    border-color: rgba(255, 179, 71, 0.32);
  }
  .arrival-callout.tier-good.urgent strong { color: var(--accent); }
  /* Live dot: animated pulse for good/epic tiers, static muted dot otherwise */
  .arrival-callout .callout-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6fd98f;
    box-shadow: 0 0 0 0 rgba(111, 217, 143, 0.55);
    animation: pulseDot 1.6s ease-out infinite;
    flex-shrink: 0;
  }
  .arrival-callout.tier-epic .callout-pulse {
    background: #ff6b85;
    animation-name: pulseDotEpic;
  }
  .arrival-callout .callout-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-faint);
    opacity: 0.55;
    flex-shrink: 0;
  }
  @keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(111, 217, 143, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(111, 217, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 217, 143, 0); }
  }
  @keyframes pulseDotEpic {
    0%   { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.65); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 77, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); }
  }

  .compare-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    margin-bottom: 18px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
  }
  .compare-summary {
    list-style: none;
    display: flex; align-items: center;
    gap: 10px; padding: 10px 14px;
    cursor: pointer;
    user-select: none;
  }
  .compare-summary.compare-simple {
    padding: 12px 16px;
  }
  /* Look-ahead tip — the single most actionable summary on the page.
     Two lines (one per event type) surfacing the next strong forecast across
     all locations. Subtle container, score badge carries the colour weight. */
  .forecast-tip {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .forecast-tip .tip-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-dim);
    letter-spacing: -0.005em;
    line-height: 1.4;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin: -2px -2px;
    border-radius: 8px;
    transition: background 0.12s;
  }
  .forecast-tip .tip-line strong {
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  /* Clickable variant — tap or keyboard-activate to jump to that event's detail */
  .forecast-tip .tip-link {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .forecast-tip .tip-link:hover {
    background: rgba(255, 246, 232, 0.05);
  }
  .forecast-tip .tip-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .forecast-tip .tip-link:active { transform: scale(0.995); }
  .forecast-tip .tip-chevron {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 18px;
    line-height: 1;
    padding-left: 6px;
    transition: transform 0.15s, color 0.15s;
  }
  .forecast-tip .tip-link:hover .tip-chevron {
    color: var(--accent);
    transform: translateX(2px);
  }
  .forecast-tip .tip-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
  }
  .forecast-tip .tip-icon-sunrise { color: #ffd56b; }
  .forecast-tip .tip-icon-sunset  { color: #ff8c5e; }
  /* Inline verdict word — coloured to the band (Excellent / Spectacular etc.)
     so the quality reads as part of the sentence, not a separate badge. */
  .forecast-tip .tip-verdict {
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .forecast-tip .tip-score {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-faint);
    letter-spacing: -0.01em;
    margin-left: 2px;
  }
  /* Date next to the day name — mono & muted so "Wed" reads primary and the
     date "Apr 29" reads as disambiguating context rather than duplicate info. */
  .forecast-tip .tip-date {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-dim);
    font-size: 12.5px;
    margin-left: 4px;
    letter-spacing: -0.01em;
  }
  .forecast-tip .tip-fallback {
    color: var(--text-faint);
    font-size: 12.5px;
  }
  .forecast-tip .tip-none {
    color: var(--text-faint);
    font-style: italic;
    font-size: 12.5px;
  }
  @media (max-width: 480px) {
    .forecast-tip { padding: 10px 12px; }
    .forecast-tip .tip-line { font-size: 12.5px; gap: 6px; }
    .forecast-tip .tip-score { font-size: 11px; }
  }

  /* Date banner above the detail cards — now carries the selected location
     so users can always see which day AND which spot they're viewing. */
  .date-banner {
    text-align: center;
    margin-bottom: 14px;
  }
  .date-banner-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-weight: 500;
  }
  /* Neutral, not accent-coloured — the location is metadata, not a score.
     Same visual hierarchy via weight + size; no warm hue that would falsely
     imply drama when the actual forecast is flat. */
  .date-banner .date-line-loc {
    color: var(--text);
    letter-spacing: 0.06em;
    text-transform: none;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
  }
  @media (max-width: 480px) {
    .date-banner-inner { font-size: 11px; letter-spacing: 0.12em; }
    .date-banner .date-line-loc { font-size: 12px; }
  }

  /* Compare card summary — two-row layout. Row 1: centered "Select location"
     label matching the "Select day" pattern. Row 2: current-location pill
     + caret on either side. Whole summary is still a single click-target. */
  .compare-summary.compare-simple {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 16px;
  }
  .compare-simple-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    letter-spacing: -0.015em;
    text-align: center;
    margin-bottom: 12px;
  }
  .compare-simple-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
  }
  .compare-simple-title {
    font-weight: 600; font-size: 14px;
    color: var(--text);
    letter-spacing: -0.015em;
    flex-shrink: 0;
  }
  /* Current location pill — shown in the summary row so users can see at a
     glance what they're currently viewing without opening the section. */
  .compare-simple-current {
    flex: 1;
    color: var(--text-dim);
    font-size: 13px;
    letter-spacing: -0.01em;
    font-weight: 500;
    padding: 4px 12px;
    background: rgba(255, 179, 71, 0.12);
    border: 1px solid rgba(255, 179, 71, 0.25);
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: center;
  }
  @media (max-width: 420px) {
    .compare-simple-current { font-size: 12px; padding: 2px 8px; }
    .compare-simple-title { font-size: 13px; }
  }
  .compare-body-caption {
    font-size: 12px;
    color: var(--text-faint);
    letter-spacing: -0.005em;
    padding: 0 14px 10px;
    line-height: 1.4;
  }
  .compare-body-caption strong {
    color: var(--text-dim);
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
  }
  .compare-summary::-webkit-details-marker { display: none; }
  .arrow-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text);
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; padding: 0;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
  }
  .arrow-btn:hover {
    background: rgba(255, 179, 71, 0.15);
    border-color: var(--accent);
  }
  .arrow-btn:active { transform: scale(0.96); }
  .expand-hint {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--text-faint);
    flex-shrink: 0;
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-weight: 500;
  }
  /* (expand-hint-label removed — the caret alone is enough now that selecting
     a location auto-collapses the section.) */
  .expand-hint .caret { transition: transform 0.2s; display: inline-block; }
  .compare-card[open] .expand-hint .caret { transform: rotate(180deg); }
  .compare-body {
    padding: 4px 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 4px;
  }
  .compare-body h3 {
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.15em; color: var(--text-faint);
    margin: 12px 0 10px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; flex-wrap: wrap;
  }
  .compare-body h3 .when {
    color: var(--text-dim); font-size: 11px;
    text-transform: none; letter-spacing: 0;
    font-weight: 500;
  }
  @media (max-width: 500px) {
    .arrow-btn { width: 30px; height: 30px; font-size: 18px; }
    .expand-hint { font-size: 9px; }
  }

  /* Sticky stack — location bar + date selector pinned to viewport top together,
     so both stay one tap away no matter how far down you scroll. */
  .sticky-stack {
    position: sticky;
    top: 8px;
    z-index: 20;
    margin-bottom: 16px;
    background: rgba(20, 10, 35, 0.82);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 8px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  }
  /* Inner card drops its own chrome — the wrapper provides it. */
  .sticky-stack .controls {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 6px 8px;
    margin: 0;
    border-radius: 0;
  }
  /* Thin divider between the two rows — applies to whichever is the second child */
  .sticky-stack > *:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 2px;
    padding-top: 10px;
  }
  /* Reset the old explicit override now that it's nth-child driven */
  .sticky-stack .controls {
    border-top: none;
  }
  .sticky-stack > .controls:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .region-group { margin-bottom: 10px; }
  .region-group:last-child { margin-bottom: 0; }
  .region-label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--text-faint);
    padding: 6px 0 4px; opacity: 0.8;
    font-family: var(--font-mono); font-weight: 500;
  }
  .compare-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 0 8px 6px;
    font-size: 10px; text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--text-faint);
    font-family: var(--font-mono); font-weight: 500;
  }
  .compare-header .h-name { text-align: left; }
  .compare-header .h-sunrise { text-align: center; color: #ffd56b; }
  .compare-header .h-sunset  { text-align: center; color: #ffb38a; }
  .compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px; padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    align-items: center;
  }
  .compare-row:hover { background: rgba(255,255,255,0.05); }
  .compare-row.active {
    background: rgba(255,179,71,0.12);
    outline: 1px solid rgba(255,179,71,0.3);
  }
  .compare-name { font-weight: 500; letter-spacing: -0.015em; }
  .compare-event {
    display: flex; align-items: center;
    gap: 8px;
  }
  .compare-bar {
    flex: 1; height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden;
    min-width: 30px;
  }
  .compare-bar > span {
    display: block; height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
  }
  .compare-score {
    width: 30px; text-align: right;
    font-weight: 600; font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
  }
  .compare-loading { color: var(--text-faint); font-size: 13px; }
  .compare-row.loading { opacity: 0.5; }
  .compare-row.error .compare-score { color: #ffb3b3; font-size: 11px; }
  @media (max-width: 600px) {
    .compare-name { font-size: 13px; }
    .compare-score { width: 26px; font-size: 13px; }
    .compare-event { gap: 6px; }
  }
  .info-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    margin-bottom: 18px;
    overflow: hidden;
  }
  .info-card summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--text-faint);
    font-weight: 600;
    font-family: var(--font-mono);
  }
  .info-card summary::-webkit-details-marker { display: none; }
  .info-card summary::after {
    content: "▾";
    transition: transform 0.2s;
    font-size: 14px;
    opacity: 0.6;
  }
  .info-card[open] summary::after { transform: rotate(180deg); }
  .info-card .info-body {
    padding: 0 20px 20px;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: -0.005em;
  }
  .info-body p { margin: 0 0 12px; }
  .info-body p:last-child { margin-bottom: 0; }
  .info-body strong { color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
  .legend-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 4px 0 16px;
  }
  .legend-row {
    display: grid;
    grid-template-columns: 110px 60px 1fr;
    align-items: center; gap: 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 13px;
  }
  .legend-row .l-label { font-weight: 600; letter-spacing: -0.015em; }
  .legend-row .l-range {
    font-variant-numeric: tabular-nums;
    color: var(--text-faint); font-size: 12px;
    font-family: var(--font-mono); font-weight: 500;
    letter-spacing: -0.01em;
  }
  .legend-row .l-desc { color: var(--text-dim); font-size: 13px; }
  .factor-explainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 8px 0;
  }
  .fx { background: rgba(255,255,255,0.04); padding: 10px 12px; border-radius: 8px; }
  .fx h4 {
    margin: 0 0 4px; font-size: 13px;
    color: var(--text); display: flex; justify-content: space-between;
    font-weight: 600; letter-spacing: -0.015em;
  }
  .fx h4 span { font-size: 11px; color: var(--text-faint); font-weight: 500; font-family: var(--font-mono); letter-spacing: -0.01em; }
  .fx p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }

  footer {
    text-align: center; margin-top: 28px;
    color: var(--text-faint); font-size: 12px;
    letter-spacing: -0.005em;
    font-weight: 400;
  }
  footer a { color: var(--text-dim); text-decoration: none; }
  footer a:hover { color: var(--text); }
  /* Full-viewport loading scene — covers everything including header.
     On iOS Safari, `inset: 0` extends behind the URL bar, which was hiding
     the mountain base on phones. Using `100dvh` sizes to the visible viewport
     (excluding URL bar), with a `100vh` fallback for older browsers. */
  .loading-full {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* Don't set `bottom: 0` here — with both top and bottom set, iOS uses
       the layout viewport which extends behind the URL bar. Rely on height
       alone (dynamic viewport units) so the element hugs the VISIBLE bottom. */
    height: 100vh;  /* fallback for older browsers */
    height: 100svh; /* always smallest viewport — excludes URL bar */
    height: 100dvh; /* prefer dynamic when supported */
    z-index: 9999;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
  }
  .loading-full .sky-bg {
    position: absolute;
    top: 0; left: 0; right: 0;
    /* Extend the SVG 60px below the container so the mountain's painted
       baseline (y=900) is rendered off-screen, clipped by overflow:hidden.
       Any sub-pixel rounding / quirky iOS viewport math still shows mountain
       fill at the visible bottom instead of the orange horizon gradient. */
    bottom: -60px;
    pointer-events: none;
  }
  .loading-full .sky-bg svg {
    width: 100%; height: 100%;
    display: block;
  }
  .loading-full .centrepiece {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 900px;
  }
  .loading-full .bigtitle {
    font-family: var(--font-sans);
    font-size: clamp(38px, 7.2vw, 78px);
    font-weight: 500;
    letter-spacing: -0.035em;
    margin: 0 0 18px;
    color: #fff6e8;
    line-height: 1.02;
    text-shadow: 0 4px 40px rgba(255, 179, 71, 0.3), 0 2px 12px rgba(0, 0, 0, 0.35);
    animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .loading-full .bigsub {
    font-size: clamp(14px, 2.2vw, 20px);
    color: rgba(255, 246, 232, 0.72);
    letter-spacing: -0.005em;
    margin: 0 0 80px;
    font-weight: 400;
    animation: slideUp 0.9s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .loading-full .statustext {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255, 246, 232, 0.5);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    animation: slideUp 1.2s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .loading-dots::after {
    content: '';
    display: inline-block;
    animation: loadingDots 1.4s infinite;
    min-width: 1.5em; text-align: left;
    letter-spacing: 0.15em;
  }
  @keyframes loadingDots {
    0%   { content: '';    }
    25%  { content: '.';   }
    50%  { content: '..';  }
    75%, 100% { content: '...'; }
  }
  .error-card { text-align: center; }
  .error-card h3 { margin: 0 0 8px; font-size: 20px; color: #ffb3b3; }
  .error-card p { color: var(--text-dim); font-size: 14px; margin: 6px 0; line-height: 1.5; }
  .error-card .err-detail {
    margin: 14px auto; max-width: 520px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    background: rgba(0,0,0,0.3);
    padding: 10px 12px; border-radius: 8px;
    color: #ffd9d9; text-align: left; word-break: break-word;
  }
  .btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
  .btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    color: var(--text);
    padding: 10px 18px; border-radius: 10px;
    cursor: pointer; font: inherit;
    text-decoration: none; display: inline-block;
  }
  .btn:hover { background: rgba(255,255,255,0.2); }
  .btn.primary { background: var(--accent); color: #2a1208; border-color: transparent; font-weight: 600; }
  .btn.primary:hover { background: #ffc56a; }

  .manual-card h2 { font-size: 18px; margin: 0 0 6px; font-weight: 600; letter-spacing: -0.025em; }
  .manual-card .sub-text { color: var(--text-dim); font-size: 14px; margin: 0 0 18px; line-height: 1.55; letter-spacing: -0.005em; }
  .manual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
  }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--text-faint);
    font-family: var(--font-mono); font-weight: 500;
  }
  .field input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text);
    padding: 10px 12px; border-radius: 8px;
    font: inherit; font-size: 15px;
  }
  .field input:focus { outline: none; border-color: var(--accent); }
  .field small { color: var(--text-faint); font-size: 11px; }

  @media (max-width: 540px) {
    .day-verdict { display: none; }
    .day-name { width: 80px; }
  }