/* Push notifications: My Notifications (Settings), as HEY's, measured
   2026-10-18. Two 704px sheets; the first has the Inbox switch row with no
   padding below it, the second a pale accent "island" with an info icon. */

.settings-switch-row.notification-switch-row { padding-bottom: 0; }

/* This browser's permission, under the switch when it needs attention */
.notification-status { margin: 14.85px 0 0 74.8px; font-size: 15.4px; line-height: 21.56px; }
.notification-status__warning { margin: 0; font-weight: 600; }
.notification-status__note { margin: 4.4px 0 0; color: var(--color-muted); }
.notification-status__steps { margin: 6.6px 0 0; padding-left: 19.8px; color: var(--color-muted); }
.notification-status__steps li { margin: 0 0 3.3px; }
.notification-status__enable {
  padding: 5.28px 14.08px;
  border: 1px solid var(--color-accent);
  border-radius: 33px;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-size: 17.6px;
  line-height: 24.64px;
  font-weight: 500;
  cursor: pointer;
}
.notification-status__enable:hover { background: rgb(48 114 221 / 0.06); }

/* "Did you know…": the reference's island, 19.8px in, 11px corners */
.notification-tip { display: flex; align-items: flex-start; gap: 19.8px; margin: 12.375px 0 0; padding: 19.8px; border-radius: 11px; background: rgb(48 114 221 / 0.05); }
/* Our info circle is 20 units of 24, so a 35.6px box draws the reference's 29.7px */
.notification-tip__icon { flex: none; width: 35.6px; height: 35.6px; margin: -2.95px; color: var(--color-ink); }
.notification-tip__content { flex: 1; min-width: 0; }
.notification-tip__text { margin: 0; font-size: 19.8px; line-height: 27.72px; }
.notification-tip__link { color: var(--color-accent); }
.notification-tip__how { display: none; margin-top: 9.9px; font-size: 17.6px; line-height: 24.64px; }
.notification-tip__how:target { display: block; }
.notification-tip__how p { margin: 0 0 6.6px; }

/* The bell on a contact or domain page, measured from the reference: its pill
   icon is drawn 15.4px, and its popup opens flush under the pill, aligned to
   its left, with two tiles under a caps title. */
.contact-option__pill-icon.contact-option__pill-icon--bell { left: 10.05px; width: 18.4px; height: 18.4px; }
.contact-option__menu.contact-notify__menu { top: 100%; left: 0; width: 330px; margin-top: 0; padding: 18.25px; translate: none; } /* 18.25 + its 1px border */
.contact-notify__menu .contact-delivery__section { margin: 6.65px 8.85px 0; line-height: 16.17px; }
.contact-notify__menu .popup-menu__tiles { margin: 12.2px 4.4px 5.45px; gap: 8.7px; }
/* The bells drawn 25.6px tall, centred 34.5px down the tile */
.contact-notify__menu .popup-menu__tile-icon { width: 30.6px; height: 30.6px; margin: -2.1px 0 -4.5px; }