/* Notifications (pages/notifications.js): the mock's rows in one card, 720 px wide at most, a switch at each end */
.notifications-card { max-width: 720px; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; }
.notifications-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; }
.notifications-row + .notifications-row { border-top: 1px solid var(--line); }
.notifications-row > div { flex: 1; min-width: 0; }
.notifications-row b { font-weight: 700; color: var(--head); }
.notifications-row small { display: block; color: var(--text3); font-size: 13px; }
.notifications-row .notifications-today { color: var(--faint); font-size: 12.5px; }
.notifications-switch { width: 36px; height: 20px; border-radius: 20px; background: var(--line2); position: relative; flex: none; transition: background var(--t-fast); }
.notifications-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate var(--t-fast) var(--ease); }
.notifications-switch[aria-checked="true"] { background: var(--red); }
.notifications-switch[aria-checked="true"]::after { translate: 16px 0; }