#video-study-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; transform-origin:center; }
#video-study-overlay[hidden], #video-study[hidden] { display:none !important; }
#view-replay.active:has(#video-study:not([hidden])) { grid-template-rows:1fr auto auto auto; }
#clip-orientation { flex-wrap:wrap; }
#clip-wireframe.active, #clip-study.active { background:#276651; color:#fff; border-color:#7ce3be; }
#video-study { box-sizing:border-box; margin:14px; padding:22px; min-width:0; background:#111c28; color:#e9f1f6; border:1px solid #415565; border-radius:12px; font:14px/1.5 system-ui,sans-serif; }
#video-study header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
#video-study h2 { margin:2px 0 0; font-size:24px; letter-spacing:-.5px; }
#video-study header small { font-size:10px; letter-spacing:1.4px; color:#91d8c0; }
#video-study .study-state { padding:6px 12px; border:1px solid #597c75; border-radius:20px; color:#b7edda; }
#video-study .study-intro { color:#afbfce; margin:12px 0; }
#video-study .study-sync { padding:10px 12px; background:#25313e; border-left:3px solid #dcb26f; color:#ecd9b7; font-size:12px; }
#video-study .study-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0; }
#video-study .study-facts > div { padding:12px; background:#1a2b39; border-radius:6px; min-width:0; }
#video-study .study-facts small { display:block; color:#adc1d0; font-size:11px; margin-bottom:4px; }
#video-study .study-facts strong { display:block; font-size:15px; font-weight:600; }
#video-study .study-turns { display:flex; overflow:auto; gap:6px; padding:4px 0 12px; max-width:100%; }
#video-study button, #video-study select, #video-study input, #video-study textarea { font:inherit; color:#e9f1f6; border:1px solid #4f6578; border-radius:5px; background:#172733; padding:7px 9px; }
#video-study button { cursor:pointer; }
#video-study button:hover, #video-study button.active { border-color:#81e8c2; background:#294c45; }
#video-study button:disabled { opacity:.45; cursor:default; }
#video-study button:focus-visible, #video-study select:focus-visible, #video-study input:focus-visible, #video-study textarea:focus-visible { outline:2px solid #9bdfc9; outline-offset:2px; }
#video-study .study-turns button { flex:0 0 auto; font-size:12px; }
#video-study .study-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#video-study .study-charts > div { min-width:0; }
#video-study h3 { margin:10px 0; font-size:14px; }
#video-study h3 span { font-size:11px; color:#9fb4c5; font-weight:400; margin-left:8px; }
#video-study .study-charts canvas { width:100%; height:150px; display:block; }
#video-study .study-charts p { font-size:11px; color:#aac1d1; min-height:32px; margin:6px 0; }
#video-study .study-controls, #video-study .study-actions { display:flex; align-items:end; flex-wrap:wrap; gap:10px; margin:12px 0; }
#video-study label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:#b5c5d2; }
#video-study select { max-width:245px; font-size:12px; }
#video-study .study-controls input[type=number] { width:84px; font-size:12px; }
#video-study .study-loop-label { flex-direction:row; align-items:center; padding:8px; }
#video-study .study-limits { color:#b7c7d5; font-size:12px; }
#video-study details { padding:12px 0; border-top:1px solid #3a4c5b; font-size:12px; }
#video-study summary { cursor:pointer; color:#b8e6d8; }
#video-study pre { max-height:280px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
#video-study .study-notes { border-top:1px solid #3a4c5b; padding-top:14px; }
#video-study textarea { box-sizing:border-box; width:100%; resize:vertical; font-size:13px; }
#video-study .study-message { color:#bcdfce; font-size:12px; }
#video-study .study-saved-notes { padding-left:20px; font-size:13px; }
@media(max-width:720px) {
  #video-study { margin:8px; padding:14px; }
  #video-study .study-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #video-study .study-charts { grid-template-columns:1fr; gap:0; }
  #video-study .study-controls label { flex:1 1 110px; }
  #video-study select { width:100%; max-width:100%; }
}
/* Keep the evidence visible while reading the study below the transport. */
@media(min-width:1000px) and (min-height:700px) {
  #view-replay.studying #main { position:sticky; top:0; z-index:12; background:#101923; }
}
#clip-orientation #clip-wireframe.active, #clip-orientation #clip-study.active { background:#215447; color:#ddfff1; border-color:#87ddbd; }