/*
 * The app's palette and shapes, so a page opened from the app looks like it
 * came from the same place. The colours are `ticket`, `board` and the ink in
 * apps/mobile/src/theme.ts, and the admin panel uses the same six. Light only,
 * like the app.
 *
 * Nunito comes from this site, never from Google Fonts: a font fetched from
 * Google hands every reader's IP address to Google, which a German court has
 * already called a GDPR breach. Cut to Latin and Latin Extended-A, which
 * covers English and Polish, from the app's own TTFs.
 */
@font-face {
  font-family: Nunito;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/nunito-bold.woff") format("woff");
}
@font-face {
  font-family: Nunito;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/nunito-black.woff") format("woff");
}

:root {
  color-scheme: light;
  --ink: #4A3B31;
  --muted: #6E6157;
  --paper: #FFF9EE;
  --kraft: #F3E3C3;
  --sun: #FFD66E;
  --board: #F4EFE6;
  --white: #FFFFFF;
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  padding: 1.5rem 1rem 5rem;
  max-width: 46rem;
  font: 700 16px/1.6 Nunito, ui-rounded, -apple-system, system-ui, sans-serif;
  color: var(--ink);
  background: var(--board);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-underline-offset: 2px; }

/*
 * The bar at the top of every page: the way back to the front page on the
 * left, the other language on the right, where people look for it.
 */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.75rem;
}
.home, .lang {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 900;
  text-decoration: none;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.home { padding: .3rem .9rem .3rem .4rem; font-size: 1.05rem; background: var(--paper); }
.home img { width: 30px; height: auto; }
.lang { padding: .4rem 1rem; font-size: .95rem; background: var(--white); }
.home:active, .lang:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* The title and the dates. */
h1 { font-weight: 900; font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .4rem; }
.lede { color: var(--muted); margin: 0 0 1.25rem; font-size: .95rem; }
.intro { margin-bottom: 1.5rem; }

h2 {
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 2.5rem 0 .75rem;
  padding-top: 1.25rem;
  border-top: 2px dashed rgba(74, 59, 49, .35);
  scroll-margin-top: 1rem;
}
h3 { font-weight: 900; font-size: 1.05rem; margin: 1.5rem 0 .4rem; scroll-margin-top: 1rem; }
b, strong { font-weight: 900; }
p, li { margin: 0 0 .75rem; }
ul, ol { padding-left: 1.25rem; }
code { background: var(--kraft); padding: .1rem .35rem; border-radius: 6px; font-size: .9em; }

/*
 * Numbered clauses, written as text rather than drawn by CSS counters, so a
 * decision can cite "clause 5.2" and the number is still there when the page is
 * copied, printed or read aloud.
 */
.clause { display: flex; gap: .6rem; }
.clause > .n { flex: none; min-width: 2.4rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* A list inside a clause lines up under the clause's text, not its number. */
.clause + ul, .clause + ol { margin-left: 3rem; }

/*
 * Everything you can tap is a button, the same rule the app follows, drawn the
 * way the app draws one: white, a thick ink outline and a hard shadow straight
 * down. The footer is written as links with middots between them on every
 * page, so the paragraph's own text is sized to nothing, which hides the dots,
 * and the links get their size back as buttons.
 */
.button, .rule + p a {
  display: inline-block;
  padding: .45rem 1rem;
  margin: 0 .4rem .6rem 0;
  color: var(--ink);
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink);
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.3;
  text-decoration: none;
}
.button:active, .rule + p a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.rule + p { font-size: 0; }
.actions { margin: .25rem 0 1rem; }

/*
 * A ticket, as on the map: cream paper, a kraft strip with a dashed edge, a
 * thick outline and a hard shadow. The table of contents is one, made of rows
 * that are each a full-width tap target, so it reads as a set of controls and
 * not as underlined text.
 */
.toc ol, .card, .table {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink);
}
.toc { margin: 0 0 2rem; }
.toc ol { list-style: none; padding: 0; margin: 0; overflow: hidden; }
.toc li { margin: 0; }
.toc li + li { border-top: 2px solid var(--kraft); }
.toc a {
  display: flex;
  gap: .6rem;
  padding: .6rem 1rem;
  color: inherit;
  text-decoration: none;
  font-size: .95rem;
}
.toc a::after { content: "\203A"; margin-left: auto; color: var(--muted); font-weight: 900; }
.toc a:active { background: var(--kraft); }
.toc .n { color: var(--muted); min-width: 1.6rem; font-variant-numeric: tabular-nums; }

/* A boxed block for the contact details or a short summary. */
.card { padding: 1rem 1.25rem .5rem; margin: 0 0 2rem; }
.card p:last-child { margin-bottom: .5rem; }

/* Tables scroll inside their own box on a phone rather than widening the page. */
.table { overflow-x: auto; margin: 0 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: .55rem .75rem; }
th { background: var(--kraft); font-weight: 900; white-space: nowrap; border-bottom: 2px dashed var(--ink); }
tr + tr td { border-top: 2px solid var(--kraft); }

.steps { padding-left: 1.4rem; }
.steps li::marker { color: var(--muted); font-weight: 900; }
.rule { border: 0; border-top: 2px dashed rgba(74, 59, 49, .35); margin: 3rem 0 1.5rem; }
footer { color: var(--muted); font-size: .875rem; margin-top: 3rem; }

/*
 * The privacy policy and the terms are documents, so inside them a link is
 * blue underlined text in the sentence that names it, the way a reader expects
 * a legal text to cite something. The bar at the top stays the app's buttons.
 */
.doc a { color: #1A5FB4; text-decoration: underline; text-underline-offset: 2px; }
.doc a:visited { color: #613583; }
.doc .top a { color: var(--ink); text-decoration: none; }
.doc .toc ol {
  list-style: none;
  padding: 0 0 0 .25rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.doc .toc li + li { border-top: 0; }
.doc .toc a { display: inline-flex; padding: .1rem 0; }
.doc .toc .n { display: inline-block; }
.doc .toc a::after { content: none; }
.doc .toc a:active { background: none; }
.doc .rule + p { font-size: .875rem; color: var(--muted); }
.doc .rule + p a {
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
  font-weight: 700;
}
.doc .rule + p a:active { transform: none; }