/* KTV Portal — production adaptations of the Artifact viewport model (loaded last).
   In the Artifact the portal scrolled inside a device frame (position:absolute layers, @container on the frame).
   In production the page scrolls the window, so overlay/toast layers become fixed and the sheet's
   desktop/modal breakpoint uses a media query (the overlay lives outside the #app container). */
.overlay{position:fixed;font-size:16px;line-height:1.5;color:var(--ink)}
.toast-l{position:fixed;font-size:16px;line-height:1.5}
@media (min-width:700px){.sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(460px,90%);border-radius:24px;animation:none}}
#app[inert]{overflow:hidden}
.drop[aria-disabled="true"]{cursor:not-allowed}
/* A11y: standalone footer links get a 44px touch target (inline links inside sentences are exempt). */
.pf-in a{display:inline-flex;align-items:center;min-height:44px}
.pf-in{align-items:center}
/* Headings receive programmatic focus on route change (screen-reader announcement) — no visual ring. */
h1[tabindex="-1"]:focus{outline:none}

/* Turnstile verification area (interaction-only: invisible unless a challenge is needed). IN NORMAL FLOW, between the
   form and its action bar — never fixed / layered over the CTA or the footer. Empty → takes no space. */
.ts-slot{display:flex;flex-direction:column;align-items:center;gap:10px;margin:16px 0 4px;max-width:100%;min-width:0}
.ts-slot:empty{display:none}
.ts-host{max-width:100%;min-width:0}
.ts-host:empty{display:none}
.ts-slot .banner{align-self:stretch}