/* bubbleup.gg/privacy — the policy page.
 *
 * An ADDENDUM to style.css, exactly like demo.css, pricing.css and phone.css:
 * the palette, the mono stack, the fixed ground (two radial glows + hairline
 * grid), the three-dot mark and the chip all come from there unchanged, so this
 * page cannot drift away from the other four by being edited on its own.
 *
 * WHY THE DOCUMENT PRIMITIVES ARE REPEATED HERE, A FOURTH TIME. `.wrap`,
 * `.head`, `.brand`, `.sec`, `.h`, `.copy` and `.foot` are now in demo.css AND
 * pricing.css AND phone.css AND this file, and the hoist into a shared page.css
 * is the right shape and is still not done here. phone.css spells out why:
 * demo.css's `.wrap` carries a max-width clamp derived from 16:9 pane maths and
 * a fixed contact pill, which is that page's geometry and not a page's
 * geometry, so the hoist is a REWRITE of a walked surface with a browser gate
 * on it — its own change, on its own evidence. A fourth copy makes that hoist
 * MORE worth doing, not less; it is written down in the lane report rather than
 * smuggled in here. Every value below is copied from phone.css (which copied
 * pricing.css) rather than re-invented, EXCEPT the reading width — see `.doc`.
 *
 * NO COPY IS IN THIS FILE, and there is no `content:` string anywhere in it.
 * Every user-facing word on this page is in privacy.html, authored by Fable and
 * pasted verbatim. A stylesheet that can print a word is a stylesheet that can
 * add one — and on a policy page that is not a style question, it is a legal
 * one: a sentence a reader sees has to exist in the document that is served.
 *
 * NO PRICE. `tools/pricing/test` fails on a `$<digit>` anywhere under `site/`,
 * and the Purchases section names the merchant of record rather than a number. */

/* style.css locks the landing page to one viewport with a physics field in it.
   This is a document. */
html,
body {
  height: auto;
  min-height: 100%;
}
body {
  overflow: visible;
}

.wrap {
  position: relative;
  /* phone.css's outer width, unchanged — it is the chrome's width on every page
     here, and the head and foot below are the chrome. The READING column is
     narrower and is `.doc`'s job, not this one's. */
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  /* FINDING 98 ROUND 2: 0 at the top, because the head is no longer in here.
     The air above it is `.head-wrap`'s now (style.css), the same
     `clamp(28px, 2.4vw, 52px)` this line used to spend, so nothing on the page
     moved by a pixel. */
  padding: 0 22px clamp(80px, 5vw, 120px);
}

/* ---------- the head: the mark, home, and the Beta badge ---------- */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: clamp(18px, 1.5vw, 30px);
  border-bottom: 1px solid var(--line);
}
/* FINDING 94: the gap, the wordmark and the mark are `style.css`'s `.brand`
   rules now — one size for this header on all four document pages, off `--ui`.
   What used to be here was a flat 10px gap, a 17px mark and a
   `clamp(19px, 1.1vw, 26px)` wordmark, which is why a 5K screen got this page's
   1280x800 header. */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg);
  text-decoration: none;
}
.brand:hover {
  color: #fff;
}

/* The head's right cluster: the two nav doors (`a.chip.to`, style.css) and, at
   the end of them since finding 98, the purple door into the live demo
   (`a.chip.go`). Held together so `.head`'s `space-between` has two children to
   push apart rather than four to strand — the `Beta` badge left this cluster in
   finding 98 and stands beside the wordmark now, in `.head-start`. The gap is
   `style.css`'s (finding 94): 1.2 of `--ui`, which is the flat 12px that stood
   here at the old floor — `.head`'s own 16px tightened one step, because the
   doors belong to each other more than any of them belongs to the brand across
   the rule. The wrap and the right-alignment are style.css's (finding 98). */
.head-end {
  display: flex;
  align-items: center;
}

/* ---------- the reading column ----------
 *
 * The ONE measurement on this page that is not copied from a sibling. Every
 * other page here lays out cards, frames or panes and wants the wrap's full
 * width; this one is nothing but running text, and running text set to 1100px
 * of a mono face is unreadable — the eye loses the line on the way back. So the
 * column is capped where `.copy`'s own `max-width: 68ch` already caps a
 * paragraph, and the cap moves to the container so the HEADINGS sit on the same
 * left edge and the same right edge as the lines under them. */
.doc {
  display: block;
  max-width: 68ch;
}

/* ---------- sections, and the type the site already uses ---------- */
.sec {
  padding-top: clamp(34px, 2.6vw, 56px);
}
.h {
  margin: 9px 0 10px;
  font-size: clamp(19px, 2.6vw, 27px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.copy {
  max-width: 68ch;
  margin-bottom: 18px;
  color: var(--fg-2);
  font-size: clamp(13px, 0.7vw, 16px);
  line-height: 1.62;
}

/* A section heading is a rung below the page's own h1 — phone.css's
   `.sec.feature .h` size, on the same scale. The hairline above each one is
   what separates a section from the one before it; the first `.sec` after the
   title block gets it too, which is what closes the title block off. */
.sec h2.h {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--fg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* `.sec.item`, a CLASS in the markup, rather than `.sec:has(> h2.h)`. The
   `:has()` selector would say the same thing without the attribute — and would
   say nothing at all in a browser that does not implement it, which on a legal
   page means the section rules silently vanish for that reader. phone.css marks
   its own repeated sections with `.feature` for the same reason. */
.sec.item {
  margin-top: clamp(18px, 1.8vw, 30px);
  padding-top: clamp(22px, 1.9vw, 36px);
  border-top: 1px solid var(--line);
}

/* ---------- links in the body ----------
 *
 * Three of them, and all three are the point of the sentence they are in: two
 * external policies a reader is entitled to go and read, and the address that
 * reaches a person. Underlined rather than coloured-only — a policy page is
 * read by people who are looking for exactly these, and hue alone is the one
 * affordance a colour-blind reader does not get. */
.copy a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--purple);
  text-underline-offset: 3px;
}
.copy a:hover {
  color: #fff;
  text-decoration-color: var(--cyan);
}
.copy a:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* ---------- foot ----------
 *
 * demo.css's `.foot`, value for value: a home link and one small line beside
 * it. On this page the small line is the effective date. */
.foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(52px, 3vw, 72px);
  padding-top: clamp(20px, 1.3vw, 28px);
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: clamp(10px, 0.55vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.foot a {
  color: var(--fg-2);
  text-decoration: none;
}
.foot a:hover {
  color: var(--fg);
}