/* ════════════════════════════════════════════════
   signals_review.css — Stream F (F3) review surface.

   Two homes: a compact block in the signals rail (fits the 248px compact panel), and a
   wider modal for the scorecard, because a per-labeler table in a narrow rail is a table
   nobody reads.
   ════════════════════════════════════════════════ */

/* ─── Agreement summary ─── */

.sr-agree { margin-bottom: 6px; }

.sr-agree-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sr-agree-name {
  font-size: 11px;
  color: var(--text-muted);
}

.sr-kappa {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  cursor: help;
}
.sr-kappa-ok { color: #3aa76d; }
.sr-kappa-low { color: #c98a2e; }

/* Undefined is a real answer, not a bad score — so it must not read as a failure.
   A single-code deployment scores kappa 0 however well people agree; painting that
   amber would be a lie told in colour. */
.sr-kappa-undef {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
}

.sr-agree-bar {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}

.sr-agree-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* The agreement-is-not-coverage caveat. Deliberately visible rather than a tooltip:
   it is the one misreading of this panel with methodological consequences, because
   believing the number means coverage is what stops somebody looking harder. */
.sr-caveat {
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-muted);
  margin-top: 3px;
  padding-left: 5px;
  border-left: 2px solid var(--border);
  cursor: help;
}

/* ─── State chips ─── */

.sr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 6px;
}

.sr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 10px;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: help;
}
.sr-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Cluster list ─── */

.sr-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sr-row {
  border-left: 3px solid var(--border);
  background: var(--bg-card);
  border-radius: 3px;
  padding: 4px 6px;
  cursor: pointer;
}
.sr-row:hover { background: var(--bg-panel); }
.sr-row.selected { outline: 1px solid var(--accent); }

.sr-row-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sr-code {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-votes {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sr-ag {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sr-row-bottom {
  display: flex;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.sr-state { margin-left: auto; font-weight: 600; }

/* Where the reader personally stands on an event. The "differs" case is the actionable
   one, so it is the only one that gets colour. */
.sr-stance {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.3;
  cursor: help;
}
.sr-stance-agrees { color: var(--text-muted); }
.sr-stance-missed { color: var(--text-muted); font-style: italic; }
.sr-stance-differs { color: #c98a2e; font-weight: 600; }

.sr-dissent {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  word-break: break-word;
}

.sr-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 2px;
}

/* ─── Action bar ─── */

.sr-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.sr-admin .btn { padding: 3px 8px; font-size: 11px; }

/* ─── Export agreed events ─── */

.sr-export {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.sr-export-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: help;
}

/* The select takes the slack so the rail never overflows sideways. */
.sr-export select {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  font-size: 11px;
}

.sr-export .btn {
  padding: 2px 8px;
  font-size: 12px;
  flex-shrink: 0;
}

/* ─── Scorecard modal ─── */

#signal-scorecard-modal .modal-box {
  max-width: 720px;
  width: 92vw;
}

.sr-modal-intro {
  font-size: 13px;
  color: var(--text-primary);
  margin: 0 0 12px;
  line-height: 1.5;
}

#signal-scorecard-body h4 {
  margin: 18px 0 6px;
  font-size: 13px;
  color: var(--text-primary);
}

/* The table scrolls inside its own box; the modal must never scroll sideways. */
.sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.sr-table th,
.sr-table td {
  padding: 5px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.sr-table th {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.sr-table th:first-child,
.sr-table td:first-child {
  text-align: left;
  font-variant-numeric: normal;
}
.sr-table td.sr-warn {
  color: #c98a2e;
  font-weight: 700;
  cursor: help;
}

.sr-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Detector-agreed marker (admin only — see the comment in _clusterRow). */
.sr-det {
  font-size: 10px;
  color: var(--text-muted);
  cursor: help;
  flex-shrink: 0;
}

/* A rate's denominator, rendered beside it. Muted so the number still reads first,
   present so it can never be read as a rate over a large sample. */
.sr-den {
  color: var(--text-muted);
  font-size: 10px;
  margin-left: 3px;
}
/* Measured over very few events — dimmed, because the figure is noise, not a verdict. */
.sr-table td.sr-thin { color: var(--text-muted); }