/* ═══ VIDEO REVIEWS v3 — desk, review page, request sheet, thread cards ═══
   Built 8 Sep 2026 from the approved mock (artifact 4dd334cf). Tokens from
   styles/tokens.css; one row shape, hairlines, poster frames, one dark band
   per screen, the scorecard for what the golfer sent. */

/* poster-frame thumbs (video first frame; play glyph on top) */
.vr3-thumb{position:relative;width:48px;height:64px;border-radius:7px;overflow:hidden;background:var(--ink);flex:none;display:block;}
.vr3-thumb.sq{width:34px;height:34px;border-radius:9px;}
.vr3-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vr3-thumb i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;}
.vr3-thumb i svg{width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.vr3-thumb.sq i svg{width:12px;height:12px;}
.vr3-thumb-ph{position:absolute;inset:0;background:linear-gradient(180deg,#2E4A3E,#15241D);}

/* page head */
.vr3-wrap{max-width:560px;}
.vr3-head{display:flex;align-items:center;gap:10px;padding:6px 0 10px;}
.vr3-head h1{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:0;flex:1;line-height:1.05;letter-spacing:-.01em;}
.vr3-back{width:34px;height:34px;display:grid;place-items:center;margin-left:-8px;background:none;border:0;color:var(--ink);cursor:pointer;}
.vr3-back svg{width:22px;height:22px;}
.vr3-hchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:30px;padding:4px 10px;font-size:.74rem;font-weight:600;color:var(--slate);background:var(--paper);white-space:nowrap;cursor:pointer;font-family:var(--sans);}
.vr3-hchip.amber{background:var(--amber-bg);border-color:transparent;color:var(--amber);}
.vr3-hchip.q{background:var(--mint);border-color:transparent;color:var(--fairway);}

/* ledger-rule section header */
.vr3-rule{display:flex;align-items:baseline;gap:10px;padding:18px 0 8px;}
.vr3-rule .ey{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);white-space:nowrap;}
.vr3-rule i{flex:1;border-top:1px solid var(--line);transform:translateY(-3px);}
.vr3-rule .fig{font-family:var(--mono);font-size:.74rem;color:var(--fairway);white-space:nowrap;}
.vr3-sec{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding:18px 0 6px;}

/* KPI strip + segments */
.vr3-kpis{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);overflow:hidden;margin-bottom:12px;}
.vr3-kpis>div{flex:1;padding:10px 12px;border-left:1px solid var(--line);}
.vr3-kpis>div:first-child{border-left:0;}
.vr3-kpis .n{font-family:var(--mono);font-size:1.3rem;color:var(--ink);line-height:1.1;}
.vr3-kpis .n small{font-size:.74rem;}
.vr3-kpis .n.due{color:var(--amber);}
.vr3-kpis .l{font-size:.7rem;color:var(--slate);margin-top:2px;}
.vr3-segs{display:flex;gap:6px;margin-bottom:10px;}
.vr3-seg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:30px;padding:5px 12px;font-size:.78rem;font-weight:600;color:var(--slate);background:var(--paper);cursor:pointer;font-family:var(--sans);}
.vr3-seg.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* the one row shape */
.vr3-list{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper);}
.vr3-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:9px 14px;border:0;border-top:1px solid var(--line);background:var(--paper);width:100%;text-align:left;position:relative;cursor:pointer;font-family:var(--sans);color:var(--ink);}
.vr3-list .vr3-row:first-child{border-top:0;}
.vr3-row:not(.vr3-list *){border:1px solid var(--line);border-radius:var(--r);margin-top:8px;}
.vr3-row:hover{background:var(--mint);}
.vr3-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.vr3-row .nm{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vr3-row .sb{font-size:.8rem;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vr3-row .rt{font-family:var(--mono);font-size:.74rem;color:var(--slate);white-space:nowrap;}
.vr3-row .rt.due{color:var(--amber);}
.vr3-row .chev{color:var(--slate);flex:none;display:grid;}
.vr3-row .chev svg{width:18px;height:18px;}
.vr3-row .bar{position:absolute;left:74px;right:14px;bottom:0;height:2px;background:var(--line);}
.vr3-row .bar b{display:block;height:100%;background:var(--fairway);}
.vr3-row .bar.due b{background:var(--amber);}
.vr3-empty{margin:6px 0;padding:26px 16px;text-align:center;border:1px dashed var(--sage);border-radius:var(--r);color:var(--slate);font-size:.9rem;}
.vr3-empty .seal{width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--fairway);display:grid;place-items:center;margin:0 auto 8px;}
.vr3-empty .seal svg{width:16px;height:16px;}

/* chips, scorecard, quote */
.vr3-chips{display:flex;gap:6px;flex-wrap:wrap;padding:6px 0;}
.vr3-chips.pick{padding:4px 0;}
.vr3-chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:30px;padding:4px 10px;font-size:.76rem;font-weight:600;color:var(--fairway);background:var(--mint);border-color:var(--mint);white-space:nowrap;font-family:var(--sans);}
.vr3-chips.pick .vr3-chip{background:var(--paper);border-color:var(--line);color:var(--slate);cursor:pointer;}
.vr3-chips.pick .vr3-chip.sel{background:var(--fairway);border-color:var(--fairway);color:#fff;}
.vr3-score{margin:8px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);overflow:hidden;}
.vr3-score .sr{display:flex;align-items:baseline;gap:8px;padding:8px 12px;font-size:.86rem;}
.vr3-score .sr+.sr{border-top:1px solid var(--line);}
.vr3-score .sr .k{color:var(--slate);}
.vr3-score .sr .l{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);}
.vr3-score .sr .v{font-size:.8rem;}
.vr3-score .sr.tot{background:var(--mint);font-weight:700;}
.vr3-score .sr.tot .v{color:var(--fairway);font-weight:500;}
.vr3-quote{margin:8px 0 4px;font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.4;color:var(--ink);}
.vr3-quote::before{content:"“";}.vr3-quote::after{content:"”";}
.vr3-fld{padding:6px 0;}
.vr3-fld input,.vr3-fld textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-family:var(--sans);}
.vr3-big{font-family:var(--serif)!important;font-size:1.15rem!important;}

/* clip tiles */
.vr3-clips{display:flex;gap:8px;padding:6px 0;}
.vr3-clip{flex:1;aspect-ratio:9/13;border-radius:var(--r-sm);background:var(--ink);color:#fff;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:8px;border:0;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;font-family:var(--sans);text-align:left;}
.vr3-clip .vr3-thumb{position:absolute;inset:0;width:100%;height:100%;border-radius:0;}
.vr3-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vr3-clip .lab{position:relative;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.9;}
.vr3-clip .dur{position:relative;font-size:.7rem;}
.vr3-clip .tick{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--green3);color:var(--ink);display:grid;place-items:center;}
.vr3-clip .tick svg{width:11px;height:11px;}
.vr3-clip.empty{background:var(--paper);border:1px dashed var(--sage);color:var(--slate);justify-content:flex-end;align-items:center;box-shadow:none;gap:4px;}
.vr3-clip.empty .lab{color:var(--slate);}
.vr3-clip.empty .plus{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;position:relative;background:var(--paper);}
.vr3-clip.empty .plus svg{width:14px;height:14px;}
.vr3-clip.empty.off{opacity:.45;cursor:default;}
.vr3-clip.empty .guide{position:absolute;inset:0;background:linear-gradient(180deg,#EEF3EF,#DCE7DF);}
.vr3-clip.empty .guide::before{content:"";position:absolute;left:50%;top:22%;width:3px;height:44%;background:#5b6b63;border-radius:2px;transform:translateX(-50%) rotate(10deg);opacity:.55;}
.vr3-clip.empty .guide::after{content:"";position:absolute;left:50%;top:14%;width:12px;height:12px;border-radius:50%;background:#5b6b63;transform:translateX(-50%);opacity:.55;}
.vr3-clip.empty .guide.dtl::before{transform:translateX(-30%) rotate(-14deg);}

/* the dark band — one per screen */
.vr3-band{margin:6px 0;border-radius:var(--r);background:linear-gradient(155deg,#1E4D3B,#15241D);color:#fff;padding:16px;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.vr3-band .ey{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green3);}
.vr3-band .h{font-family:var(--serif);font-size:1.4rem;font-weight:500;line-height:1.15;margin:6px 0 4px;}
.vr3-band .s{font-size:.82rem;color:var(--sage);}
.vr3-band .act{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.vr3-band.offer{margin:0;}

/* the stage (finished review video with the headline over it) */
.vr3-stage{border-radius:var(--r);background:var(--ink);position:relative;overflow:hidden;box-shadow:var(--shadow);}
.vr3-stage video{display:block;width:100%;max-height:60vh;background:#000;}
.vr3-stage .head{padding:10px 14px 12px;background:var(--ink);color:#fff;}
.vr3-stage .head .ey{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green3);margin-bottom:4px;}
.vr3-stage .head .h{font-family:var(--serif);font-size:1.25rem;line-height:1.15;font-weight:500;}
.vr3-hl{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.15;padding:10px 0 4px;}
.vr3-tx{font-size:.9rem;color:var(--slate);line-height:1.5;padding:8px 0 0;white-space:pre-wrap;}
.vr3-tx.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.vr3-more{padding:6px 0 0;font-size:.82rem;font-weight:600;color:var(--fairway);background:none;border:0;cursor:pointer;font-family:var(--sans);}
.vr3-drills{margin:6px 0;}
.vr3-drills .drill-msg-card{margin-bottom:8px;}

/* pills + actions */
.vr3-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--fairway);color:#fff;border:0;border-radius:30px;padding:10px 18px;font-weight:700;font-size:.86rem;cursor:pointer;font-family:var(--sans);}
.vr3-pill:hover{background:var(--fairway-2);}
.vr3-pill.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line);}
.vr3-pill.ghost:hover{background:var(--mint);}
.vr3-pill.sm{padding:7px 13px;font-size:.78rem;}
.vr3-pill.light{background:#fff;color:var(--ink);}
.vr3-pill.light:hover{background:var(--mint);}
.vr3-pill[disabled]{opacity:.4;cursor:default;}
.vr3-acts{display:flex;gap:8px;justify-content:flex-end;padding:14px 0 4px;}
.vr3-acts.between{justify-content:space-between;}

/* sheet contents (inside .hub2-sheet) */
.vr3-st{font-family:var(--serif);font-weight:500;font-size:1.3rem;text-align:center;padding:4px 16px 4px;}
.vr3-sub{text-align:center;font-size:.8rem;color:var(--slate);padding:0 16px 6px;}
.hub2-sheet .vr3-clips,.hub2-sheet .vr3-score,.hub2-sheet .vr3-quote,.hub2-sheet .vr3-acts,.hub2-sheet .vr3-hl,.hub2-sheet .vr3-tx,.hub2-sheet .vr3-chips,.hub2-sheet .vr3-fld,.hub2-sheet .vr3-stars{margin-left:16px;margin-right:16px;}
.vr3-stars{display:flex;gap:10px;justify-content:center;padding:10px 0 4px;}
.vr3-stars button{width:38px;height:38px;color:var(--line);background:none;border:0;cursor:pointer;}
.vr3-stars button.on{color:#e9a825;}
.vr3-stars svg{width:32px;height:32px;fill:currentColor;}

/* request sheet extras */
.vr3-clips.req .vr3-clip{aspect-ratio:9/12;}
.vr3-guide{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:6px 12px;margin:6px 0;}
.vr3-guide summary{font-weight:600;font-size:.86rem;cursor:pointer;padding:4px 0;color:var(--fairway);}
.vr3-guide .g{display:flex;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:.84rem;}
.vr3-guide .g b{font-family:var(--mono);font-size:.74rem;color:var(--fairway);min-width:40px;}

/* thread card */
.vr3-card{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:10px 12px;display:flex;align-items:center;gap:12px;text-align:left;width:100%;box-shadow:var(--shadow);position:relative;overflow:hidden;cursor:pointer;font-family:var(--sans);color:var(--ink);}
.vr3-card+.vr3-card{margin-top:8px;}
.vr3-card .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.vr3-card .ey{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);}
.vr3-card.amber .ey{color:var(--amber);}
.vr3-card .h{font-family:var(--serif);font-size:1.05rem;font-weight:500;line-height:1.2;}
.vr3-card .s{font-size:.76rem;color:var(--slate);}
.vr3-card .chev{color:var(--slate);flex:none;display:grid;}
.vr3-card .chev svg{width:18px;height:18px;}
.vr3-card .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line);}
.vr3-card .bar b{display:block;height:100%;background:var(--fairway);}
.vr3-card .bar.due b{background:var(--amber);}
.bubble.has-card .vr3-card{box-shadow:none;}
.ledger-card .vr3-card{border:0;padding:4px 0;box-shadow:none;}
.vr3-rel{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fairway);}

/* hub card: the poster thumb in the Requests row grid */
.vr3-hubcard .hub2-req .vr3-thumb.sq{width:34px;height:34px;}
.vr3-hubcard .hub2-reqh .hint{font-family:var(--sans);}

@media (max-width:480px){
  .vr3-kpis .n{font-size:1.15rem;}
}

/* ── save each clip from the coach's review sheet (the thread-card Save
   button itself lives in pages-b.css with the media card) ── */
.vr3-clipsave{display:flex;gap:8px;padding:0 0 6px;}
.vr3-clipsave button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:30px;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:.72rem;font-weight:600;cursor:pointer;}
.vr3-clipsave button:hover{background:var(--mint);}
.vr3-clipsave svg{width:13px;height:13px;}
.hub2-sheet .vr3-clipsave{margin-left:16px;margin-right:16px;}

/* ── the video swing review as a session type (editor · Pricing) ── */
.lt-card.vr .lt-fixed{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;padding:6px 0;}
.lt-card.vr .lt-fixed .t{font-weight:600;color:var(--ink);}
.lt-card.vr .lt-online{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fairway);}
.lt-card.vr.inactive .lt-online{color:var(--slate);}
.lt-turn{gap:6px;}
.lt-chip{border:1px solid var(--line);background:var(--paper);color:var(--slate);border-radius:30px;padding:6px 11px;font-family:var(--mono);font-size:.78rem;cursor:pointer;}
.lt-chip.on{background:var(--fairway);border-color:var(--fairway);color:#fff;}
.lt-vrprice{gap:6px;flex-wrap:wrap;align-items:center;}
.lt-vrprice .lt-field-input{max-width:84px;}
.lt-free{font-weight:600;color:var(--fairway);font-size:1rem;}
.lt-sub{font-size:.76rem;color:var(--slate);}
.lt-note{font-size:.8rem;color:var(--slate);margin:10px 0 0;line-height:1.45;}

/* ── the respond sheet on a laptop: player left, the writing right ──
   The sit-down review happens on a bigger screen; the phone modal stays the
   phone modal. */
.vr3-resp{display:flex;flex-direction:column;gap:4px;}
#vrRespondModal .modal.vr3-respond{max-width:520px;}
@media (min-width:900px){
  #vrRespondModal .modal.vr3-respond{max-width:1080px;width:calc(100vw - 48px);}
  #vrRespondModal .modal-body{padding-top:16px;}
  .vr3-resp{display:grid;grid-template-columns:minmax(360px,5fr) minmax(320px,6fr);gap:24px;align-items:start;}
  .vr3-resp .l{position:sticky;top:0;}
  .vr3-resp .vr-swing{margin-bottom:8px;}
  .vr3-resp .r .frow textarea{min-height:150px;}
}