/* sako-internal — candidate cards + filter bar */

@layer components {
  .candidates-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .candidate-card {
    --card-accent: var(--border);

    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--card-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .candidate-card--approved { --card-accent: var(--green); }
  .candidate-card--rejected { --card-accent: var(--red); opacity: 0.7; }

  .candidate-card__text {
    font-size: var(--text-base);
    line-height: 1.55;
    margin: 0;
    color: var(--ink);
  }

  .candidate-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .candidate-card__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .candidate-card__verdict {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .candidate-card__error {
    color: var(--red);
    font-size: var(--text-sm);
    margin: 0;
  }

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

  .badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 1px 6px;
    border-radius: 99rem;
    border: 1px solid currentColor;
    white-space: nowrap;
    font-weight: 500;
  }

  .badge--type     { color: var(--ink-2); }
  .badge--arch     { color: var(--accent); }
  .badge--approved { color: var(--green); }
  .badge--rejected { color: var(--red); }
  .badge--pending  { color: var(--ink-3); }

  /* ─── Inline review forms ──────────────────────────────────── */

  .inline-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  /* ─── Filter bar ───────────────────────────────────────────── */

  .filter-bar {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
  }
}