/* Standalone pages (privacy.html, 404.html), built on the tokens in styles.css. They show
   both languages and must work without JavaScript, so the dark tokens are repeated here
   for the system preference (verify.mjs checks they match styles.css). page-prefs.js
   sets data-theme from the saved choice when JavaScript runs. */
html {
  color-scheme: light;
}
html[data-theme='dark'] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #0b0f19;
    --white: #111827;
    --surface-raised: #1e293b;
    --surface-hover: #334155;
    --ink: #f8fafc;
    --muted: #94a3b8;
    --subtle: #8391a7;
    --lede: #cbd5e1;
    --line: #1e293b;
    --line-strong: #334155;
    --green: #60a5fa;
    --primary-strong: #93c5fd;
    --primary-soft: rgba(59, 130, 246, 0.16);
    --on-accent: #0b0f19;
    --acid: #34d399;
    --emerald-ink: #6ee7b7;
    --emerald-soft: rgba(16, 185, 129, 0.16);
    --orange: #fbbf24;
    --warning-ink: #fcd34d;
    --warning-surface: rgba(245, 158, 11, 0.14);
    --panel-green: #0d1321;
    --grid-line: rgba(100, 116, 139, 0.12);
    --grid-major: rgba(100, 116, 139, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 56px -12px rgba(0, 0, 0, 0.7);
  }
}

.page {
  max-width: 1040px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.page-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}
.page-brand .brand-mark {
  width: 32px;
  height: 32px;
}
.page-languages {
  display: flex;
  gap: 18px;
  font: 500 12px var(--mono);
  letter-spacing: 0.04em;
}
.page-languages a {
  color: var(--muted);
}
.page-languages a:hover {
  color: var(--green);
}
.page-main {
  flex: 1;
  padding: 48px 0 64px;
}
/* Two languages: side by side on wide screens, stacked on narrow ones. The reader's
   language comes first (page-prefs.js sets html[lang]). */
.bilingual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.bilingual.stacked {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  gap: 48px;
}
html[lang='es'] .bilingual > [lang='es'] {
  order: -1;
}
.page-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}
.page-main h1,
.page-main .page-title {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 14px;
}
.page-main h3 {
  font-size: 18px;
  margin: 32px 0 8px;
}
.page-main p,
.page-main li {
  color: var(--lede);
  line-height: 1.7;
}
.page-main p + p {
  margin-top: 12px;
}
.page-main ul {
  padding-left: 20px;
  margin: 10px 0 0;
}
.page-main li + li {
  margin-top: 6px;
}
.page-main p a:not(.btn),
.page-main li a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--green) 35%, transparent);
  text-underline-offset: 3px;
}
.page-main p a:not(.btn):hover,
.page-main li a:hover {
  text-decoration-color: currentColor;
}
.page-main .page-code {
  font: 600 14px var(--mono);
  letter-spacing: 0.08em;
  color: var(--green);
  margin: 0 0 16px;
}
.page-lead {
  font-size: 17px;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.page-note {
  font: 12px var(--mono);
  color: var(--subtle);
  margin-top: 32px;
}
.page-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 22px 0 28px;
  border-top: 1px solid var(--line);
  font: 12px var(--mono);
  color: var(--subtle);
}
.page-footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.page-footer a:hover {
  color: var(--green);
}

@media (max-width: 760px) {
  .page {
    padding: 0 16px;
  }
  .bilingual {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-main {
    padding: 32px 0 48px;
  }
  .page-card {
    padding: 24px 20px;
  }
}