/* Range selection and its command are one always-visible task, immediately
   above playback. These controls must never return to the sidebar. */
.studio-brand { display: flex; align-items: center; gap: 8px; padding: 3px 6px; min-width: 0; border: 0; border-radius: 6px; background: transparent; font-size: 16px; text-align: left; }
.studio-brand img, .video-brand img { flex: none; }
.studio-brand span { overflow-wrap: anywhere; }
.studio-brand .brand-about { flex: none; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.studio-brand:hover { background: #f0f3e9; }
.screen-ready .studio-heading { justify-content: flex-start; }
.screen-ready .stage .video-brand { display: flex; align-items: center; gap: 6px; left: 6px; bottom: 6px; padding: 4px 6px; max-width: calc(100% - 12px); color: #edf4e9; background: #17251fe6; font: 14px/1.25 'DM Sans',sans-serif; letter-spacing: 0; pointer-events: none; }
.screen-ready .stage .video-brand > span { overflow-wrap: anywhere; }
.screen-ready .stage .video-brand .clip-time { display: none; }
.studio #studioFooter { grid-column: 1 / -1; grid-row: 4; margin: 0; padding: 2px 12px; min-width: 0; justify-content: center; background: #f5f7f0; letter-spacing: 0; }
.studio #studioFooter .legal-links { justify-content: center; gap: 4px 20px; }
@media (min-width: 901px) {
  .screen-notice { flex-wrap: wrap; }
  .screen-notice > .analysis-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .studio .screen-notice #studioFooter { display: flex; flex: none; margin-left: auto; padding: 0; border: 0; background: transparent; }
  .studio .screen-notice #studioFooter .legal-links { flex-wrap: nowrap; gap: 12px; }
  .studio .screen-notice #studioFooter .legal-links a, .studio .screen-notice #studioFooter .legal-links button { font-size: 14px; min-height: 24px; line-height: 24px; }
}
@media (max-width: 900px) {
  .studio #studioFooter { grid-row: 5; }
}
@media (max-width: 600px) {
  .screen-ready .studio-heading .mode-switch { order: 0; }
  .screen-ready .studio-heading .workspace-help { order: 1; }
  .screen-ready .studio-heading .studio-brand { order: 2; width: 100%; font-size: 14px; min-height: 36px; padding: 2px 5px; }
  .studio-brand img { width: 24px; height: 24px; }
  .studio #studioFooter { padding: 8px 12px; }
  .studio #studioFooter .legal-links { gap: 4px 14px; justify-content: flex-start; }
}
.persistent-sidebar .screen-transport #panel-range { grid-column: 1 / -1; margin: 0 0 5px; border: 1px solid #bfcfaf; border-radius: 8px; padding: 6px 8px; background: #f3f7ed; }
.range-dock .section-heading { gap: 8px; margin: 0 !important; }
.range-dock .section-heading h2 { font-size: 16px; white-space: nowrap; }
.range-targets { display: flex; gap: 3px; }
.range-targets button { min-height: 30px; min-width: 30px; padding: 3px 6px; font-size: 14px; border: 1px solid #c2d0b6; background: #fff; border-radius: 5px; }
.range-targets button[aria-pressed=true] { background: #354f3d; color: #fff; border-color: #354f3d; }
.range-dock #rangeReset { margin-left: auto; padding: 3px 6px; min-height: 30px; font-size: 14px; border: 1px solid #c2d0b6; background: #fff; border-radius: 5px; }
.range-dock #rangeReset[aria-pressed=true] { background: #354f3d; border-color: #354f3d; color: #fff; }
/* One broad handle slides the complete analysis window. Exact boundaries stay
   available beside it, without requiring two tiny timeline targets. */
.range-dock .range-rail { inset: 10px 24px; }
.range-dock #rangeBand { border: 1px solid #93b46a; border-radius: 4px; }
.range-dock #rangeWindow { pointer-events: auto; cursor: ew-resize; }
.range-dock #rangeWindow::-webkit-slider-thumb { width: 48px; height: 40px; background: #354f3d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M3 12h18M7 8l-4 4 4 4m10-8 4 4-4 4'/%3E%3C/svg%3E") center / 24px no-repeat; }
.range-dock #rangeWindow::-moz-range-thumb { width: 48px; height: 40px; background: #354f3d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M3 12h18M7 8l-4 4 4 4m10-8 4 4-4 4'/%3E%3C/svg%3E") center / 24px no-repeat; }
.range-dock .screen-commands { margin: 0; gap: 4px; }
.range-dock #reviewContext { display: none; }
.range-dock .screen-commands #analyze, .range-dock #cancel { min-height: 32px; margin: 0; padding: 4px 10px; font-size: 16px; }
.persistent-sidebar .range-dock .analysis-range { display: grid; grid-template-columns: minmax(100px,1fr) auto; gap: 0 12px; margin: 0; padding: 0; border: 0; background: transparent; }
.range-dock .range-track { grid-column: 1; grid-row: 1; }
.persistent-sidebar .range-dock .range-limits { display: none; }
.persistent-sidebar .range-dock .range-boundaries { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 8px; }
.persistent-sidebar .range-dock .range-boundary { border: 0; background: transparent; padding: 0; gap: 4px; }
.persistent-sidebar .range-dock .range-boundary label { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.range-dock .range-boundary label > span { display: flex; align-items: center; gap: 2px; }
.persistent-sidebar .range-dock .range-boundary input { width: 69px; padding: 3px; min-height: 30px; }
.persistent-sidebar .range-dock .range-boundary > div { display: flex; gap: 3px; margin: 0; }
.persistent-sidebar .range-dock .range-boundary button { min-height: 30px; min-width: 28px; width: auto; padding: 3px; }
.persistent-sidebar .range-dock .range-footer { grid-column: 1; grid-row: 2; margin: -4px 0 0; padding: 0; }
.range-dock #rangeSummary { font-size: 14px; line-height: 1.2; }
.range-dock .range-error, .range-dock .analysis-range-summary { grid-column: 1 / -1; }
.range-dock .analysis-range-summary > :not(#analyzedRangeNote) { display: none; }
.persistent-sidebar .range-dock .analysis-range-summary { margin: 0; }
.persistent-sidebar .screen-video-settings { grid-template-columns: repeat(2,minmax(0,1fr)); }
.persistent-sidebar #panel-video { grid-column: 1 / -1; }
.persistent-sidebar #panel-video .screen-video-settings { grid-template-columns: minmax(0,1fr) auto auto; align-items: center; }
.persistent-sidebar #panel-video .screen-video-settings h3 { grid-column: 1; margin: 0; }
.persistent-sidebar #panel-video .screen-panel-help { margin-bottom: 6px; }
@media (min-width: 1180px) {
  .persistent-sidebar #panel-video { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px 12px; }
  .persistent-sidebar #panel-video .section-heading { margin: 0; }
  .persistent-sidebar #panel-video .screen-video-settings { grid-column: 2; grid-row: 1; }
  .persistent-sidebar #panel-video .screen-panel-help { grid-column: 1 / -1; grid-row: 2; margin: 0; }
}
.persistent-sidebar .drawing-history { margin-top: 6px; }
/* Fit is part of zoom, not a trip to the opposite side of the workspace. */
.persistent-sidebar .zoom-controls .zoom-fit { flex: none; }
@media (max-width: 1179px) {
  .persistent-sidebar .range-dock .analysis-range { grid-template-columns: minmax(0,1fr); }
  .range-dock .range-track { grid-column: 1; grid-row: 1; }
  .persistent-sidebar .range-dock .range-boundaries { grid-column: 1; grid-row: 2; justify-content: space-between; }
  .persistent-sidebar .range-dock .range-footer { grid-column: 1; grid-row: 3; margin: 4px 0 0; }
}
@media (max-width: 900px) {
  .studio.persistent-sidebar { grid-template-rows: auto max(280px,calc(100dvh - var(--review-chrome-height,300px))) auto auto; }
  .persistent-sidebar .screen-transport #panel-range { padding: 5px; }
}
@media (max-width: 600px) {
  .range-dock .section-heading { flex-wrap: wrap; gap: 4px; }
  .range-dock .section-heading h2 { font-size: 16px; }
  .range-dock .screen-commands { margin-left: auto; }
  .range-dock #rangeReset { margin-left: 0; min-height: 28px; padding: 2px 4px; }
  .range-dock .screen-commands #analyze, .range-dock #cancel { font-size: 16px; min-height: 30px; padding: 3px 5px; }
  .range-targets { gap: 2px; }
  .range-targets button { min-width: 25px; padding: 2px 3px; min-height: 28px; }
  .persistent-sidebar .range-dock .range-boundaries { gap: 6px; }
  .persistent-sidebar .range-dock .range-boundary { gap: 2px; flex: 1; min-width: 0; }
  .persistent-sidebar .range-dock .range-boundary label { gap: 2px; min-width: 0; }
  .range-dock .range-boundary label > span { font-size: 0; }
  .persistent-sidebar .range-dock .range-boundary input { width: 52px; min-height: 28px; font-size: 14px; padding: 2px; }
  .persistent-sidebar .range-dock .range-boundary > div { gap: 2px; }
  .persistent-sidebar .range-dock .range-boundary button { min-width: 24px; min-height: 28px; padding: 2px; font-size: 14px; }
  .persistent-sidebar .zoom-controls .zoom-label { grid-column: 1; }
  .persistent-sidebar .zoom-controls .zoom-value { grid-column: 2; justify-self: center; }
  .persistent-sidebar .zoom-controls .zoom-fit { grid-column: 3; grid-row: 1; padding: 0; min-width: 28px; font-size: 14px; min-height: 24px; }
}
@media (min-width: 601px) and (max-width: 900px) and (max-height: 500px) {
  .studio.persistent-sidebar { grid-template-rows: auto max(222px,calc(100dvh - var(--review-chrome-height,220px))) auto auto; }
  .persistent-sidebar .range-dock .analysis-range { grid-template-columns: minmax(100px,1fr) auto; }
  .persistent-sidebar .range-dock .range-boundaries { grid-column: 2; grid-row: 1 / 3; }
  .persistent-sidebar .range-dock .range-footer { grid-column: 1; grid-row: 2; margin: -6px 0 0; }
  .persistent-sidebar .screen-transport #panel-range { padding: 4px 6px; }
  .range-dock .screen-commands #analyze, .range-dock #cancel { min-height: 28px; }
}
/* The shared sync/play row is one group; the range sits immediately above it. */
.persistent-sidebar .screen-transport { display: block; }
@media (min-width: 1180px), (min-width: 760px) and (max-height: 500px) {
  .common-player { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0 12px; align-items: center; }
  .persistent-sidebar .common-player .comparison-bar { grid-column: 1; grid-row: 1; padding: 0; min-height: 40px; }
  .common-player .transport-row { grid-column: 2; grid-row: 1; margin: 0; }
  .common-player .timeline-row { grid-column: 1 / -1; grid-row: 2; }
  .common-player .comparison-bar #syncHint, .common-player .shortcut-hint { display: none; }
  .common-player:has(#comparisonBar[hidden]) .transport-row { grid-column: 1 / -1; }
  .common-player #restart { margin-left: auto; }
}
@media (max-width: 600px) {
  .persistent-sidebar .range-dock .range-footer { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 0; }
  .range-dock #rangeReset { order: 0; }
  .studio.persistent-sidebar { grid-template-rows: auto max(374px,calc(100dvh - var(--review-chrome-height,300px))) auto auto; }
  .persistent-sidebar .zoom-controls .zoom-label { letter-spacing: -.6px; font-size: 14px; }
}
/* Paired thumbnails share a row, leaving height for the actual players. */
@media (min-width: 901px) {
  .is-compare .key-moment-strip { padding: 5px; }
  .is-compare .key-moment-strip header { margin-bottom: 4px; }
  .is-compare .key-card.paired .key-card-frames { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .is-compare .key-card-title { min-height: 32px; padding: 2px; }
  .is-compare .key-card.paired .key-frame-image { height: clamp(64px,8dvh,112px); }
  .is-compare .key-frame-time { display: none; }
}
/* A full-width review dock makes room for the players on laptop screens.
   Sync, play and the shared timeline remain one contiguous control group. */
@media (min-width: 901px) and (max-width: 1600px) {
  .persistent-sidebar .screen-transport { grid-column: 1 / -1; }
  .persistent-sidebar .analysis-panel { grid-row: 2; }
  .common-player { display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 0 12px; align-items: center; }
  .persistent-sidebar .common-player .comparison-bar { grid-column: 1; grid-row: 1; padding: 0; min-height: 40px; }
  .common-player .transport-row { grid-column: 2; grid-row: 1; margin: 0; }
  .common-player .timeline-row { grid-column: 3; grid-row: 1; }
  .common-player .comparison-bar #syncHint, .common-player .shortcut-hint { display: none; }
  .common-player:has(#comparisonBar[hidden]) { grid-template-columns: auto minmax(0,1fr); }
  .common-player:has(#comparisonBar[hidden]) .transport-row { grid-column: 1; }
  .common-player:has(#comparisonBar[hidden]) .timeline-row { grid-column: 2; }
  .persistent-sidebar .video-top { min-height: 38px; padding-block: 2px; }
  .persistent-sidebar .clip-transport { padding-block: 3px; }
  .persistent-sidebar .clip-timeline-row .clip-restart { min-height: 28px; }
  .persistent-sidebar .clip-speed { min-height: 36px; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .is-compare .key-strip-note { display: none; }
}
@media (min-width: 1180px) {
  .persistent-sidebar .screen-transport #panel-range { display: grid; grid-template-columns: auto minmax(0,1fr) auto; column-gap: 12px; align-items: center; }
  .range-dock .section-heading { display: contents; }
  .range-dock .section-heading h2 { grid-column: 1; grid-row: 1; }
  .range-dock .range-targets { grid-column: 1; grid-row: 2; }
  .range-dock .screen-commands { grid-column: 3; grid-row: 1 / 3; }
  .persistent-sidebar .range-dock .analysis-range { grid-column: 2; grid-row: 1 / 3; }
  .persistent-sidebar .range-dock .range-footer { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
  .range-dock #rangeReset { min-height: 24px; padding: 1px 5px; }
  .range-dock .analysis-range-summary { grid-row: 3; }
  .screen-ready #viewResults { min-height: 28px; }
}
/* Added branding must not flatten the players or clip the drawing rail on a
   phone. Small screens keep their controls reachable in the normal flow. */
@media (max-width: 600px) {
  .studio.persistent-sidebar { grid-template-rows: auto max(490px,calc(100dvh - var(--review-chrome-height,300px))) auto auto auto; }
}
@media (min-width: 601px) and (max-width: 900px) and (max-height: 500px) {
  .studio.persistent-sidebar { grid-template-rows: auto max(252px,calc(100dvh - var(--review-chrome-height,220px))) auto auto auto; }
}