/* ─────────────────────────────────────────────────────────────────────────────
 * native-feel.css — THE one home for "stop this looking like a web page".
 *
 * The student, parent and employee apps are a WebView around these pages, and a
 * WebView announces itself in half a dozen small ways that no native app does.
 * Users do not name the individual tells; they say "it still looks like a
 * browser" (reported 2026-08-13). Each rule below removes exactly one tell:
 *
 *   blue flash on every tap ....... -webkit-tap-highlight-color
 *   text turning blue on a long press / the copy-paste bubble appearing on a
 *   button ........................ user-select + -webkit-touch-callout
 *   the whole page rubber-banding past the top, or a pull-to-refresh spinner
 *   the app never asked for ....... overscroll-behavior
 *   a 300ms delay before a tap registers, and double-tap zooming the layout
 *   ............................... touch-action: manipulation
 *   the page zooming in when a text field is focused (any font under 16px
 *   triggers it) .................. font-size on inputs
 *   a scrollbar track drawn over the content .... ::-webkit-scrollbar
 *   a white flash between screens, because the page paints before its own
 *   background does ............... background on html
 *
 * SCOPE. Everything is behind `body[data-in-app]`, so the same pages opened in
 * a normal browser keep normal browser behaviour — selectable text, visible
 * scrollbars, the back-swipe. Never make the web worse to make the app better.
 *
 * WHAT IS DELIBERATELY NOT DISABLED: selection inside real content (a message,
 * a question, a table cell) stays on. A student copying a question out of a
 * paper is a legitimate thing to do, and blanket `user-select:none` is the
 * classic over-correction that makes an app feel broken rather than native.
 * ───────────────────────────────────────────────────────────────────────────── */

/* Stop the OS enlarging text on rotate — applies everywhere, browser included. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body[data-in-app] {
  -webkit-tap-highlight-color: transparent;   /* no blue flash on tap */
  overscroll-behavior-y: contain;             /* no rubber-band, no pull-to-refresh */
  -webkit-font-smoothing: antialiased;
}

/* Controls behave like native controls: no selection, no callout, instant tap. */
body[data-in-app] a,
body[data-in-app] button,
body[data-in-app] label,
body[data-in-app] summary,
body[data-in-app] [role="button"],
body[data-in-app] [onclick],
body[data-in-app] .btn,
body[data-in-app] .tab,
body[data-in-app] .chip,
body[data-in-app] .badge {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* …but anything the user might legitimately copy stays selectable. */
body[data-in-app] input,
body[data-in-app] textarea,
body[data-in-app] [contenteditable="true"],
body[data-in-app] .selectable,
body[data-in-app] .q-body,
body[data-in-app] td,
body[data-in-app] p {
  -webkit-user-select: text;
  user-select: text;
}

/* A field under 16px makes the OS zoom the page on focus, and it never zooms
   back out — the single most webview-looking thing an app can do. */
body[data-in-app] input,
body[data-in-app] select,
body[data-in-app] textarea {
  font-size: 16px;
}

/* Scrollbars are a desktop affordance; a phone app has none. */
body[data-in-app] ::-webkit-scrollbar { width: 0; height: 0; }
body[data-in-app] { scrollbar-width: none; }

/* Momentum scrolling inside any scrolling panel, like a native list. */
body[data-in-app] .table-wrap,
body[data-in-app] .scroll-x,
body[data-in-app] [data-scroll] {
  -webkit-overflow-scrolling: touch;
}

/* A tap should give feedback the instant it lands, the way a native row does —
   the WebView's own highlight was just removed, so put a real one back. */
body[data-in-app] a:active,
body[data-in-app] button:active,
body[data-in-app] .btn:active,
body[data-in-app] [role="button"]:active {
  opacity: .72;
  transition: opacity .04s;
}

/* Focus rings are a keyboard affordance. Keep them for keyboards, drop them for
   fingers — losing them entirely would break accessibility on a Bluetooth
   keyboard, which some of the older students actually use. */
body[data-in-app] :focus:not(:focus-visible) { outline: none; }

/* Text cursor on a page you cannot type into reads as "web page". */
body[data-in-app] { cursor: default; }