:root{--bg-primary:#171717;--bg-secondary:#101010;--bg-tertiary:#262626;--text-primary:#f7f7f3;--text-secondary:#c5c5bf;--text-muted:#aaa;--accent:#ed766b;--accent-dim:#d75c53;--border:#52524e;--code-bg:#242424;--link:#f28b80}
[data-theme="light"]{--bg-primary:#f2f2ee;--bg-secondary:#fff;--bg-tertiary:#eaeae5;--text-primary:#0c0c0b;--text-secondary:#555550;--text-muted:#696963;--accent:#b72e27;--accent-dim:#98241f;--border:#c2c2bc;--code-bg:#f0f0eb;--link:#a52822}
body{font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}button,input,select,textarea{font:inherit}button{border-radius:0!important;box-shadow:none!important;min-height:40px}button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}button:not(:disabled){cursor:pointer}.brandbar{height:76px;padding:0 32px;border-bottom:3px solid var(--text-primary);display:flex;align-items:center;gap:28px;background:var(--bg-secondary)}.brand{font-weight:800;font-size:30px;letter-spacing:-1.5px;display:flex;align-items:center;gap:10px}.fmt-mark{color:var(--accent);font-size:40px;font-weight:400}.wordmark{font-size:14px;letter-spacing:2px;font-weight:700;margin-left:auto}.wordmark span{color:var(--accent)}.focus-toggle{background:transparent;color:var(--text-primary);border:1px solid var(--border);padding:6px 12px;font-size:14px}.projectbar{min-height:80px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 32px;border-bottom:1px solid var(--border)}.projectbar>div{display:flex;align-items:center;gap:24px;min-width:0}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.7px;color:var(--accent);display:block}.projectbar strong{font-size:26px;letter-spacing:-1px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.local-note{font-size:13px;color:var(--text-secondary)}.app{grid-template-columns:var(--sidebar-width,280px) minmax(0,1fr) 270px;min-height:calc(100dvh - 156px)}.app.focus-hidden{grid-template-columns:var(--sidebar-width,280px) minmax(0,1fr)}.sidebar{height:calc(100dvh - 156px);top:0;border-right:1px solid var(--text-primary)}.sidebar-header{padding:24px 20px}.sidebar-header h1{font-family:Arial,Helvetica,sans-serif;font-size:14px;letter-spacing:1.8px;font-weight:700}.sidebar-header-top{gap:8px}.header-btn{background:transparent;border:1px solid var(--border);color:var(--text-primary)}.folder-btn,.refresh-btn,.new-file-btn,.clear-db-btn{font-family:Arial,Helvetica,sans-serif;font-size:14px;border:1px solid var(--border);border-radius:0}.folder-btn{background:var(--text-primary);color:var(--bg-secondary);border-color:var(--text-primary)}.new-file-btn{background:transparent;color:var(--text-primary);border-color:var(--text-primary);margin-top:10px}.new-file-btn:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--accent)}.folder-actions{margin-top:24px}.folder-tag{border-radius:0;font-size:13px}.file-list{padding:12px}.tree-file,.tree-folder-header,.file-item{font-family:Arial,Helvetica,sans-serif;font-size:14px;border-radius:0;min-height:38px}.tree-file.active,.file-item.active{border-left:3px solid var(--accent);background:var(--bg-tertiary);color:var(--text-primary)}.empty-state{font-family:Arial,Helvetica,sans-serif;font-size:14px;color:var(--text-secondary);padding:24px 12px;text-align:left}.sidebar-footer{padding:16px 20px}.clear-db-btn{background:transparent;color:var(--text-secondary)}.main{min-width:0;padding:28px;max-width:none}.content{max-width:950px;margin:0 auto;padding:28px;background:var(--bg-secondary);border:1px solid var(--text-primary);min-height:calc(100dvh - 212px)}.welcome{align-items:flex-start;text-align:left;justify-content:center;min-height:480px;padding:24px 8px}.welcome>svg{display:none}.welcome .eyebrow{margin-bottom:20px}.welcome h2{font-family:Arial,Helvetica,sans-serif;font-weight:500;font-size:clamp(40px,4.6vw,70px);line-height:1.04;letter-spacing:-2.6px;margin-bottom:26px}.welcome p{font-family:Georgia,serif;font-size:19px;max-width:460px;line-height:1.55;color:var(--text-secondary)}.start-folder{margin-top:30px;background:var(--text-primary);color:var(--bg-secondary);padding:14px 20px;border:1px solid var(--text-primary);display:flex;align-items:center;gap:42px;font-weight:600}.welcome p.welcome-note{font-family:Arial,sans-serif;font-size:13px;margin-top:18px}.focus-panel{background:#090909;color:#f4f4ee;padding:32px 26px;min-width:0}.focus-panel[hidden]{display:none}.focus-panel>.eyebrow{color:#e7786d;margin:3px 0 38px}.focus-panel label{display:block;color:#e7786d;font-size:12px;font-weight:700;letter-spacing:1.5px;margin-bottom:14px}.focus-panel textarea{width:100%;resize:vertical;background:transparent;color:#f4f4ee;border:0;border-bottom:1px solid #51514d;border-radius:0;padding:0 0 24px;font-family:Georgia,serif;font-size:22px;line-height:1.45;min-height:150px;margin-bottom:28px}.focus-panel textarea::placeholder{color:#aaa9a1}.focus-panel textarea#focusNext{font-family:Arial,sans-serif;font-size:16px}.focus-panel p{font-size:12px;color:#aaa9a1}.markdown-content{font-family:Georgia,serif;font-size:18px;line-height:1.8}.markdown-content h1,.markdown-content h2,.markdown-content h3{font-family:Arial,sans-serif;color:var(--text-primary);letter-spacing:-.7px;line-height:1.2}.markdown-content h1{font-size:38px}.edit-btn,.save-btn,.cancel-btn{font-family:Arial,sans-serif;font-size:14px}.save-btn{background:var(--text-primary);color:var(--bg-secondary)}.wysiwyg-toolbar{flex-wrap:wrap;border-radius:0}.wysiwyg-toolbar button{color:var(--text-primary)}.wysiwyg-editor{min-height:380px}.editor-shortcut-hint,.editor-status{font-size:12px}.search-palette{border-radius:0;border:1px solid var(--text-primary)}.search-palette-input{font-family:Arial,sans-serif;font-size:18px}.search-palette-item-path{font-size:14px}.search-palette-item-preview,.search-palette-footer{font-size:13px}.loader-text,.loader-count{font-size:13px}.file-path-heading{font-size:13px;color:var(--text-secondary);overflow-wrap:anywhere;margin-right:auto;align-self:center}.mobile-toggle{border-radius:0}.markdown-content pre{max-width:100%;overflow:auto}.markdown-content table{display:block;overflow:auto}
@media(min-width:769px){.sidebar{position:sticky}.focus-panel{height:calc(100dvh - 156px);position:sticky;top:0;overflow:auto}}
@media(max-width:1100px){.app{grid-template-columns:240px minmax(0,1fr) 230px}.app.focus-hidden{grid-template-columns:240px minmax(0,1fr)}.main{padding:18px}.content{padding:22px}.focus-panel{padding:28px 20px}.sidebar-header{padding:20px 16px}.welcome h2{font-size:48px}.local-note{display:none}}
@media(max-width:900px){.app,.app.focus-hidden{grid-template-columns:240px minmax(0,1fr)}.focus-panel{position:fixed;right:0;top:156px;bottom:0;width:280px;z-index:30;box-shadow:-8px 0 24px #0002}}
@media(max-width:768px){.brandbar{height:68px;padding:0 16px 0 64px;gap:12px}.brand{font-size:24px}.fmt-mark{font-size:30px}.wordmark{font-size:12px;letter-spacing:1px}.focus-toggle{font-size:12px;padding:6px}.projectbar{padding:12px 20px;min-height:72px}.projectbar>div{gap:16px}.projectbar strong{font-size:23px}.app,.app.focus-hidden{display:block;min-height:calc(100dvh - 140px)}.sidebar{position:fixed;top:0;left:-280px;height:100dvh;width:280px;max-width:85vw;z-index:110}.sidebar.open{left:0}.main{padding:16px}.content{padding:22px;min-height:calc(100dvh - 172px)}.welcome{min-height:420px;padding:18px 0}.welcome h2{font-size:52px}.welcome p{font-size:18px}.welcome .eyebrow{font-size:11px}.mobile-toggle{top:15px;left:14px;min-height:38px;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);z-index:111}.focus-panel{top:140px;height:calc(100dvh - 140px);width:min(320px,100%)}.markdown-content h1{font-size:30px}.content.editing{padding:14px}.overlay{z-index:105}.projectbar .eyebrow{font-size:11px}}
@media(max-width:390px){.wordmark{display:none}}
.new-target{display:block;font-size:12px;color:var(--text-secondary);margin-top:16px}.new-target[hidden]{display:none}.new-target select{display:block;width:100%;margin-top:6px;border:1px solid var(--border);border-radius:0;padding:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:14px}.file-actions button[aria-pressed="true"]{opacity:1;background:var(--text-primary);color:var(--bg-secondary);border-color:var(--text-primary)}.delete-file-btn{color:var(--accent);border-color:var(--accent)}.file-path-heading{flex-basis:100%}.file-dialog{--wp-dialog-width:480px}.file-dialog p{margin-bottom:16px;overflow-wrap:anywhere}.file-dialog [role="alert"]{color:var(--accent)}.file-dialog select{background:var(--bg-secondary);color:var(--text-primary)}
.file-dialog:has(.document-source-field){--wp-dialog-width:560px}.file-dialog:not(.document-connections-dialog) .document-source-field{border:1px solid var(--border);padding:12px;margin:0 0 18px;min-width:0}.file-dialog:not(.document-connections-dialog) .document-source-field legend{font-weight:700;padding:0 6px}.file-dialog .document-source-list{max-height:160px;overflow:auto;display:grid;gap:4px}.file-dialog .document-source-list label{display:flex;align-items:flex-start;gap:8px;font-weight:400;margin:0;overflow-wrap:anywhere}.file-dialog .document-source-list input{flex:none;margin-top:5px}.file-dialog .document-source-list p,.file-dialog .document-connection-note{font-size:13px;color:var(--text-secondary);margin:4px 0}.file-dialog:has(.document-source-field) form>label{display:block;font-weight:700;margin:0 0 14px}.file-dialog:has(.document-source-field) form>label select{display:block;width:100%;margin-top:6px;padding:9px;border:1px solid var(--border)}
.focus-toggle[hidden]{display:none}#documentOutline{display:flex;flex-direction:column;gap:4px}#documentOutline button{display:block;width:100%;text-align:left;background:transparent;color:#efefe9;border:0;border-left:2px solid transparent;font-size:14px;line-height:1.45;padding:10px 8px;overflow-wrap:anywhere}#documentOutline button:hover,#documentOutline button[aria-current]{background:#242424;border-left-color:#e7786d}#documentOutline button:focus-visible{outline-color:#e7786d}.markdown-content :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:24px}
/* Keep document actions in their own row, above the separator. */
.content-header{position:relative;top:auto;right:auto;z-index:auto;background:var(--bg-secondary)}
.content-header .edit-btn,.content-header .cancel-btn{background:var(--bg-tertiary);transition:color .15s,border-color .15s,background-color .15s}
.content-header .edit-btn:hover:not(:disabled),.content-header .cancel-btn:hover:not(:disabled){background:var(--bg-secondary);color:var(--accent);border-color:var(--accent)}
.content-header .save-btn,.content-header .save-btn:hover{background:var(--text-primary);color:var(--bg-secondary)}
.content-header .file-actions button[aria-pressed="true"]{background:var(--text-primary);color:var(--bg-secondary)}
.content-header .file-path-heading{display:block;width:100%;min-width:0;flex:0 0 100%;height:20px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.content.editing{max-width:950px;padding:28px}
@media(max-width:1100px){.content.editing{padding:22px}}
/* Place the document menu across the masthead rule at a stable position. */
@media(min-width:1101px){
 .content-header .file-path-heading{order:-2;margin:0;height:20px;line-height:20px}
 .content-header .file-actions button{white-space:nowrap;background:var(--bg-tertiary)}
 .content-header .file-actions button:hover:not(:disabled){background:var(--bg-secondary)}
 .content-header .file-actions button[aria-pressed="true"]{background:var(--text-primary);color:var(--bg-secondary)}
 .content-header>.save-btn,.content-header>.cancel-btn{margin-top:-20px}
}
.project-navigation{display:flex;align-items:center;gap:20px;flex:1;justify-content:center}.project-navigation button{width:44px;height:44px;border:1px solid var(--text-primary);background:var(--bg-secondary);color:var(--text-primary);font-size:24px}.project-navigation select{max-width:100%;min-width:220px;text-align:center;border:0;background:transparent;color:var(--text-primary);font-size:26px;font-weight:500;padding:4px 10px}.projectbar{gap:12px}.projectbar>div.project-navigation{min-width:0}.projectbar .local-note{flex-shrink:0}@media(max-width:768px){.projectbar>.eyebrow{display:none}.project-navigation{gap:8px!important}.project-navigation select{font-size:20px;min-width:0;width:100%}.project-navigation button{flex-shrink:0}}
.wysiwyg-toolbar .task-list-button{width:32px;padding:6px}.wysiwyg-editor [data-task-list]{list-style:none;padding-left:8px}.markdown-content input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);vertical-align:middle;margin:0 8px 0 0}.wysiwyg-editor input[type="checkbox"]{cursor:pointer}
.file-secondary{display:flex;gap:8px;flex-wrap:nowrap}
.file-more{display:none;position:relative}
.file-more summary{list-style:none;cursor:pointer;min-height:40px;display:flex;align-items:center;box-sizing:border-box}
.file-more summary::-webkit-details-marker{display:none}
.file-more-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:80;display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--bg-secondary);border:1px solid var(--text-primary);min-width:180px}
.file-more-panel button{white-space:nowrap}
@media(max-width:1500px){.file-secondary{display:none}.file-more{display:block}}

/* Document-first workspace: actions belong to the page, not the brand bar. */
.content-header{position:relative;inset:auto;width:100%;z-index:40;background:var(--bg-secondary);gap:10px;margin:0 0 24px;padding:0 0 18px;border-bottom:1px solid var(--border);align-items:center}
.content-header .file-path-heading{order:0;flex:1 1 180px;width:auto;height:auto;margin-right:auto;font-size:13px}
.file-secondary{display:none}.file-more{display:block}
.sidebar-header{padding:18px 16px 14px}.sidebar-tools{display:flex;gap:8px;margin-top:16px}
.sidebar-menu{position:relative;flex:1;min-width:0}.sidebar-menu>summary{cursor:pointer;list-style:none;border:1px solid var(--border);padding:8px;font-size:14px;text-align:center;min-height:40px}.sidebar-menu>summary::-webkit-details-marker{display:none}
#newMenu>summary{background:var(--text-primary);color:var(--bg-secondary);border-color:var(--text-primary)}
.sidebar-menu-panel{position:absolute;top:calc(100% + 6px);left:0;width:260px;max-width:80vw;padding:14px;background:var(--bg-secondary);border:1px solid var(--border);box-shadow:0 8px 24px #0002;z-index:100}
#folderMenu .sidebar-menu-panel{left:auto;right:0}.sidebar-menu-panel .folder-actions{margin-top:0;display:flex;flex-direction:column;min-width:0}.sidebar-menu-panel .new-target{margin-top:0}.manage-clear{border-top:1px solid var(--border);padding-top:12px;margin-top:12px}.sidebar-menu-panel .folder-list{max-height:160px;overflow:auto}
.tree-file .file-name{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}.tree-file{padding-top:8px;padding-bottom:8px;align-items:flex-start}
.app.document-focused{grid-template-columns:minmax(0,1fr)}.app.document-focused>.sidebar,.app.document-focused>.focus-panel{display:none}.app.document-focused .content{max-width:950px}
@media(max-width:768px){.content-header .file-path-heading{flex-basis:100%}.content-header button{padding:8px 10px}.sidebar-menu-panel{max-width:72vw}}

/* The writing partner stays beside the unsaved document. */
.brand{font-size:clamp(16px,2.4vw,28px);letter-spacing:-.6px}.local-mark{color:var(--accent);font-size:36px}.brandbar{justify-content:space-between}.file-secondary{display:none!important}.file-more{display:block!important}.sidebar-menu-panel button{text-align:left}.project-navigation select{max-width:65vw} .document-focused .main{width:100%} [hidden]{display:none!important}

.file-path-heading{display:flex;flex-direction:column;gap:4px}.document-name{font-size:17px;font-weight:700;color:var(--text-primary)}.document-folder{font-size:12px}.markdown-content{font-family:Arial,Helvetica,sans-serif;color:var(--text-primary)}.markdown-content h1,.markdown-content h2,.markdown-content h3{color:var(--text-primary)}.file-more-panel{z-index:30}
.content-header .file-path-heading{display:flex!important;flex-direction:column;gap:4px}.content-header .document-name,.content-header .document-folder{display:block}
.content-header .document-project{display:inline-flex;align-items:center;align-self:flex-start;min-width:0;max-width:min(320px,100%);padding:0;border:0;background:none;color:var(--text-secondary,#666);font:400 12px/1.5 Arial,Helvetica,sans-serif}
.content-header .document-project a{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit;text-decoration:underline;text-decoration-color:#aaa;text-underline-offset:3px}
.content-header .document-project a:hover{color:var(--text-primary,#111);text-decoration-color:currentColor}
.content-header .document-project button{min-height:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:underline;text-decoration-color:#aaa;text-underline-offset:3px;cursor:pointer}

.projectbar{display:flex;flex-wrap:wrap;gap:10px 20px}.projectbar .project-navigation{flex:1;min-width:0}.add-project{background:var(--text-primary);color:var(--bg-secondary);border:1px solid var(--text-primary);padding:10px 16px;white-space:nowrap}.project-help{flex-basis:100%;margin:0;text-align:center;font-size:14px;color:var(--text-secondary)}@media(max-width:768px){.projectbar{padding:12px 16px}.projectbar .project-navigation{flex-basis:100%}.add-project{margin:0 auto}.project-help{font-size:13px}}

.remember-destination{display:flex;align-items:center;gap:8px;font:13px/1.5 Arial,sans-serif;color:var(--text-secondary);padding:8px 0 14px;cursor:pointer}.remember-destination[hidden]{display:none}.remember-destination input{width:16px;height:16px;margin:0;accent-color:var(--text-primary)}

.app.document-focused > .focus-panel:not([hidden]){display:block}
@media(min-width:901px){.app.document-focused:not(.focus-hidden){grid-template-columns:minmax(0,1fr) 270px}}

/* Folder removal disconnects navigation only. */
.tree-folder-row{display:flex;align-items:center;gap:4px}.tree-folder-row .tree-folder-header{flex:1;min-width:0}.tree-folder-remove{flex:none;background:transparent;border:0;color:#555;cursor:pointer;width:32px;min-height:32px;font-size:22px}.tree-folder-remove:hover{background:#eef0f2;color:#111}.tree-folder-remove:focus-visible{outline:2px solid var(--wp-accent,#e32720)}.file-more-panel p{max-width:250px;font-size:12px;line-height:1.5;padding:8px}

/* Secondary controls have one home in Beheer. */
#folderMenu .refresh-btn{width:100%;height:auto;padding:10px;gap:8px;font:inherit}
#folderMenu .folder-tag{display:flex;width:100%;box-sizing:border-box;gap:8px}
#folderMenu .folder-tag-remove{position:static;width:auto;height:auto;opacity:1;padding:6px;font:inherit}

#fileList [role="button"]:focus-visible{outline:3px solid var(--wp-accent,#e32720);outline-offset:-3px}

/* Use the page as the single scroll surface so the formatting controls stay reachable. */
#content .editor-container.visible:has(.wysiwyg-mode){height:auto;min-height:60vh;overflow:visible}
#content .editor-wrapper.wysiwyg-mode{overflow:visible;flex:none;min-width:0}
#content .wysiwyg-editor{overflow:visible;flex:none;min-height:60vh}
#content .wysiwyg-toolbar{position:sticky;top:0;z-index:60;flex-shrink:0;background:var(--bg-secondary,#fff);border-bottom:1px solid var(--border,#bbb);box-shadow:0 3px 8px #0001}
body.writing-focus #content .wysiwyg-toolbar{top:80px;background:var(--bg-primary,#fff)}
@media print{#content .wysiwyg-toolbar{display:none!important}}