/* ==========================================================================
   12 FAQ — two-column accordion on the deepest surface, oversized mono index.
   Built on <details> so it opens, closes and is keyboard reachable with JS
   off. The open row takes an accent slab bar on its leading edge. 0 images.
   ========================================================================== */

.faq { background: var(--surface-sunken); }

/* the two columns are one grid at every width. As a block below 900 the two
   .faq__col children butted together and the rhythm ran 12 / 0 / 12px. */
.faq__grid { display: grid; gap: var(--grid-gap-tight); align-items: start; }
.faq__cols { display: grid; gap: var(--grid-gap-tight); align-content: start; }

.faq__item {
  --chamfer: var(--chamfer-sm);
  border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-inset);
  clip-path: var(--chamfer-clip);
  background: var(--chamfer-edge), var(--surface-page);
  border-inline-start: var(--border-width-slab) solid var(--border-hairline);
  transition: border-color var(--dur-fast) var(--ease-state), background-color var(--dur-fast) var(--ease-state);
}
.faq__item:hover { border-color: var(--border-soft); }
.faq__item[open] {
  --chamfer-edge-ink: var(--chamfer-edge-ink-accent);
  border-inline-start-color: var(--border-accent);
  background: var(--chamfer-edge), var(--surface-alt);
}

.faq__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--accordion-row-pad);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.faq__q::-webkit-details-marker { display: none; }
/* the row is chamfered, so the outline would be clipped along the diagonal */
.faq__q:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }

.faq__index {
  font-family: var(--font-mono);
  font-size: var(--text-index);
  font-weight: var(--weight-bold);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-ghost);
  transition: color var(--dur-base) var(--ease-state);
}
/* accent ink lands on the numeral, never on the question. Hovering the row
   lights its index rather than setting eight words in the accent hue. */
.faq__item:hover .faq__index { color: var(--text-accent-quiet); }
.faq__item[open] .faq__index { color: var(--text-accent); }

.faq__marker {
  display: grid;
  place-items: center;
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--text-faint);
  transition: transform var(--dur-accordion) var(--ease-state), color var(--dur-fast) var(--ease-state);
}
.faq__item[open] .faq__marker { transform: rotate(45deg); color: var(--text-accent); }

.faq__a {
  padding: 0 var(--accordion-row-pad) var(--accordion-row-pad);
  padding-inline-start: calc(var(--accordion-row-pad) + var(--text-index));
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: var(--width-measure);
}

.faq__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-stack);
  text-align: center;
}
.faq__foot-note { font-size: var(--text-body-sm); color: var(--text-muted); }

@media (min-width: 900px) {
  .faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   ONE COLUMN. Three questions do not divide into two: 2 + 1 ended the end
   column at the first item and left a hole the height of an answer beside the
   second. Three full-width rows are balanced by construction, and at this
   width the row is the same object as the .ledger rows further up the page.
   -------------------------------------------------------------------------- */
.faq--single .faq__grid { grid-template-columns: minmax(0, 1fr); }