/* /faq/ only. The questions themselves use the site's text-thread FAQ style from
   styles.css; this is the search, the topic links and the group headings. */

.faq-page { max-width: 860px; margin: 0 auto; padding: 28px 20px 56px; }
.faq-tools {
  position: sticky; top: 72px; z-index: 5; background: var(--bg); padding: 12px 0 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.faq-search input {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 13px 16px 13px 44px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 16px 50% / 20px no-repeat;
  color: var(--ink);
}
.faq-search input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(43, 143, 217, .25); }
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.faq-jump::-webkit-scrollbar { display: none; }
.faq-jump a {
  flex: none; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  color: var(--navy); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
}
.faq-jump a:hover { border-color: var(--navy-2); }
.faq-count { margin: 6px 2px 0; font-size: .9rem; color: var(--muted); min-height: 0; }
.faq-count:empty { display: none; }

.faq-group { padding-top: 26px; scroll-margin-top: 190px; }
.faq-group[hidden] { display: none; }
.faq-group h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); display: flex; align-items: center; gap: 10px; }
.faq-n { font-size: .8rem; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.faq-page details.faq[hidden] { display: none; }
.faq-city {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 1px 7px; margin-right: 4px; vertical-align: 1px;
}
.faq-from { display: block; margin-top: 6px; font-size: .86rem; font-weight: 700; }
.faq-none { margin-top: 28px; text-align: center; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 820px) {
  .faq-page { padding: 16px 14px 44px; }
  /* The phone header is two rows tall and changes height, so the tools scroll
     away instead of sticking under it; the chips become one swipeable row. */
  .faq-tools { position: static; }
  .faq-jump { flex-wrap: nowrap; }
  .faq-group { scroll-margin-top: 110px; }
}