/* Notifications: the bell's per-kind icon and Settings › Notifications rows
   (architecture contextual-navigation/06). Tokens only; controls keep the design
   system's own sizes (no 44px inflation). Built at 375px first. */
.kk-notification-icon { flex: 0 0 auto; display: inline-flex; color: var(--kk-text-soft); }
.kk-notification-icon svg { width: 14px; height: 14px; }

.kk-notify-form { display: grid; gap: 0; min-width: 0; }
.kk-notify-head,
.kk-notify-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 52px; align-items: center; gap: var(--kk-s-2); }
.kk-notify-head { padding: 0 0 6px; color: var(--kk-text-soft); font-size: var(--kk-fs-micro); }
.kk-notify-head span:not(:first-child) { text-align: center; }
.kk-notify-row { padding: 10px 0; border-top: 1px solid var(--kk-line); }
.kk-notify-type { min-width: 0; }
.kk-notify-type b { display: block; color: var(--kk-ink); font-size: var(--kk-fs-meta); }
.kk-notify-type small { display: block; margin-top: 2px; color: var(--kk-text-soft); font-size: var(--kk-fs-micro); overflow-wrap: anywhere; }
.kk-notify-on, .kk-notify-fixed { color: var(--kk-text-soft); font-size: var(--kk-fs-micro); text-align: center; }
.kk-notify-toggle { display: flex; justify-content: center; }
.kk-notify-toggle input { accent-color: var(--kk-primary); }
.kk-notify-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kk-notify-form > button { justify-self: start; margin-top: var(--kk-s-3); }

@media (min-width: 640px) {
  .kk-notify-head, .kk-notify-row { grid-template-columns: minmax(0, 1fr) 72px 72px; }
}