.notifications { position: relative; flex: 0 0 44px; z-index: 3; color: var(--ink); }
.notification-toggle { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); touch-action: manipulation; }
.notification-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.notification-toggle:hover { color: var(--accent); }
.notification-toggle:focus-visible { outline-offset: 2px; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.notification-panel { position: absolute; top: calc(100% + 8px); width: min(360px, calc(100vw - 32px)); max-height: min(480px, calc(100vh - 112px)); max-height: min(480px, calc(100dvh - 112px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 5px 7px 4px 6px; background: var(--paper); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.notification-header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px; border-bottom: 1px solid var(--line); }
.notification-heading { min-width: 0; margin: 0; font: inherit; font-size: 15px; font-weight: 600; }
.notification-action { min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; line-height: 1.5; text-align: start; }
.notification-action:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--accent); background: var(--wash); }
.notification-action[aria-disabled="true"] { color: var(--muted); cursor: default; }
.notification-mark-all { flex-shrink: 0; font-size: 12px; }
.notification-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.notification-row + .notification-row { border-top: 1px solid var(--line); }
.notification-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-height: 44px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.notification-link:hover { background: var(--wash); color: var(--ink); }
.notification-author { font-weight: 400; }
.notification-row[data-unread="true"] .notification-author { font-weight: 600; }
.notification-row[data-unread="true"] .notification-author::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-inline-end: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.notification-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 3.2em; overflow: hidden; white-space: pre-wrap; }
.notification-table, .notification-time { color: var(--muted); font-size: 11px; }
.notification-table { margin-top: 2px; }
.notification-empty, .notification-progress { flex: none; padding: 16px; color: var(--muted); }
.notification-feedback { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.notification-message { color: var(--accent); }
.notification-more { flex: none; width: 100%; text-align: center; border-top: 1px solid var(--line); }
.notification-panel :is(a, button, h2):focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* The archive's light, dark and system themes supply all color variables. */
@media (prefers-reduced-motion: reduce) {
  .notifications, .notifications * { scroll-behavior: auto; transition: none; animation: none; }
}
@media (forced-colors: active) {
  .notification-panel, .notification-header, .notification-row, .notification-feedback, .notification-more { border-color: CanvasText; }
  .notification-dot, .notification-row[data-unread="true"] .notification-author::before { background: CanvasText; forced-color-adjust: none; }
  .notification-panel :is(a, button, h2):focus-visible { outline-color: Highlight; }
}
@media print {
  .notifications { display: none !important; }
}