/* Notifications — pins & watches (js/views/notifications.js): the full page
   (#/events/:id/notifications), the Monitor bell popover and the pin/watch
   edit popover. Was per-element cssText (UI audit D7, N42); same computed values.
   Hashed into the shell by scripts/build.mjs (ensure, before views-settings).
   Every selector is scoped under a notif- class; the few that must out-rank a
   kit rule (.btn-ghost:hover, the coarse-pointer checkbox margin) say so. */

/* Full page */
/* Box, width and gutter: the kit .page.page-narrow; only the section gap is ours. */
.notif-view{gap:var(--s5)}

/* Shared content (page and bell popover) */
.notif-content{display:flex;flex-direction:column;gap:var(--s5)}
.notif-content--popover{gap:var(--s4);min-width:300px;max-width:420px}
.notif-pop-head{display:flex;align-items:center;gap:10px}
.notif-pop-title{flex:1;font-size:15px;font-weight:700;color:var(--text-1)}
.notif-pop-close{background:none;border:none;cursor:pointer;color:var(--text-2);font-size:var(--fs-16);line-height:1;padding:2px var(--s1);border-radius:var(--r-sm)}
.notif-readonly{font-size:var(--fs-12);color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r-sm);padding:var(--s2) 10px}
.notif-sections{display:flex;flex-direction:column;gap:28px}

/* Sections and rows */
.notif-section{display:flex;flex-direction:column;gap:0}
.notif-section-name{margin:0 0 var(--s3) 0;font-size:15px;font-weight:700;color:var(--text-1)}
.notif-empty{color:var(--text-muted);font-size:var(--fs-13);padding:var(--s2) 0}
.notif-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.notif-row--pin{padding:10px 0}
.notif-row--watch{padding:var(--s3) 0}
.notif-list>.notif-row:not(:last-child){border-bottom:1px solid var(--border-subtle)}
/* Pin colour comes from the pin (--notif-swatch, set per row). */
.notif-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--notif-swatch, var(--text-muted))}
.notif-stripe{width:3px;height:36px;border-radius:2px;flex-shrink:0;background:var(--ok)}
.notif-stripe.is-silenced{background:var(--text-muted)}
.notif-info{flex:1;min-width:100px}
.notif-row--watch .notif-info{min-width:120px}
.notif-target{font-size:var(--fs-13);font-weight:600;color:var(--text-1);display:block}
.notif-sub{font-size:var(--fs-12);color:var(--text-muted);display:block}
.notif-repeak{font-size:var(--fs-12);color:var(--text-muted);display:block;margin-top:2px}
.notif-row-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* Pin / watch edit popover */
.notif-pw{display:flex;flex-direction:column;gap:var(--s3);min-width:260px;max-width:320px;padding:2px 0}
.notif-pw-title{font-size:var(--fs-13);font-weight:700;color:var(--text-1)}
.notif-pw-target{font-size:var(--fs-12);color:var(--text-muted)}
.notif-pw-silenced{display:flex;align-items:center;gap:var(--s2);background:var(--warn-dim);border:1px solid var(--warn);border-radius:var(--r-sm);padding:7px 10px;font-size:var(--fs-12);color:var(--warn)}
.notif-pw-scope{display:flex;flex-direction:column;gap:6px}
.notif-pw-label{font-size:var(--fs-12);color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.notif-pw-radio{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-13);color:var(--text-1);cursor:pointer}
.notif-pw-watch{display:flex;flex-direction:column;gap:var(--s2)}
.notif-pw-thr{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.notif-pw-thr-text{font-size:var(--fs-13);color:var(--text-2)}
.notif-pw-rearm{display:flex;align-items:flex-start;gap:var(--s2);font-size:var(--fs-13);color:var(--text-1);cursor:pointer}
/* Out-ranks the coarse-pointer input[type="checkbox"] margin in components.css,
   as the inline margin-top did. */
.notif-pw-rearm input[type="checkbox"]{margin-top:2px;flex-shrink:0}
.notif-pw-hint{font-size:var(--fs-11);color:var(--text-muted);line-height:1.5}
.notif-pw-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap;padding-top:var(--s2);border-top:1px solid var(--border-subtle);margin-top:var(--s1)}
.notif-pw-spacer{flex:1}