/* ================================================================
   UPSWING QUIZ SYSTEM
   Archive (#usp-quizzes) and single quiz (#usp-quiz).
   Loads after upswing-global.css. Consumes tokens, never redefines them.
   Every selector is scoped under one of the two wrapper IDs.
   ================================================================ */

/* 01 Shared -------------------------------------------------------- */

:is(#usp-quizzes, #usp-quiz) { font-family: var(--font-body); color: var(--text-default); }

:is(#usp-quizzes, #usp-quiz) .usp-q-head { margin: 0 0 var(--space-8); }
:is(#usp-quizzes, #usp-quiz) .usp-q-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
:is(#usp-quizzes, #usp-quiz) .usp-q-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-head__desc { margin: var(--space-2) 0 0; font-size: var(--text-lg); color: var(--text-subtle); }

/* Data line: question count and time. Mono, per the type rules. */
:is(#usp-quizzes, #usp-quiz) .usp-q-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-subtle);
}

/* 02 Difficulty meter ---------------------------------------------- */

:is(#usp-quizzes, #usp-quiz) .usp-q-level { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
:is(#usp-quizzes, #usp-quiz) .usp-q-level__bars { display: inline-flex; gap: calc(var(--space-1) / 2); }
:is(#usp-quizzes, #usp-quiz) .usp-q-level__bars i { display: block; width: var(--space-3); height: var(--space-1); background: var(--border-strong); }
:is(#usp-quizzes, #usp-quiz) .usp-q-level[data-level="1"] i:nth-child(-n+1),
:is(#usp-quizzes, #usp-quiz) .usp-q-level[data-level="2"] i:nth-child(-n+2),
:is(#usp-quizzes, #usp-quiz) .usp-q-level[data-level="3"] i:nth-child(-n+3),
:is(#usp-quizzes, #usp-quiz) .usp-q-level[data-level="4"] i:nth-child(-n+4) { background: var(--text-strong); }
:is(#usp-quizzes, #usp-quiz) .usp-q-level__label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-default); }

/* 03 Quiz card: composes .c-card, adds the stretched link only ----- */

:is(#usp-quizzes, #usp-quiz) .usp-q-card { position: relative; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card:not(.c-card--horizontal) { display: flex; flex-direction: column; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card:not(.c-card--horizontal) .c-card__body { flex: 1 1 auto; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card__link { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
:is(#usp-quizzes, #usp-quiz) .usp-q-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card__link:focus-visible { outline: none; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card:focus-within { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card:hover .usp-q-card__link,
:is(#usp-quizzes, #usp-quiz) .usp-q-card:focus-within .usp-q-card__link { color: var(--color-primary-500); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media(prefers-reduced-motion:reduce){:is(#usp-quizzes, #usp-quiz) .usp-q-card__link{transition:none}}
:is(#usp-quizzes, #usp-quiz) .usp-q-card__cta {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semi);
  color: var(--text-strong); white-space: nowrap;
}
:is(#usp-quizzes, #usp-quiz) .usp-q-card__arrow { display: inline-block; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card .c-card__footer { gap: var(--space-4); }

/* Featured (horizontal) card: keep the footer beside the media, not under it. */
:is(#usp-quizzes, #usp-quiz) .usp-q-card--featured .c-card__media { grid-row: 1 / span 2; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card--featured .c-card__footer { grid-column: 2; align-self: end; }
:is(#usp-quizzes, #usp-quiz) .usp-q-card--featured .c-card__desc { margin-bottom: 0; }

@media (max-width: 640px) {
  :is(#usp-quizzes, #usp-quiz) .usp-q-card--featured .c-card__media { grid-row: auto; }
  :is(#usp-quizzes, #usp-quiz) .usp-q-card--featured .c-card__footer { grid-column: auto; }
}

/* 04 Archive hero -------------------------------------------------- */

:is(#usp-quizzes, #usp-quiz) .usp-q-hero {
  background: var(--surface-primary);
  padding: var(--space-16) 0 var(--space-12);
  border-bottom: 1px solid var(--border-default);
}
/* --text-2xl (~36px) matches what the article H1 actually renders at: the
   Beaver Builder skin's h1{font-size:36px} loads after upswing-global.css
   and wins over its h1{--text-5xl}. See .usp-q-shero__title too. */
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__lead {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__desc { margin: 0; max-width: 60ch; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-subtle); }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-8) 0 0;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-subtle);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__prompt {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: var(--weight-semi);
  color: var(--text-default);
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__prompt:hover { color: var(--text-strong); text-decoration-color: var(--color-primary-500); }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__prompt:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
/* The facts line is a flex row; keep the 44px prompt from pushing the dots off-center. */
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__facts { align-items: center; }

/* Focus target for the prompt's #quiz-topics jump; only programmatic focus lands here. */
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__topics { margin-top: var(--space-3); scroll-margin-top: var(--space-20); }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__topics:focus { outline: none; }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__topics:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 4px; }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__topics ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__topics a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semi);
  color: var(--text-default);
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__topics a:hover { color: var(--text-strong); text-decoration-color: var(--color-primary-500); }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__topics a:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
:is(#usp-quizzes, #usp-quiz) .usp-q-hero__topics a.is-active { color: var(--text-strong); text-decoration-color: var(--color-primary-500); text-decoration-thickness: 2px; }

/* Less vertical space on mobile: the hero band, not just its text, is
   what pushes quizzes below the fold on a phone. */
@media (max-width: 640px) {
  :is(#usp-quizzes, #usp-quiz) .usp-q-hero { padding: var(--space-8) 0 var(--space-6); }
  :is(#usp-quizzes, #usp-quiz) .usp-q-hero__title { margin-bottom: var(--space-3); }
  :is(#usp-quizzes, #usp-quiz) .usp-q-hero__facts { margin-top: var(--space-5); }
}

:is(#usp-quizzes, #usp-quiz) .usp-q-intro { padding: var(--space-12) 0 0; }

/* 05 Popular and start here ---------------------------------------- */

:is(#usp-quizzes, #usp-quiz) .usp-q-popular + .usp-q-start { margin-top: 0; }

:is(#usp-quizzes, #usp-quiz) .usp-q-start { background: var(--surface-secondary); padding: var(--space-16) 0; }
:is(#usp-quizzes, #usp-quiz) .usp-q-start__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gutter);
  margin: 0; padding: 0; list-style: none;
}
:is(#usp-quizzes, #usp-quiz) .usp-q-start__item { border-top: 2px solid var(--text-strong); padding-top: var(--space-5); }
:is(#usp-quizzes, #usp-quiz) .usp-q-start__level { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-subtle); }
:is(#usp-quizzes, #usp-quiz) .usp-q-start__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
:is(#usp-quizzes, #usp-quiz) .usp-q-start__link { color: var(--text-strong); text-decoration: none; }
:is(#usp-quizzes, #usp-quiz) .usp-q-start__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(#usp-quizzes, #usp-quiz) .usp-q-start__link:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
:is(#usp-quizzes, #usp-quiz) .usp-q-start__desc { margin: 0 0 var(--space-3); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-subtle); }

@media (max-width: 1024px) {
  :is(#usp-quizzes, #usp-quiz) .usp-q-start__list { grid-template-columns: 1fr; }
}

/* 06 Filters ------------------------------------------------------- */

:is(#usp-quizzes, #usp-quiz) .usp-q-filters {
  display: grid; gap: var(--space-6);
  margin: 0 0 var(--space-10);
  padding: var(--space-6);
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-filters__group { margin: 0; padding: 0; border: 0; min-width: 0; }
:is(#usp-quizzes, #usp-quiz) .usp-q-filters__legend { display: block; margin-bottom: var(--space-3); padding: 0; }
:is(#usp-quizzes, #usp-quiz) .usp-q-filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Chip as a labelled radio. 44px height meets the project's target floor. */
:is(#usp-quizzes, #usp-quiz) .usp-q-chip { position: relative; min-height: 44px; }
:is(#usp-quizzes, #usp-quiz) .usp-q-chip__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
:is(#usp-quizzes, #usp-quiz) .usp-q-chip:focus-within { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

:is(#usp-quizzes, #usp-quiz) .usp-q-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
:is(#usp-quizzes, #usp-quiz) .usp-q-filters__actions:empty { display: none; }
:is(#usp-quizzes, #usp-quiz) .usp-q-filters.is-enhanced .usp-q-filters__apply { display: none; }
:is(#usp-quizzes, #usp-quiz) .usp-q-filters.is-enhanced.is-dirty .usp-q-filters__apply { display: inline-flex; }

/* 07 Results ------------------------------------------------------- */

:is(#usp-quizzes, #usp-quiz) .usp-q-clear { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
:is(#usp-quizzes, #usp-quiz) .usp-q-status { margin: 0 0 var(--space-5); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-subtle); }
:is(#usp-quizzes, #usp-quiz) [data-usp-q-results] { transition: opacity var(--duration-base) var(--ease-out); }
:is(#usp-quizzes, #usp-quiz) [data-usp-q-results][aria-busy="true"] { opacity: 0.5; }

:is(#usp-quizzes, #usp-quiz) .usp-q-pagination { flex-wrap: wrap; justify-content: center; margin-top: var(--space-12); }
:is(#usp-quizzes, #usp-quiz) .usp-q-pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-10); color: var(--text-muted); }

:is(#usp-quizzes, #usp-quiz) .usp-q-empty {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xs);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-empty__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-strong); }
:is(#usp-quizzes, #usp-quiz) .usp-q-empty__desc { margin: 0 auto var(--space-6); max-width: 48ch; color: var(--text-subtle); }

/* 08 In-grid promo ------------------------------------------------- */

:is(#usp-quizzes, #usp-quiz) .usp-q-promo {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-8);
  background: var(--color-neutral-950);
  border-radius: var(--radius-xs);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-promo__copy { max-width: 60ch; }
:is(#usp-quizzes, #usp-quiz) .usp-q-promo__label { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-secondary-500); }
:is(#usp-quizzes, #usp-quiz) .usp-q-promo__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--color-neutral-0); }
:is(#usp-quizzes, #usp-quiz) .usp-q-promo__desc { margin: 0; color: var(--color-neutral-400); line-height: var(--leading-relaxed); }

@media (max-width: 640px) {
  :is(#usp-quizzes, #usp-quiz) .usp-q-promo { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
}

/* 09 Single quiz hero ---------------------------------------------- */

:is(#usp-quizzes, #usp-quiz) .usp-q-shero { background: var(--surface-primary); padding: var(--space-10) 0 var(--space-12); }
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--space-12); align-items: center; }
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__crumbs { margin-bottom: var(--space-8); }
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__topic { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-primary-400); }
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__title {
  margin: 0 0 var(--space-4);
  max-width: 32ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl); /* matches the article H1 as rendered (~36px; see the note on .usp-q-hero__title) */
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__desc { margin: 0 0 var(--space-8); max-width: 60ch; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-subtle); }
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__byline { margin: 0; font-size: var(--text-sm); color: var(--text-subtle); }
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__byline a { color: var(--text-default); text-decoration: underline; text-underline-offset: 3px; }
:is(#usp-quizzes, #usp-quiz) .usp-q-shero__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--border-default); border-radius: var(--radius-xs); }

:is(#usp-quizzes, #usp-quiz) .usp-q-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-10);
  margin: 0 0 var(--space-8); padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-default);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-facts__item { margin: 0; }
:is(#usp-quizzes, #usp-quiz) .usp-q-facts dt { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--text-subtle); }
:is(#usp-quizzes, #usp-quiz) .usp-q-facts dd { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); }
:is(#usp-quizzes, #usp-quiz) .usp-q-facts__num { font-family: var(--font-mono); }
:is(#usp-quizzes, #usp-quiz) .usp-q-facts .usp-q-level { margin: 0; }

@media (max-width: 1024px) {
  :is(#usp-quizzes, #usp-quiz) .usp-q-shero__inner { grid-template-columns: 1fr; }
  :is(#usp-quizzes, #usp-quiz) .usp-q-shero__media { display: none; }
}

/* Less vertical space on mobile: without the media column, the hero is
   just stacked text, so its own padding and headline size are what
   determine how much of the screen it takes up before the quiz. */
@media (max-width: 640px) {
  :is(#usp-quizzes, #usp-quiz) .usp-q-shero { padding: var(--space-6) 0 var(--space-6); }
  :is(#usp-quizzes, #usp-quiz) .usp-q-shero__crumbs { margin-bottom: var(--space-5); }
  :is(#usp-quizzes, #usp-quiz) .usp-q-shero__title { margin-bottom: var(--space-3); }
  :is(#usp-quizzes, #usp-quiz) .usp-q-shero__desc { margin-bottom: var(--space-5); font-size: var(--text-base); }
  :is(#usp-quizzes, #usp-quiz) .usp-q-facts { margin-bottom: var(--space-5); padding-top: var(--space-4); gap: var(--space-4) var(--space-6); }
}

/* 10 The quiz and what follows it ---------------------------------- */

/* The Interact iframe draws its own UI. This band just gives it a stage. */
:is(#usp-quizzes, #usp-quiz) .usp-q-play { background: var(--surface-secondary); padding: var(--space-12) 0; scroll-margin-top: var(--space-20); }

:is(#usp-quizzes, #usp-quiz) .usp-q-learn { padding: var(--space-12) 0 0; }
:is(#usp-quizzes, #usp-quiz) .usp-q-learn__title { margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-strong); }
:is(#usp-quizzes, #usp-quiz) .usp-q-learn__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-default); }
:is(#usp-quizzes, #usp-quiz) .usp-q-learn__list li { margin: 0; border-bottom: 1px solid var(--border-default); }
:is(#usp-quizzes, #usp-quiz) .usp-q-learn__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 44px; padding: var(--space-4) 0;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semi);
  color: var(--text-strong); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
:is(#usp-quizzes, #usp-quiz) .usp-q-learn__link:hover { color: var(--color-primary-500); }
:is(#usp-quizzes, #usp-quiz) .usp-q-learn__link:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

/* 11 Motion (only where a person's action triggers it) -------------- */

@media (prefers-reduced-motion: no-preference) {
  :is(#usp-quizzes, #usp-quiz) .usp-q-card__arrow { transition: transform var(--duration-base) var(--ease-out); }
  :is(#usp-quizzes, #usp-quiz) .usp-q-card:hover .usp-q-card__arrow { transform: translateX(var(--space-1)); }
}

/* Next-step CTA title: used in place of .c-cta-banner__title (--text-4xl)
   so the banner heading sits below the page H1 instead of dwarfing it. */
:is(#usp-quizzes, #usp-quiz) .usp-q-next__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-neutral-0);
}