/* A single editing surface for drawing, tracked rings and freeze timing. */
body[data-workspace=annotate] { overflow:auto; }
body[data-workspace=annotate] .app-shell { height:auto; min-height:100vh; grid-template-rows:auto 1fr; overflow:visible; }
body[data-workspace=annotate] .workspace { overflow:visible; }
body[data-workspace=annotate] .topbar { height:auto; min-height:66px; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; padding:12px 20px; }
body[data-workspace=annotate] .topbar .tabs { min-width:0; width:auto; }
body[data-workspace=annotate] .topbar .tab { min-width:0; padding:10px 12px; }
body[data-workspace=annotate] .topbar-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
#annotateView.active { display:grid; grid-template-columns:minmax(0,1fr) 290px; grid-template-rows:auto auto; height:auto; min-height:0; padding:16px 20px; gap:16px; overflow:visible; }
#annotateView .annotate-workbar { grid-column:1/-1; grid-row:1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; min-width:0; }
#annotateView .annotate-workbar h2 { font-size:20px; margin:0; }
#annotateView #annotateClipName { margin:4px 0; color:#b4c1cf; font-size:14px; overflow-wrap:anywhere; }
#annotateView .annotate-workbar-actions { display:flex; flex-wrap:wrap; gap:8px; }
#annotateView .panel-button, #annotateView .primary-button, #annotateView .mini-button { width:auto; min-height:34px; padding:7px 10px; margin:0; border-radius:6px; font-size:14px; box-shadow:none; }
#annotateView.active .stage-column { position:static; inset:auto; transform:none; grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:10px; width:100%; min-width:0; max-width:none; height:auto; padding:0; overflow:visible; }
#annotateView.active .video-shell { order:2; width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:16/9; padding:0; border:1px solid #2c3945; border-radius:8px; background:#030609; }
#annotateView.active #annotateStage { width:100%; height:100%; min-height:0; aspect-ratio:16/9; position:relative; overflow:hidden; }
#annotateStage video, #annotateStage canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
#annotateView.active .premium-tool-dock { order:0; position:static; inset:auto; transform:none; width:100%; max-width:none; padding:0; border:0; background:none; box-shadow:none; display:block; border-radius:0; }
#annotateView.active .premium-tool-dock h2 { display:none; }
#annotateView.active #toolGrid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:auto; gap:6px; overflow:visible; padding:0; }
#annotateView.active .premium-tool-dock .tool-button { width:100%; min-width:0; height:auto; min-height:54px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:7px 3px; color:#c6d1dc; background:#14202b; border:1px solid #354351; border-radius:6px; box-shadow:none; }
#annotateView.active .premium-tool-dock .tool-button::before { font-size:20px; width:auto; height:auto; line-height:1; }
#annotateView.active .premium-tool-dock .tool-button span { display:block; font-size:12px; position:static; opacity:1; width:auto; }
#annotateView.active .premium-tool-dock .tool-button::after { display:none; }
#annotateView.active .premium-tool-dock .tool-button.active { color:#c9f5df; background:#254437; border-color:#8ddbb6; }
#annotateView .annotate-hint { order:1; color:#a9d8c1; font-size:14px; min-height:22px; line-height:1.5; }
#annotateView .transport { order:3; display:grid; grid-template-columns:34px 40px 34px minmax(40px,1fr) 72px 90px; gap:8px; width:100%; min-height:0; padding:4px 0; border:0; background:none; border-radius:0; box-shadow:none; }
#annotateView .transport button { width:100%; height:36px; min-width:0; min-height:36px; border-radius:6px; }
#annotateView .transport input, #annotateView .transport select, #annotateView .transport output { grid-column:auto; min-width:0; width:100%; }
#annotateView .transport output { font-size:12px; }
#annotateView.active .studio-timeline { order:4; padding:12px; border:1px solid #2c3945; border-radius:8px; background:#101923; width:100%; }
#annotateView .studio-timeline-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
#annotateView .studio-timeline-head span { font-size:12px; }
#annotateView #annotationTimeline { height:auto; min-height:110px; max-height:340px; overflow:auto; margin-top:10px; border-radius:5px; }
#annotateView .timeline-lane { min-height:38px; }
#annotateView .timeline-block { min-height:25px; font-size:11px; }
#annotateView .annotate-freezes { order:5; }
#annotateView .annotate-freezes .panel-section { padding:12px; border:1px solid #2c3945; border-radius:8px; background:#101923; }
#annotateView #pauseList { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; max-height:260px; overflow:auto; margin-top:10px; }
#annotateView .pause-item { padding:10px; border-radius:5px; }
#annotateView .pause-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#annotateView .pause-fields label { display:grid; gap:4px; font-size:12px; }
#annotateView .pause-actions { display:flex; gap:6px; }
#annotateView.active #annotateInspectorPanel { position:static; inset:auto; transform:none; grid-column:2; grid-row:2; align-self:start; width:100%; height:auto; min-width:0; max-height:none; padding:12px; overflow:visible; background:#0e161f; border:1px solid #2c3945; border-radius:8px; }
#annotateView .inspector-tabs { display:flex; gap:6px; margin-bottom:12px; }
#annotateView .inspector-tabs button { flex:1; min-height:36px; border:1px solid #354351; color:#c5d2df; background:#15222c; border-radius:6px; }
#annotateView .inspector-tabs button[aria-pressed=true] { color:#c9f5df; background:#254437; border-color:#8ddbb6; }
#annotateView .panel-section { padding:10px 0; margin:0; border:0; border-radius:0; background:none; box-shadow:none; }
#annotateView .panel-section h2 { margin:0 0 10px; font-size:14px; text-transform:none; letter-spacing:0; }
#annotateView .panel-section h2::after { display:none; }
#annotateView .annotation-properties, #annotateView .tracked-ring-properties { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
#annotateView .annotation-properties label, #annotateView .tracked-ring-properties label { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; font-size:14px; }
#annotateView .annotation-properties .toggle-row, #annotateView .inline-check { display:flex; }
#annotateView input:not([type=checkbox]):not([type=range]), #annotateView select, #annotateView textarea { min-width:0; width:100%; padding:7px 9px; border-radius:5px; background:#17232f; color:#edf3fa; border:1px solid #3b4958; font-size:14px; }
#annotateView input[type=color] { height:36px; }
#annotateView .button-row, #annotateView .correction-navigation { display:flex; flex-wrap:wrap; gap:6px; }
#annotateView .empty-copy, #annotateView .status { color:#afbdcb; font-size:13px; line-height:1.5; }
#annotateView .annotate-details { padding:12px 0; border-top:1px solid #2c3945; }
#annotateView summary { cursor:pointer; font-size:14px; }
#annotateView .annotation-item, #annotateView .tracked-ring-item { border-radius:5px; padding:8px; }
#annotateView .annotate-empty { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; padding:24px; text-align:center; background:#060b12; }
#annotateView .annotate-empty strong { font-size:22px; }
#annotateView .annotate-empty span { font-size:14px; color:#b5c4d2; max-width:420px; }
#annotateView.annotate-focus { grid-template-columns:minmax(0,1fr); }
#annotateView.annotate-focus #annotateInspectorPanel { display:none; }
#annotateExportDialog { width:min(640px,calc(100vw - 32px)); max-height:88vh; padding:20px; background:#101923; color:#edf3fa; border:1px solid #425060; border-radius:10px; }
#annotateExportDialog::backdrop { background:rgb(0 0 0 / 65%); }
#annotateExportDialog > header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
#annotateExportDialog > header h2 { font-size:20px; }
#annotateWorkflowPanel { position:static; width:100%; height:auto; }
#annotateView :focus-visible { outline:2px solid #9ee9c6; outline-offset:3px; }
@media(max-width:1100px) { body[data-workspace=annotate] .topbar { display:flex; flex-wrap:wrap; } body[data-workspace=annotate] .tabs { flex:1 1 360px; } #annotateView.active { padding:12px; gap:12px; grid-template-columns:minmax(0,1fr) 250px; } #annotateView.active #toolGrid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:760px) { #annotateView.active { grid-template-columns:minmax(0,1fr); } #annotateView.active #annotateInspectorPanel { grid-column:1; grid-row:3; } body[data-workspace=annotate] .topbar .tabs { display:flex; flex-basis:100%; order:3; } body[data-workspace=annotate] .topbar .tab { flex:1; white-space:normal; padding:8px; } #annotateView .transport { grid-template-columns:32px 36px 32px minmax(40px,1fr) 64px; } #annotateView .transport output { grid-column:1/-1; text-align:right; } }
/* Supersede the earlier fixed three-column tablet layout. */
#annotateView.active { grid-template-columns:minmax(0,1fr) 290px !important; }
#annotateView.active.annotate-focus { grid-template-columns:minmax(0,1fr) !important; }
#annotateView.active.annotate-focus #annotateInspectorPanel { display:none !important; }
#annotateView .timeline-keyframe-dot { width:12px; height:12px; min-height:12px; padding:0; cursor:pointer; z-index:3; }
#annotateView .timeline-keyframe-dot:focus-visible { outline-offset:3px; }
#annotateView.active .annotation-panel input[type=checkbox] { width:18px; height:18px; }
@media(max-width:1100px) { #annotateView.active { grid-template-columns:minmax(0,1fr) 250px !important; } }
@media(max-width:760px) { #annotateView.active { grid-template-columns:minmax(0,1fr) !important; } }
#annotateView.active .premium-tool-dock .tool-button span { height:auto; clip:auto; clip-path:none; overflow:visible; white-space:normal; line-height:1.25; }
#annotateView.active .studio-timeline { grid-template-rows:auto auto auto; overflow:visible; }
#annotateView .timeline-explanation { margin:0; font-size:12px; color:#aebdcc; line-height:1.4; }
/* Retire offsets and sizing from the former floating drawer layout. */
#annotateView.active .video-shell { margin:0 !important; inset:auto !important; max-width:100%; flex:none; }
#annotateView.active #annotateStage { height:auto; margin:0; }
#annotateView.active .premium-tool-dock { z-index:auto; margin:0; }
#annotateView.active .premium-tool-dock .tool-button { max-width:none; min-width:0; width:100%; height:60px; flex:none; }
#annotateView.active .premium-tool-dock .tool-button span { white-space:nowrap; font-weight:500; letter-spacing:0; }
#annotateView.active .premium-tool-dock .tool-button::before { margin:0; }
#annotateView.active #annotateInspectorPanel .panel-section { padding:12px 0 !important; margin:0 !important; gap:10px; border:0; border-radius:0; background:transparent; overflow:visible !important; }
#annotateView.active #annotateInspectorPanel { overflow:visible !important; max-height:none !important; }
#annotateView .annotate-workbar-actions .toggle-row { margin:0; padding:0 6px; gap:6px; }
#annotateView .annotate-workbar-actions input[type=checkbox] { width:16px; height:16px; }
#annotateView.active .stage-column { align-self:start; }
#annotateView .annotate-empty { padding:16px; }
#annotateView .annotate-empty strong { font-size:18px; }
@media(max-width:760px) {
 body[data-workspace=annotate] .topbar { position:static; padding:10px 12px; gap:10px; }
 body[data-workspace=annotate] .brand { flex:1 1 100%; }
 body[data-workspace=annotate] .brand p { display:none; }
 body[data-workspace=annotate] .topbar-actions { display:flex; flex-wrap:wrap; width:100%; gap:6px; }
 body[data-workspace=annotate] .topbar-actions .ghost-button { width:auto; min-width:0; flex:1 1 auto; min-height:30px; padding:5px 8px; font-size:11px; }
 body[data-workspace=annotate] .topbar .tabs { margin:0; }
 body[data-workspace=annotate] .topbar .tab { font-size:11px; }
 #annotateView .annotate-workbar-actions { gap:6px; }
 #annotateView .annotate-workbar-actions button { font-size:12px; }
 #annotateView.active .premium-tool-dock .tool-button { height:54px; }
 #annotateView.active #toolGrid { gap:5px; }
 #annotateView.active #annotateInspectorPanel { padding:12px; }
 #annotateView .annotate-empty span { display:none; }
}
#annotateView.active .premium-tool-dock .tool-button::before { display:none; }
#annotateView .tool-button svg { width:22px; height:22px; flex:none; }
#annotateView.active .panel-section h2 { font-size:13px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; }
#annotateView .telestration-swatches { gap:8px; }
#annotateView .telestration-swatches button { max-width:32px; height:26px; min-height:26px; border-radius:5px; }
#annotateView .transport { border-radius:0 !important; margin:0; }
#annotateView .precision-bar { order:3; display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#aebdcc; font-size:12px; }
#annotateView .precision-bar label {display:flex;align-items:center;gap:6px;margin:0;}
#annotateView .precision-bar select {width:90px;}
#annotateView .precision-bar span {flex:1;text-align:right;}
#annotateView .freeze-quick-edit {order:4;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;border:1px solid #75b895;border-radius:8px;background:#172b25;}
#annotateView .freeze-quick-edit label {display:flex;align-items:center;gap:6px;font-size:12px;}
#annotateView .freeze-quick-edit input {width:78px;}
#annotateView .timeline-lane {grid-template-columns:110px minmax(0,1fr);min-height:40px;}
#annotateView .timeline-ruler {margin-left:110px;height:26px;position:relative;cursor:crosshair;}
#annotateView .timeline-ruler span:first-child {translate:0 0;}
#annotateView .timeline-ruler span:last-child {translate:-100% 0;}
#annotateView .timeline-playhead {left:calc(110px + ((100% - 110px) * var(--playhead,0) / 100));top:26px;}
#annotateView .timeline-block {top:7px;max-width:100%;font-weight:500;border-radius:4px;}
#annotateView .pause-block {min-width:26px;max-width:110px;cursor:ew-resize;overflow:hidden;white-space:nowrap;}
#annotateView .annotation-block {max-width:120px;overflow:hidden;white-space:nowrap;}
#annotateView .timeline-lane.active {background:#21382f;}
#annotateView .timeline-trim {position:absolute;top:5px;width:10px;height:30px;padding:0;min-height:0;background:#e2ffef;border:2px solid #37594a;border-radius:3px;z-index:4;transform:translateX(-50%);cursor:ew-resize;}
#annotateView .timeline-keyframe-dot {top:15px;z-index:5;}
#annotateView .timeline-keyframe-dot.selected {background:#fff;border:2px solid #32b879;box-shadow:0 0 0 2px #193f2c;}
#annotateView #annotationTimeline {padding:0 6px;position:relative;}
#analysisReviewDialog {width:min(1100px,95vw);max-height:95vh;overflow:auto;background:#0e161f;color:#edf3fa;border:1px solid #435347;border-radius:12px;padding:18px;}
#analysisReviewDialog::backdrop {background:#000c;}
#analysisReviewDialog header {display:flex;justify-content:space-between;align-items:center;gap:12px;}
#analysisReviewDialog h2 {font-size:18px;}
#analysisReviewCanvas {display:block;width:100%;max-height:70vh;object-fit:contain;background:#000;}
#annotateView #annotateExportDialog .button-row {margin-bottom:14px;}
@media(max-width:600px) {#annotateView .timeline-lane {grid-template-columns:76px minmax(0,1fr);}#annotateView .timeline-ruler {margin-left:76px;}#annotateView .timeline-playhead {left:calc(76px + ((100% - 76px) * var(--playhead,0) / 100));}#annotateView .timeline-ruler span:nth-child(even) {display:none;}#annotateView .precision-bar span {text-align:left;flex-basis:100%;}}
#annotateView .tracking-steps {margin:0 0 12px;padding-left:20px;color:#bad4c6;font-size:13px;line-height:1.7;}
#annotateView .correction-heading {font-size:14px;margin:12px 0 0;}
#annotateView .tracking-corrections {display:grid;gap:6px;max-height:240px;overflow:auto;}
#annotateView .tracking-correction {display:grid;grid-template-columns:minmax(0,1fr) 64px auto 28px;gap:4px;align-items:center;padding:6px;border:1px solid #354351;border-radius:6px;}
#annotateView .tracking-correction.active {border-color:#9ee9c6;background:#21382f;}
#annotateView .tracking-correction .panel-button {font-size:11px;padding:5px;min-width:0;overflow:hidden;white-space:nowrap;}
#annotateView .tracking-correction input {padding:5px;font-size:12px;}
#annotateView .assist-panel {padding:12px;border:1px solid #65754c;border-radius:8px;background:#20291b;margin-bottom:16px;display:grid;gap:8px;}
#annotateView .assist-panel h3 {font-size:14px;margin:0;}
#annotateView .assist-panel small {color:#e1ce8b;font-size:10px;margin-left:6px;}
#annotateView .assist-panel p {font-size:12px;line-height:1.5;margin:0;color:#c6d2bc;}
#annotateView .assist-panel label {display:flex;gap:8px;align-items:center;font-size:12px;}
#annotateView .assist-panel select {width:110px;}
#assistProgressDialog {background:#101923;color:#edf3fa;border:1px solid #688174;border-radius:10px;padding:24px;max-width:90vw;}
#assistProgressDialog::backdrop {background:#000b;}

#assistBoxPreview { width:72px;height:96px;object-fit:contain;border:1px solid #f4cf72;background:#07100a;border-radius:5px; }

#annotateView .assist-help {border-top:1px solid #46513a;padding-top:8px;}
#annotateView .assist-help summary {font-size:12px;color:#d5dfca;}
#annotateView .assist-help p {margin-top:8px;}
/* Tracking: everyday actions first, detailed editing on demand. */
.tracking-quick-actions { display:grid; gap:10px; padding:14px; border:1px solid #9ee9c630; border-radius:12px; background:#9ee9c608; }
.tracking-quick-actions p { margin:0; line-height:1.5; }
.tracking-quick-actions button { width:100%; min-height:40px; white-space:normal; }
#trackingRangeSummary { color:#9ee9c6; }
.tracking-advanced { margin-top:12px; border-top:1px solid #ffffff18; padding-top:12px; }
.tracking-advanced summary { cursor:pointer; padding:8px 0; font-weight:600; color:#bdccc9; }
.tracking-advanced[open]>label,.tracking-advanced[open]>.button-row { margin-top:12px; }
#trackingInspector .tracked-ring-properties { gap:12px; }

/* Keep playlist progression alongside the annotation workspace. */
#annotateView .annotation-sequence { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:14px 16px; margin:0 0 16px; border:1px solid #ffffff20; border-radius:12px; background:#101923; }
#annotateView .annotation-sequence label { display:grid; gap:5px; color:#b5c6cd; font-size:12px; min-width:0; }
#annotateView .annotation-sequence>label { flex:1 1 180px; }
#annotateView .annotation-sequence-step { display:flex; align-items:end; gap:10px; flex:3 1 380px; min-width:0; }
#annotateView .annotation-sequence-step label { flex:1; }
#annotateView .annotation-sequence select { width:100%; min-width:0; min-height:40px; text-overflow:ellipsis; }
#annotateView .annotation-sequence button { min-height:40px; white-space:nowrap; }
#annotateView .annotation-sequence p { flex-basis:100%; margin:0; font-size:12px; color:#a6bac4; }
@media(max-width:600px) { #annotateView .annotation-sequence-step { flex-basis:100%; flex-wrap:wrap; } #annotateView .annotation-sequence-step label { order:-1; flex-basis:100%; } #annotateView .annotation-sequence-step button { flex:1; } }
#annotateView.active .annotation-sequence { grid-column:1/-1; grid-row:2; margin-bottom:0; }
#annotateView.active .stage-column { grid-row:3; }
#annotateView.active #annotateInspectorPanel { grid-row:3; }
@media(max-width:760px) { #annotateView.active #annotateInspectorPanel { grid-row:4; } }