/* Help page (FAQ groups, policy summaries) and the 404 page */

/* ---------- Search ---------- */
.faq__search { margin-top: var(--s-6); max-width: 560px; display: grid; gap: var(--s-2); }
.faq__search-row { position: relative; }
.faq__search-row > svg { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); stroke: var(--ink-3); fill: none; stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.faq__search-row .input--line { padding-left: 1.875rem; }
.faq__search-row.has-value .input--line { padding-right: 3.5rem; }
.faq__search-row .input--line::-webkit-search-cancel-button, .faq__search-row .input--line::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.faq__clear { position: absolute; right: 0; top: 50%; min-height: 36px; padding: 0 var(--s-1); transform: translateY(-50%); color: var(--ink-3); transition: color var(--t-fast); }
.faq__clear:hover { color: var(--ink); }
.faq__count { min-height: 1.4em; }

/* ---------- Layout: sticky nav + groups ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.faq > * { min-width: 0; }
@media (min-width: 900px) {
  .faq { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-9); align-items: start; }
  .faq__nav { position: sticky; top: calc(var(--header-h-compact) + var(--s-6)); }
}
.faq__nav ul { display: flex; gap: var(--s-4); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-bottom: 1px solid var(--line); }
.faq__nav ul::-webkit-scrollbar { display: none; }
.faq__nav a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-2) 0; font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); white-space: nowrap; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color var(--t-fast), border-color var(--t-fast); }
.faq__nav a:hover { color: var(--ink); }
.faq__nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 900px) {
  .faq__nav ul { flex-direction: column; gap: 0; overflow: visible; margin-inline: 0; padding-inline: 0; border-bottom: 0; border-left: 1px solid var(--line); }
  .faq__nav a { min-height: 40px; padding: var(--s-2) var(--s-4); border-bottom: 0; margin-bottom: 0; margin-left: -1px; border-left: 1px solid transparent; }
  .faq__nav a[aria-current] { border-left-color: var(--ink); }
}

.faq__body { display: grid; gap: var(--s-8); max-width: 760px; }
.faq__group { scroll-margin-top: var(--s-5); }
.faq__group > h2 { margin-bottom: var(--s-5); }
.faq__q { font: inherit; line-height: inherit; letter-spacing: 0; text-wrap: initial; }
.faq__q .acc__trigger { line-height: 1.35; }

.faq__policy { display: grid; gap: var(--s-3); }
.faq__policy > h2 { margin-bottom: var(--s-1); }
.faq__policy > p:not(.mono) { color: var(--ink-2); }
.faq__policy .link { font-size: inherit; }

.faq__empty { display: grid; gap: var(--s-2); padding: var(--s-6) 0; border-block: 1px solid var(--line); }

/* ---------- Still need help ---------- */
.faq__help { display: grid; gap: var(--s-5); padding-top: var(--s-7); border-top: 1px solid var(--line); }
@media (min-width: 800px) { .faq__help { grid-template-columns: 1fr auto; align-items: end; gap: var(--s-8); } }
.faq__help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
/* Sprite arrows inside .btn/.link carry no stroke rule in components.css, so give them one here. */
.faq__help .arrow, .notfound__links .arrow { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 404 ---------- */
.notfound__inner { display: grid; grid-template-rows: auto 1fr; min-height: 60svh; }
.notfound__block { display: grid; gap: var(--s-4); align-content: center; justify-items: start; padding-block: var(--s-7); }
.notfound__code { color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; margin-bottom: var(--s-2); }
.notfound__block h1 { margin-top: var(--s-2); }
/* The three links are the page's primary navigation, so each gets a 44px box (--tap): 11px of padding above the text, 13px below (the .link's own 2px underline offset plus 11px), and the underline is pulled back up so it still sits 2px under the text. The margins around the row give those 11px back, so the rhythm is unchanged. */
.notfound__links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: calc(var(--s-2) - 11px); }
.notfound__links li { display: flex; }
.notfound__links .link { min-height: var(--tap); padding-block: 11px 13px; }
.notfound__links .link::after { bottom: 11px; }
.notfound__block .btn { margin-top: calc(var(--s-3) - 11px); }