/* One compact surface whose material follows local daylight and conditions. */
@media (min-width:768px) {
  /* Align the clock with the 28px icon inside its 48px button. */
  html.work-grid .hero-clock { bottom:calc(var(--page-edge) + (48px - 28px) / 2); }
}
/* The native button keeps the existing clock's exact type and geometry. */
.hero-clock[data-clock-weather] {
  appearance:none; -webkit-appearance:none; border:0; padding:0; margin:0;
  background:transparent; border-radius:0; font-weight:400;
  cursor:default; transition:opacity .3s ease .14s;
  -webkit-tap-highlight-color:transparent;
}
html.work-grid .hero-clock[data-clock-weather].is-weather-active { opacity:0; transition:opacity .18s ease; }
.hero-clock[data-clock-weather]::after { content:''; position:absolute; inset:-10px -6px; }
@media(max-width:767px) {
  .hero-clock[data-clock-weather] { cursor:pointer; touch-action:manipulation; }
  .hero-clock[data-clock-weather]::after { inset:-8px -14px; }
  .hero-clock[data-clock-weather]:focus-visible { outline:2px solid var(--heading); outline-offset:8px; }
  .clock-weather { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
}
.clock-weather {
  --weather-top:#e1e9ef; --weather-middle:#b3c4d2; --weather-bottom:#91a8ba; --weather-ink:#172c3c;
  --weather-art-size:72px; --weather-art-right:-14px;
  /* Share Home’s cover fade: the reader sits above this surface at z-index 5000. */
  position:fixed; z-index:40; display:flex; align-items:center; justify-content:space-between;
  left:calc(var(--page-frame-edge,var(--page-edge)) + var(--home-logo-tile-inset));
  width:164px; height:var(--home-logo-tile-width); max-width:calc(100vw - 32px); padding:4px 12px 4px 15px;
  box-sizing:border-box; border:0; border-radius:var(--home-control-radius);
  color:var(--weather-ink); isolation:isolate; contain:layout style; overflow:visible;
  font-family:var(--main-font); text-align:left; line-height:1;
  /* Keep filtered SVG motion on the widget's own compositing surface. */
  visibility:hidden; pointer-events:none; transform:translate3d(var(--home-logo-tile-width),0,0) rotate(-90deg); transform-origin:bottom left;
  transition:visibility 0s linear .42s;
}
@media(max-width:767px) {
  .clock-weather {
    /* Stay at the clock's first-screen document position when the page scrolls. */
    position:absolute;
    top:calc(var(--home-control-baseline) - var(--home-logo-tile-width)); bottom:auto;
  }
}
/* Expand only the material across the clock, keeping type and artwork undistorted. */
.clock-weather::before {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(var(--weather-light-direction,270deg),var(--weather-top),var(--weather-middle) 45%,var(--weather-bottom));
  box-shadow:inset -1px 0 1px #ffffff70,inset 1px 0 2px #00000018,0 2px 8px #00000012;
  /* After rotation, this top edge is the visible left edge under the logo. */
  opacity:0; transform:scaleY(.38); transform-origin:center top;
  transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
.clock-weather-temperature,.clock-weather-artwork {
  opacity:0; transform:translateY(4px);
  transition:opacity .18s ease,transform .3s cubic-bezier(.4,0,.2,1);
}
.clock-weather.is-visible::before {
  opacity:1; transform:scaleY(1);
  transition:transform .54s cubic-bezier(.22,.8,.25,1),opacity .32s ease .04s;
}
.clock-weather.is-visible :is(.clock-weather-temperature,.clock-weather-artwork) {
  opacity:1; transform:translateY(0);
  transition:opacity .3s ease .12s,transform .46s cubic-bezier(.22,.8,.25,1) .08s;
}
.clock-weather[data-weather="clear"][data-day="true"] {
  --weather-top:#ff9e32; --weather-middle:#f57f12; --weather-bottom:#e96708; --weather-ink:#261509;
}
.clock-weather:not([data-weather="clear"]) { --weather-art-right:-18px; }
.clock-weather[data-weather="partly"] {
  --weather-top:#cce7f5; --weather-middle:#96bed7; --weather-bottom:#6b95b3; --weather-ink:#142a40;
}
.clock-weather[data-weather="rain"] {
  --weather-top:#bbd7e8; --weather-middle:#94b8d1; --weather-bottom:#7299b7; --weather-ink:#132a3c;
}
.clock-weather[data-weather="snow"] {
  --weather-top:#e7f5ff; --weather-middle:#c5dfef; --weather-bottom:#9fbed2; --weather-ink:#19314a;
}
.clock-weather[data-weather="fog"] {
  --weather-top:#e7e9e7; --weather-middle:#c7cece; --weather-bottom:#a7b5b8; --weather-ink:#263b46;
}
.clock-weather[data-day="false"] {
  --weather-top:#354b75; --weather-middle:#253654; --weather-bottom:#17243b; --weather-ink:#f6f8ff;
}
.clock-weather[data-day="false"]:is([data-weather="cloudy"],[data-weather="fog"]) {
  --weather-top:#4c5e73; --weather-middle:#354358; --weather-bottom:#273344;
}
.clock-weather[data-day="false"]:is([data-weather="rain"],[data-weather="snow"]) {
  --weather-top:#45678a; --weather-middle:#2e4c6b; --weather-bottom:#1e354f;
}
.clock-weather[data-weather="storm"] {
  --weather-top:#42526b; --weather-middle:#2c3b53; --weather-bottom:#1b293f; --weather-ink:#f6f8ff;
}
.clock-weather[hidden] { display:none; }
.clock-weather.is-visible { visibility:visible; pointer-events:auto; transition-delay:0s; }
.clock-weather-temperature { font-size:30px; font-weight:600; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.clock-weather-artwork {
  position:absolute; right:var(--weather-art-right); top:50%;
  margin-top:calc(var(--weather-art-size)/-2);
  width:var(--weather-art-size); height:var(--weather-art-size);
  flex:none; display:flex; align-items:center; justify-content:center; overflow:visible;
}
.clock-weather-artwork .weather-art { width:100%; height:100%; flex:none; overflow:visible; transform:none; }
.clock-weather:not(.is-visible) .weather-art * { animation-play-state:paused !important; }
/* Some mobile browsers update svh in a single step when their toolbar folds.
   Ease only that document anchor; ordinary page scrolling remains native. */
@media(max-width:767px) and (prefers-reduced-motion:no-preference) {
  html.work-grid { --home-control-reposition:top 180ms cubic-bezier(.2,.7,.2,1); }
  html.work-grid .hero-theme-button {
    transition:background .2s,transform .25s,var(--home-control-reposition);
  }
  html.work-grid .hero-clock[data-clock-weather] {
    transition:opacity .3s ease .14s,var(--home-control-reposition);
  }
  html.work-grid .hero-clock[data-clock-weather].is-weather-active {
    transition:opacity .18s ease,var(--home-control-reposition);
  }
  .clock-weather { transition:visibility 0s linear .42s,var(--home-control-reposition); }
  .clock-weather.is-visible { transition-delay:0s; }
}
@media(prefers-reduced-motion:reduce) {
  .clock-weather,.clock-weather::before,.clock-weather :is(.clock-weather-temperature,.clock-weather-artwork),
  html.work-grid .hero-clock[data-clock-weather] { transition:none !important; }
  .weather-art * { animation:none !important; }
}