/* Kin Kai runtime layer.
   The only stylesheet not generated from the design sheet, because these are runtime
   behaviours a static sheet cannot show: where the toast floats, how the drawer
   overlays, and what is hidden until an interaction happens. The visual language of
   both components is defined in system.css and is not restated here. */

#kk-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--olive);
  border-radius: 10px;
  box-shadow: var(--lift);
  font-size: 13px;
  max-width: min(440px, calc(100vw - 44px));
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
#kk-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#kk-toast.is-error { border-left-color: var(--clay); }
#kk-toast.is-error .kk-kicker { color: var(--clay); }
@media (prefers-reduced-motion: no-preference) {
  #kk-toast { transition: opacity 180ms ease, transform 180ms ease; }
}

#kk-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(420px, 100vw);
  display: grid;
  align-content: start;
  overflow-y: auto;
}
#kk-drawer[hidden] { display: none; }
#kk-drawer .kk-drawer {
  max-width: none;
  min-height: 100%;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  align-content: start;
}
body.kk-drawer-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(10, 12, 6, 0.62);
}

/* A panel keeps a slot for its own error banner, so a failure is reported where the
   action was taken rather than only in a toast that fades. */
[data-error-slot]:empty { display: none; }
[data-error-slot] { display: grid; gap: 10px; margin-bottom: 14px; }

.kk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
