/* Stylesheet for privacy_policy.html and eula.html.
 *
 * These two pages used to pull https://cdn.tailwindcss.com, the play CDN:
 * it ships the whole compiler to the browser and generates the CSS at runtime
 * before anything can paint. Tailwind say plainly it is not for production,
 * and these are the two pages App Store and Play review click through to, so
 * a CDN blip renders our legal pages unstyled in front of a reviewer.
 *
 * Hand-written rather than compiled: the pages between them use two dozen
 * utilities and one prose container, which is not worth a build step. The
 * utility values below are Tailwind 3's, so the pages render as they did.
 *
 * The `prose prose-lg prose-slate` classes they carried needed the typography
 * plugin, which the bare CDN script never loaded, so they had never applied
 * anything. `.legal-prose` replaces them and does the job they were meant to.
 *
 * Add a class to either template and you must add it here too.
 */

/* Preflight, reduced to what these pages depend on. */
*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 0;
  line-height: inherit;
}

h1 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

/* Layout */
.container {
  width: 100%;
}

@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

.mx-auto     { margin-left: auto; margin-right: auto; }
.max-w-3xl   { max-width: 48rem; }
.max-w-none  { max-width: none; }

/* Spacing */
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.p-8   { padding: 2rem; }
.pt-6  { padding-top: 1.5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-12 { margin-top: 3rem; }

/* Surfaces */
.bg-gray-50 { background-color: #f9fafb; }
.bg-white   { background-color: #ffffff; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-sm  { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

.border-t        { border-top-width: 1px; }
.border-gray-200 { border-color: #e5e7eb; }

/* Type */
.text-4xl    { font-size: 2.25rem; line-height: 2.5rem; }
.font-bold   { font-weight: 700; }
.text-gray-900 { color: #111827; }
.text-gray-600 { color: #4b5563; }
.text-blue-600 { color: #2563eb; }

.whitespace-pre-line { white-space: pre-line; }

.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:text-blue-800:hover { color: #1e40af; }

/* The legal text itself.
 *
 * It is one pre-line block, not marked-up headings and paragraphs, so the
 * only lever here is the block: measure and leading. `prose-lg` was what the
 * markup asked for and never got.
 */
.legal-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #334155;
}