/* PetBricks Playroom theme (design/tokens.json, direction A refined).
   Loaded after the structural stylesheets; it restyles, never re-lays-out data. */

:root{
  --pb-blue:#2B59FF;--pb-blue-lip:#1C3FCC;--pb-blue-soft:#E8EDFF;
  --pb-red:#FF4836;--pb-red-lip:#C2291A;--pb-red-soft:#FFE6E2;
  --pb-yellow:#FFC12E;--pb-yellow-lip:#C98F00;--pb-yellow-soft:#FFF3CF;
  --pb-green:#1DB971;--pb-green-text:#0E6B41;--pb-green-soft:#E3F7EE;
  --pb-night:#121633;--pb-night-raised:#232A55;--pb-night-line:#3A4170;
  --pb-cobalt:#1F47D6;--pb-cobalt-lip:#142F9C;
  --pb-paper:#F6F4EE;--pb-paper-line:#E4E1D8;--pb-white:#FFFFFF;
  --pb-ink:#17171F;--pb-ink-muted:#5E6070;--pb-on-night:#FFFFFF;--pb-on-night-muted:#C9CEEA;
  --pb-font:'Bricolage Grotesque',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
  --pb-stud-grid:radial-gradient(circle at 12px 12px,rgba(255,255,255,.07) 6px,transparent 6.5px);
  /* Existing structural variables, remapped to the new palette. */
  --bg:var(--pb-white);--ink:var(--pb-ink);--muted:var(--pb-ink-muted);--green:var(--pb-blue);--line:var(--pb-paper-line);--paper:var(--pb-white);
  font-family:var(--pb-font);color:var(--pb-ink);background:var(--pb-white);
  text-wrap:balance;
}
body{font-family:var(--pb-font);font-feature-settings:'ss01' 0}
button,input,select,textarea{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--pb-blue);outline-offset:3px}

/* Header: 3D paw + wordmark */
.header{height:84px}
.brand{gap:10px;font-size:24px;font-weight:800;letter-spacing:-.03em}
.brand img{width:40px;height:auto;display:block}




/* Stage: paper, rounded, the pet owns it */
.stage{background:var(--pb-paper);border-radius:34px;overflow:hidden}
#viewport{right:78px}
.icon-button{width:44px;height:44px;border:0;background:var(--pb-white);box-shadow:0 3px 0 var(--pb-paper-line);font-size:22px;color:var(--pb-ink)}
.icon-button[aria-pressed=true]{background:var(--pb-blue);color:var(--pb-white);box-shadow:0 3px 0 var(--pb-blue-lip)}
.icon-button svg{width:19px;height:19px;stroke-width:2}
.viewer-tools{right:16px;bottom:18px;gap:10px}
.loader-brick{width:26px;height:18px;border-radius:5px;background:var(--pb-yellow);box-shadow:0 4px 0 var(--pb-yellow-lip)}




/* Sliders: chunky track, stud thumbs. Size = blue fill + yellow stud, layers = red. */
input[type=range]{height:10px;border-radius:5px;background:linear-gradient(to right,var(--pb-blue) var(--progress),var(--pb-paper-line) var(--progress));margin:18px 0 10px}
input[type=range]::-webkit-slider-thumb{width:32px;height:32px;border:0;border-radius:50%;background:radial-gradient(circle,#FFD666 0 9px,var(--pb-yellow) 9.5px);box-shadow:0 3px 0 var(--pb-yellow-lip),0 6px 14px rgba(23,23,31,.18);transition:transform .09s}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border:0;border-radius:50%;background:radial-gradient(circle,#FFD666 0 9px,var(--pb-yellow) 9.5px);box-shadow:0 3px 0 var(--pb-yellow-lip)}
input[type=range]:active::-webkit-slider-thumb{transform:translateY(2px);box-shadow:0 1px 0 var(--pb-yellow-lip)}
input[type=range]:disabled{opacity:.5}
.scale-labels{font-size:12px;font-weight:700;color:var(--pb-ink-muted)}
/* Brick-count sizes: a name under every stop, centred on its dot (the thumb's
   centre runs from 16px to 100% - 16px). The first and last hug the ends. */
.scale-labels[data-mode=tiers]{display:block;position:relative;height:18px;margin:0 16px}
.scale-labels[data-mode=tiers] span{position:absolute;top:0;left:var(--at);transform:translateX(-50%);white-space:nowrap;cursor:pointer;transition:color .15s}
.scale-labels[data-mode=tiers] span:first-child{transform:translateX(-16px)}
.scale-labels[data-mode=tiers] span:last-child{transform:translateX(calc(16px - 100%))}
.scale-labels[data-mode=tiers] span.on{color:var(--pb-ink)}
/* Phones: the last name ("Extra large") wraps under itself rather than touching "Large". */
@media(max-width:520px){.scale-labels[data-mode=tiers]{height:32px}.scale-labels[data-mode=tiers] span:last-child{white-space:normal;text-align:right;max-width:4.6em;line-height:1.2}}
.layer-control{width:86px;gap:12px}
.layer-control input[type=range]{width:10px;background:linear-gradient(to top,var(--pb-red) var(--progress),var(--pb-paper-line) var(--progress))}
.layer-control input[type=range]::-webkit-slider-thumb{background:radial-gradient(circle,#FF7566 0 9px,var(--pb-red) 9.5px);box-shadow:0 3px 0 var(--pb-red-lip),0 6px 14px rgba(23,23,31,.18)}
.layer-control input[type=range]::-moz-range-thumb{background:radial-gradient(circle,#FF7566 0 9px,var(--pb-red) 9.5px);box-shadow:0 3px 0 var(--pb-red-lip)}

/* Size and totals */
.size-title label{font-size:15px;font-weight:800;color:var(--pb-ink-muted)}
.size-value output{font-size:36px;font-weight:800;letter-spacing:-.03em}
.size-value>span{font-size:14px;font-weight:700;color:var(--pb-ink-muted)}
.inline-button{font-weight:700}.source-link{color:var(--pb-blue);font-weight:700}

/* Parts list (unlocked kit) */
.parts-panel{border:0;border-radius:26px;background:var(--pb-white);box-shadow:0 0 0 1px var(--pb-paper-line),0 10px 30px rgba(23,23,31,.06)}
.parts-heading h2{font-size:24px;font-weight:800;letter-spacing:-.03em}
.parts-heading>span{font-size:14px;font-weight:700}
.parts-table{font-size:14px}
.parts-table th{font-size:12px;font-weight:800;color:var(--pb-ink-muted);border-bottom:2px solid var(--pb-paper)}
.parts-table td{border-bottom:1px solid var(--pb-paper)}
.part-name{font-size:15px;font-weight:800}.part-colour{font-size:12px;font-weight:600}
.parts-footer{border-top:2px solid var(--pb-paper)}
.parts-subtotal{font-size:15px;font-weight:800}.parts-subtotal strong{font-size:28px;font-weight:800;letter-spacing:-.03em}
.spare-bricks legend{font-size:15px;font-weight:800}
.spare-options{background:var(--pb-paper);border:0;border-radius:14px}
.spare-options span{font-weight:800;color:var(--pb-ink-muted);border-radius:10px}
.spare-options input:checked+span{background:var(--pb-yellow);color:var(--pb-ink);box-shadow:0 3px 0 var(--pb-yellow-lip)}
.spare-options label:hover span{color:var(--pb-ink)}.spare-options label:hover input:checked+span{color:var(--pb-ink)}
.fine-print{font-size:12px;color:var(--pb-ink-muted)}

/* Dialogs and sheets */
dialog{border:0;border-radius:30px;background:var(--pb-white);box-shadow:0 30px 90px rgba(18,22,51,.35);color:var(--pb-ink)}
dialog::backdrop{background:rgba(18,22,51,.62);backdrop-filter:blur(6px)}
dialog h2{font-size:30px;font-weight:800;letter-spacing:-.03em}
dialog>p{font-size:15px;line-height:1.55;color:var(--pb-ink-muted)}
.close-button{width:44px;height:44px;border-radius:50%;background:var(--pb-paper);color:var(--pb-ink);font-size:26px;line-height:1}
.photo-dropzone{border:3px dashed var(--pb-blue);background:var(--pb-blue-soft);border-radius:22px;font-size:18px;font-weight:800;color:var(--pb-ink)}
.photo-dropzone span{font-size:14px;font-weight:700;color:var(--pb-blue)}.upload-grid img{background:var(--pb-paper);border-radius:16px}
.pet-name-field input,.photo-view{border:2px solid var(--pb-paper-line);border-radius:14px;background:var(--pb-white);font-weight:700}
.build-warning{background:var(--pb-yellow-soft);color:#6A5200;border-radius:18px}
#drop-overlay{border:4px dashed var(--pb-yellow);border-radius:30px;background:rgba(18,22,51,.9);color:var(--pb-white);font-weight:800;font-size:30px}









/* First-visit onboarding: night stud grid, one idea per screen */
.onboarding{position:fixed;inset:0;z-index:40;background-color:var(--pb-night);background-image:var(--pb-stud-grid);background-size:24px 24px;color:var(--pb-on-night);display:flex;flex-direction:column;overflow:auto}
.onboarding-top{display:flex;align-items:center;gap:12px;padding:22px clamp(20px,4vw,48px)}
.onboarding-top .brand{color:var(--pb-on-night);flex:1}
.onboarding-top a,.onboarding-top button{color:var(--pb-yellow);font-size:16px;font-weight:800;background:none;padding:10px 6px}
.onboarding-slide{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px);padding:8px clamp(20px,6vw,96px) 24px;max-width:1320px;width:100%;margin:0 auto;box-sizing:border-box}
.onboarding-card{position:relative;min-height:min(62svh,560px);border-radius:40px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.onboarding-card[data-tone=cobalt]{background:var(--pb-cobalt);box-shadow:0 10px 0 var(--pb-cobalt-lip)}
.onboarding-card[data-tone=red]{background:var(--pb-red);box-shadow:0 10px 0 var(--pb-red-lip)}
.onboarding-card[data-tone=yellow]{background:var(--pb-yellow);box-shadow:0 10px 0 var(--pb-yellow-lip)}
.onboarding-card .hero{width:min(78%,520px);height:auto;margin-bottom:6%;position:relative;z-index:1}
.onboarding-card[data-tone=yellow] .hero{width:min(62%,420px);margin:0 0 7% 30%}
.onboarding-card .deco{position:absolute;border-radius:10px}
.onboarding-card .deco.a{left:7%;top:7%;width:72px;height:28px;background:var(--pb-yellow);box-shadow:0 5px 0 var(--pb-yellow-lip)}
.onboarding-card .deco.b{right:8%;top:11%;width:38px;height:38px;background:var(--pb-red);box-shadow:0 5px 0 var(--pb-red-lip)}
.onboarding-card .deco.c{right:18%;top:24%;width:28px;height:56px;background:var(--pb-green);box-shadow:0 5px 0 #0F8A50}
.onboarding-card .photo{position:absolute;width:28%;aspect-ratio:.85;object-fit:cover;border-radius:16px;border:6px solid var(--pb-white);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.onboarding-card .photo.p1{left:6%;top:7%;transform:rotate(-8deg)}
.onboarding-card .photo.p2{left:36%;top:4%;aspect-ratio:1.2;width:32%;transform:rotate(4deg)}
.onboarding-card .photo.p3{right:6%;top:10%;transform:rotate(9deg)}
.onboarding-card .scan{width:min(70%,440px);height:auto;margin-bottom:5%;position:relative;z-index:1}
.onboarding-card .page{position:absolute;left:7%;top:8%;width:34%;aspect-ratio:.78;border-radius:18px;background:var(--pb-white);transform:rotate(-6deg);box-shadow:0 8px 0 rgba(23,23,31,.12);padding:6% 5%;box-sizing:border-box;display:flex;flex-direction:column;gap:8%}
.onboarding-card .page b{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--pb-blue);line-height:1}
.onboarding-card .page span{display:block;border-radius:6px;background:var(--pb-paper)}
.onboarding-card .page span:nth-of-type(1){height:14%;width:60%;box-shadow:inset 0 0 0 2px var(--pb-paper-line)}
.onboarding-card .page span:nth-of-type(2){flex:1}
.onboarding-card .page span:nth-of-type(3){height:5%;width:70%}
.onboarding-card .badge{position:absolute;bottom:6%;font-size:clamp(22px,2.6vw,32px);font-weight:800;border-radius:18px;padding:10px 18px;z-index:2}
.onboarding-card .badge.yellow{right:6%;background:var(--pb-yellow);color:var(--pb-ink);box-shadow:0 5px 0 var(--pb-yellow-lip)}
.onboarding-card .badge.blue{left:6%;background:var(--pb-blue);color:var(--pb-white);box-shadow:0 5px 0 var(--pb-blue-lip)}
.onboarding-copy{display:flex;flex-direction:column;gap:14px}
.onboarding-copy h1{margin:0;font-size:clamp(44px,6.4vw,92px);font-weight:800;letter-spacing:-.045em;line-height:.95}
.onboarding-copy p{margin:0;font-size:clamp(18px,1.8vw,24px);line-height:1.35;color:var(--pb-on-night-muted);max-width:30ch}
.onboarding-controls{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.onboarding-dots{display:flex;gap:7px;flex:1;min-width:80px}
.onboarding-dots i{width:9px;height:9px;border-radius:5px;background:var(--pb-night-line);transition:width .24s cubic-bezier(.2,.8,.2,1),background .24s}
.onboarding-dots i[aria-current=true]{width:26px;background:var(--pb-yellow)}
.onboarding .night-button{background:var(--pb-yellow);color:var(--pb-ink);font-size:19px;font-weight:800;border-radius:18px;padding:17px 30px;box-shadow:0 5px 0 var(--pb-yellow-lip);min-height:56px;transition:transform .09s,box-shadow .09s}
.onboarding .night-button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pb-yellow-lip)}
.onboarding .night-link{color:var(--pb-on-night);font-size:16px;font-weight:800;background:none;text-decoration:underline;text-underline-offset:4px;padding:10px 4px}
.onboarding-back{width:44px;height:44px;border-radius:50%;background:var(--pb-night-raised);color:var(--pb-on-night);display:grid;place-items:center}
.onboarding-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.onboarding-slide[data-enter]{animation:pb-enter .24s cubic-bezier(.2,.8,.2,1)}
@keyframes pb-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:759px){
  .onboarding-slide{grid-template-columns:1fr;align-content:start;gap:22px;padding:0 20px 28px}
  .onboarding-card{min-height:min(52svh,440px);border-radius:34px}
  .onboarding-copy h1{font-size:44px}
  .onboarding-controls{margin-top:8px}
  .header{height:72px;padding:0 16px}.brand{font-size:20px;gap:8px}.brand img{width:32px}
  
  .stage{border-radius:28px}
  #viewport{right:62px}
  .layer-control{width:64px}
}
@media(prefers-reduced-motion:reduce){.onboarding-slide[data-enter]{animation:none}}

/* Ordering guide (the only place the official store is named) */
.purchase-dialog{background:var(--pb-white);border:0;border-radius:30px}
.purchase-dialog::backdrop{background:rgba(18,22,51,.62)}
.order-close{background:var(--pb-white);border:0;color:var(--pb-ink)}
.order-hero{background-color:var(--pb-night);background-image:var(--pb-stud-grid);background-size:24px 24px}
.order-orbit{border-color:rgba(255,255,255,.08);box-shadow:none}
.order-shadow{background:rgba(0,0,0,.45)}
.order-brick{--brick:var(--pb-blue)}.order-brick:nth-child(2){--brick:var(--pb-yellow)}.order-brick:nth-child(3){--brick:var(--pb-red)}
.purchase-dialog h2{font-size:30px}
.order-summary{font-size:15px;font-weight:700;color:var(--pb-ink-muted)}
.purchase-dialog [data-order-step]>p{font-size:16px;color:var(--pb-ink)}
.order-file{border:0;background:var(--pb-paper);border-radius:20px}
.order-file svg{fill:var(--pb-white);stroke:var(--pb-blue)}
.order-file div>span{font-size:13px;font-weight:600;color:var(--pb-ink-muted)}
.file-check,.check-card-icon{background:var(--pb-green-soft);color:var(--pb-green-text);font-weight:800}
.purchase-dialog .order-feedback{color:var(--pb-green-text);font-size:14px;font-weight:700}
.purchase-dialog .order-help{font-size:14px;color:var(--pb-ink-muted)}.order-help p{color:var(--pb-ink)}
.order-help summary{font-weight:800;color:var(--pb-ink)}
.purchase-dialog .order-disclosure{font-size:12px;color:var(--pb-ink-muted)}
.order-navigation{background:var(--pb-white);border-top:2px solid var(--pb-paper)}
.order-navigation button{font-size:16px;font-weight:800;color:var(--pb-blue);min-height:44px}
.order-loading{background:var(--pb-paper);border:0;border-radius:18px;color:var(--pb-ink);font-weight:700}
.upload-path li::before{background:var(--pb-blue);color:var(--pb-white);font-weight:800}
.upload-path li:not(:last-child)::after{border-left:2px dashed var(--pb-paper-line)}
.upload-path small{font-size:13px;color:var(--pb-ink-muted)}
.upload-control{border:2px solid var(--pb-ink);border-radius:10px;background:var(--pb-white);color:var(--pb-ink);font-weight:800}
.order-check-card{background:var(--pb-yellow-soft);border-radius:20px}
.order-check-card div>span{font-size:13px;font-weight:700;color:var(--pb-ink-muted)}
.purchase-dialog p.order-subtle{color:var(--pb-ink-muted);font-size:14px}
.order-guide-card{background:var(--pb-paper);border:0;border-radius:20px}
.mini-book{background:var(--pb-blue);box-shadow:-4px 2px 0 var(--pb-blue-lip),3px 4px 0 var(--pb-white),5px 7px 11px rgba(23,23,31,.15);color:var(--pb-white)}
#order-steps i{background:var(--pb-paper-line)}#order-steps i[data-active=true]{background:var(--pb-blue)}#order-steps i[data-complete=true]{background:var(--pb-green)}

/* Account links in the studio header (only when photo capture is offered) */

/* Face pack: an optional switch in the parts panel and its dialog. */
.face-pack-box{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;padding:12px 14px;border-radius:14px;background:var(--pb-yellow-soft);border:1.5px solid var(--pb-yellow)}
.face-pack-text{display:grid;line-height:1.25}.face-pack-text b{font-size:15px}.face-pack-text small{font-size:12.5px;color:#5E6070}
.face-pack-box .inline-button{flex:none;white-space:nowrap}
.face-pack-body tr.face-pack-heading td{padding-top:14px;font-weight:800;font-size:13px;color:#7a5a00;border-top:2px dashed var(--pb-yellow)}
.face-pack-body .part-icon{width:40px;height:34px}
.face-pack-dialog{max-width:620px;width:calc(100vw - 32px);border:0;border-radius:22px;padding:26px 26px 22px;box-shadow:0 24px 60px rgba(18,22,51,.3)}
.face-pack-dialog::backdrop{background:rgba(18,22,51,.45)}
.face-pack-dialog h2{margin:2px 0 10px;font-size:26px;letter-spacing:-.5px;line-height:1.15}
.face-pack-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a5a00}
.face-pack-artist{font-weight:700;color:var(--pb-blue)}
.face-pack-groups{display:grid;gap:12px;margin:14px 0;max-height:min(46vh,420px);overflow:auto;padding-right:4px}
.face-pack-group h3{margin:0 0 6px;font-size:15px}
.face-pack-item{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:var(--pb-paper)}
.face-pack-item+.face-pack-item{margin-top:6px}
.face-pack-item .part-icon{width:44px;height:36px}
.face-pack-item b{display:block;font-size:14px}.face-pack-item span{font-size:12.5px;color:#5E6070}.face-pack-price{font-weight:700;color:#17171F!important}
.face-pack-total-line{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 4px;padding:10px 14px;border-radius:12px;background:var(--pb-blue-soft);font-weight:700}
.face-pack-total-line b{font-size:20px;color:var(--pb-blue)}
.face-pack-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
@keyframes pb-bump{0%{transform:scale(1)}35%{transform:scale(1.12);color:var(--pb-blue)}100%{transform:scale(1)}}
.bump{display:inline-block;animation:pb-bump .55s ease}
@media (prefers-reduced-motion:reduce){.bump{animation:none}.face-pack-switch,.face-pack-switch::after{transition:none}}
.face-pack-dialog h2,.face-pack-kicker{padding-right:48px}.face-pack-dialog .close-button{position:absolute;top:14px;right:14px}
@media (max-width:560px){.face-pack-box{flex-direction:column;align-items:stretch}.face-pack-dialog{padding:20px 16px 16px}.face-pack-dialog h2{font-size:22px}.face-pack-groups{max-height:none;overflow:visible}}

/* Face pieces: added one by one (dist/ui/face-pack.mjs). */
.face-pack-box .face-pack-text{display:flex;flex-direction:column;min-width:0}
.face-pack-item{grid-template-columns:22px 44px 1fr auto;cursor:pointer}
.face-pack-item input{width:18px;height:18px;accent-color:var(--pb-blue)}
.face-pack-item .face-pack-stock-tag{display:block;font-weight:700;color:#2F7A3E}
.face-pack-item.out-of-stock .face-pack-stock-tag{color:#B3541E}
.face-pack-note{margin:12px 0 4px;font-size:14px}