/* Right-hand list of doors and their in-scene switches; reuses the glass look of the light controls (lights/*.css). */
.door-panel{position:absolute;right:0;top:0;z-index:9;width:340px;min-width:0;height:auto;
  max-height:calc(100dvh - var(--dock-clear,96px) - 14px);overflow-x:hidden;animation:fp-in-right .34s cubic-bezier(.22,1,.36,1) both;
  --fp-amber:#2f7f6d;--dr-accent:#2f7f6d;--dr-tint:#d5ece4}
.door-panel .fp-chip,.dr-orb{color:#5b6b66;background:linear-gradient(145deg,#fff,#e3e8e6);box-shadow:inset 0 1px #fff,0 4px 12px rgb(24 36 40 / .12);
  transition:color .3s ease,background .3s ease,box-shadow .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1)}
.door-panel[data-state=open] .fp-chip,:is(.dr-row,.dr-hotspot)[data-state=open] .dr-orb{color:#1f5d4f;
  background:radial-gradient(circle at 50% 30%,#fff,var(--dr-tint) 70%);box-shadow:inset 0 1px #fff,0 6px 18px rgb(47 127 109 / .28)}
.door-panel .fp-chip .dr-icon{width:24px;height:24px}

/* Door glyph: the closed leaf swings open with the door. */
.dr-icon{width:20px;height:20px;overflow:visible}
.dr-icon .dr-leaf{fill:rgb(255 255 255 / .7)}
.dr-leaf-closed,.dr-leaf-open{transition:opacity .28s ease,transform .45s cubic-bezier(.22,1,.36,1);transform-origin:5.5px 12px}
.dr-leaf-open{opacity:0;transform:scaleX(1.6)}
[data-state=open] :is(.dr-orb,.fp-chip) .dr-leaf-closed,.dr-bulk-open .dr-leaf-closed{opacity:0;transform:scaleX(.4)}
[data-state=open] :is(.dr-orb,.fp-chip) .dr-leaf-open,.dr-bulk-open .dr-leaf-open{opacity:1;transform:none}
[data-state=open] :is(.dr-orb,.fp-chip) .dr-leaf{fill:var(--dr-tint)}

.door-panel .fl-bulk .dr-icon{width:17px;height:17px}
.dr-bulk-open{color:#1f5d4f}
.dr-bulk-open:not(:disabled){background:linear-gradient(135deg,var(--dr-tint),rgb(255 255 255 / .65));box-shadow:0 6px 16px rgb(47 127 109 / .18)}
.dr-bulk-close{color:var(--glass-secondary)}
.door-panel .fl-overlay:has(.fp-switch[aria-checked=true]) .fl-overlay-icon{color:#1f5d4f;background:var(--dr-tint)}

.dr-row{padding:0}
.dr-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 7px;border:0;border-radius:19px;background:none;
  text-align:left;cursor:pointer;color:inherit}
.dr-orb{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%}
.dr-open:hover .dr-orb{transform:scale(1.07)}
.dr-open:active .dr-orb{transform:scale(.94)}
.dr-row[data-state=closed] .fl-text strong{color:var(--glass-secondary)}
.dr-row .fp-switch{width:44px;height:26px}
.dr-row .fp-switch span{width:20px;height:20px}
.dr-row .fp-switch[aria-checked=true] span{transform:translateX(18px)}
.door-panel :is(button):focus-visible{outline:2px solid #246fb4;outline-offset:2px}

/* In-scene door switches share the pill mechanics of the light switches. */
.dr-hotspot .dr-orb{cursor:pointer;border:0;padding:0;box-shadow:0 0 0 1px rgb(255 255 255 / .85),0 6px 16px rgb(24 36 40 / .26)}
.dr-hotspot[data-state=open] .dr-orb{box-shadow:0 0 0 1px rgb(255 255 255 / .9),0 6px 16px rgb(24 36 40 / .22),0 0 16px 3px rgb(47 127 109 / .35)}
.dr-hotspot:is(:hover,:focus-within) .dr-orb{transform:scale(1.04)}
.dr-hotspot .fx-pill{color:#1f5d4f}
.dr-hotspot .fx-action:hover .fx-verb{color:#2f7f6d}

@media(prefers-reduced-motion:reduce){.door-panel{animation-duration:.01s}.dr-orb,.dr-leaf-closed,.dr-leaf-open{transition-duration:.01s}}