/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg-deep: #181818;
  --bg-editor: #1e1e1e;
  --bg-surface: #222222;
  --bg-gutter: #1a1a1a;
  --bg-toolbar: #181818;
  --bg-tabs: #181818;
  --bg-tab: transparent;
  --bg-tab-active: #1e1e1e;
  --bg-tab-hover: #2a2a2a;
  --bg-status: #181818;
  --bg-panel: #242424;
  --bg-input: #1e1e1e;
  --bg-hover: rgba(255,255,255,0.035);
  --bg-active: rgba(255,255,255,0.06);
  --bg-selection: rgba(227,179,65,0.15);
  --bg-drop: rgba(227,179,65,0.08);
  --border: #2e2e2e;
  --border-active: #e3b34140;
  --accent: #e3b341;
  --accent-dim: #e3b34140;
  --on-accent: #1a1a1a;
  --danger: #f85149;
  --warning: #d29922;
  --success: #3fb950;

  --text: #c9d1d9;
  --text-muted: #484f58;
  --text-faint: #30363d;
  --text-bright: #f0f6fc;
  --preview-text: #a8a8a8;

  /* Editor-specific tokens (CM6) — overridden per theme below. */
  --gutter-text: #6e7681;
  --gutter-text-active: #c9d1d9;
  --caret-color: #f0f6fc;

  --syn-keyword: #ff7b72;
  --syn-string: #a5d6ff;
  --syn-comment: #546178;
  --syn-number: #79c0ff;
  --syn-function: #d2a8ff;
  --syn-builtin: #ffa657;
  --syn-constant: #79c0ff;
  --syn-operator: #ff7b72;
  --syn-type: #ffa657;
  --syn-variable: #ffa657;
  --syn-tag: #7ee787;
  --syn-attribute: #79c0ff;
  --syn-property: #79c0ff;
  --syn-decorator: #d2a8ff;
  --syn-regex: #7ee787;
  --syn-heading: #f0f6fc;
  --syn-link: #e3b341;
  --syn-bold: #f0f6fc;
  --syn-italic: #c9d1d9;
  --syn-fence: #484f58;
  --syn-inserted: #7ee787;
  --syn-deleted: #ff7b72;
  --syn-selector: #7ee787;
  --syn-punctuation: #6e7681;

  --ws-color: #2a2a2a;
  --ws-color-active: #3f3f3f;

  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size: 13px;
  --line-height: 1.65;
  /* Integer pixel line height for the editor — set by JS to
     round(font-size * line-height). Used for line-height of code
     display/input/gutter AND for the zebra gradient step, so they
     stay pixel-aligned regardless of font size. */
  --code-line-h: 21px;
  --gutter-w: 52px;
  --toolbar-h: 40px;
  --tabs-h: 35px;
  --status-h: 26px;
  --panel-h: 0px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ---- LIGHT THEME (warm beige, soft shadows) ---- */
body.theme-light {
  /* "Paper" palette — barely-warm off-white, hint of cream only */
  --bg-deep: #fbf9f4;
  --bg-editor: #fffefb;
  --bg-surface: #fefdf9;
  --bg-gutter: #f7f5ee;
  --bg-toolbar: #faf8f3;
  --bg-tabs: #f5f2ea;
  --bg-tab: transparent;
  --bg-tab-active: #fffefb;
  --bg-tab-hover: #f6f3ec;
  --bg-status: #faf8f3;
  --bg-panel: #fffefb;
  --bg-input: #fffefb;
  --bg-hover: rgba(120,100,60,0.06);
  --bg-active: rgba(196,140,40,0.10);
  --bg-selection: rgba(196,140,40,0.22);
  --bg-drop: rgba(196,140,40,0.10);
  --border: #e6dec8;
  --border-active: rgba(196,140,40,0.45);
  --accent: #b8860b;
  --accent-dim: rgba(184,134,11,0.35);
  --on-accent: #fff;
  --danger: #b42318;
  --warning: #8a6300;
  --success: #1a7f37;

  --text: #2c2718;
  --text-muted: #6a6149;
  --text-faint: #9a917a;
  --text-bright: #1c1810;
  --preview-text: #6a6149;

  /* Light theme: keep gutter calm, caret uses brand blue. */
  --gutter-text: #9a917a;
  --gutter-text-active: #2c2718;
  --caret-color: #58a6ff;

  /* Syntax — warmer reds/browns, less cold blue */
  --syn-keyword: #b42318;
  --syn-string: #6f4f00;
  --syn-comment: #98917a;
  --syn-number: #6f4f00;
  --syn-function: #7a4daa;
  --syn-builtin: #864d10;
  --syn-constant: #6f4f00;
  --syn-operator: #b42318;
  --syn-type: #864d10;
  --syn-variable: #864d10;
  --syn-tag: #1f6b3a;
  --syn-attribute: #6f4f00;
  --syn-property: #6f4f00;
  --syn-decorator: #7a4daa;
  --syn-regex: #1f6b3a;
  --syn-heading: #1c1810;
  --syn-link: #b8860b;
  --syn-bold: #1c1810;
  --syn-italic: #2c2718;
  --syn-fence: #9a917a;
  --syn-inserted: #1f6b3a;
  --syn-deleted: #b42318;
  --syn-selector: #1f6b3a;
  --syn-punctuation: #6a6149;

  --ws-color: #ddd5c0;
  --ws-color-active: #cfc6ad;
}

/* Soften every hardcoded dark box-shadow in light mode so the UI
   reads as 'paper', not 'dark UI with white skin'. */
body.theme-light .find-panel { box-shadow: 0 4px 18px rgba(120,100,60,0.10); }
body.theme-light .ctx-menu { box-shadow: 0 8px 28px rgba(120,100,60,0.14); }
body.theme-light .fm-panel { box-shadow: 0 4px 16px rgba(120,100,60,0.08); }
body.theme-light .modal { box-shadow: 0 14px 40px rgba(120,100,60,0.16); }
body.theme-light .note-card.active {
  box-shadow: 0 4px 18px rgba(120,100,60,0.10), 0 0 0 1px var(--accent-dim);
}
body.theme-light .debug-panel { box-shadow: 0 10px 32px rgba(120,100,60,0.18); }
body.theme-light .toolbar-brand .dot { box-shadow: 0 0 6px var(--accent-dim); }
@keyframes pulse-light {
  0%, 100% { box-shadow: 0 0 4px var(--accent-dim); }
  50% { box-shadow: 0 0 10px var(--accent-dim); }
}
body.theme-light .toolbar-brand .dot { animation: pulse-light 3s ease-in-out infinite; }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body { height:100%; background:var(--bg-deep); color:var(--text); font-family:var(--font-ui); overflow:hidden; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
/* iOS: prevent the document from scrolling when the soft keyboard
   opens — otherwise the toolbar gets pushed above the visual viewport.
   Pinning body to inset:0 + sizing #app with 100dvh (dynamic viewport
   height) keeps the toolbar visible while the keyboard reduces the
   available space below it. */
body { position: fixed; inset: 0; }

::selection { background: var(--bg-selection); }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;          /* fallback */
  height: 100dvh;         /* shrinks with iOS soft keyboard */
  overflow: hidden;
}

/* ---- TOOLBAR ---- */
.toolbar {
  height: var(--toolbar-h);
  min-height: var(--toolbar-h);
  background: var(--bg-toolbar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  /* Respect iPhone notch / rounded corners in PWA fullscreen.
     max() keeps the desktop 10px floor when the inset is 0. */
  padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  gap: 1px;
  user-select: none;
  z-index: 100;
  -webkit-app-region: drag;
  /* Allow horizontal scroll when too many buttons exceed viewport
     so the trailing find icon never disappears off-screen. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

/* black-translucent is full-bleed over the bottom home-indicator
   safe-area; that strip would otherwise show the body bg (--bg-deep) as
   a mismatched band under the status bar. Paint body with the status-bar
   colour in standalone so the strip blends into the bottom chrome. */
.toolbar::-webkit-scrollbar { display: none; }
.toolbar > * { flex-shrink: 0; }

.toolbar-brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: var(--text-bright);
  margin-right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-app-region: no-drag;
}

.toolbar-brand .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-dim);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 6px var(--accent-dim); }
  50% { box-shadow: 0 0 14px var(--accent); }
}

.tb-sep {
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 6px;
}

.tb-btn {
  height: 28px; padding: 0 8px;
  border: none; background: transparent;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.12s;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
  -webkit-app-region: no-drag;
}
.tb-btn:hover { background:var(--bg-hover); color:var(--text); }
.tb-btn.active { background:var(--bg-active); color:var(--text-bright); }
.tb-btn svg { flex-shrink: 0; }

.tb-btn kbd {
  font-family: var(--font-mono);
  font-size: 9px; color: var(--text-faint);
  padding: 1px 4px; border-radius: 3px;
  border: 1px solid var(--border);
  margin-left: 2px;
}

.tb-select {
  height: 28px; padding: 0 24px 0 8px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23484f58' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  -webkit-app-region: no-drag;
}
.tb-select:hover { border-color: var(--accent-dim); }
.tb-select option { background: #161b22; color: var(--text); font-size: 11px; font-family: var(--font-ui); }

.tb-spacer { flex:1; }

/* ---- Cloud mode toggle ---- */
.tb-mode { gap: 5px; }
.tb-mode .mode-icon-cloud { display: none; }
.tb-mode.cloud .mode-icon-local { display: none; }
.tb-mode.cloud .mode-icon-cloud { display: inline-block; }
.tb-mode .mode-status {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  display: none; margin-left: 2px;
}
.tb-mode.cloud .mode-status { display: inline-block; }
.tb-mode.cloud .mode-status.synced  { background: var(--success); }
.tb-mode.cloud .mode-status.saving  { background: var(--warning); animation: cl-pulse 1.2s ease-in-out infinite; }
.tb-mode.cloud .mode-status.error   { background: var(--danger); }
.tb-mode.cloud .mode-status.offline { background: var(--text-muted); }
@keyframes cl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- MD HELPER BAR ---- */
.md-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-toolbar);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
  font-family: var(--font-ui);
}
/* When mounted inside an active card (notes view), drop the outer
   chrome — it lives between card head and editor slot. */
.active-md-slot .md-toolbar {
  background: var(--bg-tab-active);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 10px;
}
.active-md-slot:empty { display: none; }
.md-toolbar .md-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--preview-text);
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.1s;
  line-height: 1.2;
}
.md-toolbar .md-btn:hover {
  color: var(--text-bright);
  border-color: var(--accent-dim);
  background: var(--bg-hover);
}
.md-toolbar .md-btn:active { transform: translateY(1px); }
.md-toolbar .md-btn code { font-size: 10px; }
.md-toolbar .md-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}
.md-toolbar .md-grow { flex: 1; background: transparent; width: auto; }
.md-toolbar .md-btn-fix {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.md-toolbar .md-btn-fix:hover {
  background: rgba(227,179,65,0.08);
  color: var(--text-bright);
}
.md-toolbar .md-btn-preview { padding: 4px 8px; }
.md-toolbar .md-btn.active {
  background: rgba(227,179,65,0.12);
  color: var(--accent);
  border-color: var(--accent-dim);
}

/* ---- TABS ---- */
.tabs-bar {
  height: var(--tabs-h);
  min-height: var(--tabs-h);
  background: var(--bg-tabs);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
  scroll-behavior: smooth;
}

.tabs-bar::-webkit-scrollbar { height: 0; }

.tab {
  height: 100%;
  min-width: 100px;
  max-width: 200px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-tab);
  border-right: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: all 0.1s;
  flex-shrink: 0;
}

.tab:hover { background: var(--bg-tab-hover); color: var(--text); }

.tab.active {
  background: var(--bg-tab-active);
  color: var(--text-bright);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

.tab .tab-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  opacity: 0.5;
}

.tab.active .tab-icon { opacity: 0.8; }

.tab .tab-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab .tab-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: none;
}

.tab.modified .tab-dot {
  display: block;
  background: var(--warning);
}

.tab .tab-close {
  width: 18px; height: 18px;
  border: none; background: transparent;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: all 0.1s;
}

.tab:hover .tab-close, .tab.active .tab-close { opacity: 1; }
.tab-close:hover { background: var(--bg-hover); color: var(--text); }
.tab.modified .tab-close { opacity: 0; }
.tab.modified:hover .tab-close { opacity: 1; }
.tab.modified:hover .tab-dot { display: none; }

.tab-add {
  width: 32px; min-width: 32px;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 0;
  transition: all 0.12s;
}
.tab-add:hover { background: var(--bg-hover); color: var(--text); }

/* ---- EDITOR AREA ---- */
.editor-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.code-area { flex:1; position:relative; overflow:hidden; display:flex; }

.cm6-host { flex: 1; display: flex; min-width: 0; min-height: 0; position: relative; }

/* ---- CodeMirror 6 theme overrides ----
   CM6 injects its own styles dynamically (class .ͼN) with the same
   specificity as ours but loaded LATER in the cascade, so it wins on
   ties. Use !important on the colours that must respect our palette;
   layout-only rules don't need it. */
.cm-editor {
  flex: 1;
  background: var(--bg-editor) !important;
  color: var(--text) !important;
  font-family: var(--font-mono);
  font-size: var(--font-size);
  height: 100%;
}
.cm-editor.cm-focused { outline: none !important; }
.cm-scroller {
  font-family: var(--font-mono);
  line-height: 1.6;
  overflow: auto;
}
.cm-content {
  padding: 10px 0;
  caret-color: var(--caret-color) !important;
}
.cm-line { padding: 0 16px; }
.cm-gutters {
  background: var(--bg-gutter) !important;
  border-right: 1px solid var(--border) !important;
  color: var(--gutter-text) !important;
  user-select: none;
}
.cm-lineNumbers .cm-gutterElement {
  padding: 0 12px 0 8px;
  min-width: 24px;
  color: var(--gutter-text) !important;
}
.cm-foldGutter .cm-gutterElement { color: var(--text-faint) !important; }
.cm-activeLineGutter {
  background: rgba(255,255,255,0.06) !important;
  color: var(--gutter-text-active) !important;
}
.cm-activeLine { background: rgba(255,255,255,0.04) !important; }
.cm-cursor, .cm-dropCursor {
  border-left-color: var(--caret-color) !important;
  border-left-width: 2px !important;
}
.cm-selectionBackground, .cm-content ::selection {
  background: rgba(227,179,65,0.25) !important;
}
.cm-focused .cm-selectionBackground { background: rgba(227,179,65,0.30) !important; }
.cm-matchingBracket {
  background: rgba(227,179,65,0.18);
  outline: 1px solid var(--accent-dim);
}
/* Word-style invisible chars: ↵ at end of line, · for space, → for
   tab. highlightWhitespace() injects ::before with the glyph; we
   tune the colour so it stays subtle but readable in both themes.
   Previous opacity 0.45 + --text-faint was effectively invisible. */
.cm-newline-mark {
  color: var(--text-muted);
  opacity: 0.7;
  font-weight: normal;
  margin-left: 1px;
  user-select: none;
  pointer-events: none;
}
/* CM6's highlightWhitespace() only adds the CSS classes; the visible
   glyph must come from us. Setting `content` here makes spaces and
   tabs actually visible regardless of theme injection specificity. */
.cm-highlightSpace { position: relative; }
.cm-highlightSpace::before {
  content: '·';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.65;
  pointer-events: none;
}
.cm-highlightTab {
  position: relative;
  opacity: 0.75;
}
.cm-highlightTab::before {
  content: '→';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95em;
  pointer-events: none;
}
/* NBSP (U+00A0) — looks like a regular space but breaks layouts and
   parsers. Tint the cell so the user spots it. */
.cm-nbsp {
  background: rgba(255, 170, 0, 0.18);
  border-radius: 2px;
  box-shadow: inset 0 -1px 0 rgba(255, 170, 0, 0.45);
}
.cm-nbsp::after {
  content: '⎵';
  color: rgba(255, 170, 0, 0.85);
  font-size: 0.85em;
  margin-left: -0.6em;
  pointer-events: none;
}
/* Zero-width / bidi / BOM rendered by highlightSpecialChars(render). */
.cm-special-char {
  background: rgba(248, 81, 73, 0.18);
  color: var(--text-bright);
  border-radius: 2px;
  padding: 0 2px;
  font-size: 0.78em;
  font-family: var(--font-mono);
  letter-spacing: 0;
}
/* Trailing whitespace highlight (red wash). */
.cm-trailingSpace {
  background: rgba(248, 81, 73, 0.15);
  border-bottom: 1px dotted rgba(248, 81, 73, 0.45);
}
.cm-searchMatch {
  background: rgba(255,200,0,0.20);
  outline: 1px solid rgba(255,200,0,0.50);
}
.cm-searchMatch-selected { background: rgba(255,200,0,0.45); }
.cm-scroller::-webkit-scrollbar { width:8px; height:8px; }
.cm-scroller::-webkit-scrollbar-track { background:transparent; }
.cm-scroller::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.07); border-radius:4px; }
.cm-scroller::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.14); }
.cm-scroller::-webkit-scrollbar-corner { background:transparent; }
/* Syntax highlight tokens — mapped to existing --syn-* palette */
.tok-kw    { color: var(--syn-keyword); font-weight: 500; }
.tok-str   { color: var(--syn-string); }
.tok-num   { color: var(--syn-number); }
.tok-cmt   { color: var(--syn-comment); font-style: italic; }
.tok-fn    { color: var(--syn-function); }
.tok-cls   { color: var(--syn-type); }
.tok-bool  { color: var(--syn-builtin); }
.tok-tag   { color: var(--syn-keyword); }
.tok-attr  { color: var(--syn-function); }
.tok-prop  { color: var(--syn-function); }
.tok-op    { color: var(--syn-operator); }
.tok-punct { color: var(--text-muted); }
.tok-meta  { color: var(--syn-meta); }
.tok-link  { color: var(--accent); text-decoration: underline; }
.tok-hd    { color: var(--syn-keyword); font-weight: 600; }
.tok-em    { font-style: italic; }
.tok-strong { font-weight: 700; }
/* Light theme syntax adjustments inherit from --syn-* via :root override */
body.editor-zebra .cm-line:nth-child(even) {
  background: rgba(255,255,255,0.02);
}
body.theme-light.editor-zebra .cm-line:nth-child(even) {
  background: rgba(0,0,0,0.025);
}

/* ---- FIND/REPLACE PANEL ---- */
.find-panel {
  position: absolute;
  top: 0; right: 20px;
  z-index: 50;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 8px 10px;
  display: none;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  min-width: 340px;
}

.find-panel.open { display: flex; }

.find-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.find-input {
  flex: 1;
  height: 26px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.find-input:focus { border-color: var(--accent); }

.find-input::placeholder { color: var(--text-faint); }

.find-btn {
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.find-btn:hover { background: var(--bg-hover); color: var(--text); }
.find-btn.active { background: var(--bg-active); color: var(--accent); }

.find-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  min-width: 50px;
  text-align: center;
}

/* ---- CONTEXT MENU ---- */
.ctx-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none;
}

.ctx-menu.open { display: block; }

.ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.08s;
}
.ctx-item:hover { background: var(--bg-active); }
.ctx-item .shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* ---- STATUS BAR ---- */
.status-bar {
  height: var(--status-h);
  min-height: var(--status-h);
  background: var(--bg-status);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;   /* squash everything toward the middle */
  /* Horizontal safe-area only — vertical stays compact (no extra
     padding under the home indicator). The bar may overlap the
     indicator on PWA fullscreen; acceptable to keep the chrome low. */
  padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  user-select: none;
}

.st-item { display:flex; align-items:center; gap:3px; white-space: nowrap; flex-shrink: 0; }
.st-label { color: var(--text-faint); }
/* Was a flex:1 pusher; now just a small empty gap that visually
   separates logical groups (position / length / language) without a
   visible divider line. */
.st-spacer {
  flex: 0 0 10px;
}
.st-clickable { cursor: pointer; border-radius: var(--radius-sm); padding: 0 4px; }
.st-clickable:hover { background: var(--bg-hover); color: var(--text); }

/* ---- SYNTAX TOKENS ---- */
/* CRITICAL: NO font-size or padding changes on ANY token.
   Any size/spacing change in pre will misalign the textarea cursor. */
.t-kw { color: var(--syn-keyword); }
.t-str { color: var(--syn-string); }
.t-cmt { color: var(--syn-comment); font-style: italic; }
.t-num { color: var(--syn-number); }
.t-fn { color: var(--syn-function); }
.t-bi { color: var(--syn-builtin); }
.t-const { color: var(--syn-constant); }
.t-op { color: var(--syn-operator); }
.t-type { color: var(--syn-type); }
.t-var { color: var(--syn-variable); }
.t-tag { color: var(--syn-tag); }
.t-attr { color: var(--syn-attribute); }
.t-prop { color: var(--syn-property); }
.t-dec { color: var(--syn-decorator); }
.t-rx { color: var(--syn-regex); }
.t-sel { color: var(--syn-selector); }
.t-punc { color: var(--syn-punctuation); }
.t-ins { color: var(--syn-inserted); }
.t-del { color: var(--syn-deleted); }
.t-fence { color: var(--syn-fence); font-weight: 600; }
.t-h1,.t-h2,.t-h3,.t-h4 { color: var(--syn-heading); font-weight: 700; }
.t-bold { color: var(--syn-bold); font-weight: 700; }
.t-italic { color: var(--syn-italic); font-style: italic; }
.t-link { color: var(--syn-link); text-decoration: underline; text-underline-offset: 2px; }
.t-code { color: var(--syn-string); }

/* Invisible chars — use zero-width approach so they NEVER affect text layout */
.ws-s { position: relative; }
.ws-s::after { content:'·'; position:absolute; left:0; top:0; color:var(--ws-color); pointer-events:none; }
.ws-t { position: relative; }
.ws-t::after { content:'→'; position:absolute; left:0; top:0; color:var(--ws-color); pointer-events:none; }
.ws-n { position:relative; display:inline; font-size:0; letter-spacing:0; }
.ws-n::after { content:'↵'; position:absolute; left:0; font-size: var(--font-size); color: var(--ws-color); pointer-events:none; }

/* Find highlight */
.find-hl { background: rgba(229, 186, 57, 0.3); border-radius: 2px; }
.find-hl-active { background: rgba(229, 186, 57, 0.6); }

/* ---- NOTIFICATIONS ---- */
.toast {
  position: fixed;
  bottom: 40px; right: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 300;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---- WELCOME OVERLAY ---- */
.welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.35;
}

.welcome-keys {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 360px;
}

.welcome-key {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

/* ---- FILE MANAGER PANEL ---- */
.fm-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  z-index: 40;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.18s ease;
  overflow: hidden;
}

.fm-panel.open { transform: translateX(0); }

.fm-header {
  height: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  gap: 6px;
}

.fm-header .fm-count {
  font-weight: 400;
  color: var(--text-faint);
  font-size: 10px;
}

.fm-header .fm-spacer { flex: 1; }

.fm-header button {
  width: 22px; height: 22px;
  border: none; background: transparent;
  color: var(--text-faint); cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.fm-header button:hover { background: var(--bg-hover); color: var(--text); }

.fm-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
}

.fm-list::-webkit-scrollbar { width: 4px; }
.fm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 2px; }

.fm-item {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.08s;
  margin-bottom: 2px;
  position: relative;
  border: 1px solid transparent;
}

.fm-item:hover { background: var(--bg-hover); }
.fm-item.active { background: var(--bg-active); border-color: var(--accent-dim); }

.fm-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.fm-item-icon { flex-shrink: 0; opacity: 0.6; }
.fm-item.active .fm-item-icon { opacity: 0.9; }

.fm-item-name {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-item-lang {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  background: var(--bg-editor);
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.fm-item-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
  display: none;
}

.fm-item.modified .fm-item-dot { display: block; }

.fm-item-preview {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-faint);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  max-height: 30px;
}

.fm-item-meta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
}

.fm-item-actions {
  position: absolute;
  top: 6px; right: 6px;
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity 0.1s;
}

.fm-item:hover .fm-item-actions { opacity: 1; }

.fm-item-actions button {
  width: 20px; height: 20px;
  border: none; background: var(--bg-surface);
  color: var(--text-faint);
  border-radius: 3px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fm-item-actions button:hover { background: var(--bg-hover); color: var(--text); }

/* ---- EXPORT MODAL ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-width: 340px;
  max-width: 90vw;
  /* Tall modals (Settings) must scroll instead of overflowing off-screen,
     otherwise the close button becomes unreachable on small screens. */
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.modal h3 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 14px;
}

.modal-field {
  margin-bottom: 12px;
}

.modal-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.modal-field input, .modal-field select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
}
.modal-field input:focus, .modal-field select:focus { border-color: var(--accent); }
.modal-field select { cursor: pointer; }
.modal-field select option { background: #161b22; }

.modal-preview {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--bg-editor);
  border-radius: var(--radius-sm);
  word-break: break-all;
}

.modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.modal-btn {
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.1s;
}
.modal-btn:hover { background: var(--bg-hover); }
.modal-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.modal-btn.primary:hover { opacity: 0.9; }

/* ---- Settings: graphic controls ---- */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.set-row:last-of-type { border-bottom: none; }

/* Close (×) in a modal's top-right corner. */
.modal { position: relative; }
.modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
}
.modal-x:hover { color: var(--text-bright); border-color: var(--accent-dim); }
.set-col { display: flex; flex-direction: column; }
.set-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text); }
.set-label .set-ico { font-size: 15px; line-height: 1; opacity: 0.95; }
.set-sub { font-size: 10px; color: var(--text-faint); font-weight: 400; margin-top: 3px; }
.seg { display: inline-flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2px; gap: 2px; }
.seg button { border: none; background: transparent; color: var(--text-muted); font-family: var(--font-ui); font-size: 11px; font-weight: 500; padding: 5px 11px; border-radius: calc(var(--radius-md) - 2px); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background 0.12s, color 0.12s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--accent); color: var(--on-accent); }
.switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 13px; transition: background 0.15s, border-color 0.15s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--text-muted); border-radius: 50%; transition: transform 0.15s, background 0.15s; }
.switch input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked ~ .thumb { transform: translateX(18px); background: #fff; }

/* ---- NOTES VIEW (vertical card stack) ---- */
.notes-stack {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 32px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
}
.editor-area.notes-view { display: block; position: relative; }
.editor-area.notes-view .notes-stack { display: flex; }
.editor-area.notes-view > .gutter,
.editor-area.notes-view > .code-area { display: none; }
.editor-area.notes-view > .fm-panel { z-index: 60; }
body.notes-view .tabs-bar { display: none; }

.notes-stack::-webkit-scrollbar { width: 8px; }
.notes-stack::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 4px; }

.note-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  /* When scrollIntoView aligns this card to the top of the scroll
     container, leave breathing room below the toolbar so the head
     doesn't slam against the chrome. */
  scroll-margin-top: 14px;
  scroll-margin-bottom: 14px;
}
.note-card:not(.active) { cursor: pointer; }
.note-card:not(.active):hover { border-color: var(--accent-dim); background: var(--bg-tab-hover); }
.note-card.active {
  border-color: var(--accent-dim);
  box-shadow: 0 6px 32px rgba(0,0,0,0.45), 0 0 0 1px var(--accent-dim);
}

.note-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--bg-tabs);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 12px;
  user-select: none;
}
.note-card.active .note-card-head { background: var(--bg-tab-active); }
.note-card-head .icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.note-card-head .icon:hover { opacity: 1; color: var(--accent); }
.note-card-head .icon.pinned { opacity: 1; color: var(--accent); }
.note-card.active .note-card-head .icon { opacity: 0.95; }
.note-card.pinned { border-color: var(--accent-dim); }
.note-card-head .title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.15;
  gap: 1px;
  /* Extra breathing room before the MARKDOWN badge — the column
     would otherwise feel glued to the badge with just the parent
     gap (8px). Bumps title→badge to ~16px. */
  margin-right: 8px;
}
.note-card-head .note-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.note-card.active .note-card-head .note-num {
  color: var(--text);
  border-color: var(--accent-dim);
}
.note-card-head .name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.note-card.active .note-card-head .name { color: var(--text-bright); }
.note-card-head .created-at {
  font-family: var(--font-mono);
  font-size: 8px;
  /* Inherit text colour but dim it — readable in both themes
     (was --text-faint = #30363d, invisible on dark). */
  color: var(--text);
  opacity: 0.55;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.note-card.active .note-card-head .created-at { opacity: 0.7; }
.note-card-head .lang-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--preview-text);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
/* Desktop shows the full name; mobile media query swaps to the short
   form (see RESPONSIVE block) — saves real estate on iPhone heads. */
.note-card-head .lang-badge .lang-short { display: none; }
.note-card-head .meta {
  color: var(--preview-text);
  font-family: var(--font-mono);
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Pushed right via .actions instead of meta so the gap between
     title / MARKDOWN / dot / clock-icon stays a uniform 8px. */
}
.note-card-head .actions { margin-left: auto; }
.note-card.modified .note-card-head .meta .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}
.note-card-head .actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.note-card-head .actions button {
  background: transparent;
  border: none;
  color: var(--preview-text);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.note-card-head .actions button:hover { color: var(--text); background: var(--bg-hover); }
.note-card-head .actions button.copied { color: var(--success); }

.note-card-body {
  background: var(--bg-editor);
  position: relative;
}
.note-card-body .preview {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--preview-text);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 64px;
  position: relative;
}
.note-card-body .preview.empty {
  font-style: italic;
  color: var(--text-faint);
  font-family: var(--font-ui);
}
.note-card-body .preview::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16px;
  background: linear-gradient(to bottom, transparent, var(--bg-editor));
  pointer-events: none;
}

/* Active card hosts the actual editor (gutter + code-area moved here).
   Height is content-driven, set inline by _adjustActiveCardHeight()
   in highlight(). CSS bounds it to a sane min/max. */
.note-card.active .active-slot {
  display: flex;
  min-height: 120px;
  /* Cap to fit the visible viewport so the card never slides under
     the status bar / home indicator on iPhone PWA. Subtracts:
       toolbar + status + 14px top + 14px bottom + safe-area top/bottom
       + ~52px for the card head + ~38px reserve for the MD helper bar
       if the user has it on. dvh tracks the live viewport (Safari
     address bar appearing / disappearing). */
  max-height: calc(
    100dvh
    - var(--toolbar-h)
    - var(--status-h)
    - 28px
    - env(safe-area-inset-top)
    - env(safe-area-inset-bottom)
    - 52px
    - 38px
  );
  position: relative;
  background: var(--bg-editor);
}
.note-card.active .active-slot > .gutter { /* keeps its own styling */ }
.note-card.active .active-slot > .code-area { flex: 1; }

.note-new {
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-faint);
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.12s;
  flex-shrink: 0;
}
.note-new:hover { border-color: var(--accent-dim); color: var(--accent); background: rgba(227,179,65,0.04); }

/* ---- MARKDOWN PREVIEW ---- */
.md-preview {
  position: absolute;
  inset: 0;
  background: var(--bg-editor);
  overflow-x: hidden;     /* never scroll horizontally at container level */
  overflow-y: auto;       /* code blocks/tables manage their own h-scroll */
  padding: 28px 36px 60px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.65;
  z-index: 50;
  display: none;
}
.md-preview.open { display: block; }
/* Bound every block child so a single wide table/URL/code line can't
   blow out the container. Long unbreakable text wraps at any point. */
.md-preview > * { max-width: 100%; min-width: 0; }
.md-preview p, .md-preview li, .md-preview a, .md-preview h1, .md-preview h2,
.md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.editor-area.preview-active .gutter { display: none; }
.editor-area.preview-active .code-area .code-scroll { visibility: hidden; }
.md-preview::-webkit-scrollbar { width: 8px; }
.md-preview::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 4px; }
.md-preview h1, .md-preview h2, .md-preview h3,
.md-preview h4, .md-preview h5, .md-preview h6 {
  color: var(--text-bright);
  margin: 1.2em 0 0.6em;
  font-weight: 600;
  line-height: 1.3;
}
.md-preview h1 { font-size: 1.7em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.md-preview h2 { font-size: 1.35em; border-bottom: 1px solid var(--border); padding-bottom: 0.25em; }
.md-preview h3 { font-size: 1.18em; }
.md-preview h4 { font-size: 1.05em; }
.md-preview p { margin: 0.6em 0; }
.md-preview ul, .md-preview ol { margin: 0.6em 0; padding-left: 1.8em; }
.md-preview li { margin: 0.25em 0; }
.md-preview li > p { margin: 0.2em 0; }
.md-preview code {
  background: var(--bg-panel);
  padding: 0.15em 0.45em;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--syn-string);
}
.md-preview pre {
  background: var(--bg-panel);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 0;
  border: 1px solid var(--border);
}
.md-preview pre code {
  background: none; padding: 0;
  color: var(--text);
  font-size: 12.5px;
  display: block;
  white-space: pre;
}
.md-fence {
  position: relative;
  margin: 0.9em 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-panel);
}
.md-fence-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 12px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.md-fence-lang {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.md-fence-copy {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s;
}
.md-fence-copy:hover { color: var(--text); border-color: var(--border); background: var(--bg-hover); }
.md-fence-copy.copied,
.md-fence-copy .md-fence-copy-lbl.copied { color: var(--success); }
.md-fence pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bg-panel);
}
.md-preview blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.1em 1em;
  color: var(--text-muted);
  margin: 0.7em 0;
  background: rgba(227,179,65,0.04);
}
.md-preview a { color: var(--accent); text-decoration: none; }
.md-preview a:hover { text-decoration: underline; }
.md-preview strong { color: var(--text-bright); font-weight: 700; }
.md-preview em { font-style: italic; }
.md-preview hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.md-preview table {
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 13px;
  display: block;          /* allow per-table h-scroll instead of container */
  max-width: 100%;
  overflow-x: auto;
}
.md-preview th, .md-preview td {
  border: 1px solid var(--border);
  padding: 6px 14px;
  text-align: left;
}
.md-preview th { background: var(--bg-panel); color: var(--text-bright); font-weight: 600; }
.md-preview img { max-width: 100%; border-radius: var(--radius-md); }
.md-preview p.md-img-block { margin: 1.4em 0; }
.md-preview p.md-img-block img { display: block; }
/* ---- Extended syntax: highlight / sub / sup / task / dl / footnotes ---- */
.md-preview del { color: var(--text-muted); text-decoration: line-through; }
.md-preview mark {
  background: rgba(255,200,0,0.18);
  color: var(--text-bright);
  padding: 0 3px;
  border-radius: 3px;
}
.md-preview sub, .md-preview sup { font-size: 0.75em; line-height: 0; }
.md-preview ul.task-list { list-style: none; padding-left: 0.5em; }
.md-preview li.task { display: flex; align-items: flex-start; gap: 8px; margin: 0.25em 0; }
.md-preview li.task input[type=checkbox] { margin: 0.35em 0 0; accent-color: var(--accent); }
.md-preview dl { margin: 0.8em 0; }
.md-preview dt { color: var(--text-bright); font-weight: 600; margin-top: 0.4em; }
.md-preview dd { margin: 0 0 0.4em 1.5em; color: var(--text); }
.md-preview .md-footnotes-sep { border-top: 1px dashed var(--border); margin: 1.6em 0 0.6em; }
.md-preview ol.md-footnotes {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 2em;
}
.md-preview ol.md-footnotes li { margin: 0.25em 0; }
.md-preview .md-footnote-back {
  margin-left: 4px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.7;
}
.md-preview .md-footnote-back:hover { opacity: 1; }
.md-preview .md-footnote-ref a { color: var(--accent); text-decoration: none; }

/* ---- Cheat sheet modal ---- */
.md-sheet-modal h3 { margin: 0 0 6px; color: var(--text-bright); font-size: 15px; }
.md-sheet-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.md-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.md-sheet-item {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.md-sheet-name {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.md-sheet-sc {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: normal;
}
.md-sheet-syntax {
  background: var(--bg-deep);
  padding: 6px 8px;
  border-radius: 4px;
  margin: 0;
  overflow-x: auto;
}
.md-sheet-syntax code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text);
  background: transparent;
  white-space: pre;
}
.md-sheet-btn {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 2px;
}
.md-sheet-btn:hover { background: rgba(227,179,65,0.10); color: var(--text-bright); }

/* ---- HISTORY / VERSIONING LIST ---- */
.history-list {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-deep);
}
.history-list::-webkit-scrollbar { width: 6px; }
.history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.history-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.1s;
}
.history-item:last-child { border-bottom: none; }
.history-item:hover { background: var(--bg-hover); }
.history-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.history-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
}
.history-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-faint);
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.history-preview {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 30px;
  background: var(--bg-editor);
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.history-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.history-actions button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
}
.history-actions button:hover { border-color: var(--accent-dim); color: var(--accent); }
.history-actions .restore { color: var(--accent); border-color: var(--accent-dim); }
.history-actions .restore:hover { background: var(--bg-active); }
.history-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
.history-empty.disabled { color: var(--text-faint); }

/* ---- DEBUG PANEL ---- */
.debug-panel {
  position: fixed;
  right: 12px;
  bottom: 40px;
  width: 380px;
  max-height: 60vh;
  background: rgba(10,13,18,0.96);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  z-index: 9999;
  display: none;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  font-family: var(--font-mono);
}
.debug-panel.open { display: flex; }
.debug-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
}
.debug-header button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.debug-header button:hover { color: var(--text); border-color: var(--accent-dim); }
#debugContent {
  margin: 0;
  padding: 10px 12px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text);
  overflow: auto;
  white-space: pre;
  flex: 1;
  min-height: 100px;
}
#debugContent .err { color: var(--danger); }

/* ---- RESPONSIVE ---- */
@media (max-width: 700px) {
  :root { --gutter-w: 40px; }
  .gutter-inner { font-size: 11px; padding: 10px 8px 10px 0; }
  .hide-m { display: none !important; }
  .tab { min-width: 80px; max-width: 140px; padding: 0 6px 0 10px; }
  .find-panel { min-width: 280px; right: 8px; }
  .fm-panel { width: 260px; }
  /* Card head on mobile: drop "lines" + "ago" badges to save space.
     Display name is shortened (date moved to second line), and the
     dot for the modified-state stays so the user keeps that signal. */
  .note-card-head .meta-lines,
  .note-card-head .meta-ago { display: none; }
  .note-card-head .name { max-width: 100%; }
  .note-card-head { padding: 7px 10px; gap: 6px; }
  /* Lang badge: swap to the short label (MARKDOWN → MD) on mobile. */
  .note-card-head .lang-badge .lang-full { display: none; }
  .note-card-head .lang-badge .lang-short { display: inline; }
  /* Status bar on mobile: keep the bar compact. Hide UTF-8 (always
     constant in CodeLens), shrink gaps + font, allow horizontal
     scroll for the remaining items if the viewport is tight. */
  .status-bar { gap: 8px; font-size: 9.5px; overflow-x: auto; }
  .status-bar::-webkit-scrollbar { display: none; }
  #stEnc { display: none; }
  .st-spacer { min-width: 8px; }
  /* iOS zoom-on-focus floor: only for the find input + modal fields
     (small forms where focus is the main interaction). Do NOT apply
     to .tb-select (made 'Auto-detect' / 'Plain Text' look huge
     compared to the rest of the toolbar) or to the code area. */
  .find-input { font-size: 16px !important; }
  .modal-field input, .modal-field select { font-size: 16px !important; }
}

/* ============================================================
   MARKDOWN HACKS (callouts, centering, ToC) — added 2026-05-27
   Tag whitelist (ins/mark/kbd/sub/sup/center) uses native rendering;
   these rules style the generated callout/toc/center wrappers.
   ============================================================ */
.md-center { text-align: center; }

.md-callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-hover);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
}
.md-callout-title {
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  color: var(--accent);
}
.md-callout > :last-child { margin-bottom: 0; }
.md-callout-tip       { border-left-color: var(--success); }
.md-callout-tip       .md-callout-title { color: var(--success); }
.md-callout-warning   { border-left-color: var(--warning); }
.md-callout-warning   .md-callout-title { color: var(--warning); }
.md-callout-caution   { border-left-color: var(--danger); }
.md-callout-caution   .md-callout-title { color: var(--danger); }
.md-callout-important  { border-left-color: var(--accent); }

.md-toc {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 12px 0;
  background: var(--bg-surface);
  font-size: 0.92em;
}
.md-toc ul { list-style: none; margin: 0; padding: 0; }
.md-toc li { margin: 2px 0; }
.md-toc-l1 { margin-left: 0; }
.md-toc-l2 { margin-left: 14px; }
.md-toc-l3 { margin-left: 28px; }
.md-toc-l4 { margin-left: 42px; }
.md-toc-l5 { margin-left: 56px; }
.md-toc-l6 { margin-left: 70px; }
.md-pre { white-space: pre-wrap; word-break: break-word; }

/* ============================================================
   BOARD / MAP VIEW — added 2026-05-27
   Overlay that sits over the editor area; horizontal scroll of group
   columns. Does not host the editor.
   ============================================================ */
.board-view {
  position: absolute;
  /* Start below the toolbar (z-index 100) so it stays visible + the Board
     button can toggle the view off. Cover down to the bottom. */
  top: var(--toolbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--bg-editor);
}
.board-view[hidden] { display: none; }
.board-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-toolbar);
}
.board-add, .board-close {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.85em;
}
.board-add:hover, .board-close:hover { border-color: var(--accent); color: var(--accent); }
.board-cols {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
}
.board-col {
  flex: 0 0 260px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.board-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
/* Delicate: only the column's outer border picks up the group colour
   (softened by mixing with the neutral border), nothing else. */
.board-col.has-color {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--group-color) 55%, var(--border));
}
.board-col-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.board-col-name { font-weight: 600; color: var(--text-bright); flex: 1; }
.board-col-count {
  font-size: 0.75em;
  color: var(--text-muted);
  background: var(--bg-panel);
  border-radius: 10px;
  padding: 1px 7px;
}
.board-col-rename, .board-col-del {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 0.85em; padding: 2px 4px;
}
.board-col-rename:hover { color: var(--accent); }
.board-col-del:hover { color: var(--danger); }
.board-col-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
}
.board-card {
  background: var(--bg-editor);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.board-card:hover { border-color: var(--accent-dim); }
.board-card-row { display: flex; align-items: flex-start; gap: 8px; }
.board-card-main { min-width: 0; flex: 1; }
.board-card-num {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  line-height: 1.2;
  flex: 0 0 auto;
}
.board-card-name { font-weight: 500; color: var(--text); font-size: 0.9em; }
.board-card-date { font-size: 0.72em; color: var(--text-muted); margin-top: 2px; }
.board-card-preview { margin-top: 6px; }
.board-card-pline {
  color: var(--text-muted);
  font-size: 0.78em;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-card-group {
  margin-top: 6px;
  width: 100%;
  font-size: 0.75em;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
}

.board-add { font-weight: 600; }

/* Group label in the notes-view card header (only when grouped). Kept
   subtle: a small group-coloured dot + muted text (the full colour lives
   in the kanban board, not here). */
.note-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-group-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-muted);
}

/* ============================================================
   NOTES-VIEW FILTER BAR — added 2026-05-27
   ============================================================ */
/* Filter row at the top of the notes stack — same dashed-rounded look as
   the "+ Nuova nota" button it sits next to. */
.notes-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  flex-shrink: 0;
}
.nf-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  padding: 7px 10px;
  cursor: text;
  font-size: 0.85em;
}
.nf-search:hover { border-color: var(--accent-dim); color: var(--accent); }
.nf-search span { flex: 1; text-align: left; }
.nf-search kbd {
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  color: var(--text-muted);
}
.nf-sel {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 0.82em;
  flex: 0 0 auto;
}
.nf-dir {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 6px 9px;
  font-size: 0.95em;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.nf-dir:hover { border-color: var(--accent-dim); color: var(--accent); }

/* ============================================================
   COMMAND PALETTE — added 2026-05-27
   ============================================================ */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
}
.cmd-palette[hidden] { display: none; }
.cmd-box {
  width: min(560px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.cmd-input {
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-bright);
  font-size: 1em;
  padding: 14px 16px;
  outline: none;
}
.cmd-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.cmd-filters .nf-sel { flex: 1; }
.cmd-results { overflow-y: auto; padding: 6px; }
.cmd-empty { color: var(--text-muted); padding: 16px; text-align: center; font-size: 0.9em; }
.cmd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.cmd-item.sel { background: var(--bg-active); }
.cmd-name { flex: 1; color: var(--text); font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-grp { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72em; color: var(--text-muted); flex: 0 0 auto; }
.cmd-grp-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ============================================================
   TOOLBAR DROPDOWNS (File / Vista) — added 2026-05-27
   ============================================================ */
.tb-dropdown { position: relative; display: inline-flex; }
.tb-caret { font-size: 0.7em; margin-left: 1px; opacity: 0.7; }
.tb-menu {
  display: none;
  position: fixed;       /* fixed so the toolbar's overflow:auto can't clip it */
  z-index: 999;
  min-width: 180px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.35);
  padding: 5px;
  flex-direction: column;
  gap: 2px;
}
.tb-menu.open { display: flex; }
/* Buttons relocated into a menu render as full-width left-aligned rows with
   their labels always visible (the toolbar's hide-m rule doesn't apply). */
.tb-menu .tb-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
}
.tb-menu .tb-btn .hide-m { display: inline !important; }
.tb-menu .tb-btn kbd { margin-left: auto; }
.tb-menu .tb-select { width: 100%; }
.tb-menu-font { display: flex; align-items: center; gap: 4px; padding: 4px 6px; }
.tb-menu-font .tb-btn { width: auto; }

/* ============================================================
   TTS PLAYER BAR — added 2026-05-27
   ============================================================ */
.tts-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.tts-bar[hidden] { display: none; }
.tts-slot { flex: 1; min-width: 0; }
.tts-status { font-size: 0.75em; color: var(--accent); white-space: nowrap; flex: 0 0 auto; }
.tts-bar.tts-loading .tts-slot { opacity: 0.55; pointer-events: none; }
.tts-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  flex: 0 0 auto;
}
.tts-close:hover { border-color: var(--danger); color: var(--danger); }

/* ============================================================
   BACHECA / GRID VIEW (Keep-style masonry) — added 2026-05-27
   ============================================================ */
.grid-view {
  position: absolute;
  top: var(--toolbar-h);
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--bg-editor);
}
.grid-view[hidden] { display: none; }
/* Scroll container (vertical only). */
.grid-cols {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}
/* Row-major masonry: JS distributes cards round-robin across these flex
   columns so reading order is left→right, top→bottom (priority order is
   preserved). CSS multicol can't do this — it fills a column fully first. */
.grid-masonry { display: flex; gap: 12px; align-items: flex-start; }
.grid-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.grid-card {
  position: relative;            /* anchor for the #num badge */
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  overflow: hidden;              /* long tokens can't widen the column */
}
.grid-card:hover { border-color: var(--accent-dim); }
.grid-card.tinted {
  border-color: color-mix(in srgb, var(--g) 45%, var(--border));
  background: color-mix(in srgb, var(--g) 10%, var(--bg-surface));
}
.grid-card-num {
  position: absolute; top: 9px; right: 9px;
  font-size: 0.62em; font-weight: 600; color: var(--text-muted);
  border: 1px dashed var(--border); border-radius: 5px; padding: 0 4px;
}
/* title/content stay left-aligned; reserve room so the title's first line
   doesn't run under the top-right #num badge. */
/* group chip: same dashed-chip language as .grid-card-num, just smaller,
   sitting right under the #num so the two read as a matched pair. */
.grid-card-group {
  position: absolute; top: 25px; right: 9px; max-width: 70%;
  font-size: 0.52em; font-weight: 600; color: var(--text-muted);
  border: 1px dashed var(--border); border-radius: 5px; padding: 0 4px;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-card-name { font-weight: 600; color: var(--text-bright); font-size: 0.8em; padding-right: 38px; overflow-wrap: anywhere; word-break: break-word; }
.grid-card-date { font-size: 0.68em; color: var(--text-muted); margin-top: 2px; }
.grid-card-preview {
  margin-top: 7px; color: var(--text-muted); font-size: 0.8em; line-height: 1.4;
  overflow-wrap: anywhere; word-break: break-word; overflow: hidden;
  /* clamp to whole lines so we never show a sliver of the next one */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
}

/* Note actions modal — vertical full-width buttons */
.card-act-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.card-act-list .modal-btn { width: 100%; }
.card-act-prio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 2px 0 12px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel);
}
.card-act-prio-lbl { font-size: 0.85em; color: var(--text-muted); }

/* Priority stepper — shared by the board column header and the note modal. */
.prio-step { display: inline-flex; align-items: center; gap: 2px; }
.prio-step .prio-up, .prio-step .prio-dn {
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 6px; width: 22px; height: 22px; line-height: 1; padding: 0;
  font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.prio-step .prio-up:hover, .prio-step .prio-dn:hover { border-color: var(--accent-dim); color: var(--accent); }
.prio-step .prio-val {
  min-width: 22px; text-align: center; font-size: 0.72em; font-weight: 600;
  color: var(--text-bright); font-variant-numeric: tabular-nums;
}

/* AI diff modal */
.ai-diff-tabs {
  display: flex; gap: 4px; margin: 4px 0 10px;
  border: 1px solid var(--border); border-radius: 8px; padding: 3px;
  background: var(--bg-panel);
}
.ai-diff-tab {
  flex: 1; background: transparent; border: none; color: var(--text-muted);
  font-size: 12px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-family: inherit;
}
.ai-diff-tab.active { background: var(--bg-surface); color: var(--text-bright); }
.ai-diff-body {
  max-height: 55vh; overflow: auto; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; padding: 8px 10px;
  white-space: pre-wrap; word-break: break-word;
}
.ai-diff-line { display: block; padding: 0 4px; border-radius: 3px; min-height: 1.4em; }
.ai-diff-line.add { background: rgba(80, 200, 120, 0.16); color: var(--text-bright); }
.ai-diff-line.del { background: rgba(220, 80, 90, 0.18); color: var(--text-bright); text-decoration: line-through; opacity: 0.85; }
.ai-diff-line.ctx { color: var(--text-muted); }
.ai-diff-line .mark { display: inline-block; width: 1em; opacity: 0.7; }
body.theme-light .ai-diff-line.add { background: rgba(70, 160, 90, 0.22); }
body.theme-light .ai-diff-line.del { background: rgba(190, 70, 80, 0.22); }