/* v471/v472: Apple Human Interface Guidelines layout shared by the iOS app (html.native-app), mobile web and the demo phone.
   - v472: the floating Liquid Glass controls (round menu/bell buttons, pill tab bar) keep the v470 look; only their placement follows iOS 26.
   - Concentric corners: a surface inset I from the screen edge gets radius R = 55pt (iPhone display corner) - I; content nested with
     padding P gets R - P. Phone pages have a 16pt side margin, so cards/panels/tiles get 39pt and controls inside them 19pt.
   - Tap targets >= 44pt; hidden scrollbars; a soft glass fade under the status bar. */
:root{--hig-device-r:55px;--hig-margin:16px;--hig-r:calc(var(--hig-device-r) - var(--hig-margin));--hig-pad:20px;--hig-r-inner:calc(var(--hig-r) - var(--hig-pad));
 --hig-bar:rgba(255,248,250,.86)}
@media(max-width:999px){
 /* v472: iOS 26 Liquid Glass placement only; the floating glass controls keep their v470 look (round menu/bell buttons, floating pill tab bar).
    Top controls sit just below the status bar / Dynamic Island; the tab bar floats low like iOS 26 tab bars (Instagram, WhatsApp),
    overlapping the home-indicator inset instead of stacking on top of it. */
 .app-chrome .chrome-mobile-top{top:calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 6px);left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px))}
 .app-chrome .chrome-dock{bottom:max(12px,calc(var(--app-safe-bottom,env(safe-area-inset-bottom,0px)) - 13px))}
 .app-chrome .chrome-mobile-top .chrome-event-context strong{font-size:17px;letter-spacing:-.02em}
 .app-host:has(.app-chrome) #app>:is(.shell,.section){padding-inline:var(--hig-margin)}
 /* Concentric corners for every page-level surface (16pt from the screen edge) */
 #app :is(.panel,.tile,.event-card,.legal-card,.fc-profile,.real-profile-card,.fc-ad-card,.consent-card,.auth-footer,.event-overview,.event-information-main,.event-information-aside,.event-announcements,.event-checkin-banner,.event-map-panel,.event-detail-art,.profile-owner-card,.profile-owner-section,.profile-private-preferences,.profile-editor-form,.settings-navigation,.report-card,.app-workspace,.business-hero-panel,.boost-product,.be-event-banner,.campaign-card,.cta,.visual-break,.notification-item,.discovery-card){border-radius:var(--hig-r)}
 /* Every layer of the discover card stack follows the card: the action gradient behind the buttons used a fixed 24px corner */
 .real-discovery .discovery-deck>.real-actions.real-actions.real-actions,.real-discovery .discovery-layout .real-actions.real-actions.real-actions{border-radius:0 0 var(--hig-r) var(--hig-r)}
 #app :is(.panel,.tile,.event-card,.legal-card,.consent-card,.auth-footer,.event-information-main,.event-information-aside,.event-announcements,.profile-owner-section,.profile-private-preferences,.report-card) :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.button,button.ghost){border-radius:var(--hig-r-inner)}
 #app :is(.tile,.event-card)>:is(.event-art,.event-art-placeholder,img:first-child){border-radius:var(--hig-r-inner)}
 .consent-layer .consent-card{border-radius:var(--hig-r)}
 :is(.checkout-dialog,.welcome-tour,.portal-dialog,.chat-action-sheet,.incoming-likes-dialog,dialog.be-removed-sheet):not(.native-fullscreen){border-radius:var(--hig-r)}
}
/* Demo phone: same concentric card stack */
:is(.sandbox-demo,.hero-phone) :is(.fc-profile,.hero-profile-deck,.discovery-card){border-radius:var(--hig-r)}
:is(.sandbox-demo,.hero-phone) .real-discovery .real-actions.real-actions.real-actions{border-radius:0 0 var(--hig-r) var(--hig-r)}
/* Tap targets >= 44pt for inline footer / legal links */
@media(pointer:coarse),(max-width:999px){:is(.public-footer-options,.public-footer-row,.auth-footer,.consent-card,.site-footer,footer) a{display:inline-flex;align-items:center;min-height:44px}}
.fc-back-chevron{width:24px;height:24px}
/* No visible scrollbars in the app, on phones/tablets and in the demo phone (scrolling unchanged) */
html.native-app *,html.native-app{scrollbar-width:none}html.native-app ::-webkit-scrollbar{display:none;width:0;height:0}
@media(max-width:999px),(pointer:coarse){*,html{scrollbar-width:none}::-webkit-scrollbar{display:none;width:0;height:0}}
:is(.sandbox-demo,.hero-phone,.guided-app) *{scrollbar-width:none}:is(.sandbox-demo,.hero-phone,.guided-app) ::-webkit-scrollbar{display:none}
/* Status bar backdrop: content scrolls underneath the clock/battery area, never through it (app, PWA, phones) */
html.native-app body::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 10px);z-index:49;pointer-events:none;background:linear-gradient(#fff8fadd,#fff8fa99 70%,#fff8fa00);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
@media(display-mode:standalone){body::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 10px);z-index:49;pointer-events:none;background:linear-gradient(#fff8fadd,#fff8fa99 70%,#fff8fa00);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}}
@media(max-width:650px){html.native-app :is(.checkout-dialog,.checkin-experience,.chat-action-sheet.chat-profile-dialog,.incoming-likes-dialog)[open]::before{content:"";position:fixed;left:0;right:0;top:0;height:var(--app-safe-top,env(safe-area-inset-top,0px));z-index:10;pointer-events:none;background:var(--hig-bar)}}
/* v474 radius audit (scripted walk of every demo-phone screen/sheet): remaining surfaces brought onto the concentric rule. */
@media(max-width:999px){
 #app :is(.active-event-banner,.page-actions.panel,.event-detail-nav,.profile-direct-actions,details.discovery-more,nav.editor-switch){border-radius:var(--hig-r)}
 #app .profile-owner-card .profile-owner-section{border-radius:calc(var(--hig-r) - 13px)}
 #app .profile-owner-card .profile-owner-photo{border-radius:calc(var(--hig-r) - 9px)}
 #app details.discovery-more :is(.likes-summary,.discovery-live-action,.discovery-tool,.premium-panel,.boost-product){border-radius:calc(var(--hig-r) - 15px)}
 #app .tile.event-card>:is(.event-art,.event-art-placeholder):first-child{border-radius:calc(var(--hig-r) - 1px) calc(var(--hig-r) - 1px) 0 0}
 .notification-center .notification-empty{border-radius:calc(var(--hig-r) - 17px)}
 #app .event-resource{border-radius:var(--hig-r-inner)}
 #app .page-actions.panel :is(.button,button){border-radius:calc(var(--hig-r) - 16px)!important}
 #app .profile-owner-card :is(input,select):not([type=checkbox]):not([type=radio]){border-radius:calc(var(--hig-r) - 23px)!important}
 #app .real-discovery details.discovery-more button.likes-summary.discovery-likes{border-radius:calc(var(--hig-r) - 15px)!important}
}