/* =============================================================================
   FYSH — Biscuit notification library
   CR: fysh-biscuit-2026-09-26
   A single branded, CSP-safe system for every inform-only alert and
   confirmation. Biscuits emerge top right (clear of the header), colour coded
   by type, with a base progress line synced to their TTL, then park into the
   right margin leaving a clickable edge tab. Behaviour is driven by biscuit.js.
============================================================================= */

.biscuit-stack {
    position: fixed;
    top: 84px;                 /* clear of the sticky header + navbar */
    right: 0;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: min(360px, calc(100vw - 16px));
    padding: 0;
    pointer-events: none;      /* only the cards themselves are interactive */
}

.biscuit {
    --_c: #1E5BA8;             /* accent, overridden per type */
    --_tint: #EAF1FA;
    --_ttl: 5000ms;
    pointer-events: auto;
    position: relative;
    box-sizing: border-box;
    width: 340px;
    max-width: calc(100vw - 16px);
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-left: 5px solid var(--_c);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(15, 35, 64, 0.16), 0 2px 6px rgba(15, 35, 64, 0.08);
    padding: 12px 40px 14px 14px;
    overflow: hidden;
    font-family: var(--font-body, 'Maven Pro', system-ui, sans-serif);
    /* Draw-emerge default: parked off to the right, revealed by .is-in */
    transform: translateX(115%);
    opacity: 0;
    transition:
        transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.36s ease,
        margin 0.4s ease;
    will-change: transform, opacity;
}

/* Emerged / active */
.biscuit.is-in { transform: translateX(0); opacity: 1; }

/* Parked: slid back into the margin, colour edge tab left visible + clickable */
.biscuit.is-parked {
    transform: translateX(calc(100% - 16px));
    opacity: 1;
    cursor: pointer;
    box-shadow: -2px 6px 18px rgba(15, 35, 64, 0.14);
}
.biscuit.is-parked .biscuit__body,
.biscuit.is-parked .biscuit__close { opacity: 0; }

/* Leaving: fully out, then removed by JS */
.biscuit.is-out { transform: translateX(120%); opacity: 0; }

.biscuit__body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: opacity 0.2s ease;
}

.biscuit__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--_tint);
    color: var(--_c);
    margin-top: 1px;
}
.biscuit__icon svg { width: 16px; height: 16px; }

.biscuit__text { min-width: 0; }
.biscuit__title {
    font-family: var(--font-display, 'Nunito', system-ui, sans-serif);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.3;
    color: #0F2340;
    margin: 0 0 2px;
}
.biscuit__msg {
    font-size: 12.5px;
    line-height: 1.45;
    color: #4B5563;
    margin: 0;
    word-wrap: break-word;
}

.biscuit__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9AA7B5;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 16px;
    transition: background-color 0.15s, color 0.15s, opacity 0.2s;
}
.biscuit__close:hover { background: #EEF2F8; color: #0F2340; }
.biscuit__close:focus-visible { outline: 2px solid var(--_c); outline-offset: 1px; }

/* Base progress line, width driven to 0 over the TTL by biscuit.js */
.biscuit__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--_c);
    opacity: 0.85;
    border-bottom-left-radius: 4px;
}

/* ── Type colours ─────────────────────────────────────────────────────────
   Status set accepted with the project palette: success green, error red,
   warning gold, info blue. */
.biscuit--success { --_c: #2E7D5B; --_tint: #E7F3EC; }
.biscuit--error   { --_c: #C0392B; --_tint: #FBEAE8; }
.biscuit--warning { --_c: #C9A84C; --_tint: #FbF3DE; }
.biscuit--info    { --_c: #1E5BA8; --_tint: #EAF1FA; }

/* ── Confirmation biscuit (Cancel / OK) ───────────────────────────────────
   A persistent biscuit that waits for a choice, used in place of the native
   browser confirm. No TTL bar; action buttons replace auto dismiss. */
.biscuit--confirm {
    --_c: #1E5BA8;
    --_tint: #EAF1FA;
    padding-right: 14px;        /* no close button here, reclaim the space */
}
.biscuit__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.biscuit__btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 7px 14px;
    font-family: var(--font-body, 'Maven Pro', system-ui, sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.biscuit__btn--ok { background: var(--_c); color: #FFFFFF; }
.biscuit__btn--ok:hover { background: #17487F; }
.biscuit__btn--cancel { background: #FFFFFF; border-color: #D5DEE8; color: #41506A; }
.biscuit__btn--cancel:hover { background: #EEF2F8; color: #0F2340; }
.biscuit__btn:focus-visible { outline: 2px solid var(--_c); outline-offset: 1px; }

/* Mobile: sit a touch higher and hug the edge */
@media (max-width: 639px) {
    .biscuit-stack { top: 70px; width: calc(100vw - 12px); }
    .biscuit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .biscuit { transition: opacity 0.2s ease; transform: none; }
    .biscuit.is-in { transform: none; }
    .biscuit.is-parked { transform: translateX(calc(100% - 16px)); }
    .biscuit.is-out { transform: none; opacity: 0; }
}