/* Creator refresh (Oct 2026): preview lives in the dock, a compact guide after the first step,
   a live phone preview on desktop, a chapter grid and the merged review & checkout. */

/* 3. The preview button sits in the dock, beside Continue, so it never covers a field. */
.wizard-dock .dock-preview{position:static;flex:none;display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:14px 18px;border:1px solid #dfcbbf;border-radius:999px;background:#fffaf6;box-shadow:none;color:#8f4a5a;font:600 12px/1 'DM Sans',sans-serif;cursor:pointer}
.wizard-dock .dock-preview span{font-size:9px}
.wizard-dock .dock-preview:hover{background:#f7e9e2}
.wizard-dock .dock-content{gap:12px}
@media(max-width:760px){.wizard-dock .dock-preview{padding:13px 12px;font-size:11px}.wizard-dock .dock-content>div{max-width:80px}}
@media(max-width:380px){.wizard-dock .dock-preview{padding:13px 10px}.wizard-dock .dock-preview{font-size:0}.wizard-dock .dock-preview span{font-size:11px}}

/* 2. After the first step the guide is compact: a small dolphin beside its bubble, so the form starts higher. */
#step .guide-small{margin:6px 0 18px}
@media(max-width:760px){
  .step-title{margin-bottom:10px!important}
  #step .guide-small .mascot-wrap{width:52px;height:62px}
  #step .guide-small .speech{padding:11px 13px}
  #step .guide-small .speech p{font-size:13px;line-height:1.55}
}

/* 5. Chapters as a grid: every chapter visible at once, each card adds or removes itself. */
.chapter-grid-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px;font-size:10px;letter-spacing:1.4px;color:#a28376}
.chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.chapter-card{position:relative;display:flex;flex-direction:column;border:1.5px solid #ead9cf;border-radius:16px;background:#fffaf6;overflow:hidden;transition:border-color .25s,box-shadow .25s,translate .25s}
.chapter-card:hover{translate:0 -2px;box-shadow:0 10px 22px #8059581a}
.chapter-card.is-on{border-color:#b34c60;box-shadow:0 0 0 3px #b34c601f}
.chapter-card-art{height:132px;overflow:hidden;pointer-events:none}
.chapter-card-art .picker-art{zoom:.5;min-height:264px}
.chapter-card-body{display:flex;flex-direction:column;gap:5px;padding:12px 13px 13px;flex:1}
.chapter-card-body small{font-size:9px;letter-spacing:1.2px;color:#a28376}
.chapter-card-body h3{margin:0;font:500 18px/1.15 'Playfair Display',Georgia,serif;color:#3d2a2e}
.chapter-card-body p{margin:0;font-size:12px;line-height:1.5;color:#80696c;flex:1}
.chapter-card .picker-actions{display:flex;gap:6px;margin-top:6px}
.chapter-card .picker-actions .button{flex:1;min-width:0;padding:10px 8px;font-size:11px}
.chapter-card .picker-actions .button[aria-pressed="false"]{background:#f3e6e0;color:#8f4a5a}
.chapter-card .picker-actions .chip{padding:8px 10px;font-size:11px}
.chapter-check{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#b34c60;color:#fff;font:700 12px/1 'DM Sans',sans-serif;font-style:normal;scale:0;transition:scale .3s cubic-bezier(.3,1.6,.5,1)}
.chapter-card.is-on .chapter-check{scale:1}
@media(max-width:420px){.chapter-card-art{height:104px}.chapter-card-art .picker-art{zoom:.4;min-height:260px}.chapter-card-body h3{font-size:16px}.chapter-card-body p{display:none}}

/* 1. Desktop live preview: for the story, the left column becomes a phone playing the scene being made. */
@media(min-width:761px){
  body[data-product="story"] .wizard-aside>:not(.live-preview){display:none}
  body[data-product="story"] .wizard-aside{display:flex;flex-direction:column;align-items:center;padding-top:28px;height:auto;max-height:none;min-height:0;top:24px}
}
body:not([data-product="story"]) .live-preview:not(.live-book){display:none}
.live-preview{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.live-preview-label{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.6px;color:#8f625b}
.live-preview-label b{font-weight:700}
.live-preview-label small{font-size:11px;letter-spacing:.3px;color:#a28376}
.live-preview-label small:before{content:'· '}
.live-dot{width:7px;height:7px;border-radius:50%;background:#d6455f;box-shadow:0 0 0 0 #d6455f88;animation:live-dot 1.8s ease-out infinite}
.live-phone{--w:430px;--s:.68;position:relative;width:calc(var(--w) * var(--s) + 22px);padding:11px;border-radius:44px;background:#1d181f;box-shadow:0 30px 60px #3a1f2a40,inset 0 0 0 2px #3a333c}
.live-notch{position:absolute;left:50%;top:17px;z-index:3;width:84px;height:20px;margin-left:-42px;border-radius:12px;background:#1d181f}
.live-screen{width:calc(var(--w) * var(--s));height:calc(700px * var(--s));overflow:hidden;border-radius:34px;background:#201c24}
.live-stage{width:var(--w);height:700px;transform:scale(var(--s));transform-origin:0 0;pointer-events:auto}
.live-stage .story-scene{min-height:700px}
.live-stage .story-scene .scene-inner{min-height:700px}
.live-note{margin:0;font-size:12px;color:#a28376;text-align:center}
@media(max-width:1100px){.live-phone{--s:.6}}
@keyframes live-dot{70%{box-shadow:0 0 0 7px #d6455f00}100%{box-shadow:0 0 0 0 #d6455f00}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* 7. Drag to reorder photos; a listen button on the chosen song. */
.uploaded-photo[draggable="true"]{cursor:grab}
.uploaded-photo.is-dragging{opacity:.45;cursor:grabbing}
.uploaded-photo.is-drop{outline:3px dashed #b34c60;outline-offset:3px}
.listen-chip[aria-pressed="true"]{background:#b34c60;color:#fffaf6;border-color:#b34c60}
/* The recorded voice on the story letter step looks like the message it becomes in the gift. */
body[data-product="story"] #step[data-step="letter"] .voice-preview{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:#bc405b;box-shadow:0 6px 14px #8f2a4333}
body[data-product="story"] #step[data-step="letter"] .voice-preview[hidden]{display:none}
body[data-product="story"] #step[data-step="letter"] .voice-preview:before{content:'♡ Your voice';flex:none;color:#fff3e6;font:600 12px/1 'DM Sans',sans-serif}
body[data-product="story"] #step[data-step="letter"] .voice-preview audio{flex:1;min-width:0;height:34px;border-radius:999px}
body[data-product="story"] #step[data-step="letter"] .voice-preview .chip{background:#fff3e6;border-color:#fff3e6}
.listen-chip{white-space:nowrap;flex:none}
@media(max-width:420px){.listen-chip{padding:8px 10px!important;font-size:11px!important}}

/* Album: the same chapter grid, with each card showing its spread. */
.album-chapter-grid .chapter-card-art{height:150px;display:grid;place-items:center;background:#f6e9e4}
.album-chapter-grid .chapter-card-art>*{zoom:.42;flex:none}
@media(max-width:420px){.album-chapter-grid .chapter-card-art{height:112px}.album-chapter-grid .chapter-card-art>*{zoom:.32}}

/* Album moments: the label lives on its card; empty cards stay small. */
.album-moment-labels>article{display:flex;flex-direction:column}
.moment-label-edit{display:flex;align-items:center;gap:4px;padding:6px 6px 2px}
.moment-label-edit label{flex:1;min-width:0;margin:0}
.moment-label-edit label>span:first-child,.moment-label-edit label>b:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.moment-label-edit input{width:100%;padding:6px 4px!important;min-height:0!important;border:0!important;border-bottom:1px dashed #d8b9ad!important;border-radius:0!important;background:transparent!important;font:500 15px/1.2 'Playfair Display',Georgia,serif!important;text-align:center;color:#3d2a2e}
.moment-label-edit input:focus{outline:none;border-bottom-color:#b34c60!important}
.moment-label-edit small{flex:none;font-size:10px;color:#a28376}
.moment-remove{flex:none;padding:2px 4px!important;font-size:16px!important}
.album-moment-labels>article.is-empty .album-moment-photo,.album-moment-labels>article.is-empty [class*="photo-chooser"]{max-height:120px;overflow:hidden}

/* Album dates: a compact grid of small cards. */
.album-dates-light-table .album-label-slides{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.album-dates-light-table .album-label-slides>article{padding:6px!important;rotate:0deg!important}
.album-dates-light-table .album-label-slides>article b{font-size:12px!important;line-height:1.2!important;margin-top:4px}
.album-dates-light-table .album-label-slides>article>small{font-size:9px}
.album-dates-light-table .album-moment-photo{max-height:96px;aspect-ratio:auto!important}
.album-dates-light-table .album-label-slides>article :is(.chooser-reuse,details,[data-action="toggle-photo-library"]){font-size:10px}

/* Album live preview on desktop: the real book, scaled down, opened at the page being made. */
@media(min-width:761px){
  body[data-product="album"] .wizard-aside>:not(.live-book){display:none}
  body[data-product="album"] .wizard-aside{display:flex;flex-direction:column;align-items:center;padding-top:28px;height:auto;max-height:none;min-height:0;top:24px}
}
body:not([data-product="album"]) .live-book{display:none}
.live-book-frame{width:100%;max-width:480px;height:400px;overflow:hidden;border-radius:18px;background:#e9dcd2;box-shadow:0 24px 50px #3a1f2a2e;position:relative}


@media(max-width:1100px){.live-book-frame{height:330px;--live-scale:.4}}
/* The album's voice step uses the same message look. */
body[data-product="album"] #step[data-step="voice"] .voice-preview{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:#bc405b;box-shadow:0 6px 14px #8f2a4333}
body[data-product="album"] #step[data-step="voice"] .voice-preview[hidden]{display:none}
body[data-product="album"] #step[data-step="voice"] .voice-preview:before{content:'♡ Your voice';flex:none;color:#fff3e6;font:600 12px/1 'DM Sans',sans-serif}
body[data-product="album"] #step[data-step="voice"] .voice-preview audio{flex:1;min-width:0;height:34px}
body[data-product="album"] #step[data-step="voice"] .voice-preview .chip{background:#fff3e6;border-color:#fff3e6}
/* Moment cards keep the slide grid (an older rule turned the labels list into one column). */
body[data-product="album"] .album-label-slides.album-moment-labels{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;gap:12px}
@media(max-width:760px){body[data-product="album"] .album-label-slides.album-moment-labels{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}}
body[data-product="album"] .album-moment-labels>article>b.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
body[data-product="album"] .album-moment-labels .moment-label-edit{width:100%;padding:2px 0 0;gap:2px}
body[data-product="album"] .album-moment-labels .moment-label-edit label{font-size:0;position:static;padding:0}
body[data-product="album"] .album-moment-labels .moment-label-edit input{margin:0;min-height:0;font-size:14px!important;padding:5px 2px!important}
body[data-product="album"] .album-moment-labels .moment-remove{position:static;transform:none;width:26px;min-width:26px;height:26px}
body[data-product="album"] .album-moment-labels article.is-empty .album-moment-photo{min-height:0;aspect-ratio:4/3}
body[data-product="album"] .album-moment-labels article .album-moment-reuse summary{font-size:11px}
/* Small date cards: the "use an album photo" link becomes a compact chip under the photo. */
.album-dates-light-table .album-label-slides>article{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important}
.album-dates-light-table .album-moment-reuse summary{font-size:0!important;padding:2px 0!important;text-align:center;list-style:none}
.album-dates-light-table .album-moment-reuse summary:before{content:'♡ album photo';font-size:10px;color:#a8465b}
.album-dates-light-table .album-moment-reuse summary::-webkit-details-marker{display:none}
.album-dates-light-table .album-moment-reuse summary:after{display:none!important}
.album-dates-light-table .album-label-slides>article>b{text-align:center}
.album-dates-light-table .album-label-slides>article>small{align-self:center}
.album-dates-light-table .album-moment-photo-action{font-size:10px!important}
/* Both photo-slide steps: the reuse link sits in the flow as a small chip, never over the caption. */
body[data-product="album"] .album-label-slides .album-moment-reuse{position:static!important;margin:0!important;width:100%}
body[data-product="album"] .album-label-slides .album-moment-reuse summary{font-size:0!important;padding:3px 0!important;text-align:center;list-style:none;min-height:0!important}
body[data-product="album"] .album-label-slides .album-moment-reuse summary:before{content:'♡ use an album photo';font-size:10px;color:#a8465b}
body[data-product="album"] .album-label-slides .album-moment-reuse summary::-webkit-details-marker{display:none}
body[data-product="album"] .album-label-slides .album-moment-reuse summary:after{display:none!important}
body[data-product="album"] .album-label-slides .album-moment-photo-choose{width:100%;gap:2px}
body[data-product="album"] .album-moment-labels>article{gap:6px!important;padding:9px 8px 10px!important}
body[data-product="album"] .album-moment-labels .moment-label-edit input{text-overflow:ellipsis}

/* The Bione Love logo in the creator header (the tagline is part of the logo). */
.wizard-header .brand-logo{display:inline-flex;align-items:center}
.wizard-header .brand-logo img{display:block;width:auto;height:58px}
@media(max-width:760px){.wizard-header .brand-logo img{height:38px}}
/* Date ideas: the person's own idea gets the full card width, with its number and remove below. */
body[data-product="album"] .album-dates-light-table .moment-label-edit{flex-wrap:wrap;justify-content:space-between}
body[data-product="album"] .album-dates-light-table .moment-label-edit label{flex:1 1 100%}
body[data-product="album"] .album-dates-light-table .moment-label-edit input{font-size:15px!important;text-overflow:clip}
body[data-product="album"] .album-dates-light-table .moment-label-edit small{padding-left:4px}
@media(max-width:760px){body[data-product="album"] .album-dates-light-table .album-label-slides{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}}
.date-idea-add{display:flex;gap:8px;margin:14px 0 4px}
.date-idea-add input{flex:1;min-width:0;min-height:46px;padding:10px 12px;font-size:16px;border:1px solid #e3c6bd;border-radius:12px;background:#fffaf6}
.date-idea-add .add-item{flex:none;min-height:46px;padding:0 16px;white-space:nowrap}
.soon-badge{display:inline-block;font-style:normal;font-size:9px;letter-spacing:.6px;font-weight:600;color:#7a4a3f;background:#f3d9cf;border:1px solid #e3b9ab;border-radius:20px;padding:3px 9px}
.mode-card.is-soon{opacity:.92;border-style:dashed}
.soon-panel{position:relative;overflow:hidden;margin:0 0 20px;padding:26px 22px 22px;text-align:center;border-radius:16px;border:1px solid #e3c6bd;background:linear-gradient(180deg,#fbeee8,#f6e4dc)}
.soon-panel p{position:relative;font-size:13px;line-height:1.8;color:#6d5148;max-width:34ch;margin:14px auto 0}
.soon-notes{position:absolute;inset:0;pointer-events:none}
.soon-notes i{position:absolute;bottom:-18px;font-style:normal;color:#c27583;opacity:0;font-size:20px;animation:soon-float 6s ease-in infinite}
.soon-notes i:nth-child(1){left:10%;animation-delay:0s}.soon-notes i:nth-child(2){left:28%;animation-delay:1.4s;font-size:26px}.soon-notes i:nth-child(3){left:52%;animation-delay:2.6s}.soon-notes i:nth-child(4){left:72%;animation-delay:.8s;font-size:24px}.soon-notes i:nth-child(5){left:88%;animation-delay:3.4s}
.soon-wave{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;height:38px}
.soon-wave i{width:4px;height:12px;border-radius:3px;background:#b85869;animation:soon-wave 1.3s ease-in-out infinite alternate}
.soon-wave i:nth-child(3n){animation-delay:.25s;background:#d88a97}.soon-wave i:nth-child(3n+1){animation-delay:.55s}.soon-wave i:nth-child(4n){animation-duration:1.7s}
@keyframes soon-float{0%{transform:translateY(0) rotate(-8deg);opacity:0}15%{opacity:.7}100%{transform:translateY(-190px) rotate(12deg);opacity:0}}
@keyframes soon-wave{to{height:34px}}
@media(prefers-reduced-motion:reduce){.soon-notes i,.soon-wave i{animation:none}.soon-notes i{opacity:.45;bottom:auto;top:12px}.soon-wave i{height:20px}.soon-wave i:nth-child(2n){height:12px}.soon-wave i:nth-child(3n){height:28px}}