/* The website at bluebibs.app: the home page, the Privacy Policy and the Terms (deploy/deploy-site.sh copies it to the
   box). The app's own colours (frontend/src/styles.css), dark when the phone or computer is. */
:root {
  --paper: #f6f7f4;
  --ink: #14211b;
  --muted: #5d6b63;
  --line: #dde3dc;
  --turf: #1e6b45;
  --bib: #f2c230;
  --bib-ink: #2b2300;
  --focus: #1f5fd6;
  /* The logo: a royal-blue bib on a chalk-white tile, with a thin grey edge on the light page */
  --logo-tile: #f3f1e8;
  --logo-bib: #2457d6;
  --logo-edge: #c4cec6;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1712;
    --ink: #eaf2ec;
    --muted: #9db0a4;
    --line: #26392e;
    --turf: #3fa56f;
    --focus: #7fb0ff;
    --logo-edge: var(--logo-tile);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.5 var(--body); }
a { color: var(--turf); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.logo { flex: none; }
.logo rect { fill: var(--logo-tile); stroke: var(--logo-edge); }
.logo path { fill: var(--logo-bib); }

/* The links at the bottom of every page */
.foot { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 0.875rem; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* Home: the app's start-up screen (logo and name), two lines and Coming soon, in the middle of the screen */
.home {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px, env(safe-area-inset-left));
}
.home main { flex: 1; width: 100%; max-width: 26rem; margin: 0 auto; padding-top: 24px; display: grid; align-content: center; justify-items: center; gap: 16px; text-align: center; }
.home h1 { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 700 2.4rem/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.home h1 .logo { width: 52px; height: 52px; }
.home .lead { margin: 4px 0 0; font: 600 1.25rem/1.3 var(--body); text-wrap: balance; }
.home .sub { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.soon { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--bib); color: var(--bib-ink); font: 600 0.95rem/1 var(--body); }
.home .foot { padding: 18px 0 22px; }

/* Privacy and Terms: the logo back home at the top, then the text in a reading column */
.top {
  display: flex;
  padding: calc(14px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
}
.top a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 700 1.15rem/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.top a:hover { text-decoration: none; }
.top .logo { width: 28px; height: 28px; }
.doc { max-width: 70ch; margin: 0 auto; padding: 28px max(20px, env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); display: grid; gap: 12px; line-height: 1.55; }
.doc h1 { margin: 0; font: 700 2.1rem/1.1 var(--display); text-wrap: balance; }
.doc .date { margin: -6px 0 0; color: var(--muted); font-size: 0.9rem; }
.doc h2 { margin: 14px 0 0; font: 700 1.35rem/1.2 var(--display); text-wrap: balance; }
.doc h3 { margin: 6px 0 0; font: 600 1.05rem/1.3 var(--body); }
.doc p, .doc ul { margin: 0; }
.doc ul { padding-left: 1.2em; display: grid; gap: 4px; }
.doc .foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); justify-items: start; text-align: left; }
.doc .foot nav { justify-content: flex-start; }