/* Shared styling for the Dukara legal pages.
   Deliberately one small stylesheet with no build step and no external
   requests — these pages must render if everything else is broken. */

:root {
  --ink: #1a1c1a;
  --muted: #5b615c;
  --rule: #e2e6e3;
  --accent: #2e6f5e;
  --todo-bg: #ffe8a3;
  --todo-ink: #6b4a00;
  --bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ebe9;
    --muted: #a4aca6;
    --rule: #2f3733;
    --accent: #7fc9b3;
    --todo-bg: #6b4a00;
    --todo-ink: #ffe8a3;
    --bg: #141714;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
  max-width: 46rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .35rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 .6rem; }
h3 { font-size: 1.02rem; margin: 1.6rem 0 .4rem; }

a { color: var(--accent); }

.meta {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.lang { float: right; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: .94rem;
  display: block;
  overflow-x: auto;
}

th, td {
  border: 1px solid var(--rule);
  padding: .5rem .7rem;
  text-align: left;
  vertical-align: top;
}

th { background: color-mix(in srgb, var(--rule) 40%, transparent); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: color-mix(in srgb, var(--rule) 50%, transparent);
  padding: .1em .35em;
  border-radius: 3px;
}

/* Unfilled placeholders. Loud on purpose: if one of these reaches a
   published page, it should be impossible to miss rather than quietly
   wrong. */
.todo {
  background: var(--todo-bg);
  color: var(--todo-ink);
  font-weight: 700;
  padding: .05em .3em;
  border-radius: 3px;
}

.note {
  border-left: 3px solid var(--accent);
  padding: .1rem 0 .1rem 1rem;
  margin: 1.25rem 0;
  color: var(--muted);
}

/* Test-build download. This is the only page on the site asking the reader to
   do something rather than read something, so the button is allowed to be the
   loudest thing on it. Accent-on-background inverts cleanly in dark mode: the
   accent is light there and the background dark, so contrast holds both ways. */
.dl {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  padding: .8rem 1.7rem;
  border-radius: 8px;
  margin: .4rem 0 .5rem;
}

.dl:hover, .dl:focus { opacity: .85; }

.dl-meta {
  color: var(--muted);
  font-size: .88rem;
  margin: 0 0 .4rem;
}

ol { padding-left: 1.2rem; }

/* The app icon, shown so the home page carries the same mark as the OAuth
   consent screen. The heading stays real text beside it — an extractor
   comparing the configured app name with the one on this page needs
   something to read, which an image alone would not give it. */
.appicon {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 18px;
  margin: 0 0 1rem;
}

footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .88rem;
}

ul { padding-left: 1.2rem; }
li { margin: .3rem 0; }

/* Language toggle on the client page. Flags rather than words: the client
   reading this may not recognise the name of the other language written in
   it, and two glyphs are unambiguous at a glance. */
.langbar {
  display: flex;
  gap: .4rem;
  justify-content: flex-end;
  margin-bottom: .5rem;
}

.langbar button {
  font-size: 1.4rem;
  line-height: 1;
  padding: .25rem .45rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: .45;
}

.langbar button.active {
  opacity: 1;
  border-color: var(--rule);
}