/* Forecast colours stay fixed between the week and hourly views. */
#weatherHeatmaps{
  color-scheme:inherit;
  --wx-text:var(--ui-text,light-dark(#243832,#e0ece8));--wx-muted:var(--ui-muted,light-dark(#556b63,#a5bab1));
  --wx-surface:var(--ui-surface,light-dark(#e5ecee,#192b29));--wx-line:color-mix(in srgb,var(--wx-text) 18%,var(--wx-surface));
  --wx-ring:light-dark(#153e35,#e7fff3);--wx-empty:light-dark(#d7dfdf,#344643);
  --wx-t0:#00224e;--wx-t1:#263d6a;--wx-t2:#575d6d;--wx-t3:#808071;--wx-t4:#ada575;--wx-t5:#dacc5a;--wx-t6:#fee838;
  --wx-w0:#00224e;--wx-w1:#3b496c;--wx-w2:#707173;--wx-w3:#a59c74;--wx-w4:#dcca5b;--wx-w5:#fee838;
  --wx-rain:#377bbd;--wx-mixed:#8b62b7;--wx-snow:#168e8c;
  color:var(--wx-text);background:var(--wx-surface);padding:18px 0 0;min-width:0;
  font-size:12px;line-height:1.4;
}
#weatherHeatmaps[hidden],#weatherHeatmaps [hidden]{display:none!important}
#weatherHeatmaps *{box-sizing:border-box}
#weatherHeatmaps button{font:inherit;cursor:pointer;color:inherit}
#weatherHeatmaps button:focus-visible,#weatherHeatmaps [tabindex="0"]:focus-visible{outline:2px solid var(--wx-ring);outline-offset:3px}
#weatherHeatmaps .wx-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px}
#app #weatherHeatmaps .wx-heading h2{font-size:20px;line-height:1.2;letter-spacing:-.03em;font-weight:600;margin:4px 0;color:var(--wx-text)}
#weatherHeatmaps .wx-heading small{font-size:11px;letter-spacing:.12em;color:var(--wx-muted)}
#weatherHeatmaps .wx-local-time{font-size:10px;color:var(--wx-muted);overflow-wrap:anywhere;text-align:right;max-width:100px}
#weatherHeatmaps .wx-week-head,#weatherHeatmaps .wx-week-grid{display:grid;grid-template-columns:58px repeat(7,minmax(0,1fr));column-gap:4px}
#weatherHeatmaps .wx-week-head{align-items:center;margin-bottom:12px}
#weatherHeatmaps .wx-week-head>span{font-size:10px;color:var(--wx-muted)}
#weatherHeatmaps .wx-week-head button{border:0;border-bottom:2px solid transparent;background:none;padding:5px 0;min-height:44px;min-width:0;text-align:center}
#weatherHeatmaps .wx-week-head button[aria-pressed="true"]{border-color:var(--wx-ring);background:color-mix(in srgb,var(--wx-ring) 7%,transparent)}
#weatherHeatmaps .wx-week-head b{font-size:11px;font-weight:600;display:block}
#weatherHeatmaps .wx-week-head small{display:block;font-size:11px;color:var(--wx-muted);white-space:normal}
#weatherHeatmaps .wx-metric{margin:0 0 19px;padding:0;border:0;min-width:0}
#app #weatherHeatmaps .wx-metric h3{display:flex;align-items:baseline;gap:7px;margin:0 0 8px;font-size:13px;line-height:1.3;font-weight:600;color:var(--wx-text)}
#weatherHeatmaps .wx-metric h3 small{font-size:10px;font-weight:400;color:var(--wx-muted)}
#weatherHeatmaps .wx-altitudes{display:grid;grid-template-rows:repeat(3,22px);gap:3px}
#weatherHeatmaps .wx-altitude{display:flex;align-items:baseline;justify-content:space-between;gap:3px;font-size:11px;line-height:16px;white-space:nowrap;color:var(--wx-text)}
#weatherHeatmaps .wx-altitude small{font-size:10px;color:var(--wx-muted);font-variant-numeric:tabular-nums}
#weatherHeatmaps .wx-altitudes .wx-altitude{display:block;position:relative;font-size:10px;line-height:11px}
#weatherHeatmaps .wx-altitudes small{display:block;line-height:11px;font-size:10px}
#weatherHeatmaps .wx-day-block{position:relative;display:grid;grid-template-rows:repeat(3,22px);gap:3px;min-width:0}
#weatherHeatmaps .wx-day-block.is-day-selected:after{content:"";position:absolute;inset:-3px -2px;outline:1px solid var(--wx-line);pointer-events:none}
#weatherHeatmaps .wx-cell-row{display:grid;grid-template-columns:repeat(var(--wx-slots),minmax(0,1fr));gap:1px;min-width:0}
#weatherHeatmaps .wx-cell{appearance:none;display:block;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:1px;position:relative}
#weatherHeatmaps .wx-cell.is-inspected{outline:2px solid var(--wx-ring);outline-offset:1px;z-index:2}
#weatherHeatmaps .wx-now{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--wx-ring);pointer-events:none;z-index:1}
#weatherHeatmaps .wx-now:before{content:"";position:absolute;top:-2px;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--wx-ring)}
#weatherHeatmaps .wx-touch-day{display:none}
#weatherHeatmaps .wx-legend{display:flex;flex-wrap:wrap;gap:4px 9px;margin-top:8px;color:var(--wx-muted);font-size:10px;line-height:1.4}
#weatherHeatmaps .wx-legend span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
#weatherHeatmaps .wx-legend i{width:10px;height:8px;display:inline-block;flex-shrink:0;border-radius:1px}
#weatherHeatmaps .wx-phase-legend{margin-top:5px}
#weatherHeatmaps .wx-temp-0{background:var(--wx-t0)}#weatherHeatmaps .wx-temp-1{background:var(--wx-t1)}
#weatherHeatmaps .wx-temp-2{background:var(--wx-t2)}#weatherHeatmaps .wx-temp-3{background:var(--wx-t3)}
#weatherHeatmaps .wx-temp-4{background:var(--wx-t4)}#weatherHeatmaps .wx-temp-5{background:var(--wx-t5)}
#weatherHeatmaps .wx-temp-6{background:var(--wx-t6)}
#weatherHeatmaps .wx-wind-0{background:var(--wx-w0)}#weatherHeatmaps .wx-wind-1{background:var(--wx-w1)}
#weatherHeatmaps .wx-wind-2{background:var(--wx-w2)}#weatherHeatmaps .wx-wind-3{background:var(--wx-w3)}
#weatherHeatmaps .wx-wind-4{background:var(--wx-w4)}#weatherHeatmaps .wx-wind-5{background:var(--wx-w5)}
#weatherHeatmaps .wx-precip-rain{--wx-phase:var(--wx-rain)}#weatherHeatmaps .wx-precip-mixed{--wx-phase:var(--wx-mixed)}#weatherHeatmaps .wx-precip-snow{--wx-phase:var(--wx-snow)}
#weatherHeatmaps .wx-p0{background:var(--wx-empty)}
#weatherHeatmaps .wx-p1{background:#263d6a}
#weatherHeatmaps .wx-p2{background:#707173}
#weatherHeatmaps .wx-p3{background:#ada575}
#weatherHeatmaps .wx-p4{background:#fee838}
#weatherHeatmaps .wx-missing{background:repeating-linear-gradient(135deg,var(--wx-empty) 0 2px,var(--wx-line) 2px 3px)}
#weatherHeatmaps .wx-note{font-size:10px;line-height:1.6;color:var(--wx-muted);margin:0 0 15px;max-width:none}
#weatherHeatmaps .wx-now-key{display:inline-block;height:10px;width:2px;background:var(--wx-ring);vertical-align:middle;margin-right:3px}
#weatherHeatmaps .wx-inspection{padding:12px;margin:0 0 20px;border:1px solid var(--wx-line);border-radius:10px;min-width:0}
#weatherHeatmaps .wx-detail-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font-size:11px}
#weatherHeatmaps .wx-detail-head strong{font-weight:600}
#weatherHeatmaps .wx-detail-head span{color:var(--wx-muted)}
#weatherHeatmaps dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
#weatherHeatmaps dt{font-size:10px;color:var(--wx-muted)}
#weatherHeatmaps dd{font-variant-numeric:tabular-nums;font-size:15px;font-weight:500;margin:2px 0 0}
#weatherHeatmaps .wx-inspection p{font-size:10px;line-height:1.5;color:var(--wx-muted);margin:0;max-width:none}
#weatherHeatmaps .wx-tooltip{position:fixed;inset:auto;margin:0;width:300px;max-width:calc(100vw - 16px);padding:12px;border:1px solid var(--wx-line);border-radius:10px;background:var(--wx-surface);color:var(--wx-text);box-shadow:0 8px 25px #0003;pointer-events:none;z-index:1000}
#weatherHeatmaps .wx-tooltip p{margin:0;font-size:10px;line-height:1.5;color:var(--wx-muted)}
#weatherHeatmaps .wx-day-heading{display:flex;align-items:center;gap:10px;border-top:1px solid var(--wx-line);padding-top:12px;margin-bottom:18px}
#weatherHeatmaps .wx-day-heading button{border:0;background:none;min-width:40px;min-height:44px;padding:5px}
#weatherHeatmaps .wx-day-heading button:disabled{opacity:.3;cursor:default}
#weatherHeatmaps .wx-day-heading .wx-expand{flex:1;text-align:center}
#weatherHeatmaps .wx-expand strong{display:block;font-weight:600;font-size:15px}
#weatherHeatmaps .wx-expand span{font-size:11px;color:var(--wx-muted)}
#weatherHeatmaps .wx-hour-scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-left:90px}
#weatherHeatmaps .wx-hour-grid{min-width:calc(82px + var(--wx-hours)*29px)}
#weatherHeatmaps .wx-hour-row,#weatherHeatmaps .wx-hour-axis{display:grid;grid-template-columns:82px repeat(var(--wx-hours),minmax(28px,1fr));gap:2px;margin-bottom:3px;min-height:28px}
#weatherHeatmaps .wx-hour-row>.wx-altitude,#weatherHeatmaps .wx-hour-sticky{position:sticky;left:0;background:var(--wx-surface);z-index:3;padding-right:6px;align-items:center}
#weatherHeatmaps .wx-hour-row>.wx-altitude{font-size:10px}
#weatherHeatmaps .wx-hour-axis{font-size:11px;align-items:end;color:var(--wx-muted);min-height:23px}
#weatherHeatmaps .wx-hour-axis small{font-size:10px;display:block;white-space:nowrap}
#weatherHeatmaps .wx-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}
@media(pointer:coarse){
  #weatherHeatmaps .wx-touch-day{display:block;position:absolute;inset:0;border:0;background:transparent;padding:0;z-index:4}
  #weatherHeatmaps .wx-hour-row{min-height:44px;grid-template-columns:82px repeat(var(--wx-hours),minmax(44px,1fr))}
  #weatherHeatmaps .wx-hour-axis{grid-template-columns:82px repeat(var(--wx-hours),minmax(44px,1fr))}
  #weatherHeatmaps .wx-hour-grid{min-width:calc(82px + var(--wx-hours)*46px)}
}
@media(min-width:700px){
  #weatherHeatmaps .wx-week-head,#weatherHeatmaps .wx-week-grid{grid-template-columns:85px repeat(7,minmax(0,1fr));column-gap:7px}
  #weatherHeatmaps .wx-altitudes .wx-altitude{font-size:10px;line-height:16px;display:flex}
  #weatherHeatmaps .wx-altitudes small{font-size:11px;line-height:16px}
  #weatherHeatmaps .wx-legend{font-size:10px;gap:4px 12px}
}

/* Current values and the selected day lead; the seven-day overview follows below. */
#weatherHeatmaps .wx-current { padding:12px; margin:0 0 18px; border:1px solid var(--wx-line); border-radius:18px; background:var(--ui-raised,var(--wx-surface)); }
#weatherHeatmaps .wx-current-heading { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
#weatherHeatmaps .wx-current-heading small { display:block; font-size:11px; color:var(--wx-muted); }
#app #weatherHeatmaps .wx-current-heading h2 { margin:4px 0 8px; font:650 18px/1.2 system-ui; color:var(--wx-text); }
#weatherHeatmaps .wx-current-heading > span { text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
#weatherHeatmaps .wx-current-heading > span small { max-width:110px; overflow-wrap:anywhere; }
#weatherHeatmaps .wx-current-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; }
#weatherHeatmaps .wx-current-table th,#weatherHeatmaps .wx-current-table td { padding:9px 3px; text-align:center; vertical-align:middle; font-variant-numeric:tabular-nums; }
#weatherHeatmaps .wx-current-table th:first-child { width:27%; text-align:left; font-size:10px; font-weight:500; color:var(--wx-muted); overflow-wrap:anywhere; }
#weatherHeatmaps .wx-current-table tbody tr { border-top:1px solid var(--wx-line); }
#weatherHeatmaps .wx-current-table thead th { padding-top:0; }
#weatherHeatmaps .wx-current-table b,#weatherHeatmaps .wx-current-table small { display:block; }
#weatherHeatmaps .wx-current-table small { margin-top:3px; font-size:11px; color:var(--wx-muted); font-weight:400; }
#weatherHeatmaps .wx-mountain-level { width:32px; height:30px; display:block; margin:auto auto 3px; color:var(--wx-text); flex:none; }
#weatherHeatmaps .wx-daylight { display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--wx-line); padding-top:10px; font-size:11px; color:var(--wx-muted); }
#weatherHeatmaps .wx-daylight b { margin-left:4px; color:var(--wx-text); font-variant-numeric:tabular-nums; }
#weatherHeatmaps .wx-current-note { margin:7px 0 0; font-size:11px; color:var(--wx-muted); }
#weatherHeatmaps .wx-day-picker { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; margin:0 0 10px; }
#weatherHeatmaps .wx-day-picker button { min-width:0; min-height:44px; padding:5px 1px; border:1px solid transparent; border-radius:8px; background:var(--ui-raised,var(--wx-surface)); }
#weatherHeatmaps .wx-day-picker button[aria-pressed="true"] { border-color:var(--ui-yellow,var(--wx-ring)); }
#weatherHeatmaps .wx-day-picker b,#weatherHeatmaps .wx-day-picker small { display:block; font-size:10px; }
#weatherHeatmaps .wx-day-picker small { color:var(--wx-muted); font-size:11px; }
#weatherHeatmaps .wx-hour-row > .wx-altitude { justify-content:flex-start; align-items:center; gap:4px; }
#weatherHeatmaps .wx-hour-row > .wx-altitude small { display:block; line-height:1.1; }
#weatherHeatmaps .wx-hour-row .wx-mountain-level { width:18px; height:22px; margin:0; }
#weatherHeatmaps .wx-week { margin-top:24px; padding-top:20px; border-top:1px solid var(--wx-line); }
.vertex-v3 #app#app#app#app#app#app #weatherOverview[hidden] { display:none!important; }

/* Equal compact forecast slots, with shared scrolling across dates and metrics. */
#weatherHeatmaps .wx-week-scroll { overflow-x:auto; overscroll-behavior-x:contain; max-width:100%; min-width:0; scroll-padding-left:90px; }
#weatherHeatmaps .wx-week-head,#weatherHeatmaps .wx-week-grid { width:max-content; column-gap:8px; }
#weatherHeatmaps .wx-week-grid .wx-cell-row { gap:2px; }
#weatherHeatmaps .wx-altitudes,#weatherHeatmaps .wx-week-head > span { position:sticky; left:0; z-index:5; background:var(--wx-surface); }
#weatherHeatmaps .wx-week-head > span { height:100%; display:flex; align-items:center; }
#weatherHeatmaps .wx-week-scroll:focus-visible { outline:2px solid var(--wx-ring); outline-offset:2px; }
#weatherHeatmaps .wx-hour-grid { min-width:calc(82px + var(--wx-hours)*46px); }
#weatherHeatmaps .wx-hour-row,#weatherHeatmaps .wx-hour-axis { grid-template-columns:82px repeat(var(--wx-hours),minmax(44px,1fr)); }
#weatherHeatmaps .wx-hour-row { min-height:40px; }
#weatherHeatmaps .wx-cell-value { display:flex; align-items:center; justify-content:center; height:100%; padding:2px; font:600 11px/1.2 system-ui; font-variant-numeric:tabular-nums; pointer-events:none; }
#weatherHeatmaps .wx-cell:is(.wx-temp-0,.wx-temp-1,.wx-wind-4,.wx-wind-5) { color:#fff; }
#weatherHeatmaps .wx-cell:is(.wx-temp-2,.wx-temp-3,.wx-temp-4,.wx-temp-5,.wx-temp-6,.wx-wind-1,.wx-wind-2,.wx-wind-3,.wx-p4) { color:#080d12; }
#weatherHeatmaps .wx-cell:is(.wx-p1,.wx-p2,.wx-p3) { color:light-dark(#101820,#fff); }

#weatherHeatmaps .wx-metric .wx-week-scroll { scrollbar-width:none; }
#weatherHeatmaps .wx-metric .wx-week-scroll::-webkit-scrollbar { display:none; }

/* A luminance-ordered blue/yellow scale, with range bars and precipitation textures. */
#weatherHeatmaps .wx-day-heading { grid-template-columns:1fr; }
#weatherHeatmaps .wx-cell:is(.wx-temp-0,.wx-temp-1,.wx-temp-2,.wx-wind-0,.wx-wind-1,.wx-wind-2,.wx-p1,.wx-p2) { color:#fff; }
#weatherHeatmaps .wx-cell:is(.wx-temp-3,.wx-temp-4,.wx-temp-5,.wx-temp-6,.wx-wind-3,.wx-wind-4,.wx-wind-5,.wx-p3,.wx-p4) { color:#080d12; }
#weatherHeatmaps :is(.wx-cell,.wx-legend i) { position:relative; }
#weatherHeatmaps :is(.wx-cell,.wx-legend i)::after { content:""; position:absolute; bottom:0; left:0; width:var(--wx-range,0%); height:2px; background:#ffffffb0; box-shadow:0 -1px #0008; pointer-events:none; }
#weatherHeatmaps .wx-missing::after { display:none; }
#weatherHeatmaps .wx-temp-0 { --wx-range:14%; } #weatherHeatmaps .wx-temp-1 { --wx-range:28%; } #weatherHeatmaps .wx-temp-2 { --wx-range:42%; } #weatherHeatmaps .wx-temp-3 { --wx-range:57%; } #weatherHeatmaps .wx-temp-4 { --wx-range:71%; } #weatherHeatmaps .wx-temp-5 { --wx-range:85%; } #weatherHeatmaps .wx-temp-6 { --wx-range:100%; }
#weatherHeatmaps .wx-wind-0 { --wx-range:0%; } #weatherHeatmaps .wx-wind-1 { --wx-range:20%; } #weatherHeatmaps .wx-wind-2 { --wx-range:40%; } #weatherHeatmaps .wx-wind-3 { --wx-range:60%; } #weatherHeatmaps .wx-wind-4 { --wx-range:80%; } #weatherHeatmaps .wx-wind-5 { --wx-range:100%; }
#weatherHeatmaps .wx-p0 { --wx-range:0%; } #weatherHeatmaps .wx-p1 { --wx-range:25%; } #weatherHeatmaps .wx-p2 { --wx-range:50%; } #weatherHeatmaps .wx-p3 { --wx-range:75%; } #weatherHeatmaps .wx-p4 { --wx-range:100%; }
#weatherHeatmaps .wx-precip-rain:not(.wx-p0) { background-image:repeating-linear-gradient(90deg,transparent 0 6px,#0003 6px 7px); }
#weatherHeatmaps .wx-precip-mixed:not(.wx-p0) { background-image:repeating-linear-gradient(135deg,transparent 0 6px,#0003 6px 7px); }
#weatherHeatmaps .wx-precip-snow:not(.wx-p0) { background-image:radial-gradient(#0005 1px,transparent 1px); background-size:6px 6px; }
#weatherHeatmaps .wx-cell-value { position:relative; z-index:1; }
#weatherLegacy[hidden] { display:none!important; }
/* Precipitation type in colour as well as texture: a top band in the rain/mixed/snow colour. */
#weatherHeatmaps :is(.wx-precip-rain,.wx-precip-mixed,.wx-precip-snow):not(.wx-p0) { box-shadow:inset 0 4px 0 var(--wx-phase); }
/* The selected-day outline and the now line must not make each weekly chart scroll vertically. */
#weatherHeatmaps .wx-week-scroll { overflow-y:hidden; padding-block:4px; }
#weatherHeatmaps .wx-inspection:empty { display:none; }