/* Claim Quest: Quick Check (2026-09-04). One compact gold-bordered card on
   five pilot guides: five questions drawn from the page's approved bank of
   ten. Site tokens only; light and dark follow the page. No pixel font, no
   sprites, no HUD: this is an article component with a modest Claim Quest
   cue (the gold rule and the shield mark on the heading). */
.qc-card {
  margin: 2rem auto 1.5rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  max-width: 100%;
}
.qc-h {
  margin: 0 0 .25rem;
  font-size: 1.15rem;
  color: var(--color-primary);
  display: flex; align-items: center; gap: .5rem;
}
.qc-h::before {
  content: ""; width: .9rem; height: 1.05rem; flex: 0 0 auto;
  background: var(--color-accent);
  clip-path: polygon(50% 0, 100% 18%, 100% 60%, 50% 100%, 0 60%, 0 18%);
}
.qc-h:focus { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.qc-sub { margin: 0 0 .35rem; font-weight: 600; color: var(--color-text); }
.qc-frame { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.55; color: var(--color-text-muted); }
.qc-start, .qc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .6rem 1.1rem;
  font: inherit; font-weight: 700; font-size: .98rem;
  color: #fff; background: var(--color-primary);
  border: 2px solid var(--color-primary); border-radius: var(--radius-sm, 6px);
  cursor: pointer; text-decoration: none;
}
.qc-btn-secondary { color: var(--color-primary); background: transparent; }
/* Author display rules would otherwise beat the hidden attribute. */
.qc-card [hidden] { display: none !important; }
.qc-start:hover, .qc-btn:hover { filter: brightness(1.08); }
.qc-start:focus-visible, .qc-btn:focus-visible, .qc-answer:focus-visible, .qc-review-link:focus-visible {
  outline: 3px solid var(--color-accent); outline-offset: 2px;
}
.qc-status { margin: .6rem 0 0; font-size: .92rem; color: var(--color-text-muted); }
.qc-status:empty { display: none; }

.qc-body { margin-top: 1rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.qc-progress { margin: 0 0 .75rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .9rem; color: var(--color-text-muted); }
.qc-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; }
.qc-dots li { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-primary); background: transparent; }
.qc-dots li.is-done { background: var(--color-primary); }
.qc-dots li.is-current { background: var(--color-accent); border-color: var(--color-accent); }
.qc-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.qc-q legend { padding: 0; font-weight: 700; color: var(--color-primary); font-size: .95rem; margin-bottom: .35rem; }
.qc-prompt { margin: 0 0 .8rem; font-size: 1.05rem; line-height: 1.55; font-weight: 600; color: var(--color-text); }
.qc-answers { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.qc-answer {
  width: 100%; min-height: 44px; text-align: left;
  padding: .6rem .8rem; font: inherit; font-size: 1rem; line-height: 1.45;
  color: var(--color-text); background: var(--color-bg-alt);
  border: 2px solid var(--color-border); border-radius: var(--radius-sm, 6px);
  cursor: pointer;
}
.qc-answer:hover:not(:disabled) { border-color: var(--color-primary); }
.qc-answer:disabled { cursor: default; }
.qc-answers li.is-picked.is-correct .qc-answer { border-color: var(--color-success, #2e7d32); font-weight: 700; }
.qc-answers li.is-picked.is-wrong .qc-answer { border-color: var(--color-danger, #c62828); text-decoration: line-through; }
.qc-answers li.is-key .qc-answer { border-color: var(--color-success, #2e7d32); font-weight: 700; }
.qc-answers li .qc-mark { font-weight: 700; margin-right: .35rem; }
.qc-feedback { margin: .9rem 0 0; padding: .75rem .9rem; background: var(--color-bg-alt); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm, 6px); font-size: .95rem; line-height: 1.55; }
.qc-feedback p { margin: 0 0 .4rem; }
.qc-feedback p:last-child { margin-bottom: 0; }
.qc-verdict { font-weight: 700; color: var(--color-text); }
.qc-review-link { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.qc-actions { margin-top: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.qc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.qc-result-h { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--color-primary); }
.qc-result-h:focus { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.qc-score { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 800; color: var(--color-text); }
.qc-missed-count { margin: 0 0 .75rem; color: var(--color-text-muted); }
.qc-missed { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: .75rem; }
.qc-missed li { line-height: 1.5; }
.qc-missed p { margin: 0 0 .25rem; }
.qc-k { color: var(--color-text-muted); }
.qc-perfect { margin: 0 0 1rem; font-weight: 600; color: var(--color-success, #2e7d32); }
.qc-more { margin: .75rem 0 0; font-size: .9rem; color: var(--color-text-muted); }
.qc-more a { color: var(--color-primary); }
.qc-target-focus { outline: 3px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .qc-answer, .qc-btn, .qc-start { transition: border-color .15s, filter .15s; }
}
@media (max-width: 650px) {
  .qc-card { padding: 1rem; margin-left: 0; margin-right: 0; }
  .qc-actions .qc-btn { flex: 1 1 100%; }
}