/* Bico FAQ - supplements codex.css, does not replace it.
   Nothing here sets a background or a text colour on the page. Surfaces and
   rules are mixed from the inherited currentColor, so this reads correctly on
   vellum and on nocturne without a second set of rules. */

.faq {
  --faq-hair:    color-mix(in srgb, currentColor 16%, transparent);
  --faq-hair-lo: color-mix(in srgb, currentColor 9%, transparent);
  --faq-surface: color-mix(in srgb, currentColor 4%, transparent);
  --faq-raise:   color-mix(in srgb, currentColor 7%, transparent);
  --faq-quiet:   color-mix(in srgb, currentColor 62%, transparent);
  --faq-gold:    var(--accent, #8a6d3b);
}

/* ---------- search ---------- */

.faq-searchbox {
  display: flex;
  gap: 8px;
  margin: 4px 0 6px;
}

.faq-searchbox input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  font: inherit;
  font-size: 16px;
  color: inherit;
  background: var(--faq-surface);
  border: 1px solid var(--faq-hair);
  border-radius: 3px;
}

.faq-searchbox input::placeholder {
  color: var(--faq-quiet);
  opacity: 1;
}

.faq-searchbox input:focus {
  outline: none;
  border-color: var(--faq-gold);
  background: var(--faq-raise);
}

.faq-searchbox input::-webkit-search-cancel-button { display: none; }

.faq-searchbox button {
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  color: var(--faq-quiet);
  background: none;
  border: 1px solid var(--faq-hair);
  border-radius: 3px;
  cursor: pointer;
}

.faq-searchbox button:hover {
  color: inherit;
  border-color: var(--faq-gold);
}

.faq-count {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--faq-quiet);
}

/* ---------- tiles ---------- */

.faq-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: 22px 0 4px;
}

.faq-tile {
  display: block;
  padding: 15px 16px;
  text-decoration: none;
  color: inherit;
  background: var(--faq-surface);
  border: 1px solid var(--faq-hair);
  border-radius: 3px;
  transition: border-color .14s ease, background-color .14s ease;
}

.faq-tile:hover,
.faq-tile:focus-visible {
  border-color: var(--faq-gold);
  background: var(--faq-raise);
  text-decoration: none;
}

.faq-tile-icon {
  display: block;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 9px;
}

.faq-tile-label {
  display: block;
  font-weight: 600;
  letter-spacing: .01em;
}

.faq-tile-blurb {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--faq-quiet);
}

/* ---------- categories ---------- */

.faq-body { margin-top: 34px; }

.faq-cat {
  margin-bottom: 38px;
  scroll-margin-top: 24px;
}

.faq-cat-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--faq-hair);
}

.faq-cat-icon {
  font-size: 18px;
  line-height: 1;
  align-self: center;
}

.faq-cat-name { flex: 1; }

.faq-cat-count {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--faq-quiet);
}

/* ---------- questions ---------- */

.faq-q { border-bottom: 1px solid var(--faq-hair-lo); }

.faq-q summary {
  padding: 13px 36px 13px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
  font-weight: 500;
  transition: color .12s ease;
}

.faq-q summary::-webkit-details-marker { display: none; }

.faq-q summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-right: 1.5px solid var(--faq-quiet);
  border-bottom: 1.5px solid var(--faq-quiet);
  transform: rotate(45deg);
  transition: transform .16s ease;
}

.faq-q[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq-q summary:hover { color: var(--faq-gold); }
.faq-q summary:hover::after { border-color: var(--faq-gold); }
.faq-q summary:focus-visible { outline: 2px solid var(--faq-gold); outline-offset: 2px; }

.faq-a {
  padding: 0 36px 17px 0;
  color: var(--faq-quiet);
}

.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }

.faq-more a {
  color: var(--faq-gold);
  font-weight: 500;
  text-decoration: none;
}

.faq-more a:hover { text-decoration: underline; }

.faq-verified {
  font-size: 12px;
  letter-spacing: .03em;
  opacity: .65;
}

/* ---------- notices ---------- */

.faq-notice {
  margin: 22px 0;
  padding: 16px 18px;
  background: var(--faq-surface);
  border: 1px solid var(--faq-hair);
  border-left: 3px solid var(--faq-gold);
  border-radius: 3px;
}

.faq-notice span {
  color: var(--faq-quiet);
  font-size: 14px;
}

.faq-disclaimer {
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid var(--faq-hair-lo);
  font-size: 13px;
  color: var(--faq-quiet);
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
  .faq-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .faq-tile { padding: 12px; }
  .faq-tile-blurb { display: none; }
  .faq-tile-icon { font-size: 19px; margin-bottom: 7px; }
  .faq-searchbox button { padding: 0 12px; }
  .faq-q summary { padding-right: 30px; }
  .faq-a { padding-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-tile,
  .faq-q summary,
  .faq-q summary::after { transition: none; }
}

/* Fallback for browsers without color-mix. Kept last so it only applies
   where the feature query fails. */
@supports not (color: color-mix(in srgb, currentColor 10%, transparent)) {
  .faq {
    --faq-hair:    rgba(128, 128, 128, .32);
    --faq-hair-lo: rgba(128, 128, 128, .2);
    --faq-surface: rgba(128, 128, 128, .06);
    --faq-raise:   rgba(128, 128, 128, .11);
    --faq-quiet:   inherit;
  }
  .faq-a, .faq-count, .faq-tile-blurb, .faq-disclaimer { opacity: .78; }
}