/* One source workspace. These rules stay within the media selection surfaces. */
#step1:has(#youtube-picker:not([hidden])) { display:block; }
#main:has(#youtube-picker:not([hidden])) > .intro { display:none; }
#step1:has(#youtube-picker:not([hidden])) > .source-guide { display:none; }
#step1:has(#youtube-picker:not([hidden])) > .import-copy { padding:0; }
#step1 .import-copy:has(> #youtube-picker:not([hidden])) > :not(#youtube-picker) { display:none; }
.moment-editor { --moment-range:#087d70; --moment-soft:#e5f3ed; display:block; overflow:hidden; }
#youtube-picker.moment-editor { margin:0; padding:0; border:0; border-radius:0; background:#fff; }
.moment-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:28px 32px; border-bottom:1px solid var(--line); }
.moment-heading h2,.moment-heading h3 { margin:8px 0 6px; font-size:28px; letter-spacing:-1px; color:var(--ink); }
.moment-heading > div { min-width:0; }
.moment-heading > button { flex-shrink:0; margin-top:8px; }
.moment-heading .youtube-source-title { font-size:14px; font-weight:400; color:var(--muted); }
.moment-heading .asset-heading { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:0; }
.moment-heading .asset-heading h3 { font-size:14px; letter-spacing:0; font-weight:500; margin:0; overflow-wrap:anywhere; }
.moment-heading .asset-heading p { margin:0; font-size:12px; }
.moment-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; padding:28px 32px; align-items:start; }
.moment-workspace,.moment-editor .trim-workspace { min-width:0; padding:0; background:transparent; }
.moment-editor .youtube-player,.moment-editor .trim-viewer { width:100%; height:auto; min-height:200px; aspect-ratio:16/9; max-height:360px; margin:0; border-radius:14px; background:#172426; overflow:hidden; }
.moment-editor .youtube-player iframe { display:block; width:100%; height:100%; min-height:200px; border:0; }
.moment-editor .trim-viewer video { display:block; width:100%; height:100%; max-height:360px; object-fit:contain; }
.moment-player-status { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; margin:8px 0 0; }
.moment-player-status p { flex:1 1 240px; margin:0; font-size:12px; }
.moment-player-status .text-button { font-size:12px; padding:8px 0; }
.moment-playback { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:16px 0 20px; }
.moment-playback > button { min-height:44px; padding:10px 14px; font-size:13px; }
.moment-playback > button:last-child { margin-left:auto; }
.moment-playback output,.moment-playback .trim-playback { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.moment-playback .trim-playback { gap:5px; }
.moment-mode { color:var(--muted); font-size:12px; }
.moment-selection,.moment-editor .trim-controls { padding:0 0 0 28px; border-left:1px solid var(--line); background:transparent; min-width:0; }
.moment-selection-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.moment-selection-heading h3,.moment-selection-heading h4 { margin:0; font-size:16px; letter-spacing:-.3px; }
.moment-history { display:flex; gap:2px; }
.moment-history button { font-size:17px; min-height:44px; padding:8px; }
.moment-history button span { font-size:11px; }
.moment-duration { display:block; font-size:23px; font-weight:650; letter-spacing:-.6px; color:var(--ink); margin:12px 0 6px; font-variant-numeric:tabular-nums; }
.moment-duration strong { font-size:32px; }
.moment-duration span { font-size:14px; font-weight:400; color:var(--muted); letter-spacing:0; }
.moment-selection > .fine { font-size:12px; line-height:1.6; }
.moment-selection .trim-limit { font-size:12px; color:var(--muted); }
.moment-time-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:20px; }
.moment-time-fields label { display:block; font-size:12px; color:var(--muted); min-width:0; }
.moment-time-fields input,.moment-jump input { display:block; width:100%; min-width:0; font:500 14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; padding:10px; min-height:44px; border:1px solid #bdcdc7; border-radius:9px; background:#fff; color:var(--ink); margin-top:6px; }
.moment-time-fields input[aria-invalid=true],.moment-jump input[aria-invalid=true] { border-color:#aa382c; background:#fff8f6; }
.moment-selection .moment-precision { font-size:11px; margin:7px 0 18px; }
.moment-input-error { font-size:12px; color:#9b2e22; line-height:1.5; margin:6px 0 16px; }
.moment-selection .duration-presets,.moment-editor .trim-controls .duration-presets { display:flex; gap:7px; margin:0 0 14px; }
.moment-selection .duration-presets button { flex:1; min-width:0; min-height:44px; padding:10px 4px; font-size:12px; }
.moment-selection .duration-presets button[aria-pressed=true] { background:var(--moment-soft); border-color:#6ea99a; color:#075a50; }
.moment-preview-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:46px; font-size:14px; margin-bottom:20px; }
.moment-preview-button svg { width:16px; height:16px; }
.moment-editor .trim-unlock-card { padding:14px; margin:0 0 16px; background:var(--soft); border-radius:12px; box-shadow:none; }
.moment-editor .trim-unlock-switch { font-size:13px; }
.moment-editor .trim-unlock-warning { font-size:11px; line-height:1.6; }
.moment-selection .action-stack { margin-top:16px; }
.moment-selection .action-stack > .fine { text-align:center; margin:8px 0 0; font-size:12px; }
.moment-selection .primary { min-height:48px; }
.moment-status { margin:0; padding:0 32px 24px; }
.moment-status:empty { display:none; }
.moment-timeline { border-top:1px solid var(--line); padding-top:12px; }
.moment-overview-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); min-height:44px; }
.moment-overview { height:44px; position:relative; border:1px solid #c7d5cf; border-radius:9px; background:repeating-linear-gradient(90deg,#f0f5f2 0,#f0f5f2 calc(10% - 1px),#dae5df calc(10% - 1px),#dae5df 10%); cursor:crosshair; touch-action:none; user-select:none; overflow:hidden; }
.moment-overview-selection { position:absolute; top:12px; height:18px; min-width:3px; background:#78baaa; border:1px solid #087d70; border-radius:2px; pointer-events:none; }
.moment-overview-viewport { position:absolute; top:4px; bottom:4px; min-width:10px; border:2px solid #506b62; border-radius:5px; background:#ffffff35; cursor:grab; }
.moment-overview-playhead { position:absolute; top:0; bottom:0; width:2px; background:#172426; pointer-events:none; }
.moment-zoom-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin:9px 0 22px; }
.moment-zoom-buttons { display:flex; gap:6px; align-items:center; }
.moment-zoom-buttons button { width:44px; height:44px; padding:8px; font-size:22px; line-height:1; }
.moment-zoom-buttons output { min-width:74px; text-align:center; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.moment-view-buttons { display:flex; gap:8px; }
.moment-view-buttons button { font-size:12px; min-height:44px; padding:8px 3px; }
.moment-editor .trim-filmstrip { margin:0; padding:0 24px; }
.moment-editor .trim-track { height:70px; border-radius:4px; background:repeating-linear-gradient(90deg,#d4e4dc 0,#d4e4dc calc(10% - 1px),#a0bbae calc(10% - 1px),#a0bbae 10%); }
.moment-editor .trim-track canvas { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.moment-editor .trim-shade { background:#17242665; }
.moment-editor .trim-selection { border-color:var(--moment-range); border-width:3px; background:#087d7012; }
.moment-editor .trim-handle { width:24px; background:var(--moment-range); color:white; font-size:16px; line-height:1; }
.moment-editor .trim-handle::before { inset:-8px -10px; }
.moment-editor .trim-playhead { background:#fff; box-shadow:0 0 0 1px #172426; z-index:5; }
.moment-editor .trim-playhead::before { display:none; }
.moment-scrub { position:absolute; top:-30px; left:var(--trim-playhead); width:44px; height:44px; transform:translateX(-50%); z-index:6; padding:0 0 12px; border:0; border-radius:6px; background:transparent; color:#172426; font-size:18px; cursor:ew-resize; touch-action:none; }
.moment-ruler { display:flex; justify-content:space-between; gap:10px; margin:10px 0 6px; font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted); }
.moment-pan { display:flex; align-items:center; gap:12px; margin-top:8px; font-size:11px; color:var(--muted); }
.moment-pan > span { flex-shrink:0; }
.moment-pan input { flex:1; min-width:0; margin:0; height:44px; accent-color:#087d70; }
.moment-timeline-help { font-size:12px; line-height:1.6; color:var(--muted); margin:6px 0 0; }
.moment-jump { position:relative; }
.moment-jump summary { cursor:pointer; min-height:44px; padding:12px 0; color:var(--accent); font-weight:500; }
.moment-jump > div { position:absolute; right:0; top:42px; z-index:10; width:260px; padding:16px; display:flex; gap:10px; align-items:flex-end; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 18px #173c251a; }
.moment-jump label { flex:1; min-width:0; font-size:12px; }
.moment-jump button { min-height:44px; }
.moment-editor :is(button,input,summary,[tabindex]):focus-visible { outline:3px solid #246ed8; outline-offset:3px; }
.moment-editor button:disabled { cursor:default; opacity:.48; }
@media(max-width:1000px) {
  .moment-grid { grid-template-columns:minmax(0,1fr) 290px; gap:24px; padding:24px; }
  .moment-selection,.moment-editor .trim-controls { padding-left:22px; }
  .moment-heading { padding:24px; }
  .moment-mode { order:4; flex-basis:100%; }
}
@media(max-width:760px) {
  .moment-grid { grid-template-columns:minmax(0,1fr); gap:26px; padding:20px; }
  .moment-heading { gap:12px; padding:20px; }
  .moment-heading h2,.moment-heading h3 { font-size:24px; }
  .moment-heading > button { font-size:12px; padding:10px 0; }
  .moment-selection,.moment-editor .trim-controls { padding:22px 0 0; border-left:0; border-top:1px solid var(--line); }
  .moment-time-fields { margin-top:16px; }
  .moment-history button span { font-size:12px; }
  .moment-duration { margin-top:8px; }
  .moment-selection .duration-presets button { font-size:14px; }
  .moment-playback { gap:8px; }
  .moment-playback .moment-mode { order:0; flex:1 1 auto; }
  .moment-playback > button { padding:10px; font-size:12px; }
  .moment-playback .trim-playback { font-size:11px; }
  .moment-editor .trim-track { height:64px; }
  .moment-zoom-toolbar { gap:2px; }
  .moment-view-buttons { gap:9px; }
  .moment-view-buttons button { font-size:11px; }
  .moment-zoom-buttons { gap:2px; }
  .moment-zoom-buttons output { min-width:65px; font-size:10px; }
  .moment-ruler { font-size:10px; }
  .moment-status { padding:0 20px 20px; }
  .moment-editor .trim-viewer,.moment-editor .youtube-player { border-radius:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .moment-editor * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}