/* ==================================================================
   TOASTS — for the layouts that do not load an icon font (landing, auth)

   partials.notify is shared by every layout and asks for Font Awesome and
   Line Awesome glyphs. The member area loads those fonts; the landing and
   sign-in pages do not, and should not for two marks. Without them the icon
   was an empty disc and the close button a missing-glyph box, set in a Lato
   that is not loaded either, with grey text at 2.5:1.

   The marks are drawn here with SVG masks, in the page's own type and ink.
   Reads --surface, --hairline, --ink, --t3, --brand, --brand-wash, --down,
   --sh-2 and --sans from the page stylesheet, which both layouts define.
   The script writes its colours inline, hence the !important.
   ================================================================== */
.iziToast {
    border: 1px solid var(--hairline); border-radius: 16px !important;
    background: var(--surface) !important; box-shadow: var(--sh-2) !important; font-family: var(--sans) !important;
}
.iziToast > .iziToast-body .iziToast-title {
    font-family: var(--sans) !important; font-size: .875rem !important; font-weight: 600 !important;
    line-height: 1.35 !important; color: var(--ink) !important;
}
.iziToast > .iziToast-body .iziToast-message {
    font-family: var(--sans) !important; font-size: .875rem !important; line-height: 1.45 !important; color: var(--t3) !important;
}
.iziToast-color-red {
    --toast-ink: var(--down); --toast-wash: rgba(192,80,60,.12);
    --toast-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.iziToast-color-green {
    --toast-ink: var(--brand); --toast-wash: var(--brand-wash);
    --toast-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}
.iziToast-color-orange {
    --toast-ink: #8A5A1E; --toast-wash: rgba(200,135,58,.16);
    --toast-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18.5v.01'/%3E%3C/svg%3E");
}
.iziToast-color-blue {
    --toast-ink: var(--brand); --toast-wash: var(--brand-wash);
    --toast-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 10v8M12 5.5v.01'/%3E%3C/svg%3E");
}
.iziToast > .iziToast-body .iziToast-icon {
    width: 38px !important; height: 38px !important; padding: 0 !important; flex-shrink: 0;
    border-radius: 50% !important; color: var(--toast-ink) !important; background: var(--toast-wash) !important;
}
.iziToast .iziToast-icon::before {
    content: ''; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--toast-mark) center / contain no-repeat; mask: var(--toast-mark) center / contain no-repeat;
}
.iziToast > .iziToast-progressbar > div { background: var(--toast-ink) !important; }
.iziToast > .iziToast-close { font-size: 0 !important; opacity: .5 !important; }
.iziToast > .iziToast-close:hover { opacity: 1 !important; }
.iziToast > .iziToast-close::before {
    content: '' !important; display: block; width: 12px; height: 12px; margin: auto; background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* below iziToast's own 568px breakpoint the toasts run edge to edge, and a
   rounded card would touch both sides of the screen */
@media (max-width: 567px) {
    .iziToast-wrapper { padding: 10px 12px !important; }
}

/* iziToast starts the title, message and icon at opacity 0 and fades them in
   with an animation; with motion turned off (every layout stops animations
   for prefers-reduced-motion) they would stay invisible in a visible toast */
@media (prefers-reduced-motion: reduce) {
    .iziToast-body * { opacity: 1 !important; }
}