/* FAQ page: this page's own rules. The shared stylesheet, /styles.css,
   carries the grounds, the section spacing, the reading row, the documentation
   layout with its side navigation, the accordion, the question filter and
   every color token; /mock.css carries the drawings, the plate and the
   scenes. Nothing here redefines them. What is left is what an answer
   needs beyond a paragraph: the page's name at its full size, the lead at
   its own measure, lists and commands inside an answer, the badge insets,
   and two scenes' own steps.

   Amber appears only inside the drawings, where an agent waits for you or
   a badge reads Drift, as the drawings' own stylesheet allows; no part of
   the page's own chrome uses it. */

/* The page's name. The reading row sizes only section headings, so the
   first heading of the page takes the size every page's first heading
   has. */
.faq-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* The lead keeps its shorter measure. The reading row gives every paragraph
   in its text column the prose measure, and that rule outweighs the lead's
   own, so without this the lead would run as wide as the prose under it. */
.faq-hero .reading-body .lead {
  max-width: var(--measure-lead);
}

/* Lists inside an answer: the steps of a task and the parts of a list
   keep the reading measure, with a quiet marker so the words lead */
.acc-body ol:not([class]),
.acc-body ul:not([class]) {
  padding-left: 1.4em;
}

.acc-body ol:not([class]) > li + li,
.acc-body ul:not([class]) > li + li {
  margin-top: var(--s2);
}

.acc-body ol:not([class]) > li::marker,
.acc-body ul:not([class]) > li::marker {
  color: var(--quiet);
}

/* What each agent reports: the shared two-column list, held to the
   answer's measure so the agent's name stays near what it reports */
.acc-body .reports {
  max-width: var(--measure);
}

/* A command or a program's own message, set in the terminal's type */
.acc-body code {
  padding: 0 0.3em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  font-family: var(--mono);
  font-size: 0.92em;
  white-space: nowrap;
}

/* A scene inside an answer stands a step further from the words above it
   than one paragraph from the next, so the two read as text and picture */
.acc-body > .mock-scene {
  margin-top: var(--s5);
}

/* The Isolation badge's four states, each a small inset drawing of the
   badge beside the words that say what it means. The inset is drawn on the
   app's own header color, so the badge reads as it does in a pane. It is
   a static inset, not a scene: an icon-sized part inside a list. */
.faq-badges {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-badges li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  max-width: var(--measure);
}

.faq-inset {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0.1em 0.6em;
  border: 1px solid var(--m-split);
  border-radius: var(--radius-small);
  background: var(--m-chrome);
  color: var(--m-quiet);
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.6;
  white-space: nowrap;
}

/* The first-run scene: each of the agent's questions, and the ready prompt
   that follows them, sits at the foot of the same box, the way a terminal
   prints at its bottom line */
.faq-setup-swap {
  margin-top: auto;
}

.faq-setup-swap > * {
  align-self: end;
}

.faq-stack {
  display: grid;
  gap: 0.3em;
}

/* The HUD scene: each context gauge fills as its pane's figures count.
   The fill waits outside its bar until the pane's step, then fills over the
   same 900ms as its pane's figures count; at rest, without script or under
   reduced motion the gauge stands at its figure. */
@media screen and (prefers-reduced-motion: no-preference) {
  .faq-hud-scene.is-armed:not(.is-done) .mock-bar::before {
    transform: translateX(-100%);
    transition: none;
  }

  .faq-hud-scene.is-armed.s-c1:not(.is-done) .mock-p1 .mock-bar::before,
  .faq-hud-scene.is-armed.s-c2:not(.is-done) .mock-p2 .mock-bar::before,
  .faq-hud-scene.is-armed.s-c3:not(.is-done) .mock-p3 .mock-bar::before {
    transform: none;
    transition: transform 900ms var(--m-arrive);
  }
}

/* A contrast theme replaces the inset's ground, so its edge carries it */
@media (forced-colors: active) {
  .faq-inset {
    border-color: CanvasText;
  }
}