/*!
 * sc_pages.css -- page chrome for the four Single-cell pages.
 *
 * Scoped under .sc- prefixes so nothing here can collide with
 * templatemo_style.css.  The viewer brings its own stylesheet
 * (viewer/cellatlas.css); this file only styles the parts the PHP pages own:
 * the dataset picker, the statistics tables, and the QC panel.
 */

.sc-picker {
  margin: 6px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sc-picker label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.sc-picker select {
  font-size: 13px;
  padding: 5px 9px;
  border: 1px solid #c3c2b7;
  border-radius: 4px;
  background: #fff;
  max-width: 620px;
}

.sc-note {
  font-size: 12.5px;
  color: #555;
  line-height: 1.55;
  margin: 4px 0 12px;
  max-width: 96ch;
}
.sc-note a { color: #2a78d6; }

.sc-empty {
  padding: 22px;
  background: #f8f9fa;
  border: 1px solid #e1e0d9;
  border-radius: 5px;
  color: #555;
  font-size: 13px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* tables                                                              */
/* ------------------------------------------------------------------ */
table.sc-table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0 18px;
  font-size: 12.5px;
}
table.sc-table th,
table.sc-table td {
  border: 1px solid #dcdcd6;
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}
table.sc-table th {
  background: #f1f0ec;
  font-weight: 600;
  white-space: nowrap;
}
table.sc-table tr:nth-child(even) td { background: #fafaf8; }
/* Numeric cells hug their content.  The site's layout is a fixed 1630px, so a
   `width:100%` table with only six columns stretched `Rank` and `log2 FC` to
   several hundred pixels each.  `width:1%` is the shrink-to-fit idiom: the
   numeric columns collapse to the widest number, and the slack goes to the
   text columns, which is where a reader wants it. */
table.sc-table td.num,
table.sc-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}
table.sc-table a { color: #2a78d6; text-decoration: none; }
table.sc-table a:hover { text-decoration: underline; }

/* status pills for the QC table ------------------------------------- */
.sc-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid;
}
.sc-pill-ok   { background: #eaf7ea; border-color: #b6ddb6; color: #006300; }
.sc-pill-warn { background: #fdf4e3; border-color: #f0dba8; color: #7a5300; }
.sc-pill-none { background: #f2f2f0; border-color: #dcdcd6; color: #666; }

/* ------------------------------------------------------------------ */
/* QC panel                                                            */
/* ------------------------------------------------------------------ */
.sc-qc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0 26px;
  margin: 10px 0 16px;
}
.sc-qc-row {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid #ececE7;
  font-size: 12.5px;
}
.sc-qc-k { flex: 0 0 165px; color: #666; }
.sc-qc-v { flex: 1 1 auto; min-width: 0; }

.sc-figure {
  margin: 10px 0 16px;
  font-size: 12.5px;
  color: #555;
}
.sc-figure img {
  max-width: 100%;
  border: 1px solid #e1e0d9;
  border-radius: 4px;
  background: #fff;
}

/* ------------------------------------------------------------------ */
/* published-figure cards                                              */
/* ------------------------------------------------------------------ */
/* The site's own UMAPs, shown for datasets that were not re-analysed.
   Deliberately a different shape from the interactive viewer so the two
   are not mistaken for one another. */
/* Capped at 760px rather than 1fr: the site's content column is 1630px wide, so
   a dataset with only one figure (either because the second was never deposited
   or because it was byte-identical to the first) got a single card spanning the
   whole width with a small image adrift in the middle of it. */
.sc-fig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 760px));
  justify-content: start;
  gap: 20px;
  margin: 14px 0 6px;
}
.sc-fig-card {
  background: #fff;
  border: 1px solid #e1e0d9;
  border-radius: 6px;
  overflow: hidden;
}
.sc-fig-head {
  background: #f1f0ec;
  border-bottom: 1px solid #e1e0d9;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #333;
}
.sc-fig-body {
  padding: 12px;
  text-align: center;
}
.sc-fig-body img {
  max-width: 100%;
  max-height: 640px;   /* a very tall UMAP must not push the page's own QC
                          section below the fold on its own */
  height: auto;
  border-radius: 3px;
}

/* callout ------------------------------------------------------------ */
.sc-callout {
  border: 1px solid #e1e0d9;
  border-left-width: 4px;
  border-radius: 4px;
  padding: 11px 15px;
  margin: 12px 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #444;
  max-width: 96ch;
}
.sc-callout b { color: #222; }
.sc-callout-info { background: #f7f9fc; border-left-color: #2a78d6; }
.sc-callout-warn { background: #fdf9ef; border-left-color: #c9861b; }
.sc-callout a { color: #2a78d6; }

/* cell-type chips ---------------------------------------------------- */
.sc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
  align-items: center;
}
.sc-chip {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid #dcdcd6;
  border-radius: 13px;
  background: #fff;
  font-size: 12px;
  color: #2a78d6;
  text-decoration: none;
  white-space: nowrap;
}
.sc-chip:hover { border-color: #2a78d6; background: #f7f9fc; }
.sc-chip.on {
  background: #2a78d6;
  border-color: #2a78d6;
  color: #fff;
  font-weight: 600;
}
.sc-chip em {
  font-style: normal;
  color: #999;
  font-size: 11px;
  margin-left: 5px;
}
.sc-chip.on em { color: #cfe1f7; }
.sc-chips-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #333;
  margin-right: 2px;
}

/* keep wide result tables from pushing the page sideways ------------- */
.sc-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 8px 0 18px;
}
.sc-table-wrap table.sc-table { margin: 0; }

/* gene search box ---------------------------------------------------- */
.sc-search {
  margin: 6px 0 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.sc-search input[type=text] {
  font-size: 13px;
  padding: 5px 9px;
  border: 1px solid #c3c2b7;
  border-radius: 4px;
  min-width: 260px;
}
.sc-search button {
  font-size: 13px;
  padding: 5px 14px;
  border: 1px solid #c3c2b7;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.sc-search button:hover { border-color: #2a78d6; color: #2a78d6; }