/* =========================================================
   Home page stylesheet
   Selected location, outage progress, schedule and details
   ========================================================= */

.location-switcher {
  width: 100%;
  min-height: 4.15rem;
  padding: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(1rem);
  cursor: pointer;
  text-align: right;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.location-switcher:hover {
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

.location-switcher:active {
  transform: scale(0.985);
}

.location-switcher__icon {
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  background: var(--color-primary-soft);
  font-size: var(--fs-xl);
}

.location-switcher__content {
  display: flex;
  flex-direction: column;
  line-height: 1.45;
}

.location-switcher__label {
  color: var(--color-text-faint);
  font-size: var(--fs-xs);
}

.location-switcher__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.location-switcher__action {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.location-switcher__action i {
  font-size: var(--fs-lg);
}

/* =========================================================
   6) Power status card
   ========================================================= */
.power-card {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-5);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, var(--color-primary-faint), transparent 44%),
    var(--color-surface);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(1rem);
}

.power-card::before {
  content: "";
  width: 14rem;
  height: 14rem;
  position: absolute;
  z-index: -1;
  top: -8rem;
  left: -6rem;
  border-radius: 50%;
  background: var(--status-soft);
  filter: blur(0.4rem);
}

.power-card.is-upcoming {
  --status-color: var(--color-warning);
  --status-soft: var(--color-warning-soft);
  --status-shadow: rgba(245, 158, 11, 0.22);
}

.power-card.is-outage {
  --status-color: var(--color-danger);
  --status-soft: var(--color-danger-soft);
  --status-shadow: rgba(239, 71, 111, 0.23);
}

.power-card.is-restored {
  --status-color: var(--color-success);
  --status-soft: var(--color-success-soft);
  --status-shadow: rgba(20, 166, 115, 0.22);
}

.power-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.status-badge,
.update-time,
.source-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.status-badge {
  gap: var(--space-2);
  padding: 0.35rem 0.68rem;
  border-radius: var(--radius-pill);
  color: var(--status-color);
  background: var(--status-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.status-badge__dot {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0.28rem var(--status-soft);
  animation: status-pulse 1.8s ease-in-out infinite;
}

.update-time {
  gap: 0.3rem;
  color: var(--color-text-faint);
  font-size: var(--fs-2xs);
}

.update-time i {
  font-size: var(--fs-sm);
}

.progress-wrap {
  min-height: calc(var(--progress-size) + var(--space-5));
  display: grid;
  place-items: center;
  padding-top: var(--space-4);
}

@property --ring-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.progress-ring {
  --ring-progress: var(--progress);

  width: var(--progress-size);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      transparent calc(68% - var(--progress-thickness)),
      var(--color-surface-solid) calc(68% - var(--progress-thickness) + 0.08rem),
      var(--color-surface-solid) 68%,
      transparent calc(68% + 0.08rem)
    ),
    conic-gradient(
      from -90deg,
      var(--status-color) 0 var(--ring-progress),
      color-mix(in srgb, var(--color-text-faint) 15%, transparent) var(--ring-progress) 100%
    );
  box-shadow:
    0 1.35rem 3.5rem var(--status-shadow),
    inset 0 0 0 0.08rem color-mix(in srgb, var(--status-color) 12%, transparent);
  animation: progress-fill 1.25s var(--ease-standard) both;
}

.progress-ring::before {
  content: "";
  position: absolute;
  inset: calc(var(--progress-thickness) + 0.12rem);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 20%, var(--status-soft), transparent 43%),
    var(--color-surface-solid);
  box-shadow: inset 0 0.8rem 2.2rem rgba(20, 32, 61, 0.03);
}

.progress-ring__glow {
  width: 1.1rem;
  aspect-ratio: 1;
  position: absolute;
  top: calc(50% - 0.55rem);
  left: calc(50% - 0.55rem);
  z-index: 2;
  border: 0.2rem solid var(--color-surface-solid);
  border-radius: 50%;
  background: var(--status-color);
  box-shadow: 0 0 1.05rem var(--status-color);
  transform:
    rotate(var(--progress-angle, -90deg))
    translateX(calc(var(--progress-size) / 2 - var(--progress-thickness) / 2));
  animation: marker-appear 1.25s var(--ease-standard) both;
}

.progress-ring__content {
  position: relative;
  z-index: 3;
  width: 68%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.progress-ring__icon {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-pill);
  color: var(--status-color);
  background: var(--status-soft);
  font-size: var(--fs-xl);
}

.progress-ring__place {
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.progress-ring__time {
  margin-top: var(--space-1);
  font-size: clamp(var(--fs-xl), 4.8vw, var(--fs-2xl));
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
}

.progress-ring__caption {
  margin-top: 0.1rem;
  color: var(--color-text-faint);
  font-size: var(--fs-2xs);
}

.countdown {
  margin-top: var(--space-2);
  text-align: center;
}

.countdown__label,
.countdown__hint {
  margin: 0;
}

.countdown__label {
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.countdown__value {
  min-height: 3.4rem;
  margin-top: var(--space-1);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.38rem;
}

.countdown__value strong {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.055em;
}

.countdown__value span {
  color: var(--color-text-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.countdown__value .countdown__separator {
  margin-inline: 0.08rem;
  color: var(--status-color);
  font-size: var(--fs-xl);
}

.countdown__hint {
  max-width: 25rem;
  margin: var(--space-2) auto 0;
  color: var(--color-text-faint);
  font-size: var(--fs-xs);
}

/* Timeline */
.time-steps {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-3);
  display: grid;
  grid-template-columns: auto minmax(1.7rem, 1fr) auto minmax(1.7rem, 1fr) auto;
  align-items: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.time-step {
  min-width: 3.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.time-step__point {
  width: 0.68rem;
  height: 0.68rem;
  margin-bottom: var(--space-2);
  border: 0.14rem solid var(--color-surface-soft);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text-faint) 28%, transparent);
  box-shadow: 0 0 0 0.12rem var(--color-border);
}

.time-step.is-done .time-step__point,
.time-step.is-current .time-step__point {
  background: var(--status-color);
  box-shadow: 0 0 0 0.18rem var(--status-soft);
}

.time-step__label {
  color: var(--color-text-faint);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

.time-step strong {
  margin-top: 0.08rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.time-step__line {
  height: 0.68rem;
  display: flex;
  align-items: center;
}

.time-step__line span {
  width: 100%;
  height: 0.11rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-text-faint) 18%, transparent);
}

.time-step__line:first-of-type span {
  background: linear-gradient(90deg, var(--status-color), var(--status-soft));
}


.details-card {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(1rem);
}

.details-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}


.section-title {
  margin: 0;
  margin-top: 0.05rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.source-badge {
  gap: 0.25rem;
  padding: 0.3rem 0.58rem;
  border-radius: var(--radius-pill);
  color: var(--color-success);
  background: var(--color-success-soft);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.source-badge i {
  font-size: var(--fs-sm);
}

.address-box {
  margin-top: var(--space-4);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.address-box__icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  background: var(--color-primary-soft);
  font-size: var(--fs-lg);
}

.address-box p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  line-height: 1.9;
}

.schedule-meta {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.schedule-meta__item {
  min-width: 0;
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.schedule-meta__item > i {
  color: var(--color-primary);
  font-size: var(--fs-xl);
}

.schedule-meta__item span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.55;
}

.schedule-meta__item small {
  color: var(--color-text-faint);
  font-size: var(--fs-2xs);
}

.schedule-meta__item strong {
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-row {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1.15fr 1fr auto;
  gap: var(--space-2);
}


.action-button--icon {
  width: 2.85rem;
  padding-inline: 0;
}

/* =========================================================
   Home page animations
   ========================================================= */
@keyframes progress-fill {
  from {
    --ring-progress: 0%;
  }
  to {
    --ring-progress: var(--progress);
  }
}

@keyframes marker-appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.58;
    transform: scale(0.76);
  }
}

/* =========================================================
   Home page responsive behavior
   ========================================================= */
@media (min-width: 48rem) {
  .location-switcher:hover,
  .details-card:hover,
  .power-card:hover {
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 23rem) {
  :root {
    --progress-size: 14.4rem;
  }

  .schedule-meta {
    grid-template-columns: 1fr;
  }

  .action-row {
    grid-template-columns: 1fr auto;
  }

  .action-button:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .time-step__label {
    font-size: 0.56rem;
  }
}