/* Candidate selection extends the original two-panel comparison. */
.candidate-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 15px;
  font-size: 11px;
  color: var(--muted);
}
.candidate-picker select {
  font: inherit;
  color: var(--text);
  background: #10150f;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 10px;
}
.candidate-picker > span { margin-left: auto; font-size: 10px; }
.candidate:not(.selected) { display: none; }
.stage[data-view="all"] .candidate { display: block; }
.stage[data-view="all"] .reference { order: 5; }
.stage[data-view="all"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage[data-view="wipe"] .candidate { clip-path: inset(0 0 0 var(--wipe)); }
.lanczos-dot { background: #95bfdc; }
.realesrnet-dot { background: #d1a6df; }
.realesrgan-dot { background: #e7a68e; }
.realbasicvsr-dot { background: #91d7c6; }
.detail-inspection { margin: -25px 0 35px; border: 1px solid var(--line); border-radius: 6px; padding: 14px 18px; }
.detail-inspection summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.detail-inspection img { display: block; max-width: 100%; height: auto; margin: 15px auto 0; }
.detail-inspection p { font-size: 11px; color: var(--muted); margin-bottom: 0; }
.candidate-picker select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .candidate-picker { flex-wrap: wrap; }
  .candidate-picker > span { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 600px) {
  .candidate-picker { gap: 7px; padding: 0 12px 12px; }
  .candidate-picker label { width: 100%; }
  .candidate-picker select { width: 100%; }
  .stage[data-view="all"] { grid-template-columns: 1fr; }
  .view-switch button { padding: 7px 6px; }
}