/* Settings > Email Notifications: collapsible group headers */
.notification-group > summary {
  list-style: none;
  cursor: pointer;
}
.notification-group > summary::-webkit-details-marker {
  display: none;
}
.notification-group > summary .group-chevron {
  transition: transform 0.15s ease;
}
.notification-group[open] > summary .group-chevron {
  transform: rotate(90deg);
}

/* Refined toggle: slim track, inset knob, crisp shadow (the stock switch's
   shadow-lg bleeds past the track and looks misaligned at row size). */
button.notification-toggle {
  height: 22px;
  width: 40px;
  border: none;
  padding: 0;
}
button.notification-toggle > span {
  height: 18px;
  width: 18px;
  box-shadow: 0 1px 3px rgba(1, 40, 80, 0.35);
}
button.notification-toggle[data-state="checked"] > span {
  transform: translateX(20px);
}
button.notification-toggle[data-state="unchecked"] > span {
  transform: translateX(2px);
}

/* Emergency floor only: the name may truncate but never collapse to nothing */
span.notification-name {
  min-width: 3rem;
}

/* Secondary chrome steps aside on phones: names and toggles come first.
   Locked rows keep their trailing lock icon, so the Required pill is redundant there. */
@media (max-width: 639px) {
  div.notification-recipient-badge,
  div.notification-required-badge {
    display: none;
  }
}

/* Lock placeholder occupies exactly the toggle's footprint so the eye icons align */
.notification-lock {
  width: 40px;
  flex-shrink: 0;
}

/* Phones: layout.css forces min 44x44 tap targets on all buttons, which turns
   the switch into a square. Give it a proper mobile switch size instead
   (iOS/Material run ~50x30) — still a comfortable tap target. */
@media (max-width: 639px) {
  button.notification-toggle {
    height: 28px;
    width: 48px;
    min-width: 48px;
    min-height: 28px;
  }
  button.notification-toggle > span {
    height: 24px;
    width: 24px;
  }
  button.notification-toggle[data-state="checked"] > span {
    transform: translateX(22px);
  }
  .notification-lock {
    width: 48px;
  }
}

/* Preview iframe: desktop-width by default, phone-width (375px, the email's real
   mobile render) on small screens, panning inside the muted box when the dialog
   is narrower. Centered via margin (not justify-center, which makes the left
   edge unreachable once the box scrolls). Desktop / Mobile buttons override
   the width inline. */
#notification_preview_frame {
  display: block;
  width: 640px;
  max-width: none;
  margin-inline: auto;
}
@media (max-width: 640px) {
  #notification_preview_frame {
    width: 375px;
  }
}

/* Reminder cadence children sit indented under the Due Date Reminders parent */
div.notification-child-row {
  padding-left: 2.75rem;
  background: hsl(210 20% 98%);
}