/* Shared stylesheet for the standalone legal pages (privacy.html,
   terms.html) — deliberately NOT app.css. Those two pages must render
   correctly with zero JS and zero dependency on the SPA's own load
   order (they're the pages Google Cloud's OAuth consent screen links to
   directly, and a crawler/reviewer should see real content instantly),
   so they get their own small, self-contained sheet rather than pulling
   in ~160KB of Workshop app styling for a handful of paragraphs. Palette
   values are copied from app.css's :root block (--bg/--surface/--accent/
   --text/etc) — kept in sync by eye, not a shared import, since these
   two files have no build step that could @import across directories
   the way the SPA's own CSS could. */

:root {
  --bg: #eef1ef;
  --surface: #ffffff;
  --border: #d7ded9;
  --text: #14202a;
  --text-dim: #4b5a63;
  --text-faint: #6c7a76;
  --accent: #0e6c64;
  --accent-2: #159c8e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.65;
}

.legal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}

.legal-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  flex-shrink: 0;
}

.legal-brand-name {
  font-family: 'Big Shoulders Display', 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.2px;
}

.legal-back {
  margin-left: auto;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.legal-back:hover { text-decoration: underline; }

main.legal-doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.legal-doc h1 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 800;
  margin: 0 0 6px;
}

.legal-effective {
  color: var(--text-faint);
  font-size: 13.5px;
  margin: 0 0 36px;
}

.legal-doc h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 34px 0 10px;
  color: var(--accent);
}

.legal-doc p {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 15px;
}

.legal-doc strong { color: var(--text); }

.legal-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 56px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
}

.legal-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.legal-footer a:hover { text-decoration: underline; }