/*
 * Antechamber's legal pages. Requested by Citadel CR-044.
 *
 * WRITTEN HERE BECAUSE IT HAD TO BE. Citadel's Rule 2: each product keeps its
 * own visual identity, and nothing is shared for the sake of consistency. They
 * declined to author this on the grounds that they would write Evenbell's by
 * default, "because that is the one in front of us" — which is exactly the
 * outcome the rule exists to prevent. Evenbell is dark, serif and candlelit.
 * So is this, in a different register: warmer black, gold rather than amber,
 * and far more air.
 *
 * THE PALETTE IS THE APP'S, READ OFF `src/theme.ts` RATHER THAN EYEBALLED:
 * ink #0B0906, parchment #E8DFCE, smoke #8A7F6D, gold #C9A227, candle #E8A33D.
 * A legal page is not a room, so `CLAUDE.md`'s 12% luminance ceiling does not
 * apply — it is a document, to be read in daylight on a desktop, and text at
 * the room's brightness would be unreadable. **That is the same distinction
 * D-064 draws between the room and the cards.**
 *
 * SYSTEM FONTS ONLY, AND THAT IS A COMPANY RULE. Citadel: the page may load
 * nothing but its own stylesheet and favicon — no CDN, no @import, no web
 * fonts, no third-party anything. The app's EB Garamond and Cormorant would
 * both have to be self-hosted and sent as files, which is a separate
 * conversation and not a blocker. The stack below asks for the serifs most
 * likely to be installed and falls back to the platform's own.
 *
 * WEB-ONLY, SO IT CARRIES A LIGHT MODE TOO. Citadel asked (CR-044 §5) whether
 * these ship inside the app. They do not: `paywall.tsx` renders "Terms of use ·
 * Privacy" as PLAIN TEXT rather than links, precisely because no URL exists
 * yet, and it will link out to these once there is one. So they are read in a
 * browser, by somebody who may well have light mode on, and `prefers-color-
 * scheme` is honoured rather than assumed away.
 *
 * THE SELECTOR LIST IS EXACTLY WHAT THE TWO PAGES USE — html, body, h1, h2, p,
 * ul, li, strong, em, a, br, div, and three classes: .updated, .summary,
 * .footer. Citadel read it out of the markup and it matched.
 */

:root {
  --ink: #0b0906;
  --parchment: #e8dfce;
  --smoke: #8a7f6d;
  --gold: #c9a227;
  --rule: #2a2318;

  --page: var(--ink);
  --text: var(--parchment);
  --quiet: var(--smoke);
  --accent: var(--gold);
  --hairline: var(--rule);
  --panel: #14100b;
}

/*
 * LIGHT MODE IS NOT AN AFTERTHOUGHT AND NOT A NEGATION. A legal page is often
 * opened from a store listing in the middle of the afternoon. Inverting the
 * dark palette gives grey-on-grey; these are chosen so the page reads as ink
 * on old paper rather than as a dark theme with the lights turned up.
 */
@media (prefers-color-scheme: light) {
  :root {
    --page: #f4efe4;
    --text: #1b150d;
    --quiet: #6a5f4d;
    --accent: #8a6a12;
    --hairline: #ddd2bb;
    --panel: #ece4d3;
  }
}

html {
  background: var(--page);
  /* The app's own measure. A legal page read at 100 characters a line is a
     legal page nobody finishes. */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--page);
  color: var(--text);
  font-family: 'EB Garamond', Garamond, 'Hoefler Text', 'Times New Roman', Times, serif;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 34rem;
  padding: 3.5rem 1.5rem 6rem;
}

h1 {
  color: var(--text);
  font-family: Cormorant, 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

/*
 * THE DATE LINE. Deliberately quiet and deliberately present: a legal page with
 * no visible date is a legal page nobody can tell has been revised, and
 * `terms.html` is going to be revised once more when the launch offer gets an
 * end date.
 */
.updated {
  color: var(--quiet);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.04em;
  margin: 0 0 2.75rem;
}

h2 {
  color: var(--accent);
  font-family: Cormorant, 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  margin: 3rem 0 0.75rem;
  text-transform: uppercase;
}

/* A hairline above each section, so the page has joints without boxes. The
   app's furniture lost its boxes in D-117 for the same reason. */
h2::before {
  border-top: 1px solid var(--hairline);
  content: '';
  display: block;
  margin-bottom: 1.4rem;
  width: 100%;
}

p {
  margin: 0 0 1.15rem;
}

/*
 * THE SUMMARY BOX. Citadel: ".summary carries weight on both pages — it is the
 * box a reader meets first, and on your privacy policy it is the first thing a
 * Play reviewer reads."
 *
 * A LEFT RULE RATHER THAN A FILLED PANEL. A filled box on a dark page reads as
 * a warning; this is the opposite — it is the reassuring part, and the whole
 * argument of the privacy policy is that there is less here than you expect.
 */
.summary {
  background: var(--panel);
  border-left: 2px solid var(--accent);
  margin: 0 0 2.5rem;
  padding: 1.35rem 1.5rem 0.35rem;
}

.summary p {
  margin-bottom: 1rem;
}

.summary p:last-child {
  margin-bottom: 1rem;
}

ul {
  margin: 0 0 1.15rem;
  padding-left: 1.3rem;
}

li {
  margin-bottom: 0.5rem;
}

li::marker {
  color: var(--accent);
}

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

em {
  font-style: italic;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.18em;
}

a:hover,
a:focus {
  text-decoration-color: var(--accent);
}

/*
 * FOCUS IS VISIBLE, AND IT IS NOT THE BROWSER DEFAULT. A gold outline on this
 * page; the default blue is the one colour in the world that does not belong
 * anywhere near it. Keyboard users get a ring either way, which is the part
 * that matters.
 */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.footer {
  border-top: 1px solid var(--hairline);
  color: var(--quiet);
  font-size: 0.9rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
}

/*
 * NARROW SCREENS. A person reading this on a phone has almost certainly come
 * from the app or from the Play listing, which makes it the likelier case
 * rather than the edge one.
 */
@media (max-width: 34rem) {
  body {
    font-size: 17px;
    padding: 2.5rem 1.25rem 4rem;
  }

  h1 {
    font-size: 1.85rem;
  }

  h2 {
    font-size: 1.15rem;
    margin-top: 2.5rem;
  }

  .summary {
    padding: 1.15rem 1.15rem 0.25rem;
  }
}

/* Printing a legal page is a thing people do, and a black background is not.
   Ink on white, hairlines kept, the summary rule preserved. */
@media print {
  :root {
    --page: #fff;
    --text: #000;
    --quiet: #444;
    --accent: #000;
    --hairline: #999;
    --panel: #f2f2f2;
  }

  body {
    font-size: 11pt;
    max-width: none;
    padding: 0;
  }

  a {
    text-decoration: underline;
  }
}