/* SevSvet responsive design system — loaded last on purpose. */
:root {
  color-scheme: light;
  --sv-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  --sv-bg: #f3f7f6;
  --sv-surface: rgba(255, 255, 255, .94);
  --sv-surface-solid: #fff;
  --sv-text: #102522;
  --sv-muted: #697976;
  --sv-faint: #eef3f2;
  --sv-line: rgba(17, 54, 49, .09);
  --sv-accent: #087d77;
  --sv-accent-soft: #e7f4f2;
  --sv-online: #45b879;
  --sv-offline: #eb5a68;
  --sv-planned: #e9ad37;
  --sv-danger: #d94757;
  --sv-radius-sm: 12px;
  --sv-radius-md: 17px;
  --sv-radius-lg: 22px;
  --sv-shadow-card: 0 1px 2px rgba(12, 35, 32, .04), 0 12px 34px rgba(12, 35, 32, .07);
  --sv-page-x: clamp(14px, 4vw, 24px);
  --sv-content-max: 720px;
  --sv-tap: 44px;
}

html, body, button, input { font-family: var(--sv-font); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { color: var(--sv-text); background: var(--sv-bg); }
button, input { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

.app-icon-button,
.favorites-close,
.house-popup-close {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: var(--sv-tap) !important;
  min-width: var(--sv-tap) !important;
  height: var(--sv-tap) !important;
  min-height: var(--sv-tap) !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--sv-text) !important;
  background: var(--sv-faint) !important;
  box-shadow: none !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  transition: transform .18s ease, background-color .18s ease, opacity .18s ease !important;
}

.app-icon-button > *,
.favorites-close > *,
.house-popup-close > *,
#refreshButton > * {
  display: block !important;
  margin: 0 !important;
}

#refreshButton {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.app-icon-button:active,
.favorites-close:active,
.house-popup-close:active { transform: scale(.94); background: #e5ecea !important; }

.brand-mark.brand-mark-sevsvet {
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #061b38 !important;
  box-shadow: 0 5px 16px rgba(4, 27, 57, .18) !important;
}

.brand-mark.brand-mark-sevsvet img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* Fullscreen page shells */
html.house-sheet-active .house-sheet-root,
html.favorites-page-active .favorites-panel,
html.history-page-active .history-panel:not([hidden]):not([aria-hidden="true"]),
.statistics-screen.is-visible,
.statistics-history-panel.is-visible {
  background: var(--sv-bg) !important;
  overscroll-behavior: none;
}

.statistics-screen.is-visible,
.statistics-history-panel.is-visible {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5200 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The global menu must remain above fullscreen statistics/history pages. */
.app-menu-backdrop.is-visible {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8000 !important;
}

#appMenuPanel.app-menu-panel.is-visible {
  position: fixed !important;
  z-index: 8100 !important;
}

html:has(.statistics-screen.is-visible) .bottom-nav,
html:has(.statistics-history-panel.is-visible) .bottom-nav {
  display: none !important;
}

html.house-sheet-active .house-sheet-panel,
html.favorites-page-active .favorites-panel,
html.history-page-active .history-panel:not([hidden]):not([aria-hidden="true"]),
.statistics-screen.is-visible,
.statistics-history-panel.is-visible {
  animation: sv-page-in .28s cubic-bezier(.22, .82, .3, 1) both;
}

@keyframes sv-page-in {
  from { opacity: .55; transform: translate3d(0, 14px, 0) scale(.995); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Shared headers */
html.favorites-page-active .favorites-panel-header,
html.history-page-active .history-panel .favorites-panel-header,
.statistics-screen-header,
.statistics-history-header {
  width: min(100%, var(--sv-content-max));
  margin-inline: auto !important;
  padding: max(12px, env(safe-area-inset-top)) 0 14px !important;
  background: transparent !important;
  border: 0 !important;
}

html.favorites-page-active .favorites-panel-header h2,
html.history-page-active .history-panel .favorites-panel-header h2,
.statistics-screen-header h2,
.statistics-history-header h2 {
  margin: 0 !important;
  color: var(--sv-text) !important;
  font-size: clamp(23px, 5.8vw, 29px) !important;
  font-weight: 650 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

.favorites-kicker {
  margin-bottom: 5px !important;
  color: var(--sv-muted) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.history-panel-address {
  display: block;
  max-width: min(78vw, 560px);
  margin-top: 5px !important;
  color: var(--sv-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

/* Favorites */
html.favorites-page-active .favorites-panel {
  padding: 0 var(--sv-page-x) max(12px, env(safe-area-inset-bottom)) !important;
}

html.favorites-page-active .favorites-list {
  width: min(100%, var(--sv-content-max));
  margin-inline: auto;
  gap: 12px !important;
  padding: 2px 1px calc(24px + env(safe-area-inset-bottom)) !important;
  scrollbar-width: none;
}

html.favorites-page-active .favorites-list::-webkit-scrollbar,
html.history-page-active .history-content::-webkit-scrollbar,
.statistics-screen-body::-webkit-scrollbar { display: none; }

html.favorites-page-active .favorite-row-wrap {
  border: 1px solid var(--sv-line) !important;
  border-radius: var(--sv-radius-lg) !important;
  background: var(--sv-surface-solid) !important;
  box-shadow: var(--sv-shadow-card) !important;
}

html.favorites-page-active .favorite-row {
  padding: 17px 17px 12px !important;
  background: transparent !important;
}

html.favorites-page-active .favorite-title {
  color: var(--sv-text) !important;
  font-size: 16px !important;
  font-weight: 640 !important;
  letter-spacing: -.012em;
}

html.favorites-page-active .favorite-address-line {
  margin-top: 3px !important;
  color: #314743 !important;
  font-size: 13px !important;
  font-weight: 540 !important;
  line-height: 1.3 !important;
}

html.favorites-page-active .favorite-settlement,
html.favorites-page-active .favorite-row-meta {
  color: var(--sv-muted) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html.favorites-page-active .favorite-row-meta {
  margin-top: 9px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: var(--sv-faint) !important;
}

html.favorites-page-active .favorite-status-badge {
  flex: 0 0 auto;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html.favorites-page-active .favorite-row-actions {
  gap: 6px !important;
  padding: 10px 12px 13px !important;
  border-top: 1px solid var(--sv-line) !important;
  background: transparent !important;
}

html.favorites-page-active .favorite-row-actions > button {
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: none !important;
  border-radius: var(--sv-radius-sm) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  transition: transform .16s ease, background-color .16s ease !important;
}

html.favorites-page-active .favorite-row-actions > button:active { transform: scale(.97); }

/* House screen */
html.house-sheet-active .house-sheet-scroll {
  padding: max(10px, env(safe-area-inset-top)) var(--sv-page-x) max(10px, env(safe-area-inset-bottom)) !important;
  background: var(--sv-bg) !important;
}

html.house-sheet-active .house-sheet-scroll > .house-popup-card {
  width: min(100%, var(--sv-content-max));
  margin-inline: auto;
  color: var(--sv-text) !important;
  background: transparent !important;
}

html.house-sheet-active .house-popup-chrome {
  min-height: 48px !important;
  padding: 0 0 6px !important;
}

html.house-sheet-active .house-popup-card > .house-popup-scroll {
  padding: 0 1px 20px !important;
  scrollbar-width: none;
}

html.house-sheet-active .house-popup-scroll::-webkit-scrollbar { display: none; }

html.house-sheet-active .house-popup-section {
  margin-bottom: 12px !important;
  padding: 17px !important;
  border: 1px solid var(--sv-line) !important;
  border-radius: var(--sv-radius-lg) !important;
  background: var(--sv-surface-solid) !important;
  box-shadow: var(--sv-shadow-card) !important;
}

html.house-sheet-active .house-popup-hero { padding: 14px !important; }
html.house-sheet-active .house-popup-hero-row { gap: 12px !important; }

html.house-sheet-active .house-popup-address strong {
  color: var(--sv-text) !important;
  font-size: clamp(18px, 4.7vw, 22px) !important;
  font-weight: 650 !important;
  line-height: 1.08 !important;
  letter-spacing: -.022em !important;
}

html.house-sheet-active .house-popup-address span,
html.house-sheet-active .house-popup-note { color: var(--sv-muted) !important; }

html.house-sheet-active .house-popup-title {
  color: var(--sv-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

html.house-sheet-active .house-popup-community-signal,
html.house-sheet-active .house-popup-votes > div,
html.house-sheet-active .outage-card {
  border-radius: var(--sv-radius-md) !important;
  border-color: var(--sv-line) !important;
  background: #fbfdfc !important;
}

html.house-sheet-active .house-popup-community-signal strong,
html.house-sheet-active .outage-card strong {
  font-weight: 640 !important;
}

/* Current and upcoming outages must override the generic white card surface. */
html.house-sheet-active .outage-card.is-current {
  border-color: #ef9da6 !important;
  background: #fff0f1 !important;
  box-shadow: inset 3px 0 0 #ef4457, 0 5px 16px rgba(127, 29, 29, .08) !important;
}

html.house-sheet-active .outage-card.is-current strong,
html.house-sheet-active .outage-card.is-current .outage-description {
  color: #8c1f2c !important;
}

html.house-sheet-active .outage-card.is-future {
  border-color: #e8c66c !important;
  background: #fff8df !important;
  box-shadow: inset 3px 0 0 #e7aa1d, 0 5px 16px rgba(154, 98, 0, .07) !important;
}

html.house-sheet-active .outage-card.is-future strong,
html.house-sheet-active .outage-card.is-future .outage-description {
  color: #634300 !important;
}

html.house-sheet-active .house-popup-sticky-actions {
  gap: 7px !important;
  margin-inline: calc(-1 * var(--sv-page-x)) !important;
  padding: 12px var(--sv-page-x) calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--sv-line) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 -12px 32px rgba(12, 35, 32, .07) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

html.house-sheet-active .house-popup-action,
html.house-sheet-active .house-popup-favorite-action,
html.house-sheet-active .house-popup-history-action {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  transition: transform .16s ease, filter .16s ease !important;
}

html.house-sheet-active .house-popup-action:active,
html.house-sheet-active .house-popup-favorite-action:active,
html.house-sheet-active .house-popup-history-action:active { transform: scale(.975); filter: brightness(.97); }

/* History */
html.history-page-active .history-panel:not([hidden]):not([aria-hidden="true"]) {
  padding: 0 var(--sv-page-x) max(12px, env(safe-area-inset-bottom)) !important;
}

html.history-page-active .history-content {
  width: min(100%, var(--sv-content-max));
  margin-inline: auto;
  padding: 2px 1px calc(24px + env(safe-area-inset-bottom)) !important;
  scrollbar-width: none;
}

html.history-page-active .history-event {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

html.history-page-active .history-event-body {
  padding: 14px 15px !important;
  border: 1px solid var(--sv-line) !important;
  border-radius: var(--sv-radius-md) !important;
  background: var(--sv-surface-solid) !important;
  box-shadow: 0 8px 24px rgba(12, 35, 32, .055) !important;
}

html.history-page-active .history-event-meta {
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
}

html.history-page-active .history-event-meta span {
  color: var(--sv-muted) !important;
  font-size: 11px !important;
  font-weight: 540 !important;
}

html.history-page-active .history-event-meta em {
  max-width: 58%;
  padding: 3px 7px !important;
  overflow: hidden;
  border-radius: 999px !important;
  color: var(--sv-muted) !important;
  background: var(--sv-faint) !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.history-page-active .history-event h3 {
  margin: 0 !important;
  color: #38504c !important;
  font-size: clamp(14px, 3.7vw, 16px) !important;
  font-weight: 620 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}

html.history-page-active .history-event.is-online h3 { color: #168d58 !important; }
html.history-page-active .history-event.is-offline h3 { color: #cf4453 !important; }
html.history-page-active .history-event.is-planned h3 { color: #b87810 !important; }

html.history-page-active .history-event p {
  margin: 6px 0 0 !important;
  color: var(--sv-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* The title editor must stay above the fullscreen favorites page. */
#favoriteTitleEditor.favorite-title-editor {
  position: fixed !important;
  right: var(--sv-page-x) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  left: var(--sv-page-x) !important;
  z-index: 7200 !important;
  width: min(calc(100% - (2 * var(--sv-page-x))), 520px) !important;
  margin-inline: auto !important;
  border-radius: var(--sv-radius-lg) !important;
  background: rgba(255, 255, 255, .985) !important;
  box-shadow: 0 24px 70px rgba(12, 35, 32, .26) !important;
}

#favoriteTitleEditor .favorite-title-editor-header h2 {
  font-size: 20px !important;
  font-weight: 650 !important;
  letter-spacing: -.018em !important;
}

#favoriteTitleEditor .favorite-title-editor-form input,
#favoriteTitleEditor .favorite-title-editor-actions .app-button {
  font-weight: 540 !important;
}

/* Statistics */
.statistics-screen.is-visible {
  padding-inline: var(--sv-page-x) !important;
}

.statistics-screen-header { padding-inline: 0 !important; }
.statistics-screen-body {
  width: min(100%, var(--sv-content-max));
  margin-inline: auto;
  padding: 10px 0 calc(26px + env(safe-area-inset-bottom)) !important;
  scrollbar-width: none;
}

.statistics-tabs {
  padding: 3px !important;
  border-radius: 16px !important;
  background: #e7eceb !important;
}

.statistics-tabs button {
  min-height: 38px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 680 !important;
}

.statistics-tabs button.is-active { color: var(--sv-text) !important; background: #fff !important; box-shadow: 0 2px 9px rgba(12, 35, 32, .08) !important; }
.statistics-range-row { gap: 7px !important; padding-block: 2px 10px !important; overflow-x: auto; scrollbar-width: none; }
.statistics-range-row::-webkit-scrollbar { display: none; }
.statistics-range-row button { min-height: 38px !important; padding-inline: 13px !important; border-radius: 999px !important; font-weight: 650 !important; white-space: nowrap; }

.stats-v2-city { gap: 12px !important; }
.stats-v2-section,
.statistics-list-section,
.favorite-stat-row,
.statistics-timeline-shell {
  border: 1px solid var(--sv-line) !important;
  border-radius: var(--sv-radius-lg) !important;
  background: var(--sv-surface-solid) !important;
  box-shadow: var(--sv-shadow-card) !important;
}

/* Readable timeline on 7/30/90 day ranges. */
.statistics-timeline.is-dense {
  gap: 1px !important;
}

.statistics-timeline.is-dense .statistics-timeline-segment {
  min-width: 1px !important;
  border-radius: 3px !important;
}

.statistics-timeline-axis {
  min-height: 20px !important;
  overflow: visible !important;
  margin-inline: 4px !important;
}

.statistics-timeline-axis span {
  max-width: 64px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.statistics-timeline-axis span.is-first {
  transform: translateX(-10%) !important;
}

.statistics-timeline-axis span.is-last {
  transform: translateX(-90%) !important;
}

.stats-v2-section { padding: 16px !important; }
.stats-v2-section-title,
.statistics-list-section h3 { color: var(--sv-text) !important; font-weight: 720 !important; letter-spacing: -.012em; }

/* Unified loading and empty states */
.statistics-loading,
.history-skeleton,
.house-popup-card.is-loading {
  --sv-loader-color: var(--sv-accent);
}

.statistics-loading {
  min-height: min(480px, calc(100dvh - 210px)) !important;
  gap: 8px !important;
}

.statistics-loading-indicator {
  width: 76px !important;
  height: 76px !important;
  color: var(--sv-accent) !important;
  background: var(--sv-accent-soft) !important;
  box-shadow: 0 14px 32px rgba(8, 125, 119, .12) !important;
}

.statistics-loading strong { color: var(--sv-text); font-size: 19px !important; font-weight: 720; letter-spacing: -.018em; }
.statistics-loading > span { color: var(--sv-muted) !important; font-size: 13px !important; font-weight: 550 !important; }
.favorites-empty { border-radius: var(--sv-radius-lg) !important; color: var(--sv-muted) !important; background: var(--sv-surface-solid) !important; }

/* Responsive behavior */
@media (max-width: 359px) {
  :root { --sv-page-x: 10px; }
  html.favorites-page-active .favorite-row-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html.favorites-page-active .favorite-row-actions > button { font-size: 9px !important; padding-inline: 3px !important; }
  html.house-sheet-active .house-popup-section { padding: 14px !important; }
  html.house-sheet-active .house-popup-action,
  html.house-sheet-active .house-popup-favorite-action,
  html.house-sheet-active .house-popup-history-action { font-size: 11px !important; }
}

@media (min-width: 600px) {
  :root { --sv-page-x: 24px; }
  html.favorites-page-active .favorites-list { gap: 14px !important; }
  html.favorites-page-active .favorite-row-wrap { border-radius: 24px !important; }
  html.history-page-active .history-event-body { padding: 17px 18px !important; }
  .stats-v2-section { padding: 18px !important; }
}

@media (orientation: landscape) and (max-height: 560px) {
  :root { --sv-page-x: 14px; }
  html.favorites-page-active .favorites-panel-header,
  html.history-page-active .history-panel .favorites-panel-header,
  .statistics-screen-header { padding-top: max(6px, env(safe-area-inset-top)) !important; padding-bottom: 8px !important; }
  html.favorites-page-active .favorites-panel-header h2,
  html.history-page-active .history-panel .favorites-panel-header h2,
  .statistics-screen-header h2 { font-size: 22px !important; }
  html.house-sheet-active .house-sheet-scroll { padding-top: max(6px, env(safe-area-inset-top)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Final timeline geometry — intentionally last in this file. */
.statistics-timeline.is-dense { gap: 1px !important; }
.statistics-timeline.is-dense .statistics-timeline-segment {
  min-width: 1px !important;
  border-radius: 3px !important;
}
.statistics-timeline-axis {
  min-height: 20px !important;
  overflow: visible !important;
  margin-inline: 4px !important;
}
.statistics-timeline-axis span {
  max-width: 64px !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.statistics-timeline-axis span.is-first { transform: translateX(-10%) !important; }
.statistics-timeline-axis span.is-last { transform: translateX(-90%) !important; }

/* House card header: responsive address with a permanently visible locality. */
html.house-sheet-active .house-popup-header,
html.house-sheet-active .house-popup-header > div:first-child,
html.house-sheet-active .house-popup-address {
  min-width: 0 !important;
}

html.house-sheet-active .house-popup-address strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-size: clamp(16px, 4vw, 19px) !important;
  line-height: 1.12 !important;
  text-wrap: balance !important;
}

html.house-sheet-active .house-popup-address span {
  display: block !important;
  min-height: 1.25em !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  color: var(--sv-muted) !important;
  font-size: clamp(12px, 3.1vw, 14px) !important;
  font-weight: 550 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

/* House card v2: let the full address determine the hero height. */
html.house-sheet-active .house-popup-hero-row {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.15fr) !important;
  grid-template-rows: minmax(48px, auto) !important;
  align-items: center !important;
}

html.house-sheet-active
  .house-popup-hero-row
  > .house-popup-address {
  align-self: center !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  padding: 3px 0 !important;
  overflow: visible !important;
}

html.house-sheet-active
  .house-popup-hero-row
  > .house-popup-address
  > strong {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: clamp(13px, 3.6vw, 16px) !important;
  line-height: 1.08 !important;
  text-wrap: balance !important;
  -webkit-line-clamp: unset !important;
}

html.house-sheet-active
  .house-popup-hero-row
  > .house-popup-address
  > span {
  min-height: 0 !important;
  margin-top: 2px !important;
  overflow: visible !important;
  font-size: clamp(9px, 2.7vw, 12px) !important;
  line-height: 1.15 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

@media (max-width: 390px), (max-height: 760px) {
  html.house-sheet-active .house-popup-hero-row {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(0, 1.15fr) !important;
    grid-template-rows: minmax(45px, auto) !important;
  }

  html.house-sheet-active
    .house-popup-hero-row
    > .house-popup-address {
    height: auto !important;
    min-height: 45px !important;
    max-height: none !important;
  }
}

@media (max-width: 390px) {
  html.house-sheet-active .house-popup-address strong {
    font-size: clamp(15px, 4.4vw, 17px) !important;
  }

  html.house-sheet-active .house-popup-address span {
    font-size: 12px !important;
  }
}