/* Tablet and touch adaptations (iPad, Android tablets, Split View). Loaded last.
   Layout breakpoints elsewhere are width-only: from 1000px the desktop chrome applies and from
   1100px the profile editor uses a fixed-height three-column grid. iPads (1024 portrait, 1133-1366
   landscape) fall into those bands with a coarse pointer, so this file restores touch-sized controls
   and gives touch tablets a two-column profile. Desktop (fine pointer) layouts are unchanged. */

/* Buttons keep whole words: `overflow-wrap:anywhere` let flex rows shrink labels to "Fer/tig". */
.product-host #app :is(a.ghost,button.ghost,.button):not([hidden]){overflow-wrap:break-word}
.profile-field-finish{flex-wrap:wrap;row-gap:10px}
.profile-field-finish small{flex:1 1 14em;min-width:0}
.profile-field-finish>button{flex:none;margin-left:auto;min-width:6.5em;white-space:nowrap}
.profile-inline-fields :is(h2,h3),.profile-owner-name h1,.profile-owner-section-head>span{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.profile-prompt-slot select{max-width:100%;text-overflow:ellipsis}
.product-host #app .admin-suite :is(button,.button,.ghost):not(.as-architecture-node),.admin-suite :is(button,.button,.ghost):not(.as-architecture-node){overflow-wrap:normal;white-space:nowrap}
body #app .panel.product-error .button{overflow-wrap:normal;white-space:nowrap;max-width:100%}
/* The return row is a borderless panel; clipping it to 24px cut the 16px back button into a sliver. */
#app .panel>.page-return{overflow:visible}

/* Admin between the phone drawer (<=760px) and wide desktops: let the lookup toolbar wrap. */
@media(min-width:761px) and (max-width:1100px){
 .admin-suite .as-toolbar{flex-wrap:wrap;row-gap:12px}
 .admin-suite .as-search{flex:1 1 100%;max-width:none}
 .admin-suite .as-search input{min-width:140px}
}

/* Touch: every control gets a 44px hit area. Tiny icon controls keep their look and gain an
   invisible hit area; standard controls grow on tablet-sized touch screens. */
@media(pointer:coarse){
 :where(.profile-prompt-remove,.profile-owner-carousel button,.checkin-close,.event-map-fit,.dialog-close,.event-category-chips button,.hero-selector button,.as-mobile-toggle,.as-icon-button,.nav a.brand,.be-remove){position:relative}
 .profile-prompt-remove::before{content:"";position:absolute;inset:-7px;border-radius:50%}
 .profile-owner-carousel button::before{content:"";position:absolute;inset:-19px 0}
 :is(.checkin-close,.event-map-fit,.dialog-close)::before{content:"";position:absolute;inset:-4px;border-radius:inherit}
 .event-category-chips button::before{content:"";position:absolute;inset:-4px 0}
 .hero-selector button::before{content:"";position:absolute;inset:-4px 0}
 .admin-suite :is(.as-mobile-toggle,.as-icon-button)::before{content:"";position:absolute;inset:-5px}
 .nav a.brand::before{content:"";position:absolute;inset:-2px 0}
 .be-remove::before{content:"";position:absolute;inset:-1px;border-radius:inherit}
 :is(.hero,.business-hero,.section,.public-page) :is(a.button,a.ghost,button.ghost):not(.small){min-height:44px}
 /* Admin (operator console) on any touch screen. */
 .admin-suite :is(button,.button,input:not([type=checkbox]):not([type=radio]):not([type=range]),select){min-height:44px}
 .admin-suite .as-sidebar nav a{min-height:44px}
 .admin-suite :is(.as-mobile-toggle,.as-icon-button){min-width:44px;min-height:44px}
 .admin-suite .as-page-size select{width:84px}
}
@media(pointer:coarse) and (min-width:600px){
 .event-category-chips button{min-height:44px}
 .event-category-chips{padding-top:2px}
 .checkin-experience .checkin-close{width:44px;height:44px;min-height:44px}
 .event-map-fit{width:44px;height:44px;min-height:44px}
 .discovery-dialog .dialog-close{min-width:44px;min-height:44px}
 .discovery-dialog:has(.event-pass-upsell)>.dialog-close{width:44px;height:44px}
 .be-remove{flex-basis:44px;width:44px;height:44px}
 .nav .public-navigation a,.nav a.brand{min-height:44px}
 .hero-selector button{min-height:44px}
}

/* Profile and group editor: the photo is a panel like the others, same width, height, top and frame.
   Stacked layouts (phones, tablet portrait, Split View): the photo spans the panel width like the
   sections below it, with the same inset (phones already do; from 600px the old 520px cap left it floating in the middle). */
@media(min-width:600px) and (max-width:1099px){
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card>.profile-owner-visual .profile-owner-photo{width:calc(100% - 40px);max-width:none;max-height:min(760px,72dvh)}
}

/* Touch tablets in landscape (1100-1439px: every iPad landscape, 1133-1366): a two-column grid
   of equal tiles, photo | details, then prompts. Every tile has the same width (1fr), height (4:5,
   capped to the viewport), top and frame; long sections scroll inside their tile, as on desktop, and
   the photo fills its tile. Three equal columns would leave the prompt selects about 180px wide, so
   labels would truncate again; the compact inner padding keeps the prompt labels readable.
   iPad Pro 13" portrait (1024) uses the stacked layout like the other portrait iPads. */
@media(pointer:coarse) and (min-width:1100px) and (max-width:1439px){
 body:not(.demo-phone) #app :is(.profile-direct-editor,.group-profile-editor):not(.profile-first-setup){width:100%;max-width:1180px}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card:has(>.profile-owner-visual){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;align-items:start;gap:20px;height:auto;overflow:visible;background:transparent;border:0;box-shadow:none}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card>:is(.profile-owner-visual,.profile-owner-content,.profile-owner-prompts){box-sizing:border-box;width:100%;height:auto;aspect-ratio:4/5;min-height:460px;max-height:max(460px,calc(100dvh - 202px));margin:0;position:relative;top:auto;align-self:start;border:1px solid #ecd4dc;border-radius:28px;background:#fff;box-shadow:0 18px 55px #64162b0b}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card>.profile-owner-visual{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:12px;padding:14px;overflow:hidden}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card>.profile-owner-visual .profile-owner-photo{flex:1 1 auto;width:100%;max-width:none;height:auto;min-height:0;max-height:none;aspect-ratio:auto;margin:0}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card>.profile-owner-visual>:not(.profile-owner-photo){flex:none}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card>:is(.profile-owner-content,.profile-owner-prompts){grid-column:2;display:flex;flex-direction:column;gap:14px;padding:14px;overflow:hidden auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#e5c7d1 transparent}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card>.profile-owner-content{grid-row:1}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card>.profile-owner-prompts{grid-column:1;grid-row:2}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) :is(.profile-owner-content,.profile-owner-prompts)>.profile-owner-section{flex:none;margin:0;min-width:0;min-height:0;padding:14px}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-section>.profile-inline-fields{padding-left:0;padding-right:0}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) .profile-owner-card .profile-prompt-slot{padding-left:12px;padding-right:12px}
 :is(.profile-direct-editor:not(.profile-first-setup),.group-profile-editor) :is(.profile-owner-content,.profile-owner-prompts)>.profile-inline-fields{margin:0;width:100%;min-width:0}
 .profile-owner-prompts .profile-inline-fields{margin:12px 0 0;width:100%}
}

/* Desktop chrome on touch tablets: keep floating controls clear of the iPadOS home indicator
   (standalone web app). env() is 0 in the browser, so the 24px desktop offsets stay. */
@media(pointer:coarse) and (min-width:1000px){
 .app-chrome .chrome-messages,.chrome-tools{bottom:max(24px,calc(12px + env(safe-area-inset-bottom,0px)))}
 .chrome-desktop-top{top:max(24px,calc(12px + var(--app-safe-top,env(safe-area-inset-top,0px))))}
}