/* ==========================================================================
   APP SHELL — sidebar, top bar, page canvas, blocks, database views, overlays
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

/* ---- sidebar ------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  height: 100vh; position: sticky; top: 0;
  display: flex; flex-direction: column; overflow-y: auto;
  transition: width var(--normal) var(--ease);
}
.sidebar .brand {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text);
}
.sidebar .brand .dot {
  width: 20px; height: 20px; border-radius: var(--radius-sm);
  background: var(--accent); flex: 0 0 auto;
}
.sidebar nav { padding: 0 var(--s2) var(--s4); display: flex; flex-direction: column; gap: 1px; flex: 1; }

.sidebar .sec {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-faint);
  padding: var(--s4) var(--s2) var(--s1); letter-spacing: .02em;
}
.sec-row { display: flex; align-items: center; justify-content: space-between; }
.sec-add {
  color: var(--text-faint); font-size: var(--fs-md);
  padding: 0 var(--s1); border-radius: var(--radius-sm);
}
.sec-add:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }

.sidebar nav a {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2); min-height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: var(--fs-md); font-weight: var(--fw-medium);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sidebar nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.sidebar nav a.on { background: var(--bg-active); color: var(--text); font-weight: var(--fw-semi); }
.sidebar nav a .ic { width: 17px; text-align: center; font-size: var(--fs-sm); opacity: .75; flex: 0 0 auto; }

.sidebar .foot {
  border-top: 1px solid var(--border); padding: var(--s2) var(--s3);
  display: flex; gap: var(--s2); align-items: center;
}
.sidebar .foot .kbd-hint { font-size: var(--fs-xs); color: var(--text-faint); flex: 1; }

/* page tree */
.tree { display: flex; flex-direction: column; gap: 1px; }
.tree-row {
  display: flex; align-items: center; gap: 1px;
  border-radius: var(--radius-sm); padding: 0 var(--s1);
  min-height: 28px;
  transition: background var(--fast) var(--ease);
}
.tree-row:hover { background: var(--bg-hover); }
.tree-row.on { background: var(--bg-active); }
.tree-row.on .tree-link { color: var(--text); font-weight: var(--fw-semi); }
.tree-caret {
  width: 18px; height: 18px; border: 0; background: transparent;
  color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 0;
  border-radius: var(--radius-sm); flex: 0 0 auto;
  transition: transform var(--fast) var(--ease);
}
.tree-caret:hover { background: var(--bg-active); }
.tree-caret.open { transform: rotate(90deg); }
.tree-ico { width: 18px; text-align: center; font-size: var(--fs-sm); flex: 0 0 auto; }
.tree-link {
  flex: 1; min-width: 0; color: var(--text-muted); font-size: var(--fs-md);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--s1) 0;
}
.tree-link:hover { text-decoration: none; }
.tree-kids { margin-left: var(--s3); border-left: 1px solid var(--border); padding-left: 2px; display: none; }
.tree-fav {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: var(--fs-md); min-height: 28px;
}
.tree-fav:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.tree-fav.on { background: var(--bg-active); color: var(--text); font-weight: var(--fw-semi); }
.tree-empty { display: block; padding: var(--s2) var(--s3); color: var(--text-faint); font-size: var(--fs-sm); }

/* ---- content + top bar --------------------------------------------------- */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.topbar {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--topbar-h); padding: var(--s2) var(--s4);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) var(--ease);
}
.topbar.scrolled { border-bottom-color: var(--border); }
.topbar .spacer { flex: 1; }

.searchbtn {
  display: flex; align-items: center; gap: var(--s2);
  background: transparent; border: 0;
  color: var(--text-faint); font-size: var(--fs-md);
  padding: var(--s1) var(--s2); border-radius: var(--radius-sm);
  cursor: pointer; min-width: 200px;
}
.searchbtn:hover { background: var(--bg-hover); color: var(--text-muted); }
.searchbtn .k {
  margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--s1);
}
.menubtn {
  display: none; background: transparent; border: 0; color: var(--text-muted);
  font-size: var(--fs-lg); padding: var(--s1) var(--s2); border-radius: var(--radius-sm); cursor: pointer;
}
.menubtn:hover { background: var(--bg-hover); }

main { flex: 1; padding: var(--s6) var(--s6) var(--s16); max-width: 1180px; width: 100%; }
footer { padding: 0 var(--s6) var(--s8); color: var(--text-faint); font-size: var(--fs-sm); }

/* ---- page canvas --------------------------------------------------------- */
.page-cover { height: 180px; background-size: cover; background-position: center; }
.page-wrap { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--page-pad); width: 100%; }
.page-icon {
  font-size: 74px; line-height: 1; margin: -38px 0 0; cursor: pointer;
  width: 84px; user-select: none;
}
.page-title {
  font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.15;
  letter-spacing: -.021em; font-family: var(--font);
  margin: var(--s2) 0 var(--s1);
  border: 0; background: transparent; color: var(--text);
  width: 100%; padding: 0;
}
.page-title:focus { box-shadow: none; }
.page-title::placeholder { color: var(--n5); }

.crumbs {
  display: flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-sm); color: var(--text-muted);
  padding: var(--s3) 0; min-height: 30px;
}
.crumbs a { padding: 1px var(--s1); border-radius: var(--radius-sm); }
.crumbs a:hover { background: var(--bg-hover); text-decoration: none; }
.crumbs .cur { color: var(--text); font-weight: var(--fw-medium); }

.page-actions {
  display: flex; gap: var(--s1); flex-wrap: wrap;
  opacity: 0; transition: opacity var(--fast) var(--ease); margin: var(--s1) 0 var(--s4);
}
.page-wrap:hover .page-actions, .page-actions:focus-within { opacity: 1; }

/* ---- blocks -------------------------------------------------------------- */
.blocks { padding-bottom: 30vh; font-family: var(--font); }
.bk { position: relative; display: flex; align-items: flex-start; gap: 2px; margin: 1px 0; }
.bk-handles {
  position: absolute; left: -46px; top: 1px;
  display: flex; gap: 1px; opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.bk:hover .bk-handles { opacity: 1; }
.bk-add, .bk-drag {
  width: 22px; height: 24px; border: 0; background: transparent;
  color: var(--text-faint); cursor: pointer; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); padding: 0;
}
.bk-add:hover, .bk-drag:hover { background: var(--bg-hover); color: var(--text-muted); }
.bk-drag { cursor: grab; }
.bk.dragging { opacity: .4; }
.bk-body { flex: 1; min-width: 0; }

.bk-text {
  outline: none; min-height: 1.5em; white-space: pre-wrap; word-break: break-word;
  padding: 3px 2px; border-radius: var(--radius-sm);
}
.bk-text:empty::before { content: attr(data-ph); color: var(--n6); pointer-events: none; }
.bk-p  { font-size: var(--fs-base); line-height: var(--lh); }
.bk-h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin: var(--s6) 0 0; letter-spacing: -.016em; }
.bk-h2 { font-size: var(--fs-xl); font-weight: var(--fw-semi); margin: var(--s5) 0 0; }
.bk-h3 { font-size: var(--fs-lg); font-weight: var(--fw-semi); margin: var(--s4) 0 0; }
.bk-li { display: flex; align-items: flex-start; gap: var(--s2); }
.bk-bullet { width: 20px; text-align: center; line-height: 1.7; flex: 0 0 auto; }
.bk-num { width: 20px; text-align: center; line-height: 1.6; flex: 0 0 auto;
          color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bk-check { margin: 6px var(--s1) 0 2px; flex: 0 0 auto; }
.bk-quote { border-left: 3px solid var(--text); padding-left: var(--s3); margin: var(--s1) 0;
            font-size: var(--fs-base); }
.bk-callout {
  display: flex; gap: var(--s3); background: var(--bg-hover);
  border-radius: var(--radius); padding: var(--s3) var(--s4); margin: var(--s1) 0;
}
.bk-emoji { font-size: var(--fs-lg); line-height: 1.4; flex: 0 0 auto; }
.bk-code {
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s4);
  font-family: var(--font-mono); font-size: var(--fs-sm); overflow-x: auto; margin: var(--s2) 0;
}
.bk-divider { border: 0; border-top: 1px solid var(--border); margin: var(--s4) 0; }
.bk-image { max-width: 100%; border-radius: var(--radius); margin: var(--s1) 0; display: block; }
.bk-image-empty {
  background: var(--bg-hover); border-radius: var(--radius);
  padding: var(--s3); color: var(--text-faint); font-size: var(--fs-sm);
}
.bk-toggle { display: flex; align-items: flex-start; gap: var(--s1); }
.bk-arrow {
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 10px; width: 20px; padding: 5px 0 0; transition: transform var(--fast) var(--ease);
}
.bk-toggle.open .bk-arrow { transform: rotate(90deg); }

/* ---- overlays: palette, slash menu, pickers ------------------------------ */
.palette-wrap, .sheet-wrap {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(15,15,15,.38); backdrop-filter: blur(2px);
}
.palette-wrap { align-items: flex-start; justify-content: center; padding-top: 14vh; }
.sheet-wrap   { align-items: center;    justify-content: center; padding: var(--s5); }
.palette-wrap.open, .sheet-wrap.open { display: flex; }

.palette {
  width: min(560px, 92vw);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.palette input {
  width: 100%; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; background: transparent; padding: var(--s4) var(--s5); font-size: var(--fs-lg);
}
.palette input:focus { box-shadow: none; }
.palette ul { list-style: none; margin: 0; padding: var(--s1); max-height: 52vh; overflow-y: auto; }
.palette li {
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  display: flex; gap: var(--s3); align-items: center; cursor: pointer; font-size: var(--fs-md);
}
.palette li[aria-selected="true"] { background: var(--bg-active); }
.palette li .ic { width: 18px; text-align: center; opacity: .75; }
.palette li .hint {
  margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--s1);
}
.palette .none { padding: var(--s6); text-align: center; color: var(--text-faint); }

.sheet {
  width: min(560px, 94vw); max-height: 80vh; overflow: auto;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s6); box-shadow: var(--shadow-lg);
}
.sheet table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.sheet td { padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.sheet td:last-child { text-align: right; }

.slash {
  position: absolute; z-index: 200; width: 312px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.slash-q { width: 100%; border: 0; border-bottom: 1px solid var(--border);
           border-radius: 0; padding: var(--s3) var(--s4); font-size: var(--fs-md); }
.slash-q:focus { box-shadow: none; }
.slash-list { list-style: none; margin: 0; padding: var(--s1); max-height: 300px; overflow-y: auto; }
.slash-item { display: flex; gap: var(--s3); align-items: center;
              padding: var(--s2) var(--s3); border-radius: var(--radius-sm); cursor: pointer; }
.slash-item.on { background: var(--bg-active); }
.slash-ico { width: 26px; height: 26px; display: grid; place-items: center;
             border: 1px solid var(--border); border-radius: var(--radius-sm);
             font-size: var(--fs-sm); flex: 0 0 auto; }
.slash-label { display: block; font-size: var(--fs-md); }
.slash-hint  { display: block; font-size: var(--fs-xs); color: var(--text-faint); }
.slash-none  { padding: var(--s5); text-align: center; color: var(--text-faint); font-size: var(--fs-sm); }

.picker {
  position: absolute; z-index: 200; width: 320px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--s3);
}
.picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: var(--s2); }
.picker-em { border: 0; background: transparent; font-size: var(--fs-lg); cursor: pointer;
             padding: var(--s1); border-radius: var(--radius-sm); line-height: 1; }
.picker-em:hover { background: var(--bg-hover); }
.picker-covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.picker-cover { height: 38px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }

/* ---- database views ------------------------------------------------------ */
.db-tabs {
  display: flex; gap: var(--s1); align-items: center;
  border-bottom: 1px solid var(--border); margin: var(--s3) 0 0; padding-bottom: 0;
}
.db-tab {
  padding: var(--s2) var(--s3); font-size: var(--fs-md);
  color: var(--text-muted); border: 0; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
}
.db-tab:hover { color: var(--text); background: transparent; text-decoration: none; }
.db-tab.on { color: var(--text); border-bottom-color: var(--text); font-weight: var(--fw-medium); }
.db-toolform { display: flex; gap: var(--s1); align-items: center; margin: 0; }
.db-mini {
  font-size: var(--fs-sm); padding: var(--s1) var(--s2);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}

.db-scroll { overflow-x: auto; }
.db-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.db-table th {
  text-align: left; font-weight: var(--fw-medium); color: var(--text-muted);
  font-size: var(--fs-sm); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.db-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; }
.db-table tr:hover td { background: var(--bg-hover); }
.db-cell { outline: none; min-height: 1.4em; border-radius: var(--radius-sm); padding: 2px 4px; }
.db-cell:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
.db-x { border: 0; background: transparent; color: var(--text-faint); cursor: pointer;
        font-size: var(--fs-sm); padding: 0 2px; opacity: 0; }
.db-table th:hover .db-x { opacity: 1; }
.db-rowlink { font-weight: var(--fw-medium); }
.db-rowlink:hover { text-decoration: underline; }
.db-newrow { margin: 0; }
.db-newinput {
  border: 0; background: transparent; color: var(--text-faint);
  font-size: var(--fs-md); padding: var(--s2) var(--s1); width: 100%;
}
.db-newinput:focus { color: var(--text); box-shadow: none; }

.db-board { display: flex; gap: var(--s3); overflow-x: auto; padding: var(--s4) 0 var(--s2); align-items: flex-start; }
.db-col { flex: 0 0 264px; background: var(--bg-sunken); border-radius: var(--radius-lg); padding: var(--s2); }
.db-colhead { display: flex; align-items: center; justify-content: space-between;
              gap: var(--s2); padding: var(--s1) var(--s1) var(--s2); font-size: var(--fs-sm); }
.db-card {
  display: block; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s2) var(--s3); margin-bottom: var(--s2);
  font-size: var(--fs-md); box-shadow: var(--shadow-sm);
}
.db-card:hover { border-color: var(--border-strong); text-decoration: none; }
.db-cardmeta { margin-top: var(--s1); font-size: var(--fs-xs); color: var(--text-muted); }

.db-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s3); padding: var(--s4) 0; }
.db-gcard { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: block; }
.db-gcard:hover { border-color: var(--border-strong); text-decoration: none; }
.db-gcover { height: 92px; display: flex; align-items: center; justify-content: center; }
.db-gbody { padding: var(--s2) var(--s3); }
.db-gtitle { font-weight: var(--fw-medium); font-size: var(--fs-md); }

/* ---- calendar ------------------------------------------------------------ */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); }
.cal .dow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
            color: var(--text-faint); text-align: center; padding: var(--s1) 0; font-weight: var(--fw-semi); }
.cal .day { min-height: 96px; background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--radius); padding: var(--s1) var(--s2);
            display: flex; flex-direction: column; gap: 2px; }
.cal .day.out { opacity: .4; }
.cal .day.today { border-color: var(--accent); }
.cal .day .n { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semi); }
.cal .ev { font-size: var(--fs-xs); background: var(--bg-hover); border-radius: var(--radius-sm);
           padding: 1px var(--s1); border-left: 2px solid var(--accent);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .ev.task { border-left-color: var(--warn); }
.cal .ev.overdue { border-left-color: var(--danger); }

/* ---- kanban (tasks module) ----------------------------------------------- */
.board { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s3); align-items: flex-start; }
.board .col { flex: 0 0 268px; background: var(--bg-sunken); border: 1px solid var(--border);
              border-radius: var(--radius-lg); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.board .col h3 { margin: 0; font-size: var(--fs-xs); text-transform: uppercase;
                 letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; gap: var(--s2); }
.dropzone { display: flex; flex-direction: column; gap: var(--s2); min-height: 60px;
            border-radius: var(--radius); padding: var(--s1); transition: background var(--fast) var(--ease); }
.dropzone.over { background: var(--accent-soft); outline: 1px dashed var(--accent); }
.kcard { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
         padding: var(--s2) var(--s3); cursor: grab; position: relative; box-shadow: var(--shadow-sm); }
.kcard.dragging { opacity: .45; }
.kcard .ktitle { font-weight: var(--fw-medium); font-size: var(--fs-md); margin-bottom: var(--s1); }
.kcard .meta { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.kcard .klink { position: absolute; top: var(--s2); right: var(--s2); font-size: var(--fs-xs); opacity: 0; }
.kcard:hover .klink { opacity: .8; }

/* ---- notes editor -------------------------------------------------------- */
.editor { display: grid; gap: var(--s3); min-height: 440px; }
.editor.split { grid-template-columns: 1fr 1fr; }
.editor.editonly, .editor.readonly { grid-template-columns: 1fr; }
.editor.editonly .preview, .editor.readonly textarea { display: none; }
.editor textarea { min-height: 440px; font-family: var(--font-mono); font-size: var(--fs-md);
                   line-height: 1.65; tab-size: 2; }
.preview { background: var(--bg-raised); border: 1px solid var(--border);
           border-radius: var(--radius-lg); padding: var(--s5); overflow-y: auto; max-height: 70vh; }
.editor.readonly .preview { max-height: none; max-width: 74ch; margin: 0 auto;
                            padding: var(--s10); font-size: var(--fs-lg); line-height: var(--lh-loose); }

.markdown h1, .markdown h2, .markdown h3 { margin: 1.1em 0 .4em; }
.markdown p { margin: .7em 0; }
.markdown ul, .markdown ol { margin: .6em 0; padding-left: 1.4em; }
.markdown blockquote { margin: .8em 0; padding-left: var(--s3);
                       border-left: 3px solid var(--accent); color: var(--text-muted); }
.markdown pre.code { background: var(--bg-sunken); border: 1px solid var(--border);
                     border-radius: var(--radius); padding: var(--s3) var(--s4); overflow-x: auto; }
.markdown img { max-width: 100%; border-radius: var(--radius); }
.markdown mark { background: var(--warn-soft); color: var(--text); border-radius: 2px; padding: 0 2px; }
.markdown table { border-collapse: collapse; width: 100%; }
.markdown td, .markdown th { border: 1px solid var(--border); padding: var(--s1) var(--s2); font-size: var(--fs-md); }
.wikilink { border-bottom: 1px dashed var(--accent); }
.wikilink.missing { color: var(--text-faint); border-bottom-color: var(--text-faint); }

/* ---- misc ---------------------------------------------------------------- */
.saving {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 300;
  background: var(--text); color: var(--bg);
  padding: var(--s1) var(--s3); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); box-shadow: var(--shadow);
}
.notes-layout { display: grid; grid-template-columns: minmax(220px, 270px) 1fr; gap: var(--s5); align-items: start; }