/* Service composition of NCFactory components. Editor and task IDs remain stable. */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; max-width:1440px; margin:auto; padding:24px 40px; }
.brand-lockup { display:flex; align-items:flex-end; gap:12px; font-size:16px; font-weight:500; line-height:1.5; }
.brand-lockup img { display:block; flex-shrink:0; width:188px; height:32px; }
/* Align the suffix with the wordmark's ink, rather than the SVG's empty lower edge. */
.product-name { margin-bottom:-1px; font-size:16px; line-height:1.5; white-space:nowrap; }
.user-block { display:flex; align-items:center; gap:24px; color:var(--ncf-secondary); font-size:14px; }
.user-block a { display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:500; line-height:1.2; }
.main-column { width:calc(100% - 80px); max-width:1360px; margin:24px auto 64px; }
.local-test-note { margin-bottom:24px; }
.current-project-heading { margin-bottom:24px; }
.current-project-field { display:flex; align-items:center; gap:12px; width:100%; min-width:0; }
.current-project-field #project-title { flex:1; width:0; }
.current-project-actions { display:flex; gap:8px; }
#new-project-btn { padding-left:16px; }
#workspace-message,#server-status,#caption-warning-notice { margin-bottom:24px; }
#caption-warning-notice { position:relative; min-height:64px; padding:20px 64px 20px 56px; border-radius:16px; background:var(--ncf-yellow-400); font-size:14px; line-height:1.5; }
#caption-warning-notice::before { content:''; position:absolute; top:20px; left:20px; width:24px; height:24px; background:var(--ncf-main); -webkit-mask:url('/static/ui-kit/warning.svg') center/24px 24px no-repeat; mask:url('/static/ui-kit/warning.svg') center/24px 24px no-repeat; }
.project-warning { flex-shrink:0; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 8px; border-radius:8px; color:var(--ncf-main); background:var(--ncf-yellow-400); font-size:12px; font-weight:500; line-height:1.2; }
/* Drag-and-drop 704:32879 / 32886; file row 704:32922. */
.file-drop-zone { margin-bottom:24px; }
.upload-target { position:relative; display:flex; align-items:center; justify-content:center; height:120px; padding:16px; border:0; border-radius:16px; background:var(--ncf-white); color:var(--ncf-stroke); }
.upload-outline { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.upload-outline rect { x:.5px; y:.5px; width:calc(100% - 1px); height:calc(100% - 1px); rx:15.5px; fill:none; stroke:currentColor; stroke-width:1px; stroke-dasharray:6 6; }
.upload-mobile-copy { display:none; }
.upload-target #select-file-btn { display:flex; flex-direction:column; gap:8px; width:100%; height:100%; min-height:0; padding:0; border:0; border-radius:0; background:transparent; font-weight:400; line-height:1.5; }
.upload-target .action-icon { color:var(--ncf-main); }
.upload-copy { display:flex; flex-direction:column; gap:4px; }
.upload-copy .upload-note { color:var(--ncf-secondary); font-size:12px; line-height:1.5; }
.upload-target:hover,.drag-over .upload-target { color:var(--ncf-primary-200); }
.upload-target:hover #select-file-btn:not(:disabled),.drag-over .upload-target #select-file-btn:not(:disabled) { color:var(--ncf-primary-200); }
.upload-target:hover .action-icon,.drag-over .upload-target .action-icon { color:var(--ncf-primary-200); }
.selected-video { display:none; align-items:center; gap:8px; min-height:48px; padding:8px; border-radius:12px; background:var(--ncf-grey-300); }
.file-drop-zone[data-has-video=true] .upload-target { display:none; }
.file-drop-zone[data-has-video=true] .selected-video { display:flex; }
.selected-video>.action-icon { color:var(--ncf-secondary); }
.selected-video-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.selected-video p { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.2; }
.selected-video-info .file-size { color:var(--ncf-secondary); font-size:12px; line-height:1.2; }
.selected-video .remove-video { flex-basis:24px; width:24px; height:24px; min-height:24px; padding:0; }
.selected-video .icon-delete,.project-row-actions .icon-delete { --action-icon:url('/static/ui-kit/delete.svg'); }
.caption-options { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.caption-options .field { margin-right:auto; }
.format-notes { margin:8px 0 24px; color:var(--ncf-secondary); font-size:12px; line-height:1.5; }
.textarea-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.textarea-col { min-width:0; }
.editor-heading { display:flex; align-items:center; justify-content:space-between; min-height:32px; margin-bottom:4px; font-size:16px; font-weight:500; line-height:24px; }
.editor-heading .clear-language-text { flex-basis:32px; width:32px; height:32px; min-height:32px; padding:4px; }
.textarea-container { display:flex; align-items:flex-start; min-width:0; overflow:hidden; border:1px solid var(--ncf-stroke); border-radius:12px; background:var(--ncf-white); }
.textarea-container:focus-within { border-color:var(--ncf-primary-200); }
.caption-text-editor { position:relative; flex:1; width:0; min-width:0; }
.fixed-textarea-ln,.line-numbers,.caption-text-paint { display:block; height:200px; min-height:200px; margin:0; padding:12px 16px; border:0; border-radius:0; outline:none; font-family:var(--font-ui); font-size:14px; font-weight:400; line-height:21px; color:var(--ncf-main); background:var(--ncf-white); white-space:pre; }
.fixed-textarea-ln { width:100%; resize:vertical; overflow:auto; overflow-wrap:normal; }
.line-numbers { flex:0 0 40px; width:40px; min-height:0; padding:12px 8px; color:var(--ncf-secondary); text-align:right; border-right:1px solid var(--ncf-grey-200); background:var(--ncf-grey-400); resize:none; overflow:hidden; user-select:none; background-attachment:local; }
.fixed-textarea-ln,.caption-text-paint { background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 20px,var(--ncf-grey-200) 20px,var(--ncf-grey-200) 21px); background-position:0 12px; background-repeat:no-repeat; background-attachment:local; }
.caption-text-paint { display:none; position:absolute; inset:0 auto auto 0; z-index:1; overflow:hidden; pointer-events:none; }
.has-overflow .caption-text-paint { display:block; }
.has-overflow .fixed-textarea-ln { position:relative; z-index:2; background:transparent; color:transparent; caret-color:var(--ncf-main); }
.has-overflow .fixed-textarea-ln::selection { color:var(--ncf-main); background:var(--ncf-primary-500); }
.caption-text-paint>span { display:block; width:max-content; min-width:calc(100% + 32px); height:21px; margin:0 -16px; padding:0 16px; }
.caption-active-line { background:var(--caption-active); }
.caption-overflow-line { background:var(--ncf-yellow-400); }
.caption-empty-line { background:var(--caption-invalid); box-shadow:inset 3px 0 var(--ncf-alert-200); }
.caption-gap-line { color:var(--ncf-secondary); background:var(--caption-gap); font-style:italic; }
.is-synchronizing { opacity:.65; }
.is-synchronizing textarea { cursor:progress; caret-color:transparent; }
.editor-notes { margin:12px 0 24px; color:var(--ncf-secondary); font-size:12px; line-height:1.5; }
.editor-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.export-controls,.download-actions { display:flex; align-items:center; gap:8px; }
.export-controls .choice-select { width:240px; }
.download-actions { margin-left:auto; }
/* Table cells 704:35579 / 35590, composed into the project workflow. */
.completed-projects { margin-top:40px; padding:24px 32px; border-radius:24px; background:var(--ncf-grey-300); }
.projects-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:16px; }
.project-sort { width:max-content; max-width:100%; }
.project-sort .choice-trigger { width:max-content; height:24px; min-height:24px; gap:8px; padding:0; border:0; border-radius:0; background:transparent; }
.project-sort .choice-trigger:hover:not(:disabled),.project-sort .choice-trigger[aria-expanded=true] { color:var(--ncf-primary-200); background:transparent; }
.project-sort .choice-trigger::after { background:currentColor; -webkit-mask-image:url('/static/ui-kit/dropdown-down.svg'); mask-image:url('/static/ui-kit/dropdown-down.svg'); }
.project-sort .choice-trigger[aria-expanded=true]::after { -webkit-mask-image:url('/static/ui-kit/dropdown-up.svg'); mask-image:url('/static/ui-kit/dropdown-up.svg'); }
.project-sort .choice-menu { left:auto; right:0; }
.project-table-header { display:grid; grid-template-columns:144px 24px minmax(0,1fr) 170px; align-items:center; gap:12px; height:40px; padding:0 88px 0 12px; color:var(--ncf-secondary); font-size:12px; line-height:1.5; }
.project-table-header span:nth-child(2) { grid-column:3; }
.project-table-header span:last-child { grid-column:4; text-align:right; }
#projects-list { min-width:0; }
.project-item { display:grid; grid-template-columns:minmax(0,1fr) 80px; align-items:center; border-bottom:1px solid var(--ncf-stroke); }
.project-item:last-child { border-bottom:0; }
.project-item.is-current { background:var(--ncf-white); border-radius:12px; }
.project-item.is-selected { background:var(--ncf-primary-700); }
.project-item:hover { background:var(--ncf-grey-400); }
.project-item.is-current:hover { background:var(--ncf-white); }
.project-row { display:grid; grid-template-columns:144px 24px minmax(0,1fr) 170px; align-items:center; gap:12px; width:100%; height:40px; min-height:40px; padding:0 8px 0 12px; border:0; border-radius:0; color:var(--ncf-main); background:transparent; text-align:left; font-weight:400; line-height:1.5; }
.project-row .project-state { justify-self:end; }
.project-row:hover:not(:disabled) { background:transparent; }
.project-content { display:flex; align-items:center; gap:24px; min-width:0; overflow:hidden; }
.project-title-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.project-date { color:var(--ncf-secondary); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.project-row-actions { display:flex; align-items:center; justify-content:flex-end; }
.project-symbol { --action-icon:url('/static/ui-kit/clock.svg'); color:var(--ncf-secondary); }
.project-symbol[data-state=current] { --action-icon:url('/static/ui-kit/edit.svg'); color:var(--ncf-primary-200); }
.project-symbol[data-state=ready] { --action-icon:url('/static/ui-kit/check.svg'); color:var(--ncf-green-100); }
.project-symbol[data-state=failed] { --action-icon:url('/static/ui-kit/warning.svg'); color:var(--ncf-alert-200); }
.project-symbol[data-state=queued] { --action-icon:url('/static/ui-kit/waiting.svg'); }
.project-symbol[data-state=preparing],.project-symbol[data-state=rendering],.project-symbol[data-state=finalizing],.project-symbol[data-state=cancelling] { --action-icon:url('/static/ui-kit/loader.svg'); color:var(--ncf-primary-200); animation:kit-spin 1s steps(8) infinite; }
.project-progress { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.projects-empty { padding:24px 12px; color:var(--ncf-secondary); font-size:14px; }
@keyframes kit-spin { to { transform:rotate(360deg); } }
@font-face { font-family:SubtitleManrope; src:url('/caption-assets/fonts/Manrope-Medium.ttf'); }
.login-panel { width:min(400px,calc(100% - 40px)); margin:80px auto 64px; }
.login-panel h1 { margin-bottom:32px; }
.login-form { display:flex; flex-direction:column; gap:24px; }
.login-form .primary { width:100%; }
.login-help { margin-top:24px; color:var(--ncf-secondary); font-size:13px; }
.login-help summary { display:flex; align-items:center; gap:8px; width:fit-content; list-style:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-size:14px; }
.login-help summary::-webkit-details-marker { display:none; }
.login-help summary::before { content:''; display:block; width:24px; height:24px; background:var(--ncf-secondary); -webkit-mask:url('/static/ui-kit/chevron-down.svg') center/24px 24px no-repeat; mask:url('/static/ui-kit/chevron-down.svg') center/24px 24px no-repeat; }
.login-help[open] summary::before { -webkit-mask-image:url('/static/ui-kit/chevron-up.svg'); mask-image:url('/static/ui-kit/chevron-up.svg'); }
.login-help summary:hover { color:var(--ncf-main); }
.login-help p { margin-top:12px; line-height:1.5; }
@media(max-width:1050px) {
    .caption-options .field { flex:1 0 100%; }
    .caption-options>button { flex:1; }
    .editor-actions { gap:12px; }
}
@media(max-width:700px) {
    .site-header { flex-wrap:wrap; padding:24px 20px; gap:16px; }
    .main-column { width:calc(100% - 40px); margin-top:16px; }
    .current-project-field { flex-wrap:wrap; }
    .current-project-field #project-title { flex-basis:100%; }
    .current-project-actions { width:100%; }
    .current-project-actions button { flex:1; }
    .upload-target { height:120px; padding:24px 16px; border-radius:16px; }
    .upload-outline rect { rx:15.5px; }
    .upload-desktop-copy { display:none; }
    .upload-mobile-copy { display:inline; }
    .caption-options .field { flex-basis:auto; margin-right:auto; }
    .caption-options>button { flex-basis:100%; }
    .textarea-row { grid-template-columns:1fr; gap:24px; }
    .export-controls,.download-actions { width:100%; flex-wrap:wrap; }
    .export-controls .choice-select { flex:1 1 220px; width:auto; }
    .export-controls>button { flex:1 1 160px; }
    .download-actions button { flex:1; padding-left:16px; padding-right:16px; }
    .completed-projects { padding:16px; margin-top:32px; border-radius:16px; }
    .projects-heading { gap:12px; flex-wrap:wrap; }
    .project-sort { margin-left:auto; }
    .project-table-header { display:none; }
    .project-date { white-space:normal; }
    .project-row { height:48px; min-height:48px; padding-left:0; gap:8px; grid-template-columns:72px minmax(0,1fr) auto; }
    .project-row .project-symbol { display:none; }
    .project-item { grid-template-columns:minmax(0,1fr) 80px; }
    .project-row-actions { gap:0; }
    .project-state { display:block; max-width:104px; overflow:hidden; text-overflow:ellipsis; }
    .project-progress { display:none; }
}
@media(max-width:440px) {
    .brand-lockup { gap:12px; }
    .current-project-actions button { padding:0 16px; }
    .completed-projects { padding:12px; }
    .project-row { gap:4px; }
    .project-item { grid-template-columns:minmax(0,1fr) 64px; }
    .project-row-action { width:32px; flex-basis:32px; padding:4px; }
    .project-state { padding:4px 6px; }
}