/* All video production steps. No library/sidebar, creation settings or media filters. */
#detailView, body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) {
  --workflow-edge: color-mix(in srgb, var(--sia-sidebar-active-line) 20%, var(--sia-line));
  --workflow-control-edge: color-mix(in srgb, var(--sia-sidebar-active-line) 35%, var(--sia-line));
  --workflow-control-fill: linear-gradient(color-mix(in srgb, var(--sia-surface) 65%, transparent), color-mix(in srgb, var(--sia-surface) 65%, transparent)), var(--sia-sidebar-active);
  --workflow-glow: inset 0 1px 0 rgba(121,215,210,.035), 0 0 12px rgba(67,189,184,.035);
}
/* Shared progress is identical on every step, including the initial idea. */
#detailView .project-flow {
  background: var(--sia-sidebar-bg) !important; border-color: var(--workflow-edge) !important;
  border-radius: 20px; box-shadow: var(--workflow-glow) !important;
}
#detailView .project-progress-track { background: var(--sia-line) !important; }
#detailView .project-progress-bar { background: var(--sia-teal); }
#detailView :is(.project-progress-current span, .project-progress-value span, .flow-step-copy > span) { font-size: 12px; }
#detailView .flow-step { border: 1px solid transparent; min-height: 54px; }
#detailView .flow-step strong { font-size: 14px; }
#detailView .flow-number { background: var(--sia-surface-soft); color: var(--sia-muted); }
#detailView .flow-step.done { background: transparent !important; }
#detailView .flow-step.active, #detailView button.flow-step:hover:not(:disabled) {
  background: var(--workflow-control-fill) !important; border-color: var(--workflow-control-edge) !important;
  box-shadow: var(--workflow-glow) !important;
}
#detailView :is(.flow-step.active, .flow-step.done) .flow-number { background: var(--sia-sidebar-active); color: var(--sia-sidebar-accent); }
#detailView :is(.flow-step.done strong, .flow-step.active strong) { color: var(--sia-heading) !important; }
#detailView .flow-step.done .flow-step-copy > span { color: var(--sia-sidebar-accent) !important; }
#detailView .flow-step.active .flow-step-copy > span { color: var(--sia-muted) !important; }

/* Major task surfaces; related settings remain grouped, without added cards. */
#detailView :is(.scene-workflow-section, .scene-results-toolbar, .scene-prompts-details,
  .resources-workspace, .voice-workspace, .montage-workspace, .summary-workspace,
  .resources-generation-stage, .final-generating) {
  background: var(--sia-sidebar-bg) !important; border-color: var(--workflow-edge) !important;
  border-radius: 24px; box-shadow: var(--workflow-glow) !important;
}
#detailView :is(.scene-configuration-bar > .scene-control, .resources-media-panel, .montage-setup-field,
  .montage-stat, .final-delivery-panel, .project-scene-card, .summary-audio-item, .voice-result,
  .summary-reference-card, .summary-scene-card, .character-guide-card) {
  background: var(--sia-surface) !important; border-color: var(--workflow-edge) !important;
  border-radius: 16px; box-shadow: none !important;
}
#detailView :is(.montage-quick-actions, .resources-quick-panel, .final-delivery, .summary-materials,
  .summary-section, .scene-advanced, .character-guides-panel, .montage-workspace-head, .summary-head,
  .resources-workspace-head, .voice-workspace-head, .resources-details-head) {
  background: transparent !important; border-color: var(--workflow-edge) !important; box-shadow: none !important;
}
#detailView :is(.resources-workspace-head, .voice-workspace-head, .montage-workspace-head,
  .summary-head, .resources-media-panel-head, .montage-setup-head, .montage-setup-footer,
  .project-scene-head, .project-pager, .final-specs > div) { border-color: var(--workflow-edge) !important; }

/* Body text, labels and metadata use the same readable scale in both themes. */
#detailView :is(.resources-workspace-head h2, .voice-workspace-head h2, .montage-workspace-head h2, .summary-head h2) { color: var(--sia-heading); font-size: 26px; line-height: 1.25; }
#detailView .scene-workflow-head h3 { font-size: clamp(24px, 2.2vw, 32px); }
#detailView :is(.resources-media-panel-head h3, .montage-setup-head h3, .summary-section-head h3,
  .final-delivery-panel h3, .character-guides-head h3, .project-scene-title) { color: var(--sia-heading); font-size: 18px; line-height: 1.4; }
#detailView :is(.scene-workflow-head p, .resources-workspace-head p, .voice-workspace-head p,
  .montage-workspace-head p, .resources-media-panel-head p, .montage-setup-head p,
  .montage-setup-footer-copy span, .resources-ai-generation-copy span, .resources-mixed-media-note,
  .character-guides-head p, .character-guides-empty, .project-scene-card > p,
  .project-scene-prompt, .summary-script, .scene-empty, .summary-empty, .final-delivery-meta,
  .final-player-empty > span:not(.final-player-empty-icon), .final-generating p, .resources-generation-stage p) {
  color: var(--sia-muted); font-size: 15px; line-height: 1.6;
}
#detailView :is(.scene-control-heading p, .scene-duration-help, .scene-density-labels,
  .scene-density-heading, .scene-density-estimate, .scene-creator-eyebrow, .scene-optional-badge,
  .scene-results-toolbar p, .project-scene-time, .project-scene-label, .project-scenes-pagination-summary,
  .montage-setup-help, .montage-auto-voice-state, .montage-setup-eyebrow, .final-eyebrow,
  .resources-upload-count, .resources-optional-badge, .montage-status-badge, .summary-complete-badge,
  .resources-ai-progress-head, .resources-progress-head, .voice-progress p, .summary-metrics,
  .final-specs dt, .montage-export-checks, .montage-stat span, .scene-image-batch-count) { font-size: 12px; line-height: 1.5; }
#detailView :is(.scene-control-heading label, .montage-setup-label, .voice-control > label) { color: var(--sia-heading); font-size: 15px; }
#detailView :is(.montage-stat strong, .final-specs dd) { color: var(--sia-heading); font-size: 20px; }
#detailView :is(.scene-creator-icon, .resources-media-panel-icon, .resources-ai-generation-icon,
  .montage-setup-head-icon, .scene-control-number, .montage-setup-number, .final-player-empty-icon) {
  background: var(--workflow-control-fill) !important; border: 1px solid var(--workflow-control-edge);
  box-shadow: var(--workflow-glow) !important; color: var(--sia-sidebar-accent) !important;
}

/* Standard controls. Do not alter range/radio/checkbox geometry or native players. */
#detailView .project-tab-panel :is(.project-select-trigger, .sia-style-trigger, .project-voice-picker-trigger,
  .scene-control input:not([type="range"]), textarea, .voice-script-summary, .project-scene-prompt, .summary-script) {
  background: var(--sia-surface) !important; border-color: var(--workflow-control-edge) !important;
  border-radius: 14px; color: var(--sia-text) !important;
}
#detailView .project-tab-panel :is(input[type="number"], input[type="text"], textarea) { font-size: 16px; }
#detailView .project-tab-panel :is(.project-select-trigger, .project-voice-picker-trigger) { font-size: 15px; min-height: 48px; }
#detailView .project-tab-panel .project-select-menu,
#detailView :is(.resources-more-actions-menu, .project-scene-media-more-menu) {
  background: var(--sia-surface) !important; border-color: var(--workflow-control-edge) !important;
  border-radius: 14px; box-shadow: var(--sia-shadow);
}
#detailView .project-select-option { background: transparent !important; color: var(--sia-text) !important; font-size: 14px; min-height: 44px; }
#detailView .project-select-option:is(:hover, .is-active) { background: var(--workflow-control-fill) !important; color: var(--sia-sidebar-accent) !important; }
#detailView :is(.scene-style-shortcut, .scene-format-option, .scene-duration-mode button,
  .montage-setup-options button, .subtitle-font-option, .scene-advanced > summary,
  .resources-more-actions > summary, .resources-more-actions-menu button, .project-scenes-page-button,
  .project-scene-media-more > summary, .project-scene-media-more-menu :is(button, a),
  .resources-details-toggle, .summary-materials > summary, .voice-output-option) {
  background: var(--workflow-control-fill) !important; border-color: var(--workflow-control-edge) !important;
  color: var(--sia-text) !important; font-size: 14px; min-height: 44px;
}
#detailView :is(.scene-style-shortcut, .scene-format-option, .scene-duration-mode button, .montage-setup-options button).is-active,
#detailView .scene-duration-mode button[aria-pressed="true"],
#detailView .montage-setup-options button.active,
#detailView .voice-output-option:has(input:checked) {
  background: var(--sia-sidebar-active) !important; border-color: var(--sia-sidebar-active-line) !important;
  box-shadow: var(--workflow-glow) !important; color: var(--sia-sidebar-accent) !important;
}
#detailView .scene-style-shortcut { font-size: 12px; padding: 8px 12px; }
#detailView .scene-format-option { font-size: 12px; }
#detailView :is(.resources-more-actions-menu, .project-scene-media-more-menu) small { color: var(--sia-muted); font-size: 12px; }
#detailView .project-scene-media-more-menu .is-delete { color: var(--sia-danger) !important; }
#detailView :is(.project-scene-media-info strong, .project-scene-media-placeholder strong, .resources-details-head strong) { font-size: 14px; line-height: 1.45; }
#detailView :is(.project-scene-media-info span, .project-scene-media-placeholder span, .resources-details-head span, .resources-progress p, .scene-image-batch-notes) { font-size: 12px; line-height: 1.5; }
#detailView :is(.project-scene-media-slot, .scene-image-batch-progress-panel) { background: var(--sia-surface) !important; border-color: var(--workflow-edge) !important; }
#detailView :is(.project-scene-media-icon-action, .resources-character-guide-action) { height: 44px; width: 44px; min-height: 44px; }
#detailView .project-scene-media-placeholder { color: var(--sia-muted); }
#detailView :is(.resources-media-panel-heading, .montage-setup-footer-copy, .montage-setup-label) { min-width: 0; }
#detailView :is(.resources-media-panel-heading, .montage-setup-footer, .scene-copy-actions) { flex-wrap: wrap; }
#detailView :is(.project-tab-panel .button, .project-pager .button) { border-radius: 14px; font-size: 15px; min-height: 48px; }
#detailView :is(.project-tab-panel .button.secondary, .project-pager .button.secondary) {
  background: var(--workflow-control-fill) !important; border-color: var(--workflow-control-edge) !important; color: var(--sia-heading) !important;
}
#detailView :is(.project-tab-panel .button.primary, .project-pager .button.primary) { border-color: var(--workflow-control-edge); box-shadow: var(--workflow-glow); }
#detailView :is(.project-tab-panel .button.danger, .project-scene-media-delete-confirm) { background: var(--sia-danger-soft) !important; border-color: color-mix(in srgb, var(--sia-danger) 30%, var(--sia-line)) !important; color: var(--sia-danger) !important; }
#detailView .project-tab-panel :is(button, a):hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--sia-sidebar-active-line); }
#detailView :is(button, a, input, textarea, summary):focus-visible { outline: 2px solid var(--sia-sidebar-accent); outline-offset: 3px; }
#detailView :is(.project-tab-panel button, .project-pager button):disabled { cursor: not-allowed; }

/* Functional feedback and progress retain their real status and proportions. */
#detailView :is(.resources-progress-track, .resources-generation-track, .resources-ai-progress-track,
  .voice-progress-track, .final-generating-track, .montage-render-track, .scene-image-batch-progress) { background: var(--sia-line) !important; }
#detailView :is(.resources-progress-bar, .resources-generation-bar, .resources-ai-progress-track > span,
  .voice-progress-bar, .final-generating-bar, .montage-render-bar) { background: var(--sia-teal); }
#detailView :is(.scene-density-estimate, .montage-notice, .resources-ai-generation, .resources-character-guide-summary,
  .summary-complete-badge, .resources-optional-badge, .montage-status-badge) { background: var(--workflow-control-fill) !important; border-color: var(--workflow-edge) !important; }
#detailView :is(.summary-complete-badge, .montage-status-badge) { color: var(--sia-sidebar-accent); }
#detailView .summary-complete-badge[data-status="empty"] { color: var(--sia-muted); }
#detailView .summary-complete-badge[data-status="failed"] { background: var(--sia-danger-soft) !important; color: var(--sia-danger); }
#detailView :is(.montage-render-error, .project-scene-media-error) { color: var(--sia-danger) !important; }
#detailView :is(.summary-script, .project-scene-prompt) { overflow-wrap: anywhere; scrollbar-color: var(--workflow-control-edge) transparent; scrollbar-width: thin; }
#detailView .summary-script { white-space: pre-wrap; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) .topbar .title-icon {
  background: var(--sia-sidebar-active) !important; border-color: color-mix(in srgb, var(--sia-sidebar-active-line) 35%, var(--sia-line));
  box-shadow: inset 0 1px 0 rgba(121,215,210,.035), 0 0 12px rgba(67,189,184,.035); color: var(--sia-sidebar-accent);
}
/* Selectors opened from a saved workflow: do not restyle standalone tools. */
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-dialog, .sia-voice-dialog, .subtitle-style-dialog, .resources-character-guide-dialog, .image-replace-dialog) {
  background: var(--sia-sidebar-bg) !important; border-color: var(--workflow-edge) !important;
  border-radius: 24px; box-shadow: var(--sia-shadow); min-height: 0; max-height: calc(100dvh - 32px); max-width: calc(100vw - 32px);
}
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) .subtitle-style-dialog { display: flex; flex-direction: column; overflow: hidden; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.subtitle-style-dialog-head, .subtitle-style-dialog-actions) { flex-shrink: 0; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) .subtitle-style-dialog-body { min-height: 0; overflow-y: auto; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-modal, .sia-voice-modal) { padding: 16px; place-items: center; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-dialog-header, .sia-voice-dialog-header, .sia-voice-dialog-footer, .subtitle-style-dialog-head, .subtitle-style-dialog-actions) { background: transparent !important; border-color: var(--workflow-edge); }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-dialog-title, .sia-voice-dialog-title, .subtitle-style-dialog-head h2) { font-size: 22px; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-dialog-subtitle, .sia-voice-dialog-subtitle, .subtitle-style-dialog-head p) { color: var(--sia-muted); font-size: 15px; line-height: 1.55; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-card, .sia-voice-card, .subtitle-style-option, .subtitle-font-option, .resources-character-guide-item) { background: var(--sia-surface) !important; border-color: var(--workflow-control-edge); }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-card.is-selected, .sia-voice-card.is-selected, .subtitle-style-option[aria-pressed="true"], .subtitle-font-option[aria-pressed="true"]) { background: var(--workflow-control-fill) !important; border-color: var(--sia-sidebar-active-line); box-shadow: var(--workflow-glow); }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-icon-button, .sia-voice-icon-button, .subtitle-style-dialog-head .icon-button) { min-height: 44px; min-width: 44px; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-button, .sia-voice-button, .subtitle-style-dialog-actions .button) { border-radius: 14px; font-size: 15px; min-height: 48px; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-button.secondary, .sia-voice-button.secondary, .subtitle-style-dialog-actions .button.secondary) { background: var(--workflow-control-fill); border-color: var(--workflow-control-edge); color: var(--sia-heading); }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-button.primary, .sia-voice-button.primary) { background: var(--sia-teal-dark); border-color: var(--workflow-control-edge); }
html[data-theme="dark"] body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-button.primary, .sia-voice-button.primary) { color: var(--sia-bg); }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.subtitle-font-option, .sia-voice-filter) { min-height: 44px; }
body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) :is(.sia-style-dialog, .sia-voice-dialog, .subtitle-style-dialog, .resources-character-guide-dialog, .image-replace-dialog) :is(button, a, input):focus-visible { outline: 2px solid var(--sia-sidebar-accent); outline-offset: 3px; }
/* The persistent theme shortcut must never cover modal actions on short screens. */
body:has(#detailView:not([hidden])):has(.sia-style-modal:not([hidden]), .sia-voice-modal:not([hidden]), #projectSubtitleStyleModal:not([hidden]), #projectCharacterGuideImagesModal:not([hidden])) .floating-theme-toggle { display: none !important; }
@media (max-width: 1100px) {
  #detailView .scene-configuration-bar { grid-template-columns: minmax(0, 1fr); }
  #detailView .scene-configuration-bar > .scene-control { min-height: 0; }
}
@media (max-width: 900px) {
  body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) .floating-theme-toggle { bottom: auto; right: 16px; top: 17px; z-index: 41; }
  body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) .brand { box-sizing: border-box; padding-right: 60px !important; width: 100%; }
  body:has(#detailView:not([hidden]) .project-tab-panel:not([hidden])) .brand-name { font-size: clamp(1.3rem, 6.65vw, 1.62rem) !important; }
}
@media (max-width: 600px) {
  #detailView :is(.scene-workflow-section, .resources-workspace, .voice-workspace, .montage-workspace) { padding: 20px 18px; }
  #detailView .scene-configuration-bar > .scene-control { padding: 16px; }
  #detailView :is(.montage-setup-footer, .montage-workspace-head, .voice-workspace-head) { align-items: stretch; flex-direction: column; }
  #detailView .montage-setup-footer .button { width: 100%; }
  #detailView .montage-setup-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #detailView .scene-controls > .button { padding: 12px 16px; white-space: normal; }
  #detailView :is(.project-select-menu, .resources-more-actions-menu, .project-scene-media-more-menu) { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #detailView :is(.resources-generation-visual *, .final-generating-visual, .scene-creator-icon) { animation: none; transition: none; }
}