/* Shared by the public policy documents and the client document's footer.
   Keep these styles separate from the React layout and authentication routes. */
.policy-page,
.policy-footer {
  --policy-background: #f6f7fb;
  --policy-surface: #ffffff;
  --policy-text: #111827;
  --policy-muted: #4b5563;
  --policy-border: #dfe3ec;
  --policy-link: #4338ca;
  --policy-focus: #2563eb;
  color: var(--policy-text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
  .policy-page,
  .policy-footer {
    --policy-background: #0d1117;
    --policy-surface: #161b26;
    --policy-text: #e8eaf0;
    --policy-muted: #a9b0bf;
    --policy-border: #2b3242;
    --policy-link: #aab4fa;
    --policy-focus: #8fb4ff;
  }
}

/* The stylesheet has two consumers: the client and .policy-page documents. */
body:not(.policy-page) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:not(.policy-page) #root {
  display: flex;
  flex: 1;
}

body:not(.policy-page) #root > .page {
  flex: 1;
  min-height: 0;
}

.policy-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.25rem 1.5rem;
  color: var(--policy-muted);
  font-size: 0.8125rem;
}

.policy-footer p {
  max-width: 40rem;
  margin: 0 0 0.75rem;
}

.policy-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.policy-page a,
.policy-footer a {
  color: var(--policy-link);
  text-underline-offset: 0.2em;
}

.policy-page a:focus-visible,
.policy-footer a:focus-visible {
  outline: 3px solid var(--policy-focus);
  outline-offset: 4px;
  border-radius: 2px;
}

.policy-page {
  margin: 0;
  background: var(--policy-background);
  color-scheme: light dark;
}

.policy-document {
  box-sizing: border-box;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.policy-document header {
  margin-bottom: 2rem;
}

.policy-document .policy-brand {
  font-weight: 650;
}

.policy-document main {
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--policy-border);
  border-radius: 0.875rem;
  background: var(--policy-surface);
}

.policy-document h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.2;
}

.policy-document h2 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.125rem;
}

.policy-document p {
  margin: 0.75rem 0;
}

.policy-document .policy-date {
  margin: 0 0 1.5rem;
  color: var(--policy-muted);
  font-size: 0.875rem;
}

.policy-document .policy-footer {
  padding: 1.5rem 0 0;
}