/* Quiz hub + result pages (owner request 10/27, quizzes-r1). Loaded on /quizzes* only, after tb-a11y.css.
   Markup hooks (tbq-*) come from src/lib/quiz-layout.mjs at build time. Site system only: Instrument Serif display,
   Public Sans, lilac hero fill, cream cards on petal, existing pill buttons. Filled surfaces carry no border. */
:root {
  --tbq-radius: 1.5rem;
  --tbq-pad: 1.5rem;
  --tbq-gap: 1.25rem;
  --tbq-violet: oklch(47% .24 292); /* AA on lilac / cream / petal (the a11y accent) */
}
@media (min-width: 640px) { :root { --tbq-pad: 2.25rem; --tbq-gap: 1.5rem; } }

/* ---------- hub ---------- */
.tbq-hub { max-width: 64rem; }
.tbq-hub > p, .tbq-hub > h1 { max-width: 36rem; }
.tbq-hub-grid { gap: var(--tbq-gap); }
@media (min-width: 768px) { .tbq-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tbq-hub-card { display: flex; flex-direction: column; min-height: 15rem; padding: var(--tbq-pad); border-radius: var(--tbq-radius); }
.tbq-hub-card h2 { font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.08; text-wrap: balance; }
.tbq-hub-card > span { margin-top: auto; padding-top: 1.75rem; align-self: flex-start; }
.tbq-hub-card:focus-visible { outline: 2px solid var(--foreground); outline-offset: 4px; }
.tbq-hub .text-violet, .tbq .text-violet { color: var(--tbq-violet); }
.tbq-hub .text-rose { color: oklch(49% .2 350); }

/* ---------- results: one column, hero first, calm stack ---------- */
.tbq { max-width: 64rem; }
.tbq-stack { display: grid; gap: var(--tbq-gap); }
/* share status (yuck): inside the hero under the buttons; takes no space while empty */
.tbq-hero > p[role="status"] { margin: 0; padding: 0 var(--tbq-pad); }
.tbq-hero > p[role="status"]:not(:empty) { margin-top: calc(var(--tbq-pad) * -1 + .75rem); padding-bottom: var(--tbq-pad); }
.tbq-hero > p[role="status"]:not(:empty):has(+ input) { padding-bottom: 0; }
.tbq-hero > input { display: block; width: calc(100% - 2 * var(--tbq-pad)); margin: .5rem var(--tbq-pad) var(--tbq-pad); border-radius: .75rem; }
.tbq-yy > .mb-6 > p { text-wrap: balance; }
.tbq p, .tbq-hub p { text-wrap: pretty; }
.tbq-hub > .script { padding-inline-start: .3rem; }

/* hero verdict card (lilac fill, no border); actions sit inside the card */
.tbq-hero { border-radius: var(--tbq-radius); overflow: hidden; }
.tbq-hero > .p-6, .tbq-hero-body { padding: var(--tbq-pad) var(--tbq-pad) 1.5rem; }
.tbq-hero p { max-width: 40rem; }
.tbq-hero .eyebrow.mt-8 { margin-top: 1.75rem; }
.tbq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 0 var(--tbq-pad) var(--tbq-pad); }
.tbq-actions > .flex { gap: .75rem; }
.tbq-hero-body > .mt-8 { margin-top: 1.75rem; }
@media (max-width: 639px) {
  .tbq-actions > .flex { width: 100%; }
  .tbq-actions .rounded-full, .tbq-actions .tbq-primary { flex: 1 1 11rem; }
}
/* one primary action per page: Share (filled violet). Everything else is an outline pill or a text link. */
.tbq-primary, .tbq-primary:hover { background: var(--tbq-violet); color: var(--primary-foreground); border-color: transparent; }
.tbq .pill-action.buy-book-gradient { border-color: var(--foreground); }

/* follow-up cards: one treatment */
.tbq-card { background: var(--background); border-radius: var(--tbq-radius); padding: var(--tbq-pad); min-width: 0; }
.tbq-card h2.font-display { font-size: clamp(1.875rem, 1.6rem + .8vw, 2.25rem); line-height: 1.1; margin-top: .5rem; text-wrap: balance; }
.tbq-card section > h2.font-display:first-child { margin-top: 0; }
.tbq-card > section { margin-top: 0; }
.tbq-friend section { border-bottom: 0; padding-bottom: 0; }
.tbq-words details { margin-top: 1.5rem; }

/* lead row: verdict card + book promo side by side from 1024 px, promo right after the verdict on phones */
.tbq-lead { display: grid; gap: var(--tbq-gap); }
@media (min-width: 1024px) { .tbq-lead { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
.tbq-share-line { flex-basis: 100%; font-size: 1.625rem; line-height: 1.15; margin-bottom: .25rem; }

/* promo: home hero clip, a light orb behind the words (no dark box), the book photo set into the scene, BUY on top */
.tbq-promo { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--tbq-radius); min-height: 30rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: var(--tbq-pad); color: var(--background);
  background: var(--foreground) url("/__l5e/assets-v1/a617de68-9921-44d8-bc1a-d17d22db3fe5/luv-and-woo-still.jpg") center / cover; }
.tbq-promo-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tbq-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 85% 48% at 50% 22%, color-mix(in oklab, var(--foreground) 34%, transparent) 0%, color-mix(in oklab, var(--foreground) 16%, transparent) 55%, transparent 100%); }
.tbq-promo-copy { text-align: center; text-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 70%, transparent), 0 2px 14px color-mix(in oklab, var(--foreground) 55%, transparent); }
.tbq-promo-kicker { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); color: var(--pink); line-height: 1; }
.tbq-promo h2 { margin-top: .5rem; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; text-wrap: balance; }
.tbq-promo-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.tbq-promo-cover { width: 40%; max-width: 11rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .5rem; transform: rotate(-4deg); transform-origin: bottom left;
  box-shadow: 0 18px 40px color-mix(in oklab, var(--foreground) 45%, transparent), 0 0 0 3px color-mix(in oklab, var(--background) 85%, transparent); }
.tbq-promo-buy { flex: 0 1 auto; white-space: nowrap; }
.tbq-promo-buy:focus-visible { outline: 3px solid var(--background); outline-offset: 2px; box-shadow: 0 0 0 6px var(--foreground); }
.tbq-promo .tb-vid-btn { right: 1rem; top: 1rem; bottom: auto; }
@media (max-width: 380px) { .tbq-promo-buy { padding-inline: 1.25rem; } }

/* paired short cards (friend invite | bonus scene): equal heights from 768 px */
.tbq-pair { display: grid; gap: var(--tbq-gap); }
@media (min-width: 768px) { .tbq-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tbq-book h2.font-display { margin-top: .75rem; }
.tbq-book > .mt-8 { margin-top: 1.5rem; }
.tbq-book > a.mt-5 { margin-top: 1.25rem; }
.tbq-book p { max-width: 44rem; }
.tbq-gift { margin-top: .75rem; }

/* forms: inputs and controls share the rounded language */
.tbq input#personal-word, .tbq input[type="email"] { border-radius: .75rem; }
.tbq [role="group"] { border-radius: 999px; overflow: hidden; }
.tbq-bonus form, .tbq-split form { margin-top: 0; }
.tbq form button[type="submit"].bg-foreground { background: transparent; color: var(--foreground); border: 1px solid currentColor; border-radius: 999px; padding-inline: 1.75rem; }
.tbq form button[type="submit"].bg-foreground:hover { background: var(--foreground); color: var(--background); }

/* how-dark follow-up: gift + next quiz beside the bonus form */
.tbq-split { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .tbq-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; gap: 2.25rem; } }
.tbq-links { display: grid; gap: .875rem; }

.tbq-foot { display: flex; justify-content: center; padding-top: .25rem; }
/* promo spacing: the kicker clears the Pause/Play button; cover + BUY share the bottom row on narrow phones */
.tbq-promo-copy { padding-top: 3rem; }
@media (max-width: 639px) {
  .tbq-promo { min-height: 27rem; }
  .tbq-promo-kicker { font-size: 2.4rem; }
  .tbq-promo-cover { width: 34%; }
  .tbq-promo-buy { padding-inline: 1.25rem; }
}