/* ============================================================
   09 — FAQ accordion
   ============================================================ */

.faq__grid {
  display: grid;
  gap: var(--s-12);
  align-items: start;
}

/* Below the two-column breakpoint the aside dissolves so the heading and the
   closing note become siblings of the list, ordered head → list → note. */
.faq__aside { display: contents; }
.faq__main { order: 1; }
.faq__help { order: 2; }

/* Two columns: a capped 40rem accordion track keeps the hairlines close to the
   longest line of content, and space-between anchors both columns to the
   container edges instead of leaving slack on the right. */
@media (min-width: 64rem) {
  .faq__grid {
    grid-template-columns: minmax(0, 22rem) minmax(0, 40rem);
    justify-content: space-between;
    column-gap: var(--s-16);
  }
  .faq__aside {
    display: block;
    position: sticky;
    top: var(--s-24);
  }
  .faq__head {
    margin-inline: 0;
    text-align: left;
  }
  /* The "still stuck?" note belongs to the heading column — it is what gives
     the sticky rail something to hold. */
  .faq__help {
    margin-top: var(--s-10);
    padding-top: var(--s-6);
    border-top: 1px solid var(--border);
  }
}

/* ---------- The list ---------- */
/* Decoration (hairlines, open rail) bleeds past the text column by exactly the
   button's inline padding, so question text stays optically flush with the
   heading block while the rules run wider than the prose. The bleed is clamped
   against the page gutter so the rules never crowd the viewport edge. */
.faq__list {
  --faq-bleed: min(var(--s-4), calc(var(--gutter) - var(--s-3)));
  --faq-num-w: var(--s-6);
  counter-reset: faq;
  border-top: 1px solid var(--border);
  margin-inline: calc(var(--faq-bleed) * -1);
}

.faq__item {
  counter-increment: faq;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Open marker: the page's brand gradient drawn as a rail down the bleed
   gutter, bracketing the question and its answer. Transform-only. */
.faq__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--s-1);
  z-index: 0;
  background: var(--grad-brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur) var(--ease-expo);
  pointer-events: none;
}

.faq__item.is-open::before { transform: scaleY(1); }

.faq__h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* ---------- Question button ---------- */
.faq__q {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--s-8);
  align-items: baseline;
  column-gap: var(--s-4);
  padding: var(--s-6) var(--faq-bleed);
  text-align: left;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  transition: color var(--dur) var(--ease-out);
}

/* Full-bleed rows: an outer ring would sit on the viewport edge on phones and
   be clipped by body{overflow-x:hidden}. Ring inside the row instead. */
.faq__q:focus-visible {
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 calc(var(--s-1) / 2) var(--accent);
}

.faq__num {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease-out);
}

.faq__num::before { content: counter(faq, decimal-leading-zero); }

.faq__item.is-open .faq__num { color: var(--accent); }

.faq__label {
  text-wrap: pretty;
  min-width: 0;
}

@media (min-width: 40rem) {
  .faq__list { --faq-bleed: min(var(--s-5), calc(var(--gutter) - var(--s-3))); }
  .faq__q {
    grid-template-columns: var(--faq-num-w) minmax(0, 1fr) var(--s-8);
    column-gap: var(--s-5);
  }
  .faq__num { display: block; }
}

/* ---------- Chevron ---------- */
.faq__icon {
  align-self: start;
  display: grid;
  place-items: center;
  width: var(--s-8);
  height: var(--s-8);
  /* Optically centre the circle on the first line box of the label rather than
     on the top of the content box. */
  transform: translateY(calc((1lh - var(--s-8)) / 2));
  border-radius: var(--r-pill);
  color: var(--text-muted);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-900) 22%, transparent);
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

/* Guarded: :hover latches after a tap on touch devices, which would leave a
   closed question painted as if it were selected. */
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { color: var(--accent); }
  .faq__q:hover .faq__icon {
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}

.faq__item.is-open .faq__icon {
  color: var(--accent-contrast);
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.faq__chev {
  transition: transform var(--dur) var(--ease-expo);
}

.faq__item.is-open .faq__chev { transform: rotate(-180deg); }

/* ---------- Panel ---------- */
.faq__panel {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-expo);
}

.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }

.faq__panel-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--dur);
}

.faq__item.is-open .faq__panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

.faq__a {
  padding: 0 var(--faq-bleed) var(--s-6);
  max-width: 64ch;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  opacity: 0;
  transform: translateY(calc(var(--s-1) * -1));
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.faq__item.is-open .faq__a {
  opacity: 1;
  transform: none;
  transition-delay: var(--dur-fast);
}

/* The copy is written lede-first — let the type say so. */
.faq__lede {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

/* Literal product chrome quoted in the copy. */
.faq__ui {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0 var(--s-1);
  border-radius: var(--r-xs);
}

/* Answer hangs off the same edge as the question label, not the icon. */
@media (min-width: 40rem) {
  .faq__a {
    padding-inline: calc(var(--faq-bleed) + var(--faq-num-w) + var(--s-5)) var(--faq-bleed);
  }
}

/* ---------- Closing note ---------- */
.faq__help {
  max-width: 56ch;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq__panel,
  .faq__panel-inner,
  .faq__a,
  .faq__chev,
  .faq__icon,
  .faq__item::before {
    transition: none;
  }
  .faq__a { opacity: 1; transform: none; }
}