/* 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}
.flow-attn{outline:3px solid var(--door);outline-offset:4px;border-radius:8px;animation:flow-pulse 1s 2}
@keyframes flow-pulse{50%{outline-color:transparent}}
.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-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-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)}}

.account-page{max-width:720px;padding:2rem 1rem}