/* Consistent proportions on folded and unfolded phone viewports. */
#taskDialog,#tagDialog{width:min(calc(100vw - 24px),480px);padding:14px;box-sizing:border-box}
.task-dialog-header,.tag-dialog-header{min-height:36px;margin-bottom:6px;gap:10px}
#cancelTask,#cancelTag{width:36px;height:36px;min-width:36px;min-height:36px;padding:9px}
#cancelTask .ui-icon,#cancelTag .ui-icon{width:18px;height:18px}
#taskName,#tagName,#dateTrigger,#taskTime{box-sizing:border-box;height:44px;min-height:44px;font-size:15px;padding:10px 12px}
#dateTrigger{gap:6px;min-width:0;overflow:hidden}
#dateTrigger .ui-icon{width:18px;height:18px}
#dateValue{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#taskForm .date-time-fields{gap:8px}
#taskForm .date-time-fields label{font-size:12px;min-height:17px;white-space:nowrap}
#taskForm .date-time-fields label .muted{font-size:11px}
#tagChoices{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 12px)/3);grid-template-rows:36px;gap:6px;padding:3px 0;scroll-snap-type:x mandatory}
#tagChoices label{width:100%;min-width:0;max-width:none;height:36px;scroll-snap-align:start}
.tag-color-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tag-color-options legend{grid-column:1/-1}
.tag-color-options label{width:auto;min-width:0;max-width:none;height:36px;padding:6px 8px;justify-content:center;gap:5px}
.tag-color-options input{flex-shrink:0;width:14px;height:14px}
#taskForm .formactions,#tagForm .formactions{gap:8px;min-height:36px;align-items:center}
#taskForm .formactions .icon,#tagForm .formactions .icon{width:36px;height:36px;min-width:36px;min-height:36px;padding:9px}
#taskForm .formactions .icon .ui-icon,#tagForm .formactions .icon .ui-icon{width:18px;height:18px}
#taskForm .formactions .primary,#tagForm .formactions .primary{height:36px;min-height:36px;padding:6px 12px}
@media(max-width:380px){#tagChoices{grid-auto-columns:calc((100% - 6px)/2)}.tag-color-options{grid-template-columns:repeat(2,minmax(0,1fr))}.task-dialog-header h2,.tag-dialog-header h2{font-size:18px}}
/* Give optional details the same comfortable rhythm as the other fields. */
#descriptionField{margin:12px 0}
#taskForm #descriptionField label{margin:0 0 8px;line-height:1.5}
#taskDescription{padding:12px;line-height:1.5;height:84px;min-height:84px;max-height:112px}
#showDescription{margin-top:12px;margin-bottom:4px}
@media(max-height:560px){#descriptionField{margin:10px 0}#taskDescription{height:72px;min-height:72px;padding:10px 12px}}