/* scalable_viewer: two controls scALABLE does not have.
 * scALABLE's own stylesheet is loaded first and is not overridden. This file only
 * styles the dataset chip and the contrast selector, using scALABLE's own custom
 * properties so they match the rest of the page. */

.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-size: 13px;
  white-space: nowrap;
}

.sv-chip > span {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.75;
}

.sv-chip select {
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  max-width: 320px;
}

.sv-chip select option {
  color: var(--ink);
  background: #fff;
}

.sv-contrast-field {
  margin-bottom: 10px;
}

/* ------------------------------------------------------------------ removals
 * A precomputed bundle cannot run a job, so the controls that only configure a
 * run are taken out of the layout. The DOM nodes stay: scALABLE's own app.js
 * reads #results-job-id, #plot-dot-scale, #download-links, #differential-group1,
 * #differential-group2, #differential-sample-field, #differential-progress and
 * #differential-message on every status update. `display: none` removes them
 * from the layout, so no gap is left and the surviving panels take the space. */

.sv-removed {
  display: none !important;
}

/* CHANGE 1: the "3. Results" panel. The Explore grid drops to one column, so
 * Visualization Panel 1 and 2 gain the 340px column plus the 16px gap. */
#explore-controls-panel {
  display: none !important;
}

.explore-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Inline Dot size control, on the row the panel heading used to occupy.
 * `.panel-head-topline` is already a flex row, so the label and its select sit on
 * one line and the header area gets shorter, never taller. */
.sv-dotsize {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}

.sv-dotsize > span {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.sv-dotsize select {
  width: auto;
  min-width: 66px;
  height: 26px;
  min-height: 0;
  padding: 1px 6px;
  font-size: 0.78rem;
  line-height: 1.1;
}

/* ---- Study tab ---- */
.sv-study-title{font-size:1.35rem;font-weight:700;color:#0b3d78;margin:0 0 14px}
.sv-study-card{background:#f6f9fc;border:1px solid #d7e3ef;border-radius:6px;padding:18px 20px;margin-bottom:18px}
.sv-study-desc{margin:0 0 16px;line-height:1.55;color:#22303c}
.sv-study-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:6px 28px}
.sv-study-row{display:flex;gap:8px;font-size:.93rem}
.sv-study-key{font-weight:700;color:#0b3d78;min-width:120px}
.sv-study-val{color:#22303c}
/* Reference and Researchers span every column of the auto-fit grid. In a
   300px cell a paper title wrapped to six lines and a 30-author list to
   twenty-five, next to empty space. */
.sv-study-row--wide{grid-column:1/-1}
.sv-study-row--wide .sv-study-key{flex:0 0 auto}
.sv-study-row--wide .sv-study-val{flex:1 1 auto;max-width:none}
.sv-study-tabs{display:flex;gap:4px;border-bottom:2px solid #d7e3ef;margin-bottom:12px}
.sv-study-subtab{background:none;border:none;padding:8px 16px;cursor:pointer;font-size:.95rem;color:#4a6a86}
.sv-study-subtab{color:#4a6a86}
.sv-study-subtab.active{color:#0b3d78;font-weight:700;border-bottom:3px solid #0b3d78;margin-bottom:-2px}
.sv-study-sub ul{margin:0;padding-left:20px;line-height:1.7}
.sv-study-list li{margin-bottom:4px}
.sv-dim{color:#5c7385;font-size:.88rem}
.sv-study-notice{margin:0 0 12px;padding:8px 12px;border-left:3px solid #b45309;background:#fff7ed;color:#7c2d12;font-size:.9rem}
.sv-study-error{margin:0 0 12px;padding:8px 12px;border-left:3px solid #b91c1c;background:#fef2f2;color:#7f1d1d;font-size:.9rem}
.sv-study-provenance{margin:14px 0 0;font-size:.78rem;color:#7b8a99;word-break:break-all}

/* Sample / download tables: scroll inside the panel, header stays put. */
.sv-sample-tools{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.sv-sample-filter{padding:4px 8px;border:1px solid #cbd5e1;border-radius:4px;font:inherit;font-size:.85rem;min-width:180px}
.sv-sample-count{font-size:.82rem;color:#5c7385}
.sv-sample-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.sv-nav-btn{border:1px solid #cbd5e1;background:#fff;border-radius:4px;padding:3px 9px;cursor:pointer;font-size:.82rem;color:#0b3d78}
.sv-nav-btn:hover{background:#eef4fa}
.sv-sample-page{font-size:.82rem;color:#5c7385;min-width:110px;text-align:center}
.sv-sample-source{margin:0 0 10px;font-size:.86rem;color:#5c7385}
.sv-table-scroll{max-height:460px;overflow:auto;border:1px solid #d7e3ef;border-radius:6px}
.sv-table{border-collapse:collapse;width:100%;font-size:.85rem}
.sv-table th{position:sticky;top:0;z-index:1;background:#eef4fa;color:#0b3d78;text-align:left;padding:7px 10px;border-bottom:1px solid #d7e3ef;cursor:pointer;white-space:nowrap}
.sv-table th .sv-sort{font-style:normal;margin-left:6px;font-size:.7rem;color:#0b3d78}
.sv-table td{padding:6px 10px;border-bottom:1px solid #edf2f7;color:#22303c;white-space:nowrap}
.sv-table tbody tr:nth-child(even){background:#fafcfe}
.sv-file-table{border:1px solid #d7e3ef;border-radius:6px}
.sv-file-table th{cursor:default}
.sv-file-table td{white-space:normal}

/* ---------------------------------------------------------------------------
 * Window count. The Explore results grid is two equal columns, so a wide plot
 * such as a CombPlot across 39 cell states has half the page to draw in. The
 * "Windows" select on panel 1 drops the grid to one column and hides panel 2,
 * and the surviving panel then spans the full width. Nothing is destroyed: the
 * hidden panel keeps its state and returns when the count goes back to 2.
 * ------------------------------------------------------------------------ */
#baseline-results-view.sv-single-window {
  grid-template-columns: minmax(0, 1fr) !important;
}

#baseline-results-view.sv-single-window > .panel:nth-of-type(2) {
  display: none !important;
}

/* The window select sits on the same flex row as Dot size. */
.sv-windows {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Gene-set box. A spreadsheet column pastes in as several lines, so the field
 * is a textarea rather than the one-line input scALABLE ships for a single
 * symbol. The input stays in the DOM, hidden, because scALABLE reads it. */
.sv-geneset {
  width: 100%;
  min-width: 220px;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}

/* ---- Chat tab ---------------------------------------------------------- */
.sv-chat-ask { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.sv-chat-ask textarea {
  flex: 1; font: 13px/1.4 inherit; resize: vertical; min-height: 44px;
}
.sv-chat-examples {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 10px; font-size: 12px;
}
.sv-chat-examples .ghost-btn { font-size: 11px; padding: 3px 8px; }
.sv-chat-answer { margin: 8px 0; }
.sv-chat-views { display: flex; gap: 6px; margin: 8px 0; }
.sv-chat-views .ghost-btn.active { font-weight: 600; text-decoration: underline; }
#sv-chat-table { max-height: 420px; overflow: auto; }
#sv-chat-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
#sv-chat-table th, #sv-chat-table td {
  text-align: left; padding: 3px 8px; border-bottom: 1px solid #e6e6e6;
  white-space: nowrap;
}
#sv-chat-table thead th { position: sticky; top: 0; background: #fff; }