/* The header bell (notifications.rs) and Settings -> Notifications (pages/settings.rs). */

.nt { position: relative; }
.nt__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; font-size: 16px; }
.nt__btn:hover, .nt__btn[aria-expanded="true"] { background: var(--surface-raised); }
.nt__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nt__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--fizz); color: var(--on-fizz); font: 600 11px/18px var(--font-sans); text-align: center; }
.nt__backdrop { position: fixed; inset: 0; z-index: 60; }
.nt-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 61; width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 12px 32px rgb(0 0 0 / 0.35); }
.nt-menu__head, .nt-menu__foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); }
.nt-menu__head { border-bottom: 1px solid var(--border); }
.nt-menu__foot { border-top: 1px solid var(--border); }
.nt-menu__title { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.nt-menu__action { margin-left: auto; background: none; border: 0; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer;
  font: 600 13px/18px var(--font-sans); color: var(--grape); }
.nt-menu__foot .nt-menu__action { margin-left: 0; }
.nt-menu__action:hover { background: var(--surface-raised); text-decoration: none; }
.nt-menu__action:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.nt-menu__empty { margin: 0; padding: var(--space-4); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.nt-list { list-style: none; margin: 0; padding: var(--space-1); overflow-y: auto; }
.nt-item { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); text-align: left; cursor: pointer; font: inherit; }
.nt-item:hover { background: var(--surface-raised); }
.nt-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nt-item__icon { flex: none; width: 18px; margin-top: 2px; text-align: center; color: var(--ink-muted); }
.nt-item__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nt-item__subject { font: 400 14px/20px var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.nt-item--unread .nt-item__subject { font-weight: 600; }
.nt-item__summary { font: 400 12px/18px var(--font-sans); overflow-wrap: anywhere; }
.nt-item__meta { display: flex; gap: var(--space-2); font: 400 12px/16px var(--font-sans); }
.nt-item__dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--fizz); }

.ns-page .mc-panel { margin-top: var(--space-4); }
.ns-panel .mc-panel__lede { margin-top: var(--space-2); }
.ns-testrow { margin-top: var(--space-3); }
.ns-test { margin: var(--space-2) 0 0; font: 400 13px/20px var(--font-sans); color: var(--danger-text); }
.ns-test--ok { color: var(--patched); }
.ns-scope { margin-top: var(--space-3); }
.ns-table-wrap { overflow-x: auto; margin-top: var(--space-3); }
.ns-table { width: 100%; border-collapse: collapse; }
.ns-table th, .ns-table td { padding: var(--space-3) var(--space-2); border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.ns-table thead th { border-top: 0; font: 600 12px/16px var(--font-sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ns-table tbody th { font-weight: 400; }
.ns-kind { display: flex; align-items: center; gap: var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.ns-kind > i { width: 16px; text-align: center; color: var(--ink-muted); }
.ns-desc, .ns-eff { display: block; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ns-eff { margin-top: var(--space-1); font-size: 12px; }
.ns-choice select, .ns-choice .mc-select__trigger { min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: 400 13px/20px var(--font-sans); cursor: pointer; }
.ns-choice .mc-select__trigger:focus-visible, .ns-choice select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ns-choice .mc-select__trigger:disabled, .ns-choice select:disabled { cursor: progress; opacity: 0.7; }
.ns-hourrow { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid var(--border); }
.ns-hourrow select, .ns-hourrow .mc-select__trigger { max-width: 100%; width: fit-content; min-height: 36px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 400 13px/20px var(--font-sans); cursor: pointer; }
.ns-hourrow .mc-select__trigger:focus-visible, .ns-hourrow select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ns-hourrow .mc-select__trigger:disabled, .ns-hourrow select:disabled { cursor: progress; opacity: 0.7; }
.ns-always { font: 600 13px/36px var(--font-sans); color: var(--ink-muted); }
@media (max-width: 560px) {
  .ns-table th, .ns-table td { padding: var(--space-2) var(--space-1); }
  .nt__btn { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .nt__btn { transition: none; } }
.ns-hourdial { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.ns-hourdial__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); flex: 1 1 220px; min-width: 0; }