/* PUIG skin, review screens. Loaded after puig.css; visual only.
   Covers Preaprobación / Aprobación (/batch/N/approval), their lists (/preapproval, /approval) and Revisión (/review):
   dark video-review mode on these screens only (.r2-dark-mark), each reference laid out as a video reviewer
   (large video, clip strip below, comments and decision on the right), and statuses as dot + text. */

/* --- Preaprobación / Aprobación ---
   Layout lives in templates/approval.html; only skin overrides here. */
html body .ap-legend { gap: 22px; }
html body .ap-head .ap-dot { width: 9px; height: 9px; }
html body .ap-asset { border: 0; border-radius: 4px; }
html body .ap-row img, html body .ap-rush video { border: 0; background: #EFEFEF; }

/* keyboard shortcuts line */
html body .r2-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin: -8px 0 18px; }
html body .r2-keys kbd { font: inherit; font-size: 11px; border: 1px solid var(--line-strong); border-radius: 2px; padding: 0 5px;
  margin-right: 4px; color: var(--ink); }
@media (max-width: 640px) { html body .r2-keys { display: none; } }

/* --- Rush review: queue on the left, videos centred on the shared background,
   a single card layer (options have no box of their own), one button per option --- */
html body .review-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
html body .review-side { position: sticky; top: 24px; }
html body .review-side h3 { margin: 0 0 12px; font-size: 14px; font-weight: 500; }
html body .rush-options { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 16px 0 8px; }
html body .rush-opt { background: transparent; border: 0; padding: 0; justify-items: center; gap: 10px; }
html body .rush-opt-head { justify-self: stretch; }
html body .rush-opt video { background: transparent; border-radius: 4px; max-height: 60vh; }
html body .rush-opt > .btn-ghost, html body .rush-opt-form { justify-self: stretch; }
html body .review-actions { border-top: 1px solid var(--ds-border-subtle, rgba(0, 0, 0, .12)); padding-top: 16px; margin-top: 8px; }
html body .rv-pairs { background: var(--ds-surface-3, #EFEEEB); border: 0; border-radius: 4px; }
@media (max-width: 950px) { html body .review-layout { grid-template-columns: 1fr; } html body .review-side { position: static; } }