/* ============================================================================
   touch.css — the part that makes this feel like an app on a phone.

   Loaded LAST, on purpose. Every rule here is a platform correction that has to
   outrank the compact per-component sizes set in app.css and in the other part
   files (.trc-input-sm, .trc-side-search .trc-input, .trc-select-inline …).
   Ordering does that job, so nothing in this file needs !important.

   Safe-area geometry is NOT here — it lives in app.css beside the layout it
   adjusts, because it applies in a browser tab too (env() is simply 0 there).
   This file is only for behaviour that changes with the input device or with
   being installed.
   ========================================================================= */

/*
 * iOS zooms the page in when a focused input's font-size is under 16px, and
 * does not zoom back out afterwards: the reader is left scrolled sideways with
 * the header off-screen and no obvious way back. The app's 13px UI scale is a
 * deliberate density choice on a mouse; on a touch screen it buys nothing and
 * costs this, so touch gets 16px fields.
 */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea,
  .trc-input, .trc-select, .trc-textarea,
  .trc-input-sm, .trc-select-sm, .trc-select-inline,
  .trc-side-search .trc-input {
    font-size: 16px;
  }

  /* 16px type in a 26px box would clip; give the small variants room. */
  .trc-input-sm, .trc-select-sm { min-height: var(--trc-h-input); }
}

@media (hover: none) {
  /* The grey flash on tap is a browser default that reads as a rendering fault
     next to the app's own :active states, which already answer the touch. */
  a, button, label, summary, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Removes the legacy 300ms double-tap-to-zoom wait, on controls only. The
     statute text keeps pinch-zoom and every other gesture untouched — a reader
     who wants the Thai larger must still be able to get it. */
  button, .trc-btn, .trc-tabbar a, .trc-header-nav a {
    touch-action: manipulation;
  }
}

/* App chrome is furniture, not content: a long press on it should not offer to
   select and copy it. Provision text, notes and every field stay selectable. */
.trc-header, .trc-tabbar, .trc-tabbar-icon, .trc-playbar-controls {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* --------------------------------------------------------- installed only */

/*
 * Installed there is no reload button, so an accidental pull-to-refresh at the
 * top of a provision (Android; iOS does not do this in standalone) would throw
 * playback position away with no way to ask for it back. `contain` still scrolls
 * normally — it only stops the gesture escaping to the browser.
 */
.trc-standalone,
.trc-standalone body {
  overscroll-behavior-y: contain;
}

/*
 * A standalone window has no address bar to show where a tap went, so an
 * off-site link leaving for the browser is the one navigation worth marking.
 * public/, admin/ and the reader link off-site in exactly one place — the
 * "ที่มา" source link under a provision — and this is what tells you it leaves.
 */
.trc-standalone a[target="_blank"]::after,
.trc-standalone a[rel~="external"]::after {
  content: " ↗";
  font-size: 0.85em;
  color: var(--trc-text-3);
}