/* ========================================================================
   Active filter list – chips with consistent style
   ===================================================================== */

#filter-count,
#highlight-count {
  margin: var(--space-0-5) 0 var(--space-1);
}

/* The active filter and highlighted group lists scroll inside their list
   boxes (`.list-box`) instead of growing the panel. */
#active-filters {
  min-height: var(--space-10);
  max-height: 300px;
  overflow-y: auto;
}

/* ========================================================================
   Highlighted Cells UI
   ===================================================================== */

/* No reserved height: an empty page's box is its one status line. */
#highlighted-groups-list {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Highlighted groups header with count and clear button */
.highlighted-groups-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* ========================================================================
   Continuous selection range label
   ===================================================================== */

#selection-range-label {
  position: fixed;
  pointer-events: none;
  background: var(--color-interactive-primary);
  color: var(--color-text-inverse);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-none);
  font-size: var(--type-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  z-index: var(--z-max);
  transform: translate(var(--space-3), -50%);
  box-shadow: var(--shadow-md);
}

/* Highlight pages tabs - Compact Editorial Style */
#highlight-pages-container {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) 0 0;
  border-top: var(--border-default);
}

#highlight-pages-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.highlight-page-tab {
  gap: var(--space-0-5);
  max-width: 110px;
}

.highlight-page-tab-activate {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: var(--control-target-min);
  min-height: var(--control-target-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}

.highlight-page-tab[data-state="selected"] .chip-count {
  opacity: var(--opacity-80);
}

.highlight-page-tab-combine,
.highlight-page-tab-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--control-glyph-sm);
  line-height: var(--leading-none);
  color: inherit;
  opacity: var(--opacity-50);
  padding: 0 var(--space-0-5);
  min-width: var(--control-target-min);
  min-height: var(--control-target-min);
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

/* On a coarse pointer a tab may take the whole row, for room beside its two
   44px buttons. */
@media (pointer: coarse) {
  .highlight-page-tab {
    max-width: 100%;
  }
}

.highlight-page-tab-combine:hover {
  opacity: 1;
}

.highlight-page-tab-activate:focus-visible,
.highlight-page-tab-combine:focus-visible,
.highlight-page-tab-delete:focus-visible {
  outline-color: currentColor;
}

.highlight-page-tab-combine:focus-visible,
.highlight-page-tab-delete:focus-visible {
  opacity: 1;
}

.highlight-page-tab-delete:hover {
  opacity: 1;
  color: var(--color-danger-text);
}

/* The add-page button keeps a dashed outline: it stands for a page that
   does not exist yet. */
.highlight-page-add-btn {
  border-style: dashed;
  border-color: var(--color-text-tertiary);
}

/* Page tab name input (inline editing) */
.highlight-page-tab-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid currentColor;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  width: 60px;
  min-width: 40px;
  max-width: 100px;
  padding: 0;
  margin: 0;
  outline: none;
}

.highlight-page-tab-input:focus {
  border-bottom-color: var(--color-accent);
}

/* Highlight page tab drag-and-drop styles */
.highlight-page-tab.dragging {
  opacity: var(--opacity-50);
  cursor: grabbing;
}

.highlight-page-tab.drag-over {
  background: var(--color-accent-strong);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-strong);
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.highlight-page-tab[draggable="true"] {
  cursor: grab;
}

/* Page combine menu (intersection/union dropdown) */
.page-combine-menu {
  position: fixed;
  z-index: var(--z-popover);
  background: var(--color-surface-elevated);
  border: var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1) 0;
  min-width: 140px;
  max-width: calc(100vw - var(--space-4));
  overflow-y: auto;
}

.page-combine-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--type-control);
  color: var(--color-text-primary);
  text-align: left;
  overflow-wrap: anywhere;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.page-combine-option:hover,
.page-combine-option:focus-visible {
  background: var(--color-surface-tertiary);
}

/* Selection cursor for canvas - active drag states */
#glcanvas.selecting {
  cursor: cell !important;
}

#glcanvas.selecting-continuous {
  cursor: ns-resize !important;
}

/* Lasso selection mode */
#glcanvas.lasso-mode {
  /* Lasso mode active - cursor controlled via JS */
}

#glcanvas.lassoing {
  cursor: crosshair !important;
}

/* Lasso overlay canvas */
#lasso-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-overlay);
}

/* Lasso/Proximity multi-step controls */
.lasso-step-controls {
  display: flex;
  gap: var(--space-1-5);
  margin-top: var(--space-1-5);
}

/* Undo and redo draw an arrow glyph, one size up from the compact text. */
.lasso-step-controls .btn-undo,
.lasso-step-controls .btn-redo,
.select-bar-actions .btn-undo {
  font-size: var(--type-button);
}

/* Selection mode indicator tags (used across all highlight modes) */
.lasso-mode-tag {
  display: inline-block;
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  font-size: var(--type-compact);
  font-weight: var(--font-weight-semibold);
  margin-left: var(--space-1-5);
  border: var(--border-width-1) solid currentColor;
}

.lasso-mode-tag.union,
.lasso-mode-tag.subtract,
.lasso-mode-tag.intersect {
  background: var(--color-border-light);
  color: var(--color-text-secondary);
  border-color: var(--color-text-tertiary);
}

/* ========================================================================
   Outlier controls, centroid toggles, smoke panel
   ===================================================================== */

/* Points controls visibility toggle */
#points-controls {
  display: none;
}

/* Volumetric smoke settings: three groups, shown in smoke mode only. They
   are top-level groups of the panel, spaced like its other groups. */
#smoke-controls {
  display: none;
}

#smoke-controls.visible {
  display: flex;
  flex-direction: column;
  gap: var(--control-group-gap);
}

#smoke-controls > .control-block {
  margin-top: 0;
}

/* Points mode only: the same group rhythm as the panel. */
#points-controls.visible {
  display: flex;
  flex-direction: column;
  gap: var(--control-group-gap);
}

#points-controls > .control-block {
  margin-top: 0;
}

.highlight-mode-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-2) var(--space-1-5);
  margin-bottom: var(--space-1-5);
}

/* What the last gesture did; nothing while no gesture has (the tool's
   gesture is in the Selection (i)). */
#highlight-mode-description:empty {
  display: none;
}

/* Select mode: the on-screen stand-in for a held Alt key. It changes how
   every tool is triggered, so it leads the Selection group and is drawn as an
   input setting — a switch and a segmented control — never as a pill like the
   tools below it. The same switch and segmented control appear in the
   selection bar over the plot (components/_select-bar.css); everything here
   styles both. */
.highlight-select-mode-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
}

/* The combine choice sits under the switch. */
.highlight-select-mode-row > .switch {
  grid-column: 1 / -1;
}

.highlight-select-mode-row > .highlight-select-combine {
  grid-column: 1 / -1;
  margin-top: var(--space-1);
}

.select-combine-label {
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
}

/* The combine choice: one square segmented control, so it reads as a setting
   of the switch beside it and not as a row of tools. */
.select-combine {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* In the sidebar "Combine" is a field label above its control, like "Tool",
   and the three segments share the full row equally instead of sizing to
   their text, so no segment is truncated and the control never runs past the
   panel's right edge at any sidebar width or type size. */
.highlight-select-combine {
  flex-direction: column;
  align-items: stretch;
  gap: var(--control-row-gap);
}

.highlight-select-combine > .select-combine-label {
  margin: 0;
  font-size: var(--type-label);
  font-weight: var(--font-weight-medium);
}

.highlight-select-combine > .segmented {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.highlight-select-combine .segmented-btn {
  min-width: 0;
  padding-inline: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The Legend group: the legend sits under its centroid options. */
#display-options-container #legend {
  margin-top: var(--control-block-gap);
}