/* Follow the website color-scheme, never the OS preference independently. */
.dbg-faq {
  --faq-bg: var(--dbg-white, #fff);
  --faq-bg: light-dark(var(--dbg-white, #fff), #111827);
  --faq-surface: var(--dbg-surface, #f4f8fb);
  --faq-surface: light-dark(var(--dbg-surface, #f4f8fb), #1f2937);
  --faq-text: var(--dbg-text, #202a42);
  --faq-text: light-dark(var(--dbg-text, #202a42), #f3f4f6);
  --faq-muted: var(--dbg-muted, #56647b);
  --faq-muted: light-dark(var(--dbg-muted, #56647b), #cbd5e1);
  --faq-border: #74859b;
  --faq-border: light-dark(#74859b, #8092a8);
  --faq-accent: var(--dbg-navy, #060454);
  --faq-accent: light-dark(var(--dbg-navy, #060454), #b9e6ff);
  --faq-selected: var(--dbg-link, #006a9e);
  --faq-selected: light-dark(var(--dbg-link, #006a9e), #9fddff);
  --faq-selected-text: #fff;
  --faq-selected-text: light-dark(#fff, #060454);
  --faq-link: var(--dbg-link, #006a9e);
  --faq-link: light-dark(var(--dbg-link, #006a9e), #9fddff);
  --faq-focus: var(--dbg-link, #006a9e);
  --faq-focus: light-dark(var(--dbg-link, #006a9e), #9fddff);
  container-type: inline-size;
  color-scheme: inherit;
  color: var(--faq-text);
  background: var(--faq-bg);
  min-inline-size: 0;
  padding: clamp(.75rem, 2vw, 1.25rem);
  border-radius: .5rem;
  padding-block-end: max(1.25rem, var(--dbg-mobile-offset, calc(var(--dbg-mobile-height, 4.5rem) + env(safe-area-inset-bottom, 0px))));
}
/* Existing website attributes; JS preserves the nearest explicit ancestor. */
:where([data-theme="light"], [data-bs-theme="light"]) .dbg-faq, .dbg-faq[data-faq-theme="light"] { color-scheme: light; }
:where([data-theme="dark"], [data-bs-theme="dark"]) .dbg-faq, .dbg-faq[data-faq-theme="dark"] { color-scheme: dark; }
.dbg-faq [hidden] { display: none; }
.dbg-faq h2, .dbg-faq h3 { color: var(--faq-accent); }
.dbg-faq a { color: var(--faq-link); }
.dbg-faq :focus-visible { outline: 3px solid var(--faq-focus); outline-offset: 3px; box-shadow: 0 0 0 5px var(--faq-bg); }
.dbg-faq__intro > :first-child { margin-block-start: 0; }
.dbg-faq__search { margin-block: 1.25rem; }
.dbg-faq__search label { display: block; font-weight: 700; margin-block-end: .5rem; }
.dbg-faq__search-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.dbg-faq[data-dbg-faq] .dbg-faq__search input[type="search"] {
  flex: 1 1 16rem; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%;
  min-block-size: 44px; border: 1px solid var(--faq-border); border-radius: .35rem; padding: .6rem .75rem;
  color: var(--faq-text); background: var(--faq-bg); font: inherit;
}
.dbg-faq__search input::placeholder { color: var(--faq-muted); opacity: 1; }
.dbg-faq .dbg-faq__clear {
  min-block-size: 44px; min-inline-size: 44px; padding: .6rem .75rem; border-radius: .35rem;
  border: 1px solid var(--faq-border); color: var(--faq-accent); background: var(--faq-surface); font: inherit; cursor: pointer;
}
.dbg-faq__search p, .dbg-faq__status { color: var(--faq-muted); }
.dbg-faq__topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-block: 1.5rem; }
.dbg-faq .dbg-faq__topic {
  display: flex; align-items: center; gap: .6rem; min-block-size: 44px; min-inline-size: 0; inline-size: 100%;
  padding: .65rem .75rem; border: 2px solid var(--faq-border); border-radius: .4rem;
  color: var(--faq-accent); background: var(--faq-surface); text-decoration: none; font: inherit; font-weight: 600; text-align: start;
  overflow-wrap: anywhere; cursor: pointer;
}
.dbg-faq .dbg-faq__topic svg { inline-size: 24px; block-size: 24px; flex: 0 0 24px; }
.dbg-faq .dbg-faq__topic:hover, .dbg-faq .dbg-faq__clear:hover { border-color: var(--faq-accent); text-decoration: underline; }
.dbg-faq .dbg-faq__topic[aria-pressed="true"] { background: var(--faq-selected); color: var(--faq-selected-text); border-color: var(--faq-selected); text-decoration: underline; text-underline-offset: .2em; }
.dbg-faq__section { margin-block: 1.5rem; }
.dbg-faq__section > h2, .dbg-faq__question, .dbg-faq__question > summary { scroll-margin-block: calc(var(--dbg-header-scroll-offset, 64px) + 1rem) calc(var(--dbg-mobile-offset, var(--dbg-mobile-height, 4.5rem)) + 1rem); }
.dbg-faq__question { margin-block: .75rem; border: 1px solid var(--faq-border); border-radius: .4rem; background: var(--faq-surface); }
.dbg-faq__question > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; list-style: none; cursor: pointer; padding: .85rem 1rem; min-block-size: 44px; }
.dbg-faq__question > summary::-webkit-details-marker { display: none; }
.dbg-faq__question > summary::marker { content: ""; }
.dbg-faq__question > summary h3 { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.dbg-faq__chevron { inline-size: .5rem; block-size: .5rem; flex: 0 0 .5rem; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); color: var(--faq-accent); margin-inline-end: .25rem; }
.dbg-faq__question[open] > summary .dbg-faq__chevron { transform: rotate(135deg); }
.dbg-faq__answer { padding: 0 1rem 1rem; color: var(--faq-text); }
.dbg-faq__answer > :last-child { margin-block-end: 0; }
.dbg-faq__topic-label { color: var(--faq-muted); font-size: .9rem; }
.dbg-faq__answer figure { margin: 1rem 0; }
.dbg-faq__answer img { display: block; max-inline-size: 100%; block-size: auto; border-radius: .35rem; }
.dbg-faq__answer figcaption { color: var(--faq-muted); font-size: .9rem; margin-block-start: .5rem; }
@media (min-width: 48rem) { .dbg-faq__topics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 22rem) { .dbg-faq__topics { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .dbg-faq { background: #fff; color: #000; }
  .dbg-faq__search, .dbg-faq__topics, .dbg-faq__status { display: none; }
}

@media (max-width: 63.99rem) {
  .dbg-faq .dbg-faq__topic { flex-direction: column; justify-content: center; text-align: center; gap: .35rem; }
}
@container (max-width: 18em) { .dbg-faq__topics { grid-template-columns: minmax(0, 1fr); } }