#desktopDateCalendar[hidden]{display:none!important}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
 .desktop-dates>main{position:relative}
 .desktop-dates #taskPage,.desktop-dates main>#listOptions{align-self:flex-start}
 .desktop-dates #dateViewTools{display:none}
 #desktopDateCalendar{position:absolute;top:174px;right:40px;width:300px;height:auto;max-height:calc(100dvh - 210px);min-height:0;overflow-y:auto;padding:18px;background:#fff;border:1px solid #e7e0ef;border-radius:18px;box-shadow:none;scrollbar-width:none}
 #desktopDateCalendar::-webkit-scrollbar{display:none}
 #desktopDateCalendar .dates-calendar-title{margin-bottom:14px}
 #desktopDateCalendar .dates-calendar-title h2{font-size:14px}
 #desktopDateCalendar #closeDatesCalendar{display:none}
 #desktopDateCalendar .calendar-header{margin-bottom:10px}
 #desktopDateCalendar #datesCalendarDays{gap:4px}
}
/* Reserve a real grid column for the calendar; never float it over task rows. */
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
 .layout.desktop-dates>main{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:24px;row-gap:8px}
 .desktop-dates .page-nav{grid-column:1/-1;grid-row:1;justify-self:center;margin-bottom:14px}
 .desktop-dates #activeTagFilter{grid-column:1;grid-row:2}
 .desktop-dates #offlineStatus{grid-column:1;grid-row:2}
 .layout.desktop-dates main>#listOptions{grid-column:1;grid-row:3;width:100%;align-self:start;margin:0}
 .layout.desktop-dates #taskPage{grid-column:1;grid-row:4;width:100%;max-width:100%;min-width:0;min-height:0;align-self:stretch}
 .desktop-dates #desktopDateCalendar{grid-column:2;grid-row:3/5;position:static;inset:auto;width:300px;height:auto;max-height:100%;align-self:start;box-sizing:border-box}
 .desktop-dates .legal-links{grid-column:1/-1;grid-row:5}
 .desktop-dates #matrixPage,.desktop-dates #settingsPage{grid-column:1/-1}
}