/* Touch screens and iOS Safari (phones and tablets). Loaded after the layouts.
   - no text inflation: iOS enlarges text when a phone turns sideways unless told not to, and the
     stage's fitted layouts then overflow;
   - no grey tap flash and no long-press callout on the controls and videos (text stays selectable);
   - 44 px touch targets for the small controls (a larger hit area where the look must stay);
   - the title and the inside scene on a phone (the stage before the sign-in) keep every line inside
     the window. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.present button,.present [role=button],.present a,#gate button,#gate a,.cornerctl button{-webkit-tap-highlight-color:transparent}
.present button,.present [role=button],#gate button,.cornerctl button,video{-webkit-touch-callout:none}

@media (pointer:coarse){
  /* the hit area grows, the look stays (the stage is zoomed down on a phone) */
  .slide.await .playbtn::after{content:"";position:absolute;inset:calc(-14px / var(--zf, 1)) calc(-10px / var(--zf, 1))}
  .cornerctl .mswitch::after{content:"";position:absolute;inset:-8px -6px}
  .cornerctl .mswitch{position:relative}
  .fbx{width:44px;height:44px}
  .fbchip{height:44px}
  .ask-x{width:44px;height:44px}
  .ask-fb{height:44px}
  .pgloss .gtop .btn,.pgrid .gtop .btn{min-height:44px}
  .glfilter{height:44px}
  .story .clink{padding:11px 0;margin:-11px 0}
}

/* the stage upright (a phone before the sign-in, a narrow window): the title's kicker clears the corner
   switch, the AI note wraps inside the margins over the footer line */
@container stage (aspect-ratio < 1.05){
  .stagewrap>.frame>.deck .photo.L-title .k.cinek{top:190px}
  .stagewrap>.frame>.deck .L-title .cinecredit.ainote{left:var(--m);right:var(--m);white-space:normal;line-height:1.35}
  /* the footer line stands over up to three lines of the note (its type is floored, so it grows with the zoom) */
  .stagewrap>.frame>.deck .L-title .foot{bottom:calc(24px + 4.05 * max(9px, calc(10px / var(--zf, 1))))}
}

/* a phone held sideways (compact stage): the call's place stays inside the window, right of the text */
.stagewrap>.frame>.deck.compact .talkbox{left:52%;right:calc(var(--mx) + 12px);width:auto;height:auto}

/* story mode: Corinna's (or the duo's) stand-in on the title stands at the right, under the kicker and
   smaller than the shot, so the headline reads beside her; a soft shade from the left keeps the white
   type legible over the lit plate */
.story .L-title .cine.story-stand video.narr{position:absolute;left:auto;right:-8%;top:13%;bottom:auto;width:72%;height:calc(87% - 88px);object-position:100% 100%!important}
.story .L-title .cine.story-stand::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,16,34,.55),rgba(0,16,34,.15) 55%,rgba(0,16,34,0) 75%);pointer-events:none}

/* story mode: the dock before anything plays shows one clear Listen button (who speaks, how long) in
   place of the empty caption area; the presenter's picture beside it plays too */
.splisten{flex:1 1 auto;min-width:0;align-self:center;display:flex;align-items:center;gap:12px;height:56px;margin:0;padding:0 18px 0 8px;border:1px solid var(--line);border-radius:28px;background:var(--pale);color:var(--ink);font:700 16px/1.2 "Fira Sans",Arial,sans-serif;letter-spacing:.2px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-align:left}
.splisten[hidden]{display:none}
.splisten .spi{flex:none;position:relative;width:40px;height:40px;border-radius:50%;background:var(--cyan-deep);box-shadow:0 4px 12px rgba(0,60,110,.25)}
.splisten .spi::before{content:"";position:absolute;left:15px;top:12px;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.splisten .spm{margin-left:auto;font-weight:500;font-size:14px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.splisten:active{background:#e3edf6}
.splisten:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.sdock.idle .spcap{display:none}
.sdock:not(.idle) .splisten{display:none}

/* story mode: a table wider than the phone fades at the side where more columns wait (story.js) */
.story .b-table.sx-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
.story .b-table.sx-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.story .b-table.sx-l.sx-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 64px),transparent)}

/* a phone held sideways (compact stage, touch): the chevrons stand at both edges of the window, a tap
   there moves (Stage hook touchEdge); a tap in the middle shows the bars, a swipe moves too */
@media (pointer:coarse){
  .stagewrap>.frame>.deck.compact>.navcue{position:fixed;top:0;bottom:0;height:auto;width:calc(44px / var(--zf, 1));opacity:.5;background:none}
  .stagewrap>.frame>.deck.compact>.navcue .chev{width:calc(18px / var(--zf, 1));height:calc(36px / var(--zf, 1));filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
  .stagewrap>.frame>.deck.compact.go>.navcue.r{opacity:1}
}

/* the stage upright before the sign-in (a phone from the mail link): Play at its own size, in the
   lower third of the shot, clear of the footer */
@container stage (aspect-ratio < 1.05){
  .stagewrap>.frame>.deck .slide.await .playbtn{zoom:calc(1 / var(--zf, 1));bottom:30%}
}
@media (pointer:coarse){.talkhost .tbtn{min-height:44px}}

/* the on-screen keyboard (app.js sets --kb, its overlap, and --vvh, the visible height): the sheets with
   a text field end above it and fit the visible part */
@media (max-width:600px){
  .ask{height:calc(100dvh - var(--kb, 0px))}
}
.fbwrap{height:calc(100% - var(--kb, 0px))}
.present .lq{margin-bottom:var(--kb, 0px)}
@media (max-width:700px){
  .present .lq{max-height:calc(var(--vvh, 100dvh) - 16px)}
}
@media (pointer:coarse){.smwho .wme{min-height:44px}}

/* the stage on a touch screen (a phone sideways, a tablet): the footer pills are drawn zoomed down; their
   hit areas grow to about 44 px on screen, the look stays (not inside a fitted text box: a pseudo element
   past its edge counts as overflow there) */
@media (pointer:coarse){
  .stagewrap>.frame>.deck .fbfoot,.stagewrap>.frame>.deck .askfoot{position:relative}
  .stagewrap>.frame>.deck .fbfoot::after,.stagewrap>.frame>.deck .askfoot::after{content:"";position:absolute;inset:calc(-12px / var(--zf, 1)) calc(-4px / var(--zf, 1))}
}