/* ── book-builder.css ──────────────────────────────────────────────
   The hardback builder — "dress your own book, swatch by swatch."
   Shared component (print-craft conventions, doc 23): markup contract
   is a single <div data-book-builder></div>; book-builder.js builds
   everything inside it. Designed for a dark (ink) section background.

   All colour state lives in CSS custom properties set by the JS:
   --bb-cloth / --bb-cloth-deep   cover material
   --bb-foil-a/-b/-c              foil gradient stops
   --bb-band-a / --bb-band-b      head & tail band stripes
   --bb-ribbon                    ribbon marker
   --bb-end                       endpaper colour
   Reduced motion: every transition collapses to the final state.    */

.bb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:40px;
  --bb-cloth:#1f3d2b;--bb-cloth-deep:#152b1e;
  --bb-foil-a:#8a6d2f;--bb-foil-b:#f3e3a4;--bb-foil-c:#caa84e;
  --bb-band-a:#6b2433;--bb-band-b:#ece5d4;
  --bb-ribbon:#6b2433;--bb-end:#1c4633;
}

/* ── The stage ─────────────────────────────────────────────────── */
.bb-stage{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;perspective:1400px}

/* Closed book — three-quarter view: spine + front board + page block */
.bb-book{position:relative;width:300px;height:420px;transform:rotateY(-18deg);transform-style:preserve-3d;
  transition:transform .45s ease,opacity .35s ease;filter:drop-shadow(22px 30px 34px rgba(0,0,0,.45))}
.bb.bb-pulse .bb-book{transform:rotateY(-18deg) scale(1.015)}

.bb-front{position:absolute;inset:0;background:var(--bb-cloth);border-radius:2px 6px 6px 2px;
  transition:background .3s ease;overflow:hidden;z-index:1}
/* cloth weave */
.bb-front::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px)}
/* board edge highlight */
.bb-front::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),inset -6px 0 14px -8px rgba(0,0,0,.5)}
/* blind frame line debossed into the board */
.bb-front-frame{position:absolute;inset:22px;border:1px solid rgba(0,0,0,.22);border-radius:1px;
  box-shadow:0 1px 0 rgba(255,255,255,.05);pointer-events:none}

/* PPC mode — printed paper case replaces the cloth */
.bb.bb-ppc .bb-front{background:linear-gradient(168deg,#26221d 0%,#3d322a 38%,#a7012a 130%)}
.bb.bb-ppc .bb-front::before{opacity:0}
.bb.bb-ppc .bb-front-frame{border-color:rgba(255,255,255,.18);box-shadow:none}

/* page block at the fore-edge */
.bb-pages{position:absolute;top:5px;bottom:5px;right:-7px;width:9px;border-radius:0 2px 2px 0;
  background:repeating-linear-gradient(0deg,#efe9d8 0 2px,#ddd5bf 2px 3px)}

/* head & tail bands — small striped caps where pages meet the spine */
.bb-band{position:absolute;left:6px;width:16px;height:7px;border-radius:1.5px;z-index:3;
  background:repeating-linear-gradient(90deg,var(--bb-band-a) 0 3px,var(--bb-band-b) 3px 6px);
  transition:background .3s ease;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.bb-band-head{top:-3px}
.bb-band-tail{bottom:-3px}

/* ribbon marker — tucked behind the front board (z-index below .bb-front)
   so only the dangle below the bottom edge is visible */
.bb-ribbon{position:absolute;bottom:-52px;right:48px;width:13px;height:64px;background:var(--bb-ribbon);
  transition:background .3s ease,opacity .3s ease;z-index:0;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);
  box-shadow:0 6px 10px rgba(0,0,0,.35);transform:rotate(3deg)}
.bb.bb-noribbon .bb-ribbon{opacity:0}

/* foil titles */
.bb-title-front{position:absolute;top:64px;left:36px;right:36px;text-align:center;
  font-family:var(--fd);font-weight:500;font-size:27px;line-height:1.2;letter-spacing:.5px;
  overflow-wrap:break-word}
.bb-author-front{position:absolute;bottom:52px;left:36px;right:36px;text-align:center;
  font-family:var(--fb);font-weight:600;font-size:12px;letter-spacing:2.5px;text-transform:uppercase}
.bb-foil{background-image:linear-gradient(105deg,var(--bb-foil-a) 0%,var(--bb-foil-b) 42%,var(--bb-foil-c) 60%,var(--bb-foil-b) 78%,var(--bb-foil-a) 100%);
  background-size:220% 100%;background-position:65% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position .9s ease}
.bb.bb-shine .bb-foil{background-position:0% 0}
/* blind deboss — no foil, impression only */
.bb.bb-blind .bb-foil{background-image:none;color:rgba(0,0,0,.32);text-shadow:0 1px 0 rgba(255,255,255,.07)}
.bb.bb-ppc.bb-blind .bb-foil{color:rgba(0,0,0,.4);text-shadow:0 1px 0 rgba(255,255,255,.12)}

/* ── Open view — the endpaper spread ───────────────────────────── */
.bb-spread{position:absolute;width:420px;max-width:100%;height:300px;display:flex;opacity:0;visibility:hidden;
  transform:scale(.94);transition:opacity .35s ease,transform .45s ease,visibility 0s linear .45s;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.bb-page{flex:1;background:var(--bb-end);transition:background .3s ease;position:relative}
.bb-page-l{border-radius:4px 0 0 4px;box-shadow:inset -18px 0 22px -14px rgba(0,0,0,.45)}
.bb-page-r{border-radius:0 4px 4px 0;box-shadow:inset 18px 0 22px -14px rgba(0,0,0,.45)}
/* faint paper grain on the endpapers */
.bb-page::after{content:'';position:absolute;inset:0;opacity:.35;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px)}
/* ribbon lying across the right-hand page */
.bb-spread-ribbon{position:absolute;top:-12px;right:84px;width:13px;height:200px;background:var(--bb-ribbon);
  transform:rotate(14deg);transition:background .3s ease,opacity .3s ease;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 92%,0 100%);box-shadow:3px 6px 9px rgba(0,0,0,.3)}
.bb.bb-noribbon .bb-spread-ribbon{opacity:0}

.bb.bb-open .bb-book{opacity:0;visibility:hidden;transform:rotateY(-50deg) scale(.92)}
.bb.bb-open .bb-spread{opacity:1;visibility:visible;transform:scale(1);transition-delay:.05s,.05s,0s}
.bb:not(.bb-open) .bb-book{visibility:visible}

.bb-flip{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.65);background:none;border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:9px 22px;cursor:pointer;transition:color .15s,border-color .15s}
.bb-flip:hover{color:#fff;border-color:rgba(255,255,255,.6)}

/* ── Controls ──────────────────────────────────────────────────── */
.bb-controls{display:flex;flex-direction:column;gap:22px}
.bb-group-label{font-family:var(--fb);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:9px;display:flex;align-items:baseline;gap:10px}
.bb-group-label em{font-style:normal;color:rgba(255,255,255,.85);font-size:11.5px;letter-spacing:.4px;text-transform:none;font-weight:500}
.bb-swatches{display:flex;flex-wrap:wrap;gap:10px}
.bb-swatch{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.18);cursor:pointer;
  position:relative;transition:transform .12s ease,border-color .15s ease;padding:0}
.bb-swatch:hover{transform:scale(1.1)}
.bb-swatch[aria-pressed="true"]{border-color:#fff;transform:scale(1.12);
  box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.bb-swatch:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bb-chip{height:38px;border-radius:999px;padding:0 18px;font-family:var(--fb);font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.18);cursor:pointer;
  transition:border-color .15s,color .15s}
.bb-chip:hover{color:#fff}
.bb-chip[aria-pressed="true"]{border-color:#fff;color:#fff;background:rgba(255,255,255,.13)}
/* striped band swatches + the "no ribbon" swatch */
.bb-swatch-none{background:transparent}
.bb-swatch-none::after{content:'';position:absolute;left:7px;right:7px;top:50%;height:2px;background:rgba(255,255,255,.5);
  transform:rotate(-45deg)}

.bb-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bb-input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:3px;
  color:#fff;font-family:var(--fb);font-size:14px;padding:11px 14px;width:100%}
.bb-input::placeholder{color:rgba(255,255,255,.35)}
.bb-input:focus{outline:none;border-color:rgba(255,255,255,.55)}

/* spec line + actions */
.bb-spec{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;margin-top:4px}
.bb-spec-line{font-family:var(--fd);font-size:19px;font-weight:400;font-style:italic;color:#fff;line-height:1.5;min-height:30px}
.bb-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.bb-cta{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--fb);font-size:14px;font-weight:600;padding:13px 26px;border-radius:3px;transition:background .15s}
.bb-cta:hover{background:#8c0123}
.bb-cta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bb-copy{background:none;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.75);border-radius:3px;
  font-family:var(--fb);font-size:13px;font-weight:600;padding:12px 20px;cursor:pointer;transition:color .15s,border-color .15s}
.bb-copy:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.bb-copy.bb-copied{color:#9fd6a8;border-color:#9fd6a8}
.bb-foot{font-family:var(--fb);font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.7;margin-top:16px}

/* ── Responsive + reduced motion ───────────────────────────────── */
@media(max-width:1024px){
  .bb{grid-template-columns:1fr;gap:36px}
  .bb-stage{min-height:430px}
}
@media(max-width:640px){
  .bb-book{width:240px;height:336px}
  .bb-title-front{top:48px;font-size:21px}
  .bb-author-front{bottom:40px;font-size:10.5px}
  .bb-spread{height:240px}
  .bb-inputs{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .bb-book,.bb-spread,.bb-front,.bb-spine,.bb-band,.bb-ribbon,.bb-page,.bb-foil,.bb-swatch{transition:none}
  .bb.bb-shine .bb-foil{background-position:65% 0}
}