/* Legal pages (#268): /privacy/ and /impressum/. Static, so they open without the app and without signing in.
   Colors mirror packages/tokens/theme.css; fonts are self-hosted (#298). */
@import url("/fonts/fonts.css");

:root {
  --bg: #f7f7fb;
  --fg: #1e1b2e;
  --card: #ffffff;
  --muted: #5b5872;
  --border: #e5e5ef;
  --primary: #9a4d00;
  --note: #eceaf5;
  --logo-plate: #f5df9e; --logo-de: #8a6516; --logo-ink: #2a2118; --logo-cursor: #b8862b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c28; --fg: #eeeaf2; --card: #14141e; --muted: #8e8daa; --border: #2e2e40; --primary: #ff9500; --note: #24243a;
    --logo-plate: rgba(232, 179, 58, .3); --logo-de: #f2cc6b; --logo-ink: #eeeaf2; --logo-cursor: #e8b33a;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1c28; --fg: #eeeaf2; --card: #14141e; --muted: #8e8daa; --border: #2e2e40; --primary: #ff9500; --note: #24243a;
  --logo-plate: rgba(232, 179, 58, .3); --logo-de: #f2cc6b; --logo-ink: #eeeaf2; --logo-cursor: #e8b33a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}
/* Long German compounds in headings and table cells break at syllables ("Datenschutz-erklärung"), not mid-letter;
   each article carries its lang. */
h1, h2, h3, td, th { hyphens: auto; }
a { color: var(--primary); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 820px; margin: 0 auto; padding: 16px;
}
/* The logotype of the extension popup and components/logotype.tsx, in both themes. */
.logo { display: inline-flex; align-items: baseline; font: 700 24px/1 "Manrope", "DM Sans", sans-serif; letter-spacing: -.015em; color: var(--logo-ink); text-decoration: none; border-radius: 6px; }
.logo-de { position: relative; color: var(--logo-de); background: var(--logo-plate); border-radius: .12em; padding: .1em .1em .06em; }
.logo-de svg { position: absolute; right: 0; top: 50%; width: .3em; height: 1.45em; transform: translate(50%, -50%); overflow: visible; }
.logo-de path { fill: none; stroke: var(--logo-cursor); stroke-width: 1.5; stroke-linecap: round; }
.logo-lm { margin-left: .16em; }
.langs { display: flex; gap: 4px; }
.langs button {
  font: inherit; font-size: 14px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
}
.langs button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); font-weight: 600; }

main { max-width: 820px; margin: 0 auto 48px; padding: 0 16px; }
article { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px 20px; }
@media (min-width: 640px) { article { padding: 32px 40px; } }
/* legal.js sets data-lang in <head>, before the first paint; without JS every language shows and the switch hides. */
html[data-lang="de"] article:not([lang="de"]), html[data-lang="en"] article:not([lang="en"]),
html[data-lang="ru"] article:not([lang="ru"]) { display: none; }
html:not(.js) .langs { display: none; }

h1 { font-size: 28px; line-height: 1.25; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 32px 0 8px; }
h3 { font-size: 17px; margin: 20px 0 6px; }
.stand { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.lead, .note { background: var(--note); border-radius: 12px; padding: 12px 16px; }
.objection { border: 2px solid var(--primary); border-radius: 12px; padding: 4px 16px 12px; }
.todo { background: #ffd54f; color: #1e1b2e; padding: 0 4px; border-radius: 4px; }

.table { overflow-x: auto; margin: 8px 0; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }

footer { max-width: 820px; margin: 0 auto; padding: 0 16px 32px; color: var(--muted); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; }