/* Self-hosted so the privacy page itself sends nothing to a third party. */
@font-face {
  font-family: "Jost";
  src: url("jost.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* Palette from the app's dusk theme (lib/ui/theme.dart, visible mode). */
:root {
  --top: #F5E6D8;
  --bottom: #CADCE8;
  --ink: #4A4568;
  --muted: #6F6B8E;
  --hairline: rgba(74, 69, 104, 0.2);
  --point: #E3907F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --top: #24203A;
    --bottom: #161827;
    --ink: #E9E4F2;
    --muted: #A9A4C2;
    --hairline: rgba(233, 228, 242, 0.18);
    --point: #E3907F;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bottom) linear-gradient(var(--top), var(--bottom)) fixed;
  color: var(--ink);
  font: 17px/1.6 "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

header, main, footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.mark {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

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

nav { display: flex; flex-wrap: wrap; gap: 16px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--ink); }

main { padding-top: 24px; padding-bottom: 48px; }

h1 { font-weight: 400; font-size: 30px; line-height: 1.25; margin: 16px 0 8px; }
h2 { font-weight: 500; font-size: 20px; margin: 32px 0 8px; }
h3 { font-weight: 500; font-size: 17px; margin: 24px 0 4px; }

a { color: var(--ink); }
.meta { color: var(--muted); font-size: 15px; }

table { border-collapse: collapse; width: 100%; font-size: 15px; display: block; overflow-x: auto; }
th, td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hairline); }
th { font-weight: 500; }

footer {
  padding-top: 16px;
  padding-bottom: 32px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 14px;
}
footer a { color: var(--muted); }