/* Project progress uses the same navigation, fonts and buttons as the Studio. */
.customer-project-view { min-width: 0; }
.customer-project-view [hidden] { display: none !important; }
.customer-project-view .creation-intro { display: flex; align-items: center; gap: 24px; margin: 24px 0; max-width: 880px; }
.customer-project-view .creation-intro h2 { margin: 0 0 10px; }
.customer-project-view .creation-intro p:last-child { color: var(--bb-muted); margin-bottom: 0; }
.customer-project-view .creation-active-cover { display: block; width: 120px; height: auto; border-radius: 14px; flex: 0 0 auto; }
.customer-project-view .creation-card { background: var(--bb-pearl); border: 1px solid var(--bb-line); border-radius: 20px; padding: 28px; margin-bottom: 24px; min-width: 0; }
.customer-project-view .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.customer-project-view .section-heading h3 { margin: 0; }
.customer-project-view .creation-honey { width: 100%; margin: 0; }
.customer-project-view .creation-card.is-waiting { padding: 0; border: 0; background: transparent; }
.customer-project-view .creation-honey .honey-entertainment { width: 100%; }
.customer-project-view .creation-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.customer-project-view .creation-actions:empty { display: none; }
.customer-project-view .creation-actions > p { flex: 1; min-width: 190px; }
.customer-project-view .button.secondary { background: transparent; color: var(--bb-teal); border: 1px solid var(--bb-line); }
.customer-project-view .creation-notice { padding: 12px 0; overflow-wrap: anywhere; }
.customer-project-view .error { color: #8b3d30; }
.creation-recovery { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.creation-recovery > .button { flex: 0 0 auto; }
.retry-credit-summary { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.4; }
.retry-refund-note { font-size: 12px; font-weight: 400; color: var(--bb-muted); }
.creation-recovery .creation-retry-error { flex: 1 1 170px; margin: 0; color: #8b3d30; font-size: 14px; overflow-wrap: anywhere; }
.creation-retry-pending { margin: 0; color: var(--bb-teal); font-weight: 600; }
.customer-project-view.is-generating .creation-intro { gap: 14px; margin: 12px 0 16px; }
.customer-project-view.is-generating .creation-active-cover { width: 64px; }
.customer-project-view.is-generating .creation-intro h2 { margin-bottom: 0; }

/* The same saved clip panel lives in Honey while creation is active. */
.creation-honey [data-customer-clips] .is-in-honey { margin: 0; padding: 20px clamp(16px, 3vw, 40px); border: 0; border-bottom: 1px solid var(--bb-line); border-radius: 0; background: transparent; }
.creation-honey .is-in-honey .section-heading { margin-bottom: 8px; }
.creation-honey .is-in-honey #video-takes-title { margin: 0; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.15; }
.landing-waiting-slot [data-generation-waiting] #video-takes-panel :is(button, select, .button) { min-height: 44px; font-family: inherit; font-size: 14px; }
.creation-honey .is-in-honey .video-takes-toolbar:has(button[hidden]) { display: none; }
.creation-honey .is-in-honey:has(#video-takes-empty:not([hidden])) > p:not(#video-takes-notice) { display: none; }
.creation-honey .is-in-honey:has(#video-takes-empty:not([hidden])) #refresh-video-takes { display: none; }
.creation-honey .is-in-honey:has(#video-takes-empty:not([hidden])) #video-takes-layout { display: none; }
.creation-honey .is-in-honey #video-takes-parts { max-height: none; overflow-x: auto; overflow-y: hidden; padding: 12px; }
.video-preview-placeholder p { margin: 0 0 12px; color: var(--bb-muted); font-size: 13px; }
.video-preview-loading-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 23vw, 260px); gap: 12px; overflow-x: auto; padding: 12px; scrollbar-width: thin; border-radius: 20px; background: rgba(var(--bb-powder-rgb), .48); }
@media (max-width: 650px) {
  .customer-project-view .creation-intro { gap: 16px; }
  .customer-project-view .creation-active-cover { width: 92px; }
  .customer-project-view .creation-intro p:last-child { font-size: 14px; }
  .customer-project-view .creation-card { padding: 20px 16px; border-radius: 16px; }
  .customer-project-view .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .customer-project-view .creation-actions { align-items: stretch; }
  .customer-project-view .creation-actions > .button { width: 100%; }
}