/*
 * Alerts (components/NotificationCenter.tsx): the bell in the header band, the toasts and the
 * drawer. Imported by app/layout.tsx after globals.css (which declares the layer order) and radio.css.
 * z-index map: page < drawer 75 < radio dock 80 < toasts 85 < FX layer 90 < crate overlay 95.
 * The drawer stays under the radio dock (the YouTube player is never covered); the toasts sit at the
 * top right, under the header, away from the dock (bottom right).
 */
@layer layout {
  .notif { flex: none; display: flex; align-items: center; margin-left: clamp(0.6rem, 1.4vw, 1.1rem); }

  button.notif-bell {
    --btn-bg: transparent;
    --btn-fg: var(--paper);
    --btn-shadow: var(--stamp);
    min-height: 0;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border-color: var(--paper);
    rotate: -2deg;
  }
  button.notif-bell[aria-expanded="true"] { --btn-bg: var(--paper); --btn-fg: var(--ink); }
  .notif-bell-icon { width: 1.35rem; height: 1.35rem; fill: currentColor; }

  /* Red stamp pinned on the bell's corner. */
  .notif-badge {
    position: absolute;
    top: -0.55rem;
    right: -0.7rem;
    min-width: 1.45rem;
    padding: 0.2em 0.3em 0.1em;
    background: var(--stamp);
    color: var(--paper);
    border: 2px solid var(--paper);
    font: 400 0.85rem/1 var(--font-display);
    letter-spacing: 0.04em;
    text-align: center;
    rotate: 8deg;
    filter: url(#ink-bleed);
    pointer-events: none;
  }

  /* Narrow screens: the bell stays in the band, right before the burger. */
  @media (max-width: 860px) {
    .notif { order: 2; margin-left: auto; }
    .nav-toggle { order: 3; margin-left: 0.5rem; }
  }
}

@layer fx {
  /* ---------------------------------------------------------------- toasts */
  .notif-toasts {
    position: fixed;
    top: calc(4.4rem + 4px + 0.8rem);
    right: clamp(0.5rem, 2vw, 1.4rem);
    z-index: 85;
    display: grid;
    gap: 0.7rem;
    width: min(22rem, calc(100vw - 1rem));
    pointer-events: none;
  }
  .notif-toast {
    --tilt: -1.4deg;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    background: var(--paper-lift);
    color: var(--ink);
    border: var(--rule-thick);
    box-shadow: var(--drop);
    rotate: var(--tilt);
    pointer-events: auto;
    animation: notif-in 320ms var(--ease-snap) both;
  }
  .notif-toast:nth-child(2n) { --tilt: 1.2deg; }
  .notif-toast[data-tone="bad"] { border-style: dashed; }
  .notif-toast::after {
    /* Paper grain on the ticket. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    background-size: 220px;
    mix-blend-mode: multiply;
    opacity: 0.1;
    pointer-events: none;
  }
  button.notif-toast-body {
    --btn-bg: transparent;
    --btn-shadow: transparent;
    display: grid;
    justify-items: start;
    gap: 0.25rem;
    min-height: 0;
    padding: 0.8rem 0.4rem 0.75rem 0.9rem;
    border: 0;
    box-shadow: none;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font: 400 0.88rem/1.35 var(--font-body);
  }
  button.notif-toast-body:hover, button.notif-toast-body:active { translate: none; box-shadow: none; }
  .notif-toast-body b { font: 400 1.1rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
  .notif-toast-stamp {
    position: absolute;
    top: -0.9rem;
    right: 2.4rem;
    font-size: 1.15rem;
    background: color-mix(in srgb, var(--paper) 60%, transparent);
    animation: notif-slam 420ms var(--ease-snap) 160ms both;
  }
  .notif-toast[data-tone="info"] .notif-toast-stamp { color: var(--ink); }
  button.notif-toast-close {
    --btn-bg: transparent;
    --btn-shadow: transparent;
    align-self: start;
    min-height: 0;
    width: 2rem;
    height: 2rem;
    margin: 0.3rem;
    padding: 0;
    border: 0;
    box-shadow: none;
    font-size: 1rem;
  }
  button.notif-toast-close:hover { color: var(--stamp); translate: none; }

  /* ---------------------------------------------------------------- drawer */
  .notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 74;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
  }
  .notif-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 75; /* under the radio dock (80): the YouTube player is never covered */
    width: min(26rem, 100vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.1rem calc(var(--radio-h, 0px) + 1.5rem);
    background: var(--paper);
    color: var(--ink);
    border-left: 4px solid var(--ink);
    box-shadow: -7px 0 0 var(--stamp);
    animation: notif-drawer-in 260ms var(--ease-snap) both;
  }
  .notif-drawer[hidden] { display: none; }
  .notif-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .notif-drawer-head h2 { margin: 0.2rem 0 0; }
  button.notif-close { min-height: 0; width: 2.4rem; height: 2.4rem; padding: 0; }
  .notif-drawer-tools { margin: 0.9rem 0 0.4rem; }
  .notif-drawer-tools button { font-size: 0.9rem; min-height: 2.1rem; padding: 0.4rem 0.8rem 0.3rem; }
  .notif-empty { margin-top: 1.4rem; padding: 1rem; border: 2px dashed var(--ink); rotate: -1deg; }
  .notif-group h3 {
    margin: 1.2rem 0 0.5rem;
    font: 600 0.72rem/1.2 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .notif-list { display: grid; gap: 0.5rem; }
  .notif-list > li { border: var(--rule); background: var(--paper-lift); }
  .notif-list > li:not([data-unread]) { opacity: 0.78; }
  .notif-item {
    position: relative;
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 0.6rem;
    align-items: start;
    padding: 0.65rem 1.4rem 0.6rem 0.6rem;
    text-decoration: none;
  }
  .notif-item:hover { background: var(--ink); color: var(--paper); }
  .notif-item-stamp { font-size: 0.95rem; justify-self: center; margin-top: 0.2rem; }
  .notif-item-stamp[data-tone="info"] { color: var(--ink); }
  .notif-item:hover .notif-item-stamp { color: var(--paper); mix-blend-mode: normal; }
  .notif-item-text { display: grid; gap: 0.15rem; font-size: 0.85rem; line-height: 1.35; }
  .notif-item-text b { font: 400 1rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
  .notif-item-text time { font: 500 0.7rem/1.4 var(--font-mono); letter-spacing: 0.06em; opacity: 0.8; }
  .notif-dot {
    position: absolute;
    top: 0.7rem;
    right: 0.6rem;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--stamp);
    border-radius: 50%;
  }
  button.notif-more { margin-top: 1rem; width: 100%; }

  @keyframes notif-in {
    0% { opacity: 0; translate: 2rem 0; }
    100% { opacity: 1; translate: 0 0; }
  }
  @keyframes notif-slam {
    0% { opacity: 0; scale: 1.9; rotate: -18deg; }
    60% { opacity: 1; scale: 0.93; rotate: -8deg; }
    100% { opacity: 1; scale: 1; rotate: -8deg; }
  }
  @keyframes notif-drawer-in {
    0% { translate: 100% 0; }
    100% { translate: 0 0; }
  }

  @media (max-width: 860px) {
    .notif-toasts { top: calc(3.6rem + 4px + 0.5rem); }
  }
  /* Phones: full-width toasts at the top, full-screen drawer. */
  @media (max-width: 560px) {
    .notif-toasts { left: 0.5rem; right: 0.5rem; width: auto; }
    .notif-drawer { width: 100vw; border-left: 0; box-shadow: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .notif-toast, .notif-toast-stamp, .notif-drawer { animation: none !important; }
  }
}

/* Rails port: hidden parts stay hidden over the display rules above. */
.notif [hidden], #notif-layer [hidden] { display: none; }