/* kapable-app-kit toast (ui/toast.js). The toast recipe of the Kapable design
   language (section 9) plus what makes it stay above an open dialog. Needs the
   page's tokens (--motion-enter, --ease-out; toast.js reads --motion-fast and --ease-in for its
   exit) and the error details recipe (.err-details), which
   every app from kapable-app-template already has. */

/* The host is a manual popover, so the browser puts it in the top layer, above
   any modal dialog opened before it. The UA gives [popover] a centred box with
   a border and a background; this undoes that and pins it to the bottom. */
.kit-toasts,
.kit-toasts[popover] {
  position: fixed;
  inset: auto auto 22px 50%;
  transform: translateX(-50%);
  z-index: 95;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  width: max-content;
  max-width: calc(100vw - 32px);
  display: grid;
  gap: calc(8px * var(--pad-factor));
  justify-items: center;
  pointer-events: none;
}
.kit-toasts[popover]:not(:popover-open) { display: none; }
.kit-toasts::backdrop { display: none; }

.kit-toast {
  pointer-events: auto;
  max-width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: calc(9px * var(--pad-factor)) calc(14px * var(--pad-factor));
  border-radius: var(--radius-note);
  background: #1d1f25; /* raw: the always-dark toast, no token holds it (PLAT-1158) */
  color: #f2f3f5; /* raw: the always-dark toast, no token holds it (PLAT-1158) */
  font-size: var(--type-control);
  font-weight: var(--control-weight, 600);
  text-align: left;
  box-shadow: var(--shadow-toast);
  animation: kit-toast-in var(--motion-enter, 160ms) var(--ease-out, ease-out);
}
/* On its way out (toast.js leave()): nothing in it can be pressed while it fades. */
.kit-toast[data-kit-leaving] { pointer-events: none; }
@keyframes kit-toast-in { from { opacity: 0; transform: translateY(6px); } }
.kit-toast p { margin: 0; }
.kit-toast-actions { display: flex; align-items: flex-start; gap: calc(8px * var(--pad-factor)); margin-top: 4px; flex-wrap: wrap; }
.kit-toast-actions .err-details { flex: 1 1 auto; flex-basis: auto; }

/* Inside a toast (dark in both themes) the toggle and detail take the toast's own ink. */
.kit-toast .err-details > summary { color: inherit; opacity: 0.78; }
.kit-toast .err-details > summary:hover { background: transparent; color: inherit; opacity: 1; text-decoration: underline; }
.kit-toast .err-details .err-body { border-top-color: color-mix(in srgb, currentColor 16%, transparent); color: inherit; opacity: 0.85; max-height: 160px; overflow: auto; }

/* Dismiss: a small text button in the toast's ink. */
.kit-toast-dismiss { display: inline-flex; align-items: center; padding: calc(2px * var(--pad-factor)) calc(4px * var(--pad-factor)); border: 0; border-radius: var(--radius-tag); background: none; font: inherit; font-size: var(--type-meta); font-weight: var(--control-weight, 600); color: inherit; opacity: 0.78; cursor: pointer; }
.kit-toast-dismiss:hover { opacity: 1; text-decoration: underline; }
.kit-toast-dismiss:focus-visible { outline: 2px solid var(--accent-ring, currentColor); outline-offset: 2px; }

/* A confirmation with one action ("Ticked off. Undo"): the line and the action
   on one row, the action underlined in the toast's ink (design language
   section 9, toast). */
.kit-toast-inline { display: flex; align-items: center; gap: calc(4px * var(--pad-factor)); padding: calc(7px * var(--pad-factor)) calc(8px * var(--pad-factor)) calc(7px * var(--pad-factor)) calc(14px * var(--pad-factor)); }
.kit-toast-inline .kit-toast-line { min-width: 0; padding: calc(2px * var(--pad-factor)) calc(6px * var(--pad-factor)) calc(2px * var(--pad-factor)) 0; }
.kit-toast-act { flex: none; height: 28px; padding: 0 calc(10px * var(--pad-factor)); border: 0; border-radius: var(--radius-tag); background: transparent; color: inherit; font: inherit; font-size: var(--type-control); font-weight: var(--heading-weight, 650); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* raw: a toast action at 28px, no height role holds it (PLAT-1158) */
.kit-toast-act:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.kit-toast-act:focus-visible { outline: 2px solid var(--accent-ring, currentColor); outline-offset: 2px; }

@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .kit-toast-dismiss { min-height: 44px; padding: 0 calc(8px * var(--pad-factor)); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) (PLAT-1158) */
  .kit-toast-act { height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) (PLAT-1158) */
  .kit-toast .err-details > summary { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) (PLAT-1158) */
}
@media (prefers-reduced-motion: reduce) {
  .kit-toast { animation: none; }
}