/* QA Hub front-end. Inherits the theme's text colour, so it works on light and dark themes.
   Override --qah-accent in your theme to match your brand. */
.qah {
  --qah-accent: #2563eb;
  --qah-ok: #15803d;
  --qah-bad: #b91c1c;
  --qah-line: color-mix(in srgb, currentColor 18%, transparent);
  --qah-soft: color-mix(in srgb, currentColor 5%, transparent);
  margin: 2rem 0;
  line-height: 1.6;
}
.qah, .qah * { box-sizing: border-box; }
.qah [hidden] { display: none !important; }

/* Progress */
.qah-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.qah-stat { margin: 0; font-size: .95rem; }
.qah-reset { background: none; border: 0; padding: .25rem 0; color: var(--qah-accent); cursor: pointer; font: inherit; font-size: .9rem; text-decoration: underline; }
.qah-bar { height: 6px; margin: .6rem 0 .9rem; border-radius: 99px; background: var(--qah-soft); overflow: hidden; }
.qah-bar span { display: block; height: 100%; width: 0; background: var(--qah-accent); transition: width .3s ease; }
.qah-note { margin: 0 0 1.25rem; font-size: .9rem; opacity: .75; }

/* Table of contents */
.qah-toc { margin: 0 0 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--qah-line); border-radius: 10px; background: var(--qah-soft); }
.qah-toc ol { margin: 0; padding-left: 1.25rem; columns: 2 260px; column-gap: 2rem; }
.qah-toc li { margin: .2rem 0; break-inside: avoid; }

/* Question */
.qah-q { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--qah-line); border-radius: 10px; scroll-margin-top: 5rem; }
.qah-qt { display: flex; gap: .75rem; align-items: baseline; margin: 0 0 1rem; font-size: 1.2rem; line-height: 1.4; }
.qah-num { flex: none; min-width: 1.75rem; height: 1.75rem; padding: 0 .4rem; border-radius: 6px; background: var(--qah-accent); color: #fff; font-size: .9rem; font-weight: 600; text-align: center; line-height: 1.75rem; }

/* Options */
.qah-opts { display: grid; gap: .5rem; }
.qah-opt {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--qah-line); border-radius: 8px; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.qah-opt:hover:not(:disabled) { border-color: var(--qah-accent); background: var(--qah-soft); }
.qah-opt:focus-visible { outline: 2px solid var(--qah-accent); outline-offset: 2px; }
.qah-opt:disabled { cursor: default; opacity: 1; }
.qah-let { flex: none; width: 1.6rem; height: 1.6rem; border: 1px solid var(--qah-line); border-radius: 50%; font-size: .8rem; font-weight: 600; line-height: 1.5rem; text-align: center; }
.qah-ot { flex: 1; }
.qah-opt.is-correct { border-color: var(--qah-ok); background: color-mix(in srgb, var(--qah-ok) 12%, transparent); }
.qah-opt.is-correct .qah-let { background: var(--qah-ok); border-color: var(--qah-ok); color: #fff; }
.qah-opt.is-wrong { border-color: var(--qah-bad); background: color-mix(in srgb, var(--qah-bad) 10%, transparent); }
.qah-opt.is-wrong .qah-let { background: var(--qah-bad); border-color: var(--qah-bad); color: #fff; }
.qah-q.is-answered .qah-opt:not(.is-correct):not(.is-wrong) { opacity: .55; }

/* Answer */
.qah-ans { margin-top: 1rem; padding: 1rem 1.1rem; border-left: 4px solid var(--qah-bad); border-radius: 0 8px 8px 0; background: var(--qah-soft); }
.qah-ans.is-ok { border-left-color: var(--qah-ok); }
.qah-verdict { margin: 0 0 .25rem; font-weight: 700; }
.qah-ans.is-ok .qah-verdict { color: var(--qah-ok); }
.qah-ans:not(.is-ok) .qah-verdict { color: var(--qah-bad); }
.qah-correct { margin: 0 0 .5rem; }
.qah-exp > :last-child { margin-bottom: 0; }

/* Result */
.qah-result { padding: 1rem 1.25rem; border-radius: 10px; background: var(--qah-accent); color: #fff; font-weight: 600; }

/* Related + list */
.qah-related h2 { font-size: 1.15rem; }
.qah-related ul { padding-left: 1.2rem; }
.qah-search { width: 100%; max-width: 420px; margin-bottom: 1rem; padding: .6rem .8rem; border: 1px solid var(--qah-line); border-radius: 8px; background: transparent; color: inherit; font: inherit; }
.qah-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.qah-card { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border: 1px solid var(--qah-line); border-radius: 10px; color: inherit; text-decoration: none; }
.qah-card:hover { border-color: var(--qah-accent); }
.qah-card span { font-size: .85rem; opacity: .7; }

@media (max-width: 520px) {
  .qah-q { padding: 1rem; }
  .qah-qt { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qah-bar span, .qah-opt { transition: none; }
}

/* Terms line + learner report */
.qah-terms { margin: 1.5rem 0 0; font-size: .9rem; }
.qah-term { margin-right: 1rem; }
.qah-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 1.5rem; }
.qah-tile { padding: 1rem; border: 1px solid var(--qah-line); border-radius: 10px; }
.qah-tile strong { display: block; font-size: 1.75rem; line-height: 1.2; }
.qah-tile span { font-size: .85rem; opacity: .75; }
.qah-groups, .qah-sets { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.qah-groups li { margin-bottom: .9rem; }
.qah-grow { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.qah-grow small { opacity: .65; margin-left: .35rem; }
.qah-groups .qah-bar { margin: .3rem 0 0; }
.qah-sets li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--qah-line); }
.qah-sets li span { font-size: .85rem; opacity: .75; }