:root { --bg:#f7f5ef; --panel:#fff; --text:#1b2420; --muted:#56635b; --line:#dce0d8; --accent:#1f7a5c; --danger:#a3281b; --warn:#8a5a00; --ok:#1f7a5c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#141413; --panel:#1d1d1b; --text:#ecece8; --muted:#9a9a93; --line:#2e2e2b; --accent:#79d3ac; --danger:#ff7b7b; --warn:#e0a23a; --ok:#4cc27a; color-scheme:dark; } }
:root[data-theme="dark"] { --bg:#141413; --panel:#1d1d1b; --text:#ecece8; --muted:#9a9a93; --line:#2e2e2b; --accent:#79d3ac; --danger:#ff7b7b; --warn:#e0a23a; --ok:#4cc27a; color-scheme:dark; }
:root[data-theme="light"] { color-scheme:light; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2 { margin:.2em 0 .5em; } h2 { font-size:1.05rem; margin-top:1.4em; }
small, .muted { color:var(--muted); } small { display:block; font-size:.82rem; }
.layout { display:flex; min-height:100vh; }
.sidebar { width:236px; flex:none; padding:16px; border-right:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; }
.brand { font-weight:700; margin-bottom:12px; }
a.nav { padding:6px 10px; border-radius:6px; color:var(--text); } a.nav.active { background:var(--bg); font-weight:600; } a.nav:hover { background:var(--bg); text-decoration:none; }
.spacer { flex:1; } .status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.85rem; } .who { font-size:.85rem; color:var(--muted); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--muted); } .dot[data-state=live] { background:var(--ok); } .dot[data-state=connecting] { background:var(--warn); } .dot[data-state=offline] { background:var(--danger); }
.content { flex:1; padding:20px 28px; min-width:0; max-width:980px; } .popped .content { max-width:none; }
.listpane { width:330px; flex:none; border-right:1px solid var(--line); height:100vh; position:sticky; top:0; overflow:auto; background:var(--bg); } .layout:not(.has-list) .listpane { display:none; }
.layout:not(.has-list) .content { margin:0 auto; }
.listhead { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:1; }
.listhead select { font:inherit; font-size:.8rem; padding:2px 4px; border-radius:6px; border:1px solid var(--line); background:var(--panel); color:var(--text); }
.row { display:block; padding:9px 14px; border-bottom:1px solid var(--line); color:var(--text); } .row:hover { background:var(--panel); text-decoration:none; } .row.active { background:var(--panel); box-shadow:inset 3px 0 var(--accent); }
.row-title { font-weight:600; display:block; } .row.folder .row-title { font-weight:500; color:var(--accent); }
.snippet { font-size:.85rem; color:var(--muted); margin-top:3px; overflow-wrap:anywhere; } mark { background:color-mix(in srgb,var(--warn) 35%,transparent); color:inherit; border-radius:3px; padding:0 1px; }
.pad { padding:10px 14px; } .crumbs { font-size:.9rem; color:var(--muted); overflow-wrap:anywhere; } .crumbs strong { color:var(--text); }
.filters { display:flex; gap:6px; flex-wrap:wrap; padding:8px 14px 0; } .chip.removable, .chip.pin { margin-left:0; } .chip.pin { margin-left:8px; } a.chip { color:var(--muted); } a.chip:hover { border-color:var(--accent); text-decoration:none; }
.tags { display:flex; gap:6px; flex-wrap:wrap; margin:4px 0; } .tags .chip { margin-left:0; }
input.search { margin:4px 0 8px; }
.treewrap { flex:1; overflow:auto; margin:6px -6px; padding:0 6px; min-height:60px; } .tree ul { list-style:none; margin:0; padding-left:14px; } .tree > ul { padding-left:0; }
.tnode { display:flex; align-items:center; gap:2px; border-radius:6px; padding:1px 4px; } .tnode a { flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tnode:hover { background:var(--bg); } .tnode.active { background:var(--bg); font-weight:600; }
.tnode small { display:inline; } button.twist { border:0; background:none; padding:0; width:18px; color:var(--muted); cursor:pointer; } button.twist:disabled { cursor:default; }
.placeholder { color:var(--muted); display:grid; place-items:center; min-height:50vh; }
.tile { display:flex; flex-direction:column; gap:3px; color:var(--text); } .tile:hover { text-decoration:none; border-color:var(--accent); } .tile ul { margin:6px 0 2px; padding-left:0; list-style:none; font-size:.88rem; } .tile ul.todo li::before { content:"☐ "; color:var(--muted); } .tile li.more { color:var(--muted); } .tile li.more::before { content:""; } .tile .sum { margin-top:auto; }
.sidebar { overflow:hidden; } .sidebar > a.nav, .sidebar > .status, .sidebar > .who { flex:none; } .who { padding-top:2px; }
@media (max-width:1000px) { .listpane { width:280px; } .sidebar { width:200px; } }
@media (max-width:820px) { .layout.has-list.has-note .listpane { display:none; } .layout.has-list:not(.has-note) .contentcol { display:none; } .listpane { width:100%; height:auto; position:static; border-right:0; } }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; } .tile a { font-weight:600; }
.list { list-style:none; margin:0; padding:0; } .list li { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); } .list small { text-align:right; }
.toolbar { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; }
pre.markdown { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; white-space:pre-wrap; word-break:break-word; font:14px/1.55 ui-monospace,Menlo,Consolas,monospace; }
.banner { background:color-mix(in srgb,var(--accent) 14%,transparent); padding:6px 10px; border-radius:6px; }
button { font:inherit; padding:6px 12px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; } button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); } button.danger { color:var(--danger); } button:disabled { opacity:.5; cursor:default; }
button.linklike { border:0; background:none; color:var(--accent); padding:4px 6px; }
input:not([type=checkbox]) { font:inherit; padding:8px 10px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--text); width:100%; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:16px; }
.login { width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:8px; }
.login label { font-size:.85rem; color:var(--muted); } .login .check { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; color:var(--text); margin-top:6px; } .login .check small { grid-column:2; }
.error { color:var(--danger); min-height:1.3em; margin:4px 0; }
.session { display:grid; gap:2px; padding:10px 12px; margin-bottom:8px; background:var(--panel); border:1px solid var(--line); border-radius:10px; } .session.current { border-color:var(--accent); } .session button { justify-self:start; margin-top:6px; }
.chip { margin-left:8px; font-size:.75rem; padding:1px 8px; border-radius:99px; border:1px solid var(--line); color:var(--muted); } .chip.warn { color:var(--warn); border-color:var(--warn); }
form.inline { display:flex; gap:8px; flex-wrap:wrap; } form.inline input { flex:1; min-width:200px; width:auto; }
.small li { padding:4px 0; }
@media (max-width:720px) { .layout { flex-direction:column; } .sidebar { width:auto; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; border-right:0; border-bottom:1px solid var(--line); } .brand { margin:0 8px 0 0; } .treewrap { flex-basis:100%; max-height:30vh; } input.search { flex-basis:100%; } .content { padding:14px 16px; } }

/* ---- editor ---- */
.note { display:flex; flex-direction:column; min-height:calc(100vh - 40px); }
.head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .seg button { border:0; border-radius:0; padding:4px 12px; background:var(--panel); } .seg button.active { background:var(--accent); color:#fff; }
.statusline { display:flex; gap:14px; align-items:center; margin:2px 0 6px; font-size:.85rem; color:var(--muted); } .statusline .muted { margin:0; }
.save-status { padding:1px 10px; border-radius:99px; border:1px solid var(--line); } .save-status[data-state=saved] { color:var(--ok); } .save-status[data-state=saving], .save-status[data-state=unsaved] { color:var(--warn); } .save-status[data-state=conflict], .save-status[data-state=error], .save-status[data-state=offline], .save-status[data-state=gone] { color:var(--danger); border-color:var(--danger); }
.banner.warn { background:color-mix(in srgb,var(--warn) 20%,transparent); } .banner { margin:6px 0; }
.toolbar2 { display:flex; gap:4px; flex-wrap:wrap; padding:6px 0; position:sticky; top:0; background:var(--bg); z-index:2; } button.tool { min-width:34px; padding:4px 8px; font-weight:600; }
.note-body { flex:1; display:flex; gap:16px; min-height:55vh; } .note-body > * { flex:1; min-width:0; }
.note-body.mode-read textarea.editor, .note-body.mode-edit .preview { display:none; }
textarea.editor { width:100%; min-height:55vh; resize:none; font:14px/1.6 ui-monospace,Menlo,Consolas,monospace; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); tab-size:2; }
.preview { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px 18px; overflow:auto; } .mode-read .preview { border-color:transparent; background:transparent; padding-left:0; }
.md { line-height:1.65; overflow-wrap:anywhere; } .md h2, .md h3, .md h4 { margin:1.1em 0 .4em; } .md p { margin:.5em 0; } .md ul, .md ol { margin:.3em 0; padding-left:1.4em; } .md ul.tasks { list-style:none; padding-left:.2em; } .md ul.tasks ul.tasks { padding-left:1.4em; }
.md img.attachment-image { display:block; max-width:100%; max-height:70vh; object-fit:contain; margin:.75em 0; border-radius:8px; }
.md li.done > span { color:var(--muted); text-decoration:line-through; } .md input[type=checkbox] { margin-right:8px; transform:scale(1.15); cursor:pointer; } .md input[type=checkbox]:disabled { cursor:default; }
.md blockquote { margin:.6em 0; padding:2px 14px; border-left:3px solid var(--line); color:var(--muted); } .md code { font:.9em ui-monospace,Menlo,Consolas,monospace; background:var(--bg); padding:1px 5px; border-radius:4px; } .md pre.code { background:var(--bg); padding:10px 12px; border-radius:8px; overflow:auto; } .md pre.code code { padding:0; background:none; }
.md hr { border:0; border-top:1px solid var(--line); margin:1em 0; } .table-wrap { overflow:auto; } .md table { border-collapse:collapse; margin:.6em 0; } .md th, .md td { border:1px solid var(--line); padding:4px 10px; } .md th { background:var(--bg); } [data-align=right] { text-align:right; } [data-align=center] { text-align:center; }
.md .done-head button { font:inherit; font-weight:600; padding:0; } .md .in-done { opacity:.85; }
.note-actions { display:flex; gap:14px; flex-wrap:wrap; } .additem { margin-top:10px; position:sticky; bottom:0; background:var(--bg); padding:8px 0; }
.newnote { margin:2px 0 6px; }

/* ---- dialogs and toasts ---- */
dialog { border:1px solid var(--line); border-radius:12px; padding:0; background:var(--panel); color:var(--text); max-width:min(440px,92vw); width:100%; } dialog::backdrop { background:rgba(0,0,0,.4); }
.dlg { padding:18px 20px; display:flex; flex-direction:column; gap:10px; } .dlg h3 { margin:0; } .dlg .field { display:flex; flex-direction:column; gap:6px; } .dlg label { display:flex; flex-direction:column; gap:3px; font-size:.85rem; color:var(--muted); } .dlg-text { margin:0; white-space:pre-wrap; } .dlg select { font:inherit; padding:8px 10px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--text); }
.dlg-actions { display:flex; justify-content:flex-end; gap:8px; } button.danger-fill { background:var(--danger); border-color:var(--danger); }
.toasts { position:fixed; left:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:50; max-width:min(440px,90vw); } .toast { display:flex; align-items:center; gap:12px; background:var(--text); color:var(--bg); padding:9px 14px; border-radius:9px; box-shadow:0 4px 18px rgba(0,0,0,.25); } .toast.bad { background:var(--danger); color:#fff; } .toast button.linklike { color:inherit; text-decoration:underline; padding:0; } .toast .x { opacity:.7; text-decoration:none; }
@media (max-width:820px) { .note-body.mode-split { flex-direction:column; } }
.dlg label.check { flex-direction:row; align-items:center; gap:8px; color:var(--text); font-size:.95rem; }

/* ---- menus ---- */
.menu { position:fixed; z-index:60; min-width:200px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:5px; box-shadow:0 8px 28px rgba(0,0,0,.22); display:flex; flex-direction:column; }
.menu button { text-align:left; border:0; background:none; padding:7px 12px; border-radius:6px; } .menu button:hover:not(:disabled), .menu button:focus-visible { background:var(--bg); outline:none; } .menu button.danger { color:var(--danger); } .menu button:disabled { opacity:.45; cursor:default; } .menu hr { border:0; border-top:1px solid var(--line); margin:4px 2px; }

/* ---- selection, drag and drop ---- */
.row input.pick { float:left; margin:4px 10px 0 0; } .row-main { display:block; overflow:hidden; } .row.selected { background:color-mix(in srgb,var(--accent) 14%,var(--panel)); }
.selbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 14px; background:var(--accent); color:#fff; position:sticky; top:0; z-index:3; } .selbar[hidden] { display:none; } .selbar button { background:rgba(255,255,255,.18); color:#fff; border-color:transparent; padding:3px 10px; } .selbar button:hover { background:rgba(255,255,255,.3); } .selbar .count { font-weight:600; margin-right:auto; }
.tnode.drop, a.nav.drop { outline:2px dashed var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:6px; }
body.dragging-notes .row { cursor:grabbing; }
.head-tools { display:inline-flex; align-items:center; gap:8px; } button.newfolder { padding:4px 6px; font-size:.85rem; }

/* ---- tabs and palette ---- */
.contentcol { flex:1; min-width:0; display:flex; flex-direction:column; } .contentcol > .content { flex:1; width:100%; }
.tabs { display:flex; gap:2px; overflow-x:auto; padding:6px 12px 0; border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:4; } .tabs[hidden] { display:none; }
.tab { display:inline-flex; align-items:center; gap:4px; padding:5px 6px 5px 12px; border:1px solid var(--line); border-bottom:0; border-radius:8px 8px 0 0; background:var(--panel); max-width:220px; white-space:nowrap; opacity:.8; } .tab.active { opacity:1; font-weight:600; background:var(--bg); border-bottom:1px solid var(--bg); margin-bottom:-1px; }
.tab a { color:var(--text); overflow:hidden; text-overflow:ellipsis; } .tab a:hover { text-decoration:none; } .tab .x { border:0; background:none; padding:0 6px; color:var(--muted); font-size:1.1rem; line-height:1; } .tab .x:hover { color:var(--danger); }
.palette-wrap { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.4); display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; }
.palette { width:min(640px,92vw); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.3); overflow:hidden; display:flex; flex-direction:column; max-height:70vh; }
input.palette-input { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:14px 16px; font-size:1.05rem; outline:none; } .palette-list { list-style:none; margin:0; padding:4px; overflow:auto; }
.palette-item { display:flex; align-items:baseline; gap:10px; padding:7px 12px; border-radius:7px; cursor:pointer; } .palette-item.active { background:var(--bg); box-shadow:inset 3px 0 var(--accent); } .pi-kind { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); width:62px; flex:none; } .pi-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .palette-item small { color:var(--muted); white-space:nowrap; }
.palette-empty { padding:14px; color:var(--muted); text-align:center; } .palette-foot { padding:7px 14px; font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); }
table.shortcuts { border-collapse:collapse; } table.shortcuts td { padding:4px 10px 4px 0; vertical-align:top; } kbd { font:12px ui-monospace,Menlo,Consolas,monospace; background:var(--bg); border:1px solid var(--line); border-radius:5px; padding:1px 6px; white-space:nowrap; }

/* ---- history, settings ---- */
.history-cols { display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start; } .versions { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); max-height:70vh; overflow-y:auto; }
.versions li { padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; flex-direction:column; } .versions li:last-child { border-bottom:0; } .versions li:hover, .versions li.active { background:var(--bg); } .versions li.active { box-shadow:inset 3px 0 var(--accent); } .versions li.now { cursor:default; opacity:.7; }
.diff { border:1px solid var(--line); border-radius:10px; overflow:auto; background:var(--panel); font:13px/1.55 ui-monospace,Menlo,Consolas,monospace; } .dl { display:flex; white-space:pre-wrap; overflow-wrap:anywhere; } .dl .sign { width:26px; flex:none; text-align:center; color:var(--muted); user-select:none; } .dl .tx { flex:1; padding-right:10px; }
.dl.add { background:color-mix(in srgb,var(--ok) 18%,transparent); } .dl.del { background:color-mix(in srgb,var(--danger) 18%,transparent); } .dl.fold { color:var(--muted); justify-content:center; background:var(--bg); padding:2px; } .dl.inline { display:inline-block; padding:1px 8px; border-radius:5px; }
@media (max-width:900px) { .history-cols { grid-template-columns:1fr; } }
.settings h3 { margin:1.5em 0 .5em; font-size:1rem; } .settings .grid { display:grid; gap:12px; max-width:560px; } .settings .grid label { display:flex; flex-direction:column; gap:3px; font-size:.85rem; color:var(--muted); } .settings .grid label.check { flex-direction:row; align-items:center; gap:8px; color:var(--text); font-size:.95rem; }
.settings select, .settings input[type=number] { font:inherit; padding:7px 9px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--text); width:100%; } .radios { display:flex; gap:18px; flex-wrap:wrap; } label.radio { display:flex; align-items:center; gap:6px; } .form-actions { display:flex; align-items:center; gap:14px; } .button-row { display:flex; gap:10px; flex-wrap:wrap; }
.drop-overlay { position:fixed; inset:0; z-index:80; background:color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.25)); display:grid; place-items:center; pointer-events:none; } .drop-overlay > div { background:var(--panel); border:2px dashed var(--accent); border-radius:14px; padding:28px 40px; font-size:1.1rem; }

.wallet-button { display:inline-flex; align-items:center; gap:.55rem; min-height:2.5rem; margin:.8em 0 .5em; padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--accent); font-weight:700; text-decoration:none; }
.wallet-button:hover { border-color:var(--accent); background:var(--accent-soft); text-decoration:none; }
.wallet-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.wallet-icon { width:1.35rem; height:1.35rem; flex:none; }
.note-behavior-hint { margin:.15rem 0 .5rem; color:var(--muted); font-size:.85rem; white-space:pre-line; }
.tree-note a.designated-todo { color:var(--accent); font-weight:800; letter-spacing:.035em; }

/* The list exists only on routes with a selector. Drag handles share the shell widths. */
@media (min-width:821px) {
  .sidebar { width:var(--sidebar-width, 200px); min-width:140px; padding:12px; }
  .listpane { width:var(--list-width, 280px); min-width:160px; }
  .content { padding:16px 20px; }
}
.pane-divider { width:6px; flex:none; cursor:col-resize; touch-action:none; background:var(--line); position:sticky; top:0; height:100vh; }
.pane-divider:hover, .pane-divider:focus-visible { background:var(--accent); outline:none; }
.layout:not(.has-list) .pane-divider-list { display:none; }
body.resizing-panes { cursor:col-resize; user-select:none; }
@media (min-width:721px) and (max-width:820px) {
  .sidebar { width:var(--sidebar-width, 180px); min-width:140px; padding:12px; }
  .layout.has-list:not(.has-note) .listpane { flex:1; width:auto; min-width:0; }
  .pane-divider-list { display:none; }
}
@media (max-width:720px) { .pane-divider { display:none; } }

/* Browsing uses one temporary tab; editing or pinning keeps it open. */
.tab.preview a { font-style:italic; }
.tab-pin { border:0; background:none; padding:0 5px; color:var(--muted); }
.tab-pin:hover { color:var(--accent); }
.tab-kept { color:var(--muted); font-size:.8rem; }

.tree-heading { width:100%; text-align:left; border:0; border-radius:0; padding:8px 4px; font-weight:600; background:none; }
.tree-note a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-children { padding-left:12px; }
.tree-section + .tree-section { margin-top:6px; }
.tree-more { font-size:.8rem; }

/* A shared compact bar frees the tree from fixed navigation panes. Notes fill the viewport;
   only the document scrolls, so Read/Edit and formatting controls remain within reach. */
.workspace { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.workspacebar { flex:none; display:flex; align-items:center; gap:8px; padding:5px 10px; background:var(--panel); border-bottom:1px solid var(--line); }
.workspacebar .brand { margin:0; white-space:nowrap; }
.workspacebar a.nav { padding:3px 7px; }
.workspacebar button { padding:3px 8px; font-size:.85rem; }
.workspacebar .newnote { margin:0; }
.workspace-account { margin-left:auto; display:flex; align-items:center; gap:4px; }
.layout { flex:1; min-height:0; height:0; }
.sidebar, .listpane, .pane-divider { position:static; height:100%; }
.sidebar { min-height:0; padding:6px 10px; }
.sidebar input.search { margin:0 0 4px; padding:6px 8px; flex:none; }
.treewrap { min-height:0; margin:0 -4px; }
.contentcol { min-height:0; height:100%; }
.contentcol > .content { min-height:0; overflow:auto; }
.layout.has-note .content { max-width:none; margin:0; padding:8px 12px; overflow:hidden; }
.layout.has-note .note { min-height:0; height:100%; }
.note .toolbar { align-items:center; gap:4px 10px; flex:none; }
.note .toolbar h2 { margin:0; flex:1; min-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note .head-actions { gap:4px; }
.note .crumbs { font-size:.75rem; }
.note .tags:empty, .note-actions:empty { display:none; }
.note .statusline { margin:2px 0; }
.note .toolbar2 { position:static; flex:none; padding:4px 0; }
.note-body, textarea.editor { min-height:0; }
.note-body { overflow:hidden; gap:10px; }
textarea.editor { height:100%; }
.note .additem { position:static; margin:4px 0 0; padding:0; flex:none; }
.note .additem input { padding:5px 9px; }
.tabs { position:static; flex:none; padding-top:2px; }
.tree-only.has-note .listpane, .tree-only .pane-divider-list { display:none; }
.tree-only.has-list:not(.has-note) .listpane { flex:1; width:auto; min-width:0; }
.tree-only.has-list:not(.has-note) .contentcol { display:none; }
.focused .sidebar, .focused .pane-divider, .focused.has-note .listpane { display:none; }
.focused.has-list:not(.has-note) .listpane { flex:1; width:auto; min-width:0; }
.focused.has-list:not(.has-note) .contentcol { display:none; }
.focused .content { max-width:none; }
@media (max-width:720px) {
  .workspacebar { flex-wrap:wrap; gap:2px 6px; }
  .workspacebar .brand { display:none; }
  .layout { flex-direction:column; }
  .sidebar { width:100%; height:30%; flex:none; flex-direction:column; align-items:stretch; flex-wrap:nowrap; }
  .sidebar .treewrap { flex-basis:auto; max-height:none; }
  .sidebar input.search { flex-basis:auto; }
  .pane-divider { display:none; }
  .contentcol, .listpane { flex:1; min-height:0; height:0; }
  .note .head-actions { gap:2px; }
  .seg button { padding:3px 8px; }
}
.shortcuts-note { white-space:pre-wrap; font:inherit; }
.dlg:has(.shortcuts) { max-height:85dvh; overflow:auto; }
/* Folder context remains in the tree; editing gives that extra row to the document. */
.note:has(.mode-edit) .crumbs { display:none; }
.note .toolbar2 button.tool { padding:3px 7px; }

.note-body > * { min-height:0; }
.note .banner { flex:none; max-height:20dvh; overflow:auto; }