/* ═══════════════════════════════════════════════════════════
   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;
  /* Reading-profile knobs. Declared here with neutral fallbacks so the reader
     renders identically for a user who has never opened the Aa popover; app.js
     only sets the ones that differ from these. */
  --reader-para-gap:      1;
  --reader-heading-scale: 1;
  letter-spacing:var(--reader-letter-spacing, normal);
}
/* Justify + hyphenate. Justification without hyphenation opens rivers of
   whitespace on a short measure, so the profiles never ship one without the
   other — but they stay independent classes because a user may want either. */
.markdown-body.is-justify { text-align:justify; text-justify:inter-word; }
.markdown-body.is-hyphens { hyphens:auto; -webkit-hyphens:auto; }
/* Never hyphenate or justify things that are not prose — a broken URL, a split
   identifier or a stretched table cell is a bug, not a typographic preference.
   `start` rather than `left`: it opts back out of justification while still
   following the writing direction, and it beats a separate `pre` override that
   only tied on specificity. */
.markdown-body.is-hyphens :is(code, pre, kbd, samp, a, .katex, th, td),
.markdown-body.is-justify :is(code, pre, kbd, samp, .katex, th, td) {
  hyphens:none; -webkit-hyphens:none; text-align:start;
}
/* 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 normally use the display face (--font-head), but when the reader has
   deliberately chosen serif or mono, a geometric sans heading over a Georgia
   body reads as two documents stitched together — it fights the whole point of
   the Manuscript / Newsprint / Academic profiles. Follow the chosen face. */
.markdown-body.is-serif :is(h1, h2, h3, h4, h5, h6) { font-family:Georgia, 'Times New Roman', serif; }
.markdown-body.is-mono  :is(h1, h2, h3, h4, h5, h6) { font-family:var(--font-mono); letter-spacing:0; }

/* 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:calc(2em    * var(--reader-heading-scale)); 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:calc(1.5em  * var(--reader-heading-scale)); margin-top:2.4em; }
.markdown-body h3 { font-size:calc(1.25em * var(--reader-heading-scale)); }
.markdown-body h4 { font-size:calc(1.05em * var(--reader-heading-scale)); }
.markdown-body h5 { font-size:calc(.95em  * var(--reader-heading-scale)); opacity:.85; }
.markdown-body h6 { font-size:calc(.9em   * var(--reader-heading-scale)); 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:calc(1em * var(--reader-para-gap)); }
/* The rhythm knob has to move lists and quotes too, or raising it just
   detaches the paragraphs from everything else on the page. */
.markdown-body :is(ul, ol, blockquote, pre, table) { margin-bottom:calc(1em * var(--reader-para-gap)); }
.markdown-body li > :is(ul, ol) { margin-bottom:0; }
.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 */
}
/* Column alignment. Centred is the default and the right answer for a reading
   surface; left exists because in split mode the editor is left-aligned and a
   centred preview makes the same sentence jump sideways between panes.
   Applied to every reading surface so the setting doesn't half-apply. */
body[data-reader-align="left"] :is(.preview-scroll, .split-preview-scroll) { align-items:flex-start; }
body[data-reader-align="left"] .focus-scroll { justify-content:flex-start; }

/* Second .preview-scroll rule (the chat-panel layout). It used to also say
   `align-items:flex-start`, which — same specificity, later in the file — beat
   the `center` set at the top of this stylesheet. The result: the reading column
   was pinned to the left edge with the whole rest of the pane empty (680px of
   text against 730px of nothing at 1440px wide), and _initContentResizer's drag
   maths, which grows the column symmetrically about its centre, ran at double
   speed because the column was not actually centred. Only `flex` differs here
   now; alignment is inherited from the base rule so the two cannot diverge again. */
.preview-scroll {
  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);
}

/* A note carrying its own reading settings is otherwise invisible until you
   open the popover — you could wonder for a while why one note looks different.
   The dot rides the Aa button; the button's own title says what it means. */
#readerAaBtn { position:relative; }
.aa-dot {
  position:absolute; top:2px; right:2px;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 2px var(--bg-surface);
  pointer-events:none;
}
.aa-dot.hidden { display:none; }

/* ── Reading profiles ──────────────────────────────────────
   The popover grew from 5 controls to 12 plus a profile grid, so it now has to
   scroll rather than run off the bottom of the viewport. app.js caps
   --rt-max-h to the space actually below the button. */
.reader-typo-popover {
  width:320px; max-width:calc(100vw - 24px);
  max-height:var(--rt-max-h, 78vh); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.reader-typo-popover::-webkit-scrollbar { width:8px; }
.reader-typo-popover::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

.rt-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rt-reset {
  font-size:11px; padding:3px 8px; border-radius:var(--r-sm); cursor:pointer;
  background:transparent; border:1px solid var(--border); color:var(--txt3);
  transition:all var(--t);
}
.rt-reset:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.45); }

.rt-profiles { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.rt-profile {
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:7px 9px; border-radius:var(--r-sm); cursor:pointer; text-align:left;
  background:var(--bg-active); border:1px solid var(--border); color:var(--txt2);
  transition:all var(--t);
}
.rt-profile:hover { color:var(--txt); border-color:rgba(var(--accent-rgb),.45); }
.rt-profile.active {
  color:var(--accent); border-color:var(--accent); background:var(--accent-dim);
}
.rt-profile-name { font-size:12px; font-weight:600; line-height:1.25; }
.rt-profile-hint {
  font-size:10px; line-height:1.3; color:var(--txt3);
  /* The hint is the reason to pick one profile over another, so it must not be
     clipped to a single word — two lines, then ellipsis. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rt-profile.active .rt-profile-hint { color:var(--accent); opacity:.85; }
/* "Custom" only appears once the user has actually diverged from a profile —
   an always-present dead chip reads as a feature that does nothing. */
.rt-profile[data-profile="custom"] { grid-column:1 / -1; }
.rt-profile[data-profile="custom"].hidden { display:none; }

/* Per-note memory */
.rt-pernote {
  display:flex; align-items:flex-start; gap:8px; cursor:pointer;
  padding:8px 9px; border-radius:var(--r-sm);
  background:var(--bg-active); border:1px solid var(--border);
  transition:all var(--t);
}
.rt-pernote:hover { border-color:rgba(var(--accent-rgb),.45); }
.rt-pernote.on { border-color:var(--accent); background:var(--accent-dim); }
.rt-pernote input { accent-color:var(--accent); margin-top:1px; cursor:pointer; flex:none; }
.rt-pernote-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.rt-pernote-title { font-size:12px; font-weight:600; color:var(--txt2); }
.rt-pernote.on .rt-pernote-title { color:var(--accent); }
.rt-pernote-sub {
  font-size:10px; color:var(--txt3); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rt-pernote[aria-disabled="true"] { opacity:.45; pointer-events:none; }

/* Live measure readout under the width slider. This is the differentiator:
   it names the number typographers actually care about (characters per line)
   instead of leaving the user to guess what 680px means. */
.rt-measure {
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; color:var(--txt3); font-family:var(--font-mono);
}
.rt-measure-dot { width:6px; height:6px; border-radius:50%; background:var(--txt3); flex:none; }
.rt-measure[data-quality="good"] .rt-measure-dot { background:var(--success, #10B981); }
.rt-measure[data-quality="ok"]   .rt-measure-dot { background:#F59E0B; }
.rt-measure[data-quality="poor"] .rt-measure-dot { background:var(--danger, #EF4444); }
.rt-measure[data-quality="good"] { color:var(--txt2); }

/* Compact slider rows for the fine-typography knobs */
.rt-slider-row { display:flex; flex-direction:column; gap:5px; }
.rt-slider-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* Toggle chips (justify / hyphenate) and the column-position pair.
   .rt-align is a two-way choice, so exactly one is always lit; .rt-toggle is an
   independent on/off. Same shape, different semantics. */
.rt-toggles { display:flex; gap:6px; }
.rt-align {
  flex:1; padding:6px 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);
}
.rt-align:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }
.rt-align.active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.rt-toggle {
  flex:1; padding:6px 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);
}
.rt-toggle:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); }
.rt-toggle.active { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }

@media (max-width:640px) {
  .reader-typo-popover { width:auto; left:12px; right:12px; }
  .rt-profiles { grid-template-columns:1fr 1fr; }
  /* Phones force `.markdown-body { max-width:100% !important }`, so the width
     slider, its readout and the presets cannot change anything here. A control
     that visibly does nothing is worse than an absent one. The measure readout
     stays — it still moves with text size. */
  #rtWidthBlock { display:none; }
}

/* 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. */
/* The same grounds serve Focus mode AND the shared-link article view. All three
   are listed alongside each block rather than duplicated, so the surfaces cannot
   drift apart; `.focus-overlay[data-reading-theme]` beats
   `.focus-overlay[data-theme]` above by being later. */
body[data-reading-theme] .preview-scroll,
.shared-viewer[data-reading-theme],
.focus-overlay[data-reading-theme] { background:var(--bg); color:var(--txt); }
body[data-reading-theme="sepia"] .preview-scroll,
.shared-viewer[data-reading-theme="sepia"],
.focus-overlay[data-reading-theme="sepia"] {
  --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,
.shared-viewer[data-reading-theme="cream"],
.focus-overlay[data-reading-theme="cream"] {
  --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,
.shared-viewer[data-reading-theme="contrast"],
.focus-overlay[data-reading-theme="contrast"] {
  --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,
.shared-viewer[data-reading-theme="amoled"],
.focus-overlay[data-reading-theme="amoled"] {
  --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; }

/* ═══════════════════════════════════════════════════════════
   FEEDBACK  (js/feedback.js · #feedbackModal)

   Hallmark · component: modal (3-step feedback flow) · genre: modern-minimal
   theme: project "Warm Premium" — every value below is an existing token from
   the :root block at the top of this file. No new colours, no new fonts.
   states: default · hover · focus · active · disabled · loading · error · success
   pre-emit critique: P5 H5 E4 S5 R4 V5

   The pulse row is a scale drawn as ascending bars, not a row of emoji faces:
   this app's icon language is geometric glyphs (◈ ⌂ ⟳ ▦) and a 🙂 in the middle
   of it reads as a different product. Bar height IS the value, so the scale
   survives greyscale and colour-blindness — the accent fill is the second
   signal, never the only one.
   ═══════════════════════════════════════════════════════════ */

.fb-modal { max-width:520px; gap:14px; }

.fb-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.fb-sub  { font-size:12px; color:var(--txt2); line-height:1.5; margin-top:4px; }

.fb-x {
  flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--txt3); font-size:12px; cursor:pointer;
  transition:background-color var(--t), color var(--t), border-color var(--t);
}
/* Hover only where hovering exists — a touch device would otherwise keep the
   hover paint after the tap. */
@media (hover:hover) { .fb-x:hover { background:var(--bg-hover); color:var(--txt); } }
.fb-x:active { transform:translateY(1px); }
/* 28px is the drawn size; the hit target is 44px in every direction. */
.fb-x::before { content:""; position:absolute; inset:-8px; }
.fb-x { position:relative; }

/* ── Progress rail ───────────────────────────────────────
   Three segments, so you can see there is no fourth. */
.fb-rail { display:flex; gap:4px; }
.fb-rail i {
  flex:1; height:3px; border-radius:2px; background:var(--bg-active);
  transition:background-color 180ms var(--ease);
}
.fb-rail i.done { background:var(--accent); }

/* ── Step 1 · the pulse ──────────────────────────────── */
.fb-pulse-row {
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px;
}
.fb-pulse {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  min-height:76px; padding:10px 4px 9px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--txt2); cursor:pointer;
  outline:2px solid transparent; outline-offset:2px;   /* reserved: no shift on focus */
  transition:background-color var(--t), border-color var(--t), color var(--t), transform 100ms var(--ease);
}
@media (hover:hover) {
  .fb-pulse:hover { background:var(--bg-hover); border-color:var(--accent); color:var(--txt); }
}
.fb-pulse:focus-visible { outline-color:var(--accent); }
.fb-pulse:active { transform:translateY(1px); }
.fb-pulse.on {
  background:var(--accent-dim); border-color:var(--accent); color:var(--txt);
}
.fb-pulse-bar {
  width:15px; height:32px; display:flex; align-items:flex-end;
}
.fb-pulse-bar i {
  display:block; width:100%; border-radius:2px 2px 1px 1px;
  background:var(--txt2);
  transition:background-color var(--t);
}
@media (hover:hover) { .fb-pulse:hover .fb-pulse-bar i { background:var(--accent); } }
.fb-pulse.on .fb-pulse-bar i { background:var(--accent); }
.fb-pulse-label {
  font-size:11px; font-weight:600; line-height:1.1; text-align:center;
  /* Five labels across a 320px phone. Long words break rather than wrap the
     button into two clickable lines. */
  overflow-wrap:anywhere; min-width:0;
}

.fb-hint { font-size:11.5px; color:var(--txt2); margin-top:11px; }

/* ── Step 2 · chips ──────────────────────────────────── */
.fb-ask { font-family:var(--font-head); font-size:13.5px; font-weight:650; color:var(--txt); }
.fb-chip-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.fb-chip {
  padding:7px 12px; min-height:34px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:999px; color:var(--txt2);
  font-size:12px; font-weight:550; cursor:pointer; white-space:nowrap;
  outline:2px solid transparent; outline-offset:2px;
  transition:background-color var(--t), border-color var(--t), color var(--t), transform 100ms var(--ease);
}
@media (hover:hover) { .fb-chip:hover { background:var(--bg-hover); color:var(--txt); } }
.fb-chip:focus-visible { outline-color:var(--accent); }
.fb-chip:active { transform:translateY(1px); }
/* Selected state carries three signals — fill, border and a leading check —
   so it is not colour alone. */
.fb-chip.on {
  background:var(--accent-dim); border-color:var(--accent); color:var(--txt);
}
.fb-chip.on::before { content:"✓ "; font-weight:700; color:var(--accent); }

/* ── Step 3 · the sentence ───────────────────────────── */
.fb-label {
  display:block; font-size:11.5px; font-weight:650; color:var(--txt2);
  letter-spacing:.02em; margin-bottom:5px;
}
.fb-opt { font-weight:500; color:var(--txt2); letter-spacing:0; }
[data-fbstep="3"] .fb-label:not(:first-child) { margin-top:15px; }

/* Border width is 1px in every state. State changes go to background and
   outline, never to geometry — a field that grows on focus is a layout shift
   the eye reads as untuned. */
.fb-textarea, .fb-input {
  width:100%; background:var(--bg-input);
  border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--txt); font-family:var(--font); font-size:13px; line-height:1.55;
  padding:10px 12px;
  outline:2px solid transparent; outline-offset:1px;
  transition:background-color var(--t), border-color var(--t);
}
.fb-textarea { min-height:92px; resize:vertical; }
.fb-textarea::placeholder, .fb-input::placeholder { color:var(--txt3); }
@media (hover:hover) {
  .fb-textarea:hover, .fb-input:hover { background:var(--bg-raised); }
}
.fb-textarea:focus-visible, .fb-input:focus-visible,
.fb-textarea:focus, .fb-input:focus { outline-color:var(--accent); border-color:var(--border-focus); }
.fb-input[aria-invalid="true"] { border-color:var(--danger); }

.fb-meta-row { display:flex; justify-content:space-between; gap:10px; margin-top:5px; }
.fb-count { font-size:11px; color:var(--txt2); font-variant-numeric:tabular-nums; }

/* Helper text holds one line of height whether or not it has content, so
   swapping in an error message doesn't shove the form downwards. */
.fb-help {
  display:block; min-height:16px; margin-top:5px;
  font-size:11px; color:var(--txt2); line-height:1.45;
}
.fb-help.is-error { color:var(--danger); }
.fb-help.is-error::before { content:"⚠ "; }
.fb-error { font-size:12px; color:var(--danger); }
.fb-error::before { content:"⚠ "; }

/* ── Step 4 · done ───────────────────────────────────── */
.fb-done { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 0 6px; text-align:center; }
.fb-done-mark { font-size:26px; color:var(--accent); }
.fb-done-t { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--txt); }
.fb-done-s { font-size:12.5px; color:var(--txt2); line-height:1.55; max-width:40ch; }

/* ── Footer ──────────────────────────────────────────── */
.fb-foot { align-items:center; justify-content:flex-start; }
.fb-spacer { flex:1 1 auto; }
.fb-quiet {
  background:transparent; border:none; padding:6px 2px;
  color:var(--txt2); font-size:11.5px; cursor:pointer;
  outline:2px solid transparent; outline-offset:2px; border-radius:var(--r-sm);
  transition:color var(--t);
}
@media (hover:hover) { .fb-quiet:hover { color:var(--txt); } }
.fb-quiet:focus-visible { outline-color:var(--accent); }

/* Loading: the label already says "Sending…", the spinner says it is moving,
   and the disabled state stops a second submit. Three signals, one button. */
#fbSend[data-state="loading"] {
  opacity:.75; cursor:progress; display:inline-flex; align-items:center; gap:7px;
}
#fbSend[data-state="loading"]::before {
  content:""; width:11px; height:11px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin 700ms linear infinite;
}
#fbSend:disabled { cursor:not-allowed; }
#fbSend:focus-visible, #fbToNote:focus-visible, #fbDoneClose:focus-visible,
#helpFeedbackBtn:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ── The viewer's way in ─────────────────────────────── */
.sv-footer-fb {
  background:transparent; border:none; padding:4px 2px;
  color:var(--txt2); font-size:12px; cursor:pointer;
  border-bottom:1px solid transparent; border-radius:2px;
  outline:2px solid transparent; outline-offset:2px;
  transition:color var(--t), border-color var(--t);
}
@media (hover:hover) { .sv-footer-fb:hover { color:var(--accent); border-bottom-color:var(--accent); } }
.sv-footer-fb:focus-visible { outline-color:var(--accent); }

/* ── Phones ──────────────────────────────────────────── */
@media (max-width:640px) {
  .fb-modal { max-width:100%; gap:12px; padding:18px 16px; }
  .fb-pulse { min-height:70px; padding:9px 2px 8px; }
  .fb-pulse-bar { height:26px; width:12px; }
  .fb-pulse-label { font-size:10px; }
  .fb-chip { font-size:11.5px; white-space:normal; }
  /* Send is the action; it takes the full width rather than sharing a row with
     three quiet controls at 320px. */
  .fb-foot { flex-wrap:wrap; }
  .fb-foot #fbSend, .fb-foot #fbToNote { flex:1 1 100%; }
  .fb-spacer { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .fb-pulse, .fb-chip, .fb-x, .fb-rail i, .fb-textarea, .fb-input, .fb-quiet, .sv-footer-fb {
    transition-duration:.01ms;
  }
  .fb-pulse:active, .fb-chip:active, .fb-x:active { transform:none; }
  #fbSend[data-state="loading"]::before { animation:none; }
}
.fb-mail { color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
@media (hover:hover) { .fb-mail:hover { border-bottom-color:var(--accent); } }
.fb-mail:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

/* 🐞 The shared viewer is `z-index:900` and the base `.modal-overlay` is 500, so
   this modal opened *behind* the document a viewer was reading: `hidden` was
   off, the element was "visible" to any classList check, and the user saw
   nothing. The viewer is one of the two surfaces this modal exists to serve, so
   it has to outrank it (and Focus mode at 800, and the lightbox at 900). */
#feedbackModal { z-index:950; }

/* ══════════════════════════════════════════════════════════
   ARTICLE VIEW — the shared-link reading surface (js/article.js)

   Scoped entirely under `.shared-viewer.av-on`. Nothing here can reach the
   app: the same class names would otherwise collide with the preview pane,
   which shares `.markdown-body` and its custom-property contract.

   The column, the rail and the spine are three separate planes:
     · the column scrolls        (inside .shared-viewer-scroll)
     · the rail and spine are FIXED and offset by --av-top, which article.js
       measures from the scroll container — the topbar wraps to two rows on a
       phone and a hard-coded offset would sit under it.
   ══════════════════════════════════════════════════════════ */

.shared-viewer.av-on {
  --av-top: 60px;
  /* --av-foot-h is measured by article.js; --av-foot is what everything reads,
     so immersive can zero it without fighting an inline style. */
  --av-foot: var(--av-foot-h, 0px);
}

/* ── Reading progress ─────────────────────────────────── */
.av-progress {
  height:3px; flex:none; background:var(--border-soft);
  position:relative; overflow:hidden;
}
.av-progress i {
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent-soft), var(--accent));
  transition:width .12s linear;
}

/* ── Layout ───────────────────────────────────────────── */
.av-layout { position:relative; display:block; }
.av-main {
  display:flex; flex-direction:column; align-items:center;
  padding:0 clamp(16px, 5vw, 48px) 96px;
}
.shared-viewer.av-on .markdown-body.av-article {
  width:100%; margin:0; padding:0;
}
/* Full-bleed is a deliberate choice, not an accident of a wide screen. */
.shared-viewer.av-on.is-full .av-main { padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px); }

/* ── Masthead ─────────────────────────────────────────── */
.av-mast {
  width:100%; margin:0 0 clamp(28px, 5vw, 44px);
  padding:clamp(28px, 6vw, 56px) 0 0;
}
.av-cover {
  margin:0 0 clamp(20px,4vw,32px); border-radius:14px; overflow:hidden;
  border:1px solid var(--border); background:var(--bg-surface);
}
.av-cover img { display:block; width:100%; height:auto; }

.av-kicker {
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--txt2); margin-bottom:14px;
}
.av-kicker-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.av-title {
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(28px, 5.4vw, 46px); line-height:1.12;
  letter-spacing:-.02em; margin:0 0 14px; color:var(--txt);
  overflow-wrap:break-word;
}
.av-dek {
  font-size:clamp(15px, 2.2vw, 18.5px); line-height:1.55;
  color:var(--txt2); margin:0 0 20px; max-width:62ch;
}
.av-byline {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13px; color:var(--txt2);
}
.av-avatar {
  width:28px; height:28px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--accent-dim); color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.3);
  font-family:var(--font-head); font-weight:700; font-size:12.5px;
}
.av-author { color:var(--txt); font-weight:600; }
.av-dot { color:var(--txt3); }

.av-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.av-tag {
  font-size:11.5px; font-family:var(--font-mono); color:var(--txt2);
  background:var(--bg-raised); border:1px solid var(--border-soft);
  padding:3px 9px; border-radius:20px;
}

/* "Inside" — the document's composition, as pressable chips. */
.av-inside {
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--border-soft);
}
.av-inside-lead {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt3); margin-right:3px;
}
.av-chip {
  font:inherit; font-size:12px; color:var(--txt2); cursor:pointer;
  background:var(--bg-raised); border:1px solid var(--border);
  padding:5px 11px; border-radius:20px;
  transition:color var(--t), border-color var(--t), background var(--t);
}
.av-chip::after { content:attr(data-pos); margin-left:6px; color:var(--accent); font-family:var(--font-mono); font-size:10.5px; }
.av-chip-do { color:var(--accent); border-color:rgba(var(--accent-rgb),.35); }
@media (hover:hover) {
  .av-chip:hover { color:var(--txt); border-color:rgba(var(--accent-rgb),.45); background:var(--bg-hover); }
}
.av-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Outline rail ─────────────────────────────────────── */
.av-rail {
  position:fixed; left:0; top:var(--av-top); bottom:var(--av-foot, 0px); width:268px; z-index:6;
  background:var(--bg-surface); border-right:1px solid var(--border);
  transform:translateX(-100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1), top .28s var(--av-ease);
  display:flex; flex-direction:column;
}
.av-rail.open { transform:none; }
.av-rail-inner { display:flex; flex-direction:column; min-height:0; flex:1; padding:18px 8px 14px 18px; }
.av-rail-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding-right:10px; margin-bottom:12px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--txt3);
}
.av-rail-pct { color:var(--accent); font-variant-numeric:tabular-nums; }
.av-toc { flex:1; min-height:0; overflow-y:auto; padding-right:10px; scrollbar-width:thin; }
.av-toc-item {
  display:flex; align-items:flex-start; gap:9px;
  padding:6px 8px 6px 0; border-radius:7px;
  font-size:12.5px; line-height:1.4; color:var(--txt2);
  text-decoration:none; cursor:pointer; transition:color var(--t);
}
.av-toc-item i {
  flex:none; width:2px; align-self:stretch; min-height:14px; margin-top:2px;
  border-radius:2px; background:var(--border);
  transition:background var(--t);
}
.av-toc-item.d1 { padding-left:12px; font-size:12px; }
.av-toc-item.d2 { padding-left:24px; font-size:11.5px; color:var(--txt3); }
.av-toc-item.d3 { padding-left:34px; font-size:11.5px; color:var(--txt3); }
.av-toc-item.read       { color:var(--txt3); }
.av-toc-item.read i     { background:rgba(var(--accent-rgb),.4); }
.av-toc-item.active     { color:var(--txt); font-weight:600; }
.av-toc-item.active i   { background:var(--accent); }
@media (hover:hover) { .av-toc-item:hover { color:var(--txt); } }
.av-toc-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.av-rail-foot {
  padding:12px 10px 0 0; margin-top:8px; border-top:1px solid var(--border-soft);
  font-size:11.5px; color:var(--txt2);
}
/* Wide enough for a rail and a centred column not to fight. */
@media (min-width:1080px) {
  .shared-viewer.av-on.rail-open .av-layout { padding-left:268px; }
}
@media (max-width:1079px) {
  .av-rail { box-shadow:12px 0 40px rgba(0,0,0,.28); }
}
/* A drawer over the text needs something between the two, or the page behind it
   reads as part of the same surface. */
.av-scrim {
  position:fixed; inset:0; z-index:5;
  background:rgba(0,0,0,.42); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .22s var(--av-ease);
}
.av-scrim[hidden] { display:none; }
.av-scrim.in { opacity:1; }

/* ── Spine — one tick per block, typed by what the block is ── */
.av-spine {
  position:fixed; right:0; top:var(--av-top); bottom:var(--av-foot, 0px); width:30px; z-index:5;
  display:flex; align-items:stretch; justify-content:center;
  /* No padding: the eye is positioned against the spine's own box while the
     ticks are positioned against the track's, so any inset here desynchronises
     the two by exactly that many pixels. */
  padding:0;
}
.av-spine.av-hide { display:none; }
.av-spine-track { position:relative; width:12px; cursor:pointer; }
.av-spine-track i {
  position:absolute; left:4px; width:4px; border-radius:2px;
  background:var(--txt3); min-height:2px; opacity:.42;
  transition:width .16s var(--av-ease), opacity .16s var(--av-ease);
}
/* Only the headings carry colour at rest — everything else is terrain. Hovering
   the spine is the request to see the whole legend. */
.av-spine:hover .av-spine-track i { opacity:.9; width:8px; left:2px; }
.av-spine:hover .av-spine-track i.k-head { width:18px; left:-3px; }
.av-spine-track i.k-head  { background:var(--accent); left:-3px; width:18px; border-radius:3px; opacity:1; }
.av-spine-track i.k-code  { background:var(--accent); opacity:.34; }
.av-spine-track i.k-table { background:var(--info);   opacity:.5; }
.av-spine-track i.k-diag  { background:var(--accent2);opacity:.5; }
.av-spine-track i.k-img   { background:var(--success);opacity:.45; }
.av-spine-track i.k-task  { background:var(--accent-soft); opacity:.45; }
.av-spine-track i.k-quote { background:var(--txt3);   opacity:.5; }
.av-spine-track i.k-rule  { background:transparent; }
.av-spine-eye {
  position:absolute; right:3px; width:24px; pointer-events:none;
  border:1px solid rgba(var(--accent-rgb),.55); border-radius:4px;
  background:rgba(var(--accent-rgb),.09);
  transition:top .1s linear;
}
.av-spine-tip {
  position:absolute; right:36px; transform:translateY(-50%);
  max-width:230px; padding:5px 10px; border-radius:8px;
  background:var(--bg-raised); border:1px solid var(--border);
  color:var(--txt); font-size:11.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
@media (max-width:1180px) { .av-spine { display:none; } }
/* The comments FAB is fixed bottom-right, which is exactly where the spine is. */
@media (min-width:1181px) { .shared-viewer.av-on #scFab { right:52px; } }
/* A transient bar along the bottom edge and the comments FAB were fighting for
   the same corner — on a phone the FAB was painted directly over the step bar's
   ✕. Stacking them just moves the collision, because the bar's height depends on
   how many controls it is carrying. The FAB steps aside for as long as a bar is
   up and comes straight back; it is the secondary affordance and the bar is
   what the reader just asked for. */
/* Same reasoning for a panel: at z-index 600 the FAB paints over every article
   surface (they run 19–30), and on a phone the reading panel is anchored to the
   bottom edge — so the FAB landed exactly on `Reset`, and tapping Reset opened
   comments. A panel is what the reader just asked for; the FAB waits. */
.shared-viewer.av-on:has(.av-stepbar.in, .av-speak.in, .av-back.in) #scFab,
.shared-viewer.av-on:has(.av-panel:not(.hidden), .av-marks:not(.hidden),
                         .av-find:not(.hidden), .av-cmd:not(.hidden)) #scFab {
  opacity:0; pointer-events:none; transform:translateY(8px);
}
#scFab { transition:opacity .18s var(--av-ease), transform .18s var(--av-ease), border-color var(--t); }
/* The pinned panel takes the bottom-right corner the comments FAB was using. */
.shared-viewer.av-on.av-pinned #scFab { bottom:calc(min(46vh, 420px) + var(--av-foot, 0px) + 26px); }
.shared-viewer.av-on.av-pinned:has(.av-pin.folded) #scFab { bottom:calc(var(--av-foot, 0px) + 70px); }

/* ── Reading panel (Aa) ───────────────────────────────── */
.av-panel {
  position:fixed; right:14px; top:calc(var(--av-top) + 8px); z-index:20;
  width:min(340px, calc(100vw - 28px)); max-height:calc(100vh - var(--av-top) - 24px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:14px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.42);
  display:flex; flex-direction:column; gap:15px;
}
.av-panel.hidden { display:none; }
.av-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--txt);
}
.av-panel-x, .av-marks-head button, .av-find button {
  background:none; border:none; color:var(--txt2); cursor:pointer;
  font-size:13px; padding:4px 6px; border-radius:6px; line-height:1;
}
@media (hover:hover) { .av-panel-x:hover, .av-marks-head button:hover { color:var(--txt); background:var(--bg-hover); } }
.av-row { display:flex; flex-direction:column; gap:7px; }
.av-row > label {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt2);
}
.av-seg, .av-profiles, .av-grounds { display:flex; flex-wrap:wrap; gap:5px; }
.av-seg button, .av-profiles button, .av-grounds button, .av-stepper button, .av-reset {
  font:inherit; font-size:12px; color:var(--txt2); cursor:pointer;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; padding:6px 10px;
  transition:color var(--t), border-color var(--t), background var(--t);
}
.av-seg button { flex:1 1 0; min-width:56px; }
.av-grounds button { display:flex; align-items:center; gap:6px; }
@media (hover:hover) {
  .av-seg button:hover, .av-profiles button:hover, .av-grounds button:hover,
  .av-stepper button:hover, .av-reset:hover { color:var(--txt); background:var(--bg-hover); }
}
.av-seg button.on, .av-profiles button.on, .av-grounds button.on {
  color:var(--txt); border-color:var(--accent); background:var(--accent-dim);
}
.av-seg button:focus-visible, .av-profiles button:focus-visible,
.av-grounds button:focus-visible, .av-stepper button:focus-visible,
.av-reset:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.av-sw { width:13px; height:13px; border-radius:4px; border:1px solid var(--border); flex:none; }
.av-sw-app      { background:linear-gradient(135deg,#14110E 50%,#FAF9F6 50%); }
.av-sw-sepia    { background:#F4ECD8; }
.av-sw-cream    { background:#FBF7EE; }
.av-sw-contrast { background:linear-gradient(135deg,#000 50%,#fff 50%); }
.av-sw-amoled   { background:#000; }
.av-stepper { display:flex; align-items:center; gap:8px; }
.av-stepper output {
  font-family:var(--font-mono); font-size:12px; color:var(--txt);
  min-width:44px; text-align:center;
}
.av-measure { font-family:var(--font-mono); font-size:10.5px; text-transform:none; letter-spacing:0; color:var(--txt2); }
.av-measure.q-good { color:var(--success); }
.av-measure.q-ok   { color:var(--accent); }
.av-measure.q-poor { color:var(--danger); }
.av-row input[type="range"] { width:100%; accent-color:var(--accent); }
.av-row-checks { flex-direction:row; align-items:center; gap:14px; flex-wrap:wrap; }
.av-check { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--txt2); cursor:pointer; }
.av-check input { accent-color:var(--accent); }
.av-reset { margin-left:auto; }
.av-panel-foot {
  font-size:11px; line-height:1.5; color:var(--txt2);
  border-top:1px solid var(--border-soft); padding-top:11px;
}

/* ── Find in document ─────────────────────────────────── */
.av-find {
  position:fixed; right:14px; top:calc(var(--av-top) + 8px); z-index:20;
  display:flex; align-items:center; gap:6px;
  width:min(380px, calc(100vw - 28px));
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:12px; padding:7px 9px; box-shadow:0 16px 44px rgba(0,0,0,.4);
}
.av-find.hidden { display:none; }
.av-find-ico { display:flex; color:var(--txt3); flex:none; }
.av-find-ico svg { width:14px; height:14px; }
.av-find input {
  flex:1; min-width:0; font:inherit; font-size:13px;
  background:transparent; border:none; color:var(--txt); outline:none;
}
.av-find input::placeholder { color:var(--txt3); }
.av-find-n {
  font-family:var(--font-mono); font-size:11px; color:var(--txt2);
  white-space:nowrap; flex:none;
}
.av-find button { flex:none; font-size:12px; }
@media (hover:hover) { .av-find button:hover { color:var(--txt); background:var(--bg-hover); } }

/* ── Selection toolbar ────────────────────────────────── */
.av-sel {
  position:fixed; z-index:24; display:flex; gap:2px; padding:4px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.45);
}
.av-sel.hidden { display:none; }
.av-sel button {
  font:inherit; font-size:12px; color:var(--txt2); cursor:pointer;
  background:none; border:none; border-radius:7px; padding:6px 10px;
  white-space:nowrap;
}
@media (hover:hover) { .av-sel button:hover { color:var(--txt); background:var(--bg-hover); } }

/* ── Highlights ───────────────────────────────────────── */
::highlight(av-hl) {
  background-color:rgba(var(--accent-rgb), .26);
  text-decoration:underline; text-decoration-color:rgba(var(--accent-rgb), .55);
  text-underline-offset:3px;
}
::highlight(av-find)    { background-color:rgba(var(--accent-rgb), .2); }
::highlight(av-find-on) { background-color:var(--accent); color:var(--on-accent); }

.av-marks {
  position:fixed; right:14px; top:calc(var(--av-top) + 8px); z-index:20;
  width:min(340px, calc(100vw - 28px)); max-height:calc(100vh - var(--av-top) - 24px);
  display:flex; flex-direction:column;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.42); overflow:hidden;
}
.av-marks.hidden { display:none; }
.av-marks-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 14px; border-bottom:1px solid var(--border-soft);
  font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--txt);
}
.av-marks-list { flex:1; min-height:0; overflow-y:auto; padding:8px; }
.av-marks-empty { font-size:12.5px; line-height:1.6; color:var(--txt2); padding:14px 8px; margin:0; }
.av-mark {
  display:flex; gap:8px; align-items:flex-start;
  padding:9px 10px; border-radius:9px; cursor:pointer;
  border-left:2px solid rgba(var(--accent-rgb),.55);
  background:var(--bg-input); margin-bottom:6px;
}
@media (hover:hover) { .av-mark:hover { background:var(--bg-hover); } }
.av-mark q { flex:1; font-size:12.5px; line-height:1.55; color:var(--txt2); quotes:none; }
.av-mark-x { background:none; border:none; color:var(--txt3); cursor:pointer; font-size:11px; padding:2px 4px; line-height:1; }
@media (hover:hover) { .av-mark-x:hover { color:var(--danger); } }
.av-marks-foot { padding:10px 14px; border-top:1px solid var(--border-soft); font-size:11px; color:var(--txt2); }

/* ── Footnote popover ─────────────────────────────────── */
.av-fn-pop {
  position:fixed; z-index:22; padding:11px 13px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:11px; box-shadow:0 14px 40px rgba(0,0,0,.45);
  font-size:13px; line-height:1.6; color:var(--txt2);
}
.av-fn-pop[hidden] { display:none; }
.av-fn-pop p { margin:0; }

/* ── Code blocks ──────────────────────────────────────── */
.shared-viewer.av-on .av-code {
  position:relative; margin:calc(1.4em * var(--reader-para-gap,1)) 0;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  /* --av-code-bg is written by article.js from the live highlight.js sheet;
     var(--bg-surface) is only the pre-paint fallback. */
  background:var(--av-code-bg, var(--bg-surface));
}
.av-code-head {
  display:flex; align-items:center; gap:9px;
  padding:7px 10px 7px 13px;
  background:var(--bg-raised); border-bottom:1px solid var(--border-soft);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
}
.av-code-lang  { color:var(--accent); text-transform:uppercase; font-weight:600; }
.av-code-lines { color:var(--txt2); }
.av-code-sp    { flex:1; }
.av-code-btn {
  font:inherit; font-size:10.5px; color:var(--txt2); cursor:pointer;
  background:transparent; border:1px solid var(--border);
  border-radius:6px; padding:3px 8px;
}
@media (hover:hover) { .av-code-btn:hover { color:var(--txt); border-color:rgba(var(--accent-rgb),.4); } }
.av-code-btn.on { color:var(--accent); border-color:var(--accent); }
.av-code-btn.ok { color:var(--success); border-color:var(--success); }
.shared-viewer.av-on .av-code pre { margin:0; border:none; border-radius:0; }
/* The renderer's own affordances are inside <pre>; the header replaces them.
   The copy button must stay in the DOM — Renderer.copyCode reads
   `btn.previousElementSibling` to find the <code>. */
.shared-viewer.av-on .av-code .code-copy-btn,
.shared-viewer.av-on .av-code .code-lang-label { display:none; }
.shared-viewer.av-on .av-code.is-wrap pre code { white-space:pre-wrap; overflow-wrap:anywhere; }
.shared-viewer.av-on .av-code.is-fold pre { max-height:26em; overflow:hidden; }
.shared-viewer.av-on .av-code.is-fold::after {
  content:''; position:absolute; left:0; right:0; bottom:34px; height:70px;
  background:linear-gradient(to bottom, transparent, var(--av-code-bg, var(--bg-surface)));
  pointer-events:none;
}
.av-code-more {
  display:block; width:100%; font:inherit; font-size:11.5px; cursor:pointer;
  color:var(--accent); background:var(--bg-raised);
  border:none; border-top:1px solid var(--border-soft); padding:9px;
}
@media (hover:hover) { .av-code-more:hover { background:var(--bg-hover); } }

/* ── Tables ───────────────────────────────────────────── */
.shared-viewer.av-on table.av-sortable th {
  cursor:pointer; user-select:none; position:relative; padding-right:20px;
}
.shared-viewer.av-on table.av-sortable th::after {
  content:'↕'; position:absolute; right:7px; opacity:.3; font-size:10px;
}
.shared-viewer.av-on table.av-sortable th.sorted { color:var(--accent); }
.shared-viewer.av-on table.av-sortable th[data-dir="asc"]::after  { content:'↑'; opacity:1; }
.shared-viewer.av-on table.av-sortable th[data-dir="desc"]::after { content:'↓'; opacity:1; }
.shared-viewer.av-on table.av-sticky-head thead th {
  position:sticky; top:0; z-index:1; background:var(--bg-raised);
}

/* ── Task lists ───────────────────────────────────────── */
.av-task-meter {
  display:flex; align-items:center; gap:10px;
  margin:calc(1em * var(--reader-para-gap,1)) 0 .5em;
  font-size:11.5px; color:var(--txt2);
}
.av-task-bar {
  flex:1; max-width:220px; height:5px; border-radius:3px;
  background:var(--border); overflow:hidden;
}
.av-task-bar i { display:block; height:100%; background:var(--success); border-radius:3px; }
.av-task-n { font-family:var(--font-mono); white-space:nowrap; }
.shared-viewer.av-on .av-tasklist input[type="checkbox"] { cursor:default; opacity:.85; }

/* ── Figures, diagrams, wiki links, outbound links ────── */
.shared-viewer.av-on .av-fig { margin:calc(1.6em * var(--reader-para-gap,1)) 0; text-align:center; }
.shared-viewer.av-on .av-fig img { border-radius:10px; cursor:zoom-in; max-width:100%; height:auto; }
.shared-viewer.av-on .av-fig figcaption {
  margin-top:9px; font-size:12.5px; line-height:1.5; color:var(--txt2); text-align:center;
}
.shared-viewer.av-on .av-diagram { cursor:zoom-in; }
.av-wiki {
  color:var(--txt2); border-bottom:1px dashed var(--border);
  cursor:help; padding-bottom:1px;
}
/* No ::after glyph here — the renderer already appends an outbound SVG to
   every external link, and two markers on one link reads as a rendering bug. */

/* ── Resume ───────────────────────────────────────────── */
.av-resume {
  position:fixed; left:50%; bottom:calc(var(--av-foot, 0px) + 14px); z-index:26;
  transform:translate(-50%, 20px); opacity:0;
  transition:transform .24s cubic-bezier(.4,0,.2,1), opacity .24s ease;
  display:flex; align-items:center; gap:12px;
  max-width:calc(100vw - 28px);
  padding:9px 10px 9px 16px; border-radius:26px;
  background:var(--bg-raised); border:1px solid var(--border);
  box-shadow:0 16px 44px rgba(0,0,0,.45);
  font-size:12.5px; color:var(--txt2);
}
.av-resume.in { transform:translate(-50%, 0); opacity:1; }
.av-resume button {
  font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap;
  color:var(--on-accent); background:var(--accent);
  border:none; border-radius:20px; padding:6px 13px; font-weight:600;
}
.av-resume .av-resume-x { background:none; color:var(--txt3); padding:6px 8px; font-weight:400; }
@media (hover:hover) { .av-resume .av-resume-x:hover { color:var(--txt); } }

/* ── End of document ──────────────────────────────────── */
.av-end { width:100%; margin-top:clamp(40px, 8vw, 72px); }
.av-end-rule {
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt3); margin-bottom:18px;
}
.av-end-rule::before, .av-end-rule::after {
  content:''; flex:1; height:1px; background:var(--border-soft);
}
.av-end-facts {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:12.5px; color:var(--txt2); margin:0 0 20px;
}
.av-end-facts i { color:var(--txt3); font-style:normal; }
.av-end-acts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.av-end-btn {
  font:inherit; font-size:13px; cursor:pointer;
  color:var(--txt2); background:var(--bg-raised);
  border:1px solid var(--border); border-radius:10px; padding:9px 16px;
  transition:color var(--t), border-color var(--t), background var(--t);
}
.av-end-btn.primary { color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:600; }
@media (hover:hover) {
  .av-end-btn:hover { color:var(--txt); background:var(--bg-hover); }
  .av-end-btn.primary:hover { color:var(--on-accent); background:var(--accent-soft); }
}
.av-end-keys {
  font-size:11.5px; color:var(--txt2); margin-bottom:16px;
  padding:10px 13px; border-radius:10px; background:var(--bg-surface);
  border:1px solid var(--border-soft);
}
.av-end-keys b {
  font-family:var(--font-mono); font-weight:600; color:var(--txt);
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:4px; padding:1px 5px; margin:0 1px;
}
.av-end-note { font-size:12px; line-height:1.65; color:var(--txt2); margin:0 0 6px; max-width:60ch; }
.av-end-link { font-family:var(--font-mono); font-size:11px; color:var(--txt3); margin:0; }
@media (max-width:720px) { .av-end-keys { display:none; } }

/* ── Flash (jump target) ──────────────────────────────── */
.av-flash {
  animation:avFlash 1.3s ease;
  border-radius:6px;
}
@keyframes avFlash {
  0%   { background-color:rgba(var(--accent-rgb),.24); }
  100% { background-color:transparent; }
}

/* ── Thumb dock (phones) ──────────────────────────────── */
.av-dock {
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:18;
  background:var(--bg-surface); border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.av-dock-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font:inherit; font-size:10px; color:var(--txt2); cursor:pointer;
  background:none; border:none; padding:7px 4px; border-radius:9px;
  min-height:44px;
}
.av-dock-btn svg { width:17px; height:17px; }
.av-dock-btn .av-aa { font-family:var(--font-head); font-weight:700; font-size:14px; line-height:17px; }
.av-dock-btn.on { color:var(--accent); }
@media (max-width:720px) {
  .av-dock { display:flex; }
  /* Eight chips over three rows push the first sentence off the screen. */
  .av-inside {
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-bottom:4px; -webkit-overflow-scrolling:touch;
  }
  .av-inside::-webkit-scrollbar { display:none; }
  .av-inside > * { flex:none; }
  /* The footer is a permanent flex row in a full-height overlay: every pixel it
     takes is a pixel of the document nobody ever sees. Keep the links, lose the
     tagline and the second row. */
  .shared-viewer.av-on .shared-viewer-footer { padding:9px 12px; gap:12px; }
  .shared-viewer.av-on .sv-footer-tag { display:none; }
  .shared-viewer.av-on .av-main { padding-bottom:120px; }
  .shared-viewer.av-on .shared-viewer-footer { padding-bottom:70px; }
  /* Above the dock AND the (now compact) footer — at 78px it landed on the
     footer links and swallowed the vault CTA. */
  .shared-viewer.av-on #scFab { bottom:120px; }
  /* The topbar cannot hold seven pills at 390px — the dock carries them. */
  .shared-viewer.av-on #avTocBtn,
  .shared-viewer.av-on #avCmdBtn,
  .shared-viewer.av-on #avAaBtn,
  .shared-viewer.av-on #avHlBtn { display:none; }
  .av-panel, .av-marks {
    right:8px; left:8px; width:auto;
    top:auto; bottom:calc(64px + env(safe-area-inset-bottom, 0px));
    max-height:min(72vh, calc(100vh - var(--av-top) - 90px));
  }
  .av-find { right:8px; left:8px; width:auto; }
  .av-rail { width:min(300px, 86vw); }
}
/* Icon-only pills once the label stops fitting. */
@media (max-width:980px) { .av-pill .av-pill-t { display:none; } }
.av-pill { display:inline-flex; align-items:center; gap:5px; }
.av-pill svg { width:12px; height:12px; }
.av-pill .av-aa { font-family:var(--font-head); font-weight:700; font-size:12px; }
.av-pill.on { color:var(--accent); border-color:rgba(var(--accent-rgb),.45); }
.av-count {
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  background:var(--accent-dim); color:var(--accent);
  border-radius:9px; padding:1px 5px; margin-left:1px;
}
.av-pill.has-none .av-count { display:none; }

@media print {
  .av-progress, .av-rail, .av-spine, .av-dock, .av-panel, .av-find,
  .av-sel, .av-marks, .av-resume, .av-end-acts, .av-code-head,
  .av-code-more, .av-fn-pop { display:none !important; }
  .shared-viewer.av-on .av-code.is-fold pre { max-height:none; }
  .shared-viewer.av-on .av-main { padding:0; }
}

@media (prefers-reduced-motion:reduce) {
  .av-rail, .av-resume, .av-progress i, .av-spine-eye { transition:none; }
  .av-flash { animation:none; }
  .shared-viewer.av-on * { scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════
   ARTICLE VIEW — the premium pass
   Cover · editorial type · command bar · spotlight · immersive
   ══════════════════════════════════════════════════════════ */

/* ── Generated cover ──────────────────────────────────── */
.shared-viewer.av-on {
  --av-cover-a: color-mix(in srgb, var(--bg-raised) 88%, var(--accent));
  --av-cover-b: var(--bg-surface);
  --av-ease: cubic-bezier(.22,.61,.36,1);
}
.av-cover-gen {
  margin:0 0 clamp(22px,4vw,34px);
  border-radius:16px; overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-surface);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 44px -32px rgba(0,0,0,.6);
}
.av-cover-art { display:block; width:100%; height:clamp(112px, 15vw, 168px); }
.av-cover-bars rect { transform-box:fill-box; transform-origin:bottom; }

/* ── Editorial typography ─────────────────────────────── */
/* The lede: a drop cap and a slightly larger first line, so the eye knows
   exactly where the article begins. Never on a note too short to have a lede. */
.shared-viewer.av-on .markdown-body .av-lede {
  font-size:1.11em; line-height:1.62; color:var(--txt);
}
.shared-viewer.av-on .markdown-body .av-lede::first-letter {
  float:left; font-family:var(--font-head); font-weight:700;
  font-size:3.36em; line-height:.82;
  margin:.05em .10em 0 0; padding-right:.02em;
  color:var(--accent);
}
/* A drop cap needs a paragraph to sit beside. Below the phone breakpoint the
   column is too narrow for the remaining 3–4 characters of the first line. */
@media (max-width:520px) {
  .shared-viewer.av-on .markdown-body .av-lede::first-letter {
    float:none; font-size:1em; line-height:inherit; margin:0; color:inherit;
    font-family:inherit; font-weight:inherit;
  }
}

/* Section numbers — a running count, set as a label above the heading. */
.av-secnum {
  display:block; margin-bottom:.5em;
  font-family:var(--font-mono); font-size:.42em; font-weight:600;
  letter-spacing:.22em; color:var(--accent); opacity:.85;
}
.shared-viewer.av-on .markdown-body.av-numbered h2 {
  border-top:1px solid var(--border-soft); padding-top:1.5em;
}
/* On a wide screen the numeral moves into the margin, where a book puts it. */
@media (min-width:1500px) {
  .shared-viewer.av-on .markdown-body.av-numbered h2 { position:relative; }
  .shared-viewer.av-on .markdown-body.av-numbered h2 .av-secnum {
    position:absolute; left:-4.6em; top:1.85em; margin:0; text-align:right; width:3.2em;
  }
}

/* Pull quote — a short standalone quotation set as display type. */
.shared-viewer.av-on .markdown-body blockquote.av-pull {
  border-left:none; background:none; padding:0;
  margin:clamp(28px,4.5vw,46px) 0;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(19px, 2.5vw, 25px); line-height:1.42;
  color:var(--txt); text-align:left; position:relative;
}
.shared-viewer.av-on .markdown-body blockquote.av-pull::before {
  content:'“'; position:absolute; left:-.52em; top:-.16em;
  font-size:2.6em; line-height:1; color:var(--accent); opacity:.28;
  pointer-events:none;
}
.shared-viewer.av-on .markdown-body blockquote.av-pull p { margin:0; }
.shared-viewer.av-on .markdown-body blockquote.av-pull::after {
  content:''; display:block; width:44px; height:2px;
  background:var(--accent); opacity:.5; margin-top:.7em;
}
@media (min-width:1080px) {
  .shared-viewer.av-on .markdown-body blockquote.av-pull { margin-left:-1.6rem; margin-right:-1.6rem; }
}
@media (max-width:640px) {
  .shared-viewer.av-on .markdown-body blockquote.av-pull::before { left:-.06em; opacity:.18; }
}

/* Tabular figures wherever numbers are meant to line up. */
.shared-viewer.av-on .markdown-body td,
.shared-viewer.av-on .markdown-body th { font-variant-numeric:tabular-nums; }

/* ── Rail: progress ring + per-section minutes ────────── */
.av-ring { position:relative; display:inline-grid; place-items:center; width:30px; height:30px; }
.av-ring svg { position:absolute; inset:0; width:30px; height:30px; transform:rotate(-90deg); }
.av-ring circle { fill:none; stroke-width:2.5; }
.av-ring-bg { stroke:var(--border); }
.av-ring-fg {
  stroke:var(--accent); stroke-linecap:round;
  stroke-dasharray:81.68; stroke-dashoffset:81.68;
  transition:stroke-dashoffset .18s linear;
}
.av-rail-pct {
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  color:var(--txt2); font-variant-numeric:tabular-nums;
}
.av-toc-item em {
  font-style:normal; font-family:var(--font-mono); font-size:9.5px;
  color:var(--txt3); opacity:0; margin-left:auto; padding-left:6px; flex:none;
  transition:opacity var(--t);
}
.av-toc-item.active em, .av-toc:hover .av-toc-item em { opacity:1; }
.av-toc-item span { flex:1; min-width:0; }

/* ── Command bar (⌘K) ─────────────────────────────────── */
.av-cmd {
  position:fixed; inset:0; z-index:30;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(48px, 12vh, 130px) 16px 16px;
  background:rgba(0,0,0,.42); backdrop-filter:blur(3px);
  animation:avFade .14s ease;
}
.av-cmd.hidden { display:none; }
@keyframes avFade { from { opacity:0 } to { opacity:1 } }
.av-cmd-box {
  width:min(620px, 100%); max-height:min(60vh, 520px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 32px 90px -18px rgba(0,0,0,.7);
  animation:avRise .18s var(--av-ease);
}
@keyframes avRise { from { opacity:0; transform:translateY(-10px) scale(.985) } to { opacity:1; transform:none } }
.av-cmd-top {
  display:flex; align-items:center; gap:10px; flex:none;
  padding:14px 16px; border-bottom:1px solid var(--border-soft);
}
.av-cmd-ico { display:flex; color:var(--txt3); }
.av-cmd-ico svg { width:15px; height:15px; }
.av-cmd-top input {
  flex:1; min-width:0; font:inherit; font-size:15px;
  background:none; border:none; outline:none; color:var(--txt);
}
.av-cmd-top input::placeholder { color:var(--txt3); }
.av-cmd-top kbd, .av-kbd {
  font-family:var(--font-mono); font-size:9.5px; color:var(--txt3);
  border:1px solid var(--border); border-radius:5px; padding:2px 5px;
}
.av-cmd-list { flex:1; min-height:0; overflow-y:auto; padding:6px; scrollbar-width:thin; }
.av-cmd-group {
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--txt3);
  padding:11px 10px 5px;
}
.av-cmd-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:9px; cursor:pointer;
  font-size:13.5px; color:var(--txt2);
}
.av-cmd-row.on { background:var(--bg-hover); color:var(--txt); }
.av-cmd-row.on::before { content:''; width:2px; height:16px; border-radius:2px; background:var(--accent); margin-left:-5px; }
.av-cmd-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.av-cmd-hint  { font-family:var(--font-mono); font-size:10px; color:var(--txt3); flex:none; }
.av-cmd-tick  { color:var(--accent); font-size:11px; flex:none; }
.av-cmd-row.active .av-cmd-label { color:var(--txt); }
.av-cmd-none { padding:22px 14px; font-size:13px; color:var(--txt2); text-align:center; }

/* ── Spotlight ────────────────────────────────────────── */
/* Quiet everything that is not the block in front of you. Opacity only — never
   display or visibility, so find-in-page, the outline and copy all still see
   the whole document. */
.shared-viewer.av-spot .markdown-body > * {
  opacity:.26; transition:opacity .3s var(--av-ease);
}
.shared-viewer.av-spot .markdown-body > .av-live { opacity:1; }
.shared-viewer.av-spot .markdown-body:hover > * { opacity:.55; }
.shared-viewer.av-spot .markdown-body:hover > .av-live { opacity:1; }
.av-modes { display:flex; flex-direction:column; gap:9px; }
.av-modes .av-check { align-items:flex-start; line-height:1.45; }

/* ── Immersive chrome ─────────────────────────────────── */
/* The topbar and the footer come OUT of flow under .av-on so that hiding them
   is a transform, not a reflow — a layout change on every scroll tick is the
   one thing guaranteed to feel cheap. */
.shared-viewer.av-on .shared-viewer-topbar {
  position:absolute; top:0; left:0; right:0; z-index:12;
  background:var(--bg-surface);
  background:color-mix(in srgb, var(--bg-surface) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  backdrop-filter:saturate(1.6) blur(16px);
  transition:transform .28s var(--av-ease), opacity .2s ease;
}
.shared-viewer.av-on .shared-viewer-footer {
  position:absolute; bottom:0; left:0; right:0; z-index:11;
  background:var(--bg-surface);
  background:color-mix(in srgb, var(--bg-surface) 82%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  backdrop-filter:saturate(1.6) blur(16px);
  transition:transform .28s var(--av-ease), opacity .2s ease;
}
.shared-viewer.av-on .av-progress {
  position:absolute; top:var(--av-top); left:0; right:0; z-index:13;
  background:transparent;
}
.shared-viewer.av-on .shared-viewer-scroll { padding-top:var(--av-top); }
.shared-viewer.av-on.av-hide-chrome .shared-viewer-topbar { transform:translateY(-100%); opacity:0; }
.shared-viewer.av-on.av-hide-chrome .shared-viewer-footer { transform:translateY(100%);  opacity:0; }
.shared-viewer.av-on.av-hide-chrome .av-dock              { transform:translateY(110%); }
/* With the footer gone there is nothing left for the floating bars to clear. */
.shared-viewer.av-on.av-hide-chrome { --av-foot:0px; }
@media (max-width:720px) {
  /* The thumb dock replaces the footer as the thing to clear, and it stays put
     until immersive takes it too. */
  .shared-viewer.av-on { --av-foot: calc(var(--av-foot-h, 0px) + 62px); }
}
/* With the bar gone there is nothing for the rail and the spine to clear, so
   they take the space rather than leaving a band of blur behind. */
.av-spine, .shared-viewer.av-on .av-progress { transition:top .28s var(--av-ease); }
.shared-viewer.av-on.av-hide-chrome .av-rail,
.shared-viewer.av-on.av-hide-chrome .av-spine,
.shared-viewer.av-on.av-hide-chrome .av-progress { top:0; }
.shared-viewer.av-on.av-hide-chrome .av-rail,
.shared-viewer.av-on.av-hide-chrome .av-spine { bottom:0; }
.av-rail, .av-spine { transition-property:transform, top, bottom; }
.av-dock { transition:transform .28s var(--av-ease); }

/* ── Micro-interactions ───────────────────────────────── */
.av-chip, .av-end-btn, .av-code-btn, .av-seg button, .av-grounds button,
.av-profiles button, .av-pill {
  transition:color var(--t), border-color var(--t), background var(--t),
             transform .12s var(--av-ease);
}
@media (hover:hover) {
  .av-chip:active, .av-end-btn:active, .av-code-btn:active { transform:scale(.97); }
}
.av-mark-acts { display:flex; align-items:center; gap:2px; flex:none; }
.av-mark-card {
  background:none; border:none; cursor:pointer;
  font:inherit; font-size:10.5px; color:var(--accent);
  padding:2px 5px; border-radius:5px;
}
@media (hover:hover) { .av-mark-card:hover { background:var(--accent-dim); } }

/* Entrance: the article assembles rather than appearing. Cheap (two
   properties, one paint) and cancelled outright for reduced motion. */
.av-mast, .shared-viewer.av-on .markdown-body { animation:avIn .5s var(--av-ease) both; }
.shared-viewer.av-on .markdown-body { animation-delay:.06s; }
/* Opacity only for the rail and the spine. `avIn` ends on `transform:none`,
   and a filled animation beats a declarative rule — animating the rail with it
   cancelled its own translateX(-100%) drawer offset and left it sitting open on
   every phone. Never animate `transform` on an element that parks off-screen. */
.av-rail, .av-spine { animation:avFadeIn .45s var(--av-ease) both; }
.av-rail  { animation-delay:.10s; }
.av-spine { animation-delay:.14s; }
@keyframes avIn     { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@keyframes avFadeIn { from { opacity:0 } to { opacity:1 } }

@media (prefers-reduced-motion:reduce) {
  .av-mast, .shared-viewer.av-on .markdown-body, .av-rail, .av-spine,
  .av-cmd, .av-cmd-box { animation:none; }
  .av-scrim { transition:none; }
  .shared-viewer.av-on .shared-viewer-topbar,
  .shared-viewer.av-on .shared-viewer-footer,
  .av-dock, .av-ring-fg, .shared-viewer.av-spot .markdown-body > * { transition:none; }
}

@media print {
  .av-cover-gen { break-inside:avoid; }
  .shared-viewer.av-on .shared-viewer-topbar,
  .shared-viewer.av-on .shared-viewer-footer { display:none !important; }
  .shared-viewer.av-on .shared-viewer-scroll { padding-top:0; }
  .shared-viewer.av-spot .markdown-body > * { opacity:1 !important; }
}

/* ── In-document navigation ───────────────────────────── */
/* A native fragment jump parks the target at the top of the scroll container,
   which under .av-on is behind the glass topbar. article.js scrolls with its
   own offset; this covers every path that does not go through it. */
.shared-viewer.av-on .markdown-body .av-anchorable { scroll-margin-top:calc(var(--av-top) + 24px); }
.shared-viewer.av-on .shared-viewer-scroll { scroll-padding-top:calc(var(--av-top) + 24px); }

.av-back {
  position:fixed; left:50%; bottom:calc(var(--av-foot, 0px) + 18px); z-index:25;
  transform:translate(-50%, 18px); opacity:0; pointer-events:none;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px 8px 12px; border-radius:22px;
  background:var(--bg-raised); border:1px solid var(--border);
  box-shadow:0 14px 40px -10px rgba(0,0,0,.55);
  font:inherit; font-size:12.5px; color:var(--txt2); cursor:pointer;
  transition:opacity .2s var(--av-ease), transform .2s var(--av-ease), color var(--t);
}
.av-back.in { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.av-back svg { width:13px; height:13px; }
@media (hover:hover) { .av-back:hover { color:var(--txt); border-color:rgba(var(--accent-rgb),.45); } }
@media (max-width:720px) { .av-back { bottom:calc(74px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion:reduce) { .av-back { transition:none; } }

/* ══════════════════════════════════════════════════════════
   ARTICLE VIEW — working with a document
   Pin · steps · table tools · terms · read aloud
   ══════════════════════════════════════════════════════════ */

/* ── Pin a block ──────────────────────────────────────── */
.shared-viewer.av-on .av-pinnable { position:relative; }
.av-pin-btn {
  position:absolute; top:6px; right:6px; z-index:2;
  display:grid; place-items:center; width:26px; height:26px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:8px; color:var(--txt3); cursor:pointer;
  opacity:0; transition:opacity .14s var(--av-ease), color var(--t), border-color var(--t);
}
.av-pin-btn svg { width:13px; height:13px; }
.av-pinnable:hover > .av-pin-btn,
.av-pin-btn:focus-visible { opacity:1; }
@media (hover:none) { .av-pinnable > .av-pin-btn { opacity:.55; } }
@media (hover:hover) { .av-pin-btn:hover { color:var(--accent); border-color:rgba(var(--accent-rgb),.45); } }
.shared-viewer.av-on .av-pinnable.is-pinned { outline:1px dashed rgba(var(--accent-rgb),.5); outline-offset:4px; }
/* A pin that sits IN a control row is a member of that row: laid out by the
   flex, sized like its neighbours, and always visible — `wrap`, `copy`, Σ and
   CSV don't hide either, and a corner button that only appears on hover is a
   feature nobody on a laptop ever finds. The rules this replaces positioned it
   absolutely at `right:96px`, a guess at the width of the wrap+copy pair that
   overlapped `wrap` by 9px at every width, and at `right:6px` over a table,
   which covered the last column's header outright. Nothing here guesses. */
.av-code-head > .av-pin-btn,
.av-tbl-bar   > .av-pin-btn {
  position:static; top:auto; right:auto; opacity:1;
  width:26px; height:22px; border-radius:7px; flex:none;
}

.av-pin {
  position:fixed; right:44px; bottom:calc(var(--av-foot, 0px) + 14px); z-index:19;
  width:min(440px, calc(100vw - 60px)); max-height:min(46vh, 420px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 26px 70px -20px rgba(0,0,0,.65);
  opacity:0; transform:translateY(14px);
  transition:opacity .2s var(--av-ease), transform .2s var(--av-ease);
}
.av-pin.in { opacity:1; transform:none; }
.av-pin.folded { max-height:44px; }
.av-pin-head {
  display:flex; align-items:center; gap:6px; flex:none;
  padding:9px 8px 9px 13px; border-bottom:1px solid var(--border-soft);
}
.av-pin-title {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--txt2);
}
.av-pin-head button {
  flex:none; font:inherit; font-size:11px; color:var(--txt2); cursor:pointer;
  background:none; border:none; border-radius:6px; padding:3px 7px; line-height:1;
}
@media (hover:hover) { .av-pin-head button:hover { color:var(--txt); background:var(--bg-hover); } }
.av-pin-body { flex:1; min-height:0; overflow:auto; padding:10px 12px; font-size:13px; }
.av-pin-body table { font-size:12px; }
.av-pin-body pre code.hljs { font-size:11.5px; padding:10px 12px; }
.av-pin-body .av-code { margin:0; }
.av-pin-body img, .av-pin-body svg { max-width:100%; height:auto; }
.av-pin-body figcaption { display:none; }
/* Nothing in the copy is interactive, so nothing in it should look it. */
.av-pin-body th::after { display:none !important; }
.av-pin-body th { cursor:default !important; padding-right:10px !important; }
.av-pin-body .av-term { border-bottom:none; cursor:inherit; }
@media (max-width:720px) {
  .av-pin { right:8px; left:8px; width:auto; bottom:calc(70px + env(safe-area-inset-bottom,0px)); max-height:34vh; }
}

/* ── Steps ────────────────────────────────────────────── */
.shared-viewer.av-on .av-steplist { list-style:none; padding-left:0; }
.shared-viewer.av-on .av-step { position:relative; padding-left:38px; margin-bottom:.8em; }
.shared-viewer.av-on .av-step > input[type="checkbox"] { display:none; }
.av-step-dot {
  position:absolute; left:0; top:.06em;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--bg-raised); border:1px solid var(--border);
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--txt2);
  transition:background var(--t), color var(--t), border-color var(--t);
}
@media (hover:hover) { .av-step-dot:hover { border-color:var(--accent); color:var(--txt); } }
.av-step.is-done > .av-step-dot {
  background:var(--success); border-color:var(--success); color:#04120a; font-size:0;
}
.av-step.is-done > .av-step-dot::after { content:'✓'; font-size:13px; }
.shared-viewer.av-on .av-step.is-done { opacity:.55; }
.shared-viewer.av-on .av-step.is-at {
  background:var(--accent-dim); border-radius:10px;
  padding-top:.35em; padding-bottom:.35em; margin-left:-8px; padding-left:46px; padding-right:10px;
}
.shared-viewer.av-on .av-step.is-at > .av-step-dot { left:8px; border-color:var(--accent); color:var(--accent); }

.av-stepbar, .av-speak {
  position:fixed; left:50%; bottom:calc(var(--av-foot, 0px) + 14px); z-index:23;
  display:flex; align-items:center; gap:8px;
  transform:translate(-50%, 18px); opacity:0; pointer-events:none;
  max-width:calc(100vw - 24px);
  padding:8px 10px; border-radius:24px;
  background:var(--bg-raised); border:1px solid var(--border);
  box-shadow:0 18px 46px -12px rgba(0,0,0,.6);
  font-size:12.5px; color:var(--txt2);
  transition:opacity .2s var(--av-ease), transform .2s var(--av-ease);
}
.av-stepbar.in, .av-speak.in { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.av-stepbar button, .av-speak button {
  font:inherit; font-size:12px; color:var(--txt2); cursor:pointer;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; padding:5px 10px; line-height:1.2; white-space:nowrap;
}
@media (hover:hover) { .av-stepbar button:hover, .av-speak button:hover { color:var(--txt); border-color:rgba(var(--accent-rgb),.45); } }
.av-stepbar #avStepDone.on { color:var(--success); border-color:var(--success); }
.av-stepbar #avStepN, .av-speak .av-spk-n {
  font-family:var(--font-mono); font-size:11px; white-space:nowrap; color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.av-step-prog {
  position:absolute; left:12px; right:12px; bottom:3px; height:2px;
  background:var(--border); border-radius:2px; overflow:hidden;
}
.av-step-prog i { display:block; height:100%; background:var(--success); transition:width .2s var(--av-ease); }
@media (max-width:720px) {
  .av-stepbar, .av-speak { bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
}

/* ── Table tools ──────────────────────────────────────── */
.av-tbl-bar {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:calc(1.2em * var(--reader-para-gap,1)) 0 -.4em;
}
.av-tbl-q {
  flex:1 1 150px; min-width:0; font:inherit; font-size:12px;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:8px; padding:5px 10px; color:var(--txt); outline:none;
}
.av-tbl-q:focus { border-color:var(--border-focus); }
.av-tbl-q::placeholder { color:var(--txt3); }
.av-tbl-n { font-family:var(--font-mono); font-size:10.5px; color:var(--txt2); white-space:nowrap; }
.av-tbl-sp { flex:1; }
.av-tbl-btn {
  font:inherit; font-family:var(--font-mono); font-size:10.5px; cursor:pointer;
  color:var(--txt2); background:var(--bg-raised);
  border:1px solid var(--border); border-radius:7px; padding:4px 9px;
}
@media (hover:hover) { .av-tbl-btn:hover { color:var(--txt); border-color:rgba(var(--accent-rgb),.45); } }
.av-tbl-btn.on { color:var(--accent); border-color:var(--accent); }
.shared-viewer.av-on tr.av-tbl-hide { display:none; }
.shared-viewer.av-on tfoot.av-tbl-foot td {
  border-top:2px solid var(--border); background:var(--bg-surface);
  font-family:var(--font-mono); font-size:11px; line-height:1.4; white-space:nowrap;
}
.shared-viewer.av-on tfoot.av-tbl-foot b    { display:block; color:var(--accent); font-weight:600; }
.shared-viewer.av-on tfoot.av-tbl-foot span { color:var(--txt2); font-size:10px; }

/* ── Terms the document defines itself ────────────────── */
.av-term {
  border-bottom:1px dotted rgba(var(--accent-rgb),.6);
  cursor:help; padding-bottom:1px;
}
.av-term:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
.av-term-pop {
  position:fixed; z-index:22; padding:10px 13px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:11px; box-shadow:0 14px 40px -8px rgba(0,0,0,.55);
  font-size:12.5px; line-height:1.55; color:var(--txt2);
}
.av-term-pop[hidden] { display:none; }

/* ── Read aloud ───────────────────────────────────────── */
.shared-viewer.av-on .av-speaking {
  background:linear-gradient(90deg, var(--accent-dim), transparent 92%);
  box-shadow:-10px 0 0 var(--accent-dim), inset 2px 0 0 var(--accent);
  border-radius:3px;
}
@media (prefers-reduced-motion:reduce) {
  .av-pin, .av-stepbar, .av-speak, .av-step-prog i { transition:none; }
}

/* The marks footer now carries an action as well as a reassurance. */
.av-marks-foot { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
#avMarksCopy {
  font:inherit; font-size:11.5px; color:var(--accent); cursor:pointer;
  background:none; border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:7px; padding:5px 10px;
}
@media (hover:hover) { #avMarksCopy:hover { background:var(--accent-dim); } }

@media print {
  .av-pin, .av-stepbar, .av-speak, .av-pin-btn, .av-tbl-bar, .av-back,
  .av-term-pop { display:none !important; }
  .shared-viewer.av-on tr.av-tbl-hide { display:table-row !important; }
  .shared-viewer.av-on .av-speaking { background:none; box-shadow:none; }
  .av-step-dot { position:static; display:inline-grid; margin-right:6px; }
}