/* native-feel.css — Android native polish for Forge Systems */

/* ── Remove webkit tap highlights everywhere ─────────────────────────────── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

/* ── Disable user selection on non-input elements ────────────────────────── */
body, div, span, p, h1, h2, h3, h4, h5, h6,
section, article, aside, header, footer, nav, main,
ul, ol, li, table, td, th, label, button, a {
  -webkit-user-select: none;
  user-select: none;
}

/* Re-enable selection for input fields */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ── Overscroll / bounce prevention ─────────────────────────────────────── */
/* NOTE: position:fixed on body prevents scroll bleed between pages but
   requires every scrollable child to use overflow-y:auto explicitly.
   box-sizing:border-box ensures padding-top/bottom are counted inside the
   100% height so the body never overflows the viewport.                  */
html, body {
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* Flex column so <main> can fill the remaining height and activate
     overflow-y:auto. Without this main grows to fit content → no scroll. */
  display: flex;
  flex-direction: column;
}

/* Fill the space between topbar and bottom nav */
main {
  flex: 1;
  min-height: 0; /* required: flex items don't shrink below content-size by default */
}

/* ── Momentum scrolling on all scrollable containers ────────────────────── */
.page-scroll,
#page-content,
#workout-content,
main,
.modal-body,
.sheet-body,
.overflow-y,
[data-scroll] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── will-change: only on actively-transitioning page bodies ────────────── */
/* Applying will-change to every card/button causes the browser to allocate
   a GPU layer for each one permanently — a memory/jank disaster on Android.
   Restrict it to the elements that actually animate.                        */
body.page-enter,
body.page-enter-active,
body.page-exit,
body.page-exit-active {
  will-change: transform;
}

/* ── Defer off-screen section rendering ──────────────────────────────────── */
/* content-visibility:auto skips rendering sections not in the viewport;
   intrinsic-size prevents layout shift when they become visible.            */
.page-section-offscreen {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ── Remove input outlines — use subtle border accent instead ───────────── */
input:focus,
textarea:focus,
select:focus,
[contenteditable]:focus {
  outline: none;
  border-color: var(--accent, #AAEE00);
  box-shadow: none;
}

/* ── Page slide transitions (Android-style) ─────────────────────────────── */
/* Forward nav: new page slides in from right */
body.page-enter {
  transform: translateX(100%);
  transition: none;
}
body.page-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-in-out;
}
/* Back nav: current page slides out to right */
body.page-exit {
  transform: translateX(0);
  transition: transform 280ms ease-in-out;
}
body.page-exit-active {
  transform: translateX(100%);
}


/* ── Safe area insets for phones with notch / nav bar ───────────────────── */
/* Cap the top inset at 40 px — some Android devices with overlay:true report
   an inflated value that pushes the topbar down too far.                    */
body {
  padding-top: min(env(safe-area-inset-top, 0px), 40px);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Compact topbar — less vertical padding so the bar takes up less height    */
.topbar-brand-bar {
  padding-top: 4px;
  padding-bottom: 4px;
}