/* Phase 3 editor shell: breadcrumb header, left panel with Estilo/Texto, 9:16 stage, timeline with an action bar.
   Loaded after the older editor stylesheets; IDs raise specificity over their column-based rules. */

/* Header: Início / projeto / vídeo, then save status, undo/redo and export. */
#editor.deepcut .project-heading{display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 14px}
.editor-crumbs{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:13px;color:var(--muted)}
.editor-crumbs>span{flex-shrink:0;color:var(--color-control-border)}
#editor-home{color:var(--color-action-text);text-decoration:none;flex-shrink:0}
#editor-home:hover{text-decoration:underline}
#editor.deepcut .editor-crumbs #editor-group-link{font-size:13px;max-width:220px}
#editor.deepcut .editor-crumbs h1{margin:0;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}
#editor.deepcut .heading-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
#editor.deepcut #saved-label{display:inline;font-size:12px;max-width:220px}
#deepcut-history-host .edit-history-controls{display:flex;align-items:center;gap:4px;margin:0;padding:0;border:0;background:none;position:static}
#deepcut-history-host .edit-history-buttons{display:flex;gap:4px}
#editor.deepcut #deepcut-history-host #timeline-history-controls [data-edit-history]{width:auto;min-width:34px;min-height:34px;padding:4px 8px;font-size:0}
#deepcut-history-host [data-edit-history] .edit-history-name>span{font-size:18px}
#deepcut-history-host :is(kbd,small,.edit-history-help){display:none}
#deepcut-more>summary{cursor:pointer;padding:5px 9px;font-size:22px;list-style:none}
#deepcut-more>summary::-webkit-details-marker{display:none}

/* Left panel with two tabs, then the stage. */
#editor.deepcut #deepcut-upper,#editor.deepcut.is-transcript-open #deepcut-upper{grid-template-columns:clamp(320px,25vw,390px) minmax(0,1fr)}
#editor.deepcut.is-video-focus #deepcut-upper{grid-template-columns:minmax(0,1fr)}
#editor.deepcut #deepcut-inspector{border-left:0;border-right:1px solid var(--line)}
#editor.deepcut #deepcut-inspector>.deepcut-tabs{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
#editor.deepcut #deepcut-inspector>.deepcut-tabs button{flex:1;min-height:36px;padding:6px 12px;border:1px solid transparent;border-radius:var(--radius-7);background:transparent;color:var(--muted);font-size:13px}
#editor.deepcut #deepcut-inspector>.deepcut-tabs button[aria-selected=true]{border-color:var(--color-selection);background:var(--color-selection-surface);color:var(--color-selection-text)}
#editor.deepcut #deepcut-inspector #editor-review-panel{position:static!important;width:auto!important;max-height:none!important;flex:1;min-height:0;overflow:auto;border:0;box-shadow:none}
#editor.deepcut #deepcut-inspector :is(#editor-settings-host,#editor-review-panel)[hidden]{display:none!important}
#editor.deepcut #editor-review-panel>.panel-title{min-height:0;padding:6px 16px 0;justify-content:flex-end}
#editor.deepcut #editor-review-panel>.panel-title h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Follow controls keep a fixed height: their texts change while the transcript is being clicked. */
#editor.deepcut #transcript-playback{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:6px 16px}
#editor.deepcut #transcript-playback label{grid-area:1/1;min-height:30px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#editor.deepcut #transcript-playback .button{grid-area:1/2;min-height:30px;padding:4px 10px;white-space:nowrap}
#editor.deepcut #transcript-playback .button[hidden]{display:block;visibility:hidden}
#editor.deepcut #transcript-playback small{grid-area:2/1/3/3;display:block;min-height:1.5em;margin:0;font-size:11px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Stage: the video takes the free height; transport sits right under it. */
#editor.deepcut #preview-panel{background:var(--color-player-background)}
#editor.deepcut #video-slot{margin:0 12px}

/* Selection properties open as the lower part of the left panel, under the current tab. */
#editor.deepcut #deepcut-inspector #deepcut-selection{position:static!important;order:2;flex:0 1 auto;max-height:58%!important;min-height:0;overflow:auto;padding:12px 18px 18px;border-top:1px solid var(--color-selection);background:var(--raised)}
#editor.deepcut #deepcut-selection[hidden]{display:none!important}
#editor.deepcut #deepcut-inspector>:is(#editor-settings-host,#editor-review-panel){order:1;flex:1 1 0;min-height:max(140px,42%)}
.selection-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.selection-head strong{font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}

@media(max-width:1050px){
  #editor.deepcut #deepcut-upper,#editor.deepcut.is-transcript-open #deepcut-upper{grid-template-columns:300px minmax(0,1fr)}
  #editor.deepcut.is-transcript-open #editor-review-panel{position:static!important;width:auto!important;box-shadow:none}
  #editor.deepcut #saved-label{display:none}
}
@media(max-width:700px){
  #editor.deepcut #deepcut-upper,#editor.deepcut.is-transcript-open #deepcut-upper{grid-template-columns:minmax(0,1fr)}
  #editor.deepcut .project-heading{flex-wrap:wrap}
  .editor-crumbs{flex-basis:100%}
  #editor.deepcut .heading-actions{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}
  #editor.deepcut #export-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
}

/* Zoom cards keep their large toggles inside the left panel. */
#editor.deepcut #deepcut-inspector .zoom-row input[type=checkbox]{width:24px;height:24px}

/* Historical rendered previews can still contain zero-width cut joins. */
#editor.deepcut .timeline-cut.is-join{overflow:visible;background:var(--color-timeline-cut-text)}
#editor.deepcut .timeline-cut.is-join>span:not(.timeline-handle){display:none}
#editor.deepcut .timeline-cut.is-join:has(.timeline-handle){width:32px!important;border-radius:4px;background:var(--color-timeline-cut)}
#editor.deepcut .timeline-cut.is-join .timeline-handle{display:block;width:8px;border-radius:2px}
#editor.deepcut .timeline-cut.is-join::before{content:'✂';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 2px;border-radius:3px;background:var(--panel);color:var(--color-timeline-cut-text);font-size:12px;line-height:1.2}

/* Timeline toolbar: zoom −/+ around the level; the readout shows the time without frame details. */
#editor.deepcut #deepcut-timeline-toolbar .timeline-scale{display:inline-flex;align-items:center;gap:4px}
#editor.deepcut #deepcut-timeline-toolbar .timeline-scale>button{min-width:32px;min-height:32px;padding:2px 8px;font-size:18px;line-height:1}
#editor.deepcut #timeline-time-readout :is([data-ruler-frame],.timeline-time-separator:has(+[data-ruler-frame])){display:none}

/* The two live-edit status lines share one row: a pending or invalid edit covers the simulation note. */
#editor.deepcut #edit-draft-status{position:relative;z-index:1;margin-top:-17.5px;background:var(--color-player-background)}

/* Selection times: readable values with ±0,1 s; exact seconds sit under "Ajuste exato". */
#editor.deepcut #timeline-properties .timeline-property-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#editor.deepcut .timeline-property-times{display:grid;gap:6px}
#editor.deepcut #timeline-properties .property-time{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:6px}
#editor.deepcut .property-time>span{font-size:12px;color:var(--muted)}
#editor.deepcut .property-time>output{font-variant-numeric:tabular-nums;font-size:14px}
#editor.deepcut .property-time>button{min-height:30px;padding:3px 8px;font-size:12px}
#editor.deepcut #timeline-property-exact>summary{cursor:pointer;font-size:12px;color:var(--muted)}
#editor.deepcut .timeline-property-exact-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}

/* One action bar in the toolbar row: Ouvir trecho · Cortar · Zoom · Título · Ocultar legenda · ×. */
#editor.deepcut #deepcut-timeline-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
#editor.deepcut #deepcut-timeline-toolbar #timeline-selection-strip{flex:0 0 auto;min-height:0;padding:0}
#editor.deepcut #deepcut-timeline-toolbar #timeline-selection-strip[hidden]{display:none!important}
#editor.deepcut #deepcut-timeline-toolbar #timeline-selection-bar{min-height:40px;max-width:none;margin:0!important;padding:3px 6px}
#editor.deepcut #timeline-selection-extra-actions{display:flex;align-items:center;gap:10px}
#editor.deepcut #timeline-selection-extra-actions [data-bar-action][hidden]{display:none}
#editor.deepcut #deepcut-timeline-toolbar>:not(#timeline-selection-strip){flex-shrink:0}
@media(max-width:700px){
  #editor.deepcut #deepcut-timeline-toolbar{flex-wrap:wrap;overflow:visible}
  #editor.deepcut #deepcut-timeline-toolbar #timeline-selection-strip{flex:1 1 100%}
  #editor.deepcut #deepcut-timeline-toolbar #timeline-selection-bar{width:auto;flex-wrap:wrap}
  #editor.deepcut #timeline-selection-actions,#editor.deepcut #timeline-selection-extra-actions{flex-wrap:wrap;gap:4px}
}