/* ============================================================
   content.css — the public prose pages: /about, /privacy, /support.
   ------------------------------------------------------------
   These are the only pages a signed-OUT visitor sees besides the
   sign-in screen, and the only ones Google's OAuth consent screen
   links to. They share a simple centred-column layout with a real
   header and footer, and nothing else.

   Loaded after app.css, which supplies every colour token, the
   card treatment and the button styles. This file is layout and
   typography only.

   They deliberately load NO webfont. The versions these replaced
   pulled Inter from fonts.googleapis.com, which meant the privacy
   policy itself made a third-party request on load — awkward on
   the page that tells you there are none. The system UI font is
   what the rest of the app uses anyway.
   ============================================================ */

body {
  /* No tab bar on these pages, so the space app.css reserves for one would
     just be a gap above the footer. */
  padding-bottom: 0;
}

/* ── Header ────────────────────────────────────────────────── */
.site-head {
  display: flex; align-items: center; gap: 12px;
  max-width: 780px; margin: 0 auto;
  padding: 18px calc(20px + var(--safe-left)) 18px calc(20px + var(--safe-right));
  padding-top: calc(18px + var(--safe-top));
}
.site-head .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-weight: 700; letter-spacing: -0.015em;
}
.site-head .brand img {
  width: 30px; height: 30px; border-radius: 9px;
  box-shadow: var(--shadow-sm);
}
.site-head .grow { flex: 1; }
.site-head .links { display: flex; gap: 2px; }
.site-head .links a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 12px;
  color: var(--muted); text-decoration: none; font-size: 14px;
  border-radius: var(--radius-sm);
}
.site-head .links a:hover { color: var(--text); background: var(--press); }
.site-head .links a[aria-current='page'] { color: var(--text); }

/* On a phone the nav links wrap under the brand rather than squeezing it. */
@media (max-width: 520px) {
  .site-head { flex-wrap: wrap; row-gap: 4px; }
  .site-head .grow { display: none; }
  .site-head .links { width: 100%; margin-left: -12px; }
}

/* ── Prose ─────────────────────────────────────────────────── */
.page {
  max-width: 780px; margin: 0 auto;
  padding: 8px calc(20px + var(--safe-left)) 56px calc(20px + var(--safe-right));
}

.page h1 {
  font-size: 30px; line-height: 1.2; letter-spacing: -0.03em;
  margin: 20px 0 8px;
}
.page .lede { font-size: 17px; color: var(--muted); margin: 0 0 8px; }
.page .stamp { font-size: 13px; color: var(--muted); margin: 0 0 32px; }

/* 66ch keeps lines in the comfortable 45–75 character range for reading,
   which the old 760px-at-15px layout overshot. */
.prose { max-width: 66ch; }
.prose h2 {
  font-size: 19px; letter-spacing: -0.015em;
  margin: 36px 0 10px; padding-top: 4px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 15px; margin: 22px 0 6px; }
.prose p, .prose li { color: var(--text); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--primary); }
.prose strong { font-weight: 650; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: var(--surface-2);
  border-radius: 5px; padding: 1px 5px;
}

/* A pulled-out summary at the top of a long page. */
.callout {
  padding: 16px 18px; margin: 0 0 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  background: var(--tint);
}
.callout p:last-child { margin-bottom: 0; }

/* ── Feature / FAQ cards ───────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin: 0 0 28px;
}
.grid .card { padding: 16px 18px; }
.grid .card h3 { margin: 0 0 5px; font-size: 15px; }
.grid .card p { margin: 0; color: var(--muted); font-size: 14px; }

/* <details> rather than JS-driven accordions — one less script, and it
   works with find-in-page because closed content is still searchable. */
.faq { margin: 0 0 28px; }
.faq details {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-grad);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--edge-light);
  margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 14px 18px; min-height: var(--tap);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 600; font-size: 15px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--muted); font-weight: 400; font-size: 19px;
  line-height: 1; flex: none;
}
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px solid var(--hairline); }
.faq .answer { padding: 14px 18px; }
.faq .answer p:last-child, .faq .answer ul:last-child { margin-bottom: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.actions .btn { min-width: 180px; }

/* ── Footer ────────────────────────────────────────────────── */
.site-foot {
  max-width: 780px; margin: 0 auto;
  padding: 26px calc(20px + var(--safe-left)) calc(34px + var(--safe-bottom));
  border-top: 1px solid var(--hairline);
  text-align: center; font-size: 13px; color: var(--muted);
}
.site-foot nav { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.site-foot a {
  color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px;
}
.site-foot a:hover { color: var(--text); text-decoration: underline; }

@media (min-width: 600px) {
  .page { padding-top: 16px; }
  .page h1 { font-size: 38px; }
  .grid { grid-template-columns: 1fr 1fr; }
}