/* kemo-legal: one stylesheet for every app's legal pages. Mobile first, light + dark. */
:root {
  color-scheme: light dark;
  --bg: #fbfaf7;
  --surface: #f1efe8;
  --text: #1b1c1a;
  --muted: #484a45;
  --line: #d6d3c9;
  --link: #0b5a47;
  --accent: #0b5a47;
  --ph-bg: #fff0b3;
  --ph-text: #3a2c00;
  --note-bg: #fdf3e1;
  --note-line: #b5650d;
  --focus: #1d4ed8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121412;
    --surface: #1c1f1c;
    --text: #ecebe6;
    --muted: #b9bab3;
    --line: #3a3d38;
    --link: #8fdcc2;
    --accent: #8fdcc2;
    --ph-bg: #4d3d00;
    --ph-text: #ffeaa3;
    --note-bg: #2b2114;
    --note-line: #e3a35a;
    --focus: #93b4ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  overflow-wrap: break-word;
}
main, .site, footer { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
main { padding-bottom: 2.5rem; }

a { color: var(--link); text-underline-offset: 0.18em; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--bg); padding: 0.5rem 1rem; }
.skip:focus { left: 1rem; z-index: 1; }

.site {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--text); }
.lang {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.875rem;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600;
}

h1 { font-size: 1.875rem; line-height: 1.2; margin: 1.5rem 0 0.5rem; letter-spacing: -0.01em; }
h2 { font-size: 1.3125rem; line-height: 1.3; margin: 2.25rem 0 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.25rem; }
p, ul, ol { margin: 0.5rem 0 1rem; }
li { margin: 0.3rem 0; }
.lead { font-size: 1.125rem; }
.meta { color: var(--muted); font-size: 0.9375rem; margin: 0 0 1rem; }

.notice {
  background: var(--note-bg); border-left: 4px solid var(--note-line);
  padding: 0.75rem 1rem; border-radius: 6px; margin: 1rem 0 1.5rem;
}
.box { background: var(--surface); border-radius: 10px; padding: 0.75rem 1rem; margin: 1rem 0; }
blockquote { margin: 1rem 0; padding: 0.75rem 1rem; background: var(--surface); border-left: 4px solid var(--accent); border-radius: 6px; }
mark.ph { background: var(--ph-bg); color: var(--ph-text); padding: 0 0.25em; border-radius: 3px; font-weight: 600; }

.table { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.9688rem; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); }
thead th { background: var(--surface); }
tr:last-child td { border-bottom: 0; }

.pages { list-style: none; padding: 0; }
.pages li { margin: 0; border-bottom: 1px solid var(--line); }
.pages a { display: block; padding: 0.875rem 0; min-height: 44px; font-weight: 600; }
.pages span { display: block; color: var(--muted); font-weight: 400; font-size: 0.9375rem; }

footer { border-top: 1px solid var(--line); padding-top: 1rem; padding-bottom: 2rem; color: var(--muted); font-size: 0.9375rem; }
footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
footer li { margin: 0; }
footer a { display: inline-block; padding: 0.4rem 0; }
.box h2:first-child { border: 0; margin-top: 0.25rem; padding-top: 0; }
caption { caption-side: top; text-align: left; padding: 0.5rem 0.75rem; color: var(--muted); font-size: 0.9375rem; }

/* Phones: each table row becomes a card, the column name sits above each value. */
@media (max-width: 40rem) {
  .table { overflow: visible; }
  table { min-width: 0; }
  table, tbody, tr, td, caption { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
  tr:last-child { border-bottom: 0; }
  td { border: 0; padding: 0.2rem 0.75rem; }
  td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
  caption { border-bottom: 1px solid var(--line); }
}