/*
 * WSP Quiz – Bageri design. Loaded after WSP Quiz's default stylesheet (quiz.css) and written
 * on top of it: tokens first, then component rules that restyle the same markup.
 *
 * Source: Figma "Bageri", page "Quiz" (390 px phone frames). Values are the design's own;
 * where the design has no frame (answer hover and focus, the knowledge explanation, the
 * error screen, the hub, the job-role pop-up, wide screens) the rules follow its colours
 * and type.
 */

/* ---- Fonts --------------------------------------------------------------------------------
 * Self-hosted (Fontsource builds, SIL Open Font License — see ../fonts/OFL-*.txt), so no
 * request goes to Google Fonts. Own family names, so a theme's copies never clash. */
@font-face {
  font-family: "Bageri Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bageri Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bageri Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bageri Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Light: only the slash in the knowledge score. */
@font-face {
  font-family: "Bageri Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bageri Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bageri Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bageri Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bageri Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------------------------ */
.quiz-app, .quiz-section, .quiz-role-modal {
  /* The design's palette. It has two near-identical blues; both are kept as drawn. */
  --bageri-blue: #095c9a;        /* headings, button text, the outlined result link */
  --bageri-blue-deep: #005b98;   /* answer rings, the stage gradient, the retake button */
  --bageri-yellow: #fcbc00;
  --bageri-yellow-hover: #e6ab00;
  --bageri-cream: #fbf5e4;       /* answer panels and result cards */
  --bageri-light: #fdfaf1;       /* light text and the hub background */
  --bageri-green: #57b267;
  --bageri-red: #f14043;

  --bageri-font-display: "Bageri Anton", Impact, "Arial Narrow", sans-serif;
  --bageri-font-body: "Bageri Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bageri-font-ui: "Bageri Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bageri-font-label: "Bageri Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* WSP Quiz's own tokens (its README → Design → Tokens). */
  --wspq-bg: #ffffff;
  --wspq-surface: var(--bageri-cream);
  --wspq-frame: #e9e0c5;
  --wspq-text: #000000;
  --wspq-text-muted: #3d4650;
  --wspq-border: var(--bageri-blue-deep);
  --wspq-accent: var(--bageri-blue-deep);
  --wspq-accent-hover: #00467a;
  --wspq-on-accent: #ffffff;
  --wspq-accent-soft: #e3eef6;
  --wspq-focus: var(--bageri-blue-deep);
  --wspq-success: var(--bageri-green);
  --wspq-success-soft: #ffffff;
  --wspq-danger: var(--bageri-red);
  --wspq-danger-soft: #ffffff;
  --wspq-font-body: var(--bageri-font-body);
  --wspq-font-heading: var(--bageri-font-display);
  --wspq-radius: 0px;
  --wspq-radius-lg: 0px;
  /* The column. The design's phone frame is 390 px with 40 px at each side, so 310 px; on a
     wider stage the column takes 85% of the room, up to 600 px (tablets and desktops). */
  --wspq-container: clamp(310px, 85%, 600px);
}

/* Body text is Inter Regular whatever weight the theme gives its own body text (a theme with a
   light body weight would otherwise pick the Light face that is only meant for the score's slash). */
.quiz-app, .quiz-section, .quiz-role-modal {
  font-weight: 400;
}

/* Anton has one weight: headings must not be set in a synthesised bold. */
.quiz-app :where(h1, h2, h3, h4, h5, h6),
.quiz-section :where(h1, h2, h3, h4, h5, h6),
.quiz-role-modal :where(h1, h2, h3, h4, h5, h6) {
  font-weight: 400;
}

/* The design's 24 px arrow, coloured by the text around it. */
.quiz-app .arrow,
.quiz-section .arrow,
.quiz-role-modal .arrow {
  width: 24px;
  height: 24px;
  -webkit-mask-image: url("../images/arrow-right.svg");
  mask-image: url("../images/arrow-right.svg");
}

/* ---- Stage ---------------------------------------------------------------------------------
 * A photo under a dark and a blue gradient. The photo is a layer of its own (::before) so it
 * can be placed as in the design; the gradients sit above it (::after), under the content. */
.quiz-app {
  /* The stage and its column are query containers: the rules at the end of this file widen
     and enlarge the content with the width the stage is given. */
  container: wspq-stage / inline-size;
  isolation: isolate;
  /* clip, not hidden: the enlarged photo must not make the stage a scroll container, or moving
     focus to a new screen would scroll the content inside it. (hidden: older browsers.) */
  overflow: hidden;
  overflow: clip;
  justify-content: center;
  min-height: clamp(600px, 100svh, 844px);
  padding: 40px clamp(20px, 10.26%, 40px);
  border: 0;
  border-radius: 0;
  background: var(--bageri-blue-deep);
  color: #ffffff;
}

.quiz-app::before,
.quiz-app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A background image set under Settings → Hub (--quiz-stage-bg) replaces the design's photo. */
.quiz-app::before {
  z-index: -2;
  background: var(--quiz-stage-bg, var(--bageri-photo, none)) var(--bageri-photo-x, 50%) var(--bageri-photo-y, 0) / cover no-repeat;
}

.quiz-app::after {
  z-index: -1;
  background: var(--bageri-shade, linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)));
}

.quiz-app[data-quiz-app="career"] {
  --bageri-photo: url("../images/bg-career-900.webp");
  --bageri-photo-x: 14%;
  --bageri-shade:
    linear-gradient(180deg, rgba(0, 91, 152, 0) 38.889%, rgba(0, 91, 152, 0.9) 85.703%),
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}

/* The design shows this photo enlarged: 118.89% of the stage's height. */
.quiz-app[data-quiz-app="career"]::before {
  top: -0.4%;
  bottom: auto;
  height: 118.89%;
}

.quiz-app[data-quiz-app="knowledge"] {
  --bageri-photo: url("../images/bg-knowledge-900.webp");
  --bageri-photo-x: 75.85%;
  --bageri-shade:
    linear-gradient(180deg, rgba(0, 91, 152, 0.1) 39.183%, rgb(0, 91, 152) 86.779%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.72) 16.379%, rgba(0, 0, 0, 0.8) 51.442%);
}

/* Wider screens: the larger photos, placed so a landscape stage shows their middle rather
   than their top. */
@media (min-width: 700px) {
  .quiz-app {
    --bageri-photo-y: 30%;
  }

  .quiz-app[data-quiz-app="career"] {
    --bageri-photo: url("../images/bg-career-1800.webp");
  }

  .quiz-app[data-quiz-app="knowledge"] {
    --bageri-photo: url("../images/bg-knowledge-1800.webp");
  }
}

/* The column: type is sized from its width (cqi), so it scales down on phones narrower than
   the design's 390 px and up on tablets and desktops. */
.quiz-app__inner {
  container: wspq-column / inline-size;
}

/* White ring with a dark edge: visible on the photo, the blue, the cream panels and the
   white answer rows alike. */
.quiz-app :focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 8px #00263f;
}

/* Keyboard focus only: a theme that outlines every :focus would box each answer a pointer picks. */
.quiz-app :focus:not(:focus-visible) {
  outline: none;
}

/* ---- Buttons ------------------------------------------------------------------------------ */
.quiz-app .quiz-btn,
.quiz-app__confirm {
  border: 0;
  border-radius: 90px;
  background: var(--bageri-yellow);
  color: var(--bageri-blue);
  font-family: var(--bageri-font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

/* The yellow pills, as the design's Start button: the label at the start, the arrow at the end.
   Full width of the design's column; on a wider column the pills stop at 480 px and sit centred. */
.quiz-app .quiz-btn {
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 480px;
  min-height: 64px;
  margin-inline: auto;
  padding: 20px 20px 20px 40px;
  text-align: start;
}

/* Inside the quiz (Next and See result after a knowledge answer, and the error screens'
   button) the label and the arrow sit together in the middle, like the confirm button. Only
   the Start button keeps the layout above. */
.quiz-app__explain .quiz-btn,
.quiz-app__screen--error .quiz-btn {
  justify-content: center;
  gap: 8px;
  padding: 20px 40px;
  text-align: center;
}

.quiz-app .quiz-btn:hover,
.quiz-app .quiz-btn--primary:hover,
.quiz-app__confirm:hover:not(:disabled) {
  background: var(--bageri-yellow-hover);
  color: var(--bageri-blue);
}

/* ---- Intro and error screens -------------------------------------------------------------- */

/* The design's start screen is the title and the button. The eyebrow and the "10 questions"
   line are left out; the "no questions yet" message (the only line when there is no button)
   stays. */
.quiz-app__screen--intro .quiz-app__eyebrow,
.quiz-app__screen--intro .quiz-app__meta:not(:last-child) {
  display: none;
}

/* 52 px on the design's 310 px column; up to 60 px on a wider one. */
.quiz-app__title {
  margin: 0 0 60px;
  font-size: clamp(36px, 16.77cqi, 60px);
  line-height: 1.2;
  overflow-wrap: break-word;
  text-shadow: 0 14px 14px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.55));
}

.quiz-app__intro {
  margin: -36px 0 40px;
}

.quiz-app__intro p:last-child {
  margin-bottom: 0;
}

.quiz-app__meta {
  margin: 0 0 30px;
  color: #ffffff;
  font-size: 18px;
}

/* ---- Question screens --------------------------------------------------------------------- */
/* 32 px on the design's 310 px column, growing more slowly than the column: 42 px from 533 px. */
.quiz-app__question {
  margin: 20px 0 40px;
  font-size: clamp(25px, 18px + 4.5cqi, 42px);
  line-height: 1.3;
  overflow-wrap: break-word;
  text-align: center;
  text-shadow: 0 4px 20px rgba(0, 31, 51, 0.15);
}

.quiz-app__image {
  margin: -20px auto 20px;
  border-radius: 0;
}

/* "YOU CAN PICK SEVERAL" */
.quiz-app__hint {
  margin: -17px 0 20px;
  color: #ffffff;
  font-family: var(--bageri-font-label);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

/* The cream panel around the answers. */
.quiz-app__options {
  gap: 20px;
  padding: 20px;
  background: var(--bageri-cream);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.quiz-app__confirm {
  max-width: 480px;
  min-height: 67px;
  margin: 20px auto 0;
  padding: 20px 40px;
  color: var(--bageri-blue-deep);
  line-height: 27px;
}

/* Nothing picked yet: a pale version of the button (solid, so the photo does not tint it). */
.quiz-app__confirm:disabled {
  border: 0;
  background: #f1e4b0;
  color: #6f8fa6;
}

.quiz-app__progress {
  margin: 20px 0 0;
  padding: 10px 25px;
  color: #ffffff;
  font-family: var(--bageri-font-ui);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  filter: drop-shadow(0 4px 10px rgba(0, 31, 51, 0.15));
}

/* Knowledge quizzes: the explanation after an answer, then the Next button. */
.quiz-app__explain {
  align-items: stretch;
  gap: 20px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.quiz-app__explain-text {
  padding: 20px;
  background: var(--bageri-cream);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  color: #000000;
  font-size: 18px;
}

/* ---- Answer options ----------------------------------------------------------------------- */
.quiz-option {
  gap: 15px;
  min-height: 70px;
  padding: 15px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #000000;
  font-size: 18px;
  line-height: 1.5;
}

/* The rows stay white in every state; the ring carries the state. */
.quiz-option:hover:not(:disabled),
.quiz-option.is-selected,
.quiz-option.is-correct,
.quiz-option.is-wrong {
  background: #ffffff;
}

.quiz-option__ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--bageri-blue-deep);
  background: transparent;
}

/* Multiple choice keeps the round ring. */
.quiz-option--check .quiz-option__ring {
  border-radius: 50%;
}

.quiz-option:hover:not(:disabled):not(.is-selected) .quiz-option__ring {
  background: rgba(0, 91, 152, 0.15);
}

/* The design's check mark, shown when a state fills the ring. */
.quiz-option__ring::after {
  width: 18px;
  height: 15.35px;
  border: 0;
  background: url("../images/check.svg") center / contain no-repeat;
  transform: none;
}

.quiz-option.is-selected .quiz-option__ring {
  border-color: var(--bageri-blue-deep);
  background: var(--bageri-blue-deep);
}

.quiz-option.is-correct .quiz-option__ring {
  border-color: var(--bageri-green);
  background: var(--bageri-green);
}

.quiz-option.is-wrong .quiz-option__ring {
  border-color: var(--bageri-red);
  background: var(--bageri-red);
}

/* The design's cross replaces the two drawn lines. */
.quiz-option.is-wrong .quiz-option__ring::before {
  content: none;
}

.quiz-option.is-wrong .quiz-option__ring::after {
  position: static;
  width: 16px;
  height: 16px;
  border: 0;
  background: url("../images/cross.svg") center / contain no-repeat;
  transform: none;
}

/* "Right!" / "Wrong!": a tag on the row's top corner, with a small tail. */
.quiz-option__bubble {
  position: absolute;
  top: -28px;
  inset-inline-end: -28px;
  z-index: 3;
  order: 0;
  min-width: 62.5px;
  padding: 5px 8px;
  border-radius: 2px;
  color: #ffffff;
  font-family: var(--bageri-font-label);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

.quiz-option__bubble::after {
  content: "";
  position: absolute;
  top: calc(100% - 2px);
  left: 6.38px;
  width: 10.6145px;
  height: 11.3868px;
  background: inherit;
  -webkit-mask: url("../images/tag-tail.svg") center / 100% 100% no-repeat;
  mask: url("../images/tag-tail.svg") center / 100% 100% no-repeat;
}

/* ---- Scenario answers: no panel, each answer is a cream card ------------------------------ */
.quiz-app__options--scenario {
  padding: 0;
  background: none;
  box-shadow: none;
}

/* The padding comes from a custom property so the wide-screen rules can change it without
   out-ranking these state selectors (a card must not change size on hover or when picked). */
.quiz-app__options--scenario .quiz-option,
.quiz-app__options--scenario .quiz-option:hover:not(:disabled),
.quiz-app__options--scenario .quiz-option.is-selected,
.quiz-app__options--scenario .quiz-option.is-correct,
.quiz-app__options--scenario .quiz-option.is-wrong {
  padding: var(--bageri-scenario-pad, 20px);
  background: var(--bageri-cream);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.quiz-app__options--scenario .quiz-option__bubble {
  top: -13px;
  inset-inline-end: -4.5px;
}

/* While a pick settles, the other cards step back without turning see-through on the photo. */
.quiz-app__screen--question.is-settling .quiz-app__options--scenario .quiz-option:not(.is-picked):not(.is-selected):not(.is-correct) {
  opacity: 1;
  filter: brightness(0.8) saturate(0.7);
}

/* ---- Picture answers ---------------------------------------------------------------------- */

/* The picture panel is 10 px wider than the column at each side. */
.quiz-app__options--images {
  gap: 10px;
  max-width: none;
  margin-inline: -10px;
  padding: 10px;
}

/* Four pictures: a 2 × 2 grid of upright tiles; two or three: stacked banners. */
.quiz-option--tile {
  overflow: visible;
  aspect-ratio: 150 / 219;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.quiz-app__options--n3 .quiz-option--tile {
  aspect-ratio: 310 / 142.67;
}

.quiz-app__options--n2 .quiz-option--tile {
  aspect-ratio: 310 / 219;
}

.quiz-option--tile::before {
  border-width: 6px;
  border-radius: 0;
}

.quiz-option--tile:hover:not(:disabled):not(.is-selected)::before {
  border-color: rgba(0, 91, 152, 0.6);
}

/* Corner badge: ✓ when selected or right, ✕ when wrong. */
.quiz-option__badge {
  top: -10px;
  inset-inline-end: -7px;
  width: 38px;
  height: 38px;
  border: 0;
}

.quiz-option__badge::after {
  width: 18px;
  height: 15.35px;
  border: 0;
  background: url("../images/check.svg") center / contain no-repeat;
  transform: none;
}

.quiz-option--tile.is-wrong .quiz-option__badge::before {
  content: none;
}

.quiz-option--tile.is-wrong .quiz-option__badge::after {
  position: static;
  width: 16px;
  height: 16px;
  border: 0;
  background: url("../images/cross.svg") center / contain no-repeat;
  transform: none;
}

/* On a picture the tag sits on the top corner at the start side, its tail under its end. */
.quiz-option--tile .quiz-option__bubble {
  top: -5px;
  bottom: auto;
  inset-inline: -5px auto;
}

.quiz-option--tile .quiz-option__bubble::after {
  left: auto;
  right: 11px;
}

/* ---- Results ------------------------------------------------------------------------------ */
.quiz-app__screen--result {
  gap: 30px;
}

/* Career: the persona card. Knowledge: the level card. */
.quiz-result__persona,
.quiz-result__card {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--bageri-cream);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  color: var(--bageri-blue);
}

.quiz-result__persona {
  padding: 20px 30px 30px;
}

.quiz-result__card {
  padding: 30px;
}

.quiz-result__persona-eyebrow,
.quiz-result__eyebrow {
  margin: 0;
  font-family: var(--bageri-font-display);
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.quiz-result__persona-eyebrow {
  padding: 10px 0;
}

/* 50 px in the design. A name with a long word ("PROBLEMLÖSAREN") is set smaller, so the word
   fits the card: the template passes the longest word's length, and Anton's capitals are
   about half an em wide. */
.quiz-result__persona-title {
  margin: 5px 0;
  font-size: clamp(22px, min(20cqi, calc(200cqi / var(--bageri-longest-word, 10))), 50px);
  line-height: 1.2;
  text-transform: uppercase;
}

.quiz-result__persona-desc {
  font-size: 18px;
  line-height: 1.5;
}

/* The sentence shown when no persona is published. */
.quiz-result__persona-text {
  font-family: var(--bageri-font-display);
  font-size: clamp(22px, 11.2cqi, 28px);
  font-weight: 400;
  line-height: 1.3;
}

/* Knowledge: "RESULT" and the score stand on the photo, above the card. */
.quiz-result__summary {
  padding: 0 8px;
  color: #ffffff;
  text-align: center;
}

.quiz-result__eyebrow {
  color: #ffffff;
}

.quiz-result__score {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0;
  font-family: var(--bageri-font-display);
  font-size: clamp(64px, 32.26cqi, 100px);
  line-height: 1;
}

.quiz-result__score-num {
  display: inline;
  font-size: inherit;
  font-weight: 400;
}

.quiz-result__score-slash {
  font-family: var(--bageri-font-body);
  font-weight: 300;
}

.quiz-result__level-headline {
  margin: 0 0 15px;
  font-size: clamp(26px, 14cqi, 35px);
  line-height: 1.2;
}

.quiz-result__levels .quiz-result__feedback {
  font-size: 18px;
  line-height: 1.5;
}

/* "Retake the quiz": a blue pill inside the card. */
.quiz-app__retake {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
  max-width: 480px;
  margin: 30px auto 0;
  padding: 10px 20px;
  border-radius: 90px;
  background: var(--bageri-blue-deep);
  color: var(--bageri-light);
  font-family: var(--bageri-font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.5;
  text-decoration: none;
}

.quiz-app__retake:hover {
  background: var(--wspq-accent-hover);
  color: var(--bageri-light);
}

.quiz-app__retake-icon {
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("../images/sync.svg") center / contain no-repeat;
  mask: url("../images/sync.svg") center / contain no-repeat;
}

/* Result links: a yellow pill; the link to the other quiz is outlined on blue. */
.quiz-result__level-ctas,
.quiz-result__ctas {
  align-items: stretch;
  gap: 30px;
}

/* The design has 40 px between the level card and its links. */
.quiz-result__level-ctas {
  margin-top: 10px;
}

.quiz-cta {
  gap: 30px;
  max-width: 480px;
  min-height: 0;
  margin-inline: auto;
  padding: 20px 20px 20px 50px;
  border: 0;
  border-radius: 90px;
  background: var(--bageri-yellow);
  color: var(--bageri-blue-deep);
  font-family: var(--bageri-font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}

.quiz-cta:hover {
  background: var(--bageri-yellow-hover);
  color: var(--bageri-blue-deep);
}

.quiz-cta[data-reset-quiz] {
  border: 2px solid var(--bageri-light);
  background: var(--bageri-blue);
  color: var(--bageri-light);
  font-size: 20px;
}

.quiz-cta[data-reset-quiz]:hover {
  background: var(--bageri-light);
  color: var(--bageri-blue);
}

/* Career: the matched job roles (shown only when job roles are published). */
.quiz-result__heading {
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
  text-align: center;
}

.quiz-result__roles {
  gap: 20px;
  margin: 0;
}

.quiz-role-card {
  border: 0;
  background: var(--bageri-cream);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  color: #000000;
}

.quiz-role-card__title {
  color: var(--bageri-blue);
}

.quiz-role-card__text {
  color: #000000;
}

/* ---- Job-role pop-up ---------------------------------------------------------------------- */
.quiz-role-modal__title {
  color: var(--bageri-blue);
  font-size: 35px;
}

.quiz-role-modal__eyebrow,
.quiz-role-modal__subheading {
  color: var(--bageri-blue);
  font-family: var(--bageri-font-label);
  font-weight: 700;
}

.quiz-role-modal__text {
  font-size: 18px;
  line-height: 1.5;
}

/* ---- Hub ---------------------------------------------------------------------------------- */
.quiz-section {
  --wspq-bg: var(--bageri-light);
  border: 0;
  color: #000000;
}

.quiz-section__eyebrow {
  color: var(--bageri-blue);
  font-family: var(--bageri-font-label);
  font-weight: 700;
}

.quiz-section__title {
  color: var(--bageri-blue);
}

.quiz-section__desc {
  color: #000000;
  font-family: var(--bageri-font-ui);
  font-size: 17px;
}

.quiz-section .quiz-btn {
  padding: 20px 40px;
  border: 0;
  border-radius: 99px;
  background: var(--bageri-blue);
  color: #ffffff;
  font-family: var(--bageri-font-display);
  font-size: 20px;
  font-weight: 400;
}

.quiz-section .quiz-btn:hover {
  background: var(--wspq-accent-hover);
  color: #ffffff;
}

/* ---- Tablets and desktops ----------------------------------------------------------------
 * The design has phone frames only. On a wider stage the same layout is kept and scaled: the
 * column widens (--wspq-container above), the type and the controls grow a step, and picture
 * answers go into grids so a question still fits on one screen. Nothing here applies while
 * the column is the design's 310 px. */

/* The stage is at least 600 px wide: more room above and below the content. */
@container wspq-stage (min-width: 600px) {
  .quiz-app__inner {
    padding-block: 24px;
  }
}

/* The column is at least 440 px wide (a stage of about 600 px). */
@container wspq-column (min-width: 440px) {
  .quiz-app__intro,
  .quiz-app__meta,
  .quiz-app__explain-text,
  .quiz-result__persona-desc,
  .quiz-result__levels .quiz-result__feedback {
    font-size: 20px;
  }

  .quiz-app__hint,
  .quiz-app__progress {
    font-size: 18px;
  }

  .quiz-app .quiz-btn,
  .quiz-app__confirm {
    font-size: 22px;
  }

  /* Answer rows: a little more room, larger text and ring. The scenario list and the picture
     panel keep their own padding; the scenario cards take theirs from the custom property. */
  .quiz-app__options {
    padding: 24px;
  }

  .quiz-app__options--scenario {
    --bageri-scenario-pad: 24px;
    padding: 0;
  }

  .quiz-app__options--images {
    padding: 10px;
  }

  .quiz-option {
    gap: 18px;
    padding: 18px 20px;
    font-size: 20px;
  }

  .quiz-option--tile {
    padding: 0;
  }

  .quiz-option__ring {
    width: 44px;
    height: 44px;
  }

  .quiz-option__ring::after {
    width: 20px;
    height: 17px;
  }

  .quiz-option.is-wrong .quiz-option__ring::after {
    width: 18px;
    height: 18px;
  }

  .quiz-app__explain-text {
    padding: 24px;
  }

  /* Picture answers: grids of landscape tiles (three pictures: a row of upright ones), so all
     the pictures are in view at once. The 2 × 2 grid keeps the design's layout. */
  .quiz-app__options--images .quiz-option--tile {
    aspect-ratio: 4 / 3;
  }

  .quiz-app__options--images.quiz-app__options--n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quiz-app__options--images.quiz-app__options--n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quiz-app__options--n3 .quiz-option--tile {
    aspect-ratio: 3 / 4;
  }

  /* Result screens. */
  .quiz-result__persona {
    padding: 30px 40px 40px;
  }

  .quiz-result__card {
    padding: 40px;
  }

  .quiz-result__heading {
    font-size: 32px;
  }

  .quiz-cta {
    font-size: 24px;
  }

  .quiz-cta[data-reset-quiz] {
    font-size: 22px;
  }

  .quiz-role-card__title {
    font-size: 22px;
  }

  .quiz-role-card__text {
    font-size: 18px;
  }
}

/* ---- The quiz's own page on phones and tablets: the stage fills the screen's width --------- */
@media (max-width: 900px) {
  .wspq-page {
    padding: 0;
  }
}