/* Shared rendered-project presentation, based on the Clipping gallery. */
.gallery-title:has(#gallery-title-text) { flex-wrap: wrap; gap: 16px; align-items: center; }
#gallery-title-text { flex: 1 1 300px; min-width: 0; overflow-wrap: anywhere; }
#clip-status-controls { gap: 4px; padding: 4px; }
#clip-status-controls .clip-status-filter { min-height: 44px; padding: 10px 14px; font-size: 14px; line-height: 1.2; }
#btn-back-projects, #btn-post-selected-clips { min-height: 44px; padding: 10px 16px; font-size: 14px; line-height: 1.2; white-space: nowrap; }
#btn-post-selected-clips.sp-action { align-items: center; justify-content: center; gap: 10px; }
#btn-post-selected-clips .sp-action-icon { flex: 0 0 18px; }
#clip-status-controls .clip-status-filter:focus-visible { outline: 3px solid var(--v2-blue-light); outline-offset: 2px; }
@media (max-width: 760px) {
    .gallery-title:has(#gallery-title-text) .gallery-actions { width: 100%; gap: 10px; }
    #clip-status-controls { width: 100%; }
    #clip-status-controls .clip-status-filter { flex: 1; padding-inline: 8px; }
}
.sp-project-gallery { width: 100%; max-width: none; margin-top: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sp-project-gallery > h3, .sp-project-gallery .history-head h2 { font-family: 'Outfit', system-ui, sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--v2-white); margin: 0 0 18px; }
.sp-project-gallery .history-head { margin-bottom: 20px; }
.sp-project-gallery .history-head h2 { margin: 0; }
.sp-project-gallery .history-subtitle, .sp-project-gallery .rendered-copy, .sp-project-gallery .history-head .eyebrow, .sp-project-gallery .history-head .step-label { display: none; }
.sp-project-gallery .rendered-list, .sp-project-gallery .history-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr)); gap: 16px; margin-top: 0; align-items: start; }
.sp-project-gallery .rendered-project, .sp-project-gallery .history-card { display: block; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 16px; background: var(--v2-fill); }
.sp-project-gallery .rendered-project-summary { display: block; padding: 0; }
.sp-project-gallery .rendered-project-thumb, .sp-project-gallery .history-thumb { display: block; position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 16/9 !important; object-fit: cover; border: 0; border-radius: 0; background: #000; }
.sp-project-gallery .history-thumb { display: grid; place-items: center; }
.sp-project-gallery .history-thumb img { object-fit: cover; }
.sp-project-gallery .rendered-project-copy, .sp-project-gallery .history-card > div:last-child { display: grid; gap: 8px; padding: 16px; }
.sp-project-gallery .rendered-project-copy strong, .sp-project-gallery .history-card h3 { font: 700 .95rem/1.45 'Manrope',sans-serif; color: var(--v2-white); }
.sp-project-gallery .rendered-project-copy span, .sp-project-gallery .history-meta { font: 400 .8rem/1.45 'Manrope',sans-serif; color: var(--v2-muted); }
.sp-project-gallery .rendered-project-open { display: inline-block; margin: 0 18px 18px; padding: 9px 12px; border: 1px solid var(--v2-border); border-radius: 8px; }
.sp-project-gallery .history-actions { margin-top: 6px; }
.sp-project-gallery .history-action { font-size: .75rem; min-height: 36px; }
.sp-project-gallery .history-empty, .sp-project-gallery .empty-history { grid-column: 1/-1; padding: 32px 18px; }
.sp-project-gallery summary:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: -3px; }
.sp-project-gallery .rendered-project[open] { border-color: var(--v2-blue); }
@media(min-width:800px) { .sp-project-gallery .rendered-project[open] { grid-column: 1/-1; } .sp-project-gallery .rendered-project[open] .rendered-project-summary { display:grid; grid-template-columns:280px 1fr auto; align-items:center; } .sp-project-gallery .rendered-project[open] .rendered-project-open { margin:18px; } }

body.editor-page { height: auto; min-height: 100vh; background-repeat: no-repeat; }

/* Editor projects use their first rendered clip as the picture; vertical
   clips sit letterboxed in the 16:9 frame like Caption Maker's cards. */
.sp-project-gallery video.rendered-project-thumb { object-fit: contain; pointer-events: none; }
.sp-project-gallery span.rendered-project-thumb { display: grid; place-items: center; color: var(--v2-muted); font: 600 .8rem/1 'Manrope', sans-serif; }
.sp-project-gallery .rendered-project-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.editor-page .sp-project-gallery .rendered-project-clips { grid-template-columns: minmax(0, 1fr); }
body.editor-page .sp-project-gallery .rendered-card video {
    width: auto; max-width: 100%; height: min(75vh, 720px); margin-inline: auto;
}

.sp-project-gallery .rendered-project-clips { grid-template-columns: repeat(auto-fill,minmax(min(240px,100%),1fr)); padding: 18px; gap: 18px; }

.sp-gallery-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 0; padding: 0; color: white; background: transparent; cursor: pointer; font: 700 14px/1.2 system-ui,sans-serif; text-shadow: 0 1px 4px #000; }
.sp-gallery-play::before { content: '\25B6'; display: grid; place-items: center; width: 54px; height: 54px; padding-left: 3px; border: 1px solid #ffffffa8; border-radius: 50%; background: #090b11dd; font-size: 20px; }
.sp-gallery-play:hover::before, .sp-gallery-play:focus-visible::before { background: #1014ef; }
.sp-gallery-play:focus-visible { outline: 3px solid #879aff; outline-offset: -4px; }
.sp-gallery-play[hidden], .sp-gallery-feedback[hidden], .sp-gallery-retry[hidden] { display: none; }
.sp-gallery-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
body.editor-page .sp-project-gallery .rendered-card video.sp-gallery-video { width: 100%; height: 100%; margin: 0; }
.sp-gallery-video:focus-visible { outline: 3px solid #879aff; outline-offset: -3px; }
.sp-gallery-feedback { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 52px; display: grid; justify-items: start; gap: 8px; padding: 12px; border: 1px solid #4c5366; border-radius: 8px; color: #fff; background: #101217f2; text-align: left; }
.sp-gallery-status { margin: 0; color: #fff; font: 400 13px/1.45 system-ui,sans-serif; overflow-wrap: anywhere; }
.sp-gallery-retry, .sp-gallery-stop { min-height: 40px; padding: 8px 12px; border: 1px solid #70798e; border-radius: 7px; color: #fff; background: #212633; cursor: pointer; font: 600 13px/1.3 system-ui,sans-serif; }
.sp-gallery-stop { position: absolute; top: 8px; right: 8px; z-index: 2; background: #101217df; }
.sp-gallery-retry:focus-visible, .sp-gallery-stop:focus-visible { outline: 3px solid #879aff; outline-offset: 2px; }
@media(pointer:coarse) { .sp-gallery-retry, .sp-gallery-stop { min-height: 44px; } }
.clip-curation-reason { margin: 8px 0 0; color: var(--text-muted, #b3b9c9); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clip-card { position: relative; }
.clip-card .sp-gallery-stop { right: 60px; }
.project-select-box { color: var(--v2-paper, #F6F8FA); text-transform: none; letter-spacing: normal; }
.sp-library-actions { position: relative; font: 600 .8rem/1.3 'Manrope', sans-serif; }
.sp-library-actions[hidden], .gallery-feedback[hidden] { display: none !important; }
.sp-library-actions > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--v2-border); border-radius: 8px; color: var(--v2-muted); cursor: pointer; list-style: none; white-space: nowrap; }
.sp-library-actions > summary::after { content: '\2304'; }
.sp-library-actions > summary::-webkit-details-marker { display: none; }
.sp-library-actions > div { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 210px; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--v2-border); border-radius: 10px; background: var(--bg-color, #0d0e12); box-shadow: 0 8px 22px #0008; }
.sp-library-actions > div button { width: 100%; min-height: 44px; }
.sp-library-actions > summary:focus-visible { outline: 3px solid var(--v2-blue-light); outline-offset: 3px; }
.gallery-feedback { margin: 0 0 16px; color: var(--v2-muted); font: 400 .85rem/1.5 'Manrope', sans-serif; overflow-wrap: anywhere; }
.gallery-read-error p { margin: 0 0 16px; }
.gallery-read-error button { min-height: 44px; }
.clip-actions .clip-selection { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid #ffffff35; border-radius: 7px; color: #fff; background: #0a0d14dc; cursor: pointer; font: 600 12px Manrope, sans-serif; text-transform: none; letter-spacing: normal; }
.clip-more-actions { position: absolute; top: 8px; right: 8px; z-index: 3; background: #0a0d14dc; border-radius: 8px; }
.clip-actions:has(.clip-more-actions) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 8px; }
.clip-actions:has(.clip-more-actions) > .btn-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; padding: 8px; border-radius: 8px; font: 600 14px/1.2 'Manrope',system-ui,sans-serif; white-space: nowrap; }
.clip-actions:has(.clip-more-actions) > .btn-action .sp-action-icon { flex-shrink: 0; }
.clip-post-badges { flex-wrap: wrap; gap: 8px; }
.clip-post-badges .clip-version, .clip-post-badges .clip-edit-badge { display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 3px 10px; border: 1px solid color-mix(in srgb,var(--v2-blue-light) 45%,transparent); border-radius: 999px; background: color-mix(in srgb,var(--v2-blue-light) 10%,transparent); color: var(--text-main); font: 600 12px/1.25 'Manrope',system-ui,sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; flex-shrink: 0; }
.clip-card.sp-rendered-result { outline: 3px solid var(--v2-blue-light); outline-offset: 3px; }
.clip-card:focus-visible { outline: 3px solid var(--v2-blue-light); outline-offset: 3px; }
.clip-more-actions > summary { display: flex; justify-content: center; align-items: center; width: 40px; min-height: 40px; list-style: none; cursor: pointer; color: var(--v2-paper, #F6F8FA); border: 1px solid #ffffff35; border-radius: 8px; }
.clip-more-actions > summary::-webkit-details-marker { display: none; }
.clip-more-actions[open] { padding: 8px; border: 1px solid var(--v2-border); }
.clip-more-actions[open] > summary { margin-left: auto; }
.clip-more-actions[open] > div { padding-top: 8px; }
.clip-more-actions > summary:focus-visible { outline: 2px solid var(--v2-blue-light); outline-offset: 3px; }
@media (max-width:760px) { .project-select-box, .clip-actions .clip-selection, .clip-more-actions > summary, .clip-actions:has(.clip-more-actions) > .btn-action { min-height: 44px; } .clip-more-actions > summary { width: 44px; } }