/* One stylesheet for every page. Colours are the app's own Home set (AppColorPalette, X15 in the
   app's repo). No web fonts: a site whose privacy page promises nothing is collected should not hand
   every visitor's address to a font host. No inline styles anywhere, because _headers' CSP forbids
   them. */
:root {
  --ground: #FBF7F0;
  --raised: #FFFEFB;
  --sunk: #F2EBE0;
  --ink: #2A2520;
  --ink-muted: #6E655C;
  --rule: rgba(90, 60, 30, 0.16);
  --action: #1F5EBD;
  --fill: #FCE7A8;
  --fill-ink: #5A3C1E;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 2.25rem;
  --small: 0.875rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1B1B1D;
    --raised: #2C2C30;
    --sunk: #202023;
    --ink: #F2F2F0;
    --ink-muted: #A1A1A6;
    --rule: rgba(255, 255, 255, 0.12);
    --action: #8AB4FF;
    --fill: #5A4A1E;
    --fill-ink: #FCE7A8;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--step-0)/1.6 var(--font-text);
}
img { max-width: 100%; height: auto; }
a { color: var(--action); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 3px; }

/* The column every page reads in. */
.page {
  max-width: 44rem;
  margin: 0 auto;
  padding-block: 1.25rem 4rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 2.75rem;
}
/* Grid children start at min-width auto, so one long unbreakable piece would widen the whole column
   past a phone's screen. */
.page > * { min-width: 0; }

/* The bar at the top: the app's name, home. */
.site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}
.wordmark img { width: 28px; height: 28px; border-radius: 7px; }
.site-bar nav { display: flex; gap: 1.25rem; font-size: var(--small); }
.site-bar nav a { color: var(--ink-muted); text-decoration: none; font-weight: 500; }
.site-bar nav a:hover, .site-bar nav a[aria-current="page"] { color: var(--ink); }

header.title { display: grid; gap: 0.75rem; }
h1 {
  margin: 0;
  font: 700 var(--step-3)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 {
  margin: 0;
  font: 650 var(--step-2)/1.25 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3 { margin: 0; font-size: var(--step-1); line-height: 1.35; }
.updated { margin: 0; font-size: var(--small); color: var(--ink-muted); }
.lead { margin: 0.25rem 0 0; font-size: var(--step-1); line-height: 1.55; max-width: 38rem; }
section { display: grid; gap: 0.75rem; }
p, ul, ol, dl { margin: 0; max-width: 65ch; }
ul, ol { padding-left: 1.25rem; display: grid; gap: 0.4rem; }

/* An iOS path, the way Settings and Files name a place: Settings › iCloud › … */
.path {
  white-space: nowrap;
  padding: 0.05em 0.4em;
  border-radius: 0.35em;
  background: var(--sunk);
  font-weight: 500;
}

/* A blank to fill in before the site goes live. */
.fill {
  background: var(--fill);
  color: var(--fill-ink);
  padding: 0.05em 0.35em;
  border-radius: 0.3em;
  font-weight: 600;
}

/* The home page: the icon, the name, one sentence of what it is, and the Support and Privacy pages. No feature
   list (the reader's call, 2026-11-07). */
.page.home {
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 2rem;
}
.hero { display: grid; gap: 1rem; justify-items: center; }
.home .lead { margin: 0; color: var(--ink-muted); max-width: 26rem; text-wrap: balance; }
.hero img { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 10px 30px rgba(90, 60, 30, 0.18); }
.hero h1 { font-size: var(--step-3); }
.home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; font-size: var(--small); }
.home-links a { color: var(--ink-muted); }
.home-links a:hover { color: var(--ink); }

/* The privacy page's inventory: what, where, who can read it. A table on a wide screen, a stack of
   entries on a phone. */
.inventory {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--raised);
  overflow: hidden;
}
.inventory table { width: 100%; border-collapse: collapse; }
.inventory th, .inventory td {
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--rule);
}
.inventory thead th {
  border-top: 0;
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--sunk);
}
.inventory tbody th { font-weight: 600; width: 30%; }
.inventory td:last-child { width: 24%; }
@media (max-width: 560px) {
  .inventory thead { display: none; }
  .inventory table, .inventory tbody { display: block; }
  .inventory tr { display: grid; gap: 0.35rem; padding: 0.9rem 1rem; border-top: 1px solid var(--rule); }
  .inventory tbody tr:first-child { border-top: 0; }
  .inventory th, .inventory td { display: block; padding: 0; border: 0; width: auto; }
  .inventory tbody th { width: auto; }
  .inventory td:last-child { width: auto; }
  .inventory td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
}

/* Support's one way to reach us. */
.contact {
  display: grid;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--raised);
}
.contact .address { font-size: var(--step-1); font-weight: 600; }

footer.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--small);
  color: var(--ink-muted);
}
footer.site-foot a { color: var(--ink-muted); }