/* Opt-in form dialogs. Domain drawers and their scroll models remain independent. */
:root { --form-surface: #fff; --form-text: #223247; --form-muted: #56667a; --form-line: #dce2e8; --form-accent: #236458; }
:root { --form-danger: #a52a3a; --form-warning: #80600a; --form-warning-soft: #fff4d7; }
html[data-theme="dark"] { --form-danger: #ffb6c0; --form-warning: #eed18a; --form-warning-soft: #3b3422; }
html[data-theme="dark"] { --form-surface: #20262d; --form-text: #e7edf3; --form-muted: #b1bfcd; --form-line: #46515d; --form-accent: #88ccbc; }
body dialog[data-portal-dialog] { box-sizing: border-box; width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--form-line); border-radius: 10px; background: var(--form-surface); color: var(--form-text); box-shadow: 0 12px 36px rgb(0 0 0 / 20%); }
body dialog[data-portal-dialog="large"] { width: min(1000px, calc(100% - 24px)); }
body dialog[data-portal-dialog]::backdrop { background: rgb(14 23 32 / 48%); }
body dialog[data-portal-dialog] > :is(.column-settings-heading, .date-range-heading) { position: sticky; top: 0; z-index: 3; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--form-line); background: var(--form-surface); }
body dialog[data-portal-dialog] h2 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--form-text); }
body dialog[data-portal-dialog] :is(.column-settings-heading, .date-range-heading) p { margin: 6px 0 0; color: var(--form-muted); font-size: 13px; line-height: 1.45; }
body dialog[data-portal-dialog] .dialog-close { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--form-line); border-radius: 6px; background: var(--form-surface); color: var(--form-text); }
body dialog[data-portal-dialog] > :is(form, .portal-dialog-body) { max-height: none; overflow: visible; padding: 16px 20px 0; gap: 16px; }
body dialog[data-portal-dialog] :is(input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):not([type="file"]), select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; border: 1px solid var(--form-line); border-radius: 6px; background: var(--form-surface); color: var(--form-text); padding: 9px 10px; font: inherit; }
body dialog[data-portal-dialog] :is(button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--form-accent); outline-offset: 2px; }
body dialog[data-portal-dialog] :is(.column-settings-footer, .date-range-footer) { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; padding: 12px 0; border-top: 1px solid var(--form-line); background: var(--form-surface); }
body dialog[data-portal-dialog] > .date-range-footer { padding: 12px 20px; }
body dialog[data-portal-dialog] .button { min-height: 40px; border-radius: 6px; box-shadow: none; }
body dialog[data-portal-dialog] .button-primary { background: #236458; color: #fff; }
body dialog[data-portal-dialog] :is(.avatar-editor-preview, .avatar-editor-field) { border-color: var(--form-line); border-radius: 6px; background: var(--form-surface); box-shadow: none; }
body dialog[data-portal-dialog] .avatar-icon-choice { border-color: var(--form-line); border-radius: 6px; background: var(--form-surface); color: var(--form-text); }
body dialog[data-portal-dialog] .avatar-icon-choice:has(input:checked) { background: #236458; border-color: var(--form-accent); }
body dialog[data-portal-dialog] .avatar-icon-choice:has(input:checked) .avatar-icon-choice-symbol { color: #fff; }
body dialog[data-portal-dialog] .avatar-custom-color output { color: var(--form-text); }
body dialog[data-portal-dialog] .date-range-help { margin-top: 6px; color: var(--form-muted); font-size: 13px; }
body dialog[data-portal-dialog] .date-range-help summary { cursor: pointer; }
body dialog[data-portal-dialog] .date-range-month-title { color: var(--form-text); }
body dialog[data-portal-dialog] .date-range-selection { color: var(--form-accent); }
body dialog[data-portal-dialog] .date-range-weekdays { color: var(--form-muted); }
@media (max-width: 600px) {
  body dialog[data-portal-dialog] > :is(.column-settings-heading, .date-range-heading) { padding: 12px; }
  body dialog[data-portal-dialog] > form { padding: 12px 12px 0; }
  body dialog[data-portal-dialog] h2 { font-size: 18px; }
  body dialog[data-portal-dialog] .date-range-calendars > .date-range-month:nth-child(2) { display: none; }
  body dialog[data-portal-dialog] .date-range-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 12px; }
  body dialog[data-portal-dialog] .date-range-presets button { min-height: 40px; font-size: 12px; }
  body dialog[data-portal-dialog] .date-range-calendar-panel { padding: 12px; }
  body dialog[data-portal-dialog] > .date-range-footer { padding: 12px; }
  body dialog[data-portal-dialog] :is(.column-settings-footer, .date-range-footer) .button { flex: 1 1 140px; }
}
@media (max-height: 600px) {
  body dialog[data-portal-dialog] > :is(.column-settings-heading, .date-range-heading) { position: static; }
}

/* Reusable checkbox rows and grouped choices in shared forms. */
body dialog[data-portal-dialog] form label.portal-form-check { display: flex; align-items: center; gap: 8px; }
body dialog[data-portal-dialog] .portal-form-options { border: 1px solid var(--form-line); border-radius: 6px; }