/* The document never pans. Individual React Native ScrollViews own vertical scrolling. */
html, body {
  width: 100%; height: 100%; margin: 0; padding: 0;
  overflow: hidden; overscroll-behavior: none; touch-action: pan-y;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body { position: fixed; inset: 0; }
#root {
  position: fixed; left: 0; top: var(--hangang-viewport-top, 0px);
  width: 100%; max-width: 100%; min-width: 0;
  height: var(--hangang-viewport-height, 100dvh) !important;
  overflow: hidden; overscroll-behavior: none; touch-action: pan-y;
}
#root *, [aria-modal="true"] * { min-width: 0; box-sizing: border-box; }
[aria-modal="true"] { max-width: 100%; touch-action: pan-y; overscroll-behavior: none; }
/* Safari magnifies focused inputs smaller than 16px. Keep labels compact, inputs readable. */
input, textarea, select { font-size: 16px !important; max-width: 100%; }

/* Prevent iOS text inflation inside nested flex/scroll and modal surfaces. */
#root, #root *, [aria-modal="true"], [aria-modal="true"] * {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}
/* Long names and translated labels wrap instead of widening their card. */
#root div[dir="auto"], [aria-modal="true"] div[dir="auto"] {
  max-width: 100%; overflow-wrap: anywhere; flex-shrink: 1;
}
#root [role="button"], [aria-modal="true"] [role="button"] { max-width: 100%; }

/* Extend the navigation colour into the iPhone home-indicator safe area. */
html, body { background-color: #f5f0e8; }
#root [data-testid="member-bottom-nav"] {
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: calc(66px + max(24px, env(safe-area-inset-bottom, 0px)));
  z-index: 20;
}
/* Anchor the member screen to the visible viewport, independently of ancestor
   flex sizing. Reserve exactly the bar's height; only the content scrolls. */
#root [data-testid="member-shell"] {
  position: fixed !important;
  top: var(--hangang-viewport-top, 0px);
  left: 50%; transform: translateX(-50%);
  height: var(--hangang-viewport-height, 100dvh) !important;
  padding-bottom: calc(66px + max(24px, env(safe-area-inset-bottom, 0px)));
}

/* Give the remaining screen to the form while the software keyboard is open. */
.hangang-keyboard-open #root [data-testid="member-header"],
.hangang-keyboard-open #root [data-testid="member-language"],
.hangang-keyboard-open #root [data-testid="member-bottom-nav"] { display: none !important; }
.hangang-keyboard-open #root [data-testid="member-shell"] { padding-bottom: 0 !important; }
.hangang-keyboard-open #root * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Polish: text may wrap; horizontal coupon/calendar scrollers retain their layout. */
#root [role="button"] > div[dir="auto"],
[aria-modal="true"] [role="button"] > div[dir="auto"] { white-space: pre-wrap; overflow-wrap: anywhere; }
#root [role="button"], [aria-modal="true"] [role="button"] {
  transition: opacity 120ms ease-out, transform 160ms ease-out;
}
#root [role="button"]:focus-visible, [aria-modal="true"] [role="button"]:focus-visible {
  outline: 2px solid #798961; outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  #root [role="button"], [aria-modal="true"] [role="button"] { transition: none; }
}