/* Bland Weather — shared core styles. Weather-Channel blue identity + animated
   loopable sky scenes (CSS/SVG, no assets, no licensing). One stylesheet, all
   shells; chrome differences driven only by [data-shell]. */

:root {
  /* The Weather Channel blue system */
  --twc-navy:   #06192f;
  --twc-navy-2: #0b2547;
  --twc-blue:   #1668b8;
  --twc-blue-br:#1597ff;
  --twc-cyan:   #66ccff;
  --twc-gold:   #ffcf3f;

  --bg:        #e9f1fa;
  --panel:     #ffffff;
  --panel-2:   #f1f7fd;
  --ink:       #0a2138;
  --ink-dim:   #51708c;
  --line:      #d6e3f0;
  --accent:    #1668b8;
  --accent-2:  #1597ff;
  --accent-soft:#e3f0fc;
  --warn:      #c2410c;

  --radius: 14px;
  --gap: 14px;
  --maxw: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif;
}
html[data-theme="dark"] {
  --bg:#06192f; --panel:#0e2742; --panel-2:#0b2140; --ink:#e8f1fb;
  --ink-dim:#9fb8d2; --line:#1d3a5c; --accent:#1597ff; --accent-2:#5bc8ff;
  --accent-soft:#11304f; --warn:#f0a36b;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg:#06192f; --panel:#0e2742; --panel-2:#0b2140; --ink:#e8f1fb;
    --ink-dim:#9fb8d2; --line:#1d3a5c; --accent:#1597ff; --accent-2:#5bc8ff;
    --accent-soft:#11304f; --warn:#f0a36b;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45;
}
html[data-shell="portal"], html[data-shell="portal"] body { background: transparent; }

.app { display: flex; flex-direction: column; min-height: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 0 16px 28px; }
html[data-shell="portal"] .app { padding-top: 8px; }

/* OS titlebar (os shell only) */
.os-titlebar { display: none; }
html[data-shell="os"] .os-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; margin: 0 -16px 4px; padding: 0 14px;
  background: var(--twc-navy); color:#fff; border-bottom: 1px solid var(--line);
  -webkit-app-region: drag; user-select: none;
}
.os-title { font-weight: 600; font-size: 13px; display:flex; align-items:center; gap:8px; }
.brand-dot { width:9px; height:9px; border-radius:50%; background: var(--twc-blue-br); display:inline-block; }
.os-win-controls { display:flex; gap:7px; -webkit-app-region:no-drag; }
.os-win-controls i { width:11px; height:11px; border-radius:50%; background: rgba(255,255,255,.3); display:block; }

/* topbar */
.topbar { display:flex; align-items:center; gap:var(--gap); padding:14px 0; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:9px; font-weight:750; font-size:15px;
  letter-spacing:.01em; color: var(--accent); }
.brand-mark { display:inline-flex; }
html[data-shell="portal"] .brand-name { display:none; }

.search { position:relative; flex:1 1 280px; min-width:220px; display:flex;
  align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:0 10px; height:40px;
  box-shadow: 0 1px 0 rgba(10,33,56,.03); }
.search input { flex:1; border:0; background:transparent; color:var(--ink);
  font:inherit; outline:none; min-width:0; }
.search input::placeholder { color: var(--ink-dim); }
.suggest { position:absolute; top:46px; left:0; right:0; z-index:30;
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  overflow:hidden; box-shadow:0 14px 40px rgba(6,25,47,.22); }
.suggest button { display:block; width:100%; text-align:left; border:0; background:none;
  color:var(--ink); font:inherit; padding:10px 13px; cursor:pointer; }
.suggest button:hover, .suggest button[aria-selected="true"] { background:var(--accent-soft); }
.suggest .s-sub { color:var(--ink-dim); font-size:12px; }

.controls { display:flex; align-items:center; gap:8px; }
.seg { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg-btn { border:0; background:var(--panel); color:var(--ink-dim); font:inherit;
  padding:8px 13px; cursor:pointer; min-width:44px; font-weight:600; }
.seg-btn[aria-pressed="true"] { background:var(--accent); color:#fff; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid var(--line); background:var(--panel);
  border-radius:10px; color:var(--ink-dim); cursor:pointer; }
.icon-btn:hover { color:var(--accent); border-color:var(--accent); }
.btn { border:0; background:var(--accent); color:#fff; font:inherit; font-weight:600;
  padding:9px 18px; border-radius:10px; cursor:pointer; }
.ic { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.ic-dim{color:var(--ink-dim);} .ic-warn{color:var(--warn);} .ic-xl{width:46px;height:46px;}

/* saved places */
.places { display:flex; gap:8px; flex-wrap:wrap; padding:2px 0 12px; }
.place-chip { display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:var(--panel); border-radius:999px; padding:6px 10px 6px 14px; cursor:pointer;
  font:inherit; color:var(--ink); font-weight:600; }
.place-chip[aria-current="true"]{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.place-chip .x{ color:var(--ink-dim); display:inline-flex; } .place-chip .x:hover{ color:var(--warn); }

.loc-note{ margin:0 0 12px; padding:8px 12px; font-size:12px; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--line); border-radius:9px; }
.radar-ctl{ display:flex; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(6,25,47,.2); }
.radar-ctl button{ border:0; border-left:1px solid var(--line); background:var(--panel);
  color:var(--ink-dim); font:700 11px/1 var(--font); padding:7px 9px; cursor:pointer; }
.radar-ctl button:first-child{ border-left:0; }
.radar-ctl button.on{ background:var(--accent); color:#fff; }

.alerts{ margin:0 0 12px; display:flex; flex-direction:column; gap:8px; }
.alert{ border:1px solid var(--line); border-left:4px solid var(--ac,#1668b8);
  border-radius:10px; background:var(--panel); overflow:hidden; }
.alert summary{ cursor:pointer; list-style:none; padding:10px 12px; font-weight:700;
  font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--ink); }
.alert summary::-webkit-details-marker{ display:none; }
.al-sev{ color:#fff; font-size:11px; font-weight:800; padding:2px 7px; border-radius:6px;
  text-transform:uppercase; letter-spacing:.03em; }
.al-area{ color:var(--ink-dim); font-weight:600; font-size:12px; }
.al-body{ padding:0 12px 12px; color:var(--ink-dim); font-size:13px; line-height:1.55; }
.al-do{ margin-top:8px; color:var(--ink); }
.airsun{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.as{ border:1px solid var(--line); border-radius:11px; padding:11px 13px; background:var(--panel-2); }
.as-k{ color:var(--ink-dim); font-size:12px; }
.as-v{ margin-top:4px; font-weight:700; display:flex; align-items:center; gap:7px; }
.as-v .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.as-moon{ width:18px; height:18px; }

.main{flex:1;}
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:var(--gap); }
.panel-h{ margin:0 0 12px; font-size:12px; font-weight:750; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.07em; }
.state{ text-align:center; color:var(--ink-dim); padding:56px 16px; }
.state p{ margin:14px 0; }
.spinner{ width:28px;height:28px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--accent); display:inline-block; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ===== HERO "now" panel with live animated sky scene ===== */
.now{ position:relative; overflow:hidden; border:none; padding:0;
  color:#fff; min-height:240px; box-shadow:0 10px 30px rgba(6,25,47,.18); }
.sky{ position:absolute; inset:0; z-index:0; }
/* gradient + horizon glow shared by hero (.sky.scene) and day tiles (.dsky.scene) */
.scene{ background:linear-gradient(180deg,#2f7fc8,#9fc8ea); transition:background .8s ease; }
.scene::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.16)); pointer-events:none; }
.scene[data-scene="storm"]::after, .scene[data-scene="rain"]::after{ background:linear-gradient(180deg,transparent,rgba(10,20,34,.32)); }
.scene[data-scene="clear-night"], .scene[data-scene="partly-night"]{ background:linear-gradient(180deg,#071a33 0%,#123a63 100%); }
.scene[data-scene="clear-day"]{ background:linear-gradient(180deg,#1f73c0 0%,#7bb8e4 75%,#b8d8ef 100%); }
.scene[data-scene="partly-day"]{ background:linear-gradient(180deg,#3a82c2 0%,#9cc4e6 100%); }
.scene[data-scene="cloudy"]{ background:linear-gradient(180deg,#5b748d 0%,#9fb3c6 100%); }
.scene[data-scene="rain"]{ background:linear-gradient(180deg,#3a4e63 0%,#65798d 100%); }
.scene[data-scene="snow"]{ background:linear-gradient(180deg,#7d96b0 0%,#cdddec 100%); }
.scene[data-scene="storm"]{ background:linear-gradient(180deg,#222d3a 0%,#42536a 100%); }
.scene[data-scene="fog"]{ background:linear-gradient(180deg,#7e90a3 0%,#b6c5d4 100%); }

.now-inner{ position:relative; z-index:2; padding:20px; display:flex;
  justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
  text-shadow:0 1px 10px rgba(2,12,25,.45); }
.now-place h1{ margin:0; font-size:24px; font-weight:760; }
.now-place p{ margin:5px 0 0; font-size:13px; opacity:.9; }
.now-temp{ display:flex; align-items:center; gap:14px; }
.now-temp .scene-ic{ width:74px; height:74px; filter:drop-shadow(0 3px 8px rgba(2,12,25,.4)); }
.deg{ font-size:60px; font-weight:300; letter-spacing:-.02em; line-height:1; }
.cond{ margin:4px 0 0; font-weight:600; opacity:.96; }
.now-stats{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(6,1fr);
  gap:10px; margin:0; padding:14px 20px 18px; background:rgba(4,16,31,.28);
  backdrop-filter:blur(2px); }
.now-stats div{ min-width:0; }
.now-stats dt{ color:rgba(255,255,255,.78); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.now-stats dd{ margin:3px 0 0; font-weight:700; color:#fff; }

/* ---- sky scene actors (pure CSS loops) ---- */
.sun{ position:absolute; top:34px; right:60px; width:84px; height:84px; }
.sun .disc{ position:absolute; inset:18px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #fff3c4, var(--twc-gold) 62%, #f6b400);
  box-shadow:0 0 34px 8px rgba(255,207,63,.55); }
.sun .rays{ position:absolute; inset:0; animation:spin 44s linear infinite; }
.sun .rays b{ position:absolute; left:50%; top:50%; width:4px; height:42px; margin:-21px 0 0 -2px;
  background:linear-gradient(rgba(255,224,130,.95),rgba(255,224,130,0)); border-radius:2px; transform-origin:50% 50%; }
.moon{ position:absolute; top:30px; right:64px; width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 64% 38%, #fdf6e3, #d9e2ef 70%, #aab9ce);
  box-shadow:0 0 26px 6px rgba(220,232,250,.45); }
.stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
  opacity:.85; animation:twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.2;transform:scale(.7)} 50%{opacity:1;transform:scale(1)} }
.cloud{ position:absolute; left:0; width:120px; height:60px; color:rgba(255,255,255,.92);
  --s:1; filter:drop-shadow(0 6px 12px rgba(10,30,55,.22)); animation:drift linear infinite;
  transform-origin:center; will-change:transform; }
.cloud svg{ display:block; width:120px; height:60px; }
.cloud.dark{ color:rgba(212,221,232,.96); }
.cloud.back{ filter:drop-shadow(0 4px 10px rgba(10,30,55,.18)) blur(1.5px); opacity:.6; }
html[data-theme="dark"] .cloud{ color:rgba(200,212,228,.8); }
/* storm bolt graphic (visible, not just flash) */
.boltg{ position:absolute; top:42%; width:34px; height:60px; opacity:0;
  filter:drop-shadow(0 0 8px rgba(255,221,120,.8)); animation:strike 6.5s linear infinite; }
@keyframes strike{ 0%,7%,13%,100%{opacity:0} 8%{opacity:1} 9%{opacity:.2} 11%{opacity:.95} 12%{opacity:.3} }
@keyframes drift{ from{ transform:translateX(-30vw) scale(var(--s,1)) } to{ transform:translateX(120vw) scale(var(--s,1)) } }
.precip{ position:absolute; inset:0; overflow:hidden; }
.drop{ position:absolute; top:-12%; width:2px; height:16px; border-radius:1px;
  background:linear-gradient(rgba(180,214,255,.1),rgba(190,222,255,.85));
  animation:fall linear infinite; }
@keyframes fall{ to{ transform:translateY(125%);} }
.flake{ position:absolute; top:-6%; color:#fff; font-size:11px; opacity:.9;
  animation:snowfall linear infinite; }
@keyframes snowfall{ to{ transform:translateY(125%) translateX(14px) rotate(160deg);} }
.bolt{ position:absolute; inset:0; background:radial-gradient(circle at 60% 30%, rgba(255,255,255,.9), transparent 45%);
  opacity:0; animation:flash 6.5s linear infinite; }
@keyframes flash{ 0%,8%,12%,100%{opacity:0} 9%{opacity:.95} 10%{opacity:.25} 11%{opacity:.85} }
.fog{ position:absolute; left:0; right:0; height:38px; background:rgba(238,244,250,.5);
  filter:blur(7px); animation:fogmove 13s ease-in-out infinite alternate; }
@keyframes fogmove{ from{transform:translateX(-12%)} to{transform:translateX(12%)} }

@media (prefers-reduced-motion: reduce){
  .sun .rays,.cloud,.drop,.flake,.bolt,.fog,.stars i,.spinner{ animation:none !important; }
}

/* hourly */
.hourly{ display:block; overflow-x:auto; padding-bottom:4px; }
.hl-svg{ display:block; width:100%; height:auto; color:var(--ink); }
.hl-line{ stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.hl-dot{ fill:#1597ff; stroke:var(--panel); stroke-width:2; }
.hl-t{ fill:var(--ink); font:750 13px var(--font); }
.hl-x{ fill:var(--ink-dim); font:600 11px var(--font); }
.hl-p{ fill:var(--accent); font:600 10px var(--font); }
.hl-precip{ fill:#1597ff; opacity:.22; }
.hl-ic{ overflow:visible; }
@media (prefers-reduced-motion: no-preference){
  .hl-line{ stroke-dasharray:3000; stroke-dashoffset:3000; animation:hldraw 1.05s ease forwards; }
  .hl-area{ opacity:0; animation:hlfade .7s .55s ease forwards; }
  .hl-dot,.hl-t,.hl-p,.hl-precip,.hl-ic{ opacity:0; animation:hlfade .5s .75s ease forwards; }
}
@keyframes hldraw{ to{ stroke-dashoffset:0; } }
@keyframes hlfade{ to{ opacity:1; } }
.hour{ flex:0 0 auto; width:70px; text-align:center; border:1px solid var(--line);
  border-radius:12px; padding:11px 4px; background:var(--panel-2); }
.hour .h-t{ font-size:12px; color:var(--ink-dim); font-weight:600; }
.hour .wx{ width:34px; height:34px; margin:8px auto 6px; display:block;
  filter:drop-shadow(0 1px 2px rgba(10,33,56,.18)); }
.hour .h-deg{ font-weight:750; }
.hour .h-p{ font-size:11px; color:var(--accent); font-weight:600; }

/* 7-day — vertical tiles, each a live mini animated scene (TWC-style) */
.daily{ display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; }
.dcard{ flex:1 0 124px; min-width:124px; border:1px solid var(--line); border-radius:13px;
  overflow:hidden; background:var(--panel-2); display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(10,33,56,.03); }
.dc-day{ text-align:center; font-weight:750; font-size:13px; padding:9px 4px 7px; }
.dsky{ position:relative; height:78px; overflow:hidden; }
.dc-body{ padding:9px 8px 11px; text-align:center; }
.dc-temp{ font-variant-numeric:tabular-nums; font-weight:750; font-size:15px; }
.dc-temp .lo{ color:var(--ink-dim); font-weight:600; margin-left:4px; }
.dc-cond{ margin-top:4px; font-size:11.5px; color:var(--ink-dim); font-weight:600; line-height:1.3; }

/* mini-scene actors (container-relative, clipped by .dsky overflow) */
.m-ic{ position:absolute; width:30px; height:30px; top:10px; left:50%; margin-left:-15px;
  filter:drop-shadow(0 1px 3px rgba(6,20,40,.35)); }
.m-sun{ animation:spin 30s linear infinite;
  filter:drop-shadow(0 0 9px rgba(255,207,63,.7)) drop-shadow(0 1px 2px rgba(6,20,40,.3)); }
.m-cloud{ position:absolute; width:50px; height:25px; color:rgba(255,255,255,.94);
  --ms:1; animation:mdrift linear infinite; will-change:transform; }
.m-cloud svg{ display:block; width:50px; height:25px; }
.m-cloud.dark{ color:rgba(214,223,233,.96); }
html[data-theme="dark"] .m-cloud{ color:rgba(200,212,228,.82); }
@keyframes mdrift{ from{transform:translateX(-52px) scale(var(--ms,1))}
  to{transform:translateX(176px) scale(var(--ms,1))} }
.m-drop{ position:absolute; top:-14px; width:2px; height:9px; border-radius:1px;
  background:linear-gradient(rgba(190,222,255,.15),rgba(200,228,255,.9)); animation:mfall linear infinite; }
@keyframes mfall{ to{ transform:translateY(96px);} }
.m-flake{ position:absolute; top:-12px; color:#fff; line-height:1; animation:msnow linear infinite; }
@keyframes msnow{ to{ transform:translateY(98px) translateX(10px) rotate(150deg);} }
.m-bolt{ position:absolute; inset:0; background:radial-gradient(circle at 55% 30%, rgba(255,255,255,.92), transparent 55%);
  opacity:0; animation:flash 6s linear infinite; }
.m-star{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
  animation:twinkle 3.2s ease-in-out infinite; }
.m-moon{ filter:drop-shadow(0 0 8px rgba(220,232,250,.55)); }
.m-fog{ position:absolute; left:0; right:0; height:14px; background:rgba(238,244,250,.46);
  filter:blur(4px); animation:fogmove 11s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){
  .m-sun,.m-cloud,.m-drop,.m-flake,.m-bolt,.m-star,.m-fog{ animation:none !important; } }

.map{ height:320px; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
html[data-shell="portal"] .map{ height:260px; }

.legal{ display:none; }
html[data-shell="public"] .legal{ display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--ink-dim); font-size:12px; }
.legal a{ color:var(--ink-dim);} .legal .sep{ opacity:.5; }

@media (max-width:720px){
  .now-stats{ grid-template-columns:repeat(3,1fr);} .deg{ font-size:48px;}
  .day{ grid-template-columns:78px 28px 1fr 96px;} .sun,.moon{ right:24px; }
}