/* Nublao': plain white (light) or near-black (dark) ground, teal accent, Roboto.
   Theme follows the phone unless the header toggle saved a choice (html[data-theme]).
   Layout: one flat column; sections are separated by space and a single rule, never boxed.
   The models are the visual identity: six colored dots under the temperature, six rows in the rain chart.
   Type: Archivo only, wide cut for numbers, normal width for text. Accent (flamboyán) marks "now" and warnings only. */
:root{
  --bg:#ffffff; --card:#f6f7f8; --card-2:#eceef1; --fg:#15181c; --muted:#5a626b; --line:#dfe3e7;
  --accent:#17705f; --rain:#1a659b; --sun:#c98418;
  --ok:#1b6e44; --ok-bg:#d9eee2; --warn:#8d5b00; --warn-bg:#f6e7c4; --bad:#b5361a; --bad-bg:#f6dad2;
  --h0:#1b6e44; --h0-bg:#d9eee2; --h1:#7d6400; --h1-bg:#f3ebc4; --h2:#a14f00; --h2-bg:#f8e1c6; --h3:#c2361a; --h3-bg:#f6d7cd; --h4:#9c1450; --h4-bg:#f3d2e2;
  --a4:#6b3fa0; --a4-bg:#e6dcf5; --a5:#7a1f2b; --a5-bg:#f1d5d8;
  --m-gfs:#2f6fde; --m-ecmwf:#8a4fd8; --m-icon:#0f9a8a; --m-gem:#d6408a; --m-jma:#b5650a; --m-ukmo:#5c8f14;
  --seg-on:#ffffff;
  /* symbol colors: each icon in the bottom bar and the folded droplet gets the color of what it shows */
  --ic-sun:#e08600; --ic-bolt:#f2b705; --ic-moon:#dcae2c; --ic-cloud:#7d8996; --ic-cloud-fill:#a9b5c1; --ic-storm:#6f7b88; --ic-water:#1f6fd6; --ic-ice:#4aaee6; --ic-radar:#1b9a55; --ic-wind:#2c9cc6; --ic-trop:#8657d6; --ic-river:#0f8f80; --ic-quake:#c4612a;
  --font:"Roboto","Helvetica Neue",Arial,system-ui,sans-serif;
  --wide:100%;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121417; --card:#1b1e22; --card-2:#252930; --fg:#eceef1; --muted:#a3abb4; --line:#31363d;
    --accent:#5cc8b2; --rain:#5aaee3; --sun:#f2b451;
    --ok:#6fd6a0; --ok-bg:#12382a; --warn:#f2c661; --warn-bg:#3d2f0c; --bad:#ff9373; --bad-bg:#43200f;
    --h0:#6fd6a0; --h0-bg:#12382a; --h1:#f2d45b; --h1-bg:#363010; --h2:#f7a25a; --h2-bg:#40260f; --h3:#ff8a70; --h3-bg:#45190f; --h4:#ff7fb6; --h4-bg:#431129;
    --a4:#c6a3f2; --a4-bg:#2e1f47; --a5:#f09aa5; --a5-bg:#3f1419;
    --m-gfs:#6aa3ff; --m-ecmwf:#b48cf5; --m-icon:#3fd0bd; --m-gem:#f277b4; --m-jma:#f0a342; --m-ukmo:#9ccb4a;
    --ic-sun:#ffb52e; --ic-bolt:#ffd23f; --ic-moon:#f2dc8f; --ic-cloud:#aeb8c3; --ic-cloud-fill:#c7d0da; --ic-storm:#8d98a5; --ic-water:#5ba8ff; --ic-ice:#a8deff; --ic-radar:#52d38f; --ic-wind:#6fcbec; --ic-trop:#b996ff; --ic-river:#3fd0bd; --ic-quake:#f39a63;
    --seg-on:#3d434c; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#121417; --card:#1b1e22; --card-2:#252930; --fg:#eceef1; --muted:#a3abb4; --line:#31363d;
    --accent:#5cc8b2; --rain:#5aaee3; --sun:#f2b451;
    --ok:#6fd6a0; --ok-bg:#12382a; --warn:#f2c661; --warn-bg:#3d2f0c; --bad:#ff9373; --bad-bg:#43200f;
    --h0:#6fd6a0; --h0-bg:#12382a; --h1:#f2d45b; --h1-bg:#363010; --h2:#f7a25a; --h2-bg:#40260f; --h3:#ff8a70; --h3-bg:#45190f; --h4:#ff7fb6; --h4-bg:#431129;
    --a4:#c6a3f2; --a4-bg:#2e1f47; --a5:#f09aa5; --a5-bg:#3f1419;
    --m-gfs:#6aa3ff; --m-ecmwf:#b48cf5; --m-icon:#3fd0bd; --m-gem:#f277b4; --m-jma:#f0a342; --m-ukmo:#9ccb4a;
    --ic-sun:#ffb52e; --ic-bolt:#ffd23f; --ic-moon:#f2dc8f; --ic-cloud:#aeb8c3; --ic-cloud-fill:#c7d0da; --ic-storm:#8d98a5; --ic-water:#5ba8ff; --ic-ice:#a8deff; --ic-radar:#52d38f; --ic-wind:#6fcbec; --ic-trop:#b996ff; --ic-river:#3fd0bd; --ic-quake:#f39a63;
    --seg-on:#3d434c; color-scheme:dark;
  }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
a{color:inherit;text-decoration-color:var(--line);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px;padding-block:10px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .logo{flex:none;width:40px;height:40px;display:block;filter:drop-shadow(0 2px 4px rgb(1 100 200/.25))}
.brand-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.brand b{font-weight:700;font-size:24px;letter-spacing:-.01em;font-stretch:var(--wide)}
.brand span{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;align-items:center;gap:0}
.icon-btn{width:40px;height:44px;border-radius:22px;display:grid;place-items:center;color:var(--fg)}
.icon-btn:hover{background:var(--card-2)}
.icon-btn svg{width:20px;height:20px}

.icon-btn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pills{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;border-bottom:1px solid var(--line)}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;min-height:44px;font-weight:600;font-size:16px;color:var(--muted);position:relative;padding:0 1px}
.pill[aria-selected="true"]{color:var(--fg)}
.pill[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--fg)}
.toast{position:fixed;left:50%;transform:translateX(-50%);width:max-content;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:12;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);
  padding:6px 8px 6px 16px;border-radius:8px;background:var(--fg);color:var(--bg);font-size:15px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.toast .link{color:inherit;font-weight:700;min-height:44px;padding:0 8px;text-decoration:underline}
.card.na h2{color:var(--muted)}
.fact{margin:0;padding:10px 0 2px;font-size:15px;line-height:1.45;color:var(--muted)}
.fact-k{color:var(--accent);font-weight:700}
.fact .link{display:inline;color:var(--accent);font-weight:700;padding:8px 2px;text-decoration:underline;text-underline-offset:3px}
/* news at the bottom of every tab: two headlines per page, swipe sideways for more */
.news-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.news-head h2{margin:0}
.newswrap,.more{display:grid}
.news-scope{display:flex;gap:2px;padding:2px;background:var(--card-2);border-radius:999px}
.news-scope button{min-height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.news-scope button[aria-pressed="true"]{background:var(--seg-on);color:var(--fg);box-shadow:0 1px 3px rgb(0 0 0/.16)}
.news-note{margin:8px 0 0;font-size:14px;color:var(--muted)}
.news-note .link{color:var(--accent);font-weight:700;text-decoration:underline;padding:8px 2px}
.ncar{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  margin:12px -20px 0;padding:0 20px;scroll-padding-inline:20px}
.ncar::-webkit-scrollbar{display:none}
.npage{flex:0 0 calc(100% - 28px);scroll-snap-align:start;display:grid;grid-template-rows:1fr 1fr;gap:8px}
.nitem{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--fg);min-width:0}
.nitem:hover{border-color:var(--muted)}
.nsrc{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.ntitle{font-weight:600;font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ntime{font-size:12.5px;color:var(--muted);margin-top:auto}
.ndots{display:flex;justify-content:center;margin-top:4px}
.ndots button{width:22px;height:28px;display:grid;place-items:center}
.ndots button::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--line);transition:width .2s ease,background .2s ease}
.ndots button[aria-current="true"]::before{width:18px;background:var(--accent)}
@media (min-width:700px){.npage{flex-basis:calc(50% - 5px)}}

/* content grid: sections, not cards */
#content{display:grid;gap:0 56px;transition:opacity .18s ease}
#content.switching{opacity:0}
.card{padding:26px 0 24px;border-top:1px solid var(--line);min-width:0}
.col>.card:first-child,.col>.hero:first-child{border-top:0}
.card h2{margin:0 0 4px;font-size:17px;font-weight:700;letter-spacing:-.005em}
@media (min-width:900px){
  #content{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .col{display:grid}
}
@media (max-width:899px){.col{display:contents}}
.muted{color:var(--muted);font-size:14px;margin:10px 0 0}
.lead{font-size:17px;margin:10px 0 6px;line-height:1.45}

/* status words (replace pill badges): colored text + a small shape so it never relies on color alone */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:650;white-space:nowrap;background:none!important;padding:0;min-height:0}
.badge svg{display:none}
.badge::before{content:"";width:8px;height:8px;flex:none;background:currentColor;border-radius:50%}
.lv1::before,.hc1::before,.hc2::before,.aq1::before,.aq2::before{border-radius:1px}
.lv2::before,.hc3::before,.hc4::before,.aq3::before,.aq4::before,.aq5::before{border-radius:1px;transform:rotate(45deg)}
.lvn::before{background:none;border:1.5px solid currentColor;width:7px;height:7px}
.lv0{color:var(--ok)}.lv1{color:var(--warn)}.lv2{color:var(--bad)}.lvn{color:var(--muted)}.lvh,.lvh2{color:var(--rain)}
.lvh::before{border-radius:1px}.lvh2::before{border-radius:1px;transform:rotate(45deg)}
.hc0{color:var(--h0)}.hc1{color:var(--h1)}.hc2{color:var(--h2)}.hc3{color:var(--h3)}.hc4{color:var(--h4)}
.aq0{color:var(--h0)}.aq1{color:var(--h1)}.aq2{color:var(--h2)}.aq3{color:var(--h3)}.aq4{color:var(--a4)}.aq5{color:var(--a5)}

/* hero */
.hero{padding:12px 0 18px}
@media (max-height:760px){.hero-cond{margin-top:8px;font-size:20px}.hero-temp{font-size:72px}.hero-icon svg{width:60px;height:60px}.spread{margin-top:12px}}
.hero-loc{margin:0 0 2px;font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.hero-loc span{font-weight:400}
.hero-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hero-temp{font-size:clamp(84px,25vw,148px);font-weight:300;font-stretch:var(--wide);letter-spacing:-.05em;line-height:.86;margin-left:-.04em}
.hero-icon svg{width:76px;height:76px;display:block;margin-top:6px}
.hero-cond{font-size:22px;font-weight:700;margin:16px 0 0;text-wrap:balance;letter-spacing:-.01em}
.hero-sub{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--muted);margin-top:4px;font-size:16px}
.hero-sub b{color:var(--fg);font-weight:600}
.spread{margin-top:20px}
.spread-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:var(--muted)}
.spread-top b{color:var(--fg);font-weight:600}
.plot{position:relative;height:26px;margin-top:6px}
.plot::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.plot i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--bg)}
.plot u{position:absolute;top:2px;bottom:2px;width:2px;margin-left:-1px;background:var(--fg)}
.key i.r1,.mxc i.r1{background:color-mix(in srgb,var(--rain) 48%,var(--card-2))}
.key i.r2,.mxc i.r2{background:color-mix(in srgb,var(--rain) 76%,var(--card-2))}
.key i.r3,.mxc i.r3{background:var(--rain);background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.28) 3px 4px)}
.pms{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted)}
.pm{display:inline-flex;align-items:center;gap:5px}.pm i{width:7px;height:7px;border-radius:50%}
.pmu{color:var(--muted)}
.spread-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:4px;color:var(--muted);font-size:14px}

/* summary */
.sum{padding-top:16px}
.spreadsec{padding-top:18px}
.spreadsec .spread{margin-top:0}
.amore>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;font-size:15px;border-top:1px solid var(--line)}
.amore>summary::-webkit-details-marker{display:none}
.amore>summary::before{content:"+";margin-right:8px;color:var(--muted)}
.amore[open]>summary::before{content:"–"}
.sum p{margin:2px 0 0;font-size:18px;line-height:1.5;max-width:58ch;text-wrap:pretty}

/* rain: model matrix */
.rain-head{font-size:24px;font-weight:700;letter-spacing:-.015em;margin:2px 0 2px;text-wrap:balance;font-stretch:110%}
.rain-note{color:var(--muted);font-size:15px}
.mx{position:relative;margin-top:16px;touch-action:pan-y;cursor:crosshair;user-select:none}
.mxr{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px}
.mxr+.mxr{margin-top:3px}
.mxl{font-size:11.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap}
.mxl i{width:7px;height:7px;border-radius:50%;flex:none}
.mxc{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:14px}
.mxc i{border-radius:2px;background:var(--card-2)}
.mxc i.na{background:transparent;border:1px dashed var(--line)}
.mxr.cons .mxc{height:38px;align-items:end}
.mxr.cons .mxc i{background:var(--rain);border-radius:2px 2px 0 0}
.mxr.cons .mxl{color:var(--fg)}
.mxsel{position:absolute;top:-4px;bottom:-4px;width:calc((100% - 60px) / var(--n));margin-left:60px;border:2px solid var(--fg);border-radius:4px;pointer-events:none;left:calc((100% - 60px) / var(--n) * var(--k))}
.ticks{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;margin:6px 0 0 60px;color:var(--muted);font-size:11.5px}
.ticks span{white-space:nowrap;overflow:visible}
.ticks span.now{color:var(--fg);font-weight:700}
.strip-detail{margin-top:14px;font-size:15px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.strip-detail b{font-weight:700}
.key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;color:var(--muted);font-size:13px;align-items:center}
.key i{display:inline-block;width:12px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* heat */
.alerts{display:grid;gap:0;border-bottom:1px solid var(--line)}
.alert{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;padding:12px 0;background:none!important;border-top:1px solid var(--line)}
.alerts .alert:first-child{border-top:0}
.alert svg{width:22px;height:22px;margin-top:1px}
.alert>div{color:var(--fg);min-width:0}
.alert>div>b{font-size:17px;margin-right:10px}
.alert p{margin:4px 0 0;font-size:15px}
.alert .awhen{color:var(--muted);font-size:14px}
.alert details{margin-top:6px}
.alert summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:14px;color:var(--fg)}
.alert .atext{font-size:14px;line-height:1.5;color:var(--fg);max-height:320px;overflow:auto;padding:8px 0;border-top:1px solid var(--line)}
.alert a{font-size:14px;font-weight:600;display:inline-flex;min-height:44px;align-items:center}
.heat-top{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 14px;margin-top:10px;flex-wrap:wrap}
.heat-big{font-size:58px;font-weight:300;font-stretch:var(--wide);letter-spacing:-.04em;line-height:.95}
.heat-big small{display:block;font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:8px;font-stretch:100%}
.heat-adv{margin:12px 0 0;font-size:16px;max-width:52ch}
.heat-meta{color:var(--muted);font-size:14px;margin-top:6px}
.hstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:20px}
.hday{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:13px;color:var(--muted);min-width:0}
.hday b{font-size:17px;font-weight:600;color:var(--fg)}
.hday b.est{font-weight:400;color:var(--muted)}
.hday i{display:block;width:100%;height:4px;border-radius:2px}
.hscale{margin-top:14px}
.hs-bar{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;height:10px}
.hs-bar i{border-radius:2px}
.hs-bar i:nth-child(1){background:var(--h0)}.hs-bar i:nth-child(2){background:var(--h1)}.hs-bar i:nth-child(3){background:var(--h2)}.hs-bar i:nth-child(4){background:var(--h3)}.hs-bar i:nth-child(5){background:var(--h4)}
.hs-mark{position:absolute;top:-5px;width:4px;height:20px;margin-left:-2px;border-radius:2px;background:var(--fg);box-shadow:0 0 0 2px var(--bg)}
.hs-lab{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:8px;font-size:12px;line-height:1.25;letter-spacing:-.01em;color:var(--muted)}
.hs-lab span{min-width:0;overflow-wrap:break-word;hyphens:auto}
.hs-lab small{display:block;font-size:11.5px;margin-top:2px}
.hs-lab .on{color:var(--fg);font-weight:600}
.hday i.c0{background:var(--h0)}.hday i.c1{background:var(--h1)}.hday i.c2{background:var(--h2)}.hday i.c3{background:var(--h3)}.hday i.c4{background:var(--h4)}
.src{color:var(--muted);font-size:13px;margin-top:14px}

/* key-value grids (were tiles) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,104px),1fr));gap:16px 18px;margin-top:14px}
.tiles.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.tile{min-width:0}
.tile span{display:block;color:var(--muted);font-size:13px}
.tile b{display:block;font-size:22px;font-weight:600;font-stretch:var(--wide);margin:1px 0 0;white-space:nowrap}
.tile b em{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);margin-left:3px;font-stretch:100%}
.tile small{display:block;color:var(--muted);font-size:13px}

/* week */
.week{padding-bottom:12px}
.day{display:grid;grid-template-columns:50px 30px 42px minmax(0,1fr) 12px;align-items:center;gap:10px;width:100%;min-height:54px;text-align:left;border-top:1px solid var(--line)}
.week h2+.day{border-top:0;margin-top:6px}
.day:hover .dn{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.day .dn{font-weight:600}
.day .ic svg{width:28px;height:28px;display:block}
.day .rc{color:var(--rain);font-weight:650;font-size:14px}
.day .rc.dry{color:var(--muted);font-weight:500}
.range{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:8px;align-items:center}
.range .lo{color:var(--muted);text-align:right}.range .hi{font-weight:650}
.track{position:relative;height:4px;border-radius:2px;background:var(--card-2)}
.track .sp{position:absolute;top:-3px;bottom:-3px;border-radius:3px;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.track .co{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--fg)}
.dot{width:9px;height:9px;border-radius:50%}
.dot.lv0{background:var(--ok)}.dot.lv1{background:var(--warn);border-radius:1px}.dot.lv2{background:var(--bad);border-radius:1px;transform:rotate(45deg)}
.week-key{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:12px;color:var(--muted);font-size:13px;align-items:center}
.week-key span{display:inline-flex;align-items:center;gap:6px}

/* guide */
.fold summary,.gsec summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;cursor:pointer}
.fold summary::-webkit-details-marker,.gsec summary::-webkit-details-marker{display:none}
.fold summary h2{margin:0}
.fold summary::after,.gsec summary::after{content:"+";font-size:24px;font-weight:300;color:var(--muted);line-height:1}
.fold[open] summary::after,.gsec[open] summary::after{content:"–"}

/* places */
.pill.addp{color:var(--accent)}
.placepanel{padding:12px 0 14px;border-bottom:1px solid var(--line)}
.pp-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pp-top label{font-weight:600;font-size:15px}
.placepanel .link{min-height:44px;font-weight:700;color:var(--accent);padding:0 4px}
#placeQ{width:100%;min-height:46px;margin-top:6px;padding:0 12px;font:inherit;font-size:16px;color:var(--fg);background:var(--card);border:1.5px solid var(--line);border-radius:6px}
#placeQ:focus{outline:2px solid var(--accent);outline-offset:1px}
.pp-res{display:grid;margin-top:6px}
.pp-hit{display:flex;flex-direction:column;align-items:flex-start;min-height:48px;justify-content:center;text-align:left;border-top:1px solid var(--line);font-weight:600}
.pp-hit small,.pp-row small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.placepanel h3{font-size:15px;margin:14px 0 2px}
.pp-list{list-style:none;margin:6px 0 0;padding:0}
.pp-row{display:flex;align-items:center;gap:6px;min-height:52px;border-top:1px solid var(--line);background:var(--bg)}
.pp-row.dragging{position:relative;z-index:2;box-shadow:0 6px 18px rgb(0 0 0/.18);border-radius:8px}
.pp-drag{width:40px;min-height:48px;display:grid;place-items:center;color:var(--muted);touch-action:none;cursor:grab}
.pp-drag svg{width:16px;height:16px}
.pp-nm{flex:1;min-width:0}
.pp-name{width:100%;font:inherit;font-weight:600;color:var(--fg);background:none;border:0;border-bottom:1.5px dashed transparent;padding:6px 0;border-radius:0}
.pp-name:hover{border-bottom-color:var(--line)}.pp-name:focus{outline:none;border-bottom-color:var(--accent)}
.pp-how{margin:2px 0 0}
.pp-list.ord{margin:0}.pp-list.ord .pp-row:first-child{border-top:0}.pp-list.ord .chk{flex:1}
.editcards{margin:4px 0 0;grid-column:1/-1}.editcards .link{min-height:44px;font-weight:600;font-size:14px;color:var(--accent)}
.offline{color:var(--fg)!important}
.mdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

.btn.ghost{background:none;color:var(--fg);border:1.5px solid var(--fg)}

/* guide */
/* guide and settings open as windows (native <dialog>): a sheet from the bottom on phones, centered on wide screens */
.dlg{border:0;padding:0;margin:auto auto 0;width:100%;max-width:600px;max-height:88vh;max-height:88dvh;border-radius:18px 18px 0 0;
  background:var(--bg);color:var(--fg);overflow:auto;overscroll-behavior:contain}
.dlg::backdrop{background:rgb(0 0 0/.45)}
@media (min-width:700px){.dlg{margin:auto;border-radius:16px;max-height:86vh}}
body:has(dialog[open]){overflow:hidden}
.dlg-in{padding:0 20px calc(24px + env(safe-area-inset-bottom,0px))}
.dlg-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;margin:0 -20px;padding:0 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.dlg-head h2{margin:0;font-size:20px;letter-spacing:-.01em}
.dlg .link{min-height:44px;font-weight:700;color:var(--accent);padding:0 4px}
.set{padding:16px 0;border-bottom:1px solid var(--line)}
.set h3{margin:0 0 10px;font-size:15px;font-weight:700}
.set .muted{margin-top:8px}
.set .muted:empty{display:none}
.chks{display:grid}
.chk{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer}
.chk span{flex:1}
.chk input{appearance:none;flex:none;margin:0;width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;cursor:pointer;transition:background .2s}
.chk input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.3);transition:transform .2s}
.chk input:checked{background:var(--accent)}
.chk input:checked::after{transform:translateX(18px)}
.chk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-bottom:0}
.gsec{border-top:1px solid var(--line)}
.gsec summary{min-height:54px;font-size:17px;font-weight:700}
.gsec[open]{padding-bottom:12px}
.gsec h4{margin:18px 0 4px;font-size:16px;font-weight:700}
.gsec p,.gsec li{font-size:15px;line-height:1.55}
.gsec p{margin:6px 0}
.gsec ul{margin:6px 0;padding-left:20px;display:grid;gap:4px}
.gsec a{color:var(--accent)}
.gloss{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:8px 0;font-size:15px}
.gloss dt{font-weight:650}.gloss dd{margin:0;color:var(--fg)}
@media (max-width:480px){.gloss{grid-template-columns:1fr}.gloss dd{margin-bottom:6px}}

/* models */
.models ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px 24px}
.models li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:baseline;font-size:15px}
.models li i{width:10px;height:10px;border-radius:50%;display:block}
.models li i.nws{border-radius:0;background:none;border-top:2px dashed var(--fg);height:2px;width:12px;transform:translateY(-4px)}
.models li span{color:var(--muted);display:block;font-size:14px}
.models li em{font-style:normal;color:var(--warn);display:block;font-size:13px}
.notice{padding:14px 0;color:var(--warn);font-size:15px;font-weight:550;border-bottom:1px solid var(--line)}
footer{color:var(--muted);font-size:13px;padding-top:18px;display:flex;flex-wrap:wrap;gap:0 18px}
footer a{display:inline-flex;align-items:center;min-height:44px}

/* links */
.links{grid-column:1/-1}
.lgroups{display:grid;gap:4px 40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.lgroup h3{margin:14px 0 2px;font-size:14px;font-weight:600;color:var(--muted)}
.lgroup a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;border-top:1px solid var(--line);text-decoration:none;font-size:15px;font-weight:550}
.lgroup a b{font-weight:550;display:flex;align-items:center;gap:6px}
.lgroup a svg{width:12px;height:12px;color:var(--muted);flex:none}
.lgroup a span{display:none}
.lgroup a:hover{color:var(--accent)}

/* skeleton + error */
.sk{border-radius:6px;background:var(--card-2);margin:22px 0;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
.err{padding:40px 0}
.err p{color:var(--muted);margin:6px 0 18px;max-width:40ch}
.btn{min-height:44px;padding:0 20px;border-radius:6px;background:var(--fg);color:var(--bg);font-weight:650}

/* day sheet */
.scrim{position:fixed;inset:0;background:rgba(8,16,22,.45);opacity:0;transition:opacity .22s;z-index:10}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:11;max-height:92%;overflow-y:auto;background:var(--bg);
  border-radius:14px 14px 0 0;padding:6px 20px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.8,.2,1);
  max-width:760px;margin:0 auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
.open .scrim{opacity:1}.open .sheet{transform:none}
@media (min-width:900px){.sheet{bottom:4%;border-radius:14px;max-height:92%;border:1px solid var(--line)}}
.grab{height:22px;display:grid;place-items:center;margin-bottom:4px}
.grab::before{content:"";width:36px;height:4px;border-radius:2px;background:var(--line)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sheet-head h3{margin:0;font-size:28px;font-weight:700;letter-spacing:-.02em;font-stretch:var(--wide)}
.sheet-head p{margin:0;color:var(--muted);font-size:15px}
.sheet-sum{margin:12px 0 0;font-size:16px;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:0 24px;margin:16px 0 18px}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 0;border-top:1px solid var(--line);min-width:0;flex-wrap:wrap}
.stat span{color:var(--muted);font-size:14px}
.stat b{font-size:17px;font-weight:650}
.stat small{flex-basis:100%;color:var(--muted);font-size:13px}
.stat small:empty{display:none}
.stat .badge{flex-basis:100%;font-size:13px}
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:44px;font-weight:600;font-size:15px;color:var(--muted);position:relative}
.tabs button[aria-selected="true"]{color:var(--fg)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--fg)}
.row2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 6px;flex-wrap:wrap}
.mini{display:flex;gap:14px;flex-wrap:wrap}
.mini button{min-height:44px;font-size:14px;font-weight:600;color:var(--muted)}
.mini button[aria-pressed="true"]{color:var(--fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.chart-box{position:relative;height:250px}
.chart-box.sm{height:190px}
.chart-note{color:var(--muted);font-size:13px;margin-top:6px}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px}
.legend button{display:inline-flex;align-items:center;gap:7px;min-height:40px;font-size:14px;font-weight:550}
.legend button i{width:16px;height:3px;border-radius:2px;display:block}
.legend button[aria-pressed="false"]{opacity:.4;text-decoration:line-through}
.legend .fixed{cursor:default}
.legend .cons i{height:5px;background:var(--fg)}
.legend .nwsl i{height:0;border-top:2px dashed var(--fg);background:none}
.tbl{overflow-x:auto;max-height:340px;overflow-y:auto;border-top:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:8px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{position:sticky;top:0;background:var(--bg);font-weight:600;z-index:1}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--bg);padding-left:0}
th i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
td.c{font-weight:700}
td.na{color:var(--muted)}

/* tab bar */
/* bottom bar: a floating pill; while scrolling it folds into a droplet (body.navhide) */
.tabbar{position:fixed;left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:520px;z-index:9;display:flex;gap:0;
  background:var(--bg);border:1px solid var(--line);border-radius:26px;padding:3px;box-shadow:0 8px 28px rgb(0 0 0/.14);
  transform-origin:50% 100%;transition:transform .5s cubic-bezier(.22,1,.36,1) .12s,opacity .35s ease .12s}
.tabbar button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;border-radius:22px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:-.01em}
.tabbar button svg{width:22px;height:22px}
.tabbar button span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabbar button[aria-selected="true"]{color:var(--accent);background:var(--card-2)}
/* bar folds first, then the symbol pops in; on the way back the symbol leaves first */
body.navhide .tabbar{transform:translateY(18px) scale(.12,.6);opacity:0;pointer-events:none;transition-delay:0s}
/* the folded bar: the current weather as a symbol (drop, sun, moon, cloud, storm, snowflake…) */
.droplet{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:10;width:60px;height:60px;margin-left:-30px;
  display:grid;place-items:center;filter:drop-shadow(0 5px 10px rgb(0 0 0/.28));
  transform:translateY(14px) scale(.3);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.34,1.4,.5,1),opacity .3s ease}
.droplet svg{width:56px;height:56px}
body.navhide .droplet{transform:none;opacity:1;pointer-events:auto;transition-delay:.15s}
.subnav{margin:8px 0 0}
.seg{display:flex;gap:2px;padding:3px;background:var(--card-2);border-radius:999px;width:max-content;max-width:100%}
.seg button{min-height:44px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--seg-on);color:var(--fg);box-shadow:0 1px 3px rgb(0 0 0/.16)}

/* hub */
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:8px 14px;flex-wrap:wrap}
.imgbox{margin:14px -20px 0;background:var(--card-2);max-width:none}
.imgbox img{display:block;width:100%;height:100%;object-fit:contain}
.mapbox{margin:14px -20px 0;background:var(--card-2);position:relative;z-index:0;display:flex;align-items:center;justify-content:center;touch-action:none}
.mapbox>p{margin:0}
.mapbox.leaflet-container{display:block;font:inherit}
.leaflet-container a{color:var(--accent)}
.leaflet-tooltip{font:13px/1.35 Roboto,system-ui,sans-serif}
.mapctl{display:flex;align-items:center;gap:12px;margin-top:10px}
.mapctl input{flex:1;accent-color:var(--accent);min-height:44px}
.mapctl span{min-width:9ch;text-align:right;font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted)}
.playbtn{min-width:44px;min-height:44px;border-radius:50%;background:var(--card-2);font-size:15px;color:var(--fg)}
.playbtn:disabled{opacity:.5}
.mapkey{display:flex;flex-wrap:wrap;gap:6px 14px}
.mapkey span{display:inline-flex;align-items:center;gap:6px}
.mapkey i{display:inline-block;width:16px;height:10px;border-radius:2px}
.mapkey .k-cone{background:#fff;border:1.5px solid var(--fg)}
.mapkey .k-track{height:0;border-top:2px dashed var(--fg)}
.mapkey .k-area{background:rgba(240,140,0,.3);border:2px dashed #f08c00}
.mapkey .k-you{width:12px;height:12px;border-radius:50%;background:#1a73e8;border:2px solid var(--bg)}
@media (min-width:600px){.mapbox{margin-inline:0;border-radius:6px;overflow:hidden}}
@media (min-width:600px){.imgbox{margin-inline:0;border-radius:6px;overflow:hidden}}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line);color:var(--fg);text-decoration:none;width:100%;text-align:left;min-height:54px}
.card h2+.row,.card .lead+.row{border-top:0}
.row>div{min-width:0;display:flex;flex-direction:column;gap:1px}
.row b{font-weight:650;font-size:16px}
.row span.muted{display:block;margin:0;font-size:14px}
.row .badge{flex:none;max-width:52%;white-space:normal;text-align:right}
a.row:hover b,button.row:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.dotc{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:4px;vertical-align:0}
.dotc.aq0{background:var(--h0)}.dotc.aq1{background:var(--h1)}.dotc.aq2{background:var(--h2)}.dotc.aq3{background:var(--h3)}.dotc.aq4{background:var(--a4)}.dotc.aq5{background:var(--a5)}
.storm{padding:14px 0;border-top:1px solid var(--line)}
.card h2+.storm{border-top:0}
.storm p{margin:4px 0 0}
.storm-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.storm-top b{font-size:22px;font-stretch:var(--wide)}
.warnline{color:var(--bad);font-weight:650}
.sub{font-size:15px;font-weight:700;margin:22px 0 4px}
.tides{display:grid;gap:8px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.tidecol>b{display:block;margin:8px 0 2px;font-weight:650}
.tide{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center;font-size:15px;padding:7px 0;border-top:1px solid var(--line)}
.tide .muted{margin:0}
.tt{font-size:13px;font-weight:700}
.tt.hi{color:var(--rain)}.tt.lo{color:var(--muted)}
.rbar{margin-top:16px}
.rbar-top{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.rtrack{position:relative;height:6px;border-radius:3px;background:var(--card-2);margin:7px 0 5px}
.rtrack i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--rain)}
.rtrack i.dry{background:var(--h2)}
.rtrack u{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--fg)}
.hydro{padding:0 0 12px}
/* weather background: a tint and moving weather at the top of the screen that fades out before the content below */
.sky{position:fixed;inset:0 0 auto;height:78vh;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .8s ease;
  -webkit-mask-image:linear-gradient(#000,#000 25%,transparent 92%);mask-image:linear-gradient(#000,#000 25%,transparent 92%)}
.sky.on{opacity:1}
.sky::before,.sky::after{content:"";position:absolute;inset:0}
:root{--sk-sun:rgb(105 180 250/.30);--sk-glow:rgb(255 196 70/.38);--sk-cloud:rgb(120 138 160/.26);--sk-rain:rgb(70 100 140/.30);--sk-night:rgb(60 70 150/.20);--sk-fog:rgb(150 160 170/.30);--sk-snow:rgb(170 200 235/.30);--sk-drop:rgb(40 90 150/.38);--sk-flake:#fff;--sk-star:rgb(80 90 170/.55);--sk-bow:.27}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sk-sun:rgb(40 100 170/.40);--sk-glow:rgb(255 180 60/.20);--sk-cloud:rgb(90 105 125/.35);--sk-rain:rgb(40 70 110/.45);--sk-night:rgb(30 40 110/.55);--sk-fog:rgb(110 120 130/.30);--sk-snow:rgb(120 150 190/.30);--sk-drop:rgb(150 200 255/.35);--sk-flake:rgb(235 245 255/.9);--sk-star:rgb(235 240 255/.85);--sk-bow:.26}}
:root[data-theme="dark"]{--sk-sun:rgb(40 100 170/.40);--sk-glow:rgb(255 180 60/.20);--sk-cloud:rgb(90 105 125/.35);--sk-rain:rgb(40 70 110/.45);--sk-night:rgb(30 40 110/.55);--sk-fog:rgb(110 120 130/.30);--sk-snow:rgb(120 150 190/.30);--sk-drop:rgb(150 200 255/.35);--sk-flake:rgb(235 245 255/.9);--sk-star:rgb(235 240 255/.85);--sk-bow:.26}
.sky.sunny::before{background:radial-gradient(circle at 88% 0,var(--sk-glow),transparent 38%),linear-gradient(var(--sk-sun),transparent)}
.sky.sunny::after{background:conic-gradient(from 200deg at 88% 0,transparent 0 10deg,var(--sk-glow) 14deg,transparent 20deg 34deg,var(--sk-glow) 38deg,transparent 44deg 60deg,var(--sk-glow) 64deg,transparent 70deg);opacity:.35;animation:skyrays 24s ease-in-out infinite alternate;transform-origin:88% 0}
@keyframes skyrays{to{transform:rotate(8deg)}}
.sky.cloudy::before{background:linear-gradient(var(--sk-cloud),transparent)}
.sky.rain::before,.sky.thunder::before{background:linear-gradient(var(--sk-rain),transparent)}
.sky.thunder::after{background:rgb(255 255 255/.5);opacity:0;animation:skyflash 9s linear infinite}
@keyframes skyflash{0%,90.5%,92.5%,94.5%,100%{opacity:0}91%,94%{opacity:.55}}
.sky.night::before{background:radial-gradient(circle at 82% 4%,rgb(220 225 255/.22),transparent 22%),linear-gradient(var(--sk-night),transparent)}
.sky.fog::before{background:linear-gradient(var(--sk-fog),transparent)}
.sky.snow::before{background:linear-gradient(var(--sk-snow),transparent)}
.sky.bow::after{background:radial-gradient(circle at 50% 100%,transparent 52%,rgb(255 0 0/.9) 53%,rgb(255 150 0/.9) 54.5%,rgb(255 235 0/.9) 56%,rgb(0 200 80/.9) 57.5%,rgb(0 130 255/.9) 59%,rgb(110 60 220/.9) 60.5%,transparent 62%);opacity:var(--sk-bow);animation:none;transform:none}
.sky i{position:absolute;top:0;display:block}
.sky .dr{width:1.5px;height:18px;border-radius:1px;background:linear-gradient(transparent,var(--sk-drop));animation:skyfall linear infinite}
.sky .fl{width:6px;height:6px;border-radius:50%;background:var(--sk-flake);box-shadow:0 0 3px rgb(0 0 0/.12);animation:skysnow linear infinite}
.sky .st{width:2px;height:2px;border-radius:50%;background:var(--sk-star);animation:skytwinkle ease-in-out infinite alternate}
.sky .cl{width:46vw;max-width:420px;aspect-ratio:2.6;border-radius:50%;background:var(--sk-cloud);filter:blur(18px);animation:skydrift linear infinite}
.sky .fg{left:-20%;width:140%;height:9vh;border-radius:50%;background:var(--sk-fog);filter:blur(14px);animation:skydrift linear infinite alternate}
@keyframes skyfall{from{transform:translate(0,-30px) rotate(12deg)}to{transform:translate(-14vh,78vh) rotate(12deg)}}
@keyframes skysnow{from{transform:translate(0,-10px)}50%{transform:translate(18px,38vh)}to{transform:translate(-6px,78vh)}}
@keyframes skytwinkle{from{opacity:.15}to{opacity:1}}
@keyframes skydrift{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.sky .fg{animation-name:skyfog}@keyframes skyfog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@media (prefers-reduced-motion:reduce){.sky i:not(.st){display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:359px){.top{gap:4px}.icon-btn{width:36px}.brand{gap:8px}.brand .logo{width:34px;height:34px}.brand b{font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* Current conditions: the extra tiles show after "Show more" */
.conds:not(.more) .tile.x{display:none}
.moretog{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:650;font-size:15px;color:var(--accent)}
.moretog::after{content:"";width:7px;height:7px;margin-left:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.moretog[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}

/* swiping between sections: a label on the side names where the swipe goes; a filled one means "let go to switch" */
.wrap{touch-action:pan-y;touch-action:pan-y pinch-zoom}
.swipehint{position:fixed;top:46%;z-index:8;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;pointer-events:none;
  background:var(--card-2);color:var(--fg);font-size:14px;font-weight:650;box-shadow:0 6px 20px rgb(0 0 0/.14);opacity:0;transform:scale(.9);transition:transform .15s ease,background .15s ease,color .15s ease}
.swipehint.on{transform:none}
.swipehint.r{right:12px}.swipehint.l{left:12px}
.swipehint svg{width:20px;height:20px}
.swipehint.cross{padding:12px 16px;font-size:15px}
.swipehint.go{background:var(--accent);color:var(--bg)}
.swipehint.go svg *{stroke:currentColor}
/* the bottom-bar button you land on after swiping to another tab */
.tabbar button.pop svg{animation:tabpop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes tabpop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:none}}

/* pull to refresh */
.ptr{position:fixed;top:calc(env(safe-area-inset-top,0px) - 36px);left:50%;z-index:13;width:36px;height:36px;margin-left:-18px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);color:var(--muted);box-shadow:0 3px 12px rgb(0 0 0/.18);opacity:0;pointer-events:none}
.ptr svg{width:18px;height:18px}
.ptr.on{opacity:1}.ptr.go{color:var(--accent)}
.ptr.spin svg{animation:spin .8s linear infinite}

/* phones: no grey tap flash, no double-tap zoom delay, no long-press menus on the bar */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,a,summary,.day{touch-action:manipulation}
.tabbar,.droplet,.seg,.swipehint{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* iPhone and iPad: the system font (San Francisco) and a frosted bottom bar, like iOS's own apps */
html.ios{--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.ios .tabbar{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}}
/* Android: Chrome's own pull-to-refresh would reload the whole page; the app's pull refreshes just the data */
html.android{overscroll-behavior-y:contain}
html.android .tabbar button[aria-selected="true"]{border-radius:16px}