/* Public legal pages — /privacy.html and /terms.html.
 *
 * Load order is tokens.css -> site.css -> legal.css. These pages are part of
 * the PUBLIC site, so they sit on the same void_black ground, use the same
 * derived layer (--surface-*, --hairline, --tap-min, --gutter, --radius-xl) and
 * the same footer as the landing page. Only the long-form document furniture
 * below is specific to them.
 *
 * They used to live under the hidden pitch directory and carried pitch.css's
 * light-ground styling plus the password gate. Neither applies now: an app
 * store reviewer following a privacy-policy URL has to land on a readable
 * public page, not a password prompt and not a different-looking site.
 *
 * Mobile-first, same breakpoints as site.css: base, 22.5rem, 48rem, 64rem.
 */

/* header ------------------------------------------------------------------- */

.legal-header {
  flex: 0 0 auto;
  padding-block: 0.5rem;
}

.legal-header__home {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--tap-min);
  text-decoration: none;
  color: var(--ice-white);
}

/* Dark ground -> COLOUR mark (brand.json rules.background_variant.dark).
 * 48px of art is exactly brand.json rules.min_mark_px, and the 25% clear space
 * is added outside it with content-box, same technique as the landing page. */
.legal-header__mark {
  --art: 48px;
  box-sizing: content-box;
  display: block;
  width: var(--art);
  padding: calc(var(--art) * 0.25);
  flex: none;
}

.legal-header__mark img {
  width: 100%;
}

.legal-header__name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.legal-header__home:hover .legal-header__name {
  color: var(--signal-cyan);
}

/* document ----------------------------------------------------------------- */

.legal-main {
  flex: 1 0 auto;
  padding-bottom: clamp(2rem, 7vw, 3.5rem);
}

.backlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--ice-white);
  text-decoration: underline;
  text-decoration-color: rgba(52, 212, 220, 0.55);
  text-underline-offset: 4px;
}

.backlink:hover {
  color: var(--signal-cyan);
  text-decoration-color: var(--signal-cyan);
}

.doc {
  padding: clamp(1.25rem, 5vw, 2.75rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: 0 18px 45px rgba(11, 13, 19, 0.45);
}

.doc__title {
  font-size: clamp(1.6rem, 6.5vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ice-white);
  text-wrap: balance;
}

.doc__meta {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-faint);
}

/* Status notice at the top of each document. Soft violet wash, rounded on all
 * four corners — the friendlier shape the rest of the site now uses. */
.doc__notice {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(116, 47, 201, 0.35);
  border-radius: var(--radius-md);
  background: rgba(51, 20, 85, 0.35);
  font-size: 0.9rem;
  color: var(--text-soft);
}

.doc__notice strong {
  color: var(--ice-white);
}

.doc__toc {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  background: rgba(19, 20, 25, 0.75);
  border: 1px solid var(--hairline);
}

.doc__toc > strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.doc__toc ol {
  margin-top: 0.5rem;
  padding-left: 1.3rem;
  font-size: 0.92rem;
}

.doc__toc li {
  margin-top: 0.1rem;
}

/* Contents links are dense, so they get a smaller tap box than 44px on purpose
 * — they are a convenience index, and every target is also reachable by
 * scrolling. The block padding still gives ~34px, well clear of a mis-tap. */
.doc__toc a {
  display: inline-block;
  padding-block: 0.32rem;
  color: var(--silver);
  text-decoration: underline;
  text-decoration-color: rgba(194, 193, 193, 0.3);
  text-underline-offset: 3px;
}

.doc__toc a:hover {
  color: var(--signal-cyan);
  text-decoration-color: var(--signal-cyan);
}

.doc__body {
  max-width: 72ch;
}

/* scroll-margin so an anchored heading is not hidden under the top of the
 * viewport when a Contents link jumps to it. */
.doc__body h2,
.doc__body h3 {
  scroll-margin-top: 1.5rem;
  color: var(--ice-white);
}

.doc__body h2 {
  margin-top: 2rem;
  font-size: 1.14rem;
  font-weight: 700;
}

.doc__body h3 {
  margin-top: 1.3rem;
  font-size: 1rem;
  font-weight: 700;
}

.doc__body p,
.doc__body ul {
  margin-top: 0.7rem;
  font-size: 0.96rem;
  color: var(--text-soft);
}

.doc__body ul {
  padding-left: 1.15rem;
}

.doc__body li {
  margin-top: 0.4rem;
}

.doc__body li::marker {
  color: rgba(116, 47, 201, 0.9);
}

.doc__body strong {
  color: var(--ice-white);
  font-weight: 600;
}

/* bright_violet fails contrast as body-copy ink on the void ground (~2.7:1),
 * so document links are ice_white with a cyan underline (~15:1 / 10:1) and go
 * fully cyan on hover. The violet stays where it belongs: fills and edges. */
.doc__body a {
  color: var(--ice-white);
  text-decoration: underline;
  text-decoration-color: rgba(52, 212, 220, 0.55);
  text-underline-offset: 3px;
  /* Long addresses must wrap rather than push the card wide on a phone. */
  overflow-wrap: anywhere;
}

.doc__body a:hover {
  color: var(--signal-cyan);
  text-decoration-color: var(--signal-cyan);
}

/* An in-document callout (the children's-privacy note in the policy). */
.doc__body .callout {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid rgba(52, 212, 220, 0.5);
  border-radius: var(--radius-md);
  background: rgba(19, 20, 25, 0.8);
  font-size: 0.92rem;
}

@media (min-width: 48rem) {
  .legal-header {
    padding-block: 0.75rem;
  }

  .doc__body p,
  .doc__body ul {
    font-size: 1rem;
  }
}

@media (min-width: 64rem) {
  .doc__body h2 {
    font-size: 1.2rem;
  }
}