/* Instagram playback controls, using Bybre's shared glass surface. */
#listing-viewer .playback-controls{inset:0;display:block;transform:none;pointer-events:none;opacity:1}
#listing-viewer .playback-controls :is(.video-toggle,.sound-toggle){position:absolute;color:#fff;--icon-ink:#fff;opacity:0;pointer-events:none;transition:opacity .2s ease,background-color .15s ease,scale .15s ease}
#listing-viewer .playback-controls .video-toggle{--icon-target:56px;--icon-size:20px;left:50%;top:48%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:56px;height:56px;min-width:56px;min-height:56px}
#listing-viewer .playback-controls .sound-toggle{--icon-target:36px;--icon-size:12px;left:50%;top:calc(48% - 62px);right:auto;bottom:auto;transform:translate(-50%,-50%);width:36px;height:36px;min-width:36px;min-height:36px}
#listing-viewer .playback-controls :is(.video-toggle,.sound-toggle):active{transform:translate(-50%,-50%)}
#listing-viewer .playback-controls .video-toggle svg{width:20px;height:20px;fill:currentColor;stroke:none;transform:none}
#listing-viewer .playback-controls .sound-toggle svg{width:12px;height:12px;fill:currentColor;stroke:none}
#listing-viewer .sound-toggle svg .sound-off{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
#listing-viewer :is(.controls-visible,.player-paused,.playback-blocked,.video-loading) .playback-controls :is(.video-toggle,.sound-toggle),
#listing-viewer .playback-controls :is(.video-toggle,.sound-toggle):focus-visible{opacity:1;pointer-events:auto}
#listing-viewer .playback-controls .video-loading-label{position:absolute;top:calc(48% + 40px);left:50%;transform:translateX(-50%);white-space:nowrap}
#listing-viewer .listing-action-rail,.timeline-time{display:none}
/* Desktop controls and the external action stack belong to each individual card. */
#listing-viewer[data-desktop-glass]{--listing-card-width:min(calc((var(--listing-viewport-height,100dvh) - 2 * var(--desktop-frame-gap)) * 9 / 16),calc(100vw - 168px))}
#listing-viewer[data-desktop-glass] .listing-slide{overflow:visible}
#listing-viewer[data-desktop-glass] .listing-slide>video,
#listing-viewer[data-desktop-glass] .listing-shade{border-radius:inherit}
#listing-viewer[data-desktop-glass][open]>button.listing-share{display:none}
#listing-viewer[data-desktop-glass] .listing-action-rail{position:absolute;left:calc(100% + 16px);bottom:16px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:6}
#listing-viewer[data-desktop-glass] .listing-action-rail .listing-actions{flex-direction:column;gap:16px}
#listing-viewer[data-desktop-glass] .listing-action-rail .listing-share{position:relative;top:auto;right:auto;left:auto;bottom:auto}
#listing-viewer[data-desktop-glass] .listing-action-rail :is(button,a){color:#fff;--icon-ink:#fff}
#listing-viewer[data-desktop-glass] .playback-controls .video-toggle{--icon-target:72px;--icon-size:24px;width:72px;height:72px;min-width:72px;min-height:72px;top:50%}
#listing-viewer[data-desktop-glass] .playback-controls .video-toggle svg{width:24px;height:24px}
#listing-viewer[data-desktop-glass] .playback-controls .sound-toggle{--icon-target:28px;width:28px;height:28px;min-width:28px;min-height:28px;left:auto;top:auto;right:16px;bottom:16px;transform:none;opacity:1;pointer-events:auto}
#listing-viewer[data-desktop-glass] .playback-controls .sound-toggle:active{transform:none}
#listing-viewer[data-desktop-glass] .playback-controls .video-loading-label{top:calc(50% + 48px)}
/* Clip the progress layer against the full card, not a shallow rounded strip. */
#listing-viewer .listing-progress-clip,#listing-viewer .listing-volume{display:contents}
#listing-viewer .listing-volume-input{display:none}
#listing-viewer[data-desktop-glass] .listing-info{left:24px;right:60px;bottom:24px;text-align:left}
#listing-viewer[data-desktop-glass] .listing-info .listing-actions:empty{display:none}
#listing-viewer[data-desktop-glass] .listing-facts{justify-content:flex-start;gap:4px 12px;margin-bottom:0}
#listing-viewer[data-desktop-glass] .listing-progress-clip{display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:5}
#listing-viewer[data-desktop-glass] .timeline{--progress:0%;left:0;right:0;bottom:0;height:16px;border-radius:0;overflow:visible;pointer-events:auto}
#listing-viewer[data-desktop-glass] .timeline::before{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(to right,#fff var(--progress),#ffffff66 var(--progress));box-shadow:inset 0 1px 0 #ffffff30;backdrop-filter:blur(10px);pointer-events:none;transition:height .15s ease}
#listing-viewer[data-desktop-glass] .timeline::after{content:'';position:absolute;left:clamp(6px,var(--progress),calc(100% - 6px));bottom:0;width:12px;height:12px;border-radius:50%;background:white;transform:translateX(-50%);opacity:0;pointer-events:none}
#listing-viewer[data-desktop-glass] .timeline input{position:absolute;inset:0;width:100%;height:16px;margin:0;padding:0;opacity:0;transform:none;cursor:pointer}
#listing-viewer[data-desktop-glass] .timeline:focus-within::before{height:8px}
#listing-viewer[data-desktop-glass] .timeline:focus-within::after{opacity:1}
#listing-viewer[data-desktop-glass] .timeline-time{display:block;position:absolute;bottom:20px;right:60px;color:#fff;font:12px/16px 'Bybre Sans',sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #000;opacity:0;pointer-events:none}
#listing-viewer[data-desktop-glass] .timeline:focus-within .timeline-time{opacity:1}
/* Instagram: 28px sound control expands upward to a 124px pill, with an 80px track. */
#listing-viewer[data-desktop-glass] .listing-volume{display:block;position:absolute;right:16px;bottom:16px;width:28px;height:28px;min-width:0;min-height:0;padding:0;border-radius:16px;overflow:hidden;pointer-events:auto;transition:height .3s ease,background-color .3s ease;--volume:0%}
#listing-viewer[data-desktop-glass] .listing-volume .sound-toggle{left:0;right:0;bottom:0;top:auto;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:2}
#listing-viewer[data-desktop-glass] .listing-volume .sound-toggle::before,#listing-viewer[data-desktop-glass] .listing-volume .sound-toggle::after{content:none}
#listing-viewer[data-desktop-glass] .listing-volume-input{display:block;position:absolute;left:5px;bottom:32px;width:16px;height:80px;margin:0;padding:0;border:0;background:transparent;writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease;touch-action:none}
#listing-viewer[data-desktop-glass] .listing-volume-input::-webkit-slider-runnable-track{width:8px;border-radius:4px;background:linear-gradient(to top,#fff var(--volume),#ffffff4d var(--volume))}
#listing-viewer[data-desktop-glass] .listing-volume-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-left:-4px;border-radius:50%;background:#fff;border:0}
#listing-viewer[data-desktop-glass] .listing-volume-input::-moz-range-track{width:8px;height:80px;border-radius:4px;background:linear-gradient(to top,#fff var(--volume),#ffffff4d var(--volume))}
#listing-viewer[data-desktop-glass] .listing-volume-input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}
#listing-viewer[data-desktop-glass] .listing-volume:has(:focus-visible):not(.volume-dismissed){height:124px}
#listing-viewer[data-desktop-glass] .listing-volume:has(:focus-visible):not(.volume-dismissed) .listing-volume-input{opacity:1;visibility:visible}
@media(hover:hover) and (pointer:fine){
 #listing-viewer[data-desktop-glass] .timeline:hover::before{height:8px}
 #listing-viewer[data-desktop-glass] .timeline:hover::after,#listing-viewer[data-desktop-glass] .timeline:hover .timeline-time{opacity:1}
 #listing-viewer[data-desktop-glass] .listing-volume:hover:not(.volume-dismissed){height:124px}
 #listing-viewer[data-desktop-glass] .listing-volume:hover:not(.volume-dismissed) .listing-volume-input{opacity:1;visibility:visible}
}
@media(min-width:640px) and (max-height:500px){
 #listing-viewer[data-desktop-glass] .listing-info{left:12px;right:48px;bottom:20px}
 #listing-viewer[data-desktop-glass] .listing-facts{gap:2px 8px}
}
@media(prefers-reduced-motion:reduce){#listing-viewer .playback-controls :is(.video-toggle,.sound-toggle),#listing-viewer .listing-volume,#listing-viewer .listing-volume-input,#listing-viewer .timeline::before{transition:none}}

#listing-viewer[data-desktop-glass] .listing-volume:active{transform:none;scale:1}

#listing-viewer[data-desktop-glass] .listing-volume-input:focus-visible{outline:none}
#listing-viewer[data-desktop-glass] .listing-volume:has(.listing-volume-input:focus-visible){box-shadow:inset 0 0 0 1px #fff}
#listing-viewer[data-desktop-glass] .timeline-time{display:none}
/* Keep the expanding control on the same Figma glass surface as the other controls. */
#listing-viewer[data-desktop-glass] .listing-volume{background-color:var(--circle-fill);background-image:var(--circle-highlight);border:1px solid var(--circle-border);box-shadow:var(--circle-shadow);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
#listing-viewer[data-desktop-glass] .listing-volume::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(180deg,#ffffff4d,#ffffff00 50%,#ffffff4d);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:xor;pointer-events:none}
@media(hover:hover) and (pointer:fine){#listing-viewer[data-desktop-glass] .listing-volume:hover{background-color:var(--circle-hover)}}

#listing-viewer[data-desktop-glass] .listing-counter{color:#fff}

/* Shared in-video material: Instagram's rgba(48,48,48,.4), with Bybre blur
   and edge highlights. Phone controls use the same material in both orientations;
   exterior desktop controls retain their existing light glass. */
#listing-viewer:not([data-desktop-glass]),
#listing-viewer[data-desktop-glass] .playback-controls,
#listing-viewer[data-desktop-glass] .listing-card-header .listing-counter{
 --circle-fill:rgb(48 48 48 / 40%);
 --circle-hover:rgb(48 48 48 / 40%);
 --circle-pressed:rgb(48 48 48 / 40%);
 --circle-highlight:linear-gradient(180deg,rgb(255 255 255 / 4%),rgb(255 255 255 / 0%));
 --circle-shadow:0 1px 4px rgb(0 0 0 / 8%);
}
#listing-viewer:not([data-desktop-glass]) :is(.viewer-close,.listing-share,.listing-counter,.sound-toggle,.video-toggle,.listing-actions button,.listing-actions a){color:#fff;--icon-ink:#fff}
#listing-viewer .listing-counter{text-shadow:0 1px 2px rgb(0 0 0 / 20%)}
/* The denser floor-plan silhouette needs a lighter optical stroke at 20px. */
#listing-viewer[data-desktop-glass] .listing-actions .property-plan svg{stroke-width:1.75}

/* Desktop details reveal on entry/click/hover; pointer presence keeps them visible. */
#listing-viewer[data-desktop-glass] .listing-slide :is(.listing-info,.listing-card-header .listing-counter){opacity:0;transition:opacity .35s ease;pointer-events:none}
#listing-viewer[data-desktop-glass] .listing-slide.details-visible :is(.listing-info,.listing-card-header .listing-counter),
#listing-viewer[data-desktop-glass] .listing-info:has(.video-error:not([hidden])){opacity:1}
/* Playback feedback requires an explicit play/pause action, never autoplay. */
#listing-viewer[data-desktop-glass] .listing-slide .playback-controls .video-toggle{opacity:0;pointer-events:none}
#listing-viewer[data-desktop-glass] .listing-slide.desktop-play-feedback .playback-controls .video-toggle,
#listing-viewer[data-desktop-glass] .listing-slide.desktop-play-engaged.player-paused .playback-controls .video-toggle,
#listing-viewer[data-desktop-glass] .listing-slide .playback-controls .video-toggle:focus-visible{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){#listing-viewer[data-desktop-glass] .listing-slide :is(.listing-info,.listing-card-header .listing-counter){transition:none}}

/* Phone landscape follows the profile's width, not desktop's height fitting.
   The complete 9:16 card remains available through normal vertical scrolling. */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (min-width:640px) and (max-width:1023px){
 #listing-viewer:not([data-desktop-glass]){
  --listing-card-width:min(580px,calc(100vw - 2 * var(--desktop-frame-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)));
  --listing-card-top:var(--desktop-frame-gap);
  --listing-toolbar-inset:28px;
  --listing-content-gap:10px;
  --listing-action-progress-gap:26px;
  --listing-progress-bottom:14px;
 }
 #listing-viewer .listing-feed{scroll-snap-type:y proximity}
 #listing-viewer .listing-slide{overflow:clip;scroll-snap-stop:normal}
 #listing-viewer[open]>button.viewer-close,
 #listing-viewer[open]>button.listing-share,
 #listing-viewer[open]>span.listing-counter{display:none}
 #listing-viewer .listing-card-header{display:block}
 #listing-viewer .listing-info{left:28px;right:28px}
 #listing-viewer .listing-info h2{font-size:18px;line-height:24px;margin-bottom:4px}
 #listing-viewer .listing-location{font-size:16px;line-height:24px}
 #listing-viewer .listing-price{font-size:22px;line-height:28px}
 #listing-viewer .listing-facts{font-size:16px;line-height:24px;gap:4px 12px}
 #listing-viewer .listing-actions{gap:var(--listing-content-gap)}
 /* Feedback remains reachable while scrolling within the tall video. */
 #listing-viewer .playback-controls{position:sticky;inset:auto;top:0;width:100%;height:var(--listing-viewport-height,100dvh)}
 #listing-viewer .swipe-intro{height:calc(var(--listing-viewport-height,100dvh) - 2 * var(--desktop-frame-gap))}
}