/* ChowChow Labs Weather. Light by default; dark via [data-theme=dark]. */
:root {
  --bg: #f5f7fb; --surface: #ffffff; --surface-2: #eef2f8; --text: #1b2230; --muted: #566175; --line: #d9e0ea;
  --accent: #2f6fde; --accent-ink: #ffffff; --warn-bg: #fff4d6; --warn-ink: #6b4a00; --danger: #b42318;
  --sev-extreme: #8a1c1c; --sev-severe: #b42318; --sev-moderate: #b7791f; --sev-minor: #4a5568;
  --sky-top: #bcd6fb; --sky-bot: #f5f7fb; --radius: 14px; --shadow: 0 1px 2px rgba(20,30,50,.06), 0 4px 14px rgba(20,30,50,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0f1420; --surface: #171e2d; --surface-2: #1f2839; --text: #e8edf6; --muted: #a3afc2; --line: #2c3850;
  --accent: #7aa7ff; --accent-ink: #0f1420; --warn-bg: #3a2f12; --warn-ink: #ffe3a3; --danger: #ff8a7a;
  --sky-top: #0b1222; --sky-bot: #0f1420; --shadow: 0 1px 2px rgba(0,0,0,.3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--font); color: var(--text); background: var(--bg); min-height: 100vh; }
a { color: var(--accent); }
img, svg { max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Sky background (decorative; content sits on solid surfaces) ---------- */
.sky { position: fixed; inset: 0 0 auto 0; height: 520px; z-index: -1; background: linear-gradient(var(--sky-top), var(--sky-bot)); overflow: hidden; pointer-events: none; }
.sky-fx { position: absolute; inset: 0; }
body[data-scene="sun"] { --sky-top: #9cc8ff; }
body[data-scene="cloud"] { --sky-top: #c9d4e3; }
body[data-scene="rain"] { --sky-top: #9eaabd; }
body[data-scene="snow"] { --sky-top: #dfe7f1; }
body[data-scene="night"] { --sky-top: #1c2a4a; }
[data-theme="dark"] body[data-scene="sun"], [data-theme="dark"] body[data-scene="cloud"] { --sky-top: #16233d; }
[data-theme="dark"] body[data-scene="rain"] { --sky-top: #141c2c; }
[data-theme="dark"] body[data-scene="snow"] { --sky-top: #1d2638; }
[data-theme="dark"] body[data-scene="night"] { --sky-top: #070c18; }
body[data-scene="sun"] .sky-fx { background: radial-gradient(circle at 85% 8%, rgba(255,214,102,.55), transparent 28%); }
body[data-scene="cloud"] .sky-fx, body[data-scene="rain"] .sky-fx { background:
  radial-gradient(ellipse 220px 60px at 20% 20%, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(ellipse 260px 70px at 70% 12%, rgba(255,255,255,.45), transparent 70%); }
body[data-scene="night"] .sky-fx { background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff8, transparent), radial-gradient(1.5px 1.5px at 30% 8%, #fff8, transparent), radial-gradient(1px 1px at 55% 25%, #fff8, transparent), radial-gradient(1.5px 1.5px at 80% 15%, #fff8, transparent), radial-gradient(1px 1px at 92% 30%, #fff8, transparent); }
body[data-scene="rain"] .sky-fx::after, body[data-scene="snow"] .sky-fx::after { content: ""; position: absolute; inset: -40px 0 0 0; opacity: .35; }
body[data-scene="rain"] .sky-fx::after { background-image: repeating-linear-gradient(105deg, transparent 0 18px, rgba(80,110,160,.5) 18px 19px, transparent 19px 40px); }
body[data-scene="snow"] .sky-fx::after { background-image: radial-gradient(circle, #fff 1.6px, transparent 2px); background-size: 46px 46px; }
[data-anim="on"] body[data-scene="rain"] .sky-fx::after { animation: fall .8s linear infinite; }
[data-anim="on"] body[data-scene="snow"] .sky-fx::after { animation: fall 6s linear infinite; }
@keyframes fall { to { transform: translateY(40px); } }

/* ---------- Header / nav ---------- */
.site-header { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 20px; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
.brand { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--text); text-decoration: none; }
.site-header nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; }
.site-header nav a { color: var(--text); text-decoration: none; padding: 6px 2px; font-size: .95rem; white-space: nowrap; }
.site-header nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); }
.header-tools { display: flex; gap: 8px; align-items: center; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px auto 0; padding: 0 20px; max-width: 1100px; font-size: .9rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; }

main { max-width: 1100px; margin: 0 auto; padding: 16px 20px 40px; }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .4em 0 .3em; line-height: 1.2; }
h2 { font-size: 1.25rem; margin: 0 0 .6em; }
h3 { font-size: 1rem; margin: 0 0 .3em; }
.meta { color: var(--muted); font-size: .85rem; }
.na { color: var(--muted); }
.tag { display: inline-block; font-size: .72rem; padding: 1px 6px; border-radius: 99px; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.warn { background: var(--warn-bg); color: var(--warn-ink); padding: 8px 12px; border-radius: 10px; }
.state-msg { font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn, .btn-ghost, .btn-danger { font: inherit; border-radius: 10px; padding: 8px 14px; cursor: pointer; border: 1px solid transparent; min-height: 40px; }
.btn { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-wide { width: 100%; }
.btn:disabled, .btn-ghost:disabled { opacity: .5; cursor: default; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

/* ---------- Search ---------- */
.site-header .header-search { flex: 0 1 180px; max-width: 180px; }
.site-header .header-search input { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 38px; padding: 6px 12px; font-size: .95rem; }
.site-header .header-search .suggest { left: auto; right: 0; min-width: 300px; }
.header-tools { flex-wrap: nowrap; }
.sites { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sites li { background: var(--surface); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.sites p { margin: .2em 0 0; color: var(--muted); }
.search { position: relative; max-width: 720px; }
.search label { display: block; font-weight: 600; margin-bottom: 6px; }
.search-row { display: flex; gap: 8px; flex-wrap: wrap; }
.search input { flex: 1 1 260px; font: inherit; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); min-height: 44px; }
.search-big input { font-size: 1.1rem; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.suggest li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.suggest li span { color: var(--muted); font-size: .85rem; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--surface-2); }
.suggest .suggest-empty { color: var(--muted); cursor: default; }
.suggest .suggest-empty:hover { background: none; }
.coming-soon h2 { margin-bottom: .3em; }
.results { list-style: none; padding: 0; } .results li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.intro { margin-bottom: 14px; } .loc-sub { color: var(--muted); }

/* ---------- Alerts ---------- */
.alerts { border-radius: var(--radius); padding: 10px 16px; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--line); position: relative; z-index: 2; }
.alerts p { margin: .3em 0; }
.alerts-active { border: 2px solid var(--sev-moderate); }
.alerts-severe { border-color: var(--sev-severe); background: color-mix(in srgb, var(--sev-severe) 7%, var(--surface)); }
.alerts-unavailable { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.alerts-title { font-size: 1.05rem; margin: .2em 0 .5em; }
.alert { border-top: 1px solid var(--line); padding: 8px 0; }
.alert summary { cursor: pointer; }
.alert-text { white-space: pre-line; margin: .5em 0; }
.sev { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; color: #fff; background: var(--sev-minor); }
.sev-extreme { background: var(--sev-extreme); } .sev-severe { background: var(--sev-severe); } .sev-moderate { background: var(--sev-moderate); }

/* ---------- Hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "stage body" "foot foot"; gap: 8px 20px; background: var(--surface); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); margin-bottom: 14px; min-height: 220px; }
.companion-stage { grid-area: stage; min-width: 116px; min-height: 116px; }
.hero-body { grid-area: body; }
.hero-foot { grid-area: foot; border-top: 1px solid var(--line); padding-top: 8px; }
.hero-foot .credit, .hero-foot .meta { margin: .2em 0; }
.kind-badge { display: inline-block; margin: 0 0 6px; font-size: .85rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); }
.kind-observed { color: #11693c; background: color-mix(in srgb, #11693c 12%, var(--surface)); }
.kind-estimated { color: #6b4a00; background: var(--warn-bg); }
[data-theme="dark"] .kind-observed { color: #7fe0a8; }
[data-theme="dark"] .kind-estimated { color: var(--warn-ink); }
.now-main { display: flex; align-items: center; gap: 12px; }
.now-main .wi { width: 64px; height: 64px; }
.big-temp { font-size: clamp(3rem, 8vw, 4.4rem); font-weight: 700; line-height: 1; margin: 0; letter-spacing: -.02em; }
.now-cond { font-size: 1.2rem; margin: .2em 0; }
.now-fl, .now-hilo { margin: .2em 0; }
.method { color: var(--muted); font-size: .85rem; }
.sunline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: .6em 0 0; }
.credit { font-size: .8rem; color: var(--muted); margin: .6em 0 0; }
.credit a { color: inherit; }

/* Companion */
.companion { position: absolute; left: 0; top: 0; z-index: 3; touch-action: none; cursor: grab; transition: transform .15s ease; }
.companion.dragging { cursor: grabbing; transition: none; }
.companion[hidden] { display: none; }
.cmp { width: 100%; height: 100%; overflow: visible; }
.cmp .ink-line { stroke: #2b2a33; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.cmp .whisker { stroke: #2b2a33; stroke-width: 1.2; opacity: .6; }
.cmp .cmp-paw { fill: #fff8; }
.cmp-z { font: 700 13px var(--font); fill: #8aa0c8; }
.cmp-sign { font: 800 20px var(--font); fill: #b7791f; }
[data-anim="on"]:not([data-paused="true"]) .cmp-sun .cmp-figure { animation: dance 1.1s ease-in-out 3; transform-origin: 70px 130px; }
[data-anim="on"]:not([data-paused="true"]) .cmp-sun .cmp-wag { animation: wag .5s ease-in-out 6; transform-origin: 98px 108px; }
[data-anim="on"]:not([data-paused="true"]) .cmp-night .cmp-z { animation: z 3s ease-in-out infinite; }
[data-anim="on"]:not([data-paused="true"]) .cmp-wind .cmp-gust { animation: gust 1.6s ease-in-out infinite; }
[data-anim="on"]:not([data-paused="true"]) .cmp-rain .cmp-umbrella { animation: sway 3s ease-in-out infinite; transform-origin: 102px 96px; }
@keyframes dance { 0%,100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-6deg) translateY(-4px); } 75% { transform: rotate(6deg) translateY(-4px); } }
@keyframes wag { 50% { transform: rotate(18deg); } }
@keyframes z { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes gust { 50% { transform: translateX(6px); opacity: .5; } }
@keyframes sway { 50% { transform: rotate(-3deg); } }
.cmp-severe { filter: saturate(.6); }

/* ---------- Panels, cards, tables ---------- */
.panel { background: var(--surface); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); margin-bottom: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.card { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.card h3 { font-size: .85rem; color: var(--muted); font-weight: 600; }
.card .val { font-size: 1.35rem; font-weight: 650; margin: .1em 0; }
.card .meta { font-size: .75rem; margin: 0; }
.wi { width: 24px; height: 24px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wi .s-sun { fill: #ffc94a; stroke: #f0a020; } .wi .s-ray { stroke: #f0a020; }
.wi .s-cloud { fill: #e7ecf3; stroke: #8a97ab; } [data-theme="dark"] .wi .s-cloud { fill: #3a465c; stroke: #9aa8bf; }
.wi .s-drop { stroke: #3d7bea; } .wi .s-flake { fill: #8fb8ff; stroke: #5a86d6; } .wi .s-bolt { stroke: #f0a020; stroke-width: 2; } .wi .s-line { stroke: #7a879b; }
.hourly { list-style: none; display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; margin: 0; scroll-snap-type: x proximity; }
.hour { flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: var(--surface-2); border-radius: 12px; scroll-snap-align: start; font-size: .85rem; text-align: center; }
.hour .wi { width: 30px; height: 30px; }
.h-time { font-weight: 600; } .h-temp { font-size: 1.1rem; font-weight: 650; } .h-pop { color: #2a5db0; } [data-theme="dark"] .h-pop { color: #8ab4ff; }
.h-wind, .h-mm { color: var(--muted); font-size: .75rem; }
.step { display: block; font-size: .65rem; color: var(--muted); font-weight: 400; }
.step6 { outline: 1px dashed var(--line); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
thead th { font-size: .8rem; color: var(--muted); font-weight: 600; }
tbody th { font-weight: 600; white-space: nowrap; }

/* Tabs (progressive: all panels visible without JS) */
.tabs { margin-bottom: 14px; }
.tablist { display: none; }
.tabs.js .tablist { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 10px; }
.tabs.js .panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tablist [role="tab"] { font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; cursor: pointer; white-space: nowrap; min-height: 40px; }
.tablist [aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.day-detail .day-head { font-size: 1.1rem; }

.clothing { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.clothing > li { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.clothing ul { padding-left: 18px; margin: 0; } .clothing ul li { margin-bottom: 4px; }
.clothing .meta { display: block; }

.sun-chart svg { width: 100%; height: auto; }
.sun-chart .daylight { fill: color-mix(in srgb, #ffc94a 45%, transparent); stroke: #f0a020; stroke-width: 1.5; }
.sun-chart .grid { stroke: var(--line); } .sun-chart .today { stroke: var(--accent); stroke-width: 2; }
.sun-chart .axis { font-size: 11px; fill: var(--muted); }
.sun-chart figcaption { font-size: .85rem; color: var(--muted); }
.sun-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sun-pick input { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }

.city-list, .country-list { columns: 3 200px; padding-left: 18px; }
.benefits { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 20px; margin: 14px 0; }
.ad-slot { margin: 14px auto; text-align: center; min-height: 110px; }
.ad-label { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ad-banner .ad-inner { width: min(728px, 100%); height: 90px; margin: 0 auto; background: var(--surface-2); }

/* Travel */
.fx { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fx label { display: flex; flex-direction: column; font-size: .85rem; gap: 4px; }
.fx input, .fx select, .settings select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); min-height: 40px; }
#fx-out { display: block; margin: 12px 0; font-size: 1.1rem; }

/* Dialogs */
.dlg { border: 1px solid var(--line); border-radius: 16px; padding: 0; width: min(560px, 94vw); background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dlg::backdrop { background: rgba(10,15,25,.45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; }
.dlg-body { padding: 14px 18px 18px; max-height: 75vh; overflow: auto; }
.auth-buttons { display: grid; gap: 8px; margin: 12px 0; }
.email-form, .code-form { display: grid; gap: 8px; margin: 10px 0; }
.email-form input, .code-form input { font: inherit; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 100%; }
.err { color: var(--danger); }
.settings fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; padding: 8px 12px 12px; }
.settings legend { font-weight: 600; padding: 0 4px; }
.chip { display: inline-flex; gap: 6px; align-items: center; margin: 4px 10px 4px 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.swatch input { position: absolute; opacity: 0; }
.sw { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: conic-gradient(#f0a35e, #c4925f, #5db36e, #7aa7d9, #f0a35e); }
.swatch input:checked + .sw { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatch input:focus-visible + .sw { outline: 3px solid var(--accent); }
.move { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.save-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.savebar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow); max-width: 94vw; flex-wrap: wrap; }
.toast { position: fixed; right: 16px; bottom: 76px; z-index: 50; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; max-width: 360px; }
.saved-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.prose { max-width: 70ch; } .glossary dt { font-weight: 700; margin-top: 10px; }

.site-footer { border-top: 1px solid var(--line); padding: 20px; max-width: 1100px; margin: 0 auto; font-size: .9rem; color: var(--muted); }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; }

@media (max-width: 700px) {
  .site-header { padding: 8px 12px; }
  .site-header nav { order: 3; width: 100%; overflow-x: auto; }
  .site-header .header-search { order: 4; max-width: none; flex-basis: 100%; }
  .site-header .header-search .suggest { left: 0; min-width: 0; }
  .site-header nav ul { flex-wrap: nowrap; }
  main { padding: 12px; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "stage" "body" "foot"; padding: 14px; }
  .companion-stage { min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
[data-anim="off"] *, [data-anim="off"] *::before, [data-anim="off"] *::after { animation: none !important; }
[data-paused="true"] *, [data-paused="true"] *::after { animation-play-state: paused !important; }