/* ============================================================
   THE HIDEOUT — faq.html
   Page-specific styles. Loaded AFTER styles.css.
   Reuses tokens + visual language from styles.css.
   ============================================================ */

.faq-wrap { max-width: 860px; }

.faq-help {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
}
.faq-help a { color: var(--aqua); text-decoration: underline; text-underline-offset: 3px; }
.faq-help a:hover { color: var(--aqua-bright); }

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-loading,
.faq-empty {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}
.faq-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 40px 24px;
  text-align: center;
  line-height: 1.7;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.faq-item.is-open { border-color: var(--aqua-line); background: var(--surface-2); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  min-height: 44px;
  transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--aqua); }
.faq-q:focus-visible { outline: 2px solid var(--aqua); outline-offset: -2px; border-radius: var(--radius); }

.faq-q__text { flex: 1; min-width: 0; line-height: 1.4; }
.faq-q__meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.faq-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.faq-chev {
  width: 20px; height: 20px;
  color: var(--fg-muted);
  flex: none;
  transition: transform .3s var(--ease), color .2s var(--ease);
}
.faq-item.is-open .faq-chev { transform: rotate(180deg); color: var(--aqua); }

.faq-a { display: none; padding: 0 22px 20px; }
.faq-item.is-open .faq-a { display: block; animation: faqIn .3s var(--ease); }
.faq-a p {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-muted);
  white-space: pre-wrap;
}

@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .faq-item.is-open .faq-a { animation: none; }
  .faq-chev { transition: none; }
}