/* The public site: the pages a stranger sees.
 *
 * The theme variables live inline in templates/public_base.html, because the
 * whole page is painted with them and a linked stylesheet arrives too late to
 * stop a flash of the wrong theme.
 *
 * Self-hosted, single file, no fonts and no scripts beyond the theme toggle.
 * A page about handling health data carefully should not open by making three
 * connections to somebody else.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

a { color: var(--accent); }

/* ── Header and footer ─────────────────────────────────────────────────── */

.site-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.site-brand {
  font-weight: 700; font-size: 1.05rem;
  color: var(--text); text-decoration: none;
}
.site-nav { display: flex; gap: 1.1rem; align-items: center; flex: 1; }
.site-nav a { text-decoration: none; color: var(--muted); font-size: .92rem; }
.site-nav a:hover { color: var(--text); }
.site-nav .cta {
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .3rem .7rem;
}
.site-nav .cta:hover { border-color: var(--accent); color: var(--accent); }

.site-foot {
  border-top: 1px solid var(--line);
  padding: 1.5rem;
  margin-top: 3rem;
  color: var(--muted);
  font-size: .85rem;
}
.site-foot p { margin: .35rem 0; max-width: 60rem; }

main { padding: 0 1.5rem; }

/* ── Sections ──────────────────────────────────────────────────────────── */

.hero { max-width: 42rem; margin: 3.5rem auto 3rem; }
.hero h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 1rem; }
.hero h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 1rem; }
.lede { font-size: 1.12rem; color: var(--muted); margin: 0 0 1.5rem; }
.hero-cta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.closing { margin-top: 4rem; text-align: left; }

.two-up {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr 1fr;
  max-width: 62rem;
  margin: 3rem auto;
}
.two-up h2 { font-size: 1.25rem; margin: 0 0 .75rem; }

.feature-list { max-width: 42rem; margin: 3rem auto; }
.feature-list h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.feature-list ul { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
}
.feature-list li:last-child { border-bottom: none; }

.promise {
  max-width: 42rem;
  margin: 3rem auto;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.promise h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
.promise p:last-child { margin-bottom: 0; }

.plan {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.plan-main { border-color: var(--accent); }
.plan h2 { margin-top: 0; }
.plan ul { list-style: none; margin: 1rem 0; padding: 0; }
.plan li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.plan li:last-child { border-bottom: none; }

/* Long-form legal and policy pages. Narrow on purpose: these are read, not
   scanned, and a 90-character line is read badly. */
.prose { max-width: 38rem; margin: 3rem auto; }
.prose h1 { font-size: 1.9rem; margin: 0 0 1rem; }
.prose h2 { font-size: 1.15rem; margin: 2.25rem 0 .6rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: .35rem 0; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
}

.muted { color: var(--muted); }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.button-lg {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: .7rem 1.3rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button-lg:hover { filter: brightness(1.1); }

.theme-toggle {
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); }

/* Labelled with the mode it switches TO. */
.theme-toggle .to-light { display: none; }
:root[data-theme="dark"] .theme-toggle .to-light { display: inline; }
:root[data-theme="dark"] .theme-toggle .to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .to-light { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .to-dark { display: none; }
}

/* ── Compact screens ───────────────────────────────────────────────────────
 *
 * 768px, the same breakpoint as the dashboard and the admin kit, so every
 * surface on this domain changes shape at the same width.
 */
@media (max-width: 768px) {
  .site-head { padding: .8rem 1rem; gap: .8rem; }
  .site-nav { gap: .8rem; }
  main { padding: 0 1rem; }

  .hero { margin: 2.25rem auto; }
  .hero h1 { font-size: 1.7rem; }
  .two-up { grid-template-columns: 1fr; gap: 2rem; margin: 2rem auto; }
  .promise, .plan { padding: 1.1rem; }
  .button-lg { width: 100%; text-align: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
}