:root {
  --text: #f5f8ff;
  --text-muted: rgba(240, 246, 255, 0.82);
  --card-bg: rgba(255, 255, 255, 0.16);
  --card-border: rgba(255, 255, 255, 0.28);
  --button-bg: rgba(255, 255, 255, 0.12);
  --accent: #dfe8ff;
  --shadow: rgba(6, 16, 38, 0.28);
  --sky-top: #5f7aca;
  --sky-mid: #7698de;
  --sky-bottom: #f0b278;
}

html[data-time-segment="dawn"] {
  --sky-top: #344f91;
  --sky-mid: #6f8ecf;
  --sky-bottom: #f2b17f;
}

html[data-time-segment="day"] {
  --sky-top: #4f83dd;
  --sky-mid: #80b3f4;
  --sky-bottom: #f7d69b;
}

html[data-time-segment="sunset"] {
  --sky-top: #313f75;
  --sky-mid: #db7a6d;
  --sky-bottom: #f5b782;
}

html[data-time-segment="night"] {
  --sky-top: #111f46;
  --sky-mid: #284171;
  --sky-bottom: #334d7b;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100svh;
  padding: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: stretch;
  color: var(--text);
  font-family: "Avenir Next", "Trebuchet MS", "Gill Sans", sans-serif;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.2), transparent 34%),
    radial-gradient(circle at 87% 82%, rgba(255, 255, 255, 0.17), transparent 38%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 54%, var(--sky-bottom) 100%);
  transition: background 780ms ease;
}

.app {
  width: min(100%, 26rem);
  min-height: calc(100svh - 1.8rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.9rem;
}

.app-header {
  padding: 0.55rem 0.1rem 0;
}

.location {
  margin: 0;
  font-size: 0.98rem;
  color: var(--accent);
}

.meta {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.meta-separator {
  opacity: 0.6;
}

#status-text[data-tone="ok"] {
  color: #e8fff5;
}

#status-text[data-tone="warning"] {
  color: #fff2cc;
}

#status-text[data-tone="error"] {
  color: #ffd9da;
}

.weather-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.72rem;
  align-content: center;
  justify-items: center;
}

.weather-card {
  width: min(100%, 21.5rem);
  border-radius: 1rem;
  padding: 0.56rem 0.84rem;
  background: transparent;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
  text-align: left;
}

.card-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.summary-text {
  display: grid;
  justify-items: start;
  gap: 0.12rem;
}

.icon-button {
  width: 4rem;
  min-width: 44px;
  min-height: 44px;
  height: 4rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: var(--button-bg);
  padding: 0;
  display: grid;
  place-items: center;
  color: inherit;
  cursor: pointer;
}

.icon-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.condition-icon {
  width: 3.15rem;
  height: 3.15rem;
}

.icon-snowy,
.icon-rainy,
.icon-cloudy {
  color: #e8f3ff;
}

.icon-sunny {
  color: #ffe37f;
}

.snow-cloud,
.rain-cloud,
.cloud {
  fill: currentColor;
}

.sun-core {
  fill: currentColor;
}

.sun-rays,
.raindrop,
.snowflake {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
}

.icon-rainy .raindrop {
  stroke: #56a7ff;
}

.icon-cloudy .cloud-b {
  fill: #cfd8e6;
}

.snowflake {
  fill: currentColor;
  stroke: none;
}

h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 610;
}

.condition-age {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 630;
  line-height: 1.24;
}

.card-details {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-5px);
  transition:
    max-height 260ms ease,
    opacity 240ms ease,
    transform 260ms ease,
    margin-top 260ms ease;
}

.weather-card[data-expanded="true"] .card-details {
  margin-top: 0.38rem;
  max-height: 4rem;
  opacity: 1;
  transform: translateY(0);
}

.condition-date {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  min-height: 1.05em;
}

.retry-button {
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 0.85rem;
  min-height: 46px;
  padding: 0.75rem 0.95rem;
  font-weight: 620;
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}

.retry-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}

/* Weather-specific icon micro animations triggered on tap/click. */
.sun-core,
.sun-rays,
.cloud-a,
.cloud-b,
.raindrop,
.snowflake {
  transform-box: fill-box;
}

.cloud-a {
  transform: translateX(-1px);
}

.cloud-b {
  transform: translateX(1px);
}

.sun-core,
.sun-rays {
  transform-origin: center;
}

.icon-button.is-animating .sun-core {
  animation: sun-pulse 620ms ease;
}

.icon-button.is-animating .sun-rays {
  animation: sun-spin 620ms cubic-bezier(0.25, 0.72, 0.32, 1);
}

@keyframes sun-spin {
  0% { transform: rotate(0deg); }
  72% { transform: rotate(134deg); }
  100% { transform: rotate(90deg); }
}

@keyframes sun-pulse {
  0% { transform: scale(1); }
  42% { transform: scale(1.13); }
  100% { transform: scale(1); }
}

.raindrop {
  opacity: 0.82;
}

.icon-button.is-animating .raindrop {
  animation: rain-fall 520ms ease-in forwards;
}

.icon-button.is-animating .drop-2 {
  animation-delay: 72ms;
}

.icon-button.is-animating .drop-3 {
  animation-delay: 138ms;
}

@keyframes rain-fall {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(9px);
  }
}

.icon-button.is-animating .cloud-a {
  animation: cloud-a-shift 660ms ease;
}

.icon-button.is-animating .cloud-b {
  animation: cloud-b-shift 660ms ease;
}

@keyframes cloud-a-shift {
  0% { transform: translateX(-1px); }
  45% { transform: translateX(-5px); }
  72% { transform: translateX(1px); }
  100% { transform: translateX(-1px); }
}

@keyframes cloud-b-shift {
  0% { transform: translateX(1px); }
  45% { transform: translateX(6px); }
  72% { transform: translateX(-1px); }
  100% { transform: translateX(1px); }
}

.icon-button.is-animating .snowflake {
  animation: snow-drift 690ms ease-in forwards;
}

.icon-button.is-animating .flake-2 {
  animation-delay: 70ms;
}

.icon-button.is-animating .flake-3 {
  animation-delay: 130ms;
}

@keyframes snow-drift {
  0% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-2px, 9px) scale(0.72);
  }
}

@media (max-width: 340px) {
  .weather-card {
    width: 100%;
    padding: 0.64rem 1rem;
  }

  h2 {
    font-size: 0.93rem;
  }

  .condition-age {
    font-size: 0.94rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }

  .card-details {
    transition: none;
  }

  .icon-button.is-animating .sun-core,
  .icon-button.is-animating .sun-rays,
  .icon-button.is-animating .raindrop,
  .icon-button.is-animating .cloud-a,
  .icon-button.is-animating .cloud-b,
  .icon-button.is-animating .snowflake {
    animation: none !important;
  }

  .icon-button.is-animating {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.42) inset;
  }
}