/* Ten selectable skins share severity colors and accessible, dismissible content. */
.vex-toast-region { position:fixed; inset:auto 22px 22px auto; z-index:2147483646; width:min(390px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; display:flex; flex-direction:column; gap:12px; margin:0; padding:5px; border:0; background:transparent; color:#ffffff; pointer-events:none; }
.vex-toast-region[hidden],.vex-toast-region[popover]:not(:popover-open) { display:none; }
.vex-toast-region::backdrop { background:transparent; pointer-events:none; }
.vex-toast { --toast-accent:#fffdf8; --toast-tint:rgba(255,253,248,0.141); position:relative; isolation:isolate; display:grid; grid-template-columns:36px minmax(0,1fr) 26px; gap:12px; align-items:start; padding:18px 14px; overflow:hidden; border:1px solid #ffffff20; border-radius:14px; background:#1b1416; box-shadow:0 12px 36px #0007; pointer-events:auto; text-align:start; font-family:var(--font-body,Segoe UI,sans-serif); animation:toast-arrive .28s ease-out; }
.vex-toast[data-severity=success] { --toast-accent:#79daa6; --toast-tint:rgba(121,218,166,0.141); }
.vex-toast[data-severity=error] { --toast-accent:#ff748f; --toast-tint:rgba(255,116,143,0.141); }
.vex-toast[data-severity=warning] { --toast-accent:#ffc0b9; --toast-tint:rgba(255,192,185,0.141); }
.vex-toast-symbol { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:var(--toast-accent); background:var(--toast-tint); font:bold 20px/1 system-ui; }
.vex-toast-symbol::before { content:'i'; }
[data-severity=success] .vex-toast-symbol::before { content:'✓'; }
[data-severity=error] .vex-toast-symbol::before { content:'!'; }
[data-severity=warning] .vex-toast-symbol::before { content:'!'; }
.vex-toast-copy { min-width:0; }
.vex-toast-copy strong { display:block; margin:0 0 5px; color:var(--toast-accent); font-size:13px; font-weight:800; letter-spacing:.02em; line-height:1.35; }
.vex-toast-copy p { margin:0; color:#feeaed; font-size:13px; line-height:1.6; overflow-wrap:anywhere; white-space:pre-line; }
.vex-toast-close { display:grid; place-items:center; width:26px; height:26px; border:0; border-radius:6px; background:transparent; color:#fad0d6; font:22px/1 system-ui; cursor:pointer; }
.vex-toast-close:hover { background:#ffffff16; color:white; }
.vex-toast-close:focus-visible { outline:2px solid var(--toast-accent); outline-offset:2px; }
.vex-toast-rail { position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--toast-accent),transparent); opacity:.75; pointer-events:none; }
/* GLASS — translucent surface, frosted edge. */
[data-alert-type=glass] .vex-toast { background:rgba(35,26,29,0.871); backdrop-filter:blur(22px); border-color:#ffffff30; box-shadow:inset 0 1px #ffffff22,0 16px 40px #0006; }
[data-alert-type=glass] .vex-toast-symbol { border:1px solid #ffffff24; border-radius:50%; }
/* EDGE — a clear vertical stripe and compact squared corners. */
[data-alert-type=edge] .vex-toast { border:0; border-inline-start:4px solid var(--toast-accent); border-radius:5px; background:#1d1c17; }
[data-alert-type=edge] .vex-toast-symbol { background:transparent; }
[data-alert-type=edge] .vex-toast-rail { display:none; }
/* PRISM — an asymmetric card with a faceted light wash. Default selection. */
[data-alert-type=prism] .vex-toast { border-radius:18px 5px 18px 5px; border-color:rgba(255,218,221,0.231); background:linear-gradient(130deg,#302628,#1b1215 72%); }
[data-alert-type=prism] .vex-toast::before { content:''; position:absolute; z-index:-1; right:-24px; top:-48px; width:100px; height:180px; background:linear-gradient(var(--toast-tint),transparent); transform:rotate(35deg); }
[data-alert-type=prism] .vex-toast-symbol { border-radius:10px 3px; box-shadow:inset 0 0 0 1px var(--toast-tint); }
/* SLATE — a separated icon column with a solid neutral surface. */
[data-alert-type=slate] .vex-toast { gap:16px; border-radius:8px; background:#242122; box-shadow:0 8px 20px #0005; }
[data-alert-type=slate] .vex-toast-symbol { height:100%; min-height:44px; border-radius:0; border-inline-end:1px solid #ffffff25; background:none; padding-inline-end:12px; }
[data-alert-type=slate] .vex-toast-rail { height:1px; background:#ffffff26; }
/* PILL — a round badge and a flowing capsule silhouette. */
[data-alert-type=pill] .vex-toast { border-radius:30px; padding:18px; align-items:center; background:#1f1c17; }
[data-alert-type=pill] .vex-toast-symbol { border-radius:50%; border:1px solid var(--toast-accent); }
[data-alert-type=pill] .vex-toast-rail { display:none; }
/* BANNER — message below a full-width tinted title band. */
[data-alert-type=banner] .vex-toast { padding:0 14px 16px; border-radius:9px; background:#20171a; gap:10px; }
[data-alert-type=banner] .vex-toast-copy { display:contents; }
[data-alert-type=banner] .vex-toast-copy strong { grid-column:2; grid-row:1; margin:0; padding:14px 0; }
[data-alert-type=banner] .vex-toast-copy p { grid-column:1 / -1; }
[data-alert-type=banner] .vex-toast-symbol { grid-row:1; align-self:center; width:28px; height:28px; border-radius:6px; }
[data-alert-type=banner] .vex-toast-close { grid-column:3; grid-row:1; align-self:center; }
[data-alert-type=banner] .vex-toast::before { content:''; position:absolute; inset:0 0 auto; height:46px; background:var(--toast-tint); z-index:-1; }
/* NEON — dark surface with a restrained luminous outline. */
[data-alert-type=neon] .vex-toast { background:#0e080a; border-color:var(--toast-accent); border-radius:10px; box-shadow:inset 0 0 16px var(--toast-tint),0 0 12px var(--toast-tint); }
[data-alert-type=neon] .vex-toast-symbol { background:none; text-shadow:0 0 10px var(--toast-accent); }
/* SOFT — light card with high contrast text and a muted colored badge. */
[data-alert-type=soft] .vex-toast { background:#cac0c3; border:0; border-radius:18px; --toast-tint:#fefde8; }
[data-alert-type=soft] .vex-toast-copy strong { color:#45202b; }
[data-alert-type=soft] .vex-toast-copy p { color:#462831; }
[data-alert-type=soft] .vex-toast-close { color:#d4c178; }
[data-alert-type=soft] .vex-toast-symbol { color:#411e29; border-radius:14px; }
[data-alert-type=soft] [data-severity=error] .vex-toast-symbol { background:#fff6f3; }
[data-alert-type=soft] [data-severity=success] .vex-toast-symbol { background:#fff5d5; }
[data-alert-type=soft] [data-severity=warning] .vex-toast-symbol { background:#ffe9d9; }
/* MONO — editorial typography, fine rules, square silhouette. */
[data-alert-type=mono] .vex-toast { border-radius:0; background:#131313; border:1px solid #573e45; grid-template-columns:24px minmax(0,1fr) 26px; }
[data-alert-type=mono] .vex-toast-copy strong { font-family:Consolas,monospace; text-transform:uppercase; letter-spacing:.08em; font-size:12px; }
[data-alert-type=mono] .vex-toast-symbol { width:24px; background:none; border-radius:0; }
/* ORBIT — raised circular medallion, curved inset surface. */
[data-alert-type=orbit] .vex-toast { border-radius:20px; padding:22px 14px; background:radial-gradient(circle at 25px 38px,var(--toast-tint),transparent 110px),#20171a; grid-template-columns:44px minmax(0,1fr) 26px; }
[data-alert-type=orbit] .vex-toast-symbol { width:40px; height:40px; border:1px solid var(--toast-accent); border-radius:50%; box-shadow:0 0 0 4px var(--toast-tint); background:#281319; }
[data-alert-type=orbit] .vex-toast-rail { right:25%; left:25%; background:var(--toast-accent); }
@keyframes toast-arrive { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
/* One countdown rule covers every skin and severity, including errors and warnings. */
.vex-toast-region[data-alert-type] .vex-toast-rail { display:block; inset:auto 0 0; width:100%; height:3px; background:var(--toast-accent); opacity:.9; transform-origin:left center; }
.vex-toast-timed .vex-toast-rail { animation:toast-countdown 8s linear forwards; }
.vex-toast-paused .vex-toast-rail { animation-play-state:paused; }
@keyframes toast-countdown { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@media(max-width:600px) { .vex-toast-region { right:10px; bottom:max(10px,env(safe-area-inset-bottom)); width:calc(100vw - 20px); } }
@media(prefers-reduced-motion:reduce) { .vex-toast { animation:none; } }

/* v107 event reminders share the selected theme's warning and panel colors. */
.event-alerts{position:fixed;z-index:1200;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(580px,calc(100% - 32px));display:grid;gap:10px;max-height:35vh;overflow:auto;pointer-events:none}
.event-start-alert{display:flex;align-items:center;gap:18px;padding:16px 18px;border:1px solid var(--warning);border-radius:14px;background:var(--panel);box-shadow:0 12px 38px rgba(0,0,0,.35);color:var(--warning);pointer-events:auto}
.event-start-alert p{flex:1;margin:0;font-size:14px;line-height:1.6;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.event-start-alert button{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-size:24px;cursor:pointer}
.event-start-alert button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.event-alerts{bottom:max(16px,env(safe-area-inset-bottom))}.event-start-alert{padding:12px;gap:10px}.event-start-alert p{font-size:13px}}