/* ============================================================
   XEMYA G2 — assessment engine skin.

   assets/js/assessment.js is the scoring and delivery engine and is NOT
   touched by the redesign: it emits the same class names it always has, so
   its behaviour, its payload contract and the tests that cover it stay
   exactly as they were. What changed is only how those classes look. This
   file is that skin, written in G2 tokens — the old look lived in
   assets/css/xemya.css, which the six redesigned pages never load.

   Every rule is scoped to #app, the engine's mount, for two reasons. It
   cannot leak into the rest of the page; and it outranks g2.css's own
   element-level rules. That second one is load-bearing rather than tidy:
   g2.css sets `.card p{font-size:15.5px}` at specificity 0-1-1, which beats
   a bare `.block-label` at 0-1-0, so the engine's paragraph classes lost
   their size and colour inside a card until the id put them ahead.

   Rules carried over from the G2 spec: warm shadow instead of outline, no
   black shadow, no gradient fills, no glow. Colour arrives through --accent,
   which assessment.js sets to the respondent's archetype ink at results time
   (already contrast-checked by site.js getAccessibleAccent).
   ============================================================ */

:root{
  /* The donut's unfilled ring reads this. It is the one token the engine
     names that G2 did not already define — without it the ring is invisible. */
  --surface-2:#efe8da;
  /* Archetype gradient stops. site.js and assessment.js set these at runtime;
     these are only the pre-result fallback. G2 paints no gradients, so they
     exist to keep var() lookups resolving, not to be drawn. */
  --g1:var(--steward); --g2:var(--steward);
}

/* The mount. Cards inside the assessment do not lift on hover — g2.css gives
   .card a hover transform that is right for a grid of content cards and wrong
   for the panel someone is answering questions in. */
#app{max-width:760px;margin:0 auto}
#app .card:hover{transform:none;box-shadow:var(--sh1)}
#app .card+.card{margin-top:20px}

/* ---------- shared bits ---------- */
#app .center{text-align:center}
#app .block-label{font:600 11.5px/1 Outfit;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:26px 0 10px;max-width:none}
#app .legend-line{font-size:13.5px;line-height:1.55;color:var(--faint);margin-top:12px}
#app .disclaimer-note{font-size:12.5px;line-height:1.6;color:var(--faint);
  margin-top:26px;padding-top:18px;border-top:1px solid var(--hair)}
#app .link-ghost{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;
  color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease)}
#app .link-ghost:hover{border-bottom-color:currentColor}

#app .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
#app .actions--center{justify-content:center}
#app .btn--ghost{background:rgba(33,30,26,.05);color:var(--ink);box-shadow:none}
#app .btn--ghost:hover{background:rgba(33,30,26,.09);box-shadow:none}
#app .btn--sm{padding:11px 19px;font-size:14.5px}
#app .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--sh1)}

/* ---------- intro ---------- */
#app .intro-card{padding:clamp(26px,3.4vw,40px);border-radius:var(--r-lg);box-shadow:var(--sh3)}
#app .intro-card .lead{max-width:none;margin-bottom:24px;font-size:17.5px}
#app .price-row__price{font:600 34px/1 Outfit;letter-spacing:-.03em;color:var(--ink);
  width:100%;text-align:center;margin-bottom:4px}

/* Validation messages are hidden until the engine adds .show. */
#app .field-error{display:none;font-size:13px;color:var(--maverick);margin-top:7px}
#app .field-error.show{display:block}
#app .field--consent{margin-top:18px}
#app .consent{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;
  line-height:1.5;color:var(--mid);cursor:pointer}
#app .consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}

#app .notice-card{background:color-mix(in srgb,var(--accent) 8%,var(--card));
  border-radius:14px;padding:14px 16px;font-size:14.5px;color:var(--ink);
  margin-bottom:18px;max-width:none}
#app .send-warn{background:color-mix(in srgb,var(--connector) 10%,var(--card));
  border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.55;
  color:var(--ink);margin-top:16px;max-width:none}
#app .send-warn p{margin:0 0 8px;font-size:inherit;color:inherit;max-width:none}
#app .send-warn p:last-child{margin-bottom:0}
#app .send-warn a{color:var(--accent);font-weight:600}

/* ---------- quiz ---------- */
#app .quiz-card{padding:clamp(26px,3.4vw,40px);border-radius:var(--r-lg);box-shadow:var(--sh3)}
#app .quiz-meta{display:flex;justify-content:space-between;font:600 12px/1 Outfit;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
#app .progress{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
#app .progress__fill{height:100%;width:0;background:var(--accent);border-radius:99px;
  transition:width .5s var(--ease)}
#app .qtext{font:500 clamp(21px,2.6vw,27px)/1.35 Outfit;letter-spacing:-.02em;
  color:var(--ink);margin:28px 0 24px;min-height:2.7em}

/* Five long labels do not fit across a row at any width worth supporting, so
   the scale is a vertical stack. */
#app .likert,#app .choice{display:flex;flex-direction:column;gap:9px}
/* The answer buttons carry the same turning multicolour edge as the CTA box on
   the home page. Two background layers do it without pseudo-elements: the fill
   clipped to the padding box, the conic gradient clipped to the border box, so
   only the 2px border shows colour and the label stays in normal flow.

   The angle is animated through a registered custom property, which is the only
   way a conic gradient can actually rotate in place. Where @property is not
   supported the gradient simply sits still - the border is still every colour,
   it just does not turn. */
@property --bang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes bangspin{to{--bang:360deg}}

#app .likert__btn,#app .choice__btn{display:flex;align-items:center;gap:12px;width:100%;
  text-align:left;font:500 16px/1.4 Outfit;color:var(--ink);cursor:pointer;
  --fill:color-mix(in srgb,var(--ink) 3%,var(--card));
  background-image:linear-gradient(var(--fill),var(--fill)),
    conic-gradient(from var(--bang),var(--steward),var(--guide),var(--connector),
      var(--maverick),var(--strategist),var(--steward));
  background-origin:border-box;background-clip:padding-box,border-box;
  border:2px solid transparent;border-radius:14px;padding:14px 17px;
  animation:bangspin 9s linear infinite;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
#app .likert__btn:hover,#app .choice__btn:hover{transform:translateX(3px);box-shadow:var(--sh1)}
#app .likert__btn.sel,#app .choice__btn.sel{font-weight:600;
  --fill:color-mix(in srgb,var(--accent) 11%,var(--card));box-shadow:var(--sh1)}
#app .likert__btn:focus-visible,#app .choice__btn:focus-visible{outline:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
/* A test is a long sit. Anyone who has asked the system to stop moving things
   gets a still border, not a slower one. */
@media(prefers-reduced-motion:reduce){
  #app .likert__btn,#app .choice__btn{animation:none}
}

/* A keycap, not a badge. The hint line tells people they can press A–C, so
   this has to name the key it maps to; it is a control, not decoration. */
#app .choice__key{flex:0 0 auto;display:grid;place-items:center;min-width:26px;height:26px;
  font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);
  background:var(--card);border:1px solid var(--hair);border-bottom-width:2px;border-radius:6px}
#app .choice__btn.sel .choice__key{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--hair))}
#app .choice__label{flex:1 1 auto}

#app .quiz-nav{display:flex;align-items:center;gap:14px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--hair)}
#app .quiz-nav__hint{font-size:13px;color:var(--faint);margin-left:auto;text-align:right}

/* ---------- results ---------- */
#app .arch-card{background:color-mix(in srgb,var(--accent) 9%,var(--card));
  border-radius:var(--r-lg);box-shadow:var(--sh2);
  padding:clamp(28px,3.6vw,42px);margin-bottom:20px}
#app .arch-card__eyebrow{font:600 11.5px/1 Outfit;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0}
#app .arch-card__name{font:600 clamp(32px,5vw,48px)/1.05 Outfit;letter-spacing:-.035em;
  color:var(--ink);margin:12px 0 8px}
#app .arch-card__tag{font-size:18.5px;color:var(--mid);margin:0 0 14px;max-width:none}
#app .arch-card__intro{font-size:16px;line-height:1.65;color:var(--ink);margin:0;max-width:62ch}
#app .arch-card__dual{margin-top:14px;display:inline-block;font:600 12.5px/1 Outfit;
  letter-spacing:.06em;color:var(--accent);
  background:var(--card);padding:9px 13px;border-radius:99px}

#app .bar{margin-bottom:15px}
#app .bar__row{display:flex;justify-content:space-between;gap:12px;
  font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
#app .bar__score{color:var(--mid);font-variant-numeric:tabular-nums}
#app .bar__note{font-weight:500}
#app .bar__note--standout{color:var(--accent)}
#app .bar__note--low{color:var(--faint)}
#app .bar__track{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
#app .bar__fill{height:100%;background:var(--accent);border-radius:99px;
  transition:width 1.1s var(--ease)}

#app .donut-wrap{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:6px 0 4px}
#app .donut{position:relative;width:190px;flex:0 0 auto}
#app .donut svg{width:100%;height:auto;display:block;transform:rotate(-90deg)}
#app .donut__center{position:absolute;inset:0;display:grid;place-content:center;
  text-align:center;gap:2px}
#app .donut__pct{font:600 30px/1 Outfit;letter-spacing:-.03em;color:var(--ink)}
#app .donut__label{font:600 11px/1.2 Outfit;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
#app .donut-legend{flex:1 1 190px;display:flex;flex-direction:column;gap:9px}
#app .donut-legend__row{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--mid)}
#app .donut-legend__swatch{width:12px;height:12px;flex:0 0 auto;border-radius:3px;background:var(--accent)}

#app .drive-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
#app .drive-tile{background:color-mix(in srgb,var(--ink) 3%,var(--card));
  border-radius:14px;padding:16px 12px;text-align:center}
#app .drive-tile__pct{display:block;font:600 26px/1 Outfit;letter-spacing:-.03em;color:var(--accent)}
#app .drive-tile__name{display:block;font-size:12.5px;color:var(--faint);margin-top:6px}

#app .feed-starve{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
#app .feed-starve>div{background:color-mix(in srgb,var(--ink) 3%,var(--card));
  border-radius:14px;padding:16px 18px;font-size:14.8px;line-height:1.55;color:var(--mid)}
#app .feed-starve b{display:block;color:var(--ink);margin-bottom:5px}

#app .rx{background:color-mix(in srgb,var(--accent) 9%,var(--card));border-radius:14px;
  padding:16px 18px;font-size:15.2px;line-height:1.6;color:var(--ink)}
#app .rx b{color:var(--accent)}

#app .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#app .chip{display:inline-block;font:600 12.5px/1 Outfit;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 11%,var(--card));padding:8px 12px;border-radius:99px}

#app .strength-row{display:flex;align-items:baseline;gap:12px;padding:12px 0;
  border-top:1px solid var(--hair)}
#app .strength-row__name{font-weight:600;color:var(--ink);flex:0 0 auto}
#app .strength-row__fn{font-size:14.5px;color:var(--mid);flex:1 1 auto}
#app .strength-row__score{font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}

#app .upsell-card,#app .next-step-card{background:color-mix(in srgb,var(--accent) 8%,var(--card));
  border-radius:var(--r);padding:24px 26px;margin-top:26px}
#app .upsell-card .btn,#app .next-step-card .btn{margin-top:14px}
#app .results-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--hair)}

@media(max-width:620px){
  #app .drive-tiles{grid-template-columns:repeat(2,1fr)}
  #app .feed-starve{grid-template-columns:1fr}
  #app .donut{width:100%;max-width:220px;margin:0 auto}
  #app .quiz-nav{flex-direction:column;align-items:stretch;gap:10px}
  #app .quiz-nav__hint{margin-left:0;text-align:left}
}

/* "Save as PDF" is a real button on the results page — chrome must not print. */
@media print{
  #app .noprint{display:none!important}
  #app .arch-card,#app .upsell-card,#app .next-step-card,#app .rx{background:#fff;box-shadow:none}
  #app .card{box-shadow:none;break-inside:avoid}
}

/* ---------- stage: what the visitor is actually doing ----------
   assessment.js publishes data-stage on <body> as intro | quiz | results.
   The assessment lives inside a marketing page, and past the intro the
   marketing works against the visitor: the hero pushes their own results
   below the fold, and a header still offering "Take the Free Test" is
   addressed to somebody who has already taken it. */
body[data-stage="quiz"] .hero-full,
body[data-stage="results"] .hero-full{display:none}

body[data-stage="quiz"] .nav .btn,
body[data-stage="results"] .nav .btn{display:none}

/* The hero carried the top of the page. Without it #start would begin hard
   against the header. */
body[data-stage="quiz"] #start,
body[data-stage="results"] #start{padding-top:clamp(28px,4vw,52px)}

/* ---------- fine print ----------
   These notices were running the full width of the card, directly under the
   buttons, with nothing separating them - which is what made them read as
   stray left-aligned text rather than as a footnote. Held to a readable
   measure and centred as a block, with room above.

   The legal paragraph keeps its own text left-aligned: it is 60-odd words,
   and centring lines that long costs the reader the left margin their eye
   returns to on every line. Short notices, which are one or two lines, are
   centred outright. */
#app .disclaimer-note{max-width:64ch;margin-inline:auto;margin-top:34px;padding-top:22px}

#app .legend-line,
#app .quiz-foot,
#app .note{max-width:56ch;margin-inline:auto;text-align:center}

#app .notice-card{max-width:64ch;margin-inline:auto}

/* The blurb that sells the assessment, above the assessment itself. Right up
   until somebody starts; after that it is a wall between them and their own
   answers. blueprint.html has no hero, so this block alone is what was pushing
   the paid report below the fold. */
body[data-stage="quiz"] .page-intro,
body[data-stage="results"] .page-intro{display:none}