/* ==========================================================================
   Ward Winning Pickleball - video analysis
   Loaded on /video-analysis, /member/video/* and /admin/video/*.
   Tokens come from app.css (deep green + gold); nothing here redefines the
   palette. Class names and layout follow kuhlmanpickleball.com's video.css so
   the two products stay recognisably one design.
   ========================================================================== */

/* ======================================================== 1. public page */

.vid-hero h1 em { font-style: normal; color: var(--gold-400); }

.vid-hero-art {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--green-950);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .7);
}
.vid-hero-art .frame {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233, 185, 73, .16), transparent 62%),
    linear-gradient(160deg, #2b5a3b 0%, var(--green-900) 58%, var(--green-950) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* The court, drawn rather than photographed: a real still would be a
   particular student's footage, which is exactly what this feature promises
   not to put on a public page. */
.vid-hero-art .court {
  width: 76%; aspect-ratio: 44 / 20; position: relative;
  border: 2px solid rgba(255, 255, 255, .38); border-radius: 3px;
  transform: perspective(760px) rotateX(46deg);
  background: rgba(233, 185, 73, .06);
}
.vid-hero-art .court::before,
.vid-hero-art .court::after {
  content: ""; position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed rgba(255, 255, 255, .3);
}
.vid-hero-art .court::before { top: 30%; }
.vid-hero-art .court::after  { bottom: 30%; }
.vid-hero-art .net {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(255, 255, 255, .6);
}
.vid-hero-art .marker {
  position: absolute; width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold-500); box-shadow: 0 0 0 6px rgba(233, 185, 73, .26);
}
.vid-hero-art .marker.a { left: 26%; top: 24%; }
.vid-hero-art .marker.b { left: 68%; top: 63%; }

.vid-hero-art .scrub {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 18px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .7) 42%);
}
.vid-hero-art .rail {
  height: 5px; border-radius: 100px; background: rgba(255, 255, 255, .22); position: relative;
}
.vid-hero-art .rail i { position: absolute; inset: 0 62% 0 0; background: var(--gold-500); border-radius: 100px; }
.vid-hero-art .rail b {
  position: absolute; top: -4px; width: 3px; height: 13px; border-radius: 2px;
  background: var(--cream); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.vid-hero-art .stamps { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vid-hero-art .stamps span {
  font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); background: var(--gold-500); border-radius: 100px; padding: 4px 10px;
}
.vid-hero-art .stamps span.ghost {
  background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85);
}

/* ------------------------------------------------------------- the plans */
.vplan {
  display: flex; flex-direction: column; height: 100%;
  border: 1.5px solid var(--line);
}
.vplan.is-popular { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(233, 185, 73, .18); }
.vplan .flag {
  position: absolute; top: -12px; left: 24px;
  background: var(--gold-500); color: var(--ink); border-radius: 100px;
  font-family: var(--display); font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 13px;
}
.vplan h3 { font-size: 1.2rem; margin-bottom: 4px; }
.vplan .tagline { font-size: .92rem; color: var(--body); margin-bottom: 18px; }
.vplan .price {
  font-family: var(--display); font-weight: 800; font-size: 2.1rem;
  color: var(--ink); line-height: 1; letter-spacing: -.03em;
}
.vplan .price small { font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.vplan .facts {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
/* planLimit() is a sentence, not a word, and .chip is nowrap. Only here. */
.vplan .facts .chip {
  white-space: normal; text-align: left; line-height: 1.35;
  padding: 6px 12px; border-radius: 13px;
}
.vplan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vplan li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--body); }
.vplan li svg { width: 16px; height: 16px; color: var(--green-700); flex: none; margin-top: 3px; }
.vplan .go { margin-top: 22px; }

/* ----------------------------------- the worked example ("what you get")
   A drawn court beside three read-only notes rendered by the real notes
   partial, so the example looks exactly like a delivered review. */
.vdemo {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px;
  align-items: start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px;
}
.vdemo-player { min-width: 0; }
.vdemo-stage {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2);
  background: var(--green-950); aspect-ratio: 16 / 10;
}
.vdemo-stage svg { width: 100%; height: 100%; display: block; }
.vdemo-notes { min-width: 0; }
.vdemo-head {
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.vdemo .vtools .vbtn { cursor: default; }
.vrail-static .vrail-tick { pointer-events: none; }

/* app.css sets a global `svg { display: block }`, which is right for artwork
   and wrong for a small icon on the same line as a heading. */
.panel-head h2 > svg,
.panel-head h3 > svg,
.vid-cardhead > svg,
.vnote-read p > svg,
.faq-item summary span > svg,
.vq-row .side span > svg,
.vq-row .main b > svg,
.vpay p > svg,
p.small > svg {
  display: inline-block; vertical-align: -.2em; width: 18px; height: 18px;
}
.faq-item summary span > svg { color: var(--green-700); }
.vid-cardhead { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.vid-cardhead > svg { flex: none; color: var(--warn); }

.vid-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.vid-list { margin: 0; padding-left: 20px; }
.vid-list li { font-size: .93rem; line-height: 1.6; margin-bottom: 10px; color: var(--body); }
.vid-list li:last-child { margin-bottom: 0; }

/* Small headings inside toolbars on the member and admin pages. */
.vid-h { font-size: 1.15rem; margin: 0; }
.vid-h1 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); margin: 0; }
.vid-intro { padding: 40px 32px; }

/* ============================================ 2. the player, shared by all */

.vstage {
  background: #000; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-2); position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* Students film on phones, so most footage arriving here is portrait or
   square. Letting the element take its own intrinsic size inside a max box
   fits any shape. */
.vstage video {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 62vh;
  background: #000; object-fit: contain;
}
/* Height is the only axis that costs anything on this layout, because the
   notes run down the column beside the player, so a portrait clip is allowed
   considerably more of it. */
.vstage.is-portrait video { max-height: min(82vh, 820px); }
/* Assets with no recorded dimensions get the old fixed box until metadata
   arrives, or the player collapses to nothing and then jumps. */
.vstage video:not([width]) {
  width: 100%; aspect-ratio: 16 / 9;
}
.vstage .vstage-empty {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; color: #9aa79f; text-align: center; padding: 24px;
}
.vstage .vstage-empty svg { width: 34px; height: 34px; opacity: .7; }

/* Moments rail: every note on this clip, as a tick you can click. */
.vrail {
  position: relative; height: 30px; margin-top: 10px;
  background: #eef1ef; border-radius: 8px; overflow: hidden;
}
.vrail-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(233, 185, 73, .38); }
/* 24px is the WCAG 2.5.8 minimum target. The mark itself stays a 3px line. */
.vrail-tick {
  position: absolute; top: 0; bottom: 0; width: 24px; margin-left: -12px;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.vrail-tick::after {
  content: ""; position: absolute; left: 10.5px; top: 5px; bottom: 5px; width: 3px;
  border-radius: 2px; background: var(--green-600); transition: transform .12s, background .12s;
}
.vrail-tick:hover::after { transform: scaleX(1.8); background: var(--green-900); }
.vrail-tick.cat-strength::after { background: var(--ok); }
.vrail-tick.cat-fix::after      { background: var(--gold-700); }
.vrail-tick.cat-drill::after    { background: var(--info); }
@media (pointer: coarse) {
  .vrail-tick { width: 28px; margin-left: -14px; }
  .vrail-tick::after { left: 12.5px; }
}

/* Why a clip is not playing, when it is not. */
.vwarn {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--warn-bg); color: var(--warn);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px;
}
.vwarn[hidden] { display: none; }
.vwarn svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.vrail-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: var(--body);
}

.vtools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.vtools .time {
  font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 96px;
}
.vtools .time small { color: var(--muted); font-weight: 500; }
.vtools .spacer { margin-left: auto; }
.vbtn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--white); color: var(--body);
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; transition: all .14s;
  text-decoration: none;
}
.vbtn:hover { border-color: var(--green-800); color: var(--ink); }
.vbtn.on { background: var(--green-900); border-color: var(--green-900); color: var(--gold-400); }
.vbtn svg { width: 14px; height: 14px; }
.vbtn-mark { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink); font-size: .86rem; padding: 9px 16px; }
.vbtn-mark:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--ink); }

/* Clip switcher when a review carries more than one. */
.vclips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vclip-tab {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--white); border-radius: 10px;
  padding: 7px 12px 7px 7px; text-align: left; transition: all .14s;
}
.vclip-tab img, .vclip-tab .ph {
  width: 54px; height: 32px; border-radius: 5px; object-fit: cover; background: var(--green-900); flex: none;
}
.vclip-tab .ph { display: flex; align-items: center; justify-content: center; color: #9aa79f; }
.vclip-tab .ph svg { width: 15px; height: 15px; }
.vclip-tab b { display: block; font-size: .84rem; color: var(--ink); font-family: var(--display); }
.vclip-tab span { display: block; font-size: .74rem; color: var(--muted); }
.vclip-tab.active { border-color: var(--gold-500); background: var(--gold-50); }

/* ============================================================ 3. the notes */

.vnotes { display: flex; flex-direction: column; gap: 10px; }
.vnote {
  border: 1px solid var(--line); border-left: 4px solid var(--line-2);
  border-radius: var(--radius-sm); background: var(--white); padding: 13px 15px;
  transition: border-color .14s, box-shadow .14s;
}
.vnote:hover { box-shadow: var(--shadow-sm); }
.vnote.cat-strength { border-left-color: var(--ok); }
.vnote.cat-fix      { border-left-color: var(--gold-700); }
.vnote.cat-drill    { border-left-color: var(--info); }
.vnote.is-active    { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(233, 185, 73, .28); }
.vnote.is-draft     { background: #fbfaf5; border-style: dashed; }

.vnote-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.vstamp {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 0; background: var(--green-800); color: var(--gold-400);
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 6px;
}
button.vstamp:hover { background: var(--green-900); }
span.vstamp { cursor: default; }
.vstamp svg { width: 12px; height: 12px; }
.vnote-top .grow { flex: 1; min-width: 0; }
/* h3 in the member and admin lists; h4 in the public worked example. */
.vnote h3, .vnote h4 { font-size: .94rem; line-height: 1.35; margin: 0; }
.vnote p { font-size: .88rem; color: var(--body); margin-top: 5px; white-space: pre-line; }
.vnote-acts { display: flex; gap: 4px; }
.vnote-acts button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 5px; border-radius: 6px; line-height: 0;
}
.vnote-acts button:hover { background: var(--green-50); color: var(--ink); }
.vnote-acts button.danger:hover { background: var(--bad-bg); color: var(--bad); }
.vnote-acts svg { width: 15px; height: 15px; }

/* The inline editor the coach types into. */
.vnote-edit { display: none; }
.vnote.editing .vnote-edit { display: block; }
.vnote.editing .vnote-read { display: none; }
.vnote-edit input[type=text], .vnote-edit textarea, .vnote-edit select {
  width: 100%; min-height: 0; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 9px 11px; font-size: .9rem; background: var(--white);
}
.vnote-edit textarea { min-height: 74px; resize: vertical; line-height: 1.55; margin-top: 8px; }
.vnote-edit .row { display: flex; gap: 8px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.vnote-edit .row select { width: auto; min-width: 130px; padding-right: 34px; }
.vnote-edit .row .spacer { margin-left: auto; }
.vnote-pub { margin: 0; align-items: center; }
/* The workspace has no Save button, which only works if a failure is loud.
   Toggled by the script rather than :empty. */
.vnote-save {
  font-size: .76rem; color: var(--muted); font-weight: 600;
  opacity: 0; transition: opacity .2s;
}
.vnote-save.show { opacity: 1; }
.vnote-save.on   { color: var(--ok); }
.vnote-save.bad  { color: var(--bad); }

.vnotes-empty {
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  padding: 26px 20px; text-align: center; color: var(--muted); font-size: .9rem;
}

/* Category tally strip on the student's page. */
.vtally { display: flex; gap: 8px; flex-wrap: wrap; }

/* ========================================================= 4. the uploader */

.vdrop {
  border: 2px dashed var(--line-2); border-radius: var(--radius);
  background: var(--cream); padding: 34px 24px; text-align: center;
  transition: border-color .16s, background .16s;
}
.vdrop.over { border-color: var(--green-500); background: var(--green-50); }
.vdrop .vdrop-ic {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 14px;
  background: var(--white); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--green-700);
}
.vdrop .vdrop-ic svg { width: 24px; height: 24px; }
.vdrop h3 { font-size: 1.05rem; margin-bottom: 6px; }
.vdrop p { font-size: .89rem; color: var(--body); max-width: 46ch; margin: 0 auto 16px; }
.vdrop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vdrop.is-full { opacity: 1; }
/* The full state has nothing to drop into, so it shrinks to a line. */
.vdrop-quiet { padding: 14px 18px; border-style: solid; border-width: 1px; background: var(--white); }
.vdrop-quiet p > svg { color: var(--ok); }

.vqueue-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.vqueue-list:empty { margin-top: 0; }
.vup {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); padding: 12px 14px;
}
.vup .main { flex: 1; min-width: 0; }
.vup b { display: block; font-size: .88rem; color: var(--ink); font-family: var(--display);
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vup span { display: block; font-size: .78rem; color: var(--muted); }
.vup .bar { height: 6px; border-radius: 100px; background: #eef1ef; margin-top: 7px; overflow: hidden; }
.vup .bar i { display: block; height: 100%; width: 0; background: var(--gold-500); transition: width .25s; }
.vup.done .bar i { background: var(--ok); }
.vup.failed .bar i { background: var(--bad); }
.vup.failed span { color: var(--bad); }
.vup .pct { font-family: var(--display); font-weight: 700; font-size: .84rem;
            color: var(--ink); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* A clip already stored, on the draft page. */
.vfile {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); padding: 12px;
}
.vfile img, .vfile .ph {
  width: 96px; height: 56px; border-radius: 7px; object-fit: cover;
  background: var(--green-900); flex: none;
}
.vfile .ph { display: flex; align-items: center; justify-content: center; color: #9aa79f; }
.vfile .ph svg { width: 19px; height: 19px; }
.vfile .main { flex: 1; min-width: 0; }
.vfile b { display: block; font-family: var(--display); font-size: .92rem; color: var(--ink);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vfile .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.vfile form { flex: none; }

/* ====================================================== 5. review chrome */

/* The four stages, as a rail the student reads left to right. */
.vsteps { display: flex; align-items: flex-start; gap: 0; }
.vstep-item { flex: 1; text-align: center; position: relative; padding: 0 6px; }
.vstep-item .dot {
  width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 2px solid var(--line-2); color: var(--muted);
  font-family: var(--display); font-weight: 700; font-size: .8rem; position: relative; z-index: 2;
}
.vstep-item .dot svg { width: 15px; height: 15px; }
.vstep-item::before {
  content: ""; position: absolute; left: -50%; right: 50%; top: 14px; height: 2px;
  background: var(--line-2); z-index: 1;
}
.vstep-item:first-child::before { display: none; }
.vstep-item.done .dot { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink); }
.vstep-item.done::before { background: var(--gold-500); }
.vstep-item.now .dot { background: var(--green-800); border-color: var(--green-800); color: var(--gold-400); }
.vstep-item.now::before { background: var(--gold-500); }
.vstep-item b { display: block; font-size: .82rem; font-family: var(--display); color: var(--muted); }
.vstep-item.done b, .vstep-item.now b { color: var(--ink); }
.vstep-item span { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* The banner at the top of a delivered review. */
.vready {
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  color: rgba(255, 255, 255, .82); border-radius: var(--radius); padding: 24px 26px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.vready h2 { color: #fff; font-size: 1.28rem; margin-bottom: 6px; }
.vready p { color: rgba(255, 255, 255, .8); font-size: .93rem; max-width: 58ch; margin: 0; }
.vready .grow { flex: 1; min-width: 240px; }

/* Checklists on the send and deliver rails. */
.vchecks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vchecks li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: var(--body); }
.vchecks li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--muted); }
.vchecks li.ok svg { color: var(--ok); }

/* The Venmo panel on the student's page. */
.vpay.is-due { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(233, 185, 73, .16); }
.vpay .panel-head { background: var(--gold-50); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.vpay .btn-row form { display: contents; }
.vpay dl.kv dd b { font-family: var(--display); }

/* ============================================================ 6. the thread */

.vthread { display: flex; flex-direction: column; gap: 12px; }
.vmsg { display: flex; gap: 11px; align-items: flex-start; }
.vmsg .av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: .74rem;
  background: #eef1ef; color: var(--green-800);
}
.vmsg.coach .av { background: var(--green-800); color: var(--gold-400); }
.vmsg .bubble {
  background: var(--white); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px;
  padding: 11px 14px; max-width: 62ch; min-width: 0;
}
.vmsg.coach .bubble { background: var(--green-50); border-color: var(--green-200); }
.vmsg .bubble p { font-size: .91rem; color: var(--body); white-space: pre-line; margin: 0; overflow-wrap: anywhere; }
.vmsg .who { font-size: .74rem; color: var(--muted); margin-bottom: 3px; font-weight: 600; }
.vmsg.unread .bubble { box-shadow: 0 0 0 3px rgba(233, 185, 73, .3); }
.vthread-empty { font-size: .9rem; color: var(--muted); margin: 0; }

/* ======================================================= 7. the admin queue */

.vq { display: flex; flex-direction: column; }
.vq-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: background .12s;
}
.vq-row:last-child { border-bottom: 0; }
.vq-row:hover { background: var(--green-50); color: inherit; }
.vq-row .thumb {
  width: 86px; height: 50px; border-radius: 7px; object-fit: cover;
  background: var(--green-900); flex: none;
}
.vq-row .thumb.ph { display: flex; align-items: center; justify-content: center; color: #9aa79f; }
.vq-row .thumb.ph svg { width: 18px; height: 18px; }
.vq-row .main { flex: 1; min-width: 0; }
.vq-row .main b { display: block; font-family: var(--display); font-size: .95rem; color: var(--ink); }
.vq-row .main b .chip { vertical-align: middle; margin-left: 4px; }
.vq-row .main .sub { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.vq-row .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.vq-row .side { text-align: right; flex: none; min-width: 120px; }
.vq-row .side b { display: block; font-size: .84rem; font-family: var(--display); color: var(--ink); }
.vq-row .side span { display: block; font-size: .76rem; color: var(--muted); }
.vq-row.overdue { border-left: 3px solid var(--bad); }
.vq-row.fresh { border-left: 3px solid var(--gold-500); }

.vsearch { gap: 10px; }
.vsearch input[type=search] { min-height: 40px; padding: 7px 12px; }

/* The coach's two-column workspace. */
.vwork { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.vwork-side { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 36px); overflow-y: auto; }
/* On the student's page the same two-column layout wraps a short, read-only
   list inside a panel, where sticky plus its own scrollbar is friction. */
.vwork-side.vwork-plain { position: static; max-height: none; overflow: visible; }

.vbrief { margin: 0; }
.vbrief dt { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.vbrief dd { font-size: .92rem; color: var(--ink); margin: 3px 0 14px; white-space: pre-line; overflow-wrap: anywhere; }
.vbrief dd:last-child { margin-bottom: 0; }

.vkeys { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); }
.vkeys kbd {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  background: var(--white); border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 7px; color: var(--ink);
}

/* Disclosure panels (delete this review / delete this draft). */
.vid-details summary { list-style: none; cursor: pointer; }
.vid-details summary::-webkit-details-marker { display: none; }
details.panel.vid-details > summary.panel-head { border-bottom: 0; }
details.panel.vid-details[open] > summary.panel-head { border-bottom: 1px solid var(--line); }
details.panel.vid-details > summary .faq-chev { width: 20px; height: 20px; color: var(--muted); transition: transform .2s; }
details.panel.vid-details[open] > summary .faq-chev { transform: rotate(180deg); }

/* Grid children default to min-width:auto, so a wide intrinsic child (a
   url input in the link form) can push a 1fr column past a phone's width. */
.two-col > *, .two-col-wide > *, .vwork > *, .stack > * { min-width: 0; }
.vqueue-list, .vdrop, .faq-answer form { min-width: 0; }
.faq-answer input[type=url], .faq-answer input[type=text] { min-width: 0; }

/* ============================================================ 8. responsive */

@media (max-width: 1080px) {
  .vwork { grid-template-columns: 1fr; }
  .vwork-side { position: static; max-height: none; }
  .vdemo { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .vid-split { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 720px) {
  .vstage video { max-height: none; }
  .vdemo { padding: 14px; gap: 22px; }
  .vsteps { flex-wrap: wrap; gap: 14px; }
  .vstep-item { flex: 1 1 44%; }
  .vstep-item::before { display: none; }
  .vq-row { flex-wrap: wrap; }
  .vq-row .side { text-align: left; min-width: 0; width: 100%; }
  .vfile img, .vfile .ph { width: 72px; height: 44px; }
  .vtools .time { min-width: 0; }
  .vid-intro { padding: 24px 18px; }
  .vready { padding: 20px; }
  .vready .btn { width: 100%; }
  /* Keyboard shortcuts on a phone are noise: there is no keyboard. */
  .vkeys { display: none; }
}

@media (max-width: 640px) {
  .vpay .btn-row .btn { width: 100%; }
  .vpay .btn-row form { display: block; width: 100%; }
  .toolbar .vid-details { width: 100%; }
}

/* Someone who has asked for less motion gets less of it. */
@media (prefers-reduced-motion: reduce) {
  .vup .bar i, .vnote, .vbtn, .vclip-tab, .vrail-tick::after { transition: none; }
}