/* Site chrome: tokens, the header nav, the footer, and the reading pages (FAQ, legal, contact, version
   history, 404) every page of layout.leaf shares.

   Two appearances, following the system. Dark is the store screenshots' ground
   (tools/screenshot-captions.swift, `groundColors` and `headlineAccent`, direction B on dark, owner's pick
   2026-10-06). Light is its counterpart: a warm off-white warming to a faint orange at the foot of a
   band. The store orange stays the accent in both; in light it is too pale for text (2.1:1 on the
   ground), so text that is orange uses --orange-text, a darker shade of it. Every text colour below
   meets WCAG AA (4.5:1) on every ground and surface of its appearance:
     light  ink 14.4  ink-2 6.4  ink-3 5.4  orange-text 5.0  (worst case, on the band foot)
     dark   ink 16.8  ink-2 9.3  ink-3 5.9  orange-text 8.2 */

:root {
  color-scheme: light dark;
  --ground-top: #fbf9f6;
  --ground-mid: #f9f3ec;
  --ground-foot: #f7e9da;
  --surface: #ffffff;
  --ink: #1c1b1a;
  --ink-2: #57534e;
  --ink-3: #6b665f;
  --orange: #ff9500;
  --orange-text: #a34a00;
  --on-orange: #1c1b1a;
  --hairline: rgba(28, 27, 26, 0.12);
  --field-edge: rgba(28, 27, 26, 0.28);
  --closeup-edge: rgba(28, 27, 26, 0.14);
  --icon-edge: rgba(28, 27, 26, 0.12);
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --page-max: 1200px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground-top: #111014;
    --ground-mid: #1d1712;
    --ground-foot: #2a1a0d;
    --surface: #1f1c1a;
    --ink: #ffffff;
    --ink-2: #c4c0bb;
    --ink-3: #9d9892;
    --orange-text: #ff9f0a;
    --hairline: rgba(255, 255, 255, 0.14);
    --field-edge: rgba(255, 255, 255, 0.26);
    --closeup-edge: rgba(255, 255, 255, 0.16);
    --icon-edge: rgba(255, 255, 255, 0.18);
  }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground-top);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground-top);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The footer sits at the foot of the window on a short page (404, contact). */
main {
  flex: 1 0 auto;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }

a { color: var(--orange-text); text-underline-offset: 3px; }

.wrap {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The ground: a band's vertical gradient, darkest (or lightest) at the top, warming at the foot. */
.ground {
  background: linear-gradient(180deg, var(--ground-top) 0%, var(--ground-mid) 55%, var(--ground-foot) 100%);
}

/* An element hidden by its attribute stays hidden, whatever display a rule above gives its kind (the shared
   routine page shows "Open in Klemy" only on iPhone and iPad, by unhiding it). */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The App Store badge: Apple's black badge on the light ground, the white one on the dark. */
.store-badge { display: inline-block; }
.store-badge img { width: 150px; height: 50px; }

.button,
a[role="button"],
button {
  display: inline-block;
  font: 600 17px/1.2 var(--font-text);
  color: var(--on-orange);
  background: var(--orange);
  border: none;
  border-radius: 12px;
  padding: 13px 22px;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
a[role="button"]:hover,
button:hover { filter: brightness(1.06); }

/* ---------- Header ---------- */

.site-header {
  background: var(--ground-top);
  border-bottom: 1px solid var(--hairline);
}

.site-nav {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
}

.site-brand {
  font: 700 20px/1.2 var(--font-display);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-links {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 4px 22px;
}

.site-links a {
  font: 500 16px/1.75 var(--font-text);
  color: var(--ink-2);
  text-decoration: none;
}

.site-links a:hover,
.site-links a:focus-visible { color: var(--ink); }

.site-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (min-width: 720px) {
  .site-links { display: flex; gap: 28px; }
}

@media (max-width: 719px) {
  .site-nav { flex-direction: column; align-items: flex-start; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ground-top);
  border-top: 1px solid var(--hairline);
}

.site-footer__inner {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font: 400 15px/1.5 var(--font-text);
  color: var(--ink-3);
}

.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Reading pages ---------- */

.page {
  max-width: calc(760px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 56px var(--gutter) 88px;
}

.page h1 {
  font: 800 clamp(32px, 4.4vw, 44px)/1.1 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  text-wrap: balance;
}

.page h2 {
  font: 800 clamp(23px, 2.6vw, 27px)/1.2 var(--font-display);
  margin: 48px 0 12px;
}

.page h3 {
  font: 700 19px/1.3 var(--font-display);
  margin: 28px 0 8px;
}

.page p,
.page ul,
.page ol { margin: 0 0 14px; }

.page ul,
.page ol { padding-left: 1.3em; }

.page li { margin-bottom: 6px; }
.page small { color: var(--ink-3); font-size: 15px; }

.page .lead {
  font-size: 20px;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.page details {
  border-top: 1px solid var(--hairline);
  padding: 2px 0;
}

.page details:last-of-type { border-bottom: 1px solid var(--hairline); }
.page h2 + details { margin-top: 4px; }

.page summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.page summary::-webkit-details-marker { display: none; }

.page summary::after {
  content: "+";
  flex: none;
  font: 500 22px/1 var(--font-display);
  color: var(--orange-text);
}

.page details[open] summary::after { content: "\2212"; }
.page details > :not(summary) { color: var(--ink-2); }
.page details > :last-child { margin-bottom: 16px; }

/* A page header with the app's icon: version history. */
.page-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 20px;
  margin-bottom: 24px;
}

.page-head img {
  grid-row: span 2;
  width: 88px;
  height: 88px;
  border-radius: 22.37%;
  box-shadow: 0 0 0 1px var(--icon-edge);
}

.page .page-head h1 { margin: 0; }
.page-head p { margin: 0; color: var(--ink-2); font-size: 19px; }
.page-head a { font-weight: 600; text-decoration: none; }

.version-entry {
  border-top: 1px solid var(--hairline);
  padding: 24px 0 8px;
}

.version-entry header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 10px;
}

.page .version-entry h3 { margin: 0; font-size: 22px; }
.version-entry time { color: var(--ink-3); font-size: 15px; }
.version-entry ul { color: var(--ink-2); }

/* The contact form. */
.page form { display: grid; gap: 8px; }
.page label { font-weight: 600; margin-top: 12px; }

.page input[type="email"],
.page textarea {
  width: 100%;
  font: 400 17px/1.45 var(--font-text);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-edge);
  border-radius: 12px;
  padding: 12px 14px;
}

.page input[type="email"]:focus,
.page textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.page label.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

.page label.consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--orange); }
.page form button { justify-self: start; margin: 16px 0 4px; }

.notice {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-weight: 600;
}