/* THE ONE EXPLANATORY PAGE, on top of legal.css rather than instead of it.
 *
 * `how-it-works.html` is the same KIND of document as the policy pages --
 * static, no JavaScript, served out of dist/ by the Worker's asset handler,
 * so it loads when the app does not and can be read by somebody the app would
 * refuse. That is the whole reason it is a file here rather than a screen
 * inside the board: a link somebody sends has to open for a person with no
 * account, on a phone, with the app switched off.
 *
 * IT WAS TWO PAGES AND IS ONE. "How it works" listed the features and
 * "Guide & FAQ" explained how to use them, which meant every subject was
 * written down twice and a reader had to guess which half they wanted. One
 * page per subject, with the how-to under the what-it-is.
 *
 * SO IT SHARES legal.css AND ADDS TO IT. Copying that file to change a
 * handful of rules is how two documents start looking like different products
 * the first time either is edited, which is the failure its own header
 * records. What is here is what a policy page has no use for: the cream, the
 * contents strip, figures, a keyboard key and the FAQ's accordion.
 *
 * NO JAVASCRIPT ANYWHERE, INCLUDING THE ACCORDION. `<details>` is a browser
 * element, so the FAQ opens with the page's own script budget at zero, works
 * in a reader view, prints, and is reachable by keyboard without anybody
 * writing the keyboard half. A div with an onclick would be three of those
 * four things worse for no gain. */

/* ------------------------------------------------------------- the cream
 *
 * #FFFCF4 IS THE FRONT PAGE'S OWN BACKGROUND, taken from src/landing.css
 * rather than picked to look similar -- a near-match reads as a mistake the
 * moment somebody has both open. The warm greys below are that file's too:
 * the panel a chip sits on, the line around it, and the two greys the
 * landing page already uses for secondary and tertiary text. */
:root {
  --cream: #FFFCF4;
  --panel: #F6F4EC;
  --edge: #E9E1D2;
  --ink: #111111;
  --mute: #6B6B6B;
  --dim: #8A8A8A;
  /* The cork's own color, measured off the board rather than chosen: it is
     what the product is made of, so it is what a rule and a marker use. */
  --cork: #B47D54;
  /* A note's yellow. The one warm accent bright enough to mark a callout. */
  --sticky: #E9C767;
}

body { background: var(--cream); }

/* WIDER, BECAUSE THIS IS SCANNED AND A POLICY IS READ. 68ch is right for
   prose somebody works through in order; a feature list is jumped around in,
   its lists want the room, and the screenshots want more than either. */
.wrap { max-width: 78ch; }

/* --------------------------------------------------------------- headings
 *
 * A SECTION IS ANNOUNCED BY A RULE, not by size alone. There are twenty of
 * them and at legal.css's scale they read as bolder paragraphs, so a reader
 * scrolling for one goes past it. */
h2 {
  font-size: 23px;
  letter-spacing: -.01em;
  margin: 64px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
}
h1 + p + .lede { margin-top: 0; }
h3 { font-size: 16.5px; margin-top: 34px; }

/* The first h2 sits under the contents strip, which is already a divider. */
.toc + h2 { border-top: 0; padding-top: 0; margin-top: 46px; }

/* ---------------------------------------------------------- contents strip
 *
 * Wrapped chips rather than a bulleted list, because the list is twenty items
 * long and a column of twenty links is a page of its own before the page
 * starts. */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 34px 0 8px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 10px;
}
.toc a {
  font-size: 13px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--edge);
  color: #444444;
  text-decoration: none;
}
.toc a:hover { color: var(--ink); border-color: var(--cork); }
.toc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ANCHORED HEADINGS CLEAR THE TOP OF THE WINDOW. Without this a jump from the
   contents strip puts the heading hard against the edge with its first
   paragraph half off screen, which reads as having landed in the wrong
   place. */
h2[id], h3[id] { scroll-margin-top: 24px; }

/* ------------------------------------------------------------------ figures
 *
 * NO PICTURES ON THE PAGE TODAY and the rules are kept, deliberately: the
 * screenshots came out of a demo board and are being remade, so what is
 * missing is the files rather than the intention. A figure dropped in later
 * needs no second decision about how it sits.
 *
 * WHATEVER GOES BACK CARRIES ITS OWN WIDTH AND HEIGHT in the markup, or the
 * page jumps as each one arrives -- a long document reflowing under somebody
 * who is reading it is worse than no pictures at all. `height: auto` keeps
 * them fluid under that. */
figure { margin: 22px 0 26px; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--edge);
  /* The board has its own light in it, so a picture gets the faintest lift
     rather than a drawn frame -- a hard border around a photograph of a
     framed corkboard is two frames. */
  box-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 8px 24px rgba(17, 17, 17, .07);
  background: var(--panel);
}
figcaption {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
}

/* ------------------------------------------------------------------- lede */
.lede { font-size: 17px; line-height: 1.6; }

/* ------------------------------------------------------------- the callout
 *
 * legal.css has one of these already; what it does not have is a reason to
 * stand out on a cream page, where a grey panel is nearly the background. */
.callout {
  background: #FFFFFF;
  border: 1px solid var(--edge);
  border-left: 4px solid var(--sticky);
  border-radius: 8px;
  padding: 16px 18px 4px;
  margin: 22px 0;
}

/* ---------------------------------------------------------------- the FAQ
 *
 * A QUESTION LIST YOU CLICK, which is what a person expects of one and what
 * makes forty answers skimmable. `<details>` does it with no script; the
 * marker is replaced because the default triangle is drawn differently in
 * every browser and sits outside the box in some of them. */
.faq { margin-top: 18px; }
.faq details {
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #FFFFFF;
  margin-bottom: 10px;
}
.faq details[open] { background: var(--panel); border-color: var(--cork); }
.faq summary {
  display: flex;
  gap: 12px;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
/* The chevron is text rather than an image so it inherits the color and needs
   no second file. It turns rather than swapping, so the state is legible
   mid-transition. */
.faq summary::after {
  content: "\203A";
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--cork);
  transform: rotate(90deg);
  transition: transform .14s ease;
}
.faq details[open] summary::after { transform: rotate(-90deg); }
.faq summary:hover { color: var(--cork); }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 10px; }
.faq .a { padding: 0 18px 4px; }
.faq .a p { margin-bottom: 14px; }

/* A KEY, for the handful of places a gesture has a keyboard half. */
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  padding: 1px 5px;
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #FFFFFF;
  white-space: nowrap;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 1px 5px;
  border-radius: 4px;
}

.foot { border-top: 1px solid var(--edge); }

/* =================================================================== BRAND
   THE SAME LOOK AS THE REST OF THE SITE -- the sign-in screen, the pricing
   page, the emails: cream grid paper, black outlines, and the four dots of
   the logo mark as a stripe across anything that is a card. These are the
   tokens src/brand.css holds for the app; a static page cannot import that
   file, so they are written again here, and the two are meant to match. */
:root {
  --br-aqua: #66DEBD;
  --br-blue: #4FAEC8;
  --br-yellow: #F7CE4D;
  --br-orange: #EC6739;
  --br-stripe: linear-gradient(90deg,
    var(--br-aqua) 0 25%, var(--br-blue) 25% 50%,
    var(--br-yellow) 50% 75%, var(--br-orange) 75% 100%);
}
body {
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    url("/paper-squares.svg");
  background-size: 22px 22px, 22px 22px, 1056px 1056px;
}

/* The header is the site's own now -- public/site.css. */
.wrap { padding-top: 34px; }

.br-dots { display: flex; gap: 6px; margin: 0 0 18px; }
.br-dots i { display: block; width: 30px; height: 7px; border-radius: 999px; }
.br-dots i:nth-child(1) { background: var(--br-aqua); }
.br-dots i:nth-child(2) { background: var(--br-blue); }
.br-dots i:nth-child(3) { background: var(--br-yellow); }
.br-dots i:nth-child(4) { background: var(--br-orange); }

h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.stamp { color: var(--mute); font-size: 15px; }

/* A section heading carries a short stripe instead of a rule across the
   page: the brand, small, marking where each part begins. */
h2 { border-top: 0; font-weight: 800; }
h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--br-stripe);
}

/* The contents: a card with the stripe, and chips with a real outline. */
.toc {
  position: relative;
  padding: 24px 18px 18px;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 5px 5px 0 rgba(17, 17, 17, 0.9);
  overflow: hidden;
}
.toc::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: var(--br-stripe);
  border-bottom: 2px solid var(--ink);
}
.toc a { border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
.toc a:hover { background: var(--br-aqua); border-color: var(--ink); }

/* A CALLOUT IS A TIP BOX, the same as the ones in the app. */
.callout {
  position: relative;
  padding: 20px 18px 6px;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: var(--br-stripe);
}

/* Screenshots in the same outline as everything else. */
figure img { border: 2px solid var(--ink); border-radius: 14px; }

/* The questions: outlined cards, and the open one lit in aqua. */
.faq details { border: 2px solid var(--ink); border-radius: 14px; }
.faq details[open] { background: #FFFFFF; border-color: var(--ink); box-shadow: 5px 5px 0 var(--br-aqua); }
.faq summary::after { color: var(--ink); }
.faq summary:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.foot { border-top: 2px dashed rgba(17, 17, 17, 0.15); }

@media (max-width: 480px) {
  h1 { font-size: 34px; }
}