/* The All notifications page and the bell's per-item actions (Sprint 45 F3). Tokens only; light and dark follow them. */
.np-search input { min-width: 220px; }
.np-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-3) 0; }
.np-chip { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-sm, 13px); cursor: pointer; }
.np-chip.on { background: var(--accent-soft); color: var(--text); border-color: var(--accent); font-weight: 600; }
.np-new { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-sm); margin-bottom: var(--s-3); }
.np-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.np-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-4); align-items: start; }
.np-detail { position: sticky; top: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-4); min-height: 160px; }
.np-detail h3 { margin: 0 0 var(--s-2); }
.np-back { display: none; }
.np-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); margin: var(--s-3) 0; }
.np-facts dt { color: var(--text-3); }
.np-facts dd { margin: 0; overflow-wrap: anywhere; }
.np-day { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: var(--s-4) 0 var(--s-2); }
.np-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.np-row { display: grid; grid-template-columns: auto 10px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.np-row:last-child { border-bottom: 0; }
.np-row:hover, .np-row.open { background: var(--surface-2); }
.np-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.np-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.np-row.unread .np-dot { background: var(--accent); }
.np-row.unread .np-main b { font-weight: 700; }
.np-main { text-align: left; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-body { color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.np-meta small { color: var(--text-3); }
.np-acts { display: flex; gap: 2px; opacity: 0; }
.np-row:hover .np-acts, .np-row:focus-within .np-acts, .np-row:focus .np-acts { opacity: 1; }
.np-undo { position: fixed; left: 50%; bottom: var(--s-4); transform: translateX(-50%); z-index: 50; background: var(--ink-900); color: var(--n-0); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); box-shadow: var(--sh-lg); display: flex; align-items: center; gap: var(--s-3); }
.np-undo.hidden, .np-new.hidden { display: none; }
@media (max-width: 800px) {
  .np-cols { grid-template-columns: minmax(0, 1fr); }
  .np-detail { display: none; }
  .np-page.show-detail .np-detail { display: block; position: fixed; inset: 0; z-index: 40; overflow: auto; border-radius: 0; }
  .np-back { display: inline-flex; margin-bottom: var(--s-3); }
  .np-acts { opacity: 1; grid-column: 3 / 5; }
  .np-row { grid-template-columns: auto 10px minmax(0, 1fr); }
}
@media (hover: none) { .np-acts { opacity: 1; } }