/*
  ODOGRAPH — support and legal pages.

  Palette copied from Packages/OdoDesign/Sources/OdoDesign/Tokens.swift (the app's own
  tokens). CLAUDE.md rule 6 keeps hex literals to that file inside the app; this is a
  static web page outside the app target and cannot import it, so the values are
  duplicated with the source named.
*/
:root {
  --ground: #0a0b0d;
  --surface: #141518;
  --hairline: #26282d;
  --ink: #f2f3f5;
  --ink-dim: #a8adb6;
  --ink-mute: #71767f;
  --ember: #ff5a28;
  --measure: 44rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 6rem;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main, header, footer { max-width: var(--measure); margin: 0 auto; }

header { padding: 4rem 0 2rem; }

.mark {
  font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.18em;
  color: var(--ember);
  text-decoration: none;
}

h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.75rem 0 0.5rem; color: var(--ink-dim); }
p, li { color: var(--ink-dim); }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--ember); }

.lede { font-size: 1.15rem; color: var(--ink); }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

/* Monospace for anything a machine cares about: identifiers, country codes, licences. */
code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  color: var(--ink);
}

table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td {
  text-align: left;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
  color: var(--ink-dim);
}
th { color: var(--ink-mute); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }

nav.langs { margin: 2rem 0 0; }
nav.langs button {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 60px;
}
nav.langs button[aria-pressed="true"] { color: var(--ground); background: var(--ember); border-color: var(--ember); }

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
  color: var(--ink-mute);
}
footer a { color: var(--ink-dim); }

[hidden] { display: none !important; }

@media (prefers-color-scheme: light) {
  :root {
    --ground: #f7f8fa;
    --surface: #ffffff;
    --hairline: #dfe2e7;
    --ink: #14161a;
    --ink-dim: #4a4f57;
    --ink-mute: #6f757e;
    --ember: #d6410e;
  }
}