/* The canvas's buttons in the site's own button style (as on Home: square corners, a thin border, no fill, the
   text in the page colour), instead of rounded or black-filled ones. Loaded last, so it wins over the older
   per-button styles. A light blur behind each keeps them readable over a busy canvas. */
html[data-color-mode] body :is(#floatingBrand #globalSaveBtn#globalSaveBtn#globalSaveBtn, #colorModeToggle#colorModeToggle, #ambientToggleBtn#ambientToggleBtn,
  #resetViewBtn#resetViewBtn, #searchCanvasBtn#searchCanvasBtn, #scriptPasteBtn#scriptPasteBtn, #floatingAddBtn#floatingAddBtn,
  #actionsToggleBtn#actionsToggleBtn, #selectedSidebarClose#selectedSidebarClose, #selectedSidebarEdit#selectedSidebarEdit,
  #graphView .action-btn, #graphView .export-btn, #graphView .sidebar-tab, #ihCorner#ihCorner .ih-c-full, #ihCorner#ihCorner .ih-c-name,
  #graphView .depth-color-btn, .canvas-zoom) {
  border-radius: 2px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  color: #fff !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html[data-color-mode] body :is(#floatingBrand #globalSaveBtn#globalSaveBtn#globalSaveBtn, #colorModeToggle#colorModeToggle, #ambientToggleBtn#ambientToggleBtn,
  #resetViewBtn#resetViewBtn, #searchCanvasBtn#searchCanvasBtn, #scriptPasteBtn#scriptPasteBtn, #floatingAddBtn#floatingAddBtn,
  #actionsToggleBtn#actionsToggleBtn, #selectedSidebarClose#selectedSidebarClose, #selectedSidebarEdit#selectedSidebarEdit,
  #graphView .action-btn, #graphView .export-btn, #graphView .sidebar-tab, #ihCorner#ihCorner .ih-c-full, #ihCorner#ihCorner .ih-c-name):hover {
  background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .3) !important;
}
/* the selected tab and the canvas's one main action (Add) stay filled, square like the site's primary buttons */
html[data-color-mode] body :is(#queryBtn#queryBtn, #graphView .sidebar-tab.active) {
  border-radius: 2px !important; background: #fff !important; color: #0b0d10 !important; border: 1px solid #fff !important; box-shadow: none !important;
}
/* the zoom cluster's own buttons sit inside its border */
html[data-color-mode] body .canvas-zoom button { border-radius: 0 !important; background: transparent !important; border: 0 !important; }
html[data-color-mode] body .canvas-zoom button + button { border-top: 1px solid rgba(255, 255, 255, .11) !important; }
html[data-color-mode] body .canvas-zoom button:hover { background: rgba(255, 255, 255, .08) !important; }

html[data-color-mode="light"] body :is(#floatingBrand #globalSaveBtn#globalSaveBtn#globalSaveBtn, #colorModeToggle#colorModeToggle, #ambientToggleBtn#ambientToggleBtn,
  #resetViewBtn#resetViewBtn, #searchCanvasBtn#searchCanvasBtn, #scriptPasteBtn#scriptPasteBtn, #floatingAddBtn#floatingAddBtn,
  #actionsToggleBtn#actionsToggleBtn, #selectedSidebarClose#selectedSidebarClose, #selectedSidebarEdit#selectedSidebarEdit,
  #graphView .action-btn, #graphView .export-btn, #graphView .sidebar-tab, #ihCorner#ihCorner .ih-c-full, #ihCorner#ihCorner .ih-c-name,
  #graphView .depth-color-btn, .canvas-zoom) {
  border-color: rgba(0, 0, 0, .14) !important; color: #111 !important;
}
html[data-color-mode="light"] body .canvas-zoom button + button { border-top-color: rgba(0, 0, 0, .14) !important; }
html[data-color-mode="light"] body :is(#queryBtn#queryBtn, #graphView .sidebar-tab.active) { background: #111 !important; color: #fff !important; border-color: #111 !important; }
/* the search and reset-view tabs that peek from the bottom corners: square too */
html[data-color-mode] body :is(.query-bar-peek, .reset-view-peek) {
  border-radius: 2px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, .11) !important;
  color: #fff !important; box-shadow: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html[data-color-mode="light"] body :is(.query-bar-peek, .reset-view-peek) { border-color: rgba(0, 0, 0, .14) !important; color: #111 !important; }

/* the canvas tutorial keeps the bottom-right search bar open and in place (public/js/tours.js) */
html.ih-tour-canvas .graph-query-container { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
html.ih-tour-canvas .query-bar-peek { opacity: 0 !important; }
/* no floating add-node button: nodes are added from the search bar (Add) */
html[data-color-mode] body #floatingAddBtn#floatingAddBtn { display: none !important; }
/* the bottom-right search bar and its field: square like the rest */
html[data-color-mode] body #queryContainer#queryContainer, html[data-color-mode] body #queryContainer#queryContainer :is(input, button) { border-radius: 2px !important; }