/* ==========================================================================
   Styles for the Open Science self-assessment quiz.
   The site uses Quarto's "cosmo" Bootstrap theme; these rules style the custom
   quiz component (everything prefixed .qa-) on top of it.
   Design goals: clean, minimal, professional; comfortable on desktop and
   mobile; accessible (visible focus, high contrast, never colour alone).
   ========================================================================== */

/* ---- Typography ----------------------------------------------------------
   Override Bootstrap's font variables (rather than just setting body{}) so the
   change reaches every component that references them - headings, navbar,
   buttons, form controls - not just plain text. Noto Sans is a variable font
   covering weights 100-900, so existing font-weight:600/700 rules elsewhere in
   this file render correctly without extra utility classes. The fallback stack
   is Bootstrap's own, so text stays legible even if the web font fails to load.
   Code/pre/kbd are untouched - they use --bs-font-monospace, a separate variable.
   ========================================================================== */
:root {
  --bs-font-sans-serif: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* Colour tokens. Chosen for WCAG AA contrast against white backgrounds.
   Ratios below are against #ffffff; the accent is also checked against
   --qa-surface-alt, because link-styled buttons can sit on that tint. */
:root {
  --qa-primary: #155e75;          /* deep petrol, 7.27:1 on white, 6.83:1 on alt */
  --qa-primary-dark: #0e4459;     /* hover/active */
  --qa-primary-tint: #e8f2f6;     /* pale wash for hero + score ring track */
  --qa-correct-bg: #e6f4ea;       /* pale green */
  --qa-correct-border: #1a7f37;   /* green, ~5.2:1 on white */
  --qa-correct-text: #14532d;
  --qa-wrong-bg: #fdecea;         /* pale red */
  --qa-wrong-border: #b42318;     /* red, ~5.9:1 on white */
  --qa-wrong-text: #7a1710;
  --qa-border: #d0d7de;
  --qa-muted: #57606a;
  --qa-surface: #ffffff;
  --qa-surface-alt: #f6f8fa;
}

/* ---- Title banner -------------------------------------------------------- */
/* index.qmd sets `title-block-banner: true`; the colour lives here rather than
   in the front matter so the accent has exactly one source of truth. */
.quarto-title-banner {
  background: var(--qa-primary);
}
.quarto-title-banner .subtitle {
  margin-top: 0.4rem;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 60ch;
  opacity: 0.92;
}

/* ---- Layout container ---------------------------------------------------- */
.quiz-app {
  max-width: 780px;
  margin: 1.5rem auto;
}

.quiz-app h2 {
  margin-top: 0.5rem;
}

/* ---- Fieldsets (level + area selection) --------------------------------- */
.qa-fieldset {
  border: 1px solid var(--qa-border);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 1.25rem;
}

.qa-fieldset > legend {
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0 0.4rem;
  width: auto;
  margin-bottom: 0.25rem;
}

/* A single selectable choice (radio or checkbox row). */
.qa-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.qa-choice:hover {
  background-color: var(--qa-surface-alt);
}
.qa-choice input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
.qa-choice-text {
  display: flex;
  flex-direction: column;
}
.qa-choice-title {
  font-weight: 600;
}
.qa-choice-hint {
  font-size: 0.85rem;
  color: var(--qa-muted);
}

/* Select-all / clear-all links inside the area fieldset. */
.qa-area-controls {
  display: flex;
  gap: 1rem;
  margin: 0 0 0.5rem 0.2rem;
}
.qa-link-btn {
  background: none;
  border: none;
  color: var(--qa-primary);
  padding: 0;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- Buttons ------------------------------------------------------------ */
.qa-btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--qa-border);
  background: var(--qa-surface);
  color: #1f2328;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.qa-btn:hover:not(:disabled) {
  background: var(--qa-surface-alt);
}
.qa-btn-primary {
  background: var(--qa-primary);
  border-color: var(--qa-primary);
  color: #fff;
}
.qa-btn-primary:hover:not(:disabled) {
  background: var(--qa-primary-dark);
  border-color: var(--qa-primary-dark);
}
.qa-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qa-start-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.5rem;
}
.qa-count {
  margin: 0;
  color: var(--qa-muted);
  font-size: 0.95rem;
}

/* ---- Progress ----------------------------------------------------------- */
.qa-progress {
  margin-bottom: 0.75rem;
}
.qa-progress-text {
  font-size: 0.9rem;
  color: var(--qa-muted);
  font-weight: 600;
}
.qa-progress-bar {
  margin-top: 0.35rem;
  height: 6px;
  background: var(--qa-surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.qa-progress-fill {
  height: 100%;
  background: var(--qa-primary);
  transition: width 0.2s ease;
}

/* ---- Question metadata tags --------------------------------------------- */
.qa-qmeta {
  margin: 0 0 0.5rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.qa-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--qa-muted);
  background: var(--qa-surface-alt);
  border: 1px solid var(--qa-border);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
}
.qa-question {
  font-size: 1.3rem;
  line-height: 1.4;
  margin: 0.25rem 0 1rem;
}

/* ---- Answer options ----------------------------------------------------- */
.qa-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.qa-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--qa-border);
  border-radius: 9px;
  background: var(--qa-surface);
  font-size: 1rem;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.qa-option:hover:not(:disabled) {
  border-color: var(--qa-primary);
  background: var(--qa-surface-alt);
}
.qa-option:disabled {
  cursor: default;
}
.qa-option-letter {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--qa-muted);
  width: 1.4rem;
  text-align: center;
}
.qa-option-body {
  flex: 1 1 auto;
}
.qa-option-mark {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Correct / wrong option states after answering (icon + colour + border). */
.qa-option-correct {
  border-color: var(--qa-correct-border);
  background: var(--qa-correct-bg);
  color: var(--qa-correct-text);
}
.qa-option-correct .qa-option-letter,
.qa-option-correct .qa-option-mark { color: var(--qa-correct-border); }

.qa-option-wrong {
  border-color: var(--qa-wrong-border);
  background: var(--qa-wrong-bg);
  color: var(--qa-wrong-text);
}
.qa-option-wrong .qa-option-letter,
.qa-option-wrong .qa-option-mark { color: var(--qa-wrong-border); }

/* ---- Feedback block ----------------------------------------------------- */
.qa-feedback {
  border-radius: 9px;
  padding: 0 0 0.25rem;
}
.qa-feedback:focus {
  outline: none;  /* focus is moved here programmatically; avoid a stray ring */
}
.qa-feedback-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0.25rem 0 0.5rem;
}
.qa-feedback-correct .qa-feedback-heading { color: var(--qa-correct-border); }
.qa-feedback-wrong .qa-feedback-heading { color: var(--qa-wrong-border); }
.qa-feedback-icon { font-size: 1.25rem; }

.qa-explanation {
  margin: 0 0 0.6rem;
  line-height: 1.55;
}
.qa-explanation-why {
  color: var(--qa-muted);
  font-size: 0.95rem;
}
.qa-source {
  margin: 0 0 0.9rem;
}
.qa-source a {
  font-weight: 600;
  text-decoration: underline;  /* keep an always-on cue, not colour+bold alone */
}

/* ---- Summary ------------------------------------------------------------ */
.qa-score {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0.25rem 0 1.25rem;
}
.qa-score-text {
  display: flex;
  flex-direction: column;
}
.qa-score-big {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}
.qa-score-pct {
  font-size: 1rem;
  color: var(--qa-muted);
}

/* Score ring. Decorative — the numbers beside it carry the meaning. */
.qa-ring {
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  transform: rotate(-90deg);   /* start the arc at 12 o'clock, not 3 o'clock */
}
.qa-ring-track, .qa-ring-fill {
  fill: none;
  stroke-width: 10;
}
.qa-ring-track {
  stroke: var(--qa-primary-tint);
}
.qa-ring-fill {
  stroke: var(--qa-primary);
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}

/* Per-area bars. Decorative siblings of the "3 / 5" text in the same cell. */
.qa-bar {
  display: inline-block;
  vertical-align: middle;
  /* Long area names ("Scholarly Infrastructure & Organizations") otherwise
     starve this column down to a ~70px stub; the paired rule on .qa-breakdown td
     reserves it a fair share of the row. */
  width: min(140px, 72%);
  height: 8px;
  margin-right: 0.6rem;
  background: var(--qa-primary-tint);
  border-radius: 999px;
  overflow: hidden;
}
.qa-bar-fill {
  height: 100%;
  background: var(--qa-primary);
  border-radius: 999px;
}
.qa-bar-label {
  font-variant-numeric: tabular-nums;
}

/* ---- Landing stats strip ------------------------------------------------- */
.qa-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
  color: var(--qa-muted);
}
/* Separator dots between stats, drawn rather than typed so they are not read
   aloud as punctuation by screen readers. */
.qa-stat + .qa-stat::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 0.9rem;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.qa-breakdown {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.25rem;
}
.qa-breakdown th, .qa-breakdown td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--qa-border);
}
.qa-breakdown td {
  width: 40%;
  white-space: nowrap;
}
.qa-breakdown thead th {
  border-bottom: 2px solid var(--qa-border);
  font-size: 0.9rem;
}

/* Collapsible per-question review. */
.qa-review {
  margin: 0.5rem 0 1.25rem;
  border: 1px solid var(--qa-border);
  border-radius: 9px;
  padding: 0.5rem 0.9rem;
}
.qa-review > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.35rem 0;
}
.qa-review-item {
  padding: 0.75rem 0;
  border-top: 1px solid var(--qa-border);
}
.qa-review-q { font-weight: 600; margin: 0 0 0.35rem; }
.qa-review-ok { color: var(--qa-correct-border); }
.qa-review-no { color: var(--qa-wrong-border); }
.qa-review-a { margin: 0 0 0.25rem; font-size: 0.95rem; }
.qa-review-yours { color: var(--qa-wrong-text); }
.qa-review-exp { margin: 0.25rem 0 0; font-size: 0.92rem; color: var(--qa-muted); }

/* ---- Accessibility helpers ---------------------------------------------- */
/* Visible focus ring for keyboard users on every interactive element site-wide
   (navbar, footer, TOC, prose links) - not just inside the quiz widget. */
button:focus-visible,
input:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--qa-primary);
  outline-offset: 2px;
}

/* "Skip to main content" link: off-screen until it receives keyboard focus,
   then appears at the top-left so keyboard/screen-reader users can bypass the
   navbar. Paired with the <a class="qa-skip-link"> injected in _quarto.yml. */
.qa-skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--qa-primary);
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.12s ease;
}
.qa-skip-link:focus {
  top: 0;
}

/* Text available to screen readers but hidden visually. */
.qa-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- View All (plain reference listing of the question bank) ------------ */
.view-all { max-width: 780px; margin: 0 auto; }
.va-count { color: var(--qa-muted); margin: 0 0 1rem; }
.va-area-heading {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--qa-border);
}
.va-level-heading {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  color: var(--qa-primary-dark);
}
.va-item {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--qa-border);
}
.va-meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--qa-muted);
  margin: 0 0 0.3rem;
}
.va-question { font-weight: 600; margin: 0 0 0.5rem; }
.va-options { margin: 0 0 0.4rem 1.2rem; padding: 0; }
.va-options li { margin-bottom: 0.2rem; }
.va-source { margin: 0.2rem 0 0; font-size: 0.85rem; }
.va-note {
  display: inline-block;
  margin: 0.2rem 0 0;
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  color: var(--qa-wrong-text);
  background: var(--qa-wrong-bg);
  border-radius: 6px;
}

/* ---- Short-answer mode --------------------------------------------------- */
.qa-short {
  margin: 1rem 0;
}
.qa-short-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--qa-muted);
}
.qa-short-input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  line-height: 1.5;
  color: inherit;
  background: var(--qa-surface);
  border: 1px solid var(--qa-border);
  border-radius: 6px;
  resize: vertical;
}
.qa-short-input:focus-visible {
  outline: 2px solid var(--qa-primary);
  outline-offset: 1px;
}
.qa-short-input:disabled {
  background: var(--qa-surface-alt);
  opacity: 1;            /* keep the user's own text readable after reveal */
}

/* The revealed answer block, before the user has graded themselves: neutral,
   so the colour does not pre-empt their own verdict. */
.qa-feedback-reveal {
  background: var(--qa-surface-alt);
  border-left: 4px solid var(--qa-border);
}
.qa-model-answer {
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.qa-selfgrade-prompt {
  margin: 0.9rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--qa-muted);
}
.qa-selfgrade-verdict {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0.9rem 0 0.6rem;
  font-weight: 600;
}

/* Self-grading buttons. Tinted rather than solid, so they read as a judgement
   the user is making rather than as the app's own verdict. */
.qa-btn-correct {
  background: var(--qa-correct-bg);
  border-color: var(--qa-correct-border);
  color: var(--qa-correct-text);
}
.qa-btn-wrong {
  background: var(--qa-wrong-bg);
  border-color: var(--qa-wrong-border);
  color: var(--qa-wrong-text);
}
.qa-btn-correct:hover:not(:disabled),
.qa-btn-wrong:hover:not(:disabled) {
  filter: brightness(0.96);
}

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 520px) {
  .qa-question { font-size: 1.15rem; }
  .qa-score-big { font-size: 1.8rem; }
  .qa-start-row { flex-direction: column; align-items: stretch; }
  .qa-btn { width: 100%; }
  /* The area column eats the row at this width, leaving a ~30px stub that reads
     as noise rather than a bar. It is decorative and the "3 / 5" text stays, so
     dropping it loses nothing. */
  .qa-bar { display: none; }
  .qa-ring { width: 84px; height: 84px; }
}

/* ---- Respect reduced-motion preferences --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .qa-progress-fill, .qa-option, .qa-btn, .qa-choice, .qa-ring-fill { transition: none; }
  /* Site-wide safety net: near-instant transitions/animations and no smooth
     scrolling anywhere on the page, not just inside the quiz widget. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}