/* video-review.css — the review room, shared by the share link, the client portal and
   the staff app. Page chrome (header, tokens, fonts) belongs to the host page, not here.

   The host page must define: --bg --panel --ink --ink-2 --line --field --bone
   --marker --chip --chip-tx --done --forest

   Canonical copy lives in silverclouds-wedding. silverclouds-app carries a byte-identical
   duplicate guarded by its test/video-review-copy.test.js — edit both or neither. */

/* ---------- review room ---------- */
.vr-root{flex:1;min-height:0;display:flex;flex-direction:column}
.rv{flex:1;min-height:0;display:flex}
.stage{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#000}
.screen{flex:1;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden}
/* absolute, not a grid child: centred in a grid the film keeps its own intrinsic height,
   so a fixed-height box crops it instead of letterboxing it. inset pins both axes. */
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;background:#000}
.bigplay{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;
  transition:background .18s;padding:0;z-index:2}
.bigplay:hover{background:rgba(255,255,255,.22)}
.bigplay svg{width:22px;height:22px;margin-left:3px;fill:#fff}
.bigplay[hidden]{display:none}

/* scrubber welded under the picture; notes ride it as faces */
.scrub{height:34px;flex:0 0 auto;padding:0 18px;display:flex;align-items:center;
  background:var(--bg);cursor:pointer;user-select:none;border:none}
.track{position:relative;flex:1;height:3px;background:rgba(255,255,255,.16);border-radius:99px}
.track .played{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--bone);border-radius:99px}
.track .head{position:absolute;left:0;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--bone);transform:translate(-50%,-50%);pointer-events:none}
.face{position:absolute;top:9px;width:20px;height:20px;border-radius:50%;background:var(--marker);
  color:#fff;font-size:9px;font-weight:600;display:grid;place-items:center;transform:translateX(-50%);
  border:2px solid var(--bg);cursor:pointer;transition:transform .15s,box-shadow .15s;padding:0;z-index:1}
.face:hover{transform:translateX(-50%) scale(1.14)}
.face.done{background:var(--done);color:#0B0C0C}
/* the note the playhead is sitting on — lights the dot and its slab in the rail together */
.face.is-at,.face.is-at:hover{transform:translateX(-50%) scale(1.3);z-index:3;
  box-shadow:0 0 0 3px rgba(193,112,90,.4)}
.face.done.is-at,.face.done.is-at:hover{box-shadow:0 0 0 3px rgba(127,183,154,.4)}

.transport{height:48px;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:0 18px;
  background:var(--bg);border-top:1px solid var(--line)}
.ic{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--ink-2);
  background:transparent;border:none;cursor:pointer;padding:0;transition:color .15s,background .15s}
.ic:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.ic svg{width:15px;height:15px}
.ic:focus-visible,.hdr-ig:focus-visible,.btn-add:focus-visible,.scrub:focus-visible,
.face:focus-visible,.cmt:focus-visible{outline:2px solid var(--marker);outline-offset:2px}
/* volume: the speaker toggles mute, the slider slides out beside it on hover */
.vol{display:flex;align-items:center}
.volbar{width:0;opacity:0;margin:0;-webkit-appearance:none;appearance:none;background:transparent;
  height:20px;cursor:pointer;transition:width .18s ease,opacity .18s ease,margin .18s ease}
.vol:hover .volbar,.vol:focus-within .volbar{width:74px;opacity:1;margin:0 4px 0 2px}
.volbar::-webkit-slider-runnable-track{height:3px;border-radius:99px;
  background:linear-gradient(var(--bone),var(--bone)) 0/var(--vf,100%) 100% no-repeat,rgba(255,255,255,.18)}
.volbar::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;
  background:var(--bone);margin-top:-3.5px}
.volbar::-moz-range-track{height:3px;border-radius:99px;background:rgba(255,255,255,.18)}
.volbar::-moz-range-progress{height:3px;border-radius:99px;background:var(--bone)}
.volbar::-moz-range-thumb{width:10px;height:10px;border:none;border-radius:50%;background:var(--bone)}
.volbar:focus-visible{outline:2px solid var(--marker);outline-offset:3px}
.tcode{font-size:11.5px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink);
  background:var(--field);border:1px solid var(--line);border-radius:6px;padding:5px 11px}
.transport .sp{flex:1}

/* ---------- notes rail ---------- */
.vr-rail{flex:0 0 330px;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;min-width:0}
.vr-rail-hd{height:52px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid var(--line)}
.vr-rail-hd .h{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.vr-rail-hd .f{font-size:10.5px;color:var(--ink-2)}
#vr-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.cmt{display:flex;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .15s;width:100%;text-align:left;background:none;
  border-left:none;border-right:none;border-top:none;font:inherit;color:inherit}
.cmt:hover{background:rgba(255,255,255,.03)}
.av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:9.5px;font-weight:600;color:#fff;background:var(--marker)}
.av.studio{background:var(--forest)}
.cmt .bd{min-width:0}
.cmt .who{font-size:11.5px;font-weight:600;display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.cmt .who span{font-weight:400;font-size:10px;color:var(--ink-2)}
.cmt p{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:#CFCEC9;overflow-wrap:anywhere}
.cmt.is-done p{text-decoration:line-through;color:var(--ink-2)}
.cmt.is-at{background:rgba(193,112,90,.14);box-shadow:inset 3px 0 0 var(--marker)}
.cmt.is-at .who,.cmt.is-at p{color:var(--ink)}
.cmt.is-at .chip{background:var(--marker);color:#fff}
.chip{display:inline-block;background:var(--chip);color:var(--chip-tx);border-radius:4px;
  padding:1px 6px;font-size:10.5px;font-variant-numeric:tabular-nums;margin-right:6px}
.chip.ok{background:rgba(127,183,154,.18);color:var(--done);margin-left:2px}
.vr-rail-empty{padding:20px 16px;font-size:12.5px;line-height:1.65;color:var(--ink-2)}

.composer{flex:0 0 auto;border-top:1px solid var(--line);padding:12px 14px 14px;
  display:flex;flex-direction:column;gap:9px;background:var(--panel)}
.composer .at{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.composer textarea,.composer input{width:100%;font-family:inherit;color:var(--ink);
  background:var(--field);border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font-size:12.5px;outline:none;resize:none;transition:border-color .15s}
.composer textarea{min-height:62px;line-height:1.5}
.composer textarea:focus,.composer input:focus{border-color:rgba(228,224,215,.45)}
.composer textarea::placeholder,.composer input::placeholder{color:var(--ink-2)}
.composer .row{display:flex;gap:9px;align-items:center}
.composer .row input{flex:1;min-width:0}
.btn-add{white-space:nowrap;background:var(--bone);border:1px solid var(--bone);color:#0B0C0C;
  border-radius:100px;padding:9px 17px;font-size:11px;cursor:pointer;font-family:inherit;
  font-weight:600;transition:opacity .15s}
.btn-add:hover{opacity:.85}
.btn-add:disabled{opacity:.45;cursor:default}

/* the write box, closed while the cut is with the editor. The line replaces "Leave a note
   at 0:00" rather than sitting above it — that prompt is an invitation, and it must not be
   the last thing read when nothing can be left. */
.composer .vr-lock{font-size:11.5px;line-height:1.6;color:var(--ink-2);background:var(--field);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.composer.vr-locked .at{display:none}
.composer.vr-locked textarea,.composer.vr-locked .row{opacity:.42}
.composer.vr-locked textarea{cursor:default}

/* ---------- loading / error states ---------- */
.state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;text-align:center;color:var(--ink-2)}
.state .big{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:30px;color:var(--ink)}
.state .sm{font-size:13px;max-width:340px;line-height:1.6}

@media(max-width:820px){
  .rv{flex-direction:column}
  .stage{flex:0 0 auto}
  /* flex:0 0 auto is load-bearing — the base rule's flex:1 sets flex-basis:0,
     which outranks any height set here and let the film eat the whole screen. */
  .screen{flex:0 0 auto;height:var(--screenh,44dvh)}
  .vr-rail{flex:1;min-height:0;border-left:none;border-top:1px solid var(--line)}
  .vr-rail-hd{height:46px}
  .composer{padding:10px 12px 12px;gap:8px}
  .composer textarea{min-height:46px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* per-note actions — Edit/Delete for your own notes, Mark done for staff.
   The slab is a <button>, so these cannot be buttons; they are spans handled
   by the delegated click listener. */
.acts{display:flex;gap:14px;margin-top:7px}
.act{font-size:10.5px;font-weight:600;color:var(--chip-tx);cursor:pointer}
.act:hover{text-decoration:underline}
.act-del{color:#C87A6E}

/* no name box (the portal) — keep the button hard right where the input was */
.composer .row > .btn-add:only-child{margin-left:auto}