/* Data browser - spacelink pkgdown site.
   Colour roles follow the project data-viz palette; sequential ramps are defined
   in app.js (blue = expression, orange = cell-type proportion). */

/* ---- page width ------------------------------------------------------
   This stylesheet is linked only from the Data browser article, so these
   layout overrides apply to that page alone. pkgdown caps an article at
   `.row > main { max-width: 50rem }` and reserves 3 of 12 columns for a
   sidebar that this page never renders - together that leaves ~40% of the
   container empty. The maps are the point of this page, so the column takes
   the full container, and the prose runs to the same width - capping only the
   intro paragraph left it wrapping short while the Notes list, which pkgdown
   nests inside a section wrapper, ran full width. */

.template-article main#main {
  max-width: none;
  flex: 0 0 100%;
  width: 100%;
}

#spacelink-databrowser {
  --dbx-surface: #fcfcfb;
  --dbx-surface-2: #f4f4f1;
  --dbx-border: #dcdcd6;
  --dbx-text: #0b0b0b;
  --dbx-text-2: #52514e;
  --dbx-text-3: #78776f;
  --dbx-accent: #2a78d6;
  --dbx-bar: rgba(120, 119, 111, 0.22);
  --dbx-radius: 8px;
  color: var(--dbx-text);
  margin-bottom: 2rem;
}

[data-bs-theme="dark"] #spacelink-databrowser {
  --dbx-surface: #1a1a19;
  --dbx-surface-2: #242422;
  --dbx-border: #3a3a36;
  --dbx-text: #ffffff;
  --dbx-text-2: #c3c2b7;
  --dbx-text-3: #94938a;
  --dbx-accent: #3987e5;
  --dbx-bar: rgba(148, 147, 138, 0.28);
}

/* ---- controls -------------------------------------------------------- */

.dbx-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem 1rem;
  padding: 0.7rem 0.8rem;
  background: var(--dbx-surface-2);
  border: 1px solid var(--dbx-border);
  border-radius: var(--dbx-radius);
  margin-bottom: 1rem;
}

.dbx-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.dbx-field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dbx-text-3);
  margin: 0;
}

.dbx-field select,
.dbx-field input {
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--dbx-text);
  background: var(--dbx-surface);
  border: 1px solid var(--dbx-border);
  border-radius: 6px;
}

.dbx-field select:focus-visible,
.dbx-field input:focus-visible {
  outline: 2px solid var(--dbx-accent);
  outline-offset: 1px;
}

/* gene combobox */
.dbx-combo { position: relative; }

.dbx-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--dbx-surface);
  border: 1px solid var(--dbx-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  display: none;
}

.dbx-options.open { display: block; }

.dbx-options div {
  padding: 0.32rem 0.55rem;
  font-size: 0.87rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dbx-options div[aria-selected="true"],
.dbx-options div:hover { background: var(--dbx-accent); color: #fff; }

.dbx-options .dbx-empty { color: var(--dbx-text-3); cursor: default; }
.dbx-options .dbx-empty:hover { background: transparent; color: var(--dbx-text-3); }

/* ---- plots ----------------------------------------------------------- */

/* All four panels sit in one row so nothing needs scrolling to reach. The
   columns are deliberately unequal: the expression map is a single square-ish
   section and only needs enough width to read, the proportion panel turns width
   directly into fewer tile rows, and the PoPS table needs room for long trait
   names. An even split would starve the two that need width. */
.dbx-grid {
  display: grid;
  grid-template-columns:
    minmax(220px, 0.95fr)   /* expression map   */
    minmax(280px, 1.25fr)   /* proportion tiles */
    minmax(200px, 1fr)      /* ESV table        */
    minmax(200px, 1fr);     /* PoPS table  - same width as ESV */
  gap: 1rem;
  /* stretch, so every panel ends up the height of the tallest one. The row
     height itself is left to the content: the tables are capped below, which
     is what stops the PoPS table's 61 rows from defining it, and the tile grid
     then sets the height it actually needs for this dataset. */
  align-items: stretch;
}

/* Panels lay out as columns so the scrolling region inside can absorb whatever
   height is left after the headings. */
.dbx-grid > .dbx-panel {
  display: flex;
  flex-direction: column;
}



/* Below the four-across threshold, fall back to 2x2 and then a single column. */
@media (max-width: 1150px) {
  .dbx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dbx-grid { grid-template-columns: 1fr; }
}

.dbx-panel {
  border: 1px solid var(--dbx-border);
  border-radius: var(--dbx-radius);
  padding: 0.7rem 0.8rem 0.8rem;
  background: var(--dbx-surface);
  min-width: 0;
}

.dbx-panel h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.1rem;
  color: var(--dbx-text);
}

.dbx-panel .dbx-sub { font-size: 0.78rem; color: var(--dbx-text-2); margin-bottom: 0.4rem; }

.dbx-canvas-wrap { position: relative; width: 100%; }
.dbx-canvas-wrap canvas { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }

.dbx-tip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  display: none;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--dbx-text);
  background: var(--dbx-surface);
  border: 1px solid var(--dbx-border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.dbx-tip b { font-variant-numeric: tabular-nums; }

/* small multiples: every cell type at once, one shared colour scale.
   Auto-fill rather than a fixed 3 columns: on the full-width layout this packs
   9-14 tiles into 2-3 rows instead of 3-5, which is where most of the vertical
   space for the tables below comes from. */
.dbx-mini-grid {
  align-content: start;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem 0.45rem;
}

.dbx-mini { margin: 0; min-width: 0; }

/* Two fixed lines so long cell-type names stay readable and every mini in a
   row still starts at the same height. */
.dbx-mini figcaption {
  font-size: 0.68rem;
  line-height: 1.2;
  height: 2.4em;
  color: var(--dbx-text-2);
  margin-bottom: 0.15rem;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.dbx-mini canvas { border-radius: 3px; }

@media (max-width: 420px) {
  .dbx-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* colour bar */
.dbx-legend { display: flex; align-items: center; margin-top: 0.45rem; }
.dbx-legend .dbx-bar { flex: 1; height: 10px; border-radius: 5px; border: 1px solid var(--dbx-border); }

/* Ticks sit under the bar: first left, last right, middle centred. The middle
   tick is what keeps a log ramp from being read as linear. */
.dbx-ticks { display: flex; justify-content: space-between; margin-top: 0.2rem; }
.dbx-ticks span { font-size: 0.72rem; color: var(--dbx-text-2); font-variant-numeric: tabular-nums; }

.dbx-legend-note {
  font-size: 0.7rem;
  color: var(--dbx-text-3);
  margin-top: 0.15rem;
}
.dbx-legend-note:empty { display: none; }

/* ---- table view ------------------------------------------------------ */

.dbx-details { margin-top: 0.45rem; }
.dbx-details summary { font-size: 0.78rem; color: var(--dbx-text-2); cursor: pointer; }
.dbx-details table { width: 100%; margin-top: 0.5rem; font-size: 0.78rem; border-collapse: collapse; }
.dbx-details th, .dbx-details td { text-align: right; padding: 0.22rem 0.4rem; border-bottom: 1px solid var(--dbx-border); }
.dbx-details th:first-child, .dbx-details td:first-child { text-align: left; }
.dbx-details td { font-variant-numeric: tabular-nums; }

/* ---- score tables ---------------------------------------------------- */

.dbx-scroll {
  /* flex-basis 0, so the table contributes only its min-height to the panel's
     natural size - that is what stops the 61-row PoPS table from dictating the
     row height. Once the row height is settled by the map panels, flex-grow
     lets the table expand into all of it rather than stopping at a fixed cap. */
  flex: 1 1 0;
  min-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Fixed layout pins the score column to a known width so the name column takes
   whatever is left and wraps into it - long trait names like
   "HIGH_LIGHT_SCATTER_RETICULOCYTE_COUNT (UKBB, 460K)" would otherwise push the
   score off the right edge. */
table.dbx-score-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.82rem;
}

table.dbx-score-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--dbx-surface);
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dbx-text-3);
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--dbx-border);
}

table.dbx-score-table thead th:last-child { text-align: right; }

table.dbx-score-table th[scope="row"] {
  font-weight: 400;
  text-align: left;
  color: var(--dbx-text);
  padding: 0.28rem 0.4rem;
  border-bottom: 1px solid var(--dbx-border);
  /* wrap long names instead of widening the table; anywhere is needed because
     UKBB trait names are single underscore-joined tokens with no break points */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

table.dbx-score-table thead th:last-child,
table.dbx-score-table td {
  width: 5.5rem;
}

table.dbx-score-table td {
  position: relative;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding: 0.28rem 0.4rem;
  border-bottom: 1px solid var(--dbx-border);
  vertical-align: middle;
}

/* Magnitude bar behind the number: length carries the value, and the tint is
   neutral so no hue implies a link to the maps above. */
.dbx-barcell {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: var(--w, 0%);
  max-width: calc(100% - 0.8rem);
  height: 1.05em;
  border-radius: 2px;
  background: var(--dbx-bar);
}

.dbx-barcell + span { position: relative; }

.dbx-empty-note { font-size: 0.85rem; color: var(--dbx-text-3); margin: 0.3rem 0 0; }

/* ---- status ---------------------------------------------------------- */

.dbx-status { font-size: 0.85rem; color: var(--dbx-text-2); padding: 0.6rem 0; }
.dbx-status.dbx-error { color: #d03b3b; }