.modal { width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; border: 0; border-radius: 22px; padding: 0; color: var(--ink); box-shadow: 0 30px 90px rgba(16,24,47,.28); }
.modal[open] { overscroll-behavior: contain; }
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; overscroll-behavior: none; }
body:has(#scratchpadSaveDialog[open], #scratchpadDeleteDialog[open]) { overflow: visible; }
.modal::backdrop { background: rgba(9,15,34,.5); backdrop-filter: blur(4px); }
.modal form { padding: 25px; }
.modal-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 23px; }
.form-field { display: grid; gap: 7px; margin-bottom: 16px; }
.form-field label, .form-field > span, .repeat-options > span { font-size: .77rem; color: #4f5a73; font-weight: 750; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid #dfe3eb; border-radius: 12px; padding: 11px 12px; background: #fafbfc; color: var(--ink); min-height: 46px; }
.form-field textarea { resize: vertical; min-height: 78px; font: inherit; line-height: 1.45; }
.occurrence-memo-field { padding: 12px; border: 1px solid #dfe5f2; border-radius: 13px; background: #f6f8fe; }
.occurrence-memo-field[hidden] { display: none !important; }
.occurrence-memo-field label span { margin-left: 4px; color: var(--blue); font-weight: 800; }