:root { color-scheme: light; --ink:#26233a; --muted:#635e76; --line:#dedbea; --accent:#593699; --paper:#fff; --wash:#f6f3fa; font-family: system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; }
a { color:var(--accent); }
button,input,select { font:inherit; }
button,input,select,.file { border:1px solid var(--line); border-radius:7px; background:white; color:var(--ink); padding:.55rem .7rem; }
button,.file { cursor:pointer; }
button:hover,.file:hover { background:var(--wash); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.primary { color:white; background:var(--accent); border-color:var(--accent); }
.primary:hover { background:#46257f; }
.top { display:flex; align-items:center; gap:1rem; padding:.85rem 1.2rem; border-bottom:1px solid var(--line); }
.top form[role=search] { display:flex; gap:.35rem; flex:1; justify-content:center; }
.top input { width:min(100%,24rem); min-width:0; }
.brand { font:700 1.55rem Georgia,serif; text-decoration:none; }
.layout { display:grid; grid-template-columns:minmax(14rem,20rem) minmax(0,1fr); min-height:calc(100vh - 65px); }
aside { background:var(--wash); border-right:1px solid var(--line); padding:1rem .85rem; overflow-wrap:anywhere; }
.side-title { display:flex; align-items:center; justify-content:space-between; padding:.2rem .45rem .9rem; }
aside ul { list-style:none; margin:0; padding-left:.8rem; }
aside > ul { padding-left:0; }
aside a { display:inline-block; padding:.3rem .42rem; text-decoration:none; }
aside a:hover,aside a[aria-current] { background:#ebe2f8; border-radius:5px; }
summary { cursor:pointer; }
main { width:100%; max-width:76rem; margin:0 auto; padding:clamp(1rem,4vw,3.5rem); min-width:0; }
h1,.note-title { font:700 clamp(1.75rem,4vw,2.85rem) Georgia,serif; letter-spacing:-.025em; overflow-wrap:anywhere; }
.trail { display:flex; flex-wrap:wrap; gap:.45rem; font-size:.88rem; margin-bottom:1rem; overflow-wrap:anywhere; }
.trail a + a::before { content:'›'; color:var(--muted); margin-right:.45rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:.75rem; margin:1rem 0; }
.cards a { border:1px solid var(--line); border-radius:10px; padding:.9rem; background:var(--wash); text-decoration:none; font-weight:600; overflow-wrap:anywhere; }
small { color:var(--muted); }
.cards small { display:block; margin-bottom:.35rem; }
.create { display:flex; flex-wrap:wrap; align-items:end; gap:.65rem; margin:1rem 0; }
.create label,.login label { display:grid; gap:.35rem; }
.login { max-width:29rem; margin:8vh auto; }
.login form { display:grid; gap:.8rem; }
.note-title { width:100%; border:none; padding:.25rem 0; margin-bottom:1rem; }
.toolbar { display:flex; flex-wrap:wrap; gap:.35rem; padding:.55rem; background:var(--wash); border:1px solid var(--line); border-radius:10px; }
.file input { position:absolute; opacity:0; width:1px; height:1px; }
.file:focus-within { outline:2px solid var(--accent); }
#status { color:var(--muted); min-height:1.3em; font-size:.85rem; }
#editor { min-height:19rem; border:1px solid var(--line); border-radius:10px; padding:clamp(.8rem,3vw,2rem); line-height:1.55; overflow:auto; overflow-wrap:anywhere; }
#editor img { max-width:100%; height:auto; }
#editor table { border-collapse:collapse; }
#editor td,#editor th { border:1px solid var(--line); padding:.3rem; }
.delete { margin-top:2rem; }
.delete button { color:#8d2541; }
.results li { margin-bottom:.55rem; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:720px) { .layout { grid-template-columns:1fr; } aside { max-height:14rem; overflow:auto; border-right:0; border-bottom:1px solid var(--line); } .top { gap:.5rem; padding:.65rem; } .top form[role=search] button { display:none; } .brand { font-size:1.15rem; } }
.toolgroup { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; width:100%; padding:.2rem; }
.toolgroup + .toolgroup { border-top:1px solid var(--line); padding-top:.55rem; }
.toolgroup button,.toolgroup select,.toolgroup input { font-size:.88rem; }
.toolgroup button[aria-pressed=true] { background:#ebe2f8; border-color:var(--accent); }
#font-size { width:4.7rem; }
.swatch { display:inline-flex; align-items:center; gap:.3rem; font-size:.88rem; }
.swatch input { padding:.15rem; width:2rem; height:1.95rem; cursor:pointer; }
#editor [data-task] { color:var(--accent); cursor:pointer; font-size:1.15em; user-select:none; }
#editor [data-label] { color:#422177; background:#eee5fa; border-radius:4px; padding:.1em .35em; }
#editor [data-label=important] { color:#781d34; background:#ffe5e9; }
#editor [data-label=idea] { color:#5c4400; background:#fff0ba; }
#editor pre { white-space:pre-wrap; background:var(--wash); padding:.65rem; }
#editor blockquote { border-left:3px solid var(--accent); margin-left:0; padding-left:1rem; }

/* Notebook navigation */
body:has(.workspace) { min-height:100dvh; }
.top { background:#faf9fc; }
.notebook-switch { position:relative; min-width:0; max-width:32%; z-index:5; }
.notebook-switch summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; }
.notebook-switch ul { position:absolute; top:100%; left:0; margin:.6rem 0; padding:.4rem; list-style:none; width:min(23rem,78vw); max-height:65vh; overflow:auto; background:white; border:1px solid var(--line); border-radius:9px; box-shadow:0 10px 30px #28173c24; }
.notebook-switch a { display:block; padding:.45rem .6rem; overflow-wrap:anywhere; text-decoration:none; }
.notebook-switch a:hover { background:var(--wash); }
.notebook-switch .notebook-name { font-weight:700; }
.workspace .layout { --sections:238px; --pages:220px; --section-divider:6px; --page-divider:6px; grid-template-columns:var(--sections) var(--section-divider) var(--pages) var(--page-divider) minmax(0,1fr); min-height:0; }
.workspace .layout.hide-sections { --section-divider:0px; grid-template-columns:0 0 var(--pages) var(--page-divider) minmax(0,1fr); }
.workspace .layout.hide-pages { --page-divider:0px; }
.workspace .layout.hide-pages:not(.hide-sections) { grid-template-columns:var(--sections) var(--section-divider) 0 0 minmax(0,1fr); }
.workspace .layout.hide-pages.hide-sections { grid-template-columns:0 0 0 0 minmax(0,1fr); }
.layout.hide-sections #sections-pane,.layout.hide-sections [data-resize=sections],
.layout.hide-pages #pages-pane,.layout.hide-pages [data-resize=pages] { visibility:hidden; overflow:hidden; }
.pane-switch { display:flex; gap:.35rem; padding:.4rem .8rem; border-bottom:1px solid var(--line); background:#faf9fc; }
.pane-switch button { padding:.28rem .6rem; font-size:.82rem; }
.pane-switch button[aria-pressed=true] { background:#eee7f7; color:#4c287d; }
.pane-switch [data-pane=editor] { display:none; }
.nav-pane { background:#f6f5f8; border:0; padding:0; min-width:0; height:calc(100dvh - 7rem); overflow:auto; }
#pages-pane { background:#faf9fc; }
.pane-heading { position:sticky; top:0; z-index:2; background:inherit; padding:.65rem .7rem; min-height:3.1rem; border-bottom:1px solid var(--line); }
.pane-heading strong { font-size:.85rem; color:var(--muted); }
.quick-create { margin-top:.35rem; }
.quick-create summary { color:var(--accent); font-size:.9rem; }
.quick-create form { display:flex; gap:.25rem; padding-top:.4rem; }
.quick-create input:not([type=hidden]) { min-width:0; width:100%; }
.pane-empty { color:var(--muted); padding:0 .7rem; font-size:.88rem; }
.nav-pane .pane-list { padding:0; }
.nav-pane .pane-link { display:flex; min-width:0; align-items:center; gap:.65rem; padding:.66rem .72rem; border-radius:0; color:var(--ink); font-size:.92rem; }
.pane-link span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-pane a[aria-current] { background:#eae3f4; border-radius:0; }
.section-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; }
.section-row:has([aria-current]) { background:#eae3f4; }
.section-row.drop-target { box-shadow:inset 0 -3px var(--accent); }
.section-icon { width:.58rem; height:1.25rem; flex:none; border-radius:4px 1px 1px 4px; background:var(--section-color); }
.section-options summary { list-style:none; padding:.56rem .55rem; line-height:1.3; color:var(--muted); }
.section-options summary::-webkit-details-marker { display:none; }
.section-options[open] { grid-column:1/-1; }
.section-options form { display:grid; gap:.35rem; padding:.35rem .65rem .65rem; }
.section-options label { display:flex; align-items:center; gap:.5rem; }
.section-options input[type=color] { padding:.15rem; width:2.2rem; }
.pane-divider { cursor:col-resize; touch-action:none; background:#e8e4ed; }
.pane-divider:hover,.pane-divider:focus { background:#b99bd5; }
#workspace-editor { max-width:none; height:calc(100dvh - 7rem); overflow:auto; padding:clamp(.9rem,3vw,2.5rem); }
@media(max-width:850px) {
 .top { flex-wrap:wrap; }
 .notebook-switch { max-width:45%; }
 .workspace .layout,.workspace .layout.hide-sections,.workspace .layout.hide-pages:not(.hide-sections),.workspace .layout.hide-pages.hide-sections { display:block; }
 .workspace .layout .pane-divider { display:none; }
 .workspace .layout .nav-pane,.workspace .layout #workspace-editor { display:none; visibility:visible; height:auto; overflow:visible; }
 .workspace[data-mobile=sections] #sections-pane,.workspace[data-mobile=pages] #pages-pane,.workspace[data-mobile=editor] #workspace-editor { display:block; }
 .pane-switch [data-pane=editor] { display:inline-block; }
 .nav-pane .pane-link { padding:.85rem .72rem; }
}