/* review on the sky kit, at dusk like thumbnails. Everything shared (colour,
   type, motion, the components) comes from kit.css; this file only lays out
   this one tool and takes every value from the kit's --sk-* tokens. */

/* the kit sets display on panels, drops and bars; [hidden] must still win */
[hidden] { display: none !important; }

.rv-err { justify-self: start; white-space: normal; box-shadow: none; border-width: var(--sk-stroke-hair); }
.rv-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--sk-fg-3); font-size: var(--sk-size-sm); font-weight: 500; text-decoration: none;
}
.rv-link:hover { color: var(--sk-fg); }
.rv-link--stop:hover { color: var(--sk-stop); }
.rv-link[aria-pressed='true'] { color: var(--sk-accent); }
.rv-dim { color: var(--sk-fg-3); }
.rv-spacer { flex: 1; }

/* ---------------------------------------------------------------- home --- */

.rv-send { display: grid; gap: var(--sk-space-5); }
.rv-send__opts { display: flex; flex-wrap: wrap; gap: var(--sk-space-4); align-items: end; }
.rv-send__title { flex: 1 1 260px; }
.rv-progress { display: grid; gap: var(--sk-space-2); }
.rv-list { display: grid; gap: var(--sk-space-3); }

.rv-row {
  display: flex; align-items: center; gap: var(--sk-space-4);
  padding: var(--sk-space-3) var(--sk-space-4) var(--sk-space-3) var(--sk-space-3);
  border-radius: var(--sk-radius-lg);
  color: inherit; text-decoration: none;
  transition: transform var(--sk-dur-press) var(--sk-ease-out);
}
.rv-row:active { transform: scale(var(--sk-press-scale)); }
.rv-thumb {
  position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; overflow: hidden;
  border: var(--sk-stroke-hair) solid var(--sk-edge-soft); border-radius: var(--sk-radius-sm);
  background: var(--sk-surface-3); display: grid; place-items: center; color: var(--sk-fg-3);
}
.rv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-thumb .sk-doodle { width: var(--sk-doodle-md); }
.rv-row__name { display: grid; gap: 2px; min-width: 0; flex: 1; }
.rv-row__name strong { font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-row__keys { display: flex; gap: var(--sk-space-2); flex: none; }
@media (max-width: 640px) {
  .rv-row { flex-wrap: wrap; }
  .rv-thumb { width: 96px; }
  .rv-row__keys { width: 100%; }
}

/* -------------------------------------------------------------- review --- */

/* A viewing room, not a page: the lockup on top, then one surface that
   fills the rest of the window. The film runs edge to edge on the left, the
   notes sit in a column on the right, every control is a labelled key. */
.rv .sk-app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; min-height: 0; padding-bottom: 0; }
.rv .sk-app__top { margin-top: var(--sk-space-4); }
.rv-main { min-height: 0; padding: var(--sk-space-4); }
.rv-workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: 100%; min-height: 0;
  border: var(--sk-stroke-hair) solid var(--sk-edge-soft); border-radius: var(--sk-radius-lg);
  background: var(--sk-surface); overflow: hidden; box-shadow: var(--sk-shadow-card-dusk);
}

.rv-player { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sk-sunk); }
.rv-player:fullscreen { background: var(--sk-ink); }
.rv-player:fullscreen .rv-bar { display: none; }

.rv-bar {
  display: flex; align-items: center; gap: var(--sk-space-4); flex-wrap: wrap;
  padding: var(--sk-space-3) var(--sk-space-4); background: var(--sk-surface);
  border-bottom: var(--sk-stroke-hair) solid var(--sk-edge-soft);
}
.rv-name { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.rv-name .sk-h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bar__keys { display: flex; align-items: center; gap: var(--sk-space-2); flex-wrap: wrap; }
.rv-versions:empty { display: none; }
.rv-versions > button { min-height: 30px; padding: 0 var(--sk-space-3); }
.rv-bar .sk-pill svg, .rv-tools .sk-pill svg, .rv-comp-head .sk-pill svg { width: 16px; height: 16px; }

.rv-stage { position: relative; flex: 1; min-height: 0; background: var(--sk-ink); }
.rv-screens { position: absolute; inset: 0; display: flex; gap: var(--sk-stroke-ink); }
.rv-screen { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.rv-frame { position: relative; }
.rv-frame video { display: block; width: 100%; height: 100%; max-width: none; background: var(--sk-ink); }
.rv-overlay { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; touch-action: manipulation; }
.rv-stage[data-tool]:not([data-tool='']) .rv-overlay { cursor: crosshair; touch-action: none; }
/* while a pen is up, say so on the frame itself */
.rv-stage[data-tool]:not([data-tool=''])::before {
  content: 'Drag on the frame to draw'; position: absolute; top: var(--sk-space-3); left: 50%; transform: translateX(-50%);
  z-index: 4; pointer-events: none; padding: 4px 12px; border-radius: var(--sk-radius-pill);
  background: var(--sk-scrim); color: var(--sk-fg); font-size: var(--sk-size-sm); font-weight: 600;
}
.rv-label { position: absolute; top: var(--sk-space-3); left: var(--sk-space-3); box-shadow: none; }
.rv-label--pick { left: auto; right: var(--sk-space-3); padding: 2px; }
.rv-label--pick > button { min-height: 26px; padding: 0 var(--sk-space-2); }
.rv-msg { position: absolute; inset: auto 0 45% 0; text-align: center; color: var(--sk-fg-2); padding: 0 var(--sk-space-6); }
.rv-stage[data-wait='1']::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px;
  border: var(--sk-stroke-ink) solid color-mix(in oklab, var(--sk-fg) 25%, transparent);
  border-top-color: var(--sk-fg); border-radius: 50%;
  animation: rv-spin 800ms linear infinite; pointer-events: none;
}
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-veil { position: absolute; inset: 0; background: var(--sk-scrim); display: grid; place-items: center; z-index: 5; }
.rv-veil > div { width: min(420px, 80%); display: grid; gap: var(--sk-space-2); }

/* timeline: big enough to hit, a dot per note */
.rv-timeline {
  position: relative; height: 44px; flex: none; background: var(--sk-surface);
  cursor: pointer; touch-action: none; user-select: none;
}
.rv-track {
  position: absolute; left: var(--sk-space-5); right: var(--sk-space-5); top: 19px; height: 6px;
  background: var(--sk-surface-3); border-radius: var(--sk-radius-pill);
  transition: height var(--sk-dur-fast) var(--sk-ease-out), top var(--sk-dur-fast) var(--sk-ease-out);
}
.rv-timeline:hover .rv-track, .rv-timeline[data-scrub='1'] .rv-track { height: 10px; top: 17px; }
.rv-buffered, .rv-played { position: absolute; inset: 0 auto 0 0; border-radius: var(--sk-radius-pill); }
.rv-buffered { right: 0; --buf: color-mix(in oklab, var(--sk-fg) 22%, transparent); }
.rv-played { background: var(--sk-fg-2); width: 0; }
.rv-draftrange {
  position: absolute; top: -5px; bottom: -5px;
  background: color-mix(in oklab, var(--sk-accent) 30%, transparent);
  border: var(--sk-stroke-hair) solid var(--sk-accent); border-radius: var(--sk-radius-sm);
}
.rv-head__dot {
  position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--sk-fg); box-shadow: 0 0 0 3px var(--sk-surface); pointer-events: none; z-index: 3;
}
.rv-markers { position: absolute; inset: 0; }
.rv-marker {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0;
  border: 0; border-radius: 50%; background: var(--sk-accent); box-shadow: 0 0 0 2px var(--sk-surface);
  z-index: 2; cursor: pointer;
}
.rv-marker.range { width: auto; min-width: 12px; margin-left: 0; height: 10px; margin-top: -5px; border-radius: var(--sk-radius-pill); }
.rv-marker.done { background: var(--sk-fg-4); }
.rv-marker.sel { box-shadow: 0 0 0 2px var(--sk-fg); }
.rv-marker::before { content: ''; position: absolute; inset: -12px -4px; }

/* the scrub preview (scrubthumbs.js), shared with transfer */
.sprite-tip {
  position: absolute; bottom: calc(100% + var(--sk-space-3)); transform: translateX(-50%); z-index: 30;
  padding: var(--sk-space-1); border: var(--sk-stroke-ink) solid var(--sk-edge); border-radius: var(--sk-radius-md);
  background: var(--sk-surface); box-shadow: var(--sk-shadow-press); pointer-events: none; max-width: 260px;
}
.sprite-tip__img { border-radius: var(--sk-radius-sm); background-repeat: no-repeat; background-color: var(--sk-ink); }
.sprite-tip__label { text-align: center; font-family: var(--sk-font-mono); font-size: var(--sk-size-xs); font-weight: 600; padding: 3px 4px 1px; }
.sprite-tip__text {
  font-size: var(--sk-size-xs); color: var(--sk-fg-2); padding: 0 6px 4px; max-width: 200px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

.rv-controls {
  display: flex; align-items: center; gap: var(--sk-space-2); flex: none;
  padding: 0 var(--sk-space-4) var(--sk-space-3); background: var(--sk-surface);
}
.rv-controls .sk-pill svg { width: 18px; height: 18px; }
.rv-play.sk-pill { width: 48px; min-height: 48px; }
.rv-play.sk-pill svg { width: 22px; height: 22px; }
.rv-tc { font-family: var(--sk-font-mono); font-size: var(--sk-size-base); font-weight: 600; margin-left: var(--sk-space-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-shuttle { box-shadow: none; padding: 2px 8px; }
.rv-speed { padding: 2px; }
.rv-speed > button { min-height: 32px; padding: 0 var(--sk-space-3); }

/* notes column */
.rv-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-left: var(--sk-stroke-hair) solid var(--sk-edge-soft); }
.rv-side__title { margin: 0; flex: 1; }
.rv-side__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-2);
  padding: var(--sk-space-3) var(--sk-space-4); border-bottom: var(--sk-stroke-hair) solid var(--sk-edge-soft);
}
.rv-side__head .sk-seg > button { min-height: 30px; padding: 0 var(--sk-space-2); }
.rv-side__head .sk-seg span { color: var(--sk-fg-4); margin-left: 2px; font-variant-numeric: tabular-nums; }
.rv-notes { flex: 1; overflow-y: auto; padding: var(--sk-space-2); overscroll-behavior: contain; }
.rv-empty { padding: var(--sk-space-10) var(--sk-space-4); text-align: center; display: grid; gap: var(--sk-space-1); }

.rv-note {
  display: grid; gap: var(--sk-space-2); padding: var(--sk-space-3);
  border: var(--sk-stroke-hair) solid transparent; border-radius: var(--sk-radius-md); cursor: pointer;
  transition: background-color var(--sk-dur-fast) var(--sk-ease-hover);
}
.rv-note:hover { background: var(--sk-surface-2); }
.rv-note.sel { background: var(--sk-surface-2); border-color: var(--sk-edge-soft); }
.rv-note.done .rv-note__body { opacity: 0.55; }
.rv-note__top { display: flex; align-items: center; gap: var(--sk-space-2); }
.rv-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--sk-surface-3); color: var(--sk-fg); font-size: var(--sk-size-xs); font-weight: 700;
}
.rv-note__who { flex: 1; min-width: 0; font-size: var(--sk-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-note__who b { font-weight: 600; }
.rv-note__who span { color: var(--sk-fg-3); }
.rv-note__body, .rv-note__acts, .rv-note__snap, .rv-replies { margin-left: 34px; }
.rv-note__body { display: grid; gap: var(--sk-space-1); }
.rv-note__when { display: flex; align-items: center; gap: var(--sk-space-2); flex-wrap: wrap; }
.rv-tcchip {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sk-font-mono); font-size: var(--sk-size-xs); font-weight: 700; color: var(--sk-accent);
}
.rv-tcchip.general { color: var(--sk-fg-3); cursor: default; }
.rv-badge { font-size: var(--sk-size-xs); color: var(--sk-fg-3); }
.rv-note__txt { margin: 0; font-size: var(--sk-size-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-note__snap {
  display: block; width: calc(100% - 34px); aspect-ratio: 16 / 9; object-fit: cover; max-width: none;
  border: var(--sk-stroke-hair) solid var(--sk-edge-soft); border-radius: var(--sk-radius-sm); background: var(--sk-ink);
}
.rv-note__acts { display: flex; gap: var(--sk-space-3); flex-wrap: wrap; }
.rv-note__acts .rv-link { font-size: var(--sk-size-xs); }
.rv-replies { display: grid; gap: var(--sk-space-1); padding-left: var(--sk-space-3); border-left: var(--sk-stroke-ink) solid var(--sk-edge-soft); }
.rv-note.reply { padding: var(--sk-space-2) 0; cursor: default; }
.rv-note.reply:hover { background: none; }
.rv-note.reply .rv-av { width: 22px; height: 22px; }
.rv-note.reply .rv-note__body, .rv-note.reply .rv-note__acts { margin-left: 30px; }

/* resolve: a small key that latches */
.rv-res { min-height: 28px; width: 28px; }
.rv-res svg { width: 14px; height: 14px; }

.rv-composer {
  display: grid; gap: var(--sk-space-3); padding: var(--sk-space-4);
  border-top: var(--sk-stroke-hair) solid var(--sk-edge-soft); background: var(--sk-surface-2);
}
.rv-replying { display: flex; justify-content: space-between; margin: 0; }
.rv-comp-head { display: flex; gap: var(--sk-space-2); flex-wrap: wrap; }
.rv-text.sk-input { min-height: 76px; max-height: 180px; resize: none; padding: 10px 12px; }
.rv-tools { display: grid; gap: var(--sk-space-2); }
.rv-tools__label { margin: 0; }
.rv-tools__row, .rv-comp-row { display: flex; align-items: center; gap: var(--sk-space-2); flex-wrap: wrap; }
.rv-sendkey { margin-left: auto; }
.rv-colors { display: inline-flex; gap: var(--sk-space-2); margin-right: auto; }
.rv-swatch {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--c);
  border: var(--sk-stroke-ink) solid var(--sk-edge-soft);
  transition: transform var(--sk-dur-press) var(--sk-ease-out);
}
.rv-swatch:active { transform: scale(var(--sk-press-scale-icon)); }
.rv-swatch[aria-pressed='true'] { border-color: var(--sk-edge); box-shadow: 0 0 0 2px var(--sk-surface-2), 0 0 0 4px var(--c); }

/* dialogs: the gate card, floated */
.rv-dlg { color: var(--sk-fg); width: min(420px, calc(100vw - 32px)); margin: auto; }
.rv-dlg::backdrop { background: var(--sk-scrim); }
.rv-dlg form { display: grid; gap: var(--sk-space-4); }
.rv-dlg .sk-title { margin: 0; }
.rv-dlg .rv-link { justify-self: center; }
.rv-keys dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sk-space-2) var(--sk-space-4); margin: 0; font-size: var(--sk-size-sm); align-items: center; }
.rv-keys dt { white-space: nowrap; }
.rv-keys dd { margin: 0; color: var(--sk-fg-2); }
.rv-keys .sk-h3 { margin: 0; }
body[data-drop='1'] .rv-stage { outline: var(--sk-stroke-ink) dashed var(--sk-accent); outline-offset: -8px; }

@media (hover: none) { .rv-hide-touch { display: none !important; } }

/* ------------------------------------------------- narrow: one column --- */
@media (max-width: 1200px) {
  .rv-workspace { grid-template-columns: minmax(0, 1fr) 340px; }
  .rv-hide-narrow { display: none !important; }
}
@media (max-width: 960px) {
  .rv .sk-app { display: flow-root; height: auto; min-height: 100dvh; }
  .rv-main { padding: var(--sk-space-3); }
  .rv-workspace { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rv-stage { flex: none; aspect-ratio: var(--ar, 16 / 9); max-height: 70vh; width: 100%; }
  .rv-side { overflow: visible; border-left: 0; border-top: var(--sk-stroke-hair) solid var(--sk-edge-soft); }
  .rv-composer { order: 1; border-top: 0; border-bottom: var(--sk-stroke-hair) solid var(--sk-edge-soft); }
  .rv-side__head { order: 2; }
  .rv-notes { order: 3; overflow: visible; }
  .rv-screens.two { flex-direction: column; }
}
@media (max-width: 640px) {
  .rv-main { padding: var(--sk-space-2) 0 0; }
  .rv-workspace { border-radius: 0; border-left: 0; border-right: 0; }
  .rv-bar { gap: var(--sk-space-2); }
  .rv-bar__keys { width: 100%; }
  .rv-track { left: var(--sk-space-4); right: var(--sk-space-4); }
  .rv-controls { gap: var(--sk-space-1); padding: 0 var(--sk-space-3) var(--sk-space-3); }
  .rv-play.sk-pill { width: 44px; min-height: 44px; }
  .rv-tc { font-size: var(--sk-size-sm); }
  .rv-speed { display: none; }
  .rv-text.sk-input { font-size: var(--sk-size-base); }
}