/* Together panel. One right panel, five tabs; the stage and timeline never move between tabs. */
#editor.proof-editor.together #deepcut-upper,#editor.proof-editor.together.proof-transcript-edit #deepcut-upper{grid-template-columns:minmax(0,1fr) var(--together-width,470px)!important}
#editor.proof-editor.together.proof-transcript-edit #preview-panel,#editor.proof-editor.together #preview-panel{grid-column:1!important}
#editor.proof-editor.together.proof-transcript-edit #deepcut-inspector,#editor.proof-editor.together #deepcut-inspector{grid-column:2!important;padding:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
#editor.proof-editor.together :is(#proof-editor-mode,#proof-editor-left,#proof-more-editing,#proof-appearance-tabs,#deepcut-inspector>.deepcut-tabs,#editor-settings-host>.style-sample){display:none!important}
#editor.proof-editor.together .heading-actions{grid-column:3}
#editor.proof-editor.together.is-video-focus #deepcut-upper,#editor.proof-editor.together.proof-transcript-edit.is-video-focus #deepcut-upper{grid-template-columns:minmax(0,1fr)!important}
#editor.proof-editor.together.is-video-focus #deepcut-inspector{display:none!important}
#editor.proof-editor.together #deepcut-inspector>#together-tabs{order:-3}#editor.proof-editor.together #deepcut-inspector>#together-strip{order:-2}#editor.proof-editor.together #deepcut-inspector>#editor-settings-host{order:-1}#editor.proof-editor.together #deepcut-inspector>.together-list{order:0}

/* Tabs */
#together-tabs{position:sticky;top:0;z-index:var(--proof-z-sticky,5);display:flex;gap:16px;padding:0 22px;height:58px;flex:none;align-items:stretch;border-bottom:1px solid var(--proof-border);background:var(--proof-background)}
#together-tabs button{display:flex;align-items:center;gap:8px;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;padding:3px 0 0;margin:0;font:15px/1.4 var(--proof-font-family);color:var(--proof-text-muted);cursor:pointer;min-height:0}
#editor #together-tabs button svg{width:16px;height:16px}
#together-tabs button:hover{color:var(--proof-text)}
#together-tabs button[aria-selected=true]{color:var(--proof-selection-text);border-bottom-color:var(--proof-primary);font-weight:600}
#together-tabs button:focus-visible{outline:var(--proof-focus-width,2px) solid var(--proof-focus);outline-offset:-2px}

/* Look area lives inside #settings-fields; the list area follows it. */
#editor.proof-editor.together #editor-settings-host,#editor.proof-editor.together #editor-settings-host[hidden]{display:block!important;padding:16px 24px 0;margin:0;border:0;background:none;box-shadow:none;flex:none!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
#editor.proof-editor.together #settings-fields{padding:0;margin:0;border:0;min-width:0}
#editor.proof-editor.together #settings-fields>.setting-section{display:none!important}
.together-look{display:flex;flex-direction:column;gap:12px}
.together-look:empty{display:none}
.together-look[hidden],.together-list[hidden]{display:none!important}
.together-list{display:flex;flex-direction:column;gap:12px;padding:12px 24px 24px;min-height:0;flex:none}
/* The panel is the scroll container; its sections keep their natural height. */
#editor.proof-editor.together #deepcut-inspector>*{flex-shrink:0}
.together-look:empty+*{margin-top:0}

/* Look card */
.together-card{border:1px solid var(--proof-border);border-radius:10px;background:var(--proof-surface)}
.together-card>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;font:14px/1.4 var(--proof-font-family);color:var(--proof-text);min-height:48px}
.together-card>summary::-webkit-details-marker{display:none}
.together-card>summary b{font-weight:600;white-space:nowrap}
#editor .together-card>summary>svg{width:15px;height:15px;color:var(--proof-text-muted);flex:none;transition:transform var(--proof-duration-fast,120ms) var(--proof-ease,ease)}
#editor .together-card[open]>summary>svg{transform:rotate(180deg)}
.together-card-lead{display:flex;align-items:center;color:var(--proof-text-muted)}
#editor .together-card-lead svg{width:15px;height:15px}
.together-card-sum{flex:1;min-width:0;font-size:13px;color:var(--proof-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.together-card-scope{font-size:12px;border-radius:6px;padding:2px 8px;background:var(--proof-timeline-zoom);color:var(--proof-timeline-zoom-text);white-space:nowrap}
.together-card-body{border-top:1px solid var(--proof-border);padding:12px 14px;display:flex;flex-direction:column;gap:11px}
.together-card>summary:focus-visible{outline:var(--proof-focus-width,2px) solid var(--proof-focus);outline-offset:2px;border-radius:10px}
/* Preview heading: the card title set in the look it controls, on the swatch's video-dark plate. */
.together-card>summary b.together-card-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;padding:3px 9px;border-radius:6px;background:#2a2c3a;color:#fff;font-size:14px;line-height:20px;paint-order:stroke fill}
.together-card-preview:is([data-plate=light],[data-plate=white]),.together-card-preview em:is([data-plate=light],[data-plate=white]){box-shadow:inset 0 0 0 1px var(--proof-border)}
.together-card>summary b.together-card-preview[data-plate=light],.together-card-preview em[data-plate=light]{background:#f4f5f8}
.together-card>summary b.together-card-preview[data-plate=black],.together-card-preview em[data-plate=black]{background:#000}
.together-card>summary b.together-card-preview[data-plate=white],.together-card-preview em[data-plate=white]{background:#fff}
.together-card-preview em[data-plate=dark]{background:#2a2c3a}
.together-card-preview em{font-style:normal}
.together-card-preview em[data-plate]{padding:1px 4px;border-radius:4px}
.together-chip{font-size:12px;border-radius:20px;padding:3px 10px;background:var(--proof-selection);color:var(--proof-selection-text);font-weight:600;white-space:nowrap}

/* Pinned selection strip */
#together-strip{display:flex;align-items:center;gap:10px;margin:12px 24px 0;background:var(--proof-selection);border:1px solid var(--proof-selection-hover,#c5d5fb);border-radius:8px;padding:8px 8px 8px 12px;font-size:13px;color:var(--proof-selection-text)}
#together-strip[hidden]{display:none!important}
.together-strip-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.together-strip-text b{font-weight:600}
#together-strip button{border:0;background:none;color:var(--proof-selection-text);font:600 13px/1.4 var(--proof-font-family);padding:4px 6px;border-radius:6px;cursor:pointer;min-height:0}
#editor #together-strip button svg{width:15px;height:15px;display:block}
#together-strip button:hover{background:var(--proof-surface)}

/* Inline inspector: timing moves to the timeline; the form shows content only. */
#editor.together :is(.together-list,.together-look) #deepcut-selection{display:block;margin:0;padding:0;border:0;background:none;max-height:none!important;overflow:visible}
#editor.together :is(.together-list,.together-look) #deepcut-selection>.selection-head,#editor.together :is(.together-list,.together-look) #timeline-properties>legend,#editor.together .timeline-property-times,#editor.together #timeline-property-exact,#editor.together #proof-time-nudges,#editor.together #proof-property-secondary,#editor.together #timeline-properties-note{display:none!important}
#together-inspector-park{display:none!important}

#editor @media (max-width:1450px){#editor.proof-editor.together{--together-width:430px}}
@media (max-width:1200px){#editor.proof-editor.together{--together-width:380px}#together-tabs{gap:16px;padding:0 18px}#editor #together-tabs button svg{display:none}.together-list{padding:12px 18px 20px}#editor.proof-editor.together #editor-settings-host{padding:14px 18px 0}}
/* Focus enlarges the video: the frame strip steps aside so the timeline can shrink below its header. */
#editor.proof-editor.together.is-video-focus #proof-filmstrip{display:none!important}
/* The tab underline is a straight indicator; keep the buttons square even under global button radii. */
#editor #together-tabs button{border-radius:0}
