/* ==================================================================
   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; }
}