/* ============================================================
   FORAGE.CSS — shared stylesheet for the Forage Library
   Seven-theme system ported from github.com/forageopen/Noted
   (src/theme.ts / styles.css) — same palettes, mapped onto this
   file's existing token names (--bg/--text/--teal/--ribbon-* etc.)
   rather than Noted's own --ds-* naming, so every existing
   component rule (ribbon, page, vault) keeps working unmodified.
   Applied as html[data-theme="sakura"|"cherry"|"forest-brew"|
   "tea-mist"|"blueberry"|"kokoblu"|"dubai"], picked via the
   ribbon's theme popover (assets/js/ribbon.js) and persisted in
   localStorage. Cherry is the default for a first-time visitor
   (no stored preference), matching Noted's own default.
   Sakura (below, in :root) is the base/no-override theme.
   ============================================================ */

/* Figtree SemiBold — the "Forage Library" wordmark only (.ribbon-title
   below), not the site-wide --font stack. Self-hosted (SIL OFL, see
   assets/fonts/Figtree-OFL.txt) rather than a CDN/Google Fonts link, same
   reasoning as the vendored pdf.worker.min.mjs elsewhere in this repo. */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sakura — light pink surfaces, burgundy text. */
  --bg: #ffe0eb;
  --page-bg: #fff0f5;
  --text: #4a0e2e;
  --text-soft: #4a0e2e;
  --subtitle: #8a4a63;
  --border: #f3c6d6;
  --teal: #c2185b;
  --teal-bg: #ffd6e5;
  --blue: #e64980;
  --panel: #f8e1ea;
  --arrow: #d98aa8;
  --error: #de350b;

  --ribbon-bg: #fff0f5;
  --ribbon-text: #4a0e2e;
  --ribbon-muted: #8a4a63;
  --ribbon-border: #f3c6d6;
  --ribbon-hover: #fff5f9;

  --font: Inter, "Segoe UI", Arial, sans-serif;
}

/* Cherry — charcoal surfaces, neon-pink accent. Default for first-time visitors. */
html[data-theme="cherry"] {
  --bg: #0e0d10;
  --page-bg: #141316;
  --text: #ece7ea;
  --text-soft: #ece7ea;
  --subtitle: #a99aa1;
  --border: #2c262a;
  --teal: #ff2ea6;
  --teal-bg: #3a1230;
  --blue: #ff5ec2;
  --panel: #1c181c;
  --arrow: #45383e;
  --error: #ff6b81;

  --ribbon-bg: #141316;
  --ribbon-text: #ece7ea;
  --ribbon-muted: #a99aa1;
  --ribbon-border: #2c262a;
  --ribbon-hover: #1c1a1d;
}

/* Forest Brew — deep forest-green surfaces, olive-lime accent. */
html[data-theme="forest-brew"] {
  --bg: #212e1e;
  --page-bg: #283624;
  --text: #acc54e;
  --text-soft: #acc54e;
  --subtitle: #8fa968;
  --border: #3a4a34;
  --teal: #acc54e;
  --teal-bg: #3c4a24;
  --blue: #c3db6e;
  --panel: #263424;
  --arrow: #56684c;
  --error: #ff8a65;

  --ribbon-bg: #283624;
  --ribbon-text: #acc54e;
  --ribbon-muted: #8fa968;
  --ribbon-border: #3a4a34;
  --ribbon-hover: #324230;
}

/* Tea Mist — sage-green surfaces, dark forest-green accent. */
html[data-theme="tea-mist"] {
  --bg: #cad1ab;
  --page-bg: #d6dcbc;
  --text: #242f21;
  --text-soft: #242f21;
  --subtitle: #56604e;
  --border: #b9c293;
  --teal: #242f21;
  --teal-bg: #dce2c4;
  --blue: #3d4b37;
  --panel: #d2d8b7;
  --arrow: #9ca876;
  --error: #c1502e;

  --ribbon-bg: #d6dcbc;
  --ribbon-text: #242f21;
  --ribbon-muted: #56604e;
  --ribbon-border: #b9c293;
  --ribbon-hover: #e3e7ce;
}

/* Blueberry — blue-slate background, deep-plum surface, periwinkle accent. */
html[data-theme="blueberry"] {
  --bg: #4b4f76;
  --page-bg: #411b32;
  --text: #babcd3;
  --text-soft: #babcd3;
  --subtitle: #9799b5;
  --border: #5a5e82;
  --teal: #647ebd;
  --teal-bg: #2e3350;
  --blue: #acbadb;
  --panel: #3e2038;
  --arrow: #757aa3;
  --error: #e0708a;

  --ribbon-bg: #411b32;
  --ribbon-text: #babcd3;
  --ribbon-muted: #9799b5;
  --ribbon-border: #5a5e82;
  --ribbon-hover: #5a2f49;
}

/* Kokoblu — dark brown surfaces, steel-blue accent. No glow effect. */
html[data-theme="kokoblu"] {
  --bg: #31221d;
  --page-bg: #3a2924;
  --text: #a7bdd7;
  --text-soft: #a7bdd7;
  --subtitle: #8c97a3;
  --border: #4a3a34;
  --teal: #a7bdd7;
  --teal-bg: #2e3a45;
  --blue: #c3d3e6;
  --panel: #362621;
  --arrow: #665048;
  --error: #e08566;

  --ribbon-bg: #3a2924;
  --ribbon-text: #a7bdd7;
  --ribbon-muted: #8c97a3;
  --ribbon-border: #4a3a34;
  --ribbon-hover: #453330;
}

/* Dubai — near-black brown surfaces, olive-lime accent. No glow effect. */
html[data-theme="dubai"] {
  --bg: #2a1613;
  --page-bg: #33201c;
  --text: #abc44f;
  --text-soft: #abc44f;
  --subtitle: #8fa168;
  --border: #43302a;
  --teal: #abc44f;
  --teal-bg: #3a431f;
  --blue: #c3d876;
  --panel: #301f1a;
  --arrow: #5e463d;
  --error: #e2705a;

  --ribbon-bg: #33201c;
  --ribbon-text: #abc44f;
  --ribbon-muted: #8fa168;
  --ribbon-border: #43302a;
  --ribbon-hover: #402a24;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font); }

body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}

a { color: var(--blue); }

/* ---------- Page (A4 sheet look, on-screen and print) ---------- */

.page-wrap { padding: 40px; }

.page {
  width: 210mm;
  min-height: 297mm;
  margin: auto auto 40px;
  background: var(--page-bg);
  padding: 18mm;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  page-break-after: always;
  color: var(--text);
}

h1 { font-size: 28px; margin-bottom: 6px; }
.subtitle { font-size: 14px; color: var(--subtitle); margin-bottom: 28px; }
h2 { font-size: 16px; margin-bottom: 5px; }
h3 { font-size: 15px; margin-bottom: 12px; }
p { font-size: 13.5px; line-height: 1.7; color: var(--text-soft); margin-bottom: 16px; }

blockquote {
  border-left: 3px solid var(--teal);
  padding-left: 14px;
  color: var(--text-soft);
  font-style: italic;
  margin: 1em 0;
}

.intro { margin-bottom: 25px; }

/* ---------- Workflow diagram ---------- */

.workflow-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.workflow { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.card { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 14px; min-height: 150px; }
.highlight { border: 2px solid var(--teal); background: var(--teal-bg); }

.number {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; justify-content: center; align-items: center;
  font-size: 12px; font-weight: bold; margin-bottom: 10px;
}

.role { font-size: 11px; color: var(--blue); font-weight: 600; margin-bottom: 8px; }

ul { padding-left: 15px; font-size: 12px; line-height: 1.6; color: var(--text-soft); }
ul.plain { list-style: none; padding-left: 0; font-size: inherit; }
ul.plain li { margin-bottom: 10px; }

.note {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--teal);
  font-size: 11px; line-height: 1.5; color: var(--teal); font-style: italic;
}

.arrow { color: var(--arrow); font-size: 20px; }

/* ---------- Section / questions / footer ---------- */

.section { margin-top: 28px; }

.questions { background: var(--panel); border-radius: 8px; padding: 14px; }
.questions ul { margin: 0; }

.footer { margin-top: 20px; }
.footer p { margin-bottom: 16px; }

.signature { margin-top: 30px; font-weight: 600; color: var(--teal); }

table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { font-weight: 600; background: var(--panel); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--subtitle); }

/* ---------- Ribbon (top bar) ---------- */

.ribbon {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--ribbon-bg);
  color: var(--ribbon-text);
  padding: 10px 20px;
  border-bottom: 1px solid var(--ribbon-border);
}

/* ---------- Site footer (bottom taskbar) ---------- */

.site-footer {
  /* Auto-hide, taskbar-style: pinned over the bottom edge, mostly
     translated off-screen except for an 8px sliver — enough to show
     something's there and stay grabbable/hoverable, since a fully
     offscreen element can't receive the hover that's meant to bring it
     back. :hover reveals it; JS (assets/js/footer.js) only toggles
     .footer-locked on click, so it stays open without hovering —
     unlocking it hands control back to plain :hover with no extra JS, so
     "click again while not hovering" auto-hides for free. Ported from
     github.com/forageopen/Noted's .app-footer (styles.css). */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  transform: translateY(calc(100% - 8px));
  transition: transform 0.2s ease;
  cursor: pointer;
  text-align: center;
  padding: 6px;
  font-size: 12px;
  color: var(--ribbon-muted);
  border-top: 1px solid var(--ribbon-border);
  background: var(--ribbon-bg);
}

.site-footer:hover,
.site-footer.footer-locked {
  transform: translateY(0);
}

.site-footer a {
  color: var(--teal);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.ribbon-title-group { display: flex; align-items: center; gap: 8px; min-width: 0; }

.ribbon-title {
  font-family: "Figtree", var(--font);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ribbon-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ribbon-meta { font-size: 12px; color: var(--ribbon-muted); white-space: nowrap; margin-right: 4px; }

.ribbon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--ribbon-text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ribbon-btn:hover, .ribbon-btn:focus-visible { background: var(--ribbon-hover); }
.ribbon-btn.ribbon-icon { padding: 6px; }
.ribbon-btn svg { width: 18.75px; height: 18.75px; display: block; }
.ribbon-btn.ribbon-logo svg { width: 26px; height: 26px; }

.ribbon-theme-wrap { position: relative; }

.theme-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--ribbon-bg);
  border: 1px solid var(--ribbon-border);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.theme-popover[hidden] { display: none; }

.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ribbon-text);
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}

.theme-option:hover, .theme-option:focus-visible { background: var(--ribbon-hover); }
.theme-option[aria-checked="true"] { font-weight: 600; }

.theme-icon {
  width: 16px;
  height: 16px;
  color: var(--ribbon-text);
  flex-shrink: 0;
}

.ribbon-kebab-wrap { position: relative; }

.ribbon-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--ribbon-bg);
  border: 1px solid var(--ribbon-border);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 175px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ribbon-menu[hidden] { display: none; }
.ribbon-menu li { padding: 8px 10px; font-size: 13px; border-radius: 5px; cursor: pointer; }
.ribbon-menu li:hover, .ribbon-menu li:focus-visible { background: var(--ribbon-hover); }

.forage-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ribbon-bg);
  color: var(--ribbon-text);
  border: 1px solid var(--ribbon-border);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}

.forage-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Print / PDF export ---------- */

@media print {
  body { background: #fff; }
  .page-wrap { padding: 0; }
  .page { margin: 0; box-shadow: none; }
  .ribbon, .no-print { display: none !important; }

  /* Vault: print the rendered content, not the sidebar/dropzone/sidenote
     chrome, and let it flow across as many printed pages as it needs (the
     on-screen scroll container must not clip it to one viewport-height).
     In split view this prints both panes stacked — there's no "active
     pane" marker in the DOM/CSS to key off of, so scoping print to just
     one pane isn't done here. */
  .vault-layout { height: auto; display: block; }
  .vault-sidebar, .vault-dropzone, .vault-sidenote, .vault-editor-toolbar, .vault-resize-handle, .vault-pane-header, .vault-pane-stats-bar, .vault-export-progress { display: none !important; }
  .vault-panes { display: block; }
  .vault-pane, .vault-pane-body { display: block; }
  .vault-pane-main { overflow: visible; padding: 0; background: #fff; }
  .vault-pane-content { max-width: none; color: #111; }
  .vault-deck { gap: 0; }
  .vault-slide { box-shadow: none; border: 1px solid #ccc; page-break-after: always; }
}

@media (max-width: 900px) {
  .workflow { flex-direction: column; }
  .arrow { transform: rotate(90deg); }
}

/* ---------- Vault ---------- */

.vault-layout { display: flex; height: calc(100vh - 49px); }

.vault-sidebar {
  width: 240px;
  min-width: 160px;
  max-width: 480px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 16px 12px;
  background: var(--bg);
}
/* Collapsed via the ribbon's toggle-sidebar icon — hide its resize handle
   too (a sibling combinator, not :has(), since the handle comes AFTER the
   sidebar in the DOM here, unlike the sidenote's handle which precedes it). */
.vault-sidebar[hidden] ~ .vault-resize-handle[data-resize="sidebar"] { display: none; }

/* Drag-to-resize handles — one between sidebar/viewer, one between
   viewer/sidenote (assets/js/vault/resize.js wires the drag behavior;
   this is purely the visual affordance). */
.vault-resize-handle {
  width: 7px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
  background: transparent;
}
.vault-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background: var(--ribbon-border);
}
.vault-resize-handle:hover::after,
.vault-resize-handle:focus-visible::after {
  left: 2px;
  width: 3px;
  background: var(--teal);
  border-radius: 2px;
}
.vault-resize-handle:focus-visible { outline: none; }
body.vault-resizing { cursor: col-resize; user-select: none; }
/* Hide the sidenote's own resize handle while the sidenote itself is
   closed — nothing to resize, and it'd otherwise show as a stray divider
   at the pane's edge. */
.vault-resize-handle:has(+ .vault-sidenote[hidden]) { display: none; }

.vault-tree, .vault-tree-children { list-style: none; }
.vault-tree-children { padding-left: 14px; }
.vault-tree-folder--collapsed > .vault-tree-children { display: none; }

.vault-tree-folder-label {
  display: block;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 6px;
}
.vault-tree-folder-label:hover { background: var(--ribbon-hover); }

.vault-tree-file-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.vault-tree-file-btn:hover, .vault-tree-file-btn:focus-visible { background: var(--ribbon-hover); }

.vault-panes { flex: 1; display: flex; overflow: hidden; }

.vault-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* In split view the first pane becomes a fixed, resizable width (set by
   the drag handle split-view.js inserts between the two panes) instead
   of flex:1 — the second pane keeps flex:1 and fills whatever's left, so
   the split isn't locked 50/50. */
.vault-panes--split .vault-pane:first-child { flex: 0 0 auto; min-width: 200px; }
.vault-pane-body { flex: 1; display: flex; min-width: 0; min-height: 0; }
.vault-pane-main { flex: 1; overflow-y: auto; padding: 40px; background: var(--panel); }

/* Active-pane clarity in split view: a highlighted top border + slightly
   emphasized header on whichever pane the user last clicked into, since
   otherwise there's no visual cue for which pane an action (export,
   sidenote, sidebar file-open) will target. */
.vault-panes--split .vault-pane { border-top: 3px solid transparent; }
.vault-panes--split .vault-pane--active { border-top-color: var(--teal); }

.vault-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ribbon-bg);
}
.vault-pane-header[hidden] { display: none; }
.vault-pane-header-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-pane-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.vault-pane-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.vault-pane-header-btn svg { width: 16px; height: 16px; }
.vault-pane-header-btn:hover, .vault-pane-header-btn:focus-visible { background: var(--ribbon-hover); color: var(--text); }

.vault-pane-export-wrap { position: relative; }
.vault-pane-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--ribbon-bg);
  border: 1px solid var(--ribbon-border);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 175px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.vault-pane-export-menu[hidden] { display: none; }
.vault-pane-export-menu li { padding: 8px 10px; font-size: 13px; border-radius: 5px; cursor: pointer; color: var(--text); white-space: nowrap; }
.vault-pane-export-menu li:hover, .vault-pane-export-menu li:focus-visible { background: var(--ribbon-hover); }
/* An export format that wouldn't produce anything meaningful for the
   currently-open file (e.g. CSV export with no table on screen) — greyed
   out and inert rather than clickable-but-silently-a-no-op. */
.vault-pane-export-menu li[aria-disabled="true"] { color: var(--text-soft); opacity: 0.5; cursor: not-allowed; }
.vault-pane-export-menu li[aria-disabled="true"]:hover, .vault-pane-export-menu li[aria-disabled="true"]:focus-visible { background: none; }

/* Word count / reading time — a full-width bar under the pane header,
   text right-aligned, colors pulled from the active theme like every
   other chrome piece on the page. */
.vault-pane-stats-bar {
  display: flex;
  justify-content: flex-end;
  padding: 4px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ribbon-bg);
}
.vault-pane-stats-bar[hidden] { display: none; }
.vault-pane-stats { font-size: 9pt; color: var(--text-soft); }

/* Shown only during a multi-page JPEG export (see viewer-pane.js
   exportJpeg) — rendering a page at a time via html2canvas is slow
   enough on a 10+ page doc that silent progress would look hung. */
.vault-export-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ribbon-bg);
}
.vault-export-progress[hidden] { display: none; }
.vault-export-progress-label { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.vault-export-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.vault-export-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--teal);
  transition: width 0.15s ease;
}

.vault-dropzone {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  border-radius: 10px;
}
.vault-dropzone[hidden] { display: none; }
.vault-dropzone--active { border-color: var(--teal); background: var(--teal-bg); }
.vault-dropzone-message { text-align: center; }
.vault-dropzone-label { display: block; font-size: 15px; color: var(--text-soft); cursor: pointer; }
.vault-dropzone-new-note {
  display: inline-block;
  margin-top: 14px;
  background: transparent;
  border: none;
  color: var(--blue);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.vault-dropzone-new-note:hover, .vault-dropzone-new-note:focus-visible { color: var(--teal); }
.vault-dropzone-error { color: var(--error); font-size: 15px; cursor: pointer; }
.vault-dropzone-error-hint { margin-top: 8px; font-size: 13px; color: var(--subtitle); cursor: pointer; }

.vault-pane-content { max-width: 720px; margin: 0 auto; }
.vault-content h1, .vault-content h2, .vault-content h3 { margin-top: 1em; margin-bottom: 0.4em; }
.vault-content p { font-size: 14px; line-height: 1.7; color: var(--text-soft); margin-bottom: 14px; }
.vault-table-wrap { overflow-x: auto; margin: 1em 0; }

/* ---------- Main-pane document editor ("…or click to start a new note") ----------
   A blank, editable document in the main viewer pane — distinct from the
   Sidenote panel's own small toolbar (same idea, different scope: this one
   IS the document, not an annotation on top of one). */
.vault-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.vault-editor-format {
  height: 30px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
/* The closed <select> box inherits theme colors fine, but its native
   open-dropdown option list does NOT inherit `background: transparent` —
   without this it falls back to the browser's default white popup, which
   made light-on-dark themes like Cherry (near-white --text on that white
   popup) render invisible text. Explicit background here fixes contrast
   for every theme, not just the ones that happened to have dark text. */
.vault-editor-format option {
  background: var(--panel);
  color: var(--text);
}
.vault-editor-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.vault-editor-btn:hover, .vault-editor-btn:focus-visible { background: var(--ribbon-hover); }
/* flex-wrap since 18 colors + "none" no longer fit on one row next to the
   B/I/U/S buttons — wraps onto its own line(s) instead of overflowing. */
.vault-editor-highlights { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-left: 8px; max-width: 100%; }
.vault-editor-highlight {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
}
.vault-editor-highlight--none { background: var(--page-bg); font-size: 11px; line-height: 1; color: var(--subtitle); }
.vault-editor-title { font-size: 13px; color: var(--subtitle); margin-bottom: 12px; cursor: text; }
.vault-editor-title:hover { color: var(--text); }
.vault-editor-title:focus { outline: none; color: var(--text); }
.vault-editor-body {
  min-height: 400px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.vault-editor-body:focus { outline: none; }
.vault-editor-body:empty::before {
  content: attr(data-placeholder);
  color: var(--subtitle);
}

.vault-status { padding: 24px; font-size: 13px; color: var(--subtitle); text-align: center; }
.vault-status--error { color: var(--error); }

.vault-sidenote {
  width: 260px;
  min-width: 200px;
  max-width: 480px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--bg);
}
.vault-sidenote[hidden] { display: none; }
.vault-sidenote h2 { font-size: 13px; margin-bottom: 10px; }

/* Rich-text toolbar — Bold/Italic/Underline/Strikethrough + a highlighter
   palette, scoped down from Noted's fuller Edit tab (see viewer-pane.js). */
.vault-sidenote-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.vault-sidenote-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.vault-sidenote-btn:hover, .vault-sidenote-btn:focus-visible { background: var(--ribbon-hover); }
.vault-sidenote-highlights { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-left: 6px; max-width: 100%; }
.vault-sidenote-highlight {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
}
.vault-sidenote-highlight--none { background: var(--page-bg); font-size: 10px; line-height: 1; color: var(--subtitle); }

.vault-sidenote-input {
  flex: 1;
  width: 100%;
  min-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: var(--page-bg);
}
.vault-sidenote-input:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.vault-sidenote-input:empty::before {
  content: attr(data-placeholder);
  color: var(--subtitle);
}

/* ---------- Themed scrollbars ----------
   Scrollbar color follows the selected theme's own tokens, so it re-themes
   automatically whenever the theme popover changes --teal/--panel. */
.vault-sidebar, .vault-pane-main, .vault-sidenote, .vault-sidenote-input {
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--panel);
}
.vault-sidebar::-webkit-scrollbar,
.vault-pane-main::-webkit-scrollbar,
.vault-sidenote::-webkit-scrollbar,
.vault-sidenote-input::-webkit-scrollbar {
  width: 10px;
}
.vault-sidebar::-webkit-scrollbar-track,
.vault-pane-main::-webkit-scrollbar-track,
.vault-sidenote::-webkit-scrollbar-track,
.vault-sidenote-input::-webkit-scrollbar-track {
  background: var(--panel);
}
.vault-sidebar::-webkit-scrollbar-thumb,
.vault-pane-main::-webkit-scrollbar-thumb,
.vault-sidenote::-webkit-scrollbar-thumb,
.vault-sidenote-input::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: 6px;
  border: 2px solid var(--panel);
}

/* ---------- PPTX slide deck ---------- */

.vault-deck { display: flex; flex-direction: column; gap: 32px; }
.vault-slide {
  background: var(--page-bg);
  border-radius: 10px;
  padding: 48px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.vault-slide-title { font-size: 24px; margin-bottom: 10px; }
.vault-slide-subtitle { font-size: 15px; color: var(--subtitle); }
.vault-slide-bullets { list-style: none; text-align: left; max-width: 480px; margin: 16px auto 0; }
.vault-slide-bullets li { font-size: 14px; padding: 6px 0; color: var(--text-soft); }
.vault-slide-image { max-width: 100%; margin-top: 16px; border-radius: 6px; }
/* A slide/page that's ENTIRELY an image (every PDF page, and any PPTX
   slide with no title/bullets) doesn't need the 48px padding meant for
   text layout — it just frames the image in a colored margin and makes
   the doc render smaller than it needs to. Only the image-only case is
   affected: slides that mix a title/bullets with an image keep the
   padding, since that's still text layout. */
.vault-slide:has(> .vault-slide-image:only-child) {
  padding: 0;
  overflow: hidden;
  border-radius: 0;
}
.vault-slide:has(> .vault-slide-image:only-child) .vault-slide-image {
  display: block;
  width: 100%;
  margin-top: 0;
  border-radius: 0;
}

@media (max-width: 900px) {
  .vault-layout { flex-direction: column; height: auto; }
  /* !important: overrides the inline width a desktop resize may have left
     in localStorage/style — stacked mobile layout always goes full-width. */
  .vault-sidebar { width: 100% !important; max-width: none; border-bottom: 1px solid var(--ribbon-border); }
  .vault-sidenote { width: 100% !important; max-width: none; border-top: 1px solid var(--ribbon-border); }
  .vault-resize-handle { display: none; }
  .vault-panes--split { flex-direction: column; }
  .vault-panes--split .vault-pane { border-right: none; border-bottom: 1px solid var(--ribbon-border); }
}