/* V6.4: compact navigation and task views. --project-colour is a validated hex colour. */
.topbar{height:auto;min-height:64px;gap:16px;flex-wrap:nowrap}
.topactions{flex-wrap:nowrap;max-width:none;gap:10px}
.topactions .primary{white-space:nowrap}
.topmenu,.cardmenu{position:relative;flex:0 0 auto}
.topmenu>summary,.cardmenu>summary{list-style:none;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 12px;white-space:nowrap}
.topmenu>summary::-webkit-details-marker,.cardmenu>summary::-webkit-details-marker,.treecreate>summary::-webkit-details-marker{display:none}
.topmenu>summary:after{content:' ▾';color:var(--muted)}
.topmenu .menubody,.cardmenu .menubody{position:absolute;right:0;top:calc(100% + 5px);z-index:50;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 28px #12242c26;padding:10px;display:grid;gap:7px}
.topmenu .menubody a,.cardmenu .menubody a{display:block;color:#185f70;text-decoration:none;padding:6px 8px}
.topmenu .menubody label{display:grid;gap:6px;font-size:12px}
.topmenu .menubody select{width:100%;max-width:180px}
.topmenu .zoomctl{display:flex;min-width:0;grid-template-columns:none}
.topmenu .zoomctl button{width:32px;min-width:32px}
.cardmenu>summary{font-weight:800;font-size:21px;line-height:18px;min-width:38px;text-align:center}
.cardmenu button{border:0;background:#f0f5f6;color:#185f70;padding:8px;cursor:pointer;text-align:left;border-radius:6px}
.cardmenu form{display:grid;gap:5px}
.accountmenu>summary{background:#edf3f5}
.attentionlink{white-space:nowrap;color:#185f70;text-decoration:none;font-weight:700;font-size:13px}
.attentionlink b{background:#b94c30;color:#fff;border-radius:999px;padding:3px 7px}

.taskfilters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:0 0 15px;padding:12px;position:relative}
.taskfilters .filtersearch{flex:1;min-width:210px;display:grid;gap:4px;font-size:12px;font-weight:700}
.taskfilters input[type=search]{width:100%;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:8px}
.taskfilters .filterdrawer{position:relative}
.taskfilters .filterdrawer>summary{list-style:none;cursor:pointer;padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:#fff}
.filterdrawer>summary::-webkit-details-marker{display:none}
.filterdrawer>summary:after{content:' ▾'}
.filterfields{position:absolute;right:0;top:calc(100% + 5px);z-index:12;width:min(760px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 28px #172d3830;padding:15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.filterfields label{display:grid;gap:5px;font-size:12px;font-weight:650}
.filterfields select,.filterfields input{width:100%;min-width:0;padding:8px;border:1px solid var(--line);border-radius:7px}
.filterfields .filtercheck{align-self:end;display:flex;align-items:center;gap:5px;min-height:40px}
.filterfields .filtercheck input{width:auto}
.clearfilters{font-size:13px;color:#266f7f;padding:10px}

.workcard,.weekevent,.monthevent,.attentionitem{background:color-mix(in srgb,var(--project-colour,#8797a0) 10%,white);border-left:4px solid var(--project-colour,#8797a0)}
.workcard{display:block;color:inherit;text-decoration:none}
.scheduledcard{background:color-mix(in srgb,var(--project-colour,#8797a0) 10%,white);border-left-color:var(--project-colour,#8797a0)}
.tablewrap tbody tr{background:color-mix(in srgb,var(--project-colour,#8797a0) 7%,white)}
.tablewrap tbody tr td:first-child{border-left:4px solid var(--project-colour,#8797a0)}
.tablewrap th a{color:inherit;text-decoration:none}
.tablewrap th a:hover{text-decoration:underline}
.historyrow .dot{background:var(--project-colour,#8797a0)}
.historyrow a{color:inherit;text-decoration:none}
.historyrow a:hover{text-decoration:underline}
.taskdetailgrid>.panel:first-child{border-top:5px solid var(--project-colour,#8797a0)}

.attentionpanel{margin-bottom:18px;border-left:4px solid #bd603a}
.attentionpanel h2{display:flex;align-items:center;gap:10px}
.attentionpanel h2 small{font-size:12px;background:#f8e7e1;border-radius:20px;padding:3px 8px}
.attentiongrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.attentionitem{display:grid;gap:3px;text-decoration:none;color:var(--ink);padding:9px;border-radius:8px}
.attentionitem b{color:#8c402f;font-size:12px}.attentionitem small{color:var(--muted)}
.reminderitem{margin-bottom:8px;max-width:390px}.reminderitem a{color:#185f70;font-weight:700;text-decoration:none}
.reminderactions{display:flex;gap:5px}.reminderactions button{font-size:11px;padding:4px 7px;border:1px solid #c9d9de;border-radius:5px;background:#fff;cursor:pointer}

.calendarcontrols{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.calendarcontrols a{color:#216b7b;text-decoration:none}.calendarcontrols strong{margin-right:auto}
.calendarcontrols .scope a{color:#59666d}.calendarcontrols .scope a.on{color:#1d6876}
.weeklayout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px}
.weekscroll{display:flex;min-width:0;overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:10px}
.weekruler{flex:0 0 48px;color:var(--muted);font-size:11px;text-align:right}
.weekruler .dayhead{height:64px;padding:10px 5px}
.rulerslot{height:34px;padding:0 5px;border-top:1px solid #f0f3f5}
.weekgrid{flex:1;display:grid;grid-template-columns:repeat(7,minmax(135px,1fr));gap:0;overflow:visible;font-size:12px}
.daycol{min-height:0;border-radius:0;border:0;border-left:1px solid var(--line)}
.dayhead{height:64px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:5px}
.dayhead .duecount{color:#a74d2c;width:100%;font-size:10px}
.daytimeline{height:calc(var(--slots)*34px);position:relative}
.weekslot{height:34px;border-top:1px solid #edf1f3;cursor:copy}
.weekslot:nth-of-type(odd){background:#fafcfc}
.weekslot.dragover,.slotdrop.dragover{background:#d4eef0;outline:2px solid #2b91a4}
.weekevent{position:absolute;top:calc(var(--minute)*1.133333px);left:calc(var(--lane-left) + 3px);width:calc(var(--lane-width) - 6px);height:max(33px,calc(var(--duration)*1.133333px));padding:4px 5px;border-radius:6px;overflow:hidden;color:var(--ink);text-decoration:none;z-index:2;box-shadow:0 1px 3px #17323b2b;cursor:grab;font-size:11px}
.weekevent small{font-size:10px;line-height:1.2}
.weekdue{padding:5px;display:grid;gap:4px}
.weekdue a{border-left:3px solid var(--project-colour);color:#33444c;background:#fff7e8;font-size:11px;text-decoration:none;padding:3px 5px}
.backlog{max-height:680px;overflow:auto}

.monthscroll{overflow-x:auto}
.monthgrid{display:grid;grid-template-columns:repeat(7,minmax(125px,1fr));min-width:875px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.monthweekday{text-align:center;font-size:12px;font-weight:700;padding:9px;background:#eaf1f3}
.monthday{min-height:118px;border-top:1px solid var(--line);border-right:1px solid var(--line);padding:6px;min-width:0}
.monthday.outside{background:#f6f8f9;color:#7a878d}
.monthdate{font-weight:700;color:inherit;text-decoration:none;display:inline-block;margin-bottom:5px}
.monthevent{display:block;text-decoration:none;color:var(--ink);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;padding:4px 5px;border-radius:4px}
.monthevent.dueevent{background:color-mix(in srgb,var(--project-colour) 6%,#fff2dc);font-style:italic}

.projectrow{background:color-mix(in srgb,var(--project-colour) 8%,white)}
.projectactions{position:relative}
/* Open project menus must clear the card below, including for nested projects. */
.projectlist>.projectcard{overflow:visible}
.projectlist>.projectcard:focus-within,.projectlist>.projectcard:has(.cardmenu[open]){z-index:5}
.projectlist>.projectcard .projectstripe{border-radius:12px 12px 0 0}
.treefilters{margin-bottom:8px}.treefilters form{display:flex;align-items:center;gap:8px;font-size:12px}
.treefilters select{width:auto;min-width:175px;padding:7px}
.treepanel{padding:12px}
.treegroup{font-size:13px;color:#52636c;text-transform:uppercase;letter-spacing:.08em;margin:15px 0 5px;padding:6px;border-bottom:1px solid var(--line)}
.treeentry{position:relative;min-width:0}
.treefold>summary{list-style:none;display:flex;align-items:center;gap:7px;min-height:40px;padding:5px 215px 5px 7px;cursor:pointer;border-radius:7px;background:color-mix(in srgb,var(--project-colour,#8797a0) 7%,white)}
.treefold>summary::-webkit-details-marker{display:none}
.treefold>summary:before{content:'▸';font-size:12px;color:#58717d;flex:0 0 10px}
.treefold[open]>summary:before{content:'▾'}
.treefold>summary small{margin-left:auto;white-space:nowrap;color:#60747e;font-size:11px}
.treefold .treelink{color:inherit;text-decoration:none;font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.treefold .treelink:hover{text-decoration:underline}
.treeglyph{color:#425d68;font-size:15px;flex:0 0 18px}
.treecolour{background:var(--project-colour,#8797a0);width:8px;height:8px;flex:0 0 8px}
.treechildren{border-left:1px solid #d9e3e7;margin-left:17px;padding-left:12px}
.treeactions{position:absolute;top:3px;right:5px;display:flex;gap:5px;align-items:center}
.treecreate{position:relative}
.treecreate>summary{list-style:none;cursor:pointer;border:1px solid #d3e1e5;background:#fff;color:#236979;padding:5px 7px;border-radius:6px;font-size:11px;white-space:nowrap}
.treecreate form{position:absolute;right:0;top:calc(100% + 3px);width:min(340px,calc(100vw - 40px));z-index:15;background:#fff;border:1px solid var(--line);box-shadow:0 10px 20px #152b3430;padding:10px;border-radius:8px;display:flex;gap:6px;flex-wrap:wrap}
.treecreate form input{flex:1;min-width:155px;padding:7px}.treecreate form select{width:80px}
.treecreate form button{font-size:12px;padding:7px}
.treeactions .cardmenu>summary{padding:5px 7px;font-size:16px;min-width:30px}
.treeactions .cardmenu .menubody{min-width:150px}

@media(max-width:1100px){.topbar{flex-wrap:wrap;padding:8px 14px}.topactions{flex-wrap:wrap}.weeklayout{grid-template-columns:1fr}.weekscroll{max-height:700px}.backlog{max-height:none}}
@media(max-width:700px){.filterfields{grid-template-columns:repeat(2,minmax(0,1fr));right:auto;left:0}.treefold>summary{padding-right:7px;flex-wrap:wrap}.treefold>summary small{display:none}.treeactions{position:static;padding:2px 0 5px 35px}.monthday{min-height:100px}}