/* One canvas from the first photo to the finished pet. Functional cards keep
   a light surface, so photos, prices and long-form text stay easy to read. */
:root{
  --site-canvas:#193BB5;--site-ink:#FFFFFF;--site-muted:#DCE4FF;
  --site-line:#6A83D3;--site-raised:#2448BB;--site-accent:#FFCE55;
  --site-action:#FFCE55;--site-action-ink:#17171F;--site-action-lip:#BE8D19;
  --site-header:rgba(25,59,181,.94);
  background:var(--site-canvas);
}
body:is(.home,.journey-night,.flow,.legal-page,[data-build-state]),body.flow.night{
  margin:0;min-width:0;background:var(--site-canvas);background-image:none;color:var(--site-ink);
  --pb-on-night:var(--site-ink);--pb-on-night-muted:var(--site-muted);
}
.home{
  --home-ink:var(--site-ink);--home-muted:var(--site-muted);--home-line:var(--site-line);
  --home-surface:var(--site-raised);--home-surface-2:var(--site-raised);
}
.home .home-top{background:var(--site-header)}
.home .hero-line{color:var(--site-accent)}
.home .stage-glow{background:radial-gradient(circle,rgba(144,177,255,.24),transparent 68%)}
.home .sample-pages{background:radial-gradient(circle,var(--site-raised),transparent 72%)}
.home .step-num{background:var(--site-ink);color:var(--site-canvas)}
.home .order-step{--home-ink:var(--pb-ink);--home-muted:var(--pb-ink-muted);--home-surface:#F1F3FA;color:var(--pb-ink)}
.home .order-step .step-num{background:var(--pb-blue);color:white}
.journey-night .explain-kicker{color:var(--site-accent)}
.journey-night .explain-progress i{background:var(--site-line)}
.journey-night .explain-progress i.on{background:var(--site-accent)}
.journey-night .explain-visual{background:var(--site-raised)}
body.flow .flow-lead,.legal-page .legal-version{color:var(--site-muted)}
body.flow :is(.top-link,.round){background:var(--site-raised);color:var(--site-ink)}
body.flow .empty-state{background:var(--site-raised);box-shadow:none}
body.flow .history li{background:var(--site-raised)}
body.flow .history .badge{color:var(--pb-ink)}
.legal-page .legal-index a:hover{background:var(--site-raised)}
.legal-page .legal-index>a[aria-current=page]{background:var(--site-ink);color:var(--site-canvas)}
.legal-page :is(.legal-copy,.legal-summary){color:var(--pb-ink)}
body:is(.home,.journey-night,.flow,.legal-page,[data-build-state]) .site-footer{color:var(--site-muted);border-top-color:var(--site-line)}
body:is(.home,.journey-night,.flow,.legal-page,[data-build-state]) :focus-visible{outline-color:var(--site-accent)}
body :is(.card,.journey-card,.legal-copy,.legal-summary,.order-step,.library-card,dialog) :focus-visible{outline-color:var(--pb-blue)}
/* The studio shares the canvas; the model and parts retain neutral surfaces. */
body[data-build-state] .stage{background:#F1F3FA}
/* Responsive foundations: let grid/flex children shrink and long names wrap. */
:is(.journey-top,.flow-top,.home-top){flex-wrap:wrap;row-gap:12px}
:is(.journey-top,.flow-top,.home-top) nav{flex-wrap:wrap}
:is(.journey-main,.flow-main,.legal-main) h1{overflow-wrap:anywhere}
:is(.capture,.stage-card,.explain-grid)>*{min-width:0}
.flow-top .brand{min-width:0}
.flow-top nav a,.journey-top nav a:not(.pb-button):not(.pb-button){min-height:44px;display:inline-flex;align-items:center}
.pet-head h1,.history li>span:first-child{overflow-wrap:anywhere;min-width:0}
.history li{flex-wrap:wrap}
.pet-grid{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.model-stage{min-height:420px}
@media(max-width:820px){.model-stage{min-height:390px}}
@media(max-width:520px){
  .journey-main h1{font-size:clamp(36px,11vw,45px)}
  .journey-card{padding:22px 20px}
  .home .home-hero h1{font-size:clamp(42px,12.8vw,62px)}
  .home .cost-card{gap:4px 8px;padding:14px 12px}
  .home .cost-card .cost-price{font-size:18px}
  .flow-top{gap:10px}.flow-top nav{margin-left:auto}
  .flow-top .brand{font-size:20px}
  .flow-top .top-link{padding:10px;font-size:14px}
  .legal-page .legal-index a{background:var(--site-raised)}
  .legal-page .journey-top nav{gap:18px}
  .model-stage{min-height:360px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

.purchase-dialog .order-loading{display:block;padding:0;background:transparent}
.purchase-dialog .order-loading-status{display:block}
body.flow .email-updates{color:var(--pb-ink)}

.home :is(.stage-status,.animals-label,.animal,.sample-fallback){color:var(--site-muted)}
.home .animal[aria-checked=true]{color:var(--site-ink)}
.home .animal[aria-checked=true] .animal-art{box-shadow:inset 0 0 0 3px var(--site-accent)}
.home :is(.animal-art,.hero-stage input[type=range]){outline-offset:4px}
.purchase-dialog #order-loading-status{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;white-space:normal}
.purchase-dialog[data-order-state=loading]:has(.waiting:not([hidden])) .order-hero{display:none}
.making-visual{background:var(--site-raised)}
.animal-option{color:var(--pb-ink)}
body.flow .pet-tile{color:var(--pb-ink)}

@media print{
  :root{--site-canvas:#FFFFFF;--site-ink:#17171F;--site-muted:#5E6070;--site-line:#DCE1EE;--site-raised:#F1F3FA}
}
:is(.journey-top,.flow-top,.home-top) .brand,.quiet-link,.explain-back,.legal-index a{min-height:44px}
.legal-index a{display:flex;align-items:center}

/* White cards on the blue canvas need dark text (4 Nov 2026: My pets names were white on white). */
body .library-card{color:var(--pb-ink,#16192b)}
/* Studio surfaces are white; their text must be dark (4 Nov 2026: parts list was white on white). */
body[data-build-state] :is(.stage,.stock-card,.stock-switch,.parts-panel,.parts-footer,.spare-options,.face-pack-box,dialog){color:var(--pb-ink,#17171F)}
/* Keep the parts list usable when stock and face-pack cards share the sidebar (4 Nov 2026: list squeezed to 44px). */
/* Invoice rows sit on the blue canvas; give them the white card their dark text expects. */
body .invoice-row{background:var(--pb-white,#fff);color:var(--pb-ink,#17171F);border-radius:18px}