/* CANDIDATE_REVIEW_V2 — 待审 list rows + the single-candidate review page.
 *
 * Two rules carry this whole file:
 *   1. Text on the light app canvas uses the shared ink tokens only. (The first version
 *      shipped a private dark palette onto .app-shell's light canvas and the page read
 *      as invisible text.) Light-on-dark is allowed only inside a media surface.
 *   2. The player's box is defined by CSS, never by its content. The stage keeps a
 *      9:16 ratio under a viewport-height ceiling, and the first-frame canvas floats
 *      absolutely on top of it — so nothing that happens at playback start can resize
 *      the player, which is what turned it landscape last time.
 */

/* ---------- shared ---------- */
.candidate-main .page-description { margin: 0 0 14px; }
.candidate-status { font-size: 14px; color: var(--ink-muted); margin: 12px 0; }
.candidate-empty { font-size: 14px; color: var(--ink-muted); }
.candidate-state {
  flex: 0 0 auto; font-size: 12px; font-weight: 650;
  padding: 4px 10px; border-radius: 999px;
  background: var(--mocha-soft); color: var(--ink-primary);
}
.candidate-state.is-sent { background: var(--warning-soft); }
.candidate-state.is-rework { background: var(--mist-blue-gray); }
.candidate-note { font-size: 13px; color: var(--ink-muted); margin: 10px 0 0; min-height: 18px; }
.candidate-note.is-error {
  color: var(--ink-primary); background: var(--danger-soft);
  border-radius: 9px; padding: 7px 10px;
}
.candidate-retry {
  appearance: none; border: 1px solid var(--foundation-line-strong); border-radius: 10px;
  padding: 9px 12px; margin-top: 8px; width: 100%;
  background: var(--surface-floating); color: var(--ink-primary);
  font-size: 14px; font-weight: 650;
}
.candidate-feedback {
  width: 100%; box-sizing: border-box; margin-top: 12px; padding: 11px 12px;
  border-radius: 11px; border: 1px solid var(--foundation-line-strong);
  background: var(--surface-floating); color: var(--ink-primary);
  font-size: 16px; font-family: inherit;
}
.candidate-feedback::placeholder { color: var(--ink-meta); }
.candidate-send {
  appearance: none; border: 0; border-radius: 11px; padding: 12px 14px;
  background: var(--sage); color: var(--surface-raised);
  font-size: 15px; font-weight: 720; width: 100%; margin-top: 8px;
}
.candidate-send[disabled] { opacity: .55; }
.candidate-sent {
  font-size: 13px; color: var(--ink-primary); margin: 12px 0 0;
  background: var(--warning-soft); border-radius: 10px; padding: 10px 12px;
}

/* ---------- the list: one compact row per candidate ---------- */
.candidate-thumb-video {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.candidate-list { display: grid; gap: 10px; }
.candidate-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 14px; text-decoration: none;
  background: var(--surface-raised); border: 1px solid var(--foundation-line);
  box-shadow: var(--foundation-shadow-raised);
}
.candidate-thumb {
  position: relative; flex: 0 0 auto; width: 54px; height: 96px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 9px; background: #0b0d10;
}
.candidate-thumb-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.candidate-thumb-fallback { font-size: 20px; color: rgba(255, 255, 255, .45); }
.candidate-thumb[data-painted="1"] .candidate-thumb-fallback { display: none; }
.candidate-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.candidate-row-title {
  font-size: 15px; font-weight: 680; color: var(--ink-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.candidate-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); }
.candidate-row-go { flex: 0 0 auto; font-size: 20px; color: var(--ink-meta); }

/* ---------- the review page ---------- */
/* .main-content reserves 80px for a nav that is a flex sibling here, not an overlay */
.candidate-main { padding-bottom: 24px; }
.candidate-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.candidate-back { font-size: 14px; font-weight: 650; color: var(--ink-muted); text-decoration: none; }
.candidate-detail-title {
  font-size: 19px; margin: 6px 0 12px; color: var(--ink-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.candidate-stage {
  --stage-ratio: 0.5625; /* 9 / 16; the real number is written in once metadata arrives */
  position: relative;
  width: 100%;
  max-width: calc((100vh - 380px) * var(--stage-ratio));
  /* a floor, so a short viewport never turns the movie into a postage stamp; the
     submit row may then need a little scrolling, which the Owner allowed */
  min-width: 210px;
  aspect-ratio: var(--stage-ratio);
  margin: 0 auto;
  border-radius: 14px; overflow: hidden; background: #0b0d10;
}
@supports (height: 100svh) {
  .candidate-stage { max-width: calc((100svh - 380px) * var(--stage-ratio)); }
}
.candidate-player {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #0b0d10;
}
.candidate-stage-loading {
  position: absolute; inset: 0; z-index: 1; margin: 0;
  display: grid; place-items: center;
  font-size: 13px; color: rgba(255, 255, 255, .82);
  pointer-events: none; /* a label must never sit between a finger and the player */
}
.candidate-stage-loading[hidden] { display: none; }