/* The web half of the app-shell inset contract (docs/apps/kailash-rn-2026-10/PLAN-PLAYER.md §3-§4).
   The Android shell publishes --wyn-safe-top/right/bottom/left (px), html[data-wyn-app] and html[data-wyn-kb].
   Every inset reads max(env(), var(--wyn-safe-*, 0px)): without the shell the variables are unset, so each value
   below equals the rule it overrides (same selector, same media, loaded later). Loaded before lobby-v2.css, so the
   Lobby v2 brand keeps its own overrides. The top inset is additive (#app padding, sticky tops + T, a status-bar
   scrim) and never changes the height of the masthead, the Updates bar or the welcome strip. */
:root{
 --wyn-inset-top:max(env(safe-area-inset-top,0px),var(--wyn-safe-top,0px));
 --wyn-inset-right:max(env(safe-area-inset-right,0px),var(--wyn-safe-right,0px));
 --wyn-inset-bottom:max(env(safe-area-inset-bottom,0px),var(--wyn-safe-bottom,0px));
 --wyn-inset-bottom-max:max(env(safe-area-max-inset-bottom,env(safe-area-inset-bottom,0px)),var(--wyn-safe-bottom,0px));
 --wyn-inset-left:max(env(safe-area-inset-left,0px),var(--wyn-safe-left,0px))
}

/* Top: the page starts below the status bar; sticky chrome sticks below it; the scrim paints the status bar. */
#app{padding-top:var(--wyn-inset-top);padding-left:var(--wyn-inset-left);padding-right:var(--wyn-inset-right)}
#app::before{content:"";position:fixed;z-index:135;top:0;left:0;right:0;height:var(--wyn-inset-top);background:var(--wyn-scrim,var(--surface-2));pointer-events:none}
/* Device F4: while the Updates bar (.tenant-news) is what sits directly under the band, app-shell.js sets data-wyn-top="news" and
   the scrim takes the bar's colour instead of showing a light seam above it. Once the bar scrolls away the masthead is under the band. */
html[data-wyn-app][data-wyn-top="news"]{--wyn-scrim:var(--ticker-bg)}
/* Device F5: inside the app the same band is also a real element (#wyn-scrim, added by app-shell.js after #app). A pseudo-element with
   pointer-events:none lets taps and hit tests reach the content scrolled under the status bar; the element is the topmost thing there. */
html[data-wyn-app] #wyn-scrim{position:fixed;z-index:135;top:0;left:0;right:0;height:var(--wyn-inset-top);background:var(--wyn-scrim,var(--surface-2))}
html[data-wyn-app] #app:has(>.auth-shell)+#wyn-scrim{background:var(--bg)}
#app:has(>.auth-shell)::before{background:var(--bg)}
.masthead{top:var(--wyn-inset-top)}
.rail{top:calc(var(--header) + var(--wyn-inset-top));left:var(--wyn-inset-left)}
@media(min-width:981px){.compact-workspace>.sports-column{top:calc(76px + var(--wyn-inset-top))}}
@media(min-width:761px){
 #app>.tenant-news{top:var(--wyn-inset-top)}
 #app>.tenant-news:not([hidden])~.masthead{top:calc(32px + var(--wyn-inset-top))}
 #app>.tenant-news:not([hidden])~.rail{top:calc(var(--header) + 32px + var(--wyn-inset-top))}
 .welcome-strip{top:var(--wyn-inset-top)}
 html.ws-open:not(.wf-on) #app>.masthead,html.ws-open:not(.wf-on) #app>.tenant-news~.masthead{top:calc(44px + var(--wyn-inset-top))}
 html.ws-open:not(.wf-on) #app>.rail,html.ws-open:not(.wf-on) #app>.tenant-news~.rail{top:calc(var(--header) + 44px + var(--wyn-inset-top))}
 html.ws-open.wf-on #app>.tenant-news~.masthead{top:var(--wyn-inset-top)}
 html.ws-open.wf-on #app>.tenant-news~.rail{top:calc(var(--header) + var(--wyn-inset-top))}
}

/* Full-height pages fill the space between the bars, so the inset never adds a scroll. */
.main{min-height:calc(100svh - var(--header) - var(--wyn-inset-top))}
.auth-shell{min-height:calc(100svh - var(--wyn-inset-top) - var(--wyn-inset-bottom))}
@media(max-width:760px){.auth-login{height:calc(100svh - var(--wyn-inset-top) - var(--wyn-inset-bottom))}}
@media(min-width:600px) and (max-width:980px) and (orientation:landscape) and (max-height:600px){.auth-login{height:calc(100svh - var(--wyn-inset-top) - var(--wyn-inset-bottom))}}

/* Bottom and sides: fixed chrome clears the navigation bar and a landscape cutout. */
.floating-slip{right:calc(27px + var(--wyn-inset-right))}
.inline-betslip{scroll-margin-bottom:calc(74px + var(--wyn-inset-bottom))}
.live-stream-panel.is-floating .stream-player{right:calc(22px + var(--wyn-inset-right))}
.casino-session-dialog{padding-left:var(--wyn-inset-left);padding-right:var(--wyn-inset-right)}
/* Owner 2026-10-22 - a mobile browser changes the dynamic bottom safe-area inset while its toolbar collapses and expands on scroll,
   so a fixed bar positioned with it moves on every scroll. The tab bar is pinned to the bottom edge and grows by the static max inset;
   the slip button, toast and casino dock above it are offset by the same static max inset. Owner 2026-10-22 (after both fixes): a
   browser (no html[data-wyn-app]) can still report and change env() while its chrome animates, so there the bar and the bars above
   it ignore every bottom inset (62 / 75 / 78 / 62 px); the app keeps the shell's fixed --wyn-safe-bottom. On every brand the bar is
   its own compositing layer, so a blur/backdrop repaint (lobby-v2) cannot shift it. With a casino dock on the page the slip and toast
   keep sportsbook.css's dock rule (above the dock, through --mobile-bottom-space, which in a browser also drops the inset). */
@media(max-width:760px){
 .mobile-nav{bottom:0;height:calc(62px + var(--wyn-inset-bottom-max));padding:5px calc(5px + var(--wyn-inset-right)) calc(5px + var(--wyn-inset-bottom-max)) calc(5px + var(--wyn-inset-left))}
 .floating-slip{bottom:calc(75px + var(--wyn-inset-bottom-max));right:calc(17px + var(--wyn-inset-right))}
 #toast{bottom:calc(78px + var(--wyn-inset-bottom-max))}
 body:has(.casino-dock){--mobile-bottom-space:calc(62px + var(--wyn-inset-bottom-max) + var(--casino-dock-height))}
 .casino-dock{bottom:calc(62px + var(--wyn-inset-bottom-max));padding-left:calc(12px + var(--wyn-inset-left));padding-right:calc(12px + var(--wyn-inset-right))}
 .inline-betslip{scroll-margin-bottom:calc(88px + var(--wyn-inset-bottom))}
 dialog{padding-bottom:var(--wyn-inset-bottom)}
 .live-stream-panel.is-floating .stream-player{left:calc(8px + var(--wyn-inset-left));right:auto;bottom:calc(70px + var(--wyn-inset-bottom-max))}
 html:not([data-wyn-app]) .live-stream-panel.is-floating .stream-player{bottom:70px}
 .casino-session-dialog>header{padding-top:calc(6px + var(--wyn-inset-top))}
 .casino-session-dialog{padding-bottom:var(--wyn-inset-bottom)}
 html:not([data-wyn-app]) .mobile-nav{bottom:0;height:62px;padding:5px calc(5px + var(--wyn-inset-right)) 5px calc(5px + var(--wyn-inset-left))}
 html:not([data-wyn-app]) .floating-slip{bottom:75px}
 html:not([data-wyn-app]) body:not(:has(.casino-dock)) #toast{bottom:78px}
 html:not([data-wyn-app]) body:has(.casino-dock){--mobile-bottom-space:calc(62px + var(--casino-dock-height))}
 html:not([data-wyn-app]) .casino-dock{bottom:62px}
 .mobile-nav{transform:translateZ(0);will-change:transform}
 /* P10: the product switch slides up while html.chrome-down is set (same rule as sportsbook.css, so neutral without it). */
 html.chrome-down .product-nav{transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .2s,opacity .2s,visibility 0s .2s}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){html.chrome-down .product-nav{transition:none}}
/* The bottom inset is the dialog's padding, not the iframe's: the iframe's own box then ends above the navigation band (device F6;
   padding on the iframe left its border box under the band). The element rule `dialog{padding-bottom}` above loses to
   .casino-session-dialog{padding:0}, so the class is named here.
   A landscape phone is wider than 760px: in the app the game dialog still clears the status and navigation bars. */
@media(min-width:761px){
 html[data-wyn-app] .casino-session-dialog>header{padding-top:calc(8px + var(--wyn-inset-top))}
 html[data-wyn-app] .casino-session-dialog{padding-bottom:var(--wyn-inset-bottom)}
}

/* Keyboard open (the shell's data-wyn-kb): fixed bottom bars would float over the stake row. A plain selector list, not :is():
   WebView 83 (API 30, Chromium < 88) drops a rule with :is() whole, and the tab bar and casino dock covered the stake row (r8). */
html[data-wyn-kb="open"] .mobile-nav,html[data-wyn-kb="open"] .floating-slip,html[data-wyn-kb="open"] .casino-dock{display:none}
/* Device C3: with the keyboard up app.js scrolls the stake row to the visual viewport's bottom edge, which Chromium rounds up
   to whole CSS px, past the WebView's last pixel at a fractional density. The shell's bottom inset carries that overhang. */
html[data-wyn-app] .inline-slip-actions{scroll-margin-bottom:var(--wyn-inset-bottom)}

/* Inside the app only: no pull-to-refresh fight, no tap flash, chrome labels are not selectable. */
html[data-wyn-app],html[data-wyn-app] body{overscroll-behavior-y:none}
html[data-wyn-app]{-webkit-tap-highlight-color:transparent}
html[data-wyn-app] :is(.masthead,.product-nav,.rail,.mobile-nav,.casino-dock,.floating-slip,.tenant-news,.welcome-strip,.casino-session-dialog>header){-webkit-user-select:none;user-select:none}

/* Keyboard open in the app: the shell resizes the WebView, so the fixed-height login grows and scrolls instead of clipping
   the form. Scoped to data-wyn-kb (set only by the shell): in a browser the login keeps height:100svh (refinements.css). */
html[data-wyn-kb="open"] .auth-login{height:auto;min-height:calc(100svh - var(--wyn-inset-top) - var(--wyn-inset-bottom))}