/* Notification centre (drawer + bell badge) and the Notifications settings rows.
   Active vs upcoming reminders are told apart by a left marker + weight, never by
   colour alone; the badge is a count, so it doesn't rely on hue either. */

/* ---- sidebar bell badge ---- */
.sidebar__act--bell { position: relative; }
.sidebar__badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 1rem; height: 1rem; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--c-accent-ink); color: var(--c-on-accent);
  font-size: 0.62rem; font-weight: var(--fw-bold); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sidebar__badge[hidden] { display: none; }

/* ---- drawer ---- */
.ntf-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 21, 26, 0.35);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.ntf-backdrop.is-open { opacity: 1; visibility: visible; }

.ntf-drawer {
  position: fixed; top: 0; right: 0; z-index: 81;
  width: min(400px, 92vw); height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--c-surface); border-left: 1px solid var(--c-border);
  box-shadow: -18px 0 44px -20px rgba(20, 21, 26, 0.45);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.ntf-drawer.is-open { transform: none; }

.ntf-drawer__head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border);
}
.ntf-drawer__title { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.ntf-drawer__title svg { width: 1.25rem; height: 1.25rem; }
.ntf-x { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-md); color: var(--c-ink-soft); }
.ntf-x:hover { background: var(--c-surface-2); color: var(--c-ink); }
.ntf-x svg { width: 1.1rem; height: 1.1rem; }

.ntf-drawer__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-6); }

.ntf-subhead { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }

.ntf-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ntf-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface);
}
.ntf-row[data-link] { cursor: pointer; }
.ntf-row[data-link]:hover { background: var(--c-surface-2); }
.ntf-row.is-active { border-left: 3px solid var(--c-accent-ink); }
.ntf-list--upcoming .ntf-row { opacity: 0.72; }
.ntf-row__icon { flex: 0 0 auto; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; color: var(--c-ink-soft); }
.ntf-row__icon svg { width: 1.15rem; height: 1.15rem; }
.ntf-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntf-row__title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.ntf-row__meta { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.ntf-row__acts { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ntf-mini { padding: 2px 6px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-soft); }
.ntf-mini:hover { background: var(--c-surface-2); color: var(--c-ink); }
.ntf-mini--done { display: grid; place-items: center; }
.ntf-mini--done svg { width: 0.9rem; height: 0.9rem; }

.ntf-empty { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) 0; color: var(--c-ink-faint); font-size: var(--fs-sm); }
.ntf-empty svg { width: 1.1rem; height: 1.1rem; }

.ntf-add { margin-bottom: var(--sp-4); }
.ntf-add__form { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.ntf-add__form .field { gap: var(--sp-1); }
.ntf-add__form input { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); font: inherit; }
.ntf-add__acts { display: flex; gap: var(--sp-2); }

/* ---- settings rows ---- */
.notif-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; }
.notif-row + .notif-row { border-top: 1px solid var(--c-border); }
.notif-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-row__text strong { font-weight: var(--fw-semibold); }
.notif-row__text span { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.notif-select, .notif-time { flex: 0 0 auto; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); font: inherit; }
.notif-quiet.is-disabled { opacity: 0.5; }
.notif-test { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.notif-test__status:empty, .notif-focus__status:empty { display: none; }
.notif-test__status, .notif-focus__status { font-size: var(--fs-sm); color: var(--c-ink-soft); }