/* Handout candidate consumer styles. Uses existing design tokens from
   tokens.css (var(--bg), var(--text), var(--accent), etc.). Scoped to handout
   surfaces so candidate/unverified records read as visually distinct from
   canonical data. */

.handout-search {
  min-width: 18rem;
  padding: 0.4rem 0.6rem;
}

.handout-list .handout-title {
  font-weight: 600;
  margin-right: 0.4rem;
}

/* Candidate badge — used on list rows, detail headers, and entity pills. */
.candidate-badge {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.4rem;
  border: 1px dashed var(--accent, #b8860b);
  border-radius: 0.6rem;
  color: var(--accent, #b8860b);
  background: color-mix(in srgb, var(--accent, #b8860b) 8%, transparent);
  vertical-align: middle;
}

.state-pill {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.05rem 0.45rem;
  border-radius: 0.6rem;
  border: 1px solid transparent;
}
.state-candidate {
  border-style: dashed;
  border-color: var(--accent, #b8860b);
  color: var(--accent, #b8860b);
}
.state-canonical {
  border-color: var(--ok, #2e7d32);
  color: var(--ok, #2e7d32);
  background: color-mix(in srgb, var(--ok, #2e7d32) 10%, transparent);
}

.review-state {
  font-size: 0.78rem;
}
.review-state.state-needs,
.issue-count-open {
  color: var(--warn, #b26a00);
  font-weight: 600;
}

/* Detail layout */
.handout-detail-head .back-link {
  font-size: 0.85rem;
}
.handout-detail-head h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.handout-panel {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--border, #ddd);
  border-radius: 0.5rem;
  background: var(--panel-bg, transparent);
}
.handout-panel h2 {
  margin-top: 0;
}
.handout-panel table {
  width: 100%;
  border-collapse: collapse;
}
.handout-panel th,
.handout-panel td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border, #eee);
  vertical-align: top;
}

.tag-chips,
.evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tag-chip,
.evidence-chip {
  font-size: 0.72rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #ccc);
  text-decoration: none;
}

.source-ref-list {
  list-style: none;
  padding-left: 0;
}
.source-ref {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0;
}
.source-ref-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px dashed var(--border, #bbb);
  border-radius: 0.3rem;
  color: var(--muted, #888);
}

.evidence-card {
  margin: 0.6rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--accent, #b8860b);
  background: color-mix(in srgb, var(--accent, #b8860b) 4%, transparent);
}
.evidence-text {
  margin: 0.4rem 0;
  font-style: italic;
}
.evidence-meta {
  margin-left: 0.5rem;
  color: var(--muted, #888);
  font-size: 0.8rem;
}

/* Review / correction surface */
.review-issue-list {
  list-style: none;
  padding-left: 0;
}
.review-issue {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.25rem 0;
}
.issue-sev {
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
}
.review-issue.sev-high .issue-sev {
  color: var(--err, #c62828);
}
.review-issue.sev-medium .issue-sev {
  color: var(--warn, #b26a00);
}
.review-form,
.correction-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}
.review-form input,
.review-form select,
.correction-form input {
  padding: 0.3rem 0.45rem;
}
.decision-actions {
  display: inline-flex;
  gap: 0.3rem;
}

/* Candidate graph — dashed edges + dashed node halo so it never reads as the
   canonical graph. Scoped under the candidate host. */
.handout-candidate-graph .graph-edge {
  stroke-dasharray: 4 3;
  opacity: 0.85;
}
.handout-candidate-graph .graph-node circle,
.handout-candidate-graph .graph-node rect {
  stroke-dasharray: 3 2;
}
.handout-candidate-graph .edge-candidate_match {
  stroke: var(--ok, #2e7d32);
  stroke-dasharray: 1 0;
}

.muted {
  color: var(--muted, #888);
}