/* Weather card — scoped styles (#weather .wx-*). Palette hard-coded from
   src/input.css so it never depends on a particular Tailwind build, mirroring
   the .update-body approach. Dark mode via prefers-color-scheme. */

/* Card body: six uniform blocks — condition, temperature+wind, sun, moon,
   hourly forecast, daily forecast — in one grid. One column on small screens,
   two from 1020px up (where the card is wide enough that the temp+wind block no
   longer needs to wrap and two forecast grids fit side by side without clipping). */
#weather .wx-cols { display:grid; grid-template-columns:1fr; gap:1rem 2.25rem; align-items:start; }
@media (min-width:1020px) { #weather .wx-cols { grid-template-columns:1fr 1fr; } }
#weather .wx-sub[hidden] { display:none; }        /* beats the flex display on .wx-sun / .wx-moon */
/* Full-width rule between the sun/moon row and the forecast row — spans both
   columns, mirroring the marquee underline and the footer's top border. */
#weather .wx-div { grid-column:1 / -1; height:0; border-top:1px solid rgba(0,0,0,.05); }
#weather .wx-tempwind { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 2.25rem; }
#weather .wx-sun { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem 1.5rem; }
#weather .wx-sun, #weather .wx-moon { font-size:.8rem; color:#44403c; }
#weather .wx-group { display:flex; align-items:center; gap:.7rem; }
#weather .wx-icon, #weather .wx-compass { width:56px; height:56px; flex:none; }
/* One shared value/label pair so all three stats align on the same two baselines. */
#weather .wx-val { font-size:1.375rem; font-weight:700; line-height:1.15; color:#1c1917; white-space:nowrap; }
#weather .wx-val .u { font-size:.9rem; font-weight:700; vertical-align:top; margin-left:1px; }
#weather .wx-lbl { font-size:.75rem; line-height:1.2; color:#44403c; margin-top:.15rem; white-space:nowrap; }
#weather .wx-ring { fill:none; stroke:rgba(0,0,0,.15); stroke-width:3; }
#weather .wx-marker { fill:#4a7a2c; }
#weather .wx-dir { fill:#1c1917; font-size:24px; font-weight:800; }
#weather .wx-foot { margin-top:.85rem; padding-top:.55rem; border-top:1px solid rgba(0,0,0,.05); text-align:center; font-size:.72rem; color:#57534e; }
#weather .wx-foot-place { font-weight:600; }
/* Forecast block heading ("Hourly forecast" / "Daily forecast"). */
#weather .wx-fc-head { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#57534e; margin-bottom:.45rem; }
/* Forecast rows: four columns filling the block width — day/time · (icon +
   temp) · precip · wind — so the hourly and daily grids line up identically
   whatever the label length ("18:00" vs "Wednesday"). Split 25/30/20/25: the
   icon+temp cell gets a little extra (it carries the fixed 28px icon plus a
   hi/lo pair, incl. winter double-negatives), taken from the now-tidy whole-mm
   precip column. minmax(0,·) keeps the tracks strictly proportional. */
#weather .wx-fc { display:grid; grid-template-columns:minmax(0,25fr) minmax(0,30fr) minmax(0,20fr) minmax(0,25fr); align-items:center; gap:.5rem; font-size:.8rem; }
#weather .wx-fc > * { min-width:0; white-space:nowrap; }
#weather .wx-fc-cond { display:inline-flex; align-items:center; gap:.35rem; }
#weather .wx-fc-icon { width:28px; height:28px; flex:none; }
#weather .wx-fc-day { font-weight:700; color:#1c1917; }
#weather .wx-fc-hi { font-weight:700; color:#1c1917; }
#weather .wx-fc-lo { color:#44403c; }
#weather .wx-fc-sub { color:#44403c; }
/* Sun / moon block internals. */
#weather .wx-astro-item { display:inline-flex; align-items:center; gap:.3rem; }
#weather .wx-astro-icon { width:36px; height:36px; flex:none; }
#weather #wx-sunrise, #weather #wx-sunset, #weather #wx-moon { color:#1c1917; } /* sun times + moon phase are real values → primary text colour */
/* Footer mirrors the ticker as a bottom bookend: it bleeds to the card's side & bottom
   padding (negative margins), so the divider spans the full card width and the text sits
   with a symmetric .5rem above and below — evenly divided, like the ticker's band up top.
   Horizontal padding re-insets the right-aligned "Updated" so it never touches the edge. */
#weather .wx-foot-right { text-align:right; margin:1rem -1rem -1rem; padding:.5rem 1rem; }
@media (min-width:768px) { #weather .wx-foot-right { margin:1.25rem -2rem -1.5rem; padding:.5rem 2rem; } }
@media (prefers-color-scheme: dark) {
    #weather .wx-val { color:#fff; }
    #weather .wx-dir { fill:#fff; }
    #weather .wx-lbl { color:#d6d3d1; }
    #weather .wx-foot { color:#d6d3d1; border-top-color:rgba(255,255,255,.1); }
    #weather .wx-fc-head { color:#a8a29e; }
    #weather .wx-fc-day, #weather .wx-fc-hi { color:#fff; }
    #weather .wx-fc-lo { color:#d6d3d1; }
    #weather .wx-fc-sub { color:#d6d3d1; }
    #weather .wx-sun, #weather .wx-moon { color:#d6d3d1; }
    #weather #wx-sunrise, #weather #wx-sunset, #weather #wx-moon { color:#fff; }
    #weather .wx-div { border-top-color:rgba(255,255,255,.1); }
    #weather .wx-ring { stroke:rgba(255,255,255,.2); }
    #weather .wx-marker { fill:#9ccc66; }
}

/* Secondary-data ticker (marquee) across the top of the card — a bonus layer carrying
   the extra gist fields that don't fit the card (humidity, rain today, dew point,
   pressure, cloud cover, visibility, UV index). Palette matches the card. It is
   supplementary, so under prefers-reduced-motion it is hidden entirely (not shown as a
   static block): motion-averse visitors get the clean core card. Populated by weather.js;
   content is doubled so the loop is seamless. */
#weather .wx-ticker-wrap {
    overflow:hidden; white-space:nowrap; position:relative;
    margin:-1rem -1rem 1rem;                                  /* bleed to the card's padded edges, sit above .wx-cols */
    padding:.5rem 0; border-bottom:1px solid rgba(0,0,0,.06);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); /* fade the scroll in/out at the edges */
}
@media (min-width:768px) { #weather .wx-ticker-wrap { margin:-1.5rem -2rem 1.25rem; } }
#weather .wx-ticker-track { display:inline-flex; align-items:center; animation:wx-ticker-scroll 34s linear infinite; will-change:transform; }
#weather .wx-ticker-wrap:hover .wx-ticker-track { animation-play-state:paused; }   /* hover to read */
@keyframes wx-ticker-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
#weather .wx-ticker-item { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; padding:0 1.1rem; font-size:.8rem; color:#44403c; font-variant-numeric:tabular-nums; }
#weather .wx-ticker-item svg { width:16px; height:16px; flex:none; stroke:#4a7a2c; fill:none; stroke-width:1.8; }
#weather .wx-ticker-item .v { font-weight:700; color:#1c1917; }
#weather .wx-ticker-sep { color:#a8a29e; }
@media (prefers-reduced-motion: reduce) { #weather .wx-ticker-wrap { display:none; } }
@media (prefers-color-scheme: dark) {
    #weather .wx-ticker-item { color:#d6d3d1; }
    #weather .wx-ticker-item svg { stroke:#9ccc66; }
    #weather .wx-ticker-item .v { color:#fff; }
    #weather .wx-ticker-sep { color:#57534e; }
    #weather .wx-ticker-wrap { border-bottom-color:rgba(255,255,255,.1); }
}