/* Pass 9b: plan-to-room hotspots (#amenities #bp). Plan drawing generated by tools/plan-html.py from plan.json. */
.bp-tog .chip,.bp-chip{min-height:44px}
.bp-rooms{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.bp-rooms[hidden],.bp-zl[hidden]{display:none}
.bp-chip{padding:0 14px}

/* photo layer: blurred preview under the photo while a room loads */
.bp-photo{background:var(--lqip,none) center/cover no-repeat}
.bp-photo img{transition:opacity .35s var(--ease)}
.bp-photo.ld img{opacity:0}

/* room caption under the frame (fixed height, no layout shift) */
.bp-cap{margin:12px 0 10px;min-height:2.9em;font-size:14px;line-height:1.45;color:var(--text)}
.bp-cap b{color:var(--paper);font-weight:600;margin-right:4px}

/* plan drawing. Non-scaling strokes break pathLength-based dashes in Chrome (paths drew only part-way), so lines scale with the sheet. */
.bp .bp-lines path{vector-effect:none;stroke-width:.7}
.bp .bp-lines path.fx{stroke-opacity:.45}
.bp .bp-lines .bp-ko{paint-order:stroke;stroke:var(--ink);stroke-width:3px;stroke-linejoin:round;fill:var(--text)}
.bp .bp-lines .bp-dim2{opacity:.6}

/* hotspots */
.bp-zs{fill:transparent;stroke:none;transition:fill .25s var(--ease)}
.bp-z{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.bp-z text{fill:var(--text);font:11px var(--sans);letter-spacing:.02em;pointer-events:none;transition:fill .25s var(--ease)}
.bp-z .bp-rs{font-size:10px}
.bp-z .bp-tiny{font-size:8.2px;letter-spacing:0}  /* Pass 16: 11px or more on screen from 1024 up (fits the 28-unit pantry box) */
@media (hover:hover){.bp-z:hover .bp-zs{fill:rgba(233,240,86,.07)}}
.bp-z[aria-pressed="true"] .bp-zs{fill:rgba(233,240,86,.14);stroke:var(--acid);stroke-width:1.5;vector-effect:non-scaling-stroke}
.bp-z[aria-pressed="true"] text{fill:var(--acid)}
.bp-z:focus-visible .bp-zs{stroke:var(--paper);stroke-width:2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.bp-zoff{cursor:default;pointer-events:none}
.bp-zoff text{fill:var(--muted);opacity:.55}
html.js .bp .bp-zones text{opacity:0;transition:opacity .8s var(--ease) 1.1s,fill .25s var(--ease)}
html.js .bp.in .bp-zones text{opacity:1}
html.js .bp .bp-zoff text{transition:opacity .8s var(--ease) 1.1s}
html.js .bp.in .bp-zoff text{opacity:.55}
.bp.rst .bp-zones text{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .bp-photo img,.bp-zs,.bp-z text{transition:none!important}
  html.js .bp .bp-zones text{opacity:1}
  html.js .bp .bp-zoff text{opacity:.55}
}