/* Dialog mapping. ui_viz: docs/components/dialog.md (Dialog / Modal), §1.1, §2, §4, §9. Radix keeps Portal, focus trap, ARIA, Escape, focus return and scroll lock.
   Only the look is set here: container, regions (Header / Body / Footer) and text. The Overlay, motion and Close button keep the shadcn defaults. */
:root, [data-hm-theme] {
  /* ui_viz: dialog.md §2, §8.1 — Radius 8px (Dialog-local, USER_DECISION) and shadow 0 0 12px rgba(0,0,0,.2) (D-093 D-088) — Confirmed. Dialog-local, not Foundation tokens. */
  --hm-dialog-radius: 8px;
  --hm-dialog-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
  /* ui_viz: dialog.md §2 — Surface color.bg.surface / foreground color.fg.primary — Confirmed reuse */
  --hm-dialog-background: var(--hm-sem-bg-surface);
  --hm-dialog-text: var(--hm-sem-fg-primary);
  /* ui_viz: dialog.md §2 — outer 1px; color #DEDBD2 is Temporary (Token relation TBD, DIALOG-10 FOLLOW_UP). Same value as the Header divider. */
  --hm-dialog-border-width: 1px;
  --hm-dialog-border-color: var(--hm-sem-stroke-input-default);
  --hm-dialog-divider-color: var(--hm-sem-stroke-input-default);

  /* ui_viz: dialog.md §9 — Header 24/24/16, Title<->Description 8, Body 24 all sides, Actions 0/24/24, Action gap 8 — Confirmed (D-093, COMPONENT_SCOPED) */
  --hm-dialog-padding: 24px;
  --hm-dialog-header-padding-bottom: 16px;
  --hm-dialog-header-gap: 8px;
  --hm-dialog-actions-gap: 8px;
  --hm-dialog-footer-padding-top: 16px;

  /* ui_viz: dialog.md §1.1 — Title heading-md 20/28/700 (Dialog-local), Description body-sm 14/20/400, Body body-md 16/24/400 */
  --hm-dialog-title-font-size: 20px;
  --hm-dialog-title-line-height: 28px;
  --hm-dialog-title-font-weight: 700;
  --hm-dialog-description-font-size: 14px;
  --hm-dialog-description-line-height: 20px;
  --hm-dialog-body-font-size: 16px;
  --hm-dialog-body-line-height: 24px;
  /* ui_viz: dialog.md §1.2 — Description foreground color.fg.secondary is REFERENCE_ONLY / PARTIAL (current style kept, not a Confirmed value) */
  --hm-dialog-description-color: var(--hm-sem-fg-secondary);

  /* ui_viz: dialog.md §2, §9 — size is fit-content; max width = viewport - 2 x edge; max height also subtracts the app common header / footer.
     edge 16px is REVIEW (existing reference value, not a global spacing token). The two app heights are Web Mapping names the consuming screen may set (default 0). */
  --hm-dialog-edge: 16px;
  --hm-dialog-app-header-height: 0px;
  --hm-dialog-app-footer-height: 0px;
}

[data-slot="dialog-content"] {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Content size up to the max width. Not fit-content: with the shadcn `left: 50%` placement, fit-content only gets half the viewport
     as available width, so a text Dialog stopped at 50vw (195px at 390px) instead of 100vw - 2 x edge. max-content + max-width gives the same min(content, max). */
  width: max-content;
  max-width: calc(100vw - 2 * var(--hm-dialog-edge));
  max-height: calc(100dvh - var(--hm-dialog-app-header-height) - var(--hm-dialog-app-footer-height) - 2 * var(--hm-dialog-edge));
  /* Centered in the area left by the app header / footer. */
  top: calc(var(--hm-dialog-app-header-height) + (100dvh - var(--hm-dialog-app-header-height) - var(--hm-dialog-app-footer-height)) / 2);
  padding: 0;
  border: var(--hm-dialog-border-width) solid var(--hm-dialog-border-color);
  border-radius: var(--hm-dialog-radius);
  background: var(--hm-dialog-background);
  color: var(--hm-dialog-text);
  box-shadow: var(--hm-dialog-shadow);
  overflow-wrap: anywhere;
}

/* Header: Title (and optional Description) with the inset divider below it (24px each side, not edge to edge).
   The divider is the last pixel of the 16px bottom inset (ui_viz draws it inside the padding), so the border width comes out of the padding. */
[data-slot="dialog-header"] {
  flex: none;
  gap: var(--hm-dialog-header-gap);
  margin-inline: var(--hm-dialog-padding);
  padding: var(--hm-dialog-padding) 0 calc(var(--hm-dialog-header-padding-bottom) - var(--hm-dialog-border-width));
  border-bottom: var(--hm-dialog-border-width) solid var(--hm-dialog-divider-color);
}
[data-slot="dialog-title"] {
  font-size: var(--hm-dialog-title-font-size);
  line-height: var(--hm-dialog-title-line-height);
  font-weight: var(--hm-dialog-title-font-weight);
  color: var(--hm-dialog-text);
}
[data-slot="dialog-description"] {
  font-size: var(--hm-dialog-description-font-size);
  line-height: var(--hm-dialog-description-line-height);
  font-weight: 400;
  color: var(--hm-dialog-description-color);
}

/* Body: the only region that scrolls. Wide content (tables) scrolls sideways inside it, never the page. */
[data-slot="dialog-body"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--hm-dialog-padding);
  font-size: var(--hm-dialog-body-font-size);
  line-height: var(--hm-dialog-body-line-height);
  font-weight: 400;
}
[data-slot="dialog-body"] > :first-child { margin-top: 0; }
[data-slot="dialog-body"] > :last-child { margin-bottom: 0; }

/* Footer (Actions): trailing edge, cancel first and the action last, no divider above. Stacking on a narrow screen is TBD in ui_viz (shadcn stacking kept). */
[data-slot="dialog-footer"] {
  flex: none;
  gap: var(--hm-dialog-actions-gap);
  margin: 0;
  padding: var(--hm-dialog-footer-padding-top) var(--hm-dialog-padding) var(--hm-dialog-padding);
  border: 0;
  border-radius: 0;
  background: transparent;
}