/* =====================================================================
   ALERTS (Nov 2026): one premium look for every message on the site.
   Four types, each with its own colour AND icon (never colour alone):
     success = green · error = red · warn = amber · info = blue
   Covers the pop-up toast (#toast) and the inline boxes used across the site:
   .ow-alert, .obx-note, .bm-alert, .adm-flash, .al-msg, .ip-notice (+ .wb-alert for new code).
   ===================================================================== */
:root{
  --al-ok:#15803d;--al-ok-bg:#f0fdf4;--al-ok-bd:#bbf7d0;--al-ok-tx:#14532d;
  --al-err:#dc2626;--al-err-bg:#fef2f2;--al-err-bd:#fecaca;--al-err-tx:#7f1d1d;
  --al-warn:#d97706;--al-warn-bg:#fffbeb;--al-warn-bd:#fde68a;--al-warn-tx:#78350f;
  --al-info:#2563eb;--al-info-bg:#eff6ff;--al-info-bd:#bfdbfe;--al-info-tx:#1e3a8a;
}

/* ---------- pop-up toast ---------- */
#toast.toast{--c:var(--al-ok);--bg:#fff;position:fixed;z-index:2147483000;left:50%;right:auto;top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:flex;align-items:flex-start;gap:12px;width:min(440px,calc(100vw - 24px));box-sizing:border-box;padding:14px 12px 16px 14px;border-radius:16px;overflow:hidden;
  background:var(--bg);color:#111827;border:1px solid color-mix(in srgb,var(--c) 22%,#e5e7eb);
  box-shadow:0 22px 50px -18px rgba(15,23,42,.45),0 2px 6px rgba(15,23,42,.08);font:500 14px/1.45 Inter,system-ui,sans-serif;text-align:left}
#toast.toast:not([hidden]){animation:al-in .32s cubic-bezier(.2,.9,.3,1.2) both}
#toast.toast[hidden]{display:none!important}
#toast.t-success{--c:var(--al-ok)}#toast.t-error{--c:var(--al-err)}#toast.t-warn{--c:var(--al-warn)}#toast.t-info{--c:var(--al-info)}
#toast .ti,#toast .ti.err{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--c);font-size:17px;
  box-shadow:0 8px 16px -8px var(--c)}
#toast .ti svg{width:17px!important;height:17px}
#toast .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:1px}
#toast .tt b{font-weight:700;font-size:14.5px;color:var(--c);letter-spacing:-.005em}
#toast.t-warn .tt b{color:#b45309}
#toast #toastMsg{color:#374151;overflow-wrap:anywhere}
#toast .tx{flex:none;width:32px;height:32px;margin:-4px -2px 0 0;border:0;border-radius:10px;background:transparent;color:#6b7280;font-size:22px;line-height:1;cursor:pointer}
#toast .tx:hover{background:#f3f4f6;color:#111827}
#toast .tx:focus-visible{outline:2px solid var(--c);outline-offset:1px}
#toast .tbar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);opacity:.85;transform-origin:left;transform:scaleX(0)}
#toast.run .tbar{animation:al-bar var(--ms,3800ms) linear forwards}
#toast:hover .tbar{animation-play-state:paused}
@keyframes al-in{from{opacity:0;transform:translate(-50%,14px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes al-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (min-width:900px){#toast.toast{left:auto;right:24px;top:84px;bottom:auto;transform:none}
  @keyframes al-in-d{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
  #toast.toast:not([hidden]){animation-name:al-in-d}}
@media (max-width:899px){body:has(.bnav) #toast.toast,body.pn #toast.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}}
@media (prefers-reduced-motion:reduce){#toast.toast:not([hidden]){animation:none}#toast.run .tbar{animation:none;transform:scaleX(0)}}

/* ---------- inline boxes: shared shape ---------- */
.ow-alert,.obx-note,.bm-alert,.adm-flash,.al-msg,.ip-notice,.wb-alert{
  --c:var(--al-info);--bg:var(--al-info-bg);--bd:var(--al-info-bd);--tx:var(--al-info-tx);
  position:relative;display:flex!important;align-items:flex-start;gap:12px;padding:13px 16px 13px 14px!important;border-radius:14px!important;
  background:linear-gradient(180deg,#fff,var(--bg)) !important;border:1px solid var(--bd)!important;color:var(--tx)!important;
  box-shadow:0 8px 22px -16px color-mix(in srgb,var(--c) 70%,transparent);font-size:14px;line-height:1.5;text-align:left}
.ow-alert > svg:first-child,.obx-note > svg:first-child,.bm-alert > svg:first-child,.adm-flash > svg:first-child,.al-msg > svg:first-child,.wb-alert > svg:first-child,
.ow-alert > i:first-child,.obx-note > i:first-child,.bm-alert > i:first-child,.adm-flash > i:first-child,.al-msg > i:first-child,.wb-alert > i:first-child{
  flex:none;width:30px!important;height:30px!important;padding:7px;box-sizing:border-box;margin:-3px 0 0!important;border-radius:10px;background:var(--c);color:#fff!important;
  box-shadow:0 6px 12px -6px var(--c)}
.ow-alert b,.obx-note b,.bm-alert b,.adm-flash b,.al-msg b,.ip-notice b,.wb-alert b{color:var(--tx)}
.ow-alert a,.obx-note a,.bm-alert a,.adm-flash a,.al-msg a,.ip-notice a,.wb-alert a{color:var(--c);font-weight:700}

/* types */
.ow-alert.ok,.adm-flash.ok,.al-msg.ok,.obx-note.ok,.wb-alert.ok{--c:var(--al-ok);--bg:var(--al-ok-bg);--bd:var(--al-ok-bd);--tx:var(--al-ok-tx)}
.ow-alert.err,.adm-flash.err,.al-msg.err,.obx-note.err,.bm-alert,.wb-alert.err{--c:var(--al-err);--bg:var(--al-err-bg);--bd:var(--al-err-bd);--tx:var(--al-err-tx)}
.ow-alert.warn,.adm-flash.warn,.obx-note.warn,.al-msg.dev,.wb-alert.warn{--c:var(--al-warn);--bg:var(--al-warn-bg);--bd:var(--al-warn-bd);--tx:var(--al-warn-tx)}
.ow-alert.info,.adm-flash.info,.al-msg.info,.ip-notice,.wb-alert.info{--c:var(--al-info);--bg:var(--al-info-bg);--bd:var(--al-info-bd);--tx:var(--al-info-tx)}
.ip-notice{display:block!important;padding-left:16px!important}
/* errors get a red edge so they read first */
.ow-alert.err,.adm-flash.err,.al-msg.err,.obx-note.err,.bm-alert,.wb-alert.err{box-shadow:inset 3px 0 0 var(--c),0 8px 22px -16px color-mix(in srgb,var(--c) 70%,transparent)}

@media (forced-colors:active){#toast.toast,.ow-alert,.obx-note,.bm-alert,.adm-flash,.al-msg,.ip-notice,.wb-alert{border:2px solid CanvasText!important}}