/*
 * Shared styling for the three published legal pages (/terms, /privacy, /content-policy).
 *
 * These are plain static files rather than screens in the Expo app on purpose. App Review and
 * the Play Console open these URLs in a browser, often signed out and sometimes on a slow
 * connection; a legal page that requires downloading the whole app bundle to render is a page
 * that can fail to render at the exact moment it is being checked. Firebase Hosting serves a
 * real file at these paths before the catch-all rewrite to index.html, so /terms resolves here.
 *
 * Colours are the app's own (theme/palettes.ts): cosmic indigo canvas, saffron accent.
 */

:root {
  --bg: #120c2e;
  --surface: #1d1645;
  --border: #2f2663;
  --text: #f6eee1;
  --muted: #b7add8;
  --accent: #ff8a00;
  --accent-soft: rgba(255, 138, 0, 0.12);
  --max: 760px;
}

/* A light reader gets a light page. Legal text is read for a long time in one sitting and
   the store reviewers' browsers are as likely to be light as dark. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbf7f0;
    --surface: #ffffff;
    --border: #e6ded0;
    --text: #1a1230;
    --muted: #6e6779;
    --accent: #c85a00;
    --accent-soft: rgba(200, 90, 0, 0.09);
  }
}

* { box-sizing: border-box; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* A support address or a URL is one unbreakable token; at 320px one of them is wider
     than the column. Breaking it beats a page that scrolls sideways. */
  overflow-wrap: break-word;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px 96px; }

header.masthead {
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
  padding: 48px 0 32px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

h1 { font-size: 34px; line-height: 1.2; margin: 18px 0 10px; letter-spacing: -0.02em; }

.meta { color: var(--muted); font-size: 14px; margin: 0; }

.meta strong { color: var(--text); font-weight: 600; }

/* The one-paragraph plain-English summary that opens each document. Not a substitute for the
   terms below it, and says so — but it is the part most people will actually read. */
.summary {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 16px 18px;
  margin: 28px 0 8px;
  font-size: 15px;
}

.summary p { margin: 0; }
.summary p + p { margin-top: 10px; }

nav.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 32px 0 44px;
}

nav.toc h2 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

nav.toc ol { margin: 0; padding-left: 20px; }
nav.toc li { margin: 5px 0; font-size: 15px; }
nav.toc a { color: var(--text); text-decoration: none; }
nav.toc a:hover { color: var(--accent); text-decoration: underline; }

section { margin-bottom: 40px; scroll-margin-top: 24px; }

h2 {
  font-size: 22px;
  margin: 44px 0 14px;
  letter-spacing: -0.01em;
  padding-top: 4px;
}

h3 { font-size: 17px; margin: 28px 0 8px; }

p, li { color: var(--text); }

ul, ol { padding-left: 22px; }
li { margin: 7px 0; }

a { color: var(--accent); }

strong { font-weight: 650; }

/* Used where a store policy, a statute or a safety promise is being stated outright. */
.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
}

.callout.warn { border-color: var(--accent); }

.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

/* Anything that still needs a human to fill it in before publication. Deliberately loud:
   a placeholder that ships to the App Store unnoticed is worse than an ugly page. */
.fill {
  background: var(--accent-soft);
  border-bottom: 1px dashed var(--accent);
  padding: 0 4px;
  font-style: italic;
}

footer.pagefoot {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding-top: 24px;
  color: var(--muted);
  font-size: 14px;
}

/* `margin-right` on a row of three long link names overflows a 320px column; a wrapping
   flex row lets them fall onto a second line instead. */
footer.pagefoot .footlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }

@media (max-width: 600px) {
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  header.masthead { padding: 32px 0 24px; }
  .wrap { padding: 0 16px 64px; }

  /* A three-column table of prose does not survive a phone. Sideways scrolling is the usual
     answer and it is a bad one here: a reader who never drags the table never learns that
     "Why we collect it" exists. So each row becomes its own card and each cell is captioned
     with its column heading, carried in `data-label` — which is why the markup has them. */
  table { display: block; overflow-x: visible; font-size: 15px; }
  tbody, tr, td { display: block; }
  /* Dropped rather than visually hidden: once the cells are stacked they no longer line up
     under anything, so a header row has nothing left to head — each cell states its own
     column instead, in the `::before` below. */
  thead { display: none; }

  tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px 16px 14px;
    margin: 14px 0;
  }

  td { border-bottom: 0; padding: 12px 0 0; }

  td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* The first column is the row's subject — the thing being described — so it is set as the
     card's heading rather than as one more captioned field. */
  td:first-child { font-weight: 650; }
  td:first-child::before { display: none; }

  /* Room for a thumb. */
  nav.toc li { margin: 2px 0; }
  nav.toc a { display: block; padding: 7px 0; }
}

@media print {
  :root { --bg: #fff; --surface: #fff; --text: #000; --muted: #444; --accent: #000; --border: #ccc; }
  nav.toc { display: none; }
  a { text-decoration: none; }
}