/* v1.20 slim dialogs: one compact look for every create/edit dialog and side sheet.
   Header 44px / title 15px; labels 11.5px; fields 34px / 13.5px (16px + 8px padding on phones);
   row gap 10px, column gap 12px; sticky 34px footer buttons; max 640px wide, 92vh tall; 2 columns from 560px. */
.overlay .dialog:not(.dlg-wide) { max-width: min(640px, calc(100vw - 48px)); max-height: 92vh; }
.dialog { container-type: inline-size; container-name: dlg; }
.dialog-head { min-height: 44px; height: 44px; padding: 0 var(--dialog-pad-h, 16px); box-sizing: border-box; flex: none; }
.dialog-head h2 { font-size: 15px; line-height: 1.2; margin: 0; }
.dialog-body { padding: 8px var(--dialog-pad-h, 16px) 12px; }
.dialog-foot { position: sticky; bottom: 0; z-index: 1; padding: 8px var(--dialog-pad-h, 16px); gap: 8px; flex: none; align-items: center; }
.dialog-foot .btn { height: 34px; min-height: 34px; padding: 0 14px; font-size: 13.5px; box-sizing: border-box; }
.dialog-foot .spacer { flex: 1; }

.dialog label, .ws-sheet label { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin: 0 0 3px; display: block; }
.dialog .ws-checks label, .dialog .sp-radio { font-size: 12.5px; font-weight: 400; color: var(--text); margin: 0; }
.dialog input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
.dialog select, .ws-sheet select, .ws-sheet input:not([type=checkbox]):not([type=radio]) {
  height: 34px; min-height: 34px; font-size: 13.5px; padding: 0 9px; box-sizing: border-box; border-radius: 8px; }
.dialog textarea, .ws-sheet textarea { font-size: 13.5px; padding: 6px 9px; min-height: 0; border-radius: 8px; box-sizing: border-box; }
.dialog .ws-checks { max-height: 120px; gap: 2px 12px; }
.dialog .ws-checks label { min-height: 26px; }
.dialog .ws-icons { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; }
.dialog .ws-icons button { height: 34px; border-radius: 8px; }

/* the form grid: .dform children are .f (short) or .f.wide (spans both columns) */
.dform { display: grid; grid-template-columns: 1fr; gap: 10px 12px; grid-auto-flow: row dense; align-items: start; }
.dform > .f { min-width: 0; margin: 0; }
.dform > .f > label { margin-top: 0; }
.dform > .f input:not([type=checkbox]):not([type=radio]), .dform > .f select, .dform > .f textarea { width: 100%; }
.dform > p, .dform > .hint, .dform > .err, .dform > .dim { grid-column: 1 / -1; margin: 0; }
.ws-form.dform label, .sp-field label, .auth-field label { margin: 0 0 3px; font-size: 11.5px; }
@container dlg (min-width: 560px) {
  .dform { grid-template-columns: 1fr 1fr; }
  .dform > .f.wide { grid-column: 1 / -1; }
}
.dialog .sp-field, .dialog .auth-field, .dialog .field { margin-bottom: 0; }
.dialog-body > .field, .dialog-body > .sp-field { margin-bottom: 10px; }

@media (max-width: 600px) {
  .dialog input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
  .dialog select, .dialog textarea, .ws-sheet select, .ws-sheet input:not([type=checkbox]):not([type=radio]), .ws-sheet textarea { font-size: 16px; padding: 8px; }
  .dialog textarea, .ws-sheet textarea { padding: 8px; }
  .dialog-foot { padding: 8px 12px; }
}
/* the side sheet follows the same compact header */
.ws-sheet header { min-height: 44px; padding: 6px 12px; }
.ws-sheet h3 { font-size: 15px; }
.ws-sheet .ws-form { display: grid; gap: 10px 12px; }
.ws-sheet .ws-form > .f { margin: 0; }