/* 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; }

/* FAQ accordion — reused by faq.html. Same visual language as the
   landing page's own #landing-faq-list (app.css), duplicated here rather
   than shared, since this page deliberately carries no app.css
   dependency (see this file's own header comment). */
.faq-intro {
  color: var(--text-dim);
  font-size: 15px;
  margin: 0 0 30px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  float: right;
  color: var(--text-faint);
}

.faq-list details[open] summary::after {
  content: "\2013";
}

.faq-list p {
  margin: 10px 0 0;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
}