/* Notifications (toast.js): slim frosted-glass banners in the style of macOS, stacked at the top right. */

.tz { position: fixed; z-index: 30000; bottom: 1rem; left: 1rem; width: min(23rem, calc(100vw - 1.5rem)); display: flex; flex-direction: column; gap: 0.4rem; pointer-events: none; }
.tz__top { display: flex; justify-content: flex-start; pointer-events: auto; }
.tz__top[hidden] { display: none; }
.tz__clear { height: 1.6rem; padding: 0 0.8rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: var(--cf-text);
  background: color-mix(in srgb, var(--cf-surface) 16%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.7); backdrop-filter: blur(10px) saturate(1.7);
  border: 1px solid color-mix(in srgb, #fff 55%, transparent); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.3); transition: background-color 0.14s; }
.tz__clear:hover { background: color-mix(in srgb, var(--cf-surface) 40%, transparent); }
.tz__stack { display: flex; flex-direction: column-reverse; gap: 0.4rem; }

/* each notification slides in, and collapses away when it leaves */
.tz__slot { display: grid; grid-template-rows: 1fr; pointer-events: auto; opacity: 0; transform: translateX(-28px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1), grid-template-rows 0.26s ease; }
.tz__slot.is-in { opacity: 1; transform: none; }
.tz__slot.is-out { grid-template-rows: 0fr; opacity: 0; transform: translateX(-34px) scale(0.97); transition-duration: 0.22s; }

/* The glass: mostly see-through, with a strong blur so whatever is behind becomes soft colour */
.tz__card {
  --tz-accent: #3b82f6;
  position: relative; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; overflow: hidden;
  padding: 0.62rem 0.5rem 0.68rem 0.65rem; border-radius: 1.05rem; color: var(--cf-text); touch-action: pan-y; user-select: none;
  background: color-mix(in srgb, var(--cf-surface) 14%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.7); backdrop-filter: blur(10px) saturate(1.7);
  border: 1px solid color-mix(in srgb, #fff 60%, transparent);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
:root[data-theme="dark"] .tz__card, :root[data-theme="dark"] .tz__clear { background: color-mix(in srgb, var(--cf-surface) 18%, transparent); border-color: color-mix(in srgb, #fff 22%, transparent); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tz__card, :root:not([data-theme="light"]) .tz__clear { background: color-mix(in srgb, var(--cf-surface) 18%, transparent); border-color: color-mix(in srgb, #fff 22%, transparent); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tz__card, .tz__clear { background: var(--cf-surface); } }
.tz__card.has-inline { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.tz__card.is-drag { transition: none; cursor: grabbing; }
.tz__card.is-nudge { animation: tz-nudge 0.4s ease; }
.tz__card.is-pinned { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1.5px color-mix(in srgb, var(--tz-accent) 60%, transparent); }
@keyframes tz-nudge { 30% { transform: scale(1.03); } 100% { transform: none; } }

.tz--success { --tz-accent: #22c55e; } .tz--error { --tz-accent: #ef4444; } .tz--warning { --tz-accent: #f59e0b; } .tz--info { --tz-accent: #3b82f6; }

.tz__tile { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 4px -1px rgba(0, 0, 0, 0.3); }
.tz__tile svg { width: 17px; height: 17px; }
.tz--success .tz__tile { background: linear-gradient(160deg, #4ade80, #16a34a); }
.tz--error .tz__tile { background: linear-gradient(160deg, #f87171, #dc2626); }
.tz--warning .tz__tile { background: linear-gradient(160deg, #fbbf24, #d97706); }
.tz--info .tz__tile { background: linear-gradient(160deg, #60a5fa, #2563eb); }

.tz__body { min-width: 0; text-shadow: 0 0 6px color-mix(in srgb, var(--cf-surface) 85%, transparent), 0 0 2px color-mix(in srgb, var(--cf-surface) 70%, transparent); }
.tz__title { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.tz__msg { font-size: 0.84rem; line-height: 1.35; color: var(--cf-text); opacity: 0.82; overflow-wrap: anywhere; }
.tz__body > .tz__msg:first-child { opacity: 1; font-weight: 500; }
.tz__count { display: inline-block; margin-left: 0.35rem; padding: 0 0.35rem; border-radius: 9999px; font-size: 0.64rem; font-weight: 700; line-height: 1.4;
  background: color-mix(in srgb, var(--cf-text) 14%, transparent); color: var(--cf-text); vertical-align: 1px; }
.tz__count[hidden] { display: none; }

.tz__ctl { display: flex; gap: 0; align-items: center; }
.tz__btn { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 9999px; color: var(--cf-text-secondary); opacity: 0.5;
  transition: opacity 0.14s, background-color 0.14s, color 0.14s; }
.tz__btn svg { width: 14px; height: 14px; }
.tz__card:hover .tz__btn, .tz__card:focus-within .tz__btn { opacity: 1; }
.tz__btn:hover { background: color-mix(in srgb, var(--cf-text) 12%, transparent); color: var(--cf-text); }
.tz__btn:focus-visible, .tz__act:focus-visible, .tz__clear:focus-visible { outline: 2px solid var(--al-blue); outline-offset: 1px; }
.tz__pin svg { transition: transform 0.18s ease; }
.tz__pin[aria-pressed="true"] { opacity: 1; color: var(--tz-accent); }
.tz__pin[aria-pressed="true"] svg { fill: currentColor; transform: rotate(-35deg); }

/* actions sit beside the text; with more than one they go on their own thin row */
.tz__actions { display: flex; gap: 0.3rem; }
.tz__card.has-row .tz__body .tz__actions { margin-top: 0.35rem; flex-wrap: wrap; }
.tz__act { height: 1.6rem; padding: 0 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: var(--cf-text); white-space: nowrap;
  background: color-mix(in srgb, var(--cf-text) 10%, transparent); transition: background-color 0.14s, transform 0.12s; }
.tz__act:hover { background: color-mix(in srgb, var(--cf-text) 18%, transparent); }
.tz__act:active { transform: scale(0.97); }
.tz__act.is-primary { background: var(--btn-ink, #141413); color: var(--btn-ink-text, #faf9f5); }
.tz__act.is-primary:hover { background: var(--btn-ink-hover, #30302e); }

/* time left, a thin line along the bottom edge (pauses while you hover) */
.tz__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.tz__timer i { display: block; width: 100%; height: 100%; background: var(--tz-accent); opacity: 0.9; transform-origin: left center; }
.tz__card.is-pinned .tz__timer { display: none; }
@keyframes tz-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (hover: none) { .tz__btn { opacity: 0.8; } }
@media (max-width: 640px) { .tz { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; width: auto; } }
@media (prefers-reduced-motion: reduce) {
  .tz__slot, .tz__slot.is-out { transform: none; transition: opacity 0.15s ease; }
  .tz__card.is-nudge { animation: none; }
  .tz__pin[aria-pressed="true"] svg { transform: none; }
}