/*!
 * ZIC toasts — solid, non-blocking, bottom-docked
 * ============================================================================
 * Layer 6 of the theme stack, sibling of `overlays.css`.
 *
 * WHAT THE SHELL ALREADY DOES (measured, not assumed)
 *
 *   - Pause on hover. Bootstrap's Toast class binds `mouseover` / `mouseout`
 *     to clear and restart its own hide timer, so a hovered toast already
 *     survives its delay. Nothing here reimplements that.
 *   - Close button. Every toast partial ships
 *     `<button class="btn-close" data-bs-dismiss="toast">`, and the close
 *     button is always rendered — it is never conditionally hidden.
 *   - Stacking order. `.toast-container` is a plain block, so toasts paint in
 *     DOM order; a bottom-anchored container therefore grows upward on its own.
 *   - Click-through. Bootstrap already sets `pointer-events: none` on
 *     `.toast-container` and `pointer-events: auto` on `.toast`. Both are
 *     restated below because the contract is load-bearing, not decorative.
 *
 * WHAT WAS BROKEN
 *
 *   1. **Toasts sat in the top-right corner.** All 38 page regions and the
 *      runtime host opened at `top-0 end-0`, directly over the navbar and the
 *      page action bars. They now dock bottom-right (`bottom-0 end-0`), and
 *      bottom-centre below 768px, so the chrome they used to cover is clear.
 *   2. **Toasts were translucent.** Stock `.toast` paints
 *      `rgba(var(--bs-paper-bg-rgb), .85)` and the ZIC layer had narrowed that
 *      to `color-mix(... 92%, transparent)`. Body content showed through the
 *      text. Every variant is now opaque.
 *   3. **Toasts had no tone.** A toast carried only a `.text-*` foreground on
 *      its body, so `text-success` on a white pill was the whole difference
 *      between success and failure — and `ol/setup` / `ol/quotations` hardcode
 *      `text-success`, painting failures green. `toasts.js` normalises the
 *      tone onto a `zic-toast--{tone}` class on `.toast` itself; each tone now
 *      gets its `--zic-status-*-fill` surface and its `-contrast` foreground.
 *   4. **The close glyph vanished on the new fills.** Bootstrap's `.btn-close`
 *      is a baked-in dark SVG. On a solid `-fill` (dark in light theme, light
 *      in dark theme) it disappeared. `--zic-toast-close-icon` is the
 *      per-theme counterpart, defined next to the palettes.
 *
 * GEOMETRY
 *
 *   - 24px safe margin on every edge (`padding`), plus the safe-area insets.
 *   - 12px between stacked toasts (`--bs-toast-spacing`).
 *   - `max-width: 380px`, capped to the viewport below 768px.
 *   - Bottom-anchored, so the stack grows upward and never reaches the navbar.
 *   - `toasts.js` lifts the stack clear of an open modal's footer, and only
 *     when the two would actually overlap. See `--zic-toast-lift`.
 */

/* ---------------------------------------------------------------------------
 * 1. The container — bottom-right, 24px safe margin, click-through.
 * ------------------------------------------------------------------------ */
.toast-container.position-fixed {
  /* Bootstrap's `p-3` utility carries `!important`; so does this. */
  padding: 24px !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  padding-right: calc(24px + env(safe-area-inset-right, 0px)) !important;
  padding-left: calc(24px + env(safe-area-inset-left, 0px)) !important;

  /* The contract: the container never swallows a click. Its padding is the
     24px safe margin, so the margin itself has to be click-through — a click
     24px from the corner must reach the page, not the toast host. */
  pointer-events: none;

  z-index: var(--zic-z-toast);

  /* `toasts.js` writes the modal clearance here; 0 when no modal is open. */
  bottom: var(--zic-toast-lift, 0px);
}

/* 12px between stacked toasts (Bootstrap default is 16px). */
.toast-container {
  --bs-toast-spacing: 12px;
}

@media (max-width: 767.98px) {
  /* Bottom-centre: the badge/tile under a phone-width toast is usually
     full-bleed, so a right-docked stack covers it. */
  .toast-container.position-fixed.bottom-0 {
    inset-inline-start: 0 !important;
    margin-inline: auto;
    max-width: calc(100vw - 24px);
  }

  .toast-container.position-fixed.bottom-0 > .toast {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * 2. The toast — opaque, 380px, tone-coloured.
 *
 * `--bs-toast-bg` is restated at component scope because `.toast` redeclares
 * its own `--bs-*` (see UI_THEME_GUIDE §2, defect 4). `background-color` is
 * then pinned to it so no later layer can reintroduce translucency.
 * ------------------------------------------------------------------------ */
.toast {
  --bs-toast-bg: var(--zic-surface-elevated);
  --bs-toast-header-bg: var(--zic-surface-elevated);
  --bs-toast-max-width: 380px;
  --bs-toast-color: var(--zic-text-primary);

  background-color: var(--bs-toast-bg);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  pointer-events: auto;

  /* Room for the progress rail along the bottom edge. */
  position: relative;
  overflow: hidden;
}

/* The close button is always offered and always legible. */
.toast .btn-close {
  --bs-btn-close-bg: var(--zic-toast-close-icon);
  opacity: 1;
  flex-shrink: 0;
}

.toast .btn-close:focus-visible {
  box-shadow: 0 0 0 var(--zic-focus-ring-width)
    color-mix(in srgb, currentColor 40%, transparent);
}

/* ---------------------------------------------------------------------------
 * 3. Tones — solid surface per severity.
 *
 * `toasts.js` reads the tone from the legacy `.text-*` class inside the toast
 * and stamps `zic-toast--{tone}` here. The inner `.text-*` utilities are
 * neutralised because they carry `!important` from `materio-overrides.css`
 * and would otherwise paint the decorative hue on the fill.
 * ------------------------------------------------------------------------ */
.zic-toast--success {
  --bs-toast-bg: var(--zic-status-success-fill);
  --bs-toast-color: var(--zic-status-success-contrast);
}

.zic-toast--danger {
  --bs-toast-bg: var(--zic-status-danger-fill);
  --bs-toast-color: var(--zic-status-danger-contrast);
}

.zic-toast--warning {
  --bs-toast-bg: var(--zic-status-warning-fill);
  --bs-toast-color: var(--zic-status-warning-contrast);
}

.zic-toast--info {
  --bs-toast-bg: var(--zic-status-info-fill);
  --bs-toast-color: var(--zic-status-info-contrast);
}

.zic-toast--neutral {
  --bs-toast-bg: var(--zic-status-neutral-fill);
  --bs-toast-color: var(--zic-status-neutral-contrast);
}

[class*='zic-toast--'] .toast-body,
[class*='zic-toast--'] .toast-body strong,
[class*='zic-toast--'] .toast-body a,
[class*='zic-toast--'] .icon-base,
[class*='zic-toast--'] .text-success,
[class*='zic-toast--'] .text-danger,
[class*='zic-toast--'] .text-warning,
[class*='zic-toast--'] .text-primary,
[class*='zic-toast--'] .text-body,
[class*='zic-toast--'] .text-muted {
  color: var(--bs-toast-color) !important;
}

/* A CTA inside a solid toast (`_success_toast.html`) needs its own contrast. */
[class*='zic-toast--'] .toast-body .btn {
  --bs-btn-color: var(--bs-toast-color);
  --bs-btn-border-color: currentColor;
  --bs-btn-hover-color: var(--bs-toast-color);
  --bs-btn-hover-border-color: currentColor;
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
 * 4. Auto-dismiss progress rail.
 *
 * `toasts.js` injects `.zic-toast-progress` and sets `--zic-toast-duration`
 * from the live Bootstrap delay. Paused on hover — the same `mouseover` that
 * stops Bootstrap's hide timer — so the rail and the dismissal never disagree.
 * ------------------------------------------------------------------------ */
.zic-toast-progress {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: currentColor;
  opacity: 0.55;
  transform-origin: left center;
  animation: zic-toast-countdown var(--zic-toast-duration, 4000ms) linear forwards;
}

html[dir='rtl'] .zic-toast-progress {
  transform-origin: right center;
}

.toast:hover .zic-toast-progress,
.toast:focus-within .zic-toast-progress {
  animation-play-state: paused;
}

@keyframes zic-toast-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Motion-sensitive users get the static fill and Bootstrap's plain timer. */
@media (prefers-reduced-motion: reduce) {
  .zic-toast-progress {
    animation: none;
    transform: scaleX(1);
  }
}