/* ios-capacitor.css — native iOS app layer, loaded after shared.css.

   Two root causes this file addresses:

   1. GRID BLOWOUT. Grid and flex children default to min-width:auto, which
      floors their width at their CONTENT's min-content width rather than
      the track size you declared. A wide descendant (amortization table,
      chart canvas, a nowrap row) therefore pushes its 1fr column past the
      viewport. Combined with overflow-x:hidden the excess is CLIPPED with
      no way to scroll to it — that is the "cut off on the right" symptom.
      Fixing it requires min-width:0 on the actual container children, not
      just on elements carrying an inline grid-template-columns style.

   2. BREAKPOINT. Mobile rules previously fired at a 768px breakpoint. iPhone
      landscape logical width is 874-956px, so landscape rendered the
      DESKTOP layout — desktop nav instead of the hamburger, unstacked
      grids, live sticky sidebars, non-scrolling tables. All breakpoints
      are now 1000px, which covers every iPhone in both orientations.
*/

/* ── VIEWPORT / SCROLL ──────────────────────────────────────────── */
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape */
}

body {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}
/* App-only chrome behaviour. On the web, long-press selection and
   pull-to-refresh are expected browser behaviour and must not be blocked. */
.is-app body {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* Horizontal safe-area is applied to .page and .site-header-inner
     instead of here, so the sticky header's background can still bleed
     edge-to-edge under the notch rather than leaving bare strips. */
  padding: 0 0 env(safe-area-inset-bottom) 0;
}

/* ── SAFE AREA ──────────────────────────────────────────────────── */
/* The header is sticky at top:0. Padding the header itself (rather than
   body) means its background extends under the status bar while its
   contents sit below the inset — the standard iOS pattern. */
.is-app html { overscroll-behavior: none; }
.is-app .site-header {
  padding-top: env(safe-area-inset-top);
}
.is-app .site-header-inner {
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}
.is-app .page {
  padding: 1rem calc(0.75rem + env(safe-area-inset-right))
           2rem calc(0.75rem + env(safe-area-inset-left));
}
.is-app .mobile-drawer {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── GRID BLOWOUT FIX ───────────────────────────────────────────── */
/* Containers themselves must also be allowed to shrink, otherwise the
   floor just moves up one level. */
.page, .layout, .right, .controls, .sidebar, .bottom,
.panel, .card, .tab-panel, .tab-pane, .sect, .field {
  min-width: 0;
}
.layout > *, .right > *, .controls > *, .sidebar > *, .bottom > *,
.panel > *, .g2 > *, .g3 > *, .g4 > *, .g5 > *,
.metric-grid > *, .app-grid > *, .earn-row > *, .benefit-row > *,
.se-row > *, .unit-row > *, .exp-row > *, .ep-row > *,
[style*="grid-template-columns"] > *, [style*="display:flex"] > * {
  min-width: 0;
}
input, select, textarea, button, .input-wrap, .input-bare, .sv-input {
  min-width: 0;
}

/* ── WIDE CONTENT MUST SCROLL ITSELF, NEVER THE PAGE ────────────── */
/* Tables are the main offender. They scroll inside their own wrapper at
   every width in the app, not only under the old mobile breakpoint. */
.table-wrap, .payoff-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
canvas {
  max-width: 100% !important;
}
img {
  max-width: 100%;
}

/* ── HORIZONTAL TAB ROWS ────────────────────────────────────────── */
/* These are meant to swipe sideways inside their own row. Fade the
   trailing edge so it reads as "more this way" rather than clipped. */
@media (max-width: 1000px) {
  .tab-nav, .tab-bar {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
}

/* ── NATIVE FEEL ────────────────────────────────────────────────── */
/* Text inputs stay selectable/callout-able even though the shell disables
   callouts globally above. */
input, textarea, select {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* ── OVERSCROLL BACKGROUND ──────────────────────────────────────── */
/* Pulling past the top or bottom exposes the WKWebView's own scroll-view
   background, which defaults to white and flashes as a bar above the
   header / below the footer. Painting html itself (not just body) makes
   the rubber-band area match the app. Uses the theme variable so it
   follows dark/light. */
.is-app html, .is-app body {
  background: var(--bg);
}