/* Alerts screen — September 2026 production reference treatment.
   Scoped to the preview Alerts shell so the shared behaviours remain intact. */

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-screen {
  background: #070806 !important;
  background-image:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.018), transparent 34%),
    linear-gradient(180deg, #090a08 0%, #070806 100%) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header {
  min-height: calc(74px + env(safe-area-inset-top, 0px)) !important;
  flex-basis: calc(74px + env(safe-area-inset-top, 0px)) !important;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 13px 4px !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  background: #080907 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header h1 {
  color: #f5f5f3 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header .app-screen-header-side,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header .app-screen-header-action,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header .app-screen-header-spacer {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header .app-screen-header-action {
  padding: 8px !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(27,28,25,.96), rgba(15,16,14,.98)) !important;
  color: #a8aaa7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 18px rgba(0,0,0,.20) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header .app-screen-header-action:active {
  background: #232421 !important;
  color: #f4f5f2 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header .app-screen-header-action svg,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header .app-screen-header-action.action-calendar svg,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header .app-screen-header-action.action-filter svg {
  width: 25px !important;
  height: 25px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-screen {
  min-height: 100% !important;
  padding: 10px 13px 28px !important;
  color: #f4f4f2 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-filter-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 0 0 26px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-filter-row button {
  position: relative !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255,255,255,.115) !important;
  border-radius: 14px !important;
  background: rgba(8,9,7,.70) !important;
  color: #e4e4e1 !important;
  font: inherit !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 430 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-filter-row button.active {
  border-color: rgba(255,255,255,.12) !important;
  background: linear-gradient(145deg, #2b2c29 0%, #20211f 100%) !important;
  color: #f7f7f4 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 9px 20px rgba(0,0,0,.19) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-filter-row button.active::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 9px 1px 0 !important;
  border-radius: 50% !important;
  background: #b9f33d !important;
  box-shadow: 0 0 7px rgba(185,243,61,.18) !important;
  vertical-align: middle !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-groups {
  display: grid !important;
  gap: 24px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-group h2 {
  margin: 0 0 10px 4px !important;
  color: #f0f0ed !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 510 !important;
  letter-spacing: -.015em !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-list {
  display: grid !important;
  gap: 13px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card {
  position: relative !important;
  width: 100% !important;
  min-height: 137px !important;
  padding: 13px 9px 13px 14px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 119px !important;
  align-items: center !important;
  gap: 11px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(128deg, rgba(255,255,255,.018), transparent 48%),
    linear-gradient(145deg, #1b1c19 0%, #151614 100%) !important;
  color: #f5f5f2 !important;
  text-align: left !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 12px 28px rgba(0,0,0,.16) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card:active {
  border-color: rgba(185,243,61,.23) !important;
  background: linear-gradient(145deg, #242521, #191a17) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-status-icon {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  color: #a8aaa7 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-status-icon svg {
  width: 30px !important;
  height: 30px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card.tone-critical .reference-alert-status-icon {
  color: #ff4747 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card.tone-warning .reference-alert-status-icon,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card.tone-clear .reference-alert-status-icon {
  color: #a8aaa7 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-copy strong {
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f5f5f2 !important;
  font-size: 15.5px !important;
  line-height: 1.1 !important;
  font-weight: 610 !important;
  letter-spacing: -.015em !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-copy > span,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-copy time {
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #999b98 !important;
  font-size: 13.5px !important;
  line-height: 1.05 !important;
  font-weight: 420 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-copy time {
  color: #a8aaa7 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-thumb {
  align-self: center !important;
  width: 119px !important;
  height: 101px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #11120f !important;
  box-shadow: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card.tone-critical .reference-alert-thumb,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card.tone-warning .reference-alert-thumb,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card.tone-clear .reference-alert-thumb {
  border: 0 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-system-thumb {
  color: #b9f33d !important;
  background: radial-gradient(circle, rgba(185,243,61,.09), transparent 64%) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-saved-alerts-entry,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-empty {
  border-color: rgba(255,255,255,.10) !important;
  background: linear-gradient(145deg, #1b1c19, #141513) !important;
  color: #f4f4f1 !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-saved-alerts-entry {
  margin: 0 0 22px !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-saved-alerts-entry > svg,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-saved-alerts-entry.active > svg,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-saved-alerts-entry b {
  color: #b9f33d !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-saved-alerts-entry.active {
  border-color: rgba(185,243,61,.28) !important;
  background: linear-gradient(145deg, #24261f, #181a15) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-date-menu,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-filter-panel {
  border-color: rgba(255,255,255,.11) !important;
  background: rgba(24,25,22,.985) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.48) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-date-menu button.active,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-filter-options button.active {
  border-color: rgba(185,243,61,.35) !important;
  background: rgba(185,243,61,.10) !important;
  color: #c8f66c !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-filter-panel-head button,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-clear-filters {
  color: #b9f33d !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-filter-options button {
  border-color: rgba(255,255,255,.10) !important;
  background: #20211e !important;
  color: #dededb !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-selection-toolbar {
  margin: 0 0 16px !important;
  border-color: rgba(255,255,255,.11) !important;
  background: rgba(25,26,23,.985) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-selection-toolbar .select-all,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-selection-indicator.selected {
  border-color: #b9f33d !important;
  background: #b9f33d !important;
  color: #10110e !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card.selected-alert {
  background: rgba(185,243,61,.055) !important;
  box-shadow: inset 0 0 0 1px rgba(185,243,61,.24) !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-scroll-region > .app-nav-spacer {
  min-height: 96px !important;
  background: #070806 !important;
}

@media (max-width: 370px) {
  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-screen {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-filter-row {
    gap: 7px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-filter-row button {
    font-size: 12px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-filter-row button.active::before {
    margin-right: 6px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card {
    min-height: 132px !important;
    grid-template-columns: 36px minmax(0, 1fr) 108px !important;
    gap: 8px !important;
    padding-left: 12px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-thumb {
    width: 108px !important;
    height: 96px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-copy strong {
    font-size: 14.5px !important;
  }

  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-copy > span,
  body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-copy time {
    font-size: 12.5px !important;
  }
}