/* The look shared by every page on about.co-do.app.

   It was inline in index.html while there was one page. There are two now,
   and a set of colour tokens that two files each keep their own copy of is a
   set of colour tokens that will disagree. The app's own stylesheet stays
   inside index.html for its own reasons - see PROJECT.md - and this is not
   that; this is three short documents that share a letterhead. */

/* The app's tokens, the handful this page uses, chosen by the system -
   there is nothing here to remember a preference with. --title is the
   colour of the loop in the badge above it, as in the app. */
:root {
  --page: #f5f5f0; --card: #ffffff; --line: #e0e0db;
  --ink: #1a1a1a; --title: #303F4B; --ink-soft: #666666; --ink-mute: #767672;
  --link: #0066cc; --on-link: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #16171a; --card: #1e2024; --line: #33373e;
    --ink: #e8e8e6; --title: #E2E2E2; --ink-soft: #a8aaae; --ink-mute: #85888e;
    --link: #4d9bf0; --on-link: #10141a;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--page); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.55;
  padding: 56px 20px calc(56px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
main { max-width: 560px; margin: 0 auto; }

.badge { display: block; width: 72px; height: 72px; margin-bottom: 18px; }
h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", ui-serif, serif;
  font-size: 36px; font-weight: 600; letter-spacing: -0.3px;
  color: var(--title); margin-bottom: 10px;
}
.lede { font-size: 19px; color: var(--ink-soft); margin-bottom: 26px; }

/* The one thing this page is for. */
.open {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  background: var(--link); color: var(--on-link);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.open:hover { filter: brightness(1.08); }
.open-note { margin-top: 10px; font-size: 13px; color: var(--ink-mute); }

section { margin-top: 34px; }
h2 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 10px;
}
p + p { margin-top: 12px; }
ul { list-style: none; margin-top: 12px; }
li { padding-left: 18px; position: relative; color: var(--ink-soft); }
li + li { margin-top: 8px; }
li::before { content: "\2022"; position: absolute; left: 4px; color: var(--ink-mute); }
li strong { color: var(--ink); font-weight: 600; }

/* Adding it to a home screen: each platform is a step, and the control you
   are looking for is drawn rather than named, because on a phone it is an
   icon with no label beside it. */
.note { margin-top: 12px; color: var(--ink-soft); }

/* Folded away, because the steps are three paragraphs of instructions that
   only one person in ten needs to read, and they were burying the reason to
   read them. The marker is drawn rather than the browser's own, which is a
   different shape on every platform and cannot be coloured. */
.how { margin-top: 18px; }
.how > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 7px; font-size: 14px; font-weight: 600; color: var(--link);
}
.how > summary::-webkit-details-marker { display: none; }
.how > summary::before {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.15s;
}
.how[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.how dt { font-size: 14px; font-weight: 600; margin-top: 16px; }
.how dd { color: var(--ink-soft); margin-top: 3px; }
.ui {
  display: inline-block; width: 17px; height: 17px; vertical-align: -3px;
  margin: 0 2px; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .how > summary::before { transition: none; }
}

a { color: var(--link); }
strong { font-weight: 600; color: var(--ink); }
footer {
  margin-top: 40px; padding-top: 18px; border-top: 0.5px solid var(--line);
  font-size: 13px; color: var(--ink-mute);
}

/* ---- a long document -------------------------------------------------------

   The about page is a pitch and its h2 is a small label over a short block.
   A notice somebody is reading to answer a question is not that: it needs
   headings you can scan and skip by, so .doc restyles them into real ones and
   widens the measure a little for the tables. */

.doc { max-width: 640px; }
.doc .back { font-size: 14px; }
.doc .updated { font-size: 13px; color: var(--ink-mute); margin-top: 6px; }
.doc h2 {
  font-size: 19px; font-weight: 600; letter-spacing: normal;
  text-transform: none; color: var(--ink); margin-bottom: 8px;
}
.doc h3 {
  font-size: 15px; font-weight: 600; color: var(--ink);
  margin-top: 20px; margin-bottom: 4px;
}
.doc section { margin-top: 30px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc li strong { color: var(--ink); }

/* Tables of who-sees-what read far better than the same thing as prose, and
   on a phone they have to stop being tables: each row becomes a labelled
   block rather than four words squeezed into a column. */
.doc table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.doc th, .doc td {
  text-align: left; vertical-align: top; padding: 9px 12px 9px 0;
  border-bottom: 0.5px solid var(--line); color: var(--ink-soft);
}
.doc th { color: var(--ink); font-weight: 600; font-size: 13px; }
.doc td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

@media (max-width: 560px) {
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc tr { display: block; padding: 10px 0; border-bottom: 0.5px solid var(--line); }
  .doc td { display: block; border: none; padding: 0; }
  .doc td:first-child { white-space: normal; margin-bottom: 2px; }
  .doc td + td { margin-top: 3px; }
}