/* ============================================================
   toast.css — Editorial notification toasts
   Vocabulary: cream/ink surface, sharp corners, 3px left
   semantic rule, Geist type. Matches the adm-/ins-/ov- system.
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
#toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

/* ── Base toast ──────────────────────────────────────────── */
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 300px;
    max-width: 380px;
    padding: 14px 14px 0 14px;
    background: var(--ed-cream, #f5efe1);
    border: 1px solid rgba(14, 29, 61, 0.14);
    border-left-width: 3px;
    border-left-color: var(--ed-hot, #2563eb);
    position: relative;
    overflow: hidden;
    box-shadow:
        4px 4px 0 rgba(14, 29, 61, 0.08),
        0 8px 24px -8px rgba(14, 29, 61, 0.16);

    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
    transition:
        transform 0.42s cubic-bezier(0.34, 1.28, 0.64, 1),
        opacity 0.3s ease;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.hide {
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 1, 1),
        opacity 0.25s ease;
}

/* ── Semantic left border + offset shadow ────────────────── */
.toast-success { border-left-color: #16a34a; box-shadow: 4px 4px 0 rgba(22,163,74,.18),   0 8px 24px -8px rgba(14,29,61,.16); }
.toast-error   { border-left-color: #b4393b; box-shadow: 4px 4px 0 rgba(180,57,59,.18),   0 8px 24px -8px rgba(14,29,61,.16); }
.toast-warning { border-left-color: #d97706; box-shadow: 4px 4px 0 rgba(217,119,6,.18),   0 8px 24px -8px rgba(14,29,61,.16); }
.toast-info    { border-left-color: #2563eb; box-shadow: 4px 4px 0 rgba(37,99,235,.18),   0 8px 24px -8px rgba(14,29,61,.16); }

/* ── Icon — square container ─────────────────────────────── */
.toast-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-success .toast-icon { background: rgba(22,163,74,.10);  color: #16a34a; }
.toast-error   .toast-icon { background: rgba(180,57,59,.10);  color: #b4393b; }
.toast-warning .toast-icon { background: rgba(217,119,6,.10);  color: #d97706; }
.toast-info    .toast-icon { background: rgba(37,99,235,.10);  color: #2563eb; }

/* ── Body ────────────────────────────────────────────────── */
.toast-body {
    flex: 1;
    padding-bottom: 14px;
}

.toast-title {
    font-family: var(--ed-mono, "Geist Mono", ui-monospace, monospace);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ed-ink, #0e1d3d);
    margin-bottom: 3px;
}

.toast-message {
    font-family: var(--ed-sans, "Geist", ui-sans-serif, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.45;
    color: var(--ed-ink, #0e1d3d);
    opacity: .82;
}

/* ── Close button ────────────────────────────────────────── */
.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ed-ink, #0e1d3d);
    opacity: .4;
    padding: 0;
    margin-top: 2px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease, background .15s ease;
}
.toast-close:hover {
    opacity: 1;
    background: rgba(14, 29, 61, .08);
}

/* ── Progress bar ────────────────────────────────────────── */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    animation: shrink linear forwards;
}

.toast-success .toast-progress { background: #16a34a; }
.toast-error   .toast-progress { background: #b4393b; }
.toast-warning .toast-progress { background: #d97706; }
.toast-info    .toast-progress { background: #2563eb; }

@keyframes shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── Dark mode ───────────────────────────────────────────── */
.dark .toast {
    background: #15264a;
    border-color: rgba(245, 239, 225, .14);
    border-left-color: var(--ed-hot-light, #60a5fa);
    box-shadow: 4px 4px 0 rgba(0,0,0,.28), 0 8px 24px -8px rgba(0,0,0,.4);
}

.dark .toast-success { border-left-color: #6bba8a; box-shadow: 4px 4px 0 rgba(107,186,138,.22), 0 8px 24px -8px rgba(0,0,0,.4); }
.dark .toast-error   { border-left-color: #e0696b; box-shadow: 4px 4px 0 rgba(224,105,107,.22), 0 8px 24px -8px rgba(0,0,0,.4); }
.dark .toast-warning { border-left-color: #e0a648; box-shadow: 4px 4px 0 rgba(224,166,72,.22),  0 8px 24px -8px rgba(0,0,0,.4); }
.dark .toast-info    { border-left-color: #60a5fa; box-shadow: 4px 4px 0 rgba(96,165,250,.22),  0 8px 24px -8px rgba(0,0,0,.4); }

.dark .toast-success .toast-icon { background: rgba(107,186,138,.14); color: #6bba8a; }
.dark .toast-error   .toast-icon { background: rgba(224,105,107,.14); color: #e0696b; }
.dark .toast-warning .toast-icon { background: rgba(224,166,72,.14);  color: #e0a648; }
.dark .toast-info    .toast-icon { background: rgba(96,165,250,.14);  color: #60a5fa; }

.dark .toast-title   { color: var(--ed-cream, #f5efe1); }
.dark .toast-message { color: var(--ed-cream, #f5efe1); opacity: .76; }
.dark .toast-close   { color: var(--ed-cream, #f5efe1); }
.dark .toast-close:hover { background: rgba(245, 239, 225, .10); }

.dark .toast-success .toast-progress { background: #6bba8a; }
.dark .toast-error   .toast-progress { background: #e0696b; }
.dark .toast-warning .toast-progress { background: #e0a648; }
.dark .toast-info    .toast-progress { background: #60a5fa; }