/* ============================================================================
   vth-toast — the brief, non-blocking confirmation bar, floating bottom-centre.

   THESE RULES ARE ALSO IN vth-reports.css, AND THAT IS DELIBERATE FOR NOW.
   VthToastService renders `.vth-toast`, and its own docblock says only pages that
   link vth-reports.css can show one. The course-detail page does not link it — it is
   a large, reports-specific stylesheet and pulling all of it in to get one component
   would be the wrong trade. The rules below are copied verbatim, so the two
   definitions cannot disagree while they exist.

   The two files never load together: reports-v2 / learner-v2 / certificates link
   vth-reports.css, the two course-detail views link this one. The tidy end state is
   for vth-reports.css to link this component instead of defining it, which touches
   seven live pages and belongs in its own change.

   components/vth-loading.css already carries `.vth .vth-toast` overrides (the
   translucent dark surface and the CTA restyling) and is loaded here, so it had a
   component to extend that was never defined on this page.
   ============================================================================ */
.vth-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--text-primary);color:#fff;padding:13px 22px;border-radius:var(--radius-md);font-size:var(--type-size-xs);font-weight:var(--weight-semibold);display:flex;align-items:center;gap:9px;z-index:1100;box-shadow:var(--shadow-lg);animation:vth-toast-in .28s ease;}
@keyframes vth-toast-in{from{opacity:0;transform:translateX(-50%) translateY(8px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
/* Leaving state, driven by VthToastService — the component only had an entrance.
   `forwards` holds the end frame so it cannot flash back to full opacity in the gap
   before the node is removed. Keep .2s in step with OUT_MS in the service. */
.vth-toast--out{animation:vth-toast-out .2s ease forwards;}
@keyframes vth-toast-out{from{opacity:1;transform:translateX(-50%) translateY(0);}to{opacity:0;transform:translateX(-50%) translateY(8px);}}
/* The component is a flex row with a gap, i.e. it always expected an icon; nothing
   sized one. Also make it clickable-to-dismiss and keep a long message on one line
   until it genuinely cannot fit. */
.vth-toast{cursor:pointer;max-width:min(560px,calc(100vw - 32px));}
.vth-toast svg{display:block;flex-shrink:0;}