html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#notes-in-list-root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--joplin-color);
  background-color: var(--joplin-background-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
  user-select: none;
  overflow: hidden;
}

/* Toolbar */
.toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--joplin-divider-color, #ddd);
  align-items: center;
  flex-shrink: 0;
}

.toolbar button {
  background: var(--joplin-background-color3, #f0f0f0);
  border: 1px solid var(--joplin-divider-color, #ccc);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--joplin-color);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}

.toolbar button:hover {
  background: var(--joplin-background-color-hover3, #e0e0e0);
}

.toolbar button:active {
  opacity: 0.7;
}

#btn-sort {
  min-width: 76px;
  text-align: center;
}

/* Search bar */
.search-bar {
  padding: 4px 8px;
  border-bottom: 1px solid var(--joplin-divider-color, #ddd);
  flex-shrink: 0;
  position: relative; /* anchors the ✕ clear button (#37) */
}

/* ✕ clear button: only visible while the box has text (#37) */
#search-clear {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1;
  color: var(--joplin-color-faded, #888);
  cursor: pointer;
  border-radius: 3px;
}
#search-clear:hover {
  color: var(--joplin-color, #ccc);
  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12));
}
.search-bar.has-text #search-clear { display: block; }
/* keep typed text clear of the button */
.search-bar.has-text #search-input { padding-right: 26px; }

#search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--joplin-divider-color, #ccc);
  border-radius: 4px;
  background: var(--joplin-background-color, #fff);
  color: var(--joplin-color);
  font-size: 12px;
  outline: none;
}

#search-input:focus {
  border-color: var(--joplin-url-color, #4a9cf5);
  box-shadow: 0 0 0 2px var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
}

/* Tree container */
#tree-container {
  flex: 1;
  overflow-y: scroll;
  padding: 4px 0;
}
/* Stacked headers (#31): parked headers sit at the scrollport's inner edges,
 * but content scrolls through the container's top/bottom padding and peeks
 * out beyond them - drop both paddings while stacking is on. */
[data-stack-headers="1"] #tree-container {
  padding-top: 0;
  padding-bottom: 0;
}
/* Stacked headers sit flush against each other; two things leak scrolling
 * content through the seam: the semi-transparent divider border, and the
 * 3px rounded bottom corners. Make the divider an OPAQUE mix of the same
 * shade, and square the corners, while stacking is on. */
[data-stack-headers="1"] .pinned-section-header,
[data-stack-headers="1"] .smart-section-header,
[data-stack-headers="1"] .tree-section-header,
[data-stack-headers="1"] .tags-section-header,
[data-stack-headers="1"] .trash-section-header {
  border-top-color: color-mix(in srgb, var(--joplin-color, #888) 22%, var(--joplin-background-color, #1e1e1e));
  border-radius: 0;
  /* Uniform height: stacking offsets are cumulative sums of header heights,
   * so ANY per-header variation (e.g. the pinned header swapping open/closed
   * icons of slightly different metrics) opens a seam between parked headers.
   * Pin the box height and clip overflow - offsets become exact. */
  box-sizing: border-box;
  height: 31px;
  min-height: 31px;
  overflow: hidden;
  /* Zero the section spacing: in flow, headers carried a --sec-gap top
   * margin that vanishes once parked, so spacing visibly "compressed"
   * during the transition and read as the header changing height. With
   * identical spacing in both states nothing shifts while scrolling.
   * A crisp 1px bottom hairline makes rows read as sliding UNDER. */
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--joplin-color, #888) 14%, var(--joplin-background-color, #1e1e1e));
}

#tree-container::-webkit-scrollbar {
  width: 8px;
}

#tree-container::-webkit-scrollbar-track {
  background: transparent;
}

#tree-container::-webkit-scrollbar-thumb {
  background: var(--joplin-color-faded, #888);
  border-radius: 4px;
}

#tree-container::-webkit-scrollbar-thumb:hover {
  background: var(--joplin-color, #555);
}

/* Tree items */
.tree-item {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  cursor: pointer;
  gap: 5px;
  border-radius: 3px;
  margin: 1px 4px;
  min-height: 24px;
}

.tree-item:hover {
  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
}

.tree-item.note.selected {
  background: var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
}

/* Toggle arrow */
.toggle {
  width: 14px;
  text-align: center;
  font-size: 9px;
  flex-shrink: 0;
  color: var(--joplin-color-faded, #888);
  transition: transform 0.15s;
}

/* Icons */
.icon {
  flex-shrink: 0;
  font-size: 14px;
  width: 18px;
  text-align: center;
}

.custom-icon {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin: 0 auto;
}

/* Label */
.label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Note count badge */
.count {
  color: var(--joplin-color-faded, #888);
  font-size: 10px;
  flex-shrink: 0;
  background: var(--joplin-background-color3, rgba(100,100,100,0.1));
  border-radius: 8px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
}

/* Collapsed children */
.children.collapsed {
  display: none;
}

/* Open/closed icon variants: both are in the DOM, the .collapsed class on
   the folder row / pinned header picks which one shows. This lets the
   webview toggle folders without a backend re-render. */
.tree-item.folder.collapsed .icon-when-open { display: none; }
.tree-item.folder:not(.collapsed) .icon-when-collapsed { display: none; }
.pinned-section-header.collapsed .icon-when-open { display: none; }
.pinned-section-header:not(.collapsed) .icon-when-collapsed { display: none; }

/* Folder styling */
.folder .label {
  font-weight: 600;
}

/* Note styling */
.note .label {
  font-weight: normal;
}

.note .icon {
  font-size: 12px;
}

/* Bottom bar (sync) */
.bottom-bar {
  display: flex;
  padding: 6px 8px;
  border-top: 1px solid var(--joplin-divider-color, #ddd);
  flex-shrink: 0;
}

.bottom-bar button {
  flex: 1;
  background: var(--joplin-background-color3, #f0f0f0);
  border: 1px solid var(--joplin-divider-color, #ccc);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--joplin-color);
  font-size: 12px;
}

.bottom-bar button:hover {
  background: var(--joplin-background-color-hover3, #e0e0e0);
}

.bottom-bar button:active {
  opacity: 0.7;
}

.bottom-bar button:disabled,
.bottom-bar button.syncing {
  opacity: 0.5;
  cursor: not-allowed;
}

.bottom-bar button.sync-done {
  color: #27ae60;
  opacity: 1;
  cursor: default;
}

.bottom-bar button.sync-error {
  color: #e74c3c;
  opacity: 1;
  cursor: default;
}

/* Context menu */
.context-menu {
  position: fixed;
  background: var(--joplin-background-color, #fff);
  border: 1px solid var(--joplin-divider-color, #ccc);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  min-width: 160px;
  z-index: 9999;
  font-size: 12px;
}

.ctx-item {
  padding: 6px 14px;
  cursor: pointer;
  color: var(--joplin-color);
}

/* Fixed-width icon slot so emoji of different widths don't skew the labels */
.ctx-icon {
  display: inline-block;
  width: 20px;
  text-align: center;
  margin-right: 5px;
}

.ctx-item:hover {
  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
}

.ctx-danger {
  color: #e74c3c;
}

.ctx-danger:hover {
  background: rgba(231, 76, 60, 0.1);
}

/* Drill-in submenu (the narrow panel webview clips flyouts) */
/* Drill row is flex so the arrow can sit vertically centered at the right. */
.ctx-drill {
  display: flex;
  align-items: center;
}
/* True geometric triangle: a zero-size box whose left border forms a solid
   right-pointing arrow. No font glyph involved, so flex centering is exact —
   the glyph-baseline guesswork of ▶/▸ goes away entirely. */
.ctx-sub-arrow {
  margin-left: auto;
  width: 0;
  height: 0;
  font-size: 0;      /* hide the ▶ text content itself */
  color: transparent;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--joplin-color, #ccc);
  opacity: 0.7;
  box-sizing: content-box;
}
.ctx-back {
  color: var(--joplin-color-faded, #888);
  font-weight: 600;
}

.ctx-sep {
  height: 1px;
  background: var(--joplin-divider-color, #ddd);
  margin: 4px 0;
}

/* Hover preview tooltip */
#note-preview {
  position: fixed;
  max-width: 260px;
  z-index: 9998;
  background: var(--joplin-background-color, #fff);
  border: 1px solid var(--joplin-divider-color, #ccc);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  font-size: 12px;
  pointer-events: none;
}
.note-preview-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.note-preview-meta {
  color: var(--joplin-color-faded, #888);
  font-size: 10px;
  margin-bottom: 5px;
}
.note-preview-body {
  color: var(--joplin-color, #ddd);
  opacity: 0.85;
  line-height: 1.45;
  word-break: break-word;
}

/* ---- unified section chrome ----
 * One soft line ABOVE each section header plus breathing room; bodies draw
 * no borders at all, so no state combination can double up lines. */
.pinned-section-header,
.smart-section-header,
.trash-section-header,
.tree-section-header,
.tags-section-header {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 5px;
  /* --sec-gap: sectionSpacing setting, set inline on the root (#9) */
  margin: var(--sec-gap, 5px) 4px 1px;
  min-height: 24px;
  padding: 3px 8px;
  border-top: 1px solid rgba(127, 127, 127, 0.22);
  border-radius: 0 0 3px 3px;
  cursor: pointer;
  user-select: none;
  color: var(--joplin-color-faded, #888);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  /* Section pinning (#31): headers stick to the top of the scroll container so
   * Pinned / Smart / Tags / Trash stay reachable without scrolling the whole
   * tree. Needs an opaque background - rows would otherwise show through - and
   * a z-index above tree rows but below the drop-zone hints (z-index 10).
   * The negative top cancels --sec-gap so the header parks flush, not gapped. */
  position: sticky;
  top: calc(var(--sec-gap, 5px) * -1);
  z-index: 6;
  background: var(--joplin-background-color, #1e1e1e);
}
/* Arrow position mode (toggleArrowPosition setting, root data-arrow-pos).
 * "right": chevrons sit right after the text everywhere - section headers,
 * section rows AND notebook tree folders - with counts on the right edge.
 * "left": no overrides, everything keeps the classic leading arrow. */
[data-arrow-pos="right"] .pinned-section-header .label,
[data-arrow-pos="right"] .smart-section-header .label,
[data-arrow-pos="right"] .trash-section-header .label,
[data-arrow-pos="right"] .tree-section-header .label,
[data-arrow-pos="right"] .tags-section-header .label,
[data-arrow-pos="right"] .tree-item.folder .label {
  flex: 0 1 auto;
}
[data-arrow-pos="right"] .pinned-section-header .toggle,
[data-arrow-pos="right"] .smart-section-header .toggle,
[data-arrow-pos="right"] .trash-section-header .toggle,
[data-arrow-pos="right"] .tree-section-header .toggle,
[data-arrow-pos="right"] .tags-section-header .toggle,
[data-arrow-pos="right"] .tree-item.folder .toggle {
  order: 3;
  width: auto;
  margin-left: 2px;
  font-size: 8px;
  opacity: 0.75;
}
[data-arrow-pos="right"] .pinned-section-header .count,
[data-arrow-pos="right"] .smart-section-header .count,
[data-arrow-pos="right"] .trash-section-header .count,
[data-arrow-pos="right"] .tree-section-header .count,
[data-arrow-pos="right"] .tags-section-header .count,
[data-arrow-pos="right"] .tree-item.folder .count {
  order: 4; /* after the chevron (order 3): text › ......... count */
  margin-left: auto;
}
.pinned-section-header .icon,
.smart-section-header .icon,
.trash-section-header .icon,
.tree-section-header .icon,
.tags-section-header .icon {
  font-size: 12px;
  opacity: 0.85;
}
.pinned-section-header:hover,
.smart-section-header:hover,
.trash-section-header:hover,
.tree-section-header:hover,
.tags-section-header:hover {
  /* Layered over the opaque base: the hover tint is translucent, and these
   * headers are sticky, so tree rows would otherwise scroll through them. */
  background:
    linear-gradient(var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12)),
                    var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12))),
    var(--joplin-background-color, #1e1e1e);
}
/* The notebooks section now has a real header (#31), which draws the
 * section-opening line and the top gap - the wrapper must not repeat them. */
#main-tree {
  margin: 0 4px 1px;
  padding-top: 2px;
}
#main-tree.collapsed { display: none; }

/* Nested tags (#28): virtual rows are prefixes that aren't real tags - they
 * group and nothing else, so they read one notch quieter than real tags. */
.tag-folder.tag-virtual > .label {
  color: var(--joplin-color-faded, #888);
  font-weight: 500;
}
/* Subtree total in "own (subtree)" badges - de-emphasised so the tag's own
 * count stays the primary number. */
.count .count-sub {
  opacity: 0.65;
  font-size: 9px;
}
/* #main-tree already carries the 4px side margins; zero the rows' own so
 * tree counts land on the same right edge as section header counts
 * (they were 4px further left - measured, not eyeballed). */
#main-tree .tree-item {
  margin-left: 0;
  margin-right: 0;
}

/* Expand animation: children fade/slide in when the USER toggles a section
 * or folder (JS adds .anim-expand only on interactive expands, so panel
 * re-renders don't flash). */
@keyframes sectionExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.anim-expand { animation: sectionExpand 0.16s ease-out; }

/* Whichever section comes first sits right under the search bar's own
 * border - no extra line there. */
#tree-container > div:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}

.pinned-section-body.collapsed {
  display: none;
}

.pinned-item {
  padding-left: 26px !important;
}

/* (Section rows are .tree-item.folder too - covered by the arrow-position
 * rules above.) */

/* ---- tags section (tags as folders) ---- */
.tags-section-body.collapsed { display: none; }
/* Smart folders sit right under the pinned body, whose border-bottom
 * already draws the divider - a border-top here doubled the line. The
 * section closes with its own bottom divider before the tree instead. */
.smart-section-body.collapsed { display: none; }
/* Empty smart folder: keeps its folder shape (arrow included) but dimmed,
 * and clicking it does nothing (no children container exists). */
.smart-folder.smart-empty { opacity: 0.45; }
.smart-folder.smart-empty:hover { background: none; cursor: default; }
.smart-children.collapsed { display: none; }
.trash-children.collapsed { display: none; }
/* Rows swept out of view when an ancestor trash folder is collapsed */
.trash-hidden { display: none; }
/* Rows carry inline padding (depth-based); containers only need hide/show */
.trash-folder-children.collapsed { display: none; }
.trash-note .label { opacity: 0.75; }
/* Flat tag list: fixed indents. In the nested view (#28) rows carry their own
 * depth-based inline padding, so these must NOT apply - hence :not([style]),
 * which matches only the flat rows (the nested ones always have a style attr).
 * The old unconditional !important rules pinned every level to one indent. */
.tag-folder:not([style]) { padding-left: 26px !important; }
.tag-children { }
.tag-children.collapsed { display: none; }
.tag-children .tree-item.note:not([style]) { padding-left: 44px !important; }
.tag-empty {
  padding: 2px 8px 2px 44px;
  color: var(--joplin-color-faded, #888);
  font-size: 11px;
}

/* Empty drop zone — sticky at bottom of scroll viewport */
.drop-zone-empty {
  position: sticky;
  bottom: 0;
  height: 32px;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* Only show during drag (activated by JS class on tree-container) */
#tree-container.dragging-active .drop-zone-empty {
  opacity: 1;
  pointer-events: auto;
  border: 2px dashed var(--joplin-url-color, #4a9cf5);
  border-radius: 6px;
  margin: 4px 8px;
  text-align: center;
  line-height: 28px;
  font-size: 11px;
  color: var(--joplin-url-color, #4a9cf5);
  /* Solid panel base under the blue tint - the zone floats (sticky) above
   * tree rows, so a translucent-only background let them bleed through. */
  background: linear-gradient(rgba(74, 156, 245, 0.15), rgba(74, 156, 245, 0.15)),
    var(--joplin-background-color, #1e1e1e);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

/* Pinned section accepts drops during drag — outline doesn't affect layout.
 * The header always renders now (#38), so it doubles as the permanent
 * drag-to-pin target (the injected placeholder from #13 is gone). */
#tree-container.dragging-active .pinned-section-header {
  outline: 2px dashed var(--joplin-url-color, #4a9cf5);
  outline-offset: -2px;
}

/* Drag & Drop */
.tree-item.dragging {
  opacity: 0.35;
  filter: grayscale(30%);
}

.tree-item.drop-target {
  background: var(--joplin-selected-color, rgba(74, 156, 245, 0.28));
  outline: 2px solid var(--joplin-url-color, #4a9cf5);
  outline-offset: -2px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(74, 156, 245, 0.15);
}

/* Horizontal insertion bar (above/below) — position:relative only when active */
.tree-item.drop-above,
.tree-item.drop-below {
  position: relative;
}

.tree-item.drop-above::before,
.tree-item.drop-below::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 3px;
  background: var(--joplin-url-color, #4a9cf5);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(74, 156, 245, 0.6);
  pointer-events: none;
  z-index: 5;
}

.tree-item.drop-above::before {
  top: -2px;
}

.tree-item.drop-below::before {
  bottom: -2px;
}

/* Dropping into empty area -> create new notebook */
#tree-container.drop-empty {
  box-shadow: inset 0 0 0 2px var(--joplin-url-color, #4a9cf5);
  background: rgba(74, 156, 245, 0.06);
}


#search-results {
  flex: 1;
  overflow-y: scroll;
  padding: 4px 0;
}

#search-results::-webkit-scrollbar {
  width: 8px;
}

#search-results::-webkit-scrollbar-track {
  background: transparent;
}

#search-results::-webkit-scrollbar-thumb {
  background: var(--joplin-color-faded, #888);
  border-radius: 4px;
}

/* Search results */
.search-status {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--joplin-color-faded, #888);
  border-bottom: 1px solid var(--joplin-divider-color, #eee);
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 10px;
  gap: 8px;
  min-height: auto;
  margin: 0; /* override .tree-item margin for note items in search results */
  border-radius: 0;
}

.search-result-item .icon {
  flex-shrink: 0;
  font-size: 12px;
  width: 18px;
  text-align: center;
  line-height: 16.8px; /* match .search-result-title 12px * 1.4 */
}

.search-result-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.search-result-title {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-folder {
  font-size: 10px;
  color: var(--joplin-color-faded, #999);
  margin-top: 1px;
}

.search-result-snippet {
  font-size: 11px;
  color: var(--joplin-color-faded, #777);
  margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

/* Search section headers */
.search-section-header {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--joplin-color-faded, #888);
  background: var(--joplin-background-color3, rgba(100, 100, 100, 0.06));
  border-bottom: 1px solid var(--joplin-divider-color, #eee);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
}

.search-section-header:hover {
  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12));
}

.section-toggle {
  display: inline-block;
  font-size: 9px;
  width: 12px;
  text-align: center;
  transition: transform 0.15s;
}

.search-section-body.collapsed {
  display: none;
}

/* Tag items in search results */
.search-tag-item {
  cursor: pointer;
}

.search-tag-item:hover {
  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
}

.tag-expand-arrow {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--joplin-color-faded, #888);
  transition: transform 0.15s;
  margin-right: 4px;
}

.tag-expand-arrow.expanded {
  transform: rotate(90deg);
}

.tag-notes-container {
  padding-left: 16px;
  border-left: 2px solid var(--joplin-divider-color, #eee);
  margin-left: 18px;
}

/* Folder items in search results */
.search-folder-item {
  cursor: pointer;
}

.search-folder-item:hover {
  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
}

/* Flash highlight when locating a folder from search */
@keyframes locate-pulse {
  0%   { background: rgba(74, 156, 245, 0.5); }
  100% { background: transparent; }
}

.tree-item.locate-flash {
  animation: locate-pulse 1.5s ease-out;
  border-radius: 4px;
}

/* Inline input dialog */
.inline-input-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.inline-input-dialog {
  background: var(--joplin-background-color, #fff);
  border: 1px solid var(--joplin-divider-color, #ccc);
  border-radius: 8px;
  padding: 16px;
  min-width: 240px;
  max-width: 90%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.inline-input-label {
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--joplin-color);
}

.inline-input-field {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--joplin-divider-color, #ccc);
  border-radius: 4px;
  background: var(--joplin-background-color, #fff);
  color: var(--joplin-color);
  font-size: 13px;
  outline: none;
}

.inline-input-field:focus {
  border-color: var(--joplin-url-color, #4a9cf5);
  box-shadow: 0 0 0 2px var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
}

.inline-input-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

.inline-input-buttons button {
  padding: 5px 16px;
  border: 1px solid var(--joplin-divider-color, #ccc);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--joplin-color);
  background: var(--joplin-background-color3, #f0f0f0);
}

.inline-input-ok {
  background: #1a73e8 !important;
  color: #fff !important;
  border-color: #1a73e8 !important;
}

.inline-input-buttons button:hover {
  opacity: 0.85;
}

mark.search-highlight {
  background: rgba(255, 213, 0, 0.4);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ---- Note-row badges: checkbox progress pie + published link ---- */
/* Hug the badges to the title text instead of the row's right edge. */
.tree-item.note .label { flex: 0 1 auto; }
.todo-pie, .shared-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.todo-pie svg, .shared-badge svg { display: block; }
/* Same box metrics as .count (min-width 16 + 5px side padding) so the
   pie centers exactly where count digits center. */
.todo-pie {
  color: var(--joplin-color-faded, #888);
  margin-left: auto;
  min-width: 16px;
  padding: 0 5px;
  justify-content: center;
}
.todo-pie .pie-ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.55; }
.todo-pie .pie-fill { fill: currentColor; opacity: 0.8; }
.shared-badge {
  color: var(--joplin-color-faded, #999);
  opacity: 0.75;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
}
.shared-badge:hover {
  opacity: 1;
  color: inherit;
  background: rgba(127, 127, 127, 0.25);
}