/* Unified <dialog> (spec §1.1): one look for Approve, Restore, Reopen, Client selection and DOB warning.
   Replaces .approve-dialog, .reopen-dialog, .restore-action dialog, .client-dialog and .dob-dialog. Tokens only. */
dialog { width: min(36rem, calc(100% - 2 * var(--gutter))); max-height: min(85dvh, 48rem); margin: auto; padding: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-elevated); color: var(--color-text); box-shadow: var(--shadow-2); overflow: hidden; }
dialog[open] { display: flex; flex-direction: column; animation: dialog-in var(--duration-base) var(--ease-out) both; }
dialog::backdrop { background: var(--color-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: fade-in var(--duration-base) var(--ease-out) both; }

/* Body: every dialog scrolls in one place, header and footer stay put. */
dialog > *:not(.dialog__header):not(.dialog__footer):not(.dialog-actions):not(.row) { margin-inline: var(--space-4); }
dialog > :first-child { margin-top: var(--space-4); }
dialog > * + * { margin-top: var(--space-3); }
dialog { overflow-y: auto; }
dialog > :is(h2, h3):first-child { font-size: var(--text-md); line-height: 1.35; letter-spacing: var(--tracking-section); display: flex; align-items: center; gap: var(--space-2); }
dialog p { line-height: var(--leading-body); }

/* Intent icon before the title: icon + text, colour never alone. */
dialog > :is(h2, h3):first-child::before { content: '✓'; flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; background: var(--color-primary-subtle); color: var(--color-primary); }
dialog[data-intent='warning'] > :is(h2, h3):first-child::before { content: '!'; background: var(--color-warning-bg); color: var(--color-warning-text); }
dialog[data-intent='danger'] > :is(h2, h3):first-child::before { content: '↺'; background: var(--color-danger-bg); color: var(--color-danger-text); }
dialog[data-intent='warning'] { border-top: 3px solid var(--color-warning-border); }
dialog[data-intent='danger'] { border-top: 3px solid var(--color-danger-border); }

/* Footer: the last action row is a sticky footer (Cancel left of the action). */
dialog > .dialog-actions:last-child, dialog > .row:last-child, dialog .dialog__footer { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-muted); border-top: var(--border-width) solid var(--color-border); }
dialog form > .dialog-actions:last-child { margin: var(--space-3) calc(-1 * var(--space-4)) 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-muted); border-top: var(--border-width) solid var(--color-border); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 479px) {
  dialog .dialog-actions .btn, dialog > .row:last-child .btn { flex: 1 1 100%; }
}

/* Shared dialog parts */
.approve-warning, .dob-warning { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: var(--border-width) solid var(--color-warning-border); background: var(--color-warning-bg); color: var(--color-warning-text); }
.reopen-dialog__error { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: var(--border-width) solid var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-text); }
.people-list { display: grid; gap: var(--space-1); padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.people-list legend { font-weight: 600; font-size: var(--text-sm); padding: 0 var(--space-1); }
.person-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.person-row:hover { background: var(--color-surface-hover); }
.change-list, .restore-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.change-list li, .restore-changes li { padding: var(--space-1) var(--space-2); border-left: 3px solid var(--color-changed-border); background: var(--color-changed-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.change--kept { color: var(--color-text-muted); }
.change-list li.change--kept { border-left-color: var(--color-border); background: transparent; }
.restore-action { margin-top: var(--space-2); }

@keyframes dialog-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog[open], dialog::backdrop { animation: none; } }

/* Side drawer (components/drawer.js): a modal <dialog> sheet from the right. Resets the centred-dialog spacing. */
dialog.drawer { position: fixed; inset: 0 0 0 auto; width: min(var(--drawer-width), 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border-width: 0 0 0 var(--border-width); }
dialog.drawer[open] { animation: drawer-in var(--duration-slow) var(--ease-out) both; }
dialog.drawer > * { margin: 0; }
dialog.drawer > :is(h2, h3):first-child::before { content: none; }
.drawer__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.drawer__title { flex: 1 1 auto; font-size: var(--text-md); }
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4); }
@keyframes drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open] { animation: none; } }