/* Shared styles for the static legal pages. Matches the terminal theme without
   depending on the React bundle, so the pages render without JS and remain
   accessible if the SPA fails to load. */

:root {
  --bg: #07111f;
  --surface: #0d1d31;
  --border: #1f3b5c;
  --text: #e6f6ff;
  --muted: #c8e1ff;       /* lifted from #9ec3e8 so muted text passes WCAG AA */
  --accent: #4a90e2;
  --accent-hover: #6ba8f5;
  --warn: #ffae42;
  --code-bg: #0b1929;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--bg);
  padding: 10px 16px; z-index: 100; font-weight: 600;
}
a.skip-link:focus { left: 12px; top: 12px; }

.legal-header {
  border-bottom: 1px solid var(--border);
  padding: 14px 24px; display: flex; justify-content: space-between; align-items: center;
}
.legal-header a { color: var(--accent); text-decoration: none; font-weight: 600; }
.legal-header a:hover, .legal-header a:focus { text-decoration: underline; }

main.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
main.legal:focus { outline: none; }

.legal-hero { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.legal-hero .eyebrow {
  display: inline-block;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 8px;
}
.legal-hero h1 { font-size: 30px; margin: 0 0 10px; line-height: 1.2; }
.legal-hero .lead { color: var(--muted); margin: 0; font-size: 16px; }
.legal-hero .meta { color: var(--muted); font-size: 12px; margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap; }

main.legal h2 { font-size: 20px; margin: 32px 0 10px; padding-top: 4px; }
main.legal h3 { font-size: 16px; margin: 22px 0 8px; }
main.legal p, main.legal li { color: var(--text); }
main.legal ul, main.legal ol { padding-left: 22px; }
main.legal li { margin-bottom: 6px; }

main.legal a { color: var(--accent); }
main.legal a:hover, main.legal a:focus { color: var(--accent-hover); }

main.legal code {
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--muted);
}

.legal-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  padding: 12px 14px;
  margin: 18px 0;
  border-radius: 0 4px 4px 0;
}
.legal-note strong { color: var(--warn); }

footer.legal-footer {
  border-top: 1px solid var(--border);
  padding: 18px 24px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
footer.legal-footer a { color: var(--accent); margin: 0 6px; }

/* Larger focus indicators for keyboard navigation (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  main.legal { padding: 20px 16px 48px; }
  .legal-hero h1 { font-size: 24px; }
}

/* Respect users who prefer reduced motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}