/* ═══════════════════════════════════════════════════════════
   MarkVault v2 — Design System
   Mobile-first · Dark/Light · Firebase-ready

   Hallmark · redesign · surface: app (app.html) · theme: custom "Warm Premium"
   Warm-graphite surfaces (unified with landing) + muted amber #E6B055 accent
   (deep #AC7236 in light mode). Preserved: --accent-rgb channel, [data-color]
   picker, all ids/classes/JS hooks, DOM, layout, fonts (Syne/DM Sans/JetBrains).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Dark theme */
  --bg:          #0D0B08;
  --bg-surface:  #14110E;
  --bg-raised:   #1C1714;
  --bg-hover:    #231E1A;
  --bg-active:   #2D2621;
  --bg-input:    #120F0B;

  --border:      rgba(255,244,230,0.08);
  --border-soft: rgba(255,244,230,0.045);
  --border-focus:rgba(230,176,85,0.5);

  --txt:         #F2EEE7;
  --txt2:        #ABA399;
  --txt3:        #70675F;

  /* Accent (overridden by [data-color="…"]). Default = amber */
  --accent:      #E6B055;
  --accent-soft: #F5CE87;
  --accent-dim:  rgba(230,176,85,0.12);
  --accent-rgb:  230,176,85;
  --on-accent:   #201308;

  --accent2:     #7B6FE0;
  --success:     #2ECC7A;
  --danger:      #F05252;
  --info:        #60A5FA;

  --sidebar-w:   280px;
  --topbar-h:    52px;
  --bottom-nav-h:60px;
  /* Reading measure. 820px at 15.5px ran ~110 characters per line — roughly
     50% past the 45–75ch band where prose stays readable. 680px at 16.5px lands
     near 80ch. Keep WIDTH_DEFAULT in app.js in sync with this value. */
  --content-max: 680px;
  --toc-w:       300px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --sh-sm: 0 1px 6px rgba(0,0,0,.5);
  --sh-md: 0 4px 24px rgba(0,0,0,.55);
  --sh-lg: 0 12px 56px rgba(0,0,0,.65);

  --font:      'DM Sans', system-ui, sans-serif;
  --font-head: 'Syne', var(--font);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --ease: cubic-bezier(.4,0,.2,1);
  --t: 180ms var(--ease);
}

[data-theme="light"] {
  --bg:          #F3F2EE;
  --bg-surface:  #FDFCFA;
  --bg-raised:   #ECEAE3;
  --bg-hover:    #E5E2D9;
  --bg-active:   #DDD9CE;
  --bg-input:    #F7F5F0;

  --border:      rgba(0,0,0,0.09);
  --border-soft: rgba(0,0,0,0.05);

  --txt:         #1A1917;
  --txt2:        #58564F;
  --txt3:        #A09C94;

  --accent:      #C8860E;
  --accent-soft: #E8A736;
  --accent-dim:  rgba(200,134,14,0.1);
  --accent-rgb:  200,134,14;
  --on-accent:   #FFFFFF;
  --accent2:     #5B4DBF;
  --success:     #1A9F5C;
  --danger:      #C0392B;

  --sh-sm: 0 1px 6px rgba(0,0,0,.07);
  --sh-md: 0 4px 24px rgba(0,0,0,.10);
  --sh-lg: 0 12px 56px rgba(0,0,0,.15);
}

/* ── Accent palette themes ───────────────────────────
   Override --accent + derivatives via [data-color="…"].
   Works on both light & dark base themes. */
[data-color="amber"]   { --accent:#E6B055; --accent-soft:#F5CE87; --accent-dim:rgba(230,176,85,.12); --accent-rgb:230,176,85; --border-focus:rgba(230,176,85,.5); --on-accent:#201308; }
[data-color="indigo"]  { --accent:#6366F1; --accent-soft:#8B8DF7; --accent-dim:rgba(99,102,241,.14); --accent-rgb:99,102,241; --border-focus:rgba(99,102,241,.55); --on-accent:#FFFFFF; }
[data-color="emerald"] { --accent:#10B981; --accent-soft:#34D9A1; --accent-dim:rgba(16,185,129,.14); --accent-rgb:16,185,129; --border-focus:rgba(16,185,129,.55); --on-accent:#04201A; }
[data-color="rose"]    { --accent:#F43F5E; --accent-soft:#FB7185; --accent-dim:rgba(244,63,94,.14); --accent-rgb:244,63,94; --border-focus:rgba(244,63,94,.55); --on-accent:#FFFFFF; }
[data-color="cyan"]    { --accent:#06B6D4; --accent-soft:#22D3EE; --accent-dim:rgba(6,182,212,.14); --accent-rgb:6,182,212; --border-focus:rgba(6,182,212,.55); --on-accent:#04222A; }
[data-color="violet"]  { --accent:#A855F7; --accent-soft:#C084FC; --accent-dim:rgba(168,85,247,.14); --accent-rgb:168,85,247; --border-focus:rgba(168,85,247,.55); --on-accent:#FFFFFF; }

/* Light-mode variants get slightly darker accents for contrast */
[data-theme="light"][data-color="indigo"]  { --accent:#4F46E5; --accent-rgb:79,70,229; }
[data-theme="light"][data-color="emerald"] { --accent:#059669; --accent-rgb:5,150,105; }
[data-theme="light"][data-color="rose"]    { --accent:#E11D48; --accent-rgb:225,29,72; }
[data-theme="light"][data-color="cyan"]    { --accent:#0891B2; --accent-rgb:8,145,178; }
[data-theme="light"][data-color="violet"]  { --accent:#9333EA; --accent-rgb:147,51,234; }
/* Default amber needs a deeper tone in light mode for contrast on cream paper */
[data-theme="light"][data-color="amber"]   { --accent:#AC7236; --accent-soft:#CB914E; --accent-dim:rgba(172,114,54,.12); --accent-rgb:172,114,54; --border-focus:rgba(172,114,54,.5); --on-accent:#FFFFFF; }

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-tap-highlight-color:transparent; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  display: flex;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); }
button { cursor: pointer; font-family: var(--font); }
input, textarea { font-family: var(--font); }

/* Utility */
.hidden { display: none !important; }

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--txt3); }

/* ════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  height: 100dvh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;   /* anchors the drag-resize handle to the sidebar's edge */
  z-index: 200;
  transition: width var(--t), transform var(--t), opacity var(--t);
  overflow: hidden;
}

/* ── Collapsible sidebar on all screen sizes ─────────── */
/* Desktop collapse: slide off-screen by reducing width to 0 */
body.sidebar-collapsed .sidebar {
  width: 0;
  overflow: hidden;
  border-right: none;
}
/* Show a floating re-open indicator on desktop when collapsed */
body.sidebar-collapsed .main::before {
  content: '';
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: .45;
  z-index: 10;
  cursor: pointer;
  transition: opacity var(--t), width var(--t);
}
body.sidebar-collapsed .main::before:hover { width:5px; opacity:.8; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  gap: 8px;
}
.logo { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.logo-mark {
  font-size:18px; color:var(--accent);
  font-family:var(--font-head); line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px;
  background:var(--accent-dim);
  flex-shrink:0;
  transition:all var(--t);
}
.logo-text  {
  font-family:var(--font-head); font-weight:700;
  font-size:15px; letter-spacing:-.3px;
  /* The wordmark is the one string that must never ellipsize — it rendered as
     "Mar…" at the default sidebar width, because the account pill next to it
     was allowed to take space first. The pill shrinks instead. */
  white-space:nowrap; flex-shrink:0;
}
/* Shrinks so the wordmark doesn't have to. The sync label is the give. */
.sidebar-header-right { display:flex; align-items:center; gap:4px; min-width:0; }
.sidebar-header-right .sync-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Sync badge */
.sync-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  color: var(--txt2);
  letter-spacing:.02em;
  cursor: pointer;
  transition: all var(--t);
}
.sync-badge:hover {
  border-color:rgba(var(--accent-rgb), .45);
  color:var(--accent);
  background:var(--accent-dim);
}
.sync-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--txt3);
  transition: background var(--t);
  flex-shrink: 0;
}
.sync-dot.connected { background: var(--success); }
.sync-dot.syncing   {
  background: var(--accent);
  animation: pulse 1s infinite;
}
.sync-dot.error     { background: var(--danger); }
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.8); }
}

/* Search */
.sidebar-search { padding:12px 12px 8px; flex-shrink:0; }
.search-wrap {
  display:flex; align-items:center;
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
  overflow:hidden;
  height:34px;
}
.search-wrap:hover { border-color:rgba(var(--accent-rgb),.18); }
.search-wrap:focus-within {
  border-color:var(--border-focus);
  box-shadow:0 0 0 3px var(--accent-dim);
  background:var(--bg-input);
}
.search-icon { margin:0 9px; color:var(--txt3); flex-shrink:0; transition:color var(--t); }
.search-wrap:focus-within .search-icon { color:var(--accent); }
#searchInput {
  flex:1; border:none; background:transparent;
  color:var(--txt); font-size:13px; padding:8px 0;
  outline:none;
}
#searchInput::placeholder { color:var(--txt3); }
.search-clear {
  background:none; border:none; color:var(--txt3);
  padding:4px 10px; font-size:10px;
  transition:color var(--t);
}
.search-clear:hover { color:var(--txt); }
/* Keyword ⇄ semantic search mode toggle */
.search-mode-btn {
  flex-shrink:0; background:none; border:none; cursor:pointer;
  color:var(--txt3); font-size:13px; padding:0 10px; height:100%;
  border-left:1px solid var(--border); transition:color var(--t), background var(--t);
}
.search-mode-btn:hover { color:var(--accent); }
.search-mode-btn.active { color:var(--accent); background:var(--accent-dim); }

/* Semantic search: opt-in prompt + results */
.sem-prompt { list-style:none; padding:20px 14px; text-align:center; color:var(--txt3); }
.sem-prompt-title { font-size:13px; font-weight:700; color:var(--txt2); margin-bottom:6px; }
.sem-prompt-sub   { font-size:11.5px; line-height:1.5; margin-bottom:12px; }
.sem-prompt-btn {
  font-size:12.5px; font-weight:600; color:var(--accent);
  background:var(--accent-dim); border:1px solid rgba(var(--accent-rgb),.3);
  padding:8px 14px; border-radius:var(--r-md); cursor:pointer; transition:all var(--t);
}
.sem-prompt-btn:hover:not(:disabled) { background:rgba(var(--accent-rgb),.18); }
.sem-prompt-btn:disabled { opacity:.6; cursor:default; }
.sem-item .file-item-name { white-space:normal; }
.sem-snip {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11px; color:var(--txt3); line-height:1.45; margin-top:3px;
}
/* Which retriever found this row. Results are fused from two of them, so the
   section header can't speak for every row — see _renderSemanticResults. */
.sem-via {
  display:block; margin-top:3px;
  font-size:10px; letter-spacing:.02em; color:var(--txt3); opacity:.7;
}
.sem-via:empty { display:none; }

/* Sidebar actions */
.sidebar-actions {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px; padding:4px 12px 10px; flex-shrink:0;
}
.btn-action {
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:8px 6px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--txt2);
  font-size:11.5px; font-weight:600;
  transition:all var(--t); white-space:nowrap;
}
.btn-action:hover {
  background:var(--accent-dim); color:var(--accent);
  border-color:rgba(var(--accent-rgb),.35);
  transform:translateY(-1px);
}
.btn-action:active { transform:translateY(0); }
.btn-action svg { transition:transform var(--t); }
.btn-action:hover svg { transform:scale(1.08); }
/* Emphasize the primary "New" action */
.btn-action#newFileBtn {
  background:linear-gradient(180deg, var(--accent-dim), rgba(var(--accent-rgb),.06));
  border-color:rgba(var(--accent-rgb),.28);
  color:var(--accent);
}
.btn-action#newFileBtn:hover {
  background:var(--accent); color:var(--on-accent);
  border-color:var(--accent);
  box-shadow:0 4px 14px rgba(var(--accent-rgb),.25);
}

/* File list */
.file-list-wrap { flex:1; overflow-y:auto; padding:0 8px; min-height:0; }
.file-list-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 10px 8px;
  font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt3);
  position:sticky; top:0; background:var(--bg-surface); z-index:2;
}
.file-list-header-right {
  display:flex; align-items:center; gap:6px;
}
.sort-btn {
  background:none; border:1px solid transparent;
  width:22px; height:22px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  color:var(--txt3); cursor:pointer;
  transition:all var(--t);
}
.sort-btn:hover, .sort-btn.open {
  background:var(--bg-hover); color:var(--accent);
  border-color:var(--border-soft);
}
.sort-menu {
  position:absolute; top:36px; right:6px; z-index:5;
  min-width:170px; padding:5px;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--sh-md);
  animation:modalIn 140ms var(--ease);
}
.sort-menu-item {
  display:flex; align-items:center; gap:7px;
  width:100%; padding:7px 9px;
  background:none; border:none; border-radius:var(--r-sm);
  font-family:var(--font); font-size:12px; font-weight:500;
  color:var(--txt2); text-align:left; cursor:pointer;
  text-transform:none; letter-spacing:0;
  transition:background var(--t), color var(--t);
}
.sort-menu-item:hover { background:var(--bg-hover); color:var(--txt); }
.sort-menu-item.active { color:var(--accent); background:var(--accent-dim); }
.sort-menu-item .sort-check {
  display:inline-flex; width:13px; opacity:0;
}
.sort-menu-item.active .sort-check { opacity:1; }
.file-count {
  background:var(--bg-raised); color:var(--txt2);
  font-size:10px; padding:2px 8px; border-radius:20px;
  font-family:var(--font-mono);
  border:1px solid var(--border-soft);
  min-width:22px; text-align:center;
}
.file-list { list-style:none; display:flex; flex-direction:column; gap:2px; padding-bottom:6px; }

/* Empty state (injected via JS) */
.empty-state {
  margin:12px 4px; padding:34px 18px;
  display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center; color:var(--txt3);
  border:1px dashed var(--border); border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--accent) 3%, transparent);
}
.empty-icon  { font-size:26px; opacity:.55; margin-bottom:6px; color:var(--accent-soft); }
.empty-title { font-size:12.5px; font-weight:600; color:var(--txt2); letter-spacing:-.01em; }
.empty-sub   { font-size:11px; line-height:1.5; max-width:190px; }

/* ── File item ─────────────────────────────────────── */
.file-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 6px 8px 8px; border-radius:var(--r-md);
  cursor:pointer; position:relative;
  border:1px solid transparent;
  transition:background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.file-item:active { transform:scale(.99); }
/* Left accent rail — a faint hint on hover, solid when active */
.file-item::before {
  content:''; position:absolute; left:1px; top:50%;
  width:3px; height:0; border-radius:3px;
  background:linear-gradient(180deg, var(--accent-soft), var(--accent));
  opacity:0;
  transform:translateY(-50%);
  transition:height var(--t), opacity var(--t);
}
.file-item:hover {
  background:var(--bg-hover);
  border-color:var(--border);
}
.file-item:hover::before { height:44%; opacity:.5; }
.file-item.active {
  background:color-mix(in srgb, var(--accent) 10%, var(--bg-active));
  border-color:rgba(var(--accent-rgb),.30);
  box-shadow:0 1px 3px rgba(0,0,0,.18), inset 0 0 0 1px rgba(var(--accent-rgb),.06);
}
.file-item.active::before { height:64%; opacity:1; }

.file-item-icon { font-size:13px; color:var(--txt3); flex-shrink:0; transition:color var(--t); }
.file-item:hover .file-item-icon { color:var(--txt2); }
.file-item.active .file-item-icon { color:var(--accent); }

.file-item-info { flex:1; min-width:0; }
.file-item-name {
  display:block; font-size:13px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--txt); letter-spacing:-.005em;
}
.file-item.active .file-item-name { color:var(--txt); font-weight:600; }
.file-item-meta {
  display:block; font-size:10.5px; color:var(--txt3); margin-top:3px;
  font-family:var(--font-mono); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-item:hover .file-item-meta { color:var(--txt2); }

/* ── Row controls: star / edit / delete ────────────────
   One cohesive cluster of 27px icon-buttons. Hidden until the
   row is hovered or keyboard-focused; a starred file always
   shows its (gold) star. Always visible on touch devices. */
.file-item-controls { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.file-item-controls button {
  width:27px; height:27px; flex-shrink:0; padding:0;
  display:none; align-items:center; justify-content:center;
  background:none; border:none; border-radius:7px;
  color:var(--txt3); cursor:pointer; line-height:1;
  transition:background var(--t), color var(--t), transform 120ms var(--ease);
}
.file-item-controls button:active { transform:scale(.86); }
.file-item:hover .file-item-controls button,
.file-item:focus-within .file-item-controls button { display:flex; }

.ia-edit:hover { background:var(--bg-raised); color:var(--accent); }
.ia-del:hover  { background:rgba(240,82,82,.13); color:var(--danger); }

/* ══════════════════════════════════════════════════════
   FOLDER TREE
   ══════════════════════════════════════════════════════ */
:root { --tree-indent:17px; }

.folder-row {
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:var(--r-md);
  cursor:pointer; position:relative;
  border:1px solid transparent;
  transition:background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
  user-select:none;
}
.folder-row:hover { background:var(--bg-hover); border-color:var(--border); }
.folder-row.active { background:color-mix(in srgb, var(--accent) 8%, var(--bg-active)); border-color:rgba(var(--accent-rgb),.26); }

/* ── Depth indentation ────────────────────────────────────
   MUST come after both base rules: `.folder-row { padding:9px 10px }` is a
   shorthand, so a `padding-left` declared above it is silently reset. That is
   exactly what used to happen — folder rows carried a --depth nobody could
   see, and subfolders rendered flush left at every level.
   --depth is capped at 8 in JS so a deep vault cannot indent its filenames off
   the right edge; --rails stays the true depth. */
.file-item, .folder-row {
  padding-left: calc(10px + var(--depth, 0) * var(--tree-indent));
}

/* ── Nesting guide rails ──────────────────────────────────
   One hairline per ancestor level, painted as a repeating gradient on a real
   child element. Not a pseudo-element: `::before` is already the row's accent
   rail and `::after` is the drag-drop indicator, and the tree is a FLAT <ul>
   (which is what keeps drag-reorder and roving focus simple), so there is no
   nesting to hang a border on either. Without these, 17px of indent is the
   only cue that a folder is inside another one — invisible past depth 2. */
.tree-rails {
  position:absolute; top:0; bottom:0; left:16px;
  width:calc(max(var(--rails, 0) - 1, 0) * var(--tree-indent) + 1px);
  pointer-events:none; opacity:0; transition:opacity var(--t);
  background-image:repeating-linear-gradient(
    to right, var(--border-soft) 0 1px, transparent 1px var(--tree-indent));
}
[data-depth="0"] > .tree-rails { display:none; }
.file-list:hover .tree-rails { opacity:1; }
.file-item.active > .tree-rails,
.folder-row.on-trail > .tree-rails,
.folder-row.active > .tree-rails { opacity:1; }

/* The chain of folders containing the open note. Turns an indented list into
   "you are here" — the one thing a tree is for that a flat list is not. */
.folder-row.on-trail > .folder-name { color:var(--txt); }
.folder-row.on-trail > .folder-icon { color:var(--accent-soft); }
.folder-row.on-trail > .trail-mark {
  position:absolute; left:1px; top:6px; bottom:6px; width:3px;
  border-radius:3px; background:rgba(var(--accent-rgb),.5);
}

.folder-chevron {
  flex-shrink:0; width:12px; color:var(--txt3); font-size:13px;
  transition:transform var(--t); transform:rotate(0deg);
}
.folder-row.open > .folder-chevron { transform:rotate(90deg); }
.folder-icon { flex-shrink:0; font-size:13px; color:var(--txt2); line-height:1; }
.folder-name {
  flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.folder-count {
  flex-shrink:0; font-size:10px; color:var(--txt3);
  font-family:var(--font-mono); background:var(--bg-raised);
  padding:2px 8px; border-radius:20px; min-width:22px; text-align:center;
  border:1px solid var(--border-soft);
}
.folder-menu-btn, .folder-add-btn {
  flex-shrink:0; opacity:0; background:none; border:none; cursor:pointer;
  color:var(--txt3); font-size:15px; line-height:1; padding:0;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:7px; transition:opacity var(--t), background var(--t), color var(--t), transform var(--t);
}
.folder-add-btn { font-size:16px; font-weight:400; margin-right:-4px; }
.folder-row:hover .folder-menu-btn, .folder-row:focus-within .folder-menu-btn,
.folder-row:hover .folder-add-btn,  .folder-row:focus-within .folder-add-btn { opacity:1; }
.folder-menu-btn:hover { background:var(--bg-raised); color:var(--txt); }
.folder-add-btn:hover { background:var(--accent-dim); color:var(--accent); transform:scale(1.12); }
/* Hovering "+" previews where the new subfolder will go. */
.folder-row:has(.folder-add-btn:hover) { border-color:rgba(var(--accent-rgb),.35); }

/* Three dots = "this folder has subfolders", visible without expanding it.
   Capped at three: the number stops being readable past that, and the count
   pill next to it already carries the precise figure. */
.folder-subs {
  flex-shrink:0; font-size:7px; letter-spacing:1.5px; line-height:1;
  color:var(--txt3); opacity:.75; transition:color var(--t), opacity var(--t);
}
.folder-row.open > .folder-subs { color:var(--accent-soft); opacity:1; }
/* An empty folder should read as empty, not as a folder you haven't opened. */
.folder-row.is-empty > .folder-chevron { opacity:.3; }
.folder-row.is-empty > .folder-count { opacity:.45; }

/* Keyboard tree navigation is real navigation — it needs a real focus ring. */
.folder-row:focus-visible, .file-item:focus-visible {
  outline:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55);
  border-color:rgba(var(--accent-rgb),.5);
}

/* Collapse-all / expand-all. One control; the arrows swap direction with state. */
#toggleAllFoldersBtn .tafb-up   { display:none; }
#toggleAllFoldersBtn .tafb-down { display:inline; }
#toggleAllFoldersBtn.all-open .tafb-up   { display:inline; }
#toggleAllFoldersBtn.all-open .tafb-down { display:none; }
.folder-row:hover .folder-icon { color:var(--txt); }
/* Open folders read as "opened" via an accent-tinted icon; press feels tactile. */
.folder-icon { transition:color var(--t), transform var(--t); }
.folder-row.open > .folder-icon { color:var(--accent-soft); }
.folder-row:active { transform:scale(.99); }
.folder-row.active .folder-count { color:var(--accent); border-color:rgba(var(--accent-rgb),.3); }

/* Drag affordances — clear, accent-tinted drop targets */
.folder-row.drag-into {
  background:var(--accent-dim);
  border-color:rgba(var(--accent-rgb),.55);
  box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.5), 0 4px 16px rgba(var(--accent-rgb),.22);
  transform:scale(1.015);
  animation:dropTargetPulse 1.1s var(--ease) infinite;
}
.folder-row.drag-into .folder-icon,
.folder-row.drag-into .folder-name,
.folder-row.drag-into .folder-count,
.folder-row.drag-into .folder-chevron { color:var(--accent); }
/* The folder icon "opens" to invite the drop. */
.folder-row.drag-into .folder-icon { transform:scale(1.25); transition:transform var(--t); }
@keyframes dropTargetPulse {
  0%,100% { box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.5), 0 4px 16px rgba(var(--accent-rgb),.18); }
  50%     { box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.85), 0 6px 22px rgba(var(--accent-rgb),.34); }
}
.file-list.drag-into-root {
  box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.4);
  border-radius:var(--r-md); background:var(--accent-dim);
  transition:box-shadow var(--t), background var(--t);
}

/* Drop landed — a one-shot pulse so the eye follows where things went. */
@keyframes folderDropFlash {
  0%   { background:var(--accent-dim); box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.7); }
  60%  { background:var(--accent-dim); box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.3); }
  100% { background:transparent;       box-shadow:inset 0 0 0 2px transparent; }
}
.folder-row.folder-drop-flash { animation:folderDropFlash .65s var(--ease); }
.folder-row.folder-drop-flash .folder-count { animation:countBump .5s var(--ease); }
@keyframes countBump {
  0% { transform:scale(1); } 40% { transform:scale(1.35); color:var(--accent); } 100% { transform:scale(1); }
}
@keyframes itemLanded {
  0%   { background:var(--accent-dim); }
  100% { background:transparent; }
}
.file-item.item-landed { animation:itemLanded .7s var(--ease); }

/* Staggered reveal when a folder is expanded (delay set inline per row in JS).
   The rows slide down and to the RIGHT: they are arriving from inside their
   parent, and moving along the indent axis is what makes that legible rather
   than just decorative. */
@keyframes rowReveal {
  from { opacity:0; transform:translate(-8px, -6px) scale(.985); }
  to   { opacity:1; transform:none; }
}
.file-item.row-reveal, .folder-row.row-reveal {
  animation:rowReveal .3s var(--ease) both;
}
/* …and fold back the same way on collapse, so a mis-click reads as "it closed",
   not "my notes disappeared". JS waits out this animation before re-rendering. */
@keyframes rowCollapse {
  from { opacity:1; transform:none; }
  to   { opacity:0; transform:translate(-10px, -5px) scale(.97); }
}
.file-item.row-collapse, .folder-row.row-collapse {
  animation:rowCollapse .15s var(--ease) both; pointer-events:none;
}

/* The chevron leads the expand — it turns slightly early and overshoots, which
   is what makes the row feel like it is being opened rather than swapped. */
.folder-chevron { transition:transform 220ms cubic-bezier(.34,1.56,.64,1), color var(--t); }
.folder-row:hover > .folder-chevron { color:var(--txt2); }
.folder-row.open > .folder-icon { transform:scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .folder-row.drag-into { animation:none; }
  .file-item.row-reveal, .folder-row.row-reveal,
  .file-item.row-collapse, .folder-row.row-collapse,
  .folder-row.folder-drop-flash, .file-item.item-landed { animation:none; }
  .folder-chevron { transition:none; }
}
.file-item.multi-selected {
  background:var(--accent-dim);
  border-color:rgba(var(--accent-rgb),.35);
}
.file-item.multi-selected .file-item-icon { color:var(--accent); }

/* ── Multi-select action bar ── */
.multi-select-bar {
  position:sticky; bottom:8px; margin:8px;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:var(--r-md);
  background:var(--bg-active); border:1px solid rgba(var(--accent-rgb),.3);
  box-shadow:var(--sh-md, 0 6px 24px rgba(0,0,0,.3)); z-index:5;
  animation:fadeInUp 160ms var(--ease);
}
@keyframes fadeInUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.msb-count { flex:1; font-size:12px; font-weight:600; color:var(--txt); }
.msb-btn {
  background:var(--accent); color:#1a1205; border:none; cursor:pointer;
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:var(--r-sm);
  transition:filter var(--t);
}
.msb-btn:hover { filter:brightness(1.08); }
.msb-clear { background:transparent; color:var(--txt2); }
.msb-clear:hover { color:var(--txt); }

/* ── Folder context menu ── */
.ctx-menu {
  position:fixed; z-index:1000; min-width:180px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:0 10px 40px rgba(0,0,0,.4);
  padding:5px; display:flex; flex-direction:column; gap:1px;
}
.ctx-item {
  text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 10px; border-radius:var(--r-sm); font-size:12.5px; color:var(--txt);
  transition:background var(--t);
}
.ctx-item:hover { background:var(--bg-hover); }
.ctx-danger { color:var(--danger); }
.ctx-colors { display:flex; gap:6px; padding:7px 10px; flex-wrap:wrap; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); margin:2px 0; }
.ctx-color {
  width:18px; height:18px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; padding:0; transition:transform var(--t);
}
.ctx-color:hover { transform:scale(1.18); border-color:var(--txt2); }
.ctx-color-none { background:var(--bg-active)!important; color:var(--txt3); font-size:10px; line-height:14px; }

/* ── Folder picker list ── */
.folder-picker-list { display:flex; flex-direction:column; gap:2px; max-height:50vh; overflow-y:auto; margin:4px 0; }
.fp-row {
  text-align:left; background:none; border:1px solid transparent; cursor:pointer;
  padding:9px 12px; border-radius:var(--r-sm); font-size:13px; color:var(--txt);
  transition:background var(--t), border-color var(--t);
}
.fp-row:hover { background:var(--bg-hover); border-color:var(--border-soft); }

/* ── Topbar breadcrumb ── */
.tb-crumb {
  background:none; border:none; cursor:pointer; color:var(--txt3);
  font-size:inherit; padding:0 1px; transition:color var(--t);
}
.tb-crumb:hover { color:var(--accent); }
.tb-sep { color:var(--txt3); margin:0 4px; opacity:.6; }
.tb-filename { color:var(--txt); }

/* ── Convert mode tabs: disabled ── */
.cmode-tab.disabled { opacity:.4; cursor:not-allowed; }

/* ══════════════════════════════════════════════════════
   FRONTMATTER METADATA CARD
   ══════════════════════════════════════════════════════ */
.fm-card {
  margin:0 0 22px; padding:16px 18px;
  background:linear-gradient(135deg, var(--bg-raised), var(--bg-hover));
  border:1px solid var(--border-soft); border-left:3px solid var(--accent);
  border-radius:var(--r-md);
}
.fm-title { font-size:18px; font-weight:700; color:var(--txt); line-height:1.3; }
.fm-sub { margin-top:6px; font-size:12px; color:var(--txt2); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fm-sub .fm-type { text-transform:uppercase; letter-spacing:.04em; font-weight:600; color:var(--accent); }
.fm-dot { opacity:.5; }
.fm-tags { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
/* When the title is dropped as an echo of the H1, the card is often just tags.
   Keep the panel chrome for a real metadata block, but collapse to a plain chip
   row when tags are all that's left — otherwise it reads as an empty box. */
.fm-card:has(> .fm-tags:only-child) {
  padding:0; margin:0 0 26px; background:none; border:none;
}
.fm-card > .fm-tags:only-child { margin-top:0; }
.fm-tag {
  font-size:11px; font-weight:500; color:var(--txt2);
  background:var(--bg-active); padding:3px 9px; border-radius:99px;
  border:1px solid var(--border-soft); cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.fm-tag:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); background:var(--accent-dim); }

/* ══════════════════════════════════════════════════════
   WIKI-LINKS + BACKLINKS
   ══════════════════════════════════════════════════════ */
.markdown-body a.wikilink {
  color:var(--accent); text-decoration:none; cursor:pointer;
  border-bottom:1px dashed rgba(var(--accent-rgb),.5);
  padding:0 1px; transition:background var(--t);
}
.markdown-body a.wikilink:hover { background:var(--accent-dim); border-radius:3px; }
.markdown-body a.wikilink-missing {
  color:var(--danger); border-bottom-color:rgba(240,82,82,.5);
}
.markdown-body a.wikilink-missing::after { content:'+'; font-size:.7em; vertical-align:super; opacity:.7; }
.backlinks {
  margin-top:48px; padding-top:18px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:4px;
}
.backlinks-title {
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--txt3); margin-bottom:6px;
}
.backlink-item {
  text-align:left; background:none; border:1px solid transparent; cursor:pointer;
  padding:7px 10px; border-radius:var(--r-sm); font-size:13px; color:var(--txt2);
  transition:all var(--t);
}
.backlink-item:hover { background:var(--bg-hover); border-color:var(--border-soft); color:var(--txt); }

/* ── Related notes (local semantic similarity) ── */
.related-notes {
  margin-top:32px; padding-top:18px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:5px;
}
.related-title {
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--txt3); margin-bottom:6px;
}
.related-item {
  display:flex; flex-direction:column; gap:5px; text-align:left;
  background:none; border:1px solid transparent; cursor:pointer;
  padding:9px 11px; border-radius:var(--r-md); transition:all var(--t);
}
.related-item:hover { background:var(--bg-hover); border-color:var(--border-soft); }
.related-name { font-size:13px; font-weight:600; color:var(--txt); }
.related-bar  { display:block; height:3px; border-radius:3px; background:var(--bg-raised); overflow:hidden; }
.related-bar i { display:block; height:100%; background:var(--accent); border-radius:3px; }
.related-snip {
  font-size:11.5px; color:var(--txt3); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.related-trigger {
  align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--accent);
  background:var(--accent-dim); border:1px solid rgba(var(--accent-rgb),.3);
  padding:8px 14px; border-radius:var(--r-md); cursor:pointer; transition:all var(--t);
}
.related-trigger:hover:not(:disabled) { background:rgba(var(--accent-rgb),.18); }
.related-trigger:disabled { opacity:.6; cursor:default; }
.related-hint, .related-loading, .related-empty {
  font-size:11.5px; color:var(--txt3); margin-top:6px; font-family:var(--font-mono);
}

/* ── Tag filter banner (sidebar) ── */
.tag-filter-banner {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--accent);
  background:var(--accent-dim); border:1px solid rgba(var(--accent-rgb),.3);
  padding:7px 12px; border-radius:var(--r-md); margin-bottom:8px;
}
.tag-filter-clear {
  margin-left:auto; background:none; border:none; cursor:pointer;
  color:var(--txt2); font-size:12px; padding:2px 5px; border-radius:4px;
}
.tag-filter-clear:hover { background:var(--bg-hover); color:var(--txt); }

/* ══════════════════════════════════════════════════════
   LIGHTBOX ZOOM/PAN (images + mermaid svg)
   ══════════════════════════════════════════════════════ */
.lightbox-inner { touch-action:none; cursor:grab; overflow:hidden; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.lightbox-inner.grabbing { cursor:grabbing; }
.lightbox-content { transform-origin:center center; transition:transform 60ms linear; will-change:transform; max-width:92vw; max-height:88vh; user-select:none; }
.lightbox-content svg, .lightbox-content img { width:auto; height:auto; max-width:92vw; max-height:88vh; }
.lightbox-hint {
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  font-size:11px; color:rgba(255,255,255,.7); font-family:var(--font-mono);
  background:rgba(0,0,0,.4); padding:5px 12px; border-radius:99px; pointer-events:none;
}

/* ══════════════════════════════════════════════════════
   BIG-DOCUMENT NAVIGATION
   ══════════════════════════════════════════════════════ */
.toc-filter-wrap { padding:0 14px 8px; }
.toc-filter {
  width:100%; font-size:12px; padding:7px 10px; border-radius:var(--r-sm);
  background:var(--bg-raised); border:1px solid var(--border); color:var(--txt);
  outline:none; transition:border-color var(--t);
}
.toc-filter:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-dim); }
.scroll-top-btn {
  position:absolute; bottom:24px; right:24px; z-index:6;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:var(--accent); color:#1a1205; border:none; font-size:20px; line-height:1;
  box-shadow:0 6px 20px rgba(0,0,0,.3); transition:transform var(--t), filter var(--t);
}
.scroll-top-btn:hover { filter:brightness(1.08); transform:translateY(-2px); }

/* ══════════════════════════════════════════════════════
   FOCUS-MODE OUTLINE
   ══════════════════════════════════════════════════════ */
.focus-main { display:flex; flex:1; min-height:0; }
.focus-toc {
  width:248px; flex-shrink:0; overflow-y:auto; padding:24px 14px;
  border-right:1px solid var(--border-soft);
}
.focus-toc.hidden { display:none; }
.focus-toc-title { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt3); margin-bottom:10px; padding-left:8px; }
.focus-toc-item {
  display:block; font-size:12.5px; color:var(--txt2); cursor:pointer;
  padding:5px 8px; border-radius:var(--r-sm); border-left:2px solid transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all var(--t);
}
.focus-toc-item:hover { background:var(--bg-hover); color:var(--txt); }
.focus-toc-item.active { color:var(--accent); border-left-color:var(--accent); background:var(--accent-dim); }
.focus-toc-item.h1 { font-weight:600; }
.focus-toc-item.h2 { padding-left:18px; }
.focus-toc-item.h3 { padding-left:30px; font-size:12px; }
.focus-toc-item.h4 { padding-left:42px; font-size:11.5px; opacity:.85; }
@media (max-width:900px){ .focus-toc { position:absolute; z-index:3; background:var(--bg-surface); height:100%; box-shadow:4px 0 24px rgba(0,0,0,.3); } }

/* Sidebar footer */
.sidebar-footer {
  padding:10px 12px;
  border-top:1px solid var(--border-soft);
  display:flex; align-items:center; gap:6px;
  flex-shrink:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.06));
  position:relative;
}
[data-theme="light"] .sidebar-footer {
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.02));
}
.theme-btn, .palette-btn {
  width:30px; height:30px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--txt2); transition:all var(--t); flex-shrink:0;
}
.theme-btn:hover, .palette-btn:hover {
  background:var(--bg-hover); color:var(--accent);
  border-color:rgba(var(--accent-rgb),.3);
}
.palette-btn { position:relative; }
.palette-btn::after {
  content:''; position:absolute; bottom:3px; right:3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  border:1.5px solid var(--bg-raised);
  transition:background var(--t);
}
.storage-info { font-size:10px; color:var(--txt3); flex:1; font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.danger-icon { background:none; border:none; color:var(--txt3); padding:6px; border-radius:var(--r-sm); transition:all var(--t); }
.danger-icon:hover { background:rgba(240,82,82,.1); color:var(--danger); }

/* ── Palette popover ─────────────────────────────────── */
.palette-popover {
  position:absolute; bottom:50px; left:10px;
  z-index:300;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:12px; width:220px;
  animation:modalIn 160ms var(--ease);
}
.palette-popover-title {
  font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt3);
  margin-bottom:9px;
}
.palette-row {
  display:flex; flex-wrap:wrap; gap:8px;
}
.palette-swatch {
  width:30px; height:30px; border-radius:50%;
  border:2px solid transparent; cursor:pointer;
  position:relative; padding:0;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
  background-clip:padding-box;
}
.palette-swatch:hover { transform:scale(1.1); }
.palette-swatch.active {
  border-color:var(--txt);
  box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent);
}
.palette-swatch.active::after {
  content:'✓'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.palette-mode-row {
  display:flex; gap:5px; margin-top:11px;
  padding-top:10px; border-top:1px solid var(--border-soft);
}
.palette-mode-btn {
  flex:1; padding:6px 8px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--txt2);
  font-size:11px; font-weight:600; cursor:pointer;
  transition:all var(--t);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.palette-mode-btn.active {
  background:var(--accent-dim); color:var(--accent);
  border-color:rgba(var(--accent-rgb),.4);
}
.palette-mode-btn:hover:not(.active) { background:var(--bg-hover); color:var(--txt); }

/* Backdrop */
.sidebar-backdrop {
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:190; backdrop-filter:blur(2px);
}
.sidebar-backdrop.show { display:block; }

/* ════════════════════════════════════════════════════
   MAIN
   ════════════════════════════════════════════════════ */
.main {
  flex:1; display:flex; flex-direction:column;
  min-width:0; overflow:hidden; position:relative;
}

/* Topbar */
.topbar {
  height:var(--topbar-h); flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding:0 14px 0 10px;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  z-index:100; position:relative;   /* anchor for the overflow "More" menu */
  backdrop-filter:saturate(140%) blur(8px);
}
.topbar-title {
  flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--txt);
  white-space:nowrap; overflow:hidden;
  letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px;
}
/* `text-overflow:ellipsis` does nothing on a flex container, so the note name
   was hard-clipped mid-word ("Weekly Revie") instead of truncating. The
   filename is the element that gives: folder crumbs stay whole, and the name
   ellipsizes properly. */
.topbar-title .tb-filename {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-title .tb-crumb, .topbar-title .tb-sep { flex-shrink:0; }
/* The Pro / Upgrade pills live *inside* #topbarTitle (app.js rebuilds the
   breadcrumb around them), so they compete with the note name for width.
   They keep their size; the name is what ellipsizes. */
.topbar-pro-pill, .topbar-upgrade-pill { flex-shrink:0; }
@media (max-width:640px) {
  /* On a phone the pill won a fight it shouldn't have been in: it filled the
     title slot, got clipped to "✦ Upg…", and left no room for the note name.
     Upgrading is still one tap away in the sidebar and on Home. */
  .topbar-upgrade-pill { display:none !important; }
}
.topbar-title::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--accent); flex-shrink:0; opacity:.7;
}
.topbar-actions {
  display:flex; align-items:center; gap:4px;
  padding:4px;
  background:var(--bg-raised);
  border:1px solid var(--border-soft);
  border-radius:24px;
  flex-shrink:0;   /* keep natural width so JS can measure overflow reliably */
}

/* Buttons */
.btn-icon {
  background:none; border:none; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); color:var(--txt2);
  transition:all var(--t); flex-shrink:0;
}
.btn-icon:hover {
  background:var(--bg-hover); color:var(--txt);
}
.btn-icon:active { transform:scale(.95); }

.btn-pill {
  display:flex; align-items:center; gap:5px;
  padding:6px 11px;
  background:transparent;
  border:1px solid transparent;
  border-radius:18px;
  font-size:11.5px; font-weight:600;
  color:var(--txt2); transition:all var(--t);
}
.btn-pill:hover {
  background:var(--bg-hover); color:var(--accent);
  border-color:rgba(var(--accent-rgb),.25);
}
.btn-pill:active { transform:scale(.96); }
.btn-pill.active {
  background:var(--accent-dim); color:var(--accent);
  border-color:rgba(var(--accent-rgb),.35);
}
.btn-pill svg { transition:transform var(--t); }
.btn-pill:hover svg { transform:scale(1.08); }

.btn-primary {
  padding:9px 20px; background:var(--accent);
  color:var(--on-accent); border:none; border-radius:var(--r-sm);
  font-weight:700; font-size:13px;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-primary:hover { background:var(--accent-soft); transform:translateY(-1px); box-shadow:0 4px 14px rgba(var(--accent-rgb),.28); }
.btn-primary:active { transform:translateY(0); box-shadow:0 1px 4px rgba(var(--accent-rgb),.22); }

.btn-secondary {
  padding:9px 20px; background:var(--bg-raised);
  color:var(--txt2); border:1px solid var(--border);
  border-radius:var(--r-sm); font-weight:500; font-size:13px;
  transition:all var(--t);
}
.btn-secondary:hover { background:var(--bg-hover); color:var(--txt); }

.btn-sm-accent {
  padding:6px 14px; background:var(--accent);
  color:var(--on-accent); border:none; border-radius:var(--r-sm);
  font-weight:700; font-size:12px;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-sm-accent:hover { background:var(--accent-soft); transform:translateY(-1px); box-shadow:0 3px 10px rgba(var(--accent-rgb),.26); }
.btn-sm-accent:active { transform:translateY(0); }
.btn-sm-ghost {
  padding:6px 14px; background:transparent;
  color:var(--txt2); border:1px solid var(--border);
  border-radius:var(--r-sm); font-size:12px; transition:all var(--t);
}
.btn-sm-ghost:hover { background:var(--bg-hover); color:var(--txt); }
.btn-sm-danger {
  padding:6px 14px; background:var(--danger);
  color:#fff; border:none; border-radius:var(--r-sm);
  font-weight:700; font-size:12px;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-sm-danger:hover { background:color-mix(in srgb, #fff 12%, var(--danger)); transform:translateY(-1px); box-shadow:0 3px 10px rgba(240,82,82,.28); }
.btn-sm-danger:active { transform:translateY(0); }

/* ════════════════════════════════════════════════════
   CONTENT AREA
   ════════════════════════════════════════════════════ */
.content-area {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}

/* Drop zone */
.drop-zone {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:auto;
}
.drop-zone.drag-over .drop-inner {
  border-color:var(--accent);
  background:var(--accent-dim);
  transform:scale(1.015);
}
.drop-inner {
  max-width:420px; width:100%;
  border:2px dashed var(--border); border-radius:var(--r-xl);
  padding:48px 36px; display:flex; flex-direction:column;
  align-items:center; gap:11px; text-align:center;
  transition:all var(--t);
}
.drop-anim-icon { color:var(--txt3); transition:color var(--t); }
.drop-zone.drag-over .drop-anim-icon { color:var(--accent); }
.drop-title { font-family:var(--font-head); font-size:18px; font-weight:700; }
.drop-sub   { font-size:12.5px; color:var(--txt2); margin-top:-4px; }
.drop-sub code { font-family:var(--font-mono); font-size:.85em; background:var(--bg-raised); padding:1px 5px; border-radius:4px; }
.drop-actions { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; justify-content:center; }

/* Editor */
.editor-wrap {
  flex:1; display:flex; flex-direction:column; min-height:0;
}
.editor-topbar {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:var(--bg-surface); border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap; gap:8px;
}
.editor-name-group {
  display:flex; align-items:center; gap:7px; flex:1; min-width:160px;
}
.editor-file-icon { color:var(--txt3); flex-shrink:0; }
.editor-filename {
  background:none; border:none; color:var(--txt);
  font-family:var(--font-mono); font-size:12.5px;
  outline:none; padding:3px 6px; border-radius:4px;
  transition:background var(--t); flex:1; min-width:0;
}
.editor-filename:focus { background:var(--bg-raised); }
.editor-controls { display:flex; align-items:center; gap:6px; }
.editor-wordcount { font-size:10.5px; color:var(--txt3); font-family:var(--font-mono); }
.editor-area {
  flex:1; background:var(--bg); color:var(--txt);
  font-family:var(--font-mono); font-size:13.5px; line-height:1.75;
  border:none; outline:none; padding:0; resize:none; tab-size:2;
  min-height:0; position:relative; overflow:hidden;
  animation: editorFadeIn .28s cubic-bezier(.2,.7,.2,1);
}
.editor-area::placeholder { color:var(--txt3); }

/* ── CodeMirror host wiring ────────────────────────────── */
.cm-host { display:flex; flex-direction:column; min-height:0; }
.cm-host .cm-editor { height:100%; flex:1; min-height:200px; }
.cm-host .cm-scroller { overscroll-behavior:contain; }
.cm-host .cm-content { caret-color:var(--accent); }

/* Fallback textarea (used when CM6 is unavailable) */
.mv-fallback { display:flex; }
.mv-fallback-textarea {
  flex:1; width:100%; height:100%; min-height:200px;
  border:none; outline:none; resize:none;
  padding:18px 22px; background:transparent; color:var(--txt);
  font-family:var(--font-mono); font-size:13.5px; line-height:1.72;
  tab-size:2;
}
.mv-fallback-textarea::placeholder { color:var(--txt3); }

@keyframes editorFadeIn {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:none; }
}

/* ── Markdown formatting toolbar ───────────────────────── */
.md-toolbar {
  display:flex; align-items:center; gap:2px;
  padding:6px 10px;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0; flex-wrap:wrap;
  position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
}
.md-tool {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:30px; padding:0 8px;
  border:none; background:transparent; color:var(--txt2);
  font-family:var(--font-mono); font-size:12px;
  border-radius:6px; cursor:pointer; user-select:none;
  transition:background .14s ease, color .14s ease, transform .14s cubic-bezier(.2,.7,.2,1);
}
.md-tool:hover  { background:var(--bg-raised); color:var(--txt); }
.md-tool:active { transform:translateY(1px) scale(.97); }
.md-tool-press  { background:var(--accent-dim); color:var(--accent); transform:scale(.94); }
.md-tool svg    { display:block; }
.md-tool-label  { font-weight:600; letter-spacing:.3px; font-size:11.5px; }
.md-tool-sep {
  width:1px; align-self:stretch; margin:4px 4px;
  background:var(--border-soft);
}

/* Unsaved-dot pulse — gentle attention without nagging */
.unsaved-dot-split,
.unsaved-badge .unsaved-dot,
.unsaved-dot {
  animation: unsavedPulse 2s ease-in-out infinite;
}
@keyframes unsavedPulse {
  0%, 100% { opacity:1;   transform:scale(1); }
  50%      { opacity:.55; transform:scale(.88); }
}

/* Preview */
.preview-wrap {
  flex:1; display:flex; flex-direction:column; min-height:0;
}
.preview-meta-bar {
  display:flex; gap:14px; flex-wrap:wrap;
  padding:8px 28px;
  font-size:10.5px; color:var(--txt3);
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0; font-family:var(--font-mono);
}
.preview-scroll {
  flex:1; overflow-y:auto; padding:28px 28px 64px;
  display:flex; flex-direction:column; align-items:center;
  position:relative;
}

/* ════════════════════════════════════════════════════
   MARKDOWN BODY
   ════════════════════════════════════════════════════ */
.markdown-body {
  width:100%;
  max-width:var(--content-max);
  color:var(--txt); font-family:var(--font);
  /* 16.5px over a 680px measure. The old 15.5/1.82 pairing was set for a much
     wider column — a short measure needs slightly tighter leading, not looser. */
  font-size:17px; line-height:1.7;
  word-break:break-word; overflow-wrap:break-word;
}
/* Full-width reading: let the column fill the pane (class-driven, no inline styles) */
.markdown-body.is-full { max-width:none; }
/* Reading font family (weight + line-height are applied inline like font-size) */
.markdown-body.is-mono  { font-family:var(--font-mono); }
.markdown-body.is-serif { font-family:Georgia, 'Times New Roman', serif; }

/* Headings */
.markdown-body h1,.markdown-body h2,.markdown-body h3,
.markdown-body h4,.markdown-body h5,.markdown-body h6 {
  font-family:var(--font-head); font-weight:700;
  letter-spacing:-.3px; color:var(--txt);
  margin-top:2em; margin-bottom:.55em; line-height:1.3;
  position:relative;
}
.markdown-body h1 { font-size:2em;   border-bottom:2px solid var(--accent);  padding-bottom:8px; }
/* No rule under h2. A full-width hairline under every single h2 turned an
   ordinary note into a stack of boxes and fought the h1's accent underline for
   attention. Size, weight and space carry the hierarchy; the extra top margin
   is what a removed rule has to be replaced with. */
.markdown-body h2 { font-size:1.5em; margin-top:2.4em; }
.markdown-body h3 { font-size:1.25em; }
.markdown-body h4 { font-size:1.05em; }
.markdown-body h5 { font-size:.95em; opacity:.85; }
.markdown-body h6 { font-size:.9em;  opacity:.7; }
.markdown-body h1:first-child,
.markdown-body h2:first-child { margin-top:0; }

/* Anchor link */
.anchor-link {
  opacity:0; margin-left:8px; font-size:.6em;
  color:var(--accent); text-decoration:none;
  font-family:var(--font-mono); vertical-align:middle;
  transition:opacity var(--t);
}
.markdown-body h1:hover .anchor-link,
.markdown-body h2:hover .anchor-link,
.markdown-body h3:hover .anchor-link,
.markdown-body h4:hover .anchor-link { opacity:1; }

/* Paragraph & text */
.markdown-body p         { margin-bottom:1em; }
.markdown-body a         { color:var(--accent); text-underline-offset:3px; }
.markdown-body a:hover   { opacity:.8; }
.markdown-body strong    { font-weight:600; }
.markdown-body em        { font-style:italic; }
.markdown-body del       { opacity:.45; text-decoration:line-through; }
.markdown-body mark      { background:rgba(var(--accent-rgb),.25); color:var(--txt); padding:0 3px; border-radius:3px; }
.markdown-body sup       { font-size:.72em; vertical-align:super; line-height:0; }
.markdown-body sub       { font-size:.72em; vertical-align:sub;   line-height:0; }

/* ── Callouts (GitHub / Obsidian style) ───────────────── */
.markdown-body .callout {
  --cl: var(--accent);
  margin:1.2em 0; padding:12px 16px;
  background:color-mix(in srgb, var(--cl) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--cl) 28%, transparent);
  border-left:3px solid var(--cl);
  border-radius:0 8px 8px 0;
  display:flex; gap:10px; align-items:flex-start;
}
.markdown-body .callout-icon  { flex-shrink:0; font-size:1.05em; line-height:1.5; }
.markdown-body .callout-body  { flex:1; min-width:0; }
.markdown-body .callout-body > :first-child { margin-top:0; }
.markdown-body .callout-body > :last-child  { margin-bottom:0; }
.markdown-body .callout-title { font-weight:700; color:var(--cl); margin-bottom:.25em; }
.markdown-body .callout-note,.markdown-body .callout-info     { --cl:var(--info, #3B82F6); }
.markdown-body .callout-tip,.markdown-body .callout-success   { --cl:var(--success, #10B981); }
.markdown-body .callout-warning                               { --cl:#F59E0B; }
.markdown-body .callout-caution,.markdown-body .callout-danger { --cl:var(--danger, #EF4444); }
.markdown-body .callout-important,.markdown-body .callout-question { --cl:var(--accent); }
/* Foldable callouts (<details>) */
.markdown-body details.callout         { display:block; padding:0; }
.markdown-body details.callout .callout-body { padding:0 16px 12px 38px; }
.markdown-body .callout-summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; gap:10px; align-items:center; padding:12px 16px;
  font-weight:600;
}
.markdown-body .callout-summary::-webkit-details-marker { display:none; }
.markdown-body .callout-summary::after {
  content:'▸'; margin-left:auto; color:var(--cl); transition:transform .15s var(--ease);
}
.markdown-body details.callout[open] .callout-summary::after { transform:rotate(90deg); }
.markdown-body .callout-summary .callout-title { margin:0; }

/* Generic collapsible <details> blocks */
.markdown-body details:not(.callout) {
  margin:1.2em 0; padding:10px 14px;
  border:1px solid var(--border); border-radius:8px; background:var(--bg-raised);
}
.markdown-body details:not(.callout) > summary {
  cursor:pointer; font-weight:600; user-select:none;
}

/* ── Footnotes ────────────────────────────────────────── */
.markdown-body .footnote-ref a { text-decoration:none; font-weight:600; padding:0 1px; }
.markdown-body .footnotes { margin-top:2.5em; font-size:.9em; color:var(--txt2); }
.markdown-body .footnotes hr { margin-bottom:1em; }
.markdown-body .footnotes ol { padding-left:1.4em; }
.markdown-body .footnotes li { margin-bottom:.4em; }
.markdown-body .footnote-back { text-decoration:none; margin-left:4px; opacity:.7; }
.markdown-body .footnote-back:hover { opacity:1; }

/* ── Toast action button ──────────────────────────────── */
.toast-action {
  margin-left:6px; padding:3px 10px; font-size:11.5px; font-weight:600;
  background:var(--accent); color:var(--on-accent);
  border:none; border-radius:6px; cursor:pointer; white-space:nowrap;
}
.toast-action:hover { filter:brightness(1.08); }

/* Lists */
.markdown-body ul,.markdown-body ol { padding-left:1.6em; margin-bottom:1em; }
.markdown-body li     { margin-bottom:.3em; }
.markdown-body li > p { margin-bottom:.4em; }
/* Task list */
.markdown-body .task-list-item { list-style:none; margin-left:-1.1em; }
.markdown-body input[type="checkbox"] {
  accent-color:var(--accent); margin-right:6px;
  vertical-align:middle; pointer-events:none;
}

/* Blockquote */
.markdown-body blockquote {
  border-left:3px solid var(--accent); margin:1.2em 0;
  padding:10px 18px;
  background:var(--accent-dim);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--txt2);
}
.markdown-body blockquote > p { margin:0; }
.markdown-body blockquote > p + p { margin-top:.6em; }

/* Inline code */
.markdown-body code:not(pre code) {
  font-family:var(--font-mono); font-size:.855em;
  background:var(--bg-raised); color:var(--accent);
  padding:1px 5px; border-radius:4px;
  border:1px solid var(--border);
}
/* Code block */
.markdown-body pre {
  margin:1.2em 0; border-radius:var(--r-md);
  border:1px solid var(--border); overflow:hidden;
  position:relative;
}
.markdown-body pre code.hljs { padding:16px 18px; font-size:13px; border-radius:0; }
/* Language label */
.code-lang-label {
  position:absolute; top:0; left:0;
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  padding:3px 9px; color:var(--txt3);
  background:var(--bg-raised); border-radius:var(--r-md) 0 4px 0;
  letter-spacing:.05em; text-transform:uppercase;
  pointer-events:none;
}
/* Copy button */
.code-copy-btn {
  position:absolute; top:6px; right:6px;
  padding:3px 9px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06); border-radius:4px;
  color:rgba(255,255,255,.4); font-size:10px;
  font-family:var(--font-mono); cursor:pointer;
  opacity:0; transition:all var(--t);
}
.markdown-body pre:hover .code-copy-btn { opacity:1; }
.code-copy-btn:hover { background:rgba(255,255,255,.14); color:#fff; }
[data-theme="light"] .code-copy-btn {
  border-color:rgba(0,0,0,.1); background:rgba(0,0,0,.04); color:rgba(0,0,0,.35);
}
[data-theme="light"] .code-copy-btn:hover { background:rgba(0,0,0,.09); color:#000; }

/* Tables */
.markdown-body .table-wrap { overflow-x:auto; margin:1.2em 0; border-radius:var(--r-md); border:1px solid var(--border); }
.markdown-body table { width:100%; border-collapse:collapse; font-size:13.5px; }
.markdown-body th {
  background:var(--bg-raised);
  font-family:var(--font-head); font-weight:700; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase;
  padding:10px 14px; text-align:left;
  border-bottom:2px solid var(--accent); white-space:nowrap;
}
.markdown-body td { padding:9px 14px; border-bottom:1px solid var(--border-soft); }
.markdown-body tr:last-child td { border-bottom:none; }
.markdown-body tbody tr:hover td { background:var(--bg-raised); }

/* Images */
.markdown-body img {
  max-width:100%; border-radius:var(--r-md);
  box-shadow:var(--sh-md); cursor:zoom-in;
  display:block; margin:1em 0;
}
.markdown-body img.inline-img { display:inline; margin:0; box-shadow:none; cursor:default; }

/* Horizontal rule */
.markdown-body hr { border:none; border-top:1px solid var(--border); margin:2em 0; }

/* Footnotes */
.markdown-body .footnotes { font-size:13px; color:var(--txt2); border-top:1px solid var(--border); margin-top:2em; padding-top:1em; }

/* Mermaid */
.mermaid-outer {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:24px; margin:1.2em 0;
  overflow-x:auto; text-align:center;
}
.mermaid-outer svg { max-width:100%; }
.mermaid-error { color:var(--danger); font-family:var(--font-mono); font-size:12px; padding:12px; }

/* Math */
.katex-display { overflow-x:auto; padding:8px 0; }
.katex-error   { color:var(--danger); font-family:var(--font-mono); font-size:12px; }

/* Definition lists */
.markdown-body dl  { margin:1em 0; }
.markdown-body dt  { font-weight:600; color:var(--accent); margin-top:.7em; }
.markdown-body dd  { padding-left:1.4em; color:var(--txt2); }

/* Abbr */
.markdown-body abbr { cursor:help; text-decoration:underline dotted var(--txt3); }

/* Keyboard key */
.markdown-body kbd {
  font-family:var(--font-mono); font-size:.82em;
  background:var(--bg-raised); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:4px;
  padding:1px 5px; color:var(--txt);
}

/* ════════════════════════════════════════════════════
   TOC PANEL
   ════════════════════════════════════════════════════ */
.toc-panel {
  position:absolute; top:var(--topbar-h); right:0;
  width:var(--toc-w); height:calc(100dvh - var(--topbar-h));
  background:var(--bg-surface); border-left:1px solid var(--border);
  overflow-y:auto; z-index:80;
  box-shadow:var(--sh-lg);
  animation:slideRight 180ms var(--ease);
  display:flex; flex-direction:column;
}
@keyframes slideRight {
  from { transform:translateX(100%); opacity:0; }
  to   { transform:translateX(0);    opacity:1; }
}
.toc-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt3);
  border-bottom:1px solid var(--border-soft);
  position:sticky; top:0; background:var(--bg-surface); z-index:1;
}
.toc-header > span:first-child {
  display:flex; align-items:center; gap:8px;
}
.toc-header > span:first-child::before {
  content:''; width:3px; height:12px; border-radius:2px;
  background:var(--accent);
}
#tocContent { padding:10px 10px 28px; }
.toc-item {
  display:block; padding:6px 11px;
  border-radius:var(--r-sm); font-size:12.5px;
  color:var(--txt2); text-decoration:none;
  border-left:2px solid transparent;
  transition:all var(--t); line-height:1.5;
  word-break:break-word;
  margin-bottom:1px;
}
.toc-item:hover {
  color:var(--accent);
  background:var(--bg-hover);
  border-left-color:rgba(var(--accent-rgb),.3);
}
.toc-item.active {
  color:var(--accent); border-color:var(--accent);
  background:var(--accent-dim); font-weight:600;
}
.toc-item.h1 { font-weight:600; font-size:13px; color:var(--txt); }
.toc-item.h2 { font-weight:500; }
.toc-item.h3 { padding-left:22px; font-size:12px; }
.toc-item.h4 { padding-left:32px; font-size:11.5px; color:var(--txt3); }
.toc-item.h5 { padding-left:40px; font-size:11px; color:var(--txt3); }
.toc-item.h6 { padding-left:48px; font-size:11px; color:var(--txt3); opacity:.85; }

/* Wider TOC on roomy laptops/desktops */
@media (min-width:1280px) { :root { --toc-w: 320px; } }
@media (min-width:1600px) { :root { --toc-w: 360px; } }

/* ════════════════════════════════════════════════════
   BOTTOM NAV (mobile)
   ════════════════════════════════════════════════════ */
.bottom-nav {
  height:var(--bottom-nav-h);
  display:flex; align-items:stretch;
  background:var(--bg-surface); border-top:1px solid var(--border);
  z-index:150; flex-shrink:0;
  padding-bottom:env(safe-area-inset-bottom);
}
.bn-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  background:none; border:none; color:var(--txt3);
  font-size:9.5px; font-weight:500; letter-spacing:.03em;
  transition:color var(--t); padding:8px 4px;
}
.bn-item:hover, .bn-item.active { color:var(--accent); }
.bn-item svg { transition:color var(--t); }

/* ════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════ */
.toast-container {
  position:fixed; bottom:24px; right:20px; z-index:1000;
  display:flex; flex-direction:column; gap:7px; pointer-events:none;
  max-width:320px;
}
.toast {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); padding:10px 14px;
  font-size:12.5px; box-shadow:var(--sh-md);
  display:flex; align-items:center; gap:9px;
  animation:toastIn 180ms var(--ease) forwards;
  pointer-events:auto;
}
.toast-indicator { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.toast.success .toast-indicator { background:var(--success); }
.toast.error   .toast-indicator { background:var(--danger); }
.toast.info    .toast-indicator { background:var(--info); }
.toast.warn    .toast-indicator { background:var(--accent); }
@keyframes toastIn  { from{transform:translateX(14px);opacity:0} to{transform:none;opacity:1} }
@keyframes toastOut { from{transform:none;opacity:1} to{transform:translateX(14px);opacity:0} }

/* ════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:500; display:flex; align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(4px);
}
.modal {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:22px 24px;
  width:100%; max-width:360px; box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; gap:12px;
  animation:modalIn 160ms var(--ease);
}
.modal-wide { max-width:500px; }
@keyframes modalIn { from{transform:scale(.95) translateY(6px);opacity:0} to{transform:none;opacity:1} }
.modal-title { font-family:var(--font-head); font-size:15px; font-weight:700; }
.modal-msg   { font-size:13px; color:var(--txt2); line-height:1.55; }
.modal-desc  { font-size:12.5px; color:var(--txt2); line-height:1.6; }
.modal-input {
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--txt);
  font-family:var(--font-mono); font-size:13px;
  padding:9px 12px; outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.modal-input:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-dim); }
.modal-footer { display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; }

/* Cloud modal */
.setup-steps {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden;
}
.setup-steps summary {
  padding:9px 12px; font-size:12px; font-weight:500; cursor:pointer;
  list-style:none; color:var(--txt2);
}
.setup-steps summary:hover { color:var(--txt); }
.setup-steps[open] summary { border-bottom:1px solid var(--border); }
.setup-list {
  padding:10px 12px 10px 28px; font-size:12px; color:var(--txt2);
  line-height:1.65; display:flex; flex-direction:column; gap:3px;
}
.setup-list a { color:var(--accent); }
.setup-list code { font-family:var(--font-mono); font-size:.88em; background:var(--bg-hover); padding:1px 4px; border-radius:3px; }
.cloud-input {
  width:100%; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--txt);
  font-family:var(--font-mono); font-size:12px; line-height:1.6;
  padding:10px 12px; outline:none; resize:vertical;
  transition:border-color var(--t), box-shadow var(--t);
}
.cloud-input:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-dim); }
.cloud-error {
  font-size:12px; color:var(--danger);
  background:rgba(240,82,82,.1); border-radius:var(--r-sm);
  padding:8px 12px; border:1px solid rgba(240,82,82,.25);
}
.cloud-connecting {
  font-size:12px; color:var(--txt2);
  display:flex; align-items:center; gap:7px;
}

/* ════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════ */
.lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,.88);
  z-index:900; display:flex; align-items:center; justify-content:center;
  padding:20px; cursor:zoom-out;
}
.lightbox-inner { max-width:90vw; max-height:90dvh; }
.lightbox-inner img { max-width:100%; max-height:90dvh; border-radius:var(--r-md); box-shadow:var(--sh-lg); }
.lightbox-close {
  position:fixed; top:16px; right:16px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none;
  color:#fff; font-size:16px; cursor:pointer; z-index:901;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t);
}
.lightbox-close:hover { background:rgba(255,255,255,.22); }

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */

/* ─── Tablet ─────────────────────────────────────── */
@media (max-width:900px) {
  :root { --sidebar-w:252px; --toc-w:260px; }
  .btn-label { display:none; }
  .btn-pill  { padding:6px 9px; }
  .topbar-actions { padding:3px; gap:2px; }
  .sidebar-actions { grid-template-columns:repeat(2, 1fr); }
}

/* ─── Mobile ─────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile ≤640px
   ═══════════════════════════════════════════════════════ */
@media (max-width:640px) {
  :root {
    --topbar-h:      48px;
    --sidebar-w:     100vw;
    --content-max:   100%;
  }
  /* Beat any JS-set inline --content-max so phones always render full-width */
  .markdown-body { max-width:100% !important; }

  body { overflow:hidden; }

  /* ── Sidebar: slides over as drawer ──────────────── */
  .sidebar {
    position:fixed; left:0; top:0; bottom:0;
    transform:translateX(-100%);
    box-shadow:var(--sh-lg);
    transition:transform var(--t);
    /* Ensure it sits above everything including split wrap */
    z-index:200;
  }
  .sidebar.open { transform:translateX(0); }

  /* ── Bottom nav: always visible on mobile ─────────── */
  .bottom-nav { display:flex !important; }

  /* ── Topbar ─────────────────────────────────────── */
  .topbar { padding:0 8px; gap:5px; }
  .topbar-title { font-size:12px; }
  /* Hide text labels on pill buttons — icon only */
  .btn-label { display:none; }
  .btn-pill  { padding:5px 7px; }

  /* ── Preview ─────────────────────────────────────── */
  .preview-scroll {
    padding:14px 14px calc(var(--bottom-nav-h) + 24px + env(safe-area-inset-bottom));
  }
  .preview-meta-bar { padding:6px 14px; font-size:9.5px; }
  .markdown-body { font-size:15px; }

  /* ── Editor ─────────────────────────────────────── */
  .editor-area { padding:0; font-size:13px; }
  .editor-area .cm-scroller {
    padding:14px 14px calc(var(--bottom-nav-h) + 60px + env(safe-area-inset-bottom));
  }
  .editor-topbar { padding:6px 10px; flex-wrap:wrap; gap:5px; }

  /* ── Markdown toolbar: scrollable thumb-zone strip ── */
  .md-toolbar {
    overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
    padding:6px 8px;
    scrollbar-width:none; -ms-overflow-style:none;
    position:sticky;
    /* keep it parked just above the bottom nav so the thumb can reach it */
    top:auto; bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    z-index:10;
    border-top:1px solid var(--border-soft);
    background:var(--bg-surface);
  }
  .md-toolbar::-webkit-scrollbar { display:none; }
  .md-tool {
    min-width:38px; height:36px; flex-shrink:0;  /* finger-friendly hit area */
    font-size:13px;
  }
  /* Re-stack editor so toolbar floats at bottom */
  .editor-wrap { display:flex; flex-direction:column; }
  .editor-wrap .md-toolbar { order:99; }

  /* ── Drop zone ─────────────────────────────────── */
  .drop-inner { padding:32px 18px; }
  .drop-title { font-size:16px; }
  .drop-actions { flex-direction:column; align-items:center; width:100%; }
  .drop-actions .btn-primary,
  .drop-actions .btn-secondary { width:100%; max-width:240px; }

  /* ── TOC: full width overlay ───────────────────── */
  .toc-panel { width:100%; }

  /* ── Toast: centered above bottom nav ─────────── */
  .toast-container {
    bottom:calc(var(--bottom-nav-h) + 10px + env(safe-area-inset-bottom));
    right:10px; left:10px; max-width:100%;
    align-items:center;
  }

  /* ── Modals: full width ─────────────────────── */
  .modal { max-width:calc(100vw - 20px); border-radius:var(--r-lg); }
  .modal-overlay { padding:12px; align-items:flex-end; }

  /* ── AI Chat: full overlay ───────────────────── */
  .ai-chat-panel {
    position:fixed;
    top:var(--topbar-h); left:0; right:0;
    bottom:var(--bottom-nav-h);
    width:100%; border-left:none;
    border-top:1px solid var(--border);
    z-index:60;
  }

  /* ── Command palette: full width ─────────────── */
  #commandPalette { padding-top:40px; }
  .cp-modal { border-radius:var(--r-lg) var(--r-lg) 0 0; }

  /* ── Writing tools: full width ─────────────── */
  .writing-tools-bar {
    left:10px; right:10px; width:auto;
    transform:none;
    bottom:calc(var(--bottom-nav-h) + 8px + env(safe-area-inset-bottom));
  }

  /* ── Find bar: full width ───────────────────── */
  .find-bar { left:8px; right:8px; }
  .find-input { width:100%; }

  /* ── Auth gate ──────────────────────────────── */
  .auth-gate-inner { padding:0 8px; }

  /* ── Unsaved badge ───────────────────────────── */
  .unsaved-badge {
    bottom:calc(var(--bottom-nav-h) + 10px);
    font-size:11px;
  }

  /* ── Share/manage modals ────────────────────── */
  .template-grid { grid-template-columns:repeat(2, 1fr); }
}

/* ─── Tablet ≤900px ─────────────────────────────── */
@media (max-width:900px) and (min-width:641px) {
  :root { --sidebar-w: 252px; --toc-w:260px; }
  .btn-label { display:none; }
  .btn-pill  { padding:6px 9px; }
}

/* ─── Very small ≤360px ─────────────────────────── */
@media (max-width:360px) {
  .editor-topbar    { flex-direction:column; align-items:flex-start; }
  .editor-controls  { width:100%; justify-content:flex-end; }
  .drop-inner       { padding:22px 12px; }
  .template-grid    { grid-template-columns:1fr; }
  /* Actions stay put even here — the overflow "⋯ More" menu collapses them so
     every action is still reachable (the bottom nav only covers a few). */
}

/* ═══ Print ══════════════════════════════════════════ */
@media print {
  .sidebar,.topbar,.bottom-nav,.toc-panel,
  .toast-container,.modal-overlay,.topbar-actions { display:none !important; }
  body { display:block; overflow:visible; height:auto; }
  .main { display:block; overflow:visible; }
  .content-area { display:block; overflow:visible; }
  .preview-wrap { display:block; overflow:visible; }
  .preview-scroll { padding:0; overflow:visible; }
  .markdown-body { max-width:100%; font-size:11pt; }
  .markdown-body pre { overflow:visible; white-space:pre-wrap; }
}

/* ════════════════════════════════════════════════════
   PDF VIEWER
   ════════════════════════════════════════════════════ */
.pdf-wrap {
  flex:1; display:flex; flex-direction:column; min-height:0;
}
.pdf-topbar {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; flex-wrap:wrap;
  background:var(--bg-surface); border-bottom:1px solid var(--border);
  flex-shrink:0; min-height:46px;
}
.pdf-info {
  display:flex; align-items:center; gap:8px; flex:1; min-width:0;
  font-size:12.5px; color:var(--txt2);
}
.pdf-info svg { color:var(--danger); flex-shrink:0; }
.pdf-info span:first-of-type {
  font-weight:500; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:260px;
}
.pdf-page-info {
  font-size:10.5px; color:var(--txt3);
  font-family:var(--font-mono); white-space:nowrap;
}
.pdf-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Progress bar in topbar */
.pdf-progress {
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--txt2); min-width:140px;
}
.pdf-progress-bar {
  flex:1; height:3px; background:var(--bg-raised);
  border-radius:2px; overflow:hidden; min-width:80px;
}
.pdf-progress-bar::after {
  content:''; display:block; height:100%;
  background:var(--accent); border-radius:2px;
  width:var(--pct, 0%); transition:width 200ms var(--ease);
}

/* Canvas area */
.pdf-canvas-wrap {
  flex:1; overflow-y:auto; overflow-x:auto;
  background:var(--bg); padding:24px 24px 60px;
  display:flex; flex-direction:column; align-items:center;
  gap:0;
}
.pdf-loading {
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:60px 20px; color:var(--txt2); font-size:13px;
}
.pdf-spinner {
  width:36px; height:36px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Individual pages */
.pdf-pages { display:flex; flex-direction:column; gap:20px; align-items:center; width:100%; }
.pdf-page-wrap {
  background:#fff;
  border-radius:var(--r-sm);
  box-shadow:var(--sh-md);
  overflow:hidden; width:100%; max-width:900px;
  position:relative;
}
.pdf-page-wrap canvas { display:block; width:100%; height:auto; }
.pdf-page-label {
  position:absolute; bottom:8px; right:10px;
  font-size:9.5px; font-family:var(--font-mono);
  color:rgba(0,0,0,.35); pointer-events:none;
  background:rgba(255,255,255,.7); padding:2px 6px; border-radius:4px;
}
[data-theme="dark"] .pdf-page-label { color:rgba(255,255,255,.4); background:rgba(0,0,0,.4); }

/* Convert progress (in modal) */
.convert-progress { display:flex; flex-direction:column; gap:8px; }
.convert-bar-wrap {
  height:4px; background:var(--bg-raised); border-radius:2px; overflow:hidden;
}
.convert-bar {
  height:100%; background:var(--accent); border-radius:2px;
  width:0%; transition:width 200ms var(--ease);
}
.convert-label { font-size:11.5px; color:var(--txt2); font-family:var(--font-mono); }

/* Responsive PDF topbar */
@media (max-width:640px) {
  .pdf-topbar { padding:6px 10px; }
  .pdf-canvas-wrap { padding:12px 8px 80px; }
  .pdf-page-wrap { border-radius:4px; }
  .pdf-actions .btn-pill span { display:none; }
}

/* ── Convert modal tabs & AI key UI ──────────────────── */
.convert-mode-tabs {
  display:flex; gap:4px;
  background:var(--bg-raised); border-radius:var(--r-sm);
  padding:3px; flex-shrink:0;
}
.cmode-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 12px; border:none; border-radius:4px;
  font-size:12px; font-weight:500; font-family:var(--font);
  color:var(--txt2); background:transparent; cursor:pointer;
  transition:all var(--t);
}
.cmode-tab.active {
  background:var(--bg-surface);
  color:var(--accent);
  box-shadow:var(--sh-sm);
}
.cmode-tab:not(.active):hover { color:var(--txt); }

.cmode-panel { display:flex; flex-direction:column; gap:10px; }

.api-key-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.api-key-label {
  font-size:12px; font-weight:500; color:var(--txt2); white-space:nowrap;
}
.api-key-input-wrap {
  flex:1; min-width:180px;
  display:flex; align-items:center;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden;
  transition:border-color var(--t);
}
.api-key-input-wrap:focus-within { border-color:var(--border-focus); }
.api-key-input {
  flex:1; border:none; background:transparent;
  font-family:var(--font-mono); font-size:12.5px;
  padding:8px 10px; color:var(--txt); outline:none;
}
.api-key-toggle {
  background:none; border:none; padding:0 10px;
  cursor:pointer; font-size:14px; color:var(--txt3);
  transition:color var(--t);
}
.api-key-toggle:hover { color:var(--txt); }
.api-key-link {
  font-size:11.5px; color:var(--accent); white-space:nowrap;
  text-decoration:none;
}
.api-key-link:hover { text-decoration:underline; }
.save-key-row {
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--txt2); cursor:pointer;
}
.save-key-row input { accent-color:var(--accent); }

.convert-error {
  font-size:12px; color:var(--danger);
  background:rgba(240,82,82,.08); border:1px solid rgba(240,82,82,.2);
  border-radius:var(--r-sm); padding:8px 12px; line-height:1.5;
}

/* ── Datalab key manager ─────────────────────────────── */
.dl-options-row {
  display:flex; gap:10px; flex-wrap:wrap;
}
.dl-option-group {
  display:flex; flex-direction:column; gap:5px; flex:1; min-width:150px;
}
.dl-option-label {
  font-size:11px; font-weight:600; color:var(--txt3);
  letter-spacing:.04em; text-transform:uppercase;
}
.dl-select {
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--txt);
  font-family:var(--font); font-size:12.5px;
  padding:7px 10px; outline:none; cursor:pointer;
  transition:border-color var(--t);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8FA8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:28px;
}
.dl-select:focus { border-color:var(--border-focus); }
[data-theme="light"] .dl-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2358564F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dl-keys-header {
  display:flex; align-items:center; justify-content:space-between;
}
.dl-keys-title {
  font-size:11px; font-weight:600; color:var(--txt3);
  letter-spacing:.04em; text-transform:uppercase;
}
.dl-keys-hint {
  font-weight:400; text-transform:none; letter-spacing:0;
  font-size:10.5px; color:var(--txt3); opacity:.7;
}
.dl-add-key {
  background:none; border:1px solid var(--border);
  border-radius:var(--r-sm); padding:4px 10px;
  font-size:11.5px; font-weight:500; color:var(--accent);
  cursor:pointer; transition:all var(--t);
}
.dl-add-key:hover { background:var(--accent-dim); border-color:var(--accent); }

.dl-no-keys {
  font-size:12px; color:var(--txt3); text-align:center;
  padding:14px; background:var(--bg-raised);
  border-radius:var(--r-sm); border:1px dashed var(--border);
}

.dl-key-list {
  display:flex; flex-direction:column; gap:7px;
  max-height:220px; overflow-y:auto;
}
.dl-key-row {
  display:flex; align-items:center; gap:7px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:8px 10px;
  transition:border-color var(--t);
}
.dl-key-row:focus-within { border-color:var(--border-focus); }

.dl-key-num {
  font-size:10px; font-family:var(--font-mono);
  color:var(--txt3); width:14px; text-align:center; flex-shrink:0;
}
.dl-key-fields {
  flex:1; display:flex; flex-direction:column; gap:5px; min-width:0;
}
.dl-key-label-inp {
  background:transparent; border:none; border-bottom:1px solid var(--border-soft);
  color:var(--txt2); font-size:11px; padding:2px 4px;
  outline:none; width:100%;
}
.dl-key-label-inp:focus { border-color:var(--border-focus); color:var(--txt); }
.dl-key-secret-wrap {
  display:flex; align-items:center;
  background:var(--bg-input); border:1px solid var(--border-soft);
  border-radius:4px; overflow:hidden;
}
.dl-key-val-inp {
  flex:1; background:transparent; border:none;
  color:var(--txt); font-family:var(--font-mono); font-size:11.5px;
  padding:5px 7px; outline:none; min-width:0;
}
.dl-key-eye {
  background:none; border:none; padding:0 7px;
  cursor:pointer; font-size:12px; color:var(--txt3);
  transition:color var(--t); flex-shrink:0;
}
.dl-key-eye:hover { color:var(--txt); }

.dl-key-status {
  font-size:11px; width:16px; text-align:center; flex-shrink:0;
}
.dl-key-status.ok        { color:var(--success); }
.dl-key-status.exhausted { color:var(--danger); }

.dl-key-btns {
  display:flex; gap:2px; flex-shrink:0;
}
.dl-key-btns button, .dl-key-btns span {
  background:none; border:none; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px; font-size:12px; color:var(--txt3);
  cursor:pointer; transition:all var(--t);
}
.dl-key-btns button:hover { background:var(--bg-hover); color:var(--txt); }
.dl-key-del:hover { color:var(--danger) !important; }

/* ════════════════════════════════════════════════════
   READING PROGRESS BAR
   ════════════════════════════════════════════════════ */
.reading-progress-bar {
  height:2px; flex-shrink:0;
  background:var(--border-soft);
  overflow:hidden;
}
.reading-progress-fill {
  height:100%; width:0%;
  background:var(--accent);
  transition:width 200ms var(--ease);
}

/* ════════════════════════════════════════════════════
   SHARE MODAL
   ════════════════════════════════════════════════════ */
.share-requires-cloud {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px;
  background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.25);
  border-radius:var(--r-sm); font-size:12.5px; color:var(--txt2);
  flex-wrap:wrap;
}
.share-requires-cloud svg { color:var(--accent); flex-shrink:0; margin-top:1px; }
.share-requires-cloud span { flex:1; min-width:160px; }
.share-panel { display:flex; flex-direction:column; gap:12px; }

.share-no-link {
  text-align:center; padding:20px;
  background:var(--bg-raised); border-radius:var(--r-md);
  border:1px dashed var(--border);
}
.share-no-link-icon { font-size:32px; margin-bottom:8px; }
.share-no-link-title { font-weight:600; font-size:13.5px; margin-bottom:4px; }
.share-no-link-sub   { font-size:12px; color:var(--txt2); }

.share-link-label { font-size:11px; font-weight:600; color:var(--txt3); letter-spacing:.05em; text-transform:uppercase; }
.share-link-row   { display:flex; gap:5px; margin-top:5px; }
.share-link-input {
  flex:1; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--txt2);
  font-family:var(--font-mono); font-size:11.5px;
  padding:7px 10px; outline:none; cursor:text;
  min-width:0;
}
.share-copy-btn, .share-qr-btn {
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--txt2);
  cursor:pointer; transition:all var(--t);
}
.share-copy-btn:hover { background:var(--bg-hover); color:var(--accent); }
.share-qr-btn:hover   { background:var(--bg-hover); color:var(--accent2); }
.share-meta-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:5px; flex-wrap:wrap; gap:6px;
}
.share-meta-info { font-size:11px; color:var(--txt3); font-family:var(--font-mono); }
.share-revoke-btn {
  background:none; border:none; font-size:11px; color:var(--danger);
  cursor:pointer; padding:0; transition:opacity var(--t);
}
.share-revoke-btn:hover { opacity:.7; }
.share-options {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.share-opt-label { font-size:11.5px; color:var(--txt2); white-space:nowrap; }
.share-options .dl-select { flex:1; min-width:130px; }
.share-qr-wrap {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px;
  background:var(--bg-raised); border-radius:var(--r-md);
  border:1px solid var(--border);
}
.share-qr-hint { font-size:11px; color:var(--txt3); }

/* Manage links */
.managed-links-list { display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; }
.managed-link-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:var(--bg-raised); border-radius:var(--r-sm);
  border:1px solid var(--border);
}
.managed-link-row.revoked { opacity:.5; }
.managed-link-info { flex:1; min-width:0; }
.managed-link-title { display:block; font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.managed-link-meta  { font-size:10.5px; color:var(--txt3); font-family:var(--font-mono); }
.managed-link-actions { display:flex; gap:5px; flex-shrink:0; }

/* ════════════════════════════════════════════════════
   FOCUS / ZEN MODE
   ════════════════════════════════════════════════════ */
.focus-overlay {
  position:fixed; inset:0; z-index:800;
  display:flex; flex-direction:column;
  background:var(--bg); color:var(--txt);
  overflow:hidden;
}
/* Focus mode respects its own data-theme attribute */
.focus-overlay[data-theme="dark"]  { --bg:#0D0B08; --bg-surface:#14110E; --bg-raised:#1C1714; --bg-hover:#231E1A; --txt:#F2EEE7; --txt2:#ABA399; --txt3:#70675F; --accent:#E6B055; --accent-rgb:230,176,85; --accent-dim:rgba(230,176,85,.12); --border:rgba(255,255,255,.07); --border-soft:rgba(255,255,255,.04); }
.focus-overlay[data-theme="light"] { --bg:#F3F2EE; --bg-surface:#FDFCFA; --bg-raised:#ECEAE3; --bg-hover:#E5E2D9; --txt:#1A1917; --txt2:#58564F; --txt3:#A09C94; --accent:#C8860E; --accent-rgb:200,134,14; --accent-dim:rgba(200,134,14,.1); --border:rgba(0,0,0,.09); --border-soft:rgba(0,0,0,.05); }

.focus-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; gap:12px;
  background:var(--bg-surface); border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.focus-title {
  font-family:var(--font-head); font-size:14px; font-weight:600;
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.focus-controls { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.focus-ctrl {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:5px 10px;
  font-size:12px; font-weight:600; color:var(--txt2);
  cursor:pointer; transition:all var(--t);
}
.focus-ctrl:hover { background:var(--bg-hover); color:var(--accent); }
.focus-width-sel {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:5px 10px;
  font-size:12px; color:var(--txt2); cursor:pointer;
  outline:none; font-family:var(--font);
}
.focus-exit {
  background:none; border:1px solid var(--border);
  border-radius:var(--r-sm); padding:5px 12px;
  font-size:12px; color:var(--txt2); cursor:pointer;
  transition:all var(--t);
}
.focus-exit:hover { background:rgba(240,82,82,.1); color:var(--danger); border-color:rgba(240,82,82,.3); }

.focus-progress-bar { height:2px; background:var(--border-soft); flex-shrink:0; }
.focus-progress-fill { height:100%; width:0%; background:var(--accent); transition:width 200ms; }

.focus-scroll {
  flex:1; overflow-y:auto; padding:40px 24px 80px;
  display:flex; justify-content:center;
}
.focus-body {
  width:100%; font-size:16px; line-height:1.85;
  transition:max-width 200ms var(--ease), font-size 150ms var(--ease);
}

/* ════════════════════════════════════════════════════
   SHARED-LINK VIEWER
   ════════════════════════════════════════════════════ */
.shared-viewer {
  position:fixed; inset:0; z-index:900;
  display:flex; flex-direction:column;
  background:var(--bg); color:var(--txt);
  overflow:hidden;
}
.shared-viewer-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; gap:12px;
  background:var(--bg-surface); border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.shared-viewer-brand {
  display:flex; align-items:center; gap:8px;
}
.shared-viewer-badge {
  font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent-dim); color:var(--accent);
  padding:2px 8px; border-radius:20px; border:1px solid rgba(var(--accent-rgb),.3);
}
.shared-viewer-actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.shared-viewer-actions a {
  display:flex; align-items:center; gap:4px;
  padding:5px 10px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:20px; font-size:11px; font-weight:500;
  color:var(--txt2); text-decoration:none;
  transition:all var(--t);
}
.shared-viewer-actions a:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.35); }

.shared-viewer-meta {
  display:flex; gap:14px; padding:8px 24px;
  font-size:10.5px; color:var(--txt3); font-family:var(--font-mono);
  border-bottom:1px solid var(--border-soft); flex-shrink:0; flex-wrap:wrap;
}
.shared-viewer-scroll {
  flex:1; overflow-y:auto; padding:0;
}
.shared-viewer-loading, .shared-viewer-error {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:60px 20px; color:var(--txt2); font-size:13px; text-align:center;
  min-height:300px;
}
.shared-viewer-footer {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:14px 20px; flex-wrap:wrap;
  background:var(--bg-surface); border-top:1px solid var(--border);
  flex-shrink:0;
}
.sv-footer-brand { color:var(--accent); font-weight:600; text-decoration:none; font-family:var(--font-head); }
.sv-footer-tag   { font-size:11.5px; color:var(--txt3); }
.sv-footer-cta   { font-size:11.5px; color:var(--accent); text-decoration:none; font-weight:500; }
.sv-footer-cta:hover { text-decoration:underline; }

@media (max-width:640px) {
  .shared-viewer-topbar { padding:8px 12px; }
  .shared-viewer-badge  { display:none; }
  .focus-topbar  { padding:8px 12px; }
  .focus-controls .focus-width-sel { display:none; }
}

/* ── Shared-view comments (real-time, Supabase) ──────── */
.sc-fab {
  position:fixed; bottom:64px; right:20px; z-index:600;
  display:flex; align-items:center; gap:6px;
  background:var(--bg-raised); border:1px solid var(--border);
  color:var(--txt, #fff); font-size:13px; font-family:inherit;
  padding:9px 14px; border-radius:999px; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,0.3);
  transition:transform .15s ease, border-color .15s ease;
}
.sc-fab:hover { transform:translateY(-1px); border-color:var(--accent); }
.sc-fab-pulse { animation:scPulse .6s ease; }
@keyframes scPulse { 0% { transform:scale(1); } 40% { transform:scale(1.12); } 100% { transform:scale(1); } }
#scFabCount {
  background:var(--accent); color:var(--on-accent, #000);
  font-size:11px; font-weight:700; min-width:18px; height:18px;
  border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px;
}
.sc-panel {
  position:fixed; top:0; right:0; bottom:0; width:min(360px, 92vw); z-index:650;
  display:flex; flex-direction:column;
  background:var(--bg-surface); border-left:1px solid var(--border);
  box-shadow:-12px 0 40px rgba(0,0,0,0.3);
  animation:scSlideIn .2s ease;
}
@keyframes scSlideIn { from { transform:translateX(30px); opacity:0; } to { transform:none; opacity:1; } }
.sc-panel.hidden { display:none; }
.sc-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border-soft);
}
.sc-title { font-size:14px; font-weight:600; color:var(--txt, #fff); }
.sc-presence { font-size:11px; font-weight:400; color:var(--accent); margin-left:4px; }
.sc-close {
  background:none; border:none; color:var(--txt2); cursor:pointer;
  font-size:14px; padding:4px 6px; border-radius:6px;
}
.sc-close:hover { background:var(--bg-hover); color:var(--txt, #fff); }
.sc-list { flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:12px; }
.sc-empty { font-size:12.5px; color:var(--txt2); padding:16px 4px; text-align:center; }
.sc-item {
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:10px; padding:10px 12px;
}
.sc-item-new { animation:scItemIn .35s ease; }
@keyframes scItemIn { from { transform:translateY(6px); opacity:0; } to { transform:none; opacity:1; } }
.sc-item-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
.sc-item-author { font-size:12px; font-weight:600; color:var(--accent); }
.sc-item-time   { font-size:10.5px; color:var(--txt3); }
.sc-item-quote {
  margin:6px 0; padding:5px 9px; font-size:11.5px; color:var(--txt2);
  border-left:2px solid var(--accent); background:var(--bg-input);
  border-radius:0 6px 6px 0; cursor:pointer;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.sc-item-quote:hover { color:var(--txt, #fff); }
.sc-item-body { font-size:13px; line-height:1.5; color:var(--txt, #eee); white-space:pre-wrap; word-break:break-word; }
.sc-composer {
  padding:12px 16px 16px; border-top:1px solid var(--border-soft);
  display:flex; flex-direction:column; gap:8px;
}
.sc-quote {
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; color:var(--txt2);
  border-left:2px solid var(--accent); background:var(--bg-input);
  padding:5px 9px; border-radius:0 6px 6px 0;
}
.sc-quote.hidden { display:none; }
.sc-quote-text { flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sc-quote-x { background:none; border:none; color:var(--txt3); cursor:pointer; font-size:11px; }
.sc-quote-x:hover { color:var(--txt, #fff); }
.sc-name, .sc-body {
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; color:var(--txt, #fff); font-family:inherit;
  font-size:13px; padding:8px 10px; outline:none; resize:vertical;
}
.sc-name:focus, .sc-body:focus { border-color:var(--border-focus); }
.sc-name { max-width:170px; font-size:12px; padding:6px 10px; }
.sc-post {
  align-self:flex-end;
  background:var(--accent); color:var(--on-accent, #000);
  border:none; border-radius:8px; padding:7px 16px;
  font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer;
}
.sc-post:hover { background:var(--accent-soft); }
.sc-post:disabled { opacity:.6; cursor:default; }
.sc-mini {
  position:absolute; z-index:700;
  background:var(--bg-raised); border:1px solid var(--accent);
  color:var(--txt, #fff); font-size:12px; font-family:inherit;
  padding:6px 12px; border-radius:999px; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}
.sc-mini:hover { background:var(--accent); color:var(--on-accent, #000); }
::highlight(sc-flash) { background-color:rgba(var(--accent-rgb, 230,176,85), .35); }
@media (max-width:640px) { .sc-fab { bottom:76px; right:14px; } }

/* ── Version history ─────────────────────────────────── */
.vh-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:4vh 16px;
}
.vh-modal {
  width:min(920px, 100%); height:min(640px, 92vh);
  display:flex; flex-direction:column;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 24px 80px rgba(0,0,0,0.45); overflow:hidden;
}
.vh-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border-soft);
}
.vh-title { font-size:14px; font-weight:600; color:var(--txt); }
.vh-file  { font-weight:400; color:var(--txt2); margin-left:8px; font-size:12.5px; }
.vh-close {
  background:none; border:none; color:var(--txt2); cursor:pointer;
  font-size:14px; padding:4px 6px; border-radius:6px;
}
.vh-close:hover { background:var(--bg-hover); color:var(--txt); }
.vh-body { flex:1; display:flex; min-height:0; }
.vh-list {
  width:220px; flex-shrink:0; overflow-y:auto;
  border-right:1px solid var(--border-soft); padding:8px;
}
.vh-item {
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left;
  background:none; border:1px solid transparent; border-radius:8px;
  padding:9px 11px; cursor:pointer; font-family:inherit;
}
.vh-item:hover  { background:var(--bg-hover); }
.vh-item.active { background:var(--accent-dim); border-color:var(--accent); }
.vh-item-time { font-size:12.5px; font-weight:600; color:var(--txt); }
.vh-item-meta { font-size:10.5px; color:var(--txt3); }
.vh-empty { font-size:12px; color:var(--txt2); padding:18px 10px; text-align:center; line-height:1.6; }
.vh-view { flex:1; display:flex; flex-direction:column; min-width:0; }
.vh-view-tabs {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; border-bottom:1px solid var(--border-soft);
}
.vh-tab {
  background:none; border:none; color:var(--txt2); font-family:inherit;
  font-size:12px; padding:5px 10px; border-radius:6px; cursor:pointer;
}
.vh-tab:hover { color:var(--txt); background:var(--bg-hover); }
.vh-tab.active { color:var(--accent); background:var(--accent-dim); font-weight:600; }
.vh-spacer { flex:1; }
.vh-restore {
  background:var(--accent); color:var(--on-accent, #000);
  border:none; border-radius:8px; padding:6px 14px;
  font-size:12px; font-weight:600; font-family:inherit; cursor:pointer;
}
.vh-restore:hover:not(:disabled) { background:var(--accent-soft); }
.vh-restore:disabled { opacity:.45; cursor:default; }
.vh-pane {
  flex:1; overflow:auto; padding:12px 16px;
  font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; line-height:1.55;
}
.vh-line { white-space:pre-wrap; word-break:break-word; padding:1px 8px; border-radius:4px; display:flex; gap:8px; }
.vh-sign { flex-shrink:0; width:10px; opacity:.7; user-select:none; }
.vh-line.add { background:rgba(16,185,129,0.13); color:var(--txt); }
.vh-line.add .vh-sign { color:#10B981; }
.vh-line.del { background:rgba(244,63,94,0.12); color:var(--txt2); text-decoration:line-through; text-decoration-color:rgba(244,63,94,.5); }
.vh-line.del .vh-sign { color:#F43F5E; text-decoration:none; }
.vh-line.ctx { color:var(--txt2); }
.vh-diff-skip { text-align:center; color:var(--txt3); padding:4px 0; font-size:11px; letter-spacing:2px; }
.vh-diff-note { color:var(--txt2); font-size:12.5px; padding:14px 6px; font-family:var(--font-body, inherit); }
.vh-pre { margin:0; white-space:pre-wrap; word-break:break-word; color:var(--txt); }
@media (max-width:640px) {
  .vh-body { flex-direction:column; }
  .vh-list { width:100%; max-height:160px; border-right:none; border-bottom:1px solid var(--border-soft); }
}

/* ── Voice notes (mic button in editor toolbar) ──────── */
.voice-tool { position:relative; display:inline-flex; align-items:center; gap:5px; }
.voice-timer { font-size:10.5px; font-variant-numeric:tabular-nums; color:var(--accent); }
.voice-tool.voice-recording {
  color:#F43F5E !important; border-color:rgba(244,63,94,.5) !important;
  background:rgba(244,63,94,.10) !important;
}
.voice-tool.voice-recording svg { animation:pulse 1.1s ease-in-out infinite; }
.voice-tool.voice-recording .voice-timer { color:#F43F5E; }
/* starting = waiting on the mic permission prompt; click cancels */
.voice-tool.voice-starting { opacity:.7; }
.voice-tool.voice-starting svg { animation:pulse .6s ease-in-out infinite; }
/* busy stays clickable — a click aborts a slow transcription */
.voice-tool.voice-busy { opacity:.6; }
.voice-tool.voice-busy svg { animation:vhSpin 1s linear infinite; }
@keyframes vhSpin { to { transform:rotate(360deg); } }
/* live interim ghost — shows what's being heard before it's final */
.voice-live { display:none; font-size:10.5px; color:var(--txt3); font-style:italic;
  max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  align-self:center; }
.voice-live.on { display:inline-block; }

/* ── Blocked remote image (ROADMAP §0.3) ─────────────────
   Shown in place of a remote <img> on any surface rendering content the user
   did not author. Deliberately calm, not alarming: this is the normal state
   for AI output and shared notes, not an incident. */
.img-blocked {
  display:flex; align-items:center; gap:10px;
  margin:12px 0; padding:10px 12px;
  border:1px dashed var(--border); border-radius:10px;
  background:var(--bg-raised); max-width:100%;
}
.img-blocked-ico { font-size:16px; color:var(--txt3); flex-shrink:0; line-height:1; }
.img-blocked-txt { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.img-blocked-title { font-size:12px; color:var(--txt2); font-weight:500; }
.img-blocked-host {
  font-size:10.5px; color:var(--txt3); font-family:var(--font-mono);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.img-blocked-btn {
  flex-shrink:0; padding:5px 11px; font-size:11.5px; font-weight:500;
  color:var(--txt2); background:var(--bg); border:1px solid var(--border);
  border-radius:7px; cursor:pointer; transition:all var(--t);
}
.img-blocked-btn:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); background:var(--bg-hover); }

/* Explains the gate on an imported note, and offers the way out. */
.trust-banner {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 18px; padding:9px 12px;
  font-size:12px; line-height:1.5; color:var(--txt2);
  background:var(--bg-raised); border:1px solid var(--border); border-radius:9px;
}
.trust-banner-ico { color:var(--accent); flex-shrink:0; }
.trust-banner-txt { flex:1; min-width:180px; }
.trust-banner-txt a { color:var(--txt3); text-decoration:underline; text-underline-offset:2px; }
.trust-banner-btn {
  flex-shrink:0; padding:4px 10px; font-size:11.5px;
  color:var(--txt2); background:var(--bg); border:1px solid var(--border);
  border-radius:7px; cursor:pointer; transition:all var(--t);
}
.trust-banner-btn:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }

/* ── Transclusion (embedded notes) ![[Note]] ─────────── */
.markdown-body .transclusion {
  position:relative; margin:16px 0; padding:14px 16px 6px 18px;
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; background:var(--bg-raised);
}
.markdown-body .transclusion::before {
  content:'⧉ ' attr(data-src);
  display:block; margin:-4px 0 8px; font-size:10.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--accent); font-weight:600; opacity:.85;
}
.markdown-body .transclusion > :first-of-type { margin-top:0; }
.markdown-body .transclusion.transclusion-missing {
  border-left-color:var(--txt3); background:transparent;
}
.markdown-body .transclusion.transclusion-missing::before { content:''; margin:0; }

/* ── Knowledge graph ─────────────────────────────────── */
.graph-overlay {
  position:fixed; inset:0; z-index:950; display:flex; flex-direction:column;
  background:var(--bg); animation:vhFade .18s ease;
}
@keyframes vhFade { from { opacity:0; } to { opacity:1; } }
.graph-topbar {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}
.graph-title { font-size:14px; font-weight:600; color:var(--txt); }
.graph-search {
  flex:1; max-width:340px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; color:var(--txt); font-family:inherit; font-size:13px;
  padding:7px 12px; outline:none;
}
.graph-search:focus { border-color:var(--border-focus); }
.graph-stats { font-size:11.5px; color:var(--txt3); font-variant-numeric:tabular-nums; margin-left:auto; }
.graph-reset, .graph-close {
  background:var(--bg-raised); border:1px solid var(--border); color:var(--txt2);
  border-radius:8px; padding:6px 12px; font-size:12px; font-family:inherit; cursor:pointer;
}
.graph-reset:hover, .graph-close:hover { color:var(--txt); border-color:var(--accent); }
.graph-canvas { flex:1; width:100%; min-height:0; display:block; cursor:grab; touch-action:none; }
.graph-empty {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--txt2); font-size:13px; text-align:center; pointer-events:none;
}
.graph-empty code { background:var(--bg-raised); padding:2px 6px; border-radius:4px; color:var(--accent); }
@media (max-width:640px) {
  .graph-stats { display:none; }
  .graph-search { max-width:none; }
}

/* ════════════════════════════════════════════════════
   AI CHAT PANEL
   ════════════════════════════════════════════════════ */
.preview-with-chat {
  flex:1; display:flex; min-height:0; overflow:hidden;
  position:relative;   /* anchor for the floating scroll-to-top button */
}
.preview-scroll {
  flex:1; overflow-y:auto; padding:28px 28px 64px;
  display:flex; flex-direction:column; align-items:flex-start;
  transition:flex var(--t);
}
.ai-chat-panel {
  width:340px; flex-shrink:0;
  display:flex; flex-direction:column;
  background:var(--bg-surface); border-left:1px solid var(--border);
  min-height:0; animation:slideRight 180ms var(--ease);
}
.ai-chat-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.ai-chat-title {
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--txt2);
}
.ai-chat-title svg { color:var(--accent); }
.ai-chat-header-actions { display:flex; gap:4px; }
.ai-chat-clear, .ai-chat-close {
  background:none; border:none; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px; color:var(--txt3); cursor:pointer;
  font-size:13px; transition:all var(--t);
}
.ai-chat-clear:hover { background:var(--bg-hover); color:var(--accent); }
.ai-chat-close:hover { background:var(--bg-hover); color:var(--danger); }

.ai-chat-messages {
  flex:1; overflow-y:auto; padding:12px; display:flex;
  flex-direction:column; gap:10px; min-height:0;
}
.ai-chat-welcome {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:20px 10px; text-align:center; color:var(--txt2);
  font-size:12.5px;
}
.ai-chat-welcome-icon { font-size:24px; color:var(--accent); }
.ai-chat-starters { display:flex; flex-direction:column; gap:5px; width:100%; margin-top:4px; }
.ai-chat-starter {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:7px 10px;
  font-size:11.5px; color:var(--txt2); cursor:pointer;
  text-align:left; transition:all var(--t);
}
.ai-chat-starter:hover { background:var(--bg-hover); color:var(--accent); border-color:rgba(var(--accent-rgb),.3); }

.ai-bubble {
  max-width:100%; display:flex; flex-direction:column; gap:3px;
}
.ai-bubble.user  { align-items:flex-end; }
.ai-bubble.ai    { align-items:flex-start; }
.ai-bubble-text {
  padding:9px 12px; border-radius:var(--r-md);
  font-size:12.5px; line-height:1.6;
  max-width:95%;
}
.ai-bubble.user .ai-bubble-text {
  background:var(--accent); color:var(--on-accent);
  border-radius:var(--r-md) var(--r-md) 4px var(--r-md);
}
.ai-bubble.ai .ai-bubble-text {
  background:var(--bg-raised); color:var(--txt);
  border-radius:var(--r-md) var(--r-md) var(--r-md) 4px;
  border:1px solid var(--border);
}
.ai-bubble.ai .ai-bubble-text p    { margin-bottom:.5em; }
.ai-bubble.ai .ai-bubble-text p:last-child { margin-bottom:0; }
.ai-bubble.ai .ai-bubble-text code { font-size:.8em; }
.ai-bubble-thinking {
  display:flex; gap:3px; align-items:center; padding:10px 12px;
  background:var(--bg-raised); border-radius:var(--r-md); border:1px solid var(--border);
}
.ai-thinking-dots { display:flex; gap:3px; }
.ai-thinking-dots span {
  width:5px; height:5px; border-radius:50%;
  background:var(--accent); animation:dotBounce 1s infinite;
}
.ai-thinking-dots span:nth-child(2) { animation-delay:.15s; }
.ai-thinking-dots span:nth-child(3) { animation-delay:.3s; }
@keyframes dotBounce {
  0%,80%,100% { transform:scale(.7); opacity:.5; }
  40%         { transform:scale(1);   opacity:1; }
}
.ai-bubble.ai.thinking { opacity:.75; }

.ai-chat-input-area {
  padding:10px 12px; border-top:1px solid var(--border); flex-shrink:0;
}
.ai-chat-input-wrap {
  display:flex; align-items:flex-end; gap:6px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); padding:7px 7px 7px 12px;
  transition:border-color var(--t);
}
.ai-chat-input-wrap:focus-within { border-color:var(--border-focus); }
.ai-chat-input {
  flex:1; background:transparent; border:none; outline:none;
  font-family:var(--font); font-size:12.5px; color:var(--txt);
  resize:none; line-height:1.5; max-height:80px; overflow-y:auto;
}
.ai-chat-input::placeholder { color:var(--txt3); }
.ai-chat-send {
  width:28px; height:28px; border-radius:6px; flex-shrink:0;
  background:var(--accent); border:none; color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:filter var(--t);
}
.ai-chat-send:hover { filter:brightness(1.12); }
.ai-chat-send:disabled { opacity:.4; cursor:not-allowed; filter:none; }
.ai-chat-provider {
  font-size:9.5px; color:var(--txt3); text-align:right;
  margin-top:5px; font-family:var(--font-mono);
}

/* ════════════════════════════════════════════════════
   COMMAND PALETTE
   ════════════════════════════════════════════════════ */
#commandPalette { align-items:flex-start; padding-top:80px; }
.cp-modal {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-xl); width:100%; max-width:560px;
  box-shadow:var(--sh-lg); overflow:hidden;
  animation:modalIn 140ms var(--ease);
}
.cp-input-wrap {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border-soft);
}
.cp-search-icon { color:var(--txt3); flex-shrink:0; }
.cp-input {
  flex:1; background:transparent; border:none; outline:none;
  font-family:var(--font); font-size:14.5px; color:var(--txt);
}
.cp-input::placeholder { color:var(--txt3); }
.cp-esc {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:4px; padding:2px 7px; font-size:10px;
  color:var(--txt3); font-family:var(--font-mono);
}
.cp-list {
  max-height:340px; overflow-y:auto;
  padding:6px;
}
.cp-item {
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--t);
}
.cp-item.selected, .cp-item:hover { background:var(--bg-active); }
.cp-item.selected { outline:1px solid rgba(var(--accent-rgb),.25); }
.cp-icon   { font-size:13px; flex-shrink:0; width:18px; text-align:center; font-family:var(--font-mono); color:var(--txt3); }
.cp-label  { flex:1; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-label mark { background:none; color:var(--accent); font-weight:600; }
.cp-meta   { font-size:10.5px; color:var(--txt3); font-family:var(--font-mono); white-space:nowrap; }
.cp-shortcut { font-size:10px; color:var(--txt3); font-family:var(--font-mono); background:var(--bg-raised); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }
.cp-type   { font-size:9px; color:var(--txt3); background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:3px; padding:1px 5px; text-transform:uppercase; letter-spacing:.06em; }
.cp-empty  { padding:24px; text-align:center; color:var(--txt3); font-size:13px; }
.cp-footer {
  display:flex; gap:14px; padding:8px 16px;
  border-top:1px solid var(--border-soft);
  font-size:10.5px; color:var(--txt3);
}
.cp-footer kbd {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:3px; padding:1px 5px; font-family:var(--font-mono);
  font-size:9.5px;
}

/* ════════════════════════════════════════════════════
   AI WRITING TOOLS (floating over editor)
   ════════════════════════════════════════════════════ */
.writing-tools-bar {
  position:absolute; bottom:70px; left:50%;
  transform:translateX(-50%);
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  z-index:90; width:min(520px, 94vw);
  display:flex; flex-direction:column; gap:0;
  overflow:hidden;
  animation:modalIn 160ms var(--ease);
}
.wt-header {
  display:flex; align-items:center; gap:7px;
  padding:9px 14px 7px;
  font-size:11px; font-weight:600; color:var(--txt3);
  letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--border-soft);
}
.wt-tools {
  display:flex; flex-wrap:wrap; gap:4px; padding:10px 12px;
}
.wt-tool-btn {
  display:flex; align-items:center; gap:4px;
  padding:5px 10px; border-radius:20px;
  background:var(--bg-raised); border:1px solid var(--border);
  font-size:11.5px; color:var(--txt2); cursor:pointer;
  transition:all var(--t); white-space:nowrap;
}
.wt-tool-btn:hover, .wt-tool-btn.active {
  background:var(--accent-dim); color:var(--accent);
  border-color:rgba(var(--accent-rgb),.35);
}
.wt-translate {
  display:flex; gap:7px; padding:0 12px 10px;
}
.wt-lang-input {
  flex:1; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--txt); font-family:var(--font);
  font-size:12.5px; padding:7px 10px; outline:none;
  transition:border-color var(--t);
}
.wt-lang-input:focus { border-color:var(--border-focus); }
.wt-go {
  padding:7px 14px; background:var(--accent); color:var(--on-accent);
  border:none; border-radius:var(--r-sm); font-weight:600;
  font-size:12px; cursor:pointer; transition:filter var(--t); flex-shrink:0;
}
.wt-go:hover { filter:brightness(1.1); }
.wt-result { padding:0 12px 10px; display:flex; flex-direction:column; gap:7px; }
.wt-result-header { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.wt-result-label  { font-size:11px; font-weight:600; color:var(--txt2); flex:1; }
.wt-accept {
  padding:4px 10px; background:var(--success); color:#fff;
  border:none; border-radius:var(--r-sm); font-size:11px;
  font-weight:600; cursor:pointer; transition:filter var(--t);
}
.wt-accept:hover { filter:brightness(1.1); }
.wt-discard {
  padding:4px 10px; background:transparent; color:var(--txt3);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:11px; cursor:pointer; transition:all var(--t);
}
.wt-discard:hover { background:var(--bg-hover); color:var(--txt); }
.wt-result-text {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 12px;
  font-size:12.5px; line-height:1.65; max-height:200px;
  overflow-y:auto; color:var(--txt); white-space:pre-wrap;
  font-family:var(--font-mono);
}
.wt-close {
  position:absolute; top:8px; right:10px;
  background:none; border:none; color:var(--txt3);
  font-size:12px; cursor:pointer; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px; transition:all var(--t);
}
.wt-close:hover { background:var(--bg-hover); color:var(--txt); }

/* ════════════════════════════════════════════════════
   AI SUMMARY MODAL
   ════════════════════════════════════════════════════ */
.ai-summary-tags {
  display:flex; flex-wrap:wrap; gap:5px; margin-bottom:4px;
}
.ai-tag {
  background:var(--accent-dim); color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:20px; font-size:10.5px; font-weight:500;
  padding:2px 9px;
}
.ai-tag.category {
  background:rgba(124,111,225,.12); color:var(--accent2);
  border-color:rgba(124,111,225,.25);
}
.ai-summary-body {
  background:var(--bg-raised); border-radius:var(--r-md);
  border:1px solid var(--border); padding:14px 16px;
  max-height:340px; overflow-y:auto;
  font-size:13.5px; line-height:1.7; color:var(--txt);
}
.ai-summary-body h2 { font-size:13px; margin-top:14px; margin-bottom:6px; padding:0; border:none; }
.ai-summary-body h2:first-child { margin-top:0; }
.ai-summary-body ul  { padding-left:1.3em; margin-bottom:.8em; }
.ai-summary-body li  { margin-bottom:.25em; font-size:13px; }
.ai-thinking {
  display:flex; align-items:center; gap:10px;
  color:var(--txt2); font-size:12.5px;
}

/* ════════════════════════════════════════════════════
   AI SETTINGS MODAL
   ════════════════════════════════════════════════════ */
.ai-providers-list { display:flex; flex-direction:column; gap:8px; }
.ai-provider-row {
  display:flex; align-items:center; gap:10px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 12px;
}
.ai-provider-info { min-width:90px; flex-shrink:0; }
.ai-provider-name { font-size:12.5px; font-weight:600; color:var(--txt); display:block; }
.ai-provider-hint { font-size:10px; color:var(--txt3); }
.ai-provider-hint a { color:var(--accent); text-decoration:none; }
.ai-provider-hint a:hover { text-decoration:underline; }
.ai-key-wrap {
  flex:1; display:flex; align-items:center;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden; min-width:0;
}
.ai-key-inp {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--txt); font-family:var(--font-mono); font-size:11.5px;
  padding:7px 10px; min-width:0;
}
.ai-key-eye {
  background:none; border:none; padding:0 8px; font-size:13px;
  color:var(--txt3); cursor:pointer; transition:color var(--t);
}
.ai-key-eye:hover { color:var(--txt); }
.ai-provider-status {
  font-size:10px; font-family:var(--font-mono);
  padding:2px 7px; border-radius:20px; flex-shrink:0;
  white-space:nowrap;
}
.ai-provider-status.ok       { background:rgba(46,204,122,.1); color:var(--success); }
.ai-provider-status.missing  { background:var(--bg-hover); color:var(--txt3); }
.ai-provider-status.cooling  { background:rgba(240,82,82,.08); color:var(--danger); }

/* AI gear button in sidebar footer */
.ai-settings-btn {
  background:none; border:none; color:var(--txt3);
  font-size:16px; padding:4px 6px; border-radius:var(--r-sm);
  cursor:pointer; transition:all var(--t); line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.ai-settings-btn:hover { color:var(--accent); background:var(--bg-hover); }

/* Document tags bar */
.doc-tags-bar {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  padding:5px 28px; border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}
.doc-tags-bar .ai-tag { cursor:default; }

@media (max-width:640px) {
  .ai-chat-panel { width:100%; position:fixed; inset:var(--topbar-h) 0 var(--bottom-nav-h); z-index:60; border-left:none; border-top:1px solid var(--border); }
  .writing-tools-bar { bottom:calc(var(--bottom-nav-h) + 8px); }
  .preview-scroll { padding:14px 14px 80px; }
  .doc-tags-bar   { padding:5px 14px; }
}

/* ════════════════════════════════════════════════════
   TEMPLATES MODAL
   ════════════════════════════════════════════════════ */
.template-categories {
  display:flex; gap:5px; flex-wrap:wrap; margin-bottom:4px;
}
.template-cat-btn {
  padding:4px 12px; border-radius:20px; border:1px solid var(--border);
  background:var(--bg-raised); color:var(--txt2); font-size:11.5px;
  cursor:pointer; transition:all var(--t); font-family:var(--font);
}
.template-cat-btn.active, .template-cat-btn:hover {
  background:var(--accent-dim); color:var(--accent);
  border-color:rgba(var(--accent-rgb),.35);
}
.template-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(155px, 1fr));
  gap:8px; max-height:320px; overflow-y:auto;
}
.template-card {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); padding:14px 12px;
  cursor:pointer; transition:all var(--t);
  display:flex; flex-direction:column; gap:5px;
}
.template-card:hover {
  border-color:var(--accent); background:var(--accent-dim);
  transform:translateY(-1px); box-shadow:var(--sh-sm);
}
.template-card-icon { font-size:22px; line-height:1; }
.template-card-name { font-size:12.5px; font-weight:600; color:var(--txt); }
.template-card-desc { font-size:11px; color:var(--txt3); line-height:1.4; }

/* ════════════════════════════════════════════════════
   IMPORT FROM URL
   ════════════════════════════════════════════════════ */
.import-url-examples {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:-4px;
}
.import-url-hint { font-size:11px; color:var(--txt3); }
.import-url-examples code {
  font-family:var(--font-mono); font-size:10.5px;
  background:var(--bg-raised); padding:1px 5px;
  border-radius:4px; color:var(--txt2);
  border:1px solid var(--border);
}

/* ════════════════════════════════════════════════════
   IN-DOCUMENT SEARCH BAR
   ════════════════════════════════════════════════════ */
.find-bar {
  position:absolute; top:calc(var(--topbar-h) + 2px); right:12px;
  z-index:70; animation:slideRight 160ms var(--ease);
}
.find-bar-inner {
  display:flex; align-items:center; gap:6px;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:7px 10px;
  box-shadow:var(--sh-md);
}
.find-input {
  background:none; border:none; outline:none;
  font-family:var(--font); font-size:13px; color:var(--txt);
  width:200px;
}
.find-input::placeholder { color:var(--txt3); }
.find-count { font-size:11px; color:var(--txt3); font-family:var(--font-mono); white-space:nowrap; min-width:50px; }
.find-nav {
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:4px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:11px; color:var(--txt2);
  transition:all var(--t);
}
.find-nav:hover { background:var(--bg-hover); color:var(--accent); }
.find-nav:disabled { opacity:.3; cursor:not-allowed; }
.find-case-label {
  display:flex; align-items:center; gap:3px;
  font-size:11px; font-family:var(--font-mono); color:var(--txt3);
  cursor:pointer; white-space:nowrap; padding:2px 6px;
  border-radius:4px; border:1px solid var(--border);
  transition:all var(--t);
}
.find-case-label:has(input:checked) { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); background:var(--accent-dim); }
.find-case-label input { display:none; }
.find-close {
  background:none; border:none; color:var(--txt3); cursor:pointer;
  font-size:12px; width:20px; height:20px; display:flex;
  align-items:center; justify-content:center; border-radius:3px;
  transition:all var(--t);
}
.find-close:hover { color:var(--txt); background:var(--bg-hover); }

/* Search highlight marks in preview */
.find-highlight {
  background:rgba(var(--accent-rgb),.35); border-radius:2px;
  outline:1px solid rgba(var(--accent-rgb),.6);
}
.find-highlight.current {
  background:rgba(var(--accent-rgb),.65);
  outline:2px solid var(--accent);
}

/* ════════════════════════════════════════════════════
   UNSAVED INDICATOR
   ════════════════════════════════════════════════════ */
.unsaved-badge {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:200;
  display:flex; align-items:center; gap:8px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:20px; padding:6px 12px 6px 10px;
  font-size:12px; color:var(--txt2); box-shadow:var(--sh-md);
  animation:toastIn 200ms var(--ease);
}
.unsaved-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
  animation:pulse 2s infinite;
}
.unsaved-dot-split {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); display:inline-block;
  animation:pulse 2s infinite; vertical-align:middle; margin-left:4px;
}
.unsaved-badge button {
  background:var(--accent); color:var(--on-accent); border:none;
  border-radius:12px; padding:3px 10px;
  font-size:11px; font-weight:600; cursor:pointer;
  transition:filter var(--t);
}
.unsaved-badge button:hover { filter:brightness(1.1); }
@media (max-width:640px) {
  .unsaved-badge { bottom:calc(var(--bottom-nav-h) + 10px); }
}

/* ════════════════════════════════════════════════════
   KEYBOARD HELP MODAL
   ════════════════════════════════════════════════════ */
.help-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.help-section { display:flex; flex-direction:column; gap:5px; }
.help-section-title {
  font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--txt3); margin-bottom:3px;
}
.help-row {
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--txt2);
}
.help-row kbd {
  font-family:var(--font-mono); font-size:10px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:4px;
  padding:2px 6px; color:var(--txt); white-space:nowrap;
  min-width:48px; text-align:center; flex-shrink:0;
}
@media (max-width:480px) { .help-grid { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════
   PWA INSTALL BANNER
   ════════════════════════════════════════════════════ */
.pwa-banner {
  position:fixed; bottom:20px; right:16px; z-index:300;
  display:flex; align-items:center; gap:10px;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:12px 14px;
  box-shadow:var(--sh-lg); max-width:300px;
  animation:toastIn 300ms var(--ease);
}
.pwa-banner-icon { font-size:24px; color:var(--accent); flex-shrink:0; }
.pwa-banner-text { flex:1; min-width:0; }
.pwa-banner-text strong { display:block; font-size:13px; color:var(--txt); }
.pwa-banner-text span   { font-size:11px; color:var(--txt2); }
.pwa-dismiss {
  background:none; border:none; color:var(--txt3);
  font-size:13px; cursor:pointer; padding:2px; line-height:1;
  transition:color var(--t); flex-shrink:0;
}
.pwa-dismiss:hover { color:var(--txt); }
@media (max-width:640px) {
  .pwa-banner { bottom:calc(var(--bottom-nav-h) + 10px); right:10px; left:10px; max-width:100%; }
}

/* ════════════════════════════════════════════════════
   SPLIT PANE EDITOR/PREVIEW
   ════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   SPLIT PANE — desktop side-by-side, mobile stacked
   ════════════════════════════════════════════════════ */
.split-wrap {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
  /* fill the entire content-area height */
  height: 100%;
}

.split-editor-pane,
.split-preview-pane {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.split-pane-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt3);
  padding: 5px 14px 4px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

/* Editor area inside split fills remaining height */
.split-editor-pane .editor-area {
  flex: 1;
  height: 0;          /* forces CM host to respect flex, not expand body */
  min-height: 0;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-mono);
  outline: none;
  overflow: hidden;
}
.split-editor-pane .editor-area .cm-scroller { padding: 14px 18px 40px; }

.split-preview-pane {
  border-left: 1px solid var(--border);
}

.split-preview-scroll {
  flex: 1;
  height: 0;          /* same trick: prevents overflow expanding parent */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#splitPreviewBody {
  padding: 20px 24px 48px;
  max-width: 100%;
  /* cap line length so it's readable even at wide split ratio */
  box-sizing: border-box;
}

/* Divider — 5px wide with extended hit target */
.split-divider {
  width: 5px;
  flex-shrink: 0;
  background: var(--border);
  cursor: col-resize;
  transition: background 150ms;
  position: relative;
  z-index: 10;
  /* invisible extended hit area */
  margin: 0 -4px;
  padding: 0 4px;
  box-sizing: content-box;
}
.split-divider:hover,
.split-divider.dragging {
  background: var(--accent);
}

.btn-pill.split-active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb),.35);
}

/* ── Mobile: stacked vertically ─────────────────────── */
@media (max-width: 640px) {
  .split-wrap {
    flex-direction: column;
  }

  .split-editor-pane,
  .split-preview-pane {
    flex: 1 1 50% !important;
    width: 100% !important;
    min-height: 0;
    max-height: 50dvh;
  }

  .split-editor-pane {
    border-bottom: 2px solid var(--border);
    border-right: none;
  }

  .split-preview-pane {
    border-left: none;
    border-top: none;
  }

  /* Horizontal divider on mobile */
  .split-divider {
    width: 100% !important;
    height: 5px !important;
    margin: -2px 0 !important;
    padding: 2px 0 !important;
    cursor: row-resize;
  }

  .split-preview-scroll {
    padding-bottom: calc(var(--bottom-nav-h) + 20px + env(safe-area-inset-bottom));
  }

  #splitPreviewBody {
    padding: 14px 14px 48px;
  }
}

/* Starred file indicator — gold, and always visible (sizing comes
   from .file-item-controls button). The higher-specificity selector
   beats the controls' default `display:none`. */
.file-item-controls .file-item-star.starred { display:flex; }
.file-item-star.starred     { color:#F59E0B; }
.file-item-star.starred svg { fill:#F59E0B; }
.file-item-star:hover       { background:rgba(245,158,11,.14); color:#F59E0B; }

/* Section labels in file list (Recent / Starred / Files) */
.file-list-section {
  font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt3);
  padding:12px 8px 5px; margin-top:2px;
}
.file-list-section:first-child { margin-top:0; padding-top:4px; }

/* Auto-save status in editor topbar */
.autosave-status {
  font-size:10px; color:var(--txt3); font-family:var(--font-mono);
  display:flex; align-items:center; gap:4px;
}
.autosave-status.saved   { color:var(--success); }
.autosave-status.saving  { color:var(--accent); }
.autosave-status.unsaved { color:var(--txt3); }

/* ════════════════════════════════════════════════════
   AUTH GATE
   ════════════════════════════════════════════════════ */
.auth-gate {
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.auth-gate-inner {
  max-width:380px; width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:14px; text-align:center;
}
.auth-gate-logo {
  font-size:52px; color:var(--accent);
  font-family:var(--font-head); line-height:1;
  margin-bottom:4px;
}
.auth-gate-title {
  font-family:var(--font-head); font-size:28px; font-weight:800;
  letter-spacing:-0.5px; color:var(--txt);
}
.auth-gate-sub {
  font-size:14px; color:var(--txt2); line-height:1.6;
  margin-top:-4px;
}
.auth-google-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:13px 20px;
  background:#fff; color:#1A1917;
  border:1.5px solid #E0E0E0; border-radius:var(--r-md);
  font-family:var(--font); font-size:14px; font-weight:500;
  cursor:pointer; transition:all var(--t);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.auth-google-btn:hover { box-shadow:0 2px 12px rgba(0,0,0,.14); transform:translateY(-1px); }
[data-theme="dark"] .auth-google-btn { background:#2A2C3A; color:var(--txt); border-color:var(--border); }

.auth-divider {
  width:100%; display:flex; align-items:center; gap:12px;
  color:var(--txt3); font-size:12px;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.auth-skip-btn {
  width:100%; padding:11px 20px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--txt2);
  font-family:var(--font); font-size:13px; cursor:pointer;
  transition:all var(--t); display:flex; flex-direction:column;
  align-items:center; gap:3px;
}
.auth-skip-btn:hover { background:var(--bg-hover); color:var(--txt); }
.auth-skip-note { font-size:11px; color:var(--txt3); }
.auth-legal {
  font-size:11px; color:var(--txt3); line-height:1.6;
}
.auth-legal a { color:var(--accent); text-decoration:none; }

/* ── User avatar in sidebar ─────────────────────────── */
.user-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--bg-raised); border:1.5px solid var(--border);
  overflow:hidden; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:all var(--t); padding:0; flex-shrink:0;
}
.user-avatar:hover { border-color:var(--accent); }
.user-avatar-img    { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.user-avatar-initials {
  font-size:11px; font-weight:700; color:var(--txt2);
  font-family:var(--font-head);
}

/* ── Account dropdown ───────────────────────────────── */
.account-menu {
  position:fixed; top:52px; right:12px; z-index:300;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); width:240px;
  box-shadow:var(--sh-lg);
  animation:modalIn 160ms var(--ease);
  overflow:hidden;
}
.account-menu-user {
  display:flex; align-items:center; gap:10px;
  padding:14px 14px 10px;
}
.account-menu-photo {
  width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.account-menu-info { min-width:0; }
.account-menu-name  { display:block; font-size:13px; font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-menu-email { font-size:11px; color:var(--txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.account-menu-divider { height:1px; background:var(--border-soft); margin:2px 0; }
.account-menu-stats { padding:8px 14px; font-size:11.5px; color:var(--txt2); font-family:var(--font-mono); }
.account-menu-item {
  display:flex; align-items:center; gap:9px;
  width:100%; padding:10px 14px;
  background:none; border:none;
  font-family:var(--font); font-size:13px; color:var(--txt2);
  cursor:pointer; transition:all var(--t); text-align:left;
}
.account-menu-item:hover { background:var(--bg-hover); color:var(--txt); }
.account-menu-item.danger:hover { background:rgba(240,82,82,.08); color:var(--danger); }

/* ── Cloud modal auth additions ──────────────────────── */
.cloud-user-row {
  display:flex; align-items:center; gap:10px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 12px;
}
.cloud-user-photo {
  width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.cloud-user-row div { flex:1; min-width:0; }
.cloud-user-row strong { display:block; font-size:13px; color:var(--txt); }
.cloud-user-row span  { font-size:11px; color:var(--txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.cloud-step-section, .cloud-signin-section { display:flex; flex-direction:column; gap:10px; }
.setup-rules {
  font-family:var(--font-mono); font-size:11px; color:var(--txt2);
  background:var(--bg-input); border-radius:4px;
  padding:10px 12px; overflow-x:auto; white-space:pre;
  margin-top:6px; line-height:1.6;
}

/* ── Topbar hamburger: highlight when sidebar is collapsed ── */
body.sidebar-collapsed .topbar .btn-icon:first-child {
  color: var(--accent);
  background: var(--accent-dim);
}
body.sidebar-collapsed .topbar .btn-icon:first-child:hover {
  background: rgba(var(--accent-rgb),.22);
}

/* ════════════════════════════════════════════════════
   FILE LIST — DRAG TO REORDER
   ════════════════════════════════════════════════════ */

/* Drag handle — grip dots, surfaced on hover; manual sort only */
.drag-handle {
  flex-shrink: 0;
  width: 14px; height: 24px; margin-left: -3px;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt3);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--t), color var(--t);
  user-select: none;
  -webkit-user-select: none;
}
.file-item:hover .drag-handle  { opacity: .5; }
.drag-handle:hover             { opacity: 1; color: var(--txt2); }
.drag-handle:active            { cursor: grabbing; }
/* When a non-manual sort is active, hide drag affordance (dragging would be
   immediately undone by the sort comparator). */
body.sort-non-manual .drag-handle { display: none; }
body.sort-non-manual .file-item[draggable="true"] { cursor: pointer; }

/* The item being dragged — lifts off the surface and dims slightly. */
.file-item.dragging {
  opacity: 0.9;
  transform: scale(0.97);
  box-shadow: var(--sh-lg, 0 10px 30px rgba(0,0,0,.4));
  background: var(--bg-active);
  border-color: rgba(var(--accent-rgb), .4);
}
/* The ghost copy following cursor */
.file-item.drag-ghost {
  opacity: 0.5;
  background: var(--bg-active);
}

/* Drop position indicators — an animated accent insertion bar with end caps. */
.file-item.drag-over-above,
.file-item.drag-over-below { box-shadow: none; }
.file-item.drag-over-above::after,
.file-item.drag-over-below::after {
  content: ''; position: absolute; left: 6px; right: 6px; height: 2px;
  background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .8);
  z-index: 3;
  transform-origin: left center;
  animation: insertBar .18s var(--ease) both;
}
.file-item.drag-over-above::after { top: -2px; }
.file-item.drag-over-below::after { bottom: -2px; }
@keyframes insertBar {
  from { transform: scaleX(.2); opacity: 0; }
  to   { transform: scaleX(1);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .file-item.dragging { transform: none; }
  .file-item.drag-over-above::after, .file-item.drag-over-below::after { animation: none; }
}

/* Touch devices: no hover, so keep affordances visible */
@media (hover: none) {
  .drag-handle { opacity: 0.4; }
  .file-item-controls button { display: flex; }
  .folder-menu-btn { opacity: 1; }
}

/* Auth button spinner */
.spin-icon { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════
   SHARE ANALYTICS DASHBOARD
   ════════════════════════════════════════════════════ */
.modal-analytics {
  max-width: 620px;
  width: 100%;
}
.modal-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.al-refresh-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 5px 10px;
  font-size: 11.5px; color: var(--txt2); cursor: pointer;
  transition: all var(--t);
}
.al-refresh-btn:hover { background: var(--bg-hover); color: var(--accent); }

/* Summary cards */
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 480px) {
  .analytics-summary { grid-template-columns: repeat(2, 1fr); }
}
.analytics-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  text-align: center;
}
.analytics-card-val {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.analytics-card-label {
  font-size: 10.5px;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.analytics-top {
  font-size: 12px;
  color: var(--txt2);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 6px;
}

/* Links table */
.analytics-links-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.analytics-links-header {
  display: grid;
  grid-template-columns: 1fr 52px 52px 70px 80px;
  gap: 6px;
  padding: 5px 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt3);
  border-bottom: 1px solid var(--border-soft);
}
.analytics-link-row {
  display: grid;
  grid-template-columns: 1fr 52px 52px 70px 80px;
  gap: 6px;
  align-items: center;
  padding: 9px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: background var(--t);
}
.analytics-link-row:hover    { background: var(--bg-hover); }
.analytics-link-row.inactive { opacity: .55; }

.al-doc   { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.al-title { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-meta  { font-size: 10px; color: var(--txt3); }

/* View-limit progress bar */
.al-bar-wrap {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.al-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 300ms;
}

.al-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  text-align: center;
}

/* Status badges */
.al-status { display: flex; align-items: center; justify-content: center; }
.al-status-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
}
.al-status-badge.status-active  { background: rgba(46,204,122,.12); color: var(--success); }
.al-status-badge.status-revoked { background: rgba(240,82,82,.1);   color: var(--danger); }
.al-status-badge.status-expired { background: var(--bg-hover);      color: var(--txt3); }

/* Row action buttons */
.al-actions { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.al-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border);
  border-radius: 5px; cursor: pointer; color: var(--txt2);
  transition: all var(--t);
}
.al-btn:hover        { background: var(--bg-hover); color: var(--accent); }
.al-btn.danger:hover { background: rgba(240,82,82,.1); color: var(--danger); border-color: rgba(240,82,82,.3); }

.analytics-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 24px; color: var(--txt2); font-size: 13px;
}
.analytics-lock {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 22px 16px; text-align: center;
  background: var(--bg-raised); border: 1px dashed var(--border);
  border-radius: var(--r-md); margin-top: 8px;
}
.analytics-lock-icon { font-size: 26px; opacity: .7; }
.analytics-lock-title { font-size: 13px; font-weight: 600; color: var(--txt); }
.analytics-lock-sub   { font-size: 12px; color: var(--txt3); margin-bottom: 6px; }

/* Mobile analytics */
@media (max-width: 640px) {
  .analytics-links-header { display: none; }
  .analytics-link-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px;
  }
  .al-doc    { grid-column: 1; grid-row: 1; }
  .al-actions{ grid-column: 2; grid-row: 1 / span 2; }
  .al-stat, .al-status { display: none; }
  .al-meta::after {
    content: attr(data-views);
  }
}
/* ═══════════════════════════════════════════════════════
   SUBSCRIPTION / MONETIZATION UI
   ═══════════════════════════════════════════════════════ */

/* ── Sidebar usage indicator ── */
.usage-indicator {
  padding: 8px 12px 4px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--txt3); display: flex; flex-direction: column; gap: 4px;
}
.usage-indicator.hidden { display: none; }
.usage-bar-wrap {
  height: 4px; border-radius: 2px; background: var(--bg-raised);
  overflow: hidden; position: relative;
}
.usage-bar-fill {
  height: 100%; width: 0%; background: var(--accent);
  transition: width .3s ease, background-color .3s;
}
.usage-bar-fill.warn   { background: #E89B3A; }
.usage-bar-fill.danger { background: #E04444; }
.usage-bar-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; letter-spacing: .02em;
}
.usage-bar-label .upgrade-link {
  color: var(--accent); cursor: pointer; font-weight: 600; text-decoration: none;
}
.usage-bar-label .upgrade-link:hover { text-decoration: underline; }

/* Pro / Trial badges */
.usage-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.usage-badge.pro {
  background: linear-gradient(135deg,#E6B055,#E89B3A);
  color: var(--on-accent);
}
.usage-badge.trial {
  background: rgba(232,155,58,0.15); color: #E89B3A;
  border: 1px solid rgba(232,155,58,0.3);
}
.usage-badge.trial.urgent { animation: pulse-urgent 1.4s ease-in-out infinite; }
@keyframes pulse-urgent { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Topbar Pro pill */
.topbar-pro-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 10px; padding: 2px 8px;
  background: linear-gradient(135deg,#E6B055,#E89B3A);
  color: var(--on-accent); border-radius: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  cursor: pointer;
}
.topbar-pro-pill.hidden { display: none; }

.topbar-upgrade-pill {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 10px; padding: 2px 9px;
  background: transparent;
  border: 1.5px solid rgba(var(--accent-rgb), 0.6);
  color: var(--accent); border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: background .15s, border-color .15s;
  animation: upgrade-pulse 3s ease-in-out infinite;
}
.topbar-upgrade-pill:hover {
  background: rgba(var(--accent-rgb), 0.12); border-color: var(--accent);
}
.topbar-upgrade-pill.hidden { display: none; }
@keyframes upgrade-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15); }
}

/* ── Pro badges + lock overlays on tools / templates ── */
.pro-badge {
  display: inline-block;
  font-size: 9px; background: var(--accent); color: var(--on-accent);
  padding: 1px 5px; border-radius: 3px; font-weight: 700;
  letter-spacing: .04em; line-height: 1;
}
.pro-badge.corner {
  position: absolute; top: 6px; right: 6px;
}
.locked {
  position: relative; opacity: 0.85; cursor: pointer;
}
.locked::after {
  content: '🔒'; position: absolute; top: 4px; right: 4px;
  font-size: 11px; opacity: 0.85;
}
.wt-tool-btn.locked { filter: grayscale(0.4); }

/* ── Sidebar upgrade CTA ── */
.sidebar-upgrade-cta {
  margin: 8px 10px 4px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.06));
  border: 1px solid rgba(var(--accent-rgb),0.3);
  padding: 10px 12px;
}
.sidebar-upgrade-cta.hidden { display: none; }
.suc-inner {
  display: flex; align-items: center; gap: 8px;
}
.suc-icon {
  font-size: 18px; color: var(--accent); flex-shrink: 0; line-height: 1;
}
.suc-text {
  flex: 1; display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
}
.suc-text strong {
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  font-family: 'Syne', sans-serif;
}
.suc-text span {
  font-size: 10.5px; color: var(--txt2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.suc-btn {
  flex-shrink: 0;
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: 8px; padding: 5px 10px;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.suc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.35);
}

/* ── Upgrade modal ── */
.upgrade-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px; backdrop-filter: blur(4px);
}
.upgrade-modal-overlay.hidden { display: none; }
.upgrade-modal {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 14px; max-width: 540px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: upgrade-in .25s ease-out;
}
@keyframes upgrade-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.upgrade-header {
  padding: 28px 28px 20px; text-align: center; border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse at top, rgba(var(--accent-rgb),0.08), transparent);
}
.upgrade-icon {
  font-size: 38px; line-height: 1; margin-bottom: 10px;
}
.upgrade-title {
  font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700;
  margin: 0 0 6px;
}
.upgrade-desc { font-size: 13px; color: var(--txt2); margin: 0 0 14px; line-height: 1.5; }
.upgrade-usage-bar {
  margin-top: 12px; padding: 10px 14px; background: var(--bg-raised);
  border-radius: 8px; font-size: 12px; color: var(--txt2);
}
.upgrade-usage-bar .uu-track { height: 6px; background: var(--bg-surface); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.upgrade-usage-bar .uu-fill { height: 100%; background: #E04444; }

.upgrade-pricing-toggle {
  display: flex; gap: 6px; padding: 4px;
  background: var(--bg-raised); border-radius: 10px;
  margin: 18px auto 14px; width: fit-content;
}
.upgrade-pricing-toggle button {
  background: transparent; border: 0; color: var(--txt2);
  padding: 6px 16px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.upgrade-pricing-toggle button.active {
  background: var(--bg-surface); color: var(--txt); box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.upgrade-save-pill {
  font-size: 9px; background: rgba(46,160,67,0.2); color: #4ec76e;
  padding: 1px 5px; border-radius: 3px; margin-left: 4px;
}

.upgrade-plan-card {
  padding: 18px 28px; text-align: center;
}
.upgrade-price {
  font-family: 'Syne', sans-serif; font-size: 40px; font-weight: 800; line-height: 1;
}
.upgrade-price .currency { font-size: 18px; vertical-align: top; }
.upgrade-price .period { font-size: 13px; color: var(--txt3); font-weight: 400; margin-left: 4px; }
.upgrade-yearly-note { font-size: 11px; color: var(--txt3); margin-top: 4px; }

.upgrade-feature-grid {
  padding: 0 28px 18px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 18px; font-size: 12.5px; color: var(--txt2);
}
.upgrade-feature-grid li { list-style: none; padding-left: 18px; position: relative; line-height: 1.5; }
.upgrade-feature-grid li::before {
  content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}

.upgrade-cta-wrap { padding: 0 28px 24px; }
.upgrade-cta-primary {
  width: 100%; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg,#E6B055,#E89B3A);
  color: var(--on-accent); font-weight: 700; font-size: 14px; letter-spacing: .02em;
  transition: transform .15s, box-shadow .15s;
}
.upgrade-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(230,176,85,0.3); }
.upgrade-cta-primary:disabled { opacity: 0.6; cursor: wait; }
.upgrade-cta-primary.loading { position: relative; color: transparent; }
.upgrade-cta-primary.loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(0,0,0,.35); border-top-color: rgba(0,0,0,.85);
  border-radius: 50%; animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.upgrade-secondary {
  display: block; width: 100%; text-align: center; margin-top: 10px;
  background: transparent; border: 0; color: var(--txt3); font-size: 12px;
  cursor: pointer; padding: 6px;
}
.upgrade-secondary:hover { color: var(--txt2); text-decoration: underline; }
.upgrade-test-banner {
  background: rgba(var(--accent-rgb),0.15); color: #E89B3A;
  padding: 6px 14px; font-size: 11px; text-align: center; font-weight: 600;
  letter-spacing: .04em;
}
.upgrade-user-email {
  font-size: 11px; color: var(--txt3); text-align: center; margin-top: 4px;
}

@media (max-width: 640px) {
  .upgrade-modal-overlay { align-items: flex-end; padding: 0; }
  .upgrade-modal { border-radius: 18px 18px 0 0; max-width: 100%; max-height: 88vh; }
  .upgrade-feature-grid { grid-template-columns: 1fr; }
}

/* ── Paywall in shared viewer ── */
.paywall-fade {
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  pointer-events: none;
}
.paywall-card {
  position: sticky; bottom: 0;
  margin: -120px auto 0; max-width: 720px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 28px; box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
  text-align: center;
}
.paywall-card.hidden { display: none; }
.paywall-card-label {
  display: inline-block; font-size: 10px; letter-spacing: .14em;
  color: var(--txt3); text-transform: uppercase; margin-bottom: 6px;
}
.paywall-card-title {
  font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700;
  margin: 0 0 8px;
}
.paywall-card-desc { font-size: 13px; color: var(--txt2); margin: 0 0 18px; }
.paywall-pricing { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.paywall-pricing button {
  flex: 0 0 140px; background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--txt); padding: 12px; border-radius: 10px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.paywall-pricing button.active {
  border-color: var(--accent); background: rgba(var(--accent-rgb),0.08);
}
.paywall-pricing .pp-price { display: block; font-size: 18px; font-family: 'Syne', sans-serif; }
.paywall-pricing .pp-period { display: block; font-size: 10px; color: var(--txt3); margin-top: 2px; }
.paywall-cta {
  width: 100%; padding: 12px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg,#E6B055,#E89B3A); color: var(--on-accent);
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.paywall-signin-link {
  display: block; margin-top: 10px; font-size: 12px;
  color: var(--txt3); text-decoration: none;
}
.paywall-signin-link:hover { color: var(--txt); text-decoration: underline; }

/* ── Admin panel ── */
.admin-modal { max-width: 900px; width: 100%; max-height: 90vh; }
.admin-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 4px;
  overflow-x: auto;
}
.admin-tab {
  background: transparent; border: 0; color: var(--txt2);
  padding: 10px 16px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-panel { padding: 16px 4px; max-height: 60vh; overflow-y: auto; }
.admin-panel.hidden { display: none; }
.admin-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.admin-row-label { color: var(--txt2); }
.admin-row-input {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; color: var(--txt); font-size: 12px; width: 100%;
}
.admin-row-save {
  background: var(--accent); color: var(--on-accent); border: 0;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 700;
}
.admin-row-save:disabled { opacity: 0.5; }
.admin-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--txt3); text-transform: uppercase;
  padding: 18px 12px 6px;
}
.admin-stat-card {
  background: var(--bg-raised); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.admin-stat-num {
  font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700;
}
.admin-stat-label { font-size: 11px; color: var(--txt3); letter-spacing: .04em; text-transform: uppercase; }
.admin-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; padding: 10px 12px;
}

/* Account menu additions */
.account-menu-item.upgrade {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.12), transparent);
  color: var(--accent); font-weight: 600;
}
.account-menu-item.admin { color: var(--txt2); }
.account-menu-trial-banner {
  font-size: 11px; padding: 8px 12px; color: #E89B3A;
  background: rgba(232,155,58,0.08); border-top: 1px solid var(--border);
}
.account-menu-pro-banner {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.10), transparent);
}
.account-menu-pro-banner .amp-head { display:flex; align-items:center; gap:8px; }
.account-menu-pro-banner .amp-badge {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent);
}
.account-menu-pro-banner .amp-billing {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--txt2); padding: 1px 7px; border-radius: 20px;
  background: var(--bg-active); border: 1px solid var(--border-soft);
}
.account-menu-pro-banner .amp-sub { font-size: 11px; color: var(--txt2); margin-top: 3px; }
.account-menu-item#accountMenuManageSub { color: var(--txt); font-weight: 500; }

/* ════════════════════════════════════════════════════
   ONBOARDING TOUR
   ════════════════════════════════════════════════════ */
.onboarding-overlay {
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(6px);
  animation:fadeIn 200ms var(--ease);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.onboarding-card {
  position:relative;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  width:100%; max-width:420px;
  padding:32px 28px 22px;
  text-align:center;
  animation:modalIn 220ms var(--ease);
}
.onboarding-skip {
  position:absolute; top:12px; right:12px;
  background:none; border:none; color:var(--txt3);
  width:28px; height:28px; border-radius:50%;
  font-size:14px; cursor:pointer; transition:all var(--t);
  display:flex; align-items:center; justify-content:center;
}
.onboarding-skip:hover { background:var(--bg-hover); color:var(--txt); }
.onboarding-step { display:flex; flex-direction:column; gap:12px; align-items:center; }
.onboarding-icon {
  width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px;
  background:var(--accent-dim); color:var(--accent);
  margin-bottom:6px;
}
.onboarding-title {
  font-family:var(--font-head); font-size:22px; font-weight:800;
  letter-spacing:-.4px; color:var(--txt);
}
.onboarding-desc {
  font-size:13.5px; line-height:1.65; color:var(--txt2);
  max-width:340px;
}
.onboarding-desc code {
  font-family:var(--font-mono); font-size:.88em;
  background:var(--bg-raised); padding:1px 5px; border-radius:4px;
  border:1px solid var(--border-soft);
}
.onboarding-dots {
  display:flex; gap:6px; justify-content:center;
  margin:20px 0 14px;
}
.onboarding-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--border); transition:all var(--t);
}
.onboarding-dot.active { background:var(--accent); width:22px; border-radius:4px; }
.onboarding-actions {
  display:flex; justify-content:space-between; gap:10px;
}
.onboarding-actions button { min-width:88px; }
.onboarding-actions .btn-sm-ghost.invisible { visibility:hidden; }
@media (max-width:640px) {
  .onboarding-card { padding:26px 20px 18px; }
  .onboarding-title { font-size:19px; }
  .onboarding-icon { width:56px; height:56px; font-size:28px; }
}

/* ════════════════════════════════════════════════════════
   RAG — Semantic search palette, vault chat, admin
   ════════════════════════════════════════════════════════ */

/* — Palette modal — */
.rag-palette { position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.rag-palette.hidden { display:none; }
.rag-palette-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); }
.rag-palette-modal {
  position:relative; width:min(680px, 92vw); max-height:70vh;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column; overflow:hidden;
}
.rag-palette-input-wrap {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border-soft);
}
.rag-palette-icon { color:var(--accent); font-size:16px; }
.rag-palette-input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text, #fff); font-size:15px; font-family:inherit;
}
.rag-palette-hint {
  font-size:10px; padding:2px 6px; border:1px solid var(--border);
  border-radius:4px; color:var(--text-dim, rgba(255,255,255,0.5));
}
.rag-palette-results { flex:1; overflow-y:auto; padding:6px; }
.rag-palette-empty {
  padding:32px 16px; text-align:center;
  color:var(--text-dim, rgba(255,255,255,0.5)); font-size:13px;
}
.rag-result {
  padding:10px 12px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; margin:2px 0;
}
.rag-result:hover, .rag-result.active {
  background:var(--bg-hover); border-color:var(--border);
}
.rag-result-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.rag-result-name { font-size:13px; font-weight:600; color:var(--text, #fff); }
.rag-result-score {
  font-size:10px; color:var(--accent); font-variant-numeric:tabular-nums;
  background:var(--accent-dim); padding:2px 6px; border-radius:4px;
}
.rag-result-heading { font-size:11px; color:var(--accent); margin-top:2px; }
.rag-result-snippet {
  margin-top:4px; font-size:12px; line-height:1.5;
  color:var(--text-dim, rgba(255,255,255,0.65));
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rag-palette-footer {
  display:flex; justify-content:space-between; font-size:10.5px;
  padding:8px 14px; border-top:1px solid var(--border-soft);
  color:var(--text-dim, rgba(255,255,255,0.45));
}

/* — Vault-mode toggle in AI chat header — */
.rag-mode-toggle {
  margin-left:auto; display:inline-flex;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; padding:2px; gap:1px;
}
.rag-mode-btn {
  background:transparent; border:none; color:var(--text-dim, rgba(255,255,255,0.6));
  font-size:10.5px; padding:4px 10px; border-radius:6px; cursor:pointer;
  font-family:inherit; transition:all .15s;
}
.rag-mode-btn:hover { color:var(--text, #fff); }
.rag-mode-btn.active {
  background:var(--accent-dim); color:var(--accent); font-weight:600;
}
.ai-chat-panel.vault-mode .ai-chat-title svg { color:var(--accent); }

/* — Source chips below assistant bubble — */
.rag-sources {
  margin-top:10px; padding-top:8px;
  border-top:1px dashed var(--border);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.rag-sources-label {
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim, rgba(255,255,255,0.45)); margin-right:4px;
}
.rag-source-chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--text, #fff); font-size:11px; padding:3px 8px;
  border-radius:12px; cursor:pointer; font-family:inherit;
  max-width:200px;
}
.rag-source-chip:hover { background:var(--bg-hover); border-color:var(--accent); }
.rag-source-num { color:var(--accent); font-weight:600; }
.rag-source-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rag-thinking { color:var(--text-dim, rgba(255,255,255,0.55)); font-style:italic; }

/* — Provenance: ungrounded answer + injection-shaped source (ROADMAP §0.3) — */
.rag-sources-none {
  font-size:11px; color:var(--txt2); gap:6px; line-height:1.45;
}
.rag-nosrc-ico { color:var(--warn, #E0A030); flex-shrink:0; }
.rag-source-chip.flagged { border-color:rgba(224,160,48,.5); }
.rag-source-chip.flagged .rag-source-num { color:var(--warn, #E0A030); }
.rag-inject-warn {
  flex-basis:100%; margin-top:6px; padding:7px 9px;
  font-size:10.5px; line-height:1.5; color:var(--txt2);
  background:rgba(224,160,48,.08); border:1px solid rgba(224,160,48,.28);
  border-radius:8px;
}

/* — Admin (reindex / clear in AI panel) — */
.rag-admin {
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border-soft);
}
.rag-admin-title {
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim, rgba(255,255,255,0.5)); margin-bottom:8px;
}
.rag-admin-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.rag-admin-stat {
  flex:1; font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--text-dim, rgba(255,255,255,0.65));
}
.rag-admin-progress {
  margin-top:8px; padding:8px 10px; border-radius:6px;
  background:var(--bg-input); font-size:11px;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.rag-admin-progress.hidden { display:none; }
.btn-small {
  background:var(--accent-dim); color:var(--accent);
  border:1px solid var(--accent); padding:4px 10px; border-radius:6px;
  font-size:11px; cursor:pointer; font-family:inherit; font-weight:500;
}
.btn-small:hover { background:var(--accent); color:var(--bg); }
.btn-small.btn-ghost {
  background:transparent; color:var(--text-dim, rgba(255,255,255,0.6));
  border-color:var(--border);
}
.btn-small.btn-ghost:hover { color:var(--text, #fff); background:var(--bg-hover); }

/* Non-blocking progress pill (model download / background indexing) */
.rag-status-pill {
  position:fixed; bottom:18px; right:18px; z-index:9998;
  display:flex; align-items:center; gap:7px;
  background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text, #fff); font-size:12px; font-variant-numeric:tabular-nums;
  padding:7px 13px; border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,0.25);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.rag-status-pill.show { opacity:1; transform:none; }
.rag-status-pill::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--accent); animation:pulse 1.2s ease-in-out infinite;
}
@media (max-width:640px) { .rag-status-pill { bottom:72px; } }

/* ══════════════════════════════════════════════════════
   UI ENHANCEMENTS — checkboxes, reader typo, resize,
   recents, heading fold, editor autocomplete
   ══════════════════════════════════════════════════════ */

/* Interactive task checkboxes */
.markdown-body .task-checkbox { cursor:pointer; accent-color:var(--accent); width:15px; height:15px; vertical-align:-2px; }
.markdown-body .task-list-item { transition:opacity var(--t); }
.markdown-body .task-list-item:has(.task-checkbox:checked) { opacity:.62; }
.markdown-body .task-list-item:has(.task-checkbox:checked) { text-decoration:line-through; text-decoration-color:var(--txt3); }

/* Reader typography popover */
.reader-typo-popover {
  position:fixed; z-index:60; min-width:200px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:0 10px 40px rgba(0,0,0,.4); padding:12px;
  display:flex; flex-direction:column; gap:12px;
}
.reader-typo-popover .rt-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.reader-typo-popover .rt-label { font-size:12.5px; color:var(--txt2); font-weight:600; }
.reader-typo-popover .rt-btns { display:flex; align-items:center; gap:6px; }
.reader-typo-popover .rt-btn {
  width:30px; height:28px; border-radius:var(--r-sm); cursor:pointer;
  background:var(--bg-active); border:1px solid var(--border); color:var(--txt);
  font-size:12px; transition:all var(--t);
}
.reader-typo-popover .rt-btn:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }
.reader-typo-popover .rt-val { font-size:12px; color:var(--txt2); min-width:20px; text-align:center; font-family:var(--font-mono); }
.reader-typo-popover .rt-select {
  background:var(--bg-active); border:1px solid var(--border); color:var(--txt);
  border-radius:var(--r-sm); padding:5px 8px; font-size:12px; cursor:pointer; outline:none;
}
/* Width control: stacked slider + presets */
.reader-typo-popover .rt-sep { height:1px; background:var(--border); margin:2px 0; }
.reader-typo-popover .rt-col { flex-direction:column; align-items:stretch; gap:8px; }
.reader-typo-popover .rt-row-inline { width:100%; }
.reader-typo-popover .rt-range {
  width:100%; accent-color:var(--accent); cursor:pointer; margin:0;
}
.reader-typo-popover .rt-range:disabled { opacity:.4; cursor:not-allowed; }
.reader-typo-popover .rt-presets { display:flex; gap:4px; }
.reader-typo-popover .rt-preset {
  flex:1; padding:5px 0; font-size:11px; border-radius:var(--r-sm);
  background:var(--bg-active); border:1px solid var(--border); color:var(--txt2);
  cursor:pointer; transition:all var(--t);
}
.reader-typo-popover .rt-preset:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }
.reader-typo-popover .rt-preset.active {
  color:var(--accent); border-color:var(--accent); background:var(--accent-dim);
}

/* Content-width resizer (drag the right edge of the reading column) */
.content-resizer {
  position:absolute; top:0; bottom:0; width:14px;
  transform:translateX(-50%);
  cursor:col-resize; z-index:20;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--t);
}
.preview-with-chat:hover .content-resizer { opacity:.6; }
.content-resizer:hover, body.resizing-content .content-resizer { opacity:1; }
.content-resizer::before {
  content:''; width:4px; height:44px; border-radius:4px;
  background:var(--border-strong, var(--border)); transition:background var(--t), height var(--t);
}
.content-resizer:hover::before, body.resizing-content .content-resizer::before {
  background:var(--accent); height:72px;
}
.content-resizer.hidden { display:none; }
body.resizing-content { cursor:col-resize; user-select:none; }
@media (max-width:640px){ .content-resizer { display:none !important; } }

/* Sidebar resizer */
.sidebar-resizer {
  position:absolute; top:0; right:0; width:9px; height:100%;
  cursor:col-resize; z-index:40; background:transparent;
  transition:background var(--t);
}
.sidebar-resizer:hover, body.resizing-sidebar .sidebar-resizer { background:rgba(var(--accent-rgb),.35); }
body.resizing-sidebar { cursor:col-resize; user-select:none; }
@media (max-width:640px){ .sidebar-resizer { display:none; } }

/* Recent files (compact jump list) */
.recent-item {
  display:flex; align-items:center; gap:8px; padding:6px 10px; cursor:pointer;
  border-radius:var(--r-md); border:1px solid transparent; transition:background var(--t);
}
.recent-item:hover { background:var(--bg-hover); border-color:var(--border-soft); }
.recent-item.active { background:var(--bg-active); }
.recent-icon { color:var(--txt3); font-size:11px; flex-shrink:0; }
.recent-name {
  font-size:12.5px; color:var(--txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.recent-item:hover .recent-name, .recent-item.active .recent-name { color:var(--txt); }

/* Heading fold (collapsible sections) */
.markdown-body :is(h1,h2,h3,h4).foldable { cursor:pointer; position:relative; }
.markdown-body :is(h1,h2,h3,h4).foldable::after {
  content:'▾'; font-size:.6em; color:var(--txt3); margin-left:.5em;
  opacity:0; transition:opacity var(--t), transform var(--t); display:inline-block; vertical-align:middle;
}
.markdown-body :is(h1,h2,h3,h4).foldable:hover::after { opacity:.7; }
.markdown-body :is(h1,h2,h3,h4).foldable.folded::after { opacity:.9; transform:rotate(-90deg); }

/* Editor autocomplete ([[ + / ) — refine basicSetup defaults */
.cm-tooltip.cm-tooltip-autocomplete > ul { font-family:var(--font, system-ui); max-height:280px; }
.cm-tooltip.cm-tooltip-autocomplete > ul > li {
  padding:6px 12px; display:flex; align-items:center; gap:8px; font-size:13px;
}
.cm-tooltip-autocomplete ul li[aria-selected] { background:var(--accent-dim) !important; color:var(--txt) !important; }
.cm-completionLabel { color:var(--txt); }
.cm-completionDetail { color:var(--txt3); font-style:normal; margin-left:auto; font-size:11px; font-family:var(--font-mono); }
.cm-completionIcon { display:none; }

/* ══ Word / Excel import modal ════════════════════════════ */
.doc-import-modal { max-width: 720px; }
.doc-import-head {
  display:flex; align-items:center; gap:10px; margin:4px 0 12px;
}
.doc-import-name {
  font-weight:600; font-size:14px; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
}
.doc-import-type {
  font-size:10px; font-weight:700; letter-spacing:.06em;
  background:var(--accent); color:var(--on-accent);
  padding:2px 7px; border-radius:4px; flex-shrink:0;
}
.doc-import-sheets {
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.doc-import-sheets .dl-select { flex:1; max-width:280px; }
.doc-actions {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:8px; margin:14px 0;
}
.doc-action-btn {
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:11px 13px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg-raised); color:var(--txt); cursor:pointer; text-align:left;
  transition:border-color .12s var(--ease), background .12s var(--ease), transform .08s var(--ease);
}
.doc-action-btn:hover { border-color:var(--accent); transform:translateY(-1px); }
.doc-action-btn:active { transform:none; }
.doc-action-btn.primary { border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.08); }
.doc-action-btn .doc-action-ico { font-size:15px; line-height:1; margin-bottom:3px; }
.doc-action-btn > span:nth-child(2) { font-size:13px; font-weight:600; }
.doc-action-btn .doc-action-sub { font-size:10.5px; color:var(--txt3); font-weight:400; }

.doc-import-loading {
  display:flex; align-items:center; gap:10px; padding:10px 2px;
  font-size:12.5px; color:var(--txt2);
}
.spinner {
  width:15px; height:15px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--border); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.doc-import-preview {
  margin-top:8px; max-height:48vh; overflow:auto;
  border:1px solid var(--border); border-radius:10px;
  background:var(--bg); padding:18px 20px;
}
.doc-import-preview .docx-render { font-size:14px; line-height:1.65; color:var(--txt); }
.doc-import-preview .docx-render h1,
.doc-import-preview .docx-render h2,
.doc-import-preview .docx-render h3 { font-family:var(--font-display,inherit); margin:.8em 0 .4em; }
.doc-import-preview .docx-render p { margin:0 0 .7em; }
.doc-import-preview .docx-render img { max-width:100%; height:auto; }
.doc-import-preview .docx-render table,
.doc-import-preview .xls-render table {
  border-collapse:collapse; width:100%; font-size:12.5px; margin:.4em 0 1em;
}
.doc-import-preview .docx-render td, .doc-import-preview .docx-render th,
.doc-import-preview .xls-render td, .doc-import-preview .xls-render th {
  border:1px solid var(--border); padding:5px 9px; text-align:left;
  color:var(--txt); white-space:nowrap;
}
.doc-import-preview .xls-render th { background:var(--bg-raised); font-weight:600; }
.doc-import-preview .xls-sheet-title {
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); margin:14px 0 6px;
}
.doc-import-preview .xls-sheet-title:first-child { margin-top:0; }
@media (max-width:640px) {
  .doc-actions { grid-template-columns:repeat(2,1fr); }
}

/* ════════════════════════════════════════════════════
   CUSTOM TOOLTIPS
   A single floating element (#mvTooltip) is positioned by JS, which reads
   `data-tooltip` (or promotes a native `title`) on any hovered/focused control.
   ════════════════════════════════════════════════════ */
#mvTooltip {
  position: fixed; z-index: 2000; top: 0; left: 0;
  max-width: 260px;
  padding: 6px 9px;
  background: var(--bg-raised);
  color: var(--txt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  box-shadow: var(--sh-md, 0 4px 24px rgba(0,0,0,.55));
  font-family: var(--font); font-size: 12px; line-height: 1.35; font-weight: 500;
  white-space: normal; text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(2px) scale(.97);
  transition: opacity .12s var(--ease, ease), transform .12s var(--ease, ease);
}
#mvTooltip.show { opacity: 1; transform: translateY(0) scale(1); }
#mvTooltip .mv-tip-kbd {
  display: inline-block; margin-left: 5px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--bg-active); color: var(--txt2);
  font-family: var(--font-mono, monospace); font-size: 10.5px;
}
/* Small caret pointing toward the target. */
#mvTooltip::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  background: var(--bg-raised);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  left: var(--tip-caret, 50%); margin-left: -3.5px;
}
#mvTooltip[data-pos="top"]::after    { bottom: -4px; transform: rotate(45deg); }
#mvTooltip[data-pos="bottom"]::after { top: -4px;    transform: rotate(225deg); }
@media (hover: none) { #mvTooltip { display: none; } }

/* ══════════════════════════════════════════════════════════
   TABS — multiple open notes (strip between topbar & content)
   ══════════════════════════════════════════════════════════ */
.tab-strip {
  display:flex; align-items:flex-end; gap:2px;
  padding:6px 10px 0; flex:none;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-soft);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin; scrollbar-color:var(--txt3) transparent;
}
.tab-strip::-webkit-scrollbar { height:4px; }
.tab-strip::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 7px 6px 12px; max-width:190px; flex:none;
  font-size:12px; font-family:inherit; color:var(--txt2);
  background:transparent; border:1px solid transparent; border-bottom:none;
  border-radius:9px 9px 0 0; cursor:pointer; position:relative;
  transition:background .12s ease, color .12s ease;
}
.tab:hover { background:var(--bg-hover); color:var(--txt); }
.tab.active {
  background:var(--bg); color:var(--txt);
  border-color:var(--border-soft);
}
.tab.active::after {
  content:''; position:absolute; left:10px; right:10px; top:0;
  height:2px; border-radius:0 0 2px 2px; background:var(--accent);
}
.tab-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab-close {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:5px; flex:none;
  font-size:13px; line-height:1; color:var(--txt3); opacity:0;
  transition:opacity .12s ease, background .12s ease, color .12s ease;
}
.tab:hover .tab-close, .tab.active .tab-close { opacity:1; }
.tab-close:hover { background:var(--bg-active); color:var(--txt); }
@media (max-width:767px) { .tab-strip { display:none; } } /* bottom nav owns mobile */

/* ══════════════════════════════════════════════════════════
   READING THEMES — color the reading surface, not the chrome
   ══════════════════════════════════════════════════════════ */
.rt-themes { display:flex; flex-wrap:wrap; gap:6px; }
.rt-theme {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; font-size:11px; font-family:inherit; color:var(--txt2);
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:7px; cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}
.rt-theme:hover { color:var(--txt); }
.rt-theme.active { color:var(--txt); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-dim); }
.rt-sw { width:12px; height:12px; border-radius:4px; border:1px solid var(--border); flex:none; }
.rt-sw-auto     { background:linear-gradient(135deg,#14161E 50%,#FAF9F6 50%); }
.rt-sw-contrast { background:linear-gradient(135deg,#000 50%,#fff 50%); }

/* Each theme redefines the surface tokens INSIDE the reading pane only.
   Everything in the preview (text, borders, cards, quotes) inherits. */
body[data-reading-theme] .preview-scroll { background:var(--bg); color:var(--txt); }
body[data-reading-theme="sepia"] .preview-scroll {
  --bg:#F4ECD8; --bg-surface:#EFE5CC; --bg-raised:#EAE0C4; --bg-hover:#E8DCBC;
  --bg-input:#EFE5CC; --txt:#433422; --txt2:#5B4636; --txt3:#8A7A63;
  --border:rgba(67,52,34,0.16); --border-soft:rgba(67,52,34,0.09);
}
body[data-reading-theme="cream"] .preview-scroll {
  --bg:#FBF7EE; --bg-surface:#F6F1E4; --bg-raised:#F2ECDC; --bg-hover:#EFE8D4;
  --bg-input:#F6F1E4; --txt:#3C3A33; --txt2:#5F5B4E; --txt3:#94907F;
  --border:rgba(60,58,51,0.14); --border-soft:rgba(60,58,51,0.08);
}
body[data-reading-theme="contrast"] .preview-scroll {
  --bg:#FFFFFF; --bg-surface:#F4F4F4; --bg-raised:#EEEEEE; --bg-hover:#E8E8E8;
  --bg-input:#F4F4F4; --txt:#000000; --txt2:#1A1A1A; --txt3:#555555;
  --border:rgba(0,0,0,0.35); --border-soft:rgba(0,0,0,0.18);
}
body[data-reading-theme="amoled"] .preview-scroll {
  --bg:#000000; --bg-surface:#0A0A0A; --bg-raised:#101010; --bg-hover:#161616;
  --bg-input:#0A0A0A; --txt:#F2F5FA; --txt2:#A8ADbf; --txt3:#5A5F72;
  --border:rgba(255,255,255,0.14); --border-soft:rgba(255,244,230,0.08);
}

/* ══════════════════════════════════════════════════════════
   CODEMIRROR SEARCH PANEL (Cmd/Ctrl+F in the editor)
   basicSetup ships find/replace — style it like the app.
   ══════════════════════════════════════════════════════════ */
.cm-host .cm-panels {
  background:var(--bg-raised); color:var(--txt);
  border-color:var(--border);
}
.cm-host .cm-panels.cm-panels-top { border-bottom:1px solid var(--border); }
.cm-host .cm-panel.cm-search {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:8px 34px 8px 12px; font-size:12px; font-family:inherit;
}
.cm-host .cm-panel.cm-search input[type="checkbox"] { accent-color:var(--accent); margin:0 3px 0 6px; }
.cm-host .cm-panel.cm-search label { display:inline-flex; align-items:center; gap:4px; color:var(--txt2); font-size:11.5px; text-transform:capitalize; }
.cm-host .cm-textfield {
  background:var(--bg-input); color:var(--txt);
  border:1px solid var(--border); border-radius:7px;
  padding:5px 9px; font-size:12px; font-family:inherit; outline:none;
}
.cm-host .cm-textfield:focus { border-color:var(--border-focus); }
.cm-host .cm-button {
  background:var(--bg-input); color:var(--txt2);
  border:1px solid var(--border); border-radius:7px;
  padding:5px 10px; font-size:11.5px; font-family:inherit; cursor:pointer;
  background-image:none; text-transform:capitalize;
}
.cm-host .cm-button:hover { color:var(--txt); border-color:var(--border-focus); }
.cm-host .cm-panel.cm-search [name="close"] {
  position:absolute; top:6px; right:8px; width:22px; height:22px;
  border-radius:6px; border:none; background:transparent;
  color:var(--txt3); font-size:15px; cursor:pointer;
}
.cm-host .cm-panel.cm-search [name="close"]:hover { background:var(--bg-hover); color:var(--txt); }
.cm-host .cm-searchMatch { background:rgba(var(--accent-rgb),0.28); border-radius:2px; }
.cm-host .cm-searchMatch-selected { background:rgba(var(--accent-rgb),0.55); }

/* ══════════════════════════════════════════════════════════
   SEMANTIC INDEX NUDGE (one-time sidebar banner)
   ══════════════════════════════════════════════════════════ */
.sem-nudge {
  margin:8px 10px; padding:10px 12px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:10px; font-size:11.5px; color:var(--txt2); line-height:1.5;
}
.sem-nudge b { color:var(--txt); font-weight:600; }
.sem-nudge-actions { display:flex; gap:6px; margin-top:8px; }
.sem-nudge-build {
  padding:4px 10px; font-size:11px; font-family:inherit; font-weight:600;
  background:var(--accent); color:var(--on-accent);
  border:none; border-radius:6px; cursor:pointer;
}
.sem-nudge-build:hover { background:var(--accent-soft); }
.sem-nudge-dismiss {
  padding:4px 10px; font-size:11px; font-family:inherit;
  background:transparent; color:var(--txt3);
  border:1px solid var(--border); border-radius:6px; cursor:pointer;
}
.sem-nudge-dismiss:hover { color:var(--txt); }

/* ══════════════════════════════════════════════════════
   Hallmark · global interaction states (Phase 4)
   Accessible focus rings, disabled styling, text-input focus,
   and reduced-motion — layered globally via :where() (zero
   specificity) so any component rule can still override.
   ══════════════════════════════════════════════════════ */

/* Keyboard focus ring for actionable controls — visible, instant (never animated) */
:where(a, button, summary, [tabindex]:not([tabindex="-1"]), .palette-swatch, .swatch):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Suppress the legacy outline for pointer users; :focus-visible covers keyboard */
:where(a, button, summary):focus:not(:focus-visible) { outline:none; }

/* Text fields — accent border + soft ring on focus (matches .modal-input; no double outline) */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea, select
):focus-visible {
  outline:none;
  border-color:var(--border-focus);
  box-shadow:0 0 0 3px var(--accent-dim);
}

/* Disabled — consistent across buttons & fields */
:where(button, input, textarea, select):disabled,
[aria-disabled="true"] {
  opacity:.5; cursor:not-allowed;
}
:where(button):disabled { filter:grayscale(.15); box-shadow:none; transform:none; }

/* Respect reduced-motion: collapse spatial motion to near-instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   Flashcards / Spaced repetition  (js/flashcards.js)
   ══════════════════════════════════════════════════════════ */
.fc-overlay {
  position:fixed; inset:0; z-index:620;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,.55);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fcFade .18s ease;
}
.fc-overlay.fc-closing { animation:fcFadeOut .16s ease forwards; }
@keyframes fcFade    { from{opacity:0} to{opacity:1} }
@keyframes fcFadeOut { from{opacity:1} to{opacity:0} }

.fc-panel {
  width:100%; max-width:560px; max-height:86vh;
  display:flex; flex-direction:column;
  background:var(--bg-surface); color:var(--txt);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  overflow:hidden; animation:fcRise .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes fcRise { from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }

.fc-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border-soft);
}
.fc-title { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:650; letter-spacing:-.01em; }
.fc-logo  { color:var(--accent); font-size:15px; }
.fc-x, .fc-back {
  width:30px; height:30px; border-radius:8px; border:none;
  background:transparent; color:var(--txt3); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.fc-back { font-size:22px; line-height:1; margin-right:2px; }
.fc-x:hover, .fc-back:hover { background:var(--bg-hover); color:var(--txt); }

.fc-sub { display:flex; gap:16px; padding:12px 18px 4px; }
.fc-stat { font-size:12px; color:var(--txt3); }
.fc-stat b { color:var(--txt); font-size:14px; font-weight:650; margin-right:3px; }

.fc-decks-body, .fc-browse-body, .fc-gen-body { overflow-y:auto; padding:12px 18px 18px; }

.fc-review-all {
  width:100%; padding:12px; margin-bottom:14px;
  background:var(--accent); color:#1a1206; border:none; border-radius:11px;
  font-size:13.5px; font-weight:650; cursor:pointer; transition:.15s;
}
.fc-review-all:hover { background:var(--accent-soft); transform:translateY(-1px); }

.fc-deck-list { display:flex; flex-direction:column; gap:7px; }
.fc-deck-row {
  display:flex; align-items:center; gap:10px; padding:11px 12px;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:11px; cursor:pointer; transition:.15s;
}
.fc-deck-row:hover { background:var(--bg-hover); border-color:var(--border); }
.fc-deck-main { flex:1; min-width:0; }
.fc-deck-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fc-orphan { color:var(--txt3); font-weight:400; font-size:11px; }
.fc-deck-meta { display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.fc-chip {
  font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:20px;
  background:var(--bg-active); color:var(--txt2);
}
.fc-chip-due { background:var(--accent-dim); color:var(--accent); }
.fc-chip-new { background:rgba(var(--accent-rgb),.08); color:var(--accent2); }
.fc-deck-actions { display:flex; gap:6px; flex-shrink:0; }
.fc-mini {
  padding:6px 11px; font-size:11.5px; font-weight:600; cursor:pointer;
  background:var(--bg-active); color:var(--txt2);
  border:1px solid var(--border-soft); border-radius:8px; transition:.15s;
}
.fc-mini:hover:not(:disabled) { background:var(--bg-hover); color:var(--txt); }
.fc-mini:disabled { opacity:.4; cursor:default; }

.fc-empty { text-align:center; padding:34px 20px; color:var(--txt2); }
.fc-empty-ico { font-size:34px; color:var(--accent); opacity:.5; margin-bottom:10px; }
.fc-empty p { margin:4px 0; font-size:13px; }
.fc-empty-hint { color:var(--txt3); font-size:12px; }
.fc-empty-hint b { color:var(--txt2); }

.fc-foot {
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
  padding:12px 18px; border-top:1px solid var(--border-soft); background:var(--bg);
}
.fc-foot-note { margin-right:auto; font-size:11px; color:var(--txt3); }

/* ── Generate flow ── */
.fc-gen-from { font-size:12.5px; color:var(--txt2); margin:0 0 14px; }
.fc-gen-from b { color:var(--txt); }
.fc-gen-count { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--txt2); margin-bottom:12px; }
.fc-count {
  padding:7px 10px; border-radius:8px; background:var(--bg-input);
  color:var(--txt); border:1px solid var(--border); font-size:12.5px; cursor:pointer;
}
.fc-gen-go {
  padding:9px 16px; background:var(--accent); color:#1a1206; border:none;
  border-radius:9px; font-size:12.5px; font-weight:650; cursor:pointer; transition:.15s;
}
.fc-gen-go:hover:not(:disabled) { background:var(--accent-soft); }
.fc-gen-go:disabled { opacity:.5; cursor:default; }
.fc-gen-status { margin:14px 0 4px; font-size:12.5px; min-height:18px; }
.fc-ok   { color:var(--accent); font-weight:600; }
.fc-warn { color:#e0704a; }
.fc-spin {
  display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-1px;
  border:2px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:fcSpin .7s linear infinite;
}
@keyframes fcSpin { to { transform:rotate(360deg); } }
.fc-gen-preview { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.fc-prev-card {
  position:relative; padding:11px 30px 11px 12px;
  background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:10px;
}
.fc-prev-del {
  position:absolute; top:7px; right:7px; width:20px; height:20px; border:none;
  background:transparent; color:var(--txt3); border-radius:6px; cursor:pointer; font-size:11px;
}
.fc-prev-del:hover { background:var(--bg-hover); color:#e0704a; }
.fc-prev-q { font-size:12.5px; font-weight:600; color:var(--txt); }
.fc-prev-a { font-size:12px; color:var(--txt2); margin-top:4px; }
.fc-save {
  padding:8px 15px; background:var(--accent); color:#1a1206; border:none;
  border-radius:9px; font-size:12.5px; font-weight:650; cursor:pointer;
}
.fc-save:hover { background:var(--accent-soft); }

/* ── Review session (immersive) ── */
.fc-review-ov { padding:0; background:rgba(0,0,0,.72); }
.fc-review {
  width:100%; height:100%; display:flex; flex-direction:column;
  background:var(--bg); animation:fcRise .2s cubic-bezier(.2,.8,.2,1);
}
.fc-r-top {
  display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-bottom:1px solid var(--border-soft);
}
.fc-r-progress { flex:1; height:5px; border-radius:3px; background:var(--bg-active); overflow:hidden; }
.fc-r-progress-fill { height:100%; width:0; background:var(--accent); border-radius:3px; transition:width .3s ease; }
.fc-r-count { font-size:12px; color:var(--txt3); font-variant-numeric:tabular-nums; min-width:56px; text-align:right; }
.fc-r-stage {
  flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:min(7vh,70px) 20px 30px;
}
.fc-r-deck { font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--txt3); margin-bottom:20px; }
.fc-r-card { width:100%; max-width:660px; }
.fc-r-face { font-size:17px; line-height:1.6; }
.fc-r-front { font-weight:600; text-align:center; }
.fc-r-divider { display:none; align-items:center; gap:12px; margin:26px 0 20px; color:var(--txt3); }
.fc-r-card.revealed .fc-r-divider { display:flex; }
.fc-r-divider::before, .fc-r-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.fc-r-divider span { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.fc-r-back { display:none; }
.fc-r-card.revealed .fc-r-back { display:block; animation:fcFade .18s ease; }

.fc-r-controls {
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border-soft); display:flex; justify-content:center;
}
.fc-r-show {
  padding:12px 26px; background:var(--bg-raised); color:var(--txt);
  border:1px solid var(--border); border-radius:11px;
  font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s;
}
.fc-r-show:hover { background:var(--bg-hover); }
.fc-r-show kbd, .fc-grade kbd {
  margin-left:8px; padding:1px 6px; font-size:10px; font-family:var(--mono,monospace);
  background:var(--bg-active); color:var(--txt3); border-radius:5px; border:1px solid var(--border-soft);
}
.fc-r-grades { display:none; gap:9px; width:100%; max-width:660px; }
.fc-r-grades.show { display:flex; }
.fc-grade {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:11px 8px; border-radius:11px; cursor:pointer; transition:.15s;
  border:1px solid var(--border); background:var(--bg-raised); color:var(--txt);
  font-size:13px; font-weight:650;
}
.fc-grade:hover { transform:translateY(-2px); }
.fc-g-ivl { font-size:10.5px; font-weight:600; color:var(--txt3); font-variant-numeric:tabular-nums; }
.fc-g-again { border-color:rgba(224,112,74,.4); }
.fc-g-again:hover { background:rgba(224,112,74,.14); }
.fc-g-hard:hover  { background:var(--bg-hover); }
.fc-g-good  { border-color:var(--border-focus); }
.fc-g-good:hover  { background:var(--accent-dim); }
.fc-g-easy:hover  { background:rgba(var(--accent-rgb),.1); }
.fc-grade kbd { margin:0; }

.fc-r-done { text-align:center; margin-top:6vh; animation:fcRise .25s ease; }
.fc-r-done-ico {
  width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:28px;
}
.fc-r-done h3 { font-size:19px; font-weight:650; margin:0 0 18px; }
.fc-r-done-stats { display:flex; gap:34px; justify-content:center; margin-bottom:18px; }
.fc-r-done-stats div { display:flex; flex-direction:column; }
.fc-r-done-stats b { font-size:26px; font-weight:700; color:var(--accent); }
.fc-r-done-stats span { font-size:11px; color:var(--txt3); text-transform:uppercase; letter-spacing:.04em; }
.fc-r-done-hint { font-size:12.5px; color:var(--txt3); max-width:320px; margin:0 auto 22px; }
.fc-r-done-close {
  padding:10px 28px; background:var(--accent); color:#1a1206; border:none;
  border-radius:10px; font-size:13px; font-weight:650; cursor:pointer;
}
.fc-r-done-close:hover { background:var(--accent-soft); }

/* ── Card browser ── */
.fc-browse-body { display:flex; flex-direction:column; gap:8px; }
.fc-b-card {
  display:flex; gap:12px; padding:11px 12px; align-items:flex-start;
  background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:10px;
}
.fc-b-text { flex:1; min-width:0; }
.fc-b-q { font-size:12.5px; font-weight:600; }
.fc-b-a { font-size:12px; color:var(--txt2); margin-top:4px; }
.fc-b-side { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; }
.fc-badge { font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px; background:var(--bg-active); color:var(--txt3); }
.fc-b-new  { background:rgba(var(--accent-rgb),.1); color:var(--accent2); }
.fc-b-learn{ background:var(--accent-dim); color:var(--accent); }
.fc-b-susp { background:rgba(224,112,74,.14); color:#e0704a; }
.fc-b-actions { display:flex; gap:5px; }

/* ── Sidebar "Review" entry + topbar due dot ── */
.fc-sidebar-review {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px; margin:0 0 2px; cursor:pointer;
  background:transparent; border:none; border-radius:9px;
  color:var(--txt2); font-size:12.5px; font-weight:500; transition:.15s;
}
.fc-sidebar-review:hover { background:var(--bg-hover); color:var(--txt); }
.fc-sidebar-review .fc-sr-ico { color:var(--accent); font-size:13px; }
.fc-sidebar-review .fc-sr-label { text-align:left; }
/* "Loops" and "Atlas" are house words that mean nothing on first read. The hint
   is the plain-English gloss — quiet enough to disappear once it's learned,
   present enough that the feature is findable before then. */
.fc-sidebar-review .fc-sr-hint {
  flex:1; text-align:left; font-size:11px; color:var(--txt3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fc-sidebar-review:hover .fc-sr-hint { color:var(--txt2); }
.fc-sidebar-review:not(:has(.fc-sr-hint)) .fc-sr-label { flex:1; }
.fc-sr-badge {
  min-width:18px; padding:1px 6px; border-radius:20px; text-align:center;
  font-size:10.5px; font-weight:700; background:var(--accent); color:#1a1206;
}
.fc-sr-badge.zero { display:none; }

/* ══════════════════════════════════════════════════════
   FILES FOCUS — give the tree the sidebar
   Measured before this existed: the nav block, the usage bar and the Go Pro
   card together took ~320px of a 900px sidebar, leaving the file tree ~300px
   for 700px+ of content. The tree is the thing people came for.
   Nothing is removed, everything CONDENSES: seven labelled rows collapse into
   seven icons on one line. Reversible with the same button, and remembered.
   ══════════════════════════════════════════════════════ */
.sidebar-rail { display:none; }
body.files-focus .sidebar-nav { display:none; }
body.files-focus .sidebar-rail {
  display:flex; align-items:center; justify-content:space-between; gap:2px;
  padding:5px 6px; margin:2px 4px 4px;
  border:1px solid var(--border-soft); border-radius:10px;
  background:var(--bg-raised);
  animation:railIn 200ms var(--ease);
}
@keyframes railIn { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:none } }
.sr-ico-btn {
  position:relative; flex:1; min-width:0; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; color:var(--txt3);
  background:transparent; border:none; border-radius:7px; cursor:pointer;
  transition:color var(--t), background var(--t), transform var(--t);
}
.sr-ico-btn:hover { color:var(--accent); background:var(--bg-hover); transform:translateY(-1px); }
.sr-ico-btn:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55); }
/* Counts survive the condense as a dot — folding must never hide a number that
   wants attention, and there is no room for the digits at this size. */
.sr-ico-dot {
  position:absolute; top:2px; right:calc(50% - 11px);
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 2px var(--bg-raised);
}
.sr-ico-dot.zero { display:none; }
.sr-ico-dot.hot { background:var(--danger, #F05252); }

/* In focus mode the promos step aside too — a paywall card that hides the file
   list is not a promo, it is an obstacle. Upgrading stays on Home and in the
   footer, and the usage bar is one toggle away. */
body.files-focus .sidebar-upgrade-cta,
body.files-focus .usage-indicator { display:none; }
/* The tree is now the main event, so give it a little more air. */
body.files-focus .file-list-wrap { padding-bottom:4px; }

#filesFocusBtn .ffb-in  { display:none; }
body.files-focus #filesFocusBtn .ffb-out { display:none; }
body.files-focus #filesFocusBtn .ffb-in  { display:inline; }
body.files-focus #filesFocusBtn { color:var(--accent); }

/* ── Foldable "Tools" section ────────────────────────────
   grid-template-rows 0fr→1fr is the one way to animate a collapse to *content
   height* without measuring it in JS; the inner wrapper needs min-height:0 or
   the row refuses to shrink below its content. */
.sidebar-tools { margin:2px 0 4px; }
.sidebar-tools-toggle {
  display:flex; align-items:center; gap:7px; width:100%;
  padding:5px 10px; margin:0; cursor:pointer;
  background:transparent; border:none; border-radius:8px;
  color:var(--txt3); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em;
  transition:color var(--t), background var(--t);
}
.sidebar-tools-toggle:hover { color:var(--txt2); background:var(--bg-hover); }
.sidebar-tools-toggle:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.5); }
.stt-chevron {
  font-size:12px; line-height:1; transform:rotate(90deg);
  transition:transform 220ms cubic-bezier(.34,1.56,.64,1);
}
.sidebar-tools.folded .stt-chevron { transform:rotate(0deg); }
.stt-label { flex-shrink:0; }
/* The gloss only earns its space while the section is folded — open, the rows
   underneath already say what they are. */
.stt-hint {
  flex:1; text-align:left; text-transform:none; letter-spacing:0;
  font-size:10px; font-weight:400; color:var(--txt3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity var(--t);
}
.sidebar-tools.folded .stt-hint { opacity:.7; }
.sidebar-tools:not(.folded) .stt-label { flex:1; text-align:left; }
/* Folding must never hide a count that wants attention. */
#toolsBadge { display:none; }
.sidebar-tools.folded #toolsBadge:not(.zero) { display:inline-block; }

.sidebar-tools-body {
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows 240ms var(--ease);
}
.sidebar-tools.folded .sidebar-tools-body { grid-template-rows:0fr; }
.sidebar-tools-inner { overflow:hidden; min-height:0; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-tools-body { transition:none; }
  .stt-chevron { transition:none; }
}

/* ── Today row + its W / M rollup chips ──────────────────
   Siblings of the button, overlaid on its right edge (a button cannot contain
   a button). They sit at low opacity until the row is hovered or one of them
   is focused, so the nav still reads as six clean items. */
.fc-sr-row { position:relative; }
.fc-sr-row .fc-sidebar-review.has-periods { padding-right:62px; }
.fc-sr-periods {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:flex; gap:3px; opacity:.42; transition:opacity var(--t);
}
.fc-sr-row:hover .fc-sr-periods,
.fc-sr-periods:focus-within { opacity:1; }
.fc-sr-period {
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; font-family:var(--font-mono);
  color:var(--txt3); background:transparent;
  border:1px solid var(--border-soft); border-radius:6px; cursor:pointer;
  transition:color var(--t), background var(--t), border-color var(--t), transform var(--t);
}
.fc-sr-period:hover {
  color:var(--accent); background:var(--accent-dim);
  border-color:rgba(var(--accent-rgb),.4); transform:translateY(-1px);
}
.fc-sr-period:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55); }
.fc-due-dot {
  display:inline-block; min-width:15px; height:15px; padding:0 4px; margin-left:5px;
  border-radius:20px; background:var(--accent); color:#1a1206;
  font-size:9.5px; font-weight:700; line-height:15px; text-align:center; vertical-align:middle;
}
.fc-due-dot.zero { display:none; }

@media (max-width:720px) {
  .fc-panel { max-width:100%; max-height:92vh; }
  .fc-r-grades { flex-wrap:wrap; }
  .fc-grade { min-width:calc(50% - 5px); }
  .fc-deck-actions { flex-direction:column; }
}

/* ══════════════════════════════════════════════════════════
   Connections — semantic auto-linking & synthesis  (js/connections.js)
   ══════════════════════════════════════════════════════════ */
.conn-root { gap:0; }
.conn-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.conn-synth {
  font-size:11.5px; font-weight:600; color:var(--accent);
  background:var(--accent-dim); border:1px solid rgba(var(--accent-rgb),.28);
  padding:5px 11px; border-radius:var(--r-md); cursor:pointer; transition:all var(--t);
}
.conn-synth:hover { background:rgba(var(--accent-rgb),.18); }
.conn-sec { margin-bottom:10px; }
.conn-sec-label {
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--txt3); margin:4px 2px 6px;
}
.conn-item {
  display:flex; align-items:center; gap:9px;
  padding:7px 9px; border-radius:var(--r-md); border:1px solid transparent; transition:all var(--t);
}
.conn-item:hover { background:var(--bg-hover); border-color:var(--border-soft); }
.conn-open {
  flex:0 1 auto; min-width:0; max-width:46%; text-align:left; cursor:pointer;
  background:none; border:none; color:var(--txt); font-size:12.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0;
}
.conn-open:hover { color:var(--accent); }
.conn-item .related-bar { flex:1; min-width:34px; }
.conn-mhint { flex:1; min-width:0; font-size:11px; color:var(--txt3); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conn-actions { display:flex; align-items:center; gap:5px; flex-shrink:0; margin-left:auto; }
.conn-link, .conn-link-mention {
  font-size:11px; font-weight:600; color:var(--accent);
  background:var(--accent-dim); border:1px solid rgba(var(--accent-rgb),.28);
  padding:4px 9px; border-radius:7px; cursor:pointer; transition:all var(--t); white-space:nowrap;
}
.conn-link:hover:not(:disabled), .conn-link-mention:hover:not(:disabled) { background:rgba(var(--accent-rgb),.18); }
.conn-link:disabled, .conn-link-mention:disabled { opacity:.5; cursor:default; }
.conn-ignore {
  width:22px; height:22px; flex-shrink:0; border:none; background:transparent;
  color:var(--txt3); border-radius:6px; cursor:pointer; font-size:11px; line-height:1;
}
.conn-ignore:hover { background:var(--bg-active); color:var(--txt); }

/* ── Synthesis modal ── */
.conn-overlay {
  position:fixed; inset:0; z-index:660; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fcFade .18s ease;
}
.conn-panel {
  width:100%; max-width:600px; max-height:86vh; display:flex; flex-direction:column;
  background:var(--bg-surface); color:var(--txt); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.5); overflow:hidden;
  animation:fcRise .2s cubic-bezier(.2,.8,.2,1);
}
.conn-p-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border-soft); }
.conn-p-title { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:650; }
.conn-logo { color:var(--accent); }
.conn-x { width:30px; height:30px; border:none; background:transparent; color:var(--txt3); font-size:16px; cursor:pointer; border-radius:8px; }
.conn-x:hover { background:var(--bg-hover); color:var(--txt); }
.conn-p-body { overflow-y:auto; padding:14px 18px 18px; }
.conn-p-from { font-size:12.5px; color:var(--txt2); margin:0 0 12px; }
.conn-p-from b { color:var(--txt); }
.conn-pick { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.conn-pick-row { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; cursor:pointer; font-size:12.5px; color:var(--txt); transition:background var(--t); }
.conn-pick-row:hover { background:var(--bg-hover); }
.conn-pick-row input { accent-color:var(--accent); width:15px; height:15px; }
.conn-go {
  padding:9px 16px; background:var(--accent); color:#1a1206; border:none;
  border-radius:9px; font-size:12.5px; font-weight:650; cursor:pointer; transition:all var(--t);
}
.conn-go:hover:not(:disabled) { background:var(--accent-soft); }
.conn-go:disabled { opacity:.5; cursor:default; }
.conn-status { margin:14px 0 6px; font-size:12.5px; min-height:18px; }
.conn-ok { color:var(--accent); font-weight:600; }
.conn-warn { color:#e0704a; }
.conn-spin {
  display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-1px;
  border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:fcSpin .7s linear infinite;
}
.conn-preview {
  font-size:13px; line-height:1.6;
  border:1px solid var(--border-soft); border-radius:10px; padding:0 14px;
  max-height:38vh; overflow-y:auto;
}
.conn-preview:empty { display:none; }
.conn-p-foot { display:flex; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--border-soft); background:var(--bg); }
.conn-save {
  padding:8px 16px; background:var(--accent); color:#1a1206; border:none;
  border-radius:9px; font-size:12.5px; font-weight:650; cursor:pointer;
}
.conn-save:hover { background:var(--accent-soft); }

@media (max-width:720px) {
  .conn-panel { max-width:100%; max-height:92vh; }
  .conn-open { max-width:38%; }
}

/* ══════════════════════════════════════════════════════════
   Topbar overflow "⋯ More" menu  (js/app.js _fitTopbar)
   ══════════════════════════════════════════════════════════ */
.topbar-more-btn { flex-shrink:0; }
.topbar-more-btn svg { width:13px; height:13px; }

.topbar-more-menu {
  position:absolute; top:calc(100% - 4px); right:12px;
  min-width:190px; max-width:min(260px, calc(100vw - 24px));
  max-height:min(70vh, 460px); overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
  padding:6px; z-index:150;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 16px 44px rgba(0,0,0,.42);
  animation:fcRise .15s cubic-bezier(.2,.8,.2,1);
}
.topbar-more-menu.hidden { display:none; }

/* Pills rendered as full-width rows inside the dropdown. The same button
   element is reparented here, so its existing click handler still works. */
.topbar-more-menu .btn-pill {
  width:100%; justify-content:flex-start; gap:11px;
  padding:9px 12px; border-radius:9px; font-size:12.5px;
  color:var(--txt); border:1px solid transparent;
}
.topbar-more-menu .btn-pill:hover { background:var(--bg-hover); color:var(--accent); }
.topbar-more-menu .btn-pill.active { background:var(--accent-dim); color:var(--accent); }
.topbar-more-menu .btn-pill svg { width:14px; height:14px; flex-shrink:0; opacity:.9; }
/* Force labels visible in the menu even where the topbar hides them (≤900px). */
.topbar-more-menu .btn-label { display:inline !important; }
/* The Cards due-dot still reads inside the menu row. */
.topbar-more-menu .fc-due-dot { margin-left:auto; }

/* Visible grip on the sidebar resize handle so it's discoverable. */
.sidebar-resizer::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:3px; height:34px; border-radius:3px;
  background:var(--border); opacity:0; transition:opacity var(--t), background var(--t);
}
.sidebar-resizer:hover::after, body.resizing-sidebar .sidebar-resizer::after {
  opacity:1; background:var(--accent);
}

/* ══════════════════════════════════════════════════════════
   Owner-side comments in Manage Links  (js/app.js _openManageLinks)
   ══════════════════════════════════════════════════════════ */
.al-btn.ml-comments { display:inline-flex; align-items:center; gap:3px; }
.al-btn.ml-comments .al-cmt-count { font-size:10px; font-weight:700; line-height:1; }
.al-btn.ml-comments.has-comments { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); background:var(--accent-dim); }

.al-comments {
  margin:2px 0 8px; padding:10px 12px;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:10px; display:flex; flex-direction:column; gap:8px;
  animation:fcFade .16s ease;
}
.alc-item { padding:8px 10px; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:8px; }
.alc-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:3px; }
.alc-author { font-size:12px; font-weight:650; color:var(--txt); }
.alc-time { font-size:10.5px; color:var(--txt3); }
.alc-quote {
  font-size:11.5px; color:var(--txt2); font-style:italic;
  border-left:2px solid var(--accent); padding-left:8px; margin:3px 0;
}
.alc-body { font-size:12.5px; color:var(--txt); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.alc-empty { font-size:12px; color:var(--txt3); text-align:center; padding:6px; }

/* ══════════════════════════════════════════════════════════
   VAULT ATLAS — semantic map, topic panel, health audit
   (js/atlas.js · js/atlas-worker.js)
   ══════════════════════════════════════════════════════════ */
.atlas-overlay {
  position:fixed; inset:0; z-index:960; display:flex; flex-direction:column;
  background:var(--bg); animation:vhFade .18s ease;
}
.atlas-top {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:11px 16px; border-bottom:1px solid var(--border-soft);
}
.atlas-title {
  font-family:var(--font-head); font-size:14.5px; font-weight:700; color:var(--txt);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.atlas-logo { color:var(--accent); }
.atlas-search {
  flex:1; max-width:300px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; color:var(--txt); font-family:inherit; font-size:12.5px;
  padding:7px 12px; outline:none;
}
.atlas-search:focus { border-color:var(--border-focus); }
.atlas-stats {
  font-size:11.5px; color:var(--txt3); font-variant-numeric:tabular-nums;
  margin-left:auto; white-space:nowrap;
}
.atlas-btn {
  background:var(--bg-raised); border:1px solid var(--border); color:var(--txt2);
  border-radius:8px; padding:6px 11px; font-size:12px; font-family:inherit;
  cursor:pointer; white-space:nowrap; transition:all var(--t);
}
.atlas-btn:hover { color:var(--txt); border-color:var(--accent); }

.atlas-body { flex:1; display:flex; min-height:0; }
.atlas-map { flex:1; position:relative; min-width:0; }
.atlas-canvas { width:100%; height:100%; display:block; cursor:grab; touch-action:none; }

/* display:flex would otherwise beat the [hidden] UA rule and leave an empty
   tooltip pill painted over the map. */
.atlas-tip[hidden] { display:none; }
.atlas-tip {
  position:absolute; pointer-events:none; z-index:3;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:8px; padding:6px 10px; box-shadow:var(--sh-md);
  font-size:12px; color:var(--txt); max-width:230px;
  display:flex; flex-direction:column; gap:2px;
}
.atlas-tip-topic { font-size:10.5px; font-weight:600; }

.atlas-legend {
  position:absolute; left:14px; bottom:14px; right:14px; z-index:2;
  display:flex; flex-wrap:wrap; gap:6px; max-height:34%; overflow-y:auto;
}
.atlas-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.28); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:20px;
  padding:4px 10px 4px 7px; font-size:11.5px; font-family:inherit;
  color:var(--txt2); cursor:pointer; transition:all var(--t);
}
[data-theme="light"] .atlas-chip { background:rgba(255,255,255,.7); }
.atlas-chip:hover { color:var(--txt); border-color:var(--accent); }
.atlas-chip.on { color:var(--txt); border-color:var(--accent); background:var(--accent-dim); }
.atlas-chip i { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.atlas-chip b { font-size:10px; color:var(--txt3); font-variant-numeric:tabular-nums; }

.atlas-state {
  position:absolute; inset:0; z-index:4; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(3px);
}
[data-theme="light"] .atlas-state { background:rgba(255,255,255,.55); }
.atlas-state.on { display:flex; }
.atlas-load, .atlas-err {
  display:flex; align-items:center; gap:9px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:12px; padding:12px 18px; font-size:13px; color:var(--txt2);
  box-shadow:var(--sh-md);
}
.atlas-err { color:var(--danger); border-color:rgba(240,82,82,.4); }
.atlas-spin {
  width:13px; height:13px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--border); border-top-color:var(--accent);
  animation:atlasSpin .7s linear infinite;
}
@keyframes atlasSpin { to { transform:rotate(360deg); } }

.atlas-cta {
  max-width:400px; text-align:center; padding:26px 24px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
}
.atlas-cta-ico { font-size:26px; color:var(--accent); margin-bottom:8px; }
.atlas-cta-title { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--txt); margin-bottom:6px; }
.atlas-cta-sub { font-size:12.5px; line-height:1.55; color:var(--txt2); margin-bottom:14px; }
.atlas-cta-btn {
  background:var(--accent); color:var(--on-accent); border:none; border-radius:9px;
  padding:9px 20px; font-family:inherit; font-size:13px; font-weight:650; cursor:pointer;
}
.atlas-cta-btn:disabled { opacity:.7; cursor:default; }

/* ── Side panel ─────────────────────────────────── */
.atlas-side {
  width:340px; flex-shrink:0; display:flex; flex-direction:column;
  background:var(--bg-surface); border-left:1px solid var(--border); min-height:0;
}
/* ── CodeMirror: kill the underlines ──────────────────────
   CM's bundled `defaultHighlightStyle` sets `text-decoration: underline` on
   `tags.heading` and `tags.link`, so every `#`/`##` line and every link in the
   editor rendered underlined — a heavy, un-editor-like look, and the single
   noisiest thing about the writing surface.

   js/editor.js defines its own `mdHighlight` that would override this, but it
   never matches (see the note at the top of that file), and the generated class
   names (`ͼ7`…) are build-order dependent and unsafe to target. So the reset
   happens here, on stable CM class names.

   Known trade-off: this also removes the `line-through` on `~~strikethrough~~`
   in the *editor source* view. Headings appear in nearly every note and
   strikethrough is rare, and the `~~` markers stay visible either way — but it
   is a real loss, not a free win. The preview is unaffected. */
.cm-content .cm-line span { text-decoration-line: none; }

/* Index-not-built state: leave only the one action that's actually possible.
   With no index there's no map to re-centre, nothing to rebuild, nothing to
   highlight and no topics to list. */
.atlas-overlay.atlas-bare .atlas-side,
.atlas-overlay.atlas-bare .atlas-search,
.atlas-overlay.atlas-bare .atlas-reset,
.atlas-overlay.atlas-bare .atlas-rebuild { display:none !important; }
.atlas-overlay.atlas-bare .atlas-title { margin-right:auto; }
.atlas-tabs { display:flex; gap:2px; padding:8px 8px 0; flex-shrink:0; }
.atlas-tab {
  flex:1; background:none; border:none; border-bottom:2px solid transparent;
  padding:8px 6px; font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--txt3); cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.atlas-tab:hover { color:var(--txt2); }
.atlas-tab.active { color:var(--txt); border-bottom-color:var(--accent); }
.atlas-tab-badge {
  min-width:17px; padding:1px 5px; border-radius:20px; font-size:10px; font-weight:700;
  background:var(--accent); color:var(--on-accent);
}
.atlas-pane { flex:1; overflow-y:auto; padding:10px 12px 28px; min-height:0; }
.atlas-pane-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--txt3); padding:6px 2px 10px;
}
.atlas-muted { font-size:12px; color:var(--txt3); padding:4px 2px; }
.atlas-mini {
  background:var(--bg-raised); border:1px solid var(--border); color:var(--txt2);
  border-radius:7px; padding:5px 10px; font-family:inherit; font-size:11.5px;
  cursor:pointer; white-space:nowrap; transition:all var(--t);
}
.atlas-mini:hover { color:var(--txt); border-color:var(--accent); }
.atlas-mini.primary { background:var(--accent-dim); border-color:rgba(var(--accent-rgb),.35); color:var(--accent); }
.atlas-mini.primary:hover { background:var(--accent); color:var(--on-accent); }
.atlas-mini:disabled { opacity:.6; cursor:default; }

.atlas-topic {
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:12px; padding:11px 12px; margin-bottom:10px;
}
.atlas-topic-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.atlas-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.atlas-topic-name {
  flex:1; font-family:var(--font-head); font-size:13.5px; font-weight:700;
  color:var(--txt); line-height:1.25;
}
.atlas-topic-n {
  font-size:10.5px; font-weight:700; color:var(--txt3);
  background:var(--bg-surface); border-radius:20px; padding:2px 8px;
  font-variant-numeric:tabular-nums;
}
.atlas-topic-blurb { font-size:12px; line-height:1.5; color:var(--txt2); margin:0 0 7px; }
.atlas-kw { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:7px; }
.atlas-kw span {
  font-size:10.5px; color:var(--txt3); background:var(--bg-surface);
  border:1px solid var(--border-soft); border-radius:5px; padding:2px 6px;
}
.atlas-topic-meta {
  display:flex; gap:10px; font-size:10.5px; color:var(--txt3);
  padding-bottom:7px; border-bottom:1px solid var(--border-soft); margin-bottom:5px;
}
.atlas-notes { display:flex; flex-direction:column; gap:1px; max-height:270px; overflow-y:auto; }
.atlas-note {
  display:flex; align-items:center; gap:7px; width:100%;
  background:none; border:none; border-radius:6px; padding:5px 6px;
  font-family:inherit; font-size:12px; color:var(--txt2);
  cursor:pointer; text-align:left; transition:background var(--t);
}
.atlas-note:hover { background:var(--bg-hover); color:var(--txt); }
.atlas-note.sel { background:var(--accent-dim); color:var(--txt); }
.atlas-note-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atlas-note-meta { font-size:10px; color:var(--txt3); flex-shrink:0; font-variant-numeric:tabular-nums; }
.atlas-core {
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--accent); background:var(--accent-dim); border-radius:4px; padding:1px 5px; flex-shrink:0;
}
.atlas-go {
  font-size:10px; color:var(--txt3); border:1px solid var(--border);
  border-radius:5px; padding:1px 6px; flex-shrink:0; opacity:0; transition:all var(--t);
}
.atlas-note:hover .atlas-go { opacity:1; }
.atlas-go:hover { color:var(--accent); border-color:var(--accent); }
.atlas-topic-actions { display:flex; gap:6px; margin-top:9px; }
.atlas-topic-actions .atlas-mini { flex:1; }

/* ── Health tab ─────────────────────────────────── */
.atlas-score {
  display:flex; gap:6px; margin-bottom:12px;
}
.atlas-score div {
  flex:1; text-align:center; padding:9px 4px;
  background:var(--bg-raised); border:1px solid var(--border-soft); border-radius:10px;
  display:flex; flex-direction:column; gap:2px;
}
.atlas-score b { font-size:15px; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums; }
.atlas-score span { font-size:9.5px; color:var(--txt3); line-height:1.2; }

.atlas-hsec { margin-bottom:14px; }
.atlas-hsec-head {
  display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; font-weight:650; color:var(--txt); margin-bottom:2px;
}
.atlas-hsec-head b {
  font-size:10.5px; color:var(--txt3); background:var(--bg-raised);
  border-radius:20px; padding:1px 8px; font-variant-numeric:tabular-nums;
}
.atlas-hsec-hint { font-size:11px; line-height:1.45; color:var(--txt3); margin:0 0 6px; }
.atlas-hsec-hint code { font-family:var(--font-mono); font-size:10px; color:var(--accent); }

.atlas-pair {
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:9px; padding:7px 9px;
}
.atlas-pair-sim {
  font-size:11px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums; flex-shrink:0;
}
.atlas-pair-notes { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.atlas-bridge {
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:9px; padding:6px 9px; margin-bottom:5px;
}
.atlas-bridge-t { font-size:10.5px; color:var(--txt3); padding:2px 6px 0; }
.atlas-bridge-t em { font-style:normal; font-weight:650; }
.atlas-island {
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:9px; padding:7px 9px; font-size:12px; color:var(--txt2);
}
.atlas-island span:first-of-type { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width:900px) {
  .atlas-side { width:290px; }
  .atlas-stats { display:none; }
}
@media (max-width:720px) {
  .atlas-body { flex-direction:column; }
  .atlas-map { flex:0 0 46%; min-height:0; }
  .atlas-side { width:100%; border-left:none; border-top:1px solid var(--border); flex:1; min-height:0; }
  /* Two clean rows: [title … rebuild ✕] over a full-width search box. */
  .atlas-top { flex-wrap:wrap; gap:7px 8px; padding:9px 12px; }
  .atlas-title   { order:1; }
  .atlas-rebuild { order:2; margin-left:auto; }
  .atlas-close   { order:3; }
  .atlas-search  { order:4; flex:1 0 100%; max-width:none; }
  .atlas-legend { max-height:40%; }
  .atlas-btn.atlas-reset { display:none; }
}

/* ── Atlas: unfiled notes, bridges, duplicate compare ─────── */
.atlas-chip.unfiled { border-style:dashed; }
.atlas-topic-unfiled { border-style:dashed; opacity:.92; }
.atlas-topic-unfiled .atlas-topic-name { color:var(--txt2); }

.atlas-bridge-foot {
  display:flex; align-items:center; gap:8px;
  padding:3px 6px 0; justify-content:space-between;
}
.atlas-bridge-foot .atlas-bridge-t { padding:0; flex:1; min-width:0; }
.atlas-bridge-foot .atlas-mini { flex-shrink:0; padding:3px 8px; font-size:11px; }

.atlas-pair .atlas-cmp { flex-shrink:0; align-self:center; padding:4px 9px; font-size:11px; }
.atlas-mini.danger { color:var(--danger); border-color:rgba(240,82,82,.32); }
.atlas-mini.danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); }

.atlas-cmp-overlay {
  position:fixed; inset:0; z-index:1200; display:flex;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(4px); animation:vhFade .16s ease;
}
[data-theme="light"] .atlas-cmp-overlay { background:rgba(0,0,0,.35); }
.atlas-cmp-panel {
  width:min(920px, 100%); max-height:88vh; display:flex; flex-direction:column;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); overflow:hidden;
}
.atlas-cmp-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.atlas-cmp-title { font-family:var(--font-head); font-size:14px; font-weight:700; color:var(--txt); }
.atlas-cmp-x {
  background:none; border:none; color:var(--txt3); cursor:pointer;
  font-size:14px; width:28px; height:28px; border-radius:6px;
}
.atlas-cmp-x:hover { background:var(--bg-hover); color:var(--danger); }
.atlas-cmp-meta { display:flex; gap:8px; padding:10px 16px 0; flex-shrink:0; }
.atlas-cmp-sim {
  font-size:11px; font-weight:650; color:var(--accent);
  background:var(--accent-dim); border-radius:20px; padding:3px 10px;
}
.atlas-cmp-legend {
  display:flex; gap:14px; padding:9px 16px; flex-shrink:0;
  font-size:11.5px; font-family:var(--font-mono);
}
.atlas-cmp-legend .del { color:var(--danger); }
.atlas-cmp-legend .add { color:var(--success); }
.atlas-cmp-diff {
  flex:1; overflow:auto; min-height:0; margin:0 16px;
  border:1px solid var(--border-soft); border-radius:10px; background:var(--bg-input);
}
.atlas-cmp-foot {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:13px 16px; border-top:1px solid var(--border-soft); margin-top:13px; flex-shrink:0;
}
.atlas-cmp-spacer { flex:1; }
.atlas-cmp-confirm {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 16px; background:rgba(240,82,82,.09);
  border-top:1px solid rgba(240,82,82,.25); font-size:12px; color:var(--txt2); flex-shrink:0;
}
.atlas-cmp-confirm[hidden] { display:none; }
.atlas-cmp-confirm b { color:var(--txt); }

@media (max-width:720px) {
  .atlas-cmp-overlay { padding:0; }
  .atlas-cmp-panel { width:100%; max-height:100vh; height:100%; border-radius:0; border:none; }
  .atlas-cmp-foot .atlas-mini { flex:1 0 calc(50% - 4px); }
  .atlas-cmp-spacer { display:none; }
}

/* ── Atlas integration: note topic bar, topic filter, merge row ─── */
.note-topic {
  display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  margin:22px 0 0; padding:9px 12px;
  background:var(--bg-surface); border:1px solid var(--border-soft);
  border-radius:10px; width:100%;
}
.nt-label {
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--txt3); flex-shrink:0;
}
.nt-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--nt, var(--accent));
  color:var(--nt, var(--accent)); border-radius:20px;
  padding:3px 11px; font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--t);
}
.nt-chip:hover { background:var(--nt, var(--accent)); color:var(--bg); }
.nt-chip.second { opacity:.8; border-style:dashed; font-weight:500; }
.nt-also { font-size:11px; color:var(--txt3); font-style:italic; }
.nt-unfiled {
  font-size:12px; color:var(--txt3); border:1px dashed var(--border);
  border-radius:20px; padding:3px 11px;
}
.nt-open {
  margin-left:auto; background:var(--bg-raised); border:1px solid var(--border);
  color:var(--txt3); border-radius:7px; padding:3px 10px;
  font-family:inherit; font-size:11px; cursor:pointer; transition:all var(--t);
}
.nt-open:hover { color:var(--accent); border-color:var(--accent); }

.topic-filter-banner { color:var(--nt, var(--accent)); }
.topic-filter-banner .tfb-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--nt, var(--accent)); margin-right:2px;
}

.atlas-cmp-foot-danger { margin-top:0; padding-top:9px; border-top:1px dashed var(--border-soft); }

@media (max-width:640px) {
  .note-topic { gap:6px; padding:8px 10px; }
  .nt-open { margin-left:0; }
}

/* ═══════════════════════════════════════════════════════════
   HOME (js/home.js) — the vault's front door
   Replaces the old dead-end "drop a file" screen. Every surface here is
   a route into a feature that already shipped, so the styling deliberately
   reuses the existing token set rather than introducing a second look.
   ═══════════════════════════════════════════════════════════ */

.home-wrap { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }

.vh-wrap {
  max-width:1100px; margin:0 auto;
  padding:38px 32px 72px;
  display:flex; flex-direction:column; gap:34px;
  animation:vhIn .34s var(--ease) both;
}
@keyframes vhIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── hero ── */
.vh-hero {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
}
.vh-greet {
  font-family:var(--font-head); font-size:34px; font-weight:700;
  letter-spacing:-.02em; color:var(--txt); margin:0 0 4px;
}
.vh-date { font-size:13.5px; color:var(--txt3); margin:0; }

.vh-pulse { display:flex; gap:10px; flex-wrap:wrap; }
.vh-tile {
  min-width:78px; padding:11px 15px;
  background:var(--bg-surface); border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:1px;
}
.vh-tile-v {
  font-family:var(--font-head); font-size:21px; font-weight:700;
  color:var(--txt); line-height:1.1; font-variant-numeric:tabular-nums;
}
.vh-tile-l {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--txt3); font-weight:600;
}
.vh-tile-live { border-color:var(--accent); background:var(--accent-dim); }
.vh-tile-live .vh-tile-v { color:var(--accent); }

/* ── sections ── */
.vh-sec { display:flex; flex-direction:column; gap:14px; }
.vh-sec-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vh-sec-title {
  font-family:var(--font-head); font-size:15px; font-weight:700;
  letter-spacing:.01em; color:var(--txt); margin:0;
}
.vh-link {
  margin-left:auto; background:none; border:none;
  color:var(--txt3); font-family:inherit; font-size:12px; cursor:pointer;
  padding:3px 0; transition:color var(--t);
}
.vh-link:hover { color:var(--accent); }

/* ── recent note cards ── */
.vh-grid {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));
}
.vh-card {
  text-align:left; background:var(--bg-surface);
  border:1px solid var(--border-soft); border-radius:var(--r-md);
  padding:14px 15px 12px; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; gap:7px; min-height:112px;
  transition:border-color var(--t), transform var(--t), background var(--t);
}
.vh-card:hover {
  border-color:var(--accent); background:var(--bg-raised);
  transform:translateY(-2px);
}
.vh-card-top { display:flex; align-items:flex-start; gap:8px; }
.vh-card-name {
  font-weight:650; font-size:14px; color:var(--txt); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.vh-card-star { margin-left:auto; color:var(--accent); font-size:12px; flex-shrink:0; }
.vh-card-ex {
  margin:0; font-size:12.5px; line-height:1.5; color:var(--txt2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; flex:1;
}
.vh-card-ex-empty { color:var(--txt3); font-style:italic; }
.vh-card-foot {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:11px; color:var(--txt3); margin-top:auto;
}
.vh-dot { opacity:.5; }
.vh-card-topic {
  margin-left:auto; max-width:46%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--vt, var(--accent)); border:1px solid var(--vt, var(--accent));
  border-radius:20px; padding:1px 8px; font-size:10px; font-weight:600;
}
.vh-card-topic-unfiled {
  color:var(--txt3); border:1px dashed var(--border);
}

/* ── banners (cards due / invites) ── */
.vh-banner {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:var(--r-md);
  background:var(--bg-surface); border:1px solid var(--border-soft);
}
.vh-banner-ico { font-size:19px; line-height:1; flex-shrink:0; }
.vh-banner-text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.vh-banner-text strong { font-size:14px; font-weight:650; color:var(--txt); }
.vh-banner-text span { font-size:12.5px; color:var(--txt2); line-height:1.45; }
.vh-banner-due {
  border-color:var(--accent); background:var(--accent-dim);
}
.vh-banner-due .vh-banner-ico { color:var(--accent); }
.vh-banner-done .vh-banner-ico { color:var(--success); }
.vh-banner-invite { border-style:dashed; }
.vh-banner-invite .vh-banner-ico { color:var(--accent); }
.vh-banner-quiet { border-style:dashed; }

/* ── buttons ── */
.vh-btn {
  flex-shrink:0; background:var(--bg-raised); border:1px solid var(--border);
  color:var(--txt); border-radius:var(--r-sm); padding:8px 14px;
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:all var(--t); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vh-btn:hover { border-color:var(--accent); color:var(--accent); }
.vh-btn-primary {
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.vh-btn-primary:hover {
  background:var(--accent-soft); border-color:var(--accent-soft); color:var(--on-accent);
}
.vh-x {
  flex-shrink:0; background:none; border:none; color:var(--txt3);
  font-size:13px; cursor:pointer; padding:4px 6px; border-radius:var(--r-sm);
  transition:all var(--t); line-height:1;
}
.vh-x:hover { color:var(--danger); background:var(--bg-hover); }

/* ── topics ── */
.vh-topics { display:flex; flex-wrap:wrap; gap:9px; }
.vh-topic {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; border:1px solid var(--vt, var(--accent));
  color:var(--vt, var(--accent)); border-radius:22px;
  padding:6px 8px 6px 14px; font-family:inherit; font-size:12.5px;
  font-weight:600; cursor:pointer; transition:all var(--t);
}
.vh-topic:hover { background:var(--vt, var(--accent)); color:var(--bg); }
.vh-topic-n {
  background:rgba(var(--accent-rgb), .16); color:inherit;
  border-radius:20px; padding:1px 8px; font-size:11px;
  font-variant-numeric:tabular-nums;
}
.vh-topic:hover .vh-topic-n { background:rgba(0,0,0,.18); }
.vh-topic-unfiled {
  border-style:dashed; border-color:var(--border); color:var(--txt3);
}
.vh-topic-unfiled:hover { background:var(--bg-hover); color:var(--txt2); }

.vh-stale {
  font-size:11px; color:var(--txt3); font-style:italic;
  border:1px dashed var(--border); border-radius:20px; padding:2px 10px;
}
button.vh-stale { cursor:pointer; font-family:inherit; background:none; transition:all var(--t); }
.vh-stale-hot { color:var(--accent); border-color:var(--accent); font-style:normal; font-weight:600; }
.vh-stale-hot:hover { background:var(--accent-dim); }

/* ── loose ends ── */
.vh-loose {
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(238px, 1fr));
}
.vh-loose-item {
  display:flex; align-items:center; gap:13px; text-align:left;
  background:var(--bg-surface); border:1px solid var(--border-soft);
  border-radius:var(--r-md); padding:12px 14px; cursor:pointer;
  font-family:inherit; transition:all var(--t);
}
.vh-loose-item:hover { border-color:var(--accent); background:var(--bg-raised); }
.vh-loose-n {
  font-family:var(--font-head); font-size:22px; font-weight:700;
  color:var(--accent); line-height:1; flex-shrink:0;
  font-variant-numeric:tabular-nums; min-width:26px;
}
.vh-loose-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.vh-loose-label { font-size:12.5px; font-weight:650; color:var(--txt); }
.vh-loose-why { font-size:11.5px; color:var(--txt3); line-height:1.4; }

/* ── quick actions ── */
.vh-actions {
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(196px, 1fr));
}
.vh-act {
  display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--bg-surface); border:1px solid var(--border-soft);
  border-radius:var(--r-md); padding:12px 13px; cursor:pointer;
  font-family:inherit; transition:all var(--t);
}
.vh-act:hover { border-color:var(--accent); background:var(--bg-raised); transform:translateY(-1px); }
.vh-act-ico {
  width:30px; height:30px; flex-shrink:0; border-radius:8px;
  display:grid; place-items:center; font-size:14px;
  background:var(--bg-raised); color:var(--accent);
  border:1px solid var(--border-soft);
}
.vh-act:hover .vh-act-ico { background:var(--accent-dim); border-color:var(--accent); }
.vh-act-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.vh-act-label { font-size:13px; font-weight:650; color:var(--txt); }
.vh-act-sub {
  font-size:11px; color:var(--txt3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vh-kbd {
  margin-left:auto; flex-shrink:0;
  font-family:var(--font-mono); font-size:10px; color:var(--txt3);
  background:var(--bg-input); border:1px solid var(--border-soft);
  border-radius:5px; padding:2px 5px;
}

/* ── discover ── */
.vh-discover {
  display:flex; align-items:center; gap:16px;
  padding:17px 18px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--accent-dim), transparent 70%), var(--bg-surface);
  border:1px solid var(--border);
}
.vh-discover-ico {
  font-size:24px; line-height:1; flex-shrink:0; color:var(--accent);
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--bg-raised); border:1px solid var(--border-soft);
}
.vh-discover-text { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.vh-discover-kicker {
  font-size:9.5px; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--accent);
}
.vh-discover-title { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--txt); }
.vh-discover-body { font-size:12.5px; line-height:1.5; color:var(--txt2); }
.vh-discover-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }

/* ── first run (empty vault) ── */
.vh-first { min-height:100%; display:grid; place-items:center; padding:48px 28px; }
.vh-first-inner { max-width:520px; text-align:center; }
.vh-first-mark {
  font-size:40px; color:var(--accent); margin-bottom:16px;
  animation:vhPulse 3.2s var(--ease) infinite;
}
@keyframes vhPulse { 0%,100% { opacity:.85; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
.vh-first-title {
  font-family:var(--font-head); font-size:26px; font-weight:700;
  color:var(--txt); margin:0 0 10px; letter-spacing:-.01em;
}
.vh-first-sub { font-size:14px; line-height:1.6; color:var(--txt2); margin:0 0 24px; }
.vh-first-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.vh-first-hint { font-size:11.5px; color:var(--txt3); margin:22px 0 0; line-height:1.7; }
.vh-first-hint code {
  font-family:var(--font-mono); font-size:10.5px;
  background:var(--bg-raised); border-radius:4px; padding:1px 5px;
}

/* ── mobile ── */
@media (max-width:640px) {
  .vh-wrap { padding:22px 16px 96px; gap:26px; }
  .vh-hero { align-items:flex-start; gap:16px; }
  .vh-greet { font-size:26px; }
  .vh-pulse { width:100%; }
  .vh-tile { flex:1; min-width:66px; padding:9px 11px; }
  .vh-tile-v { font-size:18px; }
  .vh-grid { grid-template-columns:1fr; }
  .vh-loose, .vh-actions { grid-template-columns:1fr; }
  .vh-banner, .vh-discover { flex-direction:column; align-items:flex-start; }
  .vh-banner .vh-btn, .vh-discover-actions { width:100%; }
  .vh-discover-actions .vh-btn { flex:1; }
  .vh-link { margin-left:0; }
  .vh-sec-head { gap:8px; }
}

/* Freshness hint on the per-note topic bar. peek() reads a cached Atlas run, so
   the bar admits when that run predates the current vault instead of presenting
   an old topic as current. */
.nt-stale { font-size:10.5px; color:var(--txt3); font-style:italic; }

/* Onboarding final step — a choice that routes somewhere, replacing a
   "Get started" button that closed the modal onto an empty workspace. */
.onboarding-choices { display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.onb-choice {
  display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto;
  gap:1px 12px; align-items:center; text-align:left;
  background:var(--bg-surface); border:1px solid var(--border-soft);
  border-radius:var(--r-md); padding:11px 13px; cursor:pointer;
  font-family:inherit; transition:all var(--t);
}
.onb-choice:hover { border-color:var(--accent); background:var(--bg-raised); }
.onb-choice-ico {
  grid-row:1 / span 2; width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; font-size:15px;
  background:var(--bg-raised); color:var(--accent); border:1px solid var(--border-soft);
}
.onb-choice:hover .onb-choice-ico { background:var(--accent-dim); border-color:var(--accent); }
.onb-choice-t { font-size:13.5px; font-weight:650; color:var(--txt); }
.onb-choice-s { font-size:11.5px; color:var(--txt3); }
.onboarding-desc kbd {
  font-family:var(--font-mono); font-size:10.5px; color:var(--txt2);
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:5px; padding:1px 5px;
}

/* ═══════════════════════════════════════════════════════════
   OPEN LOOPS (js/loops.js) — commitments extracted from prose
   ═══════════════════════════════════════════════════════════ */

.loops-overlay {
  position:fixed; inset:0; z-index:1200;
  background:rgba(0,0,0,.62); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:28px;
  animation:loopsIn .18s var(--ease) both;
}
@keyframes loopsIn { from { opacity:0; } to { opacity:1; } }

.loops-panel {
  width:min(860px, 100%); max-height:min(88vh, 900px);
  display:flex; flex-direction:column;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); overflow:hidden;
}

.loops-head {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border-soft);
  background:var(--bg-raised); flex-shrink:0;
}
.loops-title {
  font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--txt);
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
}
.loops-logo { color:var(--accent); font-size:16px; }
.loops-sub { font-size:11.5px; color:var(--txt3); flex:1; min-width:0; }
.loops-sub .loops-od { color:var(--danger); }

.loops-btn {
  flex-shrink:0; background:var(--bg-surface); border:1px solid var(--border);
  color:var(--txt2); border-radius:var(--r-sm); padding:6px 11px;
  font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  transition:all var(--t);
}
.loops-btn:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); }
.loops-btn:disabled { opacity:.55; cursor:default; }

.loops-tabs {
  display:flex; gap:6px; padding:10px 16px; overflow-x:auto;
  border-bottom:1px solid var(--border-soft); flex-shrink:0;
  scrollbar-width:none;
}
.loops-tabs::-webkit-scrollbar { display:none; }
.loops-tab {
  flex-shrink:0; background:transparent; border:1px solid var(--border-soft);
  color:var(--txt3); border-radius:20px; padding:4px 11px;
  font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  transition:all var(--t); display:inline-flex; align-items:center; gap:6px;
}
.loops-tab:hover { color:var(--txt); border-color:var(--border); }
.loops-tab.active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.loops-tab.hot:not(.active) { color:var(--danger); border-color:rgba(240,82,82,.4); }
.loops-tab-n {
  background:var(--bg-raised); border-radius:12px; padding:0 6px;
  font-size:10px; font-variant-numeric:tabular-nums;
}

.loops-body { flex:1; min-height:0; overflow-y:auto; padding:6px 16px 16px; }

.loops-group { margin-top:16px; }
.loops-group-head h3 {
  font-family:var(--font-head); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--txt3);
  margin:0 0 2px; display:flex; align-items:center; gap:8px;
}
.loops-group.hot .loops-group-head h3 { color:var(--danger); }
.loops-group-n {
  background:var(--bg-raised); border-radius:12px; padding:0 7px;
  font-size:10px; color:var(--txt3); font-weight:600;
}
.loops-group-head p { margin:0 0 9px; font-size:11.5px; color:var(--txt3); }

.loops-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.loops-row {
  display:flex; align-items:flex-start; gap:11px;
  padding:10px 12px; border-radius:var(--r-md);
  background:var(--bg-raised); border:1px solid var(--border-soft);
  transition:border-color var(--t), background var(--t);
}
.loops-row:hover { border-color:var(--border); background:var(--bg-hover); }
.loops-row.maybe-done { opacity:.62; }
.loops-row.maybe-done .loops-open { text-decoration:line-through; text-decoration-thickness:1px; }
.loops-kind { color:var(--accent); font-size:13px; line-height:1.5; flex-shrink:0; width:14px; text-align:center; }
.loops-row.conf-low .loops-kind { color:var(--txt3); }

.loops-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.loops-open {
  background:none; border:none; padding:0; text-align:left; cursor:pointer;
  font-family:inherit; font-size:13px; line-height:1.45; color:var(--txt);
  transition:color var(--t);
}
.loops-open:hover { color:var(--accent); }
.loops-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:10.5px; color:var(--txt3); }
.loops-file { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.loops-due {
  color:var(--accent); border:1px solid var(--accent); border-radius:12px;
  padding:0 7px; font-weight:600;
}
.loops-due.over { color:var(--danger); border-color:var(--danger); }
.loops-restated, .loops-weakflag {
  border:1px dashed var(--border); border-radius:12px; padding:0 6px;
}
.loops-evidence { font-style:italic; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.loops-acts { display:flex; gap:4px; flex-shrink:0; }
.loops-tick, .loops-drop {
  background:var(--bg-surface); border:1px solid var(--border);
  color:var(--txt3); width:26px; height:26px; border-radius:var(--r-sm);
  font-size:12px; cursor:pointer; transition:all var(--t);
  display:grid; place-items:center; line-height:1;
}
.loops-tick:hover { color:var(--success); border-color:var(--success); }
.loops-drop:hover { color:var(--danger); border-color:var(--danger); }

.loops-foot {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 16px; border-top:1px solid var(--border-soft);
  background:var(--bg-raised); flex-shrink:0;
}
.loops-weak {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--txt2); cursor:pointer;
}
.loops-weak input { accent-color:var(--accent); cursor:pointer; }
.loops-note { font-size:11px; color:var(--txt3); margin-left:auto; }

.loops-empty { text-align:center; padding:48px 24px; }
.loops-empty-ico { font-size:32px; color:var(--accent); opacity:.7; margin-bottom:12px; }
.loops-empty h3 { font-family:var(--font-head); font-size:16px; color:var(--txt); margin:0 0 8px; }
.loops-empty p { font-size:12.5px; line-height:1.6; color:var(--txt3); max-width:400px; margin:0 auto; }

/* AI plan */
.loops-plan-modal {
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  display:grid; place-items:center; padding:24px; z-index:2;
}
.loops-plan-card {
  width:min(680px, 100%); max-height:82vh; display:flex; flex-direction:column;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); overflow:hidden;
}
.loops-plan-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--border-soft);
  background:var(--bg-raised); font-size:13px; font-weight:650; color:var(--txt);
}
.loops-plan-body { flex:1; min-height:0; overflow-y:auto; padding:16px 20px; font-size:13.5px; }
.loops-plan-body h1, .loops-plan-body h2, .loops-plan-body h3 { font-family:var(--font-head); }
.loops-plan-foot {
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-top:1px solid var(--border-soft); background:var(--bg-raised);
}
.loops-plan-hint { font-size:11px; color:var(--txt3); }
.loops-plan-foot .loops-plan-save { margin-left:auto; border-color:var(--accent); color:var(--accent); }

/* Sidebar badge goes red when something is late — a count is not a signal. */
#loopsBadge.hot { background:var(--danger); color:#fff; }

/* Reveal flash: clicking a loop scrolls to its line in the rendered note. */
.loop-flash {
  animation:loopFlash 2.1s var(--ease) both;
  border-radius:5px;
}
@keyframes loopFlash {
  0%, 62%  { background:rgba(var(--accent-rgb), .28); box-shadow:0 0 0 4px rgba(var(--accent-rgb), .18); }
  100%     { background:transparent; box-shadow:none; }
}

@media (max-width:640px) {
  .loops-overlay { padding:0; }
  .loops-panel { width:100%; height:100%; max-height:100%; border-radius:0; border:none; }
  .loops-head { flex-wrap:wrap; gap:8px; }
  .loops-sub { order:10; flex-basis:100%; }
  .loops-row { flex-wrap:wrap; }
  .loops-acts { margin-left:auto; }
  .loops-note { display:none; }
}

/* ── Open Loops: people, recurrence, snooze ─────────────── */
.loops-people {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:0 16px 11px; border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.loops-people.hidden { display:none; }
.loops-people-label {
  font-size:9.5px; text-transform:uppercase; letter-spacing:.09em;
  font-weight:700; color:var(--txt3); margin-right:2px;
}
.loops-person {
  background:transparent; border:1px solid var(--border-soft); color:var(--txt2);
  border-radius:20px; padding:3px 6px 3px 10px; font-family:inherit;
  font-size:11.5px; font-weight:600; cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; gap:6px;
}
.loops-person:hover { color:var(--txt); border-color:var(--border); }
.loops-person.active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.loops-person.hot:not(.active) { color:var(--danger); border-color:rgba(240,82,82,.35); }
.loops-person-n {
  background:var(--bg-raised); border-radius:12px; padding:0 6px;
  font-size:10px; font-variant-numeric:tabular-nums;
}
.loops-person-clear {
  background:none; border:none; color:var(--txt3); font-family:inherit;
  font-size:11px; cursor:pointer; padding:3px 6px;
}
.loops-person-clear:hover { color:var(--danger); }

.loops-who {
  border:1px solid var(--border-soft); border-radius:12px; padding:0 7px;
  font-weight:600; color:var(--txt2);
}
.loops-who.blocking { color:var(--info); border-color:rgba(96,165,250,.4); }
.loops-who.owed     { color:var(--accent); border-color:rgba(var(--accent-rgb), .4); }

.loops-recur {
  color:var(--accent2); border:1px solid var(--accent2); border-radius:12px;
  padding:0 7px; font-weight:600;
}
.loops-row.snoozed { opacity:.6; }
.loops-snoozeflag {
  color:var(--txt3); border:1px dashed var(--border); border-radius:12px; padding:0 7px;
}

.loops-snooze {
  background:var(--bg-surface); border:1px solid var(--border);
  color:var(--txt3); width:26px; height:26px; border-radius:var(--r-sm);
  font-size:12px; cursor:pointer; transition:all var(--t);
  display:grid; place-items:center; line-height:1;
}
.loops-snooze:hover { color:var(--info); border-color:var(--info); }

.loops-row { position:relative; }
.loops-snooze-menu {
  position:absolute; right:8px; top:calc(100% - 4px); z-index:5;
  display:flex; flex-direction:column; min-width:140px;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--sh-md); overflow:hidden;
}
.loops-snooze-menu button {
  background:none; border:none; text-align:left; cursor:pointer;
  font-family:inherit; font-size:12px; color:var(--txt2);
  padding:8px 12px; transition:all var(--t);
}
.loops-snooze-menu button:hover { background:var(--bg-hover); color:var(--accent); }

@media (max-width:640px) {
  .loops-people { padding:0 12px 9px; }
  .loops-snooze-menu { right:0; left:auto; }
}

/* Home: "on the hook" — who you owe / who is blocking you. */
.vh-who { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.vh-who-label {
  font-size:9.5px; text-transform:uppercase; letter-spacing:.09em;
  font-weight:700; color:var(--txt3);
}
.vh-who-chip {
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--border-soft); border-radius:20px; padding:1px 8px;
  font-size:11px; color:var(--txt2);
}
.vh-who-chip b { font-variant-numeric:tabular-nums; color:var(--txt); }
.vh-who-chip.hot { color:var(--danger); border-color:rgba(240,82,82,.4); }
.vh-who-chip.hot b { color:var(--danger); }

/* ══════════════════════════════════════════════════════
   VAULT VIEWS — tables & boards over frontmatter (views.js)
   ══════════════════════════════════════════════════════ */
.vv-overlay {
  position:fixed; inset:0; z-index:400; display:flex; flex-direction:column;
  background:var(--bg); animation:vvIn 140ms var(--ease);
}
@keyframes vvIn { from { opacity:0 } to { opacity:1 } }
@media (prefers-reduced-motion:reduce) { .vv-overlay { animation:none } }

.vv-top {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg-surface);
}
.vv-title {
  font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--txt);
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
}
.vv-logo { color:var(--accent); }
.vv-search {
  flex:1; min-width:120px; max-width:340px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md);
  padding:7px 11px; color:var(--txt); font-family:inherit; font-size:12.5px;
}
.vv-search:focus { outline:none; border-color:var(--border-focus); }
.vv-sel {
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--r-md);
  padding:7px 9px; color:var(--txt2); font-family:inherit; font-size:12px; cursor:pointer;
}
.vv-sel:focus { outline:none; border-color:var(--border-focus); }
.vv-count { font-size:11.5px; color:var(--txt3); font-variant-numeric:tabular-nums; margin-left:auto; }
.vv-btn {
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-md);
  padding:7px 11px; color:var(--txt2); font-family:inherit; font-size:12px; cursor:pointer;
  transition:all var(--t);
}
.vv-btn:hover { background:var(--bg-hover); color:var(--txt); }
.vv-colwrap { position:relative; }
.vv-cols {
  position:absolute; right:0; top:calc(100% + 6px); z-index:2; min-width:180px;
  max-height:min(420px, 60vh); overflow:auto; padding:6px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--sh-md);
}
.vv-col-opt {
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px;
  font-size:12.5px; color:var(--txt2); cursor:pointer;
}
.vv-col-opt:hover { background:var(--bg-hover); color:var(--txt); }
.vv-col-none { padding:8px; font-size:12px; color:var(--txt3); }

.vv-body { flex:1; min-height:0; overflow:auto; }

/* ── table ── */
.vv-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.vv-th {
  position:sticky; top:0; z-index:1; text-align:left; white-space:nowrap;
  padding:10px 14px; background:var(--bg-surface); color:var(--txt3);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--border); cursor:pointer; user-select:none;
}
.vv-th:hover { color:var(--txt); }
.vv-th.on { color:var(--accent); }
.vv-caret { margin-left:5px; font-size:10px; }
.vv-table td { padding:9px 14px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
.vv-table tbody tr:hover { background:var(--bg-hover); }
.vv-name { white-space:nowrap; }
.vv-open {
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
  color:var(--txt); font-family:inherit; font-size:13px; font-weight:600;
}
.vv-open:hover { color:var(--accent); text-decoration:underline; }
.vv-folder {
  margin-left:8px; font-size:10.5px; color:var(--txt3);
  border:1px solid var(--border-soft); border-radius:99px; padding:1px 7px;
}
.vv-dim { color:var(--txt3); font-size:11.5px; white-space:nowrap; }
.vv-empty { color:var(--txt3); }
.vv-chip {
  display:inline-block; margin:0 4px 3px 0; padding:2px 8px; border-radius:99px;
  background:var(--bg-active); border:1px solid var(--border-soft);
  font-size:11px; color:var(--txt2);
}
.vv-cell { cursor:text; border-radius:5px; }
.vv-cell:hover { box-shadow:inset 0 0 0 1px var(--border); }
.vv-cell:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.vv-cell.editing { box-shadow:inset 0 0 0 2px var(--accent); }
.vv-input {
  width:100%; background:var(--bg-input); border:none; border-radius:4px;
  padding:2px 5px; color:var(--txt); font-family:inherit; font-size:13px;
}
.vv-input:focus { outline:none; }

/* ── board ── */
.vv-board { display:flex; gap:14px; align-items:flex-start; padding:16px; overflow-x:auto; min-height:100%; }
.vv-col {
  flex:0 0 268px; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); display:flex; flex-direction:column; max-height:100%;
}
.vv-col-h {
  display:flex; align-items:center; gap:8px; padding:11px 13px;
  border-bottom:1px solid var(--border-soft);
}
.vv-col-t { font-weight:700; font-size:12.5px; color:var(--txt); }
.vv-col-n {
  margin-left:auto; font-size:10.5px; color:var(--txt3);
  background:var(--bg-active); border-radius:99px; padding:1px 7px;
  font-variant-numeric:tabular-nums;
}
.vv-col-b { padding:9px; display:flex; flex-direction:column; gap:7px; overflow:auto; }
.vv-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:100%;
  padding:9px 11px; text-align:left; cursor:pointer;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:var(--r-md); transition:all var(--t);
}
.vv-card:hover { background:var(--bg-hover); border-color:var(--border); }
.vv-card-t { font-size:12.5px; font-weight:600; color:var(--txt); font-family:inherit; }
.vv-card .vv-folder { margin-left:0; }

/* ── empty ── */
.vv-blank { max-width:440px; margin:16vh auto 0; text-align:center; padding:0 24px; }
.vv-blank-ico { font-size:30px; color:var(--accent); opacity:.85; }
.vv-blank-t { margin-top:12px; font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--txt); }
.vv-blank-s { margin-top:8px; font-size:13px; line-height:1.65; color:var(--txt2); }
.vv-blank-s code {
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:4px; padding:1px 5px; font-family:var(--font-mono); font-size:11.5px;
}

@media (max-width:720px) {
  .vv-top { flex-wrap:wrap; gap:7px; padding:9px 10px; }
  .vv-search { max-width:none; order:9; flex-basis:100%; }
  .vv-count { order:8; }
  .vv-table { font-size:12.5px; }
  .vv-table td, .vv-th { padding:8px 10px; }
  .vv-col { flex-basis:82vw; }
}

/* ── Home: writing calendar (heatmap) ─────────────────── */
.vh-heat-sec .vh-sec-head { margin-bottom:10px; }
.vh-heat-note { font-size:11.5px; color:var(--txt3); }
.vh-heat { display:flex; gap:3px; overflow-x:auto; padding-bottom:2px; }
.vh-heat-w { display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.vh-heat-c {
  width:13px; height:13px; padding:0; border-radius:3px; cursor:pointer;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  transition:transform 120ms var(--ease), background var(--t), border-color var(--t);
}
.vh-heat-c:hover { border-color:var(--accent); transform:scale(1.18); }
.vh-heat-c:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.vh-heat-c.on { background:var(--accent); border-color:var(--accent); }
/* Future days are placeholders that keep the grid rectangular, nothing more. */
.vh-heat-c.fut { visibility:hidden; cursor:default; }

/* ══════════════════════════════════════════════════════
   VAULT EXPLORER (js/explorer.js) — ⌘⇧B
   Miller columns: depth reads left-to-right as *distance*, not as indentation
   whitespace, so every level keeps full width for its names and a deep branch
   never squeezes the level you are actually looking at.
   ══════════════════════════════════════════════════════ */
.vx-overlay {
  position:fixed; inset:0; z-index:400; display:flex; flex-direction:column;
  background:var(--bg); animation:vxIn 160ms var(--ease);
}
@keyframes vxIn { from { opacity:0; transform:scale(.995) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce) { .vx-overlay { animation:none } }

.vx-top {
  display:flex; align-items:center; gap:12px; flex-shrink:0;
  padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg-surface);
}
.vx-title {
  font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--txt);
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
}
.vx-crumbs {
  display:flex; align-items:center; gap:4px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.vx-crumbs::-webkit-scrollbar { display:none; }
.vx-crumb {
  flex-shrink:0; padding:3px 9px; border-radius:7px; cursor:pointer;
  font-size:12px; color:var(--txt2); background:transparent; border:1px solid transparent;
  transition:color var(--t), background var(--t);
}
.vx-crumb:hover { color:var(--txt); background:var(--bg-hover); }
.vx-crumb.current { color:var(--accent); background:var(--accent-dim); border-color:rgba(var(--accent-rgb),.28); }
.vx-crumb-sep { color:var(--txt3); font-size:12px; flex-shrink:0; }

.vx-top-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.vx-count { font-size:11px; color:var(--txt3); font-family:var(--font-mono); white-space:nowrap; }
.vx-search-input {
  width:200px; padding:6px 10px; font-size:12px; font-family:inherit;
  color:var(--txt); background:var(--bg-input, var(--bg-raised));
  border:1px solid var(--border); border-radius:8px; outline:none;
  transition:border-color var(--t), width var(--t);
}
.vx-search-input:focus { border-color:rgba(var(--accent-rgb),.5); width:250px; }
.vx-views { display:flex; gap:2px; padding:2px; background:var(--bg-raised); border-radius:8px; }
.vx-view-btn {
  width:28px; height:26px; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--txt3); background:transparent; border:none;
  border-radius:6px; cursor:pointer; transition:all var(--t);
}
.vx-view-btn:hover { color:var(--txt); }
.vx-view-btn.active { color:var(--accent); background:var(--bg); box-shadow:var(--sh-sm, 0 1px 3px rgba(0,0,0,.2)); }
.vx-new, .vx-x {
  padding:6px 11px; font-size:12px; font-weight:600; font-family:inherit;
  color:var(--txt2); background:var(--bg-raised); border:1px solid var(--border);
  border-radius:8px; cursor:pointer; transition:all var(--t);
}
.vx-new:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }
.vx-x { padding:6px 10px; }
.vx-x:hover { color:var(--danger); border-color:rgba(240,82,82,.4); }

.vx-main { flex:1; min-height:0; display:flex; }
.vx-cols {
  flex:1; min-width:0; display:flex; align-items:stretch;
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
}
/* 232px, not 268: four levels then fit inside a 1320px window beside the
   preview pane, so the root column stops being clipped the moment you go three
   deep — which is the depth this view exists to make comfortable. */
.vx-col {
  flex:0 0 232px; min-width:0; display:flex; flex-direction:column;
  border-right:1px solid var(--border-soft);
  animation:vxColIn 200ms var(--ease) both;
}
.vx-col-wide { flex:1 1 auto; }
@keyframes vxColIn { from { opacity:0; transform:translateX(-14px) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce) {
  .vx-col { animation:none } .vx-cols { scroll-behavior:auto }
}
.vx-col-head {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  padding:9px 12px; border-bottom:1px solid var(--border-soft); background:var(--bg-surface);
}
.vx-col-title {
  flex:1; min-width:0; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--txt3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vx-col-add {
  flex-shrink:0; width:22px; height:22px; font-size:15px; line-height:1;
  color:var(--txt3); background:transparent; border:none; border-radius:6px;
  cursor:pointer; opacity:0; transition:all var(--t);
}
.vx-col:hover .vx-col-add, .vx-col:focus-within .vx-col-add { opacity:1; }
.vx-col-add:hover { color:var(--accent); background:var(--accent-dim); }
.vx-col-body { flex:1; min-height:0; overflow-y:auto; padding:6px; }
.vx-col-empty { padding:18px 12px; font-size:11.5px; color:var(--txt3); font-style:italic; text-align:center; }

.vx-row {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px 9px; margin-bottom:1px; border-radius:8px;
  font-size:12.5px; font-family:inherit; color:var(--txt2); text-align:left;
  background:transparent; border:1px solid transparent; cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t);
}
.vx-row:hover { background:var(--bg-hover); color:var(--txt); }
.vx-row:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55); }
.vx-row.selected {
  background:var(--accent-dim); color:var(--txt);
  border-color:rgba(var(--accent-rgb),.3);
}
.vx-row-ico { flex-shrink:0; font-size:12px; color:var(--txt3); }
.vx-folder .vx-row-ico { color:var(--accent-soft); }
.vx-row.selected .vx-row-ico { color:var(--accent); }
.vx-row-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-folder .vx-row-name { font-weight:600; color:var(--txt); }
.vx-row-meta { flex-shrink:0; font-size:10px; color:var(--txt3); font-family:var(--font-mono); }
.vx-row-where {
  flex-shrink:0; max-width:45%; font-size:10.5px; color:var(--txt3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vx-row-chev { flex-shrink:0; color:var(--txt3); font-size:13px; }

/* Grid: "which note", not "where is it" — so it flattens the branch. */
.vx-grid {
  display:grid; gap:10px; padding:16px; align-content:start;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  overflow-y:auto; width:100%;
}
.vx-card {
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  padding:12px; border-radius:10px; text-align:left; cursor:pointer;
  background:var(--bg-raised); border:1px solid var(--border);
  font-family:inherit; transition:all var(--t);
}
.vx-card:hover { border-color:rgba(var(--accent-rgb),.4); transform:translateY(-2px); box-shadow:var(--sh-md, 0 6px 20px rgba(0,0,0,.18)); }
.vx-card.selected { border-color:var(--accent); background:var(--accent-dim); }
.vx-card-name { font-size:12.5px; font-weight:600; color:var(--txt); width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-card-where { font-size:10.5px; color:var(--accent-soft); width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-card-meta { font-size:10px; color:var(--txt3); font-family:var(--font-mono); }

/* Preview — reads the note's own text only. Never triggers indexing or AI. */
/* The pane itself must NOT scroll — only the body does. When the whole pane
   scrolled, the action buttons scrolled with it and ended up sitting on top of
   the text. */
.vx-prev {
  flex:0 0 360px; display:flex; flex-direction:column; gap:10px;
  padding:16px; overflow:hidden;
  border-left:1px solid var(--border); background:var(--bg-surface);
}
.vx-prev-scroll { flex:1; min-height:0; overflow-y:auto; padding-top:10px; border-top:1px dashed var(--border); }
.vx-prev-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--txt3); font-size:12px; text-align:center;
}
.vx-prev-empty-ico { font-size:26px; opacity:.5; }
.vx-prev-title { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--txt); line-height:1.3; }
.vx-prev-where { margin-top:3px; font-size:11px; color:var(--accent-soft); }
.vx-prev-stats { display:flex; flex-wrap:wrap; gap:8px; font-size:10.5px; color:var(--txt3); font-family:var(--font-mono); }
.vx-prev-props { display:flex; flex-wrap:wrap; gap:5px; }
.vx-prop {
  padding:2px 7px; border-radius:20px; font-size:10.5px; color:var(--txt2);
  background:var(--bg-raised); border:1px solid var(--border-soft);
}
.vx-prop b { color:var(--txt3); font-weight:600; }
/* Real rendered markdown, scaled down for a 360px rail. Inherits .markdown-body
   so tables, code, math and callouts look like they do in the reader — the
   point of a preview is to recognise the note, and raw `| Feature | Details |`
   recognises nothing. */
.vx-prev-body { font-size:12px; line-height:1.6; color:var(--txt2); }
.vx-prev-body > :first-child { margin-top:0; }
.vx-prev-body h1 { font-size:16px; }
.vx-prev-body h2 { font-size:14px; }
.vx-prev-body h3, .vx-prev-body h4, .vx-prev-body h5, .vx-prev-body h6 { font-size:12.5px; }
.vx-prev-body h1, .vx-prev-body h2, .vx-prev-body h3 { margin:14px 0 6px; }
.vx-prev-body p, .vx-prev-body ul, .vx-prev-body ol, .vx-prev-body blockquote { margin:0 0 8px; }
.vx-prev-body pre { font-size:10.5px; padding:8px 10px; }
.vx-prev-body code { font-size:10.5px; }
.vx-prev-body img, .vx-prev-body .img-blocked { margin:8px 0; }
.vx-prev-body .anchor-link, .vx-prev-body .code-copy-btn, .vx-prev-body .code-lang-label { display:none; }
/* Wide content scrolls inside itself; the rail must never scroll sideways. */
.vx-prev-body .table-wrap, .vx-prev-body pre, .vx-prev-body .katex-display { overflow-x:auto; max-width:100%; }
.vx-prev-body table { font-size:10.5px; }
.vx-prev-body .mermaid svg { max-width:100%; height:auto; }
.vx-prev-none { color:var(--txt3); font-size:12px; }
.vx-prev-more {
  margin-top:12px; padding-top:8px; border-top:1px dashed var(--border);
  font-size:11px; color:var(--txt3); font-style:italic;
}
.vx-prev-actions { display:flex; gap:8px; flex-shrink:0; padding-top:10px; border-top:1px solid var(--border); }
.vx-btn {
  flex:1; padding:8px 12px; font-size:12px; font-weight:600; font-family:inherit;
  color:var(--txt2); background:var(--bg-raised); border:1px solid var(--border);
  border-radius:8px; cursor:pointer; transition:all var(--t);
}
.vx-btn:hover { color:var(--txt); border-color:var(--accent); }
.vx-btn-primary { background:var(--accent); color:#1a1205; border-color:var(--accent); }
.vx-btn-primary:hover { filter:brightness(1.08); color:#1a1205; }

.vx-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--txt3); width:100%;
}
.vx-empty-ico { font-size:30px; opacity:.4; }
.vx-empty-title { font-size:14px; font-weight:600; color:var(--txt2); }
.vx-empty-sub { font-size:12px; }

/* Phone: the preview pane and columns cannot coexist in 380px, so the preview
   drops away and the columns become one full-width list at a time. */
@media (max-width:1080px) {
  .vx-prev { flex:0 0 300px; }
}
@media (max-width:820px) {
  .vx-prev { display:none; }
  .vx-col { flex:0 0 min(232px, 78vw); }
  .vx-search-input { width:130px; }
  .vx-search-input:focus { width:150px; }
  .vx-count { display:none; }
}
@media (max-width:560px) {
  .vx-top { flex-wrap:wrap; gap:8px; }
  .vx-crumbs { order:3; flex-basis:100%; }
  .vx-col { flex:0 0 100%; }
  .vx-new .vx-label, .vx-title { font-size:13px; }
}

/* ══════════════════════════════════════════════════════
   GUIDED TOUR (js/tour.js)
   Spotlight = one element with a huge outward box-shadow. The dim IS the
   shadow, so there is a single node to position and the hole in the middle
   stays genuinely see-through — no four-panel arithmetic, no SVG mask.
   ══════════════════════════════════════════════════════ */
.vt-overlay { position:fixed; inset:0; z-index:600; animation:vtIn 180ms var(--ease); }
@keyframes vtIn { from { opacity:0 } to { opacity:1 } }
@media (prefers-reduced-motion:reduce) {
  .vt-overlay { animation:none } .vt-ring { transition:none }
}

.vt-ring {
  position:absolute; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.62), 0 0 0 2px rgba(var(--accent-rgb),.9),
             0 0 26px 4px rgba(var(--accent-rgb),.35);
  transition:left 240ms var(--ease), top 240ms var(--ease),
             width 240ms var(--ease), height 240ms var(--ease);
}
/* Matches the house convention — a bare [data-theme="light"] attribute
   selector, as used everywhere else in this file. */
[data-theme="light"] .vt-ring {
  box-shadow:0 0 0 9999px rgba(20,17,14,.42), 0 0 0 2px rgba(var(--accent-rgb),.9),
             0 0 26px 4px rgba(var(--accent-rgb),.26);
}

.vt-tip {
  position:absolute; width:min(330px, calc(100vw - 32px));
  padding:0 0 14px; border-radius:14px; overflow:hidden;
  background:var(--bg-surface); border:1px solid var(--border);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  transition:left 240ms var(--ease), top 240ms var(--ease);
}
.vt-bar { height:3px; background:var(--bg-raised); }
.vt-bar-fill { height:100%; background:var(--accent); transition:width 240ms var(--ease); }
.vt-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 0;
}
.vt-count {
  font-size:10px; font-family:var(--font-mono); color:var(--txt3);
  letter-spacing:.06em;
}
.vt-skip {
  font-size:11px; color:var(--txt3); background:none; border:none;
  cursor:pointer; font-family:inherit; padding:2px 4px; border-radius:5px;
}
.vt-skip:hover { color:var(--txt2); text-decoration:underline; }
.vt-title {
  margin:6px 0 6px; padding:0 14px;
  font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--txt);
  line-height:1.3;
}
.vt-body {
  padding:0 14px; font-size:12.5px; line-height:1.62; color:var(--txt2);
}
.vt-body b { color:var(--txt); font-weight:600; }
.vt-body code {
  font-family:var(--font-mono); font-size:11px; padding:1px 5px;
  background:var(--bg-raised); border-radius:4px; color:var(--accent-soft);
}
.vt-body kbd {
  font-family:var(--font-mono); font-size:10.5px; padding:2px 6px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:5px; color:var(--txt2);
}
.vt-foot { display:flex; gap:8px; justify-content:flex-end; padding:14px 14px 0; }
.vt-back, .vt-next {
  padding:7px 14px; font-size:12px; font-weight:600; font-family:inherit;
  border-radius:8px; cursor:pointer; transition:all var(--t);
}
.vt-back { color:var(--txt2); background:transparent; border:1px solid var(--border); }
.vt-back:hover { color:var(--txt); border-color:var(--txt3); }
.vt-next { color:#1a1205; background:var(--accent); border:1px solid var(--accent); }
.vt-next:hover { filter:brightness(1.08); }
.vt-next:focus-visible, .vt-back:focus-visible, .vt-skip:focus-visible {
  outline:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55);
}

/* On a phone the tip is pinned to the bottom — there is no "beside the target"
   on a 380px screen, and a floating card would cover whatever it points at. */
@media (max-width:640px) {
  .vt-tip {
    left:12px !important; right:12px;
    top:auto !important; bottom:12px;
    width:auto;
  }
}

/* Help button in the sidebar footer. The dot is the only thing on screen that
   says "there is a tour" — it clears itself once the tour has been taken. */
#helpBtn { position:relative; }
/* Tint the glyph as well as badging it: a lone dot floating at the corner of a
   borderless icon button reads as detached from it. */
#helpBtn:has(.help-btn-dot:not(.hidden)) { color:var(--accent); }
.help-btn-dot {
  position:absolute; top:1px; right:1px;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 2px var(--bg-surface);
  animation:helpDotPulse 2.4s var(--ease) infinite;
}
@keyframes helpDotPulse {
  0%,100% { transform:scale(1);    opacity:1;  }
  50%     { transform:scale(1.35); opacity:.65; }
}
@media (prefers-reduced-motion:reduce) { .help-btn-dot { animation:none; } }
#helpBtn:hover { color:var(--accent); }

/* "Take the tour" in the help modal footer sits left of Close, so it reads as
   the offer rather than as the way out. */
#helpTourBtn { margin-right:auto; }