/* Bond Length Histogram (ui/AnalysisPanels/BondLengthHistogram.js): one
   low-profile chart per bond species pair, stacked in the panel body — which
   already scrolls (panelWindow.css's .cv-panel-body) — each with its own
   compact dual-range slider under the x-axis. */

.blh-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3-5) 14px;
  align-items: center;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--ink-4);
}

/* The label itself is one atomic flex item that wraps onto its own new row
   when the panel is too narrow to fit everything — its TEXT never wraps
   internally (that was stacking "Bin / width / (Å)" across three lines and
   blowing up the row's height). */
.blh-controls-row label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  flex: 0 0 auto;
}

.blh-width-slider {
  width: 80px;
}

.blh-pair-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Overrides .split-item's tall defaults (min-height:220px, flex:1 1 50% —
   sized for the EOS window's one or two big plots) for a stack of many
   low-profile cards. Loaded after sideDock.css, so this wins at equal
   (one-class) specificity; .split-item.expanded's fullscreen rule is
   !important and always takes over regardless of load order. */
.blh-pair-card {
  flex: 0 0 auto;
  min-height: 0;
  padding: var(--sp-2) var(--sp-3);
  /* Safety net: if the plot div is ever handed a stale/oversized height by
     Plotly (see .blh-pair-plot below) before a resize catches up, clip it to
     the card instead of letting it visually paint over the cards after it. */
  overflow: hidden;
}

.blh-pair-card h4 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  margin: 0 0 2px 0;
  text-align: left;
}

.blh-collapse-toggle {
  background: none;
  border: none;
  color: var(--muted-fg);
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 0 2px;
  line-height: var(--lh-tight);
  flex: 0 0 auto;
}

.blh-collapse-toggle:hover {
  color: var(--panel-fg);
}

.blh-pair-name {
  flex: 1 1 auto;
}

.blh-pair-count {
  color: var(--muted-fg);
  font-weight: var(--fw-normal);
  font-size: var(--fs-xs);
  flex: 0 0 auto;
}

/* .split-item-body (sideDock.css) sets `flex: 1` (flex-basis 0%) so a plot
   div stretches to fill whatever space its flex-column parent has to give —
   fine for the EOS/old single-chart layout, where the CARD itself has a real
   min-height (220px) to distribute. These cards deliberately have none (that
   min-height is exactly the "too tall" this layout was built to avoid), so
   with no override here the plot's flex-basis:0% left it with no real size
   to measure — Plotly then fell back to its own default (~450px) INSIDE a
   card that never grew to fit it, which is what was overlapping the cards
   below it. Pinning an explicit flex + height bypasses flex-grow entirely. */
.blh-pair-plot {
  flex: 0 0 auto;
  height: 110px;
  min-height: 60px;
  /* Drag the bottom edge down to make just this one chart taller — a plain
     block-level resize handle, independent of Plotly's own sizing (a
     ResizeObserver on this div calls Plotly.Plots.resize() whenever it
     changes, see watchPlotResize in BondLengthHistogram.js). overflow other
     than visible is required for the native handle to appear at all. */
  resize: vertical;
  overflow: hidden;
}

/* !important on both: the native resize handle above sets an INLINE height
   on this div (that's how CSS `resize` works), and a plain class rule can't
   override an inline style regardless of specificity — only a stylesheet
   !important rule can. Without it, dragging a card shorter in its normal
   compact view left that same small inline height stuck in place once you
   later expanded it to fullscreen. */
.split-item.expanded .blh-pair-plot {
  height: calc(100% - 60px) !important;
  resize: none !important;
}

/* The combined "All Pairs" card (multiple series, legend, dividers — see
   redrawItem's isCombined branch) reads cramped at the plain per-pair
   height, so it starts noticeably taller. Two classes beat .blh-pair-plot's
   one, so this wins regardless of stylesheet order. */
.blh-pair-plot.blh-combined-item {
  height: 200px;
  min-height: 80px;
}

/* Collapsed: only the header row (toggle/name/count) stays visible — chart,
   range slider and export/expand actions hide, so a structure with many
   species pairs can be scanned as a short list instead of a long scroll. */
.blh-pair-card.collapsed .blh-pair-plot,
.blh-pair-card.collapsed .blh-range-row,
.blh-pair-card.collapsed .split-item-actions {
  display: none;
}

.blh-pair-card.collapsed {
  padding-bottom: var(--sp-2);
}

.blh-pair-actions .split-item-action-btn {
  font-size: var(--fs-xs);
  padding: 1px 5px;
}

/* ---- per-pair compact dual-range slider (same overlapping-inputs +
   inset-corrected fill technique as ui/BondLengthPanel.js's
   .bond-range-slider, scaled down for a low-profile card) ---- */
.blh-range-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.blh-range-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 60px;
  height: 12px;
}

.blh-range-slider .blh-range-bg {
  position: absolute;
  height: 3px;
  background: var(--track-bg-strong);
  border-radius: 2px;
  top: 50%;
  left: 6px;
  right: 6px;
  transform: translateY(-50%);
  z-index: -2;
}

.blh-range-slider .blh-range-fill {
  position: absolute;
  height: 3px;
  background: rgba(34, 197, 94, 0.9);
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.blh-range-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 12px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
}

.blh-range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg-1);
  border: 1px solid var(--ink-3);
  cursor: pointer;
  pointer-events: auto;
  margin-top: -4.5px;
}

.blh-range-slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg-1);
  border: 1px solid var(--ink-3);
  cursor: pointer;
  pointer-events: auto;
}

.blh-range-label {
  font-size: var(--fs-xs);
  color: var(--muted-fg);
  white-space: nowrap;
}

.blh-range-reset {
  background: none;
  border: none;
  color: var(--muted-fg);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 0 2px;
  line-height: var(--lh-tight);
}

.blh-range-reset:hover {
  color: var(--panel-fg);
}

.blh-range-reset:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ===========================================================================
   ui/BondLengthPanel.js — the Structure panel's Bonds tab (per-element-pair
   category rows: visibility toggle, pie dot, expandable individual-bond
   list, color/alpha/size editor). Extracted from inline styles/cssText and
   a document.head-injected <style> block during the CSS consolidation.
   =========================================================================== */

/* ---- double-range slider (same overlapping-inputs + inset-corrected fill
   technique as .blh-range-slider above, at this panel's original, larger
   scale). BOND_SLIDER_THUMB in BondLengthPanel.js must stay in sync with the
   16px thumb size below — bondSliderThumbPos() insets the fill track by half
   that constant, so JS math and this CSS shape are two views of one value. */
.bond-range-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 60px;
  height: 16px;
  margin: 0 var(--sp-3);
}

.bond-range-slider .background-track {
  position: absolute;
  height: 4px;
  background: var(--track-bg-strong);
  border-radius: 2px;
  top: 50%;
  left: 8px;
  right: 8px;
  transform: translateY(-50%);
  z-index: -2;
}

/* Not var(--accent-color): this fill is a fixed green regardless of the
   active backend theme (unlike .theme-standard's accent, which happens to
   share this exact rgb triple at alpha 0.8 by coincidence, not by intent —
   the Symmetry backend's blue accent must not leak into this slider). */
.bond-range-slider .range-track {
  position: absolute;
  height: 4px;
  background: rgba(6, 140, 50, 0.8);
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.bond-range-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 16px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

/* Fixed stacking so the min thumb stays reachable near the max end of the
   track (and vice versa) instead of one thumb permanently occluding the
   other. */
.bond-range-slider input[type="range"].bond-range-min { z-index: 2; }
.bond-range-slider input[type="range"].bond-range-max { z-index: 1; }

.bond-range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg-1);
  border: 1px solid var(--ink-3);
  cursor: pointer;
  pointer-events: auto;
  margin-top: -6px;
}

.bond-range-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg-1);
  border: 1px solid var(--ink-3);
  cursor: pointer;
  pointer-events: auto;
}

.bond-controls-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0; /* lets the flex:1 slider actually shrink instead of overflowing the row */
}

/* ---- hydrogen-bond sub-control (second slider on H-X pairs) ---- */
/* Indented and set off from the covalent slider above it so it reads as a
   secondary control belonging to the same pair row. */
.hbond-control {
  margin: var(--sp-2) 0 var(--sp-1) var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--track-bg-strong);
}

.hbond-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* A bit of breathing room between the header/colour dot and the double
   slider, so the H-bond slider doesn't crowd its label row. */
.hbond-control .bond-controls-row {
  margin-top: var(--sp-3);
}

.hbond-dot {
  cursor: pointer;
  flex: 0 0 auto;
}

/* Slightly smaller than the standalone corner "i" badge so it sits neatly
   inline in the compact H-bond header. */
.hbond-info {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  font-size: var(--fs-sm);
}

.hbond-color-editor {
  margin: var(--sp-2) 0;
}

.hbond-label {
  font-size: var(--fs-base); /* 12px */
  opacity: 0.85;
}

.hbond-value {
  margin-left: auto;
  font-size: var(--fs-base);
  opacity: 0.7;
}

/* The dashed hydrogen bonds render cyan in 3D (general.hydrogenBondColor,
   #33d6d6) — pin the slider's selected-range fill to the same colour so the
   control and what it draws read as one thing (distinct from the covalent
   slider's green). */
.hbond-range-slider .range-track {
  background: rgb(var(--hydrogen-bond-rgb) / 0.85);
}

/* ---- reset row (Add Custom Bond) ---- */
.buttonWrapper {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
}

/* Deactivated: the data model holds one length range per element pair, so
   this control can only add a pair with none yet — see the onclick handler
   in BondLengthPanel.js. Kept in the DOM (not removed) in case a
   multi-range-per-pair version of this feature is wanted later. */
.blp-add-custom-btn {
  font-size: var(--fs-base); /* 12px */
  height: 22px;
  display: none;
}

/* ---- per-pair category row header ---- */
.bond-checkbox-label {
  color: var(--ink-3);
  margin: 0;
  cursor: pointer;
  font-size: var(--fs-lg);
}

.bond-expand-icon {
  margin-left: var(--sp-1);
  font-size: var(--fs-lg);
  transition: transform 0.2s ease;
  color: var(--fg-75);
  transform: rotate(0deg); /* JS overrides this inline (rotate(90deg)) on expand — the
    inline style always wins over this class rule regardless of specificity */
  cursor: pointer;
}

.bond-count {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-left: auto;
}

/* Category pie dot: bigger than the shared .dot default (10x10, see
   CompositionRow.js) to match the Atoms tab's own override. */
.bond-cat-dot {
  width: 20px;
  height: 20px;
  margin-right: var(--sp-2);
  border: 1px solid var(--fg-3);
  cursor: pointer;
}

/* ---- category style editor (color + alpha + size), closed by default —
   catEditor.style.display is toggled inline at runtime (dot click, expand/
   collapse, Apply), which still overrides this base rule regardless. ---- */
.bond-cat-editor {
  display: none;
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--wash-0);
  border: 1px solid var(--wash-1);
  border-radius: var(--radius-sm);
}

.bond-cat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-2) 0;
}

.bond-cat-row-label {
  font-size: var(--fs-sm);
  color: var(--fg-85);
  min-width: 34px;
}

.bond-cat-row input[type="range"] {
  flex: 1;
}

.bond-cat-row-input {
  width: 56px;
  height: 28px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  background: rgb(var(--shadow-rgb) / 0.25);
  border: 1px solid var(--line-1);
  color: var(--info-tint);
  font-size: var(--fs-sm);
}

.bond-cat-btn-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* Reset/Apply buttons: same box as the shared .btn-mini, just narrower and
   flush with the alpha/size rows above. Reset's background/border/color/
   text-shadow are set inline in JS when the pair has bonds — that's a
   species-derived gradient preview, genuinely data, not a constant. */
.bond-cat-btn {
  height: 32px;
  padding: 0 var(--sp-1);
  font-size: var(--fs-sm);
  /* min-width, not a fixed width: 50px is what "Reset"/"Apply" need at
     --fs-sm, but a label that ever needs more should widen the button rather
     than run out through its own border. */
  min-width: 50px;
  white-space: nowrap;
}

/* ---- individual-bond list (expandable, lazily built) ---- */
.individual-bonds {
  display: none;
  margin-left: 20px;
  margin-top: var(--sp-3);
  border-left: 2px solid var(--line-1);
  padding-left: var(--sp-3);
}

.bond-empty-note {
  font-size: var(--fs-sm);
  color: var(--fg-50);
  padding: var(--sp-1) 0;
}

/* ---- bottom row: Reset Bond Lengths / Reset Colors ---- */
.blp-reset-colors-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: 20px;
}

.blp-reset-btn {
  height: 32px;
  padding: 0 var(--sp-3-5);
  font-size: var(--fs-sm);
  min-width: 50px;
}