/* Mobile app sample only (app.html). Loaded after css/gate.css. Follows 5176: same banner, same clip
   gate, same vertical glide from the story down to the Quiz. Adds phone safe areas, phone-sized tap
   targets in the banner, and hides the Start over / Go Deeper row. */
:root{
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  --tap:44px;
}
/* Inside the desktop phone frame (index.html): room for its status bar and home bar. */
html.in-frame{--safe-t:47px;--safe-b:18px}

html.app-mode{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
html.app-mode body{overflow-x:hidden;touch-action:manipulation}

/* Banner: 5176 layout (socials left, stamp centre, mail and call right), under the status bar. */
.app-mode .site{padding-top:calc(var(--banner-h) + var(--safe-t))}
.app-mode .banner{
  height:calc(var(--banner-h) + var(--safe-t));
  padding-top:calc(var(--safe-t) + .3rem);
  padding-left:calc(var(--safe-l) + .55rem);
  padding-right:calc(var(--safe-r) + .3rem + var(--side-clip-w) / 3 + .2rem);
  column-gap:.3rem;
}
/* Side bar (css/sidebar.css): keep it clear of the notch, the home bar and rounded corners. */
:root{
  --side-safe-t:var(--safe-t);
  --side-safe-b:var(--safe-b);
  --side-safe-r:var(--safe-r);
}
.app-mode .banner-social,
.app-mode .banner-contacts{gap:0}
.app-mode .banner-social .social-icon,
.app-mode .banner-contacts .mail-only{width:var(--tap);height:var(--tap)}
.app-mode .banner-social .social-icon svg,
.app-mode .banner-contacts .mail-mark{width:1.2rem;height:1.2rem}
@media (max-width:359px){
  :root{--tap:38px}
}

/* Full-height sections on phones, measured below the banner and any notch. */
.app-mode .story,
.app-mode .finder{min-height:calc(100vh - var(--banner-h) - var(--safe-t))}
@supports (height:100svh){
  .app-mode .story,
  .app-mode .finder{min-height:calc(100svh - var(--banner-h) - var(--safe-t))}
}
.app-mode .story,
.app-mode .finder,
.app-mode .philosophy{
  padding-left:calc(var(--margin) + var(--safe-l));
  padding-right:calc(var(--margin) + var(--safe-r));
}

/* Phone keyboards zoom into inputs smaller than 16px. */
.app-mode .finder input,
.app-mode #report-card input,
.app-mode #report-card textarea{font-size:max(16px, 1em)}

/* Owner: no Start over and no locked Go Deeper in the mobile version. */
.app-mode #result-nav{display:none !important}