/* The header bell and its popover list (web/js/notifications.js). Shell tokens
   only, so tenant accents and the dark theme carry over; the panel never
   widens the page — it is position:fixed and clamped to the viewport. */
/* z-index: the phone bottom bar (learning.css's fixed .learning-nav, z-index 25)
   sits inside the header's stacking context — facelift.css's backdrop-filter on
   .top makes that fixed bar a descendant containing-block-wise, so on narrow
   screens it overlays the header and would swallow the bell's clicks. */
.notif-btn{position:relative;z-index:30;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;min-width:40px;flex:none;margin-left:8px;border-radius:10px;
  border:1.5px solid var(--edge);background:var(--surface);color:var(--ink-2);cursor:pointer}
.notif-btn:hover{border-color:var(--accent);color:var(--ink)}
.notif-btn:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.notif-btn svg{display:block}
.notif-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  background:var(--accent-deep);color:var(--on-accent);font:700 11px/1 Figtree,sans-serif;
  border:2px solid var(--ground)}
.notif-badge[hidden]{display:none}
@media(max-width:699px){.notif-btn{width:36px;height:36px;min-width:36px;margin-left:6px}}

.notif-panel{position:fixed;z-index:60;max-height:min(70vh,560px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--edge);border-radius:12px;box-shadow:var(--shadow);
  padding:6px}
.notif-panel:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-bottom:1px solid var(--edge)}
.notif-head h2{font-size:16px;margin:0;color:var(--ink)}
.notif-list{list-style:none;margin:0;padding:4px;overflow-y:auto;overscroll-behavior:contain}
.notif-item{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:9px;
  color:var(--ink);text-decoration:none}
.notif-item:hover{background:var(--accent-wash)}
.notif-item:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px}
.notif-item.unread{background:var(--raise)}
.notif-item.unread:hover{background:var(--accent-wash)}
.notif-title{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.notif-item:not(.unread) .notif-title{color:var(--ink-2);font-weight:500}
.notif-body{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.notif-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.notif-new{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent-deep)}
.notif-empty{margin:10px 12px 14px;color:var(--mute);font-size:14px}
.notif-older{margin:4px auto 8px}