/* ══════════════════════════════════════════════════════════════════════════════════
   PAGY BUILDER TOASTS
   PORT of `_reference/TC Visuals/Documentation/toast-module/src/toast.css`.
   Mechanical rename (perl, same list as toast.js + bare `.toast` → `.pb-toast`):
     toast-message→pb-toast-text; toast-action-btn→pb-toast-action; toast-hide→pb-toast-exit;
     toast-show→pb-toast-show; --toast-→--pb-toast-; (?<![\w-])toast(-?)→pb-toast$1.
   Every intentional edit carries `[builder-divergence CSS]`: the :root bridge block
   (host tokens → builder tokens.css), body substitutions (--ref-radius-*→--pb-radius-*,
   --type-*→--pb-font-*, weight vars→literals, --dur-flow/--ease-out→`0.2s ease`, focus
   ring→--pb-shadow-ring, --accent→--pb-accent, --border-medium→--pb-border,
   --elev-sm→--pb-shadow-dropdown, --ease-in-out/--dur-instant→literals), and dropping the
   --bottomnav-height mobile offset. The `:empty::before` glyph rules are load-bearing
   (divergence 1 in toast.js removed the Font Awesome icon child).
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* [builder-divergence CSS] host bridge block — the designed re-skin point.
   Maps the engine's --pb-toast-* tokens onto builder tokens.css values. */
:root {
  --pb-toast-surface: var(--pb-surface);
  --pb-toast-surface-hover: var(--pb-surface-hover);
  --pb-toast-text: var(--pb-text);
  --pb-toast-heading: var(--pb-text-bright);
  --pb-toast-muted: var(--pb-text-dim);
  --pb-toast-border: var(--pb-border);
  --pb-toast-border-subtle: var(--pb-border);
  --pb-toast-shadow: var(--pb-shadow-dropdown);
  --pb-toast-success: var(--pb-success);
  --pb-toast-error: var(--pb-danger);
  --pb-toast-warning: var(--pb-warning);
  --pb-toast-info: var(--pb-accent);   /* no --pb-info token exists */
  --pb-toast-loading: var(--pb-accent);
  --pb-toast-progress-track: rgba(128, 128, 128, 0.18);                                /* fallback first */
  --pb-toast-progress-track: color-mix(in srgb, var(--pb-toast-muted) 18%, transparent);
  --pb-toast-z: var(--pb-z-toast);
}

/* The host ignores pointer input; only its cards opt back in. Safe-area
   offsets keep the stack clear of rounded display corners and home indicators. */
.pb-toast-container {
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--pb-toast-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  pointer-events: none;
}

.pb-toast {
  --pb-toast-tone: var(--pb-toast-info);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 14rem;
  max-width: min(30rem, calc(100vw - 2.5rem));
  padding: 0.7rem 0.65rem 0.7rem 0.85rem;
  border: 1px solid var(--pb-toast-border);
  border-inline-start: 3px solid var(--pb-toast-tone);
  border-radius: var(--pb-radius-md);
  background: var(--pb-toast-surface);
  color: var(--pb-toast-text);
  box-shadow: var(--pb-toast-shadow);
  font-size: var(--pb-font-md);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.pb-toast-success,
.pb-toast[data-type='success'] {
  --pb-toast-tone: var(--pb-toast-success);
}
.pb-toast-error,
.pb-toast[data-type='error'] {
  --pb-toast-tone: var(--pb-toast-error);
}
.pb-toast-warning,
.pb-toast[data-type='warning'] {
  --pb-toast-tone: var(--pb-toast-warning);
}
.pb-toast-info,
.pb-toast[data-type='info'] {
  --pb-toast-tone: var(--pb-toast-info);
}
.pb-toast-loading,
.pb-toast[data-type='loading'],
.pb-toast[data-loading='true'] {
  --pb-toast-tone: var(--pb-toast-loading);
}

.pb-toast-show {
  opacity: 1;
  transform: translateY(0);
}
.pb-toast-exit {
  opacity: 0;
  transform: translateY(0.75rem);
}

/* A non-colour semantic cue. The :empty fallback lets the engine use either an
   inline SVG/icon or no child markup without producing duplicate glyphs. */
.pb-toast-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--pb-radius-pill);
  background: color-mix(in srgb, var(--pb-toast-tone) 14%, transparent);
  color: var(--pb-toast-tone);
  font-size: var(--pb-font-sm);
  font-weight: 700;
  line-height: 1;
}
.pb-toast-success .pb-toast-icon:empty::before,
.pb-toast[data-type='success'] .pb-toast-icon:empty::before {
  content: '✓';
}
.pb-toast-error .pb-toast-icon:empty::before,
.pb-toast[data-type='error'] .pb-toast-icon:empty::before {
  content: '×';
}
.pb-toast-warning .pb-toast-icon:empty::before,
.pb-toast[data-type='warning'] .pb-toast-icon:empty::before {
  content: '!';
}
.pb-toast-info .pb-toast-icon:empty::before,
.pb-toast[data-type='info'] .pb-toast-icon:empty::before {
  content: 'i';
}
.pb-toast-loading .pb-toast-icon:empty::before,
.pb-toast[data-type='loading'] .pb-toast-icon:empty::before,
.pb-toast[data-loading='true'] .pb-toast-icon:empty::before {
  content: '';
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid color-mix(in srgb, var(--pb-toast-tone) 28%, transparent);
  border-top-color: var(--pb-toast-tone);
  border-radius: 50%;
  animation: pb-toast-spinner 0.75s linear infinite;
}

.pb-toast-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding-block: 0.12rem;
}
.pb-toast-text,
.pb-toast-title,
.pb-toast-detail,
.pb-toast-undo-message {
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.pb-toast-title {
  color: var(--pb-toast-heading);
  font-weight: 600;
}
.pb-toast-detail {
  color: var(--pb-toast-muted);
  font-size: var(--pb-font-sm);
}

.pb-toast-action {
  flex: 0 0 auto;
  align-self: center;
  margin-inline-start: auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  background: transparent;
  color: var(--pb-accent);
  font: inherit;
  font-size: var(--pb-font-sm);
  font-weight: 600;
  cursor: pointer;
}
.pb-toast-action:hover {
  background: var(--pb-toast-surface-hover);
}
.pb-toast-action:focus-visible,
.pb-toast-close-btn:focus-visible {
  outline: none;
  box-shadow: var(--pb-shadow-ring);
}

.pb-toast-close-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.15rem -0.15rem -0.15rem 0;
  padding: 0;
  border: 0;
  border-radius: var(--pb-radius-sm);
  background: transparent;
  color: var(--pb-toast-muted);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.pb-toast-close-btn:hover,
.pb-toast-close-btn:focus-visible {
  background: var(--pb-toast-surface-hover);
  color: var(--pb-toast-text);
}

.pb-toast-overflow-indicator {
  align-self: flex-end;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--pb-toast-border-subtle);
  border-radius: var(--pb-radius-pill);
  background: var(--pb-toast-surface);
  color: var(--pb-toast-muted);
  box-shadow: var(--pb-shadow-dropdown);
  font-size: var(--pb-font-xs);
  font-weight: 600;
  pointer-events: none;
}

/* The timer element itself drains, which lets the controller pause/resume its
   CSS animation in lockstep with hover, focus, and document visibility. */
.pb-toast-timer-progress,
.pb-toast-progress--timed {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--pb-toast-tone);
  transform: scaleX(1);
  transform-origin: left center;
  animation: pb-toast-timer-drain var(--pb-toast-duration, 4000ms) linear forwards;
  pointer-events: none;
}
.pb-toast.is-paused .pb-toast-timer-progress,
.pb-toast[data-paused='true'] .pb-toast-timer-progress,
.pb-toast.is-paused .pb-toast-progress--timed,
.pb-toast[data-paused='true'] .pb-toast-progress--timed {
  animation-play-state: paused;
}

/* Loading uses a separate track so it can remain indeterminate until the
   controller morphs the same pb-toast into a timed success/error state. */
.pb-toast-loading-progress,
.pb-toast-progress--indeterminate {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  background: var(--pb-toast-progress-track);
  pointer-events: none;
}
.pb-toast-loading-progress::after,
.pb-toast-progress--indeterminate::after {
  content: '';
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--pb-toast-tone);
  transform: translateX(-120%);
  animation: pb-toast-loading-slide 1.15s ease-in-out infinite;
}

/* Compatibility layout for the pre-controller showProgressToast adapter. */
.pb-toast-progress {
  align-items: center;
  gap: 0.55rem;
}
.pb-toast-progress > .fa-spinner {
  flex: 0 0 auto;
  color: var(--pb-toast-tone);
}

/* Deferred transactional pb-toast: its commit/undo policy remains specialized,
   but its visual treatment belongs to the shared shell. */
.pb-toast-undo {
  align-items: center;
}
.pb-toast-undo-message {
  min-width: 0;
  flex: 1 1 auto;
}
.pb-toast-undo-countdown {
  flex: 0 0 auto;
  color: var(--pb-toast-muted);
  font-size: var(--pb-font-sm);
  font-variant-numeric: tabular-nums;
}

@keyframes pb-toast-spinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pb-toast-timer-drain {
  to {
    transform: scaleX(0);
  }
}

@keyframes pb-toast-loading-slide {
  50% {
    transform: translateX(140%);
  }
  100% {
    transform: translateX(340%);
  }
}

@media (max-width: 768px) {
  .pb-toast-container {
    right: calc(0.75rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); /* [builder-divergence CSS] no bottom-nav */
    left: calc(0.75rem + env(safe-area-inset-left, 0px));
    align-items: stretch;
  }
  .pb-toast {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .pb-toast-action {
    min-height: 2.75rem;
    padding-inline: 0.75rem;
  }
  .pb-toast-close-btn {
    width: 2.75rem;
    height: 2.75rem;
    margin-block: -0.45rem;
    margin-inline: 0 -0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-toast {
    transform: none;
    transition: opacity 90ms linear;
  }
  .pb-toast-exit {
    transform: none;
  }
  .pb-toast-icon::before,
  .pb-toast-timer-progress,
  .pb-toast-progress--timed,
  .pb-toast-loading-progress::after,
  .pb-toast-progress--indeterminate::after {
    animation: none;
  }
  .pb-toast-timer-progress,
  .pb-toast-progress--timed {
    transform: scaleX(1);
  }
}