/* ─── Notification settings page ───────────────────────────────────────
   Mobile-first. A vertical control panel (NOT a .card record-row) plus a
   stacked device-health list, so nothing overflows on a narrow screen. */

.notif-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.notif-panel > .tick-tr,
.notif-panel > .tick-bl {
  position: absolute; width: 9px; height: 9px; pointer-events: none;
}
.notif-panel > .tick-tr { top: -1px; right: -1px; border-top: 1px solid var(--metal-3); border-right: 1px solid var(--metal-3); }
.notif-panel > .tick-bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--metal-3); border-left: 1px solid var(--metal-3); }
.notif-panel h2 { margin: 0; }

.notif-blurb { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }

.notif-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.3rem 0;
}
.notif-actions .btn,
.notif-actions .btn-secondary { flex: 1 1 auto; }

.notif-status {
  min-height: 1.2em;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--accent);
}
.notif-status:empty { display: none; }

.notif-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.notif-section-title { margin: 2rem 0 0.75rem; }

/* Device health list */
.notif-devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }

.notif-device {
  padding: 0.8rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.notif-device--stale { border-color: var(--metal-3); background: var(--surface-2); }

.notif-device-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }

.notif-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.notif-badge.is-stale { color: #B4791F; }
.notif-badge.is-unconfirmed { color: var(--muted-2); }

.notif-device-ua {
  font-size: 0.74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-device-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; }
.notif-device-meta > div { display: flex; flex-direction: column; }
.notif-device-meta dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.notif-device-meta dd { margin: 0; font-size: 0.82rem; color: var(--ink-2); }