/* uvindex.au shared theme — dark coastal · r4 "simpler & clearer" (2026-10-06) */
:root{
  --bg:#071a28; --card:#0e2a3f; --card2:#11344d; --well:#0a2233;
  --ink:#e8f4fc; --muted:#a9c3d5; --accent:#f5b942; --line:#1e4a66; --line2:#2a5878;
  --link:#7dd3fc; --link-hover:#bae6fd;
  --low:#3dd68c; --mod:#f5b942; --high:#ff8a3d; --vh:#ff5a5a; --ex:#c44dff;
  --ok:#3dd68c; --err:#ff5a5a;
  --wrap-max:1100px;
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2.25rem;
  --radius:16px; --tap:44px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-size:1rem;line-height:1.55;
  color:var(--ink);min-height:100vh;
}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
/* Comfortable hit area for links inside text without changing layout */
main p a,main li a,footer p a,footer li a,figcaption a{padding-block:.8rem}
h1,h2,h3{line-height:1.2;margin:0}
h1{font-size:clamp(1.65rem,5vw,2.25rem);letter-spacing:-.02em}
h2{font-size:1.25rem}
h3{font-size:1.0625rem}
p{margin:0}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 1rem}
body.page-city{--wrap-max:860px}
body.page-contact{--wrap-max:640px}
.muted{color:var(--muted)}
p.muted{font-size:.9375rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header / nav */
.brand{font-weight:800;font-size:1.125rem;color:var(--ink);text-decoration:none;
  min-height:var(--tap);display:inline-flex;align-items:center}
.brand span{color:var(--accent)}
.brand:hover{color:var(--ink)}

/* Page intro */
.intro{margin:var(--s4) 0 var(--s3)}
.intro .tag{color:var(--muted);margin-top:.35rem;max-width:40rem}
.crumb{margin:var(--s3) 0 .35rem;font-size:.9375rem}
.crumb + h1{margin-bottom:var(--s3)}

/* Buttons / inputs */
.btn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:48px;padding:0 1.1rem;color:var(--ink);font:inherit;font-weight:650;text-decoration:none;cursor:pointer;
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-accent{font-weight:750}
.btn-block{width:100%}
.btn-quiet{appearance:none;background:none;border:0;color:var(--muted);font:inherit;font-size:.9375rem;
  min-height:var(--tap);min-width:var(--tap);padding:0 .6rem;cursor:pointer;text-decoration:underline}
.btn-quiet:hover{color:var(--ink)}
label{display:block;font-weight:650;margin:0 0 .35rem;color:var(--ink)}
input[type=text],input[type=email],input[type=search],select,textarea{
  width:100%;min-height:48px;border:1px solid #2f5f80;color:var(--ink);padding:.65rem .85rem;font:inherit;
}
input::placeholder,textarea::placeholder{color:#8fb0c6}
textarea{min-height:150px;resize:vertical}

/* Home: find bar */
.find{display:flex;flex-direction:column;gap:.6rem;margin:0 0 .4rem}
.find .search{font-size:1.0625rem}
@media (min-width:560px){.find{flex-direction:row}.find .search{flex:1 1 auto}.find .btn{flex:0 0 auto}}

/* Badges */
.badge{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-size:.875rem;font-weight:750;color:var(--bg);white-space:nowrap;line-height:1.5}
.low{background:var(--low)}.mod{background:var(--mod)}.high{background:var(--high)}.vh{background:var(--vh)}.ex{background:var(--ex)}
.badge.vh,.badge.ex{color:#000;font-weight:800}
.badge.none{background:var(--line);color:var(--ink)}

/* "Right now" card (home + city) */
.now-card{border-left:5px solid var(--line2);padding:var(--s3) 1.15rem;margin:0 0 var(--s4);
}
.now-card.band-low{border-left-color:var(--low)}.now-card.band-mod{border-left-color:var(--mod)}
.now-card.band-high{border-left-color:var(--high)}.now-card.band-vh{border-left-color:var(--vh)}.now-card.band-ex{border-left-color:var(--ex)}
.now-head{font-size:clamp(1.2rem,3.6vw,1.5rem);font-weight:750;margin-bottom:.6rem}
.now-row{display:flex;align-items:center;gap:var(--s3);margin:.25rem 0 .6rem}
.now-label{color:var(--muted);font-size:.9375rem;font-weight:600}
.now-uv{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.1rem 0}
.now-num{font-size:2.75rem;font-weight:800;line-height:1}
.now-where{color:var(--ink);font-weight:600}
.gauge-svg{flex:0 0 auto;width:132px;height:auto}
@media (min-width:700px){.gauge-svg{width:190px}.now-num{font-size:3.25rem}}
.gauge-svg .arc-seg{fill:none;stroke-width:16;stroke-linecap:butt}
.gauge-svg .needle{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.gauge-svg .hub{fill:var(--ink)}
.city-now .now-num{font-size:3.25rem}

/* Home: cities by state (one layout: rows on phones, cards on wider screens) */
.state-group{margin:0 0 var(--s3)}
.state-group h3{color:var(--muted);font-size:.9375rem;font-weight:700;margin:0 0 .4rem}
.grid{display:grid;grid-template-columns:1fr;gap:.5rem}
@media (min-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
a.city{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name uv badge" "line uv badge";
  align-items:center;column-gap:.6rem;min-height:58px;padding:.5rem .9rem;border:1px solid var(--line);border-left:5px solid var(--line2);color:var(--ink);text-decoration:none;
}
a.city:hover,a.city:focus-visible{border-color:var(--line3)}
a.city.band-low{border-left-color:var(--low)}a.city.band-mod{border-left-color:var(--mod)}a.city.band-high{border-left-color:var(--high)}
a.city.band-vh{border-left-color:var(--vh)}a.city.band-ex{border-left-color:var(--ex)}
.city-name{grid-area:name;font-weight:700;font-size:1.0625rem}
.city-line{grid-area:line;color:var(--muted);font-size:.875rem}
.city-uv{grid-area:uv;font-size:1.6rem;font-weight:800}
a.city .badge{grid-area:badge;min-width:5.6rem;text-align:center}

/* Levels explainer */
.levels{margin:var(--s5) 0 var(--s4)}
.levels h2{margin-bottom:var(--s2)}
.level-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.level-list li{display:grid;grid-template-columns:9.5rem 1fr;
  background:var(--well);border:1px solid var(--line);border-radius:12px}
.level-list .badge{justify-self:start}
@media (max-width:420px){.level-list li{grid-template-columns:1fr;gap:.35rem}}
.sss{margin-top:var(--s3);color:var(--muted)}
.sss strong{color:var(--ink)}

/* Folded sections */
details.fold{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 var(--s3)}
details.fold > summary{
  min-height:52px;display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;cursor:pointer;font-weight:650;list-style:none;
}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:"+";display:inline-flex;justify-content:center;width:1.25rem;color:var(--accent);font-weight:800;font-size:1.25rem;line-height:1}
details.fold[open] > summary::before{content:"–"}
details.fold > :not(summary){margin:0 1rem .9rem}
details.fold p + p{margin-top:.6rem}

/* Footer */
.site-footer{margin-top:var(--s5);padding-top:var(--s3);padding-bottom:var(--s4);border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem}
.site-footer details.fold{background:transparent}

/* City page */
.city-hero{margin:0 0 var(--s4);overflow:hidden;border:1px solid var(--line);background:var(--well)}
.city-hero picture{display:block}
.city-hero img{display:block;width:100%;height:150px;object-fit:cover}
@media (min-width:700px){.city-hero img{height:220px}}
.city-hero-credit{padding:.2rem .8rem;font-size:.875rem;color:var(--muted)}
.section{margin:var(--s4) 0}
.section > h2{margin-bottom:var(--s2)}
.days{list-style:none;margin:0 0 .5rem;padding:0;display:grid;gap:.5rem}
@media (min-width:600px){.days{grid-template-columns:repeat(3,minmax(0,1fr))}}
.day{display:grid;gap:.2rem;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--line2);border-radius:12px;padding:.7rem .9rem}
.day.band-low{border-left-color:var(--low)}.day.band-mod{border-left-color:var(--mod)}.day.band-high{border-left-color:var(--high)}
.day.band-vh{border-left-color:var(--vh)}.day.band-ex{border-left-color:var(--ex)}
.day-name{font-weight:700}
.day-uv{display:flex;align-items:center;gap:.5rem}
.day-uv strong{font-size:1.5rem;font-variant-numeric:tabular-nums}
.day-sun{color:var(--muted);font-size:.9375rem}
.tip{border-left:4px solid var(--accent);padding:.7rem 1rem;margin:0 0 .5rem}
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--s3)}
.pill-list a,.pill-list strong{
  min-height:var(--tap);display:inline-flex;align-items:center;padding:0 .95rem;
  border:1px solid #2f5f80;background:var(--well);text-decoration:none;font-size:.9375rem;
}
.pill-list strong{border-color:var(--accent);color:var(--ink)}
details.fold .pill-list{margin-top:.25rem}

/* Analytics */
.summary-card{background:linear-gradient(180deg,var(--card2),#0c283c);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) 1.15rem;margin:0 0 var(--s4)}
#hero-stats:not(:empty){margin-bottom:var(--s3)}
.picker{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;margin:0 0 .5rem}
.picker label{margin:0}
.picker select{flex:1 1 14rem;width:auto}
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) 1.1rem}
.chart-card > p.muted{margin-bottom:.6rem}
.chart-wrap{position:relative;height:260px;max-width:100%}
.chart-wrap.tall{height:300px}
.top-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;counter-reset:top}
.top-list li{counter-increment:top;display:grid;grid-template-columns:minmax(7.5rem,9rem) 1fr auto;align-items:center;gap:.6rem;min-height:var(--tap)}
.top-list li a{padding-block:.8rem;font-weight:600}
.top-list li a::before{content:counter(top) ". ";color:var(--muted);font-weight:500}
.top-bar{height:12px;border-radius:6px;background:var(--well);overflow:hidden;display:block}
.top-bar > span{display:block;height:100%;border-radius:6px}
.top-val{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.top-val .muted{font-weight:500;font-size:.9375rem}
@media (max-width:560px){.chart-wrap{height:220px}.chart-wrap.tall{height:250px}}
details.fold code{background:var(--well);padding:.1rem .35rem;border-radius:4px}
details.fold ul{padding-left:1.25rem}
.empty-state{background:var(--well);border:1px solid var(--line);border-radius:14px;padding:var(--s3);color:var(--muted)}
.empty-state strong{color:var(--ink);display:block;margin-bottom:.35rem}
.empty-state p{margin:.35rem 0 .75rem}

/* Contact */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.banner{border-radius:12px;padding:.85rem 1rem;margin:0 0 var(--s3)}
.banner.ok{background:rgba(61,214,140,.12);border:1px solid rgba(61,214,140,.35);color:var(--ok)}
.banner.err{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);color:#ffb4b4}
.card{margin:0 0 var(--s4)}
.field{margin:0 0 var(--s3)}
.card form > p.muted{margin-top:var(--s2)}
.card h2{margin-bottom:.5rem}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s3)}
#char-count{margin-top:.35rem}

@media (max-width:375px){
  .wrap{padding:0 .75rem}
  .now-card,.summary-card,.chart-card{padding-left:.9rem;padding-right:.9rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ===== r5 declutter (2026-10-14) ===== */
/* Header gear */
.gear{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);flex:0 0 auto;color:var(--muted);cursor:pointer;margin-left:.25rem}
.gear:hover{color:var(--ink)}
@media (max-width:420px){.brand{font-size:1rem}}

/* Detailed-only extras */
.adv{display:none}
html[data-mode=detailed] .adv{display:revert}
html[data-mode=detailed] span.adv{display:inline}

/* ⓘ explain + tappable badge */
.info{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;
  border:1px solid var(--line2);background:var(--well);color:var(--link);font:italic 700 .8125rem/1 Georgia,serif;cursor:pointer;
  vertical-align:middle;position:relative}
.info::after{content:"";position:absolute;inset:-10px}  /* 44px hit area */
.info[aria-expanded=true]{background:var(--link);color:var(--bg)}
.pop{display:block;margin:.5rem 0;border:1px solid var(--line2);padding:.6rem .8rem;font-size:.9375rem;font-weight:400;color:var(--ink)}
.pop[hidden]{display:none}
.explain strong{display:block;margin-bottom:.15rem}
.badge-btn{border:0;font:inherit;font-size:.875rem;font-weight:750;cursor:pointer;min-height:32px;padding:.12rem .7rem;position:relative}
.badge-btn::after{content:" ▾";font-size:.75em}
.badge-btn[aria-expanded=true]::after{content:" ▴"}
.scale{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.scale li{display:grid;grid-template-columns:8.6rem 1fr;gap:.6rem;align-items:center;opacity:.72}
.scale li.is-cur{opacity:1;font-weight:650}
.scale li.is-cur .badge{outline:2px solid var(--ink);outline-offset:1px}
@media (max-width:420px){.scale li{grid-template-columns:1fr;gap:.15rem}}

/* Hero: one number + one action sentence */
.action{font-size:1.1875rem;font-weight:700;color:var(--accent);margin:.5rem 0 .25rem}
.action.is-low{color:var(--low)}
.now-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem .75rem;margin-top:.4rem}
.fresh{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.875rem}
.fresh .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok)}
.fresh.stale{color:var(--mod)}
.fresh.stale .dot{background:var(--mod)}
.set-city[aria-pressed=true]{color:var(--accent);text-decoration:none}

/* Timeline card with day tabs */
.tl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.5rem 1.15rem var(--s3);margin:0 0 var(--s4)}
.tabs{display:none}
html.js .tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin:0 -.4rem .75rem;overflow-x:auto}
.tabs [role=tab]{appearance:none;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);font:inherit;font-weight:650;
  min-height:var(--tap);padding:0 .7rem;cursor:pointer;white-space:nowrap}
.tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs [role=tab]:hover{color:var(--ink)}
.tab-pk{font-variant-numeric:tabular-nums;font-weight:800;margin-left:.15rem}
.band-t-low{color:var(--low)}.band-t-mod{color:var(--mod)}.band-t-high{color:var(--high)}.band-t-vh{color:var(--vh)}.band-t-ex{color:#d78bff}
html.js .tl-panel[data-inactive]{display:none}
.tl-panel + .tl-panel{margin-top:var(--s4)}
html.js .tl-panel + .tl-panel{margin-top:0}
.tl-day{font-size:.9375rem;color:var(--muted);margin:.25rem 0 .35rem}
html.js .tl-day{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .5rem;margin:0 0 .4rem}
.tl-win-txt{font-size:1.375rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.tl{position:relative;padding:1.55rem 0 1.5rem}
.tl-track{display:flex;height:30px;border-radius:8px;overflow:hidden;border:1px solid #2f5f80;background:var(--well)}
.tl-h{flex:1 1 0;min-width:0}
.tl-h:not(.is-protect){opacity:.45}
.tl-h.no-data{background:transparent}
.tl-win{position:absolute;top:1.3rem;bottom:1.25rem;border:2px solid var(--ink);border-radius:9px;pointer-events:none}
.tl-t{position:absolute;top:-1.55rem;font-size:.875rem;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-s{left:-2px;transform:translateX(-50%)}
.tl-e{right:-2px;transform:translateX(50%)}
.tl-now{position:absolute;top:1.15rem;bottom:1.1rem;width:0;border-left:3px solid var(--white);box-shadow:0 0 0 1px var(--bg)}
.tl-now span{position:absolute;bottom:-1.45rem;left:0;transform:translateX(-50%);color:var(--bg);font-size:.75rem;font-weight:800;
  border-radius:999px;padding:0 .4rem;line-height:1.35}
.tl-ticks{position:absolute;left:0;right:0;bottom:0;height:1.2rem;font-size:.8125rem;color:var(--muted)}
.tl-ticks span{position:absolute;transform:translateX(-50%)}
.tl-sub{margin-top:.15rem}
.tl-sub strong{color:var(--ink)}
.lowline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-weight:650;font-size:1.0625rem;margin:.25rem 0}
details.mini > summary{cursor:pointer;color:var(--link);min-height:var(--tap);display:inline-flex;align-items:center}
details.mini > summary::after{content:" ▸"}
details.mini[open] > summary::after{content:" ▾"}

/* Settings sheet */
dialog.sheet{width:min(30rem,100vw);max-height:92vh;margin:auto auto 0;border:1px solid var(--line2);border-radius:18px 18px 0 0;
  background:var(--card);color:var(--ink);padding:0 1.1rem 1rem}
@media (min-width:700px){dialog.sheet{margin:auto;border-radius:18px}}
dialog.sheet::backdrop{background:rgba(3,10,16,.65)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);padding-top:.5rem;z-index:1}
.sheet-x{text-decoration:none;font-size:1.1rem}
.sheet-row{border:0;border-top:1px solid var(--line);margin:0;padding:.8rem 0}
.sheet-row label,.sheet-row legend{font-weight:700;margin-bottom:.4rem;padding:0}
.sheet-ctl{display:flex;gap:.5rem}
.sheet-ctl select{flex:1 1 auto;width:auto}
.sheet-note{margin-top:.35rem;font-size:.875rem}
.seg{display:flex;gap:.5rem}
.seg label{flex:1;display:flex;align-items:center;gap:.4rem;min-height:var(--tap);padding:0 .8rem;border:1px solid var(--line2);border-radius:12px;font-weight:600;cursor:pointer;margin:0}
.seg label:has(input:checked){border-color:var(--accent);background:var(--well)}
.sheet-foot{border-top:1px solid var(--line);padding-top:.25rem}
.toast{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-weight:650;padding:.6rem 1rem;z-index:var(--z-toast);max-width:92vw}

/* Home: my-city card + folded other cities */
html.has-city .now-card.national{display:none}
details.cities-fold{background:transparent;border:0;margin:0}
details.cities-fold > summary{padding:.6rem 0;font-size:1.25rem;font-weight:750}
details.cities-fold > summary::before{content:none}
details.cities-fold > summary::after{content:"▾";color:var(--accent);margin-left:.15rem}
details.cities-fold[open] > summary::after{content:"▴"}
details.cities-fold > :not(summary){margin:0}
.sort-note{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.9375rem;margin:0 0 .6rem}

/* Analytics: summary + one chart at a time */
.trend-summary{font-size:1.125rem;line-height:1.5}
.chart-tabs{margin-top:0}
.stack{display:flex;height:44px;border-radius:10px;overflow:hidden;border:1px solid var(--line2)}
.stack span{display:flex;align-items:center;justify-content:center;min-width:0;color:var(--bg);font-weight:750;font-size:.8125rem;white-space:nowrap;overflow:hidden}
.stack-labels{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.9375rem}
.stack-labels i{display:inline-block;width:.75rem;height:.75rem;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.fallback-table{width:100%;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums}
.fallback-table th,.fallback-table td{text-align:left;padding:.3rem .4rem;border-bottom:1px solid var(--line)}
details.cities-fold > summary{display:flex;align-items:center;gap:.4rem;list-style:none;cursor:pointer;min-height:52px}
details.cities-fold > summary::-webkit-details-marker{display:none}
details.cities-fold > summary h2{font-size:1.25rem}
details#levels > summary{list-style:none}

/* forecast clarity: recorded = solid, forecast = hatched + dimmer, labelled */
.tl-h.is-fc{opacity:.6;background-image:repeating-linear-gradient(135deg,rgba(7,26,40,.6) 0 3px,transparent 3px 7px)}
.tl-h.is-fc:not(.is-protect){opacity:.3}
.tl-fc-tag{position:absolute;top:calc(1.55rem + 7px);margin-left:5px;max-width:14%;font:700 .6875rem/1.4 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  color:#dde6ed;background:rgba(7,26,40,.78);padding:0 .35rem;border-radius:4px;pointer-events:none;white-space:nowrap}
.tl-now{border-left-color:var(--sun-gold)}
.tl-now span{background:var(--sun-gold)}
.fc-tag{display:inline-block;font:700 .625rem/1.5 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:0 .3rem;vertical-align:.12em}
.fc-tag{color:#dde6ed;border:1px dashed #dde6ed;opacity:.85}
.tl-legend{font-size:.75rem;color:#dde6ed;margin-left:.5rem}
.tl-legend i{display:inline-block;width:.9rem;height:.6rem;border-radius:2px;margin:0 .25rem 0 .5rem;background:#dde6ed}
.tl-legend .lg-fc{opacity:.5;background:repeating-linear-gradient(135deg,#dde6ed 0 2px,transparent 2px 4px)}
.kind-rec{color:#dde6ed}
.chart-note{font-size:.8125rem;color:#dde6ed;margin:.35rem 0 0}

/* vector 2026-10-17: SSR sun dial (city hero) + SVG hourly bars (uvviz.js). Data: Open-Meteo. */
.now-dial{position:relative;width:200px;height:200px;margin:.2rem 0 .4rem}
.uvdial{display:block;width:200px;height:200px;font-family:Inter,system-ui,sans-serif}
.uvdial .d-face{fill:var(--bg);fill-opacity:.35;stroke:var(--white);stroke-opacity:.12;stroke-width:1;vector-effect:non-scaling-stroke}
.uvdial .d-band{stroke-width:5}
.uvdial .d-track{fill:none;stroke:var(--bg);stroke-opacity:.55;stroke-width:9}
.uvdial .d-fill{stroke-width:9;stroke-linecap:round}
.uvdial .d-low{stroke:var(--low);fill:var(--low)}.uvdial .d-mod{stroke:var(--mod);fill:var(--mod)}.uvdial .d-high{stroke:var(--high);fill:var(--high)}
.uvdial .d-vh{stroke:var(--vh);fill:var(--vh)}.uvdial .d-ex{stroke:var(--ex);fill:var(--ex)}
.uvdial .d-band,.uvdial .d-fill{fill:none}
.uvdial .d-tk{stroke:#dde6ed;stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}
.uvdial .d-tk.maj{stroke-opacity:.9;stroke-width:1.5}
.uvdial .d-n{font-size:11px;font-weight:600;fill:#dde6ed;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.uvdial .d-ndl{fill:var(--sun-gold)}
.uvdial .d-hub{stroke:none}
.now-dial .now-uv{position:absolute;left:0;right:0;top:118px;flex-direction:column;gap:.3rem;margin:0}
.now-dial .now-num{font-size:2.5rem;text-shadow:0 1px 2px rgba(7,26,40,.6)}
.now-dial .badge-btn{font-size:.75rem}
@media (min-width:700px){.city-now .now-dial .now-num{font-size:2.5rem}}
.tl-track.is-svg{display:block;height:56px;border:0;border-radius:0;background:none;overflow:visible}
.tl-track.is-svg svg{display:block;width:100%;height:56px}
.tl.has-svg .tl-win{top:1.3rem;bottom:1.25rem}
/* vecfix 2026-10-17: dial card layout — stacked on phones, dial beside a compact panel from 700px */
.now-facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:var(--s2) 0 0}
.now-facts div{min-width:0}
.now-facts dt{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#dde6ed;opacity:.8}
.now-facts dd{margin:0;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.now-facts dd small{font-weight:500;color:#dde6ed}
.now-tip{display:none;margin:var(--s3) 0 0;padding-left:var(--s2);border-left:2px solid var(--sun-gold);color:#dde6ed;font-size:.9375rem;max-width:46ch}
@media (min-width:700px){
  .city-now{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-areas:"label label" "dial side" "scale scale" "foot foot";column-gap:var(--s5);align-items:center}
  .city-now>.now-label{grid-area:label}
  .city-now>.now-dial{grid-area:dial;margin:var(--s1) 0}
  .city-now>.now-side{grid-area:side}
  .city-now>[id^="scale-"]{grid-area:scale}
  .city-now>.now-foot{grid-area:foot}
  .city-now .action{margin-top:0}
  .now-tip{display:block}
}
@media (min-width:1024px){.city-now{grid-template-columns:200px minmax(0,1fr);padding:var(--s4) var(--s5)}}
/* vecfix 2026-10-17: homepage dot-field teaser (static SVG image from /teaser.php, lazy) */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) 140px;align-items:center;gap:var(--s3);margin:var(--s4) 0;padding:var(--s3) 1.15rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none}
.teaser:hover,.teaser:focus-visible{border-color:var(--sun-gold);color:var(--ink)}
.teaser:focus-visible{outline:2px solid var(--sun-gold);outline-offset:2px}
@media (min-width:700px){.teaser{grid-template-columns:minmax(0,1fr) 220px}}
@media (prefers-reduced-motion:no-preference){.teaser{transition:border-color .2s}}

/* ---- v2: self-hosted fonts (OFL, Latin subset) ---- */
@font-face{font-family:Inter;src:url(/assets/fonts/inter-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
.num,.now-num,.city-uv{font-variant-numeric:tabular-nums}

/* ---- v2: site footer ---- */
.sf{color:var(--muted);font-size:.875rem}
.sf .wrap{display:grid}
.sf-ack-t{margin:0;font-family:"Instrument Serif",ui-serif,Georgia,serif;font-size:1.125rem;line-height:1.45;color:#dde6ed;max-width:60rem;text-wrap:pretty}
.sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sf-col h3{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-gold);margin:0 0 8px;font-weight:650}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sf-col li{min-height:40px;display:flex;align-items:center}
.sf-col a{color:#dde6ed;text-decoration:none;padding:8px 0!important;border-radius:6px;transition:color .2s}
.sf-col a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.sf-soon{color:var(--muted)}.sf-soon em{font-style:normal;font-size:.6875rem;margin-left:4px;padding:2px 6px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.sf-ext{font-size:.75em;color:var(--muted)}
.sf-notes{display:grid;grid-template-columns:1fr 1fr;line-height:1.55}
.sf-notes p{margin:0}.sf-notes strong{color:#dde6ed}
.sf-notes a{padding:0!important}
.sf-base{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem}
.sf-top{margin-left:auto;color:#dde6ed;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;padding:0 12px!important;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2)}
@media (max-width:860px){.sf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-notes{grid-template-columns:1fr}}
@media (max-width:380px){.sf-cols{grid-template-columns:1fr}}
body.fx-open .sf{grid-column:1/-1}

/* ---- v2: simple content pages (about / privacy / terms / accessibility) ---- */
.doc{max-width:44rem}.doc h1{margin:24px 0 8px}.doc h2{margin:32px 0 8px;font-size:1.125rem}.doc p,.doc li{color:#c9d8e3;line-height:1.65}.doc p+p{margin-top:12px}.doc ul{padding-left:1.2rem}
.doc .stub{display:inline-block;margin:8px 0;padding:4px 10px;border-radius:999px;font-size:.75rem;background:rgba(255,210,122,.12);color:var(--sun-gold)}
/* footer spacing on the 8px grid */
.sf{margin-top:64px;padding:48px 0 32px}.sf .wrap{gap:32px}.sf-ack{padding:24px}.sf-cols{gap:32px 24px}.sf-col h3{margin-bottom:8px}.sf-notes{gap:16px 32px}
@media (max-width:600px){.sf{padding:32px 0 24px}.sf .wrap{gap:24px}.sf-ack{padding:16px}}

/* site-wide development notice (in flow, never over the map) */
.devn{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:6px 8px 6px 12px;border-radius:999px;background:linear-gradient(180deg,rgba(255,210,122,.14),rgba(255,210,122,.08));color:#dde6ed;font-size:.8125rem;line-height:1.4}
.devn[hidden]{display:none}
.devn-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--sun-gold);box-shadow:0 0 0 3px rgba(255,210,122,.2)}
.devn-t{margin:0;flex:1;min-width:0}.devn-t strong{color:var(--white);font-weight:650}
.devn-t a{color:var(--sun-gold);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.devn-x{flex:none;appearance:none;border:0;background:none;color:#dde6ed;width:32px;height:32px;border-radius:50%;font-size:1.125rem;line-height:1;cursor:pointer}
.devn-x:hover{background:rgba(255,255,255,.08);color:var(--white)}.devn-x:focus-visible{outline:2px solid var(--sun-gold);outline-offset:1px}
@media (max-width:600px){.devn{border-radius:16px;align-items:flex-start;font-size:.75rem}}
.sf-dev a{color:var(--sun-gold)}

/* ===== r6 "feel" (2026-10-17): living sky, elevation surfaces, rhythm ===== */
:root{--sun:.6;--dusk:0;--night:0;--e1:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));--spec:inset 0 1px 0 rgba(255,255,255,.10);--shadow:0 1px 2px rgba(2,10,18,.35),0 8px 24px rgba(2,10,18,.28)}
html{scrollbar-color:var(--line2) transparent;scrollbar-width:thin}
html::-webkit-scrollbar{width:10px}html::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:2px solid #061521}html::-webkit-scrollbar-track{background:transparent}
body,html body.page-map{background:transparent}
body::before{content:"";position:fixed;z-index:-2;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
  body::before{animation:uv-par linear both;animation-timeline:scroll(root)}
  @keyframes uv-par{to{transform:translateY(-6vh)}}
  body:not(.page-home):not(.page-map) main .card,body:not(.page-home):not(.page-map) main > section{animation:uv-rise linear both;animation-timeline:view();animation-range:entry 0% entry 20%}
  @keyframes uv-rise{from{opacity:.6;transform:translateY(8px)}}
}}
/* surfaces: luminance elevation + 1px specular edge */
.card{padding:24px}
@media (max-width:600px){.card{padding:16px}}
main,.card,table{font-variant-numeric:tabular-nums}
/* page header component */
body:not(.page-home) .site-head + main h1,body:not(.page-home) main > header h1,body:not(.page-home) h1{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-weight:400;letter-spacing:-.01em;font-size:clamp(2rem,6vw,3rem);line-height:1.1}
body.page-map h1{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:clamp(1.65rem,5vw,2.25rem)}
/* nav */
.brand{letter-spacing:-.01em}
/* tables */
main table:not(.cm-table){border-collapse:separate;border-spacing:0;width:100%}
main table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#dde6ed;font-weight:650;background:rgba(255,255,255,.03)}
main table th,main table td{padding:8px 12px;border-bottom:1px solid rgba(42,88,120,.45)}
main table tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
main table tbody tr:hover{background:rgba(125,211,252,.06)}
/* rhythm */
main section + section{margin-top:24px}
::selection{background:rgba(255,210,122,.35);color:var(--white)}
:focus-visible{outline-color:var(--sun-gold)}
/* health copy (r7): Learn block, level list, protect line */
.learn{margin-top:24px}
.learn h2{margin-bottom:12px}
.learn-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.learn-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:8px 0;border-bottom:1px solid rgba(42,88,120,.4);line-height:1.5}
.learn-list li:last-child{border-bottom:0}
.learn-src{font-size:.75rem;color:var(--steel);text-decoration:none;padding:2px 8px!important;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(155,184,204,.35);white-space:nowrap}
.learn-src:hover{color:var(--white);box-shadow:inset 0 0 0 1px var(--sun-gold)}
.learn-more{margin-top:12px;font-size:.875rem;color:var(--muted)}
.level-list li{align-items:baseline;gap:12px;padding:8px 0}
.level-list .badge{min-width:8.5rem;justify-content:center;flex:none}
@media (max-width:600px){.level-list li{flex-direction:column;gap:4px}.level-list .badge{min-width:0}}

/* ===== r8 motion tokens (2026-10-18): one system for CSS and JS (window.UVM mirrors these values) =====
   fast 150ms = hover/press/colour · base 250ms = small moves, value tweens, popovers · slow 400ms = layout, sheets, expand.
   --ease = standard, --ease-out = decelerate (entering), --spring = critically damped (settles, never overshoots). */
:root{--m-fast:150ms;--m-base:250ms;--m-slow:400ms;--ease:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in:cubic-bezier(.3,0,1,1);
  --spring:linear(0,.042 4%,.136 8%,.25 12%,.367 16%,.477 20%,.596 25%,.694 30%,.785 36%,.86 43%,.911 50%,.955 60%,.982 72%,.995 86%,1)}
@media (prefers-reduced-motion:reduce){:root{--m-fast:0ms;--m-base:0ms;--m-slow:0ms}}
/* no-JS fallback: controls that need script stay hidden until the head boot adds html.js (was only defined on /map) */
html:not(.js) .js-only{display:none!important}

/* =====================================================================================================
   App shell (2026-10-19): persistent app bar, bottom tab bar (phones), My places, Plan, History, Data,
   command palette. Elevation: surfaces get lighter as they rise (e0 page → e4 active), each with a 1px
   inner top highlight. Spacing on a 4/8 px grid. Motion uses the shared --m-* tokens (0 under reduced motion).
   ===================================================================================================== */
:root{
  --abh:64px;--tbh:0px;
  --e0:#071a28;--e1:#0c283d;--e2:#11334d;--e3:#173f5e;--e4:#1e4d71;
  --hl1:inset 0 1px 0 rgba(255,255,255,.05);--hl2:inset 0 1px 0 rgba(255,255,255,.08);--hl3:inset 0 1px 0 rgba(255,255,255,.12);
  --bd1:rgba(160,205,235,.10);--bd2:rgba(160,205,235,.16);--bd3:rgba(160,205,235,.24);
  --sh2:0 4px 16px rgba(2,10,18,.28);--sh3:0 16px 48px rgba(2,10,18,.5);
  --g1:4px;--g2:8px;--g3:12px;--g4:16px;--g5:24px;--g6:32px;
}
html{scroll-padding-top:calc(var(--abh) + 12px)}
body{padding-top:var(--abh);padding-bottom:var(--tbh)}
.site-head{padding-top:0}

/* ---- app bar (fixed, solid: no backdrop blur over the animated map, so no per-frame re-blur cost) ---- */
.appbar{position:fixed;top:0;left:0;right:0;z-index:var(--z-appbar);height:var(--abh)}
.ab-in{height:100%;max-width:calc(var(--wrap-max) + 2rem);margin:0 auto;padding:0 var(--g4);display:flex;align-items:center;gap:var(--g3)}
body.shell .ab-in,body.page-map .ab-in{max-width:none;padding:0 var(--g5)}
body.shell .site-head{max-width:none;padding:0 var(--g5)}
.appbar .brand{flex:none;min-height:40px;font-size:1.125rem}
.ab-ico{flex:none;display:block}
.ab-search{position:relative;flex:0 1 380px;min-width:180px;height:40px;display:flex;align-items:center;margin-left:var(--g3);border:1px solid var(--bd2);transition:border-color var(--m-fast) var(--ease),background var(--m-fast) var(--ease)}
.ab-search>.ab-ico{margin:0 0 0 var(--g3);color:var(--muted)}
.ab-search input[type=search]{flex:1;min-width:0;height:38px;min-height:0;border:0;background:none;padding:0 var(--g2);color:var(--ink);font:inherit;font-size:.9375rem;border-radius:0}
.ab-search input:focus{outline:none}
.ab-search input::-webkit-search-cancel-button{display:none}
.ab-kbd{flex:none;appearance:none;margin:0 6px 0 0;height:28px;padding:0 var(--g2);border:1px solid var(--bd2);
  color:var(--muted);font:600 .75rem/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:var(--hl2)}
.ab-kbd kbd{font:inherit}
.ab-kbd:hover{color:var(--ink);border-color:var(--bd3)}
.ab-btn{appearance:none;flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 var(--g3);border:1px solid var(--bd2);color:var(--ink);font:600 .875rem/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:var(--hl2)}
.ab-btn[aria-busy=true]{opacity:.7;cursor:progress}
.ab-find{display:none;width:40px;padding:0;justify-content:center}
.ab-tabs{margin-left:auto;display:flex;gap:2px;padding:3px;border:1px solid var(--bd1)}
.ab-tab{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 var(--g3);color:var(--muted);text-decoration:none;font-weight:600;font-size:.875rem;
  white-space:nowrap}
main p a.ab-tab{padding-block:0}
.ab-map{margin-left:var(--g1)}
.appbar .gear{flex:none;width:40px;height:40px;border-radius:12px;background:var(--e2);border:1px solid var(--bd2);box-shadow:var(--hl2)}
.ab-list{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);margin:0;padding:var(--g1);list-style:none;z-index:2;max-height:min(60vh,420px);overflow:auto;border:1px solid var(--bd3)}
.ab-list li,.ck-list li[role=option]{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:6px var(--g3);cursor:pointer}
.o-n{font-weight:600;color:var(--ink);font-size:.9375rem}.o-s{color:var(--muted);font-weight:500;font-size:.8125rem;margin-left:4px}
.o-v{color:var(--muted);font-size:.8125rem}
.o-none{color:var(--muted);cursor:default!important}

/* ---- bottom tab bar (phones / narrow tablets) ---- */
.tabbar{display:none}
@media (max-width:999px){
  :root{--tbh:calc(64px + env(safe-area-inset-bottom,0px))}
  .ab-tabs{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);height:var(--tbh);padding:0 var(--g1) env(safe-area-inset-bottom,0px)}
  .tb-a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;color:var(--muted);text-decoration:none;font-size:.6875rem;font-weight:600;letter-spacing:.01em}
  .tb-a .ab-ico{width:44px;height:28px;padding:3px 11px;transition:background var(--m-fast) var(--ease),color var(--m-fast) var(--ease)}
  .tb-a.is-on{color:var(--ink)}
  .ab-search{margin-left:auto}
  .toast{bottom:calc(var(--tbh) + 12px)}
  .js .page-map .side{bottom:var(--tbh)}
}
@media (max-width:759px){
  :root{--abh:56px}
  .ab-in,body.shell .ab-in,body.page-map .ab-in{gap:var(--g2);padding:0 var(--g3)}
  body.shell .site-head{padding:0 var(--g3)}
  .ab-search{display:none}
  .ab-find{display:inline-flex;margin-left:auto}
  .ab-near{width:40px;padding:0;justify-content:center}.ab-near span{display:none}
}
/* map.css forces .js .js-only{display:flex!important}; keep the app bar's own breakpoints on /map */
.js .ab-find.js-only{display:none!important}
@media (max-width:759px){.js .ab-search.js-only{display:none!important}.js .ab-find.js-only{display:inline-flex!important}}
@media (min-width:1000px) and (max-width:1239px){.ab-tab .ab-ico{display:none}.ab-near span{display:none}.ab-near{width:40px;padding:0;justify-content:center}.ab-search{flex-basis:300px}}

/* ---- home shell layout: map left (sticky, always open on desktop), side panel right ---- */
@media (min-width:1000px){
  body.shell.fx-open main.wrap{grid-template-columns:minmax(0,1fr) 400px;padding:0 var(--g5);column-gap:var(--g5)}
  body.shell.fx-open main.wrap>.fx{top:calc(var(--abh) + var(--g2));margin:var(--g2) 0}
  body.shell.fx-open .fx-stage{height:calc(100vh - var(--abh) - 24px);height:calc(100svh - var(--abh) - 24px)}
  body.shell.shell-lock #fx-expand{display:none}
  body.shell .intro{margin:var(--g4) 0 var(--g3)}
  body.shell .intro h1{font-size:1.5rem}
}
@media (min-width:1400px){body.shell.fx-open main.wrap{grid-template-columns:minmax(0,1fr) 440px}}
body.shell .fx-row:has(#fx-pin){display:none} /* one pin system: My places (mirrored onto the map as pinned labels) */
@media (min-width:960px){.page-map .side{top:calc(var(--abh) + 1rem)}}
@media (min-width:960px){.page-map .side{max-height:calc(100vh - var(--abh) - 2rem)}}

/* ---- side panel sections ---- */
html.js .shell .sh-panel:not(.is-on){display:none}
html.js .sh-nojs{display:none}
.sh-panel{margin:0 0 var(--g6)}
html:not(.js) .sh-panel{padding-top:var(--g4);border-top:1px solid var(--bd1)}
.sh-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--g3);margin:var(--g2) 0 var(--g3)}
.sh-t{font-size:1.25rem;font-weight:650;letter-spacing:-.01em}
.sh-t:focus{outline:none}.sh-t:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.sh-hint{font-size:.8125rem;font-variant-numeric:tabular-nums}
.sh-lede{font-size:.9375rem;margin:0 0 var(--g3)}
.sh-h3{font-size:1rem;margin:var(--g5) 0 var(--g2)}
.sh-list{margin:0;padding-left:1.1rem;color:var(--ink);font-size:.9375rem}.sh-list li{margin:0 0 var(--g2)}
.sh-more{margin:var(--g4) 0 0;font-size:.9375rem;color:var(--muted)}
.sh-fine{margin:var(--g3) 0 0;color:var(--muted);font-size:.8125rem;line-height:1.5}
.sh-load{color:var(--muted);font-size:.9375rem;padding:var(--g4) 0}
.sh-nojs{color:var(--muted);font-size:.9375rem}
.dl{margin:0;display:grid;gap:var(--g2)}
.dl>div{display:grid;grid-template-columns:96px 1fr;gap:var(--g3);align-items:baseline;padding:var(--g3);border:1px solid var(--bd1);box-shadow:var(--hl1)}
.dl dd{margin:0;font-size:.9375rem}
.kind{display:inline-flex;align-items:center;height:20px;padding:0 7px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
.kind.is-live{color:#2a1a00}
.kind.is-rec{background:#2c5677;color:var(--ink-hi)}
.kind.is-fc{background:transparent;color:#cfe3f1;box-shadow:inset 0 0 0 1px #6f97b5}
.kind+.kind{margin-left:4px}

/* ---- My places ---- */
.pl-list{display:grid;gap:var(--g3);margin:0 0 var(--g5)}
.pl{position:relative;padding:var(--g4);border:1px solid var(--bd2);
  transition:background var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease)}
.pl-pre{margin:0 0 calc(-1 * var(--g1));color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pl-top{display:grid;grid-template-columns:48px 1fr auto;gap:var(--g3);align-items:center}
.pl-uv{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:750;font-size:1.25rem;font-variant-numeric:tabular-nums;color:var(--bg);background:#8fa9bc}
.pl-uv.low{background:var(--low)}.pl-uv.mod{background:var(--mod)}.pl-uv.high{background:var(--high)}.pl-uv.vh{background:var(--vh)}.pl-uv.ex{background:var(--ex);color:var(--white)}
.pl-id{min-width:0}
.pl-h{font-size:1.0625rem;font-weight:650;margin:0}
.pl-name{color:var(--ink);text-decoration:none;padding:0!important}
.pl-name:hover{text-decoration:underline;text-underline-offset:3px}
.pl-name::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none}
.pl-st{color:var(--muted);font-weight:500;font-size:.8125rem;margin-left:6px}
.pl-kind{margin:2px 0 0;color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .badge{align-self:start}
.pl-win{margin:var(--g3) 0 var(--g2);font-size:.9375rem;font-weight:550}
.pl-win.is-low{color:var(--muted);font-weight:500}
.st{margin:0}
.st-bars{position:relative;display:flex;align-items:flex-end;gap:2px;height:40px;padding:0 0 1px;border-bottom:1px solid var(--bd2)}
.st-h{flex:1;height:var(--h);min-height:2px;border-radius:2px 2px 0 0;background:#58748a}
.st-h.low{background:var(--low)}.st-h.mod{background:var(--mod)}.st-h.high{background:var(--high)}.st-h.vh{background:var(--vh)}.st-h.ex{background:var(--ex)}
.st-h.is-rec{opacity:.62}
.st-h.is-fc{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.26) 0 2px,transparent 2px 4px)}
.st-h.is-live{box-shadow:0 0 0 1.5px var(--white)}
.st-now{position:absolute;top:-4px;bottom:-4px;left:var(--x);width:2px;margin-left:-1px;background:var(--white);border-radius:1px;box-shadow:0 0 0 1px rgba(7,26,40,.6)}
.st-ax{display:flex;justify-content:space-between;margin-top:4px;color:var(--muted);font-size:.6875rem;font-variant-numeric:tabular-nums}
.pl-acts{display:flex;align-items:center;gap:var(--g2);margin-top:var(--g3)}
.pl-sp{flex:1}
.pl-b,.btn-s,.chip{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--g3);border:1px solid var(--bd2);color:var(--ink);
  font:600 .8125rem/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:var(--hl2);position:relative;z-index:1}
.pl-i{appearance:none;width:36px;height:36px;border-radius:10px;border:1px solid transparent;background:none;color:var(--muted);font:600 .9375rem/1 Inter,system-ui,sans-serif;cursor:pointer;position:relative;z-index:1}
.pl-i:hover:not(:disabled){color:var(--ink);background:var(--e3);border-color:var(--bd2)}
.pl-i:disabled{opacity:.35;cursor:default}
.pl-empty{padding:var(--g4);border:1px dashed var(--bd3);font-size:.9375rem}
.pl-e2{display:flex;gap:var(--g2);flex-wrap:wrap;margin:var(--g3) 0 var(--g2)}
.pl-e3{color:var(--muted);font-size:.8125rem}
.shell .now-card.national{margin-top:0}

/* ---- Plan + History ---- */
.sh-chips{display:flex;flex-wrap:wrap;gap:var(--g2);margin:0 0 var(--g4)}
.chip{min-height:32px}
.chip-q{width:32px;padding:0;justify-content:center;color:var(--muted)}
.pd-z{margin:0 0 var(--g2);color:var(--muted);font-size:.8125rem;font-weight:600}
.pd-ax{display:flex;justify-content:space-between;margin:0 0 4px 72px;color:var(--muted);font-size:.6875rem}
.pd-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--g2)}
.pd{display:grid;grid-template-columns:64px 1fr;gap:var(--g2);align-items:start;padding:var(--g2) var(--g2) var(--g2) 0;border-radius:12px}
.pd.is-today{padding-left:var(--g2);margin-left:calc(-1 * var(--g2))}
.pd-l{display:flex;flex-direction:column;line-height:1.2;padding-top:2px}
.pd-d{font-weight:650;font-size:.875rem}.pd-dd{color:var(--muted);font-size:.75rem}
.pd-bar{position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:2px;height:28px}
.pd-h{border-radius:3px;background:#58748a;opacity:.5}
.pd-h.low{background:var(--low)}.pd-h.mod{background:var(--mod)}.pd-h.high{background:var(--high)}.pd-h.vh{background:var(--vh)}.pd-h.ex{background:var(--ex)}
.pd-h.night{background:var(--e1);opacity:1;box-shadow:inset 0 0 0 1px var(--bd1)}
.pd-h.is-lo{opacity:1;box-shadow:inset 0 0 0 2px #eafff4,0 0 0 1px rgba(61,214,140,.5)}
.pd-h.is-fc:not(.night){background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.2) 0 2px,transparent 2px 4px)}
.pd-h.is-rec{filter:saturate(.6)}
.pd-now{position:absolute;top:-3px;bottom:-3px;left:var(--x);width:2px;margin-left:-1px;background:var(--white);border-radius:1px;box-shadow:0 0 0 1px rgba(7,26,40,.6)}
.pd-t{margin:6px 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.pd-pk{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 5px;border-radius:6px;font-weight:750;font-size:.75rem;color:var(--bg);background:#8fa9bc;font-variant-numeric:tabular-nums}
.pd-pk.low{background:var(--low)}.pd-pk.mod{background:var(--mod)}.pd-pk.high{background:var(--high)}.pd-pk.vh{background:var(--vh)}.pd-pk.ex{background:var(--ex);color:var(--white)}
.pd-lo{color:#bff3d7;font-weight:600}
.pd-key{display:flex;flex-wrap:wrap;gap:var(--g2) var(--g4);margin:var(--g4) 0 0;color:var(--muted);font-size:.75rem}
.pd-key>span{display:inline-flex;align-items:center;gap:6px}
.pd-key i{display:inline-block;width:14px;height:14px;border-radius:3px}
.k-lo{background:var(--low);box-shadow:inset 0 0 0 2px #eafff4}.k-p{background:var(--high);opacity:.6}.k-n{background:var(--e1);box-shadow:inset 0 0 0 1px var(--bd2)}
.hb-list{list-style:none;margin:var(--g3) 0 0;padding:0;display:grid;grid-template-columns:repeat(15,1fr);gap:3px;align-items:end;height:150px}
.hb{display:grid;grid-template-rows:16px 96px 14px 12px;align-items:end;justify-items:center;min-width:0}
.hb-v{font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.hb-bar{width:100%;max-width:22px;height:var(--h);border-radius:4px 4px 1px 1px;background:#58748a}
.hb-bar.low{background:var(--low)}.hb-bar.mod{background:var(--mod)}.hb-bar.high{background:var(--high)}.hb-bar.vh{background:var(--vh)}.hb-bar.ex{background:var(--ex)}
.hb.is-gap .hb-bar{background:repeating-linear-gradient(135deg,rgba(160,205,235,.18) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--bd2)}
.hb.is-today .hb-bar{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.24) 0 2px,transparent 2px 4px)}
.hb-d{font-size:.625rem;font-weight:650;color:var(--ink)}.hb-dd{font-size:.5625rem;color:var(--muted);white-space:nowrap}

/* ---- command palette ---- */
.cmdk{padding:0;margin:12vh auto auto;width:min(640px,calc(100vw - 24px));max-height:min(72vh,620px);border:1px solid var(--bd3);color:var(--ink);overflow:hidden}
.cmdk[open]{display:flex;flex-direction:column}
@keyframes ck-in{from{opacity:0;transform:translateY(-6px)}}
.ck-in{display:flex;align-items:center;gap:var(--g2);padding:0 var(--g3) 0 var(--g4);border-bottom:1px solid var(--bd2);box-shadow:var(--hl3)}
.ck-ico{color:var(--muted)}
.ck-in input{flex:1;min-width:0;height:56px;min-height:0;color:var(--ink);font:500 1.0625rem/1 Inter,system-ui,sans-serif;padding:0}
.ck-in input:focus{outline:none}
.ck-x{appearance:none;height:28px;padding:0 var(--g2);border:1px solid var(--bd3);background:var(--e3);color:var(--muted);font:600 .75rem/1 Inter,system-ui,sans-serif;cursor:pointer}
.ck-list{list-style:none;margin:0;padding:var(--g2);overflow:auto;flex:1}
.ck-g{padding:var(--g2) var(--g3) var(--g1);color:var(--muted);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ck-foot{display:flex;gap:var(--g4);margin:0;padding:var(--g2) var(--g4);border-top:1px solid var(--bd2);color:var(--muted);font-size:.75rem}
.ck-foot kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:3px;padding:0 4px;border:1px solid var(--bd3);background:var(--e3);font:600 .6875rem/1 Inter,system-ui,sans-serif;color:var(--ink)}
@media (max-width:759px){.cmdk{margin:var(--g2) auto auto;max-height:calc(100vh - var(--tbh) - 16px)}.ck-foot{display:none}}
@media (prefers-reduced-motion:reduce){.cmdk[open]{animation:none}}
@media (forced-colors:active){.ab-tab.is-on,.tb-a.is-on,.chip[aria-pressed=true],.ab-list li[aria-selected=true],.ck-list li[aria-selected=true]{outline:2px solid Highlight}}
/* skip link: first tab stop, visible only on focus */
.skip{position:fixed;left:var(--g3);top:var(--g2);z-index:var(--z-skip);padding:var(--g2) var(--g4);border-radius:10px;background:var(--e4);color:var(--ink);font-weight:600;text-decoration:none;box-shadow:var(--hl3),var(--sh3);transform:translateY(-200%)}
.skip:focus{transform:none}
main:focus{outline:none}

/* card rendered too long ago and the refresh failed: mute the reading so it can't contradict the map */
.now-card.is-outdated .now-row,.now-card.is-outdated .action{opacity:.55}

/* =====================================================================================================
   r9 polish (2026-10-19): living sky + one design-token set. Every colour, radius, shadow and space used by
   the components below comes from these custom properties.
   Sky: zenith → horizon haze, soft sun bloom at (--sunx,--suny), warm horizon at dawn/dusk, stars + the Southern
   Cross at night, fine grain against banding, slow cirrus drift (desktop, no reduced motion). Driven by --sun/--dusk/
   --night from UVSKY() on the shared clock. All text on the sky stays ≥ 4.5:1: the brightest sky pixel is capped
   (≈ L 0.074) so even --muted text on it passes AA.
   Surfaces rise e1 → e4 (lighter as they rise), each with a 1px inner top highlight and a crisp 1px hairline.
   ===================================================================================================== */
:root{
  /* palette */
  --ink:#eef6fc;--muted:#b3cadb;--muted2:#9db8cb;--accent:#f5b942;--sun-gold:#ffd27a;--ochre:#e0894f;--gum:#7fc8a9;
    --sky-z-day:#082a56;--sky-m-day:#0f3a69;--sky-h-day:#1c4469;
  --sky-z-dusk:#141a44;--sky-m-dusk:#2a2a55;--sky-h-dusk:#5a3446;
  --sky-z-night:#040b18;--sky-m-night:#06142a;--sky-h-night:#0b2038;
  /* elevation: lighter as it rises */
  --e0:#061527;--e1:#0b2540;--e2:#10304f;--e3:#163b5f;--e4:#1d4a74;
  --e1a:rgba(11,37,64,.965);--e2a:rgba(16,48,79,.965);--e3a:rgba(22,59,95,.96);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 48px);
  --bd1:rgba(170,214,245,.11);--bd2:rgba(170,214,245,.17);--bd3:rgba(170,214,245,.26);--bd-gold:rgba(255,210,122,.55);
  --hl1:inset 0 1px 0 rgba(255,255,255,.05);--hl2:inset 0 1px 0 rgba(255,255,255,.08);--hl3:inset 0 1px 0 rgba(255,255,255,.13);
  --sh1:0 1px 2px rgba(1,8,20,.32);
  --sh2:0 1px 2px rgba(1,8,20,.28),0 8px 20px -6px rgba(1,8,20,.42);
  --sh3:0 2px 6px rgba(1,8,20,.3),0 22px 48px -10px rgba(1,8,20,.6);
  --press:inset 0 1px 3px rgba(1,8,20,.45);
  --ring:0 0 0 2px var(--e0),0 0 0 4px var(--sun-gold);
  /* shape + space (4/8 grid) */
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;--radius:var(--r-lg);
  --g1:4px;--g2:8px;--g3:12px;--g4:16px;--g5:24px;--g6:32px;--g7:48px;
  /* motion (shared 150/250/400 tokens above) */
  --t-fast:var(--m-fast) var(--spring);--t-base:var(--m-base) var(--spring);
  --sunx:78%;--suny:-6%
;--white:#fff;--abyss:#020a12;--on-gold:#1b1404;--steel:#9bb8cc;--steel-2:#9fb9cc;--ink-hi:#e8f4fc;--gold-hi:#ffdc92;--gold-2:#f8c862;--line3:#3d7aa3;--well2:#0f3048}
html{background:var(--e0)}
html::-webkit-scrollbar-thumb{border-color:var(--e0)}

/* ---- sky ---- */
body::before{inset:-8vh 0;
  background:
    radial-gradient(22vmax 18vmax at var(--sunx) var(--suny),rgba(255,236,196,calc(.035*var(--sun) + .07*var(--dusk))),transparent 70%),
    radial-gradient(64vmax 40vmax at var(--sunx) var(--suny),rgba(255,214,150,calc(.035*var(--sun) + .09*var(--dusk))),transparent 68%),
    linear-gradient(0deg,rgba(224,137,79,calc(.16*var(--dusk))) 0%,rgba(224,137,79,0) 42%),
    linear-gradient(0deg,rgba(150,200,235,calc(.05*var(--sun))) 0%,rgba(150,200,235,0) 38%),
    linear-gradient(180deg,rgb(calc(4 + 4*var(--sun)) calc(11 + 31*var(--sun)) calc(24 + 62*var(--sun))) 0%,rgb(calc(6 + 9*var(--sun)) calc(20 + 38*var(--sun)) calc(42 + 63*var(--sun))) 55%,rgb(calc(11 + 18*var(--sun)) calc(32 + 36*var(--sun)) calc(56 + 48*var(--sun))) 100%)}
@supports (color:color-mix(in oklab,red,blue)){
  body::before{
    --zen:color-mix(in oklab,color-mix(in oklab,var(--sky-z-day) calc(var(--sun)*100%),var(--sky-z-night)),var(--sky-z-dusk) calc(var(--dusk)*80%));
    --mid:color-mix(in oklab,color-mix(in oklab,var(--sky-m-day) calc(var(--sun)*100%),var(--sky-m-night)),var(--sky-m-dusk) calc(var(--dusk)*80%));
    --hor:color-mix(in oklab,color-mix(in oklab,var(--sky-h-day) calc(var(--sun)*100%),var(--sky-h-night)),var(--sky-h-dusk) calc(var(--dusk)*85%));
    background:
      radial-gradient(22vmax 18vmax at var(--sunx) var(--suny),rgba(255,236,196,calc(.035*var(--sun) + .07*var(--dusk))),transparent 70%),
      radial-gradient(64vmax 40vmax at var(--sunx) var(--suny),rgba(255,214,150,calc(.035*var(--sun) + .09*var(--dusk))),transparent 68%),
      linear-gradient(0deg,rgba(150,200,235,calc(.04*var(--sun))) 0%,rgba(150,200,235,0) 38%),
      linear-gradient(180deg,var(--zen) 0%,var(--mid) 52%,var(--hor) 100%)}}
/* stars (with the Southern Cross and the Pointers) + grain/dither; one static layer */
body::after{opacity:1;
  background:
    radial-gradient(1.6px 1.6px at 11.2% 9%,rgba(240,246,255,calc(.85*var(--night))) 50%,transparent 60%),
    radial-gradient(1.4px 1.4px at 9.6% 15.5%,rgba(240,246,255,calc(.75*var(--night))) 50%,transparent 60%),
    radial-gradient(1.2px 1.2px at 13.4% 14.2%,rgba(240,246,255,calc(.65*var(--night))) 50%,transparent 60%),
    radial-gradient(1.8px 1.8px at 11.9% 21.5%,rgba(240,246,255,calc(.9*var(--night))) 50%,transparent 60%),
    radial-gradient(1px 1px at 12.6% 17.4%,rgba(240,246,255,calc(.5*var(--night))) 50%,transparent 60%),
    radial-gradient(1.6px 1.6px at 3.4% 27%,rgba(255,236,200,calc(.8*var(--night))) 50%,transparent 60%),
    radial-gradient(1.4px 1.4px at 6.4% 25%,rgba(240,246,255,calc(.7*var(--night))) 50%,transparent 60%),
    radial-gradient(1px 1px at 33% 6%,rgba(232,244,252,calc(.4*var(--night))) 50%,transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 11%,rgba(255,226,163,calc(.45*var(--night))) 50%,transparent 60%),
    radial-gradient(1px 1px at 77% 19%,rgba(232,244,252,calc(.4*var(--night))) 50%,transparent 60%),
    radial-gradient(1px 1px at 91% 7%,rgba(232,244,252,calc(.35*var(--night))) 50%,transparent 60%),
    radial-gradient(1px 1px at 46% 24%,rgba(232,244,252,calc(.3*var(--night))) 50%,transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* cirrus: one composited layer of soft gradients, rasterised once; only its transform moves */
html::before{content:"";position:fixed;top:0;left:0;z-index:-1;pointer-events:none;width:calc(100% + 1200px);height:62vh;
  opacity:calc(.25 + .75*var(--sun) + .6*var(--dusk) - .9*var(--night));
  background:
    radial-gradient(260px 22px at 160px 18%,rgba(226,240,252,.07),transparent 70%),
    radial-gradient(380px 30px at 520px 9%,rgba(226,240,252,.055),transparent 70%),
    radial-gradient(220px 16px at 760px 31%,rgba(226,240,252,.05),transparent 70%),
    radial-gradient(420px 34px at 1000px 22%,rgba(255,226,196,calc(.02 + .05*var(--dusk))),transparent 70%),
    radial-gradient(300px 20px at 330px 44%,rgba(226,240,252,.035),transparent 70%);
  background-size:1200px 100%;background-repeat:repeat-x}
@media (prefers-reduced-motion:no-preference) and (min-width:1000px) and (pointer:fine){
  html::before{will-change:transform;animation:uv-cirrus 240s linear infinite}
  @keyframes uv-cirrus{to{transform:translate3d(-1200px,0,0)}}}
@media (forced-colors:active){body::before,body::after,html::before{display:none}}

/* ---- shared interaction states ---- */
:focus-visible{outline:2px solid var(--sun-gold);outline-offset:2px}
.btn,.ab-btn,.ab-kbd,.pl-b,.btn-s,.chip,.pl-i,.gear,.ck-x,.badge-btn,.pill-list a,a.city,.ab-tab,.tb-a .ab-ico{
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.btn:active,.ab-btn:active,.pl-b:active,.btn-s:active,.chip:active,.gear:active,.pl-i:active:not(:disabled),.ab-kbd:active{transform:translateY(1px);box-shadow:var(--press)}
.btn:focus-visible,.ab-btn:focus-visible,.pl-b:focus-visible,.btn-s:focus-visible,.chip:focus-visible,.gear:focus-visible,.pl-i:focus-visible,.ab-tab:focus-visible,.ab-kbd:focus-visible,.ck-x:focus-visible,.badge-btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---- buttons ---- */
.btn{border-radius:var(--r-md);border:1px solid var(--bd2);background:var(--sheen),var(--e3);box-shadow:var(--hl2),var(--sh1)}
.btn:hover{background:var(--sheen),var(--e4);border-color:var(--bd3);color:var(--ink)}
.btn-accent,.pl-pin{background:linear-gradient(180deg,var(--sun-gold),var(--accent));border-color:var(--accent);color:#1a1204;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(80,50,0,.35),0 6px 16px -8px rgba(245,185,66,.55)}
.btn-accent:hover,.pl-pin:hover{background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));border-color:var(--gold-2);color:#1a1204}
.pl-b,.btn-s{border-radius:var(--r-sm);background:var(--sheen),var(--e3);border-color:var(--bd2)}
.pl-b:hover,.btn-s:hover{background:var(--sheen),var(--e4);border-color:var(--bd3)}
.gear{border-radius:var(--r-md);background:var(--e2);border:1px solid var(--bd2);box-shadow:var(--hl2)}
.gear:hover{background:var(--e3);border-color:var(--bd3)}

/* ---- pills, chips, band badges ---- */
.badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.14),0 0 0 1px rgba(1,8,20,.22);letter-spacing:.005em}
.badge.low{background:linear-gradient(180deg,#5fe3a3,var(--low))}.badge.mod{background:linear-gradient(180deg,#ffcd66,var(--accent))}
.badge.high{background:linear-gradient(180deg,#ffa262,var(--high))}.badge.vh{background:linear-gradient(180deg,#ff7b7b,var(--vh))}.badge.ex{background:linear-gradient(180deg,#d77bff,var(--ex))}
.badge-btn:hover{filter:brightness(1.06)}
.chip{border-radius:var(--r-pill);background:var(--e2);border-color:var(--bd2)}
.chip:hover{background:var(--e3);border-color:var(--bd3)}
.chip[aria-pressed=true]{background:var(--e4);border-color:var(--bd-gold);box-shadow:var(--hl3),inset 0 0 0 1px rgba(255,210,122,.3)}
.pill-list a,.pill-list strong{border-radius:var(--r-pill)}
.pill-list a:hover{background:var(--e3);border-color:var(--bd3)}
.kind{border-radius:var(--r-xs)}
.kind.is-live{background:linear-gradient(180deg,var(--gold-hi),var(--sun-gold));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.pl-uv,.pd-pk{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.12),0 0 0 1px rgba(1,8,20,.25)}
.devn{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,210,122,.24)}

/* ---- surfaces ---- */
.card{background:var(--sheen),var(--e2a);border:1px solid var(--bd2);border-radius:var(--r-lg);box-shadow:var(--hl2),var(--sh2)}
.card .card{background:var(--e3);border-color:var(--bd2);box-shadow:var(--hl2)}
.now-card{background:var(--sheen),var(--e2a);border:1px solid var(--bd2);border-left-width:4px;border-radius:var(--r-lg);box-shadow:var(--hl2),var(--sh2)}
.now-card.national{border-left-width:4px}
a.city{background:var(--sheen),var(--e1a);border-color:var(--bd1);border-left-width:4px;border-radius:var(--r-md);box-shadow:var(--hl1),var(--sh1)}
a.city:hover{background:var(--sheen),var(--e2);border-color:var(--bd3);box-shadow:var(--hl2),var(--sh2)}
a.city:active{box-shadow:var(--press)}
.pl{background:var(--sheen),var(--e2a);border-color:var(--bd2);border-radius:var(--r-lg);box-shadow:var(--hl2),var(--sh2)}
.pl:hover,.pl:focus-within{background:var(--sheen),var(--e3);border-color:var(--bd3)}
.pl.is-act{border-color:var(--bd-gold)}
.pl-empty{background:var(--e1a);border-color:var(--bd3);border-radius:var(--r-lg)}
.dl>div{background:var(--sheen),var(--e1a);border-color:var(--bd1);border-radius:var(--r-md)}
.pd.is-today{background:var(--e2a);box-shadow:var(--hl2),inset 0 0 0 1px var(--bd1)}
.tip{background:var(--e2);border-radius:var(--r-sm)}
.pop{background:var(--e3);border-color:var(--bd3);border-radius:var(--r-md);box-shadow:var(--hl3),var(--sh2)}
.city-hero{border-color:var(--bd2);border-radius:var(--r-lg);box-shadow:var(--hl2),var(--sh2)}
.toast{border-radius:var(--r-md);box-shadow:var(--sh3)}
input[type=text],input[type=email],input[type=search],select,textarea{background:var(--e1);border-color:var(--bd3);border-radius:var(--r-md);box-shadow:inset 0 1px 2px rgba(1,8,20,.35);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input[type=text]:focus-visible,input[type=email]:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--sun-gold);box-shadow:inset 0 1px 2px rgba(1,8,20,.35),0 0 0 3px rgba(255,210,122,.25)}

/* ---- app bar + search + tabs ---- */
.appbar{background:linear-gradient(180deg,#0b2744,#08203a);border-bottom:1px solid var(--bd1);box-shadow:var(--hl1),0 1px 0 rgba(1,8,20,.5),0 6px 18px -8px rgba(1,8,20,.6)}
.appbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,210,122,.32) 30%,rgba(224,137,79,.28) 70%,transparent)}
.ab-search{background:var(--e1);border-color:var(--bd2);border-radius:var(--r-md);box-shadow:inset 0 1px 2px rgba(1,8,20,.4)}
.ab-search:hover{border-color:var(--bd3)}
.ab-search:focus-within{background:var(--e2);border-color:var(--sun-gold);box-shadow:inset 0 1px 2px rgba(1,8,20,.4),0 0 0 3px rgba(255,210,122,.22)}
.ab-kbd{border-radius:var(--r-xs);background:var(--e3);border-color:var(--bd2)}
.ab-btn{border-radius:var(--r-md);background:var(--sheen),var(--e2);border-color:var(--bd2)}
.ab-btn:hover{background:var(--sheen),var(--e3);border-color:var(--bd3)}
.ab-tabs{border-radius:14px;background:rgba(1,8,20,.28);border-color:var(--bd1);box-shadow:inset 0 1px 2px rgba(1,8,20,.45),0 1px 0 rgba(255,255,255,.04)}
.ab-tab{border-radius:10px}
.ab-tab:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.ab-tab:active{background:rgba(255,255,255,.03)}
.ab-tab.is-on{background:var(--sheen),var(--e4);color:var(--white);box-shadow:var(--hl3),0 1px 2px rgba(1,8,20,.45),0 0 0 1px var(--bd2)}
.ab-tab.is-on .ab-ico{color:var(--sun-gold)}
.ab-list{background:var(--e3a);border-color:var(--bd3);border-radius:var(--r-md);box-shadow:var(--hl3),var(--sh3)}
.ab-list li,.ck-list li[role=option]{border-radius:var(--r-sm);transition:background-color var(--t-fast)}
.ab-list li:hover:not([aria-disabled]),.ck-list li[role=option]:hover:not([aria-disabled]){background:rgba(255,255,255,.05)}
.ab-list li[aria-selected=true],.ck-list li[aria-selected=true]{background:var(--e4);box-shadow:var(--hl3),inset 3px 0 0 var(--sun-gold)}

/* ---- bottom tab bar ---- */
@media (max-width:999px){
  .tabbar{background:linear-gradient(180deg,#0b2744,#071c33);border-top:1px solid var(--bd1);box-shadow:var(--hl1),0 -6px 18px -8px rgba(1,8,20,.6)}
  .tb-a{transition:color var(--t-fast)}
  .tb-a .ab-ico{border-radius:var(--r-pill)}
  .tb-a:active .ab-ico{transform:scale(.94)}
  .tb-a.is-on .ab-ico{background:var(--sheen),var(--e4);color:var(--sun-gold);box-shadow:var(--hl3),0 0 0 1px var(--bd2)}
  .tb-a:focus-visible{outline:none}.tb-a:focus-visible .ab-ico{box-shadow:var(--ring)}
}

/* ---- command palette ---- */
.cmdk{background:var(--e3);border-color:var(--bd3);border-radius:var(--r-lg);box-shadow:var(--hl3),var(--sh3),0 0 0 1px rgba(1,8,20,.4)}
.cmdk[open]{animation:ck-in var(--m-base) var(--spring)}
@keyframes ck-in{from{opacity:0;transform:translateY(-8px) scale(.985)}}
.cmdk::backdrop{background:radial-gradient(120% 80% at 50% 0%,rgba(4,14,30,.5),rgba(1,6,16,.72))}
.ck-in{background:var(--sheen),var(--e4);border-bottom-color:var(--bd2)}
.ck-in:focus-within .ck-ico{color:var(--sun-gold)}
.ck-x{border-radius:var(--r-xs)}
.ck-foot{background:var(--e2);border-top-color:var(--bd1)}
.ck-foot kbd{border-radius:var(--r-xs)}

/* ---- footer ---- */
.sf{border-top:1px solid var(--bd1);background:linear-gradient(180deg,rgba(6,21,39,0),rgba(6,21,39,.82) 120px,rgba(6,21,39,.96))}
.sf-ack{border-radius:var(--r-lg);background:var(--sheen),var(--e1a);box-shadow:var(--hl2),0 0 0 1px var(--bd2);border-left:3px solid var(--ochre)}
.site-footer{border-top-color:var(--bd1)}

/* map side cards: no backdrop blur (the sky drifts behind them); solid elevated surface instead */
.page-map .side .card{background:var(--sheen),var(--e2a);-webkit-backdrop-filter:none;backdrop-filter:none}

/* text on the sky uses --muted at minimum; scroll-in motion moves only (no fade), so text is never mid-contrast */
.fx-src,.intro p,.sh-lede,.sh-hint,.crumb{color:var(--muted)}
@keyframes uv-rise{from{transform:translateY(8px)}}
/* the palette and app-bar search fields sit inside their own surfaces: no inner box */
.ck-in input[type=search],.ck-in input,.ck-in input:focus-visible{background:none;border:0;box-shadow:none;border-radius:0}

/* ===== SEO pass (2026-10-19): intro lede, visible FAQ (same text as the FAQPage markup), nearby-town pills ===== */
.crumb + h1 + .lede,.page-city .lede{margin:calc(-1 * var(--g2)) 0 var(--g5);color:var(--muted);font-size:1rem;line-height:1.55;max-width:62ch}
.faq h2{margin-bottom:var(--g3)}
.faq-q{border-top:1px solid var(--bd1)}
.faq-q:last-child{border-bottom:1px solid var(--bd1)}
.faq-q summary{display:flex;align-items:center;min-height:var(--tap);padding:var(--g2) 0;cursor:pointer;list-style:none}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary h3{margin:0;font-size:1rem;font-weight:650;line-height:1.35}
.faq-q p{margin:0 0 var(--g3);color:var(--ink);line-height:1.55;max-width:68ch}
.pill-list a .muted{font-size:.8125rem;margin-left:4px}
.shell .faq{margin-top:var(--g5)}

/* ===== Site name / app / widget pass (2026-10-19) ===== */
.embed-demo{margin:var(--g3) 0;min-height:190px}
.embed-demo iframe{display:block;width:340px;max-width:100%;height:190px;border:0;border-radius:12px;background:transparent}
.embed-lab{display:block;font-weight:650;margin:var(--g3) 0 var(--g1)}
.embed-code{display:block;width:100%;max-width:640px;font:.8125rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:rgba(3,14,22,.9);border:1px solid var(--bd1);border-radius:10px;padding:var(--g2) var(--g3);resize:vertical}
.embed-act{display:flex;flex-wrap:wrap;gap:var(--g2) var(--g3);align-items:center;margin-top:var(--g2)}

/* ===== mapui (2026-10-19) ===== */
/* layer scale (z-index map: tests/README.md). Page content stays below 10. */
:root{--z-sheet:30;--z-tabbar:44;--z-appbar:45;--z-toast:50;--z-popover:55;--z-skip:60}
/* focus is never hidden under the fixed app bar / tab bar (and the map's bottom sheet on phones) */
html{scroll-padding-bottom:calc(var(--tbh) + 12px)}
@media (max-width:959px){html:has(body.page-map .side){scroll-padding-bottom:calc(var(--tbh) + 96px)}}
.tb-a:focus-visible{outline:2px solid var(--sun-gold);outline-offset:-3px;border-radius:var(--r-md);color:var(--ink)}
/* touch: 44px targets in the app bar and the dev notice */
@media (pointer:coarse){
  .ab-btn,.ab-find,.appbar .gear{height:44px;min-width:44px}
  .ab-near{width:44px}
  .appbar .brand{min-height:44px;display:inline-flex;align-items:center}
  .devn-x{width:44px;height:44px;margin:-6px -4px -6px 0}
  .skip{min-height:44px;display:inline-flex;align-items:center}
  .ab-search{height:46px}.ab-search input[type=search]{height:44px}
  .ab-kbd{display:none}
}