/* The things that separate "a web page on a phone" from "an app".
   None of it is decoration: each line removes a specific tell. */

:root {
  color-scheme: light dark;
  --ink: #111; --dim: #666; --line: #e5e5e5; --bg: #fff; --accent: #ff2d6f;
  /* The notch and the home indicator, so content never hides under either. */
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#f2f2f2; --dim:#9a9a9a; --line:#2a2a2a; --bg:#121212; }
}

* { box-sizing: border-box; }

html {
  /* Stops iOS enlarging text when the phone is turned sideways. */
  -webkit-text-size-adjust: 100%;
  /* No bounce at the ends of the page - the single clearest giveaway that
     something is a web page rather than an app. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* dvh, not vh: vh is the wrong height while the browser's own bars are
     sliding away, which is exactly when somebody is looking. */
  min-height: 100dvh;
  /* Grey flash when a finger lands on anything tappable. */
  -webkit-tap-highlight-color: transparent;
  padding-top: var(--top);
  padding-bottom: var(--bottom);
}

/* Text can be selected where selecting it is the point, and not where a long
   press should feel like a press. */
body { -webkit-user-select: none; user-select: none; }
p, h1, h2, li, .selectable { -webkit-user-select: text; user-select: text; }

a, button { -webkit-touch-callout: none; }

/* Anything tappable gets a real target and answers immediately. */
a.cta, button {
  min-height: 44px;
  touch-action: manipulation;
  transition: transform .12s ease, opacity .12s ease;
}
a.cta:active, button:active { transform: scale(.98); opacity: .9; }

img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}