/* mattgaugerx quiz (vanilla CSS, uses the site palette from /style.css). Mobile-first, large type. */
.quiz-hub { max-width: 46rem; font-size: 1.25rem; line-height: 1.55; }
.quiz-hub *, .quiz-hub *::before, .quiz-hub *::after { box-sizing: border-box; }
.quiz-hub p, .quiz-hub li, .quiz-hub h2, .quiz-hub span, .quiz-hub button, .quiz-hub label { overflow-wrap: anywhere; }
.mxq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.mxq-lead { font-size: 1.25rem; }
.mxq-note { color: var(--muted, #8E8A82); font-size: 1.05rem; margin: 0.5rem 0; }
.mxq-top { margin: 1.5rem 0 2rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
.mxq-streak, .mxq-meta { margin: 0; font-size: 1.15rem; }
.mxq-meta { color: var(--muted, #8E8A82); margin: 0.5rem 0 0.75rem; white-space: pre-wrap; }

.mxq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.5rem; padding: 0.75rem 1.25rem; width: 100%;
  font: 600 1.2rem/1.3 var(--font-body, sans-serif); text-align: center;
  color: var(--paper, #E8E4DC); background: transparent;
  border: 2px solid var(--rule, rgba(232,228,220,0.3)); border-radius: 10px; cursor: pointer;
}
.mxq-btn:hover { border-color: var(--dust, #C4B49A); }
.mxq-btn:focus-visible, .mxq-choice:focus-visible, .mxq-select:focus-visible, .mxq-code:focus-visible, .mxq-details summary:focus-visible, .mxq-link:focus-visible {
  outline: 3px solid var(--focus, #E8E4DC); outline-offset: 3px;
}
.mxq-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.mxq-btn-primary { background: var(--paper, #E8E4DC); color: var(--bg, #0B0B0B); border-color: var(--paper, #E8E4DC); }
.mxq-btn-primary:hover { background: var(--dust, #C4B49A); border-color: var(--dust, #C4B49A); }
.mxq-btn-ghost { border-style: dashed; }
.mxq-btn-danger { border-color: #d77a6a; color: #f1b3a7; }

.mxq-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.mxq-card { border: 1px solid var(--rule, rgba(232,228,220,0.14)); background: var(--bg-band, #101010); padding: 1.25rem; border-radius: 12px; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.mxq-card.is-focus { border-color: var(--dust, #C4B49A); }
.mxq-card h2 { margin: 0; font-family: var(--font-display, serif); font-size: 1.6rem; line-height: 1.25; }
.mxq-card .whisper-label { margin: 0; }
.mxq-stats { margin: 0.25rem 0 0; font-size: 1.25rem; }
.mxq-stats strong { font-size: 1.5rem; }

.mxq-bar { height: 0.75rem; background: rgba(232,228,220,0.12); border-radius: 999px; overflow: hidden; width: 100%; }
.mxq-bar-fill { display: block; height: 100%; background: var(--dust, #C4B49A); border-radius: 999px; min-width: 0; }

.mxq-details { margin: 0.25rem 0 0.75rem; }
.mxq-details summary { cursor: pointer; min-height: 3rem; display: flex; align-items: center; font-weight: 600; }
.mxq-map { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.mxq-map-row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule, rgba(232,228,220,0.14)); font-size: 1.05rem; }
.mxq-map-n { grid-column: 1 / -1; color: var(--muted, #8E8A82); font-size: 0.95rem; }
.mxq-map-title { min-width: 0; }
.mxq-map-count { font-variant-numeric: tabular-nums; }
.mxq-map-row .mxq-bar { grid-column: 1 / -1; height: 0.5rem; }
.mxq-map-row.is-done .mxq-map-title::after { content: " (mastered)"; color: var(--dust, #C4B49A); }

.mxq-start { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.mxq-start label, .mxq-row label { font-weight: 600; }
.mxq-select { width: 100%; max-width: 100%; min-height: 3.5rem; font: 1.15rem var(--font-body, sans-serif); color: var(--paper, #E8E4DC); background: #181818; border: 2px solid var(--rule, rgba(232,228,220,0.3)); border-radius: 10px; padding: 0.5rem 0.75rem; }
.mxq-link { color: var(--paper, #E8E4DC); text-decoration: underline; text-underline-offset: 0.2em; display: inline-block; padding: 0.5rem 0; min-height: 2.75rem; }

.mxq-tools { margin-top: 3rem; border-top: 1px solid var(--rule, rgba(232,228,220,0.14)); padding-top: 1.5rem; }
.mxq-tools h2 { font-family: var(--font-display, serif); font-size: 1.6rem; margin: 0 0 0.5rem; }
.mxq-row { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.mxq-code { width: 100%; max-width: 100%; font: 1rem/1.4 ui-monospace, monospace; color: var(--paper, #E8E4DC); background: #181818; border: 2px solid var(--rule, rgba(232,228,220,0.3)); border-radius: 10px; padding: 0.75rem; word-break: break-all; resize: vertical; }
.mxq-confirm { border: 2px solid #d77a6a; border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.mxq-confirm[hidden] { display: none; }
.mxq-confirm p { margin: 0; }
.mxq-msg { min-height: 1.5em; font-weight: 600; }

/* question */
.mxq-head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.mxq-head .whisper-label { margin: 0; }
.mxq-count { margin: 0; font-size: 1.1rem; color: var(--muted, #8E8A82); }
.mxq-quit { width: auto; align-self: flex-start; min-height: 3rem; font-size: 1.05rem; }
.mxq-kind { margin: 0 0 0.25rem; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dust, #C4B49A); }
.mxq-prompt { font-family: var(--font-display, serif); font-size: clamp(1.5rem, 5.5vw, 2rem); line-height: 1.3; margin: 0 0 1.25rem; font-weight: 600; }
.mxq-prompt:focus { outline: none; }
.mxq-prompt:focus-visible { outline: 3px solid var(--focus, #E8E4DC); outline-offset: 4px; }
.mxq-timer { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 1rem; }
.mxq-timer.is-low { color: #f1b3a7; }
.mxq-choices { display: flex; flex-direction: column; gap: 0.75rem; }
.mxq-choice {
  display: flex; align-items: flex-start; gap: 0.85rem; flex-wrap: wrap; width: 100%; min-height: 3.75rem; text-align: left;
  padding: 0.9rem 1rem; font: 1.25rem/1.45 var(--font-body, sans-serif); color: var(--paper, #E8E4DC);
  background: #151515; border: 2px solid var(--rule, rgba(232,228,220,0.3)); border-radius: 12px; cursor: pointer;
}
.mxq-choice:hover:not(.is-locked) { border-color: var(--dust, #C4B49A); }
.mxq-choice-key { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid currentColor; font-weight: 600; font-size: 1.05rem; }
.mxq-choice-text { flex: 1 1 10rem; min-width: 0; }
.mxq-choice.is-locked { cursor: default; }
.mxq-choice.is-right { border-color: #7fbf8a; background: #13241a; }
.mxq-choice.is-wrong { border-color: #d77a6a; background: #2a1613; }
.mxq-tag { flex-basis: 100%; margin-left: 3.05rem; font-size: 1rem; font-weight: 600; }
.mxq-choice.is-right .mxq-tag { color: #a9dcb2; }
.mxq-choice.is-wrong .mxq-tag { color: #f1b3a7; }
.mxq-feedback { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.mxq-fb { border-left: 6px solid var(--rule, #444); padding: 0.75rem 0 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mxq-fb.is-right { border-color: #7fbf8a; }
.mxq-fb.is-wrong { border-color: #d77a6a; }
.mxq-fb p { margin: 0; }
.mxq-verdict { font-size: 1.4rem; font-weight: 600; }
.mxq-reveal { font-style: italic; }
.mxq-grade { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 1.3rem; }
.mxq-chip { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--paper, #E8E4DC); flex: 0 0 auto; }
.mxq-chip-green { background: #3f9d55; } .mxq-chip-yellow { background: #d9b532; } .mxq-chip-red { background: #c8473a; } .mxq-chip-gray { background: #8a8a8a; }
.mxq-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.mxq-next { margin-top: 0.5rem; }
.mxq-sim { width: 100%; max-width: 100%; overflow: hidden; }
.mxq-fig { margin: 0 0 1rem; max-width: 100%; }
.mxq-fig img { display: block; width: 100%; height: auto; border-radius: 8px; background: #000; }
.mxq-fig figcaption { font-size: 0.95rem; color: var(--muted, #8E8A82); margin-top: 0.35rem; }
.mxq-score { font-size: 2rem; font-weight: 600; margin: 0.5rem 0 1rem; }
.mxq-missed { padding-left: 1.25rem; }
.mxq-missed li { margin-bottom: 0.75rem; }

@media (min-width: 720px) {
  .mxq-top { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .mxq-top .mxq-btn { width: auto; }
  .mxq-cards { grid-template-columns: 1fr; }
  .mxq-start { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mxq-start label { flex-basis: 100%; }
  .mxq-start .mxq-select { flex: 1 1 18rem; width: auto; }
  .mxq-start .mxq-btn { width: auto; min-width: 8rem; }
  .mxq-col > .mxq-btn, .mxq-confirm .mxq-btn { width: auto; align-self: flex-start; }
}
@media (prefers-reduced-motion: no-preference) { .mxq-bar-fill { transition: width 0.3s ease; } }
.mxq-details summary { list-style: none; }
.mxq-details summary::-webkit-details-marker { display: none; }
.mxq-details summary::before { content: "+"; display: inline-block; width: 1.5rem; font-weight: 600; }
.mxq-details[open] summary::before { content: "\2212"; }

/* inline lesson check: the "Check yourself with a quick quiz" block at the end of a lesson (lesson pages only) */
.mxq-inline {
  max-width: 38rem; margin: 2.5rem 0 0; padding: 1.25rem 1rem; min-width: 0;
  border: 1px solid var(--rule, rgba(232,228,220,0.14)); border-radius: 12px; background: var(--bg-band, #101010);
  font-size: 1.15rem; line-height: 1.55; scroll-margin-top: 5rem;
}
.mxq-inline *, .mxq-inline *::before, .mxq-inline *::after { box-sizing: border-box; }
.mxq-inline p, .mxq-inline li, .mxq-inline h2, .mxq-inline h3, .mxq-inline span, .mxq-inline button, .mxq-inline a { overflow-wrap: anywhere; }
.mxq-inline > h2 { margin: 0 0 0.5rem; font-family: var(--font-display, serif); font-size: clamp(1.45rem, 5vw, 1.85rem); line-height: 1.25; }
.mxq-inline > .mxq-note { margin: 0 0 0.75rem; }
.mxq-inline-app { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0 0; min-width: 0; }
.mxq-inline-app > p { margin: 0; }
.mxq-inline .mxq-head { margin-bottom: 0.5rem; }
.mxq-inline .mxq-prompt { font-size: clamp(1.3rem, 4.8vw, 1.65rem); }
.mxq-inline .mxq-choice { font-size: 1.15rem; }
.mxq-inline .mxq-verdict { font-size: 1.25rem; }
.mxq-inline .mxq-score { font-size: 1.75rem; margin: 0; }
.mxq-inline .mxq-score:focus { outline: none; }
.mxq-inline .mxq-score:focus-visible { outline: 3px solid var(--focus, #E8E4DC); outline-offset: 4px; }
.mxq-inline .mxq-missed { margin: 0; }
.mxq-inline .mxq-row { margin: 0.5rem 0 0; }
.mxq-inline-more { margin: 1rem 0 0; border-top: 1px solid var(--rule, rgba(232,228,220,0.14)); padding-top: 0.5rem; }
@media (min-width: 720px) {
  .mxq-inline { padding: 1.5rem; }
  .mxq-inline-app > .mxq-btn, .mxq-inline .mxq-next, .mxq-inline .mxq-feedback > .mxq-btn { width: auto; align-self: flex-start; }
}
.mxq-inline-app, .mxq-inline .mxq-fb { scroll-margin-top: 5rem; scroll-margin-bottom: 1rem; }