/* Tonka Explorer v2 — css/weather.css (owner: weather agent). Loaded after css/app.css; uses its tokens.
   2.0.12: the Weather tab (#v-weather › #wx-body). Every rule is prefixed .wx- (the shell's .stat / .tag / .skel / .status-* are reused). */

#wx-body{padding-bottom:8px}
@media (min-width:760px){#wx-body{max-width:760px;margin:0 auto}}

/* NWS alert — amber, dark text (≥ 7:1), never red on the chart */
.wx-alert{margin:0 16px 12px;padding:12px 14px;border-left:5px solid var(--warn);background:var(--warn-bg);border-radius:0 10px 10px 0;color:#5A3D00}
.wx-alert b{display:block;font-size:17px;line-height:1.2;margin-bottom:4px;color:#5A3D00}
.wx-alert span{display:block;font-size:14px;line-height:1.4}
.wx-alert small{display:block;font-size:12px;margin-top:4px;color:var(--warn)}
.wx-alert a{display:inline-block;margin-top:6px;padding:4px 0;font:600 13px var(--font);color:var(--navy-2)}

/* now card: temperature + sky on the left, the compass arrow + wind on the right */
.wx-now{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;margin:0 16px 12px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.wx-now .wx-temp b{display:block;font:700 58px/1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.wx-now .wx-temp b.none{color:var(--mute)}
.wx-now .wx-sky{display:flex;align-items:center;gap:8px;margin-top:10px;font:600 15px/1.25 var(--font);color:#3B4A53}
.wx-now .wx-sky .wx-ic{width:28px;height:28px;flex:none}
.wx-now .wx-wind{text-align:center;min-width:124px}
.wx-compass{width:108px;height:108px;display:block;margin:0 auto 4px}
.wx-compass .ring{fill:var(--surf);stroke:var(--line);stroke-width:2}
.wx-compass line{stroke:#9FB0BA;stroke-width:1.5}
.wx-compass line.maj{stroke:var(--mute);stroke-width:2}
.wx-compass text{font:700 10px var(--font);fill:var(--mute);text-anchor:middle}
.wx-compass .arr{fill:var(--navy)}
.wx-compass.windy .arr{fill:var(--bad)}
.wx-compass .calm{fill:var(--line)}
.wx-wind b{display:block;font:700 22px/1.1 var(--font);color:var(--ink);white-space:nowrap}
.wx-wind b small{font:600 12px var(--font);color:var(--mute);margin-left:3px}
.wx-wind b.windy{color:var(--bad)}
.wx-wind b.none{font-size:18px;color:var(--mute)}
.wx-wind span{display:block;font-size:12px;color:var(--mute);margin-top:2px;white-space:nowrap}
.wx-now.stale .wx-temp b,.wx-now.stale .wx-wind b{color:var(--mute)}
.wx-now.stale .wx-compass .arr{fill:#7F93A0}
.wx-now .wx-stale{grid-column:1 / -1;margin:2px 0 0;padding-top:8px;border-top:1px solid var(--line);font:600 12px/1.3 var(--font);color:var(--mute)}
@media (max-width:360px){.wx-now{padding:12px}.wx-now .wx-temp b{font-size:48px}.wx-compass{width:92px;height:92px}.wx-now .wx-wind{min-width:104px}}

/* sunrise / sunset / light left — the shell's 3-column .stat */
.stat.wx-light b{font-size:20px;white-space:nowrap}
.stat.wx-light b small{display:block;font:500 11px/1.3 var(--font);color:var(--mute);white-space:normal;margin-top:2px}
.stat.wx-light b.night{color:var(--navy-2)}

/* lake level */
.wx-lake{margin:0 16px 12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.wx-lake .h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wx-lake .h b{font-size:17px;line-height:1.2}
.wx-lake .h .tag{margin-left:auto}
.wx-lake .wx-trend{margin-top:4px;font-size:13px;color:var(--mute)}
.wx-lake .wx-trend b{color:var(--ink)}
.wx-lake .wx-trend b.up{color:var(--bad)}
.wx-lake .wx-trend b.down{color:var(--ok)}
.wx-lake p{margin-top:6px;font-size:14px;line-height:1.45;color:#3B4A53}
.wx-lake p b.wx-less{color:var(--bad)}
.wx-lake p b.status-ok{color:var(--ok)}
.wx-lake small{display:block;margin-top:4px;font-size:12px;color:var(--mute);line-height:1.5}
.wx-lake small a,.wx-lake p a{display:inline-block;padding:6px 0}   /* finger-sized links */

/* the "on the water" read */
.wx-read{margin:0 16px 14px;padding:12px 14px;border-left:5px solid var(--ok);background:var(--ok-bg);border-radius:0 10px 10px 0;font-size:15px;line-height:1.45;color:var(--ink)}
.wx-read.warn{border-color:var(--warn);background:var(--warn-bg)}
.wx-read.no{border-color:var(--bad);background:var(--bad-bg)}
.wx-read b{display:block;font:600 11px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}

/* section captions */
.wx-h{margin:0;padding:4px 16px 8px;font:700 12px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}

/* hourly strip: 18 periods, horizontal scroll, the current hour marked, wind ≥ 15 mph highlighted */
.wx-hours{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;margin:0 16px 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.wx-hours::-webkit-scrollbar{display:none}
.wx-hours > div{flex:none;width:64px;padding:10px 0 8px;text-align:center;font-size:12px;color:var(--mute);border-left:1px solid var(--line);line-height:1.25;scroll-snap-align:start}
.wx-hours > div:first-child{border-left:0}
.wx-hours > div.night{background:var(--surf)}
.wx-hours > div.now{background:#E3EEF6;box-shadow:inset 0 3px 0 var(--navy)}
.wx-hours .hr{display:block;font-weight:600;font-size:11px;letter-spacing:.02em}
.wx-hours > div.now .hr{color:var(--navy);text-transform:uppercase}
.wx-hours .wx-ic{width:22px;height:22px;margin:4px auto 0;display:block}
.wx-hours b{display:block;font:700 18px var(--font);color:var(--ink);margin:2px 0}
.wx-hours .w{display:flex;align-items:center;justify-content:center;gap:2px;font-weight:600;color:var(--navy-2);white-space:nowrap}
.wx-hours .w .wx-arrow{width:14px;height:14px}
.wx-hours > div.windy .w{color:var(--bad);background:var(--bad-bg);border-radius:6px;margin:0 4px}
.wx-hours .pp{display:block;font-size:11px;color:#1F5C8A;font-weight:600;margin-top:3px}
.wx-hours .pp.none{color:var(--line)}

/* wind arrow (points where the wind is going) and sky icons */
.wx-arrow{display:inline-block;width:16px;height:16px;vertical-align:-3px;fill:currentColor;transform-origin:50% 50%}
.wx-arrow.none{width:auto;height:auto;color:var(--line)}
.wx-ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wx-ic.sun{color:#B7791F}
.wx-ic.partly{color:#8A6D2B}
.wx-ic.moon,.wx-ic.partlyn{color:var(--navy-2)}
.wx-ic.cloud,.wx-ic.fog,.wx-ic.wind{color:var(--mute)}
.wx-ic.rain,.wx-ic.storm{color:#1F5C8A}
.wx-ic.snow{color:#4F8BC0}

/* 7-day rows: day / night periods, tap for the detailed forecast */
.wx-days{margin:0 16px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wx-day{border-top:1px solid var(--line)}
.wx-day:first-child{border-top:0}
.wx-day.night{background:var(--surf)}
.wx-day > summary{list-style:none;display:grid;grid-template-columns:26px minmax(0,1fr) 46px 50px 36px;align-items:center;gap:6px;padding:8px 12px;min-height:44px;cursor:pointer;font-size:13px}
.wx-day > summary::-webkit-details-marker{display:none}
.wx-day .nmsk{min-width:0;display:flex;flex-direction:column;gap:1px}
.wx-day .nm{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-day.night .nm{font-weight:600;color:var(--mute)}
.wx-day .wx-ic{width:24px;height:24px}
.wx-day .sk{font-size:12px;color:#3B4A53;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wx-day .tp{font:700 16px var(--font);color:var(--ink);text-align:right;white-space:nowrap}
.wx-day .tp small{font:500 10px var(--font);color:var(--mute);margin-left:2px}
.wx-day .w{display:flex;align-items:center;justify-content:flex-end;gap:2px;font-weight:600;color:var(--navy-2);white-space:nowrap}
.wx-day.windy .w{color:var(--bad)}
.wx-day .pp{text-align:right;font-weight:600;color:#1F5C8A;font-size:12px}
.wx-day .pp.none{color:var(--line)}
.wx-day[open] > summary .sk{white-space:normal}
.wx-day > p{margin:0;padding:0 12px 12px;font-size:14px;line-height:1.45;color:#3B4A53}
@media (max-width:360px){.wx-day > summary{grid-template-columns:24px minmax(0,1fr) 42px 46px 32px;padding:8px 10px}}

/* as-of / footer / loading + error cards */
.wx-asof{margin:0;padding:0 16px 12px;font-size:12px}
.wx-foot{margin:0;padding:4px 16px 16px;font-size:12px;color:var(--mute);line-height:1.5}
.wx-foot a{color:var(--navy-2);font-weight:600;display:inline-block;padding:6px 0}
.wx-card{margin:0 16px 12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:14px;line-height:1.45}
.wx-card.wx-load{padding:8px 0}
.wx-card.wx-load .skel{margin:8px 14px}
.wx-card.wx-err small{color:var(--mute)}