/* One icon-button system for profile, viewer and menus, on every screen size. */
:root{--icon-target:40px;--icon-size:20px;--icon-stroke:2.1;--icon-ink:#17463f}
:is(.topbar .icon-button,.profile .more,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button,#panel .close,#panel.share-sheet .close,#panel.brand-sheet .close,.property-dialog .property-close,#panel .share-option,#panel .share-scroll){width:var(--icon-target);height:var(--icon-target);min-width:var(--icon-target);min-height:var(--icon-target);padding:0;flex:none;border-radius:50%;clip-path:circle(50%);display:grid;place-items:center;color:var(--icon-ink)}
:is(.topbar .icon-button,.profile .more,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button,#panel .close,#panel.share-sheet .close,#panel.brand-sheet .close,#panel .share-option,#panel .share-scroll):focus-visible{outline:none;box-shadow:inset 0 0 0 2px currentColor}

.profile .topbar{height:var(--icon-target)}
.profile .more{right:4px}.profile .featured-more{bottom:12px}
.profile .topbar img{width:var(--icon-size);height:var(--icon-size);object-fit:contain}
/* Brand marks in full-width profile links have their own size, separate from utility controls. */
.profile .main-link .branded,.profile .podcast-caption .branded{--brand-size:32px;--brand-x:0px;--brand-y:0px;position:absolute;width:var(--brand-size);height:var(--brand-size);left:calc(33px - var(--brand-size)/2 + var(--brand-x));top:50%;transform:translateY(calc(-50% + var(--brand-y)));object-fit:contain;pointer-events:none}
/* Round Spotify mark has ~1px transparent inset at this size; round marks
   need slight overshoot next to Instagram's rounded square. WhatsApp's
   tail is excluded from its optical centre. Keep corrections at all widths. */
.profile .podcast-caption .spotify-icon{--brand-size:34px}
.profile .main-link .whatsapp-icon{--brand-size:34px;--brand-x:-.5px;--brand-y:.75px}


.profile .topbar [data-share] img,.profile .more img{visibility:hidden}
.profile .topbar [data-share]:before,.profile .more:before{content:'';position:absolute;width:var(--icon-size);height:var(--icon-size);background:currentColor;pointer-events:none;mask:center/var(--icon-size) var(--icon-size) no-repeat;-webkit-mask:center/var(--icon-size) var(--icon-size) no-repeat}
.profile .topbar [data-share]:before{mask-image:url('assets/control-share.svg?v=optical40');-webkit-mask-image:url('assets/control-share.svg?v=optical40')}
.profile .more:before{mask-image:url('assets/control-more.svg');-webkit-mask-image:url('assets/control-more.svg')}
#listing-viewer .listing-share svg,#listing-viewer .sound-toggle svg,#listing-viewer .video-toggle svg,#listing-viewer .listing-actions svg,#listing-viewer .viewer-navigation svg,#listing-viewer .listing-share img,#listing-viewer .listing-whatsapp-icon{width:var(--icon-size);height:var(--icon-size)}
#listing-viewer .listing-share svg,#listing-viewer .sound-toggle svg,#listing-viewer .video-toggle svg,#listing-viewer .listing-actions svg,#listing-viewer .viewer-navigation svg,#panel .share-scroll svg{fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
#listing-viewer .sound-toggle svg path{stroke-width:var(--icon-stroke)}
#listing-viewer .viewer-close img,#listing-viewer .viewer-close::before{width:var(--icon-size);height:var(--icon-size)}
#listing-viewer .viewer-close::before{mask-size:var(--icon-size) var(--icon-size);-webkit-mask-size:var(--icon-size) var(--icon-size)}
#listing-viewer .listing-counter{top:calc(18px + env(safe-area-inset-top))}
@media(min-width:640px){#listing-viewer .listing-counter{top:calc(var(--desktop-frame-gap) + 18px)}}
#panel .close .exit-icon,.property-dialog .property-close:after{width:var(--icon-size);height:var(--icon-size);background:currentColor;mask:url('assets/control-close.svg?v=optical40') center/var(--icon-size) var(--icon-size) no-repeat;-webkit-mask:url('assets/control-close.svg?v=optical40') center/var(--icon-size) var(--icon-size) no-repeat}
#panel .share-options{gap:16px}
.share-option-item{flex:0 0 60px;width:60px;display:flex;flex-direction:column;align-items:center;gap:8px}
.share-option-label{font-size:12px;line-height:18px;color:#000;text-align:center;white-space:nowrap;pointer-events:none}
#panel .share-option svg{width:var(--icon-target);height:var(--icon-target);pointer-events:none}
#panel .share-scroll svg{width:var(--icon-size);height:var(--icon-size);pointer-events:none}

#panel.share-sheet .share-scroll[hidden]{display:none}
@media(max-width:639px){#panel.share-sheet .share-scroll{display:none}}

/* Optical corrections at a 20px rendered canvas, shared across breakpoints.
   2.1 SVG units at 20/24 scale produce a 1.75px visible utility stroke.
   Preserve branded silhouettes; adjust the individual glyph, never the hit area. */
.profile .topbar [data-share]:before,.profile .more:before,#listing-viewer .viewer-close:before{left:50%;top:50%;transform:translate(-50%,-50%)}
.profile .topbar [data-share]:before{transform:translate(-50%,calc(-50% - .35px))}
#listing-viewer .listing-share svg{transform:translateY(-.35px)}
#listing-viewer .video-toggle svg,#listing-viewer .paused .video-toggle svg{transform:none}
#listing-viewer .video-toggle svg.play-glyph{transform:translateX(.2px)}
#listing-viewer .listing-actions .property-plan svg{stroke-width:2}
#panel .close .exit-icon,.property-dialog .property-close:after{display:block;flex:none}

/* One Glass / Linktree surface for profile cards and viewer controls.
   Canonical Figma link surface I3431:161866;141:968: blur20 -> CSS10.
   Hover is pointer-only; touch uses the same material press state. */
:root{--glass-press-scale:.96;--glass-blur:10px;--glass-transition:background-color 150ms ease,border-color 150ms ease,scale 150ms ease;--circle-fill:rgb(255 255 255 / 10%);--circle-hover:rgb(255 255 255 / 16%);--circle-pressed:rgb(255 255 255 / 20%);--circle-border:transparent;--circle-border-hover:transparent;--circle-highlight:linear-gradient(180deg,rgb(255 255 255 / 10%),rgb(255 255 255 / 0%));--circle-shadow:0 0 8px rgb(0 0 0 / 2%);--chevron-mask:url('assets/back-figma.svg')}
:is(.profile .topbar .icon-button,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button,.profile .links>.glass){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));transition:var(--glass-transition)}
@media(hover:hover) and (pointer:fine){:is(.profile .topbar .icon-button,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button,.profile .links>.glass):not(:disabled):hover:where(html:not([data-input="touch"]) *){background-color:var(--circle-hover);border-color:var(--circle-border-hover)}}
:is(.profile .topbar .icon-button,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button,.profile .links>.glass):not(:disabled):active{background-color:var(--circle-pressed);border-color:var(--circle-border-hover);scale:var(--glass-press-scale)}
#listing-viewer .listing-glass:active{transform:none}
:is(.profile .topbar .icon-button,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button,.profile .links>.glass):focus-visible{outline:none;box-shadow:var(--circle-shadow),inset 0 0 0 2px var(--icon-ink)}
/* Back, previous and next use the identical Figma silhouette, only rotated. */
#listing-viewer .viewer-close:before{mask-image:var(--chevron-mask);-webkit-mask-image:var(--chevron-mask)}
#listing-viewer .viewer-navigation button{position:relative}
#listing-viewer .viewer-navigation button svg{display:none}
#listing-viewer .viewer-navigation button:before{content:'';position:absolute;left:50%;top:50%;width:var(--icon-size);height:var(--icon-size);background:currentColor;mask:var(--chevron-mask) center/contain no-repeat;-webkit-mask:var(--chevron-mask) center/contain no-repeat;transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none}
#listing-viewer .viewer-navigation button:first-child:before{transform:translate(-50%,-50%) rotate(90deg)}
#listing-viewer .viewer-navigation button:disabled{opacity:1;cursor:default}
#listing-viewer .viewer-navigation button:disabled:before{opacity:.3}
@media(prefers-reduced-motion:reduce){:is(.profile .topbar .icon-button,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button){transition:none}:is(.profile .topbar .icon-button,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button):active{scale:1}}

/* More buttons retain their unobtrusive pre-surface treatment. */
.profile .more{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Shared badge typography with Verified; keep the counter on the header centerline. */
.verified-badge,#listing-viewer .listing-counter{font-family:'Bybre Sans',sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0}
#listing-viewer .listing-counter{height:24px;min-width:40px;padding:0 8px;top:calc(20px + env(safe-area-inset-top));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))}
@media(min-width:640px){#listing-viewer .listing-counter{top:calc(var(--desktop-frame-gap) + 20px)}}

/* A masked border preserves the transparent center and Figma's 30% / 0% / 30% stroke. */
#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a{position:relative}
:is(.profile .topbar .icon-button,#listing-viewer .viewer-close,#listing-viewer .listing-share,#listing-viewer .sound-toggle,#listing-viewer .video-toggle,#listing-viewer .listing-actions button,#listing-viewer .listing-actions a,#listing-viewer .viewer-navigation button,#listing-viewer .listing-counter,.profile .links>.glass)::after{content:"";position:absolute;inset:-1px;width:auto;height:auto;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgb(255 255 255 / 30%),rgb(255 255 255 / 0%) 50%,rgb(255 255 255 / 30%));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;transform:none}

/* Linktree social row: unframed 32px glyphs, 8px padding, 48px hit areas. */
.profile .socials{height:48px;gap:0}
.profile .socials a{position:relative;width:48px;height:48px;min-width:48px;min-height:48px;padding:8px;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;clip-path:none;display:grid;place-items:center;color:inherit;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
.profile .socials img,.profile .socials .youtube{width:32px;height:32px}
.profile .socials .youtube{mask-size:32px 32px;-webkit-mask-size:32px 32px}
.profile .socials a:first-child:after,.profile .socials a:last-child:after{inset:8px;width:32px;height:32px;pointer-events:none}
@media(hover:hover) and (pointer:fine){.profile .socials a:hover:where(html:not([data-input="touch"]) *){background:transparent;transform:scale(1.075)}}
@media(prefers-reduced-motion:reduce){.profile .socials a{transition:none}.profile .socials a:hover:where(html:not([data-input="touch"]) *){transform:none}}
@media(min-width:640px){#listing-viewer .viewer-navigation button{--icon-ink:#fff;color:#fff}#listing-viewer .viewer-navigation button:focus-visible{box-shadow:var(--circle-shadow),inset 0 0 0 2px #fff}}
/* Card geometry stays independent from the common glass material. */
.profile .links>.glass{position:relative;--glass-press-scale:1}
.profile .links .main-link:hover:where(html:not([data-input="touch"]) *){background:transparent}
@media(prefers-reduced-motion:reduce){.profile .links>.glass{transition:none}}

/* Desktop card geometry scales from the 393px portrait design.
   Property text uses stable sizes like the profile, balanced with fixed controls.
   Utility controls retain the profile's 40px targets and 20px glyphs at every size.
   Keep profile/mobile tokens and the shared external desktop frame. */
@media(min-width:640px){
 #listing-viewer{--listing-unit:calc(var(--listing-card-width) / 393);--listing-toolbar-inset:calc(var(--listing-unit) * 12)}
 #listing-viewer .listing-info{left:var(--listing-toolbar-inset);right:var(--listing-toolbar-inset);bottom:calc(var(--listing-progress-bottom) + 26px)}
 #listing-viewer .listing-info h2{font-size:18px;line-height:24px;letter-spacing:-.18px;margin-bottom:4px}
 #listing-viewer .listing-location{font-size:16px;line-height:24px;letter-spacing:.16px}
 #listing-viewer .listing-location span{margin:0 6px}
 #listing-viewer .listing-price{font-size:22px;line-height:28px;letter-spacing:-.22px;margin:10px 0}
 #listing-viewer .listing-facts{font-size:16px;line-height:24px;letter-spacing:.16px;gap:4px 16px;margin-bottom:10px}
 #listing-viewer .listing-actions{gap:10px}
 #listing-viewer .listing-counter{height:24px;min-width:var(--icon-target);padding:0 8px;font-size:12px;line-height:18px}
 #listing-viewer .listing-card-header>.listing-counter{top:calc(var(--listing-toolbar-inset) + 8px)}
 #listing-viewer .playback-controls{top:44%;gap:calc(var(--listing-unit) * 14)}
 #listing-viewer .viewer-navigation{display:grid;gap:calc(var(--listing-unit) * 12);right:max(14px,calc(var(--listing-card-left) - var(--icon-target) - var(--listing-unit) * 20))}
 #listing-viewer .swipe-label{top:68%;left:var(--icon-size);right:var(--icon-size);font-size:18px;line-height:24px;letter-spacing:.18px}
 #listing-viewer .swipe-gesture{top:60%;left:calc(50% - 24px);width:48px;height:56px;animation-name:swipe-hand-desktop}
 #listing-viewer .swipe-gesture svg{width:100%;height:100%}
 #listing-viewer .swipe-ring{top:6px;width:32px;height:32px;border-width:2px}
}
@keyframes swipe-hand-desktop{0%,8%{transform:translateY(0);opacity:0}14%,28%{transform:translateY(0);opacity:1}54%,75%{transform:translateY(-120px);opacity:1}86%,100%{transform:translateY(-120px);opacity:0}}
@media(min-width:640px) and (prefers-reduced-motion:reduce){#listing-viewer .swipe-gesture{animation:none;transform:translateY(-24px)}}

/* Shared information/actions/progress rhythm, including short mobile viewports.
   The 2px track centre is 26px below the action row (25px visible clearance).
   Safe-area padding moves the whole group without changing internal gaps. */
#listing-viewer{--listing-content-gap:10px;--listing-action-progress-gap:26px;--listing-progress-bottom:calc(14px + env(safe-area-inset-bottom))}
#listing-viewer .listing-info{bottom:calc(var(--listing-progress-bottom) + var(--listing-action-progress-gap))}
#listing-viewer .listing-price{margin:var(--listing-content-gap) 0}
#listing-viewer .listing-facts{margin-bottom:var(--listing-content-gap)}
#listing-viewer .listing-actions{gap:var(--listing-content-gap)}
#listing-viewer .timeline{bottom:calc(var(--listing-progress-bottom) - 12px);height:24px}
#listing-viewer .timeline input{height:24px}
#listing-viewer .timeline input::-webkit-slider-runnable-track{height:2px}
#listing-viewer .timeline input::-moz-range-track{height:2px}
#listing-viewer .timeline input::-webkit-slider-thumb{width:10px;height:10px;margin-top:-4px}
#listing-viewer .timeline input::-moz-range-thumb{width:10px;height:10px}
@media(min-width:640px){#listing-viewer .timeline{left:var(--listing-toolbar-inset);right:var(--listing-toolbar-inset)}}

/* Mobile navigation is swipe-only; desktop retains the previous/next controls. */
@media(max-width:639px){#listing-viewer .viewer-navigation{display:none}}

/* Property sheets use a plain X in every input mode; retain the 40px hit target. */
.property-dialog .property-close,
.property-dialog .property-close:hover:where(html:not([data-input="touch"]) *),
.property-dialog .property-close:active,
.property-dialog .property-close:focus-visible{background:transparent;border:0;outline:none;box-shadow:none}
.property-dialog .property-close:before{content:none;display:none}
.property-dialog .property-close:focus-visible:after{background:#000}

/* Short landscape windows keep the complete 9:16 card and full-size targets.
   Only the information rhythm changes; the video element stays mounted. */
@media(min-width:640px) and (max-height:500px){
 #listing-viewer{--listing-toolbar-inset:8px;--listing-content-gap:4px;--listing-action-progress-gap:18px;--listing-progress-bottom:12px}
 #listing-viewer .listing-info h2{font-size:14px;line-height:18px;letter-spacing:0;margin-bottom:2px}
 #listing-viewer .listing-location{font-size:11px;line-height:14px;letter-spacing:0}
 #listing-viewer .listing-location span{margin:0 2px}
 #listing-viewer .listing-price{font-size:16px;line-height:20px;letter-spacing:0}
 #listing-viewer .listing-facts{font-size:11px;line-height:14px;letter-spacing:0;gap:2px 8px}
 #listing-viewer .listing-actions{gap:6px}
 #listing-viewer .playback-controls{top:52px;flex-direction:row;gap:8px}
 #listing-viewer .swipe-label{top:66%;left:8px;right:8px;font-size:14px;line-height:18px}
 #listing-viewer .swipe-gesture{top:50%;animation-name:swipe-hand-landscape}
}
@keyframes swipe-hand-landscape{0%,8%{transform:translateY(0);opacity:0}14%,28%{transform:translateY(0);opacity:1}54%,75%{transform:translateY(-56px);opacity:1}86%,100%{transform:translateY(-56px);opacity:0}}
@media(hover:none) and (pointer:coarse) and (orientation:landscape){
 #listing-viewer .viewer-navigation{display:none}
}

/* Sharing arrows track the icon row, with mirrored navigation at either edge. */
.share-carousel{position:relative}
#panel.share-sheet .share-carousel .share-scroll{top:24px;bottom:auto;right:8px;z-index:2;background:#fff;border:1px solid #e0e2d9}
#panel.share-sheet .share-carousel .share-scroll-prev{left:8px;right:auto}
#panel.share-sheet .share-scroll-prev svg{transform:rotate(180deg)}

/* One viewport toolbar on phones, including landscape. Position changes follow
   visualViewport immediately; glass transitions must never animate geometry. */
@media(max-width:639px), (hover:none) and (pointer:coarse) and (max-width:1023px){
 #listing-viewer .listing-card-header{display:none}
 #listing-viewer[open]>button.viewer-close,
 #listing-viewer[open]>button.listing-share,
 #listing-viewer[open]>span.listing-counter{
  position:absolute;display:grid;place-items:center;z-index:12;
  transition-property:background-color,border-color,box-shadow,scale
 }
 #listing-viewer[open]>button.viewer-close{
  top:calc(12px + env(safe-area-inset-top));
  left:calc(12px + env(safe-area-inset-left));right:auto
 }
 #listing-viewer[open]>button.listing-share{
  top:calc(12px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));left:auto
 }
 #listing-viewer[open]>span.listing-counter{
  top:calc(12px + env(safe-area-inset-top) + (var(--icon-target) - 24px)/2);
  left:50%;right:auto;transform:translateX(-50%)
 }
}

/* Profile actions belong to the card and scroll with it in every orientation.
   Browser chrome changes must not turn them into viewport-fixed controls. */
.profile .topbar{position:absolute;z-index:20;pointer-events:none}
.profile .topbar .icon-button{pointer-events:auto;transition-property:background-color,border-color,box-shadow,scale}
@media(max-width:639px){
 .profile .topbar{
  top:calc(var(--profile-edge-gap) + env(safe-area-inset-top));
  left:calc(var(--profile-edge-gap) + env(safe-area-inset-left));
  right:calc(var(--profile-edge-gap) + env(safe-area-inset-right))
 }
}

/* Measured Linktree label and icon geometry, retaining Bybre type and glass. */
.profile .links .main-link,.profile .links .podcast-caption{font-family:'Bybre Sans',sans-serif;font-size:14px;font-weight:500;line-height:1.2;letter-spacing:-.2px;padding-left:65px;padding-right:65px}
.profile .links .link-label{display:block;min-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;letter-spacing:inherit;padding:0;line-height:inherit}
.profile .links .main-link:not(:has(.branded,.listing-thumbs)){padding-left:33px;padding-right:33px}
.profile .links .main-link .branded,.profile .links .podcast-caption .branded{--brand-size:32px;--brand-x:0px;--brand-y:0px}
.profile .links .listing-thumbs{left:17px}
.profile .links .listing-thumbs img{width:32px;height:32px}
.profile .links .more{--icon-target:24px;width:24px;height:24px;min-width:24px;min-height:24px;right:13px;opacity:.5}
.profile .links .more:before{content:none}
.profile .links .more img{visibility:visible;width:3px;height:11px}
.profile .links .featured-more{bottom:22px}
@media(min-width:576px){.profile .links .main-link,.profile .links .podcast-caption{font-size:16px}}
@media(hover:hover) and (pointer:fine){.profile .links .more:hover:where(html:not([data-input="touch"]) *){opacity:1}}