/* Design tokens and layout for the S. mutans proteome annotator.
   Dark navy surfaces; teal for the annotator, amber for the prior, violet for the dark
   population. The prior's amber is warm but *unfilled* — a rule and a label, never a fill:
   the visual grammar has to keep "known before" distinct from "known to be right", because
   here nothing is known to be right. */

:root {
  --ground: #0a0e1a;
  --surface: #0f1629;
  --raise: #16203a;
  --rule: #1e2d4a;
  --rule-soft: #172440;

  --ink: #e7edf8;
  --ink-2: #9aa9c3;
  --ink-3: #66748f;

  --teal: #00e5c3;         /* the annotator */
  --amber: #f59e0b;        /* the prior */
  --violet: #a78bfa;       /* the dark population */
  --blue: #60a5fa;
  --rose: #fb7185;

  /* Layout is fluid. There is no shell cap and no reading measure: every region grows
     with the window, and text fills the box drawn around it rather than stopping short of
     it. A capped shell left the far side of a large monitor empty, and a measure narrower
     than its panel left a gutter down the right of every paragraph — both read as the
     layout being broken, which is the more expensive failure here than a long line. */

  --amber-wash: rgba(245, 158, 11, .07);
  --violet-wash: rgba(167, 139, 250, .09);
  --teal-wash: rgba(0, 229, 195, .08);

  /* Tier is ordinal, so it gets one hue stepped by confidence rather than three
     categorical colours — a scale should read as a scale. */
  --tier-a: #00e5c3;
  --tier-b: #3fae9c;
  --tier-c: #4a7d78;
  --tier-none: #4b5563;

  --radius: 4px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

code, .mono { font-family: var(--mono); }

/* ------------------------------------------------------------------ app shell */
.shell { margin: 0 auto; padding: 0 22px 80px; }

.topbar {
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  padding: 20px 0 16px; border-bottom: 1px solid var(--rule); margin-bottom: 26px;
}
.topbar .brand {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink);
}
.topbar .brand em { font-style: italic; }
.topbar nav { display: flex; gap: 18px; }
.topbar nav a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.topbar nav a.active { color: var(--teal); }
.topbar .spacer { flex: 1; }
.topbar .note {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em;
}

/* -------------------------------------------------------------------- controls */
.scopebar { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 18px; }
.scopebar a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-2); background: var(--surface);
}
.scopebar a:hover { color: var(--ink); text-decoration: none; }
.scopebar a .n { color: var(--ink-3); margin-left: 8px; font-variant-numeric: tabular-nums; }
.scopebar a.sel { color: var(--ground); font-weight: 600; }
.scopebar a.sel .n { color: inherit; opacity: .72; }
.scopebar a.sel.recoverable { background: var(--amber); border-color: var(--amber); }
.scopebar a.sel.dark { background: var(--violet); border-color: var(--violet); }
.scopebar a.sel.named,
.scopebar a.sel.all { background: var(--teal); border-color: var(--teal); }

.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); margin-bottom: 18px;
}
.filters label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 6px;
}
.filters .Select, .filters .dash-dropdown { min-width: 150px; }
.filters .dash-input-container { width: 240px; }
.filters input[type="text"] {
  background: var(--raise); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink); padding: 7px 10px; font-family: var(--sans); font-size: 13px;
  width: 100%;
}
.filters input[type="text"]::placeholder { color: var(--ink-3); }

.toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.toggles a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-3);
}
.toggles a:hover { color: var(--ink-2); text-decoration: none; }
.toggles a.on { border-color: var(--teal); color: var(--teal); background: var(--teal-wash); }

/* ----------------------------------------------------------------------- table */
.tablewrap { border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; }
table.proteome { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 900px; }
table.proteome th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; padding: 11px 14px; background: var(--raise);
  font-family: var(--mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.proteome td {
  padding: 11px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top;
}
table.proteome tr:last-child td { border-bottom: 0; }
table.proteome tbody tr:hover { background: var(--raise); }
table.proteome td.lt { white-space: nowrap; }
table.proteome td.lt a { font-family: var(--mono); font-weight: 600; }
table.proteome td.prior { color: var(--ink-2); max-width: 300px; }
table.proteome td.call { max-width: 420px; }
.dimmed { color: var(--ink-3); font-style: italic; }

.pager {
  display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
  padding: 16px 2px; font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  flex-wrap: wrap;
}
.pager a { font-family: var(--mono); font-size: 12px; }
.pager .disabled { color: var(--rule); }

/* ---------------------------------------------------------------------- chips */
.chip {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 2px;
  border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap;
}
.chip + .chip { margin-left: 4px; }
.chip.on { border-color: var(--teal); color: var(--teal); }
.chip.essential { border-color: var(--rose); color: var(--rose); }
.chip.metabolic { border-color: var(--blue); color: var(--blue); }
.chip.curated { border-color: var(--amber); color: var(--amber); }

.tier {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; padding: 2px 8px; border-radius: 2px; color: var(--ground);
}
.tier.A { background: var(--tier-a); }
.tier.B { background: var(--tier-b); }
.tier.C { background: var(--tier-c); color: var(--ink); }
.tier.none { background: var(--tier-none); color: var(--ink-2); }

.provchip {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  padding: 2px 6px; border-radius: 2px; border: 1px solid currentColor;
}
.provchip.RECOVERED { color: var(--teal); }
.provchip.NEW { color: var(--violet); }
.provchip.REFINED { color: var(--blue); }
.provchip.CONCORDANT { color: var(--ink-3); }
.provchip.DIVERGENT { color: var(--amber); }
.provchip.DECLINED { color: var(--ink-3); border-style: dashed; }

/* ------------------------------------------------------------- protein detail */
.detailhead {
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); margin-bottom: 2px;
}
.detailhead .lt { font-family: var(--mono); font-size: 1.25rem; font-weight: 600; }
.detailhead .sub { color: var(--ink-3); font-size: 13px; }
.detailhead .spacer { flex: 1; }
.detailhead .nav { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.detailhead .nav > * { margin-left: 10px; }
.detailhead .nav > *:first-child { margin-left: 0; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 2px; }
@media (max-width: 950px) { .cols { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 18px 20px;
}
.panel.prior { background: linear-gradient(100deg, var(--amber-wash), transparent 70%); }
.panel h3 {
  margin: 0 0 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.panel.prior h3 { color: var(--amber); }

.srcrow { display: grid; grid-template-columns: 78px 1fr; gap: 5px 14px; font-size: 13px; }
.srcrow dt {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .05em;
  padding-top: 2px;
}
.srcrow dd { margin: 0; }
.srcrow dd.absent { color: var(--ink-3); }

.callout { font-size: 15px; line-height: 1.55; margin: 0 0 16px; }
.callout.declined { color: var(--ink-3); font-style: italic; }

details.disc { margin-top: 8px; border-top: 1px solid var(--rule-soft); padding-top: 8px; }
details.disc > summary {
  cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-2); list-style: none;
}
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary::before { content: "▸ "; color: var(--ink-3); }
details.disc[open] > summary::before { content: "▾ "; }
details.disc .body {
  margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.62;
  white-space: pre-wrap; max-height: 420px; overflow-y: auto;
}

.provenance {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
}
.provenance .caveat {
  display: block; margin-top: 6px; font-family: var(--sans); font-size: 11.5px;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- sequence view */
.seqpanel { margin-bottom: 2px; }
.seq {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85; color: var(--ink-2);
  word-break: break-all; margin: 10px 0 14px; user-select: all;
}
.domtrack { display: flex; flex-direction: column; gap: 3px; }
.domrow { display: grid; grid-template-columns: 84px 1fr 96px; gap: 12px; align-items: center; }
.domrow .db {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .06em;
}
.domrow .lane { position: relative; height: 11px; background: var(--raise); border-radius: 2px; }
.domrow .lane i {
  position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--teal);
  opacity: .82;
}
.domrow .coords {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: right;
  font-variant-numeric: tabular-nums;
}
.domrow .name { font-size: 12px; color: var(--ink-2); }

/* ---------------------------------------------------------------- evidence rail */
.railgroup { margin-top: 2px; }
.railgroup .grouplabel {
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 20px 8px;
}
.railgroup.added .grouplabel { color: var(--violet); }
.tabs { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 20px 14px; }
.tabs a {
  font-family: var(--mono); font-size: 11px; padding: 6px 11px; border-radius: 2px;
  border: 1px solid var(--rule); color: var(--ink-2);
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.sel { background: var(--teal); border-color: var(--teal); color: var(--ground); font-weight: 600; }
.railgroup.added .tabs a { border-color: var(--rule); }
.railgroup.added .tabs a.sel { background: var(--violet); border-color: var(--violet); }
/* Absent evidence is a disabled tab with an em-dash, never a hidden one. */
.tabs span.off {
  font-family: var(--mono); font-size: 11px; padding: 6px 11px; border-radius: 2px;
  border: 1px dashed var(--rule); color: var(--ink-3); opacity: .7; cursor: not-allowed;
}

.evbody { padding: 4px 20px 20px; }
.transferred {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 14px; border-radius: 2px;
  border: 1px solid var(--rule); border-left: 3px solid var(--amber);
  background: var(--amber-wash); font-size: 12.5px; color: var(--ink-2);
}
.transferred b { font-family: var(--mono); font-size: 11px; color: var(--amber); letter-spacing: .1em; }

.withheld {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-top: 10px;
}

table.ev { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.ev th {
  text-align: left; padding: 0 12px 8px 0; font-family: var(--mono); font-weight: 500;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
table.ev td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
table.ev td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
/* A header follows its own column. Left-aligned labels over right-aligned numbers put
   every label roughly one column left of its data. */
table.ev th.num { text-align: right; }
table.proteome th.num { text-align: right; }
table.ev tr.curated td { background: var(--amber-wash); }

.bar { position: relative; height: 8px; background: var(--raise); border-radius: 2px; min-width: 60px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--teal); }
.bar.warm i { background: var(--amber); }

.fitbar { display: flex; align-items: center; gap: 8px; }
.fitbar .track { position: relative; width: 120px; height: 9px; background: var(--raise); border-radius: 2px; }
.fitbar .track .mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--rule); }
.fitbar .track i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.fitbar .track i.neg { background: var(--rose); }
.fitbar .track i.pos { background: var(--teal); }

/* -------------------------------------------------------------- gene arrow track */
.genetrack { display: flex; gap: 4px; align-items: stretch; overflow-x: auto; padding: 6px 0 12px; }
.gene {
  position: relative; min-width: 132px; flex: 0 0 auto; padding: 9px 12px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--surface);
  font-size: 12px; color: var(--ink-2);
}
.gene.query { border-color: var(--teal); background: var(--teal-wash); color: var(--ink); }
.gene .strand { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.gene .nm { display: block; color: var(--ink); margin: 2px 0 3px; font-size: 12.5px; }
.gene .meta { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.trackscale {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); padding-bottom: 6px;
}

.selector { display: flex; gap: 5px; flex-wrap: wrap; padding-bottom: 12px; }
.selector a {
  font-family: var(--mono); font-size: 10.5px; padding: 4px 9px; border-radius: 2px;
  border: 1px solid var(--rule); color: var(--ink-3);
}
.selector a.sel { border-color: var(--teal); color: var(--teal); }

.empty {
  padding: 26px 4px; color: var(--ink-3); font-size: 13px;
}
.curated-card {
  border: 1px solid var(--rule); border-left: 3px solid var(--amber); border-radius: 2px;
  background: var(--amber-wash); padding: 14px 16px; margin-bottom: 12px;
}
.curated-card .head {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; color: var(--amber); letter-spacing: .08em;
  margin-bottom: 8px;
}
.curated-card .ann { font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.curated-card .comment { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.snippet { border-left: 2px solid var(--rule); padding: 2px 0 2px 14px; margin-bottom: 16px; }
.snippet .cite { font-size: 12.5px; margin-bottom: 5px; }
.snippet .cite .journal { color: var(--ink-3); }
.snippet .text { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.snippet .unresolved { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

/* ------------------------------------------------------------------ review panel */
.panel.review { margin-bottom: 2px; }
.panel.review h3 { align-items: center; }
/* The question is the shrinkable half; the input must keep its intrinsic width or
   flexbox squeezes it to the label and the field overflows the panel. */
.panel.review h3 > span:first-child { min-width: 0; }
.namefield { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.namefield label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Dash 4 wraps every dcc.Input in a `.dash-input-container` div. Styling the <input>
   alone leaves that wrapper at 2px, so the field overflows whatever contains it — the
   wrapper is what needs to carry the width. */
.dash-input-container, .dash-input { display: inline-flex; flex: 0 0 auto; }
.namefield .dash-input-container { width: 190px; }
.namefield input {
  background: var(--raise); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink); padding: 6px 10px; font-family: var(--sans); font-size: 13px;
  width: 100%;
}
.namefield input::placeholder { color: var(--ink-3); }

.verdicts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
button.verdict {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 12px; padding: 8px 14px; border-radius: 2px;
  border: 1px solid var(--rule); background: var(--raise); color: var(--ink-2);
  cursor: pointer;
}
button.verdict:hover { color: var(--ink); border-color: var(--ink-3); }
button.verdict .key { font-size: 9.5px; color: var(--ink-3); }
button.verdict.sel {
  background: var(--teal); border-color: var(--teal); color: var(--ground); font-weight: 600;
}
button.verdict.sel .key { color: var(--ground); opacity: .6; }

.seeds { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.seedlabel {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
button.seed {
  font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 2px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2); cursor: pointer;
}
button.seed:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
button.seed:disabled { color: var(--rule); cursor: not-allowed; }

.panel.review textarea {
  width: 100%; background: var(--raise); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink); padding: 9px 11px; font-family: var(--sans); font-size: 13px;
  line-height: 1.55; resize: vertical;
}
.panel.review textarea::placeholder { color: var(--ink-3); }

.saverow {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--rule); flex-wrap: wrap;
}
.saverow .spacer { flex: 1; }
.saverow .status { font-size: 12.5px; color: var(--ink-3); }
.saverow .status.ok { color: var(--teal); }
.saverow .status.err { color: var(--amber); }
button.save {
  font-family: var(--mono); font-size: 12px; padding: 8px 16px; border-radius: 2px;
  border: 1px solid var(--rule); background: var(--raise); color: var(--ink-2); cursor: pointer;
}
button.save:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-3); }
button.save.primary { border-color: var(--teal); color: var(--teal); }
button.save.primary:hover:not(:disabled) { background: var(--teal); color: var(--ground); }
button.save:disabled { color: var(--rule); border-color: var(--rule-soft); cursor: not-allowed; }
.saverow .kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.otherreview { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.otherreview:last-child { border-bottom: 0; }
.otherreview .who { font-weight: 600; margin-right: 10px; }
.verdictchip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 2px 7px;
  border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2);
}
.otherreview .revised { font-family: var(--mono); font-size: 10px; color: var(--amber); margin-left: 8px; }
.otherreview .correction { font-size: 13px; color: var(--ink); margin-top: 5px; }
.otherreview .notes { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* review state in the proteome table */
.reviewmark { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.reviewmark.done { color: var(--teal); }
.reviewmark.double { color: var(--teal); font-weight: 600; }

.progress {
  height: 4px; background: var(--raise); border-radius: 2px; overflow: hidden;
  margin: 0 0 14px;
}
.progress i { display: block; height: 100%; background: var(--teal); border-radius: 2px; }
.progresslabel {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-bottom: 6px;
  display: flex; justify-content: space-between;
}

#kbd-hint {
  position: fixed; right: 18px; bottom: 18px; z-index: 20;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  display: none; box-shadow: 0 10px 30px -18px rgba(0,0,0,.9);
}
#kbd-hint.open { display: block; }
#kbd-hint b { color: var(--teal); font-weight: 600; }

/* ---------------------------------------------------------------------- results */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 2px;
}
.stat { background: var(--surface); padding: 16px 18px; }
.stat b {
  display: block; font-family: var(--mono); font-weight: 500; font-size: 1.6rem;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat span { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }

.distbar { display: flex; gap: 2px; height: 34px; margin-bottom: 14px; }
.distbar > div { border-radius: 2px; min-width: 3px; }
.distkey { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.distkey span { display: flex; align-items: center; gap: 7px; }
.distkey i { width: 11px; height: 11px; border-radius: 2px; display: block; }

.panel + .panel { margin-top: 2px; }

.breakdownhead {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  letter-spacing: .06em; padding-bottom: 8px;
}
.breakdownhead > span:first-child { text-transform: uppercase; letter-spacing: .12em; }

.resumerow { margin: 0 0 16px; }
a.resume {
  display: inline-block; font-family: var(--mono); font-size: 12px; padding: 8px 16px;
  border: 1px solid var(--teal); border-radius: 2px; color: var(--teal);
}
a.resume:hover { background: var(--teal); color: var(--ground); text-decoration: none; }

/* ------------------------------------------------------------------- overview */
.popkey { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.popkey > div { border-top: 2px solid; padding-top: 12px; }
.popkey .k {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); font-weight: 600; margin-bottom: 7px;
}
.popkey .k em { font-style: normal; color: var(--ink-3); letter-spacing: 0; }
.popkey p { font-size: 12.5px; color: var(--ink-2); margin: 0 0 9px; line-height: 1.5; }
.popkey .outcome {
  display: flex; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.popkey .tiersplit {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 4px;
}

table.heat { border-collapse: separate; border-spacing: 2px; font-size: 13px; min-width: 460px; }
table.heat th {
  font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); padding: 4px 10px; text-align: center;
  white-space: nowrap;
}
table.heat th.row { text-align: left; padding-right: 16px; }
table.heat td {
  padding: 10px 14px; text-align: center; border-radius: 2px; min-width: 86px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
table.heat td .pc { display: block; font-weight: 600; font-size: 13.5px; }
table.heat td .ct { display: block; font-size: 10.5px; opacity: .74; margin-top: 1px; }
.heatkey {
  display: flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .08em; color: var(--ink-3);
}
.heatkey i { width: 26px; height: 11px; border-radius: 2px; display: block; }

.cov { display: flex; flex-direction: column; gap: 8px; }
.covrow { display: grid; grid-template-columns: minmax(160px, 240px) 1fr 54px; gap: 14px; align-items: center; }
.covrow .nm { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.covrow .tr { background: var(--raise); height: 13px; border-radius: 2px; overflow: hidden; }
.covrow .tr i { display: block; height: 100%; border-radius: 0 2px 2px 0; background: var(--teal); }
.covrow.low .tr i { background: var(--amber); }
.covrow .vl {
  font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.covrow.low .vl { color: var(--amber); font-weight: 600; }

/* -------------------------------------------------------------------- methods */
.panel h4 {
  margin: 22px 0 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.panel h4:first-of-type { margin-top: 18px; }
.panel ul { margin: 0; padding-left: 20px; }
.panel li { margin-bottom: 10px; line-height: 1.6; }
.panel .srcrow dt { text-transform: none; letter-spacing: .04em; }

/* Methods spans the shell like every other page — its panels are containers, not a
   column, so prose fills them. */
.reading .ev { min-width: 0; }
.reading .tablewrap, .reading table.ev { width: 100%; }

/* A paragraph under a chart or a table. It fills its panel; only the colour and the
   spacing above it are set here. */
.panel .note { color: var(--ink-2); margin-top: 16px; }
.panel .note:first-child { margin-top: 0; }

/* ------------------------------------------------------- missing-data notice */
.panel.notice h3 {
  font-family: var(--serif); font-size: 1.4rem; letter-spacing: -.01em; color: var(--ink);
  text-transform: none; margin-bottom: 14px; display: block;
}
.buildsteps { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; }
.buildstep {
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  padding: 11px 14px; background: var(--raise); border: 1px solid var(--rule);
  border-left: 3px solid var(--teal); border-radius: 2px;
}
.buildstep .cmd { font-family: var(--mono); font-size: 13px; color: var(--teal); background: none; }
.buildstep .note { font-size: 12.5px; color: var(--ink-3); }

/* The calibration cross-tab labels its rows by what the darkness tier means, with the
   code kept alongside so the row still ties back to the queue's Prior filter. */
table.heat th.row { max-width: 260px; }
table.heat th.row .meaning {
  display: block; font-family: var(--sans); font-size: 12.5px; letter-spacing: 0;
  text-transform: none; color: var(--ink-2); line-height: 1.35;
}
table.heat th.row .code {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--ink-3); margin-top: 2px;
}

/* Alignment coverage. Percent identity cannot tell a full-length homolog from a shared
   domain, so coverage travels beside it everywhere a homolog is detailed. Below the
   bundle's own 80% gate on either axis it is marked, because that is the case where
   identity reads stronger than the alignment supports. */
.cov { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.cov.partial { color: var(--amber); }

/* The Methods definition list for homolog flags puts the chip itself in the term column,
   so the reader matches the mark they saw on the protein page rather than a paraphrase. */
dl.srcrow dt .chip { font-size: 9.5px; }
/* The flag list's terms are chips, which are short; the definitions are full sentences.
   Give the term column only what a chip needs so the definition keeps the width. */
dl.srcrow dt .chip { font-size: 9.5px; white-space: nowrap; }

/* A value the warehouse cut short. Deliberately quiet — it is a caveat on the evidence,
   not a finding, and 40% of prior rows carry it. Amber ties it to the prior's own accent
   rather than introducing a warning colour the rest of the page does not use. */
.cut { color: var(--amber); opacity: .7; cursor: help; padding-left: 1px; }

/* The added rail says why the annotator did not see this evidence. Without it the split
   reads as a quality ranking rather than a difference in retrieval scope. */
.grouplabel .why {
  display: block; text-transform: none; letter-spacing: 0; font-size: 10.5px;
  color: var(--ink-3); margin-top: 3px; cursor: help; font-family: var(--sans);
}

/* Sortable column headers. The whole header is the target, not a small glyph beside it —
   a 12px arrow is a hard thing to hit and gives no hint that the label itself is live. */
table.proteome th a.sortlink {
  color: inherit; text-decoration: none; display: inline-flex; align-items: baseline;
  gap: 4px; cursor: pointer;
}
table.proteome th a.sortlink:hover { color: var(--ink); }
table.proteome th a.sortlink.on { color: var(--teal); }
/* Drawn only on the column in effect, so the arrow reads as the table's state rather
   than as an affordance every column is offering. */
table.proteome th .dir { font-size: 9px; line-height: 1; }

/* The queue's free-text filter. Dash 4 wraps dcc.Input in .dash-input-container, which
   collapses to a couple of pixels if only the <input> is styled. */
.filters .dash-input-container { display: inline-block; }
/* Targeted by type, not by class: Dash 4 replaces dcc.Input's className with its own
   `dash-input-element`, so a class set at the call site silently never matches. */
.filters input[type="search"] {
  background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); font-family: var(--sans); font-size: 12px; padding: 4px 9px;
  width: 250px; outline: none;
}
.filters input[type="search"]:focus { border-color: var(--teal); }
.filters input[type="search"]::placeholder { color: var(--ink-3); }