/* ========================================================================
   Performance Benchmark Controls
   ===================================================================== */

.benchmark-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Two touch hit-area extensions fit between stacked presets. */
  gap: var(--space-1-5);
  margin-top: var(--space-1);
}

.benchmark-run-btn {
  width: 100%;
}

/* A short numeric field, but on its own line under its label like every
   other field: inline, it sat beside the label wherever the two happened to
   fit (a phone) and under it where they did not (the desktop sidebar). */
.benchmark-count-input {
  display: block;
  width: calc(var(--space-24) + var(--space-6));
}

.benchmark-stats {
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-surface-secondary);
  border: var(--border-light);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-control);
}

.benchmark-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--control-block-gap) var(--space-3);
}

.benchmark-stat {
  min-width: 0;
}

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

/* A reading wraps rather than ending in an ellipsis: a cut-off number cannot
   be hovered on touch. */
.benchmark-stat-value {
  font-size: var(--type-heading);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* A second number for the same stat (the main-thread time spent issuing the
   frame, under the frame interval) sits on its own line, so the reading itself
   stays on one. */
.benchmark-stat-note {
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* The headline reading is the panel's largest number, at title size: no
   number in a panel reads above the panel's own title. */
.benchmark-stat-value--headline {
  font-size: var(--type-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.benchmark-timing-details {
  margin-top: var(--control-block-gap);
  padding-top: var(--control-block-gap);
  border-top: var(--border-width-1) solid var(--color-border-light);
}

.benchmark-timing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--control-row-gap) var(--space-1-5);
  font-size: var(--type-readout);
}

/* Label over value, so a third of the panel holds "7.30 ms" on one line. */
.benchmark-timing-grid > div {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.benchmark-gen-info {
  margin-top: var(--control-block-gap);
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
}

#benchmark-report-output {
  min-height: 140px;
  margin-top: var(--control-row-gap);
  font-family: var(--font-mono);
}

.bottleneck-analyze-btn {
  width: 100%;
}

.bottleneck-progress {
  margin-top: var(--control-block-gap);
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-warning-soft);
  border: var(--border-width-1) solid var(--color-warning);
  border-radius: var(--radius-none);
  font-size: var(--type-control);
  color: var(--color-warning-text);
}

/* The progress line's spinner takes the warning ink it sits on. */
.bottleneck-progress .spinner {
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  border-top-color: var(--color-warning-text);
}

.bottleneck-results {
  margin-top: var(--control-block-gap);
}

.bn-verdict {
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  border: var(--border-width-1) solid var(--color-border-light);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface-secondary);
  margin-bottom: var(--control-block-gap);
}

.bn-verdict[data-status="good"] {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.bn-verdict[data-status="warning"] {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning-text);
}

.bn-verdict[data-status="danger"] {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}

.bn-verdict-header {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-bottom: var(--control-row-gap);
}

/* Status glyphs. Only the one matching the verdict status is shown, and it
   strokes with currentColor so it tracks the theme instead of an emoji's
   fixed rendering. */
.bn-verdict-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.bn-verdict-glyph {
  display: none;
  width: var(--space-4);
  height: var(--space-4);
}

.bn-verdict[data-status="good"] .bn-verdict-glyph[data-status="good"],
.bn-verdict[data-status="warning"] .bn-verdict-glyph[data-status="warning"],
.bn-verdict[data-status="danger"] .bn-verdict-glyph[data-status="danger"] {
  display: block;
}

.bn-verdict-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-heading);
}

.bn-verdict-detail {
  font-size: var(--type-control);
  line-height: var(--leading-normal);
  opacity: var(--opacity-90);
}

/* Same surface and frame as .bn-section below: --color-surface-tertiary is a
   hover/chip fill, and the label, suffix and value all read as text here. */
.bn-fps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-surface-secondary);
  border: var(--border-width-1) solid var(--color-border-light);
  border-radius: var(--radius-none);
  margin-bottom: var(--control-block-gap);
}

.bn-fps-label {
  font-size: var(--type-label);
  color: var(--color-text-secondary);
}

.bn-fps-value-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

/* Matches .benchmark-stat-value--headline, the headline numeral of the
   sibling benchmark panel. */
.bn-fps-value {
  font-size: var(--type-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.bn-fps-value[data-status="good"] {
  color: var(--color-success-text);
}

.bn-fps-value[data-status="warning"] {
  color: var(--color-warning-text);
}

.bn-fps-value[data-status="danger"] {
  color: var(--color-danger-text);
}

.bn-fps-suffix {
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
}

.bn-section {
  margin-bottom: var(--control-block-gap);
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-surface-secondary);
  border: var(--border-width-1) solid var(--color-border-light);
  border-radius: var(--radius-none);
}

.bn-section--success {
  background: var(--color-success-soft);
  border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border-light));
}

.bn-list {
  font-size: var(--type-control);
}

.bn-list-item {
  padding: var(--space-1) 0;
  border-bottom: var(--border-width-1) solid var(--color-border-light);
}

.bn-list-item:last-child {
  border-bottom: none;
}

.bn-list-item[data-status="good"] {
  color: var(--color-success-text);
}

.bn-list-item[data-status="warning"] {
  color: var(--color-warning-text);
}

.bn-list-item[data-status="danger"] {
  color: var(--color-danger-text);
}

.bn-section--success .bn-list-item {
  border-bottom-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.bn-fix-title {
  font-weight: var(--font-weight-semibold);
  color: inherit;
}

.bn-fix-action {
  margin-top: var(--space-0-5);
  color: var(--color-success-text);
}

.bn-details {
  margin-top: var(--control-block-gap);
}

/* The stats sit on their own surface inside the inline disclosure. */
.bn-details > .bn-details-body {
  margin-top: var(--control-row-gap);
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-surface-secondary);
  border-radius: var(--radius-none);
  font-size: var(--type-readout);
  font-variant-numeric: tabular-nums;
}

.bn-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-3);
}

.bn-details-section {
  margin-top: var(--space-1-5);
  padding-top: var(--space-1-5);
  border-top: var(--border-width-1) solid var(--color-border-light);
}

.bn-details-value {
  font-weight: var(--font-weight-semibold);
}

.bn-details-value[data-status="good"] {
  color: var(--color-success-text);
}

.bn-details-value[data-status="warning"] {
  color: var(--color-warning-text);
}

.bn-details-value[data-status="danger"] {
  color: var(--color-danger-text);
}

/* Export toolbar - compact */
.analysis-export-toolbar {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--control-row-gap);
}

.analysis-export-toolbar .btn {
  flex: 1;
}

/* =========================================================================
   Analysis Page Selector - Compact Editorial Chip Style
   ========================================================================= */

.analysis-page-selector-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
}

.analysis-page-mode-indicator {
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
}

.analysis-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-row-gap);
  margin-top: var(--control-row-gap);
}

/* The page colour input is the chip button's sibling (a control cannot sit
   inside a button), laid over the swatch the button draws: chip padding plus
   its border from the chip's edge. */
.analysis-page-chip > .color-swatch-input {
  inset: auto;
  left: calc(var(--control-chip-padding-x) + var(--border-width-1));
  top: 50%;
  width: var(--space-2-5);
  height: var(--space-2-5);
  transform: translateY(-50%);
}

/* Derived "Rest of" pages read as a different kind of page. */
.chip-derived:not([aria-pressed="true"]) {
  background: var(--color-info-soft);
  border-color: var(--color-info);
}

.chip-derived > .chip-name {
  font-style: italic;
}

/* One page chip: the toggle button and, beside it, the colour input laid
   over the swatch the button draws. */
.analysis-page-chip {
  position: relative;
  display: flex;
  min-width: 0;
}

.analysis-page-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--control-row-gap);
}

/* =========================================================================
   Analysis Preview Container
   ========================================================================= */

.analysis-preview-container {
  margin-top: var(--control-block-gap);
  min-height: 180px;
  /* A plot drawn wider than the panel (a dot plot naming every gene) scrolls. */
  overflow-x: auto;
  border: var(--border-light);
  background: var(--color-surface-elevated);
  position: relative;
  border-radius: var(--radius-none);
}

/* Hide preview container when empty - only show when there's a plot */
.analysis-preview-container.empty {
  display: none;
}

/* Show container when loading even if empty */
.analysis-preview-container.loading {
  display: block;
  min-height: 180px;
}

.analysis-preview-container.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-surface-elevated) 90%, transparent);
  z-index: 10;
}

.analysis-preview-container.loading::before {
  content: 'Loading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
  z-index: 11;
}

.analysis-preview-plot-host {
  position: relative;
  width: 100%;
  min-height: 180px;
  overflow: hidden;
}

.analysis-preview-plot {
  width: 100%;
  height: 100%;
}

/* =========================================================================
   Analysis Actions Bar
   ========================================================================= */

.analysis-actions {
  display: flex;
  gap: var(--control-row-gap);
  margin-top: var(--control-block-gap);
  align-items: center;
  justify-content: flex-end;
}

/* =========================================================================
   Analysis Summary Stats Table - Matches Website Patterns
   ========================================================================= */

.analysis-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-control);
}

.analysis-stats-table th,
.analysis-stats-table td {
  padding: var(--control-row-gap) var(--control-box-padding-x);
  text-align: left;
}

.analysis-stats-table th {
  font-weight: var(--font-weight-medium);
  font-size: var(--type-label);
  color: var(--color-text-secondary);
  background: var(--color-surface-tertiary);
  border-bottom: var(--border-width-1) solid var(--color-border-light);
  position: sticky;
  top: 0;
}

.analysis-stats-table td {
  font-variant-numeric: tabular-nums;
  font-size: var(--type-control);
  color: var(--color-text-secondary);
  border-bottom: var(--border-width-1) solid var(--color-border-light);
}

.analysis-stats-table td:first-child {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--type-label);
  color: var(--color-text-secondary);
}

.analysis-stats-table tr:last-child td {
  border-bottom: none;
}

.analysis-stats-more {
  font-style: italic;
  color: var(--color-text-tertiary);
}

/* =========================================================================
   Plotly Minimal Styling for Analysis Module
   ========================================================================= */

/* Hide modebar by default, show when hovering near the modebar area */
.analysis-preview-plot .modebar-container,
.analysis-modal-plot .modebar-container {
  background: transparent !important;
  background-color: transparent !important;
}

.analysis-preview-plot .modebar,
.analysis-modal-plot .modebar {
  top: 6px !important;
  right: 6px !important;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: var(--space-0-5) var(--space-1) !important;
}

.analysis-preview-plot .modebar-group,
.analysis-modal-plot .modebar-group {
  background: transparent !important;
  background-color: transparent !important;
}

/* Expand hover detection area around the modebar */
.analysis-preview-plot .modebar::before,
.analysis-modal-plot .modebar::before {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  bottom: -15px;
  left: -25px;
}

.analysis-preview-plot .modebar:hover,
.analysis-modal-plot .modebar:hover,
.analysis-preview-plot .modebar:focus-within,
.analysis-modal-plot .modebar:focus-within {
  opacity: 1;
}

.analysis-preview-plot .modebar-btn,
.analysis-modal-plot .modebar-btn {
  font-size: var(--type-control) !important;
  color: var(--color-text-tertiary) !important;
}

.analysis-preview-plot .modebar-btn path,
.analysis-modal-plot .modebar-btn path {
  fill: var(--color-text-tertiary) !important;
}

.analysis-preview-plot .modebar-btn:hover,
.analysis-modal-plot .modebar-btn:hover {
  color: var(--color-text-primary) !important;
}

.analysis-preview-plot .modebar-btn:hover path,
.analysis-modal-plot .modebar-btn:hover path {
  fill: var(--color-text-primary) !important;
}

.analysis-preview-plot .modebar-group,
.analysis-modal-plot .modebar-group {
  padding: 0 var(--space-px) !important;
}

.analysis-preview-plot .modebar-btn[data-title="Produced with Plotly"],
.analysis-modal-plot .modebar-btn[data-title="Produced with Plotly"] {
  display: none !important;
}

/* =========================================================================
   Statistical Annotations Panel Styles
   ========================================================================= */

.analysis-annotations-results {
  display: flex;
  flex-direction: column;
  gap: var(--control-block-gap);
}

/* Test result card */
.analysis-test-card {
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  background: var(--color-surface-elevated);
  border: var(--border-width-1) solid var(--color-border-light);
  border-radius: var(--radius-none);
}

.analysis-test-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--control-row-gap);
}

.analysis-test-name {
  font-weight: var(--font-weight-medium);
  font-size: var(--type-heading);
  color: var(--color-text-primary);
}

.analysis-test-significance {
  font-variant-numeric: tabular-nums;
  font-size: var(--type-compact);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
}

.analysis-test-significance.significant {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.analysis-test-significance.not-significant {
  background: var(--color-surface-tertiary);
  color: var(--color-text-secondary);
}

/* Stats table within card */
.analysis-test-stats {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--control-row-gap);
  font-size: var(--type-readout);
}

.analysis-test-stats td {
  padding: var(--space-0-5) 0;
  border: none;
}

.analysis-test-stats td.stat-label {
  color: var(--color-text-secondary);
  width: 70px;
}

.analysis-test-stats td.stat-value {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.analysis-test-stats tr.highlight td.stat-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Interpretation text */
.analysis-test-interpretation {
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.4;
  padding-top: var(--control-row-gap);
  border-top: var(--border-width-1) solid var(--color-border-light);
}

/* Significance legend */
.analysis-annotations-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--control-block-gap);
  padding-top: var(--control-row-gap);
  border-top: var(--border-width-1) solid var(--color-border-light);
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
}

.analysis-annotations-legend .legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.analysis-annotations-legend .sig-marker {
  font-variant-numeric: tabular-nums;
  font-size: var(--type-compact);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-px) var(--space-1);
  border-radius: var(--radius-sm);
}

.analysis-annotations-legend .sig-ns {
  background: var(--color-surface-tertiary);
  color: var(--color-text-secondary);
}

.analysis-annotations-legend .sig-1 {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.analysis-annotations-legend .sig-2 {
  background: color-mix(in srgb, var(--color-success-soft) 50%, var(--color-success) 50%);
  color: var(--color-success-text);
}

.analysis-annotations-legend .sig-3 {
  background: color-mix(in srgb, var(--color-success-soft) 25%, var(--color-success) 75%);
  color: var(--color-success-text);
}

/* ========================================================================= */
/* Quick Insights Panel - Compact Editorial Style                            */
/* ========================================================================= */

/* Insights Header - Compact */
.insights-header {
  padding: var(--space-0-5) 0 var(--space-1);
  border-bottom: var(--border-width-1) solid var(--color-border-light);
  margin-bottom: var(--space-1);
}

.insights-summary {
  font-size: var(--type-control);
  color: var(--color-text-secondary);
}

.insights-summary strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Insights Sections */
.insights-section {
  margin-bottom: var(--control-block-gap);
}

.insights-section:last-of-type {
  margin-bottom: var(--space-1);
}

.insights-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-heading);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.insights-section-title-text {
  flex: 0 1 auto;
}

/* Multi-select dropdown (field picker) */
.multi-select-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.multi-select-dropdown-btn {
  font-size: var(--type-button);
  line-height: var(--leading-none);
}

.multi-select-dropdown-btn[aria-expanded="true"] {
  background: var(--color-interactive-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-interactive-primary);
}

.multi-select-dropdown-panel {
  position: fixed;
  width: 220px;
  max-width: calc(100vw - 40px);
  background: var(--color-surface-elevated);
  border: var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-popover);
  box-sizing: border-box;
  overflow-x: hidden;
}

.multi-select-dropdown-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-width-1) solid var(--color-border-light);
  background: var(--color-surface-secondary);
}

.multi-select-dropdown-title {
  font-size: var(--type-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.multi-select-dropdown-meta {
  font-variant-numeric: tabular-nums;
  font-size: var(--type-readout);
  color: var(--color-text-tertiary);
}

.multi-select-dropdown-search {
  width: calc(100% - 2 * var(--space-1-5));
  margin: var(--space-1) var(--space-1-5);
}

.multi-select-dropdown-list {
  display: flex;
  flex-direction: column;
  max-height: var(--multi-select-list-max-height, 240px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-0-5) 0;
}

/* Rows are .checkbox-inline labels spanning the list. */
.multi-select-dropdown-item {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-0-5) var(--space-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

.multi-select-dropdown-item:hover {
  background: var(--color-surface-tertiary);
}

.multi-select-dropdown-label {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.multi-select-dropdown-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-1-5);
  border-top: var(--border-width-1) solid var(--color-border-light);
  background: var(--color-surface-secondary);
}

/* Insights Field */
.insights-field {
  margin-bottom: var(--space-1-5);
}

.insights-field:last-child {
  margin-bottom: 0;
}

.insights-field-header {
  font-size: var(--type-label);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-0-5);
}

/* Page Row */
.insights-page-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  margin-bottom: var(--space-1);
}

.insights-page-row:last-child {
  margin-bottom: 0;
}

/* Composition Bar */
.insights-bar-container {
  position: relative;
  height: 8px;
  background: var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.insights-bar-segment {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--color-text-primary);
  opacity: var(--opacity-80);
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.insights-bar-segment:hover {
  opacity: 1;
}

.insights-bar-segment:nth-child(1) { background: var(--color-text-primary); }
.insights-bar-segment:nth-child(2) { background: var(--color-text-secondary); }
.insights-bar-segment:nth-child(3) { background: var(--color-text-tertiary); }
.insights-bar-segment:nth-child(4) { background: var(--color-border-default); }
.insights-bar-segment:nth-child(5) { background: var(--color-border-light); }

/* Category Labels */
.insights-category-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-0-5);
}

.cat-label {
  font-size: var(--type-compact);
  color: var(--color-text-secondary);
  background: var(--color-surface-tertiary);
  padding: var(--space-px) var(--space-1);
  border-radius: var(--radius-sm);
}

/* Stats Table */
.insights-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-control);
}

.insights-stats-table th,
.insights-stats-table td {
  padding: var(--space-0-5) var(--space-1-5);
  text-align: left;
  border-bottom: var(--border-width-1) solid var(--color-border-light);
}

.insights-stats-table th {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  font-size: var(--type-label);
}

.insights-stats-table td {
  color: var(--color-text-secondary);
}

.insights-stats-table td:first-child {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

/* Collapsible Page Selector Section (a .disclosure-inline) */
.insights-page-selector-section {
  margin-top: var(--control-block-gap);
  border-top: var(--border-width-1) solid var(--color-border-light);
  padding-top: var(--control-row-gap);
}

.insights-page-selector-container {
  margin-top: 0;
}

/* Dynamic tab styling */
.insights-dynamic-tab {
  border-style: dashed;
}

.insights-dynamic-icon {
  font-size: var(--type-control);
  opacity: var(--opacity-70);
}

.insights-dynamic-tab[aria-pressed="true"] .insights-dynamic-icon {
  opacity: 1;
}

/* Analysis intro - hidden since accordion provides title/description */
.analysis-run-btn {
  margin-top: var(--control-block-gap);
  width: 100%;
}

/* ========================================================================= */
/* Analysis mode rows (shared .disclosure, see _controls.css)                 */
/* ========================================================================= */

/* The copy action is the row's sibling button, faded until the row is
   pointed at or focused (always shown without hover, layouts/_responsive.css). */
.analysis-mode > .disclosure-header-row > .accordion-copy-btn {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-right: var(--space-3);
  border-color: color-mix(in srgb, var(--color-border-strong) 25%, transparent);
  box-shadow: none;
  opacity: var(--opacity-35);
  transition:
    opacity var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
}

.analysis-mode > .disclosure-header-row > .accordion-copy-btn::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--space-1));
}

/* The (i) beside a disclosure title sits between the chevron and any
   sibling action. */
.disclosure-header-row > .info-btn {
  flex-shrink: 0;
  margin: 0 var(--space-2);
}

.analysis-mode > .disclosure-header-row:hover > .accordion-copy-btn,
.analysis-mode > .disclosure-header-row:focus-within > .accordion-copy-btn {
  opacity: var(--opacity-90);
  background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
  border-color: color-mix(in srgb, var(--color-border-strong) 50%, transparent);
}

.stat-value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.stat-value.significant {
  color: var(--color-success-text);
}

.stat-value.not-significant {
  color: var(--color-text-tertiary);
}

/* ========================================================================= */
/* DE Analysis Specific Styles                                                */
/* ========================================================================= */

/* DE Modal Stats */
.de-modal-stats {
  font-size: var(--type-control);
}

/* DE Genes Table in Modal */
.de-modal-genes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-block-gap);
  margin: 0 0 var(--control-block-gap) 0;
}

.de-modal-genes-header h5 {
  margin: 0;
}

.de-modal-genes-header .obs-select {
  width: auto;
  min-width: 140px;
  margin-top: 0;
}

.modal-de-genes {
  font-size: var(--type-control);
  width: 100%;
}

.modal-de-genes th,
.modal-de-genes td {
  padding: var(--control-row-gap) var(--control-box-padding-x);
  text-align: left;
  border-bottom: var(--border-width-1) solid var(--color-border-light);
}

.modal-de-genes th {
  background: var(--color-surface-tertiary);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.modal-de-genes tr.up td.gene-name {
  color: var(--color-success-text);
  font-weight: var(--font-weight-semibold);
}

.modal-de-genes tr.down td.gene-name {
  color: var(--color-danger-text);
  font-weight: var(--font-weight-semibold);
}

/* ========================================================================= */
/* Gene Signature Specific Styles                                             */
/* ========================================================================= */

/* Gene Chips in Modal */
.modal-gene-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-row-gap);
  max-height: 200px;
  overflow-y: auto;
  padding: var(--control-row-gap) 0;
}

/* ========================================================================= */
/* Correlation Analysis Specific Styles                                       */
/* ========================================================================= */

/* Correlation Interpretation Table */
.correlation-interpretation {
  font-size: var(--type-control);
  width: 100%;
  margin-bottom: var(--control-block-gap);
}

/* Correlation strength classes */
.correlation-very-strong { color: var(--color-success-text); font-weight: var(--font-weight-semibold); }
.correlation-strong { color: var(--color-success-text); }
.correlation-moderate { color: var(--color-warning-text); }
.correlation-weak { color: var(--color-text-tertiary); }
.correlation-none { color: var(--color-text-tertiary); font-style: italic; }

/* ========================================================================= */
/* Shared Modal Panel Styles                                                   */
/* ========================================================================= */

/* Modal section headers */
.analysis-modal-stats-panel h5,
.analysis-modal-annotations-panel h5 {
  font-size: var(--type-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--control-row-gap) 0;
  padding-bottom: var(--control-row-gap);
  border-bottom: var(--border-width-1) solid var(--color-border-light);
}

/* Up/down styling for direction indicators */
.up, td.up, .up strong {
  color: var(--color-success-text);
}

.down, td.down, .down strong {
  color: var(--color-danger-text);
}

/* Significance styling */
.significant, td.significant, .significant strong {
  color: var(--color-accent-text);
}

.not-significant {
  color: var(--color-text-tertiary);
}

/* Gene-heatmap hover details */
.hover-context-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: 280px;
  padding: var(--control-box-padding-y) var(--control-box-padding-x);
  pointer-events: none;
  opacity: var(--opacity-0);
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  border: var(--border-width-1) solid var(--color-border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: var(--type-control);
  line-height: var(--leading-relaxed);
  transform: translateY(var(--space-1));
  transition:
    opacity var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.hover-context-tooltip.visible {
  opacity: var(--opacity-100);
  transform: translateY(0);
}

.hover-context-tooltip .gene-name {
  margin-bottom: var(--space-1);
  color: var(--color-text-primary);
  font-size: var(--type-heading);
  font-weight: var(--font-weight-semibold);
}

.hover-context-tooltip .group-name {
  margin-bottom: var(--space-1-5);
  color: var(--color-text-secondary);
}

.hover-context-tooltip .stat-row {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-0-5);
}

.hover-context-tooltip .stat-label {
  color: var(--color-text-secondary);
}

.hover-context-tooltip .stat-value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.hover-context-tooltip .stat-value.positive {
  color: var(--color-success-text);
}

.hover-context-tooltip .stat-value.negative {
  color: var(--color-danger-text);
}

.hover-context-tooltip .divider {
  margin: var(--space-1-5) 0;
  border-top: var(--border-width-1) solid var(--color-border-default);
}

.modal-gene-section {
  margin-top: var(--control-block-gap);
}

/* ========================================================================= */
/* Options forms (analysis/options/render-options-form.js)                    */
/* ========================================================================= */

/* The essentials, then "More options" with one disclosure per purpose. */
.analysis-options-form {
  display: flex;
  flex-direction: column;
  gap: var(--control-block-gap);
}

.analysis-options-essentials {
  display: flex;
  flex-direction: column;
  gap: var(--control-block-gap);
}

.analysis-options-group > .disclosure-content,
.analysis-more-options > .disclosure-content {
  display: flex;
  flex-direction: column;
  gap: var(--control-block-gap);
}

/* Nested groups sit flush in "More options": no second panel surface. */
.analysis-more-options > .disclosure-content {
  background: transparent;
  padding-inline: 0;
}

.analysis-options-changed {
  flex: 0 0 auto;
  color: var(--color-accent-text);
}

/* A text-weight action: Reset, All / None / Invert, Add set, Import. */
.analysis-link-btn {
  align-self: flex-start;
  min-height: var(--control-target-min);
  padding: 0 var(--space-1);
  border: none;
  background: none;
  font: inherit;
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.analysis-link-btn:hover {
  color: var(--color-text-primary);
}

.analysis-link-btn:focus-visible {
  outline: var(--border-width-2) solid var(--color-accent);
  outline-offset: 1px;
}

.analysis-options-reset {
  align-self: flex-end;
}

.analysis-number-input[aria-invalid="true"],
.analysis-options-form input[aria-invalid="true"] {
  border-color: var(--color-danger-text);
}

/* Toggle chips (Exclude genes): each a button with aria-pressed. */
.analysis-flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.analysis-flag {
  min-height: var(--control-target-min);
  padding: 0 var(--space-2);
  border: var(--border-width-1) solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--type-hint);
  cursor: pointer;
}

.analysis-flag[aria-pressed="true"] {
  background: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
}

.analysis-flag:focus-visible {
  outline: var(--border-width-2) solid var(--color-accent);
  outline-offset: 1px;
}

/* A short state beside a result or a group: skipped, Cached, low n, stale. */
.analysis-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-surface-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--type-hint);
  line-height: 1.6;
  white-space: nowrap;
}

button.analysis-chip {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.analysis-chip-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.analysis-chip-info {
  background: var(--color-info-soft);
  color: var(--color-info-text);
}

/* How the open cells of a result were chosen: under the result, wrapping
   in a narrow panel (a stratifying field's name can be long). */
.analysis-cell-choice {
  align-self: flex-start;
  max-width: 100%;
  white-space: normal;
}

/* The chip and the gene sample's line under a result, stacked; hidden
   while neither has anything to say. */
.analysis-cell-choice-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.analysis-cell-choice-row[hidden] {
  display: none;
}

/* The gene sample a result read genes for: one warning-toned line that
   fits the narrowest panel (compact counts), a link to Session › Open data:
   Genes read for, with its exact words in the (i) beside it. */
.analysis-gene-read .gene-read-note-row {
  display: inline-flex;
  max-width: 100%;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-warning-soft);
}

.analysis-gene-read .gene-read-link {
  color: var(--color-warning-text);
  line-height: 1.6;
}

/* Run: one muted line above it says why it is disabled; nothing below it. */
.analysis-run-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.analysis-run-reason {
  margin: 0;
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
}

/* ========================================================================= */
/* Group picker (analysis/ui/components/group-picker.js)                      */
/* ========================================================================= */

.group-picker-toggle {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* In the top layer, placed under its toggle. */
.group-picker-panel {
  position: fixed;
  inset: var(--group-picker-top, auto) auto var(--group-picker-bottom, auto) var(--group-picker-left, 0);
  width: var(--group-picker-width, 280px);
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: var(--space-2);
  border: var(--border-width-1) solid var(--color-border-default);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  gap: var(--space-1);
}

.group-picker-panel:popover-open {
  display: flex;
}

.group-picker-grip {
  display: none;
}

.group-picker-actions {
  display: flex;
  gap: var(--space-1);
}

.group-picker-summary {
  margin: 0;
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
}

.group-picker-list {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.group-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 28px;
  padding-inline: var(--space-1);
  font-size: var(--type-control);
  cursor: pointer;
}

.group-picker-row:hover {
  background: var(--color-surface-tertiary);
}

.group-picker-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
}

.group-picker-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-picker-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-hint);
  color: var(--color-text-tertiary);
}

.group-picker-footer {
  display: flex;
  justify-content: flex-end;
}

/* A phone shows the picker as a bottom sheet. */
@media (max-width: 720px) {
  .group-picker-panel {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 75dvh;
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border-width: var(--border-width-1) 0 0;
  }

  .group-picker-panel::backdrop {
    background: var(--color-surface-overlay);
  }

  .group-picker-grip {
    display: block;
    align-self: center;
    width: 40px;
    height: 4px;
    margin-bottom: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-border-default);
  }

  .group-picker-list {
    max-height: none;
    flex: 1 1 auto;
  }

  .group-picker-row {
    height: 36px;
  }
}

/* ========================================================================= */
/* Gene set editor (analysis/ui/components/gene-set-editor.js)               */
/* ========================================================================= */

.gene-set-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gene-set-rows > .gene-set-row + .gene-set-row {
  border-top: var(--border-width-1) solid var(--color-border-light);
}

.gene-set-row > .disclosure-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.gene-set-missing {
  color: var(--color-warning-text);
}

.gene-set-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.gene-set-name-row > input {
  flex: 1 1 auto;
  min-width: 0;
}

.gene-set-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.gene-set-chips:empty {
  display: none;
}

/* One gene, in a set editor or a signature result: a pill, as it can carry
   its own remove button. (One rule: an earlier square .gene-chip lost every
   property but its padding to this one.) */
.gene-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: calc(var(--space-0-5) + var(--space-px)) var(--space-2) calc(var(--space-0-5) + var(--space-px)) var(--space-1-5);
  border: var(--border-width-1) solid var(--color-border-light);
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated);
  font-size: var(--type-hint);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.gene-chip-missing {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.gene-chip-remove {
  min-width: 24px;
  min-height: 24px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: var(--opacity-70);
}

.gene-chip-remove:hover,
.gene-chip-remove:focus-visible {
  opacity: 1;
}

.gene-set-tools,
.gene-set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

@media (pointer: coarse) {
  .gene-chip-remove {
    min-width: 32px;
    min-height: 32px;
  }
}

/* A row of chips above a result (skipped groups, low n, not found). */
.analysis-chip-row,
.analysis-result-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1-5);
}

/* What a result compared, its chips and its view switch, above the plot. */
.analysis-result-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-1-5);
}

.analysis-result-line {
  margin: 0;
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
}

.analysis-result-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.analysis-send-to {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* The ranked list: a group per row, its markers beside it. */
.marker-ranked-preview {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
}

.marker-ranked-row {
  display: grid;
  grid-template-columns: minmax(6rem, 30%) 1fr;
  gap: var(--space-1-5);
  padding: var(--space-0-5) 0;
  border-bottom: var(--border-width-1) solid var(--color-border-light);
  font-size: var(--type-hint);
}

.marker-ranked-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
}

.marker-ranked-genes {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
}

/* A gene of a result: choosing it colours the cells by it. */
.analysis-gene-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.analysis-gene-link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.analysis-gene-link:focus-visible {
  outline: var(--border-width-2) solid var(--color-accent);
  outline-offset: 1px;
}

/* Sortable table headers: the whole header is the button. */
.analysis-sort-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* A result that no longer matches its form: dimmed until the next run. */
.analysis-result-stale > :not(.analysis-stale-chip) {
  opacity: var(--opacity-55);
}

.analysis-stale-chip {
  margin-bottom: var(--space-1);
}

/* An analysis form: its lead (a page selector), the options and the Run row,
   one rhythm apart; inside the options, rows are spaced by the form's gaps
   alone, so every row stands the same distance from the one above. */
.analysis-form {
  display: flex;
  flex-direction: column;
  gap: var(--control-block-gap);
}

.analysis-form > * {
  margin-top: 0;
}

.analysis-options-form .control-block {
  margin-top: 0;
}