/* ============================================================
   notifications.css — top-bar bell, slide-out tray, and toasts
   Palette: forest / paper / oxblood-burgundy (no gold washes).
   Class names are contracted with the inline JS in
   templates/site/partials/_notifications.html — keep them stable.
   ============================================================ */

/* ── Top-bar bell ─────────────────────────────────────────── */
/* The landing-topbar bell button + count badge are styled by the chrome's
   uniform utility-control rules in landing.css (40px square, cream on
   forest, shared badge). Only the home-page topbar label remains ours. */
.home-topbar__notify-label { white-space: nowrap; }

/* ── Slide-out tray ───────────────────────────────────────── */
.site-notify__backdrop { position: fixed; inset: 0; background: rgba(19, 16, 12, 0.22); z-index: 920; }

.site-notify__tray {
  position: fixed;
  top: calc(var(--topbar-h) * var(--page-zoom, 1) + 12px);
  right: 22px;
  width: min(400px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
  padding: 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  background: var(--parchment-pure);
  box-shadow: 0 28px 64px rgba(19, 16, 12, 0.20);
  transform: translateY(-10px); opacity: 0; pointer-events: none;
  transition: opacity 170ms ease, transform 170ms ease;
  z-index: 930; overflow: hidden;
}
.site-notify__tray[aria-hidden="false"] { opacity: 1; transform: translateY(0); pointer-events: auto; }

.site-notify__tray-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.site-notify__eyebrow,
.site-notify__item-badge,
.site-notify__toast-label {
  font-family: 'Inter', sans-serif; font-size: 0.6rem;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-light);
}
.site-notify__title,
.site-notify__item-title,
.site-notify__empty-title,
.site-notify__toast-title {
  font-family: 'Fraunces', serif; color: var(--ink); font-weight: 400;
}
.site-notify__title { font-size: 1.3rem; line-height: 1.1; margin-top: 3px; }

.site-notify__close,
.site-notify__toast-dismiss {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-soft); background: transparent;
  color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: background var(--t-mid), color var(--t-mid), border-color var(--t-mid);
}
.site-notify__close:hover,
.site-notify__toast-dismiss:hover { background: var(--burgundy-pale); color: var(--burgundy); border-color: rgba(110,34,51,0.2); }

/* ── List ─────────────────────────────────────────────────── */
.site-notify__list { display: flex; flex-direction: column; overflow: auto; padding: 6px 12px; }

.site-notify__item {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 10px;
  border-top: 1px solid var(--border-soft);
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--t-mid) var(--ease-smooth);
}
.site-notify__item:first-child { border-top: 0; }
.site-notify__item:hover { background: var(--burgundy-mist); }
.site-notify__item.is-unread {
  border-top-color: transparent;
  border-left: 3px solid var(--oxblood);
  background: var(--burgundy-mist);
  padding-left: 13px;
  margin: 4px 0;
}
.site-notify__item.is-unread + .site-notify__item { border-top-color: transparent; }

.site-notify__item-top { display: flex; align-items: center; gap: 9px; }
.site-notify__item-unread,
.site-notify__toast-label-dot {
  display: inline-flex; align-items: center;
  font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--burgundy);
}
.site-notify__item-unread::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--oxblood); margin-right: 6px;
}
.site-notify__item-title,
.site-notify__toast-title { font-size: 1rem; line-height: 1.2; }
.site-notify__item-message,
.site-notify__empty-copy,
.site-notify__toast-message {
  font-family: 'Inter', sans-serif; color: var(--muted); line-height: 1.5; font-size: 0.82rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.site-notify__item-time { font-family: 'Inter', sans-serif; color: var(--muted-light); font-size: 0.7rem; }

/* Footer link to the full centre */
.site-notify__tray-actions { padding: 12px 22px 18px; border-top: 1px solid var(--border-soft); }
.site-notify__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--burgundy); text-decoration: none;
}
.site-notify__pill:hover { color: var(--burgundy-mid); text-decoration: underline; }

/* ── Empty state ──────────────────────────────────────────── */
.site-notify__empty { padding: 30px 22px; text-align: center; }
.site-notify__empty-title { font-size: 1.15rem; }
.site-notify__empty-copy { margin-top: 6px; display: block; }

/* ── Toasts ───────────────────────────────────────────────── */
.site-notify__stack {
  position: fixed;
  top: calc(var(--topbar-h) * var(--page-zoom, 1) + 12px);
  right: 22px;
  width: min(380px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 12px;
  z-index: 940; pointer-events: none;
}
.site-notify__toast {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px 14px 19px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  background: var(--parchment-pure);
  box-shadow: 0 22px 52px rgba(19, 16, 12, 0.18);
  pointer-events: auto;
  animation: siteNotifyToastIn 220ms ease both;
}
.site-notify__toast::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--oxblood);
}
.site-notify__toast.is-leaving { animation: siteNotifyToastOut 220ms ease both; }
.site-notify__toast-label { color: var(--burgundy); }
.site-notify__toast-message { color: var(--ink-soft); font-size: 0.84rem; }
.site-notify__toast-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.site-notify__toast-link {
  display: inline-flex; align-items: center;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--burgundy); text-decoration: none;
}
.site-notify__toast-link:hover { color: var(--burgundy-mid); text-decoration: underline; }

body.site-notify-open { overflow: hidden; }

@keyframes siteNotifyToastIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes siteNotifyToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.99); }
}

@media (max-width: 780px) {
  .landing-topbar__notify-label,
  .home-topbar__notify-label { display: none; }
  .site-notify__tray { right: 12px; width: calc(100vw - 24px); }
  .site-notify__stack { right: 12px; width: calc(100vw - 24px); }
}