/* 確認・入力・選択は同じ容器を使用し、必要な幅だけ変える。 */
:is(.ui-confirm-dialog, .want-save-dialog, .profile-save-dialog, .dashboard-confirm-dialog, [data-taxonomy-dialog]) {
  box-sizing: border-box;
  width: min(var(--ui-dialog-width, 32rem), calc(100% - 2rem));
  max-width: calc(100% - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: var(--ui-space-5, 24px);
  border: 1px solid var(--line, #dce3da);
  border-radius: var(--ui-radius-panel, 8px);
  background: var(--paper, #fffdf8);
  color: var(--ink, #19352d);
  box-shadow: var(--shadow, 0 8px 30px rgb(25 53 45 / .07));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.profile-save-dialog { --ui-dialog-width: 28rem; }
.inline-editor-dialog { --ui-dialog-width: 48rem; }
.inline-editor-dialog .form-shell { width: 100%; padding: 0; }
[data-taxonomy-dialog] { --ui-dialog-width: 44rem; }
:is(.ui-confirm-dialog, .want-save-dialog, .profile-save-dialog, .dashboard-confirm-dialog, [data-taxonomy-dialog])::backdrop { background: var(--ui-dialog-backdrop, rgb(0 0 0 / .45)); }
:is(.ui-confirm-dialog, .want-save-dialog, .profile-save-dialog, .dashboard-confirm-dialog, [data-taxonomy-dialog]) h2 { margin: 0 0 var(--ui-space-3, 12px); font-size: 1.25rem; line-height: 1.5; }
:is(.ui-confirm-dialog, .want-save-dialog, .profile-save-dialog, .dashboard-confirm-dialog) .action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  gap: var(--ui-space-3, 12px);
}
:is(.ui-confirm-dialog, .want-save-dialog, .profile-save-dialog, .dashboard-confirm-dialog) .action-row > [data-dialog-cancel] { order: 1; }

@media (max-width: 480px) {
  :is(.ui-confirm-dialog, .want-save-dialog, .profile-save-dialog, .dashboard-confirm-dialog, [data-taxonomy-dialog]) { padding: var(--ui-space-4, 16px); }
  :is(.ui-confirm-dialog, .want-save-dialog, .profile-save-dialog, .dashboard-confirm-dialog) .action-row { grid-template-columns: minmax(0, 1fr); }
  :is(.ui-confirm-dialog, .want-save-dialog, .profile-save-dialog, .dashboard-confirm-dialog) .action-row > .button { width: 100%; }
}

.ui-confirm-dialog h1 { margin-top: 0; font-size: 1.25rem; line-height: 1.5; }
.ui-confirm-dialog .form-shell { padding: 0; width: 100%; }
.ui-confirm-dialog .confirmation-details { overflow-wrap: anywhere; }
.ui-confirm-dialog .confirmation-details dt { font-weight: 700; }
.ui-confirm-dialog .confirmation-details dd { margin: 0 0 12px; white-space: pre-wrap; }

/* 閉じる操作は、どの入力・確認容器でも同じ位置と大きさを持つ。 */
.ui-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3, 12px);
}
.ui-dialog-heading > :is(h1, h2) { flex: 1; }
/* 見出し帯の色は容器の共通バリエーションで揃え、配置は呼出し元が決める。 */
.ui-dialog-heading--filled { --ui-focus-color: #fff; --ui-action-text-color: #fff; background: var(--green); color: #fff; }
.ui-dialog-heading--filled .button-ghost {
  --ui-button-color: #fff;
  --ui-button-hover-background: rgb(255 255 255 / .15);
  --ui-button-hover-color: #fff;
}
dialog :is(.ui-dialog-close, [data-ui-dialog-close]) {
  --ui-action-icon-margin: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 0;
  line-height: 1;
}
dialog > [data-ui-dialog-close] {
  position: absolute;
  top: var(--ui-space-3, 12px);
  right: var(--ui-space-3, 12px);
}
dialog:has(> [data-ui-dialog-close]) > :is(h1, h2),
dialog:has(> [data-ui-dialog-close]) > :is([data-inline-editor-content], [data-want-editor-content], [data-confirm-page-content]) :is(h1, h2):first-child {
  padding-right: 44px;
}