/* kb dialog - native <dialog> for kb.confirm / kb.alert / kb.prompt. Mockup 06-komponenter.html (DIALOG),
   without its tool-coloured header: tools have no colour, the sweep behind the title is the primary
   colour (danger for a dangerous confirm). Markup is built by dialog.js.
   Motion lives in no-preference only; reduced motion gets plain open/close. */
@layer kb.components {
  .kb-dialog {
    --kb-dialog-accent: var(--kb-primary);
    border: 0;
    padding: 0;
    border-radius: var(--kb-radius-card);
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    background: var(--kb-card);
    color: var(--kb-text);
    box-shadow: var(--kb-shadow-pop);
    overflow: hidden;
    font: inherit;
  }
  .kb-dialog--danger { --kb-dialog-accent: var(--kb-danger); }

  .kb-dialog::backdrop {
    background: rgba(6, 14, 34, .45);
    backdrop-filter: blur(3px);
  }

  .kb-dialog__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: inherit;
  }

  .kb-dialog__head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
  }
  /* soft colour sweep behind the title; static (at rest, very faint) without motion */
  .kb-dialog__head::before {
    content: "";
    position: absolute;
    inset: 0 -40px;
    opacity: .1;
    background: linear-gradient(100deg, var(--kb-dialog-accent), transparent 85%);
    transform: skewX(var(--kb-skew));
    pointer-events: none;
  }

  .kb-dialog__title {
    position: relative;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .kb-dialog__close {
    position: relative;
    margin-left: auto;
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--kb-radius);
    background: transparent;
    color: var(--kb-text-muted);
    cursor: pointer;
  }
  .kb-dialog__close:hover { background: var(--kb-hover); color: var(--kb-text); }
  .kb-dialog__close svg { width: 18px; height: 18px; }
  .kb-dialog__close:focus-visible {
    outline: 2px solid var(--kb-focus-ring);
    outline-offset: 2px;
  }

  .kb-dialog__body {
    padding: 4px 20px 6px;
    overflow-y: auto;
    min-height: 0;
  }
  .kb-dialog__text {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .kb-dialog__body .kb-field { margin-bottom: 12px; }

  .kb-dialog__foot {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px 18px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .kb-dialog[open] { animation: kb-dialog-in .38s var(--kb-ease-out); }
    .kb-dialog[open]::backdrop { animation: kb-dialog-fade-in .3s ease; }
    .kb-dialog.is-closing::backdrop { animation: kb-dialog-fade-out .22s ease forwards; }

    .kb-dialog[open] .kb-dialog__head::before {
      transform: translateX(-100%) skewX(var(--kb-skew));
      animation: kb-dialog-sweep .6s var(--kb-ease-out) .08s forwards;
    }

    /* content staggers in; dialog.js numbers the rows with --kb-i */
    .kb-dialog[open] .kb-dialog__body > *,
    .kb-dialog[open] .kb-dialog__foot {
      opacity: 0;
      transform: translateX(-8px);
      animation: kb-dialog-row .32s var(--kb-ease-out) forwards;
      animation-delay: calc(.12s + var(--kb-i, 0) * .06s);
    }
    .kb-dialog__close { transition: background-color .2s, color .2s; }
  }

  @keyframes kb-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes kb-dialog-fade-in { from { opacity: 0; } }
  @keyframes kb-dialog-fade-out { to { opacity: 0; } }
  @keyframes kb-dialog-sweep { to { transform: translateX(0) skewX(var(--kb-skew)); } }
  @keyframes kb-dialog-row { to { opacity: 1; transform: none; } }
}