/*
 * The test page in the redesign (2026-10-30), with test-page.php and
 * js/test.js. Loaded instead of quiz.css when the new chrome is on, after
 * the engine's frontend.css and chrome.css (which holds the tokens).
 * Source: design/projects/test-page/round1/a.html and design/DESIGN.md.
 *
 * The engine's markup is styled as it comes - classes quiz-engine-* are
 * the engine's and are never renamed. Its frontend.css rules that fight the
 * design are overridden here: the greyed-out questions, its progress bar,
 * its timer, its share row pinned to the top on a phone.
 */

.wg-v2.single-quiz_test {--arrow: var(--ch-arrow); --chev: var(--ch-chev);}
/* How much of the top the page keeps covered, for the engine's scroll to the
   next question (it adds 12px of its own): on a phone the sticky answer
   sheet, so a question lands 58px down; on desktop nothing, 40px. Declared
   on :root - the engine reads it there. Plus the admin bar when logged in. */
:root {--quiz-engine-scroll-offset: 46px;}
@media (min-width: 1280px) {
	:root {--quiz-engine-scroll-offset: 28px;}
	:root:has(body.admin-bar) {--quiz-engine-scroll-offset: 60px;}
}
.tp-shell {padding: 0 16px; font-family: var(--sans); color: var(--graphite); font-size: 17px; line-height: 1.55;}
.tp-shell *, .tp-shell *::before, .tp-shell *::after {box-sizing: border-box;}
.tp-shell img {display: block; max-width: 100%; height: auto;}
.tp-shell h1, .tp-shell h2, .tp-shell h3, .tp-shell p, .tp-shell figure {margin: 0; padding: 0; text-align: left; color: inherit;}
.tp-shell a {color: var(--form-deep); text-decoration-thickness: 1px; text-underline-offset: .18em;}
.tp-shell :focus-visible {outline: 2px solid var(--form); outline-offset: 3px; border-radius: 4px;}
.tp-shell b, .tp-shell strong {font-weight: 600;}

/* ---------- the three states: one page, the result replaces what is above it ---------- */
body[data-stage="result"] .tp-intro,
body[data-stage="result"] .tp-sheet,
body[data-stage="result"] .quiz-engine-form,
body[data-stage="result"].single-quiz_test .breadcrumbs {display: none;}
body:not([data-stage="result"]) .tp-cta,
body:not([data-stage="result"]) .tp-side,
body:not([data-stage="result"]) .tp-keep {display: none;}
.tp-compare:empty {display: none;}

/* ---------- buttons ---------- */
.tp-btn {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--form); color: #fff !important; font: 600 17px/1.2 var(--sans); text-align: center; text-decoration: none !important; cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease);}
.tp-btn:hover {background: var(--form-deep);}
.tp-btn:active {transform: translateY(1px);}
.tp-btn .ch-ico {width: 18px; height: 18px;}

/* ---------- intro ---------- */
.tp-intro {display: grid; gap: 20px; padding: 20px 0 32px;}
/* A 44px target, the text where it was (Designer's review, 2026-10-30). */
.tp-tag {display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: 13.5px; font-weight: 600; color: var(--form-deep) !important; text-decoration: none;}
.tp-tag:hover {text-decoration: underline;}
.tp-intro h1 {margin-top: 8px; font-size: 36px; line-height: 1.04; font-weight: 700; letter-spacing: -.035em; text-wrap: balance;}
.tp-facts {margin-top: 14px !important; font-size: 14.5px; line-height: 1.5; color: var(--graphite-2);}
.tp-facts b {font: 500 15px/1 var(--mono); letter-spacing: -.02em; color: var(--form-deep);}
.tp-facts .tp-dot {color: var(--rule);}
.tp-lede {margin-top: 16px; font-size: 17px; line-height: 1.55; max-width: 62ch;}
.tp-lede p + p {margin-top: .8em;}
.tp-start {width: 100%; margin-top: 22px;}
.tp-shell .quiz-engine-disclaimer {margin: 16px 0 0; font-size: 13.5px; font-style: normal; line-height: 1.45; color: var(--graphite-2);}
.tp-cover img {width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--field);}

/* ---------- the answer sheet: circles fill as questions are answered ---------- */
/* Phone: a row stuck to the top while the questions are on screen; it only shows progress. */
.tp-sheet {position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; margin: 0 -16px; padding: 10px 16px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule);}
.tp-sheet-dots {display: grid; grid-template-columns: repeat(var(--cols, 21), 1fr); gap: 3px; flex: 1; pointer-events: none;}
.tp-dot-q {position: relative; width: 100%; max-width: 14px; aspect-ratio: 1; margin: 0; padding: 0; border: 1.25px solid var(--form); border-radius: 50%; background: none; cursor: pointer;}
.tp-dot-q::after {content: ''; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--graphite); clip-path: circle(0% at 50% 50%); transition: clip-path .32s var(--ease);}
.tp-dot-q.is-done::after {clip-path: circle(80% at 50% 50%);}
.tp-dot-q.is-now {outline: 1.5px solid var(--form); outline-offset: 2px;}
.tp-dot-q .n {display: none;}
.tp-sheet-count {font: 500 13px/1 var(--mono); color: var(--form-deep); white-space: nowrap;}

/* ---------- the engine's form ---------- */
.tp-quiz .quiz-engine-progress {display: none;}
/* The countdown is the engine's - kept running, only not shown. */
.tp-quiz .quiz-engine-timer {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.tp-quiz .quiz-engine-form {display: grid; gap: 32px; padding: 20px 0 0; counter-reset: wgq;}

/* A question is a field on the sheet: a header strip ("Question 07 of 21",
   drawn from a counter - the words come inline from test-page.php), the
   question, then the answers as separate buttons. Nothing greys out. */
.tp-quiz .quiz-engine-question {min-width: 0; margin: 0; padding: 0; border: 0; opacity: 1; filter: none; display: grid; gap: 8px; counter-reset: wga; transition: none;}
.tp-quiz .quiz-engine-question:not(.quiz-engine-name-prompt) {counter-increment: wgq;}
.tp-quiz .quiz-engine-question > legend {float: left; position: relative; width: 100%; margin: 0 0 6px; padding: 0; font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--graphite); text-wrap: pretty;}
.tp-quiz .quiz-engine-question > legend::before {display: flex; align-items: center; height: 33px; margin: 0 0 14px; padding: 0 14px; border-radius: 8px; background: var(--field); color: var(--form); font: 500 13px/1 var(--mono); letter-spacing: -.01em; transition: background-color .3s var(--ease), color .3s var(--ease);}
.tp-quiz .quiz-engine-question.is-active > legend::before {background: var(--form); color: #fff;}

/* An answer: a paper button with a lettered circle; checking it fills the
   circle in graphite with a wipe. The native radio stays, hidden but
   focusable - the keyboard outline goes round the whole button. */
.tp-quiz .quiz-engine-answer {position: relative; display: flex; align-items: center; min-height: 56px; margin: 0; padding: 10px 12px 10px 58px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; font-size: 16.5px; line-height: 1.4; cursor: pointer; counter-increment: wga; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease), border-color .2s var(--ease);}
.tp-quiz .quiz-engine-answer input {position: absolute; left: 20px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0;}
.tp-quiz .quiz-engine-answer::before {content: counter(wga, upper-alpha); position: absolute; z-index: 1; left: 12px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border: 1.5px solid var(--form); border-radius: 50%; color: var(--form); font: 500 13px/1 var(--mono); transition: color .2s var(--ease), border-color .2s var(--ease);}
.tp-quiz .quiz-engine-answer::after {content: ''; position: absolute; z-index: 0; left: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--graphite); clip-path: circle(0% at 50% 50%); transition: clip-path .38s var(--ease);}
@media (hover: hover) {.tp-quiz .quiz-engine-answer:hover {border-color: var(--form); background: var(--field);}}
.tp-quiz .quiz-engine-answer:has(input:checked) {border-color: var(--graphite); background: var(--field); font-weight: 500;}
.tp-quiz .quiz-engine-answer:has(input:checked)::before {color: #fff; border-color: var(--graphite);}
.tp-quiz .quiz-engine-answer:has(input:checked)::after {clip-path: circle(80% at 50% 50%);}
.tp-quiz .quiz-engine-answer:has(input:focus-visible) {outline: 2px solid var(--form); outline-offset: 2px;}
.tp-quiz .quiz-engine-form.is-completed .quiz-engine-answer {cursor: default;}

/* Answered and not current: folded to one line - the chosen answer, and
   "Change" in the strip (its word comes inline from test-page.php). A tap
   makes it current again through the engine's own click. */
.tp-quiz .quiz-engine-question:has(input:checked):not(.is-active):not(:has(input:focus-visible)) {cursor: pointer; gap: 0;}
.tp-quiz .quiz-engine-question:has(input:checked):not(.is-active):not(:has(input:focus-visible)) > legend {margin-bottom: 0; font-size: 15px; font-weight: 500; color: var(--graphite-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tp-quiz .quiz-engine-question:has(input:checked):not(.is-active):not(:has(input:focus-visible)) > legend::before {margin-bottom: 12px;}
.tp-quiz .quiz-engine-question:has(input:checked):not(.is-active):not(:has(input:focus-visible)) > legend::after {position: absolute; top: 0; right: 14px; height: 33px; line-height: 33px; font: 500 13.5px/33px var(--sans); color: var(--form-deep); text-decoration: underline; text-underline-offset: .18em;}
.tp-quiz .quiz-engine-question:has(input:checked):not(.is-active):not(:has(input:focus-visible)) .quiz-engine-answer:not(:has(input:checked)) {display: none;}
.tp-quiz .quiz-engine-question:has(input:checked):not(.is-active):not(:has(input:focus-visible)) .quiz-engine-answer {min-height: 48px; margin-top: 8px; border-color: transparent;}
.tp-quiz .quiz-engine-question.is-active .quiz-engine-answer {animation: tp-unfold .35s var(--ease);}
.tp-quiz .quiz-engine-question.is-active:not(.is-reopened) .quiz-engine-answer {animation: none;}
@keyframes tp-unfold {from {opacity: 0; transform: translateY(-6px);}}

.tp-quiz .quiz-engine-submit {width: 100%; min-height: 52px; margin: 8px 0 0; padding: 0 26px; border: 0; border-radius: 8px; background: var(--form); color: #fff; font: 600 17px/1.2 var(--sans); cursor: pointer;}
.tp-quiz .quiz-engine-submit:hover {background: var(--form-deep);}
.tp-quiz .quiz-engine-submit:disabled {background: var(--field); color: var(--graphite-2); box-shadow: inset 0 0 0 1px var(--rule); cursor: not-allowed;}
.tp-quiz .quiz-engine-errors {margin-top: 16px; color: var(--graphite);}

/* ---------- the result ---------- */
.tp-shell .quiz-engine-results .quiz-engine-result {display: flex; flex-direction: column; margin: 0; padding: 0 0 8px;}
.tp-shell .quiz-engine-result[hidden] {display: none;}

/* The header: the picture flowing into a field of its own colour; on it,
   white type. The inks re-map locally (DESIGN.md, Computed Tone Rule). */
.tp-hero {--form: rgba(255,255,255,.62); --graphite: #fff; --form-deep: #fff; --rule: rgba(255,255,255,.26);
	position: relative; margin: 0 -16px; padding: 0 16px 26px; background: var(--tone, #1f3a33); color: #fff;}
.tp-hero.is-bare {padding-top: 26px;}
.tp-hero .tp-res-img {position: relative; margin: 0 -16px;}
.tp-res-img img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tone, #1f3a33);}
.tp-res-img::after {content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, var(--tone, #1f3a33)); pointer-events: none;}
.tp-hero .tp-lead {position: relative; margin-top: -6px !important; padding-right: 112px; font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.78) !important;}
.tp-hero.is-bare .tp-lead {margin-top: 0 !important;}
.tp-lead b {color: #fff; font-weight: 600;}
.tp-shell .quiz-engine-result-title {margin: 6px 0 0; padding: 0; color: #fff; font-weight: 700; text-align: left;}
.tp-name {display: block; font-size: 38px; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance;}
.tp-name.is-long {font-size: 31px;}
.tp-name.is-xlong {font-size: 26px; letter-spacing: -.03em;}
.tp-sub {display: block; margin-top: 12px; font-size: 19px; line-height: 1.35; font-weight: 400; letter-spacing: -.01em; color: rgba(255,255,255,.88);}

/* The stamp: the share of people with this result, or "one of N". */
.tp-stamp {position: absolute; z-index: 2; right: 16px; bottom: -34px; width: 104px; height: 104px; color: #fff; transform: rotate(-9deg);}
.tp-hero.is-bare > .tp-stamp {top: 16px; bottom: auto;}
.tp-hero.is-bare .tp-lead {padding-right: 120px;}
.tp-stamp svg {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;}
.tp-stamp-disc {fill: var(--tone, #1f3a33); stroke: #fff;}
.tp-stamp-ring {font-family: var(--mono); font-weight: 500; letter-spacing: 2px; text-transform: uppercase;}
.tp-stamp > b {position: absolute; inset: 0; display: grid; place-items: center; font: 600 27px/1 var(--mono); letter-spacing: -.05em;}
/* Four characters ("1/16", "100%") would cross the inner ring at full size. */
.tp-stamp > b.is-long {font-size: 21px;}

/* Scales: rows of ten circles - empty rings, filled discs - the value
   rounded to the nearest ten (js/test.js gives each scale --d, 0-10). */
.tp-shell .quiz-engine-scales {display: grid; gap: 12px; margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px;}
.tp-shell .quiz-engine-scales:empty {display: none;}
.tp-shell .quiz-engine-scale {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin: 0;}
.tp-shell .quiz-engine-scale-label {flex: none; font-size: 15px; font-weight: 500; color: var(--graphite);}
.tp-shell .quiz-engine-scale-value {grid-row: 1; grid-column: 2; min-width: 0; font: 500 14px/1 var(--mono); color: var(--form-deep); text-align: right;}
.tp-shell .quiz-engine-scale-track {grid-column: 1 / -1; position: relative; height: 16px; border-radius: 0; overflow: visible; background: radial-gradient(circle at 50% 50%, transparent 5px, var(--form) 5.4px 6.4px, transparent 6.8px) 0 0 / 10% 100% repeat-x;}
.tp-shell .quiz-engine-scale-fill {position: absolute; inset: 0 auto 0 0; width: calc(var(--d, 0) * 10%); background: radial-gradient(circle at 50% 50%, var(--graphite) 5.6px, transparent 6px) 0 0 / calc(100% / max(var(--d, 1), 1)) 100% repeat-x;}
.tp-shell .quiz-engine-scale-winner .quiz-engine-scale-label, .tp-shell .quiz-engine-scale-winner .quiz-engine-scale-value {font-weight: 650; color: var(--graphite);}

.tp-shell .quiz-engine-result-verdict {display: grid; gap: 16px; margin: 26px 0 0; max-width: 64ch;}
.tp-shell .quiz-engine-result-verdict p {margin: 0;}
.tp-shell .quiz-engine-result-verdict > p:first-child {font-size: 19px; line-height: 1.5;}
.tp-shell .quiz-engine-result .tp-byline {margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule);}

/* Share: on a phone a panel fixed to the bottom, under the thumb - "Share
   my result" across the top, the networks below; on desktop a ruled row
   above the result that sticks while it scrolls. The engine builds it. */
.tp-shell .quiz-engine-share {margin: 0;}
.tp-shell .quiz-engine-share-heading {display: none;}
.tp-shell .quiz-engine-share-row {display: flex; flex-wrap: wrap; gap: 6px;}
.tp-shell .quiz-engine-share-link {flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: #1b221f; font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease);}
.tp-shell .quiz-engine-share-link:hover {background: #f1f6f2; border-color: #137045;}
.tp-shell .quiz-engine-share-label {display: none;}
.tp-shell .quiz-engine-share-native {padding: 0 14px; background: #1b221f; border-color: #1b221f; color: #fff;}
.tp-shell .quiz-engine-share-native:hover {background: #000; border-color: #000;}
.tp-shell .quiz-engine-share-native .quiz-engine-share-label {display: inline;}
.tp-shell .quiz-engine-share-native .tp-share-mine {display: none;}
.tp-shell .quiz-engine-share-copy.is-copied {background: #cde8d7;}
@keyframes tp-rise {from {transform: translateY(100%);}}

/* ---------- CoreTypes, the result card, comparison ---------- */
.tp-cta {margin: 36px 0 0; padding: 24px 20px 22px; border: 1.5px solid var(--form); border-radius: 12px; background: var(--field);}
.tp-cta h2 {font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em;}
.tp-cta p {margin-top: 12px !important; font-size: 16px; line-height: 1.55;}
.tp-cta .tp-btn {width: 100%; margin-top: 20px;}

/* "Your result card": the PNG's preview (a printed sheet laid on the page)
   and the buttons that act on the visitor's own result, in graphite. */
.tp-keep {display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: center; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--rule);}
.tp-keep[hidden] {display: none;}
.tp-keep-prev {width: 128px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px var(--rule), 0 6px 16px rgba(0,0,0,.08); background: var(--field);}
.tp-keep-prev img {width: 100%; height: 100%; object-fit: cover;}
.tp-keep h2 {font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em;}
.tp-keep-b {display: grid; gap: 8px; margin: 14px 0 0;}
.tp-keep .tp-btn {min-height: 46px; padding: 0 18px; font-size: 15.5px;}
.tp-btn-own {background: var(--graphite);}
.tp-btn-own:hover {background: #000;}
.tp-btn-own-line {background: #fff; color: var(--graphite) !important; box-shadow: inset 0 0 0 1.5px var(--graphite);}
.tp-btn-own-line:hover {background: var(--field);}
.tp-keep .tp-btn:disabled {background: var(--field); color: var(--graphite-2) !important; box-shadow: inset 0 0 0 1px var(--rule); cursor: progress;}

/* The card itself, 1080x1920, built off screen by js/test.js and drawn to
   PNG; never shown on the page. Version "colour field" (DESIGN.md). */
.tp-png {--name: 80px; --lh: 46px; position: relative; width: 1080px; height: 1920px; overflow: hidden; background: var(--tone, #1f3a33); color: #fff; font-family: var(--sans); text-align: left;}
.tp-png * {box-sizing: border-box; margin: 0; padding: 0;}
.tp-png .sheet {position: absolute; inset: 0; display: flex; flex-direction: column;}
.tp-png .art {position: relative; flex: 1 1 auto; min-height: 600px; max-height: 920px;}
.tp-png .art-img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.tp-png .art::after {content: ''; position: absolute; inset: auto 0 -1px; height: 300px; background: linear-gradient(transparent, var(--tone, #1f3a33) 92%);}
.tp-png .logo {position: absolute; z-index: 1; left: 56px; top: 64px; display: inline-flex; align-items: center; height: 56px; padding: 0 22px; border-radius: 999px; background: rgba(255,255,255,.94);}
.tp-png .logo img {display: block; width: auto; height: 23px;}
.tp-png .stamp {position: absolute; right: 56px; bottom: -118px; z-index: 2; width: 250px; height: 250px; color: #fff; transform: rotate(-9deg);}
.tp-png .stamp svg {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;}
.tp-png .stamp .disc {fill: var(--tone, #1f3a33); stroke: #fff;}
.tp-png .stamp .ring-t {font-family: var(--mono); font-weight: 500; letter-spacing: 2px; text-transform: uppercase;}
.tp-png .stamp .num {position: absolute; inset: 0; display: grid; place-items: center;}
.tp-png .stamp .num b {font: 600 66px/1 var(--mono); letter-spacing: -.05em;}
.tp-png .stamp .num b.is-long {font-size: 52px;}
.tp-png .body {flex: none; padding: 52px 64px 0;}
.tp-png .lead {max-width: 680px; font-size: 32px; line-height: 1.3; color: rgba(255,255,255,.74); text-wrap: balance;}
.tp-png .lead b {font-weight: 600; color: #fff;}
.tp-png .name {max-width: 820px; margin-top: 12px; font-size: var(--name); line-height: 1; font-weight: 700; letter-spacing: -.035em; text-wrap: balance;}
.tp-png .sub {max-width: 900px; margin-top: 18px; font-size: 32px; line-height: 1.3; letter-spacing: -.01em; color: rgba(255,255,255,.86); text-wrap: pretty;}
.tp-png .measure {flex: none; padding: 36px 64px 0;}
.tp-png .dots {display: grid; grid-template-columns: repeat(10, 1fr);}
.tp-png .dots i {justify-self: start; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.55);}
.tp-png .dots i.x {border-color: #fff; background: #fff;}
.tp-png .level {display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px 24px;}
.tp-png .level-l {font-size: 28px; font-weight: 500; color: rgba(255,255,255,.86);}
.tp-png .level-v {font: 500 54px/.9 var(--mono); letter-spacing: -.04em;}
.tp-png .level .dots {grid-column: 1 / -1;}
.tp-png .level .dots i {width: 38px; height: 38px;}
.tp-png .rows {display: grid; grid-template-columns: 1fr 1fr; gap: 22px 56px;}
.tp-png .row {display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center;}
.tp-png .row-l {font-size: 25px; font-weight: 500; color: rgba(255,255,255,.86);}
.tp-png .row-v {font: 500 23px/1 var(--mono);}
.tp-png .row .dots {grid-column: 1 / -1;}
.tp-png .row .dots i {width: 22px; height: 22px; border-width: 2px;}
.tp-png .text {flex: none; margin: 36px 64px 0; height: calc(var(--lh) * 3); overflow: hidden; font-size: 30px; line-height: var(--lh); color: rgba(255,255,255,.9); -webkit-mask-image: linear-gradient(#000 calc(100% - var(--lh)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--lh)), transparent);}
.tp-png .others {flex: none; margin: auto 64px 0; padding-top: 40px;}
.tp-png .others-l {font-size: 26px; font-weight: 500; color: rgba(255,255,255,.7);}
.tp-png .chips {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; max-height: 136px; overflow: hidden;}
.tp-png .chips span {display: inline-flex; align-items: center; height: 62px; padding: 0 24px; border-radius: 999px; border: 2px solid rgba(255,255,255,.34); font-size: 26px; font-weight: 500; white-space: nowrap;}
.tp-png .foot {flex: none; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 32px 64px 0; padding: 32px 0 88px; border-top: 2px solid rgba(255,255,255,.22);}
.tp-png .text + .foot {margin-top: auto;}
.tp-png .foot p {font-size: 32px; font-weight: 600; letter-spacing: -.01em;}
.tp-png .go {flex: none; display: inline-flex; align-items: center; gap: 14px; height: 80px; padding: 0 32px; border-radius: 16px; background: #fff; color: var(--tone, #1f3a33); font-size: 31px; font-weight: 600; letter-spacing: -.01em;}
.tp-png .go::after {content: ''; width: 30px; height: 30px; background: currentColor; -webkit-mask: var(--ch-arrow); mask: var(--ch-arrow);}

.tp-compare {margin: 40px 0 0; padding: 18px 16px 16px; border: 1px solid var(--rule); border-radius: 10px;}
.tp-compare .quiz-engine-comparison-heading {margin: 0; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em;}
.tp-compare .quiz-engine-comparison {display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none;}
.tp-compare .quiz-engine-comparison-item {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: baseline; margin: 0; background: none; border-radius: 0; overflow: visible;}
.tp-compare .quiz-engine-comparison-bar {display: none;}
.tp-compare .quiz-engine-comparison-label {position: static; font-size: 15px; line-height: 1.35; color: var(--graphite-2);}
.tp-compare .cmp-v {font: 500 14px/1 var(--mono); color: var(--form-deep);}
.tp-compare .cmp-dots {grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 1fr);}
.tp-compare .cmp-dots i {justify-self: start; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--form);}
.tp-compare .cmp-dots i.x {background: var(--form);}
.tp-compare .quiz-engine-comparison-mine .quiz-engine-comparison-label {color: var(--graphite); font-weight: 650;}
.tp-compare .quiz-engine-comparison-mine .cmp-v {color: var(--graphite);}
.tp-compare .quiz-engine-comparison-mine .cmp-dots i.x {background: var(--graphite); border-color: var(--graphite);}
.tp-compare .cmp-you {margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--graphite); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; vertical-align: 2px;}

/* ---------- more tests, how this test works ---------- */
.tp-related {margin: 44px 0 0;}
.tp-related h2, .tp-about > h2 {font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em;}
.tp-cards {display: grid; gap: 20px; margin: 16px 0 0;}
.tp-card {display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; align-content: start; color: var(--graphite) !important; text-decoration: none !important;}
.tp-card img, .tp-card-blank {grid-row: 1 / 3; width: 112px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--field);}
.tp-card b {font-size: 16px; line-height: 1.3; font-weight: 650;}
.tp-card span {font-size: 13.5px; line-height: 1.4; color: var(--graphite-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.tp-card:hover b {color: var(--form-deep); text-decoration: underline; text-underline-offset: .18em;}

.tp-about {margin: 44px 0 48px;}
.tp-about > h2 {margin-bottom: 12px !important;}
/* Each engine block folds under its heading (js/test.js); open in the HTML. */
.tp-about .quiz-engine-methodology, .tp-about .quiz-engine-faq, .tp-about .quiz-engine-references, .tp-about .quiz-engine-changelog {margin: 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; color: var(--graphite-2);}
.tp-about > h2 + div {border-top: 1px solid var(--rule);}
.tp-about .quiz-engine-methodology > h2, .tp-about .quiz-engine-faq > h2, .tp-about .quiz-engine-references > h2, .tp-about .quiz-engine-changelog > h2 {margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--graphite);}
.tp-about .tp-fold {display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;}
.tp-about .tp-fold::after {content: ''; flex: none; width: 20px; height: 20px; background: var(--form); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease);}
.tp-about .tp-fold[aria-expanded="true"]::after {transform: rotate(45deg);}
.tp-about .is-folded > :not(h2) {display: none;}
.tp-about .quiz-engine-methodology > :not(h2), .tp-about .quiz-engine-faq > :not(h2), .tp-about .quiz-engine-references > :not(h2), .tp-about .quiz-engine-changelog > :not(h2) {margin: 0 0 14px;}
.tp-about h3 {margin-top: 14px; font-size: 15.5px; font-weight: 600; color: var(--graphite);}
.tp-about h3 + p {margin-top: 4px;}
.tp-about ol, .tp-about ul {padding-left: 20px; font-size: 14px;}
.tp-about li + li {margin-top: 6px;}
.tp-foot {display: grid; gap: 16px; margin-top: 22px;}
.tp-shell .quiz-engine-attribution {margin: 0; font-size: 14px; line-height: 1.5; color: var(--graphite-2);}
.tp-shell .quiz-engine-attribution-line {display: block;}
.tp-shell .lex-rating-wp {--lex-rating-wp-star-size: 18px !important; --lex-rating-wp-color-filled: var(--form) !important; --lex-rating-wp-color-empty: var(--rule) !important;}
.tp-shell .lex-rating-wp__value {font: 500 14px/1 var(--mono); color: var(--graphite-2);}

/* Phone */
@media (max-width: 1279px) {
	.tp-shell .quiz-engine-share {position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #cfe2d6; box-shadow: 0 -6px 20px rgba(0,0,0,.07); animation: tp-rise .5s var(--ease) both .3s;}
	.tp-shell .quiz-engine-share-row {flex-wrap: wrap; gap: 5px;}
	.tp-shell .quiz-engine-share-link {flex: 1 1 0; min-width: 0; padding: 0;}
	.tp-shell .quiz-engine-share-native {flex: 1 0 100%; margin-bottom: 3px;}
	.tp-shell .quiz-engine-share-native .quiz-engine-share-label {display: none;}
	.tp-shell .quiz-engine-share-native .tp-share-mine {display: inline;}
	body[data-stage="result"] .ch-ft {padding-bottom: 120px;}
}

/* Desktop */
@media (min-width: 1280px) {
	.tp-shell {width: min(1280px, 100% - 48px); margin: 0 auto; padding: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr) 300px; column-gap: 48px; align-items: start; font-size: 18px;}
	.wg-v2.single-quiz_test .breadcrumbs {margin-bottom: 0;}
	.wg-v2.single-quiz_test .breadcrumbs_box {padding-left: 144px;}
	.tp-col {grid-column: 2;}
	body:not([data-stage="result"]) .tp-col {grid-column: 2 / 4; max-width: 880px;}
	.tp-side {grid-column: 3; position: sticky; top: 24px; margin: 28px 0 0;}
	.tp-banner img {width: 300px; border-radius: 12px; aspect-ratio: 3 / 4;}
	.tp-intro {grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 48px; padding: 28px 0 48px;}
	.tp-intro h1 {font-size: 58px;}
	.tp-start {width: auto;}
	.tp-cover {margin-top: 6px;}

	.tp-sheet {position: fixed; top: 50%; left: max(24px, calc((100vw - 1280px) / 2)); z-index: 20; width: 96px; transform: translateY(-50%); flex-direction: column; align-items: stretch; margin: 0; padding: 14px 10px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;}
	body[data-stage="intro"] .tp-sheet, body:not([data-stage]) .tp-sheet {visibility: hidden;}
	/* Two columns of circle + number in the 96px strip: 15 + 3 + the two
	   mono digits fit 33px each, and the outline ring of the next circle has
	   its 3.5px of padding. A very long test scrolls inside the strip, up and
	   down only - never sideways. */
	.tp-sheet-dots {grid-template-columns: 1fr 1fr; gap: 6px 4px; padding: 3.5px; pointer-events: auto; max-height: calc(100vh - 140px); overflow-x: hidden; overflow-y: auto; scrollbar-width: none;}
	.tp-sheet-dots::-webkit-scrollbar {display: none;}
	.tp-dot-q {display: flex; align-items: center; gap: 3px; min-width: 0; max-width: none; height: 20px; aspect-ratio: auto; border: 0; border-radius: 0;}
	.tp-dot-q::before {content: ''; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.25px solid var(--form);}
	.tp-dot-q::after {inset: 5.5px auto auto 3px; width: 9px; height: 9px;}
	.tp-dot-q.is-now {outline: 0;}
	.tp-dot-q.is-now::before {outline: 1.5px solid var(--form); outline-offset: 2px;}
	.tp-dot-q .n {display: block; font: 500 10.5px/1 var(--mono); letter-spacing: -.04em; color: var(--form);}
	.tp-sheet-count {text-align: center; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--rule);}

	.tp-quiz .quiz-engine-form {gap: 40px; padding-top: 28px;}
	.tp-quiz .quiz-engine-question {grid-template-columns: 1fr 1fr; gap: 10px;}
	.tp-quiz .quiz-engine-question > legend {grid-column: 1 / -1; font-size: 21px;}
	.tp-quiz .quiz-engine-question > legend::before {height: 35px; padding: 0 18px; margin-bottom: 18px;}
	.tp-quiz .quiz-engine-answer {font-size: 17px;}
	.tp-quiz .quiz-engine-question:has(input:checked):not(.is-active):not(:has(input:focus-visible)) {grid-template-columns: 1fr;}
	.tp-quiz .quiz-engine-question:has(input:checked):not(.is-active):not(:has(input:focus-visible)) > legend::after {height: 35px; line-height: 35px; right: 18px;}
	.tp-quiz .quiz-engine-submit {width: 320px;}

	.tp-shell .quiz-engine-results .quiz-engine-result {padding-top: 32px;}
	.tp-shell .quiz-engine-share {order: -1; position: sticky; top: 12px; z-index: 5; display: flex; align-items: center; gap: 16px; margin: 0 0 28px; padding: 12px 14px; border: 1px solid #cfe2d6; border-radius: 12px; background: #fff;}
	.tp-hero {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; margin: 0; padding: 0; border-radius: 16px;}
	.tp-hero.is-bare {grid-template-columns: minmax(0, 1fr); padding: 36px 0 0;}
	.tp-hero .tp-res-img {grid-column: 1; grid-row: 1 / span 3; margin: 0; border-radius: 16px 0 0 16px;}
	.tp-res-img img {height: 100%; aspect-ratio: auto; min-height: 100%; border-radius: 16px 0 0 16px;}
	.tp-res-img::after {inset: 0 0 0 auto; width: 45%; height: auto; background: linear-gradient(to right, transparent, var(--tone, #1f3a33));}
	.tp-lead, .tp-shell .quiz-engine-result-title, .tp-hero .quiz-engine-scales {grid-column: 2; margin-left: 8px !important; margin-right: 36px !important;}
	.tp-hero.is-bare .tp-lead, .tp-hero.is-bare .quiz-engine-result-title, .tp-hero.is-bare .quiz-engine-scales {grid-column: 1; margin-left: 36px !important;}
	.tp-hero .tp-lead {margin-top: 40px !important; padding-right: 0; font-size: 16px;}
	.tp-name {font-size: 50px;}
	.tp-name.is-long {font-size: 40px;}
	.tp-name.is-xlong {font-size: 32px;}
	.tp-sub {font-size: 20px; max-width: 30ch;}
	.tp-hero .quiz-engine-scales {margin-top: 24px; margin-bottom: 36px; padding: 18px 20px; gap: 16px;}
	.tp-hero .quiz-engine-scales:empty {display: block; padding: 0; border: 0; margin-bottom: 24px;}
	.tp-stamp {right: auto; left: 28px; bottom: 28px; width: 132px; height: 132px;}
	.tp-hero.is-bare > .tp-stamp {left: auto; right: 36px; top: 28px;}
	.tp-hero.is-bare .tp-lead {padding-right: 160px;}
	.tp-stamp > b {font-size: 34px;}
	.tp-stamp > b.is-long {font-size: 27px;}
	.tp-shell .quiz-engine-result-verdict > p:first-child {font-size: 21px;}

	.tp-keep {grid-template-columns: 180px minmax(0, 1fr); gap: 32px; margin-top: 40px; padding-top: 32px;}
	.tp-keep-prev {width: 180px;}
	.tp-keep h2 {font-size: 24px;}
	.tp-keep-b {grid-template-columns: auto auto; justify-content: start; gap: 12px; margin-top: 18px;}
	.tp-cta {padding: 34px 36px 32px; display: grid; grid-template-columns: 1fr auto; gap: 8px 40px; align-items: end;}
	.tp-cta h2 {grid-column: 1 / -1; font-size: 32px;}
	.tp-cta p {margin-top: 4px !important;}
	.tp-cta .tp-btn {width: auto; margin: 0;}
	.tp-compare {padding: 22px 24px 20px;}
	.tp-compare .quiz-engine-comparison-heading {font-size: 19px;}
	.tp-compare .quiz-engine-comparison {grid-template-columns: 1fr 1fr; column-gap: 40px;}
	.tp-cards {grid-template-columns: repeat(3, 1fr); gap: 24px;}
	.tp-card {grid-template-columns: 1fr;}
	.tp-card img, .tp-card-blank {grid-row: auto; width: 100%; margin-bottom: 8px;}
}

@media (prefers-reduced-motion: reduce) {
	.tp-shell *, .tp-shell *::before, .tp-shell *::after {animation: none !important; transition: none !important;}
}