/* ════════════════════════════════════════════════════════════════════════
   src/css/notif-glass.css — notification cards: liquid glass only (no background colour), tight gaps, one-line titles, centred icon
   Linked LAST in notifications.html and dashboard.html (after the inline card styles and theme.css).
   The glass itself (blur, refraction, rim light) is attached by notifications-loader.js via VertxLiquidGlass;
   this file only makes the card transparent so the glass shows, and gives it something soft to sit on.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. transparent card (the glass layers paint the surface) */
.nt-card,
#vx-notif-stack .nt-card,
#vx-notif-stack .nt-card:not(:first-child) { background: transparent; border-color: rgba(0, 0, 0, .06); box-shadow: none; }
html[data-theme="dark"] .nt-card,
html[data-theme="dark"] #vx-notif-stack .nt-card,
html[data-theme="dark"] #vx-notif-stack .nt-card:not(:first-child) { background: transparent; border-color: rgba(255, 255, 255, .10); box-shadow: none; }

/* 2. the title row: ONE line. A long title ends in "…" instead of wrapping; the tag stays whole beside it. */
.nt-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nt-head .nt-title { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-head .nt-tag { flex: none; margin-left: 0; vertical-align: baseline; }

/* 3. the icon sits in the vertical middle of the card, however tall a long description makes it (desktop already did; portrait was top-aligned) */
.nt-ic { align-self: center; }

/* 4. portrait / compact: the dashboard shows the notification cards too (they used to be hidden here) */
@media (max-width: 1024px) {
  .nt-head { gap: 6px; }
  #vx-notif-stack { display: flex; margin-top: 20px; padding: 0 19px 32px; gap: 6px; }
}