/* ─────────────────────────────────────────────────────────────────────
   FAQ Aggregator — Wave 118
   Search + chip filter + permalinks + print mode.

   All colors via DESIGN.md tokens with fallbacks (`var(--token, fb)`)
   so a missing-token regression keeps the page functional. Avoid raw
   hex everywhere except in :focus-visible/print/match-highlight where
   accessibility outweighs the token-only rule.
   ───────────────────────────────────────────────────────────────────── */

/* Top toolbar holding search input + match counter + master toggles */
.faq-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 20px 0 12px;
}
.faq-toolbar__search {
  flex: 1 1 280px;
  position: relative;
}
.faq-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  font-size: 15px;
  background: var(--surface, #14171f);
  border: 1px solid var(--border, #1c1f29);
  border-radius: var(--radius, 12px);
  color: var(--text, #f0f2f8);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.faq-search-input:focus {
  border-color: var(--accent, #59a8ff);
  box-shadow: 0 0 0 3px rgba(89, 168, 255, .15);
}
.faq-search-input::placeholder { color: var(--muted, #8494ae); }

.faq-toolbar__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted, #8494ae);
  pointer-events: none;
}

.faq-toolbar__count {
  color: var(--muted2, var(--muted, #8494ae));
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.faq-toolbar__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.faq-toolbar__btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--surface, #14171f);
  border: 1px solid var(--border, #1c1f29);
  border-radius: var(--radius-sm, 8px);
  color: var(--text, #f0f2f8);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.faq-toolbar__btn:hover {
  border-color: var(--accent, #59a8ff);
  color: var(--accent, #59a8ff);
}
.faq-toolbar__btn:focus-visible {
  outline: 2px solid var(--accent, #59a8ff);
  outline-offset: 2px;
}

/* Category chip row */
.faq-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 28px;
}
.faq-chip {
  padding: 7px 13px;
  background: var(--surface, #14171f);
  border: 1px solid var(--border, #1c1f29);
  border-radius: var(--radius-pill, 100px);
  color: var(--text, #f0f2f8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.faq-chip:hover { border-color: var(--accent, #59a8ff); color: var(--accent, #59a8ff); }
.faq-chip[data-active="1"] {
  background: var(--accent, #59a8ff);
  border-color: var(--accent, #59a8ff);
  color: var(--white, #ffffff);
}
.faq-chip:focus-visible {
  outline: 2px solid var(--accent, #59a8ff);
  outline-offset: 2px;
}
.faq-chip__count {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

/* Question row — wraps existing <details.faq-item> with hide hooks */
.faq-row { display: block; }
.faq-row[hidden] { display: none !important; }

/* Match highlight span — yellow background, dark text (single
   exception to token-only rule for legibility regardless of theme). */
.faq-match-highlight {
  background: var(--warning, #f5c842);
  color: var(--background, #0c0e16);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* Permalink button next to question */
.faq-q-permalink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs, 4px);
  color: var(--muted, #8494ae);
  cursor: pointer;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.faq-q-permalink-btn:hover,
.faq-q-permalink-btn:focus-visible {
  background: var(--surface-2, #1b1f2b);
  border-color: var(--border-2, #252a37);
  color: var(--accent, #59a8ff);
  outline: none;
}
.faq-q-permalink-btn[data-copied="1"] {
  color: var(--success, #3dd68c);
}

/* Stats footer */
.faq-stats-footer {
  margin-top: 40px;
  padding: 16px 20px;
  background: var(--surface, #14171f);
  border: 1px solid var(--border, #1c1f29);
  border-radius: var(--radius, 12px);
  color: var(--muted2, var(--muted, #8494ae));
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.faq-stats-footer strong {
  color: var(--text, #f0f2f8);
  font-weight: 600;
}

/* Anchor highlight when arriving via #faq-… URL */
:target.faq-row > .faq-item,
.faq-row > .faq-item:target {
  border-color: var(--accent, #59a8ff);
  box-shadow: 0 0 0 3px rgba(89, 168, 255, .15);
}

/* Mobile */
@media (max-width: 600px) {
  .faq-toolbar { flex-direction: column; align-items: stretch; }
  .faq-toolbar__actions { margin-left: 0; }
  .faq-chip { font-size: 12px; padding: 6px 10px; }
  .faq-toolbar__btn { padding: 7px 10px; font-size: 12px; }
}

/* Print mode — hide chrome, expand all answers */
@media print {
  .faq-toolbar,
  .faq-category-chips,
  .faq-q-permalink-btn,
  .faq-stats-footer {
    display: none !important;
  }
  .faq-row[hidden] { display: block !important; }
  .faq-item { break-inside: avoid; page-break-inside: avoid; }
  .faq-item__a { display: block !important; }
  /* Force <details> open in print */
  details.faq-item,
  details.faq-item[open] {
    display: block !important;
  }
  details.faq-item > .faq-item__a {
    display: block !important;
  }
}