/* StoryBook funnel components (quiz, preview). Builds on quiz.css tokens (DECISIONS-1007 item 16): paper #fff8f2,
   ink #2b2118, CTA #ff5a36, Fredoka headings + Nunito body, 18 px text, 16 px radii, buttons >= 56 px. */
:root {
  --sv-ink: #2b2118;
  --sv-muted: #6b5b53;
  --sv-line: #f0e2d8;
  --sv-accent-ink: #b8361a;
  --sv-focus: #2b2118;
  --sv-error: #b3261e;
  --sv-ok: #2e8b57;
}

/* ---------- app shell: header, a scrolling region, the step bar under it (never covering content) ---------- */
html, body { height: 100%; }
body { margin: 0; overflow: hidden; }
#sb-root { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: clip; }
/* UB-1020: iOS keyboard: app.js followKeyboard() sets --sb-kb to the part of the page the keyboard covers (0 otherwise) */
#sb-root { height: calc(100dvh - var(--sb-kb, 0px)); }
#sb-root > .sb-announce, #sb-root > .sb-header, #sb-root > .sb-navbar { flex: 0 0 auto; }
.sv-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.sv-scroll .sb-main { flex: 1 0 auto; overflow-x: clip; padding: 24px 20px 48px; }
.sv-scroll .sb-footer { flex: 0 0 auto; }
#sb-app[data-screen="style"], #sb-app[data-screen="meet"], #sb-app[data-screen="preview"] { max-width: 980px; }
.sv-screen .sb-step__title:focus { outline: none; }
.sv-center { text-align: center; }
.sv-skip { position: absolute; left: 12px; top: -80px; background: #fff; color: var(--sv-ink); padding: 10px 14px; border-radius: 6px; z-index: 20; }
.sv-skip:focus { top: 12px; }
.sv-header-link { color: var(--sv-muted); }

/* a new screen eases in; polls and in-place updates never replay it (the class is set only on a screen change) */
.sv-enter { animation: sv-in .22s ease-out; }
@keyframes sv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.sv-primary, .sb-btn-next.sv-approve, .sv-adjust .sb-btn-next, .sv-rewrite .sb-btn-next, .sv-link-button { color: #fff; min-height: 52px; height: auto; }
.sb-actions .sv-primary { min-width: 220px; }
.sv-link-button { text-decoration: none; }
.bf-primary, .bf-secondary { width: 100%; min-height: 52px; padding: 14px 18px; font: 600 16px/1.4 var(--sans); border-radius: 12px; border: 0; cursor: pointer; }
.bf-primary { background: var(--accent); color: #fff; transition: background-color .15s; }
.bf-primary:hover:not(:disabled) { background: var(--accent-hover); }
.bf-primary:disabled { background: #eadbd2; color: #5e4f48; cursor: default; overflow-wrap: anywhere; }
.bf-secondary { background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; margin-top: 6px; min-height: 44px; }
.bf-secondary:disabled { cursor: default; opacity: .55; }
/* no payment provider: a plain information row, not a faded call to action */
.bf-primary.bf-unavailable, .bf-primary.bf-unavailable:disabled { background: var(--paper-2); color: var(--ink); border: 1px solid var(--field); cursor: default; opacity: 1; }
.sv-secondary { display: block; margin-left: auto; margin-right: auto; width: auto; }
.sv-btn { background: var(--accent); color: #fff; border: 0; border-radius: 12px; font: 600 15px/1.3 var(--sans); padding: 10px 18px; min-height: 44px; cursor: pointer; }
.sv-btn:hover:not(:disabled) { background: var(--accent-hover); }
#sb-app :focus-visible { outline: 3px solid var(--sv-focus); outline-offset: 3px; }
#sb-app h1:focus-visible { outline: none; }
#sb-app .sb-input:focus-visible, #sb-app .sb-textarea:focus-visible, #sb-app .sb-select:focus-visible { outline: none; }  /* border + soft ring instead */

/* ---------- notices, field errors, hints ---------- */
.sv-notice { border-radius: 8px; padding: 12px 14px; margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.sv-notice p { margin: 0; }
.sv-notice--error { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sv-error); }
.sv-notice--info { background: var(--paper-2); border-left: 4px solid var(--accent); }
.sv-notice__actions { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-top: 10px; }
.sv-notice__actions .bf-secondary { width: auto; margin: 0; }
.sv-field-error { color: var(--sv-error); font-size: 14px; line-height: 1.5; margin: 6px 0 0; }
.sv-hint { color: var(--sv-muted); font-size: 14px; line-height: 1.55; margin: 6px 0 0; }
.sv-consent--error { border-color: var(--sv-error); }
.sv-pollnote { color: var(--sv-muted); font-size: 14px; text-align: center; margin: 12px 0 0; }
.sv-pollnote:empty { display: none; }
.sv-progress-line { text-align: center; color: var(--sv-muted); font-size: 15px; margin: -8px 0 18px; }
.sv-boot { text-align: center; padding: 64px 16px; color: var(--sv-muted); }

/* ---------- screen 1 + 2: occasion, recipient, giver ---------- */
.sv-recipients, .sv-occasions { gap: 10px; }
.sv-recipient__text { display: flex; flex-direction: column; gap: 2px; }
.sv-recipient__title { font: 600 18px/1.3 var(--serif); color: var(--ink); }
.sv-recipient__hint { font-size: 14px; color: var(--sv-muted); }
.sv-occasions--more { margin-top: 12px; }
.sv-giver { margin: 22px 0 6px; border: 0; padding: 0; min-width: 0; }
.sv-giver legend { padding: 0; }

/* ---------- chips (giver, kind of story, eye/hair, "what fits") ---------- */
.sv-chips, .sv-segments { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-chip, .sv-segment {
  min-height: 44px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--field);
  background: #fff; color: var(--ink);
  font: 500 15px/1.2 var(--sans); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.sv-segment { min-width: 72px; }
.sv-chip--on, .sv-segment--on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sv-chip:active, .sv-segment:active { transform: scale(.98); }

/* ---------- screen 2 + 5: character cards ---------- */
.sv-char { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px #38241612; padding: 18px 18px 6px; margin: 0 0 20px; min-width: 0; }
.sv-char__legend { font: 600 21px/1.3 var(--serif); color: var(--ink); padding: 0 6px; }
.sv-char .sb-field__label, .sv-field .sb-field__label, .sv-group > .sb-field__label { font-size: 16px; line-height: 1.5; margin-bottom: 6px; }
.sv-field { margin-bottom: 18px; }
.sv-photos { margin-bottom: 18px; }
.sv-photo-add { width: 100%; min-height: 104px; border: 2px dashed var(--field); border-radius: 10px; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-family: var(--sans); color: var(--ink); padding: 14px; }
.sv-photo-add::before { content: ""; width: 30px; height: 30px; margin-bottom: 2px; background: currentColor; color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.sv-photo-add:hover:not(:disabled), .sb-dropzone--drag .sv-photo-add { border-color: var(--accent); background: #fff; }
.sv-photo-add:disabled { cursor: default; opacity: .6; }
.sv-photo-add__label { font: 600 16px/1.3 var(--sans); color: var(--accent); }
.sv-photo-add__count { font-size: 13px; color: var(--sv-muted); }
.sv-photos--error .sv-photo-add { border-color: var(--sv-error); }
.sv-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv-select { appearance: auto; }

/* ---------- screen 3: styles (tiles look like book covers, as on the landing) ---------- */
.sv-styles { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* 27.10 (Danilo): four styles again (drawn-2d) */
.sv-style { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; gap: 6px; background: transparent; border: 0; padding: 4px 4px 8px; cursor: pointer; font-family: var(--sans); color: var(--ink); border-radius: 10px; }
.sv-style__art { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 4px 10px 10px 4px; overflow: hidden; background: var(--paper-2); box-shadow: -5px 0 0 #e1d7c8, 0 16px 30px #38241620; margin-left: 5px; width: calc(100% - 5px); }
.sv-style__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-style--on .sv-style__art { outline: 3px solid var(--accent); outline-offset: 3px; }
/* a tile still being drawn: the sample is only a faint hint behind a moving shimmer and the words */
.sv-style__art--pending img { filter: blur(3px) saturate(.6); opacity: .45; transform: scale(1.06); }
.sv-style__art--pending::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, #ffffff8c 50%, transparent 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; }
.sv-badge { position: absolute; z-index: 1; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); text-align: center; white-space: normal; background: rgba(255, 249, 245, .92); color: var(--ink); font: 500 14px/1.35 var(--sans); padding: 8px 10px; border-radius: 8px; }
.sv-badge--failed { top: auto; bottom: 10px; transform: none; font-size: 13px; }
.sv-style__title { font: 600 18px/1.3 var(--serif); padding: 6px 4px 0 9px; }
.sv-style__desc { font-size: 14px; line-height: 1.45; color: var(--sv-muted); padding: 0 4px 0 9px; }

/* ---------- screen 4: meet ---------- */
.sv-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 18px; }
.sv-person { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px #38241612; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-person--approved { border-color: #b8d8bd; }
.sv-person__art { margin: 0 auto; width: 100%; max-width: min(100%, calc(40vh * 3 / 4)); aspect-ratio: 3 / 4; border-radius: 4px 10px 10px 4px; overflow: hidden; background: var(--paper-2); display: flex; align-items: center; justify-content: center; position: relative; }
.sv-person__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-person__name { font: 600 24px/1.25 var(--serif); margin: 6px 0 0; overflow-wrap: anywhere; text-align: center; }
.sv-person__role { margin: 0 0 6px; color: var(--sv-muted); font-size: 14px; text-align: center; }
.sv-approved { color: var(--sv-ok); font-weight: 600; margin: 4px 0; text-align: center; }
.sv-drawing { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--sv-muted); font-size: 15px; text-align: center; padding: 16px; }
.sv-drawing .sb-spinner { margin: 0 0 8px; width: 36px; height: 36px; }
.sv-person__art .sv-drawing { position: absolute; inset: 0; justify-content: center; background: linear-gradient(100deg, var(--paper-2) 20%, #fff 50%, var(--paper-2) 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; }
.sv-approve { width: 100%; }
.sv-adjust { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
.sv-adjust .sb-btn-next { width: 100%; }

/* ---------- screen 5 ---------- */
.sv-castlist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.sv-castlist__item { display: grid; grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.sv-castlist__item img, .sv-castlist__blank { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--paper-2); display: block; }
.sv-castlist__name { font: 600 18px/1.3 var(--serif); overflow-wrap: anywhere; }
.sv-castlist__role { color: var(--sv-muted); font-size: 14px; grid-column: 2; }
.sv-castlist__remove { grid-column: 3; grid-row: 1 / 3; width: auto; margin: 0; }

/* ---------- screen 6: story ---------- */
.sv-group { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.sv-group .sb-textarea { min-height: 64px; }
.sv-fits { margin: 0 0 18px; }

/* ---------- screen 7: waiting ---------- */
.sv-story-title { text-align: center; font: 600 22px/1.35 var(--serif); margin: -4px 0 18px; overflow-wrap: anywhere; }
.sv-bar { display: block; width: 100%; max-width: 440px; height: 10px; margin: 0 auto 20px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
.sv-bar::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.sv-bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.sv-bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
/* nothing finished yet: the empty bar still moves */
.sv-bar--busy { background: linear-gradient(90deg, var(--line) 0, #f7d8cb 50%, var(--line) 100%) 0 0 / 200% 100%; animation: sv-shimmer 1.6s linear infinite; }
.sv-bar--busy::-webkit-progress-bar { background: transparent; }
.sv-steps { list-style: none; max-width: 440px; margin: 0 auto; padding: 0; display: grid; gap: 8px; }
.sv-steps__item { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--sv-muted); }
.sv-steps__item--done { color: var(--ink); }
.sv-steps__item--done .sv-steps__mark { background: var(--sv-ok); border-color: var(--sv-ok); color: #fff; }
.sv-steps__item--now { color: var(--ink); font-weight: 600; border-color: var(--field); background: linear-gradient(90deg, #fff 0, var(--paper-2) 50%, #fff 100%) 0 0 / 200% 100%; animation: sv-shimmer 1.6s linear infinite; }
.sv-steps__item--now .sv-steps__mark { border-color: var(--accent); border-top-color: transparent; animation: sb-spin 1s linear infinite; }
.sv-steps__mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
@keyframes sv-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* warm lines under the bar: five lines, one visible at a time, 8 s each (CSS only: no timers next to the poll) */
.sv-lines { position: relative; list-style: none; max-width: 440px; min-height: 3.2em; margin: 0 auto 20px; padding: 0; text-align: center; color: var(--ink); font-size: 16px; line-height: 1.55; }
.sv-lines li { position: absolute; left: 0; right: 0; top: 0; opacity: 0; animation: sv-line 40s infinite; }
.sv-lines li:nth-child(1) { animation-delay: 0s; }
.sv-lines li:nth-child(2) { animation-delay: 8s; }
.sv-lines li:nth-child(3) { animation-delay: 16s; }
.sv-lines li:nth-child(4) { animation-delay: 24s; }
.sv-lines li:nth-child(5) { animation-delay: 32s; }
@keyframes sv-line { 0% { opacity: 0; } 2% { opacity: 1; } 18% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
/* pictures land one by one: cover + open pages as tiles that fill in */
.sv-tiles { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 440px; margin: 0 auto 18px; padding: 0; }
.sv-tile { position: relative; aspect-ratio: 3 / 4; border-radius: 3px 7px 7px 3px; overflow: hidden; background: linear-gradient(100deg, var(--paper-2) 20%, #fff 50%, var(--paper-2) 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; box-shadow: -3px 0 0 #e1d7c8; margin-left: 3px; }
.sv-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-tile--done { animation: none; background: var(--paper-2); }
.sv-tile span { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 11px; color: var(--sv-muted); }
.sv-tile--done span { display: none; }
.sv-read { max-width: 560px; margin: 24px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.sv-read h2 { font: 600 20px/1.3 var(--serif); margin: 0 0 10px; text-align: center; }
.sv-read ol { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 10px; }
.sv-read li { line-height: 1.6; }

/* ---------- screen 8: preview ---------- */
.sv-viewer { width: 100%; border-radius: 12px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); margin-bottom: 10px; }
.sv-viewer iframe { display: block; width: 100%; height: clamp(520px, 78vh, 720px); border: 0; }
.bf-offer { max-width: 560px; margin: 22px auto; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px #38241612; text-align: center; }
.bf-offer h2 { font: 600 24px/1.3 var(--serif); color: var(--ink); margin: 0 0 10px; }
.bf-offer-detail { color: var(--sv-muted); font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.bf-guarantee { color: var(--ink); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.bf-guarantee::before { content: "\2713  "; color: var(--sv-ok); font-weight: 700; white-space: pre; }
.bf-paynote { color: var(--sv-muted); font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.bf-offer .bf-primary { font-size: 17px; min-height: 56px; }
.bf-offer-status > * { margin: 12px 0 0; }
.bf-note { font-size: 14px; line-height: 1.6; color: var(--sv-muted); }
.bf-error { color: var(--sv-error); line-height: 1.5; }
.bf-link { display: inline-block; margin-top: 14px; min-height: 44px; padding: 10px 4px; color: var(--accent); text-underline-offset: 4px; }
.bf-demo { margin: -4px 0 14px; text-align: center; }
.sv-rewrite { max-width: 560px; margin: 12px auto; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.sv-rewrite h2 { font: 600 20px/1.3 var(--serif); margin: 0 0 8px; }
.sv-rewrite p { color: var(--sv-muted); line-height: 1.55; margin: 0 0 14px; }
.sv-rewrite .sb-btn-next { width: 100%; }
#sb-app[data-screen="preview"] .sv-secondary { max-width: 560px; margin: 8px auto; }

/* soft email (only when steps.json email.sending is on) */
.sv-email { max-width: 560px; margin: 22px auto 0; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.sv-email__title { font: 600 20px/1.3 var(--serif); color: var(--ink); margin: 0 0 12px; }
.sv-email__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.sv-email__actions .sv-secondary { width: auto; margin: 0; }
.sv-email__saved { text-align: center; color: var(--sv-muted); font-size: 15px; margin: 18px 0 0; }

/* full-screen reading on phones */
.sv-fullread, .sv-fullclose { display: none; }
@media (max-width: 760px) {
  .sv-fullread { display: block; width: 100%; max-width: none; margin: 0 0 10px; min-height: 48px; border: 1px solid var(--field); border-radius: 8px; background: #fff; text-decoration: none; font-weight: 600; }
}
.sv-viewer--full { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; background: var(--paper-2); }
.sv-viewer--full .sv-fullclose { display: block; flex: 0 0 auto; margin: 8px 12px; align-self: flex-end; }
.sv-viewer--full iframe { flex: 1 1 auto; min-height: 0; height: auto; }

/* ---------- step bar: the main action, mirrored ---------- */
#sb-next { width: auto; min-width: 48px; max-width: 360px; gap: 8px; padding: 0 20px; font: 600 15px/1.2 var(--sans); }
#sb-next svg { flex: 0 0 auto; }
#sb-next[hidden] { display: none; }
#sb-next .sb-navbtn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#sb-next .sb-navbtn__label:empty { display: none; }
#sb-next.sv-next--info { background: var(--paper); color: var(--ink); border: 1px solid var(--field); }
#sb-next.sv-next--info svg { display: none; }

@media (max-width: 860px) {
  .sv-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 480px) {
  .sv-scroll .sb-main { padding: 20px 16px 32px; }
  .sv-char { padding: 14px 12px 4px; }
  .sv-char__legend { font-size: 19px; }
  .sb-actions .sv-primary { width: 100%; }
  /* one main button on a phone: the step bar already carries it */
  .sb-actions > .sv-primary[data-primary], .sv-approve[data-primary="1"] { display: none; }
  .sv-style__desc { display: none; }
  .sv-style__title { font-size: 16px; }
  .sv-cast { grid-template-columns: 1fr; }
  .sv-person__art { max-width: min(300px, calc(40vh * 3 / 4)); }
  .sv-viewer iframe { height: clamp(520px, calc(100vh - 220px), 760px); height: clamp(520px, calc(100dvh - 220px), 760px); }
  .bf-offer { padding: 20px 16px 16px; }
  .bf-offer h2 { font-size: 22px; }
  .sb-navbar { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .sb-navbar__progress { flex: 1 1 84px; min-width: 72px; }
  #sb-next { max-width: none; flex: 1 1 auto; justify-content: center; padding: 0 14px; font-size: 15px; }
  .sv-tiles { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-lines li { position: static; opacity: 1; }
  .sv-lines li:not(:first-child) { display: none; }
}

/* ---------- REDESIGN 07.10 (track Q2): chrome, child-flow questions, reveal, waiting ---------- */
/* Q-C1: one main button per width. <=480 px: the bar (rule above). Wider: the in-content button, the bar keeps progress + Back. */
/* F14 (12.10): on a desktop the in-content button was below the fold on the first screen, the approval and the preview, and the
   bar had none. The bar keeps its button at every width on the v3 paths (the in-content one stays too); the ms flow is as it was. */
@media (min-width: 481px) { #sb-root[data-flow="ms"][data-screen] #sb-next { display: none; } }
/* owner item 8 / LIVEWALK m17: a white bar with a hairline, no dark band */
.sb-navbar { background: #fff; border-top: 1px solid var(--line); }
/* Q-C2 (X-D5): no visible "Step N of M" in the child flow; the preview shows the price there instead (Q-12) */
#sb-root[data-flow="child"]:not([data-screen="preview"]) #sb-progress-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
#sb-root[data-flow="child"][data-screen="preview"] #sb-progress-text { font: 600 14px/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Q-C4: the footer only on the preview, failed and ordered screens (no band mid-screen on short steps) */
#sb-root[data-screen]:not([data-screen="preview"]):not([data-screen="failed"]):not([data-screen="ordered"]) .sb-footer { display: none; }
.sv-cast--hero .sv-person__role { display: none; }

/* Q-2 … Q-6 question screens */
.sv-brief { max-width: 560px; margin-left: auto; margin-right: auto; }
.sv-eyebrow { margin: 0 0 6px; font: 600 15px/1.4 var(--sans); color: var(--accent); }
.sv-bigcards { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.sv-bigcards--two, .sv-bigcards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-bigcards > li { min-width: 0; }
.sv-bigcard { position: relative; width: 100%; min-height: 64px; height: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-family: var(--sans); color: var(--ink); box-shadow: 0 1px 2px #38241612; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sv-bigcard:hover:not(:disabled) { border-color: var(--field); }
.sv-bigcard:active:not(:disabled) { transform: scale(.98); }
.sv-bigcard--on { border: 2px solid var(--accent); padding: 11.5px 13.5px; box-shadow: 0 0 0 3px rgba(255, 90, 54, .14); }
.sv-bigcard__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.sv-bigcard__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sv-bigcard__title { font: 600 18px/1.3 var(--serif); overflow-wrap: anywhere; }
.sv-bigcard__hint { font-size: 14px; line-height: 1.4; color: var(--sv-muted); }
.sv-bigcard__check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.sv-bigcard--on .sv-bigcard__check { background: var(--accent); border-color: var(--accent); }
.sv-bigcards--four .sv-bigcard { min-height: 96px; flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
.sv-bigcards--four .sv-bigcard__check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; }
@media (min-width: 900px) { .sv-bigcards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sv-brief:has(.sv-bigcards--four) { max-width: 760px; } }
.sv-textlink { display: inline-block; background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--accent); font: 600 15px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sv-addgiver { display: block; margin: 4px auto 6px; }

/* Q-8 reveal: equal 4:5 cards, a neutral shimmer while painting, the picture fades in once on arrival */
.sv-styles--reveal .sv-style__art { aspect-ratio: 4 / 5; }
.sv-styles--reveal .sv-style__art img { object-position: 50% 20%; }
.sv-style__art--pending { background: linear-gradient(100deg, var(--paper-2) 20%, #fff 50%, var(--paper-2) 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; }
.sv-style__art--pending::after { content: none; }
.sv-style__wait { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); text-align: center; white-space: normal; overflow-wrap: anywhere; font: 500 14px/1.35 var(--sans); color: var(--ink); }
.sv-style__wait--failed { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.sv-style__wait--failed strong { font: 600 16px/1.3 var(--serif); }
.sv-style__art--failed { background: var(--paper); border: 1px dashed var(--field); }
.sv-style__art--new img { animation: sv-reveal .4s ease-out both; }
@keyframes sv-reveal { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.sv-styles--reveal .sv-style--on::after { content: none; }
.sv-style__pill { position: absolute; top: auto; bottom: 10px; right: 10px; z-index: 2; background: var(--accent); color: #fff; font: 600 13px/1 var(--sans); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.sv-styles--reveal .sv-style__title { font-size: 17px; }
.sv-styles--reveal .sv-style__desc { font-size: 13px; }
@media (max-width: 860px) { .sv-styles--reveal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Q-9 one large portrait */
.sv-cast--hero { grid-template-columns: minmax(0, 420px); justify-content: center; }
.sv-cast--hero .sv-person__art { max-width: 100%; }
.sv-drawing--wide { justify-content: center; margin: 18px 0; }

/* Q-10 waiting: every unfinished row drawing, peeks, the elapsed line */
.sv-elapsed { text-align: center; margin: -6px 0 14px; font: 500 14px/1.4 var(--sans); color: var(--sv-muted); font-variant-numeric: tabular-nums; }
/* 15.10 "About N min left" (app.js ETA block): quiet, under the status line of a wait; hidden while it has no text */
.sv-hint.sv-eta { margin: 2px 0 12px; }
.sv-eta { font-variant-numeric: tabular-nums; }
.sv-eta:empty { display: none; }
.sv-steps--all .sv-steps__item--now { font-weight: 500; }
.sv-steps__label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sv-steps__detail { font: 400 14px/1.4 var(--sans); color: var(--sv-muted); overflow-wrap: anywhere; }
.sv-steps__state { flex: 0 0 auto; font-size: 13px; color: var(--sv-muted); }
.sv-steps__item--done .sv-steps__state { color: var(--sv-ok); }
.sv-steps__peek { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; animation: sv-reveal .4s ease-out both; }
/* two- and four-up cards: icon over the label, centred, words never split */
.sv-bigcards--two .sv-bigcard, .sv-bigcards--four .sv-bigcard { min-height: 96px; flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 14px 10px; }
.sv-bigcards--two .sv-bigcard--on, .sv-bigcards--four .sv-bigcard--on { padding: 13.5px 9.5px; }
.sv-bigcards--two .sv-bigcard__text, .sv-bigcards--four .sv-bigcard__text { align-items: center; flex: 0 0 auto; }
.sv-bigcards--two .sv-bigcard__title, .sv-bigcards--four .sv-bigcard__title { overflow-wrap: normal; word-break: normal; hyphens: none; }
.sv-bigcards--two .sv-bigcard__check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; }
.sv-bigcards--two > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sv-eyebrow { text-align: center; }
/* wider screens have no bar button (Q-C1): the portrait leaves room for "Yes, that's {Name}" in the first view */
@media (min-width: 481px) { .sv-cast--hero .sv-person__art { max-width: min(100%, calc(42vh * 3 / 4)); } }

/* ===================== 07.10 Q-build: quiz redesign (DECISIONS-1007 items 13, 15, 16) ===================== */
.sv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
/* type and controls: 18 px body, Fredoka titles, 56 px buttons, 16 px radii */
.sv-hint { font-size: 16px; }
.sv-field-error { font-size: 16px; }
.sv-progress-line { font-size: 17px; font-weight: 700; color: var(--ink); }
.sv-primary, .sb-btn-next.sv-approve, .sv-adjust .sb-btn-next, .sv-rewrite .sb-btn-next, .sv-link-button { min-height: 56px; }
.bf-primary { min-height: 56px; border-radius: var(--radius); font: 700 20px/1.2 var(--sans); }
.bf-secondary, .sv-textlink { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; font: 700 17px/1.4 var(--sans); min-height: 48px; }
.sv-btn { border-radius: 12px; font: 700 18px/1.2 var(--sans); min-height: 52px; padding: 12px 20px; }
.sv-chip, .sv-segment { min-height: 52px; border-radius: 999px; font: 700 17px/1.2 var(--sans); padding: 10px 18px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.sv-chip--on, .sv-segment--on { background: #fff0ea; border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1px var(--accent) inset; }
.sv-char, .sv-person, .sv-read, .bf-offer, .sv-rewrite, .sv-email, .sv-steps__item, .sb-consent { border-radius: var(--radius); }
.sv-bigcard { border: 2px solid var(--line); border-radius: var(--radius); min-height: 72px; box-shadow: var(--shadow-sm); }
.sv-bigcard--on { border-color: var(--accent); background: #fff0ea; padding: 12px 14px; box-shadow: 0 0 0 1px var(--accent) inset; }
.sv-bigcards--two .sv-bigcard--on, .sv-bigcards--four .sv-bigcard--on { padding: 14px 10px; }
.sv-bigcard__title { font: 700 19px/1.25 var(--sans); }
.sv-bigcard__hint { font-size: 15px; }
.sv-bigcard__icon { background: var(--paper-2); width: 48px; height: 48px; font-size: 26px; }
.sv-photo-add__label { color: var(--ink); font: 700 18px/1.3 var(--sans); }
.sv-photo-add { border-radius: var(--radius); }
.sb-navbar { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
#sb-next { font: 700 18px/1.2 var(--sans); }
@media (max-width: 480px) { #sb-next { font-size: 18px; } }
/* one bar on the waiting screen, none on the preview: the bottom bar goes away when it has no action there */
#sb-root[data-bar="off"] .sb-navbar { display: none; }
/* the old "price in the bar" rule is retired: the price is said once, on the page */
#sb-root[data-flow="child"][data-screen="preview"] #sb-progress-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* style reveal: each picture whole, in the proportions it was drawn (no crop to the face, DECISIONS 13) */
.sv-styles--reveal .sv-style__art { aspect-ratio: auto; min-height: 0; margin-left: 0; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #fff; }
.sv-styles--reveal .sv-style__art--pending, .sv-styles--reveal .sv-style__art--failed { aspect-ratio: 4 / 5; }
/* Oz 40 (23.10): the picture always fills its card (a fitted grid showed it small between white bars); the faces sit in the upper
   part, so a crop keeps them. The whole picture is one tap away (the zoom button on the card). */
.sv-styles--reveal .sv-style__art img { width: 100%; height: auto; object-fit: cover; object-position: 50% 25%; }
.sv-style { padding: 4px; gap: 4px; border-radius: calc(var(--radius) + 4px); }
.sv-style--on .sv-style__art { outline: 4px solid var(--accent); outline-offset: 2px; }
.sv-style--pending, .sv-style--refused { cursor: default; }
/* Q-fix 4: in the bottom corner (background), never over the forehead/hair while she judges the likeness */
.sv-style__pill { font: 700 15px/1 var(--sans); padding: 8px 12px; top: auto; bottom: 10px; right: 10px; box-shadow: var(--shadow-sm); }
.sv-styles--reveal .sv-style__title { font: 700 20px/1.25 var(--serif); padding: 6px 4px 0; }
.sv-styles--reveal .sv-style__desc { display: block; font-size: 15px; line-height: 1.4; padding: 0 4px; color: var(--muted); }
.sv-style__wait { font: 700 16px/1.35 var(--sans); }

/* "Is this Mia?": the picture in its scene, whole; the photo she added as a small inset */
.sv-hero { max-width: 460px; margin: 0 auto 14px; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.sv-hero__art { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--paper-2); min-height: 200px; }
.sv-hero__art > img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.sv-hero__art .sv-drawing { min-height: 320px; justify-content: center; }
.sv-hero__photo { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border-radius: 12px; padding: 4px 4px 2px; box-shadow: var(--shadow-sm); font: 700 12px/1.2 var(--sans); color: var(--ink); }
.sv-hero__photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
/* Q-fix 1: the drawing every page is made from, small in the bottom-right corner; a tap opens it large under the scene */
.sv-hero__page { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 96px; background: #fff; border: 2px solid transparent; border-radius: 12px; padding: 4px 4px 3px; box-shadow: var(--shadow-sm); font: 700 12px/1.2 var(--sans); color: var(--ink); text-align: center; cursor: pointer; min-height: 44px; }
.sv-hero__page img { width: 64px; height: 80px; object-fit: contain; background: var(--paper-2); border-radius: 8px; display: block; }
.sv-hero__page[aria-expanded="true"], .sv-hero__page--new { border-color: var(--accent); }
.sv-hero__page:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sv-hero__pageref { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sv-hero__pageref img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; background: var(--paper-2); border-radius: 12px; }
.sv-hero__pageref figcaption { font: 700 16px/1.4 var(--sans); text-align: center; }
.sv-hero__pageref .sv-secondary { margin: 0; }
.sv-hero__status { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 700 16px/1.4 var(--sans); color: var(--ink); text-align: left; }
.sv-hero__status .sb-spinner { width: 24px; height: 24px; border-width: 3px; margin: 0; flex: 0 0 auto; }
.sv-hero .sv-approve { width: 100%; }
.sv-hero__fix { margin: 4px 0 0; text-align: center; font: 700 17px/1.4 var(--sans); }
.sv-hero__fixes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.sv-hero__fixes .sv-secondary { margin: 0; }
.sv-hero .sv-hint { margin: 0; }
.sv-hero .sv-adjust { margin-top: 4px; }
.sv-approved { color: var(--ok); font-size: 17px; }
.sv-person__art { aspect-ratio: auto; max-width: min(100%, 360px); }
.sv-person__art img { height: auto; max-height: 52vh; object-fit: contain; }
@media (max-width: 480px) { .sv-hero { padding: 8px 8px 12px; } .sv-hero__art > img { max-height: 56vh; } .sv-person__art { max-width: min(300px, 100%); } }

/* the story as book covers: the child's name set big over the cover, the picture she approved on it */
.sv-covers { list-style: none; margin: 18px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sv-covers > li { min-width: 0; }
.sv-cover { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 4px; text-align: left; cursor: pointer; color: var(--ink); font-family: var(--sans); border-radius: calc(var(--radius) + 4px); }
.sv-cover__book { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; aspect-ratio: 3 / 4; padding: 12px 10px 10px; border-radius: 6px 14px 14px 6px; overflow: hidden; box-shadow: -6px 0 0 rgba(0, 0, 0, .14) inset, var(--shadow-sm); color: #fff; }
.sv-cover--adventure .sv-cover__book { background: radial-gradient(circle at 6% 96%, #ffd36b 0 7%, transparent 7.5%), linear-gradient(170deg, #36a3d9, #1f6fa8 60%, #2e8b57); }
.sv-cover--bedtime .sv-cover__book { background: radial-gradient(circle at 94% 96%, #fff3c4 0 6%, transparent 6.5%), radial-gradient(circle at 8% 90%, #fff 0 1%, transparent 1.5%), radial-gradient(circle at 92% 70%, #fff 0 1%, transparent 1.5%), linear-gradient(175deg, #2c3a78, #4b3d8f 70%, #6b5bb5); }
.sv-cover--funny .sv-cover__book { background: radial-gradient(circle at 4% 98%, #ff5a36 0 9%, transparent 9.5%), radial-gradient(circle at 98% 96%, #2ec4b6 0 8%, transparent 8.5%), linear-gradient(160deg, #ffc94d, #ff9f43); color: var(--ink); }
.sv-cover--heartwarming .sv-cover__book { background: radial-gradient(circle at 96% 95%, rgba(255,255,255,.7) 0 6%, transparent 6.5%), linear-gradient(165deg, #ff8fa3, #ff5a7a 65%, #e8486a); }
.sv-cover__title { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.05; text-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.sv-cover--funny .sv-cover__title { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.sv-cover__name { font: 700 clamp(26px, 8vw, 40px)/1 var(--serif); overflow-wrap: anywhere; }
.sv-cover__rest { font: 600 clamp(14px, 3.8vw, 18px)/1.15 var(--serif); }
.sv-cover__art { flex: 1 1 auto; min-height: 0; max-width: 100%; object-fit: contain; object-position: 50% 100%; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.sv-cover__art--none { display: block; background: rgba(255, 255, 255, .25); }
/* QA5 RC13 (25.10, mobile-08): "✓ Picked" sits at the foot of the cover, over the picture's corner: at the top it covered the
   name ("Lil" for "Lily") */
.sv-cover__pill { position: absolute; bottom: 8px; right: 8px; background: #fff; color: var(--ink); font: 700 14px/1 var(--sans); padding: 7px 10px; border-radius: 999px; box-shadow: var(--shadow-sm); text-shadow: none; }
.sv-cover--on .sv-cover__book { outline: 4px solid var(--accent); outline-offset: 3px; }
.sv-cover__kind { font: 700 19px/1.2 var(--serif); padding: 4px 2px 0; }
.sv-cover__hint { font-size: 15px; line-height: 1.35; color: var(--muted); padding: 0 2px; }
.sv-cover:active .sv-cover__book { transform: scale(.98); }
/* wide screens keep the 2 x 2 grid inside the 560 px column: four narrow covers left the picture too small */
@media (min-width: 900px) { .sv-cover__name { font-size: 40px; } .sv-cover__rest { font-size: 19px; } }

/* dedication: tap one of the ready texts, or write */
.sv-dedications { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; gap: 10px; }
.sv-dedication { width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font: 400 17px/1.4 var(--sans); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); }
.sv-dedication__first { font-weight: 700; }
.sv-dedication--on { border-color: var(--accent); background: #fff0ea; box-shadow: 0 0 0 1px var(--accent) inset; }

/* waiting: the stage in words, one bar, the story card, the pictures arriving */
.sv-stage { text-align: center; margin: 0 0 10px; font: 700 18px/1.4 var(--sans); color: var(--ink); }
.sv-bar { height: 14px; max-width: 520px; }
.sv-storycard { max-width: 520px; margin: 0 auto 16px; padding: 14px 16px; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); text-align: center; animation: sv-reveal .4s ease-out both; }
.sv-storycard__title { margin: 0; font: 700 22px/1.25 var(--serif); overflow-wrap: anywhere; }
.sv-storycard__line { margin: 6px 0 0; color: var(--muted); font-size: 17px; }
.sv-gallery { list-style: none; max-width: 520px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 8px; }
.sv-shot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sv-shot__frame { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 4px 10px 10px 4px; overflow: hidden; background: linear-gradient(100deg, var(--paper-2) 20%, #fff 50%, var(--paper-2) 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; box-shadow: var(--shadow-sm); }
.sv-shot--done .sv-shot__frame { animation: none; background: #fff; }
.sv-shot__frame img { width: 100%; height: 100%; object-fit: contain; display: block; animation: sv-reveal .5s ease-out both; }
.sv-shot__label { display: flex; flex-direction: column; font: 700 13px/1.2 var(--sans); color: var(--ink); text-align: center; }
.sv-shot__state { font-weight: 400; font-size: 12px; color: var(--muted); }
.sv-shot--done .sv-shot__state { color: var(--ok); font-weight: 700; }
/* UB-FAST-COVER-1101: the first real picture (the cover as soon as it exists), three plain steps, sample books (app.js waitV2) */
.sv-first { margin: 0 auto 12px; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sv-first__frame { position: relative; display: block; width: 150px; aspect-ratio: 3 / 4; border-radius: 4px 14px 14px 4px; overflow: hidden; background: linear-gradient(100deg, var(--paper-2) 20%, #fff 50%, var(--paper-2) 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; box-shadow: var(--shadow-sm); }
.sv-first--done .sv-first__frame { animation: none; background: #fff; box-shadow: 0 10px 28px rgba(43, 33, 24, .18); }
.sv-first__frame img { width: 100%; height: 100%; object-fit: contain; display: block; animation: sv-reveal .5s ease-out both; }
.sv-first__wait { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: sb-spin 1s linear infinite; }
.sv-first__caption { font: 700 15px/1.3 var(--sans); color: var(--ink); text-align: center; }
.sv-wsteps { list-style: none; max-width: 520px; margin: 0 auto 14px; padding: 0; display: grid; gap: 6px; }
.sv-wstep { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; color: var(--sv-muted); font-size: 15px; }
.sv-wstep--done { color: var(--ink); }
.sv-wstep--now { color: var(--ink); font-weight: 600; border-color: var(--field); }
.sv-wstep__mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.sv-wstep--done .sv-wstep__mark { background: var(--sv-ok); border-color: var(--sv-ok); color: #fff; }
.sv-wstep--now .sv-wstep__mark { border-color: var(--accent); border-top-color: transparent; animation: sb-spin 1s linear infinite; }
.sv-wstep__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sv-wstep__detail { flex: 0 0 auto; font-weight: 400; font-size: 13px; color: var(--sv-muted); }
.sv-samples { max-width: 520px; margin: 22px auto 8px; }
.sv-samples__title { margin: 0 0 8px; font: 700 16px/1.3 var(--sans); color: var(--ink); text-align: center; }
.sv-samples__list { list-style: none; margin: 0; padding: 2px 2px 8px; display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.sv-samples__item { flex: 0 0 96px; scroll-snap-align: start; }
.sv-samples__item picture { display: block; }
.sv-samples__item img { display: block; width: 96px; height: 128px; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: var(--shadow-sm); background: var(--paper-2); }
.sv-samples__note { margin: 2px 0 0; font-size: 13px; color: var(--sv-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .sv-first__frame, .sv-first__wait, .sv-wstep--now .sv-wstep__mark { animation: none; } }
.sv-lines { font-size: 17px; color: var(--muted); }
.sv-read h2 { font-weight: 700; }

/* soft email card (child flow) */
.sv-email--card { border: 2px solid var(--accent); box-shadow: var(--shadow); animation: sv-reveal .4s ease-out both; }
.sv-email__title { font: 700 22px/1.25 var(--serif); margin: 0 0 6px; }
.sv-email__lead { margin: 0 0 12px; color: var(--muted); font-size: 17px; }
.sv-email__save { background: var(--accent); }
.sv-email__saved { font-size: 17px; color: var(--ok); font-weight: 700; }

/* preview: the price once, the save button */
.bf-priceline { margin: 0 0 12px; font: 700 20px/1.35 var(--sans); color: var(--ink); }
.bf-priceline strong { font: 700 24px/1 var(--serif); color: var(--ink); }
.bf-offer h2 { font-weight: 700; }
.sv-save { max-width: 560px; margin: 0 auto 16px; text-align: center; }
.sv-save__btn { width: 100%; min-height: 56px; border-radius: var(--radius); border: 2px solid var(--accent); background: #fff; color: var(--ink); font: 700 20px/1.2 var(--sans); cursor: pointer; box-shadow: var(--shadow-sm); }
@media (hover: hover) { .sv-save__btn:hover { background: #fff0ea; } }  /* no sticky hover on iOS */
.sv-viewer { border-radius: var(--radius); }
@media (max-width: 760px) { .sv-fullread { border: 2px solid var(--field); border-radius: 12px; color: var(--ink); } }
.sv-hero--stale .sv-hero__art > img { opacity: .45; filter: saturate(.6); }

/* ---------- quiz v3 (08.10): one question per screen ---------- */
/* Photo screen: a compact upload so the consent stays above the fold at 390x844; tips as three small drawings with ✓/✗. */
.sv-photos--hero { margin-bottom: 10px; }
.sv-photos--hero .sv-photo-add { min-height: 84px; }
.sv-photos--hero .sb-thumb img { max-height: 96px; }
.sv-notice.sv-photo-plaque { margin: 12px 0 0; padding: 10px 12px; font: 400 14px/1.45 var(--sans); color: var(--ink); }   /* W-43 (Danilo 28.10): a quiet info plaque under the photos */
.sv-tips { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-tip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font: 700 13px/1.25 var(--sans); color: var(--ink); }
.sv-tip__art { display: block; width: 100%; max-width: 84px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); }
.sv-tip__art svg { display: block; width: 100%; height: 100%; }
.sv-tip--ok .sv-tip__art { border-color: #2E8B57; }
.sv-tip--no .sv-tip__art { opacity: .8; }
.sv-tip__mark { position: absolute; top: -6px; right: calc(50% - 50px); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--sans); color: #fff; background: #C0392B; }
.sv-tip--ok .sv-tip__mark { background: #2E8B57; }
.sv-privacy { margin-top: 8px; }
.sv-privacy a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
/* Age chips: six in two rows of three on a phone. */
.sv-ages .sv-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-ages .sv-segment { min-width: 0; }
@media (min-width: 640px) { .sv-ages .sv-segments { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Giver tiles above the dedication: five small tiles. */
.sv-bigcards--givers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; }
.sv-bigcards--givers .sv-bigcard { min-height: 72px; flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: 10px 6px; }
.sv-bigcards--givers .sv-bigcard--on { padding: 10px 6px; }
.sv-bigcards--givers .sv-bigcard__icon { font-size: 22px; }
.sv-bigcards--givers .sv-bigcard__title { font-size: 15px; overflow-wrap: normal; word-break: normal; hyphens: none; }
.sv-bigcards--givers .sv-bigcard__text { align-items: center; flex: 0 0 auto; }
.sv-bigcards--givers .sv-bigcard__check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; }
@media (min-width: 640px) { .sv-bigcards--givers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* The book preview: the cover is shown at once over the frame until the viewer has opened the book. */
/* E2E QZ-21 (13.10): this rule came later than .sv-viewer--full (position: fixed) and won; the full-screen mode is left alone. */
.sv-viewer:not(.sv-viewer--full) { position: relative; }
.sv-viewer__skeleton { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: var(--paper-2); transition: opacity .25s ease; }
.sv-viewer--ready .sv-viewer__skeleton { opacity: 0; pointer-events: none; }
.sv-viewer__cover { width: min(70%, 320px); max-height: 62%; object-fit: contain; border-radius: 8px; box-shadow: 0 6px 24px rgba(43, 33, 24, .18); }
.sv-viewer__blank { width: min(70%, 320px); aspect-ratio: 3 / 4; border-radius: 8px; background: linear-gradient(110deg, #f3ece6 30%, #fbf7f3 50%, #f3ece6 70%); background-size: 200% 100%; animation: sv-shimmer 1.4s linear infinite; }
.sv-viewer__title { font: 700 18px/1.3 var(--display, var(--sans)); color: var(--ink); text-align: center; }
.sv-viewer__opening { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--sans); color: var(--sv-muted); }
.sv-viewer--full .sv-viewer__skeleton { display: none; }
@keyframes sv-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sv-viewer__blank { animation: none; } }
.sv-moments-open { margin: 4px 0 8px; }
.sv-viewer__opening .sb-spinner { width: 20px; height: 20px; border-width: 3px; margin: 0; }
/* 08.10 E2E: on a phone the preview's bar carries only "Get the book — $39": the (full) progress track gives it its width, so the price is never cut. */
@media (max-width: 480px) { #sb-root[data-screen="preview"] .sb-navbar__progress { display: none; } #sb-root[data-screen="preview"] .sb-navbar__buttons { flex: 1 1 auto; } }
/* Task 36 (Oz 23.10): a compact bar on the book-ready page (55 px + safe area, was 61-77 px): more of the book and its Previous / Next
   above it. The bar sits under the scroll region, never over it; [data-bar="on"] outweighs the later per-flow bar rules (1290+). */
#sb-root[data-screen="preview"][data-bar="on"] .sb-navbar { padding-top: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); }
#sb-root[data-screen="preview"][data-bar="on"] .sb-navbar .sb-navbtn { height: 44px; min-width: 44px; }
#sb-root[data-screen="preview"][data-bar="on"] #sb-next { font-size: 16px; }

/* ---------- A/B ms v2, restyle 08.10 (owner: "make it ours"): the reference order of screens in the landing's look ----------
   Warm paper with the landing hero's glow, Fredoka headings, Nunito 18 px text, orange pill buttons with the landing's shadow,
   photos as white-bordered tiles with dark label pills (the landing's "Her photo / In her story"), the landing's dots for progress.
   The StoryBook header of v3 stays; no dark sheet, no title bar with ×, no guide bubble. Every rule here is scoped to ms. */
#sb-root[data-flow="ms"] .sb-footer { display: none; }
#sb-root[data-flow="ms"] .sv-scroll { background: radial-gradient(120% 420px at 88% 0, #ffe1d2 0, rgba(255, 225, 210, 0) 70%), radial-gradient(90% 360px at 0 220px, #fff1c7 0, rgba(255, 241, 199, 0) 70%), var(--paper); background-attachment: local; }
#sb-root[data-flow="ms"] #sb-app { max-width: 520px; margin: 0 auto; }
#sb-root[data-flow="ms"] #sb-app[data-screen="ms-preview"] { max-width: 760px; }
@media (min-width: 900px) { #sb-root[data-flow="ms"] #sb-app[data-screen="ms-preview"] { max-width: 960px; } }
/* the bar: v3's white bar, the step count only for screen readers (as in the child flow) */
#sb-root[data-flow="ms"] #sb-progress-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* buttons: the landing's CTA (pill, orange, soft orange shadow); disabled keeps v3's readable colors, since its words say what is missing */
#sb-root[data-flow="ms"] .sb-btn-next.sv-primary, #sb-root[data-flow="ms"] #sb-next { border-radius: 999px; box-shadow: 0 8px 20px rgba(255, 90, 54, .35); font: 700 20px/1.15 var(--sans); }
#sb-root[data-flow="ms"] .sb-btn-next.sv-primary { min-height: 60px; padding: 14px 28px; }
#sb-root[data-flow="ms"] .sb-btn-next.sv-primary:disabled, #sb-root[data-flow="ms"] #sb-next:disabled { box-shadow: none; }
#sb-root[data-flow="ms"] #sb-back { border-radius: 999px; background: #fff; color: var(--ink); border: 2px solid var(--ink); }
#sb-root[data-flow="ms"] #sb-back:hover:not(:disabled) { background: var(--paper-2); }
/* on a phone the main button lives in the bottom bar; wider, it sits in the page right after the last control and never covers
   anything (review 08.10 #1: a sticky button hid "Try again" / "New photo" and the email card on S5). The screens are laid out so
   it is in the first view at 1280x800 (E2E 08.10: it used to end 20 px under the bar on S3-S5). */
@media (max-width: 480px) { #sb-root[data-flow="ms"] .ms-actions { display: none; } }
@media (min-width: 481px) {
  #sb-root[data-flow="ms"] .ms-actions { justify-content: center; margin: 18px 0 0; }
  #sb-root[data-flow="ms"] .ms-actions .sv-primary { width: 100%; max-width: 420px; }
}
/* S8: the checkout button as the landing's CTA, 20 px bold (large text: white on #ff5a36 is 3.1:1, AA for large text; at 17 px it failed) */
#sb-root[data-flow="ms"] .bf-offer .bf-primary { font: 700 20px/1.2 var(--sans); min-height: 60px; border-radius: 999px; box-shadow: 0 8px 20px rgba(255, 90, 54, .35); }
#sb-root[data-flow="ms"] .bf-offer .bf-primary:disabled { box-shadow: none; }
.ms-eyebrow { display: table; margin: 0 auto 10px; padding: 6px 12px; border-radius: 999px; background: #ffe3d8; color: #b23a1c; font: 700 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
#sb-root[data-flow="ms"] .ms-lead { margin-bottom: 18px; }
#sb-root[data-flow="ms"] .sv-privacy { text-align: center; }
.ms-tag { position: absolute; left: 8px; bottom: 8px; padding: 6px 9px; border-radius: 999px; background: rgba(43, 33, 24, .82); color: #fff; font: 700 13px/1 var(--sans); white-space: nowrap; }

/* S1: the example photo turns into its storybook hero. CSS only, a 4 s loop: a wipe with a light sweep and three sparkles. */
.ms-howto { display: flex; align-items: center; justify-content: center; margin: 4px 0 18px; }
.ms-howto__pair { display: none; align-items: center; justify-content: center; gap: 10px; }
.ms-howto__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 132px; }
.ms-howto__img { width: 124px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; border: 3px solid #fff; box-shadow: var(--shadow-sm); background: var(--paper-2); display: block; }
.ms-howto__label { font: 700 15px/1.3 var(--sans); color: var(--ink); }
.ms-howto__arrow { font: 700 26px/1 var(--sans); color: var(--accent); }
.ms-morph { display: flex; flex-direction: column; align-items: center; }
.ms-morph__stage { position: relative; width: 180px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--paper-2); border: 3px solid #fff; box-shadow: var(--shadow); transform: rotate(-2deg); }
.ms-morph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-morph__img--hero { animation: ms-wipe 4s ease-in-out infinite; }
.ms-morph__sweep { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .65) 50%, transparent 62%); transform: translateX(-130%); animation: ms-sweep 4s ease-in-out infinite; }
.ms-morph__spark, .ms-life__spark { position: absolute; width: 14px; height: 14px; opacity: 0; background: #ffc94d; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ms-morph__spark { animation: ms-spark 4s ease-in-out infinite; }
.ms-morph__spark--1, .ms-life__spark--1 { top: 14%; left: 18%; } .ms-morph__spark--2, .ms-life__spark--2 { top: 30%; right: 14%; animation-delay: .12s; } .ms-morph__spark--3, .ms-life__spark--3 { bottom: 26%; left: 52%; animation-delay: .24s; }
.ms-morph__labels { position: absolute; left: 8px; bottom: 8px; right: 8px; height: 25px; }
.ms-morph__label { position: absolute; left: 0; bottom: 0; width: max-content; padding: 6px 9px; border-radius: 999px; background: rgba(43, 33, 24, .82); color: #fff; font: 700 13px/1 var(--sans); }
.ms-morph__label--photo { animation: ms-label-out 4s ease-in-out infinite; }
.ms-morph__label--hero { opacity: 0; animation: ms-label-in 4s ease-in-out infinite; background: #b23a1c; }
@keyframes ms-wipe { 0%, 28% { opacity: 0; clip-path: inset(0 100% 0 0); } 52% { opacity: 1; clip-path: inset(0 0 0 0); } 86% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes ms-sweep { 0%, 24% { transform: translateX(-130%); } 54%, 100% { transform: translateX(130%); } }
@keyframes ms-spark { 0%, 44% { opacity: 0; transform: scale(.3); } 56% { opacity: 1; transform: scale(1.1); } 72%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes ms-label-out { 0%, 30% { opacity: 1; } 46%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ms-label-in { 0%, 30% { opacity: 0; } 50%, 86% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ms-morph { display: none; } .ms-howto__pair { display: flex; } }
.ms-consent-wrap { margin: 12px 0 0; }

/* S2: their photo as a tilted tile, five named eye colors */
.ms-photo { position: relative; margin: 0 auto 18px; width: min(210px, 54vw); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--paper-2); border: 3px solid #fff; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.ms-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-field { margin: 8px 0 14px; }
.ms-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ms-field__label { font: 700 19px/1.3 var(--sans); color: var(--ink); }
.ms-field__value { font: 700 17px/1.3 var(--sans); color: #b23a1c; }
.ms-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ms-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 48px; padding: 8px 2px; border: 2px solid transparent; border-radius: 14px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.ms-swatch__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--sw); display: grid; place-items: center; color: #fff; font: 700 20px/1 var(--sans); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 3px 8px rgba(43, 33, 24, .22); }
.ms-swatch__name { font: 700 14px/1.2 var(--sans); }
.ms-swatch--on { border-color: var(--accent); background: #fff0ea; }
.ms-swatch:disabled { cursor: default; }
.ms-swatch:disabled:not(.ms-swatch--on) { opacity: .55; }
@media (hover: hover) { .ms-swatch:hover:not(:disabled):not(.ms-swatch--on) { background: #fff; } }
.ms-swatches--small { margin: 6px 0 8px; }
.ms-swatches--small .ms-swatch__dot { width: 36px; height: 36px; font-size: 17px; }
.ms-locknote { margin: 0 0 12px; }

/* S3-S5: the hero coming to life. Their photo in a tile, changed only by the reported state (data-stage). */
.ms-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 0 18px; padding: 12px 14px 12px 12px; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ms-card--ready { border-color: #ffd4c4; }
.ms-life__stage { position: relative; }
.ms-life__frame { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--paper-2); border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.ms-life__photo, .ms-life__hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-life__hero { object-position: 50% 12%; }
.ms-life__blank { position: absolute; inset: 0; background: linear-gradient(100deg, var(--paper-2) 20%, #fff 50%, var(--paper-2) 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; }
.ms-life__wash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 28% 22%, rgba(255, 201, 77, .55), transparent 58%), radial-gradient(circle at 76% 78%, rgba(255, 90, 54, .4), transparent 58%); }
.ms-life__sweep { position: absolute; inset: 0; opacity: 0; background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .7) 50%, transparent 64%); transform: translateX(-130%); }
.ms-life__photo { transition: filter .8s ease; }
/* waiting for its turn: their photo, resting, a slow light passing over it */
.ms-life[data-stage="waiting"] .ms-life__photo, .ms-life[data-stage="queued"] .ms-life__photo, .ms-life[data-stage="checking"] .ms-life__photo { filter: saturate(.75) brightness(1.05); }
.ms-life[data-stage="waiting"] .ms-life__sweep, .ms-life[data-stage="queued"] .ms-life__sweep { opacity: 1; animation: ms-life-sweep 3.6s ease-in-out infinite; }
/* being drawn: the photo softens into paint, warm color washes over it, sparkles */
.ms-life[data-stage="drawing"] .ms-life__photo, .ms-life[data-stage="retry"] .ms-life__photo { animation: ms-life-paint 2.8s ease-in-out infinite alternate; }
.ms-life[data-stage="drawing"] .ms-life__wash, .ms-life[data-stage="retry"] .ms-life__wash { animation: ms-life-wash 2.8s ease-in-out infinite alternate; }
.ms-life[data-stage="drawing"] .ms-life__sweep, .ms-life[data-stage="retry"] .ms-life__sweep { opacity: 1; animation: ms-life-sweep 2.2s ease-in-out infinite; }
.ms-life[data-stage="drawing"] .ms-life__spark { animation: ms-spark 2.2s ease-in-out infinite; }
/* the drawing has landed: it fades in over the photo once (never again on a poll), with one burst of sparkles */
.ms-life__frame--arrive .ms-life__hero { animation: ms-life-arrive 1.4s ease-out both; }
.ms-life__frame--arrive .ms-life__spark { animation: ms-spark 1.4s ease-out .5s both; }
@keyframes ms-life-paint { from { filter: saturate(1.1) contrast(1.02) blur(.4px); } to { filter: saturate(1.45) contrast(1.08) blur(1.8px); } }
@keyframes ms-life-wash { from { opacity: .25; } to { opacity: .85; } }
@keyframes ms-life-sweep { 0%, 20% { transform: translateX(-130%); } 70%, 100% { transform: translateX(130%); } }
@keyframes ms-life-arrive { from { opacity: 0; filter: blur(8px) saturate(1.4); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
.ms-card__look { position: absolute; right: -8px; bottom: -8px; width: 46px; margin: 0; }
.ms-card__look img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid #fff; box-shadow: var(--shadow-sm); background: #fff; }
.ms-card__look figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-life__words { min-width: 0; }
.ms-card__title { margin: 0 0 4px; font: 700 21px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.ms-card__line { margin: 0 0 10px; font-size: 16px; line-height: 1.4; color: var(--muted); }
.ms-timer { font-variant-numeric: tabular-nums; }
.ms-pips { display: flex; gap: 6px; }
.ms-pip { width: 10px; height: 10px; border-radius: 50%; background: #e3cfc3; transition: background .3s; }
.ms-pip--on { background: var(--accent); }
/* S1-S4 on a wide screen: the picture on the left (always the same spot, where their photo turns into the drawing), the question
   on the right, as the landing's hero sets art beside the words; everything fits 1280x800 without scrolling */
@media (min-width: 900px) {
  #sb-root[data-flow="ms"] #sb-app[data-screen="ms-intro"], #sb-root[data-flow="ms"] #sb-app[data-screen="ms-eyes"],
  #sb-root[data-flow="ms"] #sb-app[data-screen="ms-name"], #sb-root[data-flow="ms"] #sb-app[data-screen="ms-kid"], #sb-root[data-flow="ms"] #sb-app[data-screen="ms-reveal"] { max-width: 840px; }
  .ms-screen--split { position: relative; padding-left: 300px; min-height: 470px; }
  .ms-screen--split > .ms-split__art, .ms-screen--split > .ms-card { position: absolute; left: 0; top: 0; width: 264px; margin: 0; }
  .ms-screen--split > .ms-howto { height: 400px; }
  .ms-screen--split > .ms-howto .ms-morph__stage { width: 240px; }
  .ms-screen--split > .ms-photo { transform: rotate(-2deg); }
  .ms-screen--split > .ms-card, .ms-screen--split > .ms-stage .ms-card { display: block; padding: 14px; text-align: center; }
  .ms-screen--split > .ms-stage .ms-hero--portrait { width: 100%; }
  .ms-screen--split > .ms-stage .ms-chip { padding: 8px 13px; font-size: 16px; }
  .ms-screen--split > .ms-stage .ms-retry { padding: 12px 10px; }
  .ms-screen--split .ms-life__frame { width: 100%; }
  .ms-screen--split .ms-card__look { width: 64px; right: -12px; bottom: -12px; }
  .ms-screen--split .ms-life__words { margin-top: 14px; }
  .ms-screen--split .ms-pips { justify-content: center; }
  .ms-screen--split .ms-eyebrow { margin-left: 0; }
  .ms-screen--split .sb-step__title, .ms-screen--split .ms-lead, #sb-root[data-flow="ms"] .ms-screen--split .sv-privacy, .ms-screen--split .ms-locknote { text-align: left; }
}
/* S5 with the redraw panel open: the portrait gets smaller so the panel fits beside / under it */
.ms-stage:has(.ms-retry) .ms-hero--portrait { width: min(200px, 56vw, 24vh); }
/* S6 on a wide screen: the four covers in one row, nothing to scroll sideways (review 08.10 #2: a hidden scrollbar left a mouse no way to reach them) */
@media (min-width: 900px) {
  #sb-root[data-flow="ms"] #sb-app[data-screen="ms-story"] { max-width: 880px; }
  #sb-root[data-flow="ms"] .ms-carousel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; margin: 0; padding: 4px 0 4px; }
  #sb-root[data-flow="ms"] .ms-carousel > li { max-width: none; }
  #sb-root[data-flow="ms"] .ms-carousel .sv-cover__name { font-size: 32px; }
  #sb-root[data-flow="ms"] .ms-carousel .sv-cover__rest { font-size: 16px; }
}

/* S3: the name */
#sb-root[data-flow="ms"] .ms-screen .sb-input { font-size: 20px; }
.ms-covername { margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff; border: 2px dashed #ffd4c4; text-align: center; display: grid; gap: 2px; }
.ms-covername[hidden] { display: none; }
.ms-covername span { font: 700 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #b23a1c; }
.ms-covername strong { font: 700 24px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
/* S4: girl / boy as the landing's chips, the age slider in our orange */
.ms-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 4px; }
.ms-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 700 19px/1 var(--sans); cursor: pointer; box-shadow: var(--shadow-sm); }
.ms-pill__check { display: none; }
.ms-pill--on { border-color: var(--accent); background: #fff0ea; box-shadow: 0 0 0 1px var(--accent) inset; }
.ms-pill--on .ms-pill__check { display: inline; color: var(--accent); }
.ms-they { display: block; margin: 2px auto 14px; }
.ms-range { width: 100%; height: 40px; accent-color: var(--accent); cursor: pointer; }
.ms-range--unset { opacity: .55; }

/* S5: the portrait as a large tile; redraw and new photo as the landing's outline buttons */
.ms-stage { margin: 0 0 12px; }
.ms-hero { margin: 0 auto; width: min(300px, 78vw); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #fff; border: 4px solid #fff; box-shadow: var(--shadow); }
.ms-hero img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ms-hero--scene img { object-fit: cover; }
.ms-hero--portrait { aspect-ratio: 3 / 4; width: min(270px, 68vw, 34vh); background: var(--paper-2); }
.ms-hero--portrait img { object-fit: cover; object-position: 50% 12%; }
.ms-hero__fixes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.ms-chip { min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 700 17px/1 var(--sans); cursor: pointer; }
@media (hover: hover) { .ms-chip:hover:not(:disabled) { background: var(--paper-2); } }
.ms-chip--go { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(255, 90, 54, .3); }
@media (hover: hover) { .ms-chip--go:hover:not(:disabled) { background: var(--accent-hover); } }
.ms-chip:disabled { cursor: default; opacity: .55; }
.ms-stage__status { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--muted); margin: 12px 0 0; }
.ms-retry { margin: 14px 0 0; padding: 14px; border-radius: var(--radius); background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow-sm); }
.ms-retry__title { margin: 0 0 6px; text-align: center; font: 700 18px/1.3 var(--sans); }
.ms-retry__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ms-email { margin: 6px 0 8px; padding: 16px; border-radius: var(--radius); background: #fff; border: 2px solid var(--accent); box-shadow: var(--shadow); text-align: center; }
.ms-email__title { margin: 0 0 4px; font: 700 21px/1.25 var(--serif); }
.ms-email__lead { margin: 0 0 12px; color: var(--muted); font-size: 17px; }
.ms-email .sb-input { width: 100%; text-align: center; }
#sb-root[data-flow="ms"] .sv-email__saved { text-align: center; }

/* S6: the stories as book covers in a row */
.ms-h2 { margin: 4px 0 10px; font: 700 22px/1.25 var(--serif); }
.ms-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 12px; margin: 0 -16px; grid-template-columns: none; scrollbar-width: none; }
.ms-carousel::-webkit-scrollbar { display: none; }
.ms-carousel > li { flex: 0 0 62%; scroll-snap-align: start; max-width: 220px; }
/* S6: the top of the portrait stands in for the scene picture after a redraw, or when the scene failed */
.sv-cover__art.ms-crop { object-fit: cover; object-position: 50% 0; }
.ms-badge { align-self: flex-start; margin: 4px 2px 0; padding: 5px 10px; border-radius: 999px; background: #ffe3d8; color: #b23a1c; font: 700 13px/1.2 var(--sans); }

/* S7: the book being made: a white card with their picture, one bar, tiles that fill with real pictures, the reading reveal */
.ms-progress { padding: 18px 16px; border-radius: var(--radius); background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow-sm); text-align: center; }
.ms-progress__face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; display: block; margin: 0 auto 10px; border: 3px solid #fff; box-shadow: var(--shadow-sm); background: var(--paper-2); }
.ms-progress__title { margin: 0 0 4px; font: 700 21px/1.3 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.ms-progress__sub { margin: 0 0 12px; color: var(--muted); font-size: 16px; }
.ms-bar { width: 100%; max-width: none; margin: 0; }
.ms-tiles { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0; padding: 0; }
.ms-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ms-tile__frame { display: block; aspect-ratio: 3 / 4; border-radius: 4px 10px 10px 4px; overflow: hidden; background: linear-gradient(100deg, var(--paper-2) 20%, #fff 50%, var(--paper-2) 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; box-shadow: var(--shadow-sm); }
.ms-tile--done .ms-tile__frame { animation: none; background: #fff; }
.ms-tile__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-tile--new .ms-tile__frame img { animation: sv-reveal .5s ease-out both; }   /* only the first time a picture arrives (review 08.10 #3) */
.ms-tile__label { display: flex; flex-direction: column; text-align: center; font-size: 12px; line-height: 1.25; color: var(--muted); }
.ms-tile__label strong { color: var(--ink); font-size: 13px; }
.ms-tile--done .ms-tile__label span { color: var(--ok); font-weight: 700; }
.ms-readbtn { margin-top: 4px; }
.ms-read { margin: 12px 0; padding: 16px 18px; border-radius: var(--radius); background: #fff; border: 2px solid var(--line); box-shadow: var(--shadow-sm); }
.ms-read__list { margin: 0; padding-left: 22px; }
.ms-read__item { margin: 0 0 10px; font-size: 18px; line-height: 1.6; animation: sv-reveal .5s ease-out both; }
.ms-read__item--seen { animation: none; }
.ms-read__item[hidden] { display: none; }
.ms-locked { margin: 8px 0 12px; }

/* S8: the best page large, with its text; side by side on a wide screen */
.ms-spread { display: grid; gap: 12px; margin: 0 0 16px; }
.ms-spread__art { margin: 0; }
.ms-spread__art img { width: auto; max-width: 100%; height: auto; max-height: min(62vh, 560px); margin: 0 auto; display: block; border-radius: 16px; border: 4px solid #fff; background: #fff; box-shadow: var(--shadow); }
.ms-spread__art figcaption { margin-top: 8px; text-align: center; font-size: 15px; font-weight: 700; color: var(--muted); }
.ms-spread__text { margin: 0; padding-left: 14px; border-left: 4px solid var(--accent); font: italic 700 19px/1.5 var(--sans); color: var(--ink); }
@media (min-width: 900px) { .ms-spread { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 24px; } }
.ms-legal { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
  .ms-tile__frame, .ms-read__item, .ms-life__blank { animation: none; }
  .ms-life__photo, .ms-life__wash, .ms-life__sweep, .ms-life__spark, .ms-life__frame--arrive .ms-life__hero { animation: none !important; }
  .ms-life[data-stage="drawing"] .ms-life__photo, .ms-life[data-stage="retry"] .ms-life__photo { filter: saturate(1.3) blur(1px); }
  .ms-life[data-stage="drawing"] .ms-life__wash, .ms-life[data-stage="retry"] .ms-life__wash { opacity: .6; }
  .ms-life__sweep { display: none; }
}
@media (min-width: 720px) {
  .ms-carousel { margin: 0; padding-left: 2px; padding-right: 2px; scrollbar-width: thin; }
  .ms-carousel::-webkit-scrollbar { display: block; height: 8px; }
  .ms-carousel::-webkit-scrollbar-thumb { background: #e3cfc3; border-radius: 4px; }
  .ms-carousel > li { flex-basis: 44%; }
  .ms-morph__stage { width: 200px; }
}

/* ---------- 12.10 quiz batch (track A): words card, painting strip, merged details, small fixes ---------- */
/* F13: the bar only; the text node stays for older markup but is never shown */
#sb-progress-text[hidden] { display: none; }
/* Zones around the words card: layout-transparent wrappers. A poll swaps their children; the card between them stays as it is. */
.sv-zone { display: contents; }
.sv-waitq { max-width: 560px; margin: 0 auto 18px; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 16px 6px; text-align: left; }
.sv-waitq__title { font: 700 22px/1.2 var(--serif); margin: 0 0 2px; color: var(--ink); }
.sv-waitq__lead { color: var(--muted); font-size: 15px; line-height: 1.45; margin: 0 0 14px; }
.sv-waitq .sb-field { margin-bottom: 14px; }
.sv-waitq .sv-chip { min-height: 44px; padding: 8px 14px; font-size: 16px; }
.sv-waitq .sb-textarea { min-height: 0; }
.sv-waitq .sv-textlink { display: block; padding: 4px 0; min-height: 44px; text-align: left; }
.sv-waitq__other { margin-top: -10px; }
.sv-brief .sv-waitq__other { margin-top: -14px; }
/* Child path, first wait: the four styles (27.10: drawn-2d) as a strip that fills in while the questions are answered (F18: no blank cards) */
.sv-strip { list-style: none; margin: 0 auto 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.sv-strip__item { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.sv-strip__art { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); background: linear-gradient(100deg, var(--paper-2) 20%, #fff 50%, var(--paper-2) 80%) 0 0 / 220% 100%; animation: sv-shimmer 1.6s linear infinite; }
.sv-strip__item--ready .sv-strip__art, .sv-strip__item--failed .sv-strip__art { animation: none; background: #fff; }
.sv-strip__item--failed .sv-strip__art { border: 1px dashed var(--field); box-shadow: none; }
.sv-strip__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sv-strip__item--new img { animation: sv-reveal .4s ease-out both; }
.sv-strip__name { font: 700 12px/1.25 var(--sans); color: var(--muted); text-align: center; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sv-strip__art, .sv-strip__item--new img { animation: none; } }
/* General path: the role a card came with, closed behind "Change"; the optional details closed on the photo card */
.sv-more { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }
.sv-genre-more { display: block; padding: 6px 0; }
.sv-castextras { margin: 6px 0 16px; }
.sv-castextras .sv-addgiver { margin: 0; text-align: left; }
.sv-consent__more { margin: 6px 0 0; }
/* F6: with two or more people each card keeps its own approve button on a phone too (the bar names whose picture it approves) */
@media (max-width: 480px) { .sv-approve.sv-approve--own[data-primary="1"] { display: inline-flex; } }
/* F5: after a redraw the new drawing is the big picture; the first picture sits in the corner, not a button */
.sv-hero__page--before { cursor: default; }
.sv-hero--swapped .sv-hero__art > img { background: #fff; }
/* F4: back from a failed payment */
.bf-retry { font-weight: 700; color: var(--ink); }
/* F14: the bar's button on a desktop: sized by its words, never stretched */
@media (min-width: 481px) { #sb-root:not([data-flow="ms"]) #sb-next { padding: 0 22px; white-space: nowrap; } }
/* ---------- 12.10 look and momentum (track A): large answer cards, one question at a time, carried hero, reward lines ---------- */
/* A choice of up to six: large cards in a grid; the picture comes from data-icon, a color from --sw; one clearly pressed */
.sv-picks { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-picks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 8px; background: #fff; border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); color: var(--ink); font: 700 17px/1.2 var(--sans); text-align: center; cursor: pointer; overflow-wrap: anywhere; transition: border-color .15s, background-color .15s, transform .1s; }
/* the picture is decoration: the second `content` gives it an empty text alternative where the browser supports one (the first stays as the fallback) */
.sv-pick[data-icon]::before { content: attr(data-icon); content: attr(data-icon) / ""; font-size: 28px; line-height: 1; }
.sv-pick--swatch::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.sv-pick:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .sv-pick:hover:not(:disabled) { border-color: var(--field); } }
.sv-pick--on { border-color: var(--accent); background: #fff0ea; box-shadow: 0 0 0 3px rgba(255, 90, 54, .16); }
.sv-pick--on::after { content: "\2713"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/20px var(--sans); text-align: center; }
.sv-pick:disabled { opacity: .6; cursor: default; }
.sv-ages .sv-pick { min-height: 60px; font: 700 20px/1.2 var(--serif); }
/* Recipient and occasion cards: a picture instead of the radio dot; the pressed card is the tinted one */
.sb-card[data-icon]::before { content: attr(data-icon); content: attr(data-icon) / ""; flex: 0 0 auto; width: 40px; font-size: 28px; line-height: 1; text-align: center; }
.sb-card[data-icon] .sb-card__radio { display: none; }
.sb-card[data-icon] { min-height: 64px; }
/* The words card, one question at a time */
.sv-waitq__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.sv-waitq__head .sv-waitq__title { margin: 0; }
.sv-waitq__dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.sv-waitq__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.sv-waitq__dot--now { background: var(--accent); }
.sv-waitq__dot--done { background: var(--ok); }
.sv-waitq .sv-pick { min-height: 64px; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 8px 12px; font-size: 16px; text-align: left; box-shadow: none; }
.sv-waitq .sv-pick[data-icon]::before { font-size: 24px; }
/* ITEM D (28.10): "Choose <style>" without a kind of story: the card's kinds marked red under the prompt (as the delivery choice R34) */
.sv-genre-need { scroll-margin: 16px 0 112px; }
.sv-genre-need[data-need="true"] .sv-field { border-radius: 12px; outline: 2px solid var(--sv-error); outline-offset: 4px; }
.sv-genre-need[data-need="true"] .sb-field__label { color: var(--sv-error); }
.sv-genre-need[data-need="true"] .sv-pick { border-color: var(--sv-error); }
.sv-genre-need__prompt { margin: 0 0 10px; font: 700 15px/1.4 var(--sans); }
.sv-waitq__nav { display: flex; justify-content: space-between; gap: 16px; }
.sv-waitq__nav:empty { display: none; }
.sv-waitq__next { display: block; width: 100%; margin: 0 0 6px; }
.sv-waitq__thanks { font: 700 17px/1.45 var(--sans); color: var(--ink); margin: 0 0 4px; }
.sv-brief .sv-picks { margin-bottom: 4px; }
/* The hero's photo or picture and name above a heading */
.sv-herochip { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 8px; font: 700 15px/1.2 var(--sans); color: var(--muted); }
.sv-herochip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid #fff; box-shadow: var(--shadow-sm); background: var(--paper-2); }
/* One warm line when the first picture lands */
.sv-reward { color: #1f6b43; }   /* OZ-1023b item 14: good news reads green, never the error-like accent red (main + xmas; 6.3:1 on white) */
@media (prefers-reduced-motion: reduce) { .sv-pick { transition: none; } .sv-enter { animation: none; } }
/* No blank wait (12.10): a portrait that is still being drawn (or could not be) keeps its picture area: the shimmer, "Drawing Ana…" and the customer's own photo in its corner */
.sv-person--pending .sv-person__art, .sv-person--failed .sv-person__art { aspect-ratio: 3 / 4; max-width: min(240px, 70%); }
.sv-person--pending .sv-hero__photo img { width: 64px; height: 64px; max-height: none; object-fit: cover; }
/* ---------- "Fits one view" (owner 12.10): every option of a required choice inside the viewport, above the bar, at 1280x800, 1000x800, 390x844 and 360x640 ---------- */
/* Who is it for / the occasion: a 2-column grid of compact cards (picture + title); the second line only where there is room */
.sv-recipients, .sv-occasions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sv-recipients > li, .sv-occasions > li { min-width: 0; }
.sv-recipient, .sv-occasion { width: 100%; height: 100%; min-height: 64px; padding: 8px 10px; gap: 8px; align-items: center; }
.sb-card.sv-recipient[data-icon]::before, .sb-card.sv-occasion[data-icon]::before { width: 34px; font-size: 26px; }
.sv-recipient .sv-recipient__title, .sv-occasion .sv-recipient__title { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.sv-recipient .sv-recipient__hint { display: none; }
@media (min-width: 700px) { .sv-recipient { min-height: 72px; padding: 10px 14px; } .sv-recipient .sv-recipient__title { font-size: 17px; } .sv-recipient .sv-recipient__hint { display: block; font-size: 13px; line-height: 1.3; } }
/* less air above the heading on a desktop */
@media (min-width: 481px) { #sb-root:not([data-flow="ms"]) .sv-scroll .sb-main { padding-top: 16px; } }
/* The story covers on a desktop: four in a row */
@media (min-width: 900px) {
  .sv-brief .sv-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-brief:has(.sv-covers) { max-width: 780px; }
  .sv-brief .sv-cover__name { font-size: 30px; } .sv-brief .sv-cover__rest { font-size: 15px; } .sv-brief .sv-cover__kind { font-size: 17px; } .sv-brief .sv-cover__hint { font-size: 13px; }
}
/* Picture grids that would run under the bar are given the free height (app.js fitChoices) and size their pictures to it */
.sv-styles.sv-fit, .sv-covers.sv-fit { height: var(--fit); grid-auto-rows: minmax(0, 1fr); align-items: stretch; margin-bottom: 0; }
.sv-styles.sv-fit > li, .sv-covers.sv-fit > li { min-height: 0; }
.sv-styles.sv-fit .sv-style { height: 100%; min-height: 0; padding: 3px; gap: 2px; }
.sv-styles.sv-fit .sv-style__art, .sv-styles.sv-fit .sv-style__art--pending, .sv-styles.sv-fit .sv-style__art--failed { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.sv-styles.sv-fit .sv-style__art img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 25%; }   /* Oz 40: filled, no white bars */
.sv-styles.sv-fit .sv-style__desc { display: none; }
.sv-styles.sv-fit .sv-style__title { flex: 0 0 auto; font-size: 15px; line-height: 1.2; padding: 3px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-covers.sv-fit { margin-top: 8px; }
.sv-covers.sv-fit .sv-cover { height: 100%; min-height: 0; align-items: center; text-align: center; padding: 3px; gap: 2px; }
.sv-covers.sv-fit .sv-cover__book { flex: 1 1 0; min-height: 0; width: auto; max-width: 100%; aspect-ratio: 3 / 4; padding: 7px 6px 6px; gap: 3px; container-type: size; }
.sv-covers.sv-fit .sv-cover__name { font-size: 20px; font-size: clamp(13px, 13cqh, 34px); }
/* QA5 RC13 (25.10, mobile-08): the subtitle ("and the Christmas Adventure") never under 13 px (it was 8–9 px on a phone) */
.sv-covers.sv-fit .sv-cover__rest { font-size: 13px; font-size: clamp(13px, 5.4cqh, 16px); }
.sv-covers.sv-fit .sv-cover__kind { flex: 0 0 auto; font-size: 15px; padding-top: 2px; }
.sv-covers.sv-fit .sv-cover__hint { display: none; }
.sv-covers.sv-fit .sv-cover__pill { font-size: 13px; padding: 4px 7px; top: auto; bottom: 4px; right: 4px; }
/* QA5 RC13: a small cover (the four covers on a phone, about 112–159 px tall; the query reads the inner height, 13 px less) keeps
   its subtitle at 12 px; a thumbnail (a short phone, under about 112 px) has no room for a readable one: the name and the kind under
   the cover say it. Under about 160 px "✓ Picked" is a round check in the corner (the words stay for screen readers) */
@container (max-height: 146px) { .sv-covers.sv-fit .sv-cover__rest { font-size: 12px; line-height: 1.1; } }
@container (max-height: 99px) { .sv-covers.sv-fit .sv-cover__rest { display: none; } }
@container (max-height: 146px) {
  .sv-covers.sv-fit .sv-cover__pill { width: 22px; height: 22px; padding: 0; font-size: 0; display: grid; place-items: center; overflow: hidden; }
  .sv-covers.sv-fit .sv-cover__pill::before { content: "\2713"; font-size: 13px; line-height: 1; }
}
/* The words card: the giver as three columns (two rows), picture above the word */
.sv-waitq .sv-picks--3 .sv-pick { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; font-size: 14px; text-align: center; min-height: 60px; }
/* Short windows (a 640 px tall phone): one line less of help, smaller air, lower cards (never under 44 px) */
@media (max-height: 700px) {
  #sb-root:not([data-flow="ms"]) .sv-scroll .sb-main { padding-top: 10px; }
  #sb-app[data-screen="recipient"] .sb-step__subtitle, #sb-app[data-screen="occasion"] .sb-step__subtitle, #sb-app[data-screen="hero"] .sb-step__subtitle,
  #sb-app[data-screen="style"] .sb-step__subtitle, #sb-app[data-screen="genre"] .sb-step__subtitle { display: none; }
  #sb-app[data-screen="hero"] .sv-pick { min-height: 56px; padding: 6px; gap: 3px; }
  #sb-app[data-screen="hero"] .sv-pick[data-icon]::before { font-size: 22px; }
  #sb-app[data-screen="hero"] .sv-ages .sv-pick { min-height: 46px; }
  #sb-app[data-screen="hero"] .sb-field { margin-bottom: 12px; }
  #sb-app[data-screen="hero"] .sv-herochip img { width: 32px; height: 32px; }
  .sv-recipient, .sv-occasion { min-height: 56px; }
  .sv-strip { grid-template-columns: repeat(4, 54px); justify-content: center; margin-bottom: 6px; }
  .sv-strip__name { display: none; }
  .sv-waitq { padding: 10px 12px 2px; margin-bottom: 10px; }
  .sv-waitq__head { margin-bottom: 6px; }
  .sv-waitq .sv-pick { min-height: 48px; }
  .sv-waitq .sb-field { margin-bottom: 8px; }
  #sb-app[data-screen="style"] .sv-progress-line { margin: 0 0 8px; }
}

@media (min-width: 900px) { #sb-app[data-screen="genre"] { max-width: 820px; } }

/* Round 2 (12.10): a stuck wait says so plainly */
.sv-stuck__tip { margin: 0 0 14px; }
.sv-stuck__line { margin: 6px 0 2px; font-weight: 700; color: var(--ink); }
/* ---------- Round 3 (12.10): the kind of story as picture cards; the optional moments as one closed row; quiet controls ---------- */
.sv-kinds { margin: 0 0 6px; }
.sv-kind { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; min-height: 68px; padding: 8px 10px; text-align: left; }
.sv-kind[data-icon]::before { font-size: 26px; flex: 0 0 auto; width: 32px; text-align: center; }
.sv-kind__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-kind__title { font: 700 16px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.sv-kind__line { font: 400 13px/1.3 var(--sans); color: var(--muted); }
@media (min-width: 700px) { .sv-kind { min-height: 72px; padding: 10px 14px; } .sv-kind__title { font-size: 17px; } }
@media (max-height: 700px) { .sv-kind { min-height: 48px; padding: 5px 8px; } .sv-kind__line { display: none; } .sv-kind[data-icon]::before { font-size: 22px; width: 26px; } #sb-app[data-screen="story"] .sb-step__subtitle { display: none; } }
/* the optional moments: a quiet row, then one field at a time */
.sv-moments { margin: 4px 0 14px; }
.sv-moments .sb-field { margin-bottom: 8px; }
.sv-moments .sb-textarea { min-height: 0; }
.sv-moments__starters { margin: 0 0 8px; }
.sv-moments__starters .sv-chip { min-height: 44px; padding: 8px 12px; font-size: 15px; font-weight: 600; }
.sv-moments__another { display: block; padding: 4px 0; }
.sv-moments__nav { display: flex; align-items: center; gap: 16px; }
.sv-moments__next { min-width: 120px; }
/* a counter appears only near the limit; never under an empty field */
.sb-field__count[hidden] { display: none; }
/* no dashed boxes that look like upload areas: "add another" is a quiet text link */
.sb-repeater-add { display: block; width: auto; margin: 0 0 14px; padding: 8px 0; min-height: 44px; border: 0; background: none; box-shadow: none; text-align: left; color: var(--ink); font: 700 17px/1.4 var(--sans); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.sv-kind__title { overflow-wrap: break-word; }
@media (max-width: 380px) { .sv-kind { gap: 6px; padding-left: 6px; padding-right: 6px; } .sv-kind__title { font-size: 14.5px; } .sv-kind[data-icon]::before { width: 24px; } }
/* ---------- Round 4 (12.10, review of rounds 1–2) ---------- */
/* M4 (a): the pictures landed while a question is open: a quiet line with the way to them */
.sv-waitq__ready { max-width: 560px; margin: 0 auto 10px; text-align: center; font: 700 16px/1.4 var(--sans); color: var(--ink); }
.sv-waitq__ready .sv-textlink { display: inline; padding: 0 2px; min-height: 0; }
/* m2 + M4 (b): the quiet links under the story covers, one wrapping row that stays in view */
.sv-linkrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin: 4px 0 0; }
.sv-linkrow .sv-textlink { padding: 6px 0; min-height: 44px; margin: 0; font-size: 15px; }
.sv-brief > .sv-waitq { margin-top: 4px; }
/* m4: the seven eye colors in view: four columns of small cards */
.sv-picks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sv-picks--4 .sv-pick { min-height: 60px; padding: 6px 2px; gap: 3px; font-size: 13px; }
.sv-picks--4 .sv-pick[data-icon]::before, .sv-picks--4 .sv-pick--swatch::before { font-size: 20px; width: 22px; height: 22px; }
/* m3: the card's text steps keep their button in view: on a phone-height window the strip shrinks to a row of small
   thumbnails (round 4: it never disappears: the pictures filling in are what the wait shows) and the subtitle gives way */
@media (max-height: 900px) {
  .sv-painting--words .sv-strip, .sv-painting--about .sv-strip, .sv-painting--moments .sv-strip { grid-template-columns: repeat(4, 44px); justify-content: center; gap: 8px; margin-bottom: 4px; }
  .sv-painting--words .sv-strip__name, .sv-painting--about .sv-strip__name, .sv-painting--moments .sv-strip__name { display: none; }
  .sv-painting--words .sv-strip__art, .sv-painting--about .sv-strip__art, .sv-painting--moments .sv-strip__art { border-radius: 8px; }
  .sv-painting--words .sb-step__subtitle, .sv-painting--about .sb-step__subtitle, .sv-painting--moments .sb-step__subtitle { display: none; }
}
@media (min-width: 481px) { .sv-strip { max-width: 420px; } }
.sv-waitq .sv-fits .sv-chip { min-height: 44px; padding: 6px 10px; font-size: 14px; }
.sv-waitq .sv-moments { margin: 0; }
@media (max-height: 700px) { #sb-app[data-screen="meet"] .sb-step__subtitle { display: none; } .sv-waitq .sb-field__label { margin-bottom: 2px; } .sv-waitq .sv-textlink { min-height: 44px; padding: 2px 0; } }
/* m6: one main button per width on a desktop too: the bar carries it (the in-page copy was cut in half by the bar on two screens) */
@media (min-width: 481px) {
  #sb-root:not([data-flow="ms"]) .sb-actions > .sv-primary[data-primary], #sb-root:not([data-flow="ms"]) .sv-approve[data-primary="1"]:not(.sv-approve--own) { display: none; }
}
/* m11: a focused field is not an error: a dark ring, coral stays for mistakes */
#sb-app .sb-input:focus:not(.sb-invalid), #sb-app .sb-textarea:focus:not(.sb-invalid) { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(43, 33, 24, .12); }
/* m12 */
.sv-payretry { max-width: 560px; margin: 0 auto 12px; }
/* M3: the picture of "Is this …?" gives way (app.js fitMeet sets its height): keep it whole */
.sv-hero__art > img { object-fit: contain; }
.sv-hero__art { min-height: 96px; }
/* Round 4 fit tuning (measured by evidence/A4/fit.py at 1280x800, 1000x800, 390x844, 360x640) */
/* m4: the eye colors as one row of seven small cards (all in view with the two questions above) */
.sv-picks--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
/* QA5 RC13 (25.10, mom-10): the eye labels at 13 px (were 11 px); on a phone the row becomes two rows (below) */
.sv-picks--7 .sv-pick { min-height: 56px; padding: 5px 0 4px; gap: 3px; font: 700 13px/1.1 var(--sans); border-radius: 10px; box-shadow: none; overflow-wrap: normal; }
.sv-picks--7 .sv-pick[data-icon]::before { font-size: 18px; }
.sv-picks--7 .sv-pick--swatch::before { width: 20px; height: 20px; }
.sv-picks--7 .sv-pick--on::after { width: 14px; height: 14px; font-size: 9px; line-height: 14px; top: 2px; right: 2px; }
/* UB-MOBILE-1023 chip (owner; replaced the m4 rule that hid it): on a short phone the photo and the name stay, as one compact line;
   a short desktop window keeps the m4 rule as it was (the desktop does not change) */
@media (max-height: 700px) and (min-width: 761px) { #sb-app[data-screen="hero"]:has(.sv-picks--7) .sv-herochip { display: none; } }
@media (max-height: 700px) and (max-width: 760px) {
  #sb-app[data-screen="hero"] .sv-herochip { gap: 8px; margin: 0 0 4px; font-size: 14px; line-height: 1.15; }
  #sb-app[data-screen="hero"] .sv-herochip img { width: 28px; height: 28px; border-width: 1px; }
  #sb-app[data-screen="hero"] .sv-herochip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
  /* the chip's ~32 px come back from the spacing (the Christmas header is taller): the eye row stays above the bar at 390x664 */
  #sb-app[data-screen="hero"] .sb-step__title { margin-bottom: 4px; }
  #sb-app[data-screen="hero"] .sb-field { margin-bottom: 8px; }
  #sb-app[data-screen="hero"] .sb-field__label { margin-bottom: 4px; }
  #sb-app[data-screen="hero"] .sv-ages .sv-pick { min-height: 44px; }
  #sb-app[data-screen="hero"] .sv-picks--7 .sv-pick { min-height: 52px; padding-top: 4px; padding-bottom: 3px; }
  #sb-app[data-screen="hero"] .sv-picks--7 .sv-pick[data-icon]::before { font-size: 18px; }
}
/* the same change: "As in the photo" (the first eye card) takes two columns on a phone, so it wraps to two lines, not three.
   QA5 RC13 (25.10): with 13 px labels the eye cards are two rows on a phone (four columns, "As in the photo" two of them; six
   colours without it: three columns), lower cards (48 px, never under 44) so the two rows cost as little height as possible */
@media (max-width: 760px) {
  #sb-app[data-screen="hero"] .sv-picks--7 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #sb-app[data-screen="hero"] .sv-picks--7:has([data-focus="hero-eye-photo"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #sb-app[data-screen="hero"] [data-focus="hero-eye-photo"] { grid-column: span 2; padding-left: 4px; padding-right: 4px; }
  #sb-app[data-screen="hero"] .sv-picks--7 .sv-pick { min-height: 48px; padding-top: 4px; padding-bottom: 3px; }
}
/* m3: text steps of the card on every phone-height window: the ideas are one swipeable row */
@media (max-height: 900px) {
  /* N2 (round 5): the ideas wrap (every one in view, no sideways scroll); compact chips */
  .sv-waitq .sv-fits .sv-chips, .sv-waitq .sv-moments__starters { flex-wrap: wrap; overflow: visible; gap: 6px; }
  .sv-waitq .sv-fits .sv-chip, .sv-waitq .sv-moments__starters .sv-chip { flex: 0 0 auto; white-space: nowrap; padding: 4px 10px; font-size: 14px; }
  .sv-waitq .sb-textarea { padding-top: 8px; padding-bottom: 8px; }
  .sv-waitq__nav { flex-wrap: wrap; gap: 0 16px; }
}
@media (max-height: 700px) {
  .sv-painting .sb-step__title, #sb-app[data-screen="meet"] .sb-step__title { margin-bottom: 4px; }
  .sv-painting .sv-progress-line { margin: 0 0 6px; }
  .sv-waitq .sb-input, .sv-waitq .sb-textarea { padding-top: 6px; padding-bottom: 6px; }
  .sv-waitq .sb-field { margin-bottom: 6px; }
  .sv-waitq__next { min-height: 46px; margin-bottom: 2px; }
  .sv-hero { padding: 6px 6px 8px; gap: 6px; margin-bottom: 8px; }
  .sv-hero__status { font-size: 14px; }
  /* round 4: a 640 px tall window: the strip of a text step is a row of tiny thumbnails next to nothing else */
  .sv-painting--words .sv-strip, .sv-painting--about .sv-strip, .sv-painting--moments .sv-strip { grid-template-columns: repeat(4, 30px); gap: 6px; margin-bottom: 2px; }
  .sv-painting--words .sv-strip__art, .sv-painting--about .sv-strip__art, .sv-painting--moments .sv-strip__art { border-radius: 6px; }
  .sv-painting--words .sv-progress-line, .sv-painting--about .sv-progress-line, .sv-painting--moments .sv-progress-line { font-size: 14px; margin-bottom: 4px; }
  .sv-painting--words .sb-step__title, .sv-painting--about .sb-step__title, .sv-painting--moments .sb-step__title { font-size: 22px; line-height: 1.2; }
}
.sv-person__art img { object-fit: contain; }
/* M4 (b), round 4: "Back to the stories" under the card opened on the story screen */
.sv-personal-close { display: block; margin: 6px auto 0; }
/* N2 (round 5): on a 640-700 px tall window the ideas wrap but fewer are offered (4 "what fits", 2 moment starters), so every
   one shown is in view together with the field and its button; the buyer can still type anything */
@media (max-height: 700px) {
  .sv-waitq .sv-fits .sv-chips > .sv-chip:nth-child(n+5):not([aria-pressed="true"]), .sv-waitq .sv-moments__starters > .sv-chip:nth-child(n+3) { display: none; }
}
/* UB-MOBILE-1023 D (owner; replaces m5 of round 5, the compact side-by-side cards): the photo screens of the main flow and of
   Christmas. One photo line and three small drawings above the cards, before any upload; one full-width card per character,
   stacked, in a single centred column of at most 560 px on a wide screen; every card the same stack (name, a big photo zone with
   its "0/4", then the choices); one short tick with "How we use photos" (a 44 px tap area) under it. */
#sb-app:is([data-screen="photos"], [data-screen="photo"]) > .sv-screen > :is(.sv-photoguide, .sv-char, .sv-photos, .sb-field) { max-width: 560px; margin-left: auto; margin-right: auto; }
.sv-photoguide { margin: 0 0 16px; }
.sv-photoguide__line { margin: 0; text-align: center; font: 600 15px/1.4 var(--sans); color: var(--ink); }
.sv-photoguide .sv-tips { max-width: 300px; margin: 12px auto 0; gap: 8px; }
.sv-photoguide .sv-tip { font-size: 12px; gap: 4px; }
.sv-photoguide .sv-tip__art { max-width: 60px; }
.sv-photoguide .sv-tip__mark { top: -5px; right: calc(50% - 38px); width: 20px; height: 20px; font-size: 12px; }
.sv-char--photo { padding: 14px 16px 16px; margin-bottom: 14px; }
.sv-char--photo .sv-photos { margin-bottom: 16px; }
.sv-char--photo .sv-photo-add, .sv-photos--hero .sv-photo-add { min-height: 112px; }
.sv-char--photo .sv-photo-add__count, .sv-photos--hero .sv-photo-add__count { font: 600 13px/1 var(--sans); color: var(--sv-muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.sv-char__fields { display: grid; gap: 14px; }
.sv-char__fields > .sb-field { margin: 0; }
.sv-char__fields .sb-field__label { margin-bottom: 6px; }
#sb-app:is([data-screen="photos"], [data-screen="photo"]) .sv-consent__more { margin: 14px 0 0 36px; font-size: 14px; }   /* clear of the label: the whole 44 px of the link is its own */
@media (max-width: 480px) { .sv-char--photo { padding: 12px 12px 14px; } }

/* Complimentary book redemption */
.bf-coupon{display:grid;gap:10px;margin:20px 0;padding:20px;border:1px solid #d7cec3;border-radius:14px;text-align:left}.bf-coupon label{font-weight:700}.bf-coupon input{box-sizing:border-box;width:100%;min-height:48px;padding:12px;border:1px solid #b9afa5;border-radius:8px;font:inherit;background:#fff;color:#24211e}.bf-coupon button{width:100%}.bf-coupon input:focus-visible{outline:2px solid #8b542e;outline-offset:2px}

.bf-coupon[hidden]{display:none}.bf-coupon-section{margin-top:16px;border-top:1px solid #eee5dd;padding-top:8px}.bf-coupon-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.bf-coupon-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.bf-coupon-section .bf-coupon{margin:8px 0 0;padding:0;border:0;border-radius:0}

/* Delivery selection is a client preference only; price and checkout URL remain server-issued. */
.bf-delivery { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; text-align: left; }
.bf-delivery legend { margin: 0 0 2px; font: 700 16px/1.3 var(--sans); color: var(--ink); }
.bf-delivery__option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.bf-delivery__option[data-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bf-delivery__option input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent); }
.bf-delivery__copy { display: grid; gap: 2px; min-width: 0; color: var(--sv-muted); font-size: 14px; line-height: 1.35; }
.bf-delivery__copy strong { color: var(--ink); font-size: 15px; }
.bf-delivery__price { display: grid; gap: 2px; margin-left: auto; text-align: right; color: var(--sv-muted); font-size: 14px; white-space: nowrap; }   /* QA5 RC13: "+$20" 14 px (was 12) */
.bf-delivery__price strong { color: var(--ink); font: 700 18px/1 var(--sans); }
/* Wasabi call 30.10 (#15): the struck-through price (steps.json price_compare) before the price, muted, in the choice and the price line */
.bf-was { color: var(--sv-muted); font: 400 15px/1 var(--sans); text-decoration: line-through; text-decoration-thickness: 1.5px; }
@media (max-width: 430px) { .bf-delivery__option { gap: 9px; padding: 11px; } }
/* R34 (Oz 23.10): nothing preselected; Rush is the emphasised "Most popular" option; a buy tap without a pick marks the choice red */
.bf-delivery__option { min-height: 44px; }
.bf-delivery__option--popular { border-color: var(--accent); background: #fff7f2; }
.bf-delivery__badge { justify-self: start; margin-bottom: 2px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 13px/1.5 var(--sans); letter-spacing: .03em; text-transform: uppercase; }   /* QA5 RC13: "Most popular" 13 px (was 11) */
.bf-delivery[data-need="true"] { border-radius: 12px; outline: 2px solid var(--sv-error); outline-offset: 6px; }
.bf-delivery[data-need="true"] legend { color: var(--sv-error); }
.bf-delivery[data-need="true"] .bf-delivery__option { border-color: var(--sv-error); }
.bf-delivery__need { margin: 0; font: 700 15px/1.4 var(--sans); }
.bf-delivery--pulse { animation: bf-need .45s ease-in-out 2; }
@keyframes bf-need { 50% { outline-offset: 2px; box-shadow: 0 0 0 8px rgba(179, 38, 30, .18); } }
@media (prefers-reduced-motion: reduce) { .bf-delivery--pulse { animation: none; } }
/* 17.10 (CRO): the money-back line under the pay button */
.bf-guarantee { margin: 12px 0 0; text-align: center; text-wrap: balance; }
.bf-guarantee a { color: var(--accent); text-underline-offset: 3px; }
#sb-app .bf-offer .bf-guarantee a { text-decoration: none; font-weight: 700; }   /* R34: no underlined links in the offer */
/* 17.10 (CRO): the trust line above the legal tick on the photo screens */
.sv-photo-trust { margin: 14px 0 4px; font-weight: 600; color: var(--ink); }
/* 17.10 (email capture): the consent line under each "email me" button */
.sv-email__consent { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
.sv-email__consent a { color: inherit; text-underline-offset: 3px; }
/* 17.10 (email capture): sheet B on the preview. A row of #sb-root of its own right above the bottom bar, so it never covers
   the pinned "Get the book" button; the scrolling page above it just gets shorter. No countdown anywhere in it. */
.sv-sheet { flex: 0 0 auto; position: relative; z-index: 2; max-height: 62vh; max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 20px 14px; background: #fff; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(43, 33, 24, .14);
  animation: sv-sheet-in .25s ease-out both; }
#sb-root[data-bar="off"] .sv-sheet { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.sv-sheet__inner { max-width: 560px; margin: 0 auto; }
.sv-sheet__title { font: 700 20px/1.25 var(--serif); color: var(--ink); margin: 0 0 6px; }
.sv-sheet__title:focus, .sv-sheet .sv-email__saved:focus { outline: none; }
.sv-sheet .sv-email__lead { font-size: 16px; margin: 0 0 10px; }
.sv-sheet .sv-email__saved { margin: 4px 0 0; text-align: left; }
.sv-sheet .sv-email__actions { margin-top: 10px; }
@keyframes sv-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sv-sheet { animation: none; } }
/* 17.10 (free Rush): sheet C uses sheet B's place and look (a row above the bottom bar, never over the pinned button). Its end is
   a date line, not a countdown; the "Your order" note says the open order carries it. */
.sv-sheet--offer .sv-offer__ends { margin: -4px 0 0; font-size: 14px; }
.sv-offer__order { margin: 0 0 12px; text-align: center; text-wrap: balance; }

/* ---------- UB-FINAL-1019 (owner call 19.10) ---------- */
/* item 11: the preview reveal on a phone and a tablet: the book large and first, in a warm frame; the offer below is unchanged */
.sv-reveal .sb-step__title { font-size: clamp(28px, 7.4vw, 42px); line-height: 1.12; margin-bottom: 6px; }
.sv-reveal .sb-step__subtitle { margin-bottom: 14px; }
.sv-reveal .sv-viewer-wrap { margin: 0; max-width: 100%; }   /* RC gate H1: never wider than the column (was -8px each side) */
.sv-reveal .sv-viewer:not(.sv-viewer--full) { border: 0; border-radius: 20px; padding: 6px; margin-bottom: 12px;
  background: linear-gradient(160deg, #fff6e3 0%, #f6e2c8 55%, #efd3b4 100%);
  box-shadow: 0 14px 38px rgba(51, 41, 31, .18), 0 2px 6px rgba(51, 41, 31, .10); }
.sv-reveal .sv-viewer:not(.sv-viewer--full) iframe { border-radius: 15px; height: clamp(500px, calc(100vh - 230px), 900px); height: var(--sv-frame-h, clamp(500px, calc(100dvh - 230px), 900px)); }
/* review 4: "Read full screen" as a small pill at the top right of the book, in the first view (phone and tablet) */
.sv-reveal .sv-fullread { display: inline-flex; align-items: center; gap: 6px; width: auto; max-width: none; min-height: 44px; margin: 0 8px 8px auto; padding: 0 16px;
  border: 1.5px solid var(--field); border-radius: 999px; background: rgba(255, 246, 227, .92); color: var(--ink); font: 600 16px/1 var(--sans); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.sv-reveal .sv-fullread::before { content: "\2922"; font-size: 15px; }
.sv-reveal .sv-viewer-wrap { display: flex; flex-direction: column; }
/* phone: the heading gives the book its room (the offer below says the price; the reader says the free pages) */
@media (max-width: 480px) { .sv-reveal .sb-step__title { font-size: 28px; margin-bottom: 2px; } .sv-reveal .sb-step__subtitle { font-size: 15px; margin-bottom: 8px; } }
.sv-reveal .sv-preview-tip { margin: 4px 0 6px; font-size: 15px; }
@media (min-width: 761px) and (max-width: 1100px) {
  /* a tablet: the two-page spread nearly full width and as tall as the screen allows above the bottom bar */
  .sv-reveal .sv-viewer:not(.sv-viewer--full) iframe { height: clamp(560px, calc(100vh - 260px), 1100px); height: var(--sv-frame-h, clamp(560px, calc(100dvh - 260px), 1100px)); }
}
@media (min-width: 1101px) { .sv-reveal .sv-viewer-wrap { margin: 0; } .sv-reveal .sv-fullread { display: none; } }

/* item 17: the photo counter and why more photos help */
.sv-photo-count { margin: 10px 0 0; font: 600 16px/1.35 var(--sans); color: var(--ink); }
.sv-photo-count[data-level="more"]::before { content: "\25CF  "; color: #e39a3b; white-space: pre; }
.sv-photo-count[data-level="good"]::before { content: "\2713  "; color: var(--sv-ok, #3f9d5a); font-weight: 700; white-space: pre; }
.sv-photo-why, .sv-story-hint { font: 400 16px/1.5 var(--sans); color: var(--sv-muted); margin: 8px 0 0; }   /* OZ-1023b item 19: the page font, not an italic serif */
.sv-photos--hero .sb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sv-photos--many .sb-thumb { width: 76px; height: 76px; }

/* item 18: what makes a good story */
.sv-story-hint { margin: 0 0 10px; }
.sv-moments > .sv-story-hint { margin: 6px 0 0; }
/* Oz 27.10 #21: the story step's highlighted line (the info notice: paper-2, accent left border, ink text), tight inside the card */
.sv-notice.sv-story-focus { margin: 0 0 12px; padding: 10px 12px; font: 600 15px/1.45 var(--sans); color: var(--ink); }
.sv-moments > .sv-story-focus { margin: 4px 0 10px; }
.sv-notice.sv-stay { margin: 4px 0 14px; }   /* 28.10 (Oz call 27.10 #24, 05_dont_leave.png): the "Don't leave this page" plaque, first under the title and its line */
/* Oz 27.10 #21 (ADDENDUM 4): the story meter (bar + words) and its soft-minimum line under the story fields are gone */
/* T5 finding 2: "Read full screen" on a tablet too (touch, up to 1100 px), under the book */
@media (min-width: 761px) and (max-width: 1100px) {
  .sv-reveal .sv-fullread { display: inline-flex; }
}

/* item 19 (review): the optional email field on the details step */
.sv-email-field { margin-top: 14px; }
.sv-email-field .sv-email__consent { margin-top: 6px; font-size: 16px; }   /* RC gate check 3: >= 16 px */
.sv-email__saved--field { text-align: left; margin: 12px 0 0; }

/* mobile gate (19.10): tap areas >= 44 px without a bigger look; "✓ Selected" readable (white on #b8361a = 5.9:1, was 3.1:1) */
.sb-header__track.sv-header-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.sb-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
.sv-textlink { min-width: 44px; }
.sv-style__pill { background: #b8361a; color: #fff; }
/* the "×" on a photo: a 44 px tap area around the same 30 px dark circle (top right corner of the thumb) */
.sb-thumb__remove { top: 0; right: 0; width: 44px; height: 44px; border-radius: 0 0 0 50%; background: radial-gradient(circle at 60% 40%, rgba(48, 35, 33, .72) 0 15px, transparent 15.5px); }

/* RC gate: the preview frame and its skeleton stay inside the column (box-sizing with the frame's padding) */
.sv-reveal .sv-viewer, .sv-reveal .sv-viewer__skeleton { box-sizing: border-box; max-width: 100%; }

/* ---------- UB-MOBILE-1023 (owner, iPhone pass) ---------- */
/* "Meet your characters": the portraits first; two or more people side by side on a phone, each with a short Approve / Adjust */
.sv-drawing__eta { display: block; font: 600 13px/1.3 var(--sans); color: var(--sv-muted); }
#sb-app[data-screen="meet"] .sv-cast { margin-bottom: 14px; }
/* one filled main button on the screen at every width (the bar's "Approve all"): each card's own "Approve" is outlined */
.sv-cast--many .sb-btn-next.sv-approve--own { background: #fff; color: var(--ink); border: 2px solid var(--accent); box-shadow: none; }
.sv-cast--many .sb-btn-next.sv-approve--own::before { content: "\2713"; color: var(--accent); margin-right: 6px; font-weight: 700; }
.sv-cast--many .sb-btn-next.sv-approve--own:disabled { opacity: .55; }
@media (max-width: 480px) {
  #sb-app[data-screen="meet"] .sb-step__title { margin-bottom: 2px; }
  #sb-app[data-screen="meet"] .sb-step__subtitle { margin-bottom: 10px; font-size: 16px; }
  .sv-cast.sv-cast--many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sv-cast--many .sv-person { padding: 6px 6px 8px; gap: 4px; }
  .sv-cast--many .sv-person__art { max-width: 100%; }
  .sv-cast--many .sv-person__art img { max-height: 46vh; }
  .sv-cast--many .sv-person--pending .sv-person__art, .sv-cast--many .sv-person--failed .sv-person__art { max-width: 100%; }
  .sv-cast--many .sv-drawing { padding: 8px; font-size: 14px; }
  .sv-cast--many .sv-person__name { font-size: 18px; margin: 2px 0 0; }
  .sv-cast--many .sv-person__role { font-size: 13px; margin: 0; }
  .sv-cast--many .sv-approve, .sv-cast--many .sv-person > .bf-secondary { min-height: 44px; padding: 6px 8px; font-size: 16px; margin-top: 0; }
  .sv-cast--many .sv-swap { margin-top: 0; }
  .sv-cast--many .sv-swap .sv-swap__btn { min-height: 44px; margin-top: 0; padding: 4px 4px; gap: 6px; font-size: 15px; white-space: nowrap; }
  .sv-cast--many .sv-swap__thumb { width: 28px; height: 28px; }
  .sv-cast--many .sv-swap__consent { font-size: 12px; line-height: 1.35; }
  .sv-cast--many .sv-hero__photo img { width: 40px; height: 40px; }
  .sv-cast--many .sv-person:has(.sv-adjust) { grid-column: 1 / -1; }   /* the adjust form gets the full width */
}
/* the "Make it personal" card under the portraits: compact, optional, its ideas in one row that scrolls sideways */
.sv-waitq__opt { font: 400 15px/1.2 var(--sans); color: var(--sv-muted); white-space: nowrap; }
#sb-app[data-screen="meet"] .sv-waitq { padding: 12px 14px 4px; }
#sb-app[data-screen="meet"] .sv-waitq__title { font-size: 19px; }
/* one main action per screen: under the portraits the card's own steps are outlined, the bar's "Approve all" stays the one filled button */
#sb-app[data-screen="meet"] .sv-waitq .sv-waitq__next, #sb-app[data-screen="meet"] .sv-waitq .sv-moments__next { background: #fff; color: var(--ink); border: 2px solid var(--accent); box-shadow: none; }
#sb-app[data-screen="meet"] .sv-waitq .sv-moments__starters, #sb-app[data-screen="meet"] .sv-waitq .sv-fits .sv-chips {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 6px; padding-bottom: 2px; }
#sb-app[data-screen="meet"] .sv-waitq .sv-moments__starters::-webkit-scrollbar, #sb-app[data-screen="meet"] .sv-waitq .sv-fits .sv-chips::-webkit-scrollbar { display: none; }
#sb-app[data-screen="meet"] .sv-waitq .sv-moments__starters > .sv-chip, #sb-app[data-screen="meet"] .sv-waitq .sv-fits .sv-chips > .sv-chip { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
/* "+ Add another moment" waits for text in the moment (its [hidden] lost to display: block) */
.sv-moments__another[hidden] { display: none; }

/* actions that read as links ("More kinds of story", "+ Add someone else…", "+ Make it personal"): outlined full-width buttons */
.sv-textlink.sv-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 560px; min-height: 48px; margin: 10px auto 0; padding: 10px 16px;
  border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 16px/1.3 var(--sans); text-decoration: none; text-align: center; box-shadow: var(--shadow-sm); }
.sv-textlink.sv-action[data-action-icon]::before { content: attr(data-action-icon); color: var(--accent); font-size: 16px; line-height: 1; }
.sv-textlink.sv-action:active:not(:disabled) { background: var(--paper-2); border-color: var(--field); }
.sv-textlink.sv-action:disabled { opacity: .55; cursor: default; }
.sv-linkrow:has(.sv-action) { flex-direction: column; align-items: stretch; gap: 8px; }
.sv-linkrow .sv-textlink.sv-action { margin: 0; min-height: 44px; padding: 8px 14px; font-size: 15px; }
.sv-castextras .sv-textlink.sv-action { margin-top: 10px; text-align: center; }

/* the bottom bar: "Step X of N" in one small row above it; the tile screens' "Tap one to continue" reads as a hint, not a broken button */
.sb-navbar { flex-wrap: wrap; row-gap: 4px; }
.sb-navbar > .sb-navbar__text { flex: 1 0 100%; margin: 0; font: 600 13px/1.25 var(--sans); color: var(--sv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-navbar > .sb-navbar__text[hidden] { display: none; }
#sb-root[data-flow="child"]:not([data-screen="preview"]) .sb-navbar > #sb-progress-text { position: static; width: auto; height: auto; clip: auto; }   /* was visually hidden on the child path */
#sb-root[data-flow="ms"] .sb-navbar > .sb-navbar__text { display: none; }
#sb-next.sv-next--hint, #sb-next.sv-next--hint:disabled { background: #fff; color: var(--sv-muted); border: 2px dashed var(--field); cursor: default; }
#sb-next.sv-next--hint svg { display: none; }
@media (max-width: 480px) { #sb-next.sv-next--hint { padding: 0 12px; } #sb-next.sv-next--hint .sb-navbtn__label { overflow: visible; text-overflow: clip; } }

/* the first question: hints under the recipient tiles, the "photo -> drawing -> book page" strip, a real page and the trust line */
.sv-recipient .sv-recipient__hint { display: block; font: 400 13px/1.25 var(--sans); color: var(--sv-muted); margin-top: 1px; }
.sv-howstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 330px; margin: 0 auto 8px; padding: 0; list-style: none; }
.sv-howstrip__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sv-howstrip__item picture { display: block; width: 100%; }
.sv-howstrip__item img { display: block; width: 100%; height: 76px; object-fit: cover; object-position: 50% 30%; border-radius: 10px; border: 2px solid #fff; box-shadow: var(--shadow-sm); background: var(--paper-2); }
.sv-howstrip__item + .sv-howstrip__item::before { content: "\2192"; position: absolute; left: -11px; top: 30px; transform: translateX(-50%); color: var(--accent); font: 700 16px/1 var(--sans); }
.sv-howstrip__label { font: 700 14px/1.2 var(--sans); color: var(--ink, #2B2118); }   /* 28.10 (Oz call 27.10 #6): the photo -> drawn -> book labels like the landing pair (.tg-pair-label) */
/* round 4 (A): one compact real page of the Rosie sample book under the tiles (Rosie and Biscuit), cropped to the two of them */
.sv-sample { margin: 16px auto 4px; max-width: 420px; }
.sv-sample picture { display: block; }
.sv-sample img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: 50% 57%; border-radius: 14px; border: 3px solid #fff;
  box-shadow: var(--shadow); background: var(--paper-2); }
@media (max-width: 760px) { .sv-sample { max-width: 340px; margin-top: 14px; } .sv-sample img { height: 170px; } }
@media (max-height: 700px) { .sv-howstrip__item img { height: 56px; } .sv-howstrip__item + .sv-howstrip__item::before { top: 20px; } }
/* 23.10 (bookcard): the strip is one story, Rosie's photo -> her drawing -> her book. The photo is a print (white frame, thicker
   at the bottom, a slight tilt); the book is the cover dressed as a hardback: darker spine at the left, page edges at the right,
   a slight turn and a shadow, sized to the cover (864x1193) at the strip's picture height */
.sv-howstrip__item--photo img { border-width: 3px 3px 10px; border-radius: 3px; transform: rotate(-3deg); object-position: 50% 62%; }
/* the book stands a little taller than the pictures (it grows upward, so the three labels stay on one line) */
.sv-howstrip__book { --bk-h: 88px; position: relative; display: block; height: var(--bk-h); width: calc(var(--bk-h) * 0.724); margin: calc(76px - var(--bk-h)) 4px 0 0;
  transform: perspective(260px) rotateY(-16deg); transform-origin: 30% 50%; filter: drop-shadow(2px 3px 3px rgba(60, 40, 20, .32)); }
.sv-howstrip__book::after { content: ""; position: absolute; top: 2px; bottom: 2px; right: -4px; width: 5px; border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(90deg, #fffdf8 0 1px, #e3d8c4 1px 2px); }
.sv-howstrip__book::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 8px; border-radius: 3px 0 0 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12) 45%, rgba(255, 255, 255, .22) 70%, rgba(0, 0, 0, 0)); }
.sv-howstrip__item .sv-howstrip__book picture { position: relative; height: 100%; }
.sv-howstrip__item .sv-howstrip__book img { height: 100%; object-position: 50% 50%; border: 0; border-radius: 3px 4px 4px 3px; box-shadow: none; }
@media (max-height: 700px) { .sv-howstrip__book { --bk-h: 66px; margin-top: calc(56px - var(--bk-h)); } }
/* 28.10 (Oz, badge2 C): the book is the landing's real cover (sample-rosie/cover): its top third is clear sky, so the code-set title sits there
   (name 18 px, capitals 6 px, 2.5% from the top) and ends at ~29% of the tile, above the straw hat (31%), Rosie's face (39%) and Biscuit (46%).
   W-15 (28.10 Danilo): ONE girl in all three: the book was the same drawing (style-2d) as a hardback: the drawing in the lower part of
   the cover, the title set over its own sky above it like a generated cover (Shrikhand cream with a dark outline, the capitals in
   Literata; "UB D Shrikhand" / "UB D Literata" are declared with the final step's faces below). Bigger pictures: 104 px rows (76
   before), the book 124 px tall; the strip leaves room above for it (nothing cut under the header). */
.sv-howstrip { max-width: 372px; gap: 16px; margin: 22px auto 12px; }
.sv-howstrip__item img { height: 104px; }
.sv-howstrip__item + .sv-howstrip__item::before { top: 44px; }
.sv-howstrip__book { --bk-h: 124px; margin-top: calc(104px - var(--bk-h)); }
.sv-howstrip__book > picture { position: absolute; inset: 0; overflow: hidden; border-radius: 3px 4px 4px 3px; background: #40abf1; }
.sv-howstrip__item .sv-howstrip__book img { position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.sv-howstrip__btitle { position: absolute; z-index: 2; top: 2.5%; left: 8%; right: 5%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff8ec; pointer-events: none; }
.sv-howstrip__bname { font: 400 18px/1 "UB D Shrikhand", "Shrikhand", Georgia, serif; -webkit-text-stroke: 3px rgba(28, 52, 92, .95); paint-order: stroke fill; text-shadow: 0 2px 0 rgba(28, 52, 92, .55); }
.sv-howstrip__brest { margin-top: 1px; font: 600 6px/1.1 "UB D Literata", Georgia, serif; letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 0 2px rgba(28, 52, 92, .95), 0 1px 2px rgba(28, 52, 92, .8); }
@media (max-height: 700px) { .sv-howstrip { margin-top: 16px; } .sv-howstrip__item img { height: 76px; } .sv-howstrip__item + .sv-howstrip__item::before { top: 30px; } .sv-howstrip__book { --bk-h: 92px; margin-top: calc(76px - var(--bk-h)); } .sv-howstrip__btitle { top: 1.5%; } .sv-howstrip__bname { font-size: 13px; } .sv-howstrip__brest { font-size: 5px; } }
/* a phone: the strip says what the subtitle said; the "Sending your preview to …" line is one small line; the tiles stay in view */
@media (max-width: 480px) {
  .sv-howstrip ~ .sb-step__subtitle { display: none; }
  .sv-howstrip ~ .sb-step__title { margin-bottom: 10px; }
  .sv-email-first__sent { font-size: 14px; line-height: 1.3; margin: 0 0 10px; }
  .sv-recipients { gap: 8px; }
  .sv-recipient { min-height: 0; padding: 8px 8px; gap: 6px; }
  .sb-card.sv-recipient[data-icon]::before { width: 28px; font-size: 22px; }
  .sv-recipient .sv-recipient__title { font-size: 15px; }
  .sv-recipient .sv-recipient__hint { font-size: 12.5px; }
}
/* a drawing in a two-column grid: the photo the buyer added sits small in the top corner, clear of "Drawing …" and the time left */
@media (max-width: 480px) { .sv-cast--many .sv-person--pending .sv-hero__photo { top: 6px; bottom: auto; left: 6px; padding: 2px 2px 1px; font-size: 10px; } .sv-cast--many .sv-person--pending .sv-hero__photo img { width: 34px; height: 34px; } }
/* the Christmas trail's "Change": a 44 px tap area (its look comes from /landing/xmas/quiz.css, loaded later: hence the id) */
#sb-app .sv-xtrail__change { min-height: 44px; }
/* the occasion tiles carry one short line too */
.sv-occasion .sv-recipient__title[data-hint]::after { content: attr(data-hint); display: block; font: 400 12.5px/1.25 var(--sans); color: var(--sv-muted); margin-top: 2px; }

/* ---------- UB-MOBILE-1023 round 2 (quiz phone pass, 390x664): main flow only where it is a redesign (#sb-root:not([data-season]),
   app.js loadSeason marks the Christmas dress before the first render); generic tap targets for both ---------- */
.sv-hero__cap { display: none; }   /* the big picture's caption: only in the phone row of tiles below */
/* D: 44 px tap areas for links inside a line of text (the line keeps its height: the padding is taken back by the margin) */
#sb-app .sv-privacy a, #sb-app .sv-consent__more a, #sb-app .sv-email__consent a, #sb-app .bf-guarantee a, #sb-app .sv-photo-promise a {
  display: inline-block; padding: 12px 4px; margin: -12px -4px; }
#sb-app .sv-waitq__ready .sv-textlink { display: inline-block; min-height: 44px; padding: 12px 6px; margin: -12px -6px; }
#sb-app .sb-consent { min-height: 44px; }
#sb-app .sb-consent__box, #sb-app .sb-consent input[type=checkbox] { width: 24px; height: 24px; }
@media (max-width: 480px) {
  #sb-app .bf-delivery__option input { width: 24px; height: 24px; }

  /* A: a thin header and test strip, a one-row bottom bar ("Step X of N" above the progress line, left of the buttons) */
  #sb-root:not([data-season]) > .sb-announce { font-size: 11px; line-height: 16px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sb-root:not([data-season]) > .sb-header { min-height: 44px; padding: 0 12px; gap: 8px; }
  #sb-root:not([data-season]) > .sb-header .logo { font-size: 20px; gap: 6px; }
  #sb-root:not([data-season]) > .sb-header .logo svg { width: 21px; height: 21px; }
  #sb-root:not([data-season]) > .sb-header .sb-header__track { font-size: 13px; }
  #sb-root:not([data-season]) .sv-scroll .sb-main { padding-top: 8px; }
  #sb-root:not([data-season]) .sb-navbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px;
    align-items: center; align-content: center; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
  #sb-root:not([data-season]) .sb-navbar > .sb-navbar__text { grid-column: 1; grid-row: 1; align-self: end; font-size: 12px; line-height: 1.25;
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #sb-root:not([data-season]) .sb-navbar > .sb-navbar__text[hidden] { display: none; }
  #sb-root:not([data-season]) .sb-navbar > .sb-navbar__progress { grid-column: 1; grid-row: 2; align-self: start; min-width: 0; }
  #sb-root:not([data-season]) .sb-navbar:has(> .sb-navbar__text[hidden]) > .sb-navbar__progress { grid-row: 1 / 3; align-self: center; }
  #sb-root:not([data-season]) .sb-navbar > .sb-navbar__buttons { grid-column: 2; grid-row: 1 / 3; }
  #sb-root:not([data-season]) .sb-navbar .sb-navbtn { height: 48px; min-width: 48px; }
  /* one filled main action: the bar's. The cards' own steps are outlined on every screen; the preview's pay button is the bar's */
  #sb-root:not([data-season]) #sb-app .sv-waitq .sv-waitq__next, #sb-root:not([data-season]) #sb-app .sv-waitq .sv-moments__next {
    background: #fff; color: var(--ink); border: 2px solid var(--accent); box-shadow: none; }
  #sb-root:not([data-season]) #sb-app .bf-offer .bf-primary[data-primary] { display: none; }

  /* F: "Who is this book for?" has no Back in the bar ("Change" next to the address opens the email step; the browser's Back works too);
     the other tile screens keep Back, the same height as their "Tap …" hint */
  #sb-root:not([data-season])[data-screen="recipient"] #sb-back { display: none; }

  /* C: the book is ready: the cover with the reader's Previous / Next in the first view (app.js fitReader caps the frame at 58 % of the
     window), "Read full screen" under the book, the delivery choice right after it, the price and what's included below the choice */
  #sb-root:not([data-season]) .sv-reveal .sv-viewer-wrap > .sv-fullread { order: 2; margin: 0 auto 4px; min-height: 44px; }
  #sb-root:not([data-season]) .sv-reveal .sv-viewer:not(.sv-viewer--full) { margin-bottom: 8px; }
  #sb-root:not([data-season]) .sv-reveal .sv-preview-tip { display: none; }
  #sb-root:not([data-season]) .sv-reveal .bf-offer { display: flex; flex-direction: column; margin-top: 8px; padding-top: 14px; }
  #sb-root:not([data-season]) .sv-reveal .bf-offer > * { order: 5; }
  #sb-root:not([data-season]) .sv-reveal .bf-offer > .bf-delivery { order: 1; margin-bottom: 8px; }
  #sb-root:not([data-season]) .sv-reveal .bf-offer > .bf-demo { order: 2; margin: 0 0 10px; }
  #sb-root:not([data-season]) .sv-reveal .bf-offer > h2 { order: 3; font-size: 19px; margin: 4px 0 2px; }
}
/* E: "Is this Mia?": your photo, the drawing and the one used for every page in one row of equal framed tiles, captions on one line */
#sb-root:not([data-season]) .sv-hero > .sv-hero__art { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 8px; row-gap: 4px; align-items: start;
  padding: 8px; min-height: 0; overflow: visible; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art:is(:has(> .sv-hero__photo), :has(> .sv-hero__page)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art:has(> .sv-hero__photo):has(> .sv-hero__page) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > img, #sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-drawing,
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__photo img, #sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__page img {
  display: block; width: 100%; height: auto; max-height: none; min-height: 0; aspect-ratio: 3 / 4; object-fit: contain; border: 2px solid #fff; border-radius: 10px;
  background: #fff; box-shadow: var(--shadow-sm); }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__photo img { object-fit: cover; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > img, #sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-drawing, #sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__cap { grid-row: 1; grid-column: 1; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__cap { grid-row: 2; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art:has(> .sv-hero__photo) > :is(img, .sv-drawing, .sv-hero__cap) { grid-column: 2; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-drawing { padding: 6px; font-size: 13px; gap: 6px; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > :is(.sv-hero__photo, .sv-hero__page) { position: static; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  max-width: none; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__photo { grid-column: 1; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__page { grid-column: -2 / -1; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__page[aria-expanded="true"] img { border-color: var(--accent); }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__cap,
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > :is(.sv-hero__photo, .sv-hero__page) > span { display: block; min-height: 30px; font: 700 12px/1.25 var(--sans); color: var(--ink); text-align: center; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art:not(:has(> .sv-hero__photo)):not(:has(> .sv-hero__page)) > :is(img, .sv-drawing) { width: min(100%, 240px); justify-self: center; }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > p { grid-column: 1 / -1; grid-row: 3; margin: 4px 0 0; }
/* UB-REDRAW-1023 part 2 (owner items 29/30/41): the portrait for the book is THE big picture (three fifths of the row, your photo
   two fifths, bottom-aligned captions); nothing overlaps it; no "Used for every page" / "Before" tile. While the portrait is drawn the
   style picture stands in its place, dimmed and captioned "Style preview — your portrait is being drawn". */
#sb-root:not([data-season]) .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) > .sv-hero__art:has(> .sv-hero__photo) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
#sb-root:not([data-season]) .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) > .sv-hero__art > .sv-hero__photo { align-self: end; }
#sb-root:not([data-season]) .sv-hero.sv-hero--portrait > .sv-hero__art:not(:has(> .sv-hero__photo)) > img { width: min(100%, 300px); }
#sb-root:not([data-season]) .sv-hero.sv-hero--portrait > .sv-hero__art > img { border-color: var(--accent); }
#sb-root:not([data-season]) .sv-hero > .sv-hero__art > .sv-hero__cap { font-size: 13px; }
.sv-hero--placeholder .sv-hero__art > img { opacity: .55; filter: saturate(.7); }
.sv-hero__cap--wait { color: var(--sv-muted); }
.sv-hero__fresh { margin: 2px 0 0; font-size: 14px; line-height: 1.35; }
/* the Christmas dress: the caption shows under the big picture; with a photo, the photo is a small tile beside the picture, not on it */
#sb-root[data-season] .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) .sv-hero__cap { display: block; padding: 4px 6px 6px; font: 700 13px/1.3 var(--sans); color: var(--ink); text-align: center; }
#sb-root[data-season] .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) > .sv-hero__art:has(> .sv-hero__photo) { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; align-items: end; padding: 8px; }
#sb-root[data-season] .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) > .sv-hero__art:has(> .sv-hero__photo) > :is(img, .sv-hero__cap) { grid-column: 2; }
#sb-root[data-season] .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) > .sv-hero__art:has(> .sv-hero__photo) > img { grid-row: 1; border-radius: 10px; background: #fff; max-height: min(38vh, 420px); object-fit: contain; }
#sb-root[data-season] .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) > .sv-hero__art:has(> .sv-hero__photo) > .sv-hero__cap { grid-row: 2; }
#sb-root[data-season] .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) > .sv-hero__art > .sv-hero__photo { position: static; grid-column: 1; grid-row: 1 / 3; align-self: end; }
#sb-root[data-season] .sv-hero:is(.sv-hero--portrait, .sv-hero--placeholder) > .sv-hero__art > .sv-hero__photo img { width: 64px; height: 64px; }

/* ---------- UB-MOBILE-1023 round 3 (main flow; the join card is never built in the Christmas dress) ---------- */
/* "+ Add a second main character" / "+ Add someone else as a main character" on "Who's in the story?": an outlined full-width button
   (UB-MOBILE-1023 C: in the Christmas dress too) */
#sb-root .sb-repeater-add { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 560px; min-height: 48px; margin: 10px auto 14px;
  padding: 10px 16px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 16px/1.3 var(--sans); text-decoration: none;
  text-align: center; box-shadow: var(--shadow-sm); }
#sb-root .sb-repeater-add:active:not(:disabled) { background: var(--paper-2); border-color: var(--field); }
/* "Do you want to be in the book too?": two outlined choices side by side ("Yes, add me" with the accent border) */
.sv-join { margin: 14px 0 12px; padding: 14px 14px 16px; border: 2px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.sv-join__title { margin: 0 0 4px; font: 700 19px/1.25 var(--sans); color: var(--ink); text-align: center; }
.sv-join__lead { margin: 0 0 10px; font: 400 15px/1.4 var(--sans); color: var(--sv-muted); text-align: center; }
.sv-join__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sv-join .sv-textlink.sv-action { margin: 0; min-height: 52px; padding: 8px 10px; font-size: 16px; }
.sv-join .sv-textlink.sv-action.sv-join__yes { border-color: var(--accent); }
/* on its own screen (child path, before the covers): no box, larger choices */
.sv-join.sv-join--screen { margin: 18px auto 0; max-width: 560px; padding: 0; border: 0; background: none; box-shadow: none; }
.sv-join--screen .sv-join__choices { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sv-join--screen .sv-textlink.sv-action { min-height: 56px; font-size: 18px; }
.sv-join--screen .sv-join__lead { margin: 0 0 16px; font-size: 17px; }
/* Round 4 (owner, B): every occasion is a first-level tile (up to 11). Main flow only (the Christmas dress keeps its own look):
   on a phone the tiles are compact, two columns, the title and its line tight (bug 26: an odd last tile takes the row, below) */
@media (max-width: 480px) {
  #sb-root:not([data-season]) .sv-occasions { gap: 8px; }
  #sb-root:not([data-season]) .sv-occasion { min-height: 0; padding: 7px 8px; gap: 6px; }
  #sb-root:not([data-season]) .sb-card.sv-occasion[data-icon]::before { width: 26px; font-size: 21px; }
  #sb-root:not([data-season]) .sv-occasion .sv-recipient__title { font-size: 15px; line-height: 1.15; overflow-wrap: normal; }
  #sb-root:not([data-season]) .sv-occasion .sv-recipient__title[data-hint]::after { font-size: 12px; line-height: 1.2; margin-top: 1px; }
}

/* ---------- UB-MOBILE-1023 C (owner): no underlined text link used as an action inside the quiz, main and Christmas ----------
   Every quiet action ("Remove this character", "Not now", "Back", "Skip", "Change my answers", "See them now", "Check my order",
   "Have a coupon?", the Christmas trail's "Change") is an outlined pill with a 44 px tap area; only legal/privacy links stay links.
   The full-width .sv-action buttons keep their own layout; display is left alone where a rule hides the element. :where() keeps the
   base low (1,1,0 / 1,2,0) so the placement rules below win. */
#sb-root :where(.sv-textlink, .bf-secondary, a.bf-link, .bf-coupon-toggle, .sv-chipbtn):not(.sv-action) {
  min-height: 44px; padding: 8px 18px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  font: 700 15px/1.25 var(--sans); text-decoration: none; text-align: center; box-shadow: var(--shadow-sm); cursor: pointer; }
#sb-root :where(.sv-textlink, a.bf-link, .bf-coupon-toggle, .sv-chipbtn):not(.sv-action):not([hidden]) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#sb-root :where(.sv-textlink, .bf-secondary, a.bf-link, .bf-coupon-toggle, .sv-chipbtn):not(.sv-action):active:not(:disabled) { background: var(--paper-2); border-color: var(--field); }
#sb-root :is(.sv-textlink, .sv-chipbtn):disabled { opacity: .55; cursor: default; }
#sb-root :where(.sv-textlink, .bf-secondary, a.bf-link, .bf-coupon-toggle, .sv-chipbtn):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#sb-root .sv-waitq .sv-textlink:not(.sv-action), #sb-root .sv-linkrow .sv-textlink:not(.sv-action) { margin: 4px 0; padding: 8px 16px; }
#sb-root .sv-waitq__nav, #sb-root .sv-moments__nav { flex-wrap: wrap; align-items: center; gap: 8px 10px; }
#sb-root .sv-waitq__ready .sv-textlink { margin: 6px 0 0; padding: 6px 14px; }
#sb-root :is(.sv-personal-close, .ms-they):not([hidden]) { display: flex; margin-left: auto; margin-right: auto; }
#sb-root a.bf-link { margin-top: 14px; }
/* "Sending your preview to … " + an "Edit" chip */
#sb-root .sv-email-first__sent { display: flex; align-items: center; justify-content: center; gap: 8px; }
#sb-root .sv-email-first__sent > span { min-width: 0; overflow-wrap: anywhere; }
#sb-root .sv-email-first__sent .sv-chipbtn { flex: 0 0 auto; min-width: 64px; min-height: 44px; margin: 0; padding: 4px 16px; font-size: 14px; }
/* the Christmas trail's "Change": a white pill with the green border, 44 px tall */
#sb-root .sv-xtrail__change { min-height: 44px; padding: 6px 14px; border: 2px solid var(--x-green, #1f6b4a); border-radius: 999px; background: #fff; text-decoration: none; }

/* UB-REDRAW-1023 (owner request E): every drawing of a character as small pictures under the portrait (a tap makes it the
   approved one); an approved portrait keeps "Undo" and "Redraw (n left)" (or a plain "No redraws left"). 44 px tap targets. */
.sv-versions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0; }
.sv-version { position: relative; flex: 0 0 auto; width: 48px; height: 60px; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: var(--paper-2); overflow: hidden; cursor: pointer; }
.sv-version img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-version--on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.sv-version:disabled { cursor: default; opacity: .6; }
.sv-version:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sv-version__cap { position: absolute; left: 0; right: 0; bottom: 0; font: 700 11px/16px var(--sans); background: #ffffffe0; color: var(--ink); text-align: center; }
.sv-approved__actions { gap: 0 16px; align-items: center; }
.sv-approved__actions .bf-secondary { margin: 0; }
.sv-noredraw { color: var(--sv-muted); font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
#sb-app .sv-person > .sv-approved { margin: 2px 0 0; }
/* phone, two people side by side: 44 x 50 drawings, as many per row as the narrow card holds (3 + 1) */
@media (max-width: 480px) {
  .sv-cast--many .sv-versions { display: grid; grid-template-columns: repeat(auto-fill, 44px); justify-content: center; gap: 4px; }
  .sv-cast--many .sv-version { width: 44px; height: 50px; }
  .sv-cast--many .sv-approved__actions { gap: 0 8px; }
  .sv-cast--many .sv-noredraw { font-size: 14px; min-height: 36px; }
}
/* desktop: the portrait cards phone-sized and centred, not two half-screen posters (owner request E) */
@media (min-width: 761px) {
  #sb-app .sv-cast { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; }
  #sb-app .sv-cast .sv-person__art { max-width: min(100%, 300px); }
  #sb-app .sv-cast .sv-person__art img { max-height: 360px; }
}
/* Bug 26 (23.10): an option grid never shows a hole (app.js closeGridHoles): a lone text tile of a two-column grid takes the
   whole row; any other short row is centred (inline translate). What is not offered is not rendered; an empty or hidden item
   of a grid takes no cell. Main flow and the Christmas dress alike. */
#sb-app .sb-span-row { grid-column: 1 / -1; }
#sb-app :is(.sv-recipients, .sv-occasions, .sv-picks, .sv-bigcards, .sv-join__choices, .sv-covers, .sv-styles, .sv-cast) > :is([hidden], li:empty) { display: none; }

/* Oz 40 (23.10): the style card's "see it larger" button (top right of the picture; the selected pill sits bottom right) and the
   picture seen large in a modal dialog (app.js zoomStyle): top layer over a dimmed page, the whole picture, a 48 px close button. */
.sv-style__cell { position: relative; }
.sv-style__zoom { position: absolute; top: 9px; right: 9px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: 0; border: 0; border-radius: 50%; background: #ffffffeb; color: var(--ink); box-shadow: 0 2px 8px #2b211833; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.sv-style__zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sv-styles.sv-fit .sv-style__zoom { top: 7px; right: 7px; }
.sv-zoom { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; overflow: hidden; }
.sv-zoom:not([open]) { display: none; }
.sv-zoom[open] { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
@supports not selector(::backdrop) { .sv-zoom[open] { background: #1d120be0; } }   /* no <dialog> support: the dim comes from the box itself */
.sv-zoom::backdrop { background: #1d120be0; }
.sv-zoom__figure { margin: 0; padding: 68px 16px 20px; box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.sv-zoom__img { display: block; max-width: min(100%, 720px); max-height: calc(100% - 44px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); background: #fff; box-shadow: 0 12px 40px #00000059; }
.sv-zoom__cap { margin: 0; color: #fff; font: 700 20px/1.25 var(--serif); text-align: center; }
.sv-zoom__close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font: 400 32px/1 var(--sans); cursor: pointer; }
.sv-zoom__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Oz 43 (23.10): everyone in the book above the story covers (a pet or a toy added there too): one quiet centred row */
.sv-caststrip { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.sv-caststrip__item { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1.2 var(--sans); color: var(--muted); }
.sv-caststrip__item img, .sv-caststrip__blank { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: var(--paper-2); display: block; box-shadow: 0 0 0 2px #fff; }
/* Pick <name>'s story (23.10): the actions under the covers sit centred under the grid (they were 560 px wide on the left of a 780 px grid) */
.sv-linkrow:has(.sv-action) { align-items: center; }
.sv-linkrow .sv-textlink.sv-action { max-width: 640px; }
/* header "How we use photos" (23.10): a small outlined pill, never cut at the right edge; the 44 px box is the tap area,
   the pill drawn inside it is 34 px so the thin phone header keeps its height. Footer links stay links. */
#sb-root > .sb-header .logo { min-width: 0; }
#sb-root > .sb-header .logo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a wide fallback font trims the wordmark, never slides it under the pill */
#sb-root > .sb-header .sb-header__actions { flex: 0 0 auto; }
#sb-root > .sb-header .sb-header__track.sv-header-link { position: relative; isolation: isolate; flex: 0 0 auto; min-height: 44px; padding: 0 14px; white-space: nowrap;
  color: var(--ink); font-weight: 700; text-decoration: none; }
#sb-root > .sb-header .sb-header__track.sv-header-link::before { content: ""; position: absolute; inset: 5px 0; z-index: -1; border: 2px solid #e3cdbf; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); }
#sb-root > .sb-header .sb-header__track.sv-header-link:hover::before { border-color: var(--field); }
#sb-root > .sb-header .sb-header__track.sv-header-link:active::before { background: var(--paper-2); }
#sb-root > .sb-header .sb-header__track.sv-header-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; border-radius: 999px; }
@media (max-width: 374px) { #sb-root > .sb-header .sb-header__track.sv-header-link { padding: 0 10px; font-size: 12px; } }

/* ---------- Oz 36 (23.10, main + Christmas): "Read full screen" is a real button, not a white pill: a filled dark pill with the
   expand icon (ink on the main flow, the Christmas green in the dress), 46 px; the bar's filled main action keeps its own colour.
   On a phone the Christmas preview lays it out like the main one: under the book, and app.js fitReader keeps the book and its
   Previous / Next above the bar; the Christmas heading (garland header) drops the line under it on a phone, for the book. */
#sb-root .sv-reveal .sv-fullread { min-height: 46px; padding: 0 20px; gap: 8px; border: 0; border-radius: 999px; background: var(--ink, #2b2118); color: #fff8ec;
  font: 700 16px/1.2 var(--sans); box-shadow: 0 4px 14px rgba(43, 33, 24, .26); }
#sb-root .sv-reveal .sv-fullread::before { content: "\2922"; font-size: 18px; line-height: 1; }
#sb-root .sv-reveal .sv-fullread:active:not(:disabled) { background: #000; }
#sb-root .sv-reveal .sv-fullread:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#sb-root[data-season] .sv-reveal .sv-fullread { background: var(--x-green, #1f6b4a); box-shadow: 0 4px 14px rgba(31, 107, 74, .30); }
#sb-root[data-season] .sv-reveal .sv-fullread:active:not(:disabled) { background: #164f37; }
#sb-root[data-season] .sv-reveal .sv-fullread:focus-visible { outline-color: var(--x-red, #c8283a); }
@media (max-width: 480px) {
  #sb-root[data-season] .sv-reveal .sv-viewer-wrap > .sv-fullread { order: 2; margin: 0 auto 4px; }
  #sb-root[data-season] .sv-reveal .sv-viewer:not(.sv-viewer--full) { margin-bottom: 8px; }
}
@media (max-width: 480px) { #sb-root[data-season] .sv-reveal .sb-step__subtitle { display: none; } }
/* OZ-1023b (item 19): a photo whose shortest side is under 512 px: a friendly note under the photos, never blocking */
.sv-photo-small { margin: 6px 0 0; color: var(--ink); font: 600 15px/1.4 var(--sans); }
.sv-photo-small[hidden] { display: none; }

/* OZ-1023b (item 31): the link while the book is made: one spaced block (heading, link, "Copy link", one line) */
.sv-save--waiting { display: flex; flex-direction: column; gap: 10px; margin: 24px auto 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); text-align: left; }
.sv-save--waiting .sv-save__title { margin: 0; font: 700 18px/1.3 var(--serif); color: var(--ink); }
.sv-save--waiting .sv-save__link { width: 100%; min-height: 48px; font-size: 15px; text-overflow: ellipsis; }
.sv-save--waiting .sv-save__copy { width: 100%; min-height: 48px; font-size: 16px; }
.sv-save--waiting .sv-save__note { margin: 0; text-align: left; }

/* OZ-1023b (item 37): no tick on the photo screens; one small line right under Continue + "How we use photos" */
#sb-app .sv-consent-line { margin: 10px 0 0; text-align: center; }
#sb-app .sv-consent-line .sv-consent-line__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--sv-muted); }
#sb-app .sv-consent-line .sv-consent__more { margin: 4px 0 0; font-size: 14px; }

/* READY-320 (23.10, main + Christmas): the ready screen on a short phone (<= 480 x 700) gives the book the height of the chrome around
   it. The Christmas dress keeps its bulbs and hat in a thinner header, its test strip is one line (as on the main flow) and the heading
   sits closer to the book; a notice above the book (a failed payment, a checkout note) is one compact block and, on the main flow,
   takes the place of the line under the heading. app.js fitReader then gives the reader frame the room this frees. */
@media (max-width: 480px) and (max-height: 700px) {
  #sb-root[data-season][data-screen="preview"] > .sb-announce { font-size: 11px; line-height: 16px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sb-root[data-season][data-screen="preview"] > .sb-header { min-height: 68px; padding-top: 12px; }   /* was 80; the hat keeps its 12 px over the logo */
  #sb-root[data-season][data-screen="preview"] .sv-scroll .sb-main { padding-top: 6px; }
  #sb-root[data-season] .sv-reveal > .sv-title { margin-bottom: 6px; }
  #sb-root[data-screen="preview"] .sv-reveal > .sv-notice { margin: 0 0 6px; padding: 6px 10px; font-size: 13px; line-height: 1.3; }
  #sb-root[data-screen="preview"] .sv-reveal > .sv-notice .sv-notice__actions { margin-top: 6px; }
  #sb-root[data-screen="preview"] .sv-reveal > .sv-notice .sv-notice__actions > button { min-height: 44px; padding: 6px 14px; font-size: 15px; }
  #sb-root:not([data-season]) .sv-reveal:has(> .sv-notice) > .sb-step__subtitle { display: none; }
  /* LEFTOVERS-1025 (task 3): the Christmas dress has no line under the heading to give way (it is hidden here), so a notice
     pushed the book down and fitReader shrank it (320 x 568: frame 299 -> 248). The notice takes the heading's place instead
     (the heading stays for screen readers and as the section's label), so the book keeps its size with or without it. */
  #sb-root[data-season][data-screen="preview"] .sv-reveal:has(> .sv-notice) > .sv-title { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
  #sb-root[data-season][data-screen="preview"] .sv-reveal:has(> .sv-title) > .sv-notice { margin: 0 0 1px; padding: 3px 10px; line-height: 1.2; }   /* two lines in the heading's height with its margin */
}

/* UB-SIMPLIFY-1024 (owner): quieter quiz screens.
   A short "Saved ✓" toast right after a save the customer just made (app.js showToast; it replaces the green "Saved. We'll email
   you…" line): above the bottom bar, never in the way of a tap, gone by itself. */
.sv-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translate(-50%, 8px);
  padding: 10px 18px; border-radius: 999px; background: #1f3d2c; color: #fff; font: 700 15px/1.3 var(--sans, system-ui, sans-serif);
  box-shadow: 0 6px 20px #0003; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.sv-toast--on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .sv-toast { transition: none; transform: translate(-50%, 0); } }
/* The consent line's Privacy: a small outlined pill (the quiz has no underlined link) that keeps the line's height; its tap area is
   44 px tall (the ::after reaches 6 px above and below the 32 px pill) */
#sb-root .sv-email__consent .sv-consent-link { position: relative; display: inline-flex; vertical-align: middle; min-height: 32px; margin: 0 0 0 2px; padding: 2px 12px; border-width: 1.5px; font-size: 14px; line-height: 1.2; box-shadow: none; }
#sb-root .sv-email__consent .sv-consent-link::after { content: ""; position: absolute; left: -2px; right: -2px; top: -6px; bottom: -6px; }
/* Dedication: "✎ Moments & details · 3" as a compact pill, the count small */
#sb-root .sv-moments-open { margin: 4px 0 0; padding: 8px 16px; font-size: 15px; }
.sv-moments-open__n { font-weight: 600; font-size: 13px; color: var(--sv-muted, var(--muted)); }

/* ---------- early-genre 24.10 (Danilo): the kind of story on the "Make it personal" card ----------
   Compact two-column chips (no hint lines) and one "More kinds of story" chip; the story screen after the approval shows the picked
   cover alone (sv-covers--one) when the card already answered it. */
.sv-waitq .sv-picks--2 .sv-pick:is([data-focus^="wq-genre-"], [data-focus^="gq-genre-"]) { min-height: 64px; flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 8px; font-size: 15px; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.sv-waitq .sv-picks--2 .sv-pick:is([data-focus^="wq-genre-"], [data-focus^="gq-genre-"])[data-icon]::before { font-size: 22px; }
/* the bar stands for the story step's Continue (updateNav): the card's own button is then hidden */
#sb-root .sv-waitq .sv-waitq__next--bar[hidden] { display: none; }
#sb-root .sv-waitq .sv-waitq__more { margin: 0 0 12px; }
.sv-covers.sv-covers--one, .sv-brief .sv-covers.sv-covers--one { grid-template-columns: minmax(0, 220px); justify-content: center; }

/* oz-call-1025 #4: "Regular or Christmas style?" on the Christmas gift step (in place of the answers row and its "Change"): two
   44 px+ choices side by side (stacked under 360 px), the Christmas one picked. */
.sv-xstyle { max-width: 460px; margin: 0 auto 14px; padding: 10px 12px 12px; border-radius: 14px; background: var(--x-green-soft, #e8f2ec); }
.sv-xstyle__title { margin: 0 0 8px; font: 700 16px/1.3 var(--sans); color: #24412f; text-align: center; }
.sv-xstyle__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-xstyle__pick { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 10px; border: 2px solid var(--line, #e8ddd3); border-radius: 12px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sv-xstyle__pick--on { border-color: var(--x-green, #1f6b4a); box-shadow: 0 0 0 2px var(--x-green, #1f6b4a) inset; }
.sv-xstyle__pick:focus-visible { outline: 3px solid var(--x-red, #c0392b); outline-offset: 2px; }
.sv-xstyle__icon { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.sv-xstyle__text { display: flex; flex-direction: column; min-width: 0; }
.sv-xstyle__name { font: 700 15px/1.25 var(--sans); }
.sv-xstyle__hint { font: 400 13px/1.3 var(--sans); color: var(--sv-muted); }
@media (max-width: 359px) { .sv-xstyle__choices { grid-template-columns: 1fr; } .sv-xstyle__pick { min-height: 48px; } }

/* oz-call-1025 #7: "Tap to look inside" on the preview book (phones and tablets, where "Read full screen" is shown): a pill on the
   cover, above the viewer's own page buttons; it opens the full-screen reader. In the reader, the bar's next step at the bottom. */
.sv-viewer__tap { display: none; }
@media (max-width: 1100px) {
  .sv-reveal .sv-viewer:not(.sv-viewer--full) .sv-viewer__tap:not([hidden]) { display: inline-flex; position: absolute; z-index: 3; left: 50%; bottom: 104px; transform: translateX(-50%);
    align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(43, 33, 24, .86); color: #fff8ec;
    font: 700 16px/1 var(--sans); white-space: nowrap; box-shadow: 0 6px 18px rgba(43, 33, 24, .28); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sv-reveal .sv-viewer__tap::before { content: "\1F446"; font-size: 18px; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .sv-reveal .sv-viewer:not(.sv-viewer--full) .sv-viewer__tap:not([hidden]) { animation: sv-tap-pulse 2.4s ease-in-out 1s 3; }
}
@keyframes sv-tap-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
.sv-viewer__tap:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sv-fullcta { display: none; }
.sv-viewer--full .sv-fullcta:not([hidden]) { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; margin: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; min-height: 52px; }
#sb-root[data-season] .sv-reveal .sv-viewer:not(.sv-viewer--full) .sv-viewer__tap:not([hidden]) { background: rgba(31, 107, 74, .92); }

/* oz-call-1025 #5: on the big style pictures every card keeps one 4:5 frame (pending, failed AND ready, before its picture has
   loaded), so a picture that lands or loads never pushes the card below; the picture fades in over 250 ms once loaded. */
.sv-styles--reveal .sv-style__art { aspect-ratio: 4 / 5; }
.sv-styles--reveal .sv-style__art img { height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .sv-styles--reveal .sv-style__art img { transition: opacity .25s ease-out; }
  .sv-styles--reveal .sv-style__art--new img { animation: none; }   /* the load fade below replaces the scale-in */
  .sv-styles--reveal .sv-style__art--new img:not(.is-loaded) { opacity: 0; }   /* the first time a picture lands only (a poll re-render never fades again) */
}

/* 28.10 (Danilo ADDENDUM 6 -> 28.10 "emoji and tiles were more fitting"): the last story screen. The four kinds are the story
   screen's emoji tiles (.sv-pick.sv-kind, no cover pictures); one quiet row of links under them (no underline, no second button
   look); "Make my book" stays the one strong action in the bar. */
.sv-brief.fs-final { max-width: 560px; }
.fs-kinds { margin: 14px 0 6px; }
/* a phone: "Heartwarming" stays one word next to its emoji (no letter break in the half-width tile) */
@media (min-width: 381px) and (max-width: 440px) { .fs-kinds .sv-kind { gap: 6px; padding-left: 8px; padding-right: 6px; } .fs-kinds .sv-kind__title { font-size: 15px; } .fs-kinds .sv-kind[data-icon]::before { width: 26px; } }
@media (max-width: 350px) { .fs-kinds .sv-kind { flex-direction: column; align-items: flex-start; gap: 2px; } .fs-kinds .sv-kind[data-icon]::before { width: auto; text-align: left; } }

/* the one quiet row: personal touch · add someone · more stories */
.fs-links { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0; margin: 6px -8px 0; min-width: 0; }
#sb-root .fs-link { display: inline-block; flex: 0 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 12px 8px; background: none; border: 0; border-radius: 10px;
  font: 600 14px/20px var(--sans); color: var(--sv-muted); text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sb-root .fs-link:hover { color: var(--ink); background: rgba(43, 33, 24, .05); }
.fs-links > .fs-link + .fs-link { border-left: 0; }
.fs-links > .fs-link + .fs-link::before { content: "\00b7"; display: inline-block; margin: 0 8px 0 -6px; color: #c9b8ab; font-weight: 800; }
@media (min-width: 700px) { .fs-links { gap: 0 6px; } #sb-root .fs-link { font-size: 15px; } }

/* The generated covers' faces used by the email step's strip (.sv-howstrip): the PDF's own OFL files of the reader, same origin */
@font-face { font-family: "UB D Shrikhand"; src: url("../landing/viewer/fonts/Shrikhand-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "UB D Literata"; src: url("../landing/viewer/fonts/Literata-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

/* 28.10 (Danilo, stand): the card's own "Next" is visible and primary (filled) next to "Back" on every question of "Make it personal"
   (also the story step's Continue); the bar's "Continue" stays. Back first, Next on the right in the moments row. */
#sb-root #sb-app .sv-waitq .sv-waitq__next.sv-btn, #sb-root #sb-app .sv-waitq .sv-moments__next.sv-btn,
#sb-root #sb-app[data-screen] .sv-waitq .sv-waitq__next.sv-btn, #sb-root #sb-app[data-screen] .sv-waitq .sv-moments__next.sv-btn {
  background: var(--accent); color: #fff; border: 0; box-shadow: none; }
#sb-root .sv-waitq .sv-moments__nav { justify-content: space-between; }
#sb-root .sv-waitq .sv-moments__nav > [data-focus="mq-back"] { order: -1; }
#sb-root .sv-waitq .sv-moments__nav > .sv-moments__next { order: 1; min-width: 120px; }
/* UB-COVER-TITLE-1030 (owner 30.10, phone screenshot: "the cover and the text look bad"): on a phone the preview is the book itself,
   no warm panel and 6 px padding round a second desk inside it (the cheap frame; the reader stays in the column, RC gate H1),
   the iframe's own desk is the page's colour (viewer.css, same tag) and the heading is a quieter title with the book's name in italic */
@media (max-width: 480px) {
  .sv-reveal .sv-viewer:not(.sv-viewer--full) { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .sv-reveal .sv-viewer:not(.sv-viewer--full) iframe { border-radius: 0; }
  .sv-reveal .sb-step__title { font-size: 27px; letter-spacing: -.015em; line-height: 1.1; margin-bottom: 4px; }
  .sv-reveal .sb-step__subtitle { font: italic 600 18px/1.3 "Literata", Georgia, serif; color: #8a4b2a; margin-bottom: 6px; text-wrap: balance; }
}

/* Wasabi call 30.10 (#11, Oz: "I don't know if we should do them this big… customer has to scroll to the personalized section"):
   on a phone the four big style pictures are square (the card crops the bottom; the face sits in the upper part; the whole picture
   stays one tap away on the zoom button) and the one-line descriptions go, so the 2 x 2 grid is about a third lower and the
   "Make it personal" card under it comes closer. Wider screens keep the 4:5 cards. */
@media (max-width: 860px) {
  .sv-styles--reveal { gap: 10px; }
  .sv-styles--reveal .sv-style__art, .sv-styles--reveal .sv-style__art--pending, .sv-styles--reveal .sv-style__art--failed { aspect-ratio: 1 / 1; }
  .sv-styles--reveal .sv-style__desc { display: none; }
  .sv-styles--reveal .sv-style__title { font-size: 17px; padding-top: 4px; }
}

/* 30.10 (UB-PAGE-FIX-1030): "Fix a page" right under the preview's reader (app.js pageFixBlock; only with the service's page-fix flag).
   One small button (like "Read full screen"); its sheet opens inline under it (never over the frame), 390 px first: the open pages as a
   wrapping row of thumbnails, the reasons as wrapping chips, a few words, "Redraw this page". While a page is redrawn the button is a
   status line with that page's old picture under a dark label. Every tap area is 44 px; nothing scrolls sideways. */
.sv-pagefix { max-width: 560px; margin: 10px auto 4px; text-align: center; }
.sv-pagefix [hidden] { display: none; }
.sv-pagefix__open { min-width: 160px; }
.sv-pagefix__sheet { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--paper-2); text-align: left; min-width: 0; }
.sv-pagefix__q { font: 700 17px/1.3 var(--sans); margin: 0; color: var(--ink); }
.sv-pagefix__pages { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-pagefix__pick { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; min-height: 44px; padding: 4px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: 700 13px/1.2 var(--sans); cursor: pointer; }
.sv-pagefix__pick img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.sv-pagefix__pick--on { border-color: var(--accent); background: #fff0ea; box-shadow: 0 0 0 1px var(--accent) inset; }
.sv-pagefix__chips .sv-chip { max-width: 100%; text-align: left; }
.sv-pagefix__label { margin: 0; }
.sv-pagefix__sheet .sb-textarea { width: 100%; box-sizing: border-box; min-height: 72px; font-size: 16px; }
.sv-pagefix__need, .sv-pagefix__left { margin: 0; }
.sv-pagefix__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-pagefix__actions .sv-pagefix__go { flex: 1 1 180px; min-height: 48px; width: auto; }
.sv-pagefix__actions .sv-pagefix__go:disabled { opacity: .5; cursor: default; }
.sv-pagefix__actions .sv-secondary { flex: 0 0 auto; }
.sv-pagefix__status { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); text-align: left; }
.sv-pagefix__thumb { position: relative; display: block; flex: 0 0 64px; width: 64px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 1px var(--line); }
.sv-pagefix__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-pagefix__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px;
  background: rgba(43, 33, 24, .68); color: #fff; font: 700 11px/1.2 var(--sans); text-align: center; }
.sv-pagefix__overlay .sb-spinner { width: 18px; height: 18px; border-width: 3px; margin: 0; flex: 0 0 auto; }
.sv-pagefix__say { font: 600 15px/1.35 var(--sans); color: var(--ink); min-width: 0; }
.sv-pagefix__used { margin: 0; text-align: center; }
/* the redraw toasts (app.js showToast {wrap}) are longer than "Saved" (two lines on a phone): they keep the screen's width */
.sv-toast--wrap { width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; border-radius: 22px; }

/* UB-PHOTO-AB-1101 (Danilo 1.11): arm b of the photo step A/B (app.js PHOTO_AB; mockup .session-flow/ub-photo-step-1101): the example
   strip above the photo line, the green trust list under the photos, the link to a finished sample book, and the sample book over the
   quiz (a <dialog> with the reader in a frame; the quiz under it keeps its photos). Arm a has none of these classes. */
#sb-app:is([data-screen="photos"], [data-screen="photo"]) > .sv-screen > :is(.sv-pab-example, .sv-pab-trust) { max-width: 560px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.sv-pab-example { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(60, 40, 20, .06), 0 4px 12px rgba(60, 40, 20, .07); }
.sv-pab-example__row { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.sv-pab-example__row img { width: 46px; height: 58px; object-fit: cover; border-radius: 7px; display: block; }
.sv-pab-example__arr { color: var(--accent); font-weight: 700; font-size: 13px; }
.sv-pab-example__txt { margin: 0; font: 400 13px/1.3 var(--sans); color: #5c4a3d; }
.sv-pab-example__txt b { display: block; color: var(--ink); font-size: 13.5px; }
.sv-pab-trust { list-style: none; margin: 12px 0 0; padding: 10px 12px; border-radius: 16px; background: #f3faf4; border: 1px solid #cfe8d4; }
.sv-pab-trust li { display: flex; gap: 9px; align-items: flex-start; font: 400 14px/1.35 var(--sans); color: #23351f; margin: 0 0 6px; }
.sv-pab-trust li:last-child { margin-bottom: 0; }
.sv-pab-trust__ic { flex: 0 0 20px; height: 20px; border-radius: 50%; background: #2f8a4c; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.sv-pab-sample { display: block; margin: 14px auto 0; text-align: center; font: 600 15px/1.35 var(--sans); color: #5c4a3d; text-decoration: underline; text-underline-offset: 3px; }
.sv-pab-sample:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sv-pab-sheet { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: #fff8f2; overflow: hidden; }
.sv-pab-sheet:not([open]) { display: none; }
.sv-pab-sheet[open] { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; }
.sv-pab-sheet::backdrop { background: #1d120be0; }
.sv-pab-sheet__bar { flex: 0 0 auto; display: flex; align-items: center; padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: #fff; border-bottom: 1px solid #eadfd6; }
.sv-pab-sheet__close { font: 700 16px/1 var(--sans); min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.sv-pab-sheet__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sv-pab-sheet__frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: #fff8f2; }

/* Value block B (owner "yes" 01.11): the preview's offer card: cover, "<Name>'s book", one price line, four ticked lines */
.bf-value { margin: 0 0 16px; padding: 16px; border: 1.5px solid var(--accent); border-radius: 16px; background: #fff8f2; text-align: left; }
.bf-value__top { display: flex; gap: 14px; align-items: center; margin: 0 0 12px; }
.bf-value__cover { flex: 0 0 auto; width: 68px; height: 90px; object-fit: cover; border-radius: 4px 8px 8px 4px; background: var(--paper-2);
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, .12), 0 6px 14px rgba(43, 33, 24, .25); }
.bf-value__head { min-width: 0; }
.bf-offer .bf-value__head h2, #sb-root:not([data-season]) .sv-reveal .bf-offer .bf-value__head h2 { font: 700 20px/1.15 var(--sans); margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.bf-value__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; color: var(--sv-muted); font-size: 15px; }
.bf-value__price strong { font: 700 28px/1 var(--sans); color: var(--ink); }
.bf-value__price .bf-was { font-size: 18px; }
.bf-value__tag { font: 700 12px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #b8361a; }
.bf-value__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bf-value__list li { display: flex; gap: 10px; align-items: flex-start; font: 600 15px/1.4 var(--sans); color: var(--ink); }
.bf-value__tick { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--sv-ok); position: relative; }
.bf-value__tick::after { content: ""; position: absolute; left: 7px; top: 3.5px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bf-value__hint { margin: 9px 0 0; font: 600 15px/1.4 var(--sans); color: var(--sv-muted); }