/* The standalone pages: landing, privacy, terms, support, about.
 *
 * Its own stylesheet, deliberately. These pages are served as themselves rather
 * than through the app shell — App Review opens them directly, a store listing
 * links straight to them, and they have to render with the app's JavaScript
 * bundle never loading at all. So they cannot use the app's CSS, which on this
 * chassis is a content-hashed asset that only exists after a build.
 *
 * Tokens are duplicated from src/styles/app.css rather than imported for the
 * same reason: one file, no dependencies, works from a bare URL. Change a colour
 * there and change it here.
 *
 * Same paper as the app: thermal pad, carbon ink, perforated tear lines. No
 * cards, no shadows, no rounded paper. Fonts are served from /fonts/ because
 * the server's CSP allows only 'self'. Courier Prime is for printed numbers
 * (prices, odds, times) and nothing else.
 */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/courier-prime-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/courier-prime-latin-700-normal.woff2') format('woff2');
}

:root {
  --pad: #ECEBE4;
  --carbon: #33326B;
  --carbon-faint: #605F87;
  --rule: #C6C4B8;
  --stamp: #B3261E;
  --won: #1E6B3A;

  --tier-low: #1E6B3A;
  --tier-medium: #9A6B00;
  --tier-high: #B3261E;
  --tier-outrageous: #8A1C7C;

  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-print: 'Courier Prime', ui-monospace, 'Courier New', monospace;

  --fs-small: 0.75rem;
  --fs-meta: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-head: 1.375rem;
  --fs-odds: 2.125rem;

  /* The names the pages' own inline styles have always used, on the paper. */
  --bg: var(--pad);
  --surface: var(--pad);
  --text: var(--carbon);
  --dim: var(--carbon-faint);
  --line: var(--rule);
  --accent: var(--carbon);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 20px 64px;
  background: var(--pad);
  color: var(--carbon);
  font: 500 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  max-width: 68ch;
  margin: 0 auto;
}

h1, h2, h3 { font-family: var(--font-body); font-weight: 700; color: var(--carbon); }
h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; }
h2 { font-size: 1.15rem; line-height: 1.3; margin: 32px 0 8px; }
h3 { font-size: 1rem; margin: 24px 0 6px; }
p, li { color: var(--carbon); }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }
strong { font-weight: 700; }

a {
  color: var(--carbon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 3px;
}

/* Printed numbers: prices, odds, returns, times. Labels stay in Barlow. */
.print {
  font-family: var(--font-print);
  font-variant-numeric: tabular-nums;
}

/* The tear line: 6px of ink, 4px of paper. Drawn with a repeating stop rather
   than `dashed`, whose dash length each browser picks. */
.perf,
.card {
  background-image: repeating-linear-gradient(90deg, var(--perf-ink, var(--rule)) 0 6px, transparent 6px 10px);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
}

/* The date a policy was last changed is the first thing a reviewer looks for
 * and the first thing an app forgets to show. */
.updated { color: var(--carbon-faint); font-size: .9rem; margin-bottom: 24px; }
/* The policy pages dim this with opacity in their own head; faded carbon is
   already faint enough, and any fainter drops under 4.5:1. */
article.policy .updated { opacity: 1; }

/* A section torn from the pad: a perforation above it, nothing around it. */
.card {
  padding: 20px 0 6px;
  margin: 0 0 16px;
}
.card > h2:first-child { margin-top: 0; }

/* The one thing on these pages that must never be missed — here, where to get
 * help with gambling. A carbon rule down the side, no box. */
.callout {
  border-left: 3px solid var(--carbon);
  padding: 4px 0 4px 16px;
  margin: 0 0 16px;
}
.callout p:last-child { margin-bottom: 0; }

.small-print {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--carbon-faint);
}

/* Rubber stamp: real text, so a screen reader reads it. */
.stamp {
  display: inline-block;
  padding: 2px 8px;
  border: 2px solid var(--stamp-ink, var(--stamp));
  color: var(--stamp-ink, var(--stamp));
  font: 700 var(--fs-head)/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  opacity: 0.88;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Inline padding widens the tap target without moving the line. */
.back { display: inline-block; margin-top: 32px; padding-block: 12px; }
footer { margin-top: 48px; color: var(--carbon-faint); font-size: .9rem; }
footer a { padding-block: 12px; }

/* An <img> with width/height ATTRIBUTES — which every image here should have,
   so the page does not jump as it loads — uses that attribute height until CSS
   says otherwise. A rule that sets only `width` therefore STRETCHES the image
   instead of scaling it: a 2360x1640 board rendered 940 wide came out 940x1640,
   and it looks like a bad screenshot rather than a bad stylesheet. These two
   declarations belong together and neither is safe alone. */
img { max-width: 100%; height: auto; }