/**
 * P-CEMIUX.DIALOG.1 · Native dialog primitive
 * Domain-neutral presentation for the native HTML <dialog> element.
 *
 * IMPORTANT:
 * - This primitive never emulates an overlay wrapper.
 * - It does not set display:grid/flex on the closed dialog.
 * - Native showModal()/close(), top-layer, focus and ESC semantics stay authoritative.
 */

/* Native dialog shell. The browser owns open/closed/top-layer semantics. */
dialog.cemi-ux-dialog {
  width:min(100% - (var(--cemi-gutter) * 2), 42rem);
  max-width:42rem;
  margin:auto;
  padding:0;
  color:var(--cemi-color-text);
  background:transparent;
  border:0;
  border-radius:var(--cemi-radius-xl);
  box-shadow:none;
  overflow:visible;
}

dialog.cemi-ux-dialog::backdrop {
  background:rgba(13,18,27,.58);
  backdrop-filter:blur(1.5px);
}

.cemi-ux-dialog__surface {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:100%;
  max-height:min(88dvh, 52rem);
  min-width:0;
  margin:0;
  padding:0;
  color:var(--cemi-color-text);
  background:var(--cemi-color-surface);
  border:1px solid var(--cemi-color-border);
  border-radius:var(--cemi-radius-xl);
  box-shadow:var(--cemi-shadow-lg);
  overflow:hidden;
}

.cemi-ux-dialog__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--cemi-space-4);
  min-width:0;
  padding:var(--cemi-space-5) var(--cemi-space-6) var(--cemi-space-4);
  border-bottom:1px solid var(--cemi-color-border);
}

.cemi-ux-dialog__heading {
  display:grid;
  gap:var(--cemi-space-1);
  min-width:0;
}

.cemi-ux-dialog__eyebrow {
  margin:0;
  color:var(--cemi-color-brand);
  font-size:var(--cemi-font-size-xs);
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.cemi-ux-dialog__title {
  margin:0;
  color:var(--cemi-color-ink);
  font-size:var(--cemi-font-size-lg);
  line-height:1.2;
  font-weight:800;
}

.cemi-ux-dialog__description {
  margin:0;
  color:var(--cemi-color-muted);
  font-size:var(--cemi-font-size-sm);
  line-height:var(--cemi-line-normal);
}

.cemi-ux-dialog__body {
  min-width:0;
  min-height:0;
  padding:var(--cemi-space-5) var(--cemi-space-6);
  overflow:auto;
  overscroll-behavior:contain;
}

.cemi-ux-dialog__footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:var(--cemi-space-2);
  padding:var(--cemi-space-4) var(--cemi-space-6) var(--cemi-space-5);
  background:var(--cemi-color-surface);
  border-top:1px solid var(--cemi-color-border);
}

.cemi-ux-dialog__close {
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  margin:calc(var(--cemi-space-2) * -1);
  padding:0;
  color:var(--cemi-color-muted);
  background:transparent;
  border:0;
  border-radius:var(--cemi-radius-md);
  cursor:pointer;
}

.cemi-ux-dialog__close:hover { background:var(--cemi-color-surface-soft); color:var(--cemi-color-ink); }
.cemi-ux-dialog__close:focus-visible { outline:3px solid color-mix(in srgb,var(--cemi-color-focus) 34%,transparent); outline-offset:2px; }

/* Comparison/transition block useful for before → after confirmation flows. */
.cemi-ux-dialog-transition {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;
  gap:var(--cemi-space-3);
}

.cemi-ux-dialog-transition__item {
  min-width:0;
  padding:var(--cemi-space-4);
  background:var(--cemi-color-surface-soft);
  border:1px solid var(--cemi-color-border);
  border-radius:var(--cemi-radius-lg);
}

.cemi-ux-dialog-transition__label {
  display:block;
  margin-bottom:var(--cemi-space-1);
  color:var(--cemi-color-muted);
  font-size:var(--cemi-font-size-xs);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.cemi-ux-dialog-transition__value {
  display:block;
  color:var(--cemi-color-ink);
  font-size:var(--cemi-font-size-md);
  font-weight:800;
  overflow-wrap:anywhere;
}

.cemi-ux-dialog-transition__arrow {
  align-self:center;
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  color:var(--cemi-color-brand);
  font-weight:900;
}

.cemi-ux-dialog__field {
  display:grid;
  gap:var(--cemi-space-2);
  margin-top:var(--cemi-space-5);
}

.cemi-ux-dialog__field > label,
.cemi-ux-dialog__label {
  color:var(--cemi-color-ink);
  font-size:var(--cemi-font-size-sm);
  font-weight:700;
}

.cemi-ux-dialog__field :where(input,textarea,select) {
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  color:var(--cemi-color-text);
  background:var(--cemi-color-surface);
  border:1px solid var(--cemi-color-border-strong);
  border-radius:var(--cemi-radius-md);
}

.cemi-ux-dialog__field textarea {
  min-height:7rem;
  padding:var(--cemi-space-3);
  resize:vertical;
}

.cemi-ux-dialog__field :where(input,textarea,select):focus-visible {
  outline:3px solid color-mix(in srgb,var(--cemi-color-focus) 26%,transparent);
  outline-offset:1px;
  border-color:var(--cemi-color-focus);
}

.cemi-ux-dialog__error {
  margin:0;
  color:var(--cemi-color-danger);
  font-size:var(--cemi-font-size-sm);
  font-weight:600;
}

.cemi-ux-dialog[data-state="pending"] .cemi-ux-dialog__surface {
  cursor:progress;
}

.cemi-ux-dialog[data-state="pending"] .cemi-ux-dialog__footer :where(button,[role="button"]) {
  pointer-events:none;
  opacity:.62;
}

/* Mobile/tablet portrait: native dialog behaves visually like a bottom sheet,
 * without replacing native dialog/top-layer semantics. */
@media (max-width:47.999rem) {
  dialog.cemi-ux-dialog {
    width:100%;
    max-width:100%;
    margin:auto 0 0;
    border-radius:var(--cemi-radius-xl) var(--cemi-radius-xl) 0 0;
  }

  .cemi-ux-dialog__surface {
    width:100%;
    max-height:min(92dvh, 56rem);
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:var(--cemi-radius-xl) var(--cemi-radius-xl) 0 0;
  }

  .cemi-ux-dialog__header {
    padding:var(--cemi-space-4) var(--cemi-space-4) var(--cemi-space-3);
  }

  .cemi-ux-dialog__body {
    padding:var(--cemi-space-4);
  }

  .cemi-ux-dialog__footer {
    position:sticky;
    bottom:0;
    padding:var(--cemi-space-3) var(--cemi-space-4) max(var(--cemi-space-4), env(safe-area-inset-bottom));
  }

  .cemi-ux-dialog__footer > :where(button,a,[role="button"]) {
    flex:1 1 10rem;
    min-height:44px;
  }

  .cemi-ux-dialog-transition {
    grid-template-columns:1fr;
  }

  .cemi-ux-dialog-transition__arrow {
    width:100%;
    height:1.5rem;
    transform:rotate(90deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  dialog.cemi-ux-dialog,
  .cemi-ux-dialog__surface { scroll-behavior:auto; }
}