/* O-23 Notifications and Telegram: the email card, the Telegram card in its four states, and the language line. */
.bh-notify-card h2, .bh-notify-language h2 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-notify-card { display: grid; gap: var(--space-3); }
.bh-notify-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bh-notify-strong { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-notify-status { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.bh-notify-status > .bh-icon { color: var(--primary); }
.bh-notify-steps { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: decimal; }
/* S31: from 768 px the link's QR code sits beside the steps (O-23-desktop-waiting); QrBlock shows none on phones here. */
.bh-notify-wait { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) var(--space-8); }
.bh-notify-wait > .bh-notify-steps { flex: 1 1 240px; }
.bh-notify-center { justify-self: center; }
.bh-notify-sent { display: flex; align-items: flex-start; gap: var(--space-2); }
.bh-notify-sent > .bh-icon { margin-top: 2px; color: var(--success-ink); }
.bh-notify-unlink { justify-self: start; padding-left: 0; color: var(--danger-ink); }
.bh-notify-unlink:hover { background: transparent; color: var(--danger-hover); text-decoration: underline; }
.bh-notify-confirm { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--page); }
.bh-notify-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.bh-notify-language { display: grid; gap: var(--space-2); }