/* Minimal app overrides; Pico CSS handles the rest. */
main.container { max-width: 96rem; padding: 1.5rem 1rem; }
nav.container-fluid { background: var(--pico-card-background-color); border-bottom: 1px solid var(--pico-muted-border-color); padding: 0.4rem 1rem; }
table { font-size: 0.95rem; }
mark { padding: 0.05rem 0.4rem; border-radius: 0.25rem; font-size: 0.95rem; }
code { font-size: 0.95rem; }

/* Variant table is dense — keep it readable. */
table.variant-table {
    /* Override Pico v2 CSS variables at the table scope — beats anything
       Pico applies via `:where(table) ...` since these vars cascade. */
    --pico-spacing: 0.25rem;
    --pico-line-height: 1.1;
    --pico-typography-spacing-vertical: 0;
    font-size: 0.72rem;
    line-height: 1.1;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
/* Plain tight monospace for c./p. HGVS — strip Pico's default code pill
   (padding + background + radius) so the notation isn't oversized and the
   cell never exceeds the row-height floor (which made dash-only rows look
   shorter). Slightly smaller than proportional text since mono reads larger. */
table.variant-table code  {
    font-size: 0.68rem;
    line-height: 1.05;
    padding: 0;
    background: none;
    border-radius: 0;
    color: inherit;
    font-variant-numeric: tabular-nums;
}
table.variant-table small { font-size: 0.7rem;  line-height: 1.05; vertical-align: middle; }
table.variant-table tr    { line-height: 1.1; }
/* Uniform row height: floor every data cell to one height so sparse rows
   (no c./p. notation, dash-only cells) match rows with HGVS code + chips.
   vertical-align:middle (set on td below) keeps content centered. */
table.variant-table tbody td { height: 1.1rem; }
/* Zebra striping + row hover so a 30+ row table doesn't blur into one
   wall of text. !important because Pico v2 sets a low-specificity
   :where() rule on tbody tr that otherwise wins. */
table.variant-table tbody tr:nth-child(even)        { background: #f3f6fa !important; }
table.variant-table tbody tr:hover                  { background: #dbeafe !important; }
table.variant-table tbody tr.variant-filter-row,
table.variant-table tbody tr.variant-filter-row:hover { background: transparent !important; }

/* Evidence column reference-DB annotations (ClinVar, OncoKB, gnomAD,
   Mutect2 FILTER) are noise on every scan but useful when zeroing in
   on a row. The DOM stores them in a hidden `.evidence-anno-src`
   block; the shared #vaf-popover JS handler surfaces them on cell
   hover (same UX as the VAF / cohort popovers, no row-height change).
   No visible indicator — cursor:help is the only cue. */
.evidence-hover { cursor: help; }
/* Popover layout for the evidence content. */
#vaf-popover .evidence-popover {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 0.7rem;
    min-width: 14rem;
    max-width: 28rem;
    font-size: 0.78rem;
    line-height: 1.3;
}
#vaf-popover .evidence-popover .ea-label {
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}
#vaf-popover .evidence-popover .ea-val {
    color: #0f172a;
    word-break: break-word;
}
table.variant-table th,
table.variant-table td {
    padding-top: 0.05rem !important;
    padding-bottom: 0.05rem !important;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    vertical-align: middle !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
/* Force descendants (spans, codes, etc.) to inherit the tight line-height
   rather than picking up Pico's 1.5 default through their own selectors. */
table.variant-table td *, table.variant-table th * { line-height: inherit; }
/* Fixed column widths so every variant table on every page looks identical
   and rows don't jump when the my-decision cell expands on hover.
   Column order: locus, callers, gene, c., p., effect, vaf, cohort-n, run-n,
                 depth, score, auto-tier, evidence, seen, my-decision. */
table.variant-table th, table.variant-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.variant-table th:nth-child(1),  table.variant-table td:nth-child(1)  { width: 8rem; }     /* locus */
table.variant-table th:nth-child(2),  table.variant-table td:nth-child(2)  { width: 3.6rem; }   /* callers (M/V/H pills) */
table.variant-table th:nth-child(3),  table.variant-table td:nth-child(3)  { width: 4rem; }     /* gene */
table.variant-table th:nth-child(4),  table.variant-table td:nth-child(4)  { width: 8rem; }     /* c. */
table.variant-table th:nth-child(5),  table.variant-table td:nth-child(5)  { width: 8rem; }     /* p. */
table.variant-table th:nth-child(6),  table.variant-table td:nth-child(6)  { width: 3.4rem; }   /* effect */
table.variant-table th:nth-child(7),  table.variant-table td:nth-child(7)  { width: 3.2rem; text-align: right; }   /* vaf */
table.variant-table th:nth-child(8),  table.variant-table td:nth-child(8)  { width: 4.4rem; text-align: right; }   /* cohort n */
table.variant-table th:nth-child(9),  table.variant-table td:nth-child(9)  { width: 3.8rem; text-align: right; }   /* run n */
table.variant-table th:nth-child(10), table.variant-table td:nth-child(10) { width: 3.4rem; text-align: right; }   /* depth */
table.variant-table th:nth-child(11), table.variant-table td:nth-child(11) { width: 3.6rem; text-align: right; }   /* score */
table.variant-table th:nth-child(12), table.variant-table td:nth-child(12) { width: 5rem; }     /* auto-tier */
table.variant-table th:nth-child(13), table.variant-table td:nth-child(13) { width: 3.25rem; white-space: nowrap; }    /* evidence — chips only */
table.variant-table th:nth-child(14), table.variant-table td:nth-child(14) { width: 4.5rem; }                             /* seen — prior analyst calls */
table.variant-table th:nth-child(15), table.variant-table td:nth-child(15) { width: 5rem; overflow: visible; position: relative; }  /* my decision — chip only; classify form is a hover popover */
/* The expanded decision-cell needs to overflow the td so the buttons
   appear in full without clipping; revert ellipsis for that cell only. */
table.variant-table td:nth-child(15) .decision-cell { overflow: visible; }

/* Responsive collapse — hide low-value columns as the viewport narrows.
   Pathologists scanning on a tablet still see the locus/gene/p./vaf/score/
   tier/decision spine; the c., effect, run-n, evidence columns drop off
   first because they're either duplicates (c. is recoverable from p.) or
   only useful when a row already looks interesting. */
@media (max-width: 900px) {
    /* Tablet: drop c. (4), effect (6), run-n (9), evidence (13). 15 → 11 cols. */
    table.variant-table th:nth-child(4),  table.variant-table td:nth-child(4),
    table.variant-table th:nth-child(6),  table.variant-table td:nth-child(6),
    table.variant-table th:nth-child(9),  table.variant-table td:nth-child(9),
    table.variant-table th:nth-child(13), table.variant-table td:nth-child(13) { display: none; }
}
@media (max-width: 600px) {
    /* Mobile: additionally drop cohort-n (8) and depth (10). 15 → 9 cols.
       Visible: locus, callers, gene, p., vaf, score, auto-tier, seen, my decision. */
    table.variant-table th:nth-child(8),  table.variant-table td:nth-child(8),
    table.variant-table th:nth-child(10), table.variant-table td:nth-child(10) { display: none; }
}
.error { background: var(--pico-color-red-50, #fee); color: var(--pico-color-red-700, #b91c1c); padding: 0.5rem 0.75rem; border-radius: 0.25rem; font-size: 0.9rem; margin: 0.5rem 0; }
fieldset { border: 1px solid var(--pico-muted-border-color); padding: 0.5rem 0.75rem; margin: 0.5rem 0; border-radius: 0.25rem; }
fieldset legend { padding: 0 0.25rem; font-size: 0.875em; color: var(--pico-muted-color); }
label.role-radio { display: block; margin: 0.15rem 0; font-weight: normal; font-size: 1rem; line-height: 1.5; cursor: pointer; }
label.role-radio input[type="radio"] { margin-right: 0.4rem; vertical-align: middle; }
button.role-submit { width: auto; margin-top: 0.5rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.form-actions > button, .form-actions > [role="button"] { width: auto; margin: 0; }

/* sortable + filterable variant tables */
table.variant-table th[data-sort-key] { cursor: pointer; user-select: none; }
table.variant-table th[data-sort-key]:hover { color: var(--pico-primary); }
table.variant-table th[data-sort-key]::after { content: " \2195"; color: var(--pico-muted-color); font-size: 0.8em; }
table.variant-table th[data-sort-key].sort-asc::after  { content: " \25B2"; color: var(--pico-primary); }
table.variant-table th[data-sort-key].sort-desc::after { content: " \25BC"; color: var(--pico-primary); }
table.variant-table tr.variant-filter-row th { padding: 0.15rem 0.3rem; background: transparent; }
table.variant-table tr.variant-filter-row th[data-sort-key] { cursor: default; }
table.variant-table tr.variant-filter-row input {
    margin: 0; padding: 0.2rem 0.4rem; width: 100%; min-width: 0;
    font-size: 0.9rem; line-height: 1.2; height: auto;
    background: var(--pico-background-color);
}

/* Artefact-class chips in the evidence column. */
.art-chip {
    display: inline-block;
    padding: 0 0.25rem;
    margin-right: 0.12rem;
    border-radius: 0.18rem;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: help;
    vertical-align: middle;
}
.art-chip.art-hpol      { background: #fef3c7; color: #92400e; border-color: #fde68a; }  /* yellow — homopolymer */
.art-chip.art-sb        { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }  /* orange — strand bias */
.art-chip.art-ffpe      { background: #fee2e2; color: #991b1b; border-color: #fecaca; }  /* red — FFPE CpG */
.art-chip.art-ffpe-soft { background: #fff1f2; color: #be123c; border-color: #fecdd3; }  /* pink — FFPE non-CpG */

/* Per-variant z chips (cohort + run). */
.zchip {
    display: inline-block;
    padding: 0.02rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    cursor: help;
    vertical-align: middle;
}
.zchip.z-warm { background: #fef3c7; color: #92400e; }   /* |z| ≥ 2 */
.zchip.z-hot  { background: #fee2e2; color: #991b1b; font-weight: 600; }  /* |z| ≥ 3 */

/* Cohort-recurrence chip in the dedicated "cohort n" column. */
.cohort-chip {
    display: inline-block;
    padding: 0.02rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    cursor: help;
    vertical-align: middle;
}
.cohort-chip small { color: inherit; opacity: 0.65; font-size: 0.82em; margin-left: 0.1em; }
.cohort-chip.ch-private { background: #ecfdf5; color: #047857; }   /* < 1%: rare/private, often interesting */
.cohort-chip.ch-rare    { background: #fef3c7; color: #92400e; }   /* 1–10% */
.cohort-chip.ch-common  { background: #fee2e2; color: #991b1b; }   /* 10–50%: recurrent, often noise */
.cohort-chip.ch-ubiq    { background: #f3f4f6; color: #4b5563; }   /* ≥ 50%: ubiquitous, near-fixed SNP */

/* Somatic likelihood score badge (call_somatic_score.somatic_score).
   Title attribute holds per-feature contributions; whitespace:pre-line so
   newlines in the tooltip render across browsers that support multi-line
   title attributes. */
.score-badge {
    display: inline-block;
    padding: 0.02rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    cursor: help;
    white-space: pre-line;
    vertical-align: middle;
}
.score-badge.score-hi  { background: #dc2626; color: #fff; }       /* ≥ 0.9 — high-confidence somatic */
.score-badge.score-mid { background: #f97316; color: #fff; }       /* 0.5–0.9 — borderline / review */
.score-badge.score-lo  { background: #fde68a; color: #78350f; }    /* 0.2–0.5 — low evidence */
.score-badge.score-bg  { background: #f3f4f6; color: #9ca3af; }    /* < 0.2 — likely noise */

/* Hover popover for the VAF dotplot next to z_coh / z_run chips. */
#vaf-popover {
    position: absolute;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.3rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    padding: 4px 6px;
    pointer-events: none;
    line-height: 0;
}

/* Table rendered inside the popover for the VAF strand-breakdown hover. */
#vaf-popover .popover-table {
    line-height: 1.3;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
    margin: 0;
}
#vaf-popover .popover-table th,
#vaf-popover .popover-table td {
    padding: 0.18rem 0.55rem;
    text-align: right;
    border-bottom: 1px solid #f1f5f9;
}
#vaf-popover .popover-table thead th {
    color: #64748b; font-weight: 600;
    border-bottom-color: #cbd5e1;
    text-align: right;
}
#vaf-popover .popover-table tbody th {
    color: #0f172a; font-weight: 600;
    text-align: left;
}
#vaf-popover .popover-table tbody tr:last-child th,
#vaf-popover .popover-table tbody tr:last-child td { border-bottom: none; }
.vaf-hover { cursor: help; }
.vaf-cell  { cursor: help; font-variant-numeric: tabular-nums; }

/* Auto-tier badge (somatic_hotspot / candidate / rescue / ...). */
.tier-badge {
    display: inline-block;
    padding: 0.02rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    vertical-align: middle;
}

/* Inline classification toggle in the "my decision" column.
   By default each cell shows a single chip with the current value (P / LP /
   VUS / —). Hover the cell to reveal the three-button row that lets the
   analyst change it. After the htmx swap the cell returns to the collapsed
   chip with the new value selected. Pure CSS, no JS. */
.decision-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    position: relative;
    /* No min-width: the cell shrinks to fit the .current chip so the
       hover popover (position: absolute, left: 100%) anchors right
       next to the chip, not at the far edge of an empty reserved
       block. The form is a popover now — no in-cell expansion to
       reserve width for. */
}
.decision-cell .current { display: inline-flex; align-items: center; }
/* Classify form is a floating popover anchored to the cell. Same UX
   shape as the evidence / VAF popovers — appears on hover, doesn't
   change row height, doesn't compete with the .current chip.
   Invisible ::before bridges the visual gap between cell and popover
   so the mouse can travel down to the buttons without losing :hover. */
.decision-cell .decision-btns {
    display: none;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    z-index: 50;
    margin-left: 0.4rem;
    padding: 0.25rem 0.35rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.3rem;
    box-shadow: 4px 0 12px rgba(15, 23, 42, 0.12);
    white-space: nowrap;
    align-items: center;
    gap: 0.15rem;
}
/* Invisible bridge between the popover's left edge and the chip's
   right edge so the mouse can travel from chip into popover without
   losing :hover (popover opens rightward — bridge on the left). */
.decision-cell .decision-btns::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.5rem;
    width: 0.5rem;
}
/* When JS detects the popover would overflow the viewport on the right
   (rightmost rows on a narrow viewport), .flip-left mirrors it to the
   left side of the chip. Shadow + bridge are mirrored to match. */
.decision-cell.flip-left .decision-btns {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0.4rem;
    box-shadow: -4px 0 12px rgba(15, 23, 42, 0.12);
}
.decision-cell.flip-left .decision-btns::after {
    left: auto;
    right: -0.5rem;
}
.decision-cell:hover .decision-btns,
.decision-cell:focus-within .decision-btns { display: inline-flex; }
.decision-btns .dbtn {
    margin: 0;
    padding: 0.02rem 0.2rem;
    width: auto;                  /* override Pico's default 100% on buttons */
    height: auto;
    min-height: 0;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0.18rem;
    border: 1px solid var(--pico-muted-border-color);
    background: var(--pico-background-color);
    color: var(--pico-muted-color);
    cursor: pointer;
    transition: background 0.08s ease-in-out;
}
.decision-btns .dbtn:hover  { background: #f1f5f9; color: #0f172a; }
.decision-btns .dbtn:focus  { outline: 1px solid var(--pico-primary); outline-offset: 1px; }
.decision-btns .dbtn.selected.dbtn-p   { background: #dc2626; color: #ffffff; border-color: #b91c1c; }
.decision-btns .dbtn.selected.dbtn-lp  { background: #ea580c; color: #ffffff; border-color: #c2410c; }
.decision-btns .dbtn.selected.dbtn-vus { background: #475569; color: #ffffff; border-color: #334155; }
.decision-edit { text-decoration: none; color: var(--pico-muted-color); font-size: 0.85rem; margin-left: 0.15rem; }
.decision-edit:hover { color: var(--pico-primary); }
.save-flash { color: #15803d; font-weight: 700; animation: save-fade 1.6s ease-out forwards; margin-left: 0.25rem; }
@keyframes save-fade {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* MANE / MSKCC HGVS toggle. Both HGVS strings are rendered for every variant;
 * a body class controls which one is visible so the swap is instant. */
.hgvs-mskcc { display: none; }
body.txp-mskcc .hgvs-mskcc { display: inline; }
body.txp-mskcc .hgvs-mane  { display: none; }

/* .txp-toggle holds the HGVS / aa buttons. Box chrome (bg/border/
   padding/margin) comes from the shared .section-card wrapper on the
   parent in the template, so this rule is layout-only. */
.txp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
/* HGVS / aa toggle. A settings switch, not a primary CTA — Pico v2 by
   default paints every button with the brand fill (it locally overrides
   --pico-background-color to the brand color on buttons), so we have to
   use a literal color, not the CSS var, to beat it. Active state uses a
   subtle blue tint so the toggle reads as a switch, not as a save button. */
.txp-toggle button {
    padding: 0.1rem 0.55rem !important;
    font-size: 0.78rem !important;
    background: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.2rem !important;
    font-weight: 400 !important;
    cursor: pointer;
}
.txp-toggle button:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
.txp-toggle button.active {
    background: rgba(2, 132, 199, 0.10) !important;
    color: #0369a1 !important;
    border-color: #0369a1 !important;
    font-weight: 600 !important;
}

/* Uniform card chrome — applied to every boxed unit on the sample page:
   the pipeline-status banner, the HGVS/aa toggle, the auto-resolved
   panel, and the five collapsible sections (Report Draft, My
   Annotations, Variants - Actionable / - Artefacts, Coverage / CNA).
   One background, one border, one corner radius so they read as one
   family. The details-only rules below add the disclosure arrow + open
   padding to the collapsible variants. */
.section-card {
    margin: 0.6rem 0;
    padding: 0.55rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    background: #f8fafc;
}
/* Small muted label inside any .section-card — used for "pipeline:",
   "HGVS:", "aa:", "auto-resolved:" — same color, size, weight. */
.section-card .box-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
}
/* Strong inline value next to a .box-label (panel name, stage). */
.section-card .box-value {
    color: #0f172a;
    font-weight: 600;
}
details.section-card[open] {
    padding-bottom: 0.85rem;
}
details.section-card > summary {
    cursor: pointer;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    user-select: none;
    line-height: 1.4;
}
details.section-card > summary::-webkit-details-marker,
details.section-card > summary::marker { display: none; content: ''; }
details.section-card > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.45rem;
    color: #64748b;
    font-weight: 400;
    width: 0.8rem;
}
details.section-card[open] > summary::before { content: '▾'; }
details.section-card > summary .section-subtitle {
    font-weight: 400;
    font-size: 0.82rem;
    color: #6b7280;
    margin-left: 0.5rem;
}

/* Mobile-tight header chrome.
   On narrow viewports the pipeline-status timestamp list (queued · metadata
   · spans · …) and the HGVS/aa toggle bar steal vertical space without
   adding signal — the progress bar + status text already convey state and
   the analyst rarely flips transcript-form mid-scroll. Hide / shrink them
   below 600px so the variant table reaches above the fold. */
@media (max-width: 600px) {
    .pipeline-stage-list { display: none; }
    .txp-toggle {
        padding: 0.15rem 0.35rem;
        gap: 0.2rem;
        margin: 0 0 0.4rem 0;
        font-size: 0.75rem;
    }
    .txp-toggle button {
        padding: 0.05rem 0.4rem;
        font-size: 0.72rem;
    }
}

/* 3-letter / 1-letter amino-acid toggle. Both forms are rendered for every
 * protein change; a body class controls which is visible. */
.aa-1 { display: none; }
body.aa-1letter .aa-1 { display: inline; }
body.aa-1letter .aa-3 { display: none; }

/* Per-row "reset" button next to P/LP/VUS in the decision cell. Clears
 * the analyst's current annotation for that one variant. */
.decision-btns .dbtn-clear {
    background: var(--pico-background-color);
    color: #94a3b8;
    border-color: var(--pico-muted-border-color);
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    padding: 0 0.3rem;
}
.decision-btns .dbtn-clear:hover:not(:disabled) {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}
.decision-btns .dbtn-clear:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Shared data-grid styling — uppercase tracked-out header, soft separators,
   row hover, single-line cells with ellipsis. Used by /runs and /runs/<name>. */
table.data-table { font-size: 0.95rem; width: 100%; }
table.data-table th, table.data-table td {
    padding: 0.4rem 0.55rem;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #f1f5f9;
}
table.data-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
table.data-table tbody tr:hover { background: #f8fafc; }
table.data-table small,
table.data-table code,
table.data-table input,
table.data-table select,
table.data-table button { font-size: inherit; }

/* Run-detail extension — fixed column widths + inline dropdown forms. */
table.run-table { table-layout: fixed; font-size: 0.78rem; }
table.run-table select {
    padding: 0.15rem 0.4rem; margin: 0; min-width: 0; flex: 1;
    border-color: #e2e8f0;
}
table.run-table form { width: 100%; }
/* Status cell holds just the progress bar; conflict cell holds the warning pills. */
table.run-table td.status-cell,
table.run-table td.conflict-cell { overflow: visible; }
.status-warn {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.run-table th:nth-child(1),  table.run-table td:nth-child(1)  { width: 4.5rem; }  /* barcode */
table.run-table th:nth-child(2),  table.run-table td:nth-child(2)  { width: 6rem; }    /* D-nr */
table.run-table th:nth-child(3),  table.run-table td:nth-child(3)  { width: 7rem; }    /* T-nr */
table.run-table th:nth-child(4),  table.run-table td:nth-child(4)  { width: 10rem; }   /* panel */
table.run-table th:nth-child(5),  table.run-table td:nth-child(5)  { width: 9rem; }    /* KMBPio */
table.run-table th:nth-child(6),  table.run-table td:nth-child(6)  { width: 9rem; }    /* KMBP */
table.run-table th:nth-child(7),  table.run-table td:nth-child(7)  { width: 3.5rem; }  /* IN (pool 1) */
table.run-table th:nth-child(8),  table.run-table td:nth-child(8)  { width: 5rem; }    /* lib */
table.run-table th:nth-child(9),  table.run-table td:nth-child(9)  { width: 4rem; }    /* <100 reads */
table.run-table th:nth-child(10), table.run-table td:nth-child(10) { width: 8rem; }    /* read length */
table.run-table th:nth-child(11), table.run-table td:nth-child(11) { width: 16rem; }   /* progress */
table.run-table th:nth-child(12), table.run-table td:nth-child(12) { width: auto; }    /* conflict */
/* Lock header cell widths so title-attribute tooltips never cause reflow. */
table.run-table th { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
table.run-table th[title] { cursor: help; }