` carries the block's
vertical rhythm, not the summary: the summary is the first child of the
details, so `.tools-subhead:first-child` above would zero its top margin and
run the blocks together. */
.tools-collapsible { margin: 14px 0 6px; }
.tools-collapsible:first-child { margin-top: 0; }
/* Caps, matching the plain `.tools-subhead` blocks it sits beside (RECENT
ACTIVITY, STEPS) rather than the title case collapsible headers use
elsewhere: on this page both kinds sit in one column, and alternating cases
read as two levels of hierarchy where there is only one. Inheriting
.tools-subhead's size and tracking with them. */
.tools-collapsible-head {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 6px;
cursor: pointer;
list-style: none;
user-select: none;
}
.tools-collapsible-head::-webkit-details-marker { display: none; }
.tools-collapsible-head::after {
content: "\25B2";
font-size: 0.6rem;
opacity: 0.5;
transition: transform 0.2s;
}
.tools-collapsible:not([open]) .tools-collapsible-head::after {
transform: rotate(180deg);
}
.tools-hint { margin: 0 0 8px; color: var(--text-subtle); font-size: 0.76rem; line-height: 1.55; }
.tools-inputs-table { margin-bottom: 4px; }
.tools-inputs-table td { vertical-align: top; }
.sp-table td .tools-cands, .sp-table td.tools-cands { white-space: normal; }
.tools-alias, .tools-param {
display: inline-block; margin: 1px 3px 1px 0; padding: 1px 5px;
border-radius: 3px; background: var(--surface); border: 1px solid var(--border);
color: var(--text-muted); font-size: 0.7rem; font-family: monospace;
}
.tools-optional {
margin-left: 6px; padding: 0 5px; border-radius: 3px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text-subtle); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.tools-none { color: var(--text-subtle); }
/* Latest run status on the collapsed catalogue row. */
.tools-latest-cell { white-space: nowrap; }
.tools-latest { display: inline-flex; align-items: center; gap: 8px; }
.tools-latest-date { color: var(--text-subtle); font-size: 0.72rem; }
.tools-latest-none { color: var(--text-subtle); font-size: 0.76rem; font-style: italic; }
/* Recent-activity table inside the expanded detail. */
.tools-activity-table { margin-bottom: 4px; }
.tools-activity-table td { vertical-align: middle; }
.tools-activity-more { margin-top: 6px; }
/* Shorter than .dag-cy's 520px: several graphs can be open at once, and no
pipeline here exceeds seven steps. */
.tools-dag-cy { height: 340px; border-radius: 8px; border-top: 1px solid var(--border); }
/* When the graph cannot be shown, the same box carries the reason rather than
collapsing — an empty bordered rectangle reads as a rendering failure. */
.tools-dag-msg {
display: flex; align-items: center; justify-content: center;
height: auto; min-height: 64px; padding: 18px 20px;
color: var(--text-subtle); font-size: 0.8rem; text-align: center; line-height: 1.55;
}
/* Top-K slider in the Overview's cell-mode group. Disabled in whole-gene mode
rather than hidden, so the control row does not reflow when the mode flips. */
.hs-topk-slider { width: 92px; accent-color: #3987e5; vertical-align: middle; cursor: pointer; }
.hs-topk-slider:disabled { opacity: 0.4; cursor: not-allowed; }
.hs-topk-value {
font-size: 0.72rem; font-weight: 600; color: var(--muted, #64748b);
min-width: 3.4em; display: inline-block; font-variant-numeric: tabular-nums;
}
/* ── Cells tab (single-cell UMAP) ── */
.sp-cells-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; }
/* The reference caption under the tiles: a full-width line, quieter than the
numbers, so "which vocabulary" is read before the composition is compared. */
.sp-cells-reference { flex-basis: 100%; font-size: 0.74rem; color: var(--text-subtle); margin-top: -2px; }
/* A caveat inside the caption carries its explanation on hover, not in the
line: the line is label · value, the paragraph is a tooltip. */
.sp-cells-reference abbr { text-decoration: underline dotted; cursor: help; }
.sp-cells-stat {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 7px 13px;
}
.sp-cells-stat b { display: block; font-size: 1.05rem; font-weight: 650; color: var(--text); }
.sp-cells-stat span {
font-size: 0.68rem; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
/* The control bar's dock: pinned to the top of the viewport while any of
.sp-cells-figure-scope (controls, composition, embedding) is on screen, and
released once the scope has scrolled past — sticky stops at its containing
block's bottom edge, so no scroll listener is needed. The dock, not the bar,
is sticky so the drawer can hang off it, and it paints the page background
over the gutter so the figures do not show through above the bar. The
vertical spacing the bar used to carry as margin lives here as padding for
the same reason: a margin sits outside the stuck box and the plot would
scroll through it. */
.sp-cells-controls-dock {
position: sticky; top: 0; z-index: 2;
padding: 10px 0 12px; background: var(--bg);
}
.sp-cells-controls {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 9px 14px; margin: 0;
}
.sp-cells-controls label {
display: flex; align-items: center; gap: 7px;
font-size: 0.76rem; color: var(--text-muted);
}
.sp-cells-controls input[type="range"] { accent-color: var(--accent); max-width: 130px; }
/* Point size + Opacity wrap as ONE unit. The gap matches the bar's own, so
the pair is indistinguishable from two loose items until the row runs out —
at which point both move, rather than Opacity going alone. */
.sp-cells-style-pair {
display: inline-flex; align-items: center; gap: 18px; flex-wrap: nowrap;
}
/* A control that does not apply on the current axis stays where it is,
dimmed: removing it re-wraps the bar and moves the plot. */
.sp-cells-controls label.is-disabled { opacity: 0.45; }
/* The Programs button. `is-on` is the drawer being OPEN (inherited from
.sp-cm-toggle); `is-active` is the axis doing something, which is a
different fact and must read while the drawer is shut — the button is then
the only thing on screen saying the figures are cut. */
.sp-cells-program-toggle.is-active {
border-color: var(--accent-light); color: var(--accent-light); font-variant-numeric: tabular-nums;
}
/* The program drawer. Rows are a two-column grid so every control starts at
the same x whatever its label's length — the same reason the marker table
puts its grid on an inner wrapper. */
.sp-cp-row {
display: grid; grid-template-columns: 5.5em auto auto auto; align-items: center;
gap: 10px; justify-content: start; font-size: 0.76rem; color: var(--text-muted);
}
.sp-cp-row.is-disabled { opacity: 0.45; }
.sp-cp-label { color: var(--text-subtle); }
.sp-cp-set { color: var(--text); font-weight: 600; font-size: 0.72rem; }
/* The rule under the controls spans the DRAWER, while the prose below it
keeps a readable measure. Both on one element meant the hairline stopped
wherever 62ch happened to land and read as a half-drawn border. */
.sp-cp-rows {
display: grid; gap: 10px;
padding-bottom: 13px; border-bottom: 1px solid var(--border);
}
/* The calls drawer's provenance line: purity, and the different-count caveat
with its tooltip. Above the note and in the body colour, because it is a
fact about THIS run rather than guidance about the control. */
.sp-cp-prov { margin-top: 11px; color: var(--text); font-size: 0.74rem; }
.sp-cp-prov abbr { border-bottom: 1px dotted var(--text-subtle); cursor: help; text-decoration: none; }
.sp-cp-note {
margin-top: 11px; color: var(--text-muted); font-size: 0.72rem;
line-height: 1.5; max-width: 62ch;
}
/* The floor's readout holds its width ("any" / "60th" / "12.3%") so a drag
cannot re-wrap the bar and move the figures under it. */
.sp-cells-floor-val { display: inline-block; min-width: 3.4em; text-align: right; }
/* ── Marker editor ──
*
* The sub-menu behind the lineage axis: identity -> genes, editable, with the
* cells recolouring on every change. OVERLAID on the figures rather than
* inserted above them, because a panel that pushes the plot down moves the
* figure for a control that only changes its colours — the same rule the axis
* caption was moved below the plot for.
*
* Deliberately NOT a card per row: this is a dense table a reviewer reads
* across, and one radius and one shadow per row would flatten the one
* hierarchy that matters — compartment first, then the lineages it contains. */
.sp-cm-toggle {
background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 0.74rem; cursor: pointer;
}
.sp-cm-toggle:hover { border-color: var(--accent-light); }
/* The per-axis tool slot: Markers and Calls stacked in ONE grid cell, so the
slot is always as wide as the wider of them and the bar cannot re-wrap when
the axis changes which one is offered. Hidden with `visibility`, which keeps
the box (and drops the button from the tab order and the a11y tree);
`display:none` would collapse the slot and bring the 35px jump back. */
.sp-cells-axis-tool { display: inline-grid; justify-items: start; align-items: center; }
.sp-cells-axis-tool > .sp-cm-toggle { grid-area: 1 / 1; }
.sp-cm-toggle.is-hidden { visibility: hidden; }
.sp-cm-toggle.is-on { border-color: var(--accent-light); color: var(--accent-light); }
.sp-cm-panel {
position: absolute; z-index: 5; left: 0; right: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
padding: 12px 16px 14px; margin-top: -6px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32); font-size: 0.78rem;
}
/* The sticky dock is the positioning context (sticky establishes one), so
the drawer hangs under the control bar wherever the bar is pinned. */
.sp-cm-panel.is-working { opacity: 0.72; }
.sp-cm-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-cm-title { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text-muted); font-weight: 600; }
.sp-cm-set { color: var(--text); font-weight: 600; }
.sp-cm-badge { font-size: 0.66rem; border: 1px solid var(--border); border-radius: 999px;
padding: 1px 8px; color: var(--text-muted); }
.sp-cm-badge.is-def { color: var(--accent-light); border-color: var(--accent-light); }
/* The one warning colour on this tab, shared with .sp-cq-banner.is-warn. */
.sp-cm-badge.is-stat { color: #f97316; border-color: #f97316; }
/* NOT `overflow-x: auto`: a scroll container on one axis clips the other (auto
with visible is not a legal pair, so visible computes to auto), and the last
row's gene suggestions — which hang below the table — were cut off at its
bottom edge. `clip` is the one value that leaves overflow-y visible. The
table is width:100% with wrapping cells, so it never needs to scroll. */
.sp-cm-table-wrap { overflow-x: clip; overflow-y: visible; }
.sp-cm-table { border-collapse: collapse; width: 100%; }
.sp-cm-table th {
text-align: left; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-subtle); font-weight: 600; padding: 4px 12px 6px 0;
border-bottom: 1px solid var(--border); white-space: nowrap;
}
.sp-cm-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sp-cm-table tr:last-child td { border-bottom: 0; }
/* Swatch column, then text — as a GRID, so the name and its sub-label share
one text column and every row's name starts at the same x whether or not it
has a colour. The sub-label used to clear the swatch with a hand-counted
16px indent, which was right for a coloured row and wrong for the
compartment, whose swatch does not exist: its name sat left of the others
and its sub-label hung right of its own name. */
/* ⚠ The grid goes on an INNER wrapper, never on the . `display: grid` on
a table cell drops its table-cell box, and the whole row collapses: the
rule select falls to its own line and every column after it loses its
alignment. */
.sp-cm-identity { white-space: nowrap; }
.sp-cm-identity-grid {
display: inline-grid; grid-template-columns: 16px auto; align-items: baseline;
}
.sp-cm-identity b { font-weight: 600; grid-column: 2; }
.sp-cm-sw {
width: 9px; height: 9px; border-radius: 50%; display: inline-block;
grid-column: 1; grid-row: 1; align-self: center;
}
/* Holds the column open for a row with no colour of its own. */
.sp-cm-sw.is-empty { background: none; }
.sp-cm-sub { grid-column: 2; color: var(--text-subtle); font-size: 0.68rem; }
/* Select and floor on one line, the hint wrapping beneath them rather than
pushing the floor onto a second row — the rows must stay scannable across,
and a long hint on one row otherwise shifts that row's controls out of
line with every other row's. */
.sp-cm-rule-cell { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.sp-cm-rule-cell .sp-cm-rule { margin-top: 1px; }
.sp-cm-floor-wrap { max-width: 260px; }
.sp-cm-hint { white-space: normal; }
.sp-cm-rule { font-size: 0.74rem; padding: 3px 8px; }
.sp-cm-floor { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 0.72rem; }
/* The unit sits after the number, not in the label — a measurement reads
"floor 2.3 log1p CP10K", not "floor log1p CP10K 2.3". */
.sp-cm-unit-suffix { color: var(--text-subtle); font-size: 0.7rem; white-space: nowrap; }
/* The floor, its unit and what it means in molecules — stacked, because the
number alone says nothing about the scale it is on. */
.sp-cm-floor-wrap { display: inline-flex; flex-direction: column; gap: 1px; }
/* An explanation that must be DISCOVERABLE without being read every time —
the scale the floor is on, what each provenance pill claims. Same treatment
.sp-meta-hint gives the same problem: the cursor says there is more, and a
dotted underline advertises it on running text.
⚠ NOT on a pill. A pill already carries a border of its own, and a dotted
rule tucked under that border reads as a rendering fault rather than as an
affordance — the pill's own outline is the mark that it is a thing you can
point at, so it needs nothing added. */
.sp-cm-unit-hint[title]:not([title=""]) {
cursor: help;
text-decoration: underline dotted var(--text-subtle);
text-underline-offset: 3px;
}
.sp-cm-badge.sp-cm-unit-hint[title] { text-decoration: none; }
.sp-cm-hint { color: var(--text-muted); font-size: 0.68rem; }
.sp-cm-floor-input {
width: 58px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border);
border-radius: 5px; padding: 2px 5px; font: inherit; font-size: 0.74rem;
font-variant-numeric: tabular-nums;
}
.sp-cm-genes { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sp-cm-gene {
display: inline-flex; align-items: center; gap: 4px;
font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.74rem;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 4px 1px 7px;
}
/* Declared and not in this matrix — a fact about the run, not an error, so it
is drawn as a weaker version of the same chip rather than in a warning hue. */
.sp-cm-gene.is-absent { border-style: dashed; color: var(--text-subtle); }
.sp-cm-x { background: none; border: 0; color: var(--text-subtle); font-size: 0.85rem; line-height: 1;
cursor: pointer; padding: 0 2px; }
.sp-cm-x:hover { color: var(--text); }
.sp-cm-add { display: inline-flex; align-items: center; gap: 4px; color: var(--text-subtle);
border: 1px dashed var(--border); border-radius: 5px; padding: 1px 7px; font-size: 0.72rem; }
.sp-cm-add-input {
background: transparent; border: 0; color: var(--text); width: 62px;
font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.74rem;
}
.sp-cm-add-input:focus { outline: none; }
/* The completion list. Anchored to the add field and floated, so a list of
eight does not push the table's rows apart while the reader types. */
.sp-cm-add { position: relative; }
.sp-cm-sugg-list {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 6; min-width: 180px;
display: flex; flex-direction: column; background: var(--surface);
border: 1px solid var(--border); border-radius: 8px; padding: 3px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); max-height: 232px; overflow-y: auto;
}
/* ⚠ `display: flex` outranks the user agent's `[hidden] { display: none }`,
so the empty list painted as a thin outlined strip under every add field.
The attribute has to be honoured explicitly wherever a display is set. */
.sp-cm-sugg-list[hidden] { display: none; }
.sp-cm-sugg {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
background: none; border: 0; border-radius: 5px; cursor: pointer; text-align: left;
font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.76rem;
color: var(--text); padding: 4px 7px;
}
.sp-cm-sugg.is-active, .sp-cm-sugg:hover { background: var(--surface-2); }
/* How many cells carry it — the fact that decides whether a gene is worth
adding, read off the index's own non-zero count with no block fetch. */
.sp-cm-sugg-pct {
font-family: 'Open Sans', sans-serif; font-size: 0.68rem; color: var(--text-subtle);
font-variant-numeric: tabular-nums;
}
.sp-cm-sugg-none {
padding: 5px 7px; font-size: 0.72rem; color: var(--text-subtle);
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.sp-cm-add:focus-within { border-color: var(--accent-light); border-style: solid; }
.sp-cm-detected { white-space: nowrap; color: var(--text-muted); }
.sp-cm-pct { color: var(--text); font-variant-numeric: tabular-nums; }
.sp-cm-of { font-size: 0.7rem; }
.sp-cm-bar { display: block; height: 3px; background: var(--border); border-radius: 2px; margin-top: 4px;
position: relative; min-width: 96px; }
.sp-cm-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; }
.sp-cm-note { color: var(--text-subtle); font-size: 0.72rem; }
.sp-cm-excl { color: var(--text-muted); }
/* The exclusion half of a conjunctive rule, under the gene controls: the row
states "genes > floor" AND "in T cell, not CD8" as two lines of one test. */
.sp-cm-excl-clause { display: block; margin-top: 4px; font-size: 0.72rem; }
.sp-cm-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sp-cm-foot-note { color: var(--text-subtle); font-size: 0.72rem; flex: 1; min-width: 240px; }
.sp-cm-btn {
background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
border-radius: 6px; padding: 4px 11px; font: inherit; font-size: 0.74rem; cursor: pointer;
}
.sp-cm-btn.is-primary { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
.sp-cm-btn[disabled] { background: var(--btn-disabled-bg); color: var(--btn-disabled-text);
border-color: transparent; cursor: not-allowed; }
.sp-cm-error { color: #f97316; margin-top: 8px; font-size: 0.74rem; }
.sp-cm-empty { color: var(--text-muted); }
.sp-cells-hint { font-size: 0.72rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
/* Which instrument is colouring the embedding, and what a program encoding
means. A figure caption UNDER the plot, not a note under the controls: the
reader has just chosen "Lineage — marker rule" and the line says what that
instrument is; chosen a program, and it says the size/opacity is a
within-sample percentile and which cells carry one. Below rather than
above because its height changes with the choice, and anything above the
plot that changes height moves the plot. The caveat variant is for a
program group whose reading needs guarding (the Doublet-* programs are not
doublet evidence). */
.sp-cells-axis-caption {
font-size: 0.74rem; color: var(--text-muted); line-height: 1.45;
margin: 8px 2px 14px; display: flex; flex-direction: column; gap: 3px;
}
.sp-cells-axis-caption .sp-cells-axis-caveat {
color: var(--text); border-left: 3px solid #f97316; padding-left: 8px; /* same warn orange as .sp-cq-banner.is-warn */
}
/* The size/opacity key: three dots at the low, middle and high end of the
percentile scale, so the encoding has a legend of its own — the Plotly
legend can only key colour. */
.sp-cells-program-key {
display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
vertical-align: middle;
}
.sp-cells-program-key i {
display: inline-block; border-radius: 50%; background: currentColor;
}
.sp-cells-plot {
width: 100%; height: 640px;
border: 1px solid var(--border); border-radius: 12px;
}
/* Cell-type composition bars.
Fixed height, so a run switch that empties the chart holds its space instead
of collapsing the page and dragging the UMAP up under the reader's cursor —
the same reason the stat tiles keep their labels while the numbers blank. */
.sp-cells-composition-wrap {
border: 1px solid var(--border); border-radius: 12px;
padding: 10px 4px 2px; margin-bottom: 12px;
}
.sp-cells-composition-title {
font-size: 0.68rem; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
padding: 0 12px 2px;
}
.sp-cells-composition { width: 100%; height: 240px; }
/* ── Droplet quality ──
*
* Deliberately NOT the .metrics-table / .gv-overview-table treatment the genomic tabs
* use. Those panels grade a scalar against a published threshold, which is a
* table's job. This one shows three distributions that the repository's own
* measurement says must not be graded against a constant, so it is built as a
* figure: hairlines instead of borders, one accent mark per rail, and numerals
* carrying the emphasis that a table would put in a "status" column.
*
* Everything is a token. The SVG uses classes rather than inline fills so the
* ribbons follow the page between light and dark like the rest of the tab. */
.sp-cq {
margin: 18px 0 4px;
border-top: 1px solid var(--border);
}
.sp-cq-toggle {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 2px 12px;
background: none;
border: 0;
cursor: pointer;
text-align: left;
color: var(--text-muted);
}
.sp-cq-toggle:hover { color: var(--text); }
.sp-cq-toggle-title {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
}
/* The teaser ribbon. Sits between the title and the action so the row reads as
* one object, and shrinks away on narrow screens where it would crowd them. */
.sp-cq-toggle-spark {
flex: 0 0 auto;
width: 96px;
height: 18px;
opacity: 0.5;
line-height: 0;
}
.sp-cq-toggle:hover .sp-cq-toggle-spark { opacity: 0.85; }
.sp-cq-toggle-spark svg { width: 100%; height: 100%; display: block; }
.sp-cq-toggle-action {
margin-left: auto;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-subtle);
}
.sp-cq-toggle:hover .sp-cq-toggle-action { color: var(--accent-light); }
/* The generous bottom padding is not whitespace for its own sake: this panel is
* the last thing on the tab, and the page's floating action buttons are fixed
* to the bottom-right corner. Without room to scroll past, the final row — the
* typed count — sits permanently underneath them. */
.sp-cq-body { padding: 2px 2px 72px; }
.sp-cq-sub {
font-size: 0.78rem;
color: var(--text-subtle);
max-width: 62ch;
margin-bottom: 22px;
line-height: 1.5;
}
/* One rail per axis. The 4-column grid keeps the three figures on a shared left
* edge, so the distributions are read against each other rather than each
* against its own label. */
.sp-cq-rail {
display: grid;
grid-template-columns: 148px 1fr 116px;
/* The note sits under the FIGURE and matches its width exactly — the
* ribbon is what the sentence describes, so the two share a measure.
* It is deliberately not run out to the page edge: that would put the
* prose under the tail's numbers, which belong to the rail above it. */
grid-template-areas: "head fig tail" ". note ." "cl cl cl";
align-items: end;
column-gap: 22px;
padding: 18px 0 14px;
border-top: 1px solid var(--border);
}
.sp-cq-rail:first-child { border-top: 0; }
.sp-cq-rail-head { grid-area: head; }
.sp-cq-rail-fig { grid-area: fig; min-width: 0; }
.sp-cq-rail-tail { grid-area: tail; text-align: right; }
.sp-cq-rail-note {
grid-area: note;
font-size: 0.72rem;
color: var(--text-subtle);
line-height: 1.5;
margin-top: 10px;
}
.sp-cq-rail-label {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--text-muted);
margin-bottom: 6px;
}
/* The reading. Light and large because it is the one number on the rail worth
* carrying away; a table would have made it the same weight as its label. */
.sp-cq-rail-value {
font-size: 1.65rem;
font-weight: 200;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.sp-cq-rail-unit { font-size: 0.9rem; margin-left: 2px; color: var(--text-muted); }
.sp-cq-rail-range {
font-size: 0.86rem;
font-weight: 300;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sp-cq-rail-caption {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--text-subtle);
margin-top: 5px;
}
/* The positioning context for everything drawn OVER the ribbon — tick labels,
* derived-threshold marks, the draggable handle and its shading. The whole
* figure is the drag target, so a click anywhere on a rail moves its handle
* rather than demanding the reader hit the grip first. */
.sp-cq-rail-fig { position: relative; cursor: ew-resize; touch-action: none; }
.sp-cq-svg { width: 100%; height: 72px; display: block; }
.sp-cq-area { fill: var(--text-muted); opacity: 0.22; }
/* The middle half of the same curve, drawn darker. Clipped to the ribbon in
* markup, so this is a density and not a box. */
.sp-cq-iqr { fill: var(--text-muted); opacity: 0.30; }
.sp-cq-base {
stroke: var(--border);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.sp-cq-median {
stroke: var(--accent-light);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
/* Positioned HTML, not : the svg's horizontal stretch would scale glyphs
* with it and render these wider than the page's own type. */
.sp-cq-ticks { position: relative; height: 15px; margin-top: 3px; }
.sp-cq-tick {
position: absolute;
top: 0;
transform: translateX(-50%);
font-size: 0.6rem;
color: var(--text-subtle);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Counted against typed. A rule rather than a donut: the quantity is one
* proportion of one whole, and a second encoding of the same number would
* suggest there were two. */
.sp-cq-recon {
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
/* Two rules sharing a left edge and a scale, so the shortfall is the visible
* difference between their right ends. Column widths match .sp-cq-rail so the
* whole panel sits on one grid. */
.sp-cq-recon-grid {
display: grid;
grid-template-columns: 148px 1fr 116px;
align-items: center;
column-gap: 22px;
row-gap: 12px;
}
.sp-cq-recon-label {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--text-muted);
}
.sp-cq-recon-track { position: relative; height: 5px; }
.sp-cq-recon-fill { height: 100%; border-radius: 3px; }
/* Counted is the REFERENCE and typed is the measure, so they are separated by
* weight rather than by hue — two saturated bars of similar length read as two
* competing quantities instead of one shortfall against a whole. */
.sp-cq-recon-fill.is-counted { background: var(--text-subtle); opacity: 0.4; }
/* The middle rule, drawn only when QC and the typing step disagree. Weighted
* between the two it sits under, so the eye reads counted -> kept -> typed
* as one narrowing rather than three unrelated bars. */
.sp-cq-recon-fill.is-kept { background: var(--accent-light); opacity: 0.55; }
.sp-cq-recon-fill.is-typed { background: var(--accent-light); }
/* The reader's own rule. Accent, like every other thing on this panel that
* belongs to them rather than to the run — the brackets, the "your cut"
* readouts — and outlined rather than filled so it reads as a projection over
* the run's record instead of a fourth measured quantity. */
.sp-cq-recon-fill.is-yourcut {
background: transparent;
border: 1px solid var(--accent-light);
border-radius: 3px;
}
.sp-cq-recon-value {
text-align: right;
font-size: 0.95rem;
font-weight: 300;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.sp-cq-recon-note {
margin-top: 12px;
font-size: 0.74rem;
color: var(--text-subtle);
line-height: 1.5;
max-width: 74ch;
}
/* ── What the shipped QC decided ──
*
* Sits above the rails because it is the fact and they are the evidence: the
* method chose thresholds, and the ribbons below show the distribution it chose
* them against. Kept to plain rows of label/value rather than the stat-card
* treatment used elsewhere — a card implies a reading worth grading, and this
* block deliberately grades nothing. */
.sp-cq-stats {
display: flex;
flex-wrap: wrap;
gap: 6px 34px;
margin-bottom: 14px;
}
.sp-cq-stat { display: flex; flex-direction: column; gap: 3px; }
.sp-cq-stat-k {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--text-subtle);
}
.sp-cq-stat-v {
font-size: 0.92rem;
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* The method is the one stat on this panel that is a CHOICE rather than a
* measurement, so it is the one that carries an affordance. Quiet until
* hovered — a reader is here to read the run, not to be sold a re-run. */
.sp-cq-method-edit {
margin-left: 8px;
padding: 1px 7px;
border: 1px solid var(--border);
border-radius: 3px;
background: none;
color: var(--text-subtle);
font: inherit;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
vertical-align: middle;
}
.sp-cq-method-edit:hover:not(:disabled) { color: var(--accent-light); border-color: var(--border-glow); }
.sp-cq-method-select {
font: inherit;
font-size: 0.8rem;
padding: 2px 6px;
background: var(--input-bg);
color: var(--text);
border: 1px solid var(--border-glow);
border-radius: 4px;
max-width: 100%;
}
.sp-cq-method-note {
display: block;
margin-top: 4px;
font-size: 0.7rem;
color: var(--text-muted);
max-width: 46ch;
}
.sp-cq-method-note.is-error { color: #f97316; }
.sp-cq-method-note.is-ok { color: var(--accent-light); }
/* A rule down the left edge rather than a filled panel. The two banners this
* carries are both things a reader must not skim past, and a tinted box on a
* page of tinted boxes is exactly what the eye learns to skip. */
.sp-cq-banner {
border-left: 2px solid var(--accent-light);
padding: 8px 0 8px 12px;
margin: 0 0 14px;
font-size: 0.8rem;
line-height: 1.55;
color: var(--text);
max-width: 74ch;
}
.sp-cq-banner.is-warn { border-left-color: #f97316; }
/* A custom cell set: somebody's decision, not the platform's answer. Accent
* rather than the warning orange — it is not a fault, it is provenance. */
.sp-cq-banner.is-custom { border-left-color: var(--accent-light); }
.sp-cq-flags {
list-style: none;
margin: 0 0 14px;
padding: 0;
max-width: 74ch;
}
.sp-cq-flags li {
position: relative;
padding-left: 14px;
margin-bottom: 5px;
font-size: 0.76rem;
line-height: 1.5;
color: var(--text-muted);
}
.sp-cq-flags li::before {
content: "";
position: absolute;
left: 0; top: 0.55em;
width: 5px; height: 5px;
border-radius: 50%;
background: #f97316;
}
.sp-cq-note {
font-size: 0.76rem;
color: var(--text-subtle);
line-height: 1.5;
max-width: 74ch;
margin-bottom: 14px;
}
/* ── Derived-threshold marks and the what-if handle ──
*
* Both are absolutely positioned over .sp-cq-rail-fig, which is already
* position:relative for the tick labels, and both are placed by the SAME domain
* mapping the ribbon was drawn with — so a mark at 500 genes sits exactly where
* 500 genes sits on the curve.
*
* The marks are hairlines and the handle is a filled grip on purpose: what the
* pipeline derived is a fact about a finished run and must not look adjustable,
* while the handle is the one thing on this panel the reader can move.
*
* ONE kind of mark, always solid. There was a second, faint dashed variant for
* per-cluster thresholds laid over the pooled ribbon; it is gone, because a
* threshold measured over one cluster marks nothing on a curve drawn from all
* of them. Per-cluster thresholds now appear only in the small multiples, each
* on its own cluster's ribbon — same class, same solid hairline, because there
* it is the bound that was actually applied to the cells underneath it. */
.sp-cq-dmark {
position: absolute;
bottom: 10px;
width: 0;
border-left: 1px solid var(--text-muted);
height: 72%;
opacity: 0.85;
pointer-events: none;
transform: translateX(-0.5px);
}
/* The one exception to "one kind of mark": an INSTRUMENT's own line.
*
* scDblFinder attaches a singlet/doublet call to every droplet at a threshold
* it chose for this library, and the doublet rail marks where that call falls
* on the pooled score. Unlike the per-cluster dashes this replaces nothing and
* misstates nothing — the call was made over exactly the distribution drawn
* here — but it is NOT an applied bound: the pipeline cut no cell on it, so it
* must not look like the solid "applied by" hairline. Dashed, and a touch
* fainter, is the difference between "the instrument said" and "the run did". */
.sp-cq-imark {
position: absolute;
bottom: 10px;
width: 0;
border-left: 1px dashed var(--text-muted);
height: 72%;
opacity: 0.7;
transform: translateX(-0.5px);
/* Unlike the applied-threshold hairline this one takes the pointer: a
* dashed line on a slider reads as a threshold, and the hover is where it
* says it is not one. The line itself is zero-width, so the hit area is a
* pseudo-element a few pixels either side; a click still falls through to
* the rail's own drag, which sets the handle at the line — the very gesture
* the hover text suggests. */
cursor: help;
}
.sp-cq-imark::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -5px;
right: -5px;
}
.sp-cq-rail-fig:hover .sp-cq-imark { opacity: 1; }
/* An excluded band is a flat ZONE TINT, not a fade.
*
* Fading was tried first — wash the region toward --bg so the excluded droplets
* recede. It does not work on a dark theme: most of an excluded range is empty
* ribbon, which is already the background colour, so the wash is a no-op
* exactly where the reader is looking for the boundary. A flat tint delimits
* the zone whether or not there are droplets in it, which is the reading the
* band exists to give, and it is the convention an out-of-range region already
* has in a plot. Kept quiet, because on a ddqc mito rail it covers three
* quarters of the width. */
.sp-cq-drop {
position: absolute;
top: 0;
bottom: 18px; /* the plot, not the axis labels beneath it */
background: var(--qc-band-user, rgba(136, 146, 192, 0.34));
pointer-events: none;
}
/* The band the RUN excluded, as opposed to the band the reader's cut would.
* Quieter, and it sits behind: the run's decision is the ground the reader is
* standing on, theirs is the change they are testing on top of it. Where the
* two overlap the wash compounds, which is the truthful reading — those
* droplets are out on both counts. Which band is whose is settled at its edge:
* a grey hairline is the run's, a bracket is yours. */
.sp-cq-drop.is-run { background: var(--qc-band-run, rgba(136, 146, 192, 0.20)); }
/* ── The range handles: an interval bracket ──
*
* Each handle IS a bracket — `[` on the lower bound, `]` on the upper — full
* height, arms turned inward. The pair encloses the kept droplets the way the
* notation already encloses a closed interval, [147, 1713], which is a reading
* this audience has and a slider thumb is not. It also settles which handle a
* reader is about to grab when the two sit a few pixels apart, on an axis
* where every other cue is identical.
*
* One element, no separate thumb: the vertical stroke of the bracket is the
* measurement line, so the control adds a single mark to the figure rather
* than a line plus an ornament sitting on top of it. Everything else on this
* panel is a hairline; the brackets are the one thing you can move, and the
* only place this panel spends any weight. */
.sp-cq-handle {
position: absolute;
top: -4px;
/* Stops at the plot's own bottom edge. The figure column is 100px tall and
* the tick labels own the bottom 15 of it, so a bracket run any lower prints
* its arm through "0%" and "1.00" at the parked positions. */
bottom: 18px;
width: 9px;
border: 1.5px solid var(--text-subtle);
background: none;
cursor: ew-resize;
touch-action: none;
/* transform and colour only — NEVER `left`. The bracket's position is driven
* by the pointer, and a transition on it would make it lag the cursor. */
transition: transform 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease;
}
/* The vertical stroke lands ON the threshold, so each edge is offset by its
* own side: the lower bracket by half its border, the upper by its full width. */
.sp-cq-handle[data-edge="lo"] {
border-right: 0;
margin-left: -0.75px;
transform-origin: left center;
}
.sp-cq-handle[data-edge="hi"] {
border-left: 0;
margin-left: -8.25px;
transform-origin: right center;
}
/* A handle showing a bound it INHERITS — a cluster living with the rail's cut
* rather than one of its own. Drawn, because that is where its cells are being
* cut and hiding it would misreport the row; drawn faintly, because nobody
* decided it here. Moving it is the act of taking ownership, and it picks up
* .is-set the moment it moves. */
.sp-cq-handle.is-inherit { opacity: 0.4; border-style: dotted; }
.sp-cq-handle.is-set {
border-color: var(--accent-light);
box-shadow: 0 0 12px -4px var(--accent-light);
}
/* A handle still sitting where the RUN put it. The handles open on the run's
* own bounds, so most of them are this most of the time; drawn in the run's
* grey rather than the reader's accent, because the accent is the signal that
* the reader changed something, and it has to stay quiet until they do. */
.sp-cq-handle.is-run {
border-color: var(--text-subtle);
box-shadow: none;
}
/* The arms open on approach — the jaws-widening gesture the control performs
* anyway, previewed. Scaled from the vertical stroke so the threshold the
* bracket marks does not move while it grows. */
.sp-cq-rail-fig:hover .sp-cq-handle { border-color: var(--text-muted); }
.sp-cq-rail-fig:hover /* A handle showing a bound it INHERITS — a cluster living with the rail's cut
* rather than one of its own. Drawn, because that is where its cells are being
* cut and hiding it would misreport the row; drawn faintly, because nobody
* decided it here. Moving it is the act of taking ownership, and it picks up
* .is-set the moment it moves. */
.sp-cq-handle.is-inherit { opacity: 0.4; border-style: dotted; }
.sp-cq-handle.is-set { border-color: var(--accent-light); }
.sp-cq-rail-fig:hover .sp-cq-handle.is-run { border-color: var(--text-muted); }
.sp-cq-handle:hover,
.sp-cq-handle:active { transform: scaleX(1.5); }
.sp-cq-handle:focus-visible {
outline: none;
border-color: var(--accent-light);
box-shadow: var(--shadow-accent);
}
@media (prefers-reduced-motion: reduce) {
.sp-cq-handle { transition: none; }
.sp-cq-handle:hover, .sp-cq-handle:active { transform: none; }
}
/* What the RUN applied, in the tail's leading position — the answer to "what
* was cut", which is the question the panel exists for. The reader's own
* what-if sits underneath in the accent, so the two can never be read as one
* number. */
.sp-cq-rail-applied {
font-size: 0.86rem;
color: var(--text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
/* The tail is a fixed 116px column at the page's right edge, so anything
* that will not wrap here does not clip — it runs off the page. nowrap is
* right for "≥ 297 · ≤ 5,231", which must not break across lines; the
* overflow guard is what stops a longer string escaping the column. */
overflow-wrap: anywhere;
}
/* An absent bound is a phrase, not a number, so it is allowed to wrap —
* nowrap suits "≥ 297 · ≤ 5,231" and overflows "no threshold — by design". */
.sp-cq-rail-applied.is-absent {
color: var(--text-subtle); font-style: italic; white-space: normal;
}
/* Belt and braces on the whole tail: a fixed-width column at the page edge is
* exactly where an unexpected string becomes a horizontal scrollbar. */
.sp-cq-rail-tail { overflow-wrap: anywhere; min-width: 0; }
.sp-cq-rail-cut {
font-size: 0.78rem;
color: var(--accent-light);
font-variant-numeric: tabular-nums;
margin-top: 5px;
min-height: 1em; /* hold the row so setting a cut does not reflow the rail */
white-space: nowrap;
}
.sp-cq-rail-cut.is-idle { visibility: hidden; }
/* ── The what-if readout ──
*
* Directly under the rails it is driven by, because dragging a handle IS the
* interaction and this is its result — put in a sidebar or a header it would
* read as a separate feature rather than as the rails' own answer. */
.sp-cq-tune {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 14px;
padding: 16px 0 4px;
border-top: 1px solid var(--border);
}
.sp-cq-tune-counts { display: flex; align-items: baseline; gap: 8px; }
.sp-cq-tune-n {
font-size: 1.65rem;
font-weight: 200;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.sp-cq-tune-of { font-size: 0.78rem; color: var(--text-muted); }
.sp-cq-tune-sub {
flex: 1 1 22ch;
font-size: 0.76rem;
color: var(--text-subtle);
line-height: 1.5;
}
/* The re-type hint reads as part of the same sentence rather than as a second
* message, because it IS the other half of the count above it. */
.sp-cq-tune-add { color: var(--text-muted); }
.sp-cq-tune-reset {
margin-left: auto;
background: none;
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 12px;
font: inherit;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
cursor: pointer;
}
.sp-cq-tune-reset:hover:not(:disabled) { color: var(--accent-light); border-color: var(--border-glow); }
.sp-cq-tune-actions { display: flex; align-items: center; gap: 10px; }
/* The one control on this panel that spends money and creates a run, so it is
* the one that is filled rather than outlined. Disabled until a cut exists:
* saving the run's own thresholds back as a "custom" list would create a
* second run that decided nothing. */
.sp-cq-tune-save {
padding: 6px 14px;
border: 1px solid var(--accent-light);
border-radius: 4px;
background: var(--accent);
color: #fff;
font: inherit;
font-size: 0.72rem;
cursor: pointer;
white-space: nowrap;
}
.sp-cq-tune-save:disabled { opacity: 0.4; cursor: default; }
.sp-cq-tune-save:hover:not(:disabled) { background: var(--accent-hover); }
.sp-cq-tune-status {
grid-column: 1 / -1;
margin-top: 8px;
font-size: 0.72rem;
color: var(--text-muted);
min-height: 1em;
}
.sp-cq-tune-status.is-error { color: #f97316; }
.sp-cq-tune-status.is-ok { color: var(--accent-light); }
.sp-cq-tune-reset:disabled { color: var(--btn-disabled-text); cursor: default; }
/* ── Per-cluster evidence, folded under its own axis ──
*
* A in the rail's third grid row, spanning all three columns so each
* cluster row can repeat the rail's OWN column template: label under the label,
* ribbon under the ribbon, threshold under the threshold. That alignment is the
* point. A cluster's gene floor sits directly below the pooled curve it was
* derived from, and its number lands in the same column as the rail's, so the
* two can be read against each other without moving your eye off the column.
*
* Every ribbon is drawn on the rail's resolved domain, never auto-ranged to its
* own cells — small multiples each on their own ruler compare nothing, and would
* make a tight cluster and a broad one look identical. */
.sp-cq-cl { grid-area: cl; margin-top: 12px; }
.sp-cq-cl-summary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 0;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--text-subtle);
cursor: pointer;
list-style: none;
user-select: none;
}
.sp-cq-cl-summary::-webkit-details-marker { display: none; }
.sp-cq-cl-summary::before {
content: "";
width: 0;
height: 0;
border-left: 4px solid currentColor;
border-top: 3.5px solid transparent;
border-bottom: 3.5px solid transparent;
transition: transform 0.14s ease;
}
.sp-cq-cl[open] > .sp-cq-cl-summary::before { transform: rotate(90deg); }
.sp-cq-cl-summary:hover { color: var(--accent-light); }
.sp-cq-cl-body { padding: 6px 0 2px; }
.sp-cq-cl-note {
font-size: 0.7rem;
color: var(--text-subtle);
line-height: 1.5;
margin: 2px 0 10px;
max-width: 74ch;
}
/* The rail's own columns, repeated. */
.sp-cq-cl-row {
display: grid;
grid-template-columns: 148px 1fr 116px;
column-gap: 22px;
align-items: center;
padding: 5px 0;
}
.sp-cq-cl-name { font-size: 0.78rem; color: var(--text-muted); }
.sp-cq-cl-n {
display: block;
font-size: 0.66rem;
color: var(--text-subtle);
font-variant-numeric: tabular-nums;
}
.sp-cq-cl-pooled {
margin-left: 6px;
padding: 1px 5px;
border: 1px solid var(--border);
border-radius: 3px;
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-subtle);
}
.sp-cq-cl-fig { position: relative; min-width: 0; cursor: ew-resize; touch-action: none; }
.sp-cq-cl-fig.is-empty { cursor: default; }
.sp-cq-cl-fig .sp-cq-svg { height: 26px; }
/* The row's handles are the rail's, at the row's height and without the tick
* gutter to clear — there are no tick labels down here. */
.sp-cq-cl-fig .sp-cq-handle { bottom: 0; }
.sp-cq-cl-fig .sp-cq-drop { bottom: 0; }
/* A cluster too small to draw still holds its row, so the grid does not reflow
* around it and the column stays readable top to bottom. */
.sp-cq-cl-fig.is-empty { height: 26px; }
/* ONE colour scheme across the whole panel, no per-context exception: the
* median is the accent line, a derived threshold is a muted hairline, and the
* accent bracket is the reader's own cut. An earlier draft inverted it in here
* on the argument that the fold's subject is the threshold — but that put an
* accent hairline beside an accent bracket on the same ribbon, one a fixed
* record and one the thing you drag, which is exactly the confusion the rail's
* design set out to avoid: what the pipeline derived is a fact about a finished
* run and must not look adjustable.
*
* Geometry still differs, because the row has no tick gutter to clear. */
.sp-cq-cl-fig .sp-cq-dmark { bottom: 0; height: 100%; }
/* The threshold as a number, in the rail's tail column so it stacks under the
* rail's own. The hairline says where; this says what — and it is the only
* reading that survives a run with no cluster map to draw ribbons from, or a
* screenshot pasted into a slide. */
.sp-cq-cl-val {
font-size: 0.72rem;
color: var(--text-muted);
text-align: right;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.sp-cq-cl-val.is-none { color: var(--text-subtle); font-style: italic; }
/* A fold with no cluster map to draw: numbers only, packed.
*
* The row grid exists to put a cluster's ribbon under the rail's ribbon and its
* threshold under the rail's threshold. With no ribbon the middle column is
* dead space by construction, and reserving it anyway turned an eleven-cluster
* run into eleven full-width bands of whitespace with one value adrift on the
* right — which reads as a failed render, not as "the distributions were never
* recorded". So the column goes, the rows shrink to a name/value pair, and the
* list flows into columns rather than running a screen and a half down the
* page. Column count follows the width, so a narrow window gets one. */
.sp-cq-cl-body.is-bare {
columns: 3 220px;
column-gap: 34px;
}
.sp-cq-cl-body.is-bare .sp-cq-cl-note { column-span: all; }
.sp-cq-cl-body.is-bare .sp-cq-cl-row {
grid-template-columns: 1fr auto;
column-gap: 14px;
padding: 4px 0;
/* A row split across a column break would put a cluster's name in one column
* and its threshold in the next. */
break-inside: avoid;
}
.sp-cq-cl-body.is-bare .sp-cq-cl-tail { align-self: center; }
.sp-cq-cl-tail { text-align: right; min-width: 0; }
/* The reader's own cut for this cluster, under the run's. Same relationship the
* rail already draws between its applied bound and its "your cut" line, so the
* two columns read down consistently. */
.sp-cq-cl-cut {
margin-top: 2px;
font-size: 0.66rem;
color: var(--accent-light);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.sp-cq-cl-cut.is-idle { visibility: hidden; }
@media (max-width: 760px) {
.sp-cq-rail {
grid-template-columns: 1fr auto;
grid-template-areas: "head tail" "fig fig" "note note" "cl cl";
align-items: start;
row-gap: 12px;
}
/* No rail columns left to align to, so the cluster row keeps only the split
* that still means something: who it is on the left, what it was cut at on
* the right, with the ribbon on its own line beneath. */
.sp-cq-cl-row {
grid-template-columns: 1fr auto;
column-gap: 12px;
}
.sp-cq-cl-fig { grid-column: 1 / -1; order: 3; }
.sp-cq-rail-tail { align-self: start; }
.sp-cq-toggle-spark { display: none; }
}
/* Loading state for the UMAP.
The overlay covers the plot box rather than sitting above it as a line of
text: switching runs is the slow case, and a caption over the fold from a
640px blank rectangle reads as "the plot is broken", not "it is coming".
Opaque, because a half-visible previous run's embedding under a spinner is
a figure labelled with the wrong run — screenshot-able and wrong. */
/* z-index:0 makes the wrap a stacking context, so Plotly's own high z-index
internals (the modebar) stay inside it and slide UNDER the pinned dock
instead of drawing over it. */
.sp-cells-plot-wrap { position: relative; z-index: 0; }
.sp-cells-plot-overlay {
position: absolute; inset: 0;
display: flex; justify-content: center;
/* Held near the top of the 640px box rather than centred in it. Centred puts
the indicator ~320px down, which on a laptop viewport lands below the fold
— the reader looks at the plot area, sees blank, and concludes it is
broken, which is the failure this whole element exists to prevent. */
align-items: flex-start; padding-top: 160px;
background: var(--surface);
border: 1px solid var(--border); border-radius: 12px;
}
/* Faded out rather than switched off. The canvas is composited by the GPU and
can appear a frame or two after the DOM around it, so a hard cut can flash a
blank box; across a fade the plot is revealed as the cover dissolves and
there is no instant with neither plot nor feedback on screen. */
.sp-cells-plot-overlay.is-leaving {
opacity: 0;
transition: opacity 220ms ease-out;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.sp-cells-plot-overlay.is-leaving { transition: none; }
}
.sp-cells-plot-overlay-inner { width: min(320px, 60%); text-align: center; }
.sp-cells-plot-overlay-msg {
margin-top: 12px;
font-size: 0.84rem;
color: var(--text-subtle);
}
/* ---------------------------------------------------------------------------
Sign-in prompt
---------------------------------------------------------------------------
Shown by shared.js when a signed-out visitor hits an endpoint that is not
part of anonymous access (Benchmarks, the Library, the Tools catalogue). It replaces a bare
"Error: HTTP 403", which reads as a broken site rather than as a page that
needs an account.
Uses the existing tokens rather than new colours so it inherits both themes
without a second definition. */
/* ── Sign-in gate ─────────────────────────────────────────────────────────
What a signed-out visitor sees when they open a page that reads private
sample or run data. Built by momixShowSignInPrompt() in shared.js.
A CARD THAT REPLACES THE PAGE, not a bar above it. The gate fires on a 403,
which means no row ever arrived, so the page underneath is an empty table
and a column of em-dashes. Banner-over-scaffold reads as two unrelated
failures — "the site is broken" AND "you are locked out" — where the card
says the one true thing. The site header is deliberately left standing
(see `momix-signin-gated`) so the reader keeps every way out.
Every rule here is TOP-LEVEL and token-driven. Top-level because a nesting
level would put `.momix-signin-prompt` inside a block a browser can skip
(test_stylesheet_is_parseable asserts depth 0); token-driven because the
gate must be legible in both themes without a second colour definition. */
.momix-signin-prompt {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.85rem;
margin: 8vh auto 3rem;
padding: 2.4rem 2.2rem 2rem;
max-width: 460px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-accent), 0 18px 50px rgba(0, 0, 0, 0.16);
font-size: 0.9rem;
color: var(--text);
animation: momix-signin-rise 0.3s ease-out;
}
/* The padlock, in the same gradient disc as every momix call-to-action, so the
gate reads as part of the product rather than as an error surface. */
.momix-signin-badge {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--gradient-btn);
color: #fff;
box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 42%, transparent);
}
.momix-signin-badge svg { width: 25px; height: 25px; }
.momix-signin-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
}
.momix-signin-title {
font-weight: 600;
font-size: 1.22rem;
letter-spacing: -0.01em;
color: var(--text);
}
.momix-signin-detail {
font-size: 0.88rem;
line-height: 1.5;
max-width: 34ch;
color: var(--text-muted);
}
.momix-signin-action {
width: 100%;
background: var(--gradient-btn);
color: #fff;
border: none;
border-radius: 8px;
padding: 0.62rem 1.15rem;
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 32%, transparent);
transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.momix-signin-action:hover {
background: var(--gradient-btn-hover);
transform: translateY(-1px);
box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.momix-signin-action:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
/* Where a guest CAN go. Links, not prose — the old banner named the three open
areas in a sentence and left the reader to find them. The hairline is drawn
on this row so the card needs no extra element to split its two halves. */
.momix-signin-open {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
width: 100%;
padding-top: 1rem;
margin-top: 0.2rem;
border-top: 1px solid var(--border);
}
.momix-signin-open-label {
width: 100%;
margin-bottom: 0.1rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-subtle);
}
.momix-signin-chip {
display: inline-block;
padding: 0.22rem 0.62rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-2);
color: var(--text-muted);
font-size: 0.79rem;
font-weight: 500;
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.momix-signin-chip:hover {
border-color: var(--border-glow);
background: color-mix(in srgb, var(--accent) 9%, var(--surface));
color: var(--text);
}
/* The card owns the viewport: everything the gated page rendered is removed,
the site header excepted so the reader keeps their way out. */
body.momix-signin-gated > *:not(header):not(#momixSignInPrompt) { display: none !important; }
@keyframes momix-signin-rise {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.momix-signin-prompt { animation: none; }
.momix-signin-action:hover { transform: none; }
}
@media (max-width: 640px) {
.momix-signin-prompt { margin: 4vh 1rem 2rem; padding: 2rem 1.4rem 1.6rem; }
}
/* ── TCGA TMB evidence-standard switch ────────────────────────────────────
ONE control with two states (off = strictly-PASS calls, the conservative
default; on = also count whole-genome-amplified libraries), rather than two
buttons — the choice is binary and mutually exclusive, so a switch says that
where a pair of buttons only implies it. role="switch" + aria-checked carry
the state to assistive tech; the knob position carries it visually. */
.tt-switch { position: relative; width: 38px; height: 21px; flex: 0 0 auto;
border-radius: 11px; border: 1px solid var(--border, #cbd5e1);
background: var(--border, #cbd5e1); cursor: pointer; padding: 0;
transition: background .15s ease, border-color .15s ease; }
.tt-switch[aria-checked="true"] { background: var(--accent, #2563eb);
border-color: var(--accent, #2563eb); }
.tt-switch-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
border-radius: 50%; background: #fff; transition: transform .15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tt-switch[aria-checked="true"] .tt-switch-knob { transform: translateX(17px); }
.tt-switch:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.tt-switch-text { font-size: 0.85rem; color: var(--text-muted, #64748b); cursor: pointer; }
/* ---------------------------------------------------------------------------
State-of-the-art benchmark section (.sp-sota*) — the SOTA comparisons get a
visually DISTINCT treatment from the In-house cards: accent-marked section
head, tinted table surface, comparator badges, and muted control rows so
candidates and controls never read as the same thing. Same design system
(tokens only, light+dark both come from the token definitions); different
surface. Class family deliberately sp-sota* — nothing here may start with
"ad" (adblock hides it).
LAYOUT RULE FOR THIS SECTION — numbers stay next to their labels. Two things
used to push the results off to the right and force a horizontal scroll:
1. the master row's Results chips carry each card's FULL truth-set label
("Early apoptosis (HEK293, AnnexinV/DAPI)"), which is far longer than
the In-house WES/WGS chips this table was sized for, and
2. `.sp-table` is width:100%, so the compare table's few narrow metric
columns absorbed every spare pixel and floated each number hundreds of
px away from the option it belongs to.
Both are fixed by CAPPING, not by hiding: the chips wrap inside a bounded
measure, and the compare table shrinks to its content (numeric columns are
`width: 1%`, the auto-layout idiom for "no wider than you need"). Nothing is
truncated or ellipsed — a clinician still reads every label in full.
--------------------------------------------------------------------------- */
.sp-bench-section-title {
margin: 26px 0 10px;
font-size: 1.02rem;
letter-spacing: 0.02em;
color: var(--text);
}
.sp-sota-head {
margin-top: 34px;
padding: 10px 14px 12px;
border-left: 3px solid var(--accent);
background: var(--surface-2);
border-radius: 0 8px 8px 0;
}
.sp-sota-head .sp-bench-section-title { margin: 0 0 6px; }
.sp-sota-title { color: var(--accent); }
.sp-sota-explainer {
margin: 0;
max-width: 72ch;
font-size: 0.86rem;
color: var(--text-muted);
}
.sp-sota-tablewrap {
border: 1px solid var(--accent-light);
border-radius: 8px;
background: var(--surface-2);
}
.sp-sota-badge {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
border: 1px solid var(--accent);
border-radius: 999px;
font-size: 0.72rem;
letter-spacing: 0.02em;
color: var(--accent);
white-space: nowrap;
vertical-align: middle;
}
/* ── Master row: keep the SOTA table inside the viewport ─────────────────────
Scoped to .sp-sota-row so the In-house master table, which already fits, is
not re-flowed. Long benchmark names, truth-set scopes and result chips WRAP
within a bounded column instead of widening the table past its wrapper. */
.sp-sota-row .benchmark-master-name { white-space: normal; max-width: 44ch; }
.sp-sota-row .benchmark-master-scope { white-space: normal; max-width: 40ch; }
.sp-sota-row .benchmark-master-chips {
max-width: 26rem;
}
/* ── Per-truth-set scorecard ────────────────────────────────────────────────
Title + table + run stamp in one panel. The cards score DIFFERENT junk gates
/ eval subsets and their numbers are NOT comparable across the boundary, so
the panel edge is doing real work: it says where one read stops. */
.sp-sota-body .benchmark-methodology,
.sp-sota-body .benchmark-limitations { max-width: 78ch; }
.sp-sota-card {
/* Hugs its table rather than bleeding to the full row width — the panel edge
is meant to say where one read stops, which it cannot do if it always ends
at the viewport. Stacked, never side by side: two cards score DIFFERENT
truth and placing them shoulder to shoulder invites the cross-card
comparison the registry explicitly warns against. */
width: fit-content;
max-width: 100%;
margin: 14px 0 0;
padding: 12px 14px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
}
/* Title left, scope selector right. The selector RE-SCOPES the table under it
rather than adding a second one, so it belongs in the panel's own header —
putting it above the panel would read as a filter over both cards. */
.sp-sota-cardhead {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.25rem;
margin: 0 0 8px;
}
.sp-sota-cardtitle {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Control label + select in a scorecard header. Used by the per-call block's
method selector. */
.sp-sota-scopelabel {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-subtle);
white-space: nowrap;
}
.sp-sota-scope {
/* No width cap: a native select sizes to its widest option, and these options
are the registry's full group names ("Regulatory T cell (CD127lo CD25+
sort)"). Capping it clipped the label mid-word — and the scorecard is
content-width, so letting the control size itself costs nothing. */
max-width: 100%;
padding: 3px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-2);
color: var(--text);
font-family: inherit;
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.sp-sota-scope:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Counts are the denominator, not a score: same numeric column treatment, muted
so they never read as one more metric the arms are competing on. */
.sp-sota-countcol { color: var(--text-muted); }
/* The truth group a call implies, trailing its label: "TFH1 → Tconv". Subdued —
it is the mapping the agreement was scored through, not a second call. */
.sp-sota-implies {
margin-left: 0.5rem;
font-size: 0.78em;
color: var(--text-subtle);
white-space: nowrap;
}
/* The per-call audit block. Sits under the head-to-head and reads as a
continuation of it, so it takes the same panel with a slightly heavier top
rule to say a new question starts here. */
.sp-sota-callcard { margin-top: 18px; }
/* States what the number below the table can and cannot establish. */
.sp-sota-scopenote {
margin: 10px 0 0;
max-width: 68ch;
font-size: 0.76rem;
line-height: 1.45;
color: var(--text-muted);
}
.sp-sota-comparewrap { overflow-x: auto; }
/* Content-width comparison table. `width: auto` + `width: 1%` numeric columns
collapse each metric column to the widest of its header and its values, so
the numeric block sits immediately right of the option labels. The wrapper
still scrolls if a viewport cannot hold even that. */
.sp-sota-compare {
width: auto;
max-width: 100%;
}
.sp-sota-compare th,
.sp-sota-compare td { padding-top: 7px; padding-bottom: 7px; }
.sp-sota-compare th:first-child,
.sp-sota-compare td:first-child { padding-left: 0; }
/* The option column takes whatever its labels need and wraps only when the
viewport cannot hold the table; the metric columns are a FIXED narrow width,
so the numeric block is a constant-width slab pinned to the labels.
NB the metric width must be an absolute length, not the `width: 1%`
auto-layout idiom: a percentage cell width inside a `width: auto` table makes
the browser widen the table until the percentage is satisfiable, which is the
full-bleed stretch this section is being fixed for. */
.sp-sota-optcol {
white-space: normal;
padding-right: 20px !important;
}
.sp-sota-num {
width: 6.75rem;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
padding-left: 14px !important;
padding-right: 0 !important;
}
/* Metric headers wrap ("Margin over decoy" → two lines) inside that width
rather than setting a column width no value needs. */
.sp-sota-compare th.sp-sota-num {
white-space: normal;
vertical-align: bottom;
line-height: 1.25;
}
/* A single rule separates labels from the numeric block — the eye lands on the
boundary instead of tracking across empty space. Deliberately NOT per-column
rules or a winner highlight: highlighting a best cell invites reading an
exclusion number without its paired retention. */
.sp-sota-optcol + .sp-sota-num {
border-left: 1px solid var(--border);
padding-left: 20px !important;
}
/* Controls: the baseline + matched decoys. Muted and dash-separated so the
eye files them as the floor, never as competitors. */
.sp-sota-ctlrow td {
color: var(--text-subtle);
font-style: italic;
border-top: 1px dashed var(--border);
}
/* Flag rows (annotation-only arms): secondary, upright, not muted-to-nothing —
they are real results, just not filters. */
.sp-sota-flagrow td { color: var(--text-muted); }
.sp-sota-runstamp {
margin: 8px 0 0;
font-size: 0.78rem;
color: var(--text-subtle);
}
.sp-sota-ctlnote {
margin: 14px 2px 0;
max-width: 72ch;
font-size: 0.8rem;
color: var(--text-muted);
}
/* ── Reference matrix (cards with `reference_roles`) ──────────────────────
Rows are ground-truth datasets, columns are the two ROLES a reference plays
for a tissue. The tissue-matched cell is tinted because that column is the
claim the card makes ("momix with a reference for your tissue"); the default
column is what every other tissue gets and is deliberately plain. */
.sp-refmx-body .benchmark-methodology,
.sp-refmx-body .benchmark-limitations { max-width: 78ch; }
.sp-refmx-wrap { overflow-x: auto; margin-top: 14px; }
.sp-refmx {
width: auto;
max-width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.sp-refmx th,
.sp-refmx td {
vertical-align: top;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
/* .sp-table td sets nowrap at higher specificity; the dataset label and the
"none built" sentence are prose and must wrap inside their column. */
.sp-refmx td.sp-refmx-dscol,
.sp-refmx td.sp-refmx-role { white-space: normal; }
.sp-refmx th {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-subtle);
white-space: nowrap;
}
.sp-refmx th:first-child,
.sp-refmx td:first-child { padding-left: 0; }
.sp-refmx-dscol {
min-width: 13rem;
max-width: 18rem;
font-weight: 600;
color: var(--text);
white-space: normal;
}
/* One rule between the label column and the numeric block, as on the SOTA
compare table — the eye lands on the boundary instead of crossing space. */
.sp-refmx-dscol + .sp-refmx-role { border-left: 1px solid var(--border); }
.sp-refmx-role { min-width: 17rem; max-width: 24rem; white-space: normal; }
/* The specialist cell is the claim the card makes, so it gets the surface tint.
A tint, not a hue: the hues inside the cell belong to the metrics. */
.sp-refmx td.sp-refmx-role--matched {
background: color-mix(in srgb, var(--accent) 9%, transparent);
box-shadow: inset 2px 0 0 var(--accent);
}
.sp-refmx-role--none { color: var(--text-muted); }
.sp-refmx-ref {
font-size: 0.86rem;
font-weight: 600;
color: var(--text);
margin-bottom: 7px;
}
/* label · bar · value, one metric per line. Tabular numerals so three values
stack into a column the eye can subtract. */
.sp-refmx-cell {
display: grid;
grid-template-columns: auto minmax(6rem, 1fr) auto;
gap: 4px 10px;
align-items: center;
}
.sp-refmx-cell--inline {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
}
.sp-refmx-cell--inline .sp-refmx-k { margin-right: -12px; }
.sp-refmx-k {
font-size: 0.74rem;
color: var(--text-muted);
white-space: nowrap;
}
.sp-refmx-v {
font-size: 0.86rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.sp-refmx-bar {
display: block;
height: 6px;
border-radius: 3px;
background: var(--surface-2);
border: 1px solid var(--border);
overflow: hidden;
}
.sp-refmx-bar i {
display: block;
height: 100%;
/* --metric-hue is set per bar from _metricColor(), the same function that
colours the metric's trend line, so one measure is one colour across the
card. The accent fallback keeps a bar visible if a metric is ever plotted
without a palette entry. */
background: var(--metric-hue, var(--accent));
opacity: 0.9;
}
/* A COUNT metric that falls short is a structural hole — populations the
reference has no class for. Hatched, not recoloured: another hue here would
be some other metric's identity, and the hatch reads in greyscale and in
forced-colours mode where a fill does not. */
.sp-refmx-bar--gap {
background-image: repeating-linear-gradient(135deg,
transparent 0 3px, color-mix(in srgb, var(--metric-hue, var(--accent)) 38%, transparent) 3px 4px);
}
.sp-refmx-none {
font-size: 0.82rem;
font-style: italic;
max-width: 20rem;
line-height: 1.4;
}
/* Cross-tissue controls: the wrong atlas on purpose. Muted, dashed, under the
row it belongs to, so it reads as the floor and never as a third reference. */
.sp-refmx-ctlrow td {
padding-top: 6px;
padding-bottom: 8px;
border-top: 1px dashed var(--border);
border-bottom: 1px solid var(--border);
color: var(--text-subtle);
font-style: italic;
}
.sp-refmx-ctlrow .sp-refmx-dscol { font-weight: 400; }
.sp-refmx-ctllabel {
display: block;
font-size: 0.7rem;
font-weight: 700;
font-style: normal;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-subtle);
}
.sp-refmx-ctlnote { font-size: 0.76rem; }
.sp-refmx-role--ctl .sp-refmx-v { font-weight: 500; color: var(--text-muted); }
/* The gap: dumbbell small multiples, one per metric, one line per dataset that
has both a tailored and a default read. */
.sp-refmx-gap { margin-top: 18px; }
.sp-refmx-gapgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
gap: 12px;
max-width: 66rem;
margin-top: 8px;
}
.sp-refmx-gappanel {
padding: 10px 12px 8px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
}
.sp-refmx-gaphead {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 6px;
}
/* One swatch per panel: the panel's metric, in the hue its bars and its trend
line already use. Identity is never carried by the text colour. */
.sp-refmx-swatch {
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--metric-hue, var(--accent));
flex: none;
}
/* One dataset per row: label above, then the line with its delta at the
right, so the line gets the panel's full width however long the label. */
.sp-refmx-gaprow {
display: grid;
grid-template-columns: 1fr 3.4rem;
grid-template-areas: "label label" "line delta";
align-items: center;
column-gap: 8px;
margin-top: 4px;
}
.sp-refmx-gapds {
grid-area: label;
font-size: 0.72rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sp-refmx-gaprow .sp-refmx-gapsvg { grid-area: line; }
.sp-refmx-gaprow .sp-refmx-gapdelta { grid-area: delta; }
.sp-refmx-gapticks { grid-template-areas: "tick tick"; margin-top: -4px; }
.sp-refmx-gapticks .sp-refmx-gaptick { grid-area: tick; }
.sp-refmx-gapsvg { display: block; width: 100%; height: 22px; }
/* The delta is TEXT and wears text ink, never the series colour; the swatch in
the panel head carries the identity. Direction is the sign, already there. */
.sp-refmx-gapdelta {
font-size: 0.78rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text);
text-align: right;
}
.sp-refmx-gapdelta--worse { color: var(--text-muted); }
.sp-refmx-gaptick {
display: flex;
justify-content: space-between;
padding: 0 4px;
font-size: 0.64rem;
color: var(--text-subtle);
}
.sp-refmx-gapaxis { stroke: var(--border); stroke-width: 1; }
/* The dumbbell wears the metric's hue; the two ends differ by SHAPE, so the
role reading survives greyscale and every CVD type. A dashed line is the
direction cue: the tailored reference lost ground on this row. */
.sp-refmx-gapline {
stroke: var(--metric-hue, var(--accent));
stroke-width: 3;
stroke-linecap: round;
}
.sp-refmx-gapline--worse { stroke-dasharray: 3 2.5; opacity: 0.75; }
.sp-refmx-dot--specialist { fill: var(--metric-hue, var(--accent)); }
/* Open ring on the surface: the default reference, the thing being compared
against, reads as the reference point rather than a second series. */
.sp-refmx-dot--default {
fill: var(--surface);
stroke: var(--metric-hue, var(--accent));
stroke-width: 2;
}
.sp-refmx-legend {
display: flex;
gap: 16px;
margin-top: 8px;
font-size: 0.74rem;
color: var(--text-muted);
}
.sp-refmx-legend span::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: 6px;
vertical-align: -1px;
}
/* The legend teaches the SHAPES, in neutral ink — filled end vs open ring —
because the hue on a dumbbell says which metric, not which reference. */
.sp-refmx-legend--specialist::before { background: var(--text); }
.sp-refmx-legend--default::before {
background: var(--surface);
box-shadow: inset 0 0 0 2px var(--text);
}
.sp-refmx-legend--hue::before { display: none; }
.sp-refmx-legend--hue { color: var(--text-subtle); }
/* `cross-tissue`: the specialist atlas on this row was built for another organ.
A word, not a colour — it qualifies the claim rather than grading it. */
.sp-refmx-mark {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 9px;
border: 1px dashed var(--border-glow);
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: lowercase;
color: var(--text-muted);
vertical-align: 1px;
white-space: nowrap;
cursor: help;
}
.sp-refmx-tech { margin-top: 10px; }
/* Tier slider: one stop per facet, coarse → fine, the gated tier tagged so a
reader knows which tier the master row and floors read. The stop labels sit
under the track at the stop positions and are buttons in their own right. */
.sp-refmx-facetbar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 6px 14px;
margin: 14px 0 -2px;
}
.sp-refmx-slider {
width: min(22rem, 100%);
padding-top: 2px;
}
.sp-refmx-facetrange {
display: block;
width: 100%;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.sp-refmx-facetstops {
display: grid;
grid-template-columns: repeat(var(--stops, 3), 1fr);
margin-top: 2px;
}
.sp-refmx-facetstop {
appearance: none;
border: 0;
background: none;
padding: 2px 0;
font: inherit;
font-size: 0.78rem;
color: var(--text-muted);
cursor: pointer;
text-align: center;
white-space: nowrap;
}
.sp-refmx-facetstop:first-child { text-align: left; }
.sp-refmx-facetstop:last-child { text-align: right; }
.sp-refmx-facetstop:hover { color: var(--text); }
.sp-refmx-facetstop.is-active { color: var(--accent-light); font-weight: 600; }
.sp-refmx-facetgate {
margin-left: 6px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.8;
}
.sp-refmx-facetnote {
flex-basis: 100%;
font-size: 0.76rem;
color: var(--text-muted);
max-width: 78ch;
}
/* ── Somatic tab: "TMB in context" ────────────────────────────────────────
The sample's TMB placed on the pan-cancer TCGA violins (sample-tmb-context.js).
Reuses .tt-switch for the evidence-standard toggle; only the controls row and
the headline readout are new. Colours are tokens, so the card inherits the
theme rather than pinning a background of its own. */
.stc-card { padding: 14px 16px 8px; }
.stc-controls { display: flex; flex-wrap: wrap; align-items: flex-end;
gap: 18px 24px; margin-bottom: 12px; }
.stc-control { display: flex; flex-direction: column; gap: 4px; }
/* Indented to the select's own text inset (1px border + 10px padding) so the
label sits directly above the option text, not above the control's edge. */
.stc-control-label { font-size: 0.8rem; color: var(--text-muted, #64748b);
padding-left: 11px; }
.stc-mode { margin-bottom: 2px; }
/* The one-line answer, read before the figure: value, rank, cutpoint verdict. */
.stc-headline { display: flex; flex-wrap: wrap; align-items: baseline;
gap: 6px 12px; margin: 4px 0 10px; }
.stc-value { font-size: 1.55rem; font-weight: 650; color: var(--text, #0f172a);
line-height: 1.1; }
.stc-unit { font-size: 0.85rem; font-weight: 500; color: var(--text-muted, #64748b); }
.stc-rank { font-size: 0.9rem; color: var(--text-muted, #64748b); }
.stc-rank b { color: var(--text, #0f172a); font-weight: 620; }
/* The TMB-High cutpoint verdict is a chip, but a NEUTRAL one by default: ≥10
mut/Mb is a treatment-eligibility finding, not a QC pass/fail, so only the
at-or-above state is tinted and it borrows the existing border/accent tokens
rather than inventing a colour. */
.stc-flag { font-size: 0.78rem; padding: 2px 9px; border-radius: 10px;
border: 1px solid var(--border, #cbd5e1); color: var(--text-muted, #64748b); }
.stc-flag-high { border-color: #dc2626; color: #dc2626; }
/* Provenance for the TMB plot's cohort selection: where the cohort came from,
stated as a fact rather than a hedge (see _stcRenderProvenance). Sits under
the picker it explains, quiet enough not to compete with the headline. */
.stc-provenance { font-size: 0.78rem; color: var(--text-muted, #64748b);
margin-top: 4px; max-width: 46ch; line-height: 1.45; }
/* The TMB figure is a plain block, not a collapsible section, so it does not
inherit `.vep-section-collapsible > .vep-chart-card`'s side inset. Match it
here so the card still lines up with the sections above and below it. */
#stcSection > .stc-card { margin: 8px 24px 16px; }
/* Disclosure for the figure's how-to-read text. A quiet "…" rather than a
worded control: the paragraph is read once and then never again, so the
affordance should not compete with the plot for attention. */
.stc-note-toggle { display: block; margin: 6px 0 0; padding: 0 8px; height: 20px;
border: 1px solid var(--border, #cbd5e1); border-radius: 10px;
background: transparent; color: var(--text-muted, #64748b);
font-size: 0.8rem; line-height: 1; cursor: pointer;
transition: color .15s ease, border-color .15s ease; }
.stc-note-toggle:hover { color: var(--text, #0f172a); border-color: var(--text-muted, #64748b); }
.stc-note-toggle:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.stc-note-toggle[aria-expanded="true"] { color: var(--text, #0f172a); }
|