/* Shared styling for the Boh legal pages.
 *
 * Palette taken from the app's own design system so the pages look like the product:
 *   #FAC6DB -> #EC9ABF  strawberry-milk pink ramp   (Sources/DesignSystem/BackgroundTheme.swift)
 *   #BE9EEC -> #664CA0  the orb's lilac gradient    (tools/render_orb.py)
 *   #4E4148 / #8F7F87   primary / secondary ink     (Sources/DesignSystem/ModalKit.swift)
 *
 * Deliberately self-contained: no CDN, no web fonts, no scripts. These pages are linked
 * from inside the app and from the App Store listing, so they must render for someone on a
 * bad connection behind a strict network, and must not leak a visit to a third party.
 */

:root {
  --pink-top: #fac6db;
  --pink-bottom: #ec9abf;
  --card: #f8eef1;
  --ink: #4e4148;
  --ink-soft: #8f7f87;
  --accent: #9b6aa8;
  --accent-deep: #664ca0;
  --border: rgba(78, 65, 72, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 4rem;
  background: linear-gradient(180deg, var(--pink-top) 0%, var(--pink-bottom) 100%) fixed;
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--card);
  border-radius: 1.25rem;
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem) 3rem;
  margin-top: 2.5rem;
  box-shadow: 0 1.5rem 3rem rgba(62, 42, 102, 0.14);
}

header.brand { text-align: center; margin-bottom: 2.5rem; }

/* The orb, drawn in CSS rather than shipped as an image — keeps the page one file. */
.orb {
  width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    #be9eec 5%, #9e7ad8 40%, #7e5fbf 70%, var(--accent-deep) 100%);
  box-shadow: 0 0.5rem 1.25rem rgba(62, 42, 102, 0.3);
}

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; letter-spacing: -0.005em; }
h3 { font-size: 1.02rem; margin: 1.75rem 0 .5rem; color: var(--accent); }
.tagline { color: var(--ink-soft); margin: 0; }
.updated { color: var(--ink-soft); font-size: .9rem; margin-top: .75rem; }

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

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* Wide tables must scroll inside their own box — the page itself never scrolls sideways. */
.table-scroll { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .94rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--ink-soft); font-weight: 600; }

blockquote {
  margin: 1.5rem 0; padding: .9rem 1.1rem;
  background: rgba(155, 106, 168, .08);
  border-left: 3px solid var(--accent);
  border-radius: .4rem;
}
blockquote p { margin: 0; }

code { background: rgba(78, 65, 72, .07); padding: .1rem .3rem; border-radius: .25rem; font-size: .9em; }

ul, ol { padding-left: 1.35rem; }
li { margin: .35rem 0; }

nav.pagelinks { text-align: center; margin-top: 2.5rem; font-size: .95rem; }
nav.pagelinks a { margin: 0 .6rem; }

footer { text-align: center; color: rgba(78, 65, 72, .55); font-size: .85rem; margin-top: 3rem; }

@media (max-width: 30rem) {
  .wrap { margin-top: 1rem; padding: 1.75rem 1.15rem 2.25rem; border-radius: 1rem; }
  h1 { font-size: 1.55rem; }
}

.todo {
  background: #ffe08a; color: #6a4a00; padding: .05rem .35rem;
  border-radius: .25rem; font-weight: 600; font-size: .93em;
}