/* ── size-picker.css ───────────────────────────────────────────────
   Actual-size book format picker. Shared component: <div data-size-picker>
   builds itself via size-picker.js (quick-quote/book-builder/words-to-pages
   convention). Click a UK trim size → its outline draws to a shared,
   honest scale with a bank-card reference (real-world anchor) and a faint
   A4 ghost behind it for relative context. CTA deep-links the quick-quote.
   No scroll handlers; resize is rAF-guarded in JS. Reduced-motion safe.  */

.sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:stretch;
  margin:36px 0;border:.5px solid var(--rule-lt,#e2ddd0);background:var(--white,#fff)}

/* ── Stage (ink) ───────────────────────────────────────────────── */
.sp-stage{position:relative;background:var(--ink,#16140f);overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:32px;min-height:440px}
.sp-stage::before{content:'';position:absolute;top:0;left:0;width:40px;height:.5px;background:var(--red,#a7012a)}
.sp-frame{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:var(--sp-gap,28px)}

/* the selected book outline */
.sp-book{position:relative;background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.85);border-radius:1px 3px 3px 1px;
  box-shadow:6px 8px 22px rgba(0,0,0,.4),inset 5px 0 0 -3px rgba(255,255,255,.18);
  transition:width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1);
  display:flex;align-items:center;justify-content:center}
/* spine hint down the left edge */
.sp-book::before{content:'';position:absolute;top:0;bottom:0;left:5px;width:.5px;background:rgba(255,255,255,.25)}
.sp-book-dim{font-family:var(--fb,sans-serif);font-size:12px;letter-spacing:.5px;color:rgba(255,255,255,.6);
  text-align:center;line-height:1.5;padding:6px}

/* faint A4 ghost = the largest format, for relative context */
.sp-ghost{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  border:1px dashed rgba(255,255,255,.18);border-radius:1px 3px 3px 1px;pointer-events:none;
  transition:width .4s,height .4s}
.sp-ghost-tag{position:absolute;top:4px;right:6px;font-family:var(--fb,sans-serif);font-size:9px;
  letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.25)}

/* bank-card reference */
.sp-card{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.3);border-radius:4px;flex-shrink:0;
  box-shadow:3px 4px 10px rgba(0,0,0,.3)}
.sp-card::after{content:'Bank card';position:absolute;bottom:4px;left:6px;font-family:var(--fb,sans-serif);
  font-size:8.5px;letter-spacing:.5px;color:rgba(255,255,255,.4)}
.sp-card-chip{position:absolute;top:7px;left:6px;width:11px;height:8px;border-radius:1.5px;
  background:linear-gradient(135deg,#d8c373,#a8924a)}

.sp-note{position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-family:var(--fb,sans-serif);font-size:11px;color:rgba(255,255,255,.4);padding:0 24px;line-height:1.5}

/* ── Controls (light) ──────────────────────────────────────────── */
.sp-controls{padding:32px 30px;display:flex;flex-direction:column}
.sp-controls-label{font-family:var(--fb,sans-serif);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--mute,#8a8578);font-weight:600;margin-bottom:14px}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.sp-chip{font-family:var(--fb,sans-serif);font-size:13px;font-weight:600;color:#3a3a3a;
  background:var(--paper,#f7f4ec);border:1px solid var(--rule-lt,#e2ddd0);border-radius:999px;
  padding:8px 15px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.sp-chip:hover{border-color:rgba(167,1,42,.4);color:var(--ink,#16140f)}
.sp-chip[aria-pressed="true"]{background:var(--red,#a7012a);border-color:var(--red,#a7012a);color:#fff}
.sp-chip:focus-visible{outline:2px solid var(--red,#a7012a);outline-offset:2px}

.sp-readout{border-top:.5px solid var(--rule-lt,#e2ddd0);padding-top:20px;margin-top:auto}
.sp-name{font-family:var(--fd,serif);font-size:30px;font-weight:400;color:var(--ink,#16140f);letter-spacing:-.4px;line-height:1.05}
.sp-measure{font-family:var(--fb,sans-serif);font-size:14px;color:var(--mute,#8a8578);margin:6px 0 0;font-variant-numeric:tabular-nums}
.sp-good{font-family:var(--fb,sans-serif);font-size:14.5px;line-height:1.6;color:#3a3a3a;margin:14px 0 0}
.sp-good strong{color:var(--ink,#16140f);font-weight:600}
.sp-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sp-cta{display:inline-flex;align-items:center;gap:8px;background:var(--red,#a7012a);color:#fff;text-decoration:none;
  font-family:var(--fb,sans-serif);font-size:13.5px;font-weight:600;padding:12px 22px;border-radius:3px;transition:background .15s}
.sp-cta:hover{background:#8c0123}
.sp-cta svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-alt{font-family:var(--fb,sans-serif);font-size:13px;color:var(--mute,#8a8578)}
.sp-alt a{color:var(--red,#a7012a);text-decoration:underline;text-underline-offset:2px}

@media(max-width:760px){
  .sp{grid-template-columns:1fr}
  .sp-stage{min-height:360px;padding:24px}
}
@media(prefers-reduced-motion:reduce){
  .sp-book,.sp-ghost{transition:none}
}