/* The page keeps its full width; navigation floats above it on every screen. */
html{scrollbar-gutter:stable}html.navigation-is-open{overflow:hidden}
.shell>.main{margin-left:0}
.topbar .mobile-menu{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;min-height:42px;padding:10px;flex:none;border-radius:50%;border:1px solid #ffffffd9;background:linear-gradient(145deg,#ffffffb3,#e5edf44d);box-shadow:inset 0 1px 1px #fff,0 3px 10px #233c5410;color:#455d78;transition:background .2s,transform .2s}
.topbar .mobile-menu:hover{background:#ffffffd9;transform:scale(1.04)}
.topbar .mobile-menu:active{transform:scale(.94)}
.shell>.sidebar,.client-mode .shell>.sidebar{display:flex;position:fixed;inset:12px auto 12px 12px;width:min(300px,calc(100vw - 28px));height:calc(100dvh - 24px);padding:24px 16px 16px;z-index:181;border-radius:28px;border:1px solid #ffffffdf;background:radial-gradient(ellipse at 0% 0%,#ffffffad,transparent 65%),linear-gradient(135deg,#f8fbffb5,#e9f0faa8);box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 1px #a7bbd263,0 24px 70px #20364f29,0 4px 14px #263d5912;backdrop-filter:blur(26px) saturate(1.65);-webkit-backdrop-filter:blur(26px) saturate(1.65);transform:translateX(calc(-100% - 28px)) scale(.97);transform-origin:left center;opacity:0;visibility:hidden;pointer-events:none;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .24s ease,visibility 0s .38s;overflow:hidden;isolation:isolate}
.shell>.sidebar.open{transform:translateX(0) scale(1);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.shell>.sidebar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:inset 2px 0 3px #ffffffab,inset -2px 0 4px #ffffff80;background:linear-gradient(120deg,#ffffff24,transparent 22%,transparent 80%,#ffffff40)}
.sidebar .mobile-nav-close{display:grid;place-items:center;position:absolute;top:15px;right:13px;width:36px;height:36px;min-height:36px;margin:0;padding:8px;border:1px solid #ffffffbd;border-radius:50%;background:#ffffff59;color:#50627a;box-shadow:inset 0 1px #fff}
.sidebar .mobile-nav-close .icon{width:17px;height:17px}
.shell>.sidebar .brand{padding:0 8px;margin:0 38px 20px 0;min-height:38px}
.shell>.sidebar .sidebar-navigation{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}
.shell>.sidebar .nav{min-height:42px}.shell>.sidebar .nav-section+.nav-section{margin-top:17px}
.shell>.mobile-nav-backdrop{display:block;position:fixed;inset:0;border:0;padding:0;z-index:180;background:#273f5b12;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .38s}
.shell:has(>.sidebar.open)>.mobile-nav-backdrop{display:block;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
@supports (backdrop-filter:url("#workroom-glass-lens")) and (not (-webkit-touch-callout:none)){.shell>.sidebar,.client-mode .shell>.sidebar{backdrop-filter:url("#workroom-glass-lens") blur(18px) saturate(1.65)}}
@media(max-width:760px){.shell>.sidebar,.client-mode .shell>.sidebar{inset:9px auto 9px 9px;height:calc(100dvh - 18px);padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.shell>.sidebar .nav{min-height:46px}.topbar .mobile-menu{width:38px;height:38px;min-height:38px;padding:9px}}
@media(max-height:750px){.shell>.sidebar .brand{margin-bottom:12px}.shell>.sidebar .nav-section+.nav-section{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.shell>.sidebar,.shell>.mobile-nav-backdrop,.topbar .mobile-menu{transition:none;transform:none}.shell>.sidebar:not(.open){transform:translateX(-110%)}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.shell>.sidebar,.client-mode .shell>.sidebar{background:#f3f6fc!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.shell>.sidebar::before{display:none}}

/* Solid navigation surfaces: compact shortcuts at rest, a full drawer on demand. */
.shell>.sidebar,.client-mode .shell>.sidebar{background:#f5f7fb!important;border-color:#dce2eb;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 24px 80px #172b4533,0 2px 8px #172b4514}
.shell>.sidebar::before{display:none}
.shell>.sidebar .workspace-pill{background:#e9edf5;color:#556378;border-color:#dce3ed}
.shell>.sidebar .mobile-nav-close{background:#e8edf4;border-color:#dbe2ec;color:#45516a;box-shadow:none}
.shell>.sidebar .nav,.client-mode .shell>.sidebar .nav{color:#455169;border:1px solid transparent;box-shadow:none;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.shell>.sidebar .nav:hover{background:#e9eef6;color:#243653}
.shell>.sidebar .nav.active,.client-mode .shell>.sidebar .nav.active{background:#e0eafb;border-color:#ccdcf4;color:#215eb9;box-shadow:none}
.sidebar .navigation-icon{width:20px;height:20px;flex-shrink:0}
.shell>.mobile-nav-backdrop{background:#18283d33}
.navigation-dock{display:none}
@media(min-width:761px){
 .shell>.main{margin-left:88px}
 .topbar .mobile-menu{display:none}
 .navigation-dock{display:flex;flex-direction:column;align-items:center;gap:5px;position:fixed;left:13px;top:50%;transform:translateY(-50%);width:66px;padding:10px 6px;border:1px solid #dce3ec;border-radius:24px;background:#f7f9fc;box-shadow:0 8px 28px #253d5710,0 1px 3px #253d5708;z-index:110;transition:opacity .18s,transform .25s}
 .shell:has(>.sidebar.open)>.navigation-dock{opacity:0;transform:translate(-12px,-50%);pointer-events:none}
 .dock-button{--dock-color:#476078;--dock-tint:#e9eef4;display:grid;place-items:center;position:relative;width:50px;height:50px;min-height:50px;padding:3px;border:0;border-radius:16px;background:transparent;color:var(--dock-color);cursor:pointer;transition:background .18s,transform .18s;outline-offset:3px}
 .dock-icon-tile{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:var(--dock-tint);border:1px solid color-mix(in srgb,var(--dock-color) 13%,transparent);box-shadow:inset 0 1px 0 #ffffffb3;transition:transform .18s,box-shadow .18s}
 .dock-button .navigation-icon{width:23px;height:23px}
 .dock-dashboard{--dock-color:#416ab4;--dock-tint:#e7eefb}.dock-todos{--dock-color:#48776d;--dock-tint:#e4f0eb}.dock-tasks{--dock-color:#7c5cac;--dock-tint:#eee7f8}.dock-projects{--dock-color:#9c7945;--dock-tint:#f4eddf}.dock-calendar{--dock-color:#aa6374;--dock-tint:#f6e8ed}.dock-inbox{--dock-color:#4b7c9c;--dock-tint:#e4eff7}.dock-analytics{--dock-color:#5b8191;--dock-tint:#e7eff1}
 .dock-button.is-active{background:var(--dock-tint)}
 .dock-button.is-active:before{content:"";position:absolute;width:3px;height:17px;left:-5px;border-radius:3px;background:var(--dock-color)}
 .dock-button.is-active .dock-icon-tile{background:var(--dock-color);color:#fff;border-color:transparent;box-shadow:0 3px 9px color-mix(in srgb,var(--dock-color) 22%,transparent)}
 .dock-button:hover .dock-icon-tile,.dock-button:focus-visible .dock-icon-tile{transform:translateX(2px);box-shadow:0 4px 12px #22344816}
 .dock-button:focus-visible{outline:2px solid #316fca}
 .dock-button:active{transform:scale(.94)}
 .dock-menu{height:44px;min-height:44px;color:#3c4b60}.dock-menu:hover{background:#e8edf4}
 .dock-divider{height:1px;width:28px;background:#dfe5ee;margin:2px 0 5px}
 .dock-tooltip{position:absolute;left:calc(100% + 15px);top:50%;transform:translate(-5px,-50%);padding:9px 13px;background:#263345;color:#fff;border:1px solid #ffffff1f;border-radius:10px;box-shadow:0 5px 16px #172c4522;font-size:12px;font-weight:550;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s}
 .dock-button:hover .dock-tooltip,.dock-button:focus-visible .dock-tooltip{opacity:1;visibility:visible;transform:translate(0,-50%)}
 .dock-indicator{position:absolute;right:6px;top:6px;width:6px;height:6px;border:2px solid #f7f9fc;background:var(--dock-color);border-radius:50%;box-sizing:content-box}
}
@media(min-width:761px) and (max-height:560px){.navigation-dock{gap:1px;padding-block:7px}.dock-button{height:44px;min-height:44px}.dock-menu{height:36px;min-height:36px}}
@media(min-width:761px) and (max-height:440px){.navigation-dock{display:none}.shell>.main{margin-left:0}.topbar .mobile-menu{display:inline-flex}}
@media(prefers-reduced-motion:reduce){.navigation-dock,.dock-button,.dock-icon-tile,.dock-tooltip{transition:none}}
@media(forced-colors:active){.navigation-dock,.dock-icon-tile,.dock-tooltip{border:1px solid ButtonText}.dock-button.is-active{outline:2px solid Highlight}.dock-button.is-active:before{background:Highlight}}
@media(min-width:761px){.navigation-dock:has(.dock-button:focus-visible) .dock-button:not(:focus-visible) .dock-tooltip{opacity:0;visibility:hidden}}
