/* Shared columns align Favorites with the assistant, and Search with quick capture. */
body{--sidebar-width:264px;grid-template-columns:var(--sidebar-width) 316px minmax(0,1fr)}
body[data-view=graph]{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
body.layout-editor,body.focus{grid-template-columns:minmax(0,1fr)}body.layout-notes{grid-template-columns:316px minmax(0,1fr)}
.sidebar{padding-left:12px;padding-right:12px;min-height:0}.sidebar .titlebar{min-height:44px;height:44px;padding:0}.sidebar .titlebar-actions{display:none}.sidebar-brand-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;align-items:center;margin:0 6px 20px}.sidebar-brand-row .brand{margin:0;padding:0;min-width:0}.sidebar-brand-row .brand-logo{width:85px;height:auto}.sidebar-action{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--ink);flex-shrink:0}.sidebar-action svg{width:21px;height:21px}.sidebar-action:hover{background:var(--hover)}.sidebar-action.active{background:var(--btn)}
.sidebar-new-pill{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;align-items:center;padding-right:6px;margin:0 0 26px;background:var(--raised);border-radius:30px;box-shadow:var(--raised-shadow);min-height:48px}.sidebar-new-pill .new-note{padding:0 0 0 12px;min-height:48px;min-width:0;white-space:nowrap;font-size:14px;gap:9px;margin:0;background:none;box-shadow:none;border:0}.sidebar-new-pill .new-dot{width:25px;height:25px;min-width:25px}.sidebar-new-pill .new-dot svg{width:15px;height:15px}.sidebar-new-pill #sidebar-assistant{position:relative}.sidebar-new-pill #sidebar-assistant:before{content:'';position:absolute;left:-5px;top:12px;height:22px;border-left:1px solid var(--sep)}
.sidebar nav{margin:0 0 20px}.sidebar .nav{padding:10px 14px;min-height:42px;font-size:14px;gap:14px;margin:1px 0}.sidebar .nav svg{width:21px;height:21px;flex:none}.sidebar-explore{margin-bottom:22px}.sidebar-explore .section-label{margin:0 14px 12px;font-size:10px;letter-spacing:.02em}.sidebar-explore .nav{width:100%;text-align:left}.sidebar .nav-label{flex:1;display:flex;align-items:center}.sidebar-count{margin-left:auto;font-size:12px;color:var(--muted)}.sidebar-scroll{min-height:0;overflow:auto;flex:1}.sidebar .notebook-label{margin:0 12px 8px}.sidebar .folder{min-height:42px;font-size:14px;padding:8px 14px}.sidebar .folder .notebook-name{font-size:14px}.sidebar .folder .swatch{width:23px;height:23px;border-radius:7px;font-size:13px}.sidebar-more>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:10px 14px;min-height:44px;color:var(--sub);font-size:14px;cursor:pointer}.sidebar-more>summary::-webkit-details-marker{display:none}.sidebar-more>summary svg{width:21px;height:21px}.sidebar-more>summary svg:last-child{margin-left:auto;width:15px}.sidebar-more[open]>summary svg:last-child{transform:rotate(180deg)}.sidebar-more-body .section-label{margin:18px 14px 8px}.sidebar-more-body #smart-views .nav,.sidebar-more-body>.nav{font-size:13px}.sidebar-appearance{padding:10px 14px;color:var(--sub);font-size:12px}.sidebar-appearance>summary{cursor:pointer}.sidebar-appearance .space-controls{margin-top:10px}.sidebar-appearance .tint-row{margin-top:12px}
.workspace-footer{position:relative;display:flex;align-items:center;gap:6px;border-top:1px solid var(--sep);padding:12px 2px 8px;margin-top:16px;background:var(--app);flex-shrink:0}#workspace-menu{display:flex;align-items:center;gap:10px;flex:1;min-height:44px;padding:0 8px;font-size:14px;text-align:left;border-radius:10px}#workspace-menu>svg:first-child{width:23px;height:23px}#workspace-menu>svg:last-child{width:13px;color:var(--muted)}#workspace-menu:hover{background:var(--hover)}.workspace-popover{position:absolute;bottom:74px;left:0;right:0;padding:6px;background:var(--sheet);border:1px solid var(--sep);box-shadow:var(--pop-shadow);border-radius:16px;z-index:90}.workspace-popover button{display:flex;align-items:center;gap:10px;min-height:40px;width:100%;border-radius:10px;padding:9px 10px;text-align:left;font-size:12px}.workspace-popover button:hover,.workspace-popover button[aria-current=true]{background:var(--hover)}.workspace-popover button small{margin-left:auto;font-size:10px;color:var(--muted)}.workspace-divider{border-top:1px solid var(--sep);margin:5px 8px}
/* A single footer row: active workspace, dark mode, colour and Settings. */
.workspace-footer-slim{gap:4px;padding:10px 0 0;margin-top:14px;min-height:53px}
.workspace-footer-slim #workspace-menu{gap:7px;min-width:0;min-height:38px;font-size:13px;padding:0 3px}
.workspace-footer-slim #workspace-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-footer-slim #workspace-menu>svg:first-child{width:19px;height:19px}
.workspace-footer-slim #workspace-menu>svg:last-child{width:12px;height:12px}
.workspace-actions{display:flex;align-items:center;gap:3px;flex:none}
.workspace-actions #theme,.workspace-actions #settings,.workspace-actions #titlebar-help{display:flex;align-items:center;justify-content:center;width:31px;height:38px;border-radius:10px;color:var(--icon-fg);margin:0;padding:0}
.workspace-actions #theme:hover,.workspace-actions #settings:hover,.workspace-actions #titlebar-help:hover{background:var(--hover)}
.workspace-actions #theme svg,.workspace-actions #settings svg,.workspace-actions #titlebar-help svg{width:19px;height:19px}
.workspace-actions .color-switch{width:34px;height:22px;margin:0 2px}
.workspace-actions .color-switch[aria-checked=true] span{transform:translateX(12px)}
.workspace-footer-slim .workspace-popover{bottom:56px;padding:6px;border-radius:14px}
.workspace-option{display:flex;align-items:center;border-radius:9px;min-height:42px;padding:0 4px}
.workspace-option.is-active{background:var(--hover)}
.workspace-option .workspace-pick{flex:1;min-width:0;width:auto;padding:9px 6px;gap:9px;font-size:13px;background:transparent}
.workspace-pick>svg:first-child{width:19px;height:19px;color:var(--icon-fg)}
.workspace-pick span{flex:1}.workspace-pick>svg:last-child:not(:first-child){width:15px;height:15px}
.workspace-option .workspace-edit{width:30px;min-height:30px;flex:0 0 30px;padding:6px;margin-left:3px;border-left:1px solid var(--sep);border-radius:0 7px 7px 0;color:var(--muted)}
.workspace-edit svg{width:15px;height:15px}
/* Full-width header backgrounds and titles move the window; controls keep their normal input. */
.sidebar-brand-row,.note-list .list-header,main .toolbar,.view-head,.connections-toolbar,#assistant>header{-webkit-app-region:drag}
:is(.sidebar-brand-row,.list-header,main .toolbar,.view-head,.connections-toolbar,#assistant>header) :is(button,input,textarea,select,a,[role=button],[contenteditable=true],.chrome-pill,.connections-search){-webkit-app-region:no-drag}

/* Keep the wordmark on the same compact header row as the iPad, on the Mac and on Windows. */
.sidebar .titlebar{min-height:14px;height:14px;margin:0}
.platform-mac .window-controls{top:8px}
/* Off the Mac the footer also holds Help, so its buttons sit closer together and the workspace name still fits. */
:is(.platform-windows,.platform-linux) .workspace-actions{gap:0}
:is(.platform-windows,.platform-linux) .workspace-actions :is(#theme,#settings,#titlebar-help){width:28px}
:is(.platform-windows,.platform-linux) .workspace-footer-slim #workspace-menu>svg:last-child{display:none}
/* Short windows: the whole sidebar scrolls (footer stays put) instead of squeezing Notebooks and More into 20px. */
@media(max-height:900px){.sidebar{overflow-y:auto!important;overflow-x:hidden}.sidebar .sidebar-scroll{flex:0 0 auto!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding-bottom:8px}.sidebar .workspace-footer{position:sticky;bottom:0;margin-top:auto;z-index:2}}
.sidebar .drop-target{background:var(--accent,rgba(0,0,0,.08))!important;outline:2px dashed var(--muted,#999);outline-offset:-2px;border-radius:12px}

/* Narrow windows (half a laptop screen): the sidebar steps aside for the note list; Show Sidebar swaps them. */
@media(max-width:999px){
body:not(.narrow-sidebar)>.sidebar{display:none}
body:not(.narrow-sidebar):not(.layout-editor):not(.focus):not(.with-assistant):not([data-view=graph]){grid-template-columns:316px minmax(0,1fr)}
body:not(.narrow-sidebar):not(.layout-editor):not(.focus) .list-header{padding-left:24px;padding-top:30px}
body:not(.narrow-sidebar)[data-view=graph]:not(.with-assistant){grid-template-columns:minmax(0,1fr)}
body:not(.narrow-sidebar)[data-view=graph] main .toolbar,body.with-assistant:not(.narrow-sidebar) main .toolbar{padding-left:104px}
body.with-assistant:not(.narrow-sidebar):not(.layout-editor):not(.focus){grid-template-columns:minmax(0,1fr) 300px}
body.narrow-sidebar:not(.layout-editor):not(.focus):not(.with-assistant){grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
body.narrow-sidebar>.note-list{display:none}
}
#show-sidebar{display:none;margin:0 6px 0 -4px;flex:none}
@media(max-width:999px){body:not(.narrow-sidebar):not(.layout-editor) #show-sidebar{display:inline-flex}}
body.layout-notes:not(.focus) #show-sidebar{display:inline-flex}
body.layout-notes:not(.focus) .list-header{padding-left:24px;padding-top:30px}
#list-title{min-width:0;flex:0 1 auto}.list-title-row>.count-pill,.list-title-row>.list-actions{flex:none}
/* Long note lists: cards off screen are not laid out or painted until scrolled to (10,000+ notes stay quick). */
#notes>.note-card{content-visibility:auto;contain-intrinsic-size:auto 132px}