/* Front Desk — Memory shared styles */

.memory-rail h4 { margin: 0 0 6px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.memory-rail .group { padding: 14px 12px 8px; }
.memory-rail .group + .group { border-top: 1px solid var(--border); }

.tree { padding: 2px 8px; }
.tree-row {
  display: grid; grid-template-columns: 14px 16px 1fr auto; align-items: center; gap: 6px;
  padding: 4px 6px; font-size: 12.5px; color: var(--fg-2); border-radius: 4px; cursor: pointer; position: relative;
}
.tree-row:hover { background: var(--surface); color: var(--fg); }
.tree-row.active { background: var(--accent-soft); color: var(--accent); }
.tree-row.active::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px; background: var(--accent); border-radius: 2px; }
.tree-row .chev { color: var(--muted-2); display: inline-flex; align-items: center; justify-content: center; }
.tree-row .ic { color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.tree-row .ic.folder { color: oklch(70% 0.12 75); }
.tree-row .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.005em; }
.tree-row .badge { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tree-row[data-depth="1"] { padding-left: 18px; }
.tree-row[data-depth="2"] { padding-left: 32px; }
.tree-row[data-depth="3"] { padding-left: 46px; }
.tree-row[data-depth="1"] .name, .tree-row[data-depth="2"] .name, .tree-row[data-depth="3"] .name { font-weight: 400; }

/* Editor */
.editor {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--bg);
}
.editor-head {
  height: 50px; padding: 0 20px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.editor-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.editor-crumb .now { color: var(--fg); font-weight: 500; font-family: var(--font-mono); font-size: 12px; }
.editor-crumb .sep { color: var(--border-2); }
.editor-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.editor-pillrow { padding: 14px 32px 0; display: flex; gap: 6px; flex-wrap: wrap; }

.editor-body {
  flex: 1; overflow-y: auto;
  padding: 24px 32px 80px;
}
.editor-inner { max-width: 680px; margin: 0 auto; }
.fm {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-2);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.fm .k { color: oklch(56% 0.10 280); }
.fm .v { color: var(--fg-2); }
.fm .s { color: oklch(58% 0.16 35); }

.md h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; margin: 0 0 14px; }
.md h2 { font-family: var(--font-display); font-size: 18px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; margin: 28px 0 10px; }
.md h3 { font-size: 14px; letter-spacing: -0.005em; font-weight: 600; margin: 22px 0 8px; }
.md p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--fg-2); }
.md ul { margin: 0 0 12px; padding-left: 22px; }
.md ul li { font-size: 14px; line-height: 1.65; color: var(--fg-2); margin-bottom: 4px; }
.md a, .md .backlink { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--accent) 30%, transparent); }
.md a:hover, .md .backlink:hover { border-bottom-color: var(--accent); }
.md .tag { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; font-size: 12px; color: var(--fg-2); font-family: var(--font-mono); }
.md code { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); }
.md blockquote { margin: 12px 0; padding: 8px 14px; border-left: 2px solid var(--border); color: var(--muted); font-style: italic; }

/* Backlinks panel */
.backlinks-panel {
  border-left: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.bl-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.bl-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.bl-head p { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
.bl-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bl-section h4 { margin: 0 0 8px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.bl-item {
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  margin-bottom: 6px;
}
.bl-item .path { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.bl-item .path b { color: var(--fg-2); }
.bl-item .ctx { font-size: 12px; color: var(--fg-2); line-height: 1.5; }
.bl-item .ctx mark { background: color-mix(in oklch, var(--accent) 22%, transparent); color: var(--accent); padding: 0 2px; border-radius: 2px; font-weight: 500; }

.graph {
  margin: 14px;
  height: 180px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  position: relative;
  overflow: hidden;
}
.graph svg { width: 100%; height: 100%; }
.graph-node { fill: var(--accent); }
.graph-node.you { fill: var(--accent); stroke: var(--accent); stroke-width: 8; opacity: 0.2; }
.graph-edge { stroke: var(--border-2); stroke-width: 1; }
.graph-label { font-size: 9px; fill: var(--muted); font-family: var(--font-sans); }