/*
 * MMA mobile foundation
 *
 * This file is intentionally loaded after every feature stylesheet.  It is the
 * single phone contract for the Playbook and the event Caddy: a real phone
 * always uses its full readable width, 16px+ supporting text and 44px+ taps.
 * Feature CSS may style components, but must not reintroduce a narrow desktop
 * column, CSS zoom or a minimum page height on a phone.
 */
:root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { width: 100%; min-width: 0; overflow-x: clip; }

/* The Playbook detector marks genuine phones even when Android reports a wide
   layout viewport.  Keep this separate from width breakpoints for that case. */
html.large-phone-display,
html.large-phone-display body { min-height: 100dvh; }
html.large-phone-display .workspace { min-height: 0; }
html.large-phone-display #app,
html.large-phone-display main,
html.large-phone-display .home-hub,
html.large-phone-display .signed-out { width: 100%; max-width: none; min-width: 0; }
html.large-phone-display main { padding: 20px max(16px, env(safe-area-inset-right, 0px)) calc(104px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
html.large-phone-display .topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
html.large-phone-display .home-hub { margin: 0; }
html.large-phone-display footer { margin-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

/* Caddy: phone-fit is set before the app renders.  This must win over the
   legacy max-width: 480px/560px rules that previously made Android letterbox. */
html.golf-phone-fit #app {
  width: 100%; max-width: none; min-width: 0; margin-inline: 0;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(104px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
html.golf-phone-fit .flow-nav { width: 100%; max-width: none; left: 0; right: 0; transform: none; }
html body.golf-caddy #app > .screen.welcome {
  min-height:0; padding-top:50px; gap:18px; align-items:center;
  justify-content:flex-start; text-align:center;
}
html body.golf-caddy .welcome > * { max-width:100%; margin-inline:auto; }
html body.golf-caddy .welcome .cobrand { justify-content:center; flex-wrap:wrap; padding:0; }
html body.golf-caddy .welcome .mega { font-size:clamp(64px,19vw,88px); line-height:1; width:100%; align-items:center; }
html body.golf-caddy .welcome .eyebrow { max-width:24em; line-height:1.5; }
html body.golf-caddy .welcome .orbit { display:none; }
html body.golf-caddy .welcome .lede { font-size:20px; line-height:1.5; }
html body.golf-caddy .welcome .cta { width:100%; min-height:64px; }
html body.golf-caddy .save-notice { margin:20px 0 4px; }
html body.golf-caddy .sync-help { width:100%; }
html body.golf-caddy .sync-help > summary { justify-content:center; min-height:48px; }
.app-release { display:block; text-align:center; font-size:14px; opacity:.75; margin:16px 0; }
body.mma-playbook > .app-release { padding-bottom:96px; margin-top:-72px; }

@media (max-width: 900px), (pointer: coarse) {
  :root { font-size: 18px; }
  body { font-size: 18px; line-height: 1.55; }
  h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
  .small, .eyebrow, .account, .tile-detail, footer, .mobile-tab, .fine,
  .who, .hole-meta span, .rival-card small, .flow-nav button { font-size: max(16px, 1em); }
  button, a.text-button, summary { min-height: 44px; }
  .mobile-tab { min-height: 64px; }
  html body.golf-caddy #app { max-width:none; width:100%; min-height:0; margin-inline:auto; padding:16px max(16px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  html body.golf-caddy .flow-nav { width:100%; max-width:none; left:0; right:0; transform:none; }
  html body.golf-caddy #mute { right:max(14px,env(safe-area-inset-right)); }
  html body.golf-caddy .screen { min-width:0; width:100%; }
  html body.golf-caddy .screen.hole .call-big { font-size:20px; line-height:1.5; }
  html body.golf-caddy .gp-label, html body.golf-caddy .tip-big { font-size:22px; line-height:1.35; }
  html body.golf-caddy .gp-sub, html body.golf-caddy .gp-try { font-size:18px; }
  html body.golf-caddy .dots i { flex:0 0 auto; width:28px; height:28px; }
  html body.golf-caddy .hole-head, html body.golf-caddy .call-top { flex-wrap:wrap; }
  html body.golf-caddy .cta, html body.golf-caddy .ghost, html body.golf-caddy .flow-nav button { min-height:52px; white-space:normal; }
  html body.mma-playbook #app { width:100%; min-height:0; padding-bottom:0; }
  html body.mma-playbook .workspace { display:block; min-height:0; }
  html body.mma-playbook #main { width:100%; max-width:680px; min-height:0; margin:0 auto; padding:20px max(16px,env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom) + 16px) max(16px,env(safe-area-inset-left)); }
  html body.mma-playbook .home-hub { width:100%; max-width:none; margin:0; }
  html body.mma-playbook .sidebar { display:none; }
  html body.mma-playbook .topbar { display:grid; grid-template-columns:1fr auto; gap:8px 12px; padding:16px; min-height:0; }
  html body.mma-playbook .topbar .logo { width:180px; max-width:100%; grid-column:1; grid-row:1; }
  html body.mma-playbook .topbar .account { grid-column:1; grid-row:2; margin:0; font-size:16px; }
  html body.mma-playbook .topbar .quiet { grid-column:2; grid-row:1/3; font-size:16px; min-height:48px; }
  html body.mma-playbook .edition { display:none; }
  html body.mma-playbook h1 { font-size:32px; line-height:1.2; margin:8px 0 16px; }
  html body.mma-playbook h2 { font-size:25px; line-height:1.3; }
  html body.mma-playbook #main p:not(.eyebrow), html body.mma-playbook .tile-detail { font-size:18px; line-height:1.55; }
  html body.mma-playbook .home-tile { grid-template-columns:36px minmax(0,1fr) 12px; padding:16px 12px; gap:12px; min-height:0; }
  html body.mma-playbook .tile-number { width:36px; height:36px; }
  html body.mma-playbook .home-tile strong { font-size:20px; line-height:1.3; }
  html body.mma-playbook .home-primary { margin:16px 0 12px; }
  html body.mma-playbook footer { margin:0; padding:16px 16px calc(100px + env(safe-area-inset-bottom)); font-size:16px; }
  html body.mma-playbook #display-tools { display:none; }
  html body.mma-playbook .mobile-nav { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); padding:6px 4px max(6px,env(safe-area-inset-bottom)); }
  html body.mma-playbook .mobile-tab { font-size:14px; min-height:58px; }
}
/* Portrait installed phones sometimes expose a desktop-sized layout viewport.
   Make reading sizes proportional there, without zooming the page or hit boxes. */
@media (min-width:601px) and (orientation:portrait) {
  html.golf-phone-fit, html.large-phone-display { font-size:clamp(18px,4.6vw,44px); }
  html.golf-phone-fit body, html.large-phone-display body { font-size:1rem; }
  html.golf-phone-fit body.golf-caddy #app { max-width:none; padding-inline:4vw; }
  html.golf-phone-fit body.golf-caddy .flow-nav { width:100%; max-width:none; left:0; right:0; transform:none; }
  html.golf-phone-fit body.golf-caddy .welcome .mega { font-size:19vw; }
  html.golf-phone-fit body.golf-caddy :is(.lede,.call-big,.tip-big,.gp-label,.gp-sub,.gp-try,.fine,.eyebrow,.tiny,.call-top,.read-t,.gp-flow,.gp-when,.gp-details summary,.tip-chips,.tip-label,.sync-help,.ghost,.cta,.flow-nav button,.hole-meta span,.log-hint,.res span) { font-size:1rem; }
  html.golf-phone-fit body.golf-caddy :is(.cta,.ghost,.flow-nav button) { min-height:2.9rem; }
  html.large-phone-display body.mma-playbook #main { max-width:none; padding-inline:4vw; }
  html.large-phone-display body.mma-playbook :is(.tile-detail,.topbar .account,.topbar .quiet,.eyebrow,.home-tile strong,footer,.mobile-tab), html.large-phone-display body.mma-playbook #main p:not(.eyebrow) { font-size:1rem; }
  html.large-phone-display body.mma-playbook h1 { font-size:1.8rem; }
  html.large-phone-display body.mma-playbook h2 { font-size:1.4rem; }
}