@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   Design tokens

   Palette inherited from the 40-organism dashboard so the two read as one family.
   Three additions specific to this dashboard:

     --truth   warm amber, used ONLY for curated ground truth, so a reviewer can
               never mistake human curation for a model call
     --proto-a teal    ┐ two hues distinguishable under deuteranopia and
     --proto-b violet  ┘ protanopia, applied consistently everywhere
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg-base:        #0a0e1a;
  --bg-surface:     #0f1629;
  --bg-surface-2:   #141e35;
  --bg-surface-3:   #1a2540;
  --border:         #1e2d4a;
  --border-bright:  #2a3d5e;

  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  --teal:           #00e5c3;
  --teal-dim:       #00b89b;
  --teal-glow:      rgba(0, 229, 195, 0.14);

  --truth:          #f5a524;
  --truth-dim:      #b97d16;
  --truth-glow:     rgba(245, 165, 36, 0.13);

  --proto-a:        #00e5c3;
  --proto-a-glow:   rgba(0, 229, 195, 0.13);
  --proto-b:        #a78bfa;
  --proto-b-glow:   rgba(167, 139, 250, 0.13);

  /* Tiers are ORDINAL — A > B > C is descending confidence — so they are a sequential
     ramp in one hue, not four categorical colours. The previous categorical set
     (teal/blue/grey) failed the normal-vision separation floor: tier C #94a3b8 against
     tier B #60a5fa was ΔE 10.8, under the 15 needed to tell two fills apart.
     This ramp validates at ΔE >= 16.9 CVD and >= 17.2 normal on the dark surface.
     no-call sits OUTSIDE the ramp: it is the absence of a tier, not a lower one, so it
     is neutral and carries a hatch (see .seg-no-call) rather than a fourth teal step. */
  --tier-a:         #00e5c3;
  --tier-b:         #00a892;
  --tier-c:         #116e64;
  --no-call:        #4b5563;

  /* Verdicts are DIVERGING — A better <- equivalent -> B better — two poles and a neutral
     midpoint. The shipped palette used #60a5fa for "equivalent", which sat ΔE 0.3 from
     Protocol B's violet under deuteranopia: the two segments were the same colour for
     roughly 6% of men. #6b7685 validates at ΔE 18.1 deutan / 20.2 normal against both
     poles. "Neither" and "can't tell" are not points on an A<->B axis and are reported
     as separate counts rather than as segments of the same bar. */
  --verdict-a:      #00e5c3;
  --verdict-equal:  #6b7685;
  --verdict-b:      #a78bfa;
  --verdict-neither: #f87171;
  --verdict-unsure: #64748b;

  --danger:         #f87171;
  --strand-fwd:     #60a5fa;
  --strand-rev:     #f0a868;

  --font-display:   'Playfair Display', Georgia, serif;
  --font-sans:      'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:      'IBM Plex Mono', 'SFMono-Regular', monospace;

  --radius:         6px;
  --radius-lg:      12px;
  --transition:     150ms ease;
  --navbar-h:       56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #_dash-app-content, ._dash-loading {
  min-height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Navbar ───────────────────────────────────────────────────────────────── */

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.01em;
}
.navbar-brand:hover { text-decoration: none; color: var(--teal-dim); }

.navbar-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 16px;
  border-left: 1px solid var(--border-bright);
}

.nav-links { margin-left: auto; display: flex; gap: 6px; }

.nav-link {
  padding: 6px 14px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: var(--transition);
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-surface-2); text-decoration: none; }
.nav-link.active { color: var(--teal); border-color: var(--teal); background: var(--teal-glow); }

.page { padding: 28px 24px 64px; max-width: 1680px; margin: 0 auto; }

/* ── Typography ───────────────────────────────────────────────────────────── */

.page-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-subtitle { color: var(--text-secondary); margin-top: 4px; margin-bottom: 22px; }

.section-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.empty-note { color: var(--text-muted); font-style: italic; padding: 14px 0; }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.card-hint { color: var(--text-muted); font-size: 12.5px; }

/* ── Badges ───────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge-tier-A   { color: var(--tier-a); background: rgba(0, 229, 195, 0.10); }
.badge-tier-B   { color: var(--tier-b); background: rgba(96, 165, 250, 0.10); }
.badge-tier-C   { color: var(--tier-c); background: rgba(148, 163, 184, 0.10); }
.badge-no-call  { color: var(--no-call); background: rgba(107, 114, 128, 0.12); }
.badge-error    { color: var(--danger); background: rgba(248, 113, 113, 0.10); }
.badge-truth    { color: var(--truth); background: var(--truth-glow); }
.badge-benchmark { color: var(--truth); background: var(--truth-glow); border-color: var(--truth-dim); }

/* ── Review queue ─────────────────────────────────────────────────────────── */

.queue-layout { display: grid; grid-template-columns: 236px 1fr; gap: 20px; align-items: start; }

.filter-panel { position: sticky; top: calc(var(--navbar-h) + 20px); }
.filter-group { margin-bottom: 20px; }
.filter-group > .section-label { display: block; margin-bottom: 8px; }

.scope-toggle { display: flex; gap: 0; margin-bottom: 18px; border: 1px solid var(--border-bright); border-radius: var(--radius); overflow: hidden; }
.scope-toggle .scope-option {
  flex: 1;
  padding: 7px 10px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--transition);
  border: none;
}
.scope-toggle .scope-option:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-surface-2); }
/* Must outrank the :hover rule above — otherwise the selected tab loses its fill while the
   cursor is still resting on the button that was just clicked. */
.scope-toggle .scope-option.selected,
.scope-toggle .scope-option.selected:hover { color: var(--bg-base); background: var(--teal); }
.scope-toggle .scope-option:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.55; }

.progress-strip { margin-bottom: 18px; }
.progress-track { height: 6px; border-radius: 3px; background: var(--bg-surface-3); overflow: hidden; }
.progress-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width 300ms ease; }
.progress-caption { margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }

input.text-input, select.select-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
}
input.text-input:focus, select.select-input:focus { outline: none; border-color: var(--teal); }
input.text-input::placeholder { color: var(--text-muted); }

/* dcc.Dropdown renders react-select, which ships light-theme styles and otherwise sits on
   the page as a white slab. These selectors are the documented Dash hooks for restyling it. */
.Select-control,
.Select-menu-outer,
.VirtualizedSelectOption {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-bright) !important;
  color: var(--text-primary) !important;
}
.Select-control { border-radius: var(--radius) !important; }
.Select-value-label,
.Select-placeholder,
.Select--single > .Select-control .Select-value .Select-value-label {
  color: var(--text-primary) !important;
}
.Select-placeholder { color: var(--text-muted) !important; }
.Select-menu-outer { border-radius: 0 0 var(--radius) var(--radius) !important; }
.VirtualizedSelectFocusedOption { background-color: var(--bg-surface-3) !important; }
.VirtualizedSelectSelectedOption { color: var(--teal) !important; font-weight: 500; }
.Select-arrow { border-top-color: var(--text-secondary) !important; }
.Select input { color: var(--text-primary) !important; }
.is-focused:not(.is-open) > .Select-control { border-color: var(--teal) !important; box-shadow: none !important; }

.check-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.check-row input { accent-color: var(--teal); cursor: pointer; }
.check-row:hover { color: var(--text-primary); }

.queue-table { width: 100%; border-collapse: collapse; }
.queue-table th {
  text-align: left;
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-bright);
  white-space: nowrap;
}
.queue-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 13px; }
.queue-table tbody tr { transition: var(--transition); }
.queue-table tbody tr:hover { background: var(--bg-surface-2); }

.queue-locus { font-family: var(--font-mono); font-size: 12.5px; color: var(--teal); white-space: nowrap; }
.queue-locus:hover { text-decoration: underline; }
.queue-organism { font-style: italic; color: var(--text-secondary); font-size: 12.5px; }
.queue-state { width: 26px; text-align: center; color: var(--text-muted); font-size: 13px; }
.cell-truth { color: var(--text-primary); }
.cell-a { color: var(--text-primary); }
.cell-missing { color: var(--text-muted); font-style: italic; }

.pager { display: flex; align-items: center; gap: 14px; padding: 14px 12px 0; justify-content: flex-end; }
.pager-info { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }

.btn {
  padding: 6px 13px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--teal); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { color: var(--bg-base); background: var(--teal); border-color: var(--teal); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--teal-dim); color: var(--bg-base); }

/* ── Detail header ────────────────────────────────────────────────────────── */

.detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.detail-locus { font-family: var(--font-mono); font-size: 16px; color: var(--teal); }
.detail-organism { font-family: var(--font-display); font-style: italic; font-size: 17px; }
.detail-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.detail-position { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }

/* ── Three-way comparison ─────────────────────────────────────────────────── */

.comparison { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }

.call-column {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.call-column.col-truth { border-top-color: var(--truth); }
.call-column.col-a     { border-top-color: var(--proto-a); }
.call-column.col-b     { border-top-color: var(--proto-b); }

.call-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.col-truth .call-head .section-label { color: var(--truth); }
.col-a .call-head .section-label     { color: var(--proto-a); }
.col-b .call-head .section-label     { color: var(--proto-b); }
.call-kind { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }

.call-annotation { font-size: 15px; line-height: 1.5; }
.call-annotation.is-absent { color: var(--text-muted); font-style: italic; font-size: 14px; }

.curator-comment {
  background: var(--truth-glow);
  border-left: 2px solid var(--truth-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.prior-desc {
  border-left: 2px solid var(--border-bright);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.prior-desc .section-label { display: block; margin-bottom: 3px; font-size: 9.5px; }

.why-box {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.placeholder-box {
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.placeholder-box strong { display: block; color: var(--text-secondary); margin-bottom: 4px; }

details.disclosure { border-top: 1px solid var(--border); padding-top: 9px; }
details.disclosure > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: '▸ '; color: var(--text-muted); }
details.disclosure[open] > summary::before { content: '▾ '; }
details.disclosure > summary:hover { color: var(--teal); }
.disclosure-body {
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 340px;
  overflow-y: auto;
}

.token-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; }
.token-cell { text-align: center; padding: 7px 4px; background: var(--bg-surface-2); border-radius: var(--radius); }
.token-value { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.token-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* ── Protocol B: method reconciliation ───────────────────────────────────── */

.badge-verdict-certain     { color: var(--tier-a); background: rgba(0, 229, 195, 0.10); }
.badge-verdict-single      { color: var(--tier-b); background: rgba(0, 168, 146, 0.12); }
.badge-verdict-undecidable { color: var(--truth);  background: var(--truth-glow); }
.badge-verdict-conflict    { color: var(--danger); background: rgba(248, 113, 113, 0.10); }

.reconciliation-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.method-list { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.method-row {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 9px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-bright);
  border-radius: var(--radius);
  font-size: 12.5px;
}
/* The method whose literal output became the final call. Both RAST and Bakta can carry
   this when they agree — which is itself the thing worth seeing. */
.method-row.is-top { border-left-color: var(--proto-b); background: var(--proto-b-glow); }
.method-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.method-call { color: var(--text-primary); line-height: 1.45; }
.method-id { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.method-top-mark { font-family: var(--font-mono); font-size: 10px; color: var(--proto-b); white-space: nowrap; }

/* ── Sequence ─────────────────────────────────────────────────────────────── */

.sequence-block {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  letter-spacing: 0.055em;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-secondary);
}

/* Domains overlap heavily — a 346 aa protein routinely carries a dozen hits stacked on the
   same residues. Each hit gets its own lane so the track shows how they nest, rather than
   drawing them on one line where labels collide into noise. */
.domain-track { position: relative; margin: 14px 0 4px; background: var(--bg-surface-3); border-radius: 4px; padding: 3px 0; }
.domain-lane { position: relative; height: 15px; }
.domain-band {
  position: absolute;
  top: 1px;
  height: 13px;
  border-radius: 3px;
  background: var(--teal-glow);
  border: 1px solid var(--teal-dim);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 11px;
  padding: 0 4px;
  color: var(--text-primary);
  /* Plain arrow, not `help` or `pointer`: hovering a band highlights its row, but nothing
     happens on click. A question-mark or hand cursor would promise an interaction that
     does not exist and invite a click that does nothing. */
  cursor: default;
}
.domain-band:hover { background: rgba(0, 229, 195, 0.28); }

/* ── Domain track <-> table pairing (assets/domain_track.js) ──────────────────
   Hovering or focusing a band or its row highlights the pair and recedes the rest.
   Dimming as well as highlighting is what makes the correspondence unmistakable when a
   dozen bands overlap on the same residues; highlight alone gets lost in the stack. */

.ipr-panel .domain-band,
.ipr-panel .ipr-row {
  transition: opacity var(--transition), background var(--transition), box-shadow var(--transition);
}

.ipr-panel.has-active .domain-band:not(.is-active) { opacity: 0.3; }

.ipr-panel .domain-band.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--bg-base);
  /* Lift the active band clear of the ones it overlaps. */
  z-index: 2;
  box-shadow: 0 0 0 1px var(--bg-surface-3), 0 0 10px var(--teal-glow);
}

.ipr-panel .ipr-row { cursor: default; }
.ipr-panel .ipr-row.is-active > td { background: var(--teal-glow); }
.ipr-panel .ipr-row.is-active > td:first-child { box-shadow: inset 2px 0 0 var(--teal); }
/* Focus is what keyboard users get instead of hover, so it must be visible on its own. */
.ipr-panel .ipr-row:focus { outline: none; }
.ipr-panel .ipr-row:focus-visible > td { background: var(--teal-glow); }
.ipr-panel .ipr-row:focus-visible > td:first-child { box-shadow: inset 2px 0 0 var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .ipr-panel .domain-band,
  .ipr-panel .ipr-row { transition: none; }
}
.track-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

/* ── Evidence rail ────────────────────────────────────────────────────────── */

.evidence-rail { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px 20px; }
.evidence-protocols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.evidence-side { min-width: 0; }
.evidence-side-head { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.side-a .evidence-side-head .section-label { color: var(--proto-a); }
.side-b .evidence-side-head .section-label { color: var(--proto-b); }

.tab-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tab {
  /* flex-shrink:0 — without it the tabs compress and their labels overlap the counts */
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.tab:hover:not(.tab-empty) { color: var(--text-primary); border-color: var(--teal); }
.tab.selected { color: var(--bg-base); background: var(--teal); border-color: var(--teal); font-weight: 600; }
.side-b .tab.selected { background: var(--proto-b); border-color: var(--proto-b); }
.tab-empty { color: var(--text-muted); opacity: 0.55; cursor: default; }
.tab-count { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.85; margin-left: 4px; }

.evidence-body { min-height: 120px; }

/* What this evidence kind is, stated at the top of every panel. Recessive: it is context
   for the reviewer's first visit, not something to re-read on every protein. */
.evidence-description {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  padding: 9px 11px;
  margin-bottom: 12px;
  background: var(--bg-surface-2);
  border-left: 2px solid var(--border-bright);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Evidence items ───────────────────────────────────────────────────────── */

.hit {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.hit-identity { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--teal); }
.hit-title { font-size: 13px; color: var(--text-primary); }
.hit-organism { font-style: italic; color: var(--text-secondary); font-size: 12.5px; }
.hit-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.hit-body { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; line-height: 1.6; }

.chip {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 5px;
  border-radius: 3px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-bright);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-secondary);
}
.chip-core { color: var(--teal); border-color: var(--teal-dim); }

.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th {
  text-align: left;
  padding: 6px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-bright);
}
.data-table td { padding: 6px 9px; border-bottom: 1px solid var(--border); }
.data-table td.num { font-family: var(--font-mono); text-align: right; }

.bar-cell { position: relative; min-width: 90px; }
.bar-fill { position: absolute; inset: 3px auto 3px 0; background: var(--teal-glow); border-radius: 2px; }
.bar-fill.negative { background: rgba(248, 113, 113, 0.16); }
.bar-label { position: relative; font-family: var(--font-mono); font-size: 11.5px; }

.citation { border-left: 2px solid var(--teal-dim); padding-left: 10px; margin-top: 6px; }
.citation-title { font-size: 12.5px; color: var(--text-primary); }
.citation-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* ── Gene neighbourhood track ─────────────────────────────────────────────── */

.track-scroll { overflow-x: auto; padding-bottom: 6px; }
.gene-track { display: flex; align-items: stretch; gap: 5px; min-width: min-content; padding: 4px 0; }
.gene-arrow {
  position: relative;
  min-width: 118px;
  max-width: 168px;
  padding: 8px 10px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  font-size: 11.5px;
  line-height: 1.35;
}
.gene-arrow.strand-fwd { border-left: 3px solid var(--strand-fwd); }
.gene-arrow.strand-rev { border-right: 3px solid var(--strand-rev); }
.gene-arrow.is-focal { border-color: var(--teal); background: var(--teal-glow); box-shadow: 0 0 0 1px var(--teal-dim); }
.gene-arrow.is-hypothetical { opacity: 0.55; }
.gene-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); font-weight: 500; }
.gene-product { color: var(--text-secondary); font-size: 11px; margin-top: 2px; max-height: 30px; overflow: hidden; }
.gene-coords { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); margin-top: 3px; }
.gene-gap { align-self: center; color: var(--text-muted); font-family: var(--font-mono); padding: 0 4px; }

.homolog-select { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.homolog-select select { max-width: 520px; }

/* ── Verdict capture ──────────────────────────────────────────────────────── */

.review-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-bright);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 16px 20px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-head { justify-content: space-between; margin-bottom: 0; }
.reviewer-field { display: flex; align-items: center; gap: 8px; }
.reviewer-input { width: 190px; }

.verdict-prompt { display: block; margin-bottom: 8px; font-size: 13.5px; color: var(--text-secondary); }
.verdict-row { display: flex; flex-wrap: wrap; gap: 8px; }
.verdict-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.verdict-btn:hover { color: var(--text-primary); border-color: var(--teal); }
.verdict-btn.selected,
.verdict-btn.selected:hover {
  color: var(--bg-base);
  background: var(--teal);
  border-color: var(--teal);
  font-weight: 600;
}
.key-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.18);
  color: inherit;
  opacity: 0.75;
}

.seed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.btn-seed { padding: 3px 9px; font-size: 12px; }

.textarea-input {
  width: 100%;
  min-height: 66px;
  padding: 9px 11px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  resize: vertical;
}
.textarea-input:focus { outline: none; border-color: var(--teal); }
.textarea-input::placeholder { color: var(--text-muted); }

.review-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.review-status { margin-right: auto; font-size: 13px; }
.status-ok { color: var(--teal); }
.status-error { color: var(--danger); }

.badge-verdict {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 5px;
  border-radius: 4px;
  border: 1px solid var(--border-bright);
  background: var(--bg-surface-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-secondary);
}
.other-review { padding: 8px 0; border-bottom: 1px solid var(--border); }
.other-review:last-child { border-bottom: none; }
.review-author { font-weight: 600; margin-right: 8px; }

.shortcut-hint {
  position: fixed;
  right: 18px;
  bottom: 18px;
  padding: 10px 14px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 900;
}
.shortcut-hint.visible { opacity: 1; }

/* ── Results ──────────────────────────────────────────────────────────────── */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.stat-value { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.15; }
.stat-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-top: 4px; }
.stat-hint { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* 2px surface gap between adjacent fills so segment boundaries read as boundaries rather
   than as a colour change, and rounded data-ends on the outer edges only. */
.stack-bar {
  display: flex;
  gap: 2px;
  height: 16px;
  border-radius: 4px;
  background: var(--bg-surface-3);
  overflow: hidden;
}
.stack-segment { height: 100%; min-width: 2px; }
.stack-segment:first-child { border-radius: 4px 0 0 4px; }
.stack-segment:last-child { border-radius: 0 4px 4px 0; }

/* no-call carries a hatch as well as a neutral fill: it is the one segment whose meaning
   is "no value", and texture keeps that legible in print, forced-colours, and for readers
   who cannot separate two low-chroma neutrals. */
.seg-no-call {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(226, 232, 240, 0.32) 3px 5px
  );
}

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.breakdown-table td { vertical-align: middle; }

/* ── Protocol summary ─────────────────────────────────────────────────────── */

.summary-section { margin-bottom: 28px; }
.protocol-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--border-bright);
}
.protocol-heading.for-a { border-bottom-color: var(--proto-a); }
.protocol-heading.for-b { border-bottom-color: var(--proto-b); }
.protocol-heading h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.protocol-heading .card-hint { margin-left: auto; }

/* One row per genome: label, bar, value. A grid keeps the bars on a shared origin so the
   lengths are comparable down the column — the whole point of the form. */
.bar-rows { display: grid; grid-template-columns: minmax(150px, auto) 1fr minmax(96px, auto); gap: 5px 12px; align-items: center; }
.bar-row-label { font-size: 12.5px; color: var(--text-secondary); font-style: italic; }
.bar-row-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); text-align: right; }
.bar-track { position: relative; height: 15px; background: var(--bg-surface-3); border-radius: 4px; overflow: hidden; }
.bar-value {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--teal);
  border-radius: 4px;
  transition: width 200ms ease;
}
.bar-value.partial { background: var(--amber, #f5a524); }

.matrix-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.matrix-table th {
  padding: 6px 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-bright);
  text-align: right;
  vertical-align: bottom;
}
.matrix-table th:first-child { text-align: left; }
.matrix-table td { padding: 5px 7px; border-bottom: 1px solid var(--border); text-align: right; font-family: var(--font-mono); }
.matrix-table td:first-child { text-align: left; font-family: var(--font-sans); font-style: italic; color: var(--text-secondary); }
/* Sequential single-hue cell fill: magnitude by opacity of one hue, never a rainbow. */
.matrix-cell { display: block; border-radius: 3px; padding: 2px 5px; color: var(--text-primary); }

.token-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.token-split .stat-card { border-top-width: 2px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .comparison { grid-template-columns: 1fr; }
  .evidence-protocols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .queue-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
}