/* ============================================
   Dialog — a centered modal panel.

   The panel chrome (inverse-surface fill, inverse-on-surface ink, hairline
   border, corner-large radius, level5 elevation, the scrim ::backdrop, and the
   centered modal positioning) is owned by the composed <xm-overlay> in the
   `dialog` tier (modal mode). This file styles the panel's internal layout:
   the header row + close control, the body, and the singular action row.

   All ink is inverse-on-surface (AD-13) — the card-stack ink, matching the
   theme-following panel surface (ADR 0006). Scrim is a flat alpha on
   --md-sys-color-scrim (owned by the overlay); NO gradient (the snackbar scrim
   is the only sanctioned one).

   Entry/exit is opacity + a small translateY at short4 standard — no scale-in
   reveal, no spring. The overlay owns the fade; this adds the lift.

   BEM block: `dialog`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   Elements: __head, __header, __close, __body, __actions. Modifier: --static.
   ============================================ */

.dialog {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  color: var(--md-sys-color-inverse-on-surface);
  padding: var(--s-5);
  animation: dialog-in var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard) both;
}
.dialog--static {
  animation: none;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.dialog__head.is-empty {
  /* No header text — keep the close control but drop the title row height. */
  justify-content: flex-end;
}

.dialog__header {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  color: var(--md-sys-color-inverse-on-surface);
  text-wrap: pretty;
}

.dialog__close {
  appearance: none;
  border: none;
  background: transparent;
  color: color-mix(
    in oklch,
    var(--md-sys-color-inverse-on-surface) 70%,
    transparent
  );
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-1)) 0 0;
  transition: background var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.dialog__close:hover {
  background: color-mix(
    in oklch,
    var(--md-sys-color-inverse-on-surface) 10%,
    transparent
  );
  color: var(--md-sys-color-inverse-on-surface);
}
.dialog__close:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.dialog__body {
  min-width: 0;
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  color: color-mix(
    in oklch,
    var(--md-sys-color-inverse-on-surface) 88%,
    transparent
  );
  text-wrap: pretty;
}

.dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.dialog__actions.is-empty {
  display: none;
}