/* THE WEATHER CARD (wxcard.js draws it, wxhero.js brings it to life).
 *
 * The card keeps its own palette in every theme: it is a window onto the
 * sky over the place, drawn at night and by day on the same dark glass, so
 * its tokens are declared on the card and nothing outside it can change
 * them. What the theme decides is the ground the card stands on: the blue
 * hour on the light page, the page's own card colour on the dark one, and
 * black on black.
 */
.wxc{ --bg:#06080d; --bg-panel:#0e131c; --bg-panel-raised:#141a26;
  --border:rgba(255,255,255,.08); --text:#e6ecf5; --text-dim:#8894a8; --text-faint:#5a6478;
  --accent:#4fa8ff; --accent-warm:#ffb648; --accent-cold:#7dd3fc; --good:#34d399; --warn:#fbbf24; --bad:#f87171;
  --inset:clamp(16px,4vw,40px);
  --wx-ground:#0d2440;
  color:var(--text); font-family:var(--sans); }
html[data-theme="dark"] .wxc{ --wx-ground:#101b2b; }
html[data-theme="black"] .wxc{ --wx-ground:#000000; }

  .wxc{ background:transparent; border:0; border-radius:0; overflow:hidden; box-shadow:none; min-width:0; width:100%; }
  .wxc-in{ display:flex; flex-direction:column; }
  .wxc-eyebrow{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
                padding:14px var(--inset) 0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .wxc-eyebrow .eb{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wxc-dots{ display:inline-flex; gap:7px; flex:0 0 auto; }
  .wxc-dots .dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.26); transition:background .2s, transform .2s; }
  .wxc-dots .dot.on{ background:var(--accent); transform:scale(1.15); }
  .wxc-dots .dot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .wxc-in{ transition:opacity .32s ease; }
  .wxc-in.out, .wxc-in.in{ opacity:0; }
  @media (prefers-reduced-motion: reduce){ .wxc-in{ transition:none; } }
  .wxc-eyebrow b{ color:var(--text); font-weight:700; }
  .wxc-eyebrow .sep{ color:var(--text-dim); margin:0 2px; }
  .wxc-eyebrow .ev{ color:var(--warn); }
  .wxc-eyebrow .tx{ font-family:var(--mono); text-transform:none; letter-spacing:0; color:var(--text-faint); margin-left:6px; }
  .wxs{ display:flex; align-items:center; gap:12px; width:100%; padding:6px var(--inset) 9px; border:0; background:transparent;
        color:var(--text); font:inherit; text-align:left; cursor:pointer; min-height:52px; }
  .wxs:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:12px; }
  .wxs-ic{ flex:0 0 56px; border-radius:10px; background:0; border:0; box-shadow:none; }
  .wxs-t{ font-size:30px; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1; flex:0 0 auto; }
  .wxs-t i{ font-style:normal; font-weight:300; font-size:18px; color:color-mix(in srgb, var(--text) 70%, transparent); vertical-align:top; margin-left:1px; }
  .wxs-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
  .wxs-txt b{ font-size:13px; font-weight:500; color:color-mix(in srgb, var(--text) 90%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wxs-txt span{ font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wxs-go{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 12px; border-radius:999px;
           font-size:12px; font-weight:650; color:#0a1a2b; background:rgba(255,255,255,.92); letter-spacing:.01em; transition:.15s; }
  .wxs:hover .wxs-go{ background:#fff; }
  .wxs-go svg{ width:13px; height:13px; transition:transform .2s; }
  .wxs-go .close{ display:none; }
  .wxc.open .wxs-go .close{ display:inline; } .wxc.open .wxs-go .open{ display:none; }
  .wxc.open .wxs-go svg{ transform:rotate(180deg); }
  .wxs-note{ margin:0; padding:9px var(--inset) 12px; font-size:12.5px; line-height:1.5; color:var(--text-dim); }
  .wxx{ padding:0 var(--inset) 12px; display:flex; flex-direction:column; gap:10px; max-width:1180px; margin:0 auto; width:100%; box-sizing:border-box; }
  .wxc-foot{ margin:0; font-size:11px; line-height:1.5; color:var(--text-faint); padding:0 4px; }
  .wxc .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; }
  .wxh{ position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--border);
        background:linear-gradient(180deg,#0d1622,#070b12); }
  .wxh-scene{ position:absolute; inset:0; pointer-events:none; }
  .wxh-scene canvas{ display:block; width:100%; height:100%; object-fit:cover; }
  .wxh-scrim1{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#070b1233,#070b12b3,#070b12ee); }
  .wxh-scrim2{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#070b12cc,#070b1266,transparent); }
  .wxh-body{ position:relative; padding:10px 16px 8px; }
  .wxh-temp{ display:flex; align-items:flex-start; line-height:1; }
  .wxh-temp .t{ font-size:46px; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--text); }
  .wxh-temp .deg{ font-size:22px; font-weight:300; color:color-mix(in srgb, var(--text) 70%, transparent); margin:3px 0 0 1px; }
  .wxh-temp .hl{ margin:6px 0 0 12px; font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--text-dim); }
  .wxh-temp .hi{ color:color-mix(in srgb, var(--text) 85%, transparent); }
  .wxh-temp .sl{ margin:0 4px; color:color-mix(in srgb, var(--text-dim) 50%, transparent); }
  .wxh-line{ margin-top:4px; font-size:12.5px; font-variant-numeric:tabular-nums; }
  .wxh-line .c{ font-weight:500; color:color-mix(in srgb, var(--text) 90%, transparent); }
  .wxh-line .dot{ margin:0 6px; color:color-mix(in srgb, var(--text-dim) 40%, transparent); }
  .wxh-line .d{ color:var(--text-dim); }
  .wxh-line .v{ color:color-mix(in srgb, var(--text) 85%, transparent); }
  .wxh-narr-w{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.05); }
  .wxh-day{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
  .wxh-narr{ font-size:12px; line-height:1.625; color:var(--text-dim); }
  .wxh-narr.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .wxh-more{ margin-top:2px; padding:0; border:0; background:none; font:inherit; font-size:11px; font-weight:500; cursor:pointer;
             color:color-mix(in srgb, var(--text) 70%, transparent); transition:color .15s; }
  .wxh-more:hover{ color:var(--text); }
  .wxh-legend{ margin-top:6px; }
  .wxh-legend:empty{ display:none; }
  .wxh-notes{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
  .wxh-note{ display:flex; align-items:center; gap:4px; padding:2px 6px; border-radius:999px; border:1px solid var(--border);
             background:rgba(0,0,0,.2); color:var(--text-dim); font:inherit; font-size:9.5px; font-weight:500; line-height:1; cursor:pointer; transition:color .15s; }
  .wxh-note:hover{ color:color-mix(in srgb, var(--text) 80%, transparent); }
  .wxh-note[aria-expanded="true"]{ border-color:color-mix(in srgb, var(--text) 25%, transparent); background:color-mix(in srgb, var(--text) 10%, transparent); color:var(--text); }
  .wxh-note span{ max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wxh-note-d{ margin:4px 0 0; font-size:10.5px; line-height:1.45; color:var(--text-dim); }
  .wxh-chips{ margin-top:8px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; border-top:1px solid rgba(255,255,255,.07); padding-top:6px; }
  .wxh-chip{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; }
  .wxh-chip .v{ font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; }
  .wxh-chip .l{ font-size:9.5px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:color-mix(in srgb, var(--text-dim) 75%, transparent);
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .wxh-alert{ margin:-14px -16px 10px; border-radius:12px 12px 0 0; overflow:hidden; border-bottom:1px solid color-mix(in srgb, var(--ac) 33%, transparent);
              background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 15%, transparent), transparent 70%); }
  .wxh-alert-b{ width:100%; display:flex; align-items:flex-start; gap:10px; padding:10px 16px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
  .wxh-dot{ position:relative; margin-top:3px; flex:0 0 8px; width:8px; height:8px; display:flex; }
  .wxh-dot .ping{ position:absolute; inset:0; border-radius:50%; background:var(--ac); opacity:.7; }
  .wxh-dot .core{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--ac); }
  @media (prefers-reduced-motion: no-preference){
    .wxh-dot .ping{ animation:wxping 1s cubic-bezier(0,0,.2,1) infinite; }
    @keyframes wxping{ 75%,100%{ transform:scale(2); opacity:0; } }
  }
  .wxh-alert-t{ flex:1 1 auto; min-width:0; display:block; }
  .wxh-alert-t .row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .wxh-alert-t .ev{ font-size:13px; font-weight:600; color:var(--text); line-height:1.25; }
  .wxh-alert-t .tag{ font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.025em; padding:1px 6px; border-radius:4px;
                     color:var(--ac); background:color-mix(in srgb, var(--ac) 13%, transparent); }
  .wxh-alert-t .where{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px;
                       font-size:11.5px; line-height:1.375; color:var(--text-dim); }
  .wxh-alert-t .more{ display:block; margin-top:2px; font-size:10px; color:var(--text-faint); }
  .wxh-alert-d{ padding:10px 16px 12px; border-top:1px solid color-mix(in srgb, var(--ac) 20%, transparent); font-size:11.5px; line-height:1.625;
                color:var(--text-dim); white-space:pre-line; max-height:192px; overflow-y:auto; }
  @media (max-width:520px){
    .wxs{ gap:9px; padding:5px var(--inset) 8px; }
    .wxc-eyebrow{ padding-top:12px; }
    .wxs-go .open, .wxs-go .close{ display:none; }
    .wxc.open .wxs-go .close{ display:none; }
    .wxs-go{ padding:7px; }
    .wxs-t{ font-size:26px; }
    .wxh-chips{ gap:4px; }
  }
.wxw{ border-radius:12px; border:1px solid var(--border); overflow:hidden; background:rgba(0,0,0,.2); }
.wxw-chart{ position:relative; }
.wxw-chart svg{ position:absolute; inset:0; width:100%; height:100%; }
.wxw-grid{ display:grid; grid-template-columns:repeat(var(--cols,7),minmax(0,1fr)); }
.wxw-div{ position:absolute; inset:0; }
.wxw-div .l{ border-left:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.wxw-highs{ position:absolute; inset:0; pointer-events:none; }
.wxw-highs div{ position:relative; }
.wxw-highs span{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
                 font-size:calc(10px * var(--ts,1)); line-height:1.1; font-weight:600;
                 font-variant-numeric:tabular-nums; color:color-mix(in srgb, var(--text) 85%, transparent); }
.wxw-highs span.lo-l{ font-size:calc(9.5px * var(--ts,1)); font-weight:500; color:var(--text-faint); }
.wxw-pts{ position:absolute; inset:0; pointer-events:none; }
.wxw-pts div{ position:relative; }
.wxw-pt{ position:absolute; left:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(7,11,18,.9); }
.wxw-pt.hi{ background:var(--warn); }
.wxw-pt.lo{ background:var(--accent-cold); }
.wxw-pt.now{ width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--accent);
             box-shadow:0 0 0 1.5px rgba(7,11,18,.9); }
.wxw-tiles{ border-bottom:1px solid var(--border); }
.wxw-tile{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 2px; min-width:0; cursor:pointer; transition:background .2s; -webkit-tap-highlight-color:transparent; }
.wxw-tile:hover{ background:rgba(255,255,255,.04); }
.wxw-tile.on{ background:rgba(79,168,255,.12); box-shadow:inset 0 2px 0 var(--accent); }
.wxw-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.wxw-tile.now{ background:rgba(255,255,255,.03); }
.wxw-tile.now .wd{ color:var(--accent); }
.wxw-tile.now .lo .fl{ font-size:calc(8.5px * var(--ts,1)); color:var(--text-faint); margin-right:2px; letter-spacing:.02em; }
.wxw-tile[data-l="1"]{ border-left:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.wxw-tile .wd{ font-size:calc(11px * var(--ts,1)); font-weight:600; color:var(--text); line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wxw-tile .md{ font-size:calc(9.5px * var(--ts,1)); color:var(--text-faint); line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wxw-tile canvas.ic{ margin:2px 0; }
.wxw-tile .hl{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap;
               gap:0 4px; line-height:1; max-width:100%; min-width:0; }
.wxw-tile .h{ font-size:calc(14px * var(--ts,1)); font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.wxw-tile .lo{ font-size:calc(11px * var(--ts,1)); font-variant-numeric:tabular-nums; color:var(--text-faint); }
.wxw-tile .dets{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:2px; width:100%; min-width:0; }
.wxw-det{ height:calc(11px * var(--ts,1)); line-height:1; font-size:calc(9.5px * var(--ts,1)); font-variant-numeric:tabular-nums; color:var(--text-dim); }
.wxw-det .sfx{ color:var(--text-faint); margin-left:1px; }
.wxw-tile canvas.moon{ display:block; }
/* the ground, which the card's own rule above leaves transparent */
.wxc{ background:var(--wx-ground); padding-bottom:clamp(12px,1.6vw,20px); }
.wxc-eyebrow a{ color:var(--accent); text-decoration:none; font-weight:650; text-transform:none; letter-spacing:0; font-size:12.5px; white-space:nowrap; }
.wxc-eyebrow a:hover{ text-decoration:underline; }
.wxc-foot a{ color:var(--accent); text-decoration:none; }
.wxc-foot a:hover{ text-decoration:underline; }
/* a page may carry a rule of its own for a bare .day (the place page's old
   week tiles did); the card's day face is the hero, and keeps the hero's */
.wxc .wxh.day{ padding:0; text-align:left; background:linear-gradient(180deg,#0d1622,#070b12); min-width:0; }
/* BLACK IS BLACK: on the black ground nothing paints a light ground but a
   pressed control, so the strip's control is drawn as an outline there */
html[data-theme="black"] .wxs-go, html[data-theme="black"] .wxs:hover .wxs-go{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 70%, transparent); }
/* an eyebrow that names an alert wraps rather than cut the alert's name:
   the alert is why the card is there */
.wxc-eyebrow .eb:has(.ev){ white-space:normal; overflow:visible; line-height:1.45; }
.wxc-eyebrow:has(.ev){ align-items:flex-start; }
/* the alert's pulse is a mark, drawn as the alerts page draws its swatches
   (on a layer of its own), so no theme reads it as a ground */
.wxh-dot .ping, .wxh-dot .core{ background:none; }
.wxh-dot .ping::before, .wxh-dot .core::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--ac); }
.wxh-dot .core{ position:relative; }

/* ── THE LIGHT THEME (owner, Sep 27: "when the white site option is selected
   our new addition doesnt go white") ───────────────────────────────────
   On the light page the card is light: the page's ink on the page's card
   colour, the sky scene behind the hero seen through a pale veil so the
   words stand on it, and the week on a pale sky so its white clouds still
   read. The colours carrying meaning (the highs, the lows, the chance of
   rain, the alert) are deepened to hold their contrast on white. */
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc{
  --text:#17222f; --text-dim:#51606f; --text-faint:#6c7682; --border:rgba(23,34,47,.13);
  --accent:#1470c0; --accent-cold:#1b86c4; --warn:#c07a00; --bad:#c62828; --good:#1b8f5a;
  --wx-ground:var(--card, #ffffff); --wx-panel:#e6eef7; }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh,
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh.day{ background:linear-gradient(180deg,#dbe7f4,#eef3f9); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-scrim1{ background:linear-gradient(180deg,#f6f9fcb3,#f6f9fcd9,#f6f9fcf2); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-scrim2{ background:linear-gradient(90deg,#f6f9fce6,#f6f9fc99,#f6f9fc33); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-narr-w{ border-top-color:rgba(23,34,47,.1); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-chips{ border-top-color:rgba(23,34,47,.12); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-note{ background:rgba(255,255,255,.6); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw{ background:var(--wx-panel); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-tile:hover{ background:rgba(23,34,47,.04); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-tile.now{ background:rgba(23,34,47,.05); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-tile.on{ background:rgba(20,112,192,.12); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-pt,
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-pt.now{ box-shadow:0 0 0 1.5px var(--wx-panel); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxs-go,
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxs:hover .wxs-go{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 55%, transparent); }
/* a sun's glow reaches the edge of its small square picture; on the light
   panel that edge showed as a pale square, so the small scenes fade out
   round their subject */
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-tile canvas.ic,
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxs-ic{
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%); mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%); }