/* =====================================================================
   styles.css — Sun Score, reimagined in Apple's current design language.
   Full-bleed score-reactive sky bloom + quiet Liquid Glass panels.
   ===================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* sky palette (written by engine.applySky) — sensible defaults */
    --sky-zenith: #16131c;
    --sky-mid: #2a2333;
    --sky-horizon: #6a3a3e;
    --sun-core: #ffd6a0;
    --sun-core-soft: rgba(255,214,160,.55);
    --sun-edge: #e08040;
    --sun-edge-soft: rgba(224,128,64,0);
    --bloom: rgba(246,128,56,.9);
    --bloom-soft: rgba(246,128,56,0);
    --accent: #ffb86e;
    --ray: rgba(255,214,160,.5);
    --ray-soft: rgba(255,214,160,0);
    --glass-tint: rgba(96,52,86,.30);
    --glass-tint-strong: rgba(96,52,86,.52);

    /* pointer position (0..1), updated on move; drives sun reactions */
    --px: 0.5;
    --py: 0.5;
    --pdx: 0px;   /* signed pixel offset of pointer from centre x */

    --text-1: rgba(255,255,255,0.97);
    --text-2: rgba(255,255,255,0.66);
    --text-3: rgba(255,255,255,0.44);
    --hair: rgba(255,255,255,0.16);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sky-fade: 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--text-1);
    min-height: 100dvh;
    background: #0c0a10;
    overflow-x: hidden;
    line-height: 1.46;
    letter-spacing: -0.01em;
    -webkit-tap-highlight-color: transparent;
}

/* ── Sky: fixed full-viewport bloom ─────────────────────────────── */

.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.sky-grad {
    position: absolute; inset: -2px;
    background:
        radial-gradient(140% 78% at calc(50% + var(--pdx) * 0.4) 112%, var(--bloom) 0%, var(--bloom-soft) 46%),
        radial-gradient(120% 62% at 50% 118%, var(--sky-horizon) 0%, transparent 60%),
        linear-gradient(180deg, var(--sky-zenith) 0%, var(--sky-mid) 46%, var(--sky-horizon) 100%);
    transition: background var(--sky-fade);
}

/* soft top vignette keeps the hero legible on bright skies */
.sky-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.20) 100%);
}

.sun-stage { position: absolute; inset: 0; display: block; }
.sun-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* ── Scroll layer ───────────────────────────────────────────────── */

.scroll {
    position: relative; z-index: 1;
    min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center;
    padding-bottom: 56px;
}

/* ── Top bar ────────────────────────────────────────────────────── */

.topbar {
    position: sticky; top: 0; z-index: 50;
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: calc(20px + env(safe-area-inset-top)) 16px 16px;
}

/* glass material — quiet, frosted */
.glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)), var(--glass-tint-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur, 22px)) saturate(155%);
    backdrop-filter: blur(var(--glass-blur, 22px)) saturate(155%);
    border: 0.5px solid var(--hair);
    box-shadow: 0 0.5px 0 rgba(255,255,255,0.22) inset, 0 12px 34px rgba(0,0,0,0.30);
    transition: background var(--sky-fade), box-shadow 0.3s var(--ease);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass { background: rgba(28,24,34,0.92); }
}

/* mode toggle */
.mode-toggle {
    position: relative;
    display: inline-flex; padding: 4px; border-radius: 980px; gap: 0;
}
.mode-thumb {
    position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
    border-radius: 980px;
    background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.12));
    box-shadow: 0 1px 6px rgba(0,0,0,0.28), 0 0.5px 0 rgba(255,255,255,0.4) inset;
    transition: transform 0.42s var(--ease);
}
.mode-toggle[data-mode="sunrise"] .mode-thumb { transform: translateX(100%); }
.mode-btn {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 116px; padding: 9px 18px;
    background: none; border: none; border-radius: 980px; cursor: pointer;
    color: var(--text-3); font-size: 13.5px; font-weight: 590; letter-spacing: -0.01em;
    transition: color 0.3s var(--ease);
}
.mode-btn[aria-selected="true"] { color: var(--text-1); }
.mode-btn svg { width: 15px; height: 15px; opacity: 0.9; }

/* search */
.search-wrap { position: relative; width: 100%; max-width: 440px; }
.search-bar { display: flex; gap: 10px; align-items: center; width: 100%; }
.search-input {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 0 18px; height: 50px; border-radius: 980px;
}
.search-input svg { width: 17px; height: 17px; color: var(--text-3); flex-shrink: 0; }
.search-input input {
    flex: 1; min-width: 0; height: 100%;
    background: none; border: none; outline: none;
    color: var(--text-1); font-size: 17px; font-weight: 400; letter-spacing: -0.01em;
}
.search-input input::placeholder { color: var(--text-3); }

.gps-btn {
    width: 50px; height: 50px; flex-shrink: 0;
    border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: #0a84ff;
    box-shadow: 0 5px 14px rgba(10,132,255,0.34), 0 0.5px 0 rgba(255,255,255,0.4) inset;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.gps-btn svg { width: 21px; height: 21px; }
.gps-btn:hover { background: #2a94ff; transform: scale(1.05); }
.gps-btn:active { transform: scale(0.94); }
.gps-btn.locating svg { animation: gpsspin 1s linear infinite; }
@keyframes gpsspin { to { transform: rotate(360deg); } }

/* search results dropdown */
.search-results {
    position: absolute; top: calc(100% + 9px); left: 0; right: 0;
    list-style: none; border-radius: 20px; overflow: hidden; z-index: 60;
    padding: 6px;
}
.search-results li {
    padding: 13px 16px; border-radius: 14px; cursor: pointer;
    font-size: 15px; color: var(--text-2); letter-spacing: -0.01em;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.search-results li:hover, .search-results li.active { background: rgba(255,255,255,0.12); color: var(--text-1); }
.search-results li .sr-sub { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }

/* ── Main column ────────────────────────────────────────────────── */

main { width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1; }

/* welcome */
.welcome {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    flex: 1; justify-content: center; padding: 56px 24px 120px; gap: 0;
}
.welcome-mark { margin-bottom: 30px; filter: drop-shadow(0 6px 26px rgba(0,0,0,0.4)); }
.welcome h1 {
    font-size: clamp(44px, 9vw, 68px); font-weight: 700; letter-spacing: -0.035em;
    line-height: 1.02; margin-bottom: 12px;
    text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.welcome p.sub { font-size: clamp(18px, 4vw, 23px); color: var(--text-2); font-weight: 400; letter-spacing: -0.012em; margin-bottom: 30px; }
.welcome .hint {
    font-size: 13.5px; color: var(--text-2); font-weight: 500;
    padding: 11px 20px; border-radius: 980px;
}

/* hero */
.hero {
    text-align: center; width: 100%; max-width: 640px;
    padding: 30px 24px 0; display: flex; flex-direction: column; align-items: center;
    animation: rise 0.7s var(--ease) both;
}
.hero .loc {
    font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
    color: var(--text-1); text-shadow: 0 1px 20px rgba(0,0,0,0.3);
    text-wrap: balance;
}
.hero .when { margin-top: 6px; font-size: 15px; color: var(--text-2); font-weight: 400; letter-spacing: -0.01em; }
.hero .countdown { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: -0.01em; transition: color var(--sky-fade); }
.hero .updated { margin-top: 3px; font-size: 12.5px; color: var(--text-3); }
.hero .avg-pill {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-2);
    padding: 4px 11px; border-radius: 980px;
}

.score {
    margin: 14px 0 2px; line-height: 0.9;
    display: inline-flex; align-items: flex-start; justify-content: center;
    cursor: default;
}
.score .num {
    font-size: clamp(118px, 30vw, 200px); font-weight: 700; letter-spacing: -0.055em;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.74) 92%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
    filter: drop-shadow(0 6px 30px rgba(0,0,0,0.28));
    transition: filter 0.3s var(--ease);
}
.score .max { font-size: clamp(34px, 8vw, 56px); font-weight: 400; color: var(--text-3); margin-top: clamp(14px, 4vw, 30px); margin-left: 2px; }
.score.glow .num { filter: drop-shadow(0 6px 30px rgba(0,0,0,0.28)) drop-shadow(0 0 26px var(--sun-core-soft)); }

.score-label {
    font-size: clamp(18px, 4.4vw, 22px); color: var(--text-2); font-weight: 500;
    letter-spacing: -0.01em; max-width: 22ch; text-wrap: balance; margin: 2px auto 0;
}

/* the gap that lets the sun bloom show through before the cards */
.sun-reveal { width: 100%; height: clamp(220px, 42vh, 460px); flex-shrink: 0; }

/* details strip */
.details {
    width: 100%; max-width: 540px; padding: 0 22px;
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    animation: rise 0.7s var(--ease) 0.1s both;
}

.card { border-radius: 24px; }

.tip {
    padding: 20px 22px; font-size: 15px; line-height: 1.55; color: var(--text-2);
    text-align: center; text-wrap: pretty;
}

.actions { display: flex; gap: 12px; }
.btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; border-radius: 980px; cursor: pointer; border: none;
    font-size: 15.5px; font-weight: 590; letter-spacing: -0.01em; color: var(--text-1);
    transition: transform 0.22s var(--ease), background 0.25s var(--ease);
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: scale(0.975); }
.btn-secondary { color: var(--text-2); }
.btn-secondary:hover { color: var(--text-1); }
.btn.copied { color: #6cf09a; }

/* best place card */
.best-place { padding: 22px; text-align: left; animation: rise 0.5s var(--ease) both; }
.best-place .bp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.best-place .bp-tag {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--accent);
    transition: color var(--sky-fade);
}
.best-place .bp-close {
    background: none; border: none; color: var(--text-3); cursor: pointer; line-height: 1;
    width: 26px; height: 26px; border-radius: 50%; font-size: 17px;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s var(--ease);
}
.best-place .bp-close:hover { background: rgba(255,255,255,0.1); color: var(--text-1); }
.best-place h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.best-place .bp-info { font-size: 14px; color: var(--text-2); line-height: 1.5; margin-bottom: 18px; }
.directions {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    height: 46px; padding: 0 22px; border-radius: 980px; color: #fff; background: #0a84ff;
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
    box-shadow: 0 6px 18px rgba(10,132,255,0.4), 0 0.5px 0 rgba(255,255,255,0.4) inset;
    transition: transform 0.22s var(--ease), background 0.25s var(--ease);
}
.directions svg { width: 16px; height: 16px; }
.directions:hover { background: #2a94ff; }
.directions:active { transform: scale(0.975); }

/* golden hour */
.golden-hour {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 22px; border-radius: 20px;
}
.gh-icon { flex-shrink: 0; color: var(--accent); transition: color var(--sky-fade); }
.gh-icon svg { width: 28px; height: 28px; }
.gh-body { display: flex; flex-direction: column; gap: 1px; }
.gh-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--accent); transition: color var(--sky-fade); }
.gh-time { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.gh-note { font-size: 12.5px; color: var(--text-3); }

/* breakdown */
.breakdown summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 13px; font-size: 14px; font-weight: 500; color: var(--text-2);
    transition: color 0.25s var(--ease);
}
.breakdown summary::-webkit-details-marker { display: none; }
.breakdown summary:hover { color: var(--text-1); }
.breakdown summary .chev { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.breakdown[open] summary .chev { transform: rotate(180deg); }
.breakdown[open] summary { margin-bottom: 12px; }

.factors { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.factor { padding: 16px; border-radius: 20px; text-align: left; }
.factor-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.factor-name { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: var(--text-3); }
.factor-name svg { width: 14px; height: 14px; }
.factor-score { font-size: 13px; font-weight: 600; color: var(--accent); transition: color var(--sky-fade); }
.factor-score.info { color: var(--text-3); font-weight: 500; }
.factor-score.penalty { color: #ff6961; }
.factor-val { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 3px; }
.factor-detail { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.factor-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.10); margin-top: 11px; overflow: hidden; }
.factor-bar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width 1s cubic-bezier(0.4,0,0.2,1), background var(--sky-fade); }
.factor.penalty { border: 0.5px solid rgba(255,105,97,0.34); }
.factor.penalty .factor-bar > i { background: #ff6961; }

/* loading / error */
.loading { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 130px 0; color: var(--text-2); font-size: 16px; }
.loading-orb {
    width: 56px; height: 56px; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, var(--sun-core) 0%, var(--sun-edge) 55%, transparent 72%);
    box-shadow: 0 0 50px var(--bloom);
    animation: orbpulse 1.5s ease-in-out infinite;
}
@keyframes orbpulse { 0%,100% { transform: scale(0.86); opacity: 0.7; } 50% { transform: scale(1.06); opacity: 1; } }
.error { display: flex; align-items: center; justify-content: center; text-align: center; padding: 90px 24px; color: #ff6961; font-size: 15px; }

/* ── animations ─────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hidden { display: none !important; }

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .actions { flex-direction: column; }
    .factors { grid-template-columns: 1fr; }
    .mode-btn { min-width: 102px; }
    .sun-reveal { height: clamp(180px, 34vh, 320px); }
}
@media (min-width: 900px) {
    .details { max-width: 600px; }
    .sun-reveal { height: clamp(280px, 46vh, 520px); }
}

/* ── reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.18s !important;
    }
    .sky-grad, .glass, .countdown, .factor-bar > i { transition-duration: 0.4s !important; }
}