/* Navigation uses the existing workbook palette and typography. */
body.lab-navigation { --lab-nav-width:232px; }
body.lab-nav-compact { --lab-nav-width:64px; }
.lab-navigation .main-container { margin-left:var(--lab-nav-width); }
.lab-navigation .nav-bg-bar { left:var(--lab-nav-width); width:calc(100% - var(--lab-nav-width)); }
.lab-navigation .nav-pill, .lab-navigation .nav-bg-logo { display:none; }

/* Page chrome that is fixed to the left edge would otherwise sit underneath
   the rail, which is the higher layer. A margin shifts it clear without
   touching the left offsets workbook.css sets per breakpoint, and collapses
   to nothing on mobile, where the rail is a drawer and the width is 0. */
.lab-navigation .agenda-bubble,
.lab-navigation .gallery-header,
.lab-navigation .weekly-review-footer { margin-left:var(--lab-nav-width); }

#lab-sidebar { position:fixed; inset:0 auto 0 0; width:var(--lab-nav-width); z-index:150; display:flex; flex-direction:column; padding:10px 10px 14px; box-sizing:border-box; background:var(--bg-secondary,#0f0f12); border-right:1px solid var(--border,#1a1a1f); color:var(--text,#f0f0f2); font:inherit; }

/* Brand. An explicit height, identical in both states, so collapsing cannot
   shift the list below it -- the reason the collapse control is no longer
   in here. */
.lab-nav-top { display:flex; align-items:center; height:44px; box-sizing:border-box; margin-bottom:8px; padding-bottom:10px; border-bottom:1px solid var(--border,#1a1a1f); }
.lab-nav-brand { display:flex; align-items:center; gap:10px; flex:1; min-width:0; height:100%; padding:0 6px; border:0; background:transparent; color:var(--text,#f0f0f2); font:inherit; font-size:14px; font-weight:600; text-align:left; border-radius:8px; cursor:pointer; }
.lab-nav-brand svg { width:22px; height:22px; flex-shrink:0; }
.lab-nav-brand:hover { background:rgba(255,255,255,.06); }

/* Collapse handle. It rides the rail's right border rather than sitting in
   the column, so it has no vertical footprint in either state and the rows
   below cannot move when it is toggled. Revealed on hover of the rail, and
   on keyboard focus, the way Figma and Jira handle the same control. */
.lab-nav-collapse { position:absolute; top:50%; right:-12px; z-index:1; display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin-top:-12px; padding:0; border:1px solid var(--border,#1a1a1f); border-radius:50%; background:var(--bg-card,#131316); color:rgba(255,255,255,.55); cursor:pointer; opacity:0; transition:opacity .15s ease, color .15s ease, border-color .15s ease; }
/* a bigger target than the dot it draws, so it is not a pixel hunt */
.lab-nav-collapse::before { content:''; position:absolute; inset:-14px -8px; }
.lab-nav-collapse svg { width:13px; height:13px; transition:transform .2s ease; }
#lab-sidebar:hover .lab-nav-collapse,
.lab-nav-collapse:hover,
.lab-nav-collapse:focus-visible { opacity:1; }
.lab-nav-collapse:hover { color:var(--text,#f0f0f2); border-color:rgba(255,255,255,.22); }
.lab-nav-compact .lab-nav-collapse svg { transform:rotate(180deg); }

/* the list. min-height:0 lets it scroll inside the flex column instead of
   pushing past the sidebar; nothing else here may grow, so the list keeps
   every pixel the brand does not use. */
.lab-nav-scroll { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:2px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.lab-nav-scroll::-webkit-scrollbar { width:6px; }
.lab-nav-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }

/* Rows use the top nav's own states -- neutral white tints, 18px icons --
   so the rail reads as the same control as the pill it replaced. */
.lab-nav-link { display:flex; align-items:center; gap:12px; width:100%; flex:0 0 auto; min-height:38px; padding:0 10px; box-sizing:border-box; border:0; background:transparent; color:var(--text-secondary,#a8a8b0); text-decoration:none; font:inherit; font-size:13.5px; text-align:left; border-radius:8px; cursor:pointer; transition:background .15s ease, color .15s ease; }
.lab-nav-link svg { width:18px; height:18px; flex-shrink:0; color:rgba(255,255,255,.5); transition:color .15s ease; }
.lab-nav-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lab-nav-link:hover { background:rgba(255,255,255,.06); color:var(--text,#f0f0f2); }
.lab-nav-link:hover svg { color:rgba(255,255,255,.7); }
.lab-nav-link.active { background:rgba(255,255,255,.1); color:var(--text,#f0f0f2); font-weight:500; }
.lab-nav-link.active svg { color:rgba(255,255,255,.95); }
.lab-inbox-count { margin-left:auto; font-size:11px; color:var(--text-secondary); }

/* compact: icons only, label shown as a tooltip on hover or keyboard focus */
.lab-nav-compact #lab-sidebar { padding:10px 8px 14px; }
.lab-nav-compact #lab-sidebar .lab-nav-brand { justify-content:center; padding:0; }
.lab-nav-compact #lab-sidebar .lab-nav-label { display:none; }
.lab-nav-compact #lab-sidebar .lab-nav-link { justify-content:center; padding:0; gap:0; }
.lab-nav-compact #lab-sidebar .lab-inbox-count { display:none; }

#lab-sidebar :focus-visible { outline:2px solid var(--primary,#06b6d4); outline-offset:-2px; }
#lab-nav-mobile,#lab-nav-scrim { display:none; }
.lab-focus-controls { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:24px; }
.lab-focus-controls small { flex-basis:100%; color:var(--text-secondary); font-size:12px; }
.lab-focus-controls select,.lab-focus-controls button,#lab-suggestions button { border:1px solid var(--border,#1a1a1f); background:var(--bg-card,#131316); color:var(--text,#f0f0f2); font:inherit; border-radius:8px; padding:7px 10px; cursor:pointer; }
#lab-suggestions { margin:24px 0; }
#lab-suggestions summary { color:var(--text-secondary); cursor:pointer; margin-bottom:12px; }
#lab-suggestions .lab-task-title { flex:1; background:transparent; border:0; text-align:left; }
#lab-suggestions small { color:var(--text-secondary); }
@media(max-width:760px) {
 /* The rail is a drawer here, so nothing is offset by it. Zeroing the width
    lets every rule above resolve to the app's own mobile geometry. */
 body.lab-navigation, body.lab-nav-compact { --lab-nav-width:0px; }
 .lab-navigation .nav-bg-bar { left:0; width:100%; }
 #lab-sidebar { width:232px; transform:translateX(-100%); z-index:10001; }
 #lab-sidebar.drawer-open { transform:none; }
 #lab-nav-mobile { display:block; position:fixed; left:16px; top:14px; z-index:160; padding:5px 10px; color:var(--text); background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }
 #lab-nav-scrim:not([hidden]) { display:block; position:fixed; inset:0; background:rgba(0,0,0,.6); border:0; z-index:10000; }
 .lab-nav-compact #lab-sidebar .lab-nav-label { display:block; }
 .lab-nav-compact #lab-sidebar .lab-nav-brand { justify-content:flex-start; padding:0 6px; }
 #lab-sidebar .lab-nav-collapse { display:none; }
 .lab-nav-compact #lab-sidebar .lab-nav-link { justify-content:flex-start; padding:0 10px; gap:12px; }
 #lab-suggestions .today-task-item { flex-wrap:wrap; }
}
.lab-search-excerpt { font-size:12px; color:var(--text-secondary); margin-top:4px; max-width:55ch; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#lab-search-status { font-size:12px; color:var(--text-secondary); padding:0 20px; }
#lab-project-context h3 { font-size:12px; margin-bottom:10px; }
.lab-link-dialog { color:var(--text); background:var(--bg-card,#131316); border:1px solid var(--border); border-radius:16px; width:min(600px,90vw); max-height:85vh; overflow:auto; padding:24px; font:inherit; }
.lab-link-dialog::backdrop { background:rgba(0,0,0,.65); }
.lab-link-dialog h2 { font-size:20px; }
.lab-link-dialog p { color:var(--text-secondary); line-height:1.5; margin:14px 0; }
.lab-link-dialog select,.lab-link-dialog textarea { display:block; width:100%; box-sizing:border-box; background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px; margin:12px 0; font:inherit; }
.lab-browse-link { color:var(--text-secondary); border:1px solid var(--border); border-radius:8px; padding:6px; background:transparent; cursor:pointer; }
.ideas-promote-dest-btns { flex-wrap:wrap; }
/* Tooltip for the collapsed rows. Fixed and body-level, positioned from
   JS, because the list it names is a scroll container and would clip it. */
.lab-nav-tip { position:fixed; transform:translateY(-50%); padding:6px 12px; background:rgba(0,0,0,.9); border:1px solid rgba(255,255,255,.1); color:var(--text,#f0f0f2); border-radius:8px; font-size:12px; white-space:nowrap; pointer-events:none; z-index:200; }
.lab-nav-tip[hidden] { display:none; }