/* Five Inner Voices quiz. Layout: one reading column on brand cream, one card per step.
   Colours follow the brand guide. --q-navy is the text colour and --q-white the card colour, so the dark version swaps them. */
.quiz {
  --q-navy: #0c3242; --q-red: #e4462b; --q-orange: #f99d27; --q-grey: #6d6e71; --q-line: #d1d3d4;
  --q-mist: #c7dfe3; --q-cream: #fff7eb; --q-sand: #f6ede4; --q-white: #ffffff;
  --v-captain: #e4462b; --v-developer: #f99d27; --v-strategist: #0c3242; --v-visionary: #d18560; --v-agilist: #a4cbd5;
  background: var(--q-cream);
  color: var(--q-navy);
  font-family: var(--font-ui);
  line-height: 1.55;
  padding-block: clamp(1.5rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem);
  min-height: 70vh;
}
.quiz .col { max-width: 40rem; margin-inline: auto; padding-inline: 16px; display: flex; flex-direction: column; gap: 1.2rem; }
.quiz h1, .quiz h2, .quiz h3 { color: var(--q-navy); }
.quiz h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; }
.quiz h2 { font-size: clamp(1.4rem, 4vw, 1.75rem); font-weight: 700; }
.quiz h3 { font-size: 1.2rem; font-weight: 700; }
.quiz .eyebrow { color: var(--q-grey); }
.quiz .small { font-size: .88rem; color: var(--q-grey); }
.quiz .q-card { background: var(--q-white); border: 1px solid var(--q-line); border-radius: 14px; padding: clamp(18px, 4vw, 26px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.quiz .q-btn { font: inherit; font-weight: 700; font-size: 1.1875rem; line-height: 1.2; border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer; background: var(--q-navy); color: var(--q-white); text-decoration: none; display: inline-block; }
.quiz .q-btn.primary { background: var(--q-orange); color: #0c3242; }
.quiz .q-btn.ghost { background: transparent; color: var(--q-navy); border: 1px solid var(--q-line); }
.quiz .q-btn:focus-visible, .quiz .opt:focus-visible, .quiz input:focus-visible, .quiz a:focus-visible { outline: 3px solid var(--q-navy); outline-offset: 2px; }
.quiz .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.quiz .between { justify-content: space-between; }
.quiz .progress { height: 6px; background: var(--q-sand); border-radius: 99px; overflow: hidden; }
.quiz .progress span { display: block; height: 100%; background: var(--q-red); transition: width .25s; }
.quiz .q-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--q-sand); }
.quiz .opts { display: flex; flex-direction: column; gap: 10px; }
.quiz .opt { font: inherit; text-align: left; background: var(--q-white); color: var(--q-navy); border: 1px solid var(--q-line); border-radius: 10px; padding: 14px 16px; cursor: pointer; }
.quiz .opt:hover { border-color: var(--q-navy); }
.quiz .opt.sel { border-color: var(--q-navy); background: var(--q-mist); }
.quiz .voice { border-top: 6px solid var(--vc); }
.quiz .voicehead { display: flex; gap: 18px; align-items: center; }
.quiz .voicehead img { width: 96px; height: 96px; border-radius: 50%; flex: none; border: 4px solid var(--vc); }
.quiz .voicehead div { min-width: 0; }
.quiz .writeup { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-body); }
.quiz .locked { position: relative; }
.quiz .locked .content { filter: blur(6px); user-select: none; pointer-events: none; }
.quiz .veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.quiz .veil span { background: var(--q-white); border: 1px solid var(--q-line); border-radius: 99px; padding: 8px 14px; font-weight: 700; }
.quiz label { font-weight: 700; font-size: .92rem; }
.quiz input[type=email], .quiz input[type=text] { font: inherit; width: 100%; padding: 12px; border: 1px solid var(--q-line); border-radius: 10px; background: var(--q-cream); color: var(--q-navy); }
.quiz .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .88rem; color: var(--q-grey); }
.quiz .check input { margin-top: 4px; flex: none; }
.quiz .err { color: var(--q-red); font-size: .92rem; font-weight: 700; }
.quiz .growth { border-top: 4px solid var(--vc); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.quiz .growth .voicehead img { width: 64px; height: 64px; }
.quiz .growth ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.quiz .share-card { width: 100%; max-width: 360px; height: auto; margin-inline: auto; border-radius: 10px; border: 1px solid var(--q-line); }
.quiz .wheel { display: flex; justify-content: center; }
.quiz .test { font-size: .85rem; }
.quiz .test table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.quiz .test th, .quiz .test td { border-bottom: 1px solid var(--q-line); padding: 5px 8px 5px 0; text-align: left; }
.quiz .flag { color: var(--q-red); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .quiz .progress span { transition: none; } }
@media (max-width: 420px) { .quiz .voicehead img { width: 72px; height: 72px; } }
.quiz [hidden] { display: none !important; }

/* Dark version (follows the site setting). The Strategist's navy would vanish on a navy page, so it gets a lighter blue. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .quiz {
    --q-navy: #fff7eb; --q-grey: #b9cdd3; --q-line: #23495a; --q-mist: #1e5166; --q-cream: #082431; --q-sand: #173d4d; --q-white: #0f3343;
    --v-strategist: #6fa3b8;
  }
}
:root[data-theme="dark"] .quiz {
  --q-navy: #fff7eb; --q-grey: #b9cdd3; --q-line: #23495a; --q-mist: #1e5166; --q-cream: #082431; --q-sand: #173d4d; --q-white: #0f3343;
  --v-strategist: #6fa3b8;
}
.quiz .caption { background: var(--q-cream); border: 1px solid var(--q-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.quiz .caption-text { font-size: .95rem; overflow-wrap: anywhere; user-select: text; }
.quiz .balanced { border-top: 6px solid var(--q-red); }
.quiz .pick { display: flex; gap: 14px; align-items: center; }
.quiz .pick img { width: 56px; height: 56px; border-radius: 50%; flex: none; border: 3px solid var(--vc); }
.quiz .pick strong { display: block; }
.quiz .pick .small { display: block; }

/* Intro hero: the five voice logos pop out of the book, circle it together, go back in, and repeat (9s loop).
   Each slot sits at the book's centre, turned to its own angle (--a). .hb-move animates out, round and back;
   the logo is turned back by -a so it always stays upright. Static circle when reduced motion is on. */
.quiz .hero-book { position: relative; width: 100%; max-width: 240px; aspect-ratio: 320 / 290; margin: 0 auto 4px; }
.quiz .hb-cover { position: absolute; left: 36.9%; top: 27.4%; width: 26.2%; height: auto; border-radius: 3px; box-shadow: 0 14px 28px -12px rgba(0,0,0,.45); z-index: 2; }
.quiz .hb-slot { position: absolute; left: 50%; top: 50%; width: 16.9%; aspect-ratio: 1; margin: -8.45% 0 0 -8.45%; transform: rotate(var(--a)); z-index: 1; }
.quiz .hb-move { display: block; width: 100%; height: 100%; animation: hb-orbit 9s ease-in-out infinite; }
.quiz .hb-move img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--vc); box-shadow: 0 8px 16px -8px rgba(0,0,0,.4); transform: rotate(calc(var(--a) * -1)); }
@keyframes hb-orbit {
  0%   { transform: rotate(0deg) translateX(0) rotate(0deg) scale(.3); opacity: 0; }
  4%   { opacity: 1; }
  14%  { transform: rotate(0deg) translateX(200%) rotate(0deg) scale(1); }
  72%  { transform: rotate(360deg) translateX(200%) rotate(-360deg) scale(1); opacity: 1; }
  84%  { transform: rotate(360deg) translateX(0) rotate(-360deg) scale(.3); opacity: 1; }
  88%, 100% { transform: rotate(360deg) translateX(0) rotate(-360deg) scale(.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .quiz .hb-move { animation: none; transform: translateX(200%); } }
.quiz .growth ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.quiz .done { background: var(--q-mist); border-radius: 10px; padding: 14px 16px; }