/* View / Edit (Review): the live screen read only (View_Edit_Session REV-001..114).
   The layout is the live screen's own (live-session.css); these rules add the
   Review badge, the period filter, the selectable markers and strip cards, the
   anchored preview, and the detail / editor dialogs. */

.rv-root[data-actions="none"] .lv-body { --lv-dock-space: 0px; grid-template-rows: var(--lv-court-h); }
.rv-root #shot-regions { pointer-events: none; }
.rv-root .lv-floor-tile[aria-disabled="true"], .rv-root .lv-floor-tile:disabled { opacity: 1; cursor: default; }
.rv-root .lv-bench-tile:disabled { opacity: 0.85; cursor: default; }
.rv-root .lv-score-edit { pointer-events: none; }

.rv-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-brand); font: 700 11px/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle;
}
.rv-badge.is-editing { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--brand-ink); border: 1px solid var(--brand); }
.rv-disabled-note { color: var(--ink-muted); font-size: 11.5px; }
.rv-sync { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
.rv-sync.is-error { color: var(--danger); font-weight: 700; }

.rv-periods { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.rv-periods button { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; font-size: 13px; }
.rv-periods button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); font-weight: 700; }

/* Markers: the hit target is invisible and larger than the dot (REV-015). */
.rv-root .shot-marker { cursor: pointer; }
.rv-root .shot-marker .shot-hit-target { fill: transparent; stroke: none; }
.rv-root .shot-marker:focus { outline: none; }
.rv-root .shot-marker:focus-visible .shot-hit-target { stroke: var(--focus); stroke-width: 0.18; }
.rv-root .shot-selected-ring { fill: none; stroke: var(--shot-color, var(--brand)); stroke-width: 0.22; }
.rv-root .shot-marker.is-selected { filter: drop-shadow(0 0 0.35px var(--shot-color, var(--brand))); }

/* Strip cards: who, what, reference (REV-013). Review keeps its taller footer
   for the two-line cards and its Timeline and Back buttons. */
.tracker-v2.lv-root.rv-root { --lv-foot-h: 80px; }
@media (max-width: 1100px), (max-height: 760px) { .tracker-v2.lv-root.rv-root { --lv-foot-h: 68px; } }
.rv-root .lv-foot { gap: 12px; }
.rv-root .lv-foot .lv-strip { height: 70px; }
.rv-root .lv-foot .rv-card { height: 58px; border-left-color: var(--play-color, var(--lv-us)); }
.rv-card .rv-card-what { font-size: 12px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-card strong { display: flex; align-items: center; gap: 4px; }
.rv-root .lv-play.is-selected { outline: 2px solid var(--play-color, var(--brand)); outline-offset: -1px; background: color-mix(in srgb, var(--play-color, var(--brand)) 12%, var(--surface)); }
.rv-card.needs-review { border-style: dashed; }

/* Anchored preview (REV-014). */
.rv-court-layer { position: absolute; inset: 0; pointer-events: none; }
.rv-preview {
  position: absolute; left: var(--x); top: var(--y); z-index: 6; display: grid; gap: 2px; width: max-content; max-width: min(280px, 70%);
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg, 0 8px 24px rgb(0 0 0 / 0.35));
  font-size: 12.5px; color: var(--ink-muted); transform: translate(-50%, calc(-100% - 14px));
}
.rv-preview[data-below="true"] { transform: translate(-50%, 14px); }
.rv-preview strong { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; }
.rv-preview strong i { width: 10px; height: 10px; border-radius: 50%; }
.rv-preview small { margin-top: 4px; color: var(--ink-subtle, var(--ink-muted)); font-size: 11px; }

.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.rv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--accent-2, var(--brand)); border-radius: var(--radius-pill); font-style: normal; font-size: 12px; color: var(--ink); }
.rv-chip.is-flag { border-color: var(--warning, var(--danger)); }

/* Dialogs: inside the viewport, internally scrollable, footer reachable (REV-110). */
.rv-scrim { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 0.45); }
.rv-dialog {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(560px, 100%); max-height: min(720px, calc(100% - 8px));
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 14px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg, 0 16px 40px rgb(0 0 0 / 0.45)); outline: none;
}
.rv-dialog.is-editor { width: min(680px, 100%); }
.rv-dialog.is-chooser { width: min(420px, 100%); }
.rv-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; }
.rv-head-actions { display: flex; gap: 8px; }
.rv-dialog-body { min-height: 0; overflow-y: auto; padding: 4px 18px 12px; }
.rv-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.rv-dialog-foot.is-editor { display: grid; gap: 10px; }
.rv-foot-buttons { display: flex; justify-content: flex-end; gap: 10px; }
.rv-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--raised, var(--surface)); color: var(--ink); cursor: pointer; }
.rv-icon-btn:focus-visible, .rv-dialog button:focus-visible, .rv-dialog select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-team { display: inline-flex; align-items: center; gap: 8px; color: var(--team, var(--ink)); font: 700 16px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.rv-team i { width: 12px; height: 12px; border-radius: 50%; background: var(--team, var(--brand)); }
.rv-heading { margin: 4px 0 2px; font: 700 34px/1.1 var(--font-display); }
.rv-heading.is-editor { font-size: 26px; }
.rv-refs { margin: 0 0 12px; color: var(--ink-muted); font-size: 15px; }
.rv-needs-review { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--warning, var(--danger)); border-radius: var(--radius-md); color: var(--ink); font-size: 13px; }
.rv-facts { display: grid; gap: 0; margin: 0 0 8px; border-top: 1px solid var(--line); }
.rv-facts > div { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rv-facts dt { color: var(--ink-muted); font: 700 12px/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.rv-facts dd { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.rv-facts .is-long dd { font-weight: 400; font-size: 14px; white-space: pre-wrap; }
.rv-choices { display: grid; gap: 6px; margin: 0; padding: 0 18px 16px; list-style: none; }
.rv-choices button { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--raised, var(--surface)); color: var(--ink); text-align: left; cursor: pointer; }
.rv-choices i { width: 10px; height: 10px; border-radius: 50%; }
.rv-choices small { color: var(--ink-muted); }

/* Editor form. */
.rv-form { display: grid; gap: 14px; }
.rv-field { display: grid; gap: 6px; }
.rv-label { color: var(--ink-muted); font: 700 12px/1.3 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.rv-label small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-subtle, var(--ink-muted)); }
.rv-field select, .rv-field textarea { width: 100%; min-height: 44px; }
.rv-field textarea { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--sunken); color: var(--ink); font: inherit; resize: vertical; }
.rv-field.is-toggle label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.rv-field.is-toggle input { width: 20px; height: 20px; accent-color: var(--brand); }
.rv-field.has-error .rv-seg, .rv-field.has-error select { border-color: var(--danger); }
.rv-error { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.rv-help { color: var(--ink-muted); font-size: 12px; }
.rv-seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; }
.rv-seg button { flex: 1 1 0; min-width: 88px; min-height: 44px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: var(--sunken); color: var(--ink); font: 600 14px/1.2 var(--font-body, inherit); cursor: pointer; }
.rv-seg button:last-child { border-right: 0; }
.rv-seg button[aria-checked="true"], .rv-seg button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.rv-seg button:disabled { opacity: 0.4; cursor: default; }
.rv-seg button.is-clear { flex: 0 0 44px; min-width: 44px; }
.rv-seg.is-tags { border: 0; gap: 8px; }
.rv-seg.is-tags button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.rv-seg.is-tags button[aria-pressed="true"] { border-color: var(--accent-2, var(--brand)); background: color-mix(in srgb, var(--accent-2, var(--brand)) 22%, transparent); color: var(--ink); }
.rv-attempt { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
.rv-location { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rv-value-pill { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-weight: 700; }
.rv-info-value { margin: 0; font-size: 15px; font-weight: 600; }
/* Foul rows (REV-071) and the drag-to-move court (REV-096). */
.rv-foul { display: grid; gap: 8px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--sunken); }
.rv-foul-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rv-foul-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.rv-foul-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-muted); }
.rv-move-court { position: relative; width: 100%; max-width: 420px; margin-top: 8px; touch-action: none; user-select: none; }
.rv-move-court svg { display: block; width: 100%; height: auto; }
.rv-move-court .rv-move-marker { fill: var(--brand); stroke: var(--on-brand, #fff); stroke-width: 0.25; cursor: grab; }
.rv-move-court.is-dragging .rv-move-marker { cursor: grabbing; }
.rv-move-court .rv-move-origin { fill: none; stroke: var(--ink-muted); stroke-width: 0.2; stroke-dasharray: 0.5 0.4; }
.rv-move-readout { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.rv-impact { margin: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--sunken); font-size: 13.5px; }
.rv-impact ul { margin: 4px 0 0; padding-left: 18px; }
.rv-impact.is-confirm { border-color: var(--warning, var(--brand)); }
.rv-impact.is-error { border-color: var(--danger); color: var(--ink); }
.rv-hint { color: var(--ink-muted); font-size: 12.5px; }

@media (max-width: 760px) {
  .rv-heading { font-size: 26px; }
  .rv-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .rv-disabled-note { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .rv-preview, .rv-dialog { animation: rv-in 120ms ease-out; }
}
@keyframes rv-in { from { opacity: 0; } to { opacity: 1; } }

.rv-root, .lv-root:has(> .rv-scrim) { position: relative; }
.rv-status { margin-right: 6px; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }