/* Readable labels and forgiving hit areas without adding instructional copy. */
:root{--ui-text:#3f4248;--ui-secondary:#62656b;--ui-focus:#245fc7}
:root[data-theme=dark]{--ui-text:#e1e4e9;--ui-secondary:#b5bdc9;--ui-focus:#a5c8ff}
:root[data-theme] body :is(button,label,.card-label,.format-label,.section-caption,.project-name input,.inspector h2,.card-editor-header h2){color:var(--ui-text)}
:root[data-theme] body :is(.project-name>span,.tip,.wireframe-note,.shot-label,.slider-unit,output,.export-info>span,.export-info strong,.export-info i,.playback #time,.tabs span,.shots h2,.shots h2 span,.reset,.template-filters button,.tabs button,.asset-navigation button,.upload-box span,#selection-count){color:var(--ui-secondary)}
:root[data-theme] body .music-track>p{color:var(--ui-secondary)!important}
:root[data-theme] body :is(.template-card .card-label,.template-card.active .card-label,.stage-toolbar>div:first-child){color:var(--ui-text)}
:root[data-theme] body :is(.project-name input,.inspector h2,.card-editor-header h2){font-size:14px}
:root[data-theme] body :is(button,label,.format-label,.section-caption,.card-label,.tabs button,.template-filters button,.section-toggle .section-caption,.slider-number,.format-custom input,#easing-values input,.project-bar .header-actions>button,.workspace>.stage-toolbar .history-actions button){font-size:12px}
:root[data-theme] body :is(.project-name>span,.tip,.wireframe-note,.shot-label,.slider-unit,output,.export-info>span,.export-info i,.playback #time,.tabs span,.shots h2,.shots h2 span,#selection-count){font-size:12px}
:root[data-theme] body button{min-width:28px;min-height:28px}
:root[data-theme] body .reset{padding:5px 4px}
:root[data-theme] body :is(.asset-navigation button,.library-footer button){width:28px;height:28px;padding:4px}
:root[data-theme] body #direction-buttons button{font-size:12px;min-height:32px}
:root[data-theme] body #template-search{font-size:13px;min-height:32px;color:var(--ui-text)}
:root[data-theme] body #template-search::placeholder{color:var(--ui-secondary);opacity:1}
:root[data-theme] body .template-filters{top:32px}
:root[data-theme] body .template-filters button{padding:5px 6px}
:root[data-theme] body .project-bar #export{font-size:13px;color:#fff;background:#45484f}
:root[data-theme=dark] body .project-bar #export{color:#202124;background:#e0e4eb}
:root[data-theme] body .shot{width:116px}
:root[data-theme] body .shot canvas{width:108px}
:root[data-theme] body .shot-label{gap:2px;flex-wrap:wrap}
:root[data-theme] body .shot-label>span{flex:1 0 100%;max-width:100%;line-height:18px}
:root[data-theme] body .shot-label button{padding:4px;min-height:28px;min-width:28px}
:root[data-theme] body .shot-label button:last-child{color:#963f3f;margin-left:auto}
:root[data-theme=dark] body .shot-label button:last-child{color:#f0aaaa}
:root[data-theme] body .shots-heading{height:auto;min-height:28px;flex-wrap:wrap}
:root[data-theme] body #selection-actions{min-height:28px;flex-wrap:wrap}
:root[data-theme] body #selection-actions button{min-height:28px;font-size:12px}
:root[data-theme] body .library-footer{gap:5px}
:root[data-theme] body .library-footer .brand{font-size:15px}
:root[data-theme] body .inspector-shell .dialkit-root{--dial-text-label:var(--ui-text);--dial-text-primary:var(--ui-text);--dial-text-secondary:var(--ui-secondary);--dial-text-tertiary:var(--ui-secondary);--dial-focus-ring:var(--ui-focus)}
:root[data-theme] body .inspector-shell .dialkit-control-host :is(.dialkit-slider-label,.dialkit-labeled-control-label,.dialkit-select-trigger){font-size:12px;color:var(--ui-text)}
:root[data-theme] body .inspector-shell .dialkit-slider-value{font-size:13px;color:var(--ui-text)}
:root[data-theme] body .inspector-shell .dialkit-slider-input{font-size:13px;color:var(--ui-text)}
:root[data-theme] body .inspector-shell .dialkit-color-swatch{min-width:28px;min-height:28px}
:root[data-theme] body :is(button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
:root[data-theme] body .dialkit-slider:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
:root[data-theme] body #easing-graph text{fill:var(--ui-secondary);font-size:10px}
:root[data-theme] body .muted{color:var(--ui-secondary)!important;font-size:12px!important}
:root[data-theme] body .section-toggle{min-height:44px}
:root[data-theme] body .upload-box{min-height:36px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important}}

:root[data-theme] body #direction-buttons button,:root[data-theme] body .shots-heading #add{color:var(--ui-text)}

/* Template names stay on one line; overflowing names loop on hover/focus. */
:root[data-theme] body .template-card .card-label{display:block;min-width:0;padding:8px 10px;text-align:center;overflow:hidden;white-space:nowrap}
.template-name-track{display:block;min-width:0}
.template-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.template-name-copy{display:none}
.name-scrolling .template-name-track{display:flex;width:max-content;will-change:transform}
.name-scrolling .template-name-text{flex:none;overflow:visible}
.name-scrolling .template-name-copy{display:block;flex:none;padding-left:28px}

/* Keep selection in the existing header so the timeline never moves. */
:root[data-theme] body .shots-heading{height:32px;min-height:32px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.shots-heading::-webkit-scrollbar{display:none}
:root[data-theme] body .shots-heading>*{flex-shrink:0;white-space:nowrap}
:root[data-theme] body .shots-heading #selection-actions{flex-wrap:nowrap;margin:0;gap:6px;align-items:center}
:root[data-theme] body .shots-heading #selection-count{margin:0 4px 0 0}
:root[data-theme] body .shots-heading #selection-actions button{margin:0}

/* Asset filenames use the same padded, scrolling label as templates. */
:root[data-theme] body .shot-label{display:block;min-width:0;margin-top:0;padding:8px 7px;text-align:center;overflow:hidden;white-space:nowrap}
:root[data-theme] body .shot-label span{max-width:none;line-height:18px}
:root[data-theme] body .shot-label>.template-name-track{overflow:visible}
:root[data-theme] body .shot-label .template-name-copy{overflow:visible}

/* The add tile matches the asset cards beside it. */
:root[data-theme] body .shot-add{width:116px;min-width:116px;min-height:96px;flex:0 0 116px;align-self:stretch;border-radius:5px;padding:3px}

/* Keep the search focus ring inside the field, clear of the scroll clip. */
:root[data-theme] body #template-search:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}


/* Pointer interactions retain focus for shortcuts without drawing keyboard focus boxes.
   Override native and bundled control outlines together; selection borders are unaffected. */
:root[data-focus-mode=pointer] body :focus{outline:none!important}