/* === Weather Consensus – Enhanced Theme with Day/Night + Rain === */

/* ---------- Design tokens (Night default) ---------- */
:root{
  --bg:#0b1220;        --bg-2:#0d1526;
  --panel:#10192b;     --panel-2:#0f1726;
  --card:#121c31;      --card-2:#16223a;
  --muted:#98a2b3;     --text:#e6eefc;
  --brand:#5ea0ff;     --accent:#8ef2d0; --accent-2:#b388ff;
  --warning:#ffd166;   --error:#ff6b6b;
  --border:#1e2a42;    --glass:rgba(255,255,255,0.05);

  --shadow-lg: 0 20px 45px rgba(0,0,0,.35);
  --shadow-md: 0 10px 25px rgba(0,0,0,.28);
  --radius-lg: 16px; --radius-md: 12px; --radius-sm: 10px;
}

/* ---------- Day theme overrides ---------- */
body[data-theme="day"]{
  --bg:#e7f1ff;        --bg-2:#dff0ff;
  --panel:#ffffff;     --panel-2:#f6fbff;
  --card:#ffffff;      --card-2:#f4f9ff;
  --text:#12233d;      --muted:#3c4b63;
  --border:#cfe3ff;
  --brand:#3a86ff;     --accent:#00c2a8; --accent-2:#9b72ff;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 70% -10%, #1b2a4a33 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  letter-spacing:.2px;
}

/* subtle animated star dots (night) */
body:not([data-theme="day"])::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff2 40%, transparent 41%),
    radial-gradient(1px 1px at 80% 30%, #fff3 40%, transparent 41%),
    radial-gradient(1px 1px at 50% 70%, #fff2 40%, transparent 41%),
    radial-gradient(1px 1px at 20% 80%, #fff1 40%, transparent 41%);
  animation: twinkle 8s linear infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.4} 50%{opacity:.8} }

.container{width:min(1100px,92vw);margin:0 auto;padding:1rem;position:relative;z-index:2}

/* ---------- Top gradient bar ---------- */
.topbar{
  height:6px; width:100%; position:fixed; top:0; left:0; z-index:5;
  background: linear-gradient(90deg,
    #4ea2ff 0%,
    #7b86ff 20%,
    #b07cff 40%,
    #ff7fd1 60%,
    #77e1c6 80%,
    #4ea2ff 100%);
  box-shadow: 0 2px 10px rgba(94,160,255,.6);
}

/* ---------- Header / Hero with clouds ---------- */
.site-header{padding-top:24px}
.hero{
  position:relative; overflow:hidden; border-bottom:1px solid #12203b;
  background: radial-gradient(800px 240px at 50% 0%, #1d2b48aa 0%, transparent 70%);
}
body[data-theme="day"] .hero{
  background: radial-gradient(800px 240px at 50% 0%, #ffffffcc 0%, transparent 70%);
}
.hero-inner{padding:2.6rem 1rem 1.1rem}

.controls{
  display:flex; gap:.9rem; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:.6rem;
}

.site-header h1{
  margin:.25rem 0 .35rem; font-size:2.1rem; font-weight:800; letter-spacing:.3px;
  text-shadow: 0 3px 16px rgba(0,0,0,.35);
}
body[data-theme="day"] .site-header h1{ text-shadow:none }
.tagline{color:var(--muted);margin:0 .5rem .9rem;text-align:center}

/* Clouds */
.clouds{ position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none; z-index:1;
  opacity:.9; filter: drop-shadow(0 10px 20px rgba(0,0,0,.18)); }
.layer-back{ animation: driftBack 36s linear infinite; opacity:.45 }
.layer-front{ animation: driftFront 28s linear infinite; opacity:.65 }
.clouds svg{ width:150%; height:100% }
@keyframes driftBack { 0%{transform: translateX(0)} 100%{transform: translateX(-20%)} }
@keyframes driftFront{ 0%{transform: translateX(0)} 100%{transform: translateX(-35%)} }

/* Lightning flash */
.lightning{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(400px 220px at 70% 0%, #fff0 0%, #fff0 55%, #fff3 55.5%, #fff0 56%);
  mix-blend-mode: screen; opacity:0;
  animation: flash 9s ease-in-out infinite;
}
@keyframes flash{
  0%, 86%, 100% { opacity:0 }
  89% { opacity:.22 }
  90% { opacity:.55 }
  92% { opacity:.12 }
}

/* Rain overlay (appears only when body has .rainy) */
.rain{ position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0; transition:opacity .3s ease }
body.rainy .rain{ opacity:.65 }
.rain span{
  position:absolute; top:-10vh; width:2px; height:8vh; background:linear-gradient(to bottom, #aee1ff 0%, #6bb7ff 80%, transparent 100%);
  opacity:.7; border-radius:1px; filter: blur(.3px);
  animation: drop 1.2s linear infinite;
}
@keyframes drop{
  0%{ transform: translateY(-12vh) }
  100%{ transform: translateY(110vh) }
}

/* ---------- Search ---------- */
.search{
  display:flex; gap:.6rem; justify-content:center; position:relative; flex-wrap:wrap; z-index:3;
}
.search input{
  width:min(520px,86vw);
  padding:.85rem 1rem;
  border-radius:12px;
  border:1px solid #22314e;
  background:#0e1626;
  color:var(--text);
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 8px 18px rgba(0,0,0,.35);
}
body[data-theme="day"] .search input{
  background:#ffffff; border-color:#cfe3ff; color:#12233d; box-shadow:0 8px 18px rgba(0,0,0,.12)
}
.search input:focus{ border-color:#2f4b7f; box-shadow: 0 0 0 4px #2f4b7f33 }
.search button{
  padding:.85rem 1rem;
  border-radius:12px; border:none;
  background: linear-gradient(135deg, var(--brand), var(--accent-2));
  color:#061229; font-weight:800; letter-spacing:.3px; cursor:pointer;
  box-shadow: var(--shadow-md);
}
.search button:hover{ filter:brightness(1.06) }

.theme-toggle{ display:flex; align-items:center; gap:.45rem; color:var(--muted); font-weight:600 }
.theme-toggle select{
  appearance:none; padding:.62rem .7rem; border-radius:10px; border:1px solid #22314e; background:#0e1626; color:var(--text)
}
body[data-theme="day"] .theme-toggle select{ background:#fff; border-color:#cfe3ff; color:#12233d }

/* Autocomplete */
.sugg-box{
  position:absolute; left:50%; transform:translateX(-50%); top:3.5rem;
  width:min(520px,86vw); display:none;
  background:#0e1626;border:1px solid #22314e;border-radius:12px;
  box-shadow:0 18px 38px rgba(0,0,0,.35); z-index:5; max-height:55vh; overflow:auto
}
.sugg-item{ padding:.7rem .95rem; border-bottom:1px solid #18253e; cursor:pointer }
.sugg-item:last-child{ border-bottom:none }
.sugg-item:hover,.sugg-item:focus{ background:#15223a; outline:none }

/* ---------- Panels & Grid ---------- */
.panel{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:1.1rem;
  margin:1rem 0;
  color:var(--muted);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);
}

.grid{ display:grid; grid-template-columns:1fr; gap:1rem; margin:1rem 0 }
@media(min-width:720px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr) } }

/* ---------- Forecast cards ---------- */
.card{
  position:relative;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border:1px solid #1f2c47;
  border-radius: var(--radius-lg);
  padding:1rem;
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 300px at 120% -10%, rgba(94,160,255,0.12), transparent 60%);
  opacity:.8;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
  border-color:#28406c;
}

.card-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.5rem; gap:.6rem }
.card .day{ font-weight:700 }
.card .hi .label{ display:block; color:var(--muted); font-size:.8rem }
.card .hi .val{ font-size:1.4rem; font-weight:800 }

/* ---------- Metrics rows ---------- */
.metrics{ display:grid; grid-template-columns:1fr; gap:.6rem; margin-top:.6rem }
.metric{ display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; align-items:center }
.metric .i{ width:24px; height:24px; color:var(--accent); display:grid; place-items:center }
.metric .i svg{ width:22px; height:22px }
.metric .name{ color:var(--muted) }
.metric .value{ font-weight:800 }

/* ---------- Provider breakdown ---------- */
.providers{ margin-top:.8rem }
.providers summary{ cursor:pointer; color:var(--brand); font-weight:700; letter-spacing:.2px }
.prov-pre{
  white-space:pre-wrap; overflow:auto;
  background:#0e1626; border:1px dashed #27406b; border-radius:10px;
  padding:.7rem; margin:.6rem 0; color:#bdd0ff;
}
body[data-theme="day"] .prov-pre{ background:#f6fbff; color:#213555; border-color:#cfe3ff }

/* ---------- Utility / Micro ---------- */
.error{ background:#240d12; border:1px solid #4d1c2a; color:#ffb5b5; padding:.9rem; border-radius:12px }
.site-footer{ padding:1.2rem 0; text-align:center; color:var(--muted) }
:focus-visible{ outline:3px solid #6db0ff; outline-offset:2px }
@media (prefers-reduced-motion: reduce){
  .layer-back,.layer-front,.lightning,body::before,.rain span{ animation: none !important }
}