/* Keep video selection beside its heading, ahead of the preview and trim tools. */
.dialog .video-upload-fieldset .video-upload-controls { clear:both; width:100%; min-width:0; margin:0; gap:8px; }
.dialog .video-upload-controls .media-upload-button { min-width:0; max-width:100%; overflow:hidden; }
.dialog .video-upload-controls .media-upload-button .icon { flex-shrink:0; }
.dialog .video-upload-controls input[type=file] { inset:0 auto auto 0; width:1px; height:1px; min-width:0; min-height:0; margin:0; padding:0; border:0; }
.dialog .video-upload-fieldset>.field-help { margin:8px 0 12px; }
.dialog .video-upload-fieldset>.short-video-preview { display:block; margin:12px 0; }
.dialog .video-upload-fieldset>.short-video-preview[hidden] { display:none; }
#create-dialog .video-upload-fieldset legend { float:none; width:auto; }
#create-dialog .video-upload-fieldset #plan-video-help { margin:8px 0 12px; }
@media(max-width:600px) {
  .dialog .video-upload-fieldset .video-upload-controls { flex-direction:column; align-items:stretch; }
  .dialog .video-upload-controls label.media-upload-button { width:100%; min-height:48px; }
  .dialog .video-upload-controls .photo-remove-button { width:100%; min-height:44px; text-align:center; }
}

/* The visible ten-second window stays large enough to drag on a phone. */
.video-trim-editor { padding:13px; }
.video-trim-heading { margin-bottom:12px; }
.video-trim-heading>span { font-variant-numeric:tabular-nums; font-size:12px; }
.video-trim-track { position:relative; height:76px; width:100%; border-radius:9px; overflow:hidden; background:repeating-linear-gradient(90deg,#3b493f 0,#3b493f calc(16.666% - 1px),#627364 calc(16.666% - 1px),#627364 16.666%); cursor:grab; touch-action:none; user-select:none; isolation:isolate; }
.video-trim-track.is-dragging { cursor:grabbing; }
.video-trim-track[aria-disabled=true] { cursor:default; opacity:.65; }
.video-trim-track:focus-visible { outline:3px solid var(--forest); outline-offset:3px; }
.video-trim-track canvas { display:block; width:100%; height:100%; opacity:0; pointer-events:none; }
.video-trim-track.has-frames canvas { opacity:1; }
.video-trim-shade { position:absolute; top:0; bottom:0; background:rgba(6,14,9,.62); pointer-events:none; }
.video-trim-shade-before { left:0; }
.video-trim-shade-after { right:0; }
.video-trim-window { position:absolute; top:0; height:100%; box-sizing:border-box; border:3px solid #e8f69d; border-radius:8px; pointer-events:none; box-shadow:0 0 0 1px rgba(12,22,13,.3); }
.video-trim-handle { position:absolute; top:-3px; bottom:-3px; width:44px; display:flex; align-items:center; }
.video-trim-handle-start { left:-3px; justify-content:flex-start; }
.video-trim-handle-end { right:-3px; justify-content:flex-end; }
.video-trim-handle::before { content:""; width:9px; height:34px; border-radius:3px; background:#e8f69d; box-shadow:0 1px 3px #20332755; }
.video-trim-handle::after { content:""; position:absolute; width:2px; height:16px; border-radius:2px; background:#4f6134; }
.video-trim-handle-start::after { left:3px; }
.video-trim-handle-end::after { right:3px; }
.video-trim-duration { position:absolute; left:50%; bottom:5px; transform:translateX(-50%); padding:2px 6px; border-radius:5px; color:#fff; background:#1d2e24d9; font-size:10px; line-height:1.3; font-weight:650; }
.video-trim-axis { display:flex; justify-content:space-between; margin-top:5px; font-size:10px; color:#697763; font-variant-numeric:tabular-nums; }
.dialog .video-trim-editor label { display:flex; gap:0; margin:10px 0 1px; font-size:11px; }
.dialog .video-trim-editor input[type=range] { min-height:44px; margin:0; touch-action:pan-y; }
.video-trim-frame-status { margin:0; font-size:11px; color:#6b7964; }
.video-trim-frame-status:empty { display:none; }
.video-trim-footer { margin-top:5px; }
.video-trim-footer .button { min-height:44px; }
@media(max-width:600px) {
  .video-trim-editor { padding:10px; }
  .video-trim-heading { margin-bottom:10px; gap:5px; }
  .video-trim-heading strong { font-size:12px; }
  .video-trim-heading>span { font-size:11px; }
  .video-trim-footer { gap:7px; }
  .video-trim-footer .field-help { font-size:11px; }
}
