/*
  SL-229 — the shared stylesheet for the mirilio.com legal pages.

  NO FONT HOST, NO CDN, NO THIRD-PARTY ANYTHING. The system font stack only —
  the same rule web/join/index.html states and the same rule the app itself
  follows (Poppins is BUNDLED, never fetched at runtime). A privacy policy that
  phones a font CDN to render would be making a request it does not disclose,
  on the one page where that is least forgivable.

  This file is EXTERNAL rather than inline because the Content-Security-Policy
  in firebase.json is `style-src 'self'` with no 'unsafe-inline' — the same
  shape the invite host uses for scripts. One stylesheet, served from the same
  origin, is what that policy permits.

  The palette is the invite landing page's, so the two owner-served surfaces
  look like one product.
*/

:root {
  color-scheme: light dark;
  --bg: #fffdf8;
  --fg: #2b2118;
  --muted: #6d6156;
  --card: #ffffff;
  --line: #ebe2d6;
  --accent: #b4532a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181410;
    --fg: #f3ece3;
    --muted: #b0a396;
    --card: #221c16;
    --line: #33291f;
    --accent: #e8825a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* System stack only: nothing is fetched to render these pages. The guard in
     test/legal/legal_pages_test.dart asserts this file declares no embedded
     typeface and references no external resource at all, so the rule is
     executable rather than a promise in a comment. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  font-size: 17px;
  /* A readable measure on a phone; the gutter never collapses. */
  padding: 0 20px 64px;
}

main,
header,
footer {
  max-width: 44rem;
  margin: 0 auto;
}

header {
  padding: 32px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-decoration: none;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 16px 0 4px;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 40px 0 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

h3 {
  font-size: 1.05rem;
  margin: 24px 0 4px;
}

.updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 8px;
}

/* The plain-language summary that opens the privacy policy. */
.summary {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0;
}

.summary h2 {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  font-size: 1.1rem;
}

.summary ul {
  margin-bottom: 0;
}

ul,
ol {
  padding-left: 22px;
}

li {
  margin: 6px 0;
}

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

code {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}

/* Owner-deliverable placeholders. Deliberately LOUD: a value left unfilled
   must be impossible to miss on the published page, because publishing one is
   worse than publishing nothing. */
.todo {
  background: #ffe9c7;
  color: #6b3b00;
  border: 1px dashed #b4532a;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  font-size: 0.95rem;
}

/* Tables are the one thing allowed to scroll sideways; the page body is not. */
.scroll {
  overflow-x: auto;
}

th,
td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--card);
  font-weight: 600;
}

footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

footer a {
  margin-right: 14px;
  display: inline-block;
}