/* All shapes must remain square. No border-radius, even in controls or dialogs. */
:root,[data-theme="coal"] {color-scheme:dark;--bg:#111214;--panel:#16181b;--panel-2:#1d2024;--line:#30343a;--ink:#e7e9eb;--muted:#8a919b;--accent:#d9dde1;--accent-ink:#111214;--danger:#d17a70;--glow:rgba(255,255,255,.045)}
[data-theme="navy"]{color-scheme:dark;--bg:#0a1423;--panel:#101d30;--panel-2:#182a42;--line:#304358;--ink:#e4ecf8;--muted:#91a3b8;--accent:#76a8e6;--accent-ink:#081320;--danger:#f18a7d;--glow:rgba(118,168,230,.07)}
[data-theme="forest"]{color-scheme:dark;--bg:#0c1714;--panel:#13221c;--panel-2:#1b3027;--line:#314b3e;--ink:#e0eee6;--muted:#93ac9e;--accent:#88c5a4;--accent-ink:#092016;--danger:#e38d80;--glow:rgba(136,197,164,.06)}
[data-theme="white"]{color-scheme:light;--bg:#f7f8f8;--panel:#fff;--panel-2:#ebedef;--line:#cbd0d4;--ink:#181c20;--muted:#69737e;--accent:#182d43;--accent-ink:#fff;--danger:#a72c26;--glow:rgba(0,0,0,.035)}
[data-theme="orange"]{color-scheme:dark;--bg:#19140f;--panel:#211a13;--panel-2:#2c2116;--line:#4a3525;--ink:#f4e8db;--muted:#bda38b;--accent:#f0a34c;--accent-ink:#211207;--danger:#f08172;--glow:rgba(240,163,76,.07)}
*{box-sizing:border-box;border-radius:0!important}html{background:var(--bg);scrollbar-color:var(--line) var(--bg)}body{margin:0;color:var(--ink);background:var(--bg);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}.app{min-height:100vh;max-width:1800px;margin:0 auto}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 34px;gap:14px}.wordmark{font-size:17px;font-weight:800;letter-spacing:.07em;white-space:nowrap}.wordmark-light{font-weight:400;color:var(--muted)}.logo{color:var(--accent);font-size:22px;margin-right:10px}.header-tools{display:flex;align-items:center;gap:10px}.theme-label,.eyebrow,.section-head,.search-prefix,.search-count,.card-meta,.card-edit,.view-tools,.side-footer{font-size:10px;font-weight:700;letter-spacing:.12em}.theme-label{color:var(--muted)}select,.btn,input,textarea{background:var(--panel);border:1px solid var(--line);outline:0}select{padding:9px 11px}.btn{padding:10px 14px;font-weight:700;font-size:11px;letter-spacing:.08em;white-space:nowrap}.btn:hover,.view-button:hover,.mini-btn:hover{border-color:var(--muted);background:var(--panel-2)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.primary:hover{filter:brightness(.88)}.btn.danger{border-color:var(--danger);color:var(--danger)}.search-area{display:flex;align-items:center;margin:25px 34px;background:var(--panel);border:1px solid var(--line);min-height:63px;padding:0 20px;gap:14px}.search-area:focus-within{border-color:var(--accent)}.search-prefix{color:var(--accent);white-space:nowrap}.search-area input{width:100%;border:0;min-width:0;background:transparent;padding:18px 0;font-size:15px}.search-area input:focus{outline:0}.search-area input::placeholder{color:var(--muted)}.search-count{color:var(--muted);white-space:nowrap}.layout{display:grid;grid-template-columns:234px minmax(0,1fr);min-height:calc(100vh - 185px);border-top:1px solid var(--line)}.sidebar{border-right:1px solid var(--line);padding:23px 16px 35px 25px;display:flex;flex-direction:column;gap:6px;min-width:0}.section-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);padding:8px 9px 14px}.folder-heading{margin-top:24px;border-top:1px solid var(--line);padding-top:23px}.mini-btn{border:1px solid var(--line);background:transparent;width:23px;height:23px;line-height:17px}.nav-entry{width:100%;border:1px solid transparent;display:flex;align-items:center;gap:9px;background:transparent;padding:10px 9px;color:var(--muted);text-align:left;font-size:13px;overflow-wrap:anywhere}.nav-entry:hover{background:var(--glow);color:var(--ink)}.nav-entry.selected{background:var(--panel-2);color:var(--ink);border-left:2px solid var(--accent)}.entry-icon{font-size:14px;width:15px;color:var(--accent);flex-shrink:0}.folder-entry{padding-left:calc(12px + var(--depth)*14px);font-size:12px}.folder-group-title{padding:10px 9px 5px;font-size:10px;color:var(--muted);text-transform:uppercase}.sidebar-placeholder{font-size:12px;color:var(--muted);margin:8px}.side-footer{margin-top:auto;padding:30px 9px 0;color:var(--muted);line-height:2}.content{min-width:0;padding:31px 35px 60px}.content-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{color:var(--muted);margin-bottom:8px}.content h1{font-size:29px;letter-spacing:-.045em;line-height:1.2;margin:0}.hint{margin:10px 0 0;color:var(--muted);font-size:13px}.content-actions{display:flex;gap:8px}.filters{border-bottom:1px solid var(--line);padding:30px 0 16px;display:flex;justify-content:space-between;gap:20px;align-items:flex-end}.tag-filters{display:flex;flex-wrap:wrap;gap:7px}.tag-filter{border:1px solid var(--line);background:transparent;padding:6px 10px;color:var(--muted);font-size:11px}.tag-filter:hover,.tag-filter.active{color:var(--ink);border-color:var(--accent);background:var(--glow)}.view-tools{display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap}.view-button{border:1px solid var(--line);background:var(--panel);padding:5px 9px;color:var(--muted)}.view-button.active{color:var(--accent);border-color:var(--accent)}.cards{display:grid;gap:12px;margin-top:22px;align-items:stretch}.cards.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{border:1px solid var(--line);background:var(--panel);padding:20px;min-height:190px;display:flex;flex-direction:column;gap:12px;transition:border-color .12s,background .12s;min-width:0}.card:hover{border-color:var(--muted);background:var(--panel-2)}.card-meta{display:flex;justify-content:space-between;color:var(--muted);overflow:hidden;gap:6px;white-space:nowrap;text-overflow:ellipsis}.card h2{font-size:16px;line-height:1.35;margin:0;overflow-wrap:anywhere;letter-spacing:-.02em}.card-desc{color:var(--muted);font-size:12px;line-height:1.65;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}.card-footer{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:6px}.card-tags{display:flex;flex-wrap:wrap;gap:5px}.item-tag{border:1px solid var(--line);background:transparent;color:var(--muted);padding:3px 5px;font-size:10px}.item-tag:hover{border-color:var(--accent);color:var(--ink)}.card-edit{padding:4px;border:0;background:transparent;color:var(--muted)}.card-edit:hover{color:var(--accent)}.empty{text-align:center;padding:80px 20px;color:var(--muted);border:1px dashed var(--line);margin-top:22px}.notice{position:fixed;right:18px;bottom:18px;max-width:min(360px,90vw);border:1px solid var(--accent);background:var(--panel-2);padding:15px 18px;z-index:100;box-shadow:0 15px 40px #0004}.notice.error{border-color:var(--danger)}dialog{color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:0;width:min(620px,calc(100vw - 24px));max-height:90vh;overflow:auto;box-shadow:0 20px 70px #0009}dialog::backdrop{background:#05070ad9}.dialog-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 22px}.dialog-head h2{margin:0;font-size:15px;letter-spacing:.08em}.close-btn{background:transparent;border:0;color:var(--muted)}#record-fields{display:grid;gap:18px;padding:24px}.form-field{display:grid;gap:7px;font-size:12px;color:var(--muted)}.form-field input,.form-field textarea,.form-field select{width:100%;padding:10px 12px;color:var(--ink);resize:vertical}.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--accent)}.form-field.checkbox{display:flex;align-items:center;justify-content:space-between}.form-field.checkbox input{width:auto}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dialog-actions{display:flex;gap:8px;justify-content:end;padding:18px 22px;border-top:1px solid var(--line)}@media(max-width:1100px){.cards.columns-3{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding:25px}.topbar{padding:0 24px}.search-area{margin:20px 24px}}@media(max-width:700px){.layout{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}.side-footer,.folder-heading,#folder-nav{display:none}.sidebar #space-nav{display:flex;gap:4px;overflow-x:auto}.sidebar .nav-entry{white-space:nowrap;width:auto}.topbar{padding:0 12px;height:auto;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.header-tools{gap:5px}.theme-label{display:none}.header-tools .btn{padding:8px}.search-area{margin:14px 12px;padding:0 10px}.search-prefix{display:none}.content{padding:24px 14px}.content-header{align-items:flex-start;flex-wrap:wrap}.filters{align-items:start;flex-wrap:wrap;gap:14px}.cards.columns-2,.cards.columns-3{grid-template-columns:1fr}.form-two{grid-template-columns:1fr}}

.card-actions{display:flex;gap:8px}.card-delete:hover{color:var(--danger)}

/* Stage 3: Markdown reading and editing, inherited square-corner theme. */
.card-read{border:1px solid var(--line);background:transparent;color:var(--accent);padding:4px 7px;font-size:10px;font-weight:700;letter-spacing:.05em}
.card-read:hover{background:var(--panel-2)}
.reader-dialog{width:min(880px,calc(100vw - 24px));max-height:90vh}
.reader-meta{padding:12px 26px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.markdown-body{padding:26px;overflow-wrap:anywhere;font-size:14px;line-height:1.8;min-height:100px;max-height:65vh;overflow:auto}
.markdown-body h1,.markdown-body h2,.markdown-body h3{line-height:1.35;margin:1.3em 0 .5em;color:var(--ink)}
.markdown-body h1{font-size:1.8em}.markdown-body h2{font-size:1.4em}.markdown-body h3{font-size:1.2em}
.markdown-body h1:first-child,.markdown-body h2:first-child{margin-top:0}
.markdown-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.markdown-body blockquote{border-left:3px solid var(--accent);margin:1em 0;padding:.2em 1em;background:var(--panel-2)}
.markdown-body pre{max-width:100%;overflow:auto;background:var(--panel-2);border:1px solid var(--line);padding:14px}
.markdown-body code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--panel-2);font-size:.92em;padding:1px 3px}
.markdown-body pre code{padding:0}.markdown-body img{max-width:100%;height:auto}
.markdown-body table{border-collapse:collapse;display:block;overflow:auto}.markdown-body th,.markdown-body td{border:1px solid var(--line);padding:7px 10px}
.markdown-body hr{border:0;border-top:1px solid var(--line)}
#editor:has(.markdown-editor-host){width:min(1050px,calc(100vw - 24px))}
.markdown-editor-host{min-height:340px;border:1px solid var(--line);color:var(--ink);background:var(--panel)}
.markdown-editor-host .cherry{border:0!important;background:var(--panel)!important;color:var(--ink)!important}
.md-fallback{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:330px}
.md-fallback textarea{width:100%;min-height:330px;resize:vertical;border:0;border-right:1px solid var(--line);padding:16px;color:var(--ink)}
.md-fallback .markdown-body{padding:16px;max-height:450px;min-width:0;overflow:auto}
.md-status{color:var(--muted);font-size:11px;line-height:1.5}
@media(max-width:700px){.md-fallback{grid-template-columns:1fr}.md-fallback textarea{border-right:0;border-bottom:1px solid var(--line)}.reader-meta,.markdown-body{padding:16px}}
/* Backup dialog, strictly square corners across all themes. */
.backup-content{padding:24px;display:flex;flex-direction:column;gap:18px;font-size:13px;line-height:1.7;color:var(--muted)}
.backup-content p{margin:0}.backup-content b{color:var(--danger)}.backup-content hr{width:100%;border:0;border-top:1px solid var(--line)}
.backup-content input[type=file]{max-width:100%;padding:12px;color:var(--ink);border:1px solid var(--line)}
.backup-content button{align-self:flex-start}.backup-content #backup-status{min-height:1.5em;color:var(--accent)}
.backup-content h3{margin:0;color:var(--ink)}
.attachment-cleanup-actions{display:flex;flex-wrap:wrap;gap:8px}
#attachment-cleanup-status{min-height:1.5em;color:var(--accent)}
*,*::before,*::after{border-radius:0!important}

/* Fix 5: square, theme-responsive editor and anchored dialog heading. */
#editor .dialog-head{position:sticky;top:0;z-index:30;background:var(--panel);color:var(--ink)}
#editor .dialog-head h2{color:var(--ink)}
#editor .dialog-head .close-btn{color:var(--muted)}
#editor .dialog-head .close-btn:hover{color:var(--accent)}
/* Two thirds Markdown source, one third live preview on desktop. */


.md-fallback{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* Editor typography, gutters, active lines and preview use theme variables. */
.markdown-editor-host .cherry .cherry-editor,
.markdown-editor-host .cherry .cherry-previewer,
.markdown-editor-host .cherry .cherry-previewer .cherry-markdown,
.markdown-editor-host .cherry .CodeMirror-lines,
.markdown-editor-host .cherry .CodeMirror-line,
.markdown-editor-host .cherry .CodeMirror-gutters,
.markdown-editor-host .cherry .CodeMirror-linenumber,
.markdown-editor-host .cherry .CodeMirror .cm-header,
.markdown-editor-host .cherry .CodeMirror .cm-string,
.markdown-editor-host .cherry .cherry-toolbar .cherry-toolbar-button{color:var(--ink)!important}
.markdown-editor-host .cherry .CodeMirror .cm-header,
.markdown-editor-host .cherry .cherry-previewer a{color:var(--accent)!important}
.markdown-editor-host .cherry .CodeMirror-activeline-background{background:var(--glow)!important}
.markdown-editor-host .cherry .cherry-previewer blockquote,
.markdown-editor-host .cherry .cherry-previewer pre{background:var(--panel-2)!important;color:var(--ink)!important}
/* Workspace tags are a single horizontally scrolling row. */
.filters{min-width:0;align-items:center}
.tag-filters{flex:1 1 auto;min-width:0;max-width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:5px;white-space:nowrap;overscroll-behavior-inline:contain}
.tag-filter{flex:0 0 auto;white-space:nowrap}
.view-tools{flex:0 0 auto}
.workspace-tag-scroll{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;min-width:0;max-width:100%;scrollbar-width:thin;padding:2px 0 7px 20px}
.workspace-tag{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:10px;padding:3px 6px;white-space:nowrap}
.workspace-tag:hover,.workspace-tag.active{color:var(--accent);border-color:var(--accent)}
.workspace-entry{min-width:0}
.workspace-tag-fields{display:grid;gap:10px}
.footer-settings{display:block;padding:6px 0;border:0;background:none;color:var(--muted);font-size:10px;letter-spacing:.07em;text-align:left}
.footer-settings:hover,.side-footer a:hover{color:var(--accent)}
.side-footer{overflow-wrap:anywhere}
.side-footer a{display:block;color:var(--muted);font-size:10px;letter-spacing:normal}
.footer-fields{padding:24px;display:grid;gap:20px}
.footer-fields p{font-size:11px;color:var(--muted);margin:0}
@media(max-width:700px){.md-fallback{grid-template-columns:1fr}.filters{align-items:center;flex-wrap:nowrap}.tag-filters{max-width:calc(100vw - 145px)}}

/* Fix 6: Editor actions remain visible while the form scrolls. */
#editor .dialog-head{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--line);gap:16px;min-height:64px}
#editor .editor-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:0 0 auto}
#editor .editor-head-actions .close-btn{margin-left:4px;padding:6px 9px;font-size:16px}
#editor .editor-head-actions .btn{min-height:34px}
#editor #record-form{min-width:0}
@media(max-width:520px){#editor .dialog-head{padding:12px 10px;gap:8px}#editor .dialog-head h2{font-size:12px}#editor .editor-head-actions{gap:4px}#editor .editor-head-actions .btn{padding:8px;font-size:10px}}

/* Fix 6: Cherry Core owns an independent editor/preview CSS tree.
   Match those children explicitly; changing only .cherry does not restyle
   CodeMirror, the preview pane, its markdown descendants, or the toolbar. */
#editor .markdown-editor-host{
  --cherry-surface:var(--panel);
  --cherry-surface-raised:var(--panel-2);
  --cherry-fg:var(--ink);
  --cherry-fg-muted:var(--muted);
  --cherry-stroke:var(--line);
  --cherry-highlight:var(--accent);
  color:var(--ink)!important;background:var(--panel)!important;
}
#editor .markdown-editor-host .cherry,
#editor .markdown-editor-host .cherry-editor,
#editor .markdown-editor-host .cherry-previewer,
#editor .markdown-editor-host .cherry-previewer .cherry-markdown,
#editor .markdown-editor-host .cherry-toolbar,
#editor .markdown-editor-host .cherry-toolbar .cherry-toolbar-button,
#editor .markdown-editor-host .CodeMirror,
#editor .markdown-editor-host .CodeMirror-scroll,
#editor .markdown-editor-host .CodeMirror-sizer,
#editor .markdown-editor-host .CodeMirror-lines,
#editor .markdown-editor-host .CodeMirror-code,
#editor .markdown-editor-host .CodeMirror-gutters,
#editor .markdown-editor-host .cm-s-default,
#editor .markdown-editor-host .CodeMirror-line,
#editor .markdown-editor-host .CodeMirror-line span,
#editor .markdown-editor-host .cherry-previewer p,
#editor .markdown-editor-host .cherry-previewer li,
#editor .markdown-editor-host .cherry-previewer blockquote,
#editor .markdown-editor-host .cherry-previewer table,
#editor .markdown-editor-host .cherry-previewer td,
#editor .markdown-editor-host .cherry-previewer th{
  color:var(--cherry-fg)!important;
  background-color:var(--cherry-surface)!important;
  border-color:var(--cherry-stroke)!important;
}
/* Cherry's rendered Markdown can contain nested text nodes with its own palette. */
#editor .markdown-editor-host .cherry-previewer,
#editor .markdown-editor-host .cherry-previewer .cherry-markdown {color:var(--ink)!important}
#editor .markdown-editor-host .cherry-previewer :is(h1,h2,h3,h4,h5,h6,strong,em,span,div,ul,ol){color:inherit!important}
#editor .markdown-editor-host .cherry-previewer a,
#editor .markdown-editor-host .CodeMirror .cm-header,
#editor .markdown-editor-host .CodeMirror .cm-link,
#editor .markdown-editor-host .CodeMirror .cm-url{color:var(--accent)!important}
#editor .markdown-editor-host .CodeMirror .cm-comment,
#editor .markdown-editor-host .CodeMirror .cm-meta,
#editor .markdown-editor-host .CodeMirror-linenumber{color:var(--muted)!important}
#editor .markdown-editor-host .CodeMirror-cursor{border-left:2px solid var(--accent)!important}
#editor .markdown-editor-host .CodeMirror-selected,
#editor .markdown-editor-host .CodeMirror-focused .CodeMirror-selected{background:var(--panel-2)!important}
#editor .markdown-editor-host .CodeMirror-activeline-background,
#editor .markdown-editor-host .CodeMirror-activeline .CodeMirror-line{background:var(--panel-2)!important}
#editor .markdown-editor-host .cherry-toolbar{border-bottom:1px solid var(--line)!important}
#editor .markdown-editor-host .cherry-toolbar :is(button,i,svg),
#editor .markdown-editor-host .cherry-toolbar :is(button,i,svg)::before{color:var(--ink)!important;fill:currentColor}
#editor .markdown-editor-host .cherry-toolbar button:hover,
#editor .markdown-editor-host .cherry-toolbar button:focus-visible{background:var(--panel-2)!important;color:var(--accent)!important}
#editor .markdown-editor-host .cherry-previewer :is(pre,blockquote){background:var(--panel-2)!important;border-color:var(--line)!important;color:var(--ink)!important}
#editor .markdown-editor-host .cherry-previewer :is(pre,code){color:var(--ink)!important;background:var(--panel-2)!important}
#editor .markdown-editor-host .cherry-previewer :is(th,td){border-color:var(--line)!important}
#editor .markdown-editor-host .cherry-previewer hr{border-color:var(--line)!important}
#editor .markdown-editor-host .md-fallback textarea,
#editor .markdown-editor-host .md-fallback .markdown-body{background:var(--panel)!important;color:var(--ink)!important}
#editor .markdown-editor-host .md-fallback .markdown-body :is(p,li,span){color:inherit}
/* Editor source uses about two thirds of the available width. */


/* Fix 7: 2-level folders, item attachments & metadata, no rounded corners. */
.item-bottom-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:20px;align-items:start}
.item-side-tools{min-width:0;display:grid;gap:16px}
.item-folder-select{min-width:0}
.item-folder-select select{height:150px;min-width:0}
.item-attachment-files,input[type=file]#item-attachment-files{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);max-width:100%;font-size:12px;padding:10px}
.attachment-list{display:grid;gap:4px;max-height:140px;overflow:auto}
.attachment-row{display:flex;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;min-width:0}
.attachment-row>a,.attachment-row>span:first-child{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.attachment-row button{border:0;background:none;color:var(--danger);font-size:10px;padding:4px}
.word-stats{border:1px solid var(--line);background:var(--panel-2);padding:12px 14px;color:var(--muted);font-size:12px}
.card-paths{font-size:10px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-attachments{margin-top:25px;padding-top:15px;border-top:1px solid var(--line);font-size:12px}
.reader-attachments div{margin-top:8px}
.reader-attachments a{color:var(--accent);margin-right:8px}
@media(max-width:700px){.item-bottom-grid{grid-template-columns:minmax(0,1fr)}.item-folder-select select{height:125px}}

/* Stage 8: paginated card navigation and fixed edit toolbar. */
.item-pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin:28px 0 0;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em}.item-pagination .btn:disabled{opacity:.35}
#editor .dialog-head{position:sticky;top:0;z-index:30;background:var(--panel)}
#editor .editor-head-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.markdown-editor-host .cherry .CodeMirror-scroll{background:var(--panel)!important;color:var(--ink)!important}

/* Fix 9: private admin gate; no rounded corners, colors inherited from active theme. */
.auth-locked .app{visibility:hidden}
.auth-gate{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;color:var(--ink)}
.auth-gate[hidden]{display:none!important}
.auth-panel{width:min(430px,100%);border:1px solid var(--line);background:var(--panel);padding:34px;display:grid;gap:18px}
.auth-brand{font-size:17px;font-weight:800;letter-spacing:.1em;color:var(--accent)}
.auth-label{border-top:1px solid var(--line);padding-top:15px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--muted)}
.auth-panel h1{font-size:24px;margin:0;line-height:1.25}
.auth-description{font-size:12px;color:var(--muted);margin:0}
.auth-panel .form-field input{width:100%;padding:12px;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.auth-panel .btn{min-height:43px}
.auth-error{min-height:1.2em;color:var(--danger);font-size:12px;margin:0}
.auth-note{font-size:10px;color:var(--muted);letter-spacing:.12em;margin:0}

/* Fix 10: navigation regions scroll independently, up to one viewport tall. */
#space-nav, #folder-nav {max-height:100vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.folder-placement {padding:8px 12px;border-left:2px solid var(--accent);color:var(--muted);font-size:12px;background:var(--panel-2);}
@media(max-width:700px){#space-nav{max-height:100vh;overflow-y:auto;}#folder-nav{max-height:100vh;overflow-y:auto;}}


/* Fix 11: keep wordmark and live search visible together during page scroll.
   A shared sticky wrapper also handles narrow screens where the toolbar wraps. */
.app-header{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--line)}
.app-header .topbar{height:62px}
.app-header .search-area{margin:7px 34px 10px;min-height:40px;padding:0 12px;gap:10px}
.app-header .search-area input{height:38px;padding:7px 6px;text-align:center;font-size:13px;line-height:20px}
.app-header .search-area input::placeholder{text-align:center}
.app-header .search-count{flex-shrink:0}
@media(max-width:1100px){.app-header .search-area{margin:7px 24px 10px}}
@media(max-width:700px){
  .app-header .topbar{height:auto;min-height:58px}
  .app-header .search-area{margin:6px 12px 9px;padding:0 8px;min-height:38px}
  .app-header .search-area input{height:36px;padding:6px 2px;font-size:12px}
}

/* Fix 12: readable fixed search count and single-line card labels. */
.app-header .search-count{flex:0 0 92px;width:92px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.card-footer{min-width:0;align-items:center}
.card-tags{flex:1 1 0;min-width:0;max-width:100%;display:flex;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain;padding-bottom:3px}
.card-tags .item-tag{flex:0 0 auto;white-space:nowrap}
.card-actions{flex:0 0 auto}
/* Visitor mode contains no management controls. Also enforced server-side. */
.auth-gate{background:color-mix(in srgb,var(--bg) 94%,transparent)}
#auth-dismiss{margin-top:10px}
@media(max-width:700px){.app-header .search-count{flex-basis:76px;width:76px;font-size:9px}}

/* Fix 12: public browsing / administrator editing, stable result width, single row tags. */
.is-guest #new-space,.is-guest #new-space-side,.is-guest #new-folder,.is-guest #new-folder-main,
.is-guest #new-item,.is-guest #data-manager,.is-guest #footer-settings,
.is-guest .card-edit,.is-guest .card-delete,.is-guest #edit-selection,.is-guest #delete-selection{display:none!important}
.app-header .search-count{display:inline-flex;justify-content:flex-end;align-items:center;min-width:92px;flex:0 0 92px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.card-footer{min-width:0;align-items:center}
.card-tags{flex:1 1 auto;min-width:0;max-width:100%;display:flex;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-inline:contain;gap:5px;padding-bottom:3px}
.card-tags .item-tag{flex:0 0 auto;white-space:nowrap}
.card-actions{flex:0 0 auto;white-space:nowrap}

/* Fix 16: sharp 2:1 brand emblem and accessible brand editing */
.wordmark{display:flex;align-items:center;gap:0;cursor:pointer;user-select:none;min-width:0;letter-spacing:.045em}
.wordmark .logo{height:26px;width:52px;flex:0 0 52px;border:1px solid var(--accent);display:inline-flex;align-items:center;justify-content:center;color:var(--accent);font-size:13px;font-weight:900;letter-spacing:-.08em;margin-right:10px;line-height:1}
.wordmark #brand-bold{font-weight:800}
.wordmark #brand-regular{font-weight:400}
.wordmark:hover #brand-bold,.wordmark:hover #brand-regular{color:var(--accent)}
.wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#brand-dialog{width:min(540px,calc(100vw - 24px))}
.auth-brand #auth-brand-regular{font-weight:400;color:var(--muted)}

/* Fix 17: navigation placement, sharp logo, and balanced search */
.folder-nav-row{display:flex;align-items:center;gap:3px;min-width:0}
.folder-nav-row>.folder-entry{flex:1;min-width:0;width:auto;padding-left:calc(12px + var(--depth)*14px)}
.folder-nav-row .folder-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.folder-nav-row>.folder-add-child{flex:0 0 23px;margin:0 4px 0 auto;text-align:center}
#site-logo{cursor:default;overflow:hidden;padding:0}
#brand-logo-image{display:block;width:100%;height:100%;object-fit:contain}
#brand-logo-image[hidden]{display:none!important}
#site-title{cursor:pointer;display:inline-flex;align-items:center}
#site-title:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app-header .search-area{margin-top:8px;margin-bottom:8px;min-height:40px;padding:0 10px;align-items:center}
.app-header .search-area input{height:38px;padding:3px 2px;font-size:16px;line-height:26px;text-align:center}
@media(max-width:700px){.app-header .search-area{margin-top:7px;margin-bottom:7px;min-height:38px;padding:0 8px}.app-header .search-area input{height:36px;padding:2px;font-size:15px;line-height:26px}}

/* Fix 18: Logo always fills its rectangular 2:1 viewport, even if stretched. */
#site-logo{width:52px!important;height:26px!important;min-width:52px;flex:0 0 52px;aspect-ratio:2 / 1;overflow:hidden;display:inline-flex;align-items:stretch;justify-content:stretch;padding:0!important;border-radius:0!important}
#brand-logo-image:not([hidden]){display:block!important;position:relative;width:100%!important;height:100%!important;min-width:100%;max-width:none;min-height:100%;max-height:none;object-fit:fill!important;object-position:center;border-radius:0!important}
#brand-logo-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.folder-nav-row>.folder-entry .entry-icon{flex:0 0 15px;text-align:center}

/* Fix 21: shared site theme + accessible, sparse lightning accents. */
[data-theme="pink"]{color-scheme:light;--bg:#fff4f9;--panel:#fffafd;--panel-2:#ffe7f2;--line:#e8b9ce;--ink:#4a2538;--muted:#8c5974;--accent:#b83d77;--accent-ink:#fff;--danger:#bd3250;--glow:rgba(184,61,119,.07)}
[data-theme="purple"]{color-scheme:dark;--bg:#171021;--panel:#21152f;--panel-2:#2b1e3e;--line:#493359;--ink:#f1eafa;--muted:#b5a0c8;--accent:#c59bff;--accent-ink:#1a1025;--danger:#f08aa7;--glow:rgba(197,155,255,.08)}
.lightning-overlay{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none!important;z-index:9998;overflow:hidden;border:0!important;background:transparent!important;contain:strict}
@media(prefers-reduced-motion:reduce){.lightning-overlay{display:none!important}}


/* Fix 24: two slow drifting cloud strata. No rounded corners or mouse capture. */
.storm-cloud-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none!important;touch-action:none;overflow:hidden;background:transparent!important;border:0!important;contain:strict}
.storm-cloud-background{z-index:0;opacity:.86}
.storm-cloud-foreground{z-index:94;opacity:.65}
.layout{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.storm-cloud-layer{display:none!important}}


/* Fix 30: square, responsive full-screen reader and compact star rating. */
.card-meta{display:flex;align-items:center;gap:7px}
.card-maximize{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:14px;line-height:1;padding:2px 5px;cursor:pointer;flex:0 0 auto}
.card-maximize:hover{color:var(--accent);border-color:var(--accent)}
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;margin-top:8px;border-top:1px solid var(--line);padding-top:7px}
.card-bottom .card-paths{flex:1 1 auto;min-width:0;border:0;padding:0;margin:0}
.card-rating{display:flex;flex:0 0 auto;align-items:center;gap:0;white-space:nowrap}
.rating-star{border:0;background:transparent;color:var(--muted);opacity:.48;cursor:pointer;padding:2px;font-size:13px;line-height:1}
.rating-star.filled,.rating-star:hover,.rating-star:hover~.rating-value{color:#e3aa46;opacity:1}
.rating-value{color:var(--muted);font-size:10px;margin-left:3px;min-width:21px;text-align:right}
.reader-head-left,.reader-head-right{display:flex;align-items:center;gap:12px;min-width:0}
.reader-head-left h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reader .dialog-head{position:sticky;top:0;z-index:10;background:var(--panel);gap:14px}
#reader.reader-fullscreen{position:fixed;inset:0;width:100vw;max-width:none;max-height:none;height:100dvh;margin:0;border:0;overflow:auto}
#reader.reader-fullscreen .markdown-body{max-width:min(1050px,96vw);margin:0 auto}
#reader.reader-fullscreen .reader-meta{max-width:1050px;margin:0 auto}
#reader .dialog-actions{position:sticky;bottom:0;background:var(--panel)}
@media(max-width:650px){.card-bottom{flex-wrap:wrap}.card-rating{margin-left:auto}.reader-head-left h2{max-width:110px}.reader-head-left,.reader-head-right{gap:5px}#reader .dialog-head{padding:10px}#reader-share{font-size:10px;padding:6px}}

/* Fix 31: single expand icon and a single close control in READ. */
.card-maximize{display:inline-flex;align-items:center;justify-content:center;padding:3px 5px}
.card-maximize svg{display:block}
#reader .dialog-actions:has(> #reader-edit[hidden]){display:none}


/* Fix 33: full-viewport EDIT / ITEM. Keep the header and SAVE always visible. */
#editor.editor-item-fullscreen{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;overflow-y:auto;overscroll-behavior:contain}
#editor.editor-item-fullscreen #record-form{min-height:100%;width:100%;display:flex;flex-direction:column}
#editor.editor-item-fullscreen .dialog-head{position:sticky;top:0;z-index:110;flex-shrink:0;background:var(--panel)}
#editor.editor-item-fullscreen #record-fields{width:100%;max-width:none;flex:1;padding:22px clamp(14px,3vw,48px);gap:16px}
#editor.editor-item-fullscreen .markdown-editor-host{min-height:55vh;height:min(72vh,860px)}
#editor.editor-item-fullscreen .markdown-editor-host .cherry{min-height:55vh;height:100%!important}
#editor.editor-item-fullscreen .md-fallback{min-height:55vh}
/* Cherry Core readonly mode shares the visual rules of the EDIT preview. */
#reader .reader-cherry-host{width:100%;min-height:120px;color:var(--ink);background:transparent}
#reader .reader-cherry-host .cherry{width:100%!important;height:auto!important;min-height:120px;background:transparent!important;color:var(--ink)!important}
#reader .reader-cherry-host .cherry-previewer{width:100%!important;max-width:none!important;min-height:120px;height:auto!important;overflow:visible!important;background:transparent!important;color:var(--ink)!important}
#reader .reader-cherry-host .cherry-previewer .cherry-markdown{background:transparent!important;color:var(--ink)!important;padding:0!important}
#reader .reader-cherry-host .cherry-toolbar{display:none!important}
#reader .reader-cherry-host :is(h1,h2,h3,h4,h5,h6,strong,em,p,li,td,th,span){color:inherit}
#reader .reader-cherry-host a{color:var(--accent);text-decoration:underline}
#reader .reader-cherry-host :is(pre,blockquote){background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
#reader .reader-cherry-host :is(img,video,iframe){max-width:100%;height:auto}
/* Keep the browser's native height for the audio controls. */
#reader .reader-cherry-host audio{max-width:100%}
#reader .reader-cherry-host video{display:block;max-height:80vh;width:auto;background:#000}
#reader .reader-cherry-host iframe{max-height:75vh;border:1px solid var(--line)}
#reader .reader-cherry-host .cherry-editor{display:none!important}
#reader .reader-attachments{margin-top:22px;border-top:1px solid var(--line);padding:15px 0}
@media(max-width:700px){#editor.editor-item-fullscreen #record-fields{padding:14px 10px}#editor.editor-item-fullscreen .markdown-editor-host{height:65vh;min-height:360px}}


/* Fix 34 — compact metadata deck above an expansive Markdown workspace. */
#editor.editor-item-fullscreen #record-fields{
  padding:14px clamp(12px,2vw,30px) 24px;
  gap:14px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
#editor .item-editor-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  width:100%;
  min-width:0;
}
#editor .editor-control-group{
  display:grid;
  gap:12px;
  align-items:start;
  min-width:0;
  padding:11px 14px;
  background:var(--panel-2);
  border:1px solid var(--line);
}
#editor .editor-main-meta{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
#editor .editor-categorization{grid-template-columns:minmax(0,1fr) minmax(220px,.36fr)}
#editor .editor-visibility-group{display:grid;grid-template-columns:minmax(115px,1fr) auto;gap:12px;align-items:end;min-width:0}
#editor .editor-pin-control{align-items:center;gap:9px;min-height:36px;white-space:nowrap}
#editor .editor-resources{grid-template-columns:minmax(0,2fr) minmax(230px,1fr)}
#editor .item-side-tools{display:grid;grid-template-columns:minmax(190px,300px) minmax(0,1fr);gap:6px 12px;align-items:start;min-width:0}
#editor .item-side-tools > .md-status{grid-column:1/-1}
#editor .attachment-list{max-height:72px;overflow:auto;align-self:end}
#editor .item-folder-select select{height:88px;min-height:88px;resize:none}
#editor .workspace-tag-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:7px}
#editor .form-field{min-width:0;gap:5px}
#editor .editor-control-group .form-field :is(input,select){height:36px;min-height:0;padding:6px 9px;font-size:13px}
#editor .editor-control-group .form-field input[type=checkbox]{width:16px;height:16px;min-height:0;padding:0}
#editor .editor-control-group .form-field input[type=file]{height:auto;min-height:36px;font-size:11px;max-width:100%;padding:5px}
#editor .editor-control-group .item-folder-select select{height:88px;min-height:88px}
#editor .item-markdown-section{display:flex;flex-direction:column;min-width:0;flex:1;gap:8px}
#editor .editor-markdown-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
#editor .editor-markdown-heading .word-stats{padding:4px 10px;font-size:11px;white-space:nowrap}
#editor.editor-item-fullscreen .item-markdown-section .markdown-editor-host{
  flex:1;min-height:460px;height:min(68vh,900px);
}
#editor.editor-item-fullscreen .item-markdown-section .markdown-editor-host .cherry{min-height:460px;height:100%!important}
@media(max-width:900px){
  #editor .editor-categorization{grid-template-columns:minmax(0,1fr)}
  #editor .editor-resources{grid-template-columns:minmax(0,1fr) minmax(210px,.65fr)}
  #editor .item-side-tools{grid-template-columns:minmax(0,1fr)}
  #editor .attachment-list{max-height:64px}
}
@media(max-width:640px){
  #editor .editor-control-group{padding:10px;gap:10px}
  #editor .editor-main-meta,#editor .editor-resources{grid-template-columns:minmax(0,1fr)}
  #editor .editor-visibility-group{grid-template-columns:minmax(0,1fr) auto}
  #editor .workspace-tag-fields{grid-template-columns:minmax(0,1fr)}
  #editor.editor-item-fullscreen #record-fields{padding:10px;gap:10px}
  #editor.editor-item-fullscreen .item-markdown-section .markdown-editor-host{min-height:400px;height:68vh}
}


/* Fix 35: two-row compact metadata deck. Full-width Markdown remains below. */
#editor .editor-compact-grid{
  display:grid;grid-template-columns:minmax(175px,1.25fr) minmax(175px,1.25fr) minmax(210px,1.4fr) 92px 58px;
  align-items:end;column-gap:10px;row-gap:7px;padding:9px 12px;
}
#editor .editor-compact-grid .form-field{min-width:0;gap:3px}
#editor .editor-compact-grid .form-field>span{font-size:11px;line-height:1.2;white-space:nowrap;color:var(--muted)}
#editor .editor-compact-grid .form-field :is(input:not([type=checkbox]), select){min-height:0;height:31px;padding:3px 7px;font-size:12px}
#editor .editor-compact-grid .editor-access-field select{width:90px;max-width:100%}
#editor .editor-compact-grid .editor-pin-control{min-height:31px;display:flex;gap:5px;align-items:center;justify-content:start;padding-bottom:3px}
#editor .editor-compact-grid .editor-pin-control input{height:15px;width:15px}
#editor .editor-tags-field{grid-column:3 / 4;grid-row:1}
#editor .editor-attachments-field{grid-column:1 / 4;grid-row:2;display:grid;grid-template-columns:auto minmax(150px,240px) minmax(0,1fr);align-items:center;gap:7px}
#editor .editor-attachments-field>span{white-space:nowrap}
#editor .editor-attachments-field input[type=file]{width:100%;max-width:240px}
#editor .editor-attachments-field .attachment-list{min-width:0;max-height:34px;overflow:auto;display:flex;align-items:center;gap:5px;font-size:11px}
#editor .editor-folders-field{grid-column:4 / 6;grid-row:2;position:relative}
#editor .workspace-tag-fields{display:flex;align-items:center;gap:5px;min-width:0;overflow-x:auto;scrollbar-width:thin}
#editor .workspace-tag-inline{display:flex;align-items:center;gap:5px;flex:1 0 auto;min-width:0}
#editor .workspace-tag-inline span{white-space:nowrap;font-size:11px;color:var(--muted)}
#editor .workspace-tag-inline input{width:110px;min-width:85px;max-width:160px}
#editor .folder-picker{position:relative;border:1px solid var(--line);background:var(--panel);height:31px}
#editor .folder-picker>summary{list-style:none;display:block;cursor:pointer;padding:5px 20px 5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;height:30px}
#editor .folder-picker>summary::-webkit-details-marker{display:none}
#editor .folder-picker>summary::after{content:'⌄';position:absolute;right:6px;top:4px;color:var(--muted)}
#editor .folder-picker[open]{z-index:30}
#editor .folder-picker-options{position:absolute;right:-1px;top:29px;width:max(100%,240px);max-width:min(340px,80vw);max-height:230px;overflow:auto;padding:5px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 24px #0005}
#editor .folder-picker-choice{display:flex;align-items:center;gap:6px;padding:5px 6px;font-size:12px;cursor:pointer;white-space:normal}
#editor .folder-picker-choice:hover{background:var(--panel-2)}
#editor .folder-picker-choice input{width:14px;height:14px;flex:none}
#editor .folder-picker-choice span{overflow-wrap:anywhere}
#editor.editor-item-fullscreen #record-fields{gap:8px;padding-top:9px}
#editor .item-editor-controls{gap:0}
@media(max-width:1050px){
 #editor .editor-compact-grid{grid-template-columns:minmax(140px,1fr) minmax(140px,1fr) minmax(180px,1.1fr) 82px 55px}
 #editor .editor-attachments-field{grid-column:1 / 4}
 #editor .editor-folders-field{grid-column:4 / 6}
}
@media(max-width:760px){
 #editor .editor-compact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 90px 56px}
 #editor .editor-tags-field{grid-column:1 / 3;grid-row:2}
 #editor .editor-access-field{grid-column:3;grid-row:2}
 #editor .editor-pin-control{grid-column:4;grid-row:2}
 #editor .editor-attachments-field{grid-column:1 / 3;grid-row:3;grid-template-columns:minmax(0,1fr)}
 #editor .editor-folders-field{grid-column:3 / 5;grid-row:3}
}
@media(max-width:480px){
 #editor .editor-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #editor .editor-tags-field{grid-column:1 / 3;grid-row:auto}
 #editor .editor-access-field,#editor .editor-pin-control{grid-column:auto;grid-row:auto}
 #editor .editor-attachments-field{grid-column:1 / 3;grid-row:auto}
 #editor .editor-folders-field{grid-column:1 / 3;grid-row:auto}
}


/* Fix 36: compact property row that fills available width before wrapping.
   No fixed grid rows: folder sits beside the tags whenever space allows. */
#editor .editor-compact-grid{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;
  grid-template-columns:none;
}
#editor .editor-compact-grid>.form-field{grid-column:auto;grid-row:auto;min-width:0;max-width:100%}
#editor .editor-compact-grid>.form-field:nth-child(1){flex:1 1 190px}
#editor .editor-compact-grid>.form-field:nth-child(2){flex:1 1 190px}
#editor .editor-compact-grid>.editor-tags-field{flex:1.6 1 270px}
#editor .editor-compact-grid>.editor-folders-field{flex:1 1 180px;position:relative}
#editor .editor-compact-grid>.editor-access-field{flex:0 0 90px}
#editor .editor-compact-grid>.editor-pin-control{flex:0 0 56px}
#editor .editor-compact-grid>.editor-attachments-field{
  flex:1 1 100%;display:flex;align-items:center;gap:8px;min-width:0;
}
#editor .editor-compact-grid .workspace-tag-fields{width:100%;overflow-x:auto}
#editor .editor-compact-grid .workspace-tag-inline{flex:1 1 auto}
#editor .editor-compact-grid .workspace-tag-inline input{
  width:clamp(140px,15vw,300px);min-width:115px;max-width:100%;flex:1 1 160px;
}
#editor .editor-compact-grid .folder-picker{width:100%}
#editor .editor-compact-grid .editor-attachments-field .attachment-list{flex:1 1 auto;min-width:0}
@media(max-width:680px){
 #editor .editor-compact-grid>.form-field:nth-child(1),
 #editor .editor-compact-grid>.form-field:nth-child(2){flex:1 1 210px}
 #editor .editor-compact-grid>.editor-tags-field{flex:1 1 240px}
 #editor .editor-compact-grid>.editor-folders-field{flex:1 1 170px}
 #editor .editor-compact-grid>.editor-attachments-field{flex-wrap:wrap}
}

/* Fix 37: Cherry splitter is draggable. 2:1 is only the INITIAL ratio.
   Do not use !important widths/flex here: Cherry updates inline pane sizes
   while the user drags its divider. */
@media (min-width:701px){
  #editor .markdown-editor-host .cherry .cherry-editor{width:66.6667%;min-width:0}
  #editor .markdown-editor-host .cherry .cherry-previewer{width:33.3333%;min-width:0}
}
/* Fullscreen READ must allow the DOCUMENT to occupy the entire viewport,
   rather than inheriting the normal reader's 1050px / 65vh limits. */
#reader.reader-fullscreen .markdown-body{
  width:100%;max-width:none;max-height:none;overflow:visible;
  margin:0;padding:clamp(14px,2vw,30px);
}
#reader.reader-fullscreen .reader-meta{width:100%;max-width:none}
#reader.reader-fullscreen .reader-cherry-host,
#reader.reader-fullscreen .reader-cherry-host .cherry,
#reader.reader-fullscreen .reader-cherry-host .cherry-previewer{
  width:100%!important;max-width:none!important;
}

#reader:not(.reader-fullscreen) {
  position: fixed;
  inset: 0;
  margin: auto;
}