/* ============================================================================
   eXQ CHATTERBOX — STYLES
   HEX brand: navy ground, lime CTAs, sharp corners, crisp geometry.
   The chatterbox itself is built in the "CHATTERBOX" section further down.
   ========================================================================== */

:root {
  /* --- HEX core palette ------------------------------------------------- */
  --navy:        #0e1547;
  --navy-deep:   #080d31;
  --navy-lift:   #161f5e;
  --lime:        #c4ff00;
  --blue:        #0700ff;
  --aqua:        #71f5b7;
  --violet:      #b49df8;
  --peach:       #ffb08a;
  --paper:       #f7f4ec;   /* the inside of the fold */
  --paper-shade: #e2ddd0;

  /* --- Trait category colours (per the framework) ------------------------ */
  --mindsets: var(--lime);
  --skillsets: var(--violet);
  --toolsets: var(--aqua);

  /* --- Type ------------------------------------------------------------- */
  --font-head: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Layout ----------------------------------------------------------- */
  --shell: 940px;
  --rail: clamp(16px, 4vw, 40px);
  /* Layout box of the playable toy. The 45° rotation grows its PAINTED size
     by ~1.42x in both axes, so the layout box must stay under ~70vw or the
     diamond runs off the side of the screen. .catcher-stage reserves the
     matching height. Keep every value here below that ceiling. */
  --catcher-size: min(66vw, 39vh, 400px);

  /* Set per-result by JS */
  --ink: var(--lime);
  --accent: var(--blue);
  --on-ink: var(--navy);
}

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

/* Several elements below set display explicitly, which would otherwise win
   over the `hidden` attribute. Make `hidden` mean hidden, always. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* The shell is a flex column: topbar takes what it needs, <main> takes the
   rest. That lets the start and quiz screens fill exactly one viewport
   without hard-coding the header height. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--navy-lift) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .cta, .ghost-btn, .catcher__word, .catcher__key {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
}

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

/* Fine paper grain over everything. */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ TOP BAR ═══════════════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px var(--rail);
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.brandmark {
  display: inline-flex; align-items: baseline; gap: 9px;
  text-decoration: none;
}
.brandmark__hex {
  font-family: var(--font-head); font-weight: 900; font-size: 22px;
  letter-spacing: 0.02em; color: var(--lime);
}
.brandmark__sub {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.topbar__right { display: flex; align-items: center; gap: 14px; }

.progress { display: flex; align-items: center; gap: 10px; }
.progress__label {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.7); white-space: nowrap;
}
.progress__track {
  width: clamp(70px, 22vw, 190px); height: 6px;
  background: rgba(255,255,255,0.14);
}
.progress__fill {
  height: 100%; width: 0%; background: var(--lime);
  transition: width 420ms cubic-bezier(.2,.9,.25,1);
}

/* ══ BUTTONS ═══════════════════════════════════════════════════════════ */
.cta {
  appearance: none; border: 0; cursor: pointer;
  display: inline-block;
  padding: 17px 34px;
  background: var(--lime); color: var(--navy);
  font-weight: 800; font-size: clamp(16px, 2.4vw, 19px);
  letter-spacing: -0.01em;
  box-shadow: 6px 6px 0 var(--blue);
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
}
.cta:hover  { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--blue); }
.cta:active { transform: translate(3px, 3px);  box-shadow: 2px 2px 0 var(--blue); }

.ghost-btn {
  appearance: none; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.78);
  border: 1.5px solid rgba(255,255,255,0.3);
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: border-color 130ms ease, color 130ms ease;
}
.ghost-btn:hover { border-color: var(--lime); color: var(--lime); }
.ghost-btn--lg { padding: 16px 28px; font-size: 16px; }

:where(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

/* ══ SCREENS ═══════════════════════════════════════════════════════════ */
#main { flex: 1 1 auto; display: flex; flex-direction: column; }

.screen {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(20px, 4vh, 44px) var(--rail) 72px;
}
/* The entry animation is applied per-show by app.js, never as a standing rule:
   a CSS animation declared on an element that starts `hidden` sticks on its
   first keyframe when the element is revealed, which left every screen
   permanently offset by the `from` translate. It also travels UPWARD so a
   mid-flight frame can never push content past the fold and flash a scrollbar. */
.screen.is-entering { animation: screen-in 460ms cubic-bezier(.2,.9,.25,1) both; }
/* Start and quiz fill the leftover space; result is free to be tall. */
.screen--start, .screen--quiz { flex: 1 1 auto; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}

/* ══ START SCREEN ══════════════════════════════════════════════════════ */
/* Sized to sit inside one viewport so the toy is visible without scrolling —
   at an expo nobody scrolls a landing screen. */
.screen--start {
  text-align: center;
  display: grid; place-items: center;
  padding-top: clamp(10px, 2vh, 24px);
  padding-bottom: clamp(16px, 3vh, 32px);
}
.start__inner {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(10px, 1.6vw, 12px); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--aqua);
}

.hero {
  margin: 0 0 14px;
  font-weight: 900;
  font-size: clamp(40px, 8.4vw, 82px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.hero__accent {
  color: var(--lime);
  text-shadow: 5px 5px 0 var(--blue);
}

.hero__sub {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(14px, 1.9vw, 17px);
  line-height: 1.5;
  color: rgba(255,255,255,0.76);
}
.hero__sub strong { color: #fff; font-weight: 600; }

/* The landing toy is decorative — keep it smaller than the playable one.
   Note: the 45° rotation grows the diamond to ~1.42x its layout box, so the
   wrapper has to reserve that much height or the toy overlaps its neighbours. */
.start__toy {
  --idle-size: min(46vw, 30vh, 270px);
  margin: clamp(14px, 3vh, 26px) 0 clamp(16px, 3vh, 26px);
  display: grid; place-items: center;
  width: 100%;
  min-height: calc(var(--idle-size) * 1.42);
}
.start__toy .catcher { width: var(--idle-size); height: var(--idle-size); }

.microcopy {
  margin: 18px 0 0;
  font-size: 12.5px; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.42);
}
.microcopy--foot { margin-top: 34px; text-align: center; }

/* ══ QUIZ SCREEN ═══════════════════════════════════════════════════════ */
/* Must never scroll: the toy has to be reachable in one look, on a stand,
   with someone waiting behind you. Fill the viewport and centre the toy. */
.screen--quiz {
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(10px, 2vh, 22px);
  padding-bottom: clamp(10px, 2vh, 22px);
}
/* The stage absorbs any slack so the toy stays optically centred. */
.screen--quiz .catcher-stage { flex: 1 1 auto; }

.q-counter {
  margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--lime);
}

.q-prompt {
  margin: 0 auto clamp(18px, 3.5vh, 34px);
  max-width: 20ch;
  font-weight: 800;
  font-size: clamp(26px, 5.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.catcher-stage {
  display: grid; place-items: center;
  /* 1.42 = √2, the exact factor by which the 45° rotation grows the box. */
  min-height: calc(var(--catcher-size) * 1.42);
  perspective: 1400px;
}

.q-hint {
  margin: clamp(16px, 3vh, 30px) 0 0;
  font-size: 13px; color: rgba(255,255,255,0.45);
}
.q-hint__keys { color: rgba(255,255,255,0.3); }
@media (hover: none) { .q-hint__keys { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   CHATTERBOX
   A cootie catcher seen from above: a square rotated 45° into a diamond,
   split into four quadrant flaps that meet at a centre point. Each flap
   carries a diagonal fold-crease gradient and a lifted paper shadow.
   The label inside is counter-rotated -45° so it reads level.
   ══════════════════════════════════════════════════════════════════════ */
.catcher {
  position: relative;
  width: var(--catcher-size);
  height: var(--catcher-size);
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 3px;
  transform: rotate(45deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,0.5));
}

/* Flap order in the DOM is TL, TR, BL, BR of the unrotated square, which
   after the 45° turn reads as top, right, left, bottom of the diamond. */
.catcher__flap {
  position: relative;
  appearance: none; border: 0; margin: 0; padding: 0;
  display: grid; place-items: center;
  cursor: pointer;
  overflow: hidden;
  transition: filter 160ms ease, transform 200ms cubic-bezier(.2,.9,.25,1);
  /* The fold crease: each quadrant is really two paper triangles. */
  background-image:
    linear-gradient(var(--fold-angle, 135deg),
      var(--flap) 0 50%,
      color-mix(in srgb, var(--flap) 84%, #000) 50% 100%);
}

/* Soft inner shading toward the centre point of the toy. */
.catcher__flap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at var(--shade-x, 100%) var(--shade-y, 100%),
              rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 62%);
  pointer-events: none;
}

.catcher__flap:hover  { filter: brightness(1.09); }
.catcher__flap:active { transform: scale(0.965); }

/* Corner geometry — which way each quadrant's crease runs, and where the
   centre of the toy sits relative to that quadrant. */
.catcher__flap[data-slot="0"], .catcher > *:nth-child(1) { --fold-angle: 135deg; --shade-x: 100%; --shade-y: 100%; }
.catcher__flap[data-slot="1"], .catcher > *:nth-child(2) { --fold-angle: 225deg; --shade-x: 0%;   --shade-y: 100%; }
.catcher__flap[data-slot="2"], .catcher > *:nth-child(3) { --fold-angle: 45deg;  --shade-x: 100%; --shade-y: 0%;   }
.catcher__flap[data-slot="3"], .catcher > *:nth-child(4) { --fold-angle: 315deg; --shade-x: 0%;   --shade-y: 0%;   }

.flap--lime   { --flap: var(--lime); }
.flap--aqua   { --flap: var(--aqua); }
.flap--violet { --flap: var(--violet); }
.flap--peach  { --flap: var(--peach); }

/* The label block (key number + answer text) is counter-rotated so it reads
   horizontally, and nudged outward along the quadrant's diagonal so it lands
   on the OUTER half of the fold rather than straddling the crease — which is
   where you'd actually write on a paper chatterbox. Keeping the number and the
   text in one stacked block means they can never collide. */
.catcher__label {
  position: relative; z-index: 2;
  transform: translate(var(--label-x, 0), var(--label-y, 0)) rotate(-45deg);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  /* Width must stay inside the triangle at the nudged position, or long
     answers get clipped by the flap's overflow:hidden. At a 10% nudge the
     available span is ~113% of the quadrant, so 100% leaves a safe margin. */
  width: 100%;
  padding: 0 2%;
  pointer-events: none;
}

/* Outward nudge per quadrant. Slot 0 is the top point of the diamond,
   1 = right, 2 = left, 3 = bottom. */
.catcher > *:nth-child(1) { --label-x: -10%; --label-y: -10%; }
.catcher > *:nth-child(2) { --label-x:  10%; --label-y: -10%; }
.catcher > *:nth-child(3) { --label-x: -10%; --label-y:  10%; }
.catcher > *:nth-child(4) { --label-x:  10%; --label-y:  10%; }

/* Size the answer text off the TOY, not the viewport — the label has to fit
   inside a quadrant that is half the catcher wide, so tying it to vw meant
   long answers clipped on small screens where the toy shrank but the type
   hit its floor. 0.038 keeps the longest answer in the bank inside the fold. */
.catcher__text, .catcher__word {
  display: block;
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(9.5px, calc(var(--catcher-size) * 0.038), 15px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;   /* belt and braces: never clip, always wrap */
}
.catcher__word {
  font-size: clamp(11px, calc(var(--catcher-size) * 0.045), 17px);
  letter-spacing: 0.14em;
  opacity: 0.45;
}
/* The idle toy on the landing page has its own, smaller box. */
.start__toy .catcher__word { font-size: clamp(11px, calc(var(--idle-size) * 0.055), 17px); }

/* The little 1–4 keyboard hint, sitting above its answer. */
.catcher__key {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--navy) 40%, transparent);
  font-size: 10.5px; font-weight: 800; color: var(--navy);
  opacity: 0.45;
}
@media (hover: none) { .catcher__key { display: none; } }

/* The X of creases across the middle of the folded paper. */
.catcher__crease {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to right,  transparent calc(50% - 1px), rgba(14,21,71,0.22) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(14,21,71,0.22) 50%, transparent calc(50% + 1px));
}

/* The number that flashes in the centre while the paper pumps. */
.catcher__pump {
  position: absolute; z-index: 4; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
}
.catcher__pump span {
  transform: rotate(-45deg);
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(26px, 7vw, 52px);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}
.is-pumping .catcher__pump { animation: pump-word var(--pump-ms, 620ms) ease-out both; }
@keyframes pump-word {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── The pump: open horizontally, then vertically, exactly like the toy ──
   Duration comes from --pump-ms so the same keyframes can run slow between
   questions and fast when spelling out a colour letter by letter. */
.is-pumping { animation: pump var(--pump-ms, 620ms) cubic-bezier(.45,.05,.35,1) both; }
@keyframes pump {
  0%   { transform: rotate(45deg) scale(1, 1); }
  28%  { transform: rotate(45deg) scale(1.02, 0.09); }
  58%  { transform: rotate(45deg) scale(0.09, 1.02); }
  84%  { transform: rotate(45deg) scale(1.03, 1.03); }
  100% { transform: rotate(45deg) scale(1, 1); }
}

/* Idle pump on the landing screen — an invitation, so the flaps stay
   interactive. The toy is now the primary tap target, so the pump is a brief
   flourish at the end of a long cycle rather than a constant motion: at rest
   ~80% of the time, because a finger arriving mid-squash would find a very
   small target. Hovering or tabbing in freezes it outright. */
.catcher--idle {
  animation: pump-idle 6000ms cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes pump-idle {
  0%, 80%  { transform: rotate(45deg) scale(1, 1); }
  87%      { transform: rotate(45deg) scale(1.01, 0.2); }
  94%      { transform: rotate(45deg) scale(0.2, 1.01); }
  98%      { transform: rotate(45deg) scale(1.02, 1.02); }
  100%     { transform: rotate(45deg) scale(1, 1); }
}
.catcher--idle:hover,
.catcher--idle:focus-within { animation-play-state: paused; }
/* While spelling out the chosen colour, the idle loop must not fight the pump. */
.catcher--idle.is-pumping { animation: pump var(--pump-ms, 620ms) cubic-bezier(.45,.05,.35,1) both; }

/* The colour words are the call to action here, so they're not faded back. */
.start__toy .catcher__word { opacity: 0.72; }
.start__toy .catcher__flap:hover .catcher__word,
.start__toy .catcher__flap:focus-visible .catcher__word { opacity: 1; }

.start__prompt {
  margin: 0;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(15px, 2.2vw, 19px);
  letter-spacing: 0.02em;
  color: var(--lime);
  animation: prompt-breathe 2600ms ease-in-out infinite;
}
@keyframes prompt-breathe {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1; }
}

/* The chosen flap lifts off the page before the next question loads. */
.catcher__flap.is-chosen {
  z-index: 5;
  animation: flap-lift 560ms cubic-bezier(.3,.8,.3,1) both;
}
@keyframes flap-lift {
  0%   { transform: none; filter: brightness(1); }
  40%  { transform: scale(1.06); filter: brightness(1.3); }
  100% { transform: scale(1.02); filter: brightness(1.1); }
}

/* The whole toy blows open on the final answer, revealing the fortune. */
.is-revealing { animation: reveal 760ms cubic-bezier(.3,.85,.3,1) both; }
@keyframes reveal {
  0%   { transform: rotate(45deg) scale(1); opacity: 1; }
  35%  { transform: rotate(45deg) scale(0.86); opacity: 1; }
  100% { transform: rotate(225deg) scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .catcher--idle, .is-pumping, .is-revealing,
  .catcher__flap.is-chosen, .screen, .confetti i {
    animation: none !important;
  }
  .catcher { transform: rotate(45deg) !important; }
  * { transition-duration: 1ms !important; }
}

/* ══ RESULT SCREEN ═════════════════════════════════════════════════════ */
.screen--result { position: relative; }

/* --- The shareable card --- */
.card {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(26px, 5vw, 46px);
  box-shadow: 12px 12px 0 var(--accent);
  border: 2px solid var(--navy-deep);
}
.card__head { text-align: center; }
.card__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  opacity: 0.6;
}
.card__emoji { font-size: clamp(38px, 8vw, 58px); line-height: 1; margin-bottom: 6px; }
.card__name {
  margin: 0;
  font-weight: 900;
  font-size: clamp(34px, 9vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.card__blend {
  margin: 12px 0 0;
  font-size: clamp(14px, 2.6vw, 18px); font-weight: 500;
  opacity: 0.78;
}
.card__quote {
  margin: 22px auto 0;
  max-width: 30ch;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(17px, 3.4vw, 25px);
  line-height: 1.2; letter-spacing: -0.02em;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  padding: 16px 0;
  opacity: 0.92;
}
.card__body { margin-top: 26px; }
.card__desc {
  margin: 0 0 22px;
  font-size: clamp(14.5px, 2.3vw, 16.5px);
  line-height: 1.62;
  opacity: 0.9;
}
.card__label {
  margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.6;
}
.card__key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 14px 0 0;
  font-size: 11.5px; font-weight: 500; opacity: 0.65;
}
.key-swatch { width: 11px; height: 11px; display: inline-block; }
.key-swatch--mindsets  { background: color-mix(in srgb, var(--lime)   72%, var(--on-ink)); }
.key-swatch--skillsets { background: color-mix(in srgb, var(--violet) 72%, var(--on-ink)); }
.key-swatch--toolsets  { background: color-mix(in srgb, var(--aqua)   72%, var(--on-ink)); }

.card__foot {
  margin-top: 26px; padding-top: 16px;
  border-top: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.6;
}

.screenshot-nudge {
  margin: 18px 0 44px; text-align: center;
  font-size: 13.5px; color: rgba(255,255,255,0.5);
}

/* --- Chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1.5px solid currentColor;
  font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.chip__dot { width: 9px; height: 9px; background: currentColor; }

/* Trait chips are tinted by category — Mindsets / Skillsets / Toolsets.
   The card's background is a different colour for every archetype, and two of
   them (Trailblazer, Firestarter) are DARK electric blue while the rest are
   light. So the category colour is mixed toward the card's own text colour
   rather than being fixed: that keeps the dot legible on a navy-on-lime card
   and on a white-on-blue one, and stops an aqua dot vanishing into an aqua
   card. Text and border just ride on currentColor. */
.card .chip {
  color: var(--on-ink);
  border-color: color-mix(in srgb, var(--on-ink) 45%, transparent);
  background: color-mix(in srgb, var(--on-ink) 7%, transparent);
}
.card .chip--mindsets  .chip__dot { background: color-mix(in srgb, var(--lime)   72%, var(--on-ink)); }
.card .chip--skillsets .chip__dot { background: color-mix(in srgb, var(--violet) 72%, var(--on-ink)); }
.card .chip--toolsets  .chip__dot { background: color-mix(in srgb, var(--aqua)   72%, var(--on-ink)); }

/* On the dark navy panels the text itself can carry the category colour. */
.panel .chip--mindsets  { color: var(--lime); }
.panel .chip--skillsets { color: var(--violet); }
.panel .chip--toolsets  { color: var(--aqua); }
.chips--jobs .chip, .chips--growth .chip { color: rgba(255,255,255,0.82); }
.chips--growth .chip { border-style: dashed; color: var(--peach); }

/* --- Panels --- */
.panel {
  margin-top: 26px;
  padding: clamp(20px, 3.6vw, 32px);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.11);
}
.panel--split {
  display: flex; align-items: center; gap: 24px; justify-content: space-between;
}
.panel__title {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(15px, 2.4vw, 19px);
  letter-spacing: 0.01em;
  color: var(--lime);
}
.panel__lead {
  margin: 0 0 16px;
  font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,0.76);
}
.panel__note {
  margin: 14px 0 0;
  font-size: 12.5px; color: rgba(255,255,255,0.42);
}
.collab__name {
  margin: 0 0 8px;
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(22px, 4.5vw, 32px);
  letter-spacing: -0.03em;
  color: #fff;
}
.collab__badge {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  font-size: 38px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.16);
}

/* ══ EMAIL CAPTURE ═════════════════════════════════════════════════════ */
/* Given a lime edge so it reads as the one thing on the page asking
   something of you, rather than blending into the result panels. */
.panel--capture {
  border: 1px solid color-mix(in srgb, var(--lime) 45%, transparent);
  background: color-mix(in srgb, var(--lime) 6%, transparent);
  border-left: 4px solid var(--lime);
}
.panel__title--lg { font-size: clamp(19px, 3.2vw, 26px); margin-bottom: 10px; }
.panel--capture .panel__lead strong { color: #fff; font-weight: 600; }

/* Shown above the fields when CAPTURE.demo is on. */
.demo-note {
  margin: 18px 0 0;
  padding: 11px 14px;
  border: 1.5px dashed var(--peach);
  color: var(--peach);
  font-size: 13.5px; font-weight: 500;
}

.field-row {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  margin: 20px 0 16px;
}
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field__label {
  font-family: var(--font-head); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.field__opt { opacity: 0.5; letter-spacing: 0.08em; }
.field__input {
  appearance: none;
  width: 100%;
  padding: 14px 16px;
  background: rgba(0,0,0,0.28);
  border: 1.5px solid rgba(255,255,255,0.24);
  color: #fff;
  font-family: var(--font-body); font-size: 16px;  /* 16px stops iOS zooming */
  transition: border-color 130ms ease, background 130ms ease;
}
.field__input::placeholder { color: rgba(255,255,255,0.32); }
.field__input:focus { outline: none; border-color: var(--lime); background: rgba(0,0,0,0.4); }
.field__input:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.field__input[aria-invalid="true"] { border-color: var(--peach); }

.consent {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,0.76);
  cursor: pointer;
}
.consent input {
  flex: 0 0 auto;
  width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--lime);
  cursor: pointer;
}

.field__error {
  margin: 12px 0 0;
  min-height: 1px;
  font-size: 13.5px; font-weight: 500;
  color: var(--peach);
}
.field__error:empty { display: none; }

.capture__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin-top: 18px;
}
.cta--sm { padding: 14px 26px; font-size: 16px; box-shadow: 5px 5px 0 var(--blue); }
.cta--sm:hover  { box-shadow: 7px 7px 0 var(--blue); }
.cta--sm:active { box-shadow: 2px 2px 0 var(--blue); }
.cta[disabled] { opacity: 0.55; cursor: progress; transform: none; }

.linkish {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 8px 2px;
  font: inherit; font-size: 14px;
  color: rgba(255,255,255,0.5);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: rgba(255,255,255,0.85); }

.panel__note a { color: rgba(255,255,255,0.62); }

.capture__done { text-align: center; padding: 10px 0; }
.capture__tick {
  margin: 0 auto 12px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--lime); color: var(--navy);
  font-size: 26px; font-weight: 800; line-height: 1;
}

/* Staff-only toast, e.g. after a CSV export. */
.staff-toast {
  position: fixed; z-index: 85;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  padding: 12px 18px;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 600;
  box-shadow: 5px 5px 0 var(--lime);
}

/* --- Radar --- */
.radar-wrap { display: grid; place-items: center; }
.radar { width: min(100%, 470px); height: auto; overflow: visible; }
.radar-legend {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 22px;
}
.radar-legend li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.66);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 5px;
}
.radar-legend b { color: #fff; font-weight: 600; }
.radar-legend span { font-family: var(--font-head); font-weight: 700; color: var(--lime); }

/* --- Famous --- */
.famous { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.famous__item {
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.03);
}
.famous__field {
  display: block; margin-bottom: 5px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--aqua);
}
.famous__who { font-weight: 600; font-size: 15px; }

.result__actions {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center;
}

/* ══ CONFETTI — little scraps of folded paper ══════════════════════════ */
.confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -8vh;
  width: 10px; height: 14px;
  animation: fall linear forwards;
}
@keyframes fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--drift, 0px), 112vh, 0) rotate(var(--spin, 540deg)); opacity: 0.9; }
}

/* ══ IDLE / KIOSK TOAST ════════════════════════════════════════════════ */
.idle-toast {
  position: fixed; z-index: 80;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--lime); color: var(--navy);
  font-size: 14px; font-weight: 600;
  box-shadow: 5px 5px 0 var(--blue);
}
.idle-toast button {
  appearance: none; cursor: pointer;
  background: var(--navy); color: var(--lime); border: 0;
  padding: 8px 14px; font: inherit; font-weight: 700;
}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* 62vw is the practical ceiling on a phone: x1.42 for the rotation lands at
     ~88vw, leaving room for the rails and the drop shadow. */
  :root { --catcher-size: min(62vw, 42vh, 320px); }
  .panel--split { flex-direction: column; align-items: flex-start; }
  .card { box-shadow: 8px 8px 0 var(--accent); }
  .result__actions .cta, .result__actions .ghost-btn { width: 100%; text-align: center; }
}

/* Big-screen / kiosk-tablet mode: give the toy more room. */
@media (min-width: 900px) and (min-height: 900px) {
  :root { --catcher-size: min(44vh, 440px); }
}