/* --- base --- */
html, body { height: 100%; }
body { margin:0; font-family: system-ui, sans-serif; color:#111; }

:root{
  --bg: #fff;
  --fg: #111;
  --border: #e5e7eb;      /* <- the bottom line color */
  --header-h: 56px;       /* keep this in sync with your design */
}

/* Plot controls */
#status { color: var(--fg); }
#ctrls { display:flex; align-items:center; gap:8px; }
.label-controls { display:inline-flex; align-items:center; gap:0; }
.label-controls .legend-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 32px;
}
.label-controls .label-step-button {
  min-width: 32px;
  padding: 4px 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.label-controls .legend-tab:disabled {
  cursor: default;
  opacity: 0.42;
}
body.screate-cell-browser-page #plotToolbar .label-controls .legend-tab {
  border-radius: 0;
}
body.screate-cell-browser-page #plotToolbar #decreaseLabels {
  border-radius: 6px 0 0 6px;
}
body.screate-cell-browser-page #plotToolbar #increaseLabels {
  margin-left: -1px;
}
body.screate-cell-browser-page #plotToolbar #increaseLabels {
  border-radius: 0 6px 6px 0;
}
.inline { margin-right:2px; }
input[type="text"], select, button { padding:6px 8px; font-size:14px; }
input[type="text"] { width:240px; }
.spacer { flex: 1 1 auto; }
.divider { width:1px; height:24px; background:var(--border); margin:0 6px; }
.cxg { display:inline-flex; align-items:center; margin-left:8px; }
.cxg img { height:22px; width:auto; opacity:0.9; }
.hidden { display:none !important; }
#l1bar, #l1sbar { display:none; gap:8px; align-items:center; }

/* --- main: legend (left) + plot (middle) + information (right) --- */
#main{
  display: flex;
  align-items: stretch;
  height: calc(100vh - var(--header-h));
  min-height: 480px;
}


/* legend styling */
#legend .title {
  font-weight: 600;
  margin-bottom: 8px;
  color: #111;               /* ensure it's not grey */
}
#legend .lg-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px; border-radius: 6px; cursor: pointer;
}
#legend .lg-item:hover { background: rgba(0,0,0,0.06); }
#legend .swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }
#legend .group { font-size: 13px; }

/* right plot area */
#plotWrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
  container-name: cell-plot-panel;
}

.plot-title-banner {
  box-sizing: border-box;
  flex: 0 0 calc(var(--panel-banner-unit, 34px) * 2);
  min-width: 0;
  display: flex;
  align-items: center;
  margin: -10px -10px 10px;
  padding: 0 12px;
  background: rgba(221, 240, 225, .78);
  color: var(--screate-accent, #086f69);
}

#plotTitle {
  min-width: 0;
  margin: 0;
  font-family: var(--screate-font-sans, system-ui, sans-serif);
  font-size: 28px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--screate-accent, #086f69);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#plotFeatureDetail {
  width: 100%;
  min-width: 0;
  margin: 0;
  font: 400 12px/1.35 var(--screate-font-sans, system-ui, sans-serif);
  color: var(--screate-muted, #68737b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A single centered toolbox with Labels and Plots partitions. Individual
   control rows scroll when a narrow panel cannot show every icon at once. */
.plot-tools-row {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}
.plot-tools-row > .plot-toolbar { max-width: calc(100% - 144px); }
body.screate-cell-browser-page #plotWrap #plotCornerActions {
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px !important;
  border: 0;
  border-radius: 0 5px 5px 0;
  background: transparent !important;
  box-shadow: none;
}
body.screate-cell-browser-page #plotWrap #plotCornerActions::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  width: 1px;
  background: var(--screate-line, #dce3df);
  pointer-events: none;
}
body.screate-cell-browser-page #plotWrap #plotCornerActions:empty { display: none !important; }
body.screate-cell-browser-page #plotWrap #plotCornerActions .modebar-btn {
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
}
body.screate-cell-browser-page #plotWrap #plotCornerActions .modebar-btn svg { width: 15px; height: 15px; }
body.screate-cell-browser-page #plotWrap #plotCornerActions .modebar-btn::before,
body.screate-cell-browser-page #plotWrap #plotCornerActions .modebar-btn::after { display: none !important; }
/* Evidence pages remain available, but their document icons are hidden here. */
body.screate-cell-browser-page .trait-evidence-link,
body.screate-cell-browser-page .cell-evidence-link { display: none !important; }
.plot-toolbar {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 6px;
  border: 1px solid var(--screate-line, #dce3df);
  border-radius: 6px;
  background: rgba(255, 254, 251, .94);
  box-shadow: var(--screate-shadow, 0 2px 10px rgba(23, 35, 33, .07));
}
#plotFeatureTitle > #plotPlaybackControls {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 5;
}

.plot-color-controls,
.plot-actions {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}
.plot-color-controls { flex: 1 1 auto; flex-wrap: nowrap; max-width: 100%; }
.plot-actions { position: relative; flex: 0 1 auto; flex-wrap: nowrap; }
.plot-actions::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  width: 1px;
  background: var(--screate-line, #dce3df);
  pointer-events: none;
}
#plotToolbar .label-controls .legend-tab { font-size: 12px; padding-inline: 7px; }
#plotToolbar .label-controls .label-step-button { min-width: 26px; padding-inline: 5px; font-size: 16px; }
.plot-footer {
  display: flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
body.screate-cell-browser-page #plotFooter #status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#plot .colorbar[data-screate-control="scale-mode"],
#plot .colorbar[data-screate-control="scale-mode"] * {
  /* Plotly disables SVG pointer events by default. Restore them for the
     colorbar so its hand cursor, hover hint and toggle are discoverable. */
  pointer-events: all;
}
#plot .colorbar[role="button"],
#plot .colorbar[role="button"] * {
  cursor: pointer;
}
#plot .colorbar[role="button"]:focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: 3px;
}
#colorScaleTooltip {
  position: fixed;
  z-index: 10001;
  box-sizing: border-box;
  width: 235px;
  max-width: calc(100vw - 16px);
  padding: 9px 12px;
  border-radius: 7px;
  color: #fff;
  background: var(--screate-accent-dark, #07544f);
  box-shadow: 0 3px 12px rgba(23, 35, 33, 0.18);
  font: 12px/1.45 var(--screate-font-sans, system-ui, sans-serif);
  pointer-events: none;
}
#colorScaleTooltip[hidden] { display: none; }

.plot-toolbar label {
  flex: 0 0 auto;
  line-height: 32px;
  font-size: 13px;
  font-weight: 600;
}

#plotColorSelect {
  box-sizing: border-box;
  flex: 0 1 165px;
  width: 165px;
  min-width: 0;
  max-width: 100%;
  height: 32px;
  padding: 4px 8px 4px 29px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

#plotModebarHost {
  position: relative;
  box-sizing: border-box;
  flex: 0 1 auto;
  margin-left: 0;
  max-width: 100%;
  min-height: 34px;
}

/* The external viewer and circular Autoplay share one banner control height. */
#plotPlaybackControls #cxgLink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  width: max-content;
  height: 32px;
  max-width: 100%;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--screate-control-line, var(--border));
  border-radius: 6px;
  background: var(--screate-panel, #fff);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  text-decoration: none;
}
#plotPlaybackControls #cxgLink:hover { border-color: var(--screate-accent, #086f69); }
#plotPlaybackControls #cxgLink:focus-visible { outline: 2px solid var(--screate-accent, #086f69); outline-offset: 2px; }
#plotPlaybackControls #cxgLink img { flex: 0 0 auto; height: 18px; width: auto; }
#plotPlaybackControls #cxgLink .cxg-external-icon { flex: 0 0 14px; width: 14px; height: 14px; }

.plot-select-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}
.plot-select-control .plot-select-icon {
  position: absolute;
  z-index: 1;
  left: 9px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--screate-accent-dark, #07544f);
}
.plot-select-control:has(select:disabled) .plot-select-icon { opacity: .55; }
.plot-label-toolbar { box-sizing: border-box; min-height: 34px; max-width: 100%; overflow-x: auto; flex: 0 1 auto; }
.plot-label-toolbar > * { flex: 0 0 auto; }
.plot-view-history { flex: 0 0 auto; min-height: 34px; }
#labelFontControls { min-width: 50px; }
#arrangeLabels,
#resetLabelPositions { flex: 0 0 24px; border-radius: 5px; }
#arrangeLabels svg,
#resetLabelPositions svg { fill: none; }
#arrangeLabels[aria-pressed="true"] { color: white; background: var(--screate-accent, #3c7470); }
#automaticLabels { flex: 0 0 24px; border-radius: 5px; }
#automaticLabels[aria-pressed="true"] { color: white; background: var(--screate-accent, #3c7470); }
#automaticLabels:focus-visible { outline: 2px solid var(--screate-accent, #3c7470); outline-offset: 1px; }
#arrangeLabels:focus-visible,
#resetLabelPositions:focus-visible { outline: 2px solid var(--screate-accent, #3c7470); outline-offset: 1px; }
body.screate-cell-browser-page #plotWrap #improveLabelPositions {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 3px 1px;
  border: 1px solid transparent;
  color: var(--screate-accent-dark, #07544f);
  font: 600 10px/1.2 var(--screate-font-sans, system-ui, sans-serif);
  white-space: nowrap;
}
#improveLabelPositions:hover:not(:disabled) { background: var(--screate-control-fill, #e8f2f0); }
#improveLabelPositions:focus-visible { outline: 2px solid var(--screate-accent, #3c7470); outline-offset: 1px; }
#improveLabelPositions:disabled { cursor: default; opacity: .45; }
#improveLabelPositions[aria-busy="true"] { cursor: progress; }
.plot-toolbox-title { color:var(--screate-muted,#68766f); font:650 10px/1.2 var(--screate-font-sans,system-ui,sans-serif); }
body.screate-cell-browser-page #plotWrap #toggleLabels.plot-label-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:0; height:auto; padding:0; border:0; border-radius:0;
  background:transparent; box-shadow:none; color:var(--screate-accent-dark,#07544f);
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; cursor:default;
}
body.screate-cell-browser-page #plotWrap .label-placement-controls {
  margin-inline:3px!important; padding-inline:5px!important;
  border-inline-start:1px solid var(--screate-line,#d5ded9);
  border-inline-end:0;
}
body.screate-cell-browser-page #plotWrap #improveLabelPositions.modebar-btn {
  flex:0 0 24px; width:24px; height:24px; padding:2px; border-radius:5px;
}
#improveLabelPositions svg,#hideLabels svg { fill:none; }
body.screate-cell-browser-page #plotModebarHost .modebar {
  padding:0!important; border:0; box-shadow:none; background:transparent!important;
}
.label-signal-slot { width: max-content; height: 26px; }
#labelSignalSlot[hidden] { display: none !important; }

#plotModebarSlot,
#plotModebarSlot .modebar-container {
  position: static !important;
  width: max-content !important;
  height: auto !important;
}

#plotModebarSlot .modebar {
  position: static !important;
}

body.screate-cell-browser-page #plotWrap #clusterOutlineControls { gap: 1px; }
body.screate-cell-browser-page #plotWrap #toggleClusterOutlines path { fill: none !important; }
body.screate-cell-browser-page #plotWrap .cluster-outline-coverage {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0 3px 0 0;
  height: 24px;
  font: 11px/1.2 var(--screate-font-sans, system-ui, sans-serif);
  color: var(--screate-muted, #68757a);
}
body.screate-cell-browser-page #plotWrap #clusterOutlinePercent,
body.screate-cell-browser-page #plotWrap #clusterOutlineSmoothness {
  box-sizing: border-box;
  width: 43px;
  min-width: 0;
  height: 24px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--screate-control-line, #cddbd7);
  border-radius: 4px;
  background: var(--screate-panel, #fff);
  color: var(--screate-accent-dark, #07544f);
  font: inherit;
  text-align: center;
}
body.screate-cell-browser-page #plotWrap .cluster-outline-smoothing { gap: 3px; margin-left: 3px; }
#clusterOutlinePercent:disabled,
#clusterOutlineSmoothness:disabled { opacity: .45; }
#clusterOutlinePercent:focus-visible,
#clusterOutlineSmoothness:focus-visible { outline: 2px solid var(--screate-accent, #086f69); outline-offset: 1px; }

#plotModebarSlot .modebar-btn::after,
#labelFontControls .modebar-btn::after,
#labelFontControls .modebar-btn::before,
#plotModebarSlot .modebar-btn:not([data-title="Download plot as PNG"])::before {
  display: none !important;
}

#plotColorSelect:disabled {
  cursor: default;
  opacity: 0.55;
}

#emphasizeHighValues,
#toggleColorScale,
#toggleLabels {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 32px;
  padding: 4px 9px;
  border: 1px solid var(--screate-control-line, var(--border));
  border-radius: 6px;
  color: var(--screate-accent-dark, #305c59);
  background: var(--screate-panel, #ffffff);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

#emphasizeHighValues[aria-pressed="true"]:not(:disabled),
#toggleLabels[aria-pressed="true"]:not(:disabled) {
  color: #ffffff;
  background: var(--screate-accent, #3c7470);
  border-color: var(--screate-accent, #3c7470);
}

#toggleLabels { min-width: 82px; font-variant-numeric: tabular-nums; }

#emphasizeHighValues { display: inline-flex; align-items: center; }
.signal-palette-name { min-width: 40px; text-align: center; }

#emphasizeHighValues:hover:not(:disabled),
#toggleColorScale:hover:not(:disabled),
#toggleLabels:hover:not(:disabled) {
  border-color: var(--screate-accent-dark, #305c59);
  box-shadow: 0 0 0 1px var(--screate-accent-dark, #305c59);
}

#emphasizeHighValues:focus-visible,
#toggleColorScale:focus-visible,
#toggleLabels:focus-visible {
  outline: 2px solid var(--screate-accent, #3c7470);
  outline-offset: 2px;
}

#emphasizeHighValues:disabled,
#toggleColorScale:disabled,
#toggleLabels:disabled {
  cursor: default;
  opacity: 0.5;
}

#plotViewport {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
/* The native scale can share the bottom dock without shifting the data axes. */
#plot .main-svg:has(.colorbar) { overflow: visible; }

.plot-bottom-toolbar {
  --plot-bottom-control-height: 46px;
  position: absolute;
  z-index: 3;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 12px);
  max-width: 800px;
  pointer-events: none;
  container-type: inline-size;
  container-name: plot-bottom-tools;
}
#plotColorbarSlot { flex: 1 1 350px; min-width: 60px; max-width: 350px; height: calc(var(--plot-bottom-control-height) - 8px); pointer-events: none; }
#plotColorbarSlot[hidden] { display: none !important; }

/* One Scale box: controls on the left, native Plotly colorbar on the right.
   Keep its bar area transparent and non-intercepting: the actual SVG scale
   below it remains visible, interactive, and included in plot exports. */
body.screate-cell-browser-page #plotWrap #plotScaleToolbar {
  position: static;
  box-sizing: border-box;
  height: var(--plot-bottom-control-height);
  flex: 1 1 600px;
  width: 600px;
  max-width: 600px;
  min-width: 0;
  gap: 10px;
  padding: 3px 8px !important;
  background: transparent !important;
  pointer-events: none;
}
.plot-scale-controls {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  border-radius: 4px;
  background: transparent;
  pointer-events: auto;
}
body.screate-cell-browser-page #plotWrap #plotScaleToolbar[hidden] { display: none !important; }
.plot-scale-title {
  padding: 0 3px;
  color: var(--screate-muted, #657571);
  font-size: 11px;
  font-weight: 700;
}
.plot-scale-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.screate-cell-browser-page #plotWrap .plot-toolbox button:not(.modebar-btn) {
  height: 24px;
  min-height: 24px;
  padding: 3px 5px;
  border-color: transparent;
  border-radius: 5px;
  font-size: 11px;
  box-shadow: none;
}
#toggleColorScale { min-width: 62px; }
#toggleColorScale::after { content: ' ⇄'; }

/* These are actions, not read-only legend captions. Override the compact
   toolbox reset so both controls retain a visible button edge and affordance. */
body.screate-cell-browser-page #plotWrap #plotScaleToolbar .plot-scale-actions > button {
  height: 28px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid var(--screate-accent, #086f69);
  border-radius: 5px;
  background: var(--screate-accent-soft, #e8f2ef);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(23, 65, 58, .14);
  cursor: pointer;
}
#emphasizeHighValues::after { content: '↻'; font-size: 14px; line-height: 1; }
body.screate-cell-browser-page #plotWrap #plotScaleToolbar .plot-scale-actions > button:hover:not(:disabled) {
  border-color: var(--screate-accent-dark, #07544f);
  background: var(--screate-control-fill, #dcece7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 3px rgba(23, 65, 58, .24);
}
body.screate-cell-browser-page #plotWrap #plotScaleToolbar .plot-scale-actions > button:active:not(:disabled) {
  box-shadow: inset 0 1px 3px rgba(23, 65, 58, .2);
}
body.screate-cell-browser-page #plotWrap #plotScaleToolbar .plot-scale-actions > button:focus-visible {
  outline: 2px solid var(--screate-accent-dark, #07544f);
  outline-offset: 2px;
}
body.screate-cell-browser-page #plotWrap #plotScaleToolbar .plot-scale-actions > button:disabled {
  cursor: default;
  box-shadow: none;
}

/* Adapt to the plot panel, not the browser window: resized side rails can
   leave a narrow plot even on desktop. Keep the palette name visible so the
   scale toggle is identifiable at every width. */
@container plot-bottom-tools (max-width: 680px) {
  #plotScaleTitle { display: none; }
}
@container plot-bottom-tools (max-width: 360px) {
  #plotBottomToolbar .plot-scale-actions { gap: 3px; }
  body.screate-cell-browser-page #plotWrap #plotScaleToolbar .plot-scale-actions > button { padding-inline: 4px; }
  #toggleColorScale { min-width: 58px; }
}

/* All label controls belong to the top-left Labels toolbox. */
.label-signal-controls {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: max-content;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--screate-control-line, #cdd8d5);
  border-radius: 0;
  background: transparent;
  color: var(--screate-accent-dark, #305c59);
}
.label-signal-controls[hidden] { display: none; }
body.screate-cell-browser-page #labelSignalControls button {
  width: 26px;
  min-width: 26px;
  min-height: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 600 18px/1 system-ui, sans-serif;
  cursor: pointer;
}
body.screate-cell-browser-page #labelSignalControls button:hover:not(:disabled) {
  background: var(--screate-accent-soft, #e3efeb);
}
body.screate-cell-browser-page #labelSignalControls button:disabled { opacity: .4; cursor: default; }
body.screate-cell-browser-page #labelSignalControls button:focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: -2px;
}
.label-signal-caption {
  display: flex;
  gap: 3px;
  align-items: center;
  padding: 0 5px;
  white-space: nowrap;
  font: 700 13px/1.2 system-ui, sans-serif;
}
#labelSignalPercent {
  box-sizing: border-box;
  width: 36px;
  min-width: 0;
  height: 22px;
  padding: 1px 3px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
#labelSignalPercent::-webkit-inner-spin-button,
#labelSignalPercent::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.label-signal-unit { font-size: 11px; font-weight: 500; }

/* keep the plot square without JS */
#plot {
  width: min(92vmin, 100%);
  height: min(92vmin, 100%);
}

/* tooltip */
#tooltip {
  position: fixed; pointer-events:none; display:none;
  background:rgba(0,0,0,0.85); color:#fff; padding:4px 6px;
  border-radius:4px; font-size:12px; z-index:10;
}

/* full-screen spinner overlay */
#spinnerOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  z-index: 9999;
}
.spinner {
  width: 54px; height: 54px; border: 6px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.spinner-text { color:#fff; margin-top:10px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,0.4); }
@keyframes spin { to { transform: rotate(360deg); } }


/* info content */
.info-body h3 {
  margin: 0 0 6px 0;
  font-weight: 600;
  color: #111;
}
.info-body .muted { color: #555; font-size: 13px; }
.info-body .kv { margin-top: 10px; }
.info-body .kv h4 {
  margin: 10px 0 4px 0; font-size: 13px; font-weight: 700; color:#222;
}
.info-body .chips { display:flex; flex-wrap:wrap; gap:6px; }
.info-body .chip {
  display:inline-block; padding:2px 6px; border:1px solid #e3e3e3; border-radius:12px;
  font-size:12px; background:#fafafa;
}
.info-body .para { white-space: pre-wrap; line-height: 1.4; }


/* --- Simple Settings popup --- */
.umap-settings-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.umap-settings {
  background: #fff; border-radius: 8px; padding: 16px; width: 320px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25); font: 14px/1.4 system-ui, sans-serif;
}
.umap-settings h3 { margin: 0 0 10px; font-size: 16px; }
.umap-settings .row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
.umap-settings input { width: 90px; padding: 4px 6px; }
.umap-settings .actions { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }
.umap-settings button { padding: 6px 10px; }
.umap-settings .settings-hint {
  margin: -2px 0 12px;
  color: var(--screate-muted, #64727e);
  font-size: 12px;
  line-height: 1.4;
}
.umap-settings select:disabled { opacity: 0.55; cursor: not-allowed; }


.legend-tabs { display:flex; gap:.5rem; margin: .25rem 0 .5rem; }
.legend-tab { padding: .25rem .5rem; border: 1px solid var(--border,#ddd); background: #fff; cursor:pointer; border-radius:6px; }
.legend-tab.active { background: #eee; font-weight:600; }
.legend-list { max-height: calc(100vh - 220px); overflow:auto; }

#top .icon-btn { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
#top .icon-btn img { height: 24px; vertical-align: middle; }
.hot{color:#c00;font-weight:700;}

/* Make clickable gene chips and section headers show a hand cursor */
.info-body .gene-chip,
.info-body .gene-chip * { cursor: pointer; }

.info-body h4.clickable { cursor: pointer; }
.info-body .info-gene-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.info-body .info-gene-heading > span { min-width: 0; }

/* (optional) small hover affordance */
.info-body .gene-chip:hover { background: #f0f0f0; }
.info-body h4.clickable:hover { text-decoration: underline; }

.pin-btn[aria-pressed="true"], .pin-btn.active { filter: saturate(2); transform: scale(1.05); }
.pin-btn { border: 0; background: transparent; cursor: pointer; }

/* Default left:middle:right = 1.25:2:1; the plot fills the remaining 8/17.
   Inline widths from manual resizing take precedence. */
.side-rail {
  position: relative;
  width: calc(100% * 4 / 17);
  min-width: 220px;
  max-width: 1200px;
  padding: 10px 8px;
  overflow: hidden;
  resize: horizontal;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(0,0,0,0.08);
  border-top: 0;
  border-bottom: 0;
  box-sizing: border-box;
}

#legendPane.side-rail {
  width: calc(100% * 5 / 17);
  border-right: 1px solid rgba(0,0,0,0.08);
  border-left: 0;
}
#infoPane.side-rail    {
  border-left: 1px solid rgba(0,0,0,0.08);
  border-right: 0;
  /* keep native resize handle on the left by letting the browser draw it on the leading edge */
  direction: rtl;
}
#infoPane.side-rail * { direction: ltr; }

/* Full-height inner edges; leave the native bottom-corner grips accessible. */
.rail-resize-handle {
  position: absolute;
  top: 0;
  bottom: 16px;
  width: 7px;
  z-index: 3;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
#legendWidthHandle { right: 0; }
#infoWidthHandle { left: 0; }
.rail-resize-handle::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--screate-accent, #086f69);
  transition: opacity 120ms ease;
}
.rail-resize-handle:hover::after,
.rail-resize-handle:focus-visible::after { opacity: 0.2; }
.rail-resize-handle.is-resizing::after { opacity: 0.35; }
.rail-resize-handle:focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: -2px;
}
body.resizing-side-rail,
body.resizing-side-rail * {
  cursor: col-resize !important;
  user-select: none !important;
}

.split-pane,
.legend-pane,
.info-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0;
  min-width: 0;
}

.pane-title {
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin: 0;
}

.pane-body {
  overflow: auto;
  overflow-x: hidden;
  padding: 4px 0;
  min-height: 0;
  flex: 1 1 0;
}

.split-handle {
  height: 8px;                           /* larger hit area */
  cursor: row-resize;
  background: transparent;
  border-top: 1px solid rgba(0,0,0,0.06);
  flex: 0 0 auto;
  min-width: 0;
  min-height: 8px;
  margin: 6px 0;
  position: relative;
  transition: border-color 120ms ease, background 120ms ease;
}

/* centered "grip" line to signal draggable */
.split-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 2px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
}

/* hover: slightly stronger grip + faint background */
.side-rail .split-handle:hover {
  background: rgba(0,0,0,0.03);
  border-top-color: rgba(0,0,0,0.10);
}
.side-rail .split-handle:hover::after {
  background: rgba(0,0,0,0.18);
}

/* dragging: clear but not loud */
.side-rail.dragging .split-handle {
  background: rgba(0,0,0,0.06);
  border-top-color: rgba(0,0,0,0.16);
}
.side-rail.dragging .split-handle::after {
  background: rgba(0,0,0,0.28);
}

.side-rail.dragging,
.side-rail.dragging * { user-select: none !important; }

#legendPane .split-wrap,
#infoPane .split-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0;
}

/* Left/right specific pane pieces */
#legendGroups, #legendAnnos,
#infoTop, #infoBottom { min-height: 0; }

#legendPane .legend-pane,
#infoPane .info-pane { min-height: 80px; }

#legendPane > *,
#infoPane > * { min-height: 0; }

#legendPane .legend-pane-title {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-weight: 600;
}
#infoPane .info-pane-title {
  margin: 0;
  padding: 0 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-weight: 400;
}

/* style toggleLabels like legend tabs */
#toggleLabels.legend-tab {
  border: 1px solid var(--border,#ddd);
  background: #fff;
  border-radius: 6px;
  padding: .25rem .5rem;
}
#toggleLabels.legend-tab.active {
  background: #eee;
}

#legendPane .legend-pane-body,
#infoPane .info-body { padding: 4px 0; flex: 1 1 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; overflow-x: hidden; }

#legendGroupsPane,
#legendAnnosPane,
#infoTopPane,
#infoBottomPane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

#legendGroups,
#legendAnnos {
  flex: 1 1 0;
  min-height: 0;
  overflow: visible;
}

#infoTop,
#infoBottom {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

/* add a bit of space before split bars */
.split-handle { margin-top: 6px; }

.info-body .info-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-body .info-header h3 {
  margin: 0;
}

/* Legend row layout */
.legend-row { display:flex; align-items:center; gap:8px; padding:6px 8px; }
.legend-row .dot { width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,0.15); flex:0 0 auto; }
.legend-row .label {
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Cell-type and tCRE names use one row; long names truncate instead of
   pushing the count/score away or increasing the row height on resize. */
#legendGroups .legend-row,
#legendAnnos:has(.legend-tab[data-key="tcres"].active) .legend-row {
  white-space: nowrap !important;
}
#legendGroups .legend-row .label,
#legendAnnos:has(.legend-tab[data-key="tcres"].active) .legend-row .label {
  min-width: 0;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  overflow: hidden;
}
#legendGroups .legend-row .legend-name,
#legendAnnos:has(.legend-tab[data-key="tcres"].active) .legend-row .legend-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#legendGroups .legend-row.has-umap-label .legend-name {
  font-weight: 700;
}

#legendAnnos:has(.legend-tab[data-key="tcres"].active) .legend-row .avg {
  flex: 0 0 auto;
}

.info-body h3,
.info-body .info-header h3 {
  word-break: break-all;
  overflow-wrap: anywhere;
}
.legend-row .label .avg { font-variant-numeric: tabular-nums; opacity: 0.9; }
.legend-row .right { flex:0 0 auto; color:rgba(0,0,0,0.3); font-size:12px; margin-left:8px; }
.gene-set-controls { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:4px 8px; flex:0 0 auto; }
.gene-set-controls button, .gene-set-details summary { font:inherit; font-size:12px; line-height:1.25; }
.gene-set-controls button { padding:4px 6px; border:1px solid #c6d8d5; border-radius:5px; color:#386c68; background:#fff; cursor:pointer; }
.gene-set-controls button:disabled { opacity:.45; cursor:default; }
.gene-set-controls .gene-set-color { background:#386c68; color:white; }
.gene-set-details { min-width:85px; }
.gene-set-details summary { color:#386c68; cursor:pointer; font-weight:600; white-space:nowrap; }
.gene-set-details[open] { flex-basis:100%; }
.gene-set-members { display:flex; flex-wrap:wrap; gap:4px; max-height:85px; overflow:auto; padding:5px 0; }
.gene-set-add { flex:0 0 20px; width:20px; height:20px; padding:0; border:1px solid transparent; border-radius:4px; background:transparent; color:#386c68; font:600 17px/18px sans-serif; cursor:pointer; }
.gene-set-add:hover, .gene-set-add:focus-visible, .gene-set-add.is-added { background:#e1efec; border-color:#a7c6bf; }
.gene-set-add:focus-visible, .gene-set-controls button:focus-visible { outline:2px solid #386c68; outline-offset:1px; }
.gene-query-note { padding:4px 8px; color:#647578; font-size:12px; overflow-wrap:anywhere; }
.legend-row,
.legend-row * {
  user-select: none;
  -webkit-user-select: none;
}

/* space before "Groups" panel */
#legendPane .legend-pane:first-child .legend-pane-title { margin-top: 10px; }
#infoPane .info-pane:first-child .info-pane-title { margin-top: 10px; }

/* Filter box spans 90% of the left pane */
#legendPane .legend-filter {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}

#plot .annotation text { cursor: pointer; }
#plot .annotation,
#plot .annotation text,
#plot .annotation rect,
#plot .annotation path {
  pointer-events: auto !important;
  cursor: pointer;
}

/* ---- make labels pretty: no box, outlined text ---- */
#plot .annotation rect {
  display: none !important;  /* removes the white rectangle/background */
}

#plot .annotation text {
  fill: #111 !important;                 /* text color */
  font-weight: 600;
  letter-spacing: 0.2px;

  /* outline */
  paint-order: stroke fill;              /* draw stroke behind fill */
  stroke: rgba(255,255,255,0.95);        /* white outline */
  stroke-width: 3px;                     /* thickness */
  stroke-linejoin: round;

  /* subtle halo for readability */
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.9));
}


/* hover: tint the outline */
#plot .annotation text:hover {
  stroke: rgba(255, 160, 160, 0.95);
  filter: drop-shadow(0 0 3px rgba(255, 160, 160, 0.9));
}

/* Arranged labels can use spare side margins without changing the data axes. */
#plot.smart-label-placement .main-svg { overflow: visible; }
#plot.smart-label-placement .annotation rect { display: block !important; }
#plot.smart-label-placement .annotation text {
  stroke-width: 1.5px;
  filter: none;
}
#plot.smart-label-placement .annotation,
#plot.smart-label-placement .annotation text,
#plot.smart-label-placement .annotation rect { cursor: grab; }
#plot.smart-label-placement.cell-label-dragging .annotation,
#plot.smart-label-placement.cell-label-dragging .annotation * { cursor: grabbing; }
#plot.smart-label-placement .annotation path { pointer-events: none !important; }

/* Cluster colors stay on the borders; white label backgrounds are the default.
   Optional tint is presentation-only and never changes the numeric dot scale. */
#plot .annotation.cluster-outline-label .annotation-text-g rect.bg {
  display: block !important;
  fill: #fff !important;
  fill-opacity: 1 !important;
  stroke: var(--cluster-group-color) !important;
  stroke-opacity: .75 !important;
  stroke-width: var(--cluster-label-outline-width, 1px) !important;
  rx: 3px;
  ry: 3px;
}
#plot .annotation.cluster-outline-label.cluster-label-palette-fill .annotation-text-g rect.bg {
  fill: color-mix(in srgb, var(--cluster-group-color) 20%, white) !important;
  fill-opacity: .96 !important;
}
#plot .annotation.cluster-outline-label text {
  fill: #172b28 !important;
  stroke: none;
  filter: none;
}
#plot .annotation.cluster-outline-label:hover .annotation-text-g rect.bg {
  stroke-opacity: 1 !important;
}


#groupLevelBtns .legend-tab.active { pointer-events: none; }
/* Match Annotations spacing for the Groups tabs */
#legendGroupsPane #groupLevelBtns.legend-tabs {
  margin: 8px 0 10px;   /* bigger top/bottom than the default .legend-tabs */
  padding: 0 8px;       /* align with panel’s inner padding */
}

/* make scope button look like the selected scope row */
#scopeBtn.active {
  font-weight: 700;     /* bold */
}

/* gray bracketed label in Cells/Features headers */
.legend-pane-title .muted {
  color: #777;
  font-weight: normal;
}

/* header: text on the left, close button on the right */
.legend-pane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

/* the text block itself */
.legend-title-text {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.legend-pane-title .pane-actions {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 24px;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Compact header actions: clear and copy use the same geometry as the
   pane droplet controls, with purpose-specific feedback states. */
:is(.legend-pane-title, .info-pane-title) .pane-action-button,
#viewSummary .pane-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  flex: 0 0 24px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #64727e;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: visible;
}

:is(.legend-pane-title, .info-pane-title) .pane-action-button svg,
#viewSummary .pane-action-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

:is(.legend-pane-title, .info-pane-title) .ask-ai-button {
  color: var(--screate-accent-dark, #07544f);
}

.info-pane-title :is(.feature-info-link, .cell-info-link) {
  color: var(--screate-accent-dark, #07544f);
  text-decoration: none;
}
.info-pane-title :is(.feature-info-link, .cell-info-link)[hidden] { display: none; }
.info-pane-title :is(.feature-info-link, .cell-info-link):hover {
  background: var(--screate-accent-soft, #dcefeb);
  border-color: rgba(8, 111, 105, 0.2);
}
.info-pane-title :is(.feature-info-link, .cell-info-link):focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: 1px;
}
.info-pane-title :is(.feature-info-link, .cell-info-link):active {
  color: #fff;
  background: var(--screate-accent, #086f69);
}

:is(.legend-pane-title, .info-pane-title) .ask-ai-button svg {
  stroke-width: 1.25;
}

:is(.legend-pane-title, .info-pane-title) .ask-ai-button:hover:not(:disabled) {
  background: var(--screate-accent-soft, #dcefeb);
  border-color: rgba(8, 111, 105, 0.2);
}

:is(.legend-pane-title, .info-pane-title) .ask-ai-button:focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: 1px;
}

:is(.legend-pane-title, .info-pane-title) .ask-ai-button:active:not(:disabled) {
  color: #fff;
  background: var(--screate-accent, #086f69);
}

:is(.legend-pane-title, .info-pane-title) .ask-ai-button:disabled {
  color: var(--screate-muted, #64727e);
  opacity: 0.4;
  cursor: default;
}

#infoPane .info-pane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.legend-pane-title .pane-copy-button:hover,
.legend-pane-title .pane-copy-button:focus-visible {
  color: var(--screate-accent-dark, #07544f);
  background: var(--screate-accent-soft, #dcefeb);
  border-color: rgba(8, 111, 105, 0.2);
  outline: none;
}

.legend-pane-title .pane-copy-button:focus-visible,
.legend-pane-title .selection-clear:focus-visible,
#viewSummary .selection-clear:focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: 1px;
}

.legend-pane-title .pane-copy-button:active,
.legend-pane-title .pane-copy-button.is-copied {
  color: #fff;
  background: var(--screate-accent, #086f69);
  border-color: var(--screate-accent, #086f69);
}

.legend-pane-title .selection-clear,
#viewSummary .selection-clear {
  color: #9b5b56;
}

.legend-pane-title .selection-clear:hover,
.legend-pane-title .selection-clear:focus-visible,
#viewSummary .selection-clear:hover,
#viewSummary .selection-clear:focus-visible {
  color: #9d3029;
  background: #f9e8e6;
  border-color: rgba(157, 48, 41, 0.2);
}

.legend-pane-title .selection-clear:active,
#viewSummary .selection-clear:active {
  color: #fff;
  background: #9d3029;
  border-color: #9d3029;
}

.legend-pane-title .pane-copy-button.is-copying {
  cursor: progress;
  opacity: 0.65;
}

.legend-pane-title .copy-popup {
  position: absolute;
  z-index: 50;
  top: calc(100% + 7px);
  right: -2px;
  min-width: max-content;
  padding: 4px 7px;
  border-radius: 5px;
  color: #fff;
  background: rgba(23, 35, 33, 0.96);
  box-shadow: 0 4px 14px rgba(23, 35, 33, 0.2);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 0s linear 120ms;
}

.legend-pane-title .copy-popup::before {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 100%;
  border: 4px solid transparent;
  border-bottom-color: rgba(23, 35, 33, 0.96);
}

.legend-pane-title .pane-copy-button.show-copy-popup .copy-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.legend-pane-title .pane-copy-button.copy-failed .copy-popup {
  background: #9d3029;
}

.legend-pane-title .pane-copy-button.copy-failed .copy-popup::before {
  border-bottom-color: #9d3029;
}

/* unify left+right header look */
#legendPane .legend-pane-title,
#infoPane .info-pane-title {
  margin: 0 !important;
  padding: 8px 10px !important;          /* same vertical spacing */
  padding-left: 0 !important;            /* flush-left text */
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  font-weight: 400 !important;           /* non-bold */
  box-sizing: border-box;
}

/* keep legend header flex for the clear button */
#legendPane .legend-pane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.legend-pane-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;      /* pick your steady height */
  height: 32px;          /* hard lock so no twitch */
  padding: 6px 8px;
  box-sizing: border-box;
  white-space: nowrap;   /* prevent wrap changing height */
}

.legend-pane-title .legend-title-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-pane-title .selection-clear.hidden {
  visibility: hidden;    /* IMPORTANT: keeps space */
  pointer-events: none;
}

/* Inner container for annotation lists; outer pane handles scrolling */
.legend-anno-body {
  height: 100%;
}

/* In the Features panel, let #legendAnnos handle scrolling,
   not the inner .legend-list */
#legendAnnos .legend-list {
  overflow-y: visible;
  max-height: none;
  height: auto;
}

/* ------------------------------------------------------------------
   Rows-only scrolling for left legend panels.
   The panel headers, tab rows, group selectors, and filter boxes stay fixed;
   only the actual Cells / Traits / Genes row lists scroll.
   This intentionally replaces the earlier sticky-control approach.
   ------------------------------------------------------------------ */

/* Outer dynamic panel bodies should NOT be the scroll containers. */
#legendGroups,
#legendAnnos {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Static controls inside the dynamic panel bodies. */
#legendGroups > .legend-search,
#legendGroups > .legend-tabs,
#legendAnnos > .legend-search,
#legendAnnos > .legend-tabs,
#legendAnnos .legend-anno-body > .legend-search,
#legendAnnos .legend-list > .legend-search {
  flex: 0 0 auto !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: var(--bg);
}

/* Features panel: tabs are fixed above the scrollable rows. */
#legendAnnos > .legend-tabs {
  margin: 8px 0 10px !important;
  padding: 0 8px !important;
}

/* The renderLegendWithTabs body / plain-list host should fill remaining height,
   but should not itself scroll. */
#legendAnnos .legend-anno-body,
#legendAnnos .legend-list,
#legendGroups .legend-list {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* The only vertical scrollbars in the left panels should be on row lists. */
#legendGroups .legend-rows,
#legendAnnos .legend-rows {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 4px;
}

/* Keep text inputs/selects fully visible in the fixed controls. */
#legendGroups .legend-search,
#legendAnnos .legend-search {
  box-sizing: border-box;
}

#legendGroups .legend-filter,
#legendAnnos .legend-filter {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* ------------------------------------------------------------------
   Rows-only scrolling fix v3.
   Hide the orphan empty direct .legend-list created by renderLegendWithTabs.
   That empty flex child was the source of the huge blank gap above the
   Group/filter controls in the Features panel.
   ------------------------------------------------------------------ */
#legendAnnos > .legend-list:empty,
#legendAnnos > .legend-list:not(:has(*)) {
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#legendAnnos > .legend-anno-body.rows-only-root,
#legendAnnos > .legend-list.rows-only-root {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

#legendAnnos > .legend-tabs + .rows-only-root {
  margin-top: 0 !important;
}

#legendAnnos .rows-only-root > .legend-search {
  flex: 0 0 auto !important;
}

#legendAnnos .trait-search-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

#legendAnnos .trait-search-controls .legend-filter {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
}

#legendAnnos .feature-search-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
#legendAnnos .feature-search-controls .legend-filter {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
}
#featureAutoplay[hidden] { display: none !important; }

/* Separate search/play controls from rows in Cells and all feature tabs. */
:is(#legendGroups, #legendAnnos) .legend-search:has(> .legend-filter) {
  margin-bottom: 7px;
}

#legendAnnos .rows-only-root > .legend-rows {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Traits are browsed as lazy, expandable groups inside the existing
   .legend-rows scrollbar. Collapsed groups contain no trait-row DOM. */
#legendAnnos .trait-accordion {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 4px 8px;
}

#legendAnnos .trait-group-section {
  border-bottom: 1px solid var(--border);
}

#legendAnnos .trait-group-heading {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

#legendAnnos .trait-category-compare-link,
#legendAnnos .trait-code-compare-link,
#legendAnnos .trait-evidence-link,
#legendGroups .cell-evidence-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 26px;
  padding: 3px;
  border-radius: 4px;
  color: var(--screate-accent-dark, #07544f);
  text-decoration: none;
}

#legendAnnos .trait-code-compare-link { align-self: center; margin-right: 3px; }
#legendAnnos .trait-evidence-link,
#legendGroups .cell-evidence-link {
  align-self: center;
  flex-basis: 20px;
  width: 20px;
  height: 22px;
  padding: 2px;
  cursor: pointer;
}

#legendAnnos .trait-category-compare-link svg,
#legendAnnos .trait-code-compare-link svg,
#legendAnnos .trait-evidence-link svg,
#legendGroups .cell-evidence-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#legendAnnos .trait-category-compare-link:hover,
#legendAnnos .trait-code-compare-link:hover,
#legendAnnos .trait-evidence-link:hover,
#legendGroups .cell-evidence-link:hover {
  background: var(--screate-accent-soft, #dcefeb);
}

#legendAnnos .trait-category-compare-link:focus-visible,
#legendAnnos .trait-code-compare-link:focus-visible,
#legendAnnos .trait-evidence-link:focus-visible,
#legendGroups .cell-evidence-link:focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: -2px;
}

#legendAnnos .trait-group-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

#legendAnnos .trait-group-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
}

#legendAnnos .trait-group-toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

#legendAnnos .trait-group-chevron {
  flex: 0 0 12px;
  width: 12px;
  height: 16px;
}

#legendAnnos .trait-group-chevron::before {
  content: "›";
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 14px;
  transform-origin: 45% 50%;
  transition: transform 120ms ease;
}

#legendAnnos .trait-group-toggle[aria-expanded="true"] .trait-group-chevron::before {
  transform: rotate(90deg);
}

/* Category → named trait → individual sumstats. Parent names select the
   average; the separate disclosure button only expands/collapses members. */
#legendAnnos .trait-code-row {
  display: flex;
  align-items: stretch;
  min-width: 0;
  margin-left: 14px;
  border-radius: 4px;
}
#legendAnnos .trait-code-row:hover { background: var(--screate-accent-soft, #dcefeb); }
/* Keep the selected branch visible even when its contents are collapsed. */
#legendAnnos .trait-group-toggle.has-selection,
#legendAnnos .trait-code-row.has-selection { background: #fbe6e3; }
#legendAnnos .trait-group-toggle.has-selection:hover,
#legendAnnos .trait-code-row.has-selection:hover { background: #f8dad6; }
#legendAnnos .trait-code-toggle,
#legendAnnos .trait-code-pick {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
#legendAnnos .trait-code-toggle { flex: 0 0 24px; justify-content: center; padding: 7px 4px; }
#legendAnnos .trait-code-pick { flex: 1 1 auto; gap: 7px; padding: 7px 6px 7px 0; }
#legendAnnos .trait-code-pick .label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#legendAnnos .trait-code-pick .avg { margin-right: 5px; color: var(--screate-muted, #64727e); font-size: 12px; }
#legendAnnos .trait-code-pick .dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
#legendAnnos .trait-code-count { flex: 0 0 auto; color: var(--screate-muted, #64727e); font-size: 12px; }
#legendAnnos .trait-code-pick .hot { font-weight: 700; color: #c6251b; }
#legendAnnos .trait-code-toggle[aria-expanded="true"] .trait-group-chevron::before { transform: rotate(90deg); }
#legendAnnos .trait-code-toggle:focus-visible,
#legendAnnos .trait-code-pick:focus-visible { outline: 2px solid var(--screate-accent, #086f69); outline-offset: -2px; }
#legendAnnos .trait-code-items .legend-row { padding-left: 44px !important; font-size: .94em; }

#legendAnnos .trait-group-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

#legendAnnos .trait-group-count {
  flex: 0 0 auto;
  color: #666;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

#legendAnnos .trait-group-score {
  flex: 0 0 auto;
  color: var(--screate-accent-dark, #086f69);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

#legendAnnos .trait-group-items {
  padding: 1px 0 5px;
}

#legendAnnos .trait-group-items .legend-row {
  padding-left: 25px !important;
}

#legendAnnos .trait-group-note {
  padding: 6px 8px 7px 25px;
  font-size: 12px;
}

/* Scope chooser: Overview stays fixed while the grouped scopes scroll. */
#legendGroups .scope-list {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#legendGroups .scope-overview-row {
  flex: 0 0 auto;
  padding: 4px 8px 2px;
}

#legendGroups .scope-search {
  flex: 0 0 auto;
  padding: 4px 8px 6px;
}

#legendGroups .scope-accordion {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 4px 8px;
}

#legendGroups .scope-group-section {
  border-bottom: 1px solid var(--border);
}

#legendGroups .scope-group-toggle,
#legendGroups .scope-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  color: var(--fg);
  background: transparent;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

#legendGroups .scope-group-toggle {
  gap: 7px;
  padding: 8px 6px;
  font-weight: 600;
}

#legendGroups .scope-item {
  gap: 8px;
  padding: 7px 8px 7px 25px;
}

#legendGroups .scope-item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

#legendGroups .scope-item-count {
  flex: 0 0 auto;
  color: var(--screate-muted, #65747c);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

#legendGroups .scope-item.is-empty {
  color: var(--screate-muted, #65747c);
}

#legendGroups .scope-item.is-selected {
  color: #ac302c;
  background: #fae9e6;
  font-weight: 700;
}

#legendGroups .scope-overview {
  padding-left: 8px;
  font-weight: 600;
}

#legendGroups .scope-group-toggle:hover,
#legendGroups .scope-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

#legendGroups .scope-group-toggle:focus-visible,
#legendGroups .scope-item:focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: -2px;
}

#legendGroups .scope-item.is-active:not(.is-selected) {
  color: var(--screate-accent-dark, #07544f);
  background: var(--screate-accent-soft, #dcefeb);
  font-weight: 700;
}

#legendGroups .scope-group-chevron {
  flex: 0 0 12px;
  width: 12px;
  height: 16px;
}

#legendGroups .scope-group-chevron::before {
  content: "›";
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 14px;
  transform-origin: 45% 50%;
  transition: transform 120ms ease;
}

#legendGroups .scope-group-toggle[aria-expanded="true"] .scope-group-chevron::before {
  transform: rotate(90deg);
}

#legendGroups .scope-group-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

#legendGroups .scope-group-count {
  flex: 0 0 auto;
  color: #666;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

#legendGroups .scope-group-items {
  padding: 1px 0 5px;
}

/* ------------------------------------------------------------------
   Two-section left rail.
   Cells and Features retain independent row scrollers and can collapse
   to their header bars without disturbing the plot layout.
   ------------------------------------------------------------------ */

#legendPane .legend-pane-content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}


.pane-collapse,
.pane-color-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  flex: 0 0 24px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #64727e;
  line-height: 1;
  cursor: pointer;
}

.pane-collapse svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: transform 140ms ease;
}

.pane-color-button .droplet-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.pane-collapse:hover,
.pane-collapse:focus-visible,
.pane-color-button:hover:not(:disabled),
.pane-color-button:focus-visible {
  color: var(--screate-accent-dark, #07544f);
  background: var(--screate-accent-soft, #dcefeb);
  border-color: rgba(8, 111, 105, 0.2);
  outline: none;
}

.pane-collapse:focus-visible,
.pane-color-button:focus-visible {
  outline: 2px solid var(--screate-accent, #086f69);
  outline-offset: 1px;
}

.pane-color-button.active,
.pane-color-button[aria-pressed="true"] {
  color: #fff;
  background: var(--screate-accent, #086f69);
  border-color: var(--screate-accent, #086f69);
}

.pane-color-button.active:hover,
.pane-color-button[aria-pressed="true"]:hover {
  color: #fff;
  background: var(--screate-accent-dark, #07544f);
  border-color: var(--screate-accent-dark, #07544f);
}

.pane-color-button:disabled,
.pane-color-button[aria-disabled="true"] {
  color: #a7b0ad;
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
  opacity: 0.55;
}

/* Compact parent-scope shortcuts stay beside the marker droplet and never
   wrap or take space away from the fixed cell counts. */
#legendGroups .cell-row-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 1px;
}
/* Follow the existing selected-row state, including plot clicks and autoplay.
   Hidden buttons take no room and are excluded from keyboard navigation. */
#legendGroups .cell-selection-clear {
  display: none;
  color: #9b5b56;
}
#legendGroups .legend-row.is-hot .cell-selection-clear {
  display: inline-flex;
}
#legendGroups .cell-selection-clear svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
#legendGroups .cell-selection-clear:is(:hover, :focus-visible) {
  color: #9d3029;
  background: #f9e8e6;
  border-color: rgba(157, 48, 41, 0.2);
}
#legendGroups .cell-selection-clear:active {
  color: #fff;
  background: #9d3029;
  border-color: #9d3029;
}
#legendGroups .cell-trait-ai-button {
  color: var(--screate-accent-dark, #07544f);
}
#legendGroups .cell-trait-ai-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
#legendGroups .cell-row-actions > .pane-color-button:not(:disabled) {
  color: var(--screate-accent, #086f69);
}
#legendGroups .cell-row-actions > .pane-color-button:is(:hover, :focus-visible):not(:disabled) {
  color: var(--screate-accent-dark, #07544f);
}
#legendGroups .cell-parent-scope-button {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  flex: 0 0 24px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}
#legendGroups .cell-parent-scope-button[data-parent-scope="l1s"] {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  flex-basis: 28px;
}

#legendPane .legend-pane.is-collapsed {
  flex: 0 0 var(--panel-banner-height, 32px) !important;
  min-height: var(--panel-banner-height, 32px) !important;
  max-height: var(--panel-banner-height, 32px) !important;
  overflow: hidden;
}

#legendPane .legend-pane.is-collapsed > .legend-pane-content {
  display: none !important;
}

#legendPane .legend-pane.is-collapsed > .legend-pane-title {
  border-bottom-color: transparent !important;
}

#legendPane .legend-pane.is-collapsed .pane-collapse svg {
  transform: rotate(-90deg);
}

#legendPane .split-handle.is-disabled,
#legendPane .legend-pane.is-collapsed + .split-handle,
#legendPane .split-handle:has(+ .legend-pane.is-collapsed) {
  display: none;
}

/* ------------------------------------------------------------------
   SCREATE visual theme.
   Presentation only: plot geometry, scientific colour scales, resizable
   rails, and rows-only scrolling remain unchanged above.
   ------------------------------------------------------------------ */

body.screate-cell-browser-page {
  /* Mirrored from ../assets/screate-theme.css so this browser's source
     snapshot remains a self-contained, reusable release. */
  --screate-paper: #f7f5ef;
  --screate-panel: #fffefb;
  --screate-ink: #172321;
  --screate-muted: #64727e;
  --screate-line: #dce3df;
  --screate-accent: #086f69;
  --screate-accent-dark: #07544f;
  --screate-accent-soft: #dcefeb;
  --screate-amber: #d9911e;
  --screate-control-line: #cbd7d2;
  --screate-shadow: 0 2px 10px rgba(23, 35, 33, 0.07);
  --screate-font-sans: ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --screate-font-display: Georgia, "Times New Roman", serif;

  --bg: var(--screate-panel);
  --fg: var(--screate-ink);
  --border: var(--screate-line);

  overflow: hidden;
  background:
    radial-gradient(circle at 68% 4%, rgba(8, 111, 105, 0.055), transparent 28rem),
    var(--screate-paper);
}

body.screate-cell-browser-page,
body.screate-cell-browser-page button,
body.screate-cell-browser-page input,
body.screate-cell-browser-page select {
  font-family: var(--screate-font-sans);
}

body.screate-cell-browser-page #status {
  color: var(--screate-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* The shared site header owns selection fields; the browser panels fill
   the remaining height and keep all plot controls inside the middle pane. */
body.screate-cell-browser-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
body.screate-cell-browser-page #main { flex: 1 1 0; height: auto; min-height: 0; }
body.screate-cell-browser-page #ctrls { min-width: 0; max-width: 100%; }
body.screate-cell-browser-page #labelControls { flex: 0 0 auto; }

body.screate-cell-browser-page #plotToolbar .legend-tab,
body.screate-cell-browser-page #viewAll {
  color: var(--screate-accent-dark);
  background: var(--screate-panel);
  border-color: var(--screate-control-line);
  border-radius: 6px;
  box-shadow: none;
}

body.screate-cell-browser-page #plotToolbar .legend-tab:hover:not(:disabled),
body.screate-cell-browser-page #viewAll:hover:not(:disabled) {
  color: var(--screate-accent-dark);
  background: var(--screate-accent-soft);
  border-color: var(--screate-accent);
}

body.screate-cell-browser-page #plotToolbar .legend-tab:focus-visible,
body.screate-cell-browser-page #viewAll:focus-visible {
  outline: 2px solid var(--screate-accent);
  outline-offset: 2px;
}

body.screate-cell-browser-page #plotToolbar .legend-tab.active,
body.screate-cell-browser-page #toggleLabels.legend-tab.active,
body.screate-cell-browser-page #groupLevelBtns .legend-tab.active {
  color: #fff !important;
  background: var(--screate-accent);
  border-color: var(--screate-accent);
}

body.screate-cell-browser-page #main {
  background: transparent;
}

body.screate-cell-browser-page .side-rail {
  background: rgba(255, 254, 251, 0.96);
  border-color: var(--screate-line);
}

body.screate-cell-browser-page #legendPane.side-rail {
  border-right-color: var(--screate-line);
}

body.screate-cell-browser-page #infoPane.side-rail {
  border-left-color: var(--screate-line);
}

body.screate-cell-browser-page #plotWrap {
  background:
    radial-gradient(circle at 52% 42%, rgba(255, 254, 251, 0.88), transparent 34rem),
    var(--screate-paper);
}

body.screate-cell-browser-page .plot-toolbar {
  color: var(--screate-accent-dark);
}

body.screate-cell-browser-page #plotColorSelect {
  color: var(--screate-accent-dark);
  background: var(--screate-panel);
  border-color: var(--screate-control-line);
}

body.screate-cell-browser-page #plotColorSelect:hover:not(:disabled) {
  background: var(--screate-accent-soft);
  border-color: var(--screate-accent);
}

body.screate-cell-browser-page #plotColorSelect:focus-visible {
  outline: 2px solid var(--screate-accent);
  outline-offset: 2px;
}

body.screate-cell-browser-page .legend-pane-title,
body.screate-cell-browser-page .info-pane-title {
  color: var(--screate-accent-dark);
  border-bottom-color: var(--screate-line) !important;
  font-size: 13px;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

body.screate-cell-browser-page .legend-pane-title .muted,
body.screate-cell-browser-page .muted,
body.screate-cell-browser-page .info-body .muted,
body.screate-cell-browser-page .legend-row .right,
body.screate-cell-browser-page #legendAnnos .trait-group-count,
body.screate-cell-browser-page #legendGroups .scope-group-count,
body.screate-cell-browser-page #legendAnnos .trait-group-note {
  color: var(--screate-muted);
}

body.screate-cell-browser-page .legend-tab,
body.screate-cell-browser-page #toggleLabels.legend-tab {
  color: var(--screate-accent-dark);
  background: var(--screate-panel);
  border-color: var(--screate-control-line);
}

body.screate-cell-browser-page .legend-tab:hover:not(:disabled),
body.screate-cell-browser-page #toggleLabels.legend-tab:hover:not(:disabled) {
  background: var(--screate-accent-soft);
  border-color: var(--screate-accent);
}

body.screate-cell-browser-page .legend-tab.active,
body.screate-cell-browser-page #toggleLabels.legend-tab.active,
body.screate-cell-browser-page #groupLevelBtns .legend-tab.active {
  color: #fff;
  background: var(--screate-accent);
  border-color: var(--screate-accent);
}

body.screate-cell-browser-page input[type="text"],
body.screate-cell-browser-page input[type="number"],
body.screate-cell-browser-page select {
  color: var(--screate-ink);
  background: var(--screate-panel);
  border: 1px solid var(--screate-control-line);
  border-radius: 6px;
}

body.screate-cell-browser-page input::placeholder {
  color: var(--screate-muted);
  opacity: 0.82;
}

body.screate-cell-browser-page input:focus,
body.screate-cell-browser-page select:focus {
  border-color: var(--screate-accent);
  outline: 2px solid rgba(8, 111, 105, 0.16);
  outline-offset: 0;
}

body.screate-cell-browser-page .legend-row,
body.screate-cell-browser-page #legendAnnos .trait-group-toggle,
body.screate-cell-browser-page #legendGroups .scope-group-toggle,
body.screate-cell-browser-page #legendGroups .scope-item {
  border-radius: 5px;
  transition: background-color 100ms ease;
}

body.screate-cell-browser-page .legend-row:hover,
body.screate-cell-browser-page #legendAnnos .trait-group-toggle:hover,
body.screate-cell-browser-page #legendGroups .scope-group-toggle:hover,
body.screate-cell-browser-page #legendGroups .scope-item:hover {
  background: var(--screate-accent-soft) !important;
}

body.screate-cell-browser-page #legendAnnos .trait-group-toggle:focus-visible,
body.screate-cell-browser-page #legendGroups .scope-group-toggle:focus-visible,
body.screate-cell-browser-page #legendGroups .scope-item:focus-visible {
  outline: 2px solid var(--screate-accent);
  outline-offset: -2px;
}

body.screate-cell-browser-page #legendAnnos .trait-group-section,
body.screate-cell-browser-page #legendGroups .scope-group-section {
  border-bottom-color: var(--screate-line);
}

body.screate-cell-browser-page .split-handle {
  border-top-color: var(--screate-line);
}

body.screate-cell-browser-page .split-handle::after {
  background: var(--screate-control-line);
}

body.screate-cell-browser-page .side-rail .split-handle:hover,
body.screate-cell-browser-page .side-rail.dragging .split-handle {
  background: rgba(8, 111, 105, 0.06);
  border-top-color: rgba(8, 111, 105, 0.24);
}

body.screate-cell-browser-page .side-rail .split-handle:hover::after,
body.screate-cell-browser-page .side-rail.dragging .split-handle::after {
  background: var(--screate-accent);
}

body.screate-cell-browser-page .info-body h3,
body.screate-cell-browser-page .info-body h4 {
  color: var(--screate-ink);
}

body.screate-cell-browser-page .info-body .chip {
  color: var(--screate-accent-dark);
  background: var(--screate-accent-soft);
  border-color: rgba(8, 111, 105, 0.18);
}

body.screate-cell-browser-page .info-body .gene-chip:hover {
  background: var(--screate-accent-soft);
}

body.screate-cell-browser-page a {
  color: var(--screate-accent-dark);
}

body.screate-cell-browser-page .umap-settings {
  color: var(--screate-ink);
  background: rgba(255, 254, 251, 0.98);
  border: 1px solid var(--screate-line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(23, 35, 33, 0.14);
  font-family: var(--screate-font-sans);
}
.umap-settings .dot-border-settings {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--screate-line, #d5ded9);
  border-radius: 6px;
}
.umap-settings .dot-border-settings legend { color: var(--screate-accent-dark, #07544f); font-weight: 600; }
.umap-settings .dot-border-settings .row input[type="checkbox"] { flex: 0 0 auto; }
.umap-settings .dot-border-settings .row input[type="color"] { height: 30px; padding: 2px; cursor: pointer; }

body.screate-cell-browser-page #plotWrap .modebar,
body.screate-cell-browser-page #plotWrap .plot-toolbox {
  display: flex !important;
  align-items: center;
  gap: 2px;
  padding: 3px !important;
  background: rgba(255, 254, 251, 0.94) !important;
  border: 1px solid var(--screate-line);
  border-radius: 6px;
  box-shadow: var(--screate-shadow);
}

body.screate-cell-browser-page #plotWrap .modebar-group {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.screate-cell-browser-page #plotWrap .modebar-group:empty { display: none !important; }

/* Icon-only Labels and Plots groups retain separate scrolling control rows. */
body.screate-cell-browser-page #plotWrap .plot-headed-toolbox {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: max-content;
  max-width: 100%;
  padding: 0 !important;
  overflow: hidden;
}
body.screate-cell-browser-page #plotWrap #plotToolbar .plot-headed-toolbox {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
body.screate-cell-browser-page #plotWrap #plotToolbar #plotLabelToolbar { border-radius: 5px 0 0 5px; }
body.screate-cell-browser-page #plotWrap #plotToolbar #plotModebarHost { border-radius: 0 5px 5px 0; }
.plot-toolbox-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 21px;
  padding: 3px 7px;
  border-bottom: 1px solid var(--screate-line, #d5ded9);
  /* Match the Cells/Features banners from panel-banners.css. */
  background: #a9d8d4;
  color: #154743;
  font: 650 10px/1.2 var(--screate-font-sans, system-ui, sans-serif);
  white-space: nowrap;
  text-align: center;
}
.plot-toolbox-heading .plot-toolbox-title { color: inherit; }
/* Fill each toolbar section so every icon shares the same centerline. */
.plot-toolbox-controls {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 1px;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 30px;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.plot-toolbox-controls > * { flex: 0 0 auto; }
/* Horizontal scrolling remains available without a scrollbar shifting icons up. */
#plotToolbar .plot-toolbox-controls { scrollbar-width: none; }
#plotToolbar .plot-toolbox-controls::-webkit-scrollbar { display: none; }
body.screate-cell-browser-page #plotWrap .plot-headed-toolbox .modebar,
body.screate-cell-browser-page #plotWrap .plot-headed-toolbox .modebar-group { gap: 1px; }
body.screate-cell-browser-page #plotWrap .plot-headed-toolbox .modebar {
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

body.screate-cell-browser-page #plotWrap .modebar-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px;
  min-width: 24px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 4px !important;
  color: var(--screate-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  opacity: 1;
  cursor: pointer;
}

body.screate-cell-browser-page #plotWrap .modebar-btn[data-title="Download plot as PNG"],
body.screate-cell-browser-page #plotWrap .modebar-btn[aria-label="Download plot as PNG"] {
  position: relative;
  margin-left: 6px !important;
}
body.screate-cell-browser-page #plotWrap .plot-headed-toolbox .modebar-btn[data-title="Download plot as PNG"],
body.screate-cell-browser-page #plotWrap .plot-headed-toolbox .modebar-btn[aria-label="Download plot as PNG"] {
  margin-left: 4px !important;
}

body.screate-cell-browser-page #plotWrap .modebar-btn[data-title="Download plot as PNG"]::before,
body.screate-cell-browser-page #plotWrap .modebar-btn[aria-label="Download plot as PNG"]::before {
  content: "";
  display: block !important;
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -4px;
  width: 1px;
  height: auto;
  border: 0;
  background: var(--screate-line);
  pointer-events: none;
}
body.screate-cell-browser-page #plotWrap .plot-headed-toolbox .modebar-btn[data-title="Download plot as PNG"]::before,
body.screate-cell-browser-page #plotWrap .plot-headed-toolbox .modebar-btn[aria-label="Download plot as PNG"]::before {
  left: -3px;
}

body.screate-cell-browser-page #plotWrap .modebar-btn svg {
  position: static !important;
  width: 15px;
  height: 15px;
}

body.screate-cell-browser-page #plotWrap .modebar-btn path {
  fill: currentColor !important;
}
/* These line icons must not inherit Plotly's filled-path icon rule. */
body.screate-cell-browser-page #plotWrap #arrangeLabels path,
body.screate-cell-browser-page #plotWrap #improveLabelPositions path,
body.screate-cell-browser-page #plotWrap #resetLabelPositions path,
body.screate-cell-browser-page #plotWrap #hideLabels path { fill: none !important; }

body.screate-cell-browser-page #plotWrap .modebar-btn:hover:not(:disabled):not(.disabled):not([aria-disabled="true"]),
body.screate-cell-browser-page #plotWrap .modebar-btn:focus-visible {
  color: var(--screate-accent-dark) !important;
  background: var(--screate-accent-soft) !important;
  border-color: rgba(8, 111, 105, 0.2) !important;
  outline: none;
}

body.screate-cell-browser-page #plotWrap .modebar-btn:focus-visible {
  outline: 2px solid var(--screate-accent);
  outline-offset: 1px;
}

body.screate-cell-browser-page #plotWrap .modebar-btn.active,
body.screate-cell-browser-page #plotWrap .modebar-btn[aria-pressed="true"] {
  color: #fff !important;
  background: var(--screate-accent) !important;
  border-color: var(--screate-accent) !important;
}

body.screate-cell-browser-page #plotWrap .modebar-btn.active:hover,
body.screate-cell-browser-page #plotWrap .modebar-btn[aria-pressed="true"]:hover,
body.screate-cell-browser-page #plotWrap .modebar-btn:active:not(.disabled):not([aria-disabled="true"]) {
  color: #fff !important;
  background: var(--screate-accent-dark) !important;
  border-color: var(--screate-accent-dark) !important;
}

body.screate-cell-browser-page #plotWrap .modebar-btn.disabled,
body.screate-cell-browser-page #plotWrap .modebar-btn:disabled,
body.screate-cell-browser-page #plotWrap .modebar-btn[aria-disabled="true"] {
  color: #a7b0ad !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed;
  opacity: 0.55;
}

body.screate-cell-browser-page .umap-settings h3 {
  color: var(--screate-accent-dark);
  font-family: var(--screate-font-display);
  font-weight: 500;
}

body.screate-cell-browser-page .umap-settings button {
  color: var(--screate-accent-dark);
  background: var(--screate-panel);
  border: 1px solid var(--screate-control-line);
  border-radius: 6px;
}

body.screate-cell-browser-page .umap-settings button:hover {
  background: var(--screate-accent-soft);
  border-color: var(--screate-accent);
}

body.screate-cell-browser-page #tooltip {
  color: #fff;
  background: rgba(23, 35, 33, 0.94);
  border-radius: 6px;
  box-shadow: var(--screate-shadow);
}

body.screate-cell-browser-page #spinnerOverlay {
  background: rgba(23, 35, 33, 0.42);
  backdrop-filter: blur(1px);
}

body.screate-cell-browser-page .spinner {
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: var(--screate-accent-soft);
}

body.screate-cell-browser-page ::-webkit-scrollbar-thumb {
  background: var(--screate-control-line);
  border: 3px solid var(--screate-panel);
  border-radius: 999px;
}

body.screate-cell-browser-page ::-webkit-scrollbar-thumb:hover {
  background: var(--screate-accent);
}

body.screate-cell-browser-page #plotWrap #toggleLabels[hidden] { display: none !important; }

/* Plot controls share the label dialog's single scroll area and footer. */
body.screate-cell-browser-page #plotSettingsFields .umap-settings {
  width: 100%; max-height: none; overflow: visible; padding: 0; margin-bottom: 14px;
  border: 0; border-radius: 0; box-shadow: none; background: transparent; font: inherit;
}
#plotSettingsFields .row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; }
#plotSettingsFields .row input, #plotSettingsFields .row select {
  width: 100%; min-width: 0; min-height: 30px; padding: 4px 7px; font: inherit;
}
#plotSettingsFields .row input[type="checkbox"] { width: auto; justify-self: start; min-height: 0; }
#plotSettingsFields [hidden] { display: none !important; }
@media (max-width: 440px) {
  #plotSettingsFields .row { grid-template-columns: 1fr; gap: 4px; }
}