/* =========================================================
   MSCinteract · quickcheck_mscs.css
   Interactive explorer: control panel / stat cards / charts / expression matrix
   ========================================================= */

.iq { display: flex; flex-direction: column; gap: 16px; }

/* ---------------- Dataset title bar ---------------- */

.iq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(120deg, #ffffff, #f4f8ff);
  box-shadow: var(--shadow-sm);
}
.iq-head__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.iq-head__title { font-size: 17px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
/* the dataset name inside the chip wraps instead of stretching the header */
.iq-head__title .chip { max-width: 100%; white-space: normal; overflow-wrap: break-word; text-align: left; }
.iq-head__file { font-family: var(--mono); font-size: 11.5px; color: var(--muted); word-break: break-all; }
.iq-head__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.iq-head__actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
/* the dataset picker of the header card */
.iq-head__field { min-width: 240px; }
.iq-head__select { min-width: 240px; max-width: 100%; }

/* ---------------- Two column body ---------------- */

.iq-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.iq-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* The column grows with its content: nothing scrolls inside it. */
}
/* It only sticks to the top while the whole column fits into the viewport,
   a taller column would hide its own top while the page scrolls. */
.iq-side.is-sticky {
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.iq-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.iq-block { display: flex; flex-direction: column; gap: 10px; }
.iq-block__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iq-block__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow-wrap: break-word; }
.iq-row { display: flex; gap: 8px; align-items: center; }
.iq-row > .input { flex: 1; min-width: 0; }
.iq-row--wrap { flex-wrap: wrap; }
/* every button of a button row gets the same size and look */
.iq-row--buttons > .btn { flex: 1 1 110px; min-width: 110px; text-align: center; }

/* ---------------- Autocomplete ---------------- */

.autocomplete { position: relative; }
.autocomplete__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.autocomplete__list[hidden] { display: none; }
.autocomplete__item {
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.autocomplete__item:hover, .autocomplete__item.is-active { background: var(--accent-soft); color: var(--accent-dark); }
.autocomplete__item small { font-family: var(--font); color: var(--muted); font-size: 11px; }
.autocomplete__item mark { background: #fff0b3; color: inherit; border-radius: 2px; }
/* alternative name that was typed instead of the symbol of the dataset */
.autocomplete__alias {
  font-family: var(--font);
  font-size: 11px;
  color: var(--muted);
  margin-left: 3px;
  letter-spacing: 0;
}
/* The line at the bottom of the list. It is a quiet note about how much is
   there, not part of the results: small type, soft colour, a hairline above. */
.autocomplete__foot {
  margin-top: 3px;
  padding: 5px 9px 3px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--muted);
  opacity: .78;
}

/* ---------------- Gene chips ---------------- */

/* The selected genes are the one place that keeps an inner scroll: the list
   can hold hundreds of chips, and the card has to stay a sensible size. */
.gene-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; }
.gene-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 9px;
  border-radius: 999px;
  background: var(--teal-soft);
  border: 1px solid #c8ece7;
  color: #0b7d74;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}
.gene-chip.is-focus { background: var(--amber-soft); border-color: #f0d9b6; color: #a9631f; }
.gene-chip__x {
  border: 0;
  background: rgba(0, 0, 0, .06);
  color: inherit;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  line-height: 1;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}
.gene-chip__x:hover { background: rgba(0, 0, 0, .16); }

/* ---------------- Stat cards ---------------- */

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.stat-card {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}
.stat-card__label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-card__value { font-size: 19px; font-weight: 660; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 2px; }
.stat-card__sub { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

/* ---------------- Chart panel ---------------- */

.chart-panel { display: flex; flex-direction: column; }
.chart-tabs { display: flex; gap: 4px; background: var(--bg-soft); padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.chart-tab {
  border: 0;
  background: transparent;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-soft);
}
.chart-tab[aria-selected="true"] { background: var(--panel); color: var(--accent-dark); box-shadow: var(--shadow-xs); }

.chart-panel__body { padding: 12px 16px 14px; }
.chart-body { padding: 0; }
.chart-body svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.chart-legend__scale { display: inline-flex; align-items: flex-end; gap: 6px; }
.chart-legend__ramp { display: block; overflow: visible; }
/* the strip keeps its own size: the generic rule of the chart body would
   stretch every svg to the full width of the panel */
.chart-body .chart-legend__ramp { width: auto; height: auto; }
.chart-legend__tick { font-size: 9.5px; fill: var(--muted); }
.chart-legend__tick-line { stroke: var(--line-strong); stroke-width: 1; }

/* Controls: the hint on its own line, the controls in one grid.
   The grid columns have the same width on every screen size and the
   fields stay aligned when the panel gets narrow. */
.chart-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.chart-controls__hint { font-size: 12px; color: var(--muted); }
.chart-controls__grid {
  display: grid;
  /* auto-fill keeps the column width stable: the fields do not stretch
     when a chart type brings fewer controls */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px 16px;
  align-items: end;
}
.chart-controls__grid .field { min-width: 0; }
/* the segmented buttons keep their own width instead of filling the column */
.chart-controls__grid .chart-tabs { justify-self: start; }
.chart-controls__grid .select { min-width: 0; }

/* Bar chart: it carries only two controls, so the generic auto-fill grid
   would strand the order picker in the middle of an otherwise empty row. The
   bar layout gives the free space to the focus gene and pushes the order
   picker to the right end of the row. */
.chart-controls__grid--bar {
  grid-template-columns: minmax(0, 1fr) auto;
}
.chart-controls__grid--bar > .field:last-child { justify-self: end; }
/* the focus gene picker does not need the whole row: a gene symbol is short,
   so the field keeps a reading width and the rest of the row stays empty */
.chart-controls__grid--bar > .field:first-child { max-width: 240px; }
/* the value of a field that only shows text */
.field__text { font-size: 13px; color: var(--ink); min-height: 34px; display: flex; align-items: center; }
/* a slider and its number share one row, as tall as a select */
.field--slider .field__row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.field--slider .range { flex: 1 1 auto; min-width: 0; }
.field__value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}
.chart-canvas { position: relative; }
.chart-canvas canvas { display: block; width: 100%; }

.axis-label { font-size: 10.5px; fill: var(--muted); }
.axis-title { font-size: 11px; fill: var(--ink-soft); font-weight: 600; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.box { fill: rgba(47, 109, 246, .14); stroke: var(--accent); stroke-width: 1.2; }
.box--teal { fill: rgba(18, 179, 166, .14); stroke: var(--teal); }
.box--amber { fill: rgba(224, 134, 43, .16); stroke: var(--amber); }
.box--rose { fill: rgba(217, 68, 95, .13); stroke: var(--rose); }
.box--grey { fill: rgba(107, 120, 151, .12); stroke: #93a0bd; }
.point { fill: var(--accent); opacity: .85; }
.point--focus { fill: var(--amber); stroke: #7a4a11; stroke-width: 1.2; }
.heat-label { font-size: 9.5px; fill: var(--ink-soft); }
.heat-col-label { font-size: 10px; fill: var(--muted); }
.heat-row-label { font-size: 10.5px; fill: var(--ink-soft); font-family: var(--mono); }
/* A real gene symbol is set in italics. An Ensembl identifier, which names no
   gene yet, keeps the plain type of the other labels. */
.heat-row-label.is-gene { font-style: italic; }

/* ---------------- Table toolbar ---------------- */

.table-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.table-bar__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-bar__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pager__btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  cursor: pointer;
  color: var(--ink-soft);
}
.pager__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); }
.pager__btn:disabled { opacity: .45; cursor: not-allowed; }

.matrix { font-size: 12px; }
.matrix th { font-family: var(--mono); font-size: 10.5px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.matrix td { font-family: var(--mono); font-size: 11.5px; padding: 5px 8px; }
.matrix td.gene { font-family: var(--font); font-weight: 600; font-size: 12.5px; }
/* A real gene symbol is set in italics. An Ensembl identifier, which names no
   gene yet, keeps the plain type of the other labels. */
.matrix td.gene.is-gene { font-style: italic; }
.matrix .cell-max { color: var(--accent-dark); font-weight: 700; }
.matrix .cell-zero { color: #b3bdd2; }

/* the hints of the matrix panel share one line on the right */
.panel__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }

.summary-table td.sample-name { font-family: var(--mono); font-size: 12px; }
/* The table ends at the bottom of the panel: the border of the panel is the
   bottom line, the last row does not draw a second one. */
.summary-table tbody tr:last-child td { border-bottom: 0; }
.bar-cell { position: relative; }
.bar-cell__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  background: rgba(47, 109, 246, .16);
  border-radius: 3px;
  z-index: 0;
}
.bar-cell span { position: relative; z-index: 1; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

@media (max-width: 1180px) {
  .iq-layout { grid-template-columns: 1fr; }
  .iq-side, .iq-side.is-sticky { position: static; }
  .split { grid-template-columns: 1fr; }
}

/* narrow panel: the two bar controls stack instead of squeezing each other */
@media (max-width: 520px) {
  .chart-controls__grid--bar { grid-template-columns: 1fr; }
  .chart-controls__grid--bar > .field:last-child { justify-self: stretch; }
  /* stacked, both controls use the whole width again */
  .chart-controls__grid--bar > .field:first-child { max-width: none; }
}