/* Fit the normal phone viewport; retain overflow as an accessibility fallback. */
#taskDialog{padding:16px 18px;width:min(94vw,480px);max-height:calc(100dvh - 20px)}
.task-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.task-dialog-header h2{font-size:20px;margin:0}
#cancelTask{border:0;background:transparent;flex-shrink:0}
#taskForm label{margin:8px 0 5px;font-size:13px}
#taskName{min-height:42px;padding:10px 13px;font-size:16px}
#taskDescription{height:72px;min-height:64px;max-height:100px;resize:none;padding:10px 13px;font-size:14px;line-height:1.4}
#showDescription{margin-top:8px;min-height:32px;padding:5px 10px;font-size:12px}
#tagChoices{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:3px 2px}
#tagChoices::-webkit-scrollbar{display:none}
#tagChoices label{flex-shrink:0;margin:0;padding:6px 9px;font-size:12px;white-space:nowrap}
#taskForm .date-time-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#dateTrigger,#taskTime{min-height:42px;padding:9px 12px;font-size:14px}
#taskForm>p.muted{font-size:11px;margin:6px 0}
#taskForm .formactions{margin-top:10px;gap:8px;align-items:center}
#taskForm .formactions .primary{font-size:15px;padding:10px 18px;min-height:44px}
#calendarDialog{padding:12px;width:min(94vw,360px);max-height:calc(100dvh - 20px)}
.calendar-dialog-title{display:flex;justify-content:space-between;align-items:center;padding-left:8px;gap:12px}
#closeCalendar{border:0;background:transparent}
#calendarDialog .calendar-picker{border:0;margin:0;padding:8px;background:transparent}
nav button[data-filter].empty-tag{background:#f0f0f2;color:#89858f;border-color:#d9d7de}
nav button[data-filter].empty-tag.active{background:#e9e8ec;border-color:#b8b5bf;box-shadow:inset 3px 0 #aaa6b2}
nav button[data-filter].empty-tag .ui-icon{opacity:.55}
.empty{background:#f4f4f6;border:1px solid #e3e1e7;border-radius:22px;color:#89858f;padding:24px}
@media(max-height:560px){#taskDialog{padding:10px 14px}.task-dialog-header{margin-bottom:0}#taskForm label{margin-top:5px}#taskDescription{height:56px;min-height:48px}#taskForm .formactions{margin-top:6px}}
#tagDialog{padding:16px 18px;width:min(94vw,480px);max-height:calc(100dvh - 20px)}
.tag-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.tag-dialog-header h2{font-size:20px;margin:0}
#cancelTag{border:0;background:transparent;flex-shrink:0}
#tagForm>label{font-size:13px;margin:8px 0 5px}
#tagName{min-height:42px;padding:10px 13px;font-size:16px}
#tagChoices label,.tag-color-options label{box-sizing:border-box;flex:0 0 104px;width:104px;height:36px;min-height:36px;margin:0;padding:6px 10px;justify-content:flex-start;gap:6px;white-space:nowrap}
#tagChoices label span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#tagChoices input{flex-shrink:0;width:14px;height:14px;margin:0}
.tag-color-options{margin-top:14px;gap:8px}
.tag-color-options legend{font-size:13px;margin-bottom:10px}
.tag-color-options label{font-size:13px}
#tagForm .formactions{margin-top:14px}
#tagForm .formactions .primary{font-size:15px;min-height:44px;padding:10px 18px}
#taskForm .formactions .primary,#tagForm .formactions .primary{font-size:13px;line-height:20px;min-height:36px;padding:6px 12px;gap:6px}
#taskForm .formactions .primary .ui-icon,#tagForm .formactions .primary .ui-icon{width:16px;height:16px}