/* ─────────────────────────────────────────────────────────
 * Notification banner (macOS 26). Values of the depicted world,
 * measured off the 512pixels captures (points):
 *   344 × 73, circular radius 20 (the corner profile fits a circle,
 *   not the continuous corner), 16 in from the right, 46 from the top.
 *   Glass: white 0.68 over the wallpaper, blurred and saturated 1.5
 *   (over black it reads #ADADAD; over the Tahoe blue it reads
 *   #AACEEA). A 1pt rim: +0.27 white on the outer half point,
 *   +0.16 on the inner. Shadow: 5 down, blur σ 8, 0.3.
 *   Ink rgba(0,0,0,0.85): title 13 semibold, body 13 regular.
 * ───────────────────────────────────────────────────────── */

.notif {
  position: relative;
  box-sizing: border-box;
  width: 344px; min-height: 57px;
  padding: 12.4px 16px 12.6px 58px;   /* title line box 12.4..28.4 puts its baseline at 25 */
  border-radius: 20px;
  font-family: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: rgba(0,0,0,0.85);
  background: rgba(255,255,255,0.68);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.13),
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 5px 16px rgba(0,0,0,0.3);        /* alpha .21 at the lower edge, .06 fifteen below, .05 eight out to the side */
  user-select: none;
}
.mac-screen .notif { position: absolute; top: 46px; right: 16px; z-index: 5; }

.nf-icon { position: absolute; left: 13px; top: 20.5px; width: 32px; height: 32px; }
.nf-icon > svg { display: block; }

.nf-text { font-size: 13px; line-height: 16px; }
.nf-head { display: flex; align-items: baseline; gap: 8px; }
.nf-title {
  flex: 1 1 auto; min-width: 0;
  font-weight: 590;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nf-time { flex: none; font-size: 12px; color: rgba(0,0,0,0.5); }
.nf-body {
  margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}