/* ============================================================================
   Vibe Dashboard v2 — FAQ screen
   Ported from _specs/dashboard-v2-ref.vibe/Vibe Dashboard.dc.html
   (data-screen-label="FAQ"); Sep-2026 upgrade per docs/design/design-upgrade
   (handoff-src/Vibe Dashboard.dc.html @FAQ, rows C3–C7). Reskins src/dashboard/faq.jsx's existing
   accordion — .v2-card / .v2-badge reused verbatim from styles/v2-shell.css.
   ============================================================================ */

.v2-faq-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* D37: the intro block sits 6px further off the first section (mock faq.html:3). */
.v2-faq-intro { margin-bottom: 6px; }

.v2-faq-intro-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--v-text);
}
.v2-faq-intro-sub {
  font-size: 14.5px;
  color: var(--v-text-2);
  margin: 5px 0 0;
  max-width: 760px;
  line-height: 1.5;
}

/* Section — one accordion group under a mono overline. */
.v2-faq-section {
  padding: 6px 22px 8px;
  display: flex;
  flex-direction: column;
}
.v2-faq-section-label {
  padding: 16px 0 6px;
  font-family: var(--v-font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--v-link);
}

.v2-faq-item { border-top: 1px solid var(--v-border-soft); }

.v2-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 2px;
  border: none;
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--v-text);
  text-align: left;
  cursor: pointer;
}
.v2-faq-chevron { flex-shrink: 0; color: var(--v-text-3); }
.v2-faq-chevron.is-open { color: var(--v-link); }

.v2-faq-a {
  padding: 0 2px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v-text-overline);
}
.v2-faq-a .faq-rich { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.v2-faq-a p { margin: 0; }
.v2-faq-a h4 {
  margin: 2px 0 0;
  font-family: var(--v-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-text-2);
}
.v2-faq-a strong { color: var(--v-text); font-weight: 600; }
.v2-faq-a .v2-faq-check { color: var(--v-green); }
.v2-faq-a .v2-faq-cross { color: var(--v-amber); }
.v2-faq-a a { color: var(--v-link); font-weight: 600; text-decoration: none; cursor: pointer; }
.v2-faq-a a:hover { color: var(--v-link-hover); }
.v2-faq-a code {
  font-family: var(--v-font-mono);
  font-size: 12.5px;
  background: rgba(255, 255, 255, .06);
  padding: 1px 5px;
  border-radius: 4px;
}
/* Status pills reuse .v2-badge verbatim — only add the uppercase casing this
   design uses, scoped to this screen so v2-shell.css stays untouched. */
.v2-faq-a .v2-badge { text-transform: uppercase; }

.v2-faq-a ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-faq-a li { display: flex; gap: 9px; align-items: flex-start; }
.v2-faq-a li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 8px;
  flex-shrink: 0;
  border-radius: var(--v-r-pill);
  background: var(--v-link);
}

/* Closing footnote (Sep-2026 mock, row C3). */
.v2-faq-footnote {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--v-text-3);
}

/* ---------- phone (≤640px) — v4 mobile mock ---------- */
@media (max-width: 640px) {
  /* S7 P-FQ-2: mock title 30px, wraps to two lines at 390. */
  .v2-faq-intro-title { font-size: 30px; line-height: 1.15; }
  /* S7 P-FQ-3: mock keeps the desktop side pad at 390. */
  .v2-faq-section { padding: 6px 22px 8px; }
  /* S7 P-FQ-6: mock answer bodies are plain body-alt — emphasis survives only
     on named UI terms (white, weight 400); the f4 closing line is table-body. */
  .v2-faq-a strong { font-weight: 400; color: var(--v-text-overline); }
  .v2-faq-a strong.v2-faq-term { color: var(--v-text); }
  .v2-faq-a strong.v2-faq-check { color: var(--v-green); }
  .v2-faq-a strong.v2-faq-cross { color: var(--v-amber); }
  .v2-faq-a .v2-faq-soft { font-weight: 400; color: var(--v-text-table); }
  /* S7 P-FQ-7 / P-FQ-8: status rows carry their own pills (9.5px mono,
     1px tracking, 3px 7px, radius 5) with no bullet dot, 12px row gap.
     Inline <strong> (restored desktop emphasis) dissolves so the copy flows
     as one flex item after the pill — colours still inherit through. */
  .v2-faq-a ul.v2-faq-status { gap: 12px; }
  .v2-faq-a ul.v2-faq-status li { gap: 11px; }
  .v2-faq-a ul.v2-faq-status strong { display: contents; }
  .v2-faq-a ul.v2-faq-status li::before { display: none; }
  .v2-faq-a ul.v2-faq-status .v2-badge {
    font-family: var(--v-font-mono);
    font-size: 9.5px;
    letter-spacing: 1px;
    padding: 3px 7px;
    border-radius: 5px;
  }
}