/* Shared Consumer embed spacing. Keep chart axes' own label gutters intact. */
:root { --wb-gutter:12px; --wb-gutter-top:20px; }
@media(max-width:480px) { :root { --wb-gutter:4px; --wb-gutter-top:18px; } }
/* The rail remains outside the faded chart area, immediately above its legend. */
.weather-windows-grid-widget__grid,
.weather-windows-grid-widget__grid:hover,
.weather-windows-grid-widget__grid:focus-within { scrollbar-width:none; }
.weather-windows-grid-widget__grid::-webkit-scrollbar { display:none; }
.weather-windows-grid-widget__grid:has(>.tsg--host-scrolls) { padding-bottom:0; mask-image:none; }
.weather-windows-grid-widget .tsg .wb-forecast-legend { width:var(--wb-forecast-viewport,100%); max-width:var(--wb-forecast-viewport,100%); border-top:0; margin-top:0; padding-top:2px; }
.wb-forecast-scroll { position:sticky; left:0; max-width:100%; height:24px; flex-shrink:0; margin-top:4px; cursor:grab; touch-action:none; }
.wb-forecast-scroll[hidden] { display:none; }
.wb-forecast-scroll:active { cursor:grabbing; }
.wb-forecast-scroll__track { position:absolute; inset:9px 0; height:6px; background:#eef0eb; border-radius:999px; }
.wb-forecast-scroll__thumb { display:block; height:100%; border:1px solid #eef0eb; background:#a6a6a6; border-radius:999px; }
.wb-forecast-scroll:is(:hover,:focus-visible) .wb-forecast-scroll__thumb { background:#545552; }
.wb-forecast-scroll:focus-visible { outline:2px solid #176b84; outline-offset:2px; border-radius:4px; }
.wb-daynight-icons { position:absolute; top:0; bottom:0; pointer-events:none; }
.wb-daynight-icons img { position:absolute; top:12px; width:16px; height:16px; transform:translate(-50%,-50%); background:#fafafa; box-shadow:0 0 0 3px #fafafa; }
@media(forced-colors:active) { .wb-forecast-scroll__track { background:Canvas; border:1px solid CanvasText; } .wb-forecast-scroll__thumb { background:ButtonText; border-color:Canvas; } }

/* Trip dates form a two-row header; only Today has text below the rule. */
.weather-planner-widget .itg__header-cell {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:40px minmax(20px,1fr);
  justify-content:stretch;
  align-items:stretch;
  padding:0;
  gap:0;
}
.weather-planner-widget .itg__header-cell::before,
.weather-planner-widget .itg__header-cell::after,
.weather-planner-widget .itg__header-cell:last-child::after { content:none; }
.weather-planner-widget .itg__header-main {
  width:calc(100% - 24px);
  margin-inline:12px;
  padding:12px 6px 8px;
  border-bottom:var(--wa-hairline);
}
.weather-planner-widget .itg__header-sub { padding:6px 6px 0; }

/* One shared summary box, matching the Daily forecast date control. */
.wb-planner-readout { min-height:123px; padding:4px 0; }
.wb-planner-metrics,.wb-planner-hint {
  box-sizing:border-box;
  min-height:78px;
  border:1px solid color-mix(in oklab,var(--tertiary) var(--opacity-stroke,30%),transparent);
  border-radius:var(--radius-card,6px);
  padding:16px 12px;
}
.wb-planner-hint { display:flex; align-items:center; justify-content:center; margin:35px 0 0; }
@media(max-width:480px) {
  .wb-planner-readout { min-height:176px; }
  .wb-planner-selection { min-height:0; margin-bottom:8px; }
  .wb-planner-metrics,.wb-planner-hint { min-height:138px; }
  .wb-planner-hint { margin-top:29px; }
}

.weather-planner-widget .itg--labels-above .itg__row:first-child > .itg__rowlabel { padding-top:10px; }

/* Compact daily sky row; don't reserve a chance label when none is rendered. */
.daily-weather-summary-widget .weather-apps-sky {
  --tsp-glyph-row-h:calc(36px + var(--tsp-glyph-chance-h, 0px)) !important;
}
.daily-weather-summary-widget .weather-apps-sky:not(:has(.tsp__glyph-chance)) {
  --tsp-glyph-chance-h:0px !important;
}

/* Give the shorter samples more presence without moving or resizing titles. */
@container (min-width:480px) {
  .activity-outlook-widget__row { padding-block:24px; }
  .activity-outlook-widget__rows { margin-top:8px; }
}
.route-timings-widget .jst { --jst-track-h:12px; }
.route-timings-widget .jst__stack { row-gap:18px; }
.forecast-stability-widget .tsp { margin-top:20px; }

/* Separate forecast bands and cities without enlarging their text or cells. */
.weather-windows-grid-widget .tsg.tsg--labels-above .tsg__row ~ .tsg__row > .tsg__rowlabel {
  padding-top:14px;
}
.weather-planner-widget .itg--labels-above .itg__rowlabel { padding-top:26px; }
.weather-planner-widget .itg--labels-above .itg__row:first-child > .itg__rowlabel { padding-top:24px; }
@media(max-width:480px) {
  .weather-windows-grid-widget .tsg.tsg--labels-above .tsg__row ~ .tsg__row > .tsg__rowlabel { padding-top:10px; }
  .weather-planner-widget .itg--labels-above .itg__rowlabel { padding-top:22px; }
  .weather-planner-widget .itg--labels-above .itg__row:first-child > .itg__rowlabel { padding-top:16px; }
}

/* Keep titles readable while capping them at the hero subhead's scale.
   Embed viewports are narrower than the parent page. */
main.weather-apps-widget h2 { font-size:clamp(1.125rem,2vw,1.5rem); line-height:1.2; }

.weather-windows-grid-widget__title { font-weight:600; }

/* Use the colored weather set for the chance key and activity metric labels. */
.weather-apps-sky .tsp__glyph-key:has(> .lucide-cloud-rain-wind) { width:20px; min-height:20px; background:url('/media/consumer/icons/humidity.svg') center / 20px 20px no-repeat; }
.weather-apps-sky .tsp__glyph-key > .lucide-cloud-rain-wind { visibility:hidden; }
.activity-outlook-widget__variable:has(> .lucide-cloud-rain-wind) { --weather-metric-icon:url('/media/consumer/icons/rain-no-sun.svg'); }
.activity-outlook-widget__variable:has(> .lucide-thermometer) { --weather-metric-icon:url('/media/consumer/icons/heat_1.svg'); }
.activity-outlook-widget__variable:has(> .lucide-wind) { --weather-metric-icon:url('/media/consumer/icons/wind-no-sun.svg'); }
.activity-outlook-widget__variable:has(> .lucide-cloud) { --weather-metric-icon:url('/media/consumer/icons/cloud.svg'); }
.activity-outlook-widget__variable:has(> :is(.lucide-cloud-rain-wind,.lucide-thermometer,.lucide-wind,.lucide-cloud))::before { content:'';display:inline-block;width:16px;height:16px;flex-shrink:0;background:var(--weather-metric-icon) center / contain no-repeat; }
.activity-outlook-widget__variable > :is(.lucide-cloud-rain-wind,.lucide-thermometer,.lucide-wind,.lucide-cloud) { display:none; }

.route-timings-widget .jst__legend .jst__badge:has(> .lucide-cloud-rain-wind) { border:0;border-radius:0;background:url('/media/consumer/icons/rain-no-sun.svg') center / contain no-repeat; }
.route-timings-widget .jst__legend .jst__badge > .lucide-cloud-rain-wind { visibility:hidden; }

/* Animate only the weather artwork, keeping the metric labels steady. */
.activity-outlook-widget__variable::before { transform-origin:center;transition:transform 160ms ease; }
@media (hover:hover) and (pointer:fine) {
  .activity-outlook-widget__variable:hover::before { transform:scale(1.25);animation:wb-weather-icon-wiggle 480ms ease-in-out; }
}
@keyframes wb-weather-icon-wiggle {
  0% { transform:scale(1) rotate(0); }
  25% { transform:scale(1.25) rotate(-12deg); }
  50% { transform:scale(1.25) rotate(10deg); }
  75% { transform:scale(1.25) rotate(-6deg); }
  100% { transform:scale(1.25) rotate(0); }
}
@media (prefers-reduced-motion:reduce) {
  .activity-outlook-widget__variable::before { transition:none; }
  .activity-outlook-widget__variable:hover::before { animation:none; }
}

/* Put the resting caption alongside the values instead of reserving a row. */
.daily-weather-summary-widget__temp-rest { grid-template-columns:minmax(0,1fr);min-block-size:0;align-content:start; }
.daily-weather-summary-widget__temp-caption,.daily-weather-summary-widget__temp-ends { grid-area:1 / 1; }
.daily-weather-summary-widget__temp-caption { align-self:start;padding-top:2px; }
.daily-weather-summary-widget__temp-rest > .vrg { grid-row:2; }

/* Try slimmer conditions bands with more room for each row's label. */
.weather-windows-grid-widget .tsg__cell { min-height:calc(var(--tsg-cell-h) / 2); }
.weather-windows-grid-widget .tsg.tsg--labels-above .tsg__axis { margin-bottom:6px; }
.weather-windows-grid-widget .tsg.tsg--labels-above .tsg__row:first-child > .tsg__rowlabel { padding-top:21px; }
.weather-windows-grid-widget .tsg.tsg--labels-above .tsg__row ~ .tsg__row > .tsg__rowlabel { padding-top:calc(18.9px + .35 * (1.2 * var(--text-value) + 2px)); }
@media(max-width:480px) {
  .weather-windows-grid-widget .tsg.tsg--labels-above .tsg__row ~ .tsg__row > .tsg__rowlabel { padding-top:calc(13.5px + .35 * (1.2 * var(--text-value) + 2px)); }
}

/* Reserve the same compact readout band in resting and inspected states. */
.daily-weather-summary-widget { --summary-temp-band:44px; }
.daily-weather-summary-widget__temp-rest:not(.daily-weather-summary-widget__temp-rest--yielded) { min-block-size:var(--summary-temp-band); }

/* The original full-height summary backdrop protrudes below the slimmer cells. */
.weather-windows-grid-widget .tsg__matrix::before { display:none; }

/* A little breathing room around the daily summary and route legend. */
.daily-weather-summary-widget__temp-rest { margin-top:8px; }
.route-timings-widget .jst__legend { padding-block:20px; }
.route-timings-widget .jst__band:has(+ .jst__axis) .jst__band-body { padding-bottom:6px; }
.route-timings-widget .jst__stack > .jst__axis { margin-top:0; }

/* Summary uses the same cell-to-cell spacing as the other conditions rows. */
.weather-windows-grid-widget .tsg__cell.has-divider { margin-bottom:0; }