/* The FAQ: legal.css's look, plus section tabs, search and expandable answers. */
main.faq { width: min(880px, 100%); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- tools: search, section tabs, result count */
.faq-tools { position: sticky; top: 58px; z-index: 1; margin: 0 calc(-1 * clamp(16px, 4vw, 40px)) 8px; padding: 12px clamp(16px, 4vw, 40px) 4px;
  background: linear-gradient(180deg, rgba(7, 5, 15, 0.94) 75%, rgba(7, 5, 15, 0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.search input { width: 100%; padding: 12px 16px 12px 42px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); font: 400 1rem var(--font);
  background: rgba(255, 255, 255, 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23b9b4d6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") no-repeat 14px 50%; }
.search input::placeholder { color: #8d88ad; }
.search input:focus { outline: none; border-color: rgba(56, 243, 255, 0.6); box-shadow: 0 0 0 3px rgba(56, 243, 255, 0.15); }
.chips { display: flex; gap: 8px; margin: 12px 0 0; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a, .chips button { flex: none; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted);
  font: 600 0.88rem var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.chips a:hover, .chips button:hover { color: var(--gold-hi); border-color: rgba(232, 192, 106, 0.5); }
.chips [aria-pressed="true"] { color: #1b1203; border-color: transparent; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #c99a3c); }
.faq-count { min-height: 1.2em; margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }

/* ---- sections and questions */
.faq-sec { scroll-margin-top: 190px; }
.faq-sec[hidden] { display: none; }
.faq-sec h2 { display: flex; align-items: center; gap: 10px; margin: 36px 0 14px; }
.faq-sec h2 span { font-size: 1.1rem; }
details { margin: 0 0 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); scroll-margin-top: 190px; transition: border-color 0.2s, background 0.2s; }
details[hidden] { display: none; }
details:hover { border-color: rgba(232, 192, 106, 0.45); }
details[open] { background: rgba(56, 243, 255, 0.04); border-color: rgba(56, 243, 255, 0.35); }
summary { position: relative; display: block; padding: 16px 52px 16px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem; color: #fff; border-radius: 14px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--gold); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform 0.2s; }
details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--cyan); }
summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.a { padding: 0 20px 6px; color: #dcd8f3; }
.a > :first-child { margin-top: 0; }
.a ul, .a ol { padding-left: 22px; }
.a b { color: #fff; }
.warn { padding: 10px 14px; border-radius: 10px; background: rgba(255, 79, 216, 0.08); border: 1px solid rgba(255, 79, 216, 0.4); color: #ffd6f4; font-weight: 600; }
mark { background: rgba(232, 192, 106, 0.35); color: inherit; border-radius: 3px; padding: 0 1px; }
.faq-empty { margin: 40px 0; text-align: center; color: var(--muted); }

@media (max-width: 640px) {
  .faq-tools { top: 58px; }
  summary { padding: 14px 46px 14px 16px; font-size: 0.98rem; }
  .a { padding: 0 16px 4px; }
}
@media (prefers-reduced-motion: reduce) { details, summary::after { transition: none; } }