/* Homepage-only transparent expandable dock. Existing OFF/ON and SIZE logic is reused. */
#portfolioControlsDock[hidden] { display:none!important; }
#portfolioControlsDock {
  position:fixed; right:clamp(18px,3.5vw,52px); bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:100; width:172px; font-size:10px; line-height:1.2;
  color:var(--cms-home-text,#F5F2EC); font-family:var(--font-body,Arial,sans-serif);
}
body.home-light #portfolioControlsDock {color:#191918;}
#portfolioControlsToggle {
  display:flex; width:100%; align-items:center; justify-content:space-between;
  border:1px solid currentColor; border-color:color-mix(in srgb,currentColor 34%,transparent);
  background:rgba(25,25,24,.08); padding:11px 12px; border-radius:9px;
  color:inherit!important; cursor:pointer; font:inherit; letter-spacing:.13em;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
#portfolioControlsDock .dock-icon {font-size:18px; font-weight:300; line-height:10px; transition:transform .18s ease;}
#portfolioControlsDock.is-open .dock-icon {transform:rotate(45deg);}
#portfolioControlsPanel {
  position:absolute; bottom:calc(100% + 9px); right:0; width:220px;
  padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(26,26,26,.28); box-shadow:0 10px 35px rgba(0,0,0,.10);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; visibility:hidden; transform:translateY(7px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
body.home-light #portfolioControlsPanel {background:rgba(245,242,236,.73);border-color:rgba(25,25,24,.15);}
#portfolioControlsDock.is-open #portfolioControlsPanel {opacity:1; visibility:visible; transform:translateY(0);}
#portfolioControlsDock .dock-panel-title {font-size:9px;letter-spacing:.13em;opacity:.7;margin-bottom:17px;}
#portfolioControlsDock .dock-controls {display:flex;flex-direction:column;gap:19px;}
/* Override historical position/layout rules without changing the two original controllers. */
#portfolioControlsDock #homeThemeControl,
#portfolioControlsDock #nyRevealControl,
body.home-photo #portfolioControlsDock #homeThemeControl,
body.home-photo #portfolioControlsDock #nyRevealControl {
  position:relative!important; display:flex!important; top:auto!important;right:auto!important;
  bottom:auto!important;left:auto!important; width:100%!important;
  margin:0!important;padding:0!important; transform:none!important;
  border:0!important; background:transparent!important;box-shadow:none!important;
  backdrop-filter:none!important;color:inherit!important;z-index:auto!important;
}
#portfolioControlsDock #homeThemeControl {flex-direction:column!important;align-items:stretch!important;gap:5px!important;}
#portfolioControlsDock #homeThemeControl::before {display:none!important;content:none!important;}
#portfolioControlsDock #homeThemeControl .theme-labels {width:100%!important;}
#portfolioControlsDock #homeThemeControl .theme-track {width:100%!important;}
#portfolioControlsDock #nyRevealControl {flex-direction:column!important;}
#portfolioControlsDock #nyRevealControl label {width:100%;color:inherit!important;}
#portfolioControlsDock #nyRevealSize {width:100%!important;accent-color:currentColor!important;}
#portfolioControlsDock #nyRevealControl[hidden] {display:flex!important;}
/* Mobile: central position, compact one-button footprint, tap to open. */
@media(max-width:780px) {
  #portfolioControlsDock {right:50%;transform:translateX(50%);width:122px;bottom:calc(13px + env(safe-area-inset-bottom,0px));}
  #portfolioControlsToggle {padding:9px 11px;font-size:9px;}
  #portfolioControlsPanel {right:50%;transform:translate(50%,7px);width:min(250px,calc(100vw - 28px));}
  #portfolioControlsDock.is-open #portfolioControlsPanel {transform:translate(50%,0);}
  #portfolioControlsDock #nyRevealControl {display:flex!important;}
}
@media(prefers-reduced-motion:reduce) {#portfolioControlsDock * {transition:none!important;}}

/* Hover bridge: keep the dock hovered while crossing the visual gap
   between DISPLAY and the floating settings panel. */
#portfolioControlsPanel::before {
  content:"";
  position:absolute;
  height:14px;
  left:0;
  right:0;
  top:100%;
  background:transparent;
  pointer-events:auto;
}