/* FAQ explorer: Ginger's interaction vocabulary in merged's neutral, bordered system.
   The display font remains confined to the existing page-hero h1 rule in site.css. */
html:has(.answers-page) { scroll-padding-top: var(--answers-offset, 204px); }
.answers-page [hidden] { display: none !important; }
.answers-page [data-answer], .answers-page #topic-title { scroll-margin-top: 0; }
.faq-explorer { --sg-photo-h: 160px; padding-top: var(--s-6); }
.faq-explorer .sg-search { max-width: 620px; margin-bottom: var(--s-5); }
.faq-explorer .sg-search-hint { color: var(--n-600); font-size: 13px; margin-bottom: var(--s-1); }
.faq-explorer .sg-search-input { position: relative; }
.faq-explorer input[type="search"] { width: 100%; min-height: 52px; padding: var(--s-3); border: 1px solid var(--n-200); background: var(--white); color: var(--n-950); }
.faq-explorer input::placeholder { color: var(--n-600); opacity: 1; }
.faq-explorer .sg-search-input:has(.sg-clear:not([hidden])) input { padding-right: 82px; }
.faq-explorer .sg-clear { position: absolute; right: 6px; top: 6px; bottom: 6px; min-width: 64px; border: 1px solid var(--n-200); background: var(--n-50); color: var(--n-950); font-size: 13px; font-weight: 500; }
.faq-explorer .sg-clear:hover { background: var(--n-950); color: var(--n-50); }
.faq-explorer .sg-entries { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-6); }
.faq-explorer .sg-entries .topic-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 0 var(--s-3); border: 1px solid var(--n-200); background: var(--white); }
.faq-explorer .sg-image { order: -2; display: block; height: var(--sg-photo-h); overflow: hidden; }
.faq-explorer .sg-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.faq-explorer .sg-entries .topic-card:hover img { transform: scale(1.025); }
.faq-explorer .sg-caption { order: -1; padding: var(--s-2) var(--s-3) 0; color: var(--n-950); line-height: 1.4; }
.faq-explorer .sg-caption strong { font-size: 15px; font-weight: 600; }
.faq-explorer [data-selected-label] { display: block; font-size: 12px; font-weight: 500; }
.faq-explorer .sg-entries .topic-count { padding: 0 var(--s-3); margin: var(--s-1) 0 var(--s-3); font-size: 12px; font-weight: 500; color: var(--n-600); }
.faq-explorer .sg-entries h3 { margin: 0 var(--s-3) var(--s-2); font-size: 16px; font-weight: 500; line-height: 1.4; }
.faq-explorer .sg-entries p { margin: 0 var(--s-3) var(--s-3); font-size: 13px; line-height: 1.6; color: var(--n-600); }
.faq-explorer .sg-entries .topic-card > strong { margin: auto var(--s-3) 0; font-size: 12px; font-weight: 600; }
.faq-explorer .sg-entries .topic-card[aria-current="true"] { box-shadow: inset 0 -3px var(--n-950); background: var(--n-100); }
.faq-explorer .sg-entries .topic-card:hover { color: var(--n-50); background: var(--n-950); }
.faq-explorer .sg-entries .topic-card:hover :is(.sg-caption, .topic-count, p) { color: inherit; }
.faq-explorer .sg-panel { max-width: 960px; min-width: 0; margin-bottom: var(--s-6); }
.faq-explorer .sg-panel h2 { margin-bottom: var(--s-2); font-size: var(--step-2); font-weight: 500; }
.faq-explorer .sg-context { color: var(--n-600); font-size: 16px; margin-bottom: var(--s-4); }
.faq-explorer .sg-questions, .answers-page .answer-block { counter-reset: question; }
.faq-explorer .sg-question, .answers-page [data-answer] { counter-increment: question; border-top: 1px solid var(--n-200); }
.faq-explorer .sg-question summary, .answers-page [data-answer] summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; gap: var(--s-3); align-items: baseline; list-style: none; padding: var(--s-4) 0; font-size: 18px; font-weight: 500; line-height: 1.5; }
.faq-explorer .sg-question summary::-webkit-details-marker, .answers-page [data-answer] summary::-webkit-details-marker { display: none; }
.faq-explorer .sg-question summary::before, .answers-page [data-answer] summary::before { content: counter(question, decimal-leading-zero); color: var(--n-600); font-size: 12px; font-weight: 500; }
.faq-explorer .sg-question summary::after, .answers-page [data-answer] summary::after { content: "+"; font-size: 22px; font-weight: 400; text-align: right; }
.faq-explorer .sg-question[open] summary::after, .answers-page [data-answer][open] summary::after { content: "−"; }
.answers-page [data-answer] summary h3 { font-size: 18px; font-weight: 500; line-height: 1.5; }
.faq-explorer .sg-result-head { display: grid; gap: var(--s-1); min-width: 0; }
.faq-explorer .sg-result-topic { color: var(--n-600); font-size: 12px; font-weight: 600; }
.faq-explorer .sg-answer { padding: 0 36px var(--s-4) 42px; font-size: 16px; color: var(--n-800); }
.faq-explorer .sg-answer p { max-width: var(--readable); }
.faq-explorer .sg-answer .answer-lead { color: var(--n-950); }
.faq-explorer .sg-answer .answer-verify { border-color: var(--n-200); }
.faq-explorer .sg-answer-link { margin: var(--s-4) 0 0; }
.faq-explorer .sg-answer-link a { text-decoration: underline; text-underline-offset: .2em; }
.faq-explorer .sg-all { margin-top: var(--s-4); }
.faq-explorer .sg-notice, .faq-explorer .sg-noscript { border: 1px solid var(--n-200); padding: var(--s-3); font-size: 16px; }
.faq-explorer .sg-help-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.answers-page [data-expand-answers] { margin-bottom: var(--s-4); }
.answers-page .answer-filter input { border-color: var(--n-200); }
/* The open HTML stays readable without JavaScript. A script-load onerror releases
   this guard if answers.js cannot load; initialization adds .is-ready before paint. */
html[data-js]:not([data-answers-failed]) .answers-page .answer-block:not(.is-ready) [data-answer] > .answer-body { display: none; }
html[data-js]:not([data-answers-failed]) .answers-page .answer-block:not(.is-ready) [data-answer] summary::after { content: "+"; }
@media (max-width: 1100px) {
  html:has(.answers-page) { scroll-padding-top: var(--answers-offset, 100px); }
  .faq-explorer .sg-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  html:has(.answers-page) { scroll-padding-top: var(--answers-offset, 84px); }
  .faq-explorer { --sg-photo-h: 120px; }
  .faq-explorer .sg-entries { gap: var(--s-2); }
  .faq-explorer .sg-entries :is(h3, p) { margin-inline: var(--s-2); }
  .faq-explorer .sg-caption, .faq-explorer .sg-entries .topic-count { padding-inline: var(--s-2); }
  .faq-explorer .sg-entries .topic-card > strong { margin-inline: var(--s-2); }
  .faq-explorer .sg-help-cards { grid-template-columns: 1fr; }
  .faq-explorer .sg-question summary, .answers-page [data-answer] summary { gap: var(--s-2); grid-template-columns: 22px minmax(0, 1fr) 18px; font-size: 16px; }
  .answers-page [data-answer] summary h3 { font-size: 16px; }
  .faq-explorer .sg-answer { padding-left: 34px; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-explorer .sg-image img { transition: none; }
}