grub-basket_SP/styles.css

/* ───────────────────────────────────────────────────────────────────────
   Deliberate CSS-lint exceptions (Obsidian community-plugin review)

   The plugin-store CSS linter raises a few advisory WARNINGS (not errors).
   Each is intentional; documented here so future edits don't "fix" them blindly:

   • !important — used only to override Obsidian's OWN built-in rules: hiding
     view-header / tab-header / nav-buttons chrome for Stashpad leaves, and the
     compact-confirm-modal sizing. These beat Obsidian's base styles on purpose.
   • :has() — `.workspace-leaf:has(> [data-type=stashpad-view])` (chrome-hide
     fallback for DOM variants the plain descendant selector can miss) and
     `.is-mobile:has(.stashpad-composer-input:focus)` (the obvious alternative,
     :focus-within, caught unrelated focus shifts and hid the composer — see the
     comment at that rule). Both are narrowly scoped (per-leaf / mobile-only).
   • display: contents — desktop-only; dissolves the composer button-group
     wrapper so its buttons sit flat in the rail's flex. A nested flex would
     cluster them instead. Fully supported in Obsidian's Electron; the linter's
     "partial in 1.6.5" is a fixed baseline and our minAppVersion is 1.7.0.

   The one false positive (grid `column-gap` flagged as "multicolumn") was real
   to fix and is folded into the `gap` shorthand below.
   ─────────────────────────────────────────────────────────────────────── */
.stashpad-scroll-host {
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  container-type: inline-size;
}
/* Hide the workspace tab back/forward arrows for Stashpad leaves only —
   they navigate file history, which doesn't apply to our chat-style view. */
.workspace-leaf-content[data-type="stashpad-view"] .view-header-nav-buttons,
.workspace-leaf:has(> .workspace-leaf-content[data-type="stashpad-view"]) .view-header-nav-buttons {
  display: none !important;
}
.stashpad-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 0;
  gap: 8px;
  overflow: hidden;
  outline: none;
  box-sizing: border-box;
}

/* Time filter bar */
.stashpad-time-filter-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 4px;
  border-bottom: 1px solid var(--background-modifier-border);
}
/* Match the breadcrumb: on desktop the filter bar bleeds full-width too, so its
   divider lines up edge-to-edge with the breadcrumb's below it. Negate
   .stashpad-view's 12px padding + re-inset the content. Mobile keeps its own
   bottom-toolbar layout. */
.stashpad-view:not(.is-mobile) .stashpad-time-filter-bar {
  margin-inline: -12px;
  padding-inline: 12px;
}
.stashpad-folder-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--font-ui-smaller);
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 50%;
  overflow: hidden;
}
.stashpad-folder-btn .stashpad-btn-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.stashpad-folder-btn:hover { background: var(--background-modifier-hover); }
.stashpad-folder-btn.is-override {
  border-color: var(--interactive-accent);
  color: var(--interactive-accent);
}
.stashpad-time-filter-btns {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  /* Sit immediately after the folder/tag/color cluster (left-aligned,
     "under" the Stashpad name) instead of centering. Allow shrinking so
     the cluster never pushes past the row's right edge into anything
     that follows. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.stashpad-time-filter-btn {
  /* Each button shrinks to its label width (e.g. "Today" / "Month")
     instead of stretching to fill the row. */
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: var(--font-ui-smaller);
  background: var(--background-secondary);
  color: var(--text-muted);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
.stashpad-time-filter-btn:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-time-filter-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
/* Calendar / rolling toggle — icon-only, slimmer than label buttons. */
.stashpad-time-filter-cal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
}
.stashpad-time-filter-cal .svg-icon { width: 14px; height: 14px; }
.stashpad-time-filter-select {
  flex: 1 1 auto;
  min-width: 0;
  display: none;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-smaller);
}
.stashpad-tag-filter-select {
  flex: 0 1 auto;
  max-width: 14ch;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-smaller);
  text-overflow: ellipsis;
}
.stashpad-tag-filter-select:disabled { opacity: 0.5; cursor: not-allowed; }
.stashpad-view.is-mobile .stashpad-tag-filter-select {
  max-width: 10ch;
  height: 28px;
  padding: 0 6px;
}

/* Settings: per-Stashpad color aliases. */
.stashpad-color-aliases-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 14px 12px;
}
.stashpad-color-alias-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--background-modifier-border);
}
.stashpad-color-alias-row:last-child { border-bottom: 0; }
.stashpad-color-alias-swatch {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex: 0 0 auto;
  border: 1px solid var(--background-modifier-border);
}
.stashpad-color-alias-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--font-ui-smaller);
}
.stashpad-color-alias-hex {
  font-family: var(--font-monospace);
  color: var(--text-normal);
}
.stashpad-color-alias-count { color: var(--text-faint); }
.stashpad-color-alias-input {
  flex: 1 1 auto;
  min-width: 0;
}
.stashpad-color-alias-swatch { cursor: pointer; }
.stashpad-color-alias-del {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  color: var(--text-muted);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.stashpad-color-alias-del:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.stashpad-color-alias-row.is-unused .stashpad-color-alias-hex,
.stashpad-color-alias-row.is-unused .stashpad-color-alias-count {
  color: var(--text-faint);
}

/* Settings: per-Stashpad note templates. */
.stashpad-note-templates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 14px 12px;
}
.stashpad-note-template-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--background-modifier-border);
}
.stashpad-note-template-row:last-child { border-bottom: 0; }
.stashpad-note-template-folder {
  flex: 0 0 auto;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  min-width: 120px;
  max-width: 35%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stashpad-note-template-input-wrap {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
}
.stashpad-note-template-input {
  width: 100%;
  box-sizing: border-box;
}
.stashpad-note-template-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  font-size: var(--font-ui-smaller);
}
.stashpad-note-template-suggest-item {
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stashpad-note-template-suggest-item:hover,
.stashpad-note-template-suggest-item.is-active {
  background: var(--background-modifier-hover);
}
.stashpad-note-template-suggest-item.is-active {
  background: var(--background-modifier-active-hover, var(--background-modifier-hover));
}
.stashpad-note-template-warn {
  flex: 1 0 100%;
  font-size: var(--font-ui-smaller);
  color: var(--text-warning, #d6a32a);
  padding: 4px 0 0 0;
}

/* Color filter — custom button + popover (replaces native <select>
   so per-row colored swatches actually paint). */
.stashpad-color-filter-btn {
  /* Force a content-sized box. width: max-content + flex: 0 0 auto
     defeats both flex-row stretching and any inherited min-width from
     Obsidian's default div rules. */
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-smaller);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.stashpad-color-filter-btn:hover { background: var(--background-modifier-hover); }
.stashpad-color-filter-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.stashpad-color-filter-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  border: 1px solid var(--background-modifier-border);
}
.stashpad-color-filter-swatch.is-empty {
  background: transparent;
  /* Diagonal slash so the "All / no color" sentinel reads as
     "any" rather than as a real color. */
  background-image: linear-gradient(to top right,
    transparent 0%, transparent 45%,
    var(--text-muted) 45%, var(--text-muted) 55%,
    transparent 55%, transparent 100%);
}
.stashpad-color-filter-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stashpad-view.is-mobile .stashpad-color-filter-btn {
  height: 28px;
  padding: 0 6px;
}

/* Sort dropdown — mirrors the color-filter button/popover shape. The
   .is-active variant adds a subtle accent so a non-Manual sort mode
   reads at a glance in the header bar. */
.stashpad-sort-btn {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-smaller);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.stashpad-sort-btn:hover { background: var(--background-modifier-hover); }
.stashpad-sort-btn.is-active {
  border-color: var(--interactive-accent);
  color: var(--interactive-accent);
}
.stashpad-sort-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.stashpad-sort-btn.is-disabled:hover { background: var(--background-secondary); }
.stashpad-sort-icon { display: inline-flex; align-items: center; }
.stashpad-sort-icon .svg-icon { width: 14px; height: 14px; }
.stashpad-sort-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stashpad-view.is-mobile .stashpad-sort-btn {
  height: 28px;
  padding: 0 6px;
}

.stashpad-sort-popover {
  position: fixed;
  z-index: var(--layer-popover, 30);
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
  font-size: var(--font-ui-small);
  max-height: 320px;
  overflow-y: auto;
}
.stashpad-sort-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.stashpad-sort-popover-row:hover { background: var(--background-modifier-hover); }
.stashpad-sort-popover-row.is-active {
  color: var(--interactive-accent);
  font-weight: 600;
}
.stashpad-sort-popover-label { white-space: nowrap; }

/* View dropdown — same shape as Sort but each row is two-line (label + a
   short description) so the three modes read clearly at a glance. */
.stashpad-view-btn {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-smaller);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.stashpad-view-btn:hover { background: var(--background-modifier-hover); }
.stashpad-view-btn.is-active {
  border-color: var(--interactive-accent);
  color: var(--interactive-accent);
}
.stashpad-view-icon { display: inline-flex; align-items: center; }
.stashpad-view-icon .svg-icon { width: 14px; height: 14px; }
.stashpad-view-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stashpad-view.is-mobile .stashpad-view-btn {
  height: 28px;
  padding: 0 6px;
}

.stashpad-view-popover {
  position: fixed;
  z-index: var(--layer-popover, 30);
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
  font-size: var(--font-ui-small);
  /* No max-height — the menu always expands fully so the user can see
     every mode + filter at once. overflow-y is a no-op without a
     height constraint, but kept declared as a safety net for any
     future case where the popover needs to clamp (e.g. tiny popout
     window on desktop). */
  overflow-y: auto;
}
/* Mobile: hide per-row descriptions to keep popovers compact. Applies
   to both the standalone view popover (.stashpad-view-popover.is-mobile)
   AND the body of any section rendered inside the combined-filters
   accordion (.stashpad-mobile-filters-popover wraps every section). */
.stashpad-view-popover.is-mobile .stashpad-view-popover-desc,
.stashpad-mobile-filters-popover .stashpad-view-popover-desc {
  display: none;
}
.stashpad-view-popover.is-mobile .stashpad-view-popover-row,
.stashpad-mobile-filters-popover .stashpad-view-popover-row {
  padding: 6px 12px;
}
.stashpad-view-popover-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
}
.stashpad-view-popover-row:hover { background: var(--background-modifier-hover); }
.stashpad-view-popover-row.is-active .stashpad-view-popover-label {
  color: var(--interactive-accent);
  font-weight: 600;
}
.stashpad-view-popover-main { display: flex; align-items: center; gap: 8px; }
/* 0.122.7: leading icon on the view-menu mode rows + "By author". */
.stashpad-view-popover-icon { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--text-muted); }
.stashpad-view-popover-icon .svg-icon { width: 15px; height: 15px; }
.stashpad-view-popover-row.is-active .stashpad-view-popover-icon { color: var(--interactive-accent); }
.stashpad-view-popover-label { white-space: nowrap; }
.stashpad-view-popover-desc {
  /* 0.122.1: descriptions are hidden everywhere now (were mobile-only) to keep
     the view/filter menu compact — it was getting cut off when the header
     collapses into the combined ⋯ menu at narrow widths. The full, expanded
     explanations live in docs/public/view-menu-guide.md; the View dropdown
     button still carries per-mode tooltips. */
  display: none;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: normal;
  max-width: 280px;
}
.stashpad-view-popover-divider {
  height: 1px;
  background: var(--background-modifier-border);
  margin: 4px 0;
}
/* Toggle row: 2-column grid keeps the checkbox aligned with the label
   in the first row and the description tucked under the label in the
   second row. Cleaner than the previous flex-wrap which depended on
   browser-default checkbox widths matching the desc's left padding. */
.stashpad-view-popover-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  /* grid row/column gap (NOT multicolumn) — combined shorthand to avoid
     the CSS linter's column-gap → multicolumn false positive. */
  gap: 2px 8px;
  align-items: center;
  padding: 8px 12px;
}
.stashpad-view-popover-toggle input[type="checkbox"] {
  /* Use transform: scale() instead of explicit width/height to shrink
     the checkbox visually. Chromium draws the native checkmark glyph
     at fixed pixel sizes; clamping the box smaller crops the glyph and
     visually decentres the check. Scaling lets the glyph shrink in
     proportion with the box so the check stays centred. transform-origin
     left keeps the small box flush with the left edge of the grid
     column. */
  margin: 0;
  transform: scale(0.85);
  transform-origin: left center;
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  cursor: pointer;
}
.stashpad-view-popover-toggle .stashpad-view-popover-main {
  grid-row: 1;
  grid-column: 2;
}
.stashpad-view-popover-toggle .stashpad-view-popover-desc {
  grid-row: 2;
  grid-column: 2;
  padding-left: 0;
}
.stashpad-view-popover-toggle.is-disabled {
  opacity: 0.55;
  cursor: default;
}

/* Mobile combined-filters button: a single sliders icon that replaces
   the four desktop dropdown buttons (tag/color/sort/view) on mobile.
   Picks up an accent border when any of the underlying filters / view
   options are in a non-default state. */
.stashpad-mobile-filters-btn {
  flex: 0 0 auto;
  /* Push to the far right of the header bar — auto-margin in a flex
     row absorbs all remaining space on the left of this element, so
     the button sits hard against the right edge regardless of what
     else (folder button, etc.) is rendered to its left. */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 32px;
  padding: 0;
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  cursor: pointer;
  user-select: none;
}
.stashpad-mobile-filters-btn:hover { background: var(--background-modifier-hover); }
.stashpad-mobile-filters-btn.is-active {
  border-color: var(--interactive-accent);
  color: var(--interactive-accent);
}
.stashpad-mobile-filters-icon { display: inline-flex; align-items: center; }
.stashpad-mobile-filters-icon .svg-icon { width: 16px; height: 16px; }

/* Accordion popover. Four sections stacked vertically; one expanded at
   a time. Header chevron flips between right (collapsed) and down
   (expanded). Bodies host the same row markup the desktop popovers
   use — see populate*MenuBody methods. */
.stashpad-mobile-filters-popover {
  position: fixed;
  z-index: var(--layer-popover, 30);
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
  font-size: var(--font-ui-small);
  overflow-y: auto;
  /* Cap height so a fully expanded section with many rows can scroll
     instead of clipping below the viewport. */
  max-height: calc(100vh - 80px);
}
.stashpad-mobile-filters-section + .stashpad-mobile-filters-section {
  border-top: 1px solid var(--background-modifier-border);
}
.stashpad-mobile-filters-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.stashpad-mobile-filters-header:hover { background: var(--background-modifier-hover); }
.stashpad-mobile-filters-chev {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.stashpad-mobile-filters-chev .svg-icon { width: 14px; height: 14px; }
.stashpad-mobile-filters-title { font-weight: 600; }
.stashpad-mobile-filters-summary {
  margin-left: auto;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}
.stashpad-mobile-filters-body {
  padding: 2px 0 6px;
}
.stashpad-mobile-filters-note {
  padding: 8px 16px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

/* Per-row breadcrumb shown in Flat / Everything modes. Sits above the
   note body, muted by default so it doesn't compete with the body text.
   Segments are clickable to focus into that ancestor. */
.stashpad-row-breadcrumb {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  margin-bottom: 4px;
  line-height: 1.2;
}
.stashpad-row-breadcrumb-seg {
  cursor: pointer;
}
.stashpad-row-breadcrumb-seg:hover {
  color: var(--text-normal);
  text-decoration: underline;
}
.stashpad-row-breadcrumb-sep {
  opacity: 0.6;
  pointer-events: none;
}

/* Non-Stashpad file row in Everything mode — intentionally compact and
   visually distinct from note rows so users see it's a different kind
   of item (decorative click-to-open, not part of the selection model). */
.stashpad-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}
.stashpad-file-row:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-file-meta {
  flex: 0 0 auto;
  min-width: 70px;
}
.stashpad-file-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.stashpad-file-body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.stashpad-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stashpad-file-ext {
  flex: 0 0 auto;
  font-size: var(--font-ui-smaller);
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--background-modifier-border);
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.stashpad-color-filter-popover {
  position: fixed;
  z-index: var(--layer-popover, 30);
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
  font-size: var(--font-ui-small);
  max-height: 300px;
  overflow-y: auto;
}
.stashpad-color-filter-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.stashpad-color-filter-popover-row:hover { background: var(--background-modifier-hover); }
.stashpad-color-filter-popover-label {
  white-space: nowrap;
}

/* --- Tag filter: custom button + searchable popover (0.104.x) --- */
.stashpad-tag-filter-btn {
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-smaller);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.stashpad-tag-filter-btn:hover { background: var(--background-modifier-hover); }
.stashpad-tag-filter-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.stashpad-tag-filter-btn-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.stashpad-tag-filter-btn-icon .svg-icon { width: 14px; height: 14px; }
.stashpad-tag-filter-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16ch;
}
.stashpad-view.is-mobile .stashpad-tag-filter-btn { height: 28px; }

.stashpad-tag-filter-popover {
  position: fixed;
  z-index: var(--layer-popover, 30);
  display: flex;
  flex-direction: column;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  font-size: var(--font-ui-small);
  max-height: 340px;
  overflow: hidden;
}
.stashpad-tag-filter-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.stashpad-tag-filter-search-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.stashpad-tag-filter-search-icon .svg-icon { width: 14px; height: 14px; }
.stashpad-tag-filter-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  outline: none;
  padding: 2px 0;
}
.stashpad-tag-filter-clear {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  padding: 2px;
}
.stashpad-tag-filter-clear:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.stashpad-tag-filter-clear .svg-icon { width: 13px; height: 13px; }
.stashpad-tag-filter-list {
  overflow-y: auto;
  padding: 4px 0;
}
.stashpad-tag-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
.stashpad-tag-filter-row.is-highlighted { background: var(--background-modifier-hover); }
.stashpad-tag-filter-row.is-active { font-weight: var(--font-semibold); }
.stashpad-tag-filter-row.is-active .stashpad-tag-filter-row-label::after {
  content: "✓";
  margin-left: 6px;
  color: var(--text-accent);
}
.stashpad-tag-filter-row-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stashpad-tag-filter-row-count { color: var(--text-muted); font-size: var(--font-ui-smaller); flex: 0 0 auto; }
.stashpad-tag-filter-empty { padding: 8px 10px; color: var(--text-muted); }
/* 0.116.0: desktop overflow is now JS-driven (setupBarOverflow) — clusters
   fold into the ⋯ menu by priority rather than the time row alone dropping
   to a <select>. The old @container time-filter rule is retired; the select
   stays display:none on desktop (the ⋯ Time section replaces it). */
.stashpad-overflow-managed {
  /* Managed bar must NOT wrap — overflow is measured (scrollWidth vs
     clientWidth) and resolved by folding clusters, not by wrapping. */
  flex-wrap: nowrap;
}
.stashpad-overflow-managed > * {
  /* Groups + kebab keep their content width so overflow is detectable;
     without this, flex shrink hides overflow by clipping instead. */
  flex: 0 0 auto;
}
.stashpad-overflow-hidden { display: none !important; }
/* A group container holds its expanded cluster row OR a single collapsed
   icon button (combined menu). 0.116.0. */
.stashpad-bar-group { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* The folder button's default max-width:50% is relative to its containing
   block — fine when it was a direct child of the bar, but inside a shrink-to
   -fit group it resolves against the tiny group width (truncating the name)
   and the circular constraint leaves dead space after the button. Use a fixed
   cap instead; an over-long name just folds the nav group to its icon. */
.stashpad-overflow-managed .stashpad-folder-btn { max-width: 240px; }
.stashpad-bar-group-expanded { display: inline-flex; align-items: center; gap: 6px; }
.stashpad-bar-group-icon-glyph { display: inline-flex; align-items: center; }
.stashpad-bar-overflow-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 4px;
  aspect-ratio: 1 / 1;
  color: var(--text-muted);
  cursor: pointer;
}
.stashpad-bar-overflow-btn:hover { background: var(--background-modifier-hover); }
.stashpad-bar-overflow-btn.is-active {
  border-color: var(--interactive-accent);
  color: var(--interactive-accent);
}
/* Mobile: the time filter moves into the combined-filters accordion.
   Hide both the button row AND the fallback select here — the accordion's
   Time section provides the UI. */
.stashpad-view.is-mobile .stashpad-time-filter-btns,
.stashpad-view.is-mobile .stashpad-time-filter-select { display: none; }

.stashpad-breadcrumb {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  /* Full-bleed: negate .stashpad-view's 12px horizontal padding so the row +
     its bottom border span the entire plugin width, edge to edge, instead of
     stopping ~12px short of the route button. The 14px inline padding (12 to
     offset the negative margin + the original 2) keeps the crumb text aligned
     where it was. */
  margin-inline: -12px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--background-modifier-border);
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.stashpad-crumb {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18ch;
  flex: 0 1 auto;
  min-width: 0;
}
/* The current/last crumb gets first dibs on space. */
.stashpad-breadcrumb .stashpad-crumb:last-child { max-width: 36ch; flex-shrink: 1; }
.stashpad-crumb:hover { color: var(--text-normal); text-decoration: underline; }
.stashpad-crumb-home { font-weight: 600; flex: 0 0 auto; max-width: none; }
.stashpad-crumb-ellipsis { cursor: help; flex: 0 0 auto; max-width: none; }
.stashpad-crumb-ellipsis:hover { text-decoration: none; }
.stashpad-crumb-sep { color: var(--text-faint); flex: 0 0 auto; }
.stashpad-crumb-count {
  color: var(--text-faint);
  font-size: 0.85em;
  margin-left: 6px;
  flex: 0 0 auto;
}
/* 0.118.0: live preview swatch next to the per-folder icon input in settings. */
/* 0.121.10: icon-search suggestion rows (IconSuggest) — preview + id label. */
.stashpad-icon-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stashpad-icon-suggest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--text-normal);
}
.stashpad-icon-suggest-icon .svg-icon { width: 18px; height: 18px; }
.stashpad-icon-suggest-label {
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.stashpad-folder-icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  color: var(--text-normal);
  flex: 0 0 auto;
}
.stashpad-folder-icon-preview .svg-icon { width: 18px; height: 18px; }
/* 0.118.4: rebootstrap progress / success notice. */
.stashpad-progress-notice, .stashpad-progress-done, .stashpad-progress-error { min-width: 240px; }
.stashpad-progress-title { font-weight: var(--font-semibold); margin-bottom: 6px; }
.stashpad-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--background-modifier-border);
  overflow: hidden;
  margin: 4px 0 6px;
}
.stashpad-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--interactive-accent);
  border-radius: 3px;
  transition: width 0.15s ease;
}
.stashpad-progress-sub { font-size: var(--font-ui-smaller); color: var(--text-muted); }
/* 0.118.9: the completion summary must be legible on the notice's own
   background. `--text-normal` was dark — invisible on themes that give notices a
   dark background in light mode. Inherit the notice's text color instead, which
   is guaranteed to contrast its background in any theme. */
.stashpad-progress-done .stashpad-progress-sub { color: inherit; opacity: 0.9; }
/* 0.122.0 (#5): the IN-PROGRESS sub line was --text-muted (grey/dim) — same
   legibility problem on the notice's dark background. Inherit the notice color
   so the initial "Counting notes… / <label> · N%" reads bright like the rest. */
.stashpad-progress-notice .stashpad-progress-sub { color: inherit; opacity: 0.85; }
.stashpad-progress-done .stashpad-progress-title { color: var(--text-success, var(--interactive-accent)); }
.stashpad-progress-error .stashpad-progress-title { color: var(--text-error); }
/* 0.117.0: "jump to level" button pinned at the right end of the breadcrumb
   row. Absolutely positioned (the bar is overflow:hidden + nowrap, so an
   in-flow button at the end would clip exactly when crumbs overflow — which is
   when it's needed). The bar reserves right padding so crumbs clip BEHIND it. */
.stashpad-breadcrumb { position: relative; }
/* +12px to match the full-bleed inline padding above (was 40, now 40+12). */
.stashpad-breadcrumb:has(.stashpad-crumb-levels-btn) { padding-right: 52px; }
.stashpad-view.is-mobile .stashpad-breadcrumb:has(.stashpad-crumb-levels-btn) { padding-right: 52px; }
.stashpad-crumb-levels-btn.stashpad-mobile-action-btn {
  position: absolute;
  /* 16px = 12px content inset + the original 4px, so the button stays visually
     put now that the breadcrumb bleeds 12px further right to the pane edge. */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
/* Open-Stashpad-link modal: input fills the row, Paste button pinned at the far
   right (aligned above the Open button). width:100% on the row overrides the
   modal-content shrink-wrap; width:auto on the input overrides the base
   .stashpad-export-name width:100% so the flex sizing takes over. */
.stashpad-open-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.stashpad-open-link-row .stashpad-export-name {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.stashpad-open-link-paste {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.stashpad-open-link-paste-icon {
  display: inline-flex;
}
.stashpad-open-link-paste-icon .svg-icon {
  width: 15px;
  height: 15px;
}
/* 0.172.x: green "link automatically pasted" confirmation, shown only when the
   field was auto-filled from the clipboard. */
.stashpad-open-link-autohint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: var(--font-ui-smaller);
  color: var(--text-success, var(--color-green, #44d07b));
}
.stashpad-open-link-autohint-icon {
  display: inline-flex;
}
.stashpad-open-link-autohint-icon .svg-icon {
  width: 14px;
  height: 14px;
}
/* 0.117.0: breadcrumb levels modal — full-width clickable rows, indented
   by depth. Mobile-responsive via the compact-modal base + fluid width. */
/* Size to content (don't sit at the compact-modal's fixed 440px with empty
   space to the right) — shrink to the longest label, capped + min for sanity. */
.modal.stashpad-compact-modal.stashpad-breadcrumb-modal {
  width: fit-content !important;
  min-width: 260px;
  max-width: min(440px, 94vw) !important;
}
/* 0.119.6: on mobile the jump-to-level picker is a full-width bottom SHEET
   (slides up from the bottom, like Obsidian's mobile pickers) instead of a
   centered box — anchor the modal container to the bottom and stretch the modal. */
body.is-mobile .modal-container:has(.stashpad-breadcrumb-modal),
body.is-phone .modal-container:has(.stashpad-breadcrumb-modal) {
  align-items: flex-end;
}
body.is-mobile .modal.stashpad-compact-modal.stashpad-breadcrumb-modal,
body.is-phone .modal.stashpad-compact-modal.stashpad-breadcrumb-modal {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0;
  border-radius: 14px 14px 0 0;
  max-height: 75vh;
  animation: stashpad-sheet-up 0.18s ease;
}
@keyframes stashpad-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.stashpad-breadcrumb-modal .stashpad-bc-levels { display: flex; flex-direction: column; gap: 2px; }
.stashpad-bc-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 0;
}
.stashpad-bc-level-row:hover:not(.is-current) { background: var(--background-modifier-hover); }
.stashpad-bc-level-row.is-current { background: var(--background-secondary); cursor: default; }
/* Leading level number — Home is 0, then 1..n. Fixed-size chip so labels
   start at a consistent left edge regardless of single/double-digit depth. */
.stashpad-bc-level-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--background-modifier-border);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  font-variant-numeric: tabular-nums;
}
.stashpad-bc-level-row.is-current .stashpad-bc-level-num {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.stashpad-bc-level-label {
  flex: 1 1 auto;
  min-width: 0;
  /* The whole point of this modal is to show the FULL title that the inline
     crumb truncates — so wrap long titles instead of ellipsizing them. */
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--text-normal);
}
.stashpad-bc-level-row.is-current .stashpad-bc-level-label { font-weight: var(--font-semibold); }

/* Focused header — laid out exactly like a list row: 3 columns of
   [meta | body | actions]. The meta column carries the timestamp +
   an invisible grip-shaped spacer so the body's left edge column-
   aligns with each list row. The actions column holds the edit
   pencil and duplicate-tab button. */
.stashpad-focused {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid var(--background-modifier-border);
  /* Match list rows' horizontal padding (10px each side) PLUS the
     list's always-visible scrollbar gutter (10px) so the action
     buttons line up with each row's pencil + enter. The list reserves
     its scrollbar inside its 12px right padding via overflow-y: scroll;
     header doesn't have that gutter so we pad an extra 10px on the
     right to compensate. */
  padding: 8px 20px 12px 10px;
  max-height: 40%;
  overflow-y: auto;
}
.stashpad-focused-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stashpad-focused-meta-top {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Invisible spacer the size of a list row's grip — keeps the
   timestamp column-width matching, so the body's left edge lines
   up across the header and rows. */
.stashpad-focused-grip-spacer {
  width: 14px;
  height: 14px;
}
.stashpad-focused-time {
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: 1.2;
}
.stashpad-focused-body {
  padding: 0;
  /* 0.177.0 (#26): the collapsed focused-header is a fixed-height SCROLL window —
     read more of the note without expanding it. Room for the ~8-line text window
     below (plus any attachment rail / footer). Expanding (.is-body-expanded) drops
     the cap for the full note. */
  max-height: calc(var(--font-text-size, 16px) * 1.5 * 10);
  overflow-y: auto;
}
/* The collapsed body's text is a scroll window, NOT a 2-line truncate+fade — so
   you can scroll to read it in place. The Show more toggle still fully expands. */
.stashpad-focused-body .stashpad-note-text.is-clamped {
  display: block;
  -webkit-line-clamp: unset;
  text-overflow: clip;
  max-height: calc(var(--font-text-size, 16px) * 1.5 * 8);
  overflow-y: auto;
}
/* 0.171.1: when the focused note is expanded via the Show more toggle, drop
   the header's own height cap so the whole note shows (the text clamp alone
   wasn't enough — this container capped it independently). */
.stashpad-focused-body.is-body-expanded {
  max-height: none;
  overflow-y: visible;
}
.stashpad-focused-body > :first-child { margin-top: 0; }
.stashpad-focused-body > :last-child { margin-bottom: 0; }
.stashpad-focused-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stashpad-list {
  flex: 1 1 auto;
  min-height: 0;
  /* `scroll` (not `auto`) keeps the scrollbar always visible so it doesn't
     pop in/out and shift layout. */
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Extend the list to the view's right edge via a negative margin equal to
     the view's right padding, then re-add that as inner padding so notes
     don't sit under the scrollbar. Net effect: scrollbar is flush with the
     view's right edge. */
  margin-right: -12px;
  padding: 4px 12px 4px 0;
}
/* Slim, themed scrollbar that matches the rest of the UI. */
.stashpad-list::-webkit-scrollbar { width: 10px; }
.stashpad-list::-webkit-scrollbar-track { background: transparent; }
.stashpad-list::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.stashpad-list::-webkit-scrollbar-thumb:hover {
  background: var(--background-modifier-border-hover);
  background-clip: padding-box;
  border: 2px solid transparent;
}

.stashpad-note {
  display: grid;
  /* Meta column auto-sizes to its content (timestamp + grip) so the body sits
     immediately to the right rather than across a fixed-width gap. */
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--background-secondary);
  cursor: pointer;
  transition: background 0.1s ease, box-shadow 0.1s ease;
  border: 1px solid transparent;
}
/* 0.76.10: task rows get a leading checkbox column. */
.stashpad-note.is-task { grid-template-columns: auto auto 1fr auto; }
.stashpad-note-task-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  /* 0.76.12: enlarge the hit target so a click reliably lands on the
     checkbox (not the row) — negative margin keeps the visual size. */
  padding: 4px;
  margin: -3px;
  border-radius: 4px;
}
.stashpad-note-task-checkbox:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.stashpad-note-task-checkbox svg { width: 16px; height: 16px; }
/* Top row of meta: timestamp + grip side-by-side. */
.stashpad-note-meta-top {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Drag handle: visible only on row hover (when no color set). */
.stashpad-note-grip {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  opacity: 0;
  cursor: grab;
  transition: opacity 0.1s ease, background 0.1s ease;
  border-radius: 3px;
  position: relative;
}
.stashpad-note:hover .stashpad-note-grip { opacity: 0.8; }
.stashpad-note-grip:hover { color: var(--text-muted); opacity: 1 !important; }
.stashpad-note-grip:active { cursor: grabbing; }
.stashpad-note-grip .svg-icon { width: 14px; height: 14px; transition: opacity 0.1s ease; }
/* Color-swatch mode: at rest, show a filled color square; on row hover swap
   to the grip icon. The icon itself is hidden by default; row-hover reveals
   it (and the swatch fades). */
.stashpad-note-grip.has-color {
  background: var(--stashpad-note-color, transparent);
  opacity: 1;
}
.stashpad-note-grip.has-color .svg-icon { opacity: 0; }
.stashpad-note:hover .stashpad-note-grip.has-color {
  background: transparent;
}
.stashpad-note:hover .stashpad-note-grip.has-color .svg-icon { opacity: 1; }
/* Colored border: per-note tint that wins over is-selected/is-cursor for
   normal rows. is-pick-target (green nest indicator) still wins on top. */
.stashpad-note.has-color {
  border-color: var(--stashpad-note-color);
}

/* Inherited-color side stripe: rendered on rows whose nearest colored
   ancestor is some depth above them. A short pseudo-element down the
   left edge tinted with the ancestor's hex, faded by depth (~18% off
   per level) via color-mix. Visually marks "this row belongs to a
   colored branch" without overwhelming the row's own chrome. Hidden
   beneath the row's normal border by being inset 1px from the edge.
   color-mix is supported on Electron 113+ (current Obsidian). */
.stashpad-note.has-inherited-color {
  position: relative;
}
.stashpad-note.has-inherited-color::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: color-mix(
    in srgb,
    var(--stashpad-inherited-color) calc(100% - var(--stashpad-inherited-depth, 0) * 18%),
    transparent
  );
  pointer-events: none;
}
/* When the row is selected, the colored border thickens so the selection
   state reads as a single, unified ring — no double-line from the default
   selected accent or the is-cursor inset shadow. */
.stashpad-note.has-color.is-selected,
.stashpad-note.has-color.is-cursor,
.stashpad-note.has-color.is-selected.is-cursor {
  border-width: 3px;
  border-color: var(--stashpad-note-color);
  /* Compensate for the extra 2px of border so the body doesn't shift. */
  padding: 6px 8px;
  /* Suppress the default cursor inset shadow — the thick border carries
     the selection signal on its own. */
  box-shadow: none;
}
/* The grip icon, when revealed on hover for a colored note, picks up the
   same color so the swatch-to-grip transition feels continuous. */
.stashpad-note:hover .stashpad-note-grip.has-color { color: var(--stashpad-note-color); opacity: 1; }
.stashpad-note-grip.has-color:hover { color: var(--stashpad-note-color); }
/* Internal links inside a colored note's body inherit the tint. We scope
   to anchor tags rendered by Obsidian's markdown renderer. */
.stashpad-note.has-color .stashpad-note-body a,
.stashpad-note.has-color .stashpad-note-body a.internal-link,
.stashpad-note.has-color .stashpad-note-body a.external-link,
.stashpad-note.has-color .stashpad-note-body a.tag {
  color: var(--stashpad-note-color);
}
/* While being dragged, dim the row. */
.stashpad-note.is-dragging { opacity: 0.5; }
.stashpad-note { transition: background 0.08s ease, box-shadow 0.08s ease; }
/* Drop INTO (nest as child): outline the whole row */
.stashpad-note.drop-into {
  background: var(--background-modifier-success);
  box-shadow: 0 0 0 2px var(--color-green) inset;
}
/* Drop placeholder — a stable element that occupies the gap so the target row
   doesn't shift under the cursor (no bounce). Height is set in JS to match the
   dragged row's actual height. */
.stashpad-drop-placeholder {
  background: rgba(255, 200, 0, 0.10);
  border: 2px dashed var(--color-yellow);
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  /* Height is animated via JS (set to 0 on insert, then to dragRowHeight)
     so the rows above and below smoothly slide apart instead of snapping. */
  transition: height 0.14s ease, opacity 0.14s ease, border-width 0.14s ease;
}
.stashpad-note:hover { background: var(--background-modifier-hover); }
.stashpad-note.is-selected {
  background: var(--background-modifier-active-hover);
  border-color: var(--interactive-accent);
}
/* Even when selected, hovering applies a subtle brightness bump so the user
   gets the same affordance as on non-selected rows. */
.stashpad-note.is-selected:hover {
  filter: brightness(1.1);
  background: var(--background-modifier-active-hover);
}
.stashpad-note.is-cursor {
  box-shadow: 0 0 0 2px var(--interactive-accent) inset;
}
/* drop-into needs higher specificity than is-selected / is-cursor so the green
   nest indicator wins when dragging onto a selected or cursor'd row. */
.stashpad-note.drop-into,
.stashpad-note.is-selected.drop-into,
.stashpad-note.is-cursor.drop-into {
  background: var(--background-modifier-success);
  box-shadow: 0 0 0 2px var(--color-green) inset;
  border-color: var(--color-green);
}
.stashpad-note.is-pick-target {
  background: var(--background-modifier-success);
  border-color: var(--color-green);
  /* 0.73.15: explicit green inset shadow so the highlight is visible
     even when the row ALSO carries .is-cursor (which sets its own
     accent-color inset shadow). Without this, the accent ring
     covered the green border and the pick-target read as just "the
     cursor row" with no visible destination cue. */
  box-shadow: 0 0 0 2px var(--color-green) inset;
}
/* Dark theme: --background-modifier-success is a pale wash-out under
   white body text. Substitute a deeper green tinted with the accent
   so the highlight reads at a glance without killing legibility. */
.theme-dark .stashpad-note.is-pick-target {
  background: rgba(60, 160, 90, 0.35);
  border-color: rgba(120, 220, 150, 0.9);
  box-shadow: 0 0 0 2px rgba(120, 220, 150, 0.9) inset;
}
.stashpad-note.is-completed .stashpad-note-body,
.stashpad-note.is-completed .stashpad-note-time {
  text-decoration: line-through;
  opacity: 0.55;
}

/* 0.105.0 / 0.106.x: list-pinned note — floated to the top of its list. Left
   accent bar; the pin indicator is a lucide icon in the meta column (under the
   timestamp, before the children-count arrow) — see .stashpad-note-listpin. */
.stashpad-note.is-list-pinned {
  box-shadow: inset 3px 0 0 var(--text-accent);
}
.stashpad-note-listpin {
  display: inline-flex;
  align-items: center;
  color: var(--text-accent);
}
.stashpad-note-listpin svg {
  width: 13px;
  height: 13px;
}

/* 0.99.5: a note sitting on a pending CUT (note clipboard) — ghosted + dashed
   outline, like a cut file in a file manager. Cleared when the cut is pasted
   or replaced. */
.stashpad-note.is-cut-pending {
  opacity: 0.5;
  outline: 1px dashed var(--text-faint);
  outline-offset: -2px;
  border-radius: 6px;
}
/* 0.99.6: a note on a pending COPY — subtler than cut (nothing moves on paste):
   a faint dashed accent outline, full opacity. */
.stashpad-note.is-copy-pending {
  outline: 1px dashed var(--interactive-accent);
  outline-offset: -2px;
  border-radius: 6px;
}

.stashpad-note-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.stashpad-note-time {
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stashpad-note-enter { cursor: pointer; color: var(--text-accent); }
.stashpad-note-enter:hover { text-decoration: underline; }
/* 0.87.1: children-count arrow + (mobile) task checkbox on one line */
.stashpad-note-meta-bottom { display: flex; align-items: center; gap: 6px; }
/* mobile: checkbox moves into the meta column, so the row drops the desktop
   leading checkbox grid column — frees width so the single action button
   doesn't wrap. */
.is-mobile .stashpad-note.is-task { grid-template-columns: auto 1fr auto; }
.is-mobile .stashpad-note-meta-bottom .stashpad-note-task-checkbox { margin: 0; padding: 2px; }
.is-mobile .stashpad-note-meta-bottom .stashpad-note-task-checkbox svg { width: 18px; height: 18px; }

.stashpad-note-body { min-width: 0; word-wrap: break-word; }
.stashpad-note-body > :first-child { margin-top: 0; }
.stashpad-note-body > :last-child { margin-bottom: 0; }
.stashpad-note-text > :first-child { margin-top: 0; }
.stashpad-note-text > :last-child { margin-bottom: 0; }
/* 0.118.8: code blocks / inline code in note bodies WRAP instead of bleeding
   off the right edge (a fenced ```code``` defaults to white-space:pre, which
   doesn't wrap → it overflowed horizontally). Wrapping also gives the block
   real vertical height, so the 2-line clamp can actually collapse it. */
.stashpad-note-text pre,
.stashpad-note-text code,
.stashpad-focused-body pre,
.stashpad-focused-body code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
/* Tighten heading → adjacent text spacing inside note previews. Both
   the heading's bottom margin AND the FOLLOWING element's top margin
   contribute to the gap, plus headings have padding-bottom in some
   themes. Reset all three. */
.stashpad-note-text :is(h1, h2, h3, h4, h5, h6),
.stashpad-focused-body :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 4px;
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 1.25;
}
.stashpad-note-text :is(h1, h2, h3, h4, h5, h6) + *,
.stashpad-focused-body :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}
/* Multiplayer / authorship footer — rendered beneath the note body
   in renderAuthorshipFooter. Pieces are space-separated and wrap as
   the row narrows. */
.stashpad-note-authorship {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
}
.stashpad-note-authorship .stashpad-authorship-label { color: var(--text-faint); }
.stashpad-note-authorship .internal-link { color: var(--text-muted); }
.stashpad-note-authorship .internal-link:hover { color: var(--text-accent); }
.stashpad-note-authorship .stashpad-authorship-sep { color: var(--text-faint); opacity: 0.6; }

/* Settings: Authorship → "Folders you've worked in" list. */
.stashpad-authored-folders-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 0.121.5: inset to align with the section heading + Setting rows.
     0.121.7: bumped 14→20px per feedback that 14 read under-indented vs the
     rest. (Approximate — verify against the live settings.) */
  padding: 4px 20px 12px;
}
.stashpad-authored-folder-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--font-ui-smaller);
}
.stashpad-authored-folder-link {
  color: var(--text-accent);
  cursor: pointer;
  text-decoration: none;
}
.stashpad-authored-folder-link:hover { text-decoration: underline; }
.stashpad-authored-folder-counts { color: var(--text-faint); }

/* 0.71.23: compact/tiny modes render plain text instead of rendered
   markdown so headings / code blocks / lists don't blow out the row
   height. Preserve user-authored line breaks. */
.stashpad-note-text.is-plain {
  white-space: pre-wrap;
}

.stashpad-note-text.is-clamped {
  /* Two-line clamp with ellipsis. Show More toggle (rendered after the
     text) flips the .is-clamped class so the rest comes into view. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
/* 0.73.14: transient un-clamp for the row under the keyboard cursor.
   Settings toggle: "Expand the cursor row's body automatically".
   CSS-only — moving the cursor away flips .is-cursor-expanded off
   on the previous row, restoring the clamp. */
.stashpad-note.is-cursor-expanded .stashpad-note-text.is-clamped {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
}
/* 0.177.0 (#26): an EXPANDED list note is capped to a scroll window so a very long
   note doesn't take over the list — scroll within it to read the rest. Only the
   persistently-expanded rows (.is-body-expanded) are capped; the transient
   cursor-expanded row above stays fully visible. */
.stashpad-note-body-content.is-body-expanded .stashpad-note-text {
  max-height: calc(var(--font-text-size, 16px) * 1.5 * 16);
  overflow-y: auto;
}
.stashpad-expand-toggle {
  margin-top: 4px;
  padding: 2px 8px;
  font-size: var(--font-ui-smaller);
  color: var(--text-accent);
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  cursor: pointer;
}
.stashpad-expand-toggle:hover { background: var(--background-modifier-hover); }
/* Icon-only variant (mobile): no margin, no border, hugs the text. */
.stashpad-expand-toggle.is-icon {
  margin: 0;
  padding: 0;
  border: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: var(--text-muted);
}
.stashpad-expand-toggle.is-icon:hover { color: var(--text-normal); background: transparent; }
.stashpad-expand-toggle.is-icon .svg-icon { width: 14px; height: 14px; }
/* Inline variant (desktop list rows): sit in the .stashpad-note-actions
   cluster alongside the pencil + enter buttons, matching their box so
   the three actions form a uniform row. */
.stashpad-expand-toggle.is-icon.is-inline {
  width: auto;
  height: auto;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
}
.stashpad-expand-toggle.is-icon.is-inline:hover {
  background: var(--background-modifier-hover);
}
.stashpad-expand-toggle.is-icon.is-inline .svg-icon {
  /* The chevron is a wide-but-short glyph compared to the pencil/arrow
     siblings, so match the rendered HEIGHT by drawing it at 18px (vs.
     16px for pencil) — width is allowed to overflow the inline-flex
     box visually so the button still reads square-ish. */
  width: 20px;
  height: 20px;
}

/* Attachment rail */
.stashpad-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.stashpad-att {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--background-primary);
  overflow: hidden;
  cursor: pointer;
  font-size: 10px;
  color: var(--text-muted);
  padding: 4px;
  text-align: center;
}
.stashpad-att:hover { background: var(--background-modifier-hover); }
.stashpad-att-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stashpad-att-ext {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-normal);
  letter-spacing: 0.5px;
}
.stashpad-att-name {
  font-size: 9px;
  line-height: 1.1;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.stashpad-note-actions {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}
.stashpad-pencil {
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 6px;
  line-height: 1;
}
.stashpad-pencil:hover { background: var(--background-modifier-hover); }

.stashpad-empty {
  text-align: center;
  color: var(--text-faint);
  padding: 32px 0;
}

/* Composer */
.stashpad-composer-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.stashpad-composer-clear {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--background-secondary);
  color: var(--text-muted);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
}
.stashpad-composer-clear:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-composer-clear .svg-icon { width: 14px; height: 14px; }
/* 0.179.0: full-screen button — opens the composer text in the in-app editor. */
.stashpad-composer-fullscreen {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 27px;
  height: 27px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--background-secondary);
  color: var(--text-muted);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
  opacity: 0.65;
}
.stashpad-composer-fullscreen:hover { background: var(--background-modifier-hover); color: var(--text-normal); opacity: 1; }
.stashpad-composer-fullscreen .svg-icon { width: 17px; height: 17px; }
/* Keep typed text clear of the button. */
.stashpad-composer-input { padding-right: 32px; }

.stashpad-composer {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--background-modifier-border);
  align-items: stretch;
}
/* Desktop: button rail flows in the row alongside the textarea wrap. */
.stashpad-composer-btn-rail {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.stashpad-composer-input {
  flex: 1 1 auto;
  width: 100%;
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--background-primary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  font-family: inherit;
  font-size: var(--font-ui-medium);
  resize: none;
  min-height: 54px;
  max-height: 54px;
  line-height: 1.3;
}
.stashpad-composer-btn {
  background: var(--interactive-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 0 10px;
  min-width: 40px;
  height: 54px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.stashpad-composer-btn:hover { background: var(--interactive-hover); }
.stashpad-composer-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
.stashpad-composer-send { font-weight: 600; }

.stashpad-composer-btn .stashpad-btn-icon,
.stashpad-folder-btn .stashpad-btn-icon,
.stashpad-note-enter .stashpad-btn-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.stashpad-composer-btn .svg-icon,
.stashpad-folder-btn .svg-icon,
.stashpad-search-btn .svg-icon,
.stashpad-pencil .svg-icon,
.stashpad-note-enter .svg-icon {
  width: 16px;
  height: 16px;
}

/* 0.93.1: GENERAL anti-collapse guard. An inline <svg> is a flex item with
   the default min-width:auto; inside a flex container with flex-shrink:1 its
   content-based minimum is 0, so the browser can squash it to width:0 while
   height stays — leaving an icon-only button looking blank (the iPad missing-
   icon reports: search button, mobile nav buttons, …). `flex: 0 0 auto`
   forbids the shrink. Scoped to every Stashpad view root so we don't have to
   patch each new icon button one at a time. No-op outside flex contexts. */
.stashpad-view .svg-icon,
.stashpad-panels-root .svg-icon,
.stashpad-detail-root .svg-icon,
.stashpad-folderpanel-root .svg-icon {
  flex: 0 0 auto;
}
.stashpad-pencil { display: inline-flex; align-items: center; justify-content: center; }

.stashpad-composer-help {
  flex: 0 0 auto;
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  padding: 2px 2px 6px;
}

.stashpad-mobile-nav {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  border-top: 1px solid var(--background-modifier-border);
  flex: 0 0 auto;
}
.stashpad-mobile-nav button { flex: 1; margin: 0 4px; }

.stashpad-view.is-mobile .stashpad-note {
  grid-template-columns: auto 1fr auto;
}

/* 0.120.0 (trial): 3-section mobile note row. Instead of [meta | body |
   actions] side-by-side columns, stack three rows for vertical tightness +
   better reading flow:
     row 1: timestamp (spread left) · expand toggle · ⋯ menu
     row 2: the text body (full width)
     row 3: metadata (children-count, pin, task checkbox)
   Pure CSS — the DOM already has these pieces; we just regroup them with
   grid-template-areas. `display: contents` on the meta/actions wrappers
   promotes their children to direct grid items so they can be placed into
   areas. Scoped to NON-compact mobile (compact has its own dense layout). */
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note,
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note.is-task {
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "meta toggle more"
    "body body  body"
    "foot foot  foot";
  align-items: center;
  row-gap: 2px;
  column-gap: 8px;
}
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note-meta,
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note-actions {
  display: contents;
}
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note-meta-top { grid-area: meta; }
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note-body { grid-area: body; }
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note-meta-bottom { grid-area: foot; }
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note .stashpad-expand-toggle { grid-area: toggle; }
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note .stashpad-note-more { grid-area: more; }
/* Timestamp reads horizontally (one line) on mobile so it "spreads out"
   across the top row instead of stacking date over time. */
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note-meta-top .stashpad-note-time {
  white-space: normal;
}
/* The top-row buttons sit flush right, snug together — and are sized down so
   they read at the same visual weight as the timestamp text (was 28px box /
   14px icon, which looked chunkier than the time). */
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note .stashpad-expand-toggle,
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note .stashpad-note-more {
  align-self: center;
  width: 22px;
  height: 22px;
}
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note .stashpad-expand-toggle .svg-icon,
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note .stashpad-note-more .svg-icon {
  width: 15px;
  height: 15px;
}
/* Timestamp nudged up a step (smaller → small) so it matches the now-smaller
   top-row buttons instead of looking tiny beside them. */
.stashpad-view.is-mobile:not(.is-compact) .stashpad-note-meta-top .stashpad-note-time {
  font-size: var(--font-ui-small);
}

/* Suggest modal (pick/search) */
.stashpad-suggest-item { padding: 6px 8px; }
.stashpad-suggest-title { font-weight: 500; }
/* 0.124.0: locked (encrypted) search result — lock icon inline with the label. */
.stashpad-suggest-locked { display: inline-flex; align-items: center; gap: 6px; }
.stashpad-suggest-locked-icon { display: inline-flex; align-items: center; color: var(--text-muted); flex: 0 0 auto; }
.stashpad-suggest-locked-icon .svg-icon { width: 14px; height: 14px; }
.stashpad-suggest-preview {
  margin-top: 4px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stashpad-suggest-create {
  font-style: italic;
  color: var(--text-accent);
}

/* 0.92.1: "Search excluded Stashpad folders" bottom action. */
.stashpad-search-excluded-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-accent);
}
.stashpad-search-excluded-icon {
  display: inline-flex;
  align-items: center;
}
.stashpad-search-excluded-icon .svg-icon {
  width: 15px;
  height: 15px;
}

.stashpad-log-modal { width: min(860px, 90vw); }

.stashpad-split-modal { width: min(720px, 90vw); }
.stashpad-split-list {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 6px 0;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  background: var(--background-primary);
}
.stashpad-split-line {
  display: flex;
  gap: 12px;
  padding: 2px 12px;
  white-space: pre-wrap;
}
.stashpad-split-lineno {
  color: var(--text-faint);
  flex: 0 0 32px;
  text-align: right;
  user-select: none;
}
.stashpad-split-text {
  flex: 1 1 auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.stashpad-split-divider {
  margin: 6px 12px;
  padding: 4px 0;
  color: var(--text-on-accent);
  background: var(--interactive-accent);
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: var(--font-ui-smaller);
}
.stashpad-split-help {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  text-align: center;
}
.stashpad-split-toggle-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  justify-content: center;
}
.stashpad-split-mode-btn {
  padding: 4px 12px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-split-mode-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
/* 0.168.2: cursor-split — Original / Changes / Your-edit are three consistent
   framed, COLLAPSIBLE sections. The whole tucked header is the toggle button; the
   body connects seamlessly below it (one rounded frame). */
.stashpad-split-section {
  margin-top: 8px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  overflow: hidden;
}
.stashpad-split-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 10px;
  text-align: left;
  cursor: pointer;
  background: var(--background-secondary);
  color: var(--text-muted);
  border: 0;
  border-bottom: 1px solid var(--background-modifier-border);
  border-radius: 0;
  box-shadow: none;
  font-size: var(--font-ui-smaller);
}
.stashpad-split-section-header:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.stashpad-split-section-title { flex: 1; }
.stashpad-split-chevron { display: inline-flex; color: var(--text-faint); transition: transform 120ms ease; }
.stashpad-split-chevron svg { width: 14px; height: 14px; }
.stashpad-split-section.is-collapsed .stashpad-split-chevron { transform: rotate(-90deg); }
.stashpad-split-section.is-collapsed .stashpad-split-section-header { border-bottom: 0; }
.stashpad-split-section.is-collapsed .stashpad-split-section-body { display: none; }
/* Editor textarea fills its section body; the section provides the frame. */
.stashpad-split-cursor-ta {
  display: block;
  width: 100%;
  /* Height is set inline by the modal's auto-fit code (capped at ~3 lines on
     mobile, ~12 on desktop). Let the JS sizing govern. */
  padding: 10px 12px;
  border: 0;
  outline: none;
  resize: none;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  background: var(--background-primary);
  color: var(--text-normal);
  line-height: 1.5;
  overflow-y: auto;
}
.stashpad-split-panel-body {
  /* 0.168.5: fully font-relative so the box is a precise ~2 text lines at any font
     size (line-height 1.5 → each line = 1.5em; padding in em too). Scrolls for more;
     long text gets room via the pop-out tab. */
  line-height: 1.5;
  padding: 0.4em 10px;
  max-height: calc(1.5em * 2 + 0.8em);
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.stashpad-split-orig .stashpad-split-panel-body { color: var(--text-faint); }
/* 0.169.1: read-only previews are selectable/copyable. */
.stashpad-split-panel-body,
.stashpad-split-part-body {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
/* 0.168.5→0.169.1: Cancel reads "Cancel (Esc)" in the normal text color (no chip). */
.stashpad-split-cancel-btn { color: var(--text-normal); }
/* 0.169.1: copy-to-clipboard icon buttons (part headers + Original section). */
.stashpad-split-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  height: 22px;
  width: 22px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 4px;
  cursor: pointer;
}
.stashpad-split-copy-btn:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.stashpad-split-copy-btn svg { width: 14px; height: 14px; }
.stashpad-split-section { position: relative; }
.stashpad-split-section-copy { position: absolute; top: 3px; right: 6px; z-index: 2; }
.stashpad-diff-eq { color: var(--text-muted); }
.stashpad-diff-ins {
  color: var(--text-success, var(--color-green, #3fb950));
  background: rgba(63, 185, 80, 0.13);
  border-radius: 2px;
}
.stashpad-diff-del {
  color: var(--text-error, var(--color-red, #f85149));
  background: rgba(248, 81, 73, 0.13);
  text-decoration: line-through;
  border-radius: 2px;
}
.stashpad-split-confirm-btn {
  padding: 4px 14px;
}
/* 0.170.0: top-level Edit ⇄ Split surface toggle. */
.stashpad-split-surface {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.stashpad-split-surface-btn {
  flex: 1;
  padding: 5px 12px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-ui-small);
  box-shadow: none;
}
.stashpad-split-surface-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
/* 0.170.3: icons inside the split/edit buttons + the ⌘E/⌘S hints on the toggle. */
.stashpad-split-surface-btn,
.stashpad-split-mode-btn,
.stashpad-split-cancel-btn,
.stashpad-split-confirm-btn,
.stashpad-split-case-btn { display: inline-flex; align-items: center; gap: 6px; }
.stashpad-split-btn-icon { display: inline-flex; flex: 0 0 auto; }
.stashpad-split-btn-icon svg { width: 14px; height: 14px; }
.stashpad-split-kbd-hint { margin-left: auto; padding-left: 6px; opacity: 0.6; font-size: var(--font-ui-smaller); }
/* 0.170.3: edit-surface footer — live word/char count + case-cycle. */
.stashpad-split-edit-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.stashpad-split-count { color: var(--text-faint); font-size: var(--font-ui-smaller); font-variant-numeric: tabular-nums; }
.stashpad-split-case-btn {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
  box-shadow: none;
}
.stashpad-split-case-btn:hover { color: var(--text-normal); }
/* 0.170.3: the Edit surface is a writing space — give the editor + review room. */
.stashpad-edit-surface .stashpad-split-panel-body { max-height: calc(1.5em * 8 + 0.8em); }
/* 0.168.3: unified mode row (Line / Cursor / preset methods) + bottom action bar. */
.stashpad-split-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.stashpad-split-mode-btn:disabled { opacity: 0.45; cursor: default; }
/* Split point caret uses the theme accent so it's easy to spot. */
.stashpad-split-cursor-ta { caret-color: var(--interactive-accent); }
.stashpad-split-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  /* 0.184.0: pin to the bottom of the (scrollable) modal so a tall editor can't
     push the buttons off-screen. Desktop only — mobile resets this below (sticky
     distorted on iOS). */
  position: sticky;
  bottom: 0;
  background: var(--modal-background, var(--background-primary));
  padding-bottom: 10px;
  z-index: 3;
}
/* Mobile: NOT sticky (see the .is-mobile action-bar rules for the margin-top:auto
   / flow layout used there). */
.is-mobile .stashpad-split-actions { position: static; background: transparent; padding-bottom: 0; }
.stashpad-split-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.stashpad-split-nest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  cursor: pointer;
}
.stashpad-split-nest input { cursor: pointer; }
/* Preset preview — read-only cards, one per resulting part. */
.stashpad-split-preset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}
.stashpad-split-part-card {
  /* 0.169.2: don't let the column-flex list squish cards when it overflows — the
     list should SCROLL, with each card keeping its content height. */
  flex: 0 0 auto;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  overflow: hidden;
}
.stashpad-split-part-num {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 2px 10px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  background: var(--background-secondary);
  border-bottom: 1px solid var(--background-modifier-border);
}
.stashpad-split-part-title { flex: 1; }
.stashpad-split-part-body {
  padding: 8px 10px;
  max-height: calc(1.5em * 6 + 16px);
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  line-height: 1.5;
  color: var(--text-normal);
}
.stashpad-split-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}
/* 0.169.0: "Open in a tab" button + the full-leaf ("popped out") layout. */
.stashpad-split-popout-btn { display: inline-flex; align-items: center; gap: 6px; }
.stashpad-split-popout-icon { display: inline-flex; }
.stashpad-split-popout-icon svg { width: 14px; height: 14px; }
.stashpad-split-view {
  height: 100%;
  overflow-y: auto;
  padding: 16px 20px;
  max-width: 860px;
  margin: 0 auto;
}
/* 0.183.1: the popped-out editor VIEW on mobile. Make it a FLEX column so the
   editor fills the leaf — it collapsed to <1 line when the keyboard shrank the
   viewport because the host wasn't a flex container. Bottom padding clears
   Obsidian's mobile bottom toolbar + the home indicator. */
.is-mobile .stashpad-split-view {
  display: flex;
  flex-direction: column;
  /* 0.183.3: SCROLLABLE so no button is ever permanently tucked when the keyboard
     shrinks the leaf. 0.183.4: FULL WIDTH — the base rule's max-width:860px +
     margin:0 auto was centering it (auto side margins), leaving it inset. */
  overflow-y: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 52px);
}
.is-mobile .stashpad-split-view .stashpad-split-tabpanel.is-active .stashpad-split-cursor-ta {
  min-height: calc(1.5em * 6);
}
/* Help text is empty on phones anyway — hide it so it doesn't eat vertical space. */
.is-mobile .stashpad-split-help { display: none; }
/* In the scrollable VIEW the editor already fills via flex; margin-top:auto
   misbehaves with overflow. 0.183.4: give it a fixed gap so the separator line
   isn't jammed against the text box / Case row — a touch more in split mode
   (text box edge) than edit mode (Case row). */
.is-mobile .stashpad-split-view:not(.stashpad-edit-surface) .stashpad-split-actions { margin-top: 21px; }
.is-mobile .stashpad-split-view.stashpad-edit-surface .stashpad-split-actions { margin-top: 18px; }
/* In a full tab there's room — let the read-only previews and the preset list
   breathe (they stay short/scrolly inside the cramped modal). */
.stashpad-split-view .stashpad-split-panel-body { max-height: calc(1.5em * 10 + 0.8em); }
.stashpad-split-view .stashpad-split-preset-list { max-height: 62vh; }
/* 0.169.3: post-split "done" panel with the live auto-close countdown. */
.stashpad-split-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px;
  text-align: center;
}
.stashpad-split-done-title { font-size: var(--font-ui-large); color: var(--text-success, var(--color-green)); }
.stashpad-split-countdown { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stashpad-split-done-btns { display: flex; gap: 8px; margin-top: 4px; }
/* Mobile (0.172.0): full-height sheet with a scrollable body and a pinned
   action bar. Previously the modal sized to content with the action bar at the
   end of the flow, so a long note (tall textarea) pushed Save/Cancel off-screen
   and — with the keyboard up — behind it. Now the content scrolls and the
   actions stick to the bottom of the visible area, always reachable. */
/* 0.182.0: anchor the sheet to the TOP (was centered) — with a notch / Dynamic
   Island offset — so it has more vertical room and its bottom sits well clear of
   the keyboard + the keyboard's autocomplete suggestion strip. */
.is-mobile .modal-container:has(> .stashpad-split-modal) {
  align-items: flex-start;
}
/* FLOATING modal only (`:not(.stashpad-split-view)`) — the popped-out tab shares
   the .stashpad-split-modal class but is a full leaf, so it must NOT inherit the
   modal's min-height / margin / max-height (that collapsed it). */
.is-mobile .stashpad-split-modal:not(.stashpad-split-view) {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  /* Consistent, roomier height regardless of content; the editor fills it.
     0.183.1: 20px shorter so the action bar stays clear of the keyboard. */
  min-height: calc(58vh - 20px);
  /* Notch/Dynamic-Island offset, a quarter shorter (0.75× the inset). */
  margin-top: calc(env(safe-area-inset-top, 0px) * 0.75 + 8px);
  max-height: calc(100% - env(safe-area-inset-top, 0px) - 32px);
  display: flex;
  flex-direction: column;
  border-radius: 0 0 14px 14px;
}
.is-mobile .stashpad-split-modal .modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  -webkit-overflow-scrolling: touch;
}
/* 0.183.0: action bar pinned to the BOTTOM of the modal via margin-top:auto —
   NOT position:sticky. Sticky made iOS lift/distort the row when the keyboard
   opened. No env(safe-area-inset-bottom) padding either (the sheet is top-anchored,
   not a bottom sheet — that padding drew empty space beneath the buttons on iOS). */
.is-mobile .stashpad-split-modal .stashpad-split-actions {
  margin-top: auto; /* pin to the bottom of the modal/leaf (not sticky) */
  padding-top: 10px;
  /* 0.183.2: NO opaque background — it read as a separate black box floating on
     the modal in iOS dark mode. Just a hairline separator. */
  border-top: 1px solid var(--background-modifier-border);
  gap: 8px;
}
/* On a phone the primary Save spans the row; secondary actions wrap under it. */
.is-mobile .stashpad-split-modal .stashpad-split-actions-right {
  gap: 8px;
}
.is-mobile .stashpad-split-list { max-height: 40vh; font-size: var(--font-ui-small); }
.is-mobile .stashpad-split-line { padding: 6px 12px; }
/* Mobile compact pass (0.177.0): tighten every control so nothing is chunky with
   empty padding, and keep the whole modal short enough to sit above the keyboard. */
.is-mobile .stashpad-split-modal .modal-content { gap: 5px; padding: 8px 10px; }
/* Edit/Split toggle: compact, no ⌘ hints (no hardware keyboard on a phone). */
.is-mobile .stashpad-split-surface { margin-bottom: 6px; padding-bottom: 6px; }
.is-mobile .stashpad-split-surface-btn { padding: 4px 10px; font-size: var(--font-ui-smaller); }
.is-mobile .stashpad-split-kbd-hint { display: none; }
.is-mobile .stashpad-split-modes { gap: 4px; margin-bottom: 5px; }
.is-mobile .stashpad-split-mode-btn { padding: 4px 8px; font-size: var(--font-ui-smaller); }
.is-mobile .stashpad-split-edit-tools { margin-top: 4px; }
.is-mobile .stashpad-split-case-btn { padding: 4px 9px; }
.is-mobile .stashpad-split-count { font-size: var(--font-ui-smaller); }
/* Mobile tabbed editor: Original / Changes / Your edit share one space. */
.stashpad-split-tabbar { display: flex; gap: 4px; margin-bottom: 5px; }
.stashpad-split-tab {
  flex: 1;
  padding: 5px 8px;
  font-size: var(--font-ui-smaller);
  font-weight: 500;
  background: var(--background-secondary);
  color: var(--text-muted);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  cursor: pointer;
}
.stashpad-split-tab.is-active { background: var(--interactive-accent); color: var(--text-on-accent); border-color: var(--interactive-accent); }
.stashpad-split-tab.is-hidden { display: none; }
.stashpad-split-tabpanel { position: relative; }
.stashpad-split-tabpanel:not(.is-active) { display: none; }
/* 0.183.0: the editor FILLS the fixed-height modal (no empty gap under short
   notes). Flex chain: modal-content → tabs → tabbody → active panel → textarea,
   each stretching; the textarea/preview scrolls internally. */
.is-mobile .stashpad-split-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.is-mobile .stashpad-split-tabbody { flex: 1 1 auto; min-height: 0; display: flex; }
.is-mobile .stashpad-split-tabpanel.is-active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.is-mobile .stashpad-split-tabpanel.is-active .stashpad-split-cursor-ta { flex: 1 1 auto; min-height: 0; height: auto; }
.is-mobile .stashpad-split-tabpanel.is-active .stashpad-split-panel-body { flex: 1 1 auto; min-height: 0; max-height: none; }
/* 0.183.3: copy button lives in its own right-aligned bar ABOVE the Original text
   (no longer a full-height strip overlaying the text's right edge). */
.stashpad-split-tab-copybar { display: flex; justify-content: flex-end; margin-bottom: 4px; flex: 0 0 auto; }
.stashpad-split-tab-copy {
  position: static;
  height: auto;
  width: auto;
  padding: 5px 12px;
  gap: 5px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
}
.stashpad-split-tab-copy svg { width: 1.15em; height: 1.15em; }
/* Slimmer mobile modal buttons — the toggle / tabs / mode / action buttons were
   too chunky. Tight vertical padding + line-height, no min-height. */
.is-mobile .stashpad-split-surface-btn,
.is-mobile .stashpad-split-tab,
.is-mobile .stashpad-split-mode-btn,
.is-mobile .stashpad-split-cancel-btn,
.is-mobile .stashpad-split-confirm-btn,
.is-mobile .stashpad-split-popout-btn,
.is-mobile .stashpad-split-case-btn {
  /* Obsidian mobile forces height: 44px on buttons — override to size to content. */
  height: auto;
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 0;
  line-height: 1.25;
}
.stashpad-split-tabpanel .stashpad-split-panel-body {
  max-height: calc(1.5em * 7 + 12px);
  overflow-y: auto;
  padding: 8px 10px;
  margin: 0;
}
/* Action bar: compact buttons; Cancel drops its "(Esc)" hint. 0.183.0: pop-out +
   Obsidian-editor now SHOW short text labels ("Pop-out" / "Advanced"), so the row
   is allowed to wrap. */
.is-mobile .stashpad-split-modal .stashpad-split-actions { flex-wrap: wrap; gap: 6px; }
.is-mobile .stashpad-split-cancel-btn,
.is-mobile .stashpad-split-confirm-btn,
.is-mobile .stashpad-split-popout-btn { padding: 6px 10px; }
.is-mobile .stashpad-split-esc-hint { display: none; }
/* Let Save flow inline with the others (wraps to a tidy grid) instead of being
   pushed to its own row by margin-left:auto. */
.is-mobile .stashpad-split-actions-right { margin-left: 0; gap: 8px; }
.is-mobile .stashpad-split-confirm-btn { flex: 1 1 auto; justify-content: center; }
/* Tap-friendly line picker — make each line look interactable. */
.stashpad-split-line { cursor: pointer; }
.stashpad-split-line:hover { background: var(--background-modifier-hover); }

.stashpad-settings-note {
  margin: 0 0 12px;
  padding-bottom: 8px;
}
.stashpad-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}
.stashpad-log-toolbar button {
  padding: 4px 10px;
  font-size: var(--font-ui-smaller);
  white-space: nowrap;
}
.stashpad-log-type-filter {
  padding: 4px 8px;
  font-size: var(--font-ui-smaller);
  border-radius: 6px;
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  max-width: 22ch;
}
.stashpad-log-count {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  margin-right: auto;
  white-space: nowrap;
}
.stashpad-log-list {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
}
.stashpad-log-row {
  display: grid;
  /* Type column is auto so the widest label (e.g. PALETTE_COLOR_REMOVE)
     fits without wrapping or truncation. */
  grid-template-columns: 150px auto 100px 1fr;
  gap: 14px;
  padding: 6px 10px;
  font-size: var(--font-ui-smaller);
  border-bottom: 1px solid var(--background-modifier-border);
  align-items: baseline;
}
.stashpad-log-type { white-space: nowrap; }
.stashpad-log-row:last-child { border-bottom: 0; }
.stashpad-log-ts { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.stashpad-log-author {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stashpad-log-author.is-empty { color: var(--text-faint); }
.stashpad-log-type {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--background-secondary);
  justify-self: start;
}
.stashpad-log-create .stashpad-log-type { color: var(--color-green); }
.stashpad-log-delete .stashpad-log-type { color: var(--color-red); }
.stashpad-log-parent_change .stashpad-log-type { color: var(--color-blue); }
.stashpad-log-rename .stashpad-log-type { color: var(--color-yellow); }
.stashpad-log-missing .stashpad-log-type { color: var(--color-orange); }
.stashpad-log-stash_export .stashpad-log-type { color: var(--color-purple); }
.stashpad-log-stash_import .stashpad-log-type { color: var(--color-cyan); }
.stashpad-log-attachment_add .stashpad-log-type { color: var(--color-green); }
.stashpad-log-attachment_remove .stashpad-log-type { color: var(--color-red); }
.stashpad-log-reorder .stashpad-log-type { color: var(--color-pink); }
.stashpad-log-complete .stashpad-log-type { color: var(--color-green); }
.stashpad-log-uncomplete .stashpad-log-type { color: var(--color-yellow); }
.stashpad-log-palette_color_add .stashpad-log-type { color: var(--color-green); }
.stashpad-log-palette_color_remove .stashpad-log-type { color: var(--color-red); }
.stashpad-log-msg { word-break: break-word; }
.stashpad-log-empty { padding: 16px; color: var(--text-faint); text-align: center; }
/* Suggest popup: small folder badge for cross-Stashpad results */
.stashpad-suggest-item.is-cross-folder { opacity: 0.92; }
.stashpad-suggest-folder {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  margin-left: 4px;
}

/* Settings: cross-Stashpad search scope (one row per folder + pill) */
.stashpad-folder-list {
  display: flex;
  flex-direction: column;
  /* 0.121.2: 14px left/right inset so these custom rows align with the Setting
     rows + section text (PROVISION insets text element types, not custom divs,
     so the list was sitting flush against the modal edge). */
  padding: 4px 14px 12px;
}
/* 0.95.2: placement overview group heading in settings */
.stashpad-folder-placement-group {
  margin-top: 10px;
  /* 0.121.2: match the 14px inset of its rows + the section text above. */
  padding-left: 14px;
  padding-right: 14px;
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stashpad-folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--background-modifier-border);
}
.stashpad-folder-row:last-child { border-bottom: 0; }
.stashpad-folder-row-label {
  flex: 1 1 auto;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-normal);
}
.stashpad-folder-row-state {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  min-width: 7ch;
  text-align: right;
}
.stashpad-folder-row-state.is-excluded {
  color: var(--text-error);
}

/* Mobile-only UI tweaks. All selectors gated on .is-mobile so desktop
   stays untouched. Goal: reclaim vertical space, anchor the layout
   above Obsidian's docked mobile toolbar, simplify chrome. */

/* Mobile: lift the composer off the bottom of the view via margin
   instead of view padding. View padding pushed the WHOLE flex column
   up but Obsidian seemed to shrink the leaf to compensate, leaving
   the composer sunken anyway. Pure margin on the composer just shifts
   that one element without changing the leaf's content height. */
.stashpad-view.is-mobile .stashpad-composer {
  margin-bottom: 110px;
  /* When the textarea blurs (keyboard dismisses), Obsidian's leaf
     resize lags ~300ms behind the focus change — restoring the full
     lift instantly leaves the composer momentarily off-screen until
     the user taps something else and forces a re-layout. Delay the
     restoration so the leaf has time to grow back. */
  transition: margin-bottom 0s linear 0.4s;
}
/* Drop the lift ONLY when the composer textarea itself has focus.
   Using :focus-within on the view caught any focus shift inside the
   view (including clicks on a list row that focused viewRoot), which
   left the composer hidden under the docked toolbar. :has() with a
   specific child selector keeps the drop scoped to the textarea. */
.stashpad-view.is-mobile:has(.stashpad-composer-input:focus) .stashpad-composer {
  margin-bottom: 0;
  /* Drop the lift IMMEDIATELY when the textarea gets focus — the
     keyboard animates up at the same time and the composer should
     be waiting for it. */
  transition-delay: 0s;
}

/* 0.120.2 (item 3): kill list + composer transitions/animations on mobile to
   cut the repaint flicker on re-render / scroll / selection change. Scoped to
   the note rows (+ their children) and the COMPOSER'S DESCENDANTS only — the
   composer's own `margin-bottom` transition above is the keyboard-reflow timing
   and lives on `.stashpad-composer` itself, so the `*` descendant selector
   leaves it untouched. (Cheap; may only partly reduce the flicker since some of
   it comes from the deferred body-render reflow, not CSS animation.) */
.stashpad-view.is-mobile .stashpad-note,
.stashpad-view.is-mobile .stashpad-note *,
.stashpad-view.is-mobile .stashpad-composer * {
  transition: none !important;
  animation: none !important;
}

/* Hide the composer's helper text on mobile — it wraps and eats
   another row of vertical space we can't afford. */
.stashpad-view.is-mobile .stashpad-composer-help { display: none; }

/* Tighten the top filter row: pills match the action-button height
   (28px) so the whole row reads as a single chip strip. */
/* 0.119.2 (mobile-ui-changes-2): balanced, compact vertical spacing — a little
   room above (between the divider and the button row) and below, instead of the
   buttons hugging the top border with a big gap beneath. */
.stashpad-view.is-mobile .stashpad-time-filter-bar { padding: 5px 0; gap: 4px; align-items: center; }
.stashpad-view.is-mobile .stashpad-folder-btn,
.stashpad-view.is-mobile .stashpad-time-filter-btn {
  height: 28px;
  padding: 0 8px;
  font-size: var(--font-ui-smaller);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
/* 0.71.16: shrink the lone (compact-mode) view-mode button on mobile
   so it matches the other small icon buttons in the row. The desktop
   default uses larger padding for visual weight; on phone screens
   that wastes precious header width. */
.stashpad-view.is-mobile .stashpad-view-mode-btn {
  height: 28px;
  width: 28px;
  padding: 0;
}
.stashpad-view.is-mobile .stashpad-view-mode-btn svg {
  width: 14px;
  height: 14px;
}
.stashpad-view.is-mobile .stashpad-time-filter-select {
  height: 28px;
  padding: 0 6px;
  font-size: var(--font-ui-smaller);
}

/* Mobile composer: textarea fills full width; button rail floats
   inside the textarea anchored to the bottom-right. Each button
   shrinks to a 32px square (or 36 for the send so it stays the
   primary affordance). The textarea reserves right-padding so text
   doesn't run under the rail. */
.stashpad-view.is-mobile .stashpad-composer {
  /* 0.142.7: column layout — the button rail is a real row BELOW the textarea,
     not an absolute overlay over its bottom padding. So tapping a button never
     lands on (or scrolls) the text, and text never underlaps the buttons. */
  flex-direction: column;
  align-items: stretch;
  padding-top: 2px;
}
.stashpad-view.is-mobile .stashpad-composer-input-wrap {
  width: 100%;
  flex: 1 1 100%;
}
.stashpad-view.is-mobile .stashpad-composer-input {
  /* 0.142.7: the rail is now a real row below (not an overlay), so no bottom
     reservation is needed and text can use the full textarea. */
  min-height: 72px;
  max-height: 220px;
}
.stashpad-view.is-mobile .stashpad-composer-btn-rail {
  /* 0.142.7: a static full-width row directly below the textarea (was an absolute
     overlay). nav cluster sits at the LEFT (margin-right:auto below), the
     collapse chevron + secondary group + send anchor to the RIGHT. */
  width: 100%;
  margin-top: 4px;
  /* 0.162.0: one flex gap spaces EVERY rail item — the secondary group, the
     collapse chevron, and Send — by the same amount, at any width. (The nav
     cluster stays hard-left via its own margin-right:auto below, so this gap only
     governs the right-hand run.) Previously the gap was 0 and Send carried its own
     margin, which lined up at desktop width but drifted on a real phone. */
  gap: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 0.119.8 (item 4): order the collapsible group BEFORE the toggle so it
   expands to the LEFT of the chevron. With the cluster right-anchored, the
   toggle + send then stay put (toggle = rightEdge − send − toggle) regardless
   of whether the group is showing — no more chevron jump on expand/collapse. */
.stashpad-view.is-mobile .stashpad-composer-btn-group { order: 1; }
.stashpad-view.is-mobile .stashpad-composer-rail-toggle { order: 2; }
.stashpad-view.is-mobile .stashpad-composer-send { order: 3; }
/* nav cluster pushed to the far left; everything after it (collapse chevron,
   secondary group, send) stays on the right. */
.stashpad-view.is-mobile .stashpad-composer-nav { margin-right: auto; gap: 6px; }
/* 0.119.4 / 0.119.5: the composer folder button shows the folder NAME so you know
   which folder you're in. The button must GROW to fit the name — use the compound
   `.stashpad-composer-btn.stashpad-composer-nav-folder` (both classes, no space)
   so width:auto out-specifies the generic mobile `width: 32px` for composer-btn. */
.stashpad-view.is-mobile .stashpad-composer-btn.stashpad-composer-nav-folder {
  width: auto;
  min-width: 0;
  padding: 0 8px;
  gap: 4px;
}
.stashpad-view.is-mobile .stashpad-composer-btn.stashpad-composer-nav-folder .stashpad-btn-text {
  display: inline-block;
  /* ≥15 chars of the folder name before ellipsis. */
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-size: var(--font-ui-smaller);
}
.stashpad-view.is-mobile .stashpad-composer-btn-rail > *,
.stashpad-view.is-mobile .stashpad-composer-btn-group > * { pointer-events: auto; }
/* Strip the button rectangle / background / border on mobile — keep
   just the icon. Less visual noise inside the textarea overlay. */
.stashpad-view.is-mobile .stashpad-composer-btn {
  background: transparent;
  border: none;
  height: 32px;
  width: 32px;
  min-width: 0;
  padding: 0;
  color: var(--text-muted);
  border-radius: 6px;
}
.stashpad-view.is-mobile .stashpad-composer-btn:hover { color: var(--text-normal); }
.stashpad-view.is-mobile .stashpad-composer-btn.is-active { color: var(--interactive-accent); }
.stashpad-view.is-mobile .stashpad-composer-btn .stashpad-btn-text { display: none; }
/* Send keeps its accent fill so it reads as the primary action. */
.stashpad-view.is-mobile .stashpad-composer-send {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  /* 0.162.0: Send is the SAME 32px box as every other rail button, so the rail's
     6px flex gap puts its icon on the exact same 38px rhythm as every other pair —
     equidistant at any width, no per-element margin to drift. The accent fill
     alone marks it as the primary action; an invisible ::before (below) extends
     the tap target well past the box so it stays easy to hit near the edge. */
  margin-right: 4px; /* small inset so it isn't flush to the screen edge */
  border-radius: 8px;
  position: relative;
}
.stashpad-view.is-mobile .stashpad-composer-send:hover { color: var(--text-on-accent); }
/* 0.162.0: invisible hit-area extender — grows the tappable region ~8px in every
   direction (to ~48px) WITHOUT changing the 32px visual box or the layout, so the
   primary action is forgiving to tap without breaking the equidistant spacing. */
.stashpad-view.is-mobile .stashpad-composer-send::before {
  content: "";
  position: absolute;
  /* Left is only -6px so the extended hit area stops at the 6px flex gap and
     never overlaps the split button's tap zone; the other sides go -8px. */
  inset: -8px -8px -8px -6px;
}

/* 0.119.0 (mobile-ui-changes-2): mobile layout — move the filter/view/time
   toolbar to the bottom (above the composer); the breadcrumb trail stays at top.
   The root is a flex column whose direct children are time-filter-bar,
   breadcrumb, list, composer — reorder them with flex `order`. */
/* 0.119.2: tighter row spacing on mobile (the root column's flex gap was 8px,
   which read as too much dead space between the bottom toolbar and composer). */
.stashpad-view.is-mobile { gap: 5px; }
.stashpad-view.is-mobile .stashpad-breadcrumb { order: 1; }
.stashpad-view.is-mobile .stashpad-list { order: 2; }
.stashpad-view.is-mobile .stashpad-time-filter-bar {
  order: 3;
  /* It now sits above the composer, so border reads better on top. */
  border-bottom: none;
  border-top: 1px solid var(--background-modifier-border);
}
.stashpad-view.is-mobile .stashpad-composer { order: 4; }
/* Bottom-left nav cluster inside the composer: folder · search · route. */
.stashpad-composer-nav { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.stashpad-composer-nav .stashpad-composer-btn { flex: 0 0 auto; }
/* Collapsible secondary-options group. Default state: width 0,
   contents clipped — only the toggle chevron + send are visible.
   Expanded: width grows to fit children, contents fade in. */
.stashpad-view.is-mobile .stashpad-composer-btn-group {
  display: inline-flex;
  align-items: center;
  /* 0.161.0: 6px between the secondary buttons so the whole rail is evenly
     spaced (icon centres 38px apart) and Send's 4px margin matches that rhythm. */
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.2s ease, opacity 0.15s ease;
}
.stashpad-view.is-mobile .stashpad-composer-btn-rail.is-expanded .stashpad-composer-btn-group {
  max-width: 200px;
  opacity: 1;
}
.stashpad-view.is-mobile .stashpad-composer-rail-toggle .svg-icon { transition: transform 0.2s ease; }
/* Desktop: no group collapsing — keep flat layout. */
.stashpad-view:not(.is-mobile) .stashpad-composer-btn-group {
  display: contents;
}
.stashpad-view:not(.is-mobile) .stashpad-composer-rail-toggle { display: none; }

/* Action cluster (select-mode toggle + ⋯ menu) lives at the START of
   the breadcrumb row — left of Home. */
.stashpad-mobile-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  margin-right: 6px;
  align-items: center;
}
/* 0.77.5: known-authors registry list in settings. */
.stashpad-known-authors-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 0.121.5: 14px left/right inset so the author cards align with the rest. */
  margin: 8px 0 4px;
  padding-left: 14px;
  padding-right: 14px;
}
.stashpad-known-author-row {
  padding: 6px 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-secondary);
}
.stashpad-known-author-name { font-weight: 600; }
.stashpad-known-author-meta { color: var(--text-muted); font-size: 0.85em; }
.stashpad-known-author-history {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 0.8em;
}
/* 0.76.33: glyph shown when an icon name isn't in the device's
   bundled Lucide set (older iPad/iOS app) so the button isn't blank.
   Sized to read like the icon it replaces. */
.stashpad-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  /* 0.92.4: don't let the flex parent shrink the glyph to nothing (same
     zero-width collapse that hit the svg icons). */
  flex: 0 0 auto;
}
.stashpad-mobile-action-btn {
  width: 32px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.stashpad-mobile-action-btn:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.stashpad-mobile-action-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
/* 0.92.4: `flex: 0 0 auto` + min-width stop the flexbox from collapsing the
   icon to ZERO width. The svg is a flex item with the default min-width:auto;
   an inline svg's content-based minimum is 0, so flex-shrink:1 squashed it to
   0px wide (height stayed 16px) — the buttons looked empty on iPad even though
   the Lucide icon WAS injected (which is why setIconSafe's fallback never
   fired). Affected iPad and not iPhone because the breadcrumb row's available
   width differs. */
.stashpad-mobile-action-btn .svg-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  min-width: 16px;
}
/* The open-link (🔗) button sits right of the ⚡ actions button in the cluster on
   every platform, including mobile (0.148.2 — was hidden under 480px before, but
   it's wanted on phones). The same action also stays in the ⚡ actions menu. */

/* Bottom Home/Back/Bookmarks toolbar is redundant now that the
   breadcrumb has a house-icon Home button + Alt+Left for back. Hide
   it on mobile until we re-add bookmarks elsewhere. */
.stashpad-view.is-mobile .stashpad-mobile-nav { display: none; }

/* Breadcrumb tap-friendly on mobile. */
.stashpad-view.is-mobile .stashpad-breadcrumb {
  font-size: var(--font-ui-small);
  padding: 6px 2px;
  /* 0.117.0: tighter inter-item gap. The separator is now a bare "/"
     (no surrounding spaces) on mobile, so this gap alone spaces crumbs —
     2px keeps the slash visually close to its neighbours at small widths. */
  gap: 2px;
}
/* The bare "/" separator can hug its neighbours a touch on mobile. */
.stashpad-view.is-mobile .stashpad-crumb-sep { margin: 0 1px; }
.stashpad-view.is-mobile .stashpad-crumb {
  padding: 2px 4px;
  border-radius: 4px;
}
.stashpad-view.is-mobile .stashpad-crumb-home {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  width: 28px;
  height: 28px;
  justify-content: center;
}
.stashpad-view.is-mobile .stashpad-crumb-home .svg-icon { width: 18px; height: 18px; }

/* Mobile: focused header sits inside the list scroll container so it
   scrolls with the rows. A sticky 1-line preview takes its place at
   the top once the full one scrolls out of view. */
.stashpad-view.is-mobile .stashpad-focused {
  /* When inside the list, drop the bottom border (we'll use margin
     instead) so the layout looks like a row that happens to differ. */
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 6px;
}
.stashpad-focused-mini {
  position: sticky;
  /* 0.123.7: stick at the LIST's top edge — `top: -4px` exactly cancels the
     list's 4px top-padding so the bar's background covers the strip where rows
     would otherwise peek above it, WITHOUT the old `-12px` over-pull that
     yanked the bar into the list's overflow-clip zone and shaved the centered
     button's top. Measured: rows no longer peek (elementFromPoint above the bar
     is breadcrumb/view-bg, never a note row) and the button sits +6px below the
     clip line. The few px between the breadcrumb and the list is the view's own
     background (same color), not notes. */
  top: -4px;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--background-primary);
  border-bottom: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  margin: 0 0 4px;
}
.stashpad-focused-mini.is-visible { display: flex; }
.stashpad-focused-mini-text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-normal);
}
.stashpad-focused-mini-pencil {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.stashpad-focused-mini-pencil:hover { color: var(--text-normal); }
.stashpad-focused-mini-pencil .svg-icon { width: 14px; height: 14px; }

/* Mobile: shrink the per-row action buttons (edit pencil + enter
   chevron) so they hug the row's text height instead of stretching
   it. ~28px square — about two text lines tall — with smaller icons. */
.stashpad-view.is-mobile .stashpad-pencil,
.stashpad-view.is-mobile .stashpad-enter-btn,
.stashpad-view.is-mobile .stashpad-focused-pencil {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stashpad-view.is-mobile .stashpad-pencil .svg-icon,
.stashpad-view.is-mobile .stashpad-enter-btn .svg-icon,
.stashpad-view.is-mobile .stashpad-focused-pencil .svg-icon {
  width: 14px;
  height: 14px;
}
/* Mobile: tighten padding inside the focused header (the new shared
   row layout already handles columns). Keep the 1-line clamp for the
   inner text so the parent note doesn't dominate the screen. */
.stashpad-view.is-mobile .stashpad-focused {
  padding: 4px 0 6px;
  max-height: none;
}
.stashpad-view.is-mobile .stashpad-focused .stashpad-note-text.is-clamped {
  -webkit-line-clamp: 1;
}

/* Composer autocomplete popup */
.stashpad-composer-suggest {
  position: fixed;
  /* 0.185.1: use the MENU layer (above --layer-modal), not --layer-popover — the
     edit/split editor renders this popup (appended to document.body) while a modal
     is open, and --layer-popover (30) sits BEHIND --layer-modal (100), so the
     suggestions were occluded by the modal. Menu layer is where dropdown/suggestion
     UI belongs and is above modals; harmless in the composer (nothing above it). */
  z-index: var(--layer-menu, 1000);
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
  font-size: var(--font-ui-small);
}
.stashpad-composer-suggest-row {
  padding: 4px 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
}
.stashpad-composer-suggest-row.is-active,
.stashpad-composer-suggest-row:hover {
  background: var(--background-modifier-hover);
}
.stashpad-composer-suggest-label {
  color: var(--text-normal);
  white-space: nowrap;
}
.stashpad-composer-suggest-sub {
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keyboard-binding row in settings */
.stashpad-binding-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
}
.stashpad-binding-input {
  /* 0.59.3: real auto-grow. Drop the 14ch floor — single-char chords
     ("M", "T") should be narrow; longer chords ("Mod+Shift+ArrowDown")
     stretch to fit. `field-sizing: content` (Chrome 123+, which
     Obsidian's Electron meets) does the resizing. The JS fallback in
     settings.ts also sets `.size` on every value change for older
     Electron builds. */
  min-width: 3ch;
  max-width: 28ch;
  field-sizing: content;
  width: auto;
  text-align: center;
  font-family: var(--font-monospace);
  cursor: pointer;
  /* 0.121.12 (#4): compact rounded key-chip look (desktop + mobile). */
  height: 26px;
  padding: 2px 8px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 5px;
  background: var(--background-secondary);
}
.stashpad-binding-input.is-recording {
  background: var(--background-modifier-active-hover);
  border-color: var(--interactive-accent);
}
.stashpad-binding-clear {
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: var(--text-muted);
}
.stashpad-binding-clear:hover {
  background: var(--background-modifier-error);
  color: var(--text-on-accent);
}
/* 0.92.0: revert-to-default icon — same footprint as the clear button, shown
   only when the slot deviates from its shipped default. */
.stashpad-binding-revert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: var(--text-muted);
}
.stashpad-binding-revert .svg-icon {
  width: 14px;
  height: 14px;
}
.stashpad-binding-revert:hover {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.stashpad-binding-revert.is-hidden {
  display: none;
}
/* Pill toggle: a rounded track with a knob that slides L↔R. The knob
   shows "L" when on the left (primary active) or "R" when on the right
   (secondary active). Disabled state dims the whole pill. */
/* 0.121.11 (#8): hotkey row — tri-state control on the LEFT, the two key slots
   STACKED on the right so the binding controls sit at the right end. */
.stashpad-binding-row .setting-item-control {
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.stashpad-binding-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.stashpad-binding-slots .stashpad-binding-slot { margin-right: 0; }
/* 0.121.11 (#9): Left | Both | Right segmented control — replaces the old L/R
   pill + separate "Use both" checkbox. */
.stashpad-binding-seg {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  overflow: hidden;
}
.stashpad-binding-seg-btn {
  padding: 3px 10px;
  font-size: var(--font-ui-smaller);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-muted);
  cursor: pointer;
}
.stashpad-binding-seg-btn:not(:last-child) {
  border-right: 1px solid var(--background-modifier-border);
}
.stashpad-binding-seg-btn:hover:not(:disabled) {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-binding-seg-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.stashpad-binding-seg.is-disabled { opacity: 0.45; }
.stashpad-binding-seg-btn:disabled { cursor: not-allowed; }
/* 0.121.12 (#4): the clear (×) + revert (↺) buttons sit side-by-side on desktop,
   stacked vertically on mobile to keep the (stacked) slots narrow. */
.stashpad-binding-slot-btns { display: inline-flex; gap: 4px; align-items: center; }
body.is-mobile .stashpad-binding-slot-btns { flex-direction: column; gap: 3px; }

/* 0.121.12 (#1/#3): give each folded-tab sub-heading top breathing room — the
   first one (e.g. "List & Display", "JD Index") was cramped right under the
   page title with no separation. */
.stashpad-settings-section .setting-item-heading {
  margin-top: 16px;
  padding-top: 4px;
}
/* 0.143.0: the per-folder "Folder" picker reads as a heading-sized selector — the
   selected folder is the subject of every option below it. */
.stashpad-folderenc-picker {
  font-size: var(--font-ui-large, 1.1em);
  font-weight: var(--font-semibold, 600);
  height: auto;
  padding: 4px 8px;
}
/* 0.121.13: the FIRST sub-heading of a folded tab (top of Behavior / Org
   Systems) gets extra top room so it doesn't crowd the page title. */
.stashpad-settings-section:first-child .setting-item-heading {
  margin-top: 28px;
  padding-top: 6px;
}

/* 0.121.12 (#2): the JD "Actions" buttons spilled off the right on mobile —
   let them wrap instead. */
body.is-mobile .stashpad-jd-actions .setting-item-control {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
/* Color picker modal */
.stashpad-color-modal { width: min(360px, 90vw); }
.stashpad-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 8px;
  padding: 8px 0;
}
.stashpad-color-tile {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.08s ease, border-color 0.08s ease;
  position: relative;
}
.stashpad-color-tile:hover { transform: scale(1.06); }
.stashpad-color-tile.is-active { border-color: var(--text-normal); }
/* Delete ✕ overlay on saved-custom tiles. Hidden until tile hover. */
.stashpad-color-tile-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--background-primary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.08s ease, background 0.08s ease;
}
.stashpad-color-tile:hover .stashpad-color-tile-del { opacity: 1; }
.stashpad-color-tile-del:hover {
  background: var(--background-modifier-error);
  color: var(--text-on-accent);
}
.stashpad-color-none {
  background: var(--background-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Diagonal slash for the "no color" tile — distinct from the previous
   checkmark so it reads as "remove" rather than "selected". */
.stashpad-color-none::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  top: 50%;
  height: 2px;
  background: var(--text-muted);
  transform: rotate(-45deg);
  transform-origin: center;
}
.stashpad-color-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}
/* "+" tile: opens the custom-color submenu. Same size as the swatches. */
.stashpad-color-add {
  background: var(--background-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
}
.stashpad-color-add::before { content: "+"; }
.stashpad-color-add:hover { color: var(--text-normal); }
/* Export-to-.stash modal (0.84.2) */
.stashpad-export-modal { width: min(440px, 92vw); }
.stashpad-export-desc { color: var(--text-muted); margin: 0 0 12px; }
/* 0.97.2: roomier encryption modal fields + a slightly wider modal */
.stashpad-encryption-modal { width: min(480px, 94vw); }
.stashpad-encryption-field {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  margin-bottom: 10px;
  font-size: var(--font-ui-medium);
}
.stashpad-encryption-row { margin-bottom: 10px; }
.stashpad-encryption-row .stashpad-encryption-field { margin-bottom: 0; }
.stashpad-encryption-counter { font-size: var(--font-ui-smaller); color: var(--text-muted); margin: -4px 0 10px; }
.stashpad-encryption-counter.is-weak { color: var(--text-warning); }
.stashpad-strength-seg.is-on { background: var(--interactive-accent); }
/* 0.98.1/0.98.4: locked-subtree placeholder row in the list. Self-contained
   (NOT a .stashpad-note — that class's layout fought this one). svgs get
   flex:0 0 auto so flexbox doesn't collapse them to width:0 (the iPad-icon bug). */
.stashpad-locked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 7px 10px;
  margin: 2px 0;
  border-radius: 6px;
  border: 1px dashed var(--background-modifier-border-hover, var(--interactive-accent));
  background: var(--background-secondary);
}
.stashpad-locked-row:hover { background: var(--background-modifier-hover); }
/* Obsidian sizes .svg-icon via --icon-size; set that (raw width on the svg loses
   the cascade battle and collapses to 0). */
/* 0.98.11: locked-stub timestamp — left-hand `created` time like a note row. */
.stashpad-locked-time { flex: 0 0 auto; color: var(--text-muted); }
.stashpad-locked-icon { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--text-accent); --icon-size: 16px; }
.stashpad-locked-icon .svg-icon { width: var(--icon-size); height: var(--icon-size); }
.stashpad-locked-title { flex: 1 1 auto; font-weight: var(--font-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stashpad-locked-count { flex: 0 0 auto; font-size: var(--font-ui-smaller); color: var(--text-faint); }
.stashpad-locked-unlock {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--font-ui-smaller); padding: 3px 10px; cursor: pointer; --icon-size: 14px;
}
.stashpad-locked-unlock .svg-icon { width: var(--icon-size); height: var(--icon-size); }
/* 0.98.35: encrypted-trash TAB (reuses the row/group classes below). */
.stashpad-trash-view-body { padding: 4px 12px 16px; }
.stashpad-trash-view-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stashpad-trash-view-header h3 { flex: 1 1 auto; margin: 0; }

/* Per-folder overhaul (Phase A): aggregate "All encrypted / archived" tabs —
   reuse the trash row/group classes; only the header/sub/badge are new. */
.stashpad-aggregate-body { padding: 4px 12px 16px; }
.stashpad-aggregate-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.stashpad-aggregate-header h3 { flex: 1 1 auto; margin: 0; }
.stashpad-aggregate-sub { color: var(--text-muted); font-size: var(--font-ui-smaller); margin: 0 0 10px; }
.stashpad-aggregate-lockbadge { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--text-muted); --icon-size: 14px; }

/* Per-folder encryption: filename sub-toggles sit indented under their content
   toggle, dimmed when disabled. */
/* 0.121.2: sub-settings (e.g. the encryption filename sub-toggle under its
   content toggle) get a left guide-line so the nesting reads structurally, not
   just by indent + dim. Additive + stashpad-scoped (never touches global
   .setting-item). */
.stashpad-subsetting {
  padding-left: 18px;
  margin-left: 6px;
  border-left: 2px solid var(--background-modifier-border);
  opacity: 0.85;
}
.stashpad-subsetting .setting-item-name { font-size: var(--font-ui-smaller); color: var(--text-muted); }
.stashpad-trash-iconbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; cursor: pointer; --icon-size: 15px; background: transparent; border: none; box-shadow: none; color: var(--text-muted); }
.stashpad-trash-iconbtn:hover { color: var(--text-normal); }
.stashpad-trash-iconbtn .svg-icon { width: var(--icon-size); height: var(--icon-size); }
.stashpad-trash-group-head { display: flex; align-items: center; gap: 6px; --icon-size: 14px; }
.stashpad-trash-group-icon { display: inline-flex; align-items: center; color: var(--text-faint); }
.stashpad-trash-group-icon .svg-icon { width: var(--icon-size); height: var(--icon-size); }
.stashpad-trash-group-count { margin-left: auto; font-size: var(--font-ui-smaller); color: var(--text-faint); }
/* 0.98.31: encrypted-trash modal. */
.stashpad-trash-modal .stashpad-trash-intro { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-bottom: 10px; }
.stashpad-trash-modal .stashpad-trash-empty { color: var(--text-muted); padding: 12px 0; }
.stashpad-trash-group { margin-bottom: 12px; }
.stashpad-trash-group-head { font-size: var(--font-ui-smaller); font-weight: var(--font-medium); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 6px 0 4px; }
.stashpad-trash-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--background-secondary); margin: 3px 0; }
.stashpad-trash-row-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.stashpad-trash-title { font-weight: var(--font-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stashpad-trash-sub { font-size: var(--font-ui-smaller); color: var(--text-muted); }
.stashpad-trash-restore { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-ui-smaller); padding: 3px 10px; cursor: pointer; --icon-size: 13px; }
.stashpad-trash-restore .svg-icon { width: var(--icon-size); height: var(--icon-size); }
/* 0.112.3: multi-select + permanent-delete in the encrypted-trash tab. */
.stashpad-trash-row { cursor: pointer; }
.stashpad-trash-row.is-selected { background: var(--background-modifier-hover); box-shadow: inset 0 0 0 1px var(--interactive-accent); }
.stashpad-trash-delete {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px; cursor: pointer; --icon-size: 14px;
  background: transparent; border: none; box-shadow: none; color: var(--text-faint);
}
.stashpad-trash-delete:hover { color: var(--text-error); background: var(--background-modifier-error-hover); }
.stashpad-trash-delete .svg-icon { width: var(--icon-size); height: var(--icon-size); }
.stashpad-trash-selbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; margin-bottom: 8px; border-radius: 6px;
  background: var(--background-modifier-hover);
}
.stashpad-trash-selcount { flex: 1 1 auto; font-size: var(--font-ui-smaller); color: var(--text-muted); }
.stashpad-trash-delete.mod-warning { color: var(--text-on-accent); background: var(--text-error); padding: 3px 10px; border-radius: 4px; font-size: var(--font-ui-smaller); }
/* 0.98.24: mobile ⋮ menu button on locked stubs (desktop uses right-click). */
.stashpad-locked-menu {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 6px; cursor: pointer; --icon-size: 16px;
  background: transparent; box-shadow: none; border: none; color: var(--text-muted);
}
.stashpad-locked-menu:hover { color: var(--text-normal); }
.stashpad-locked-menu .svg-icon { width: var(--icon-size); height: var(--icon-size); }

/* 0.97.2/0.97.4: keep the Encryption section's intro text off the left edge and
   below the page's top fade (it was clipping the first line). */
/* PROVISION — text flushing in custom-rendered settings sections.
   sectionDef() removes `.setting-item` from its host, so raw createEl text /
   headings / lists rendered directly into a `.stashpad-settings-section` lose the
   horizontal inset that Obsidian's Setting rows have and sit flush against the
   modal edge. This rule re-insets all such DIRECT children to 14px (matching the
   Setting rows). GOING FORWARD: render plain text/headings into a
   `.stashpad-settings-section` host and they align automatically — don't hand-pad
   per element, and don't render naked text outside a section host. (Setting rows
   are untouched — they're `.setting-item`, not selected here.) */
.stashpad-settings-section > p,
.stashpad-settings-section > h2,
.stashpad-settings-section > h3,
.stashpad-settings-section > h4,
.stashpad-settings-section > ol,
.stashpad-settings-section > ul,
.stashpad-settings-section > .setting-item-description {
  padding-left: 14px;
  padding-right: 14px;
}
/* 0.121.7 (#2): the live date sample read under-indented vs the rest — bump it
   a touch past the standard 14px. (Approximate — verify against live settings.) */
.stashpad-settings-section .stashpad-date-sample {
  padding-left: 20px;
}
/* 0.121.7 (#1): give each settings page some breathing room at the very bottom
   so the last section isn't flush against the modal edge (e.g. the encryption
   page's trailing advice text). Only the last section in a tab is affected. */
.stashpad-settings-section:last-child {
  padding-bottom: 16px;
}
/* 0.122.4 (#7): at narrow widths a setting's control (especially multi-input
   ones like the folder-icon picker: dropdown + text + preview) squeezed the
   description down to ~1 character. Let the control WRAP below the info instead,
   and keep the info from collapsing. Scoped to Stashpad's settings sections. */
.stashpad-settings-section .setting-item {
  flex-wrap: wrap;
  row-gap: 8px;
}
.stashpad-settings-section .setting-item .setting-item-info {
  /* don't let the name+description collapse (it was wrapping to ~1ch). */
  min-width: 50%;
  flex: 1 1 auto;
}
.stashpad-settings-section .setting-item .setting-item-control {
  /* 0.122.7: keep the control at its natural size so it WRAPS to its own
     full-width line when the row is too narrow — instead of shrinking its
     inputs and squeezing the description. */
  flex-shrink: 0;
  max-width: 100%;
  /* 0.134.0: right-align controls, matching Obsidian's own setting rows (they
     were flex-start, which left every section control — the per-folder
     encryption panel especially — drifting toward the middle while the plain
     rows above sat at the right edge; the mix read as "randomly positioned"). */
  justify-content: flex-end;
}
/* 0.121.14: Obsidian 1.13's MOBILE settings use a 20px horizontal gutter
   (measured: .setting-item padding-left = 20px). Several stashpad insets were
   still at the older 14px, so they didn't line up with Obsidian's own rows —
   the "nothing is consistent" problem. Bump EVERY settings inset to 20px on
   mobile so it all aligns. Desktop keeps its existing gutter. */
body.is-mobile .stashpad-settings-section > p,
body.is-mobile .stashpad-settings-section > h2,
body.is-mobile .stashpad-settings-section > h3,
body.is-mobile .stashpad-settings-section > h4,
body.is-mobile .stashpad-settings-section > ol,
body.is-mobile .stashpad-settings-section > ul,
body.is-mobile .stashpad-settings-section > .setting-item-description,
body.is-mobile .stashpad-folder-list,
body.is-mobile .stashpad-authored-folders-list,
body.is-mobile .stashpad-folder-placement-group,
body.is-mobile .stashpad-known-authors-list,
body.is-mobile .stashpad-encryption-section > .setting-item-description,
body.is-mobile .stashpad-okf-howto,
body.is-mobile .stashpad-beta-row {
  padding-left: 20px;
  padding-right: 20px;
}
body.is-mobile .stashpad-ai-disclaimer,
body.is-mobile .stashpad-okf-cta {
  margin-left: 20px;
  margin-right: 20px;
}
.stashpad-ai-disclaimer {
  margin: 4px 14px 12px; padding: 10px 12px; border-radius: var(--radius-m, 6px);
  border: 1px solid var(--color-red, #e24b4a);
  background: var(--background-modifier-error, rgba(226, 75, 74, 0.1));
  color: var(--text-normal); font-size: 13px; line-height: 1.5;
}
.stashpad-encryption-section { padding: 12px 2px 0; }
.stashpad-encryption-section > .setting-item-description { padding: 4px 14px 10px; line-height: 1.4; }
.stashpad-beta-row { display: flex; align-items: center; gap: 8px; padding: 2px 14px 6px; }
.stashpad-okf-howto { padding: 4px 14px 8px; }
.stashpad-okf-fmt { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.stashpad-okf-cta {
  margin: 2px 14px 12px; padding: 9px 12px; border-radius: var(--radius-m, 6px);
  border: 1px solid var(--interactive-accent); background: var(--background-modifier-hover);
  font-size: 13px; line-height: 1.5;
}
.stashpad-okf-fmt label { cursor: pointer; }
.stashpad-okf-howto ol { margin: 4px 0 0; padding-left: 1.4em; }
.stashpad-beta-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  line-height: 1; padding: 3px 6px; border-radius: 4px; text-transform: uppercase;
  color: var(--text-on-accent, #fff); background: var(--color-orange, #e07b39);
}
.stashpad-beta-note { font-size: 12px; color: var(--text-muted); }
.stashpad-encryption-modal .stashpad-beta-row { padding: 0 0 10px; }
.stashpad-export-field { display: flex; flex-direction: column; gap: 4px; }
.stashpad-export-label { font-size: var(--font-ui-small); color: var(--text-muted); }
.stashpad-export-name { width: 100%; }
/* 0.85.7: password field + inline Copy button */
.stashpad-export-pw-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.stashpad-export-pw-row .stashpad-export-name { flex: 1; min-width: 0; }
.stashpad-export-copy { flex: 0 0 auto; }
.stashpad-export-preview {
  margin-top: 8px;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 0.166.0: export "Content" segmented control (Full / Frontmatter only / Body
   only) + the plain-zip warning shown for the non-full modes. */
.stashpad-export-content { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.stashpad-export-content-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.stashpad-export-content-opt {
  flex: 1 1 0;
  min-width: 96px;
  padding: 5px 10px;
  font-size: var(--font-ui-smaller);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: none;
}
.stashpad-export-content-opt:hover { color: var(--text-normal); }
.stashpad-export-content-opt.is-active {
  border-color: var(--interactive-accent);
  color: var(--text-on-accent);
  background: var(--interactive-accent);
}
.stashpad-export-format { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.stashpad-okf-formats { margin-top: 8px; }
.stashpad-export-zipwarn {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  background: var(--background-secondary);
  border-left: 3px solid var(--text-warning, var(--interactive-accent));
  border-radius: 4px;
}
.stashpad-export-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
}
.stashpad-export-encrypt {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
}
.stashpad-export-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stashpad-export-toggle label { cursor: pointer; }
.stashpad-export-pw-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.stashpad-export-pw-hint {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.stashpad-export-pw-hint.is-error { color: var(--text-error); }
.stashpad-export-pw-suite {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  margin-top: 2px;
}
.stashpad-export-pw-suite.is-weak { color: var(--text-warning); }

/* 0.85.4: password strength meter (nudge), generate/show row, remember toggle */
.stashpad-export-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  visibility: hidden;
}
.stashpad-strength-bar {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}
.stashpad-strength-seg {
  width: 26px;
  height: 5px;
  border-radius: 3px;
  background: var(--background-modifier-border);
}
/* color the lit segments by the bar's data-level (0 weak … 3 strong) */
.stashpad-strength-bar[data-level="0"] .stashpad-strength-seg.is-on { background: var(--text-error); }
.stashpad-strength-bar[data-level="1"] .stashpad-strength-seg.is-on { background: var(--text-warning); }
.stashpad-strength-bar[data-level="2"] .stashpad-strength-seg.is-on { background: var(--color-yellow); }
.stashpad-strength-bar[data-level="3"] .stashpad-strength-seg.is-on { background: var(--text-success); }
.stashpad-strength-label {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.stashpad-export-genrow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.stashpad-export-show { flex: 0 0 auto; }
.stashpad-export-remember {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}
.stashpad-export-remember label {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: 1.3;
}
.stashpad-export-remember-note {
  margin-top: 4px;
  padding: 6px 8px;
  border-left: 2px solid var(--text-warning);
  background: var(--background-modifier-hover);
  border-radius: 4px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: 1.35;
}
.stashpad-export-error {
  color: var(--text-error);
  font-size: var(--font-ui-small);
  margin-bottom: 8px;
}

/* Custom-color submenu */
.stashpad-custom-color-modal { width: min(380px, 90vw); }
.stashpad-custom-color-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}
.stashpad-custom-color-preview {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  cursor: pointer;
  overflow: hidden;
}
.stashpad-custom-color-wheel {
  /* Native picker is invisible; clicking the preview pops it. */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  border: none;
  padding: 0;
  pointer-events: none;
}
.stashpad-custom-color-hex {
  flex: 1 1 auto;
  font-family: var(--font-monospace);
  text-transform: uppercase;
}
.stashpad-log-footer {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 0 0;
}
.stashpad-log-footer:empty { display: none; }
.stashpad-modal-check { display: block; margin: 8px 0; cursor: pointer; }
.stashpad-modal-check input { margin-right: 6px; }

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

/* 0.76.28: compact confirm dialogs (delete, generic confirm, due
   picker) size to their content. 0.76.18's `width: auto` shrank the
   box to content width (cut the text off on mobile); now we use a
   definite, readable width (capped on desktop, near-full on mobile)
   and force the height to hug content with !important so Obsidian's
   mobile modal min-height can't re-inflate it. */
.modal.stashpad-compact-modal {
  width: min(440px, 94vw) !important;
  max-width: 94vw !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 85vh;
  /* 0.76.29: don't clip the content — the bottom button row was
     getting shaved by the modal's rounded-corner overflow when the
     box hugged content exactly. */
  overflow: visible !important;
}
.modal.stashpad-compact-modal .modal-content {
  height: auto;
  min-height: 0;
  max-height: 80vh;
  overflow-y: auto;
  /* `overflow-y: auto` forces overflow-x to `auto` too (CSS computed-value
     rule), so this box CLIPS horizontally at its border edge. The button row
     is justify-flex-end, so the right button sat flush against that edge and
     its keyboard focus ring (and rounded border) got shaved. Horizontal
     padding pulls content in so the ring draws within the padding, before the
     clip. 0.118.2. */
  padding-left: 8px;
  padding-right: 8px;
  /* Clearance so the Cancel/Delete/Set row clears the modal's
     bottom edge. */
  padding-bottom: 16px;
}

/* 0.76.1 / 0.76.5: due-date picker modal. Native date/time inputs
   (OS pickers on mobile), each with a leading icon at a constrained
   width. Presets + actions share one 3-column grid so all six
   buttons line up as two even rows. */
.stashpad-due-picker { display: flex; flex-direction: column; gap: 14px; }
/* 0.79.3: import log viewer rows. */
.stashpad-import-log-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.stashpad-import-log-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px;
  background: var(--background-secondary); font-size: 0.88em;
}
.stashpad-import-log-when { color: var(--text-faint); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.stashpad-import-log-kind {
  flex: 0 0 auto; padding: 0 6px; border-radius: 999px;
  background: var(--background-modifier-hover); color: var(--text-muted); font-size: 0.85em;
}
.stashpad-import-log-name { flex: 1 1 auto; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stashpad-import-log-meta { flex: 0 0 auto; color: var(--text-muted); }
/* 0.78.1: "Assign to" section in the due picker. */
.stashpad-assign { display: flex; flex-direction: column; gap: 6px; }
.stashpad-assign-label { font-size: 0.85em; color: var(--text-muted); font-weight: 600; }
.stashpad-assign-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 22px; }
.stashpad-assign-empty { color: var(--text-faint); font-size: 0.85em; }
.stashpad-assign-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 6px 2px 9px; border-radius: 999px;
  background: var(--background-modifier-hover);
  border: 1px solid var(--background-modifier-border);
  font-size: 0.85em;
}
.stashpad-assign-chip-x { cursor: pointer; color: var(--text-muted); font-size: 1.1em; line-height: 1; }
.stashpad-assign-chip-x:hover { color: var(--text-error); }
/* 0.78.4: small horizontal inset so the input's focus ring (a ~2px
   box-shadow that sits outside the border-box) isn't clipped by the
   section/modal edge on either side. */
.stashpad-assign-input-wrap { position: relative; padding: 2px 3px; }
.stashpad-assign-input { width: 100%; box-sizing: border-box; }
.stashpad-assign-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  margin-top: 2px; max-height: 180px; overflow-y: auto;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.stashpad-assign-suggest-item { padding: 6px 10px; cursor: pointer; font-size: 0.9em; }
.stashpad-assign-suggest-item:hover { background: var(--background-modifier-hover); }
.stashpad-due-fields { display: flex; flex-direction: column; gap: 8px; }
.stashpad-due-field {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
}
/* 0.76.22: give the picker icons a button-like background so they
   read as clickable (they open the OS date/time picker). */
.stashpad-due-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--interactive-normal);
}
.stashpad-due-field-icon:hover { color: var(--text-normal); background: var(--interactive-hover); }
.stashpad-due-field-icon:active { background: var(--background-modifier-active-hover); }
.stashpad-due-field-icon svg { width: 16px; height: 16px; }
/* 0.104.x: dedicated × to clear a single field (date or time). */
.stashpad-due-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 5px;
}
.stashpad-due-clear:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.stashpad-due-clear svg { width: 13px; height: 13px; }
/* 0.76.8: hide the native right-side picker indicator — our left
   icon is the picker button now (calls showPicker). */
.stashpad-due-date::-webkit-calendar-picker-indicator,
.stashpad-due-time::-webkit-calendar-picker-indicator {
  display: none;
}
.stashpad-due-date, .stashpad-due-time {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  /* 0.76.17: uppercase any letters (month abbreviation / AM·PM). */
  text-transform: uppercase;
}
/* 0.76.17 / 0.76.22: kill the leading gap webkit reserves inside the
   value editor so the date sits flush-left in its box (no stray
   space where the picker indicator used to be). */
.stashpad-due-date::-webkit-datetime-edit,
.stashpad-due-time::-webkit-datetime-edit { padding: 0; margin: 0; }
.stashpad-due-date::-webkit-datetime-edit-fields-wrapper,
.stashpad-due-time::-webkit-datetime-edit-fields-wrapper { padding: 0; margin: 0; }
.stashpad-due-date::-webkit-datetime-edit-text:first-child,
.stashpad-due-date::-webkit-datetime-edit-month-field:first-child,
.stashpad-due-date::-webkit-datetime-edit-year-field:first-child,
.stashpad-due-date::-webkit-datetime-edit-day-field:first-child { padding-left: 0; margin-left: 0; }
/* 0.125.1: quick relative-adjust row in the due/snooze picker — a +/- flip
   followed by amount buttons. Wraps on narrow widths. */
.stashpad-due-quickadjust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
}
.stashpad-due-adjust-flip {
  flex: 0 0 auto;
  width: 30px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--interactive-normal);
  color: var(--text-normal);
  font-weight: 700;
  font-size: 1.05em;
  cursor: pointer;
}
.stashpad-due-adjust-flip.is-minus { color: var(--text-error); border-color: var(--text-error); }
.stashpad-due-adjust-btn {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--interactive-normal);
  color: var(--text-normal);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.stashpad-due-adjust-btn:hover { background: var(--interactive-hover); }
.stashpad-due-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.stashpad-due-btn {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--interactive-normal);
  color: var(--text-normal);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
  text-align: center;
}
.stashpad-due-btn:hover { background: var(--interactive-hover); }
.stashpad-due-btn.mod-cta { background: var(--interactive-accent); color: var(--text-on-accent); border-color: var(--interactive-accent); }
.stashpad-due-btn.mod-cta:hover { background: var(--interactive-accent-hover); }

/* Stashpad notification toast — wraps Obsidian's built-in .notice with
   a structured layout so we can stack a message + action button row.
   Color shifts by kind (info / success / warning / error) come from
   small left-border accents; the toast's main background stays
   Obsidian's default so theme integration stays clean. */
.stashpad-notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 8px;
  border-left: 3px solid transparent;
}
.stashpad-notice-info    { border-left-color: var(--text-muted); }
.stashpad-notice-success { border-left-color: var(--color-green, #44d07b); }
.stashpad-notice-warning { border-left-color: var(--color-orange, #e8a25a); }
.stashpad-notice-error   { border-left-color: var(--color-red, #e25c4c); }
.stashpad-notice-message {
  white-space: pre-wrap;
  line-height: 1.4;
}
.stashpad-notice-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* 0.72.1: action buttons use Obsidian's interactive-* tokens so they
   read correctly in BOTH light + dark themes. The earlier
   --background-modifier-hover hover state resolved to near-black on
   some light themes, making button text unreadable on hover. */
.stashpad-notice-action {
  background: var(--interactive-normal);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: var(--font-ui-smaller);
  font-weight: 500;
  cursor: pointer;
  transition: background 80ms ease;
}
.stashpad-notice-action:hover {
  background: var(--interactive-hover);
  color: var(--text-normal);
}
.stashpad-notice-action:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 1px;
}

/* 0.171.1: whole-card-clickable toast (due reminder → open the task). The
   click target is the actual `.notice` element (wired in show()), so the whole
   toast surface — Obsidian's padding included — opens the task. */
.notice.stashpad-notice-clickable {
  cursor: pointer;
}
.notice.stashpad-notice-clickable:hover {
  filter: brightness(1.08);
}
/* has-overlay: reserve room for the corner control + anchor its absolute
   position to the content wrap. */
.stashpad-notice.has-overlay {
  position: relative;
  padding-right: 84px;
}
/* Overlay control (Snooze) — layered above the card, top-right. Its click
   handler stopPropagation()s so it never triggers the body's open-task click. */
.stashpad-notice-overlay {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--interactive-normal);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: var(--font-ui-smaller);
  font-weight: 500;
  cursor: pointer;
  transition: background 80ms ease;
}
.stashpad-notice-overlay:hover {
  background: var(--interactive-hover);
}
.stashpad-notice-overlay:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 1px;
}
.stashpad-notice-overlay .svg-icon {
  width: 14px;
  height: 14px;
}

/* Notification history modal — extends the existing log-modal layout
   with notification-specific row styling. Each row has a colored dot
   for the kind, a category badge, the message, and (optional) snapshot
   chips for the action labels the original toast carried. */
.stashpad-notif-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.stashpad-notif-row:last-child { border-bottom: none; }
.stashpad-notif-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1;
  white-space: nowrap;
}
.stashpad-notif-time {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.stashpad-notif-cat {
  font-size: var(--font-ui-smaller);
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--background-modifier-border);
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.stashpad-notif-row-success .stashpad-notif-cat { background: rgba(68, 208, 123, 0.18); color: var(--color-green, #44d07b); }
.stashpad-notif-row-warning .stashpad-notif-cat { background: rgba(232, 162, 90, 0.18); color: var(--color-orange, #e8a25a); }
.stashpad-notif-row-error   .stashpad-notif-cat { background: rgba(226, 92, 76, 0.18);  color: var(--color-red, #e25c4c); }
.stashpad-notif-msg {
  grid-column: 2;
  white-space: pre-wrap;
}
.stashpad-notif-actions-snapshot {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.stashpad-notif-action-chip {
  font-size: var(--font-ui-smaller);
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--background-secondary);
  color: var(--text-faint);
  border: 1px solid var(--background-modifier-border);
}

/* Notification toast polish — wrap, truncate, monospace paths.
   The action button gets a max-width so a long "Jump to '<title>'"
   doesn't extend off-screen; overflow is ellipsised. The message
   body already does pre-wrap from 0.55.0, but we cap toast width
   so super-long single lines don't push the viewport. */
.stashpad-notice {
  max-width: min(480px, 90vw);
}
.stashpad-notice-message {
  word-break: break-word;
}
/* File names + vault paths inside notification messages render in
   monospace + slightly muted background so they're visually distinct
   from prose. Applied by wrapping the path in <code>...</code> in
   the toast's message string OR by class. */
.stashpad-notice-message code,
.stashpad-notice-message .stashpad-notice-path {
  font-family: var(--font-monospace);
  font-size: 0.95em;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--background-modifier-border);
  color: var(--text-normal);
}
/* Safety cap so a future long label still ellipsises instead of
   pushing the toast off-screen. 0.72.1: tightened now that labels are
   verbs ("Reveal", "Jump to parent") rather than note titles. */
.stashpad-notice-action {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 0.61.1: tiny mode — minimal popout shell. */
.stashpad-tiny-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--background-modifier-border);
  font-size: 0.85em;
}
/* 0.122.4 (#1): when the window is FRAMELESS (Obsidian draws min/max/close
   inside the content area), the tiny-header controls sit under those window
   buttons. Reserve space on the controls' side: top-RIGHT on Windows/Linux,
   top-LEFT on macOS. Native-frame windows (OS draws the frame) have neither
   class, so they're unaffected. (Unverified on Windows — reasoned from
   Obsidian's mod-* and is-frameless body classes.) */
body.is-frameless.mod-windows .stashpad-tiny-header,
body.is-hidden-frameless.mod-windows .stashpad-tiny-header,
body.is-frameless.mod-linux .stashpad-tiny-header,
body.is-hidden-frameless.mod-linux .stashpad-tiny-header {
  padding-right: 140px;
}
body.is-frameless.mod-macos .stashpad-tiny-header,
body.is-hidden-frameless.mod-macos .stashpad-tiny-header {
  padding-left: 80px;
}
/* 0.122.9 (F3): in frameless mode the tiny-header bar sits where the OS would
   otherwise expose a draggable titlebar — and the reserved padding above
   extends the (non-draggable) header box over the macOS traffic-light strip,
   so the window could no longer be moved. Make the header itself a drag region
   and exempt its interactive children so they stay clickable. Scoped to
   frameless only; native-frame windows drag via the OS frame. */
body.is-frameless .stashpad-tiny-header,
body.is-hidden-frameless .stashpad-tiny-header {
  -webkit-app-region: drag;
}
body.is-frameless .stashpad-tiny-header button,
body.is-frameless .stashpad-tiny-header input,
body.is-frameless .stashpad-tiny-header .stashpad-tiny-sticky,
body.is-frameless .stashpad-tiny-header .stashpad-folder-btn,
body.is-hidden-frameless .stashpad-tiny-header button,
body.is-hidden-frameless .stashpad-tiny-header input,
body.is-hidden-frameless .stashpad-tiny-header .stashpad-tiny-sticky,
body.is-hidden-frameless .stashpad-tiny-header .stashpad-folder-btn {
  -webkit-app-region: no-drag;
}
/* 0.77.0-feat: tiny-window transparency button + slider popover. */
.stashpad-tiny-opacity-btn.is-active { color: var(--text-accent); }
.stashpad-tiny-opacity-popover {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 170px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.stashpad-tiny-opacity-label {
  font-size: var(--font-ui-smaller);
  font-weight: 600;
  color: var(--text-muted);
}
.stashpad-tiny-opacity-popover input[type="range"] { width: 100%; }
.stashpad-tiny-opacity-pct {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stashpad-tiny-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.stashpad-tiny-sticky {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.85em;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.stashpad-tiny-sticky input[type="checkbox"] { margin-right: 0; }
.stashpad-tiny-expand {
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  /* 0.71.20: center the lucide icon now that the button uses
     setIcon() instead of a text glyph. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.stashpad-tiny-expand:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-tiny-expand svg { width: 12px; height: 12px; }

/* 0.61.2: tiny-mode header icon + view-mode buttons in the time filter row. */
.stashpad-tiny-title-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  color: var(--text-faint);
}
.stashpad-tiny-title-icon svg { width: 14px; height: 14px; }

.stashpad-view-mode-btns {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* 0.61.13: tighten gap to the time-filter buttons. Was 8px, now 2px
     so the three view-mode buttons read as part of the same control
     cluster rather than a separated trailing group. */
  margin-left: 2px;
}
.stashpad-view-mode-btn {
  /* Match the time-filter button's metrics so the row reads uniformly.
     Icon-only → square aspect via aspect-ratio + matching padding. */
  flex: 0 0 auto;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 4px;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}
.stashpad-view-mode-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-view-mode-btn.is-active {
  background: var(--background-modifier-active-hover);
  color: var(--text-normal);
  border-color: var(--interactive-accent);
}
.stashpad-view-mode-btn svg { width: 14px; height: 14px; }

/* 0.61.3: compact mode (in-tab) — strip the row down to body text +
   children-count arrow only. Hide timestamp, authorship, action buttons. */
.stashpad-view.is-compact .stashpad-note-meta-top .stashpad-note-time,
.stashpad-view.is-compact .stashpad-note-meta-top .stashpad-note-grip,
.stashpad-view.is-compact .stashpad-note-authorship,
.stashpad-view.is-compact .stashpad-note-actions {
  display: none !important;
}
.stashpad-view.is-compact .stashpad-note-meta {
  /* The meta column normally holds time + grip + child-count link. Once
     the first two are hidden the column collapses. Keep the arrow
     visible by NOT hiding .stashpad-note-enter. */
  min-width: 0;
}
.stashpad-view.is-compact .stashpad-note-body {
  /* One-line clamp — body text gets ellipsised at the right edge. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stashpad-view.is-compact .stashpad-note-body-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 1.4em;
}
.stashpad-view.is-compact .stashpad-note-body-content > * {
  display: inline;
}

/* Exit-compact button (rendered in the breadcrumb in 0.61.3 since the
   filter-row exit is hidden under compact). */
.stashpad-compact-exit-btn {
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  color: var(--text-muted);
}
.stashpad-compact-exit-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-compact-exit-btn svg { width: 13px; height: 13px; }

/* Hide Obsidian's view-header + tab-header strip when the leaf hosts a
   compact-mode or tiny-mode Stashpad view. Uses :has() so we don't
   need a corresponding class on the leaf container — modern Chromium
   supports it and Obsidian's Electron meets the version. */
.workspace-leaf.stashpad-is-compact > .view-header,
.workspace-leaf.stashpad-is-tiny > .view-header {
  display: none !important;
}
.workspace-tabs.stashpad-has-tiny .workspace-tab-header-container {
  display: none !important;
}

/* 0.61.4: composer collapses to a chevron-+-send pair on narrow widths
   (compact mode, tiny windows, narrow splits). The ResizeObserver in
   view.ts toggles .is-narrow on .stashpad-composer when its clientWidth
   < 360px. */
.stashpad-composer:not(.is-narrow) .stashpad-composer-rail-toggle {
  display: none;
}
.stashpad-composer.is-narrow .stashpad-composer-btn-rail:not(.is-expanded) .stashpad-composer-btn-group {
  display: none;
}
.stashpad-composer.is-narrow .stashpad-composer-rail-toggle {
  display: inline-flex;
}

/* 0.61.5: apply the compact row rules to tiny mode too, plus drop the
   > direct-child constraint on .view-header so Obsidian's wrapper
   .workspace-leaf-content layers don't defeat the selector. */
.stashpad-view.is-tiny.is-compact .stashpad-note-meta-top .stashpad-note-time,
.stashpad-view.is-tiny.is-compact .stashpad-note-meta-top .stashpad-note-grip,
.stashpad-view.is-tiny.is-compact .stashpad-note-authorship,
.stashpad-view.is-tiny.is-compact .stashpad-note-actions {
  display: none !important;
}
.stashpad-view.is-tiny.is-compact .stashpad-note-meta { min-width: 0; }
.stashpad-view.is-tiny.is-compact .stashpad-note-body {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stashpad-view.is-tiny.is-compact .stashpad-note-body-content {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 1.4em;
}
.stashpad-view.is-tiny.is-compact .stashpad-note-body-content > * { display: inline; }

.workspace-leaf.stashpad-is-compact .view-header,
.workspace-leaf.stashpad-is-tiny .view-header {
  display: none !important;
}

/* 0.61.8: compact + tiny — give every row a fixed height so cursor
   navigation doesn't shift the list around. The body's natural height
   varies with markdown content; clamping prevents the up/down jitter
   reported when arrowing through a compact list. */
.stashpad-view.is-compact .stashpad-note,
.stashpad-view.is-tiny.is-compact .stashpad-note {
  height: 32px;
  min-height: 32px;
  align-items: center;
  overflow: hidden;
  /* 0.119.7: the base row keeps 8px top/bottom padding, which left only
     ~16px of content area inside the 32px row — too short for the ~22px
     text line, so it clipped and sat low ("top gap + sunk text"). Drop the
     vertical padding so the single clamped line centers cleanly in 32px. */
  padding-top: 0;
  padding-bottom: 0;
}
/* Make sure the tiny-header buttons never get shrunk out of view. */
.stashpad-tiny-header .stashpad-tiny-expand,
.stashpad-tiny-header .stashpad-tiny-sticky {
  flex: 0 0 auto;
}
.stashpad-tiny-exit-compact.is-active {
  background: var(--background-modifier-active-hover);
  color: var(--text-normal);
  border-color: var(--interactive-accent);
}

/* 0.62.2: ribbon suggest modal — icon + label rows. */
.stashpad-ribbon-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stashpad-ribbon-suggest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-muted);
}
.stashpad-ribbon-suggest-icon svg { width: 16px; height: 16px; }
.stashpad-ribbon-suggest-body { flex: 1 1 auto; min-width: 0; }

/* 0.63.2: ConfirmModal body — one sentence per line, no big gaps. */
.stashpad-confirm-body { margin: 0 0 12px; }
.stashpad-confirm-line { margin: 0; padding: 1px 0; }

/* 0.64.0: advanced search filter chips. */
.stashpad-search-filter-row {
  display: flex;
  /* 0.64.15: cover every parent-context case — block parents honor
     width:100%; flex-column parents honor align-self:stretch +
     flex-basis:100%; flex-row parents honor flex:1 0 100%. */
  width: 100%;
  flex: 1 0 100%;
  align-self: stretch;
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.stashpad-search-filter-row::-webkit-scrollbar { display: none; }
.stashpad-search-filter-chip { flex: 0 0 auto; }
.stashpad-search-filter-label { flex: 0 0 auto; }
.stashpad-search-filter-label {
  font-weight: 500;
  margin-right: 2px;
}
.stashpad-search-filter-chip {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: var(--font-monospace);
  font-size: 0.9em;
  cursor: pointer;
  color: var(--text-muted);
}
.stashpad-search-filter-chip:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

/* 0.64.1: timestamp rail in the search/picker suggestion rows. */
.stashpad-suggest-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.stashpad-suggest-body {
  flex: 1 1 auto;
  min-width: 0;
}
.stashpad-suggest-time {
  flex: 0 0 auto;
  font-size: 0.78em;
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 2px;
}

/* 0.66.0: Stashpad-internal back/forward nav buttons. Match the
   actions-cluster sizing in the breadcrumb; smaller for the tiny
   header to fit the slim strip. */
.stashpad-mobile-action-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.stashpad-tiny-nav-btn {
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.stashpad-tiny-nav-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-tiny-nav-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.stashpad-tiny-nav-btn svg { width: 13px; height: 13px; }

/* 0.67.1: tiny header's title-button needs to expand instead of the
   default folder-btn 50% cap. Override the folder-btn constraint when
   it's used inside the tiny header. */
.stashpad-tiny-header .stashpad-folder-btn {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

/* 0.74.1: right-sidebar detail panel. Surfaces the cursored note's
   body, metadata, and children list. Counterpart to the left panels
   view (Pinned/Shared/Tasks). Styling kept light so theme variables
   carry the look. */
.stashpad-detail-root {
  /* 0.74.7: full-height flex column — content scrolls, composer
     stays pinned at the bottom and rides up as the panel shrinks. */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 10px;
  font-size: var(--font-ui-small);
}
/* 0.74.7: scrollable content region above the pinned composer. */
.stashpad-detail-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.stashpad-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 8px;
  color: var(--text-muted);
  text-align: center;
}
.stashpad-detail-empty-icon svg { width: 28px; height: 28px; opacity: 0.5; }
.stashpad-detail-empty-text { font-size: var(--font-ui-smaller); line-height: 1.4; }
.stashpad-detail-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 10px;
}
.stashpad-detail-titlerow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stashpad-detail-title {
  flex: 1 1 auto;
  font-size: var(--font-ui-medium);
  font-weight: 600;
  color: var(--text-normal);
  overflow-wrap: anywhere;
}
.stashpad-detail-open-btn {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.stashpad-detail-open-btn:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.stashpad-detail-metarow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.stashpad-detail-meta-chip {
  font-size: var(--font-ui-smaller);
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--background-modifier-border);
  color: var(--text-muted);
}
.stashpad-detail-meta-chip.is-completed { color: var(--color-green); }
.stashpad-detail-meta-chip.is-due { color: var(--color-orange); }
.stashpad-detail-meta-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--background-modifier-border);
}
.stashpad-detail-meta-tag {
  font-size: var(--font-ui-smaller);
  color: var(--text-accent);
}
.stashpad-detail-body {
  margin: 0 0 12px;
  font-size: var(--font-text-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.stashpad-detail-body > :first-child { margin-top: 0; }
.stashpad-detail-body > :last-child { margin-bottom: 0; }
.stashpad-detail-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--background-modifier-border);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}
.stashpad-detail-meta-line { display: flex; gap: 6px; }
.stashpad-detail-meta-key { flex: 0 0 86px; color: var(--text-faint); }
.stashpad-detail-meta-val { flex: 1 1 auto; overflow-wrap: anywhere; }
.stashpad-detail-children {
  margin-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
  padding-top: 8px;
}
.stashpad-detail-children-header {
  font-size: var(--font-ui-smaller);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.stashpad-detail-children-list { display: flex; flex-direction: column; gap: 1px; }
.stashpad-detail-child-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-normal);
}
.stashpad-detail-child-row:hover { background: var(--background-modifier-hover); }
/* 0.74.2: chevron toggle on rows with descendants — mirrors the
   Pinned panel's outline expander. Always reserves the slot so
   row contents stay aligned regardless of whether the toggle is
   visible on a given row. */
.stashpad-detail-child-toggle {
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  cursor: pointer;
}
.stashpad-detail-child-toggle:hover { color: var(--text-normal); }
.stashpad-detail-child-toggle svg { width: 12px; height: 12px; }
/* 0.76.10: task checkbox on detail child rows. */
.stashpad-detail-child-checkbox {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
}
.stashpad-detail-child-checkbox:hover { color: var(--text-normal); }
.stashpad-detail-child-checkbox svg { width: 14px; height: 14px; }

/* 0.74.3: child-count badge shared by the Pinned + detail outline
   rows (replaces the caret expander). Collapsed = muted; .is-expanded
   = accent tint so open/closed state still reads at a glance even
   though the count is always shown. */
.stashpad-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 15px;
  padding: 0 4px;
  /* 0.76.13: square (rounded corners) instead of a pill/circle. */
  border-radius: 3px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--background-modifier-border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
.stashpad-count-badge:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-count-badge.is-expanded {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.stashpad-detail-child-icon { display: inline-flex; align-items: center; }
.stashpad-detail-child-icon svg { width: 14px; height: 14px; }
.stashpad-detail-child-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stashpad-detail-child-row.is-completed { text-decoration: line-through; opacity: 0.6; }
/* 0.74.5: drag-reorder affordances, mirroring the Pinned panel. */
.stashpad-detail-child-row.is-dragging { opacity: 0.4; }
.stashpad-detail-child-row.drop-before { box-shadow: inset 0 2px 0 0 var(--interactive-accent); }
.stashpad-detail-child-row.drop-after { box-shadow: inset 0 -2px 0 0 var(--interactive-accent); }
.stashpad-detail-error { color: var(--color-red); font-size: var(--font-ui-smaller); }

/* 0.74.4 / 0.74.7: simplified composer, pinned at the bottom of the
   detail panel. Textarea on top, full-width "Add child note" button
   below. Creates a child of the displayed note; shares the #/[[/@
   autocomplete popover with the main composer. flex:0 so it keeps
   its natural height while the scroll area above absorbs resizes. */
.stashpad-detail-composer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--background-modifier-border);
}
.stashpad-detail-composer-input {
  width: 100%;
  resize: vertical;
  min-height: 2.4em;
  max-height: 40vh;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  line-height: 1.4;
  font-family: inherit;
  box-sizing: border-box;
}
.stashpad-detail-composer-input:focus {
  border-color: var(--interactive-accent);
  outline: none;
}
.stashpad-detail-composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  cursor: pointer;
  font-size: var(--font-ui-small);
  font-weight: 500;
}
.stashpad-detail-composer-send:hover { background: var(--interactive-accent-hover); }
.stashpad-detail-composer-send-icon { display: inline-flex; align-items: center; }
.stashpad-detail-composer-send-icon svg { width: 15px; height: 15px; }

/* 0.71.24 — when the When-builder is open, grow the modal so a short
   results list can't clip the builder's mode tabs / inputs / buttons.
   `.suggestion-container` is Obsidian's scrollable results wrapper; we
   give it (and the prompt) a generous min-height so the builder always
   has room. Falls back to overflow auto for ultra-short viewports. */
.modal.is-when-builder-open .prompt,
.modal.is-when-builder-open .suggestion-container {
  min-height: 360px;
  max-height: 80vh;
}
.modal.is-when-builder-open .prompt { overflow-y: auto; }

/* 0.69.0 — When-builder inline panel (search modal). Toggled by the
   unified When chip; sits between the chip row and the results. */
.stashpad-when-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
}
.stashpad-when-tabs {
  display: flex;
  gap: 4px;
}
.stashpad-when-tab {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-when-tab:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-when-tab.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
.stashpad-when-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.stashpad-when-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
}
.stashpad-when-actions {
  display: flex;
  gap: 6px;
}
.stashpad-when-insert,
.stashpad-when-cancel {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-when-insert {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
.stashpad-when-insert:hover { filter: brightness(1.1); }
.stashpad-when-cancel:hover { background: var(--background-modifier-hover); }

/* 0.68.0: Stashpad sidebar panels view. */
.stashpad-panels-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}
.stashpad-panels-bar {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-bottom: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
}
.stashpad-panels-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}
.stashpad-panels-bar-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-panels-bar-btn.is-active {
  background: var(--background-modifier-active-hover);
  color: var(--text-normal);
  border-color: var(--interactive-accent);
}
.stashpad-panels-bar-btn-icon { display: inline-flex; align-items: center; }
.stashpad-panels-bar-btn-icon svg { width: 14px; height: 14px; }

.stashpad-panels-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 4px;
}

.stashpad-panel-pinned { display: flex; flex-direction: column; gap: 1px; }

.stashpad-pinned-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  width: 100%;
}
.stashpad-pinned-row:hover {
  background: var(--background-modifier-hover);
}
.stashpad-pinned-toggle {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-faint);
  cursor: pointer;
}
.stashpad-pinned-toggle svg { width: 12px; height: 12px; }
.stashpad-pinned-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--text-muted);
}
.stashpad-pinned-icon svg { width: 14px; height: 14px; }
/* 0.95.2: stronger note-color carryover — a left accent bar + faint wash + a
   tinted label, on top of the icon tint. Shared by the Pinned panel AND the
   folder panel's Pinned list (both use .stashpad-pinned-row). */
.stashpad-pinned-row.has-color {
  border-left: 3px solid var(--stashpad-note-color);
  padding-left: 5px;
  background: color-mix(in srgb, var(--stashpad-note-color) 10%, transparent);
}
.stashpad-pinned-row.has-color:hover {
  background: color-mix(in srgb, var(--stashpad-note-color) 18%, transparent);
}
.stashpad-pinned-row.has-color .stashpad-pinned-icon { color: var(--stashpad-note-color); }
.stashpad-pinned-row.has-color .stashpad-pinned-label {
  color: color-mix(in srgb, var(--stashpad-note-color) 55%, var(--text-normal));
}
.stashpad-pinned-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.stashpad-pinned-folder {
  flex: 0 0 auto;
  font-size: 0.85em;
  color: var(--text-faint);
  margin-left: 4px;
}

/* 0.71.26: group header above each Stashpad's batch of pins. Highlights
   when its folder is the MRU Stashpad's folder. The per-row folder
   badge is redundant once pins are grouped — hide it. */
.stashpad-pinned-group-header {
  display: flex;
  align-items: center;
  padding: 8px 10px 2px 10px;
  font-size: var(--font-ui-smaller);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.stashpad-pinned-group-header.is-active-folder { color: var(--text-accent); }
.stashpad-panel-pinned .stashpad-pinned-folder { display: none; }
/* flat (pin-order) mode in the Pinned panel keeps the folder badge for context */
.stashpad-panel-pinned.is-flat .stashpad-pinned-folder { display: inline; }
/* the folder panel's Pinned list never shows the per-row folder badge */
.stashpad-folderpanel-pins .stashpad-pinned-folder { display: none; }
/* 0.164.4: in the Pinned section, a folder row drops the "open in a tab" dot and
   the pin icon — every folder here IS pinned (so the pin mark is redundant) and the
   open-state dot belongs to the Folders section below. */
.stashpad-folderpanel-pins .stashpad-folderpanel-dot,
.stashpad-folderpanel-pins .stashpad-folderpanel-pinmark { display: none; }
/* 0.95.3: Pinned panel head row — Home shortcut tucked in, view-options button
   to its right filling the rest of the line. */
.stashpad-pinned-headrow { display: flex; align-items: center; gap: 4px; }
.stashpad-pinned-headrow .stashpad-pinned-home { flex: 1 1 auto; width: auto; }
.stashpad-pinned-opts { flex: 0 0 auto; }

/* 0.71.30: Tasks panel — borrows pinned-row layout. Due date sits at
   the trailing edge; overdue gets a warning tint. Completed rows are
   muted + struck-through via the shared is-completed class. */
.stashpad-task-due {
  flex: 0 0 auto;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-left: 6px;
  white-space: nowrap;
}
.stashpad-task-due.is-overdue { color: var(--text-error); }
/* 0.125.0: snooze (reschedule) button at the end of a task row. Subtle until
   hover, like the row's other affordances. */
.stashpad-task-snooze {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-faint);
  cursor: pointer;
}
.stashpad-task-row:hover .stashpad-task-snooze { color: var(--text-muted); }
.stashpad-task-snooze:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-task-snooze .svg-icon { width: 14px; height: 14px; }
/* 0.126.0: "Daily review" launcher at the top of the Tasks panel. */
.stashpad-task-review-bar { display: flex; margin-bottom: 6px; }
.stashpad-task-review-open {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--interactive-normal); color: var(--text-normal);
  cursor: pointer; font-size: var(--font-ui-small);
}
.stashpad-task-review-open:hover { background: var(--interactive-hover); }
.stashpad-task-review-open .svg-icon { width: 14px; height: 14px; }
/* 0.126.0: Daily-review modal — roomier task triage. */
.stashpad-task-review-modal { width: min(680px, 92vw); }
.stashpad-review-summary { color: var(--text-muted); font-size: var(--font-ui-small); margin-bottom: 10px; }
/* 0.126.2: task-triage filter bar (assignment + folder selects) + status chips,
   matching the Tasks panel's options. Shared by the review modal + All-tasks tab. */
.stashpad-triage-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.stashpad-triage-select {
  flex: 1 1 auto; min-width: 120px; max-width: 240px;
  padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--interactive-normal); color: var(--text-normal);
  font-size: var(--font-ui-small);
}
.stashpad-triage-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.stashpad-triage-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--background-modifier-border);
  background: var(--interactive-normal); color: var(--text-muted);
  font-size: var(--font-ui-smaller); cursor: pointer;
}
.stashpad-triage-chip.is-active { background: var(--interactive-accent); color: var(--text-on-accent); border-color: var(--interactive-accent); }
.stashpad-triage-chip-count { opacity: 0.75; font-variant-numeric: tabular-nums; }
/* 0.128.0: trash view-mode toolbar (reuses the triage chip look) + kind badge. */
.stashpad-trash-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.stashpad-trash-kind { display: inline-flex; align-items: center; margin-right: 6px; color: var(--text-muted); flex: 0 0 auto; }
.stashpad-trash-kind.is-enc { color: var(--text-accent); }
.stashpad-trash-kind .svg-icon { width: 13px; height: 13px; }
.stashpad-review-section {
  display: flex; align-items: center; gap: 6px;
  margin: 14px 0 6px; font-weight: 600; color: var(--text-muted);
  font-size: var(--font-ui-smaller); text-transform: uppercase; letter-spacing: 0.03em;
}
.stashpad-review-section.is-overdue { color: var(--text-error); }
.stashpad-review-section-icon { display: inline-flex; }
.stashpad-review-section-icon .svg-icon { width: 14px; height: 14px; }
.stashpad-review-section-count { margin-left: auto; opacity: 0.7; }
.stashpad-review-list { display: flex; flex-direction: column; gap: 4px; }
.stashpad-review-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--background-secondary);
}
.stashpad-review-row.is-completed .stashpad-review-title { text-decoration: line-through; color: var(--text-muted); }
.stashpad-review-check { flex: 0 0 auto; cursor: pointer; color: var(--text-muted); margin-top: 1px; }
.stashpad-review-check .svg-icon { width: 18px; height: 18px; }
.stashpad-review-main { flex: 1 1 auto; min-width: 0; }
.stashpad-review-title { cursor: pointer; font-weight: 500; }
.stashpad-review-title:hover { color: var(--text-accent); }
.stashpad-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; font-size: var(--font-ui-smaller); color: var(--text-muted); }
.stashpad-review-due.is-overdue { color: var(--text-error); }
.stashpad-review-due.is-none { opacity: 0.6; }
.stashpad-review-folder { opacity: 0.8; }
.stashpad-review-assignee { background: var(--background-modifier-border); border-radius: 4px; padding: 0 5px; }
.stashpad-review-author { opacity: 0.75; }
.stashpad-review-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.stashpad-review-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 0.127.1: shorter button so there's less empty space above/below the icon;
     the icon keeps its 15px size. */
  width: 28px; height: 18px; padding: 0;
  border-radius: 6px; border: 1px solid var(--background-modifier-border);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.stashpad-review-btn:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-review-btn .svg-icon { width: 15px; height: 15px; }
/* 0.127.1: searchable author filter input in the task-triage bar. */
.stashpad-triage-authorsearch {
  flex: 1 1 auto; min-width: 120px; max-width: 200px;
  padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary); color: var(--text-normal);
  font-size: var(--font-ui-small);
}
/* 0.131.0: reset buttons (task-filter row + aggregate mode-chip bar) + author × */
.stashpad-triage-reset, .stashpad-agg-reset {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0;
  border-radius: 6px; border: 1px solid var(--background-modifier-border);
  background: var(--interactive-normal); color: var(--text-muted); cursor: pointer;
}
.stashpad-triage-reset:hover, .stashpad-agg-reset:hover { background: var(--interactive-hover); color: var(--text-normal); }
.stashpad-triage-reset .svg-icon, .stashpad-agg-reset .svg-icon { width: 14px; height: 14px; }
.stashpad-triage-authorwrap { position: relative; display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 120px; max-width: 200px; }
.stashpad-triage-authorwrap .stashpad-triage-authorsearch { flex: 1 1 auto; max-width: none; padding-right: 24px; }
.stashpad-triage-authorclear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: none; border-radius: 4px;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.stashpad-triage-authorclear:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-triage-authorclear .svg-icon { width: 12px; height: 12px; }
/* 0.76.3: clickable checkbox in the Tasks panel. */
.stashpad-task-checkbox { cursor: pointer; }
/* 0.78.2: assignment filter dropdown + assignee chips. */
.stashpad-task-assign-bar {
  display: flex; align-items: center; gap: 8px;
  /* 0.78.5: extra right padding so the dropdown doesn't run under the
     panel scrollbar. */
  padding: 2px 12px 8px 2px; margin-bottom: 4px;
}
.stashpad-task-assign-label { font-size: var(--font-ui-smaller); color: var(--text-muted); flex: 0 0 auto; }
/* 0.78.5: don't stretch full-width — cap it so it clears the scrollbar
   and reads as a compact chip. */
.stashpad-task-assign-select { flex: 0 1 auto; max-width: 60%; font-size: var(--font-ui-smaller); }
.stashpad-task-assignees { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; }
.stashpad-task-assignee {
  flex: 0 0 auto;
  font-size: var(--font-ui-smaller);
  /* 0.78.5: initials-only — render as a tidy rounded badge. */
  min-width: 1.6em; text-align: center;
  padding: 1px 5px; border-radius: 999px;
  background: var(--background-modifier-hover);
  color: var(--text-muted);
  white-space: nowrap; cursor: default;
}
.stashpad-task-assignee.is-me {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.stashpad-task-checkbox:hover { color: var(--text-normal); }
.stashpad-tasks-empty {
  padding: 12px 10px;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}

/* 0.76.4: sub-filter button bar at the top of the Tasks panel.
   All / Overdue / Today / Upcoming / Done, each with a count. */
.stashpad-task-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 6px;
}
.stashpad-task-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  /* 0.76.9: rounded-rectangle (matches the panel buttons above),
     not a pill. */
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-task-filter:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-task-filter.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
.stashpad-task-filter-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* 0.76.2: status section headers in the Tasks panel (Overdue / Due
   today / Upcoming / No date / Completed). Icon + label + count. The
   Overdue header is tinted to draw the eye. */
.stashpad-task-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 3px 10px;
  font-size: var(--font-ui-smaller);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.stashpad-task-section-icon { display: inline-flex; align-items: center; }
.stashpad-task-section-icon svg { width: 13px; height: 13px; }
.stashpad-task-section-count {
  margin-left: auto;
  font-weight: 500;
  color: var(--text-muted);
}
.stashpad-task-section-header.is-overdue { color: var(--text-error); }
.stashpad-task-section-header.is-overdue .stashpad-task-section-count { color: var(--text-error); }
/* Folder chip on each task row (tasks span folders in v2). */
.stashpad-task-folder {
  flex: 0 0 auto;
  font-size: 0.8em;
  color: var(--text-faint);
  margin-left: 6px;
  white-space: nowrap;
}

.stashpad-pinned-subrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-pinned-subrow:hover { background: var(--background-modifier-hover); }

.stashpad-pinned-empty {
  padding: 8px;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}

/* 0.68.1 / 0.164.1 — drag-reorder visuals for the folder panel's pinned rows AND
   folder rows. The row being dragged FADES so it doesn't obscure the target, and a
   clear accent drop-line renders on a layer ABOVE the rows (z-index) so you can see
   exactly where the item will land — including in the Folders section. */
.stashpad-pinned-row,
.stashpad-folderpanel-folder-row { position: relative; }
.stashpad-pinned-row.is-dragging,
.stashpad-folderpanel-folder-row.is-dragging { opacity: 0.35; }
.stashpad-pinned-row.drop-before::before,
.stashpad-pinned-row.drop-after::after,
.stashpad-folderpanel-folder-row.drop-before::before,
.stashpad-folderpanel-folder-row.drop-after::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--interactive-accent);
  border-radius: 2px;
  /* 1px ring in the panel bg so the line reads crisply against any row color. */
  box-shadow: 0 0 0 1px var(--background-primary);
  z-index: 10;
  pointer-events: none;
}
.stashpad-pinned-row.drop-before::before,
.stashpad-folderpanel-folder-row.drop-before::before { top: -1px; }
.stashpad-pinned-row.drop-after::after,
.stashpad-folderpanel-folder-row.drop-after::after { bottom: -1px; }

/* 0.68.2 — completed pinned notes get the strikethrough + muted treatment,
   mirroring the in-list completed-row look. */
.stashpad-pinned-row.is-completed .stashpad-pinned-label,
.stashpad-pinned-subrow.is-completed .stashpad-pinned-label {
  text-decoration: line-through;
  color: var(--text-faint);
}
.stashpad-pinned-row.is-completed .stashpad-pinned-icon,
.stashpad-pinned-subrow.is-completed .stashpad-pinned-icon {
  opacity: 0.5;
}

/* 0.68.3 — panel-independent global action buttons (Search etc).
   Full-width row above the per-panel button bar. */
.stashpad-panels-globals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 6px 0 6px;
}
/* 0.71.31: side-by-side row of global buttons (Log + Notifications). */
.stashpad-panels-globals-row {
  display: flex;
  gap: 4px;
}
.stashpad-panels-globals-row .stashpad-panels-global-btn { flex: 1 1 0; }

.stashpad-panels-global-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
  cursor: pointer;
  font-size: var(--font-ui-small);
  text-align: left;
}
.stashpad-panels-global-btn:hover {
  background: var(--background-modifier-hover);
}
.stashpad-panels-global-btn-icon { display: inline-flex; align-items: center; }
.stashpad-panels-global-btn-icon svg { width: 14px; height: 14px; }

/* 0.68.4 — icon-only Search button in the header time-filter bar.
   Sits between the folder switcher and the tags dropdown. */
.stashpad-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.stashpad-search-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-search-btn svg { width: 14px; height: 14px; }

/* 0.69.2 — wrap + trailing clear-X for When-builder inputs. */
.stashpad-when-input-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.stashpad-when-input-wrap .stashpad-when-input {
  flex: 1 1 auto;
  width: 100%;
  padding-right: 28px; /* room for the X */
}
.stashpad-when-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.stashpad-when-clear:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

/* 0.69.3 — breadcrumb line below the parent blurb. Shows folder ›
   ancestor chain, both for local and cross-folder results. */
.stashpad-suggest-breadcrumb {
  font-size: 0.8em;
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 0.69.3 — highlight free-text query tokens inside titles + previews. */
.stashpad-suggest-match {
  background: var(--text-highlight-bg, rgba(255, 208, 0, 0.35));
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* 0.69.4 — sub-tab row + Date/Time inputs inside the When builder. */
.stashpad-when-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.stashpad-when-subtab {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-when-subtab:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-when-subtab.is-active {
  background: var(--background-modifier-active-hover);
  color: var(--text-normal);
  border-color: var(--text-accent);
}
.stashpad-when-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.stashpad-when-date-label {
  flex: 0 0 auto;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  min-width: 36px;
}
.stashpad-when-date,
.stashpad-when-time {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  color-scheme: light dark; /* keeps the picker chrome readable in both themes */
}

/* 0.69.5 — right rail wraps timestamp + folder badge into a column,
   right-aligned. Replaces the inline " · folder" badge previously
   spliced into the title row. */
.stashpad-suggest-rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.stashpad-suggest-folder-badge {
  font-size: 0.78em;
  color: var(--text-faint);
  white-space: nowrap;
}

/* 0.69.5 / 0.69.7 — calendar + clock icon buttons sit to the LEFT of
   the When-builder text input as flex siblings (was overlapping inside
   the input). Each button hosts its hidden native picker as a child so
   showPicker() anchors correctly. */
.stashpad-when-input-wrap.has-icons {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stashpad-when-input-wrap.has-icons .stashpad-when-input {
  flex: 1 1 auto;
  width: 100%;
  padding-right: 28px; /* room for clear-X only */
}
.stashpad-when-icon-slot {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}
.stashpad-when-icon {
  /* 0.69.11: explicit 28x28 + display:flex (not inline-flex). Earlier
     width:100% on inline-flex was inconsistent and the calendar SVG
     was rendering at zero/inherited size in some layouts → invisible. */
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background: var(--background-primary);
  color: var(--text-muted);
  cursor: pointer;
}
.stashpad-when-icon:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.stashpad-when-icon svg { width: 16px; height: 16px; flex: 0 0 16px; }
/* 0.69.11: extra space between the icon row and the text input. */
.stashpad-when-input-wrap.has-icons .stashpad-when-input { margin-left: 6px; }

/* 0.69.5 (b) / 0.69.7 — hidden native date/time inputs live INSIDE
   their corresponding icon button, absolutely positioned to fill it.
   showPicker() anchors to the input's position; clicks pass through
   to the button via pointer-events:none. opacity:0 keeps them
   invisible without de-laying-them-out. */
.stashpad-when-native {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* 0.69.9 — small popover anchored under a When-builder icon slot.
   Used by the Day picker (and the Timeframe picker in 0.69.10). */
.stashpad-when-icon-slot { position: relative; }
.stashpad-when-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  padding: 6px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}
.stashpad-when-pop-row {
  display: flex;
  gap: 4px;
}
.stashpad-when-pop-chip {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  color: var(--text-normal);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-when-pop-chip:hover {
  background: var(--background-modifier-hover);
}
.stashpad-when-pop-chip.is-today {
  border-color: var(--interactive-accent);
  color: var(--interactive-accent);
  font-weight: 600;
}
.stashpad-when-pop-days .stashpad-when-pop-chip {
  width: 32px;
  text-align: center;
  padding: 4px 0;
}

/* 0.69.10 — Timeframe popover stepper: "Last [N] [unit]" + Insert. */
.stashpad-when-pop-builder {
  align-items: center;
  margin-top: 2px;
}
.stashpad-when-pop-label {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.stashpad-when-pop-number {
  width: 56px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
}
.stashpad-when-pop-unit {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
}
.stashpad-when-pop-go {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
.stashpad-when-pop-go:hover { filter: brightness(1.1); background: var(--interactive-accent); }

/* 0.69.11 — custom time-picker popover (replaces native time input). */
.stashpad-when-pop-time {
  padding: 8px;
  gap: 8px;
  min-width: 220px;
}
.stashpad-when-time-display {
  display: flex;
  align-items: center;
  gap: 4px;
}
.stashpad-when-time-field {
  width: 38px;
  padding: 6px 4px;
  text-align: center;
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
}
/* 0.99.18: explicit selection + focus highlight so the auto-selected HH/MM text
   reads clearly in BOTH the search "when" popover AND the due-date modal — the
   modal context was swallowing the default text-selection highlight. Same class
   in both pickers, so this fixes both. */
.stashpad-when-time-field::selection {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.stashpad-when-time-field:focus {
  outline: none;
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px var(--interactive-accent);
}
.stashpad-when-time-colon { font-size: 1.15em; color: var(--text-muted); }
.stashpad-when-time-period {
  display: inline-flex;
  margin-left: 8px;
  gap: 2px;
}
.stashpad-when-time-ampm {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-when-time-ampm.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
.stashpad-when-time-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.stashpad-when-time-padbtn {
  padding: 8px 0;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  color: var(--text-normal);
  cursor: pointer;
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stashpad-when-time-padbtn:hover { background: var(--background-modifier-hover); }
.stashpad-when-time-padbtn.is-go {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
.stashpad-when-time-padbtn.is-go:hover { filter: brightness(1.1); background: var(--interactive-accent); }
.stashpad-when-time-padbtn svg { width: 14px; height: 14px; }

/* 0.69.15 — AM/PM buttons greyed out when hours > 12 (24h mode). */
.stashpad-when-time-ampm.is-disabled,
.stashpad-when-time-ampm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--background-primary);
  color: var(--text-muted);
  border-color: var(--background-modifier-border);
}

/* 0.69.28 — per-cluster body preview snippet shown under the title.
   Distinct from .stashpad-suggest-preview (parent-blurb line) because
   the snippet preserves newlines so multi-line context shows. */
.stashpad-suggest-snippet {
  white-space: pre-wrap;
  font-size: 0.85em;
  color: var(--text-muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 0.70.0 — Shared panel: filter chips row + author byline beneath
   each row. Re-uses .stashpad-pinned-row styling for the rows. */
.stashpad-shared-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.stashpad-shared-chip {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.stashpad-shared-chip:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-shared-chip.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}
.stashpad-shared-author-select {
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
}
.stashpad-shared-row {
  flex-wrap: wrap;
}
.stashpad-shared-meta {
  flex: 1 0 100%;
  font-size: 0.78em;
  color: var(--text-faint);
  padding-left: 28px; /* align under the title */
  margin-top: -2px;
}
.stashpad-shared-empty {
  padding: 12px;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
  text-align: center;
}

/* ============================================================
   Folder panel (0.86.0) — left-sidebar folder picker:
   pinned notes (top) + Stashpad folders (bottom), each scrollable.
   ============================================================ */
.stashpad-folderpanel-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
}
.stashpad-folderpanel-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 50%;            /* split the panel in half */
}
/* draggable divider between Pinned and Folders */
.stashpad-folderpanel-divider {
  flex: 0 0 auto;
  height: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  border-top: 1px solid var(--background-modifier-border);
  touch-action: none;            /* let pointer drag work on touch */
}
.stashpad-folderpanel-divider:hover { background: var(--background-modifier-hover); }
.stashpad-folderpanel-divider-grip {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--background-modifier-border);
}
.stashpad-folderpanel-divider:hover .stashpad-folderpanel-divider-grip { background: var(--text-faint); }
body.stashpad-folderpanel-resizing { cursor: row-resize; user-select: none; }
.is-mobile .stashpad-folderpanel-divider { height: 16px; }   /* easier to grab */
.stashpad-folderpanel-heading {
  flex: 0 0 auto;
  padding: 8px 10px 4px;
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
/* 0.95.1: Pinned heading carries a view-options button on the right */
.stashpad-folderpanel-heading-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stashpad-folderpanel-heading-title { flex: 1 1 auto; }
.stashpad-folderpanel-heading-row .stashpad-folderpanel-iconbtn { height: 20px; width: 20px; }
/* 0.164.5–0.164.6: the three section-header buttons (Pinned view options, New
   folder, Open trash) framed with a border. 0.169.6: flipped — the GLYPH now carries
   the accent color and the border is a neutral grey, so the accent reads as the icon
   tint rather than an outline. Scoped to the heading row so note-row icon buttons are
   untouched. */
.stashpad-folderpanel-heading-row .stashpad-folderpanel-iconbtn {
  border: 1px solid var(--background-modifier-border);
  color: var(--interactive-accent);
}
.stashpad-folderpanel-heading-row .stashpad-folderpanel-iconbtn:hover {
  color: var(--interactive-accent);
  border-color: var(--text-muted);
  background: var(--background-modifier-hover);
}
/* 0.98.37: the Folders heading doubles as the folder-switcher button. */
.stashpad-folderpanel-heading-switch { cursor: pointer; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; }
.stashpad-folderpanel-heading-switch:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
/* 0.95.1: per-folder icon in the Folders list */
.stashpad-folderpanel-folder-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.stashpad-folderpanel-folder-icon svg { width: 15px; height: 15px; }
.stashpad-folderpanel-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px 8px;
}
.stashpad-folderpanel-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 2px 8px;
  min-height: 0;
  line-height: 1.3;
  border-radius: 5px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}
.stashpad-folderpanel-row:hover { background: var(--background-modifier-hover); }
.stashpad-folderpanel-row-icon { display: inline-flex; flex: 0 0 auto; color: var(--text-muted); }
.stashpad-folderpanel-row-icon svg { width: 15px; height: 15px; }
.stashpad-folderpanel-row-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stashpad-folderpanel-row-sub {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* open indicator dot */
.stashpad-folderpanel-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--background-modifier-border);
}
.stashpad-folderpanel-folder-row.is-open .stashpad-folderpanel-dot {
  background: var(--interactive-accent);
  border-color: var(--interactive-accent);
}
.stashpad-folderpanel-folder-row.is-open .stashpad-folderpanel-row-label { font-weight: var(--font-medium); }
/* per-row action buttons (reveal / open in new tab) */
.stashpad-folderpanel-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 80ms ease;
}
.stashpad-folderpanel-folder-row:hover .stashpad-folderpanel-actions { opacity: 1; }
.stashpad-folderpanel-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  height: 22px;
  width: 22px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
}
.stashpad-folderpanel-iconbtn:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.stashpad-folderpanel-iconbtn svg { width: 15px; height: 15px; }
.stashpad-folderpanel-empty {
  padding: 8px 10px;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}
/* 0.95.1: pin / downrank placement marks */
.stashpad-folderpanel-pinmark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--text-accent);
}
.stashpad-folderpanel-pinmark svg { width: 12px; height: 12px; }
/* 0.105.1: folder-row chevron + inline list of the folder's Home list-pinned
   notes (revealed on click). */
.stashpad-folderpanel-pinreveal {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-muted);
}
.stashpad-folderpanel-pinreveal:hover { color: var(--text-normal); }
.stashpad-folderpanel-pinlist {
  display: flex;
  flex-direction: column;
  margin: 0 0 4px 28px;
}
.stashpad-folderpanel-pinrow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-normal);
}
.stashpad-folderpanel-pinrow:hover { background: var(--background-modifier-hover); }
.stashpad-folderpanel-pinrow-icon { display: inline-flex; flex: 0 0 auto; color: var(--text-accent); }
.stashpad-folderpanel-pinrow-icon svg { width: 13px; height: 13px; }
.stashpad-folderpanel-pinrow-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-ui-smaller);
}
/* 0.98.25: archive-folder badge (auto-encrypt incoming). */
.stashpad-folderpanel-archive-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  color: var(--text-accent); margin-left: 2px;
}
.stashpad-folderpanel-archive-badge svg { width: 12px; height: 12px; }
.stashpad-folderpanel-folder-row.is-downranked { opacity: 0.55; }
.stashpad-folderpanel-folder-row.is-downranked:hover { opacity: 0.85; }

/* 0.95.1: collapsible "Hidden (N)" group at the bottom of the Folders list */
.stashpad-folderpanel-hidden { margin-top: 4px; border-top: 1px solid var(--background-modifier-border); }
.stashpad-folderpanel-hidden-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}
.stashpad-folderpanel-hidden-header:hover { color: var(--text-normal); }
.stashpad-folderpanel-hidden-caret { display: inline-flex; align-items: center; }
.stashpad-folderpanel-hidden-caret svg { width: 14px; height: 14px; }
.stashpad-folderpanel-hidden-title { flex: 1 1 auto; }
.stashpad-folderpanel-hidden-row { opacity: 0.75; }
.stashpad-folderpanel-hidden-row .stashpad-folderpanel-iconbtn { opacity: 1; }

/* rename modal */
.stashpad-folderpanel-rename-input { width: 100%; margin-bottom: 12px; }
.stashpad-folderpanel-rename-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* mobile: a touch more height for tap targets, always-visible row actions */
.is-mobile .stashpad-folderpanel-row { padding: 5px 10px; }
.is-mobile .stashpad-folderpanel-actions { opacity: 1; }
.is-mobile .stashpad-folderpanel-iconbtn { height: 28px; width: 28px; }

/* 0.88.1: by-author select inside the View popover */
.stashpad-view-author-select { margin-left: 8px; max-width: 160px; font-size: var(--font-ui-smaller); }

/* Composer split-on-newlines batch progress (createNotesBatch). */
.stashpad-split-progress-title { font-weight: 600; margin-bottom: 6px; }
.stashpad-split-progress-bar { height: 6px; border-radius: 3px; background: var(--background-modifier-border); overflow: hidden; }
.stashpad-split-progress-fill { height: 100%; width: 0%; background: var(--interactive-accent); transition: width 0.15s ease; }
.stashpad-split-progress-label { margin-top: 4px; font-size: var(--font-ui-smaller); color: var(--text-muted); }

/* Split modal: quick multi-split presets. */
.stashpad-split-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.stashpad-split-quick-label { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-right: 2px; }
.stashpad-split-quick-btn { font-size: var(--font-ui-smaller); padding: 2px 8px; }
.stashpad-split-quick-btn:disabled { opacity: 0.5; cursor: default; }

/* --- Sheet version tabs (a row's alternate versions) --- */
.stashpad-version-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--background-modifier-border);
}
.stashpad-version-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 18ch;
  padding: 1px 8px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  background: var(--background-secondary);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  cursor: pointer;
  user-select: none;
}
.stashpad-version-tab:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.stashpad-version-tab.is-active {
  color: var(--text-normal);
  background: var(--background-primary);
  border-color: var(--interactive-accent);
  font-weight: var(--font-semibold);
  cursor: default;
}
.stashpad-version-tab.is-final { border-color: var(--text-accent); }
.stashpad-version-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stashpad-version-star { color: var(--text-accent); font-size: 0.85em; line-height: 1; }
.stashpad-version-add {
  font-size: var(--font-ui-smaller);
  line-height: 1;
  padding: 1px 7px;
  height: auto;
  box-shadow: none;
  color: var(--text-muted);
}
.stashpad-version-add:hover { color: var(--text-normal); }
.stashpad-version-fork { display: inline-flex; align-items: center; }
.stashpad-version-fork .svg-icon { width: 14px; height: 14px; }

/* Encryption settings: merged archive+trash caution at the top of the per-folder section. */
/* 0.118.6: the old `--text-warning` on `--background-modifier-error-hover` was
   orange-on-solid-red — unreadable in both themes. Use a subtle red TINT with
   normal (theme-adaptive) text + a red accent border, so it reads as a warning
   and stays legible light or dark. */
.stashpad-enc-warning {
  color: var(--text-normal);
  background: rgba(var(--color-red-rgb, 224, 49, 49), 0.12);
  border-left: 3px solid var(--color-red, #e03131);
  /* 0.121.5: a touch more vertical padding + more bottom breathing room so the
     advice banner doesn't feel cramped. */
  padding: 11px 12px;
  border-radius: 4px;
  /* 0.134.3: now a single merged multi-paragraph callout at the top of the
     Vault Encryption section (was three separate warnings) — inset 14px to
     line up with the section's setting rows. */
  margin: 4px 14px 18px;
  /* 0.194.0: bumped 13px -> 14px and the rule 3px -> 4px. A user lost an encryption
     key to a keychain wipe; this callout is the last thing standing between someone
     and permanent data loss, so it gets read-me-first weight. */
  font-size: 14px;
  line-height: 1.55;
}
.stashpad-enc-warning p { margin: 0; }
.stashpad-enc-warning p + p { margin-top: 9px; }
/* The single most important sentence in the plugin — larger and bolder than the
   paragraphs beneath it. */
.stashpad-enc-warning .stashpad-enc-lead {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
.stashpad-enc-warning strong { color: var(--text-normal); font-weight: 700; }
/* Liability line: quieter than the warnings, but unmissable. */
.stashpad-enc-warning .stashpad-enc-liability {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--color-red-rgb, 224, 49, 49), 0.35);
  font-size: 13px;
  font-style: italic;
}
/* 0.137.4: collapsible "how encryption works" concepts block — one toggle-free
   reference so the individual setting rows can stay one-liners. Collapsed by
   default (details), neutral (not a warning). */
.stashpad-enc-info {
  margin: 0 14px 14px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.stashpad-enc-info > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-weight: 600;
  color: var(--text-normal);
  list-style-position: inside;
}
.stashpad-enc-info[open] > summary { border-bottom: 1px solid var(--background-modifier-border); }
.stashpad-enc-info-item { margin: 0; padding: 9px 12px; color: var(--text-muted); }
.stashpad-enc-info-item + .stashpad-enc-info-item { border-top: 1px solid var(--background-modifier-border); }
.stashpad-enc-info-item strong { color: var(--text-normal); }
/* 0.134.3: Obsidian's mod-warning buttons are solid bright red with white text —
   glaring, and the white text reads poorly on it. Within Stashpad's settings
   sections (Remove encryption, Rotate key, Turn off shared password, …) use a
   quieter danger style: red tint + red text + red border, matching the
   .stashpad-enc-warning callout language. Hover deepens the tint. */
.stashpad-settings-section button.mod-warning {
  background: rgba(var(--color-red-rgb, 224, 49, 49), 0.14);
  color: var(--color-red, #e03131);
  border: 1px solid rgba(var(--color-red-rgb, 224, 49, 49), 0.45);
  text-shadow: none;
}
.stashpad-settings-section button.mod-warning:hover {
  background: rgba(var(--color-red-rgb, 224, 49, 49), 0.25);
  color: var(--color-red, #e03131);
}
/* 0.136.0: loading state for slow-running buttons (Remove encryption's state
   check on slow drives). Dims the button and sweeps a loading bar across it;
   clicks are swallowed in JS while the class is on. */
button.stashpad-btn-loading {
  position: relative;
  opacity: 0.55;
  pointer-events: none;
  overflow: hidden;
}
button.stashpad-btn-loading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 40%;
  background: currentColor;
  animation: stashpad-btn-loading-sweep 1.1s ease-in-out infinite;
}
@keyframes stashpad-btn-loading-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* 0.138.0: re-encrypt sweep — review modal rows + the watch view's Removed
   section. Reuses the trash row classes for the view itself. */
.stashpad-reenc-list { max-height: 50vh; overflow-y: auto; margin: 8px 0 12px; }
.stashpad-reenc-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 6px; border-radius: 6px; cursor: pointer;
}
.stashpad-reenc-row:hover { background: var(--background-modifier-hover); }
.stashpad-reenc-row input[type="checkbox"] { margin-top: 3px; }
.stashpad-reenc-label { font-weight: 500; }
.stashpad-reenc-detail { font-size: var(--font-ui-smaller); color: var(--text-muted); }
.stashpad-watch-removed { margin-top: 16px; }
.stashpad-watch-removed > summary {
  cursor: pointer; font-size: var(--font-ui-smaller); color: var(--text-muted);
  padding: 4px 0;
}
/* 0.139.0: per-note peek override input in the "Previously encrypted" view. */
.stashpad-watch-peek { width: 56px; text-align: center; }
/* 0.140.0: recurring/reminder fields in the due-date picker. */
.stashpad-due-recur { margin-top: 10px; border-top: 1px solid var(--background-modifier-border); padding-top: 8px; }
.stashpad-due-recur > summary { cursor: pointer; font-size: var(--font-ui-smaller); color: var(--text-muted); }
.stashpad-due-recur-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.stashpad-due-recur-row label { flex: 0 0 130px; font-size: var(--font-ui-smaller); color: var(--text-muted); }
.stashpad-due-recur-row input { flex: 1; }

/* ---------------------------------------------------------------------------
   0.192.0 — paste-text importer modal (TextImportModal)
   --------------------------------------------------------------------------- */
.stashpad-import-input {
  width: 100%;
  margin: 8px 0 4px;
  padding: 8px 10px;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  resize: vertical;
}
.stashpad-import-count { margin-top: 10px; }
.stashpad-import-preview {
  max-height: 240px;
  overflow-y: auto;
  margin: 6px 0 4px;
  padding: 6px 0;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary-alt);
  font-size: var(--font-ui-smaller);
}
.stashpad-import-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stashpad-import-check { color: var(--text-muted); flex: 0 0 auto; }
.stashpad-import-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--background-modifier-border);
}
.stashpad-import-text { overflow: hidden; text-overflow: ellipsis; }
.stashpad-import-more { color: var(--text-faint); flex: 0 0 auto; }

/* 0.193.0 — importer as a pop-out tab: give the leaf the same padding a modal has. */
.stashpad-import-view {
  padding: 12px 16px 16px;
  overflow-y: auto;
}
.stashpad-import-view .stashpad-import-preview { max-height: none; }
.stashpad-import-popicon { display: inline-flex; margin-left: 4px; vertical-align: -2px; }
.stashpad-import-popicon svg { width: 14px; height: 14px; }

/* 0.194.0 — the keychain opt-in note carries a real data-loss warning now, so it
   gets warning colour instead of reading as neutral fine print. */
.stashpad-keychain-note {
  color: var(--text-normal);
  border-left: 3px solid var(--color-red, #e03131);
  background: rgba(var(--color-red-rgb, 224, 49, 49), 0.10);
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 6px;
  line-height: 1.5;
}

/* 0.197.0 — recurrence mode picker help text under the dropdown. */
.stashpad-due-recur-help {
  margin: 2px 0 6px;
  padding-left: 2px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: 1.4;
}

/* 0.197.0 — a MISSED recurring occurrence. It's marked completed (so it drops out
   of the active list) but it wasn't done, so it must not read as an accomplishment:
   warning-tinted strike instead of the neutral completed grey, plus a marker. */
.stashpad-note.is-missed .stashpad-note-body,
.stashpad-note.is-missed .stashpad-note-time {
  text-decoration-color: var(--color-orange, #e08a47);
  color: var(--text-muted);
}
/* Marker sits in the row's own padding, next to the completed checkbox. */
.stashpad-note.is-missed .stashpad-note-body::after {
  content: " ✗ missed";
  color: var(--color-orange, #e08a47);
  font-size: var(--font-ui-smaller);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* 0.198.0 — recurrence anchor toggle (due-date vs completion) in the due picker. */
.stashpad-anchor-seg { display: inline-flex; gap: 0; }
.stashpad-anchor-seg button {
  padding: 3px 10px;
  font-size: var(--font-ui-smaller);
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-muted);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
.stashpad-anchor-seg button:first-child { border-radius: 4px 0 0 4px; }
.stashpad-anchor-seg button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.stashpad-anchor-seg button.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}