/* dialog.css: Dialog (component 23). Owner: group D (P2.T7). Tokens only (L-01), logical properties only (L-04), box-shadow only
   var(--shadow-overlay) on overlays (L-03). The layer, scrim and z-index come from shell.css ([data-overlay="dialog"]); this file is the
   surface: widths per variant, header 56, scrolling body, footer 64, fields and the plain button used until the Button component lands. */

[data-component="dialog"] {
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: min(var(--size-dialog-sm), calc(100% - 2 * var(--size-viewport-gutter)));
  max-inline-size: calc(100% - 2 * var(--size-viewport-gutter));
  block-size: fit-content;
  max-block-size: calc(100dvh - 2 * var(--space-9));
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  color: var(--text);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  transform: scale(.98);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
[data-component="dialog"][data-size="md"] { inline-size: min(var(--size-dialog-md), calc(100% - 2 * var(--size-viewport-gutter))); }
[data-component="dialog"][data-size="lg"] { inline-size: min(var(--size-dialog-lg), calc(100% - 2 * var(--size-viewport-gutter))); }
[data-component="dialog"][data-state="open"] { opacity: 1; transform: none; }
[data-component="dialog"][data-state="closing"] { opacity: 0; transform: scale(.98); transition-duration: var(--duration-fast); }
/* A dialog drawn in the kitchen sink states grid, not as an overlay: in the flow, fully visible. */
[data-component="dialog"][data-static] { position: relative; inset: auto; margin: 0; opacity: 1; transform: none; box-shadow: none; max-block-size: none; }

.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex: none;
  min-block-size: var(--size-header);
  padding-inline: var(--space-7);
  border-block-end: var(--border-width) solid var(--border);
}
.dialog__title { font: var(--type-sub); color: var(--text); margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.dialog__title:focus { outline: none; }
.dialog__title:focus-visible { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--space-2); border-radius: var(--radius-control); }

.dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-standard);
}
.dialog__close:hover, .dialog__close[data-force="hover"] { background: var(--surface-hover); color: var(--text); }
.dialog__close:active, .dialog__close[data-force="active"] { background: var(--border); }
.dialog__close .icon { inline-size: var(--icon-md); block-size: var(--icon-md); }

.dialog__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--space-7);
  display: grid;
  gap: var(--space-5);
  align-content: start;
  font: var(--type-body);
}
.dialog__summary { display: grid; gap: var(--space-3); }
.dialog__summary p { max-inline-size: none; }
.dialog__countdown { font: var(--type-sub); font-variant-numeric: tabular-nums lining-nums; }
.dialog__hint, .dialog__help { font: var(--type-caption); color: var(--text-secondary); max-inline-size: none; }
.dialog__label { font: var(--type-label); color: var(--text); margin: 0; }
.dialog__consequences { display: grid; gap: var(--space-2); }
.dialog__consequences ul { margin: 0; padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); }
.dialog__consequences li { max-inline-size: none; }
.dialog__blast { display: block; }
.dialog__name { font-weight: 600; overflow-wrap: anywhere; }
.dialog__form { display: grid; gap: var(--space-5); }

.dialog__field { display: grid; gap: var(--space-2); }
.dialog__input {
  inline-size: 100%;
  min-block-size: var(--size-control);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--text);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  font: var(--type-body);
}
.dialog__input--multiline { min-block-size: calc(var(--size-control) * 2); resize: vertical; }
.dialog__input:focus-visible { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--space-1); }
.dialog__input[aria-invalid="true"] { border-color: var(--critical); }
.dialog__error { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font: var(--type-caption); color: var(--critical); max-inline-size: none; }
.dialog__error .icon { margin-block-start: var(--space-1); }
.dialog__error--summary { padding: var(--space-4) var(--space-5); background: var(--critical-subtle); border: var(--border-width) solid var(--border); border-inline-start: var(--border-width-accent) solid var(--critical); border-radius: var(--radius-control); font: var(--type-body); color: var(--text); }
.dialog__error--summary .icon { color: var(--critical); }

.dialog__footer {
  display: flex;
  flex-direction: row-reverse; /* primary first in the DOM and the tab order, shown last at the inline-end */
  align-items: center;
  gap: var(--space-3);
  flex: none;
  min-block-size: var(--size-footer);
  padding-inline: var(--space-7);
  padding-block: var(--space-3);
  border-block-start: var(--border-width) solid var(--border);
}
.dialog__caption { flex: 1 1 auto; margin: 0; font: var(--type-caption); color: var(--text-secondary); text-align: start; max-inline-size: none; }

/* Small width: full width minus the gutters, buttons stacked and full width, the primary last at the block-end. */
@media (width < 768px) {
  .dialog__footer { flex-direction: column-reverse; align-items: stretch; padding-block: var(--space-4); }
  .dialog__footer > .dialog-btn, .dialog__footer > [data-component="button"] { inline-size: 100%; }
}

/* The plain button used by overlays until the Button component (group A) is built: the four variants of 02 Button. */
.dialog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: var(--size-control);
  padding-inline: var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  font: var(--type-button);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.dialog-btn--sm { min-block-size: var(--size-control-sm); padding-inline: var(--space-4); }
.dialog-btn--primary { background: var(--brand); color: var(--brand-contrast); }
.dialog-btn--primary:hover { background: var(--brand-hover); }
.dialog-btn--danger { background: var(--critical); color: var(--critical-contrast); }
.dialog-btn--danger:hover { background: var(--critical-hover); }
.dialog-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-control); }
.dialog-btn--secondary:hover { background: var(--surface-hover); }
.dialog-btn--secondary:active { background: var(--border); }
.dialog-btn--ghost { background: transparent; color: var(--brand); }
.dialog-btn--ghost:hover { background: var(--surface-hover); text-decoration: none; }
.dialog-btn--ghost:active { background: var(--border); }
.dialog-btn:disabled, .dialog-btn[aria-disabled="true"] { background: var(--surface-sunken); color: var(--text-disabled); border-color: transparent; cursor: not-allowed; }
.dialog-btn[aria-busy="true"] { cursor: progress; }

.dialog__body:focus-visible { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: calc(-1 * var(--border-width-thick)); }