/* ============================================================================
   PARITY B10 — blocks: mail & notices (mailbox, mail-pulse, notice-board,
   notice-desk)
   ----------------------------------------------------------------------------
   Owned by batch B10. Most styling is the old components' Tailwind classes,
   kept verbatim (served via /themes/tailwind.css); this file holds only what
   Tailwind can't express:
     • `.accent-grad` — the reference's primary-button lit surface (the
       mailbox Compose button, the only place --accent-grad may appear).
     • `div.mailbox` — the mailbox composes `.glass-card` for its material but
       owns its own box (panes must reach the card's edges), so the vitrine
       `.glass-card` padding is neutralised here (see worklist trap 3.5).
     • lucide-icon sizing inside these components (the reference passes
       `size-*` classes straight to the icon's svg; here the svg fills the
       sized wrapper span, so the `size-4` etc. class stays on the element).
   ========================================================================== */

/* ── The primary button's lit surface (old app.css `.accent-grad`) ───────── */
.accent-grad {
  background-color: var(--ta-accent);
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--ta-accent) 86%, white) 0%,
    var(--ta-accent) 100%
  );
  /* The one saturated fill floats like everything else: an inner light catch
     plus a soft accent-tinted lift. */
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.25),
    0 4px 12px -2px color-mix(in oklab, var(--ta-accent) 35%, transparent);
}

.accent-grad:hover {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--ta-accent) 74%, white) 0%,
    color-mix(in oklab, var(--ta-accent) 92%, white) 100%
  );
}

/* ── Mailbox: the pane composes .glass-card but owns its box ─────────────── */
/* `div.mailbox`, not `.mailbox` — element+class so the vitrine single-class
   utility can't win on padding regardless of @import order (trap 3.5). */
div.mailbox {
  padding: 0;
}

/* ── Lucide icons: the `size-*` class sits on a wrapper span (the reference
   puts it on the svg), so the svg fills that span. ───────────────────────── */
.mail-pulse svg,
.mailbox svg,
.notice-board svg,
.notice-desk svg {
  width: 100%;
  height: 100%;
}