/* Pop quiz (programme 20260912T123627Z-pop-quiz). Button and link rules are scoped under .pop-quiz: the
   dialog sits inside .article, whose link colour otherwise wins and failed contrast at 360px. Loaded on article pages only, and only when the
   pop quiz feature flag is on.

   The H1 icon copies the read tick's metrics (.article h1 .study-nav__tick in theme.css) so the
   two sit together as one row of round controls. Its em sizes resolve against the button's own
   font size, not the heading's: like the tick, it keeps the browser's button font size, and
   inheriting the H1's made it more than twice the tick's diameter. Once a student has a score it
   widens into a pill carrying "4/5". */
.article h1 .pop-quiz-pill { display: inline-flex; align-items: center; justify-content: center; gap: .25em;
  height: 1.73em; min-width: 1.73em; padding: 0; border-radius: 999px; border: 2.4px solid #c2410c;
  background: transparent; color: #c2410c; box-sizing: border-box; vertical-align: .06em; margin-left: 12px;
  font-family: inherit; line-height: 1; cursor: pointer; transition: box-shadow var(--ll-motion-duration, .15s) ease;
  /* EXPLICIT, and a visual no-op. The pill sizes itself in `em`, and a <button> does not
     inherit font-size -- so this control's 23px diameter came from the browser's default
     button size, 13.333px, and nothing said so. A sibling control built as an <a> inherits
     the <h1>'s 32px instead and renders 2.4x larger for identical CSS. Measured on dev
     2026-09-22. Stating the size here removes the accident without changing the pixel. */
  font-size: var(--llb-pill-font, .8333rem); }
.article h1 .pop-quiz-pill[hidden], .pop-quiz-pill__score[hidden] { display: none; }
.article h1 .pop-quiz-pill--scored { padding: 0 .55em 0 .4em; }
.pop-quiz-pill__icon { width: 1.1em; height: 1.1em; display: block; flex: 0 0 auto; }
.pop-quiz-pill__score { font-size: .85em; font-weight: 700; letter-spacing: .02em; }
.article h1 .pop-quiz-pill:hover, .article h1 .pop-quiz-pill:focus-visible { box-shadow: 0 0 0 3px rgba(194, 65, 12, .22); outline: none; }

.pop-quiz { width: min(36rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100dvh - 2rem)); padding: 0;
  border: 1px solid var(--ll-line, #ddd8cf); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  color: inherit; background: #fff; overflow: auto; scroll-padding: 4rem 0 5.5rem; }
.pop-quiz::backdrop { background: rgba(20, 16, 10, .45); }
.pop-quiz__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem .5rem; position: sticky; top: 0; background: #fff; z-index: 1; }
.pop-quiz__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.15rem; color: #c2410c; }
.pop-quiz__title .pop-quiz-pill__icon { width: 1.4rem; height: 1.4rem; }
.pop-quiz__close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer;
  padding: .25rem .55rem; border-radius: 8px; color: inherit; }
.pop-quiz button:focus-visible, .pop-quiz a:focus-visible, .pop-quiz select:focus-visible, .pop-quiz textarea:focus-visible {
  outline: 3px solid rgba(194, 65, 12, .45); outline-offset: 2px; }
.pop-quiz [data-pop-quiz-focus]:focus { outline: none; }
.pop-quiz__body { padding: .25rem 1.25rem 1.25rem; }
.pop-quiz__lede { font-size: 1.05rem; margin-top: 0; }
.pop-quiz__facts { padding-left: 1.2rem; margin: .5rem 0 1rem; }
.pop-quiz__facts li { margin: .3rem 0; }
.pop-quiz__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0 0; }
/* The screen's own next step stays in view. A long question with its feedback is taller than a
   short window, and the dialog scrolls; pinned to the bottom like the header is to the top, the
   button is never below the fold. The negative margins take up the body's bottom padding, so the
   bar adds no height when everything fits. Report-form actions, nested in the feedback, stay put. */
.pop-quiz__body > .pop-quiz__actions, .pop-quiz__question > .pop-quiz__actions { position: sticky; bottom: 0; z-index: 1;
  background: #fff; margin: 1rem -1.25rem -1.25rem; padding: .75rem 1.25rem 1.25rem; box-shadow: 0 -1px 0 var(--ll-line, #ddd8cf); }
.pop-quiz .pop-quiz__primary, .pop-quiz a.pop-quiz__primary:visited { display: inline-block; border: 0; border-radius: 999px; padding: .6rem 1.2rem; background: #c2410c;
  color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.pop-quiz .pop-quiz__primary:disabled { opacity: .45; cursor: not-allowed; }
.pop-quiz .pop-quiz__secondary, .pop-quiz a.pop-quiz__secondary:visited { display: inline-block; border: 1.5px solid currentColor; border-radius: 999px; padding: .5rem 1.1rem;
  background: transparent; color: #c2410c; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.pop-quiz .pop-quiz__link { border: 0; background: none; padding: 0; color: #c2410c; text-decoration: underline; font: inherit; cursor: pointer; }
.pop-quiz__progress { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: #5f5a52; margin-bottom: .75rem; }
.pop-quiz__progress progress { flex: 1; height: .4rem; accent-color: #c2410c; }
.pop-quiz fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pop-quiz__stem { font-weight: 600; font-size: 1.05rem; margin-bottom: .75rem; padding: 0; }
.pop-quiz__options { display: grid; gap: .5rem; }
.pop-quiz__option { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .8rem;
  border: 1.5px solid var(--ll-line, #ddd8cf); border-radius: 10px; cursor: pointer; }
.pop-quiz__option input { margin: .2rem 0 0; accent-color: #c2410c; flex: 0 0 auto; }
.pop-quiz__option:focus-within { border-color: #c2410c; box-shadow: 0 0 0 3px rgba(194, 65, 12, .18); }
.pop-quiz__option.is-answer { border-color: #1b8a3f; background: #eef8f1; }
.pop-quiz__option.is-wrong { border-color: #b42318; background: #fdf0ef; }
.pop-quiz__hint, .pop-quiz__note { font-size: .88rem; color: #5f5a52; }
.pop-quiz__feedback { margin-top: 1rem; padding: .85rem 1rem; border-radius: 10px; border-left: 4px solid; }
.pop-quiz__feedback.is-correct { border-color: #1b8a3f; background: #eef8f1; }
.pop-quiz__feedback.is-incorrect { border-color: #b42318; background: #fdf0ef; }
.pop-quiz__feedback p { margin: .4rem 0; }
.pop-quiz__verdict { font-weight: 700; }
.pop-quiz__report { margin-top: .5rem; font-size: .9rem; }
.pop-quiz__report-form { display: grid; gap: .5rem; margin-top: .5rem; }
.pop-quiz__report-form label { display: grid; gap: .2rem; }
.pop-quiz__label { font-weight: 600; font-size: .85rem; }
.pop-quiz__report-form select, .pop-quiz__report-form textarea { font: inherit; padding: .4rem; border: 1px solid var(--ll-line, #ccc); border-radius: 8px; }
.pop-quiz__score { font-size: 1.4rem; margin: .25rem 0 1rem; }
.pop-quiz__review { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.pop-quiz__review li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .25rem .5rem; }
.pop-quiz__mark { font-weight: 700; }
.pop-quiz__review .is-correct .pop-quiz__mark { color: #1b8a3f; }
.pop-quiz__review .is-incorrect .pop-quiz__mark { color: #b42318; }
.pop-quiz__review-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .75rem; font-size: .88rem; }
.pop-quiz__live, .pop-quiz__sr { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Pinned to the dialog's top edge. Left at its static position after the body, the live region
   still counted towards the dialog's scroll height and caused a 16px scroll on every screen. */
.pop-quiz__live { top: 0; left: 0; }
.pop-quiz__error { color: #b42318; font-weight: 600; }

@media (max-width: 480px) {
  .pop-quiz { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .pop-quiz__actions > .pop-quiz__primary, .pop-quiz__actions > .pop-quiz__secondary { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .article h1 .pop-quiz-pill { transition: none; }
}