/* Conditions owns its layout here; spacing stays inside the opaque cloud. */
html body.homepage .sky-utilities #sky-conditions {
  --info-inset: 32px;
  --info-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  inset: auto 24px var(--info-bottom) auto;
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - var(--info-bottom) - 20px);
  box-sizing: border-box;
  margin: 0;
  padding: var(--info-inset) 44px;
  transform: none;
  overflow: visible;
  isolation: isolate;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--cloud-ink);
  text-align: left;
  text-shadow: none;
  font: 400 12px/20px 'Meric Inter', sans-serif;
}

html body.homepage #sky-conditions .info-cloud-volume {
  inset: 0;
  width: 100%;
  height: 100%;
}

html body.homepage #sky-conditions .info-cloud-content {
  box-sizing: border-box;
  max-height: calc(100dvh - var(--info-bottom) - 20px - 2 * var(--info-inset));
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* One size throughout; weight and color provide the hierarchy. */
html body.homepage #sky-conditions :is(h2, p, dt, dd, a, button, .sky-status, .sky-status span) {
  font: 400 12px/20px 'Meric Inter', sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: none;
}

html body.homepage #sky-conditions .info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 4px;
}

html body.homepage #sky-conditions .info-header h2 {
  margin: 0;
  font-weight: 550 !important;
  color: var(--cloud-ink);
}

html body.homepage #sky-conditions .info-header button {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
}

html body.homepage #sky-conditions .sky-status {
  position: static;
  display: flex !important;
  align-items: center;
  min-height: 24px;
  gap: 12px;
  margin: 0 0 16px;
  text-align: left;
  color: var(--cloud-muted);
}

html body.homepage #sky-conditions .sky-status > span::before {
  width: 4px;
  height: 4px;
  margin: 0 6px 2px 0;
  background: currentColor;
}

html body.homepage #sky-conditions .sky-status button {
  min-height: 32px;
  padding: 6px 12px !important;
  margin: 0;
}

html body.homepage #sky-conditions .weather-grid {
  margin: 0;
  border-top: 0;
}

html body.homepage #sky-conditions .weather-grid > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 0;
}

html body.homepage #sky-conditions .weather-grid dt { color: var(--cloud-muted); }
html body.homepage #sky-conditions .weather-grid dd {
  margin: 0;
  color: var(--cloud-ink);
  text-align: right;
  white-space: nowrap;
}

html body.homepage #sky-conditions .sunset-phases {
  position: static;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 16px 0;
  padding: 0;
  border: 0;
  transform: none;
  background: none;
}

html body.homepage #sky-conditions .sunset-phases button {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px;
  margin: 0;
  padding: 10px 8px !important;
  white-space: normal;
  text-align: center;
  color: var(--cloud-ink) !important;
}

/* Cloud buttons remain visible at rest, including against the reading cloud. */
html body.homepage #sky-conditions :is(button, a) {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
}

html body.homepage #sky-conditions :is(button, a)::after { display: none !important; }
html body.homepage #sky-conditions button::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 2px;
  z-index: -1;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse 65% 76% at 43% 48%, color-mix(in srgb, var(--cloud-ink) 12%, transparent) 0 30%, transparent 80%),
    radial-gradient(ellipse 52% 65% at 67% 52%, color-mix(in srgb, var(--cloud-ink) 8%, transparent) 0 28%, transparent 80%);
  filter: blur(3px);
  box-shadow: none;
  transform: none;
  opacity: .8;
}

html body.homepage #sky-conditions button:is(:hover, :focus-visible, [aria-pressed=true])::before {
  opacity: 1;
  filter: blur(3px);
  transform: none;
  background: radial-gradient(ellipse 65% 76% at 43% 48%, color-mix(in srgb, var(--cloud-ink) 22%, transparent) 0 30%, transparent 80%),
    radial-gradient(ellipse 52% 65% at 67% 52%, color-mix(in srgb, var(--cloud-ink) 14%, transparent) 0 28%, transparent 80%);
}

html body.homepage #sky-conditions button:is(:focus-visible, [aria-pressed=true]) {
  font-weight: 550 !important;
}

html body.homepage #sky-conditions .info-notes {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 0 0;
  border-top: 0.5px solid var(--cloud-rule);
}

html body.homepage #sky-conditions .info-notes p {
  margin: 0;
  color: var(--cloud-muted);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

html body.homepage #sky-conditions .info-sources { display: grid; row-gap: 8px; margin: 0; }
html body.homepage #sky-conditions .info-sources > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: baseline;
}
html body.homepage #sky-conditions .info-sources dt { color: var(--cloud-muted); }
html body.homepage #sky-conditions .info-sources dd { margin: 0; color: var(--cloud-ink); text-align: right; font-variant-numeric: tabular-nums; }
html body.homepage #sky-conditions .info-notes a {
  display: inline;
  padding: 0;
  margin: 0;
  color: var(--cloud-ink) !important;
  white-space: nowrap;
}
html body.homepage #sky-conditions .info-notes a::before { display: none !important; }
html body.homepage #sky-conditions .info-notes a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--cloud-ink) 12%, transparent) !important;
}

@media (max-width: 700px) {
  html body.homepage .sky-utilities #sky-conditions {
    --info-inset: 28px;
    --info-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-inline: 36px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

}

@media (max-width: 360px) {
  html body.homepage .sky-utilities #sky-conditions { --info-inset: 28px; padding-inline: 36px; }
}

/* Keep provenance available without making it the main reading task. */
html body.homepage #sky-conditions .info-details{margin:0;padding:4px 0 0;border:0;border-top:0.5px solid var(--cloud-rule);background:none}
html body.homepage #sky-conditions .info-details>summary{position:static;display:list-item;list-style:disclosure-closed;width:auto;min-height:0;margin:0;padding:6px 0;font:400 12px/20px 'Meric Inter',sans-serif;color:var(--cloud-muted);cursor:pointer;background:none;transform:none}
html body.homepage #sky-conditions .info-details[open]>summary{list-style:disclosure-open}
html body.homepage #sky-conditions .info-details>summary:is(:hover,:focus-visible){color:var(--cloud-ink);font-weight:550}
html body.homepage #sky-conditions .info-details>summary::before,html body.homepage #sky-conditions .info-details>summary::after{display:none}
html body.homepage #sky-conditions .info-details-content{display:grid;gap:12px;padding-top:8px}

/* One city-linked sky panel, with a comfortably sized close action. */
html body.homepage #sky-conditions .info-header #close-sky-info{flex-basis:44px;width:44px;height:44px;min-height:44px;font:400 24px/1 'Meric Inter',sans-serif!important;color:var(--cloud-ink);margin-right:-12px}
html body.homepage #sky-conditions .info-location{display:grid;gap:4px;padding-bottom:16px;border-bottom:0.5px solid var(--cloud-rule)}
html body.homepage #sky-conditions .info-location #nearby-button{display:block;position:static;width:fit-content;margin:0;padding:4px 0!important;min-height:32px;color:var(--cloud-ink);visibility:visible;opacity:1}
html body.homepage #sky-conditions .info-location #nearby-status{margin:0;max-width:100%}
html body.homepage .sky-utilities .sky-options-list>.sky-info>summary{display:none}
html body.homepage .sky-utilities .sky-options-list::before{display:none}
html body.homepage .sky-utilities>.sky-options>summary{opacity:1}

/* The panel and clock expose the same return-to-live action. */
html body.homepage #sky-conditions #return-live{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 8px!important;font:400 10px/1.4 'Meric Inter',sans-serif!important}
html body.homepage #sky-conditions #return-live[hidden]{display:none}
html body.homepage .time-control #quick-now{gap:4px}
html body.homepage :is(#return-live,#quick-now)>span{font:inherit;line-height:inherit}
html body.homepage #sky-conditions .info-location #nearby-button{display:inline-flex;align-items:center;gap:8px}
html body.homepage #sky-conditions #nearby-button svg{flex:none}
html body.homepage #sky-conditions #location-permission-hint{font-size:10px!important;line-height:1.5!important;color:var(--cloud-muted)}

html body.homepage #sky-conditions .sky-status > span::before{content:none;display:none}

html body.homepage #sky-conditions .sky-status{flex-wrap:wrap}
html body.homepage #sky-conditions #live-status{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
html body.homepage #sky-conditions .info-time-label{margin-right:auto;color:var(--cloud-muted)}
html body.homepage #sky-conditions .info-time-value{font-variant-numeric:tabular-nums;color:var(--cloud-ink)}
html body.homepage #sky-conditions .sky-status .info-time-badge{padding:1px 6px;border-radius:4px;background:color-mix(in srgb,var(--cloud-ink) 8%,transparent);font:500 9px/16px 'Meric Inter',sans-serif!important;color:var(--cloud-muted);white-space:nowrap}

/* Align the glyph with the values column while retaining its 44px hit target. */
html body.homepage #sky-conditions .info-header #close-sky-info{margin-right:0;display:flex;align-items:center;justify-content:flex-end}

/* Status belongs to the label; keep the time on the shared value edge. */
html body.homepage #sky-conditions .info-time-label{order:0;margin-right:0}
html body.homepage #sky-conditions .info-time-badge{order:1}
html body.homepage #sky-conditions .info-time-value{order:2;margin-left:auto;text-align:right}

/* Time uses the same row rhythm as the weather readings. */
html body.homepage #sky-conditions .sky-status{min-height:20px;margin:0;padding:8px 0}

/* Native accordion semantics, with a quiet full-row disclosure affordance. */
html body.homepage #sky-conditions .info-details>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;box-sizing:border-box;padding:8px 0;list-style:none;font-weight:400}
html body.homepage #sky-conditions .info-details>summary::-webkit-details-marker{display:none}
html body.homepage #sky-conditions .info-details>summary:is(:hover,:focus-visible){font-weight:400;color:var(--cloud-ink)}
html body.homepage #sky-conditions .info-details>summary:focus-visible{background:color-mix(in srgb,var(--cloud-ink) 7%,transparent);outline:none}
.info-details-chevron{flex:none;transform:rotate(-90deg);transition:transform 200ms cubic-bezier(.22,1,.36,1)}
.info-details[open] .info-details-chevron{transform:rotate(0deg)}
html body.homepage #sky-conditions .info-details-content{padding:4px 0 8px}
@supports(interpolate-size:allow-keywords){
 .info-details{interpolate-size:allow-keywords}
 .info-details::details-content{height:0;overflow:clip;opacity:0;transition:height 220ms cubic-bezier(.22,1,.36,1),opacity 160ms ease,content-visibility 220ms;transition-behavior:allow-discrete}
 .info-details[open]::details-content{height:auto;opacity:1}
}
@media(prefers-reduced-motion:reduce){.info-details-chevron,.info-details::details-content{transition:none}}

html body.homepage #sky-conditions #nearby-button span{order:1}
html body.homepage #sky-conditions #nearby-button svg{order:0}
html body.homepage #sky-conditions .info-location #nearby-button{justify-content:flex-start;text-align:left}

/* Match the contact clouds inside About, without changing the text alignment. */
html body.homepage #sky-conditions .info-location #nearby-button{min-height:44px;isolation:isolate;position:relative;overflow:visible}
html body.homepage #sky-conditions .info-location #nearby-button::before{content:''!important;display:block!important;position:absolute;inset:0 -10px;z-index:-1;pointer-events:none;border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse at 32% 48%,var(--cloud-light) 0 36%,transparent 73%),radial-gradient(ellipse at 69% 55%,var(--cloud-light) 0 34%,transparent 72%),radial-gradient(ellipse at 51% 70%,var(--cloud-shade) 0 30%,transparent 72%);opacity:.76;filter:blur(3.5px);transform:none}
html[data-cloud-tone="dark"] body.homepage #sky-conditions .info-location #nearby-button::before{background:radial-gradient(ellipse 62% 68% at 42% 48%,color-mix(in srgb,var(--cloud-ink) 12%,transparent),transparent 78%),radial-gradient(ellipse 50% 62% at 65% 53%,color-mix(in srgb,var(--cloud-ink) 7%,transparent),transparent 80%);filter:blur(6px);opacity:.65}
html body.homepage #sky-conditions .info-location #nearby-button:is(:hover,:focus-visible)::before{opacity:1}

/* Keep the hit area still while the cloud responds like the About links. */
html body.homepage #sky-conditions .info-location #nearby-button{opacity:1}
html body.homepage #sky-conditions .info-location #nearby-button::before{transition:opacity 220ms ease,filter 280ms ease,transform 350ms ease}
html body.homepage #sky-conditions .info-location #nearby-button:is(:hover,:focus-visible)::before{opacity:1;filter:blur(2px);transform:translateY(-2px) scale(1.09,1.13)}
html[data-cloud-tone="dark"] body.homepage #sky-conditions .info-location #nearby-button:is(:hover,:focus-visible)::before{filter:blur(6px);transform:none}
@media(prefers-reduced-motion:reduce){html body.homepage #sky-conditions .info-location #nearby-button::before{transition:none}html body.homepage #sky-conditions .info-location #nearby-button:is(:hover,:focus-visible)::before{transform:none}}

/* Give the nested cloud enough tonal separation from its reading surface. */
html body.homepage #sky-conditions .info-location #nearby-button:is(:hover,:focus-visible)::before{background:radial-gradient(ellipse 62% 72% at 33% 48%,color-mix(in srgb,var(--cloud-light) 86%,var(--cloud-ink)) 0 38%,transparent 76%),radial-gradient(ellipse 58% 70% at 72% 52%,color-mix(in srgb,var(--cloud-light) 89%,var(--cloud-ink)) 0 36%,transparent 76%);opacity:1;filter:blur(3px);transform:scale(1.06,1.12)}
@media(prefers-reduced-motion:reduce){html body.homepage #sky-conditions .info-location #nearby-button:is(:hover,:focus-visible)::before{transform:none}}

html body.homepage #sky-conditions .info-location #nearby-button{background:none!important;box-shadow:none!important;filter:none!important;color:var(--cloud-muted)}
html body.homepage #sky-conditions .info-location #nearby-button::before,html body.homepage #sky-conditions .info-location #nearby-button::after{content:none!important;display:none!important}
html body.homepage #sky-conditions .info-location #nearby-button:is(:hover,:focus-visible){color:var(--cloud-ink)}
html body.homepage #sky-conditions .info-location #nearby-button:focus-visible{background:color-mix(in srgb,var(--cloud-ink) 9%,transparent)!important;outline:none}

/* A generous reset target must not change the data row's height. */
html body.homepage #sky-conditions .sky-status{height:36px;min-height:36px;box-sizing:border-box;flex-wrap:nowrap;align-items:center;overflow:visible}
html body.homepage #sky-conditions .sky-status #return-live{flex-shrink:0;height:44px;margin-block:-12px}

/* Equal space around the location action between its two dividers. */
html body.homepage #sky-conditions .info-notes{padding-top:0}
html body.homepage #sky-conditions .info-location{padding-block:0;gap:0}
html body.homepage #sky-conditions .info-location #nearby-status:not([hidden]){margin-top:8px}

/* The location section already supplies the divider above Weather Details. */
html body.homepage #sky-conditions .info-notes{gap:0}
html body.homepage #sky-conditions .info-details{border-top:0;padding-top:0}


/* Compact data rows share a 28px rhythm at 12px text. */
html body.homepage #sky-conditions .weather-grid>div{padding-block:4px}
html body.homepage #sky-conditions .sky-status{height:28px;min-height:28px;padding-block:4px}

/* Keep the heading close to its data without shrinking the close target. */
html body.homepage #sky-conditions .info-header{height:32px;margin-bottom:0}
html body.homepage #sky-conditions .info-header #close-sky-info{margin-block:-6px}

/* Location feedback replaces the action label, never adds a mobile error row. */
html body.homepage #sky-conditions .info-location #nearby-button{max-width:100%;min-width:0}
html body.homepage #sky-conditions .info-location #nearby-button svg{flex-shrink:0}
html body.homepage #sky-conditions .info-location #nearby-button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html body.homepage #sky-conditions .info-location #nearby-status:not([hidden]){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* The help trigger and outside dismissal already close this panel. */
html body.homepage #sky-conditions .info-header #close-sky-info{display:none}

/* A compact help cloud anchored to its trigger, including on phones. */
html body.homepage .sky-utilities #sky-conditions{left:auto;right:var(--help-right,24px);width:256px;max-width:calc(100vw - 32px);padding-inline:28px}
/* Compact insets for the solid surface rather than a diffuse cloud edge. */
html body.homepage .sky-utilities #sky-conditions{--info-inset:var(--dialog-inset);padding:var(--dialog-inset)}
html body.homepage #sky-conditions .info-header{height:24px}

html body.homepage #sky-conditions .info-details-content{padding-bottom:0}

/* A single spacing rhythm; final hit-area slack sits inside the optical inset. */
html body.homepage #sky-conditions .info-header{height:auto;min-height:20px;margin:0 0 8px}
html body.homepage #sky-conditions .sky-status{height:26px;min-height:26px;padding:3px 0;margin:0}
html body.homepage #sky-conditions .weather-grid>div{padding:3px 0;min-height:26px;box-sizing:border-box}
html body.homepage #sky-conditions .info-notes{margin-top:8px;padding:0;gap:0}
html body.homepage #sky-conditions .info-location{margin:0;padding:0}
html body.homepage #sky-conditions .info-location #nearby-button{width:100%;min-height:44px;padding:0!important}
html body.homepage #sky-conditions .info-details{margin-bottom:-8px}
html body.homepage #sky-conditions .info-details>summary{height:44px;padding:0;min-height:44px}
html body.homepage #sky-conditions .info-details[open]{margin-bottom:0}
html body.homepage #sky-conditions .info-details-content{padding:4px 0 0;gap:8px}

/* Match music and About instead of maintaining a separate weather scale. */
html body.homepage #sky-conditions :is(h2,p,dt,dd,a,button,.sky-status,.sky-status span),
html body.homepage #sky-conditions .info-details>summary{font-size:var(--dialog-text)!important;line-height:var(--dialog-leading)!important}
html body.homepage #sky-conditions .info-header h2{font-size:var(--dialog-heading)!important;font-weight:550!important}
html body.homepage #sky-conditions .sky-status .info-time-badge{font-size:var(--dialog-meta)!important;line-height:18px!important}
@media(max-width:700px){html body.homepage .sky-utilities #sky-conditions{left:16px;right:16px;width:auto;max-width:none}}