/* app.css — Verso workspace + block editor UI */
:root {
  --sb-w: 260px;
  --side-bg: #f7f6f3;
  --side-hover: #ecebe6;
  --side-ink: #5f5b53;
}
html, body { height: 100%; }
body.app { overflow: hidden; background: var(--paper); }

.workspace { display: flex; height: 100vh; }

/* ---------------- sidebar ---------------- */
.sidebar {
  width: var(--sb-w); flex: 0 0 var(--sb-w); background: var(--side-bg);
  border-right: 1px solid var(--hair); display: flex; flex-direction: column;
  transition: margin-left .24s var(--ease); user-select: none;
}
.sidebar.hidden { margin-left: calc(-1 * var(--sb-w)); }

.ws-switch { position: relative; padding: 10px 8px 6px; }
.ws-btn { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; font-size: .95rem; font-weight: 600; color: var(--ink); text-align: left; }
.ws-btn:hover { background: var(--side-hover); }
.ws-btn .ws-emoji { font-size: 1.1rem; }
.ws-btn .ws-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-btn .ws-chev { color: var(--ink-mute); font-size: .8rem; }
.ws-plan { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--hair-strong); border-radius: 4px; padding: 1px 5px; }

.ws-menu { position: absolute; left: 8px; right: 8px; top: 52px; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; z-index: 40; }
.ws-menu .ws-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .92rem; }
.ws-menu .ws-item:hover { background: var(--side-hover); }
.ws-menu .ws-item.on { font-weight: 600; }
.ws-menu .ws-item .chk { margin-left: auto; color: var(--blue); }
.ws-menu .ws-new { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 8px; color: var(--ink-mute); }

.sb-actions { padding: 2px 12px 8px; display: flex; flex-direction: column; gap: 1px; }
.sb-link { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; color: var(--side-ink); font-size: .9rem; cursor: pointer; border: 0; background: transparent; text-align: left; width: 100%; }
.sb-link:hover { background: var(--side-hover); color: var(--ink); }
.sb-link .ic { width: 18px; text-align: center; opacity: .8; }
.sb-link kbd { margin-left: auto; font-family: var(--font-mono); font-size: .62rem; color: var(--ink-faint); }

.sb-section-label { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 16px 4px; }
.tree { flex: 1; overflow-y: auto; padding: 0 8px 30px; }
.tree::-webkit-scrollbar { width: 8px; } .tree::-webkit-scrollbar-thumb { background: #dcdad3; border-radius: 8px; }

.tree-row { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; cursor: pointer; color: var(--side-ink); font-size: .9rem; position: relative; }
.tree-row:hover { background: var(--side-hover); }
.tree-row.active { background: #e4e2db; color: var(--ink); font-weight: 500; }
.tree-row .tw-caret { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--ink-mute); font-size: .62rem; transition: transform .15s; flex: 0 0 16px; }
.tree-row .tw-caret.open { transform: rotate(90deg); }
.tree-row .tw-caret:hover { background: #d9d7cf; }
.tree-row .tw-emoji { font-size: .98rem; flex: 0 0 auto; }
.tree-row .tw-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .tw-actions { display: none; gap: 2px; }
.tree-row:hover .tw-actions { display: flex; }
.tw-act { width: 20px; height: 20px; border: 0; background: transparent; border-radius: 4px; color: var(--ink-mute); font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.tw-act:hover { background: #d5d3cb; color: var(--ink); }
.tree-children { margin-left: 14px; border-left: 1px solid transparent; }
.tree-empty { font-size: .82rem; color: var(--ink-faint); padding: 4px 10px 4px 26px; }

.sb-foot { border-top: 1px solid var(--hair); padding: 8px; }
.sb-foot .up { width: 100%; display: flex; gap: 9px; align-items: center; padding: 9px 10px; border-radius: 8px; background: linear-gradient(120deg,#eef4fd,#f8f0e8); border: 1px solid #e4e6e2; cursor: pointer; text-align: left; }
.sb-foot .up:hover { box-shadow: var(--shadow-sm); }
.sb-foot .up .up-t { font-size: .82rem; font-weight: 600; }
.sb-foot .up .up-s { font-size: .72rem; color: var(--ink-mute); }

/* ---------------- main ---------------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--paper); }
.topbar { height: 45px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid transparent; flex: 0 0 45px; }
.topbar .icon-btn { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 6px; color: var(--ink-mute); font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.topbar .icon-btn:hover { background: var(--paper-warm-2); color: var(--ink); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-soft); overflow: hidden; }
.crumbs .cr { padding: 3px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.crumbs .cr:hover { background: var(--paper-warm-2); }
.crumbs .sep { color: var(--ink-faint); }
.topbar .spacer { flex: 1; }
.top-act { font-size: .84rem; color: var(--ink-soft); padding: 6px 10px; border-radius: 6px; border: 0; background: transparent; }
.top-act:hover { background: var(--paper-warm-2); color: var(--ink); }
.top-act.share.on { color: var(--blue); }
.avatars { display: flex; }
.avatar { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -7px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; color: #fff; font-weight: 600; }

.scroll { flex: 1; overflow-y: auto; }
.scroll::-webkit-scrollbar { width: 12px; } .scroll::-webkit-scrollbar-thumb { background: #e3e1da; border-radius: 12px; border: 3px solid var(--paper); }

.page-cover { height: 0; }
.page-head { max-width: 740px; margin: 0 auto; padding: 56px 60px 0; }
.page-emoji { font-size: 3.4rem; line-height: 1; margin-bottom: 8px; cursor: pointer; display: inline-block; border-radius: 8px; padding: 2px; }
.page-emoji:hover { background: var(--paper-warm-2); }
.page-title { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: 1.12; letter-spacing: -.02em; outline: none; color: var(--ink); }
.page-title:empty::before { content: attr(data-ph); color: var(--ink-faint); }
.page-meta { font-size: .78rem; color: var(--ink-faint); margin-top: 8px; font-family: var(--font-mono); }

/* ---------------- editor ---------------- */
.editor { max-width: 740px; margin: 0 auto; padding: 10px 60px 40vh; }
.blocks { position: relative; }
.editor-tail { height: 40vh; min-height: 120px; cursor: text; }

.blk { position: relative; display: flex; align-items: flex-start; border-radius: 4px; }
.blk[data-color="gray"] .blk-content { color: var(--ink-mute); }
.blk[data-color="blue"] > .blk-body { background: var(--tint-blue); }
.blk[data-color="green"] > .blk-body { background: var(--tint-green); }
.blk[data-color="yellow"] > .blk-body { background: var(--tint-yellow); }
.blk[data-color="pink"] > .blk-body { background: var(--tint-pink); }
.blk[data-color] > .blk-body { border-radius: 5px; padding-left: 8px; padding-right: 8px; margin-left: -8px; }

.blk-gutter { position: absolute; left: -46px; top: 2px; display: flex; gap: 0; opacity: 0; transition: opacity .1s var(--ease); }
.blk:hover > .blk-gutter { opacity: 1; }
.g-btn { width: 22px; height: 24px; border: 0; background: transparent; border-radius: 5px; color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; }
.g-plus { font-size: 1.1rem; }
.g-btn:hover { background: var(--side-hover); color: var(--ink-soft); }
.g-handle { cursor: grab; letter-spacing: -3px; font-size: .95rem; }
.g-handle:active { cursor: grabbing; }
.blk.dragging { opacity: .4; }

.blk-body { flex: 1; min-width: 0; padding: 3px 0; }
.blk-content { outline: none; line-height: 1.55; word-break: break-word; caret-color: var(--ink); }
.blk-content:empty::before, .blk-content.img-cap:empty::before { content: attr(data-ph); color: var(--ink-faint); pointer-events: none; }
.blk-content.plain::before { content: none; }
.blk-content code { font-family: var(--font-mono); font-size: .86em; background: rgba(135,131,120,.15); color: #c7472e; padding: 1px 5px; border-radius: 4px; }
.blk-content b, .blk-content strong { font-weight: 650; }

.blk[data-type="h1"] .blk-content { font-family: var(--font-display); font-size: 1.9rem; font-weight: 620; letter-spacing: -.02em; margin-top: 6px; }
.blk[data-type="h2"] .blk-content { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.015em; margin-top: 4px; }
.blk[data-type="h3"] .blk-content { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; margin-top: 2px; }
.blk[data-type="h1"] .blk-content:empty::before, .blk[data-type="h2"] .blk-content:empty::before, .blk[data-type="h3"] .blk-content:empty::before { font-family: var(--font-display); }

.blk-marker { flex: 0 0 24px; text-align: center; color: var(--ink-soft); user-select: none; padding-top: 1px; }
.blk-marker.bullet { font-size: 1.3rem; line-height: 1.2; }
.blk-marker.num { font-variant-numeric: tabular-nums; font-size: .95rem; padding-top: 2px; }
.blk[data-type="bullet"] .blk-body, .blk[data-type="num"] .blk-body, .blk[data-type="todo"] .blk-body { display: flex; align-items: flex-start; }
.blk[data-type="bullet"] .blk-content, .blk[data-type="num"] .blk-content, .blk[data-type="todo"] .blk-content { flex: 1; }

.blk-check { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 6px 0 3px; border: 1.5px solid var(--ink-faint); border-radius: 4px; background: var(--paper); color: #fff; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; transition: .12s; }
.blk-check:hover { border-color: var(--ink-mute); }
.blk-check.on { background: var(--blue); border-color: var(--blue); }
.blk[data-type="todo"] .blk-content { transition: color .15s; }
.blk[data-type="todo"] .blk-check.on ~ .blk-content { color: var(--ink-faint); text-decoration: line-through; }

.blk-caret { flex: 0 0 22px; width: 22px; height: 24px; border: 0; background: transparent; color: var(--ink-mute); font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; transition: transform .16s var(--ease); border-radius: 4px; }
.blk-caret.open { transform: rotate(90deg); }
.blk-caret:hover { background: var(--side-hover); }
.blk[data-type="toggle"] .blk-body { display: flex; flex-wrap: wrap; align-items: flex-start; }
.blk[data-type="toggle"] > .blk-body > .blk-content { flex: 1; min-width: 0; }
.blk-children { flex: 0 0 100%; width: 100%; margin-left: 22px; overflow: hidden; transition: height .18s var(--ease); }
.blk-children.collapsed { display: none; }
.blk-children.collapsing { transition: height .18s var(--ease); }
.toggle-add { border: 0; background: transparent; color: var(--ink-faint); font-size: .86rem; padding: 3px 6px; text-align: left; }
.toggle-add:hover { color: var(--ink-mute); }

.blk[data-type="quote"] .blk-body { border-left: 3px solid var(--ink); padding-left: 16px; }
.blk[data-type="quote"] .blk-content { font-family: var(--font-display); font-size: 1.1rem; font-style: italic; }

.callout-emoji { flex: 0 0 auto; padding-top: 1px; }
.blk[data-type="callout"] .blk-body { display: flex; gap: 10px; background: var(--paper-warm-2); border: 1px solid var(--hair); border-radius: 8px; padding: 14px 16px; }
.blk[data-type="callout"][data-color="blue"] .blk-body, .blk[data-type="callout"] .blk-body { }
.blk[data-type="callout"] .blk-content { flex: 1; }

.blk-divider { height: 0; border-top: 1px solid var(--hair-strong); margin: 8px 0; }

.blk-image img { border-radius: 6px; border: 1px solid var(--hair); }
.img-cap { font-size: .84rem; color: var(--ink-mute); text-align: center; margin-top: 6px; }
.blk-image-empty { width: 100%; text-align: left; padding: 14px 16px; border: 1px dashed var(--hair-strong); border-radius: 8px; background: var(--paper-warm); color: var(--ink-mute); font-size: .9rem; }
.blk-image-empty:hover { background: var(--paper-warm-2); }

.blk-code { background: #2b2822; border-radius: 8px; overflow: hidden; margin: 2px 0; }
.code-bar { display: flex; align-items: center; padding: 6px 10px; gap: 8px; }
.code-lang { background: rgba(255,255,255,.08); color: #d9d3c6; border: 0; border-radius: 5px; font-size: .74rem; padding: 3px 6px; font-family: var(--font-mono); }
.code-copy { margin-left: auto; background: rgba(255,255,255,.08); color: #d9d3c6; border: 0; border-radius: 5px; font-size: .72rem; padding: 3px 9px; font-family: var(--font-mono); }
.code-copy:hover { background: rgba(255,255,255,.16); }
.blk-code pre { margin: 0; padding: 0 16px 16px; }
.blk-code .blk-content { font-family: var(--font-mono); font-size: .86rem; line-height: 1.6; color: #f2ede2; white-space: pre-wrap; }

.blk-page { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 5px; color: var(--ink); border-bottom: 1px solid var(--hair-strong); }
.blk-page:hover { background: var(--paper-warm-2); }
.bp-title { font-weight: 500; }

.blk-cols { display: flex; gap: 26px; width: 100%; }
.blk-col { flex: 1; min-width: 0; }
@media (max-width: 640px) { .blk-cols { flex-direction: column; gap: 0; } }

/* ---------------- table / database ---------------- */
.blk-table { border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; margin: 6px 0; }
.tbl-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--hair); }
.tbl-title { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-right: auto; }
.tbl-btn { border: 0; background: transparent; color: var(--ink-mute); font-size: .8rem; padding: 4px 9px; border-radius: 5px; }
.tbl-btn:hover { background: var(--paper-warm-2); color: var(--ink); }
.tbl-btn.active { color: var(--blue); }
.blk-table table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.blk-table th { border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); padding: 0 4px; text-align: left; background: var(--paper-warm); font-weight: 500; white-space: nowrap; }
.blk-table th .col-type { display: inline-block; vertical-align: middle; padding: 0 4px 0 4px; color: var(--ink-faint); font-size: .78rem; }
.col-name { display: inline-block; vertical-align: middle; border: 0; background: transparent; font-size: .82rem; font-weight: 600; color: var(--ink-soft); padding: 8px 2px 8px 0; width: calc(100% - 30px); outline: none; }
.col-add { width: 34px; text-align: center; color: var(--ink-faint); cursor: pointer; }
.col-add:hover { background: var(--side-hover); color: var(--ink); }
.blk-table td { border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); padding: 0; }
.blk-table td:last-child, .blk-table th:last-child { border-right: 0; }
.blk-table tr:last-child td { border-bottom: 0; }
.cell-input { border: 0; background: transparent; width: 100%; padding: 7px 9px; font-size: .88rem; outline: none; color: var(--ink); font-family: inherit; }
.cell-input:focus { box-shadow: inset 0 0 0 2px var(--blue); border-radius: 3px; }
.cell-select { padding: 4px 7px; }
.cell-tag { border: 0; border-radius: 4px; font-size: .78rem; padding: 3px 9px; cursor: pointer; }
.cell-tag.empty { background: transparent; color: var(--ink-faint); }
.cell-tag.filled { color: var(--ink); }
.tag-0 { background: #e6eff9; } .tag-1 { background: #e7f2ea; } .tag-2 { background: #fbf3db; } .tag-3 { background: #f8e9ef; }
.row-del { width: 30px; text-align: center; }
.row-del-btn { opacity: 0; border: 0; background: transparent; color: var(--ink-faint); font-size: 1.1rem; }
tr:hover .row-del-btn { opacity: 1; }
.row-del-btn:hover { color: #c0392b; }
.tbl-foot { padding: 7px 12px; font-size: .76rem; color: var(--ink-faint); border-top: 1px solid var(--hair); }

.cell-menu, .filter-menu { position: fixed; z-index: 200; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 8px; box-shadow: var(--shadow-md); padding: 5px; min-width: 160px; }
.cell-opt { padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: .82rem; margin: 2px 0; }
.cell-opt.tag-0,.cell-opt.tag-1,.cell-opt.tag-2,.cell-opt.tag-3 { display: inline-block; margin-right: 4px; }
.cell-opt.clear { color: var(--ink-mute); }
.cell-opt:hover { outline: 1px solid var(--hair-strong); }
.filter-menu { min-width: 300px; padding: 10px; }
.fm-title { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); margin-bottom: 8px; }
.fm-row { display: flex; gap: 5px; margin-bottom: 6px; align-items: center; }
.fm-row select, .fm-row input { border: 1px solid var(--hair-strong); border-radius: 5px; padding: 5px 6px; font-size: .8rem; font-family: inherit; min-width: 0; }
.fm-row select:first-child { flex: 1; }
.fm-row input { flex: 1; }
.fm-del { border: 0; background: transparent; color: var(--ink-faint); font-size: 1rem; cursor: pointer; }
.fm-add { border: 0; background: transparent; color: var(--blue); font-size: .82rem; padding: 4px 2px; margin-top: 2px; }

/* ---------------- slash menu ---------------- */
.slash-menu { position: fixed; z-index: 300; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 10px; box-shadow: var(--shadow-lg); width: 310px; max-height: 340px; overflow-y: auto; padding: 6px; animation: pop .12s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.slash-group { font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 8px 4px; }
.slash-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.slash-item.on { background: var(--paper-warm-2); }
.slash-ic { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hair); border-radius: 6px; background: var(--paper); font-size: .95rem; color: var(--ink-soft); }
.slash-tx { display: flex; flex-direction: column; min-width: 0; }
.slash-name { font-size: .9rem; font-weight: 500; color: var(--ink); }
.slash-hint { font-size: .76rem; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slash-empty { padding: 14px; font-size: .84rem; color: var(--ink-mute); text-align: center; }

/* ---------------- block menu ---------------- */
.blk-menu { position: fixed; z-index: 300; background: #ffffff; border: 1px solid var(--hair-strong); border-radius: 10px; box-shadow: var(--shadow-lg); width: 232px; padding: 5px; animation: pop .12s var(--ease) both; }
.bm-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: .88rem; position: relative; }
.bm-item:hover { background: var(--paper-warm-2); }
.bm-item.danger:hover { background: #fbeae7; color: #c0392b; }
.bm-ic { width: 18px; text-align: center; color: var(--ink-soft); }
.bm-div { height: 1px; background: var(--hair); margin: 5px 4px; }
.bm-caret { margin-left: auto; color: var(--ink-faint); }
.has-sub .bm-sub { position: absolute; left: 100%; top: -5px; margin-left: 4px; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 10px; box-shadow: var(--shadow-lg); width: 190px; padding: 5px; display: none; z-index: 10; }
.has-sub:hover .bm-sub { display: block; }
.bm-dot { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--hair-strong); }
.dot-default { background: var(--paper); } .dot-gray { background: #e3e1da; } .dot-blue { background: var(--tint-blue); } .dot-green { background: var(--tint-green); } .dot-yellow { background: var(--tint-yellow); } .dot-pink { background: var(--tint-pink); }

/* ---------------- drop guide ---------------- */
.drop-guide { position: fixed; z-index: 250; background: var(--guide); border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 1px rgba(56,160,216,.3); transition: opacity .08s; }
.drop-guide.horizontal::before, .drop-guide.vertical::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--guide); }
.drop-guide.horizontal::before { left: -5px; top: -2.5px; }
.drop-guide.vertical::before { top: -5px; left: -2.5px; }

/* ---------------- flash toast ---------------- */
.editor-flash { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: .86rem; box-shadow: var(--shadow-lg); opacity: 0; transition: .28s var(--ease); z-index: 400; }
.editor-flash.in { transform: translate(-50%, 0); opacity: 1; }

/* ---------------- search modal ---------------- */
.modal-veil { position: fixed; inset: 0; background: rgba(30,26,20,.28); z-index: 500; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; opacity: 0; transition: opacity .16s; }
.modal-veil.show { opacity: 1; }
.search-box { width: 600px; max-width: 92vw; background: var(--paper); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-8px); transition: transform .16s var(--ease); }
.modal-veil.show .search-box { transform: none; }
.search-in { width: 100%; border: 0; border-bottom: 1px solid var(--hair); padding: 16px 18px; font-size: 1.05rem; outline: none; font-family: inherit; }
.search-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.search-hit { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.search-hit.on, .search-hit:hover { background: var(--paper-warm-2); }
.search-hit .sh-emoji { font-size: 1.1rem; }
.search-hit .sh-title { font-weight: 500; }
.search-hit .sh-crumb { font-size: .78rem; color: var(--ink-mute); margin-left: auto; }
.search-empty { padding: 24px; text-align: center; color: var(--ink-mute); font-size: .9rem; }

/* ---------------- share popover ---------------- */
.share-pop { position: fixed; z-index: 300; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 12px; box-shadow: var(--shadow-lg); width: 340px; padding: 16px; }
.share-pop h4 { font-family: var(--font-sans); font-size: .95rem; margin: 0 0 4px; }
.share-pop p { font-size: .82rem; color: var(--ink-mute); margin: 0 0 12px; }
.share-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); }
.share-toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--hair-strong); border: 0; position: relative; transition: background .16s; flex: 0 0 38px; }
.share-toggle::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .16s var(--ease); box-shadow: var(--shadow-sm); }
.share-toggle.on { background: var(--blue); } .share-toggle.on::after { left: 18px; }
.share-link { display: flex; gap: 6px; margin-top: 10px; }
.share-link input { flex: 1; border: 1px solid var(--hair-strong); border-radius: 6px; padding: 7px 9px; font-size: .78rem; font-family: var(--font-mono); color: var(--ink-soft); background: var(--paper-warm); }
.share-link button { border: 0; background: var(--ink); color: #fff; border-radius: 6px; padding: 7px 12px; font-size: .8rem; }

/* mobile */
.sb-scrim { display: none; }
@media (max-width: 820px) {
  .sidebar { position: fixed; z-index: 100; height: 100vh; box-shadow: var(--shadow-lg); }
  .sidebar.hidden { margin-left: calc(-1 * var(--sb-w)); }
  .sb-scrim.show { display: block; position: fixed; inset: 0; background: rgba(30,26,20,.25); z-index: 90; }
  .page-head { padding: 32px 24px 0; }
  .editor { padding: 10px 24px 40vh; }
  .page-title { font-size: 2rem; }
}