/* Rangoo Book Builder — the book is the hero (layer over #view-builder, see builder.js) */
#view-builder.nb-on>:not(#nb){display:none!important}
#view-builder.nb-on{animation:none}
body:has(#view-builder.nb-on:not(.hidden)) main{padding-top:12px}
body.nb-lock{overflow:hidden}

.nb-layer{--nb-accent:#0E5E6F;--nb-accent2:#0A4855;--nb-ink:#16202C;--nb-muted:#5A6573;--nb-line:#E7E7E1;--nb-soft:#E8F1F2}
.nb{--nb-accent:#0E5E6F;--nb-accent2:#0A4855;--nb-ink:#16202C;--nb-muted:#5A6573;--nb-line:#E7E7E1;--nb-soft:#E8F1F2;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"name" "hero" "stage" "shelf" "cta" "draft";gap:10px;height:var(--nb-h,auto);min-height:0;
  width:100%;max-width:720px;margin:0 auto;font-family:var(--rg-ui,Inter,system-ui,sans-serif);color:var(--nb-ink)}
.nb-name{grid-area:name;display:flex;flex-direction:column;gap:2px;min-width:0}
.nb-hero{grid-area:hero}
.nb-stagecol{grid-area:stage;min-height:0;display:flex;flex-direction:column;gap:6px}
.nb-shelf{grid-area:shelf;min-width:0}
.nb-cta{grid-area:cta}
.nb-draft{grid-area:draft;margin:0;font-size:12px;color:var(--nb-muted);text-align:center}

/* name */
.nb-lbl{font-size:13px;font-weight:600;color:var(--nb-muted)}
.nb-namebox{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--nb-accent);padding-bottom:2px;transition:border-color .2s,box-shadow .2s}
.nb-namebox:focus-within{border-color:#F28C28;box-shadow:0 6px 0 -4px rgba(242,140,40,.25)}
.nb-namebox input{flex:1;min-width:0;border:0;background:transparent;font:600 30px/1.2 var(--rg-head,'Fraunces',Georgia,serif);letter-spacing:-.01em;color:var(--nb-ink);padding:2px 0;outline:none}
.nb-namebox input::placeholder{color:#B9BDB6}
.nb-namebox svg{color:var(--nb-accent);flex-shrink:0}

/* hero face button (phone) + hero popover */
.nb-me{display:none;flex-shrink:0;width:44px;height:44px;border-radius:999px;border:1px solid var(--nb-line);background:#fff;padding:0;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(22,32,44,.08)}
.nb-me svg{width:34px;height:34px}
.nb-heropop{position:fixed;left:0;right:0;bottom:0;z-index:61;box-sizing:border-box;background:#fff;border-radius:24px 24px 0 0;padding:8px 20px calc(22px + env(safe-area-inset-bottom,0px));font-family:var(--rg-ui,Inter,sans-serif);color:#16202C;transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.95,.25,1.04);box-shadow:0 -12px 40px rgba(22,32,44,.18)}
.nb-heropop.on{transform:none}
.nb-heropop h2{margin:2px 0 14px;font:600 20px var(--rg-head,'Fraunces',Georgia,serif);text-align:center}
.nb-heroBig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.nb-heroBig .nb-heroBtn{height:auto;flex-direction:column;gap:8px;padding:14px 4px;border-radius:20px;font-size:15px}
.nb-heroBig .nb-av{width:64px;height:64px}
/* hero avatars */
.nb-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nb-heroBtn{height:50px;border-radius:16px;border:1px solid var(--nb-line);background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font:600 14px var(--rg-ui,Inter,sans-serif);color:var(--nb-ink);padding:0 6px;min-width:0;transition:background .2s,border-color .2s,color .2s,transform .12s}
.nb-heroBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-heroBtn[aria-checked="true"]{border:2px solid var(--nb-accent);background:var(--nb-soft);color:var(--nb-accent2)}
.nb-av{width:30px;height:30px;flex-shrink:0}

/* the book */
.nb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;border-radius:24px}
.nb-stage:focus-visible{box-shadow:0 0 0 3px rgba(14,94,111,.35)}
.nb-book{position:relative;width:var(--pw,240px);height:var(--ph,340px);perspective:2400px;transition:width .35s ease}
.nb-spread .nb-book{width:calc(var(--pw,240px) * 2)}
.nb-spread .nb-book:not(.nb-open){transform:translateX(calc(var(--pw,240px) * -.5));transition:transform .45s cubic-bezier(.3,.1,.2,1)}
.nb-spread .nb-book.nb-open{transform:none;transition:transform .45s cubic-bezier(.3,.1,.2,1)}
.nb-slot{position:absolute;top:0;width:var(--pw,240px);height:var(--ph,340px)}
.nb-slot.nb-L{left:0}.nb-slot.nb-R{left:var(--pw,240px)}.nb-slot.nb-one{left:0}
.nb-slot>.page,.nb-face>.page{overflow:hidden;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;box-sizing:border-box;margin:0}
.nb-slot.nb-one{filter:drop-shadow(0 18px 26px rgba(22,32,44,.18))}
.nb-slot.nb-one::before{content:"";position:absolute;inset:4px -6px -6px 4px;border-radius:8px;background:#fff;box-shadow:1px 1px 0 var(--nb-line),3px 3px 0 #F1F1EC,4px 4px 0 var(--nb-line);z-index:-1}
.nb-spread .nb-slot.nb-L>.page{border-radius:10px 2px 2px 10px}
.nb-spread .nb-slot.nb-R>.page{border-radius:2px 10px 10px 2px}
.nb-spread .nb-slot{filter:drop-shadow(0 24px 30px rgba(22,32,44,.16))}
.nb-spread .nb-slot.nb-L::after,.nb-spread .nb-slot.nb-R::after{content:"";position:absolute;top:0;bottom:0;width:18%;pointer-events:none}
.nb-spread .nb-slot.nb-L::after{right:0;background:linear-gradient(to left,rgba(22,32,44,.12),transparent)}
.nb-spread .nb-slot.nb-R::after{left:0;background:linear-gradient(to right,rgba(22,32,44,.12),transparent)}
.nb-spread .nb-slot.nb-empty::after{display:none}
.nb-leaf{position:absolute;top:0;width:var(--pw,240px);height:var(--ph,340px);transform-style:preserve-3d;z-index:3;will-change:transform}
.nb-leaf.nb-onR{left:var(--pw,240px);transform-origin:left center}
.nb-leaf.nb-one{left:0;transform-origin:left center}
.nb-leaf.nb-onL{left:0;transform-origin:right center}
.nb-leaf.nb-in{transform:rotateY(-180deg)}
.nb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:8px}
.nb-back{transform:rotateY(180deg)}
.nb-blank{background:#FBFAF6;border:1px solid var(--nb-line)}
.nb-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(22,32,44,.42),rgba(22,32,44,0) 65%)}
.nb-onL .nb-shade{background:linear-gradient(270deg,rgba(22,32,44,.42),rgba(22,32,44,0) 65%)}
.nb-arrow{position:absolute;top:50%;z-index:4;width:44px;height:44px;margin-top:-22px;border-radius:999px;border:1px solid var(--nb-line);background:rgba(255,255,255,.92);color:var(--nb-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(22,32,44,.12);transition:opacity .2s,transform .12s,background .2s}
.nb-prev{left:2px}.nb-next{right:2px}
.nb-next:not(:disabled){background:var(--nb-accent);border-color:var(--nb-accent);color:#fff;box-shadow:0 8px 18px rgba(14,94,111,.3)}
.nb-arrow:disabled{opacity:0;pointer-events:none}
.nb-dots{display:flex;align-items:center;justify-content:center;gap:2px;min-height:26px;flex-wrap:wrap;margin-top:8px;position:relative;z-index:1}
.nb-dot{position:relative;width:8px;height:8px;margin:0 3px;border-radius:4px;border:0;padding:0;background:#C9CBC3;transition:width .3s cubic-bezier(.3,1.4,.5,1),background .2s}
.nb-dot::before{content:"";position:absolute;inset:-12px -5px}
.nb-dot.on{width:22px;background:var(--nb-accent)}
.nb-dlab{margin-left:8px;font-size:12px;color:var(--nb-muted);font-variant-numeric:tabular-nums}

/* name letters pop onto the cover */
.nb-ch{display:inline-block;white-space:pre}
.nb-pop{animation:nbPop .34s cubic-bezier(.3,1.7,.5,1) both}
@keyframes nbPop{0%{transform:translateY(8px) scale(.3);opacity:0}100%{transform:none;opacity:1}}
.nb-spark{position:absolute;right:-12px;top:-8px;width:16px;height:16px;pointer-events:none;background:radial-gradient(circle,#fff 0 18%,#F6B10A 19% 38%,transparent 40%);animation:nbSpark .6s ease-out forwards}
@keyframes nbSpark{0%{transform:scale(.2) rotate(0);opacity:1}100%{transform:scale(1.8) rotate(90deg);opacity:0}}

/* story shelf */
.nb-shelf-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.nb-shelf-h h2{margin:0;font:700 15px var(--rg-ui,Inter,sans-serif);letter-spacing:0}
.nb-all{border:0;background:none;padding:6px 0;min-height:32px;font:600 13px var(--rg-ui,Inter,sans-serif);color:var(--nb-accent)}
.nb-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:3px 16px 4px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nb-row::-webkit-scrollbar{display:none}
.nb-tile{flex:0 0 64px;height:82px;padding:0;border-radius:12px;border:1px solid var(--nb-line);background:#fff;overflow:hidden;scroll-snap-align:start;transition:transform .15s,box-shadow .2s}
.nb-tile svg{display:block;width:100%;height:100%}
.nb-tile.on{box-shadow:0 0 0 3px var(--nb-accent);border-color:var(--nb-accent)}

/* actions */
.nb-cta{display:flex;gap:10px}
.nb-get{flex:1;height:52px;border-radius:999px;border:0;background:var(--nb-accent);color:#fff;font:700 16px var(--rg-ui,Inter,sans-serif);display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 22px rgba(14,94,111,.28);transition:transform .12s,background .2s}
.nb-get:hover{background:var(--nb-accent2)}
.nb-colour{height:52px;min-width:52px;padding:0 14px;border-radius:999px;border:1px solid var(--nb-line);background:#fff;color:#E5487B;display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--rg-ui,Inter,sans-serif);transition:transform .12s}
.nb-colour span{color:var(--nb-ink)}
@media (max-width:1023px){.nb-colour span{display:none}.nb-colour{padding:0;width:52px}}
.nb button:active:not(:disabled),.nb-layer button:active:not(:disabled){transform:scale(.96)}
.nb-tile:active{transform:scale(.94)!important}

/* sheets */
.nb-scrim{position:fixed;inset:0;z-index:60;background:rgba(22,32,44,.44);opacity:0;transition:opacity .25s}
.nb-scrim.on{opacity:1}
.nb-sheet,.nb-picker{position:fixed;left:0;right:0;bottom:0;z-index:61;box-sizing:border-box;background:#fff;border-radius:24px 24px 0 0;padding:8px 20px calc(18px + env(safe-area-inset-bottom,0px));max-height:90vh;overflow:auto;overscroll-behavior:contain;font-family:var(--rg-ui,Inter,sans-serif);color:#16202C;
  transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.95,.25,1.04);box-shadow:0 -12px 40px rgba(22,32,44,.18)}
.nb-sheet.on,.nb-picker.on{transform:none}
.nb-grab{width:40px;height:5px;border-radius:3px;background:#E7E7E1;margin:0 auto 10px}
.nb-sheet-in{display:flex;flex-direction:column;gap:12px}
.nb-sh-top{display:flex;gap:14px;align-items:center}
.nb-sh-art{width:56px;height:72px;border-radius:10px;overflow:hidden;flex-shrink:0;border:1px solid #E7E7E1}
.nb-sh-art svg{display:block;width:100%;height:100%}
.nb-sh-top h2{margin:0;font:600 22px/1.2 var(--rg-head,'Fraunces',Georgia,serif);letter-spacing:-.01em}
.nb-sh-top p{margin:3px 0 0;font-size:13px;color:#5A6573}
.nb-pdf{height:56px;border-radius:16px;border:0;background:#0E5E6F;color:#fff;font:700 16px var(--rg-ui,Inter,sans-serif);display:flex;align-items:center;justify-content:center;gap:10px;width:100%;transition:transform .12s,opacity .2s}
.nb-pdf.busy{opacity:.85}
.nb-pdf.busy svg{animation:nbBob .8s ease-in-out infinite}
@keyframes nbBob{50%{transform:translateY(3px)}}
.nb-opts{display:flex;flex-direction:column;border-top:1px solid #EFEFEA}
.nb-opt{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 4px;border:0;border-bottom:1px solid #EFEFEA;background:transparent;font:600 15px/1.25 var(--rg-ui,Inter,sans-serif);color:#16202C;text-align:left;width:100%;transition:background .15s}
.nb-opt>svg:first-child{width:22px;height:22px;color:#0E5E6F;flex-shrink:0}
.nb-opt span{flex:1;min-width:0}
.nb-opt .nb-chev,.nb-opt>svg:last-child{color:#A3A8A0;flex-shrink:0}
.nb-opt[aria-expanded="true"]>svg:last-child{transform:rotate(180deg)}
.nb-opt:hover{background:#F7F7F3}
.nb-opt.done>svg:first-child{color:#2F7A4F}
.nb-opt.done span::after{content:" \2713";color:#2F7A4F}
.nb-langs{display:flex;flex-wrap:wrap;gap:8px}
.nb-langs button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #E7E7E1;background:#fff;font:600 14px var(--rg-ui,Inter,sans-serif);color:#16202C}
.nb-langs button[aria-pressed="true"]{border-color:#0E5E6F;background:#E8F1F2;color:#0A4855}
.nb-more{border-top:1px solid #E7E7E1;padding-top:4px}
.nb-more summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font:600 14px var(--rg-ui,Inter,sans-serif);color:#5A6573;cursor:pointer}
.nb-more summary::-webkit-details-marker{display:none}
.nb-more[open] summary svg{transform:rotate(180deg)}
.nb-more-in{display:flex;flex-direction:column;gap:14px;padding:4px 0 6px}
.nb-f{display:flex;flex-direction:column;gap:6px}
.nb-flbl{font-size:12px;font-weight:700;letter-spacing:.04em;color:#5A6573}
.nb-f input{height:46px;border:1px solid #DADBD4;border-radius:12px;padding:0 14px;font:500 17px var(--rg-ui,Inter,sans-serif);color:#16202C;background:#fff}
.nb-f small{font-size:12px;color:#5A6573;line-height:1.4}
.nb-seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:#F1F1EC}
.nb-seg button{flex:1;min-height:40px;border:0;border-radius:10px;background:transparent;font:600 13px var(--rg-ui,Inter,sans-serif);color:#5A6573}
.nb-seg button[aria-pressed="true"]{background:#fff;color:#16202C;box-shadow:0 1px 3px rgba(22,32,44,.12)}
.nb-sh-note{margin:0;font-size:12px;color:#5A6573;text-align:center}
.nb-edit{min-height:44px;border:0;background:transparent;font:600 14px var(--rg-ui,Inter,sans-serif);color:#5A6573}
.nb-confetti{position:fixed;left:0;right:0;height:0;z-index:62;pointer-events:none}
.nb-confetti i{position:absolute;top:0;width:9px;height:13px;border-radius:2px;animation:nbConf 1.15s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes nbConf{0%{transform:translate(0,0) rotate(0);opacity:1}80%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.nb-pick-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.nb-pick-h h2{margin:0;font:600 22px var(--rg-head,'Fraunces',Georgia,serif)}
.nb-x{width:44px;height:44px;border-radius:999px;border:1px solid #E7E7E1;background:#fff;display:flex;align-items:center;justify-content:center;color:#16202C}
.nb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.nb-card{border:0;background:none;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left;color:#16202C;min-width:0}
.nb-cart{display:block;aspect-ratio:.79;border-radius:12px;overflow:hidden;border:1px solid #E7E7E1;transition:transform .15s,box-shadow .2s}
.nb-cart svg{display:block;width:100%;height:100%}
.nb-card:hover .nb-cart{transform:translateY(-2px);box-shadow:0 10px 22px rgba(22,32,44,.12)}
.nb-card.on .nb-cart{box-shadow:0 0 0 3px #0E5E6F}
.nb-ct{font:600 12.5px/1.3 var(--rg-ui,Inter,sans-serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* tablet */
@media (min-width:600px) and (max-width:1023px){
  .nb{gap:14px}
  .nb-namebox input{font-size:36px}
  .nb-heroBtn{height:56px;font-size:15px}
  .nb-tile{flex-basis:84px;height:106px}
  .nb-arrow{width:52px;height:52px;margin-top:-26px}
  .nb-prev{left:8px}.nb-next{right:8px}
  .nb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* desktop: open book on the left, everything else on the right */
@media (min-width:1024px){
  .nb{max-width:1320px;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto auto auto auto minmax(0,1fr);
    grid-template-areas:"stage name" "stage hero" "stage shelf" "stage cta" "stage draft";gap:18px 40px}
  .nb-stagecol{background:radial-gradient(circle at 50% 45%,#fff 0,rgba(255,255,255,0) 72%);border-radius:28px;padding:10px 0 6px}
  .nb-name{padding-top:6px}
  .nb-namebox input{font-size:40px}
  .nb-heroBtn{height:56px;font-size:15px}
  .nb-shelf{align-self:start;margin-top:6px}
  .nb-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:3px;overflow:visible}
  .nb-tile{height:auto;aspect-ratio:.79;flex:none}
  .nb-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(22,32,44,.12)}
  .nb-tile.on:hover{box-shadow:0 0 0 3px var(--nb-accent)}
  .nb-cta{align-self:start;margin-top:6px}
  .nb-draft{align-self:start}
  .nb-get{height:56px}
  .nb-colour{height:56px;padding:0 20px}
  .nb-draft{text-align:left}
  .nb-arrow{width:52px;height:52px;margin-top:-26px}
  .nb-prev{left:8px}.nb-next{right:8px}
  .nb-sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(500px,92vw);border-radius:24px;padding:22px 24px;max-height:86vh;transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .32s cubic-bezier(.2,.95,.25,1.04),opacity .2s}
  .nb-sheet.on{transform:translate(-50%,-50%);opacity:1}
  .nb-picker{left:50%;right:auto;bottom:auto;top:50%;width:min(940px,94vw);border-radius:24px;padding:20px 24px 26px;max-height:86vh;transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .32s cubic-bezier(.2,.95,.25,1.04),opacity .2s}
  .nb-picker.on{transform:translate(-50%,-50%);opacity:1}
  .nb-sheet .nb-grab,.nb-picker .nb-grab{display:none}
  .nb-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* phone: name, book, one button. everything else lives in the sheet */
@media (max-width:760px){
  body:has(#view-builder.nb-on:not(.hidden)) main{padding-top:8px}
  #view-builder{--rg-vh:100svh;--rg-vh:100dvh;--rg-top:64px;--rg-tab:64px;--rg-safe:0px;--rg-cta:50px;--rg-name:44px}
  .nb{grid-template-rows:var(--rg-name) minmax(0,1fr) var(--rg-cta);grid-template-areas:"name" "stage" "cta";gap:8px;
    height:calc(var(--rg-vh) - var(--rg-top) - var(--rg-tab) - var(--rg-safe) - 8px)}
  .nb.nb-compact{--rg-name:36px;gap:6px}
  .nb.nb-compact .nb-me{width:36px;height:36px}.nb.nb-compact .nb-me svg{width:28px;height:28px}
  .nb.nb-compact .nb-namebox input{font-size:21px}
  .nb.nb-compact .nb-get{height:48px}
  .nb.nb-compact .page svg.scene text{display:none}
  .nb-lbl,.nb-hero,.nb-shelf,.nb-colour,.nb-arrow,.nb-dots,.nb-draft{display:none!important}
  .nb-me{display:flex}
  .nb-namebox{border-bottom:0;gap:10px;padding:0}
  .nb-namebox:focus-within{box-shadow:none}
  .nb-namebox input{font-size:26px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:2px solid transparent;padding:4px 0 2px}
  .nb-namebox input:focus{border-bottom-color:#F28C28}
  .nb-namebox>svg{opacity:.55;width:18px;height:18px}
  .nb-stagecol{gap:0}
  .nb-stage{border-radius:16px}
  .nb-slot.nb-one{filter:drop-shadow(0 10px 18px rgba(22,32,44,.14))}
  .nb-slot.nb-one::before{display:none}
  .nb-get{height:var(--rg-cta);box-shadow:0 6px 14px rgba(14,94,111,.22)}
  .nb-name,.nb-namebox{height:100%}
  .nb-sheet{max-height:88vh;max-height:88dvh}
  #nb .page.bookcover .foot{display:none}
  #nb .page.bookcover .face{padding-bottom:7%}
}
@media (prefers-reduced-motion:reduce){
  .nb *,.nb-layer *{animation:none!important;transition:opacity .2s!important}
  .nb-sheet,.nb-picker,.nb-heropop{transition:opacity .2s!important}
  .nb-sheet:not(.on),.nb-picker:not(.on),.nb-heropop:not(.on){opacity:0}
}
@media print{.nb-layer{display:none!important}}

/* the cover inside the builder is small: crop the art a little so the child's name always shows (the PDF keeps its full cover) */
#nb .page.bookcover .frame{flex:none;overflow:hidden;aspect-ratio:300/306}
#nb .page.bookcover .frame svg{height:auto}
#nb .page.bookcover .btitle{font-size:clamp(14px,7.6cqw,34px)}
#nb .page.bookcover .face{gap:2.4%}