/* FAQ page only (proposal docs/axiom/pages/proposals/faq.md, 2026-10-22): the white search band under the hero, the search
   row that follows the reader on a wide desktop, and the six question groups in the page's dark panel. Everything shared (the
   header, .shead, .acc accordion, .pills, .dsec, the CTA band) comes from css/site.css; every size here is a --t-* token and
   every colour a site.css token. */

/* ---- [01] band: tag and "Search the answers" on white, right under the hero */
.faq-find { padding-top: clamp(48px, 6vw, 96px); padding-bottom: 0; }   /* the search row follows at once */
.faq-find__head { margin-bottom: clamp(16px, 2vw, 28px); }
/* no side paragraph, so the heading may run on; only where .shead is a grid (below 1024px css/site.css stacks it flush left) */
@media (min-width: 1024px) {
  .faq-find__head > h2 { grid-column: 4 / 13; }
}

/* ---- the search row: the field and the topic chips. Hidden without JavaScript (nothing would filter). */
.faq-tools { position: relative; z-index: 5; background: var(--bg); padding-block: 12px; margin-bottom: clamp(32px, 4vw, 56px); }
.faq-search {
  display: flex; align-items: center; gap: 8px; max-width: 720px;
  padding: 6px 6px 6px 22px; background: var(--bg); border: 1px solid var(--line-3); border-radius: 999px;   /* --line-3: a control's edge needs 3:1 on white */
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq-search:focus-within { border-color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-ink); }   /* the site's focus colour, as a 2px ring round the whole field */
.faq-search:has(.circ:focus-visible) { border-color: var(--line-3); box-shadow: none; }   /* the button draws its own ring: one ring at a time */
.faq-search input {
  flex: 1; min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--t-lead); color: var(--ink);
}
.faq-search input::placeholder { color: var(--ink-num); }
.faq-search input::-webkit-search-cancel-button { cursor: pointer; }
.faq-search .circ { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.faq-search .circ:hover { background: var(--ink-2); border-color: var(--ink-2); }   /* white on --ink-2: 7.5:1 */
/* 6px keeps a chip's whole focus ring (3px offset + 2px) inside the row when it scrolls sideways. The chips are the shared
   .pill (site.css: 44px targets, the 3:1 edge, the one pressed design with its tick) at 16px side padding, so the seven still
   fit one row from 1280px (see the sticky row below). */
.faq-chips { --pill-x: 16px; margin-top: 8px; padding-block: 6px; }

/* ---- the dark panel: six groups, each a .shead row (number, name, one line) over its questions */
.faq-group + .faq-group { margin-top: clamp(64px, 8vw, 128px); }
.faq-group__head { margin-bottom: clamp(24px, 3vw, 40px); }
/* a group whose every question a search or chip has hidden goes with them (no script) */
.faq-group:not(:has(.acc__item:not([hidden]))) { display: none; }
/* the question is an h3 (outline: h1 hero, h2 per group, h3 per question). On this page the question row is set at H4
   (28/24/22) instead of the shared accordion's H6 (20/20/18, css/site.css .acc__item > summary, as Marketplace's FAQ block
   keeps): one size, set once on the summary, which the h3 inherits, so the number and the circle are placed from the same
   size and nothing in the row is measured against the shared H6. The face and weight (Space Grotesk 700) are the shared
   heading rule's. */
.faq .acc__item > summary { align-items: start; padding-block: clamp(20px, 2.2vw, 28px); font-size: var(--t-h4); line-height: 1.2; }
.faq .acc__item > summary h3 { font-size: inherit; line-height: inherit; text-wrap: balance; }
.faq .acc__n { padding-top: calc((var(--t-h4) - var(--t-small)) * 0.6); }   /* the number centres on the question's first line (both lines 1.2) */
.faq .acc__icon { margin-top: calc((1.2em - 44px) / 2); }                   /* the 44px circle centres on the question's first line */
/* the open question's circle in the brand gold (owner: no blue on the site); the shared hover fill still wins while hovered */
.dsec .acc__item[open] > summary .circ { border-color: var(--gold); color: var(--gold); }
.dsec .acc__item > summary:hover .circ { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.faq-empty { padding-block: 8px; }
.faq-empty a { color: var(--on-dark); border-bottom: 1px solid currentColor; }

/* no JavaScript: every question shows, grouped; the search row would filter nothing, so it is not shown */
html:not(.js) .faq-find, html:not(.js) .faq-tools { display: none; }

/* wide desktop: the search row stays under the header while the reader scrolls the answers (layout, not motion). From 1280px
   the seven chips fit one row, so the row is 146px tall (12 + 58 + 8 + 6 + 44 + 6 + 12); below that the chips wrap and a
   stuck row would cover over a third of a laptop screen, so it scrolls with the page. The header hides on the way down
   (css/site.css .hdr.is-hidden) and the row rises to the top with it, at the header's own 0.4s so no gap opens between the
   two (it follows the shared header; the reduced-motion rule makes it instant). A focused, deep-linked or filtered question
   lands under the row, not behind it: the scroll margin here (html's scroll-padding 100px + 150px = 250px, below the row's
   230px bottom) and js/faq.js for keyboard focus and for results the filter moves above the reader. */
@media (min-width: 1280px) {
  .faq-tools { position: sticky; top: var(--hdr); transition: top 0.4s var(--ease); }
  body:has(> .hdr.is-hidden:not(.is-open):not(:focus-within)) .faq-tools { top: 0; }
  .faq-wrap, .faq-group, .faq .acc__item, .faq .acc__item > summary, .faq-empty { scroll-margin-top: 150px; }
}
/* phone: one row of chips that scrolls sideways, edge to edge; the field keeps its 44px button beside the text */
@media (max-width: 767px) {
  .faq-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .faq-chips::-webkit-scrollbar { display: none; }
  .faq-chips .pill { flex: none; white-space: nowrap; }
  .faq-search { padding-left: 16px; }
}