/* Editor-specific styles for present/edit/ */

/* Thin visible scrollbar for horizontally-scrolling toolbars — gives mobile
   users an affordance that more content is off-screen, without redesigning. */
.scroll-x-thin {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}
.dark .scroll-x-thin {
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.scroll-x-thin::-webkit-scrollbar { height: 6px; -webkit-overflow-scrolling: touch; }
.scroll-x-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-x-thin::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22);
  border-radius: 999px;
}
.dark .scroll-x-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
.scroll-x-thin::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); }
.dark .scroll-x-thin::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

#previewPane { transition: height 0.21s ease; isolation: isolate; z-index: 5; }
.tree-node { transition: background 0.105s, transform var(--md-spring-snappy, 550ms); }
.tree-node:hover { background: var(--hover-bg, rgba(0,0,0,0.04)); }
.tree-node.is-pressing { background: var(--hover-bg, rgba(0,0,0,0.08)); }
.dark .tree-node:hover { background: rgba(255,255,255,0.06); }
/* #treeContent is role="tree" and each node is a focusable treeitem, so keyboard focus
   has to be visible or the tree is still unusable without a mouse. outline-offset -2px
   keeps the ring inside the row so it does not shift the list. */
.tree-node:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
}

/* Tablist (Form / Raw Markdown): the active tab is the only tabbable one, so its focus
   ring has to read as clearly as the inactive tab's hover state. */
[role="tab"]:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}
/* No [role=tabpanel]:focus-visible rule: both panels contain focusable children (the node
   form's inputs, the raw textarea), so per the APG tablist pattern they take no tabindex of
   their own and Tab moves straight into the content. */

/* ── Splitter handle ── */
.splitter-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8px;
  cursor: ns-resize;
  background: transparent;
  border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08));
  flex-shrink: 0;
  z-index: 20;
  transition: background 0.105s;
  user-select: none;
  /* Claim the touch gesture so a drag on the handle resizes instead of the
     browser starting a page scroll before preventDefault fires. */
  touch-action: none;
}
.dark .splitter-handle {
  border-color: rgba(255,255,255,0.1);
}
.splitter-handle:hover,
.splitter-handle.dragging {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
}
/* The handle is a focusable separator now, so keyboard focus must be visible.
   -2px keeps the ring inside the 8px strip and off the pane edges. */
.splitter-handle:focus-visible {
  background: color-mix(in srgb, var(--md-primary) 16%, transparent);
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}
.splitter-handle:focus-visible .splitter-grip {
  width: 48px;
  background: var(--md-primary);
}
.splitter-grip {
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.15);
  transition: background 0.105s, width 0.105s;
}
.dark .splitter-grip {
  background: rgba(255,255,255,0.2);
}
.splitter-handle:hover .splitter-grip,
.splitter-handle.dragging .splitter-grip {
  width: 48px;
  background: color-mix(in srgb, var(--md-primary) 50%, transparent);
}