/* flow.css — UI added by flow.js on top of site.css (card CBAB-MVP). Uses site.css tokens. */

/* Empty photo slots show a cartoon silhouette placeholder (no real people). */
.flow-live .slot:not(.filled) label{background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Ccircle cx='30' cy='20' r='12' fill='%23D8D9EE'/%3E%3Cpath d='M10 98V58c0-14 9-24 20-24s20 10 20 24v40z' fill='%23D8D9EE'/%3E%3C/svg%3E") center 92%/26% auto no-repeat}
.flow-live .slot.is-uploading{opacity:.6}
.flow-live .slot.is-uploading::after{content:"…";position:absolute;inset:auto 0 8px;text-align:center;font-weight:700}
.go-price{font-weight:500;opacity:.85;white-space:nowrap}
.flow-note{font-size:.85rem;color:var(--muted);margin:.4rem 0 0}
.flow-legal{font-size:.95rem;font-weight:600;margin:0 0 .4rem}
.flow-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.flow-msg{min-height:1.2em;margin:.4rem 0 0;font-size:.95rem}
.flow-msg.is-warn{color:var(--accent-text)}
.flow-msg.is-error{color:#B00020}
.flow-msg.is-ok{color:#1E7A3C}
.flow-muted{color:var(--muted);font-size:.9rem}
/* Attention ring: a separate layer that pulses with opacity only (no repaint of the page while it blinks). */
.flow-attn{position:relative}
.flow-attn::before{content:"";position:absolute;inset:-7px;border:3px solid var(--door);border-radius:12px;pointer-events:none;z-index:3;will-change:opacity;animation:flow-pulse 1s 2}
@keyframes flow-pulse{50%{opacity:0}}
.flow-account-bar{display:flex;gap:.75rem;justify-content:flex-end;align-items:center;font-size:.9rem;margin-bottom:.5rem}
.flow-link{background:none;border:0;padding:0;color:var(--accent-text);text-decoration:underline;cursor:pointer;font:inherit}
.flow-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.8rem}

.flow-banner{display:flex;gap:1rem;justify-content:center;align-items:center;padding:.6rem 1rem;background:var(--brass);color:var(--ink);font-weight:600}
.flow-banner[hidden]{display:none}

.flow-status-row{grid-column:1/-1;min-width:0;width:100%;display:grid;gap:var(--ivs-ds-space-16)}
.flow-tasks{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));max-width:1100px;margin:1.5rem auto 0;padding:0 var(--ivs-ds-space-16)}
.flow-tasks:empty{display:none}
.flow-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem;color:var(--ink)}
.flow-card video{width:100%;aspect-ratio:9/16;border-radius:10px;background:var(--night)}
.flow-card-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 .4rem}
.flow-card-stage{font-weight:600;margin:.2rem 0}
.flow-card-timer{font-variant-numeric:tabular-nums;font-size:1.6rem;margin:.2rem 0}
.flow-card[data-status=failed]{border-color:var(--accent-text)}
.flow-making-heading{display:flex;align-items:center;gap:var(--ivs-ds-space-12)}
.flow-spinner{display:inline-block;width:1.25rem;height:1.25rem;flex:none;border:3px solid var(--door);border-top-color:transparent;border-radius:50%;animation:flow-spin .8s linear infinite}
.flow-progress{height:.375rem;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--muted) 25%,transparent)}
.flow-progress-fill{display:block;height:100%;width:5%;border-radius:inherit;background:var(--door);transition:width .3s ease}
.flow-progress.is-indeterminate .flow-progress-fill{width:35%;animation:flow-progress 1.5s ease-in-out infinite}
.flow-status-badge{display:inline-flex;align-items:center;gap:var(--ivs-ds-space-8);font-size:.85rem;font-weight:600;white-space:nowrap}
.flow-status-badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--muted)}
.flow-status-badge.is-warning{color:var(--accent-text)}
.flow-status-badge.is-warning::before{background:var(--accent-text)}
@keyframes flow-spin{to{transform:rotate(360deg)}}
@keyframes flow-progress{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
@media(prefers-reduced-motion:reduce){.flow-spinner{animation:none;border-color:var(--door);border-right-color:transparent}.flow-progress-fill{transition:none}.flow-progress.is-indeterminate .flow-progress-fill{width:100%;animation:none;opacity:.6}}

.flow-modal{position:fixed;inset:0;z-index:1000;background:rgba(11,10,30,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
.flow-modal[hidden]{display:none}
.flow-modal-card{position:relative;background:var(--surface);color:var(--ink);border-radius:16px;max-width:440px;width:100%;max-height:90vh;overflow:auto;padding:1.5rem}
.flow-modal-card h2{margin:0 2rem .5rem 0;font-size:1.5rem;line-height:1.2}
.flow-modal-card h2:focus{outline:none}
.flow-modal-close{position:absolute;top:.5rem;right:.75rem;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}
.flow-email-form{display:grid;gap:.5rem;margin-top:1rem}
.flow-email-form input{padding:.7rem;border:1px solid var(--line-strong);border-radius:10px;font:inherit}
.flow-google{width:100%}
.flow-packs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}
.flow-pack{display:grid;gap:.2rem;padding:.9rem;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);cursor:pointer;font:inherit;text-align:left;color:var(--ink)}
.flow-pack.is-featured{border:2px solid var(--door)}
.flow-pack.is-paused,.flow-pack:disabled{cursor:not-allowed;opacity:.55}
.flow-balance{font-size:1.4rem;font-weight:700;margin:.2rem 0}
.flow-video-list,.flow-order-list{list-style:none;padding:0;display:grid;gap:.4rem}
.flow-video-list li,.flow-order-list li{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:.9rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}

.pay-return{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--aubergine);padding:1rem}
.pay-return-card{background:var(--surface);color:var(--ink);border-radius:18px;max-width:420px;width:100%;padding:2rem;text-align:center}
.pay-return-tag{text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;color:var(--muted)}
.pay-return-mark{font-size:2.6rem;line-height:1;margin:.5rem 0}
.pay-return-card[data-state=paid] .pay-return-mark{color:#1E7A3C}
.pay-return-data{font-weight:700}
.pay-return-ref{font-size:.75rem;color:var(--muted);margin-top:1rem;word-break:break-all}
.pay-return-timer{height:4px;background:var(--door);margin-top:1rem;animation:flow-timer 3.5s linear forwards;transform-origin:left}
@keyframes flow-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Result card sits inside the dark hero: undo the hero's cream outline button (CBAB-ACCOUNT-REUSE). */
[data-block=hero] .flow-card .btn-outline{border-color:var(--aubergine);color:var(--ink);background:var(--surface)}
[data-block=hero] .flow-card .btn-outline:hover{background:var(--blush)}
.flow-live .slot.flow-attn::before{border-radius:16px}
/* Account modal body = React panel island (shadow root, own styles). */
.flow-panel-host{min-height:120px}
/* Result cards sit in the hero grid: size from the column, not from max-width (was 4 × 240 px tracks on a 390 px phone). */
.flow-tasks{width:100%;min-width:0;max-width:none;margin:0;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}

/* REPURCHASE-1103: "Make another one" block, Best value badge, nudge toast */
.flow-again{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);display:grid;gap:.5rem;min-width:0}
.flow-again h3{font-size:1.1rem;margin:0}
.flow-again .btn{width:100%;justify-content:center;text-align:center}
.flow-again-left{font-weight:700;margin:0}
.flow-deal{display:grid;gap:.5rem;padding:.8rem;border:2px solid var(--door);border-radius:12px;background:var(--surface)}
.flow-badge{justify-self:start;padding:.1rem .6rem;border-radius:999px;background:var(--brass);color:var(--ink);font-size:.8rem;font-weight:700;line-height:1.5}
.flow-pack{position:relative}
.flow-pack .flow-badge{position:absolute;top:-.6rem;right:.5rem}
.flow-sum{font-weight:600;margin:.2rem 0 .6rem}
.flow-toast{position:fixed;z-index:1100;top:.75rem;left:50%;transform:translateX(-50%);width:calc(100% - 1.5rem);max-width:420px;display:flex;gap:.6rem;align-items:center;justify-content:space-between;padding:.7rem .9rem;border-radius:12px;background:var(--aubergine);color:var(--on-dark);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.flow-toast-text{min-width:0}
.flow-toast-go{flex:none;background:var(--cream);color:var(--ink);border:2px solid var(--cream);width:auto}
.flow-toast-x{flex:none;background:none;border:0;color:var(--on-dark);font-size:1.4rem;line-height:1;cursor:pointer;padding:.2rem .4rem}
.flow-nudge{outline:3px solid var(--door);outline-offset:-3px;border-radius:12px}