/* bl-toast.css - the one toast (coordinator, 22 Oct 2026): every short confirmation on the site looks and sits the same.
   Used by the tool shell (#smrToast, .toast: window.smrToast), Notes' undo (.ntoast), the account page (.acd-toast,
   bl-account.js) and Study friends (.sf-toast, bl-friends.js); linked from includes/tools/_shell.php,
   includes/account.php and includes/learn/friends-panel.php. Code lessons keep their own.
   - bottom-centre over the content, inside the safe area, 12 px above any bottom bar on the page (the app's tab bar,
     a lesson's action bar, a trainer's dock), so it never covers a primary action
   - the cards' corner (--r1), never a pill; an action in it is a 44 px target
   - it comes in with a short rise; with reduced motion it only fades */
:root{--toast-gap:12px;--toast-above:0px}
html.bl-app body:has(.bl-tabs){--toast-above:57px}          /* the app's tab bar */
body:has(.lp-foot){--toast-above:86px}                       /* a lesson's or a question's action bar */
body:has(.mtr-fbar){--toast-above:78px}                      /* a trainer's dock */
.toast,.ntoast,.acd-toast,.sf-toast{
  position:fixed;z-index:120;left:50%;right:auto;top:auto;inset-inline-end:auto;
  bottom:calc(var(--toast-above) + var(--toast-gap) + env(safe-area-inset-bottom,0px));
  width:max-content;max-width:min(560px,calc(100% - 32px));margin:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:10px 18px;
  border-radius:var(--r1,14px);background:var(--navy,#15365a);color:#fff;
  font:600 15px/1.4 var(--f-body,inherit);text-align:center;box-shadow:0 10px 30px rgba(8,17,32,.25);
  opacity:0;transform:translate(-50%,8px);pointer-events:none;
  transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}
:root[data-theme="dark"] :is(.toast,.ntoast,.acd-toast,.sf-toast){background:#1d3a5c;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.toast,.ntoast,.acd-toast,.sf-toast){background:#1d3a5c;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.45)}}
.toast.show,.acd-toast.show,.sf-toast.on,.ntoast{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast:empty{display:none}
/* an action inside (Notes' Undo): a 44 px target, teal on navy */
:is(.toast,.ntoast,.acd-toast,.sf-toast) button{min-height:44px;min-width:44px;margin:-8px -10px -8px 0;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#7ad7de;font:700 15px/1 var(--f-body,inherit);cursor:pointer}
:is(.toast,.ntoast,.acd-toast,.sf-toast) button:focus-visible{outline:3px solid #7ad7de;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .toast,.ntoast,.acd-toast,.sf-toast{transform:translate(-50%,0);transition:opacity .2s linear}
}
:root[data-theme="dark"] :is(.toast,.ntoast,.acd-toast,.sf-toast) button{color:#7ad7de}   /* (over brainlag.css's older dark .ntoast button rule) */