/* THE PAGES THE APP'S MENU OPENS.
   ============================================================================
   Ritu, 2026-09-17, on the menu: "Once you make changes... how is it going to
   change the way we use the app?" and then, of the FAQ, "the moment somebody
   presses the FAQ section, it will go to a page because that will need space".

   THEY ARE PAGES, NOT PANELS, AND THAT IS THE ARCHITECTURAL HALF OF IT. Each
   category has its own URL, its own source file in shell/help/, and its own
   entry on the served-surface list. The FAQ's PDF is then generated from the
   same source as the screen, so the two cannot drift, and the drawer is six
   links rather than a script holding six documents in memory.

   THEY ARE THEMED, WHERE THE DOOR IS NOT. The door holds the daylight tokens
   whatever the reader chose, because it is a moment (app-door.css). These are
   documents somebody may read for minutes in a dark room, so they honour
   Day/Night like every desk, under the cream masthead the product keeps in
   both themes (editorial-frame.css:531).

   Loaded by help/*.html and by nothing else. */

.read {
  padding-block: var(--s-5) var(--s-7);
  padding-inline: calc((100% - var(--frame)) / 2);
}
/* 32px, weight 700, -0.025em. His pick of four rendered treatments, then
   "slightly smaller so that it fits in one line".

   WHAT THE MEASUREMENT CHANGED. At his 358px width the title column is 310px,
   and at 32px four of the six titles already sat on one line. Only two missed,
   one of them by 10px. Dropping the type to rescue those two would have shrunk
   the four that were fine, so the size stayed and the words moved instead.
   "Questions people ask" was 320px and is now "Your questions" at 221px.

   The old value was --t-6 (28px) at weight 700 and -0.03em: small, heavy and
   tight together, which is what made a title read as an app label. Only the
   tracking and the size move; the weight is the one he chose. */
.read-title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: 32px;
  font-variation-settings: "wght" 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
  color: var(--ink);
}
/* The reading measure, not the screen's. 34ch is what the door already sets
   for its own explanation; past about 70 characters the eye loses the line. */
.read p {
  margin: 0 0 var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-3);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}
.read h2 {
  margin: var(--s-5) 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-4);
  font-variation-settings: "wght" 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.read h2:first-of-type { margin-top: var(--s-4); }

/* ── THE FAQ ───────────────────────────────────────────────────────────────
   The button sits directly under the title, not at the foot. Nobody should
   have to scroll past eleven answers to find the copy they came for. */
.faq-get {
  /* NO gap and NO display here on purpose. `a:has(> .ico)` in icons.css
     already makes this inline-flex, centred, with the product's own 0.5em
     mark-to-label gap. Declaring either again is how one button drifts from
     every other button in the suite. */
  min-height: var(--touch-min);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--pill);
  background: var(--cta-fill);
  color: var(--cta-ink);
  --ico-color: currentColor;
  font-family: var(--font-display);
  font-size: var(--t-3);
  font-variation-settings: "wght" 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}
/* NO GAP RULE HERE, AND THAT IS THE POINT. The mockup drew its own download
   arrow and then needed its own spacing to make the arrow sit right. The set
   already holds that mark: `export` is the arrow-to-a-line this product puts
   on all ten of its Download buttons, and it arrives with `a:has(> .ico)`'s
   own 0.5em from icons.css. Redrawing it was the whole mistake; once the real
   mark is used there is nothing left to correct. */
.faq-get:active { transform: scale(var(--press-light)); }
/* One line under it, because a download deserves to say what it is handing
   over before the reader taps it.

   `.read .faq-size`, NOT `.faq-size`, and the extra word is the whole repair.
   `.read p` is (0,1,1) and a bare `.faq-size` is (0,1,0), so the paragraph
   rule won every property they both named: this line was rendering at 16px in
   the reading serif instead of 12px in the mono, which is why it looked like
   another sentence hanging off the button rather than a label on it. Nothing
   about the spacing was wrong; the type was. */
.read .faq-size {
  margin: var(--s-3) 0 0;
  max-width: none;
  line-height: 1.4;
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--quiet);
}

/* The contents. Eleven questions is past the number anyone scrolls, so they
   are listed once at the top and each one jumps. */
.faq-toc {
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline) solid var(--rule-soft);
}
.faq-toc li { border-bottom: var(--hairline) solid var(--rule-soft); }
.faq-toc a {
  display: grid;
  grid-template-columns: 2.2ch 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding-block: var(--s-3);
  min-height: var(--touch-min);
  align-content: center;
  font-family: var(--font-body);
  font-size: var(--t-3);
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
}
/* The numbers are the reader's place in a list of eleven, which is
   information, not decoration. */
.faq-toc .n {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .faq-toc a:hover { color: var(--accent); } }

.faq-a { margin-top: var(--s-6); }
.faq-q {
  margin: var(--s-5) 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-4);
  font-variation-settings: "wght" 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 34ch;
}