/* ===========================================================================

   HOW YOUR QUIZ LOOKS.

   The block directly below is the part worth touching. Change these values
   and the whole quiz changes with them — every button, every screen.
   You don't need to hunt through the rest of the file.

   Easiest way to do it: give Claude your website address and ask it to match
   these to your brand.

   =========================================================================== */

:root {
  --ground: #03647e;        /* the background behind everything (dark blue) */
  --rays: #009293;          /* the manga burst strips on that background (teal) */
  --pop: #ea9201;           /* the offset shadow behind the title (orange) */
  --tint: #e0f2f2;          /* answer buttons when hovered (pale teal) */
  --surface: #ffffff;       /* the quiz panel and answer buttons */
  --ink: #151515;           /* outlines, shadows and answer text (manga black) */
  --ink-soft: #4a4a55;      /* the quieter text */
  --heading: #03647e;       /* titles and questions (dark blue) */
  --accent: #009293;        /* the main button, and the highlight colour (teal) */
  --accent-ink: #151515;    /* text sitting on top of --accent */
  --label: #ea9201;         /* the section tag above each question (orange) */
  --line: #151515;          /* borders */

  /* One colour per tier, used on the results screen. */
  --tier-1: #03647e;        /* dark blue */
  --tier-2: #009293;        /* teal */
  --tier-3: #8374a1;        /* purple */
  --tier-4: #ea9201;        /* orange */
  --tier-1-ink: #ffffff;    /* text on the Tier 1 badge — black is too hard to read on dark blue */

  /* Your brand's fonts go here. The list after the first name is a fallback
     for anyone whose browser can't find it, so leave that part alone. */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 6px;
  --outline: 3px;           /* how thick the black ink lines are */
  --measure: 34rem;         /* how wide a line of text is allowed to get */

  /* How tall the quiz is allowed to get. This is the same number as the height
     of the window it sits in on your website, which is why the preview and the
     real thing look the same. Changing it means changing it in
     PREVIEW-my-quiz.html too, and in the embed code for your site. */
  --quiz-height: 820px;
}

/* ===========================================================================
   Below here is the machinery. You can change it, but you don't have to.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The quiz fills the window it's given rather than flowing down the page.
   That's what stops it being cut off once it's embedded on your website. */
html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--ground);
  /* A manga "burst": strips bursting out from behind the panel. */
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, var(--rays) 0deg 4deg, transparent 4deg 10deg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Centres the quiz when the window is taller than the quiz is allowed to be
     — which is what happens at its own Netlify address, before it's embedded
     anywhere. Without this it stretches to fill a whole browser window and
     looks nothing like the version that ends up on your site. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quiz {
  /* Fill the space available, but never grow past the height it's designed
     for. In the little window on your website those are the same number, so
     this line does nothing there — it's only doing a job on the big screen. */
  height: 100%;
  max-height: var(--quiz-height);
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(0.75rem, 3vw, 1.75rem);
}

/* Each screen is a column: content that can scroll, then a footer pinned
   underneath it. `min-height: 0` is the line that makes the scrolling work —
   without it a flex child refuses to shrink and the page overflows instead.

   Each screen is also drawn as a comic panel: white, inked outline, hard
   shadow. The shadow fits inside the .quiz padding, so nothing is clipped
   once embedded. */
.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--outline) solid var(--line);
  border-radius: var(--radius);
  box-shadow: 7px 7px 0 var(--ink);
  padding: clamp(1rem, 3.5vw, 2rem);
  margin: 0 7px 7px 0;
}

.screen[hidden] { display: none; }

.screen-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 0 0.5rem 0.5rem 0;   /* room for the answers' shadows */
}

/* Long questions scroll; they never push the footer off the bottom. */
.screen-question .screen-body { justify-content: flex-start; }

/* The result has a lot in it, so it starts at the top and scrolls. */
.screen-result .screen-body { justify-content: flex-start; }

/* The opening screen is the exception. It holds three short lines, so pinning
   its button to the bottom of the box leaves a lake of empty space. Here the
   button sits just under the words and the whole group is centred instead.
   Question and result screens keep their pinned footer — they have enough in
   them to fill the space properly. */
.screen-intro { justify-content: center; }

.screen-intro .screen-body {
  flex: 0 1 auto;          /* as tall as its words, and no taller */
  justify-content: flex-start;
}

.screen-intro .screen-foot {
  justify-content: flex-start;   /* lines up under the text, not floating */
  padding-top: 1.75rem;
}

.screen-foot {
  flex-shrink: 0;
  padding-top: 1rem;
  display: flex;
  justify-content: center;
}

/* --- Type ---------------------------------------------------------------- */

.quiz-title,
.question-text,
.result-heading,
.result-sections-label {
  font-family: var(--font-heading);
  color: var(--heading);
}

.quiz-title {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  max-width: var(--measure);
  /* A pop-art offset in pink behind the title. */
  text-shadow: 3px 3px 0 var(--pop);
}

.quiz-intro,
.result-description {
  margin: 0;
  max-width: var(--measure);
}

.quiz-count,
.question-number {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The section name, drawn as a tilted tag like a manga caption box. */
.question-section {
  align-self: flex-start;
  margin: 0;
  max-width: var(--measure);
  padding: 0.25rem 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.35;
  background: var(--label);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1deg);
}

.question-text {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: var(--measure);
}

.result-intro {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.result-heading {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  max-width: var(--measure);
}

.result-points {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.result-priority {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.result-list {
  margin: 0;
  padding-left: 1.25rem;
}

.result-list li + li { margin-top: 0.35rem; }

.result-max {
  margin: 0;
  max-width: var(--measure);
  padding: 0.625rem 0.875rem;
  font-weight: 600;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
}

.result-sections-label {
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.result-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

.result-sections li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.result-sections li + li { border-top: 2px solid var(--line); }

.section-name { flex: 1; font-weight: 600; }

.section-points { color: var(--ink-soft); }

/* --- Tier chips ---------------------------------------------------------- */

.tier-chip {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  background: var(--tier-1);
  color: var(--tier-1-ink);
  border: 2px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.tier-chip[data-tier="2"] { background: var(--tier-2); color: var(--ink); }
.tier-chip[data-tier="3"] { background: var(--tier-3); color: var(--ink); }
.tier-chip[data-tier="4"] { background: var(--tier-4); color: var(--ink); }

.tier-chip-big {
  font-size: 1.125rem;
  padding: 0.2rem 0.85rem;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
}

/* --- Answers ------------------------------------------------------------- */

.answers {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: var(--measure);
  margin-top: 0.25rem;
}

.answer {
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: var(--outline) solid var(--line);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.12s, transform 0.12s, box-shadow 0.12s;
}

.answer:hover {
  background: var(--tint);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.answer:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Held briefly after a click, so the answer visibly registers before the
   next question replaces it. Pressed flat, like a stamp. */
.answer.is-chosen {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  font: inherit;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: var(--radius);
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  border: var(--outline) solid var(--line);
  text-decoration: none;
  display: inline-block;
  transition: transform 0.12s, box-shadow 0.12s;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border-width: 2px;
}

.btn-quiet:hover { background: var(--tint); }

.btn[hidden] { display: none; }

.result-link {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* --- For screen readers only --------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Respects the "reduce motion" setting some people turn on. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}