/* Preview & Ship: the full-screen look through the exact printed book.
   One look on purpose: the editor's night sky (css/nook-editor.css,
   #editor-view[data-ground="night"]). Light text on deep teal, one accent.
   Everything is scoped under .pv so nothing leaks into the editor. */
.pv {
    --pv-sky-top: #183A4E;
    --pv-sky-mid: #23495E;
    --pv-sky-low: #3A6A7C;
    --pv-ink: #F4F8F9;
    --pv-muted: #A9C0C8;
    --pv-line: rgba(255, 255, 255, 0.16);
    --pv-teal: #2D9C92;
    --pv-teal-ink: #1F7C74;
    --pv-teal-light: #9FE0D8;
    --pv-honey: #E4A83B;
    --pv-paper: #FDF8F2;
    --pv-serif: 'Lora', Georgia, serif;
    --pv-sans: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    /* Above the editor's floating buttons (the tour pill sits at 99890), below
       the tour and the premiere, which never open over this screen. */
    position: fixed; inset: 0; z-index: 99950;
    color: var(--pv-ink); font-family: var(--pv-sans); font-size: 17px; line-height: 1.5; color-scheme: dark;
    background: linear-gradient(var(--pv-sky-top) 0%, var(--pv-sky-mid) 45%, var(--pv-sky-low) 100%);
    -webkit-text-size-adjust: 100%;
}
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }
.pv button { font-family: inherit; }
.pv :focus-visible { outline: 3px solid var(--pv-honey); outline-offset: 3px; }
.pv [hidden] { display: none !important; }
html.pv-open, html.pv-open body { overflow: hidden !important; }
html.pv-open #dm-welcome-tour-pill { display: none !important; }

.pv-app { height: 100%; display: flex; flex-direction: column; }
.pv-top { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 6px; }
.pv-top-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--pv-line);
    background: rgba(255,255,255,0.06); color: var(--pv-ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.pv-top-btn svg { width: 20px; height: 20px; flex: none; }
.pv-where { flex: 1; min-width: 0; text-align: center; font-size: 15px; color: var(--pv-muted); font-weight: 700; }
.pv-where b { color: var(--pv-ink); font-weight: 800; }
.pv-status { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 13px; color: var(--pv-teal-light); font-weight: 800; }
.pv-status.pv-retry-pill { border: 1.5px solid #E4A83B; color: #E4A83B; background: transparent; border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }
/* The editor's own alert (e.g. the order screen could not open) must show above this screen. */
html.pv-open #custom-alert-modal { z-index: 99990 !important; }
.pv-status.pv-ro { padding: 3px 10px; border-radius: 999px; background: rgba(159, 224, 216, 0.14); white-space: nowrap; }
.pv-dot-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(159,224,216,0.3); border-top-color: var(--pv-teal-light); animation: pv-spin 0.9s linear infinite; }

/* The open book */
.pv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px; overflow: hidden; }
.pv-spread { display: flex; justify-content: center; align-items: flex-start; height: 100%; max-width: 100%; transition: opacity .18s ease; }
.pv-spread.pv-entering { opacity: 0; }
.pv-leaf { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.pv-leaf.pv-ghost { visibility: hidden; }
/* Each page is sized from the height available (less the page number and button
   underneath), never wider than half the screen, so the two pages meet at the
   spine like an open book, whatever size the picture inside is. */
.pv-sheet { position: relative; flex: none; height: min(calc(100% - 84px), calc((50vw - 24px) * 1.2941)); width: auto; aspect-ratio: 8.5 / 11; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* The picture is pinned inside the page frame, so its own size never widens the page:
   a just-chosen picture is the full-size original, several times bigger than the page photos. */
.pv-sheet .pv-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: var(--pv-paper); box-shadow: 0 18px 40px rgba(0,0,0,0.4); }
.pv-sheet.pv-cover .pv-art { border-radius: 2px 6px 6px 2px; }
.pv-leaf.pv-left .pv-sheet::after, .pv-leaf.pv-right .pv-sheet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 10%; pointer-events: none; }
.pv-leaf.pv-left .pv-sheet::after { right: 0; background: linear-gradient(270deg, rgba(20,20,40,0.22), rgba(20,20,40,0)); }
.pv-leaf.pv-right .pv-sheet::after { left: 0; background: linear-gradient(90deg, rgba(20,20,40,0.22), rgba(20,20,40,0)); }
.pv-busy { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center;
    background: rgba(253,248,242,0.80); color: #183A4E; font-weight: 800; font-size: 15px; text-align: center; padding: 18px; }
.pv-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(24,58,78,0.2); border-top-color: var(--pv-teal); animation: pv-spin 0.9s linear infinite; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-under { flex: none; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding-top: 8px; }
.pv-pno { font-size: 13px; font-weight: 700; color: var(--pv-muted); letter-spacing: 0.02em; }
.pv-act { min-height: 44px; padding: 0 20px; border-radius: 99px; border: 1px solid var(--pv-line); background: rgba(255,255,255,0.08);
    color: var(--pv-ink); font-weight: 800; font-size: 15px; cursor: pointer; }
.pv-act:hover { background: rgba(255,255,255,0.16); }
.pv-act.pv-choose { background: var(--pv-honey); border-color: var(--pv-honey); color: #2A2340; }

.pv-bottom { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.pv-nav { min-height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--pv-line); background: rgba(255,255,255,0.08);
    color: var(--pv-ink); font-weight: 800; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pv-nav svg { width: 20px; height: 20px; }
.pv-nav.pv-next { background: var(--pv-teal); border-color: var(--pv-teal); color: #fff; min-width: 120px; justify-content: center; }
.pv-nav.pv-next:hover { background: var(--pv-teal-ink); }
.pv-nav.pv-jump { padding: 0 14px; }
.pv-nav:disabled { opacity: 0.35; cursor: default; }
.pv-progress { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.14); overflow: hidden; }
.pv-progress i { display: block; height: 100%; width: 0; background: var(--pv-teal-light); border-radius: 99px; transition: width .3s ease; }

/* Ready to print? */
.pv-ready { max-width: 470px; width: 100%; text-align: center; margin: auto; }
/* display and margin set here: the site stylesheet makes every picture a block */
.pv-ready img { display: block; margin: 0 auto; width: 120px; aspect-ratio: 8.5/11; object-fit: cover; box-shadow: 0 14px 30px rgba(0,0,0,0.4); border-radius: 2px 5px 5px 2px; }
.pv-ready h2 { font-family: var(--pv-serif); font-weight: 500; font-size: 30px; margin: 18px 0 6px; color: var(--pv-ink); }
.pv-lede { color: var(--pv-muted); margin: 0 0 20px; }
.pv-note { display: flex; align-items: center; gap: 10px; text-align: left; margin: 0 0 10px; padding: 12px 14px; border-radius: 14px;
    border: 1px solid rgba(228,168,59,0.4); background: rgba(228,168,59,0.12); font-size: 15px; }
.pv-note.pv-info { border-color: var(--pv-line); background: rgba(255,255,255,0.06); }
.pv-note span { flex: 1; }
.pv-note button { flex: none; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--pv-teal-light); font-weight: 800; font-size: 14px; cursor: pointer; }
.pv-agree { display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left; margin: 18px 0 14px; font-weight: 700; cursor: pointer; }
.pv-agree input { width: 26px; height: 26px; margin: 0; accent-color: var(--pv-teal); flex: none; cursor: pointer; }
.pv-agree.pv-nudge span { color: #F2A7A0; }
.pv-ship { width: 100%; min-height: 58px; border: 0; border-radius: 16px; background: var(--pv-teal); color: #fff; font-weight: 800; font-size: 19px; cursor: pointer; }
.pv-ship:hover { background: var(--pv-teal-ink); }
.pv-ship.pv-waiting { background: rgba(255,255,255,0.12); color: var(--pv-muted); cursor: default; }
.pv-small { color: var(--pv-muted); font-size: 14px; margin: 14px 0 0; }
.pv-small button { border: 0; background: none; color: var(--pv-muted); text-decoration: underline; font-size: 14px; cursor: pointer; padding: 0; }
.pv-small button:disabled { text-decoration: none; opacity: 0.6; cursor: default; }

/* Preparing: only while the print file is being put together */
.pv-preparing { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center;
    background: linear-gradient(var(--pv-sky-top) 0%, var(--pv-sky-mid) 45%, var(--pv-sky-low) 100%); }
.pv-preparing { overflow-y: auto; }
.pv-preparing > img { width: min(46vw, 220px); aspect-ratio: 8.5/11; object-fit: cover; box-shadow: 0 18px 40px rgba(0,0,0,0.45); border-radius: 2px 6px 6px 2px; background: var(--pv-paper); }
/* While the book is put together: their own pictures turn like pages on one
   side, and the real steps of the build tick off on the other. */
.pv-prep { display: flex; align-items: center; justify-content: center; gap: 56px; width: 100%; max-width: 920px; }
.pv-prep-book { margin: 0; flex: none; width: min(32vw, 320px); }
.pv-prep-art { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--pv-paper); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
.pv-prep-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.pv-prep-art img.pv-on { opacity: 1; }
.pv-prep-words { margin: 14px 2px 0; min-height: 6em; color: var(--pv-muted); font-family: var(--pv-serif); font-style: italic; font-size: 16px; line-height: 1.5; text-align: left;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pv-prep-words b { display: block; font-family: var(--pv-sans); font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-teal-light); margin-bottom: 2px; }
.pv-prep-side { flex: 1; max-width: 420px; text-align: left; display: flex; flex-direction: column; gap: 16px; }
.pv-prep-side h1 { text-align: left; }
.pv-prep-side .pv-progress { width: 100%; }
.pv-prep-side .pv-back { align-self: flex-start; padding: 0; min-height: 44px; }
.pv-prep-time { margin: 0; color: var(--pv-muted); }
.pv-prep-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pv-prep-steps li { display: flex; align-items: center; gap: 12px; color: rgba(169,192,200,0.75); font-weight: 700; font-size: 16px; }
.pv-prep-steps li.pv-now { color: var(--pv-ink); }
.pv-prep-steps li.pv-done { color: var(--pv-teal-light); }
.pv-prep-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.22); display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.pv-prep-steps li.pv-now .pv-prep-mark { border-color: rgba(159,224,216,0.3); border-top-color: var(--pv-teal-light); animation: pv-spin 0.9s linear infinite; }
.pv-prep-steps li.pv-done .pv-prep-mark { border-color: var(--pv-teal); background: var(--pv-teal); color: #fff; }
.pv-prep-steps li.pv-done .pv-prep-mark::after { content: '\2713'; }
@media (max-width: 760px) {
    .pv-preparing { justify-content: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 20px); }
    .pv-prep { flex-direction: column; gap: 18px; }
    .pv-prep-book { width: min(58vw, 230px); }
    .pv-prep-words { min-height: 4.5em; -webkit-line-clamp: 3; font-size: 15px; }
    .pv-prep-side { max-width: 100%; gap: 12px; }
    .pv-prep-side h1 { font-size: 22px; }
    .pv-prep-steps { gap: 7px; }
    .pv-prep-steps li { font-size: 15px; }
}
.pv-preparing h1 { font-family: var(--pv-serif); font-weight: 500; font-size: 26px; margin: 0; color: var(--pv-ink); }
.pv-preparing p { color: var(--pv-muted); margin: 0; max-width: 420px; }
.pv-preparing .pv-progress { flex: none; width: min(80vw, 320px); }
.pv-preparing .pv-retry { min-height: 52px; padding: 0 22px; border-radius: 14px; border: 0; background: var(--pv-teal); color: #fff; font-weight: 800; font-size: 17px; cursor: pointer; }
.pv-preparing .pv-back { border: 0; background: none; color: var(--pv-muted); text-decoration: underline; font-size: 15px; cursor: pointer; }

/* Panels: fix a page without leaving it */
.pv-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(4, 14, 20, 0.55); display: flex; justify-content: flex-end; }
.pv-panel { width: min(100%, 460px); height: 100%; overflow: auto; background: #122F40; border-left: 1px solid var(--pv-line); padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); animation: pv-slide .2s ease-out; }
@keyframes pv-slide { from { transform: translateX(30px); opacity: .6; } }
.pv-panel h3 { font-family: var(--pv-serif); font-weight: 500; font-size: 23px; margin: 0 0 4px; color: var(--pv-ink); }
.pv-hint { color: var(--pv-muted); font-size: 15px; margin: 0 0 16px; }
.pv-panel label { display: block; font-weight: 800; font-size: 14px; margin: 14px 0 6px; color: var(--pv-ink); }
.pv-sub { display: block; font-weight: 600; color: var(--pv-muted); font-size: 13px; margin-top: 2px; }
.pv-panel textarea, .pv-panel input[type=text] { width: 100%; font: inherit; font-size: 17px; line-height: 1.5; color: #183A4E; background: var(--pv-paper);
    border: 2px solid transparent; border-radius: 12px; padding: 12px 14px; }
.pv-panel textarea { min-height: 150px; resize: vertical; field-sizing: content; }
.pv-panel textarea:focus, .pv-panel input:focus { border-color: var(--pv-teal-light); outline: none; }
.pv-count { text-align: right; color: var(--pv-muted); font-size: 13px; margin-top: 4px; }
.pv-thumb { width: 58%; display: block; margin: 0 auto 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.4); }
.pv-credits { color: var(--pv-muted); font-size: 15px; margin: 12px 0 0; text-align: center; }
.pv-error { color: #F2A7A0; font-size: 15px; margin: 12px 0 0; text-align: center; }
.pv-versions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-version { position: relative; padding: 8px; border-radius: 14px; border: 2px solid var(--pv-line); background: rgba(255,255,255,0.04); cursor: pointer; color: var(--pv-ink); font-weight: 800; font-size: 14px; }
.pv-version img { display: block; width: 100%; aspect-ratio: 8.5/11; object-fit: cover; margin-bottom: 6px; background: var(--pv-paper); }
.pv-version.pv-on { border-color: var(--pv-teal-light); background: rgba(45,156,146,0.18); }
.pv-choices { display: grid; gap: 10px; }
.pv-choice { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 2px solid var(--pv-line); cursor: pointer; font-weight: 700; margin: 0 !important; }
.pv-choice input { width: 22px; height: 22px; accent-color: var(--pv-teal); flex: none; }
.pv-choice img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.pv-choice:has(input:checked) { border-color: var(--pv-teal-light); background: rgba(45,156,146,0.18); }
.pv-panel-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 20px; }
.pv-panel-actions button { min-height: 54px; border-radius: 14px; font-weight: 800; font-size: 17px; cursor: pointer; }
.pv-panel-actions button:disabled { opacity: 0.6; cursor: default; }
.pv-quiet { background: transparent; border: 1px solid var(--pv-line); color: var(--pv-ink); }
.pv-go { background: var(--pv-teal); border: 0; color: #fff; }
.pv-off { display: block; margin: 18px auto 0; border: 0; background: none; color: var(--pv-muted); text-decoration: underline; font-size: 14px; cursor: pointer; }

/* All pages */
.pv-grid-wrap { position: absolute; inset: 0; z-index: 15; overflow: auto; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 30px;
    background: linear-gradient(var(--pv-sky-top) 0%, var(--pv-sky-mid) 45%, var(--pv-sky-low) 100%); }
.pv-grid-head { display: flex; align-items: center; justify-content: space-between; max-width: 1000px; margin: 8px auto 16px; }
.pv-grid-head h3 { font-family: var(--pv-serif); font-weight: 500; font-size: 24px; margin: 0; color: var(--pv-ink); }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.pv-tile { position: relative; padding: 10px; border-radius: 14px; border: 2px solid transparent; background: rgba(255,255,255,0.05); cursor: pointer; color: var(--pv-ink); text-align: center; font-size: 13px; font-weight: 700; }
.pv-tile.pv-current { border-color: var(--pv-teal-light); }
.pv-pair { display: flex; justify-content: center; margin-bottom: 8px; }
.pv-pair img { width: 50%; aspect-ratio: 8.5/11; object-fit: cover; background: var(--pv-paper); }
.pv-pair .pv-gap { width: 50%; }
.pv-seen { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--pv-teal); display: none; place-items: center; }
.pv-tile.pv-is-seen .pv-seen { display: grid; }
.pv-seen svg { width: 16px; height: 16px; color: #fff; }
.pv-flag { position: absolute; top: 4px; left: 4px; padding: 1px 8px; border-radius: 99px; background: var(--pv-honey); color: #2A2340; font-size: 12px; font-weight: 800; }

.pv-zoom { position: absolute; inset: 0; z-index: 25; background: rgba(4,14,20,0.94); overflow: auto; display: grid; place-items: center; cursor: zoom-out; }
/* the whole picture on screen, never cropped */
.pv-zoom { grid-template-rows: auto 1fr auto; align-content: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 10px); overflow: hidden; }
.pv-zoom img { display: block; width: auto; height: auto; max-width: 96vw; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); background: var(--pv-paper); box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
.pv-zoom-bar { display: flex; align-items: center; gap: 12px; padding: 4px; border-radius: 99px; background: rgba(255,255,255,0.1); color: var(--pv-ink); font-weight: 800; font-size: 16px; cursor: default; }
.pv-zoom-bar span { min-width: 190px; text-align: center; }
.pv-zoom-flip { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--pv-teal); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.pv-zoom-close { margin: 0; color: var(--pv-muted); font-size: 14px; }
.pv-toast { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); transform: translateX(-50%); z-index: 30; width: min(92vw, 480px); text-align: center;
    background: #0B2230; color: var(--pv-ink); border: 1px solid var(--pv-line); padding: 12px 16px; border-radius: 12px; font-size: 15px; }

/* Phone upright: a spread stacks, picture above its words */
@media (max-width: 760px) and (orientation: portrait) {
    .pv-stage { align-items: flex-start; overflow-y: auto; padding-top: 4px; }
    .pv-spread { flex-direction: column; align-items: stretch; height: auto; width: 100%; max-width: 460px; }
    .pv-leaf { height: auto; }
    .pv-leaf.pv-ghost { display: none; }
    .pv-sheet { flex: none; width: 100%; height: auto; }
    .pv-under { height: auto; padding-bottom: 10px; }
    .pv-nav .pv-lbl, .pv-top-btn .pv-lbl { display: none; }
    .pv-nav.pv-next { min-width: 0; }
    .pv-where { font-size: 14px; }
    .pv-status .pv-lbl { display: none; }
}
@media (min-width: 761px) and (max-width: 1500px) {
    .pv-nav.pv-jump .pv-lbl { display: none; }
}
@media (min-width: 761px) and (max-width: 1400px) {
    .pv-nav:not(.pv-next) .pv-lbl { display: none; }
    .pv-chip { min-width: 34px; padding: 0 5px; font-size: 12px; }
    .pv-bottom { gap: 8px; }
}
@media (min-width: 761px) and (max-width: 1300px) {
    .pv-pages { gap: 3px; }
    .pv-chip { min-width: 30px; padding: 0 4px; font-size: 11.5px; letter-spacing: -0.02em; }
    .pv-nav { padding: 0 14px; }
    .pv-nav.pv-next { min-width: 96px; }
    /* Cover and Print at the ends of the page numbers do the same job */
    .pv-nav.pv-jump { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pv * { animation: none !important; transition: none !important; } }

/* The step before the final look (story-editor.js #preview-interstitial-modal).
   Both choices lead to the full-screen book, and the card says so. */
.fl-card { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: #FFFFFF; color: #2A2340; border-radius: 22px;
    padding: 28px 26px 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); text-align: center; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; }
.fl-eyebrow { margin: 0 0 4px; color: #1F7C74; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.fl-title { margin: 0 0 10px; font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 30px; line-height: 1.2; color: #2A2340; }
.fl-lede { margin: 0 0 18px; color: #4A4360; font-size: 17px; line-height: 1.5; }
.fl-steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.fl-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 99px; background: #F4EBDD; color: #6A627E; font-size: 14px; font-weight: 700; }
.fl-steps li b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #6A627E; font-size: 12px; }
.fl-steps li.fl-on { background: #2D9C92; color: #fff; }
.fl-steps li.fl-on b { color: #1F7C74; }
.fl-go { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 18px; border: 0; border-radius: 18px; cursor: pointer;
    background: #2D9C92; color: #fff; box-shadow: 0 10px 26px rgba(45,156,146,0.35); font-family: inherit; transition: background .15s ease, transform .15s ease; }
.fl-go:hover { background: #1F7C74; transform: translateY(-1px); }
.fl-go:disabled { opacity: .7; cursor: default; transform: none; }
.fl-go-main { font-size: 21px; font-weight: 800; }
.fl-go-sub { font-size: 14px; font-weight: 600; opacity: .9; }
.fl-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: #6A627E; font-size: 13px; font-weight: 700; }
.fl-or::before, .fl-or::after { content: ""; flex: 1; height: 1px; background: #E8DFD3; }
.fl-polish { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; border-radius: 16px; cursor: pointer;
    background: #fff; color: #2A2340; border: 1.5px solid #2A2340; font-family: inherit; }
.fl-polish:hover { background: #FBF7F0; }
.fl-polish-main { font-size: 17px; font-weight: 800; }
.fl-polish-sub { font-size: 14px; font-weight: 600; color: #6A627E; }
.fl-back { margin-top: 12px; min-height: 44px; border: 0; background: none; color: #6A627E; text-decoration: underline; font-size: 15px; cursor: pointer; font-family: inherit; }
.fl-card :focus-visible { outline: 3px solid #E4A83B; outline-offset: 3px; }
@media (max-width: 480px) {
    .fl-card { padding: 22px 18px 14px; border-radius: 18px; }
    .fl-title { font-size: 26px; }
    .fl-steps { gap: 4px; flex-wrap: nowrap; }
    .fl-steps li { padding: 5px 9px 5px 5px; font-size: 13px; gap: 5px; white-space: nowrap; }
    .fl-steps li b { width: 20px; height: 20px; font-size: 11px; }
}

/* Page numbers along the bottom: tap one to go there. Honey = a new picture
   to choose, a dot = still updating, a faint tick = already looked at. */
.pv-pages { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; /* centered between Back and Next; still scrolls when there are many */ scrollbar-width: none; padding: 4px 2px; scroll-padding: 0 40px; }
.pv-pages::-webkit-scrollbar { display: none; }
.pv-pages > :first-child { margin-left: auto; }
.pv-pages > :last-child { margin-right: auto; }
.pv-chip { position: relative; flex: none; min-width: 38px; min-height: 40px; padding: 0 7px; border-radius: 9px; letter-spacing: -0.01em; border: 1px solid var(--pv-line); background: rgba(255,255,255,0.05);
    color: var(--pv-muted); font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pv-chip:hover { background: rgba(255,255,255,0.14); color: var(--pv-ink); }
.pv-chip.pv-chip-seen { color: var(--pv-ink); background: rgba(255,255,255,0.09); }
.pv-chip.pv-cur { background: var(--pv-teal-light); border-color: var(--pv-teal-light); color: #183A4E; }
.pv-chip.pv-chip-choose { background: var(--pv-honey); border-color: var(--pv-honey); color: #2A2340; }
.pv-chip.pv-chip-choose.pv-cur { box-shadow: 0 0 0 3px var(--pv-teal-light); }
.pv-chip.pv-chip-busy::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--pv-honey); animation: pv-pulse 1.2s ease-in-out infinite; }
.pv-chip.pv-chip-ready { color: var(--pv-teal-light); }
.pv-chip.pv-chip-ready.pv-cur { color: #183A4E; }
@keyframes pv-pulse { 50% { opacity: .35; } }

/* A picture they just chose shows at once, with a small note */
.pv-busy-soft { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px;
    background: rgba(11,34,48,0.86); color: var(--pv-ink); font-size: 14px; font-weight: 800; white-space: nowrap; }

/* Toast with a way to get there */
.pv-toast { display: flex; align-items: center; gap: 12px; justify-content: center; }
.pv-toast span { flex: 1; }
.pv-toast-go { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--pv-honey); color: #2A2340; font-weight: 800; font-size: 14px; cursor: pointer; font-family: inherit; }

/* Choosing between two pictures: wide enough to compare, each can be zoomed */
.pv-panel.pv-panel-wide { width: min(100%, 760px); }
.pv-version { cursor: default; padding: 10px; }
/* tap a picture to pick it; the Zoom button opens it big */
.pv-version { position: relative; }
.pv-version-pick { display: block !important; margin: 0 !important; cursor: pointer; }
.pv-version-pick img { margin-bottom: 0; }
.pv-version-name { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 15px; font-weight: 800; }
.pv-version-name input { width: 22px; height: 22px; accent-color: var(--pv-teal); flex: none; margin: 0; }
.pv-zoom-btn { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 0;
    background: rgba(11,34,48,0.85); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; font-family: inherit; }
.pv-zoom-btn svg { width: 18px; height: 18px; }
.pv-zoom-btn:hover { background: rgba(11,34,48,1); }
.pv-zoom-pick { min-height: 48px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--pv-honey); color: #2A2340; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; }

@media (max-width: 760px) {
    .pv-bottom { flex-wrap: wrap; row-gap: 8px; }
    .pv-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 136px); }
    .pv-pages { order: -1; flex-basis: 100%; }
    .pv-bottom .pv-nav.pv-next { flex: 1; }
    .pv-versions { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pv-version { padding: 6px; }
    .pv-version-name { font-size: 13px; gap: 6px; }
    .pv-zoom-btn { top: 12px; right: 12px; min-height: 36px; padding: 0 10px; font-size: 13px; }
    .pv-zoom-bar span { min-width: 0; }
}

/* The light "Opening your book" moment: only while checking whether anything
   needs building. The build steps appear only when a build is really needed. */
.pv-prep-light { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pv-prep-light img { width: min(40vw, 200px); aspect-ratio: 8.5/11; object-fit: cover; border-radius: 2px 6px 6px 2px; box-shadow: 0 18px 40px rgba(0,0,0,0.45); background: var(--pv-paper); }
.pv-prep-light p { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--pv-muted); font-weight: 700; }

/* Continue to shipping: the order screens open on top of the book, which stays
   where it was underneath. Closing them comes back to "Ready to print?". */
html.pv-open #book-format-selector-modal,
html.pv-open #finalize-order-modal { z-index: 99960 !important; }
html.pv-open #address-suggestion-modal { z-index: 99970 !important; }