/*
 * Styles for the legal documents under /legal.
 *
 * This file keeps its original URL (/legal/legal.css) on purpose: the four
 * legal pages have been served from this path since they shipped, and the
 * app opens them with `expo-web-browser` from the consent gate
 * (`app/app/(consent)/legal-text.tsx`). Nothing that already points here
 * may break — only the look and feel changed, to match the marketing site
 * at the apex.
 *
 * The palette itself no longer lives here. It moved to `/assets/brand.css`,
 * which every page of mybabylog.net now shares, and which copies the
 * brandbook's tokens verbatim. The @import below is what keeps an already
 * cached copy of a legal page — one that links only this stylesheet —
 * rendering correctly; the pages' own markup also links brand.css directly,
 * so a fresh load never waits on the import.
 */

@import url("/assets/brand.css");

/* These pages are not only read in a desktop browser: they are read on a
   phone, in portrait, by someone being asked to accept them. The layout is
   therefore a long-form document layout, not a centred card. */

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-20);
}

/* ---- Masthead ---------------------------------------------------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-2) var(--sp-5);
  border-bottom: var(--bw-hairline) solid var(--border);
  margin-bottom: var(--sp-8);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.wordmark img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  box-shadow: var(--elev-1);
}

.masthead-switches {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* An already cached page carries only `.lang-switch`, without the shared
   `.switch-group` class the new markup adds — style both the same way so
   that copy keeps looking right. */
.lang-switch {
  display: flex;
  gap: var(--sp-1);
  padding: 3px;
  background: var(--surface-2);
  border: var(--bw-hairline) solid var(--border);
  border-radius: var(--r-full);
}

.lang-switch button,
.lang-switch a {
  appearance: none;
  text-decoration: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  padding: 4px 14px;
  border-radius: var(--r-full);
  cursor: pointer;
  min-height: 32px;
}

.lang-switch button[aria-pressed="true"],
.lang-switch a[aria-current="page"] {
  background: var(--accent-fill);
  color: var(--accent-fill-ink);
}

/* The document pages get the compact, dots-only appearance switch: they are
   chrome on a text a caregiver is being asked to accept, not a place to
   spend horizontal room. Each button still carries a real accessible name
   (`.sr-only`) and a `title`, so the colour is never the only way to tell
   them apart for anyone who can query it. */
.theme-switch-compact {
  display: flex;
  gap: var(--sp-1);
  padding: 3px;
  background: var(--surface-2);
  border: var(--bw-hairline) solid var(--border);
  border-radius: var(--r-full);
}

.theme-switch-compact button {
  appearance: none;
  border: var(--bw-thick) solid transparent;
  background: transparent;
  padding: 3px;
  border-radius: var(--r-full);
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.theme-switch-compact button[aria-pressed="true"] {
  border-color: var(--accent-fill);
}

.theme-switch-compact .dot {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  border: var(--bw-hairline) solid oklch(50% 0 0 / 0.25);
}

.theme-switch-compact .dot-light { background: linear-gradient(135deg, #A9B388, #5F6F52); }
.theme-switch-compact .dot-boy   { background: linear-gradient(135deg, #89ADC8, #305880); }
.theme-switch-compact .dot-girl  { background: linear-gradient(135deg, #FF90D5, #A9337F); }
.theme-switch-compact .dot-dark  { background: linear-gradient(135deg, #4A5240, #12170F); }

/* ---- Document ---------------------------------------------------- */

h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-2);
}

h2 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: var(--fw-bold);
  margin: var(--sp-10) 0 var(--sp-3);
  padding-top: var(--sp-5);
  border-top: var(--bw-hairline) solid var(--border);
}

h3 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  margin: var(--sp-6) 0 var(--sp-2);
}

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

p { margin: 0 0 var(--sp-4); }

ul, ol {
  margin: 0 0 var(--sp-4);
  padding-left: 22px;
}

li { margin-bottom: var(--sp-2); }

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

a {
  color: var(--accent-fill);
  text-underline-offset: 2px;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-6);
  font-size: 13px;
  color: var(--text-3);
}

.doc-meta span { white-space: nowrap; }

.lede {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--text-2);
}

/* ---- Blocks ------------------------------------------------------ */

.callout {
  background: var(--surface);
  border: var(--bw-hairline) solid var(--border);
  border-left: 3px solid var(--accent-fill);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6);
  box-shadow: var(--elev-1);
}

.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

/* A wide table must scroll inside its own box, never the page body. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--sp-6);
  border: var(--bw-hairline) solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 14px;
}

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

th {
  color: var(--text);
  font-weight: var(--fw-semibold);
  background: var(--surface-2);
  white-space: nowrap;
}

tr:last-child td { border-bottom: 0; }

/* ---- Document index (the /legal hub) ----------------------------- */

.doc-list {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.doc-list li { margin: 0; }

.doc-list a {
  display: block;
  background: var(--surface);
  border: var(--bw-hairline) solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.doc-list a:hover {
  border-color: var(--border-strong);
  box-shadow: var(--elev-3);
  transform: translateY(-2px);
}

.doc-list .doc-title {
  display: block;
  font-size: 17px;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-1);
}

.doc-list .doc-summary {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
}

/* ---- Footer ------------------------------------------------------ */

.doc-footer {
  margin-top: var(--sp-12);
  padding-top: var(--sp-5);
  border-top: var(--bw-hairline) solid var(--border);
  font-size: 13px;
  color: var(--text-3);
}

.doc-footer a { color: var(--text-3); }

/* Back to the marketing site — a legal page must never be a dead end. */
.doc-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding: var(--sp-3) var(--sp-5);
  min-height: var(--ctl-h-touch);
  border-radius: var(--r-full);
  background: var(--surface);
  border: var(--bw-hairline) solid var(--border-strong);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: var(--fw-semibold);
}

.doc-back:hover { background: var(--surface-2); }