/* ─────────────────────────────────────────────────────────────────────────────
   MiRAjO Hub — App Shell
   Makes the installed Hub PWA (including white-label orgs like WIN) behave
   like an app instead of a web page.

   Fixes:
     1. Rubber-band bounce when scrolling past the top or bottom
     2. Pull-down-to-refresh reloading the app mid-use
     3. Sideways drift / empty space past the right edge
     4. Pinch and double-tap zoom
     5. Content jumping as the browser address bar hides and shows
     6. iOS zooming the whole screen when you tap an input under 16px

   Loaded in <head> BEFORE each page's own <style>, so any page can still
   override a rule deliberately. Paired with /js/hub-app-shell.js.

   Two layout shapes exist in the Hub and both are supported:
     - Fixed shell  (hub-dashboard, hub-org-content): .hub-layout is 100dvh
       and scrolling happens inside .hub-content / .sidebar. Body never
       scrolls, so there is nothing to bounce.
     - Document flow (course, profile, account, join, event pages, …): body
       itself is the scroller.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Lock the document. html never scrolls; body is the scroller. ─────────
   This is what stops the whole screen dragging away and snapping back: there
   is no document-level scroll left to bounce. It also means the visible height
   stops changing when the address bar hides, so nothing jumps. */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;          /* no pull-to-refresh on Android */
  -webkit-text-size-adjust: 100%;     /* no text resize on rotate */
  text-size-adjust: 100%;
}

body {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;                 /* no sideways drift */
  overscroll-behavior-y: none;        /* scroller stops dead at its ends */
  -webkit-overflow-scrolling: touch;  /* momentum scrolling, iOS */
  touch-action: manipulation;         /* no double-tap zoom */
  -webkit-tap-highlight-color: transparent;
}

/* Hub pages set "min-height: 100vh" on body. On phones 100vh is the height
   with the address bar COLLAPSED, which is taller than the area actually
   visible — so the page gets a phantom scroll it can then bounce against.
   !important because this has to beat every page's own inline <style>, and
   it is the one rule that must not be accidentally overridden. */
body {
  min-height: 100% !important;
}

/* Same problem, same fix, for the full-screen centered states the Hub reuses
   by name across pages. */
.loading-screen,
.loading-state,
.error-state {
  min-height: 100%;
}

/* ── 2. Nothing may push the layout wider than the screen ───────────────────── */
img, svg, video, canvas, iframe, table, pre {
  max-width: 100%;
}

/* .main-scroll only ever declares overflow-y, which leaves the horizontal
   axis free to scroll. On the home/newsfeed that is what lets the whole
   column drift left and right. Pin it. */
.main-scroll {
  overflow-x: hidden;
}

/* Posts, comments and lesson copy are user-written, so they can contain a
   pasted URL or a single long unbroken word. Without this it stretches the
   column wider than the screen and the page slides sideways. */
.main-scroll, .community-post, .post-body,
.lesson-body, .course-content, .comment-body {
  overflow-wrap: break-word;
}

/* ── 3. Long-press should not raise the browser's copy/share bubble ──────────
   Installed app only. In a normal browser tab, selecting and copying text is
   something people expect to work, so it is left alone there.

   Even in the app, text stays selectable in inputs, in tables, and in
   course/lesson content so members can still copy from a lesson. Add class
   "allow-select" to opt any other element back in. */
@media (display-mode: standalone) {
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  input, textarea, select, [contenteditable="true"],
  table, .lesson-body, .course-content, .post-body, .allow-select {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ── 4. Any inner scroll region keeps its scroll to itself ──────────────────
   Without this, scrolling to the end of the feed, the sidebar or a modal
   hands the remaining scroll to the page behind it and drags the whole app.

   These are the Hub's actual scroll containers, taken from the stylesheets
   rather than guessed: .main-scroll is the one the home/newsfeed scrolls in. */
.main-scroll, .sidebar,
.modal-body, .mem-modal-scroll, .wp-modal-body,
.member-drawer, .instr-drawer, .mob-drawer-list,
.lesson-tree, .guide-messages, .pg-messages,
[data-scroll], .scroll-region {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── 5. iOS: inputs under 16px make the OS zoom the entire screen on focus,
   and it never zooms cleanly back out. On touch screens, force 16px.
   Desktop keeps the original compact sizing. ─────────────────────────────── */
@media (max-width: 900px) and (pointer: coarse) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── 6. Respect the notch and the home-indicator bar ────────────────────────
   Insets resolve to 0 on hardware that has none, so this is safe everywhere. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Fixed bottom navigation has to clear the home indicator. That rule lives
   with the component in hub-dashboard.html, not here, because this stylesheet
   loads BEFORE each page's own <style> and would lose the cascade to the
   page's own height declaration.

   There is deliberately NO top-inset rule either: every Hub page sets
   apple-mobile-web-app-status-bar-style to "default", which means iOS starts
   the web view BELOW the status bar and safe-area-inset-top is already 0.
   Padding the top bars would just add dead space. */

/* ── 7. Taps should feel instant, not like clicking a link ──────────────────── */
a, button, [role="button"], .btn, .nav-item, .tab, .chip, .pill {
  touch-action: manipulation;
}

/* ── 8. Hide scrollbars in the installed app — native apps don't show them ─── */
@media (display-mode: standalone) {
  body::-webkit-scrollbar,
  .hub-content::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar { width: 0; height: 0; }
  body, .hub-content, .sidebar { scrollbar-width: none; }
}
