/* BLUEPRINT MODE — "Make it yours" (2026-09-28). See showcase-blueprint.js. */
#bpPill{position:fixed;left:18px;bottom:calc(var(--foot-h,54px) + 18px);z-index:120;display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px 0 8px;border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.55);background:rgba(10,14,18,.82);color:#fff;cursor:pointer;font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 36px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s}
#bpPill:hover{transform:translateY(-2px);background:rgba(var(--accent-rgb),.16)}
#bpPill i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#0a0a0a;font-style:normal;font-size:13px}
/* on: the same button, same place, solid champagne — the way back is where the way in was */
body.bp-on #bpPill{background:var(--accent);color:#0a0a0a;border-color:var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.18),0 12px 36px rgba(0,0,0,.45)}
body.bp-on #bpPill i{background:#0a0a0a;color:var(--accent)}
#bpPanel header{position:relative;padding-right:44px}
#bpPanel .bp-x{position:absolute;top:-4px;right:-6px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:#fff;font:400 18px/1 var(--sans);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
#bpPanel .bp-x:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.14);color:var(--accent)}

#bpLayer{position:fixed;inset:0;z-index:110;pointer-events:none}
body.bp-on #app{filter:saturate(.75)}
.bp-box{position:fixed;border:1px dashed rgba(var(--accent-rgb),.75);border-radius:12px;box-shadow:0 0 0 9999px rgba(3,6,9,.0),inset 0 0 0 1px rgba(var(--accent-rgb),.12);
  animation:bpIn .5s cubic-bezier(.16,1,.3,1) both}
.bp-mark{position:fixed;display:inline-flex;align-items:center;gap:8px;transform:translate(-4px,-4px);animation:bpIn .5s calc(var(--i) * 50ms) cubic-bezier(.16,1,.3,1) both}
.bp-mark b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#0a0a0a;font:600 11px var(--mono);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.25),0 4px 14px rgba(0,0,0,.5)}
.bp-mark em{font:600 9px var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:5px 9px;border-radius:10px;background:rgba(10,14,18,.86);border:1px solid rgba(var(--accent-rgb),.4);white-space:nowrap}
@keyframes bpIn{from{opacity:0;transform:translate(-4px,2px) scale(.96)}to{opacity:1}}

#bpPanel{position:fixed;left:16px;top:calc(var(--sales-header-h,110px) + 8px);bottom:calc(var(--foot-h,54px) + 74px);width:min(340px,calc(100vw - 32px));z-index:115;overflow:auto;scrollbar-width:none;
  padding:20px 20px 24px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(12,16,20,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);color:#fff;animation:bpPanel .55s cubic-bezier(.16,1,.3,1) both}
#bpPanel::-webkit-scrollbar{display:none}
@keyframes bpPanel{from{opacity:0;transform:translateX(-14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
#bpPanel header small{display:block;font:600 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
#bpPanel header b{display:block;margin-top:6px;font:400 34px/1 'Bodoni 72',Didot,Georgia,serif;letter-spacing:-.02em;font-weight:400}
#bpPanel header b em{font-style:italic;color:var(--accent-soft,#eef2f6)}
#bpPanel header p{margin:10px 0 0;font:400 13px/1.55 var(--sans);color:rgba(255,255,255,.7)}
#bpPanel h4{margin:22px 0 10px;font:600 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#fff;padding-bottom:8px;border-bottom:1px solid rgba(var(--accent-rgb),.35)}
.bp-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.bp-list li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03)}
.bp-list li i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#0a0a0a;font:600 11px var(--mono);font-style:normal}
.bp-list b,.bp-more b{display:block;font:400 17px/1.15 'Bodoni 72',Didot,Georgia,serif;font-weight:400}
.bp-list span,.bp-more span{display:block;margin-top:4px;font:400 12.5px/1.5 var(--sans);color:rgba(255,255,255,.72)}
.bp-list small,.bp-more small{display:block;margin-top:6px;font:500 9px var(--mono);letter-spacing:.1em;color:var(--accent)}
.bp-list .bp-empty{display:block;font:400 12.5px var(--sans);color:rgba(255,255,255,.6)}
.bp-more{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bp-together{padding:14px;border:1px dashed rgba(var(--accent-rgb),.45);border-radius:14px}
.bp-people{display:flex;margin-bottom:10px}
.bp-people span{display:grid;place-items:center;width:34px;height:34px;margin-left:-8px;border-radius:50%;border:2px solid #0c1014;background:rgba(255,255,255,.12);font:600 11px var(--mono);color:#fff}
.bp-people span:first-child{margin-left:0}
.bp-people .host{width:auto;padding:0 12px;border-radius:17px;background:var(--accent);color:#0a0a0a}
.bp-together p{margin:0;font:400 12.5px/1.55 var(--sans);color:rgba(255,255,255,.78)}
.bp-illus{display:block;margin-top:8px;font:400 11px var(--sans);font-style:italic;color:rgba(255,255,255,.5)}
.bp-go{display:flex;justify-content:center;align-items:center;min-height:46px;margin-top:20px;border-radius:999px;background:var(--accent);color:#0a0a0a;text-decoration:none;font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase}
@media (max-width:760px){
  #bpPanel{top:auto;bottom:calc(var(--foot-h,54px) + 70px);max-height:58vh}
  .bp-mark em{display:none}
}
@media (prefers-reduced-motion:reduce){.bp-box,.bp-mark,#bpPanel{animation:none}}
/* PHONE (gate 6, 2026-09-29): bottom-left, the pill sat ON the dock — a tap on Overview, Explore
   or Media opened the blueprint instead. Below 900px it is the icon alone, right edge, above the
   dock; the label stays for screen readers. */
@media (max-width:899px){
  #bpPill{left:auto;right:10px;bottom:calc(var(--foot-h,54px) + var(--hud-h,62px) + 38px);width:40px;min-height:40px;padding:0;gap:0;justify-content:center}
  #bpPill span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}