/* data.css — what belongs to one block of tabs rather than to all of them.
   Everything else (the theme, the header, the tab strip, the table, the menus)
   comes from dataview.css, which is loaded before this. */

/* ======================= Inventory ======================= */
/* cold-episode grouping: hairlines inside an episode, hard lines between, and
   a bar down the far left tying an episode's swabs together. The bar stops
   short of the first and last row's edges so a group reads as one run. */
tbody.cold td { border-bottom-color: var(--line-hard); }
tbody.cold tr[data-samecold] td { border-bottom-color: light-dark(#0000000d, #ffffff0a); }
tbody.cold td:first-child { padding-left: 15px; }
tbody.cold tr[data-cold] td:first-child::before {
  content: ""; position: absolute; left: 6px; width: 3px; top: 0; bottom: -1px;
  background: light-dark(#00000038, #ffffff40);
}
tbody.cold tr[data-cold="first"] td:first-child::before { top: 9px; border-radius: 2px 2px 0 0; }
tbody.cold tr[data-cold="last"] td:first-child::before { bottom: 9px; border-radius: 0 0 2px 2px; }

/* high subjective probability of a real infection, but nothing ever found */
td.unexplained { color: light-dark(#b3261e, #ff9a90); font-weight: 700; }

/* ======================= Results ======================= */
/* Determination is the most important column in both files here, and the only
   one expected to change over time, so it gets a colour rather than sitting as
   plain text. Deliberately unlike the row tint, which is the *target* of the
   assay: these are neutral greens and reds carrying no hue meaning, so a
   positive reads as a positive on a row of any colour.

   qPCR and sequencing have separate vocabularies but the same three grades —
   it worked, it didn't, it can't be trusted — so they share the colours. */
.badge.det { background: light-dark(#00000012, #ffffff18); }
.badge.det[data-det="Positive"], .badge.det[data-det="Likelypositive"],
.badge.det[data-det="Genotyped"] {
  background: light-dark(#c9f0d3, #1d4a2c);
  color: light-dark(#0d4a20, #a8e6bb);
}
.badge.det[data-det="Contamination"] {
  background: light-dark(#fbd5cf, #4d211a);
  color: light-dark(#8a2418, #ffb3a7);
}
.badge.det[data-det="Inconclusive"], .badge.det[data-det="Unknown"],
.badge.det[data-det="Partial"] {
  background: light-dark(#fdeac2, #4a3a12);
  color: light-dark(#6b4c00, #f2d79a);
}
/* Off-target and No reads are outcomes, not faults: the run worked, it just
   didn't answer the question. Left neutral, next to the struck-out Failed. */
.badge.det[data-det="Failed"] { text-decoration: line-through; opacity: .8; }
.badge.det[data-det="Noreads"], .badge.det[data-det="Offtarget"] { opacity: .8; }

/* Cq, ∆RFU and the melt columns are read as a group, one well against the
   next, so they hold a fixed width instead of shrinking to their contents. */
td.num { min-width: 4.5rem; }

/* A pooled sample (`S46+S53+S84+…`) is four times the width of an ordinary
   label, and Sample is the sticky column — one such row would otherwise set
   the width of the column on every screen. */
td.sample { max-width: 9rem; }
td.sample.open { max-width: 26rem; white-space: normal; }

/* Sequences: one alignment per species, scrolling sideways as a block with the
   labels pinned. The colours are the usual nucleotide-free kind — they mark
   *what kind* of difference, not which base, so they stay readable on any row. */
.aln-opt { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-dim); }
.stats h2 .aln-sub { font-weight: 400; font-size: 11.5px; color: var(--ink-dim); margin-left: 6px; }
.aln {
  overflow-x: auto; width: max-content; max-width: 100%;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.55;
}
.aln-row { display: flex; width: max-content; }
.aln-lab {
  position: sticky; left: 0; z-index: 1; flex: none; width: 12.5rem;
  display: flex; gap: 6px; align-items: baseline; padding: 0 10px;
  background: var(--panel); border-right: 1px solid var(--line);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px;
  white-space: nowrap; overflow: hidden;
}
.aln-type { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; }
.aln-id { margin-left: auto; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.aln-seq { white-space: pre; padding: 0 10px; }
.aln-row:hover .aln-lab, .aln-row:hover .aln-seq { background: var(--panel-2); }
/* the lines a link asked for by Type: tinted, with a bar down the label edge */
.aln-row.hl .aln-lab, .aln-row.hl .aln-seq { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.aln-row.hl .aln-lab { box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.aln-row.ruler { color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.aln-row.cons { font-weight: 600; border-bottom: 1px solid var(--line); }
.aln-row.cons .aln-lab { color: var(--ink-dim); font-weight: 400; }
.aln-row.cons .v { color: var(--accent); text-decoration: underline; }
.aln-row.cons .thin { opacity: .45; }
.aln-seq .m, .aln-seq .g { color: light-dark(#a3a8ad, #5e6368); }
.aln .x, .aln-key .x { background: light-dark(#fde2a6, #5a4410); color: light-dark(#5c3f00, #fbe2a5); }
.aln .d, .aln-key .d { background: light-dark(#fbd0ca, #5a1f18); color: light-dark(#8a2418, #ffb3a7); }
.aln .i, .aln-key .i { background: light-dark(#cfe0fb, #1c3558); color: light-dark(#153e82, #b3cdf8); }
.aln-seq .n { color: var(--ink-dim); font-style: italic; }
/* the reference line's primers and probe; a base of one that doesn't match the
   reference is struck through in the deletion colour */
.aln .pf, .aln .pr, .aln-key .pf { background: light-dark(#cdeed6, #173f27); color: light-dark(#14532d, #b4ebc4); }
.aln .pp, .aln-key .pp { background: light-dark(#e4dafb, #33255a); color: light-dark(#4c1d95, #d9caff); }
.aln .pf, .aln .pr, .aln .pp { cursor: help; }
.aln .pm { text-decoration: line-through light-dark(#c0392b, #ff8a7a) 2px; }
.aln .pgap { box-shadow: inset 2px 0 light-dark(#c0392b, #ff8a7a); }
.aln-note { margin: -4px 0 6px; font-style: italic; }
.aln-key span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 2px; border-radius: 2px; }