/* Whoosh partner quiz.
 *
 * Every value below is lifted from whoosh-app/src/app/globals.css, which is the
 * shipped token layer (itself extracted from Figma VSTQxIVp4Lo40qGpRfATPv).
 * Nothing here is invented.
 *
 * Custom properties are declared on .wq, NOT :root. On the standalone subdomain
 * that makes the widget carry its own look; embedded in Webflow it means the
 * host stylesheet can neither clobber these nor be clobbered by them.
 */

/* Suisse Int'l is licensed, so it ships with the bundle rather than loading
 * from a CDN. Same file the app serves from /public/fonts. Only the 400 face
 * exists -- SuisseIntl-Medium.woff2 was never produced, so 500-weight text
 * synthesises, matching the app exactly.
 *
 * David Libre (the serif) is an open Google font. On Webflow the host page
 * usually already loads both; these declarations are the standalone fallback
 * and are harmless when duplicated.
 */
@font-face {
  font-family: "Suisse Int'l";
  src: url("./fonts/SuisseIntl-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.wq {
  /* brand */
  --wq-rust: #a65d40;
  --wq-rust-hover: #8a4d35;
  --wq-rust-pressed: #6f3d29;
  --wq-slate: #585f73;
  --wq-charcoal: #333333;

  /* surfaces */
  --wq-cream: #f6f5e8;
  --wq-paper: #fffef2;
  --wq-white: #ffffff;
  --wq-option: #f6f5e8b2;   /* cream @ 70% -- unselected option row, Figma raw */
  --wq-input: #fffef280;    /* off-white @ 50% -- input fill, Figma raw */

  /* ink */
  --wq-ink: #333330;
  --wq-heading: #585f73;
  --wq-strong: #000000;
  --wq-subtle: #6b6960;
  --wq-border: #c7c0b2;
  --wq-placeholder: #00000080;

  /* geometry -- 3px card / 5px controls, corrected in the app on 2026-05-23 */
  --wq-radius-card: 3px;
  --wq-radius-control: 5px;

  --wq-font: "Suisse Int'l", "Work Sans", Arial, Helvetica, sans-serif;
  --wq-serif: "David Libre", Georgia, "Times New Roman", serif;

  font-family: var(--wq-font);
  color: var(--wq-ink);
  line-height: 1.405;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.wq *, .wq *::before, .wq *::after { box-sizing: inherit; }

/* iOS paints its own translucent blue over the last-tapped element and leaves
 * it there, which read as a random highlighted box mid-screen on mobile
 * (Isaac, 2026-08-10). Killing the tap highlight and the text selection on
 * controls leaves only our own selected state visible. */
.wq button, .wq a, .wq .wq-opt, .wq .wq-scale-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ---------- Grind House partner theme ----------
 * Dark skin: black ground, cream text, red as the secondary on buttons, the
 * progress bar and the eyebrows (Isaac, 2026-08-15). Their kit is only slate
 * and ice, so the red is ours to pick -- a single warm red at two weights,
 * not a palette. Only the tokens are overridden; every rule below this block
 * is shared with the Whoosh look.
 */
/* Every partner rides the same dark skin; only the accent differs. `wq--dark`
   is added by boot() for any THEME with a PARTNERS entry, so adding the next
   partner is a data change with no CSS at all (Grind House, Elev8 and Club
   Elementum all use the default red below). */
.wq--dark {
  --wq-rust: #c1281e;
  --wq-rust-hover: #d63328;
  --wq-rust-pressed: #8f1c15;
  --wq-slate: #c1281e;
  --wq-charcoal: #2a2a2a;

  --wq-cream: #0d0d0d;   /* card ground */
  --wq-paper: #1c1c1c;   /* raised surface: selected rows, result cards */
  --wq-white: #1c1c1c;
  --wq-option: #161616;
  --wq-input: #161616;

  --wq-ink: #ece6dc;
  --wq-heading: #f4efe6;
  --wq-strong: #ffffff;
  --wq-subtle: #8e8880;
  --wq-border: #2e2e2e;
  --wq-placeholder: #ffffff66;

  --wq-radius-card: 0px;
  --wq-radius-control: 0px;
}
/* Isaac 2026-08-16: gold, not red. #C6A85A is The 12's gold as it appears on
   the live partner page (beyondww.com/partners/the-fit-club). */
.wq--theme-the12 {
  --wq-rust: #c6a85a;
  --wq-rust-hover: #d9bc6e;
  --wq-rust-pressed: #9e8544;
  --wq-slate: #c6a85a;
}

/* The CTA text is cream on red, not the light-theme paper token (which is a
   near-black surface here). */
.wq--dark .wq-cta {
  color: #fff8ef;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wq--dark .wq-cta:disabled { background: #3d1512; color: #8e8880; }
.wq--dark .wq-rec--top .wq-rec-rank { color: #fff8ef; }
.wq--dark .wq-opt[aria-checked="true"] .wq-box::after { border-color: #fff8ef; }
/* Selected rows lift off the ground instead of going lighter-on-lighter. */
.wq--dark .wq-opt[aria-checked="true"],
.wq--dark .wq-scale-btn[aria-checked="true"] { background: #232323; }

/* Gold is a light accent, so anything sitting ON it flips to near-black.
   Cream on #c6a85a is 2.3:1; the ink below is 8.4:1. */
.wq--theme-the12 .wq-cta { color: #0d0d0d; }
.wq--theme-the12 .wq-cta:disabled { background: #3a3220; color: #8e8880; }
.wq--theme-the12 .wq-rec--top .wq-rec-rank { color: #0d0d0d; }
.wq--theme-the12 .wq-opt[aria-checked="true"] .wq-box::after { border-color: #0d0d0d; }

/* ---------- shells ---------- */

/* Inline mount: fills whatever container it was given. */
.wq--inline { background: var(--wq-cream); padding: 32px 20px; }

/* Modal mount: the popup entry point. */
.wq--modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #00000080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.wq--modal .wq-card {
  box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.35), 0 8px 20px -8px rgb(0 0 0 / 0.20);
}

.wq-card {
  background: var(--wq-cream);
  border-radius: var(--wq-radius-card);
  width: 100%;
  max-width: 560px;
  margin: auto;
  display: flex;
  flex-direction: column;
  min-height: min(640px, 100%);
}

/* ---------- header ---------- */

.wq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--wq-border);
}
.wq-wordmark {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--wq-heading);
}
.wq-tagline { font-size: 12px; color: var(--wq-subtle); }

/* Partner lockup: their mark, then "Powered by Whoosh". */
.wq-partner-logo { display: block; color: var(--wq-ink); }
/* Fallback lockup for a partner that has not sent a vector mark. */
.wq-partner-type {
  font-size: 18px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wq-heading);
}
.wq-partner-logo svg { display: block; height: 22px; width: auto; }
.wq-poweredby { display: flex; align-items: baseline; gap: 6px; }
.wq-poweredby-label { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wq-subtle); }
.wq-poweredby .wq-wordmark { font-size: 12px; }
.wq-close {
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--wq-subtle);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--wq-radius-control);
}
/* Hover rules live in the one guarded block near the end of this file. On
   touch the state sticks to whatever the finger last landed on, which then
   appears on the NEXT screen at the same position and reads as a selection
   nobody made (Isaac's screenshot, 2026-08-10). */
.wq--inline .wq-close { display: none; }

/* ---------- progress ---------- */

.wq-progress { display: flex; gap: 4px; padding: 16px 20px 0; }
.wq-seg {
  flex: 1;
  height: 2px;
  background: color-mix(in srgb, var(--wq-slate) 50%, transparent);
  transition: background 0.25s;
}
.wq-seg.is-done { background: var(--wq-slate); }

/* ---------- body ---------- */

.wq-body { padding: 24px 20px 32px; flex: 1; display: flex; flex-direction: column; }
.wq-body--center { justify-content: center; }

/* Each step moves focus to its heading so the change is announced. The heading
   is not interactive, so the focus ring would read as a stray blue box. */
.wq-q:focus { outline: none; }

.wq-eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wq-rust);
  margin: 0 0 12px;
  font-weight: 500;
}
.wq-q {
  font-family: var(--wq-serif);
  font-weight: 400;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--wq-heading);
  margin: 0 0 8px;
}
.wq-help { font-size: 14px; color: var(--wq-subtle); margin: 0 0 20px; }
.wq-q + .wq-opts, .wq-q + .wq-form { margin-top: 20px; }

/* ---------- options ---------- */

.wq-opts { display: flex; flex-direction: column; gap: 8px; }
.wq-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 15px;
  color: var(--wq-ink);
  background: var(--wq-option);
  border: 1px solid var(--wq-border);
  border-radius: var(--wq-radius-control);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wq-opt[aria-checked="true"] { border-color: var(--wq-rust); background: var(--wq-paper); }
.wq-opt:focus-visible { outline: 2px solid var(--wq-rust); outline-offset: 2px; }

/* Multi-select gets a visible box; single-select advances on click and needs none. */
.wq-box {
  width: 18px; height: 18px; flex: none;
  border: 1px solid var(--wq-slate);
  border-radius: 3px;
  background: var(--wq-white);
  position: relative;
}
.wq-opt[aria-checked="true"] .wq-box { background: var(--wq-rust); border-color: var(--wq-rust); }
.wq-opt[aria-checked="true"] .wq-box::after {
  content: "";
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--wq-paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- 1-5 scale ---------- */

.wq-scale { margin-top: 20px; }
.wq-scale-row { display: flex; gap: 8px; }
.wq-scale-btn {
  flex: 1;
  font: inherit;
  font-size: 18px;
  color: var(--wq-ink);
  background: var(--wq-option);
  border: 1px solid var(--wq-border);
  border-radius: var(--wq-radius-control);
  padding: 18px 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wq-scale-btn[aria-checked="true"] { border-color: var(--wq-rust); background: var(--wq-paper); }
.wq-scale-btn:focus-visible { outline: 2px solid var(--wq-rust); outline-offset: 2px; }
.wq-scale-ends {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--wq-subtle); margin-top: 8px;
}

/* ---------- interstitial ---------- */

.wq-steps { list-style: none; margin: 24px 0 0; padding: 0; text-align: left; max-width: 34ch; }
.wq-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--wq-subtle);
  padding: 6px 0;
  opacity: 0.45;
  transition: opacity 0.4s, color 0.4s;
}
.wq-step.is-done { opacity: 1; color: var(--wq-ink); }
.wq-step-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  border: 1px solid var(--wq-slate);
  transition: background 0.4s, border-color 0.4s;
}
.wq-step.is-done .wq-step-dot { background: var(--wq-rust); border-color: var(--wq-rust); }

/* ---------- contact form ---------- */

.wq-form { display: flex; flex-direction: column; gap: 14px; }
.wq-field { display: flex; flex-direction: column; gap: 6px; }
.wq-label { font-size: 13px; color: var(--wq-ink); }
.wq-input, .wq-select {
  font: inherit;
  font-size: 15px;
  width: 100%;
  background: var(--wq-input);
  border: 1px solid var(--wq-slate);
  border-radius: var(--wq-radius-control);
  padding: 11px 14px;
  color: var(--wq-strong);
}
.wq-select { padding: 10px 14px; }
.wq-input::placeholder { color: var(--wq-placeholder); }
.wq-input:focus, .wq-select:focus { outline: 2px solid var(--wq-rust); outline-offset: 1px; }
.wq-input[aria-invalid="true"] { border-color: #f23a29; }
.wq-error { font-size: 13px; color: #f23a29; margin: 0; }
.wq-reassure { font-size: 11px; color: var(--wq-subtle); text-align: center; margin: 10px 0 0; }
.wq-row { display: flex; gap: 12px; }
.wq-row > * { flex: 1; }

/* ---------- buttons ---------- */

.wq-cta {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  background: var(--wq-rust);
  color: var(--wq-paper);
  border: 0;
  border-radius: var(--wq-radius-card);
  padding: 14px 28px;
  cursor: pointer;
  width: 100%;
}
.wq-cta:active { background: var(--wq-rust-pressed); }
.wq-cta:disabled { background: var(--wq-border); cursor: not-allowed; }
.wq-cta:focus-visible { outline: 2px solid var(--wq-strong); outline-offset: 2px; }

.wq-back {
  background: none; border: 0; font: inherit; font-size: 13px;
  color: var(--wq-placeholder);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 24px;
  align-self: flex-start;
}

/* ---------- intro ---------- */

.wq-intro { text-align: center; }
.wq-intro .wq-q { font-size: clamp(28px, 6vw, 40px); }
.wq-lede { font-size: 15px; color: var(--wq-subtle); max-width: 40ch; margin: 0 auto 28px; }
.wq-intro .wq-cta { width: 100%; }
.wq-intro .wq-reassure { margin-top: 14px; }

/* Trust badges under the intro copy. */
.wq-badges {
  list-style: none; margin: 0 0 28px; padding: 20px 0;
  border-top: 1px solid var(--wq-border);
  border-bottom: 1px solid var(--wq-border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
  text-align: left;
}
.wq-badge {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 11px; line-height: 1.35;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wq-ink);
}
.wq-badge-icon { flex: none; color: var(--wq-rust); line-height: 0; margin-top: 1px; }
.wq-badge-icon svg { display: block; }

/* Partnership disclosure. Legally required text, so it is readable rather than
   fine print, but it never outweighs the CTA. */
.wq-disclosure {
  text-align: left;
  font-size: 10px; line-height: 1.5;
  color: var(--wq-subtle);
  border-top: 1px solid var(--wq-border);
  padding-top: 14px;
  margin: 22px 0 0;
}
.wq-disclosure strong { color: var(--wq-subtle); font-weight: 600; }

/* ---------- result card ----------
 * Isaac (Slack, 2026-08-07) overrides section 2 of the doc: show the multi-
 * compound preview on screen, then email the full breakdown via Customer.io.
 */

/* Rank 1 gets the full-contrast border, the rust badge and the solid CTA;
 * ranks 2-3 are the same card with every one of those turned down. */
.wq-lede--left { text-align: left; margin: 0 0 24px; max-width: none; color: var(--wq-ink); }
.wq-subhead {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wq-subtle); margin: 28px 0 12px;
}

.wq-rec {
  background: var(--wq-paper);
  border: 1px solid var(--wq-border);
  border-radius: var(--wq-radius-card);
  padding: 16px;
}
.wq-rec + .wq-rec { margin-top: 10px; }
.wq-rec--top { border: 2px solid var(--wq-rust); padding: 18px; }
.wq-rec-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 10px;
}
.wq-rec-rank { color: var(--wq-subtle); }
.wq-rec--top .wq-rec-rank {
  background: var(--wq-rust); color: var(--wq-paper);
  padding: 4px 8px; border-radius: var(--wq-radius-control); font-weight: 600;
}
.wq-rec-status { color: var(--wq-subtle); align-self: center; }
.wq-rec .wq-cta { margin-top: 14px; text-align: center; display: block; text-decoration: none; }
.wq-cta--quiet {
  background: transparent;
  color: var(--wq-rust);
  border: 1px solid var(--wq-rust);
  font-weight: 400;
  padding: 10px 20px;
}

.wq-result { background: var(--wq-paper); border: 1px solid var(--wq-charcoal); border-radius: var(--wq-radius-card); }
.wq-result-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--wq-charcoal);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wq-rust);
}
.wq-item { padding: 16px; }
.wq-item + .wq-item { border-top: 1px dashed var(--wq-border); }
.wq-item-name { font-size: 16px; font-weight: 600; color: var(--wq-strong); }
.wq-item-format { font-size: 12px; font-weight: 400; color: var(--wq-subtle); }
.wq-item-why { font-size: 14px; color: var(--wq-ink); margin: 6px 0 0; }
.wq-result-foot {
  border-top: 1px solid var(--wq-charcoal);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--wq-ink);
}
.wq-note {
  font-size: 13px;
  color: var(--wq-ink);
  background: var(--wq-option);
  border-left: 3px solid var(--wq-rust);
  padding: 12px 14px;
  margin: 16px 0 0;
  border-radius: 0 var(--wq-radius-control) var(--wq-radius-control) 0;
}
.wq-disclaimer { font-size: 12px; line-height: 1.5; color: var(--wq-subtle); margin: 20px 0; text-align: center; }

/* ---------- hover ----------
 * Every hover style in the widget lives here, behind a real-pointer check.
 * iOS keeps :hover on the last element the finger touched until something
 * else is touched, so on a screen that re-renders in place the state lands on
 * whichever row now occupies that spot. Nothing below this line should ever
 * fire on a touch device.
 */
@media (hover: hover) and (pointer: fine) {
  .wq-opt:hover { border-color: var(--wq-slate); background: var(--wq-paper); }
  .wq-scale-btn:hover { border-color: var(--wq-slate); background: var(--wq-paper); }
  .wq-cta:hover { background: var(--wq-rust-hover); }
  .wq-cta--quiet:hover { background: var(--wq-option); }
  .wq-close:hover { color: var(--wq-strong); }
  .wq-back:hover { color: var(--wq-strong); }
}

/* Respect a user's reduced-motion setting -- the only transitions here are
   colour fades, so this simply turns them off. */
@media (prefers-reduced-motion: reduce) {
  .wq * { transition: none !important; }
}

@media (max-width: 480px) {
  .wq--modal { padding: 0; }
  .wq-card { max-width: none; border-radius: 0; min-height: 100%; }
  .wq--inline { padding: 20px 12px; }
}

/* ---------- ranked goal rows (Grind House screen 1) ----------
 * Selection order is the priority number, so the number replaces the checkbox
 * rather than sitting next to it. Empty until picked; the ring stays so rows
 * do not reflow when a number appears. */
.wq-rank {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--wq-border);
  border-radius: 50%;
  font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--wq-strong);
}
.wq-opt[aria-checked="true"] .wq-rank { border-color: var(--wq-rust); background: var(--wq-rust); color: #fff8ef; }
.wq--theme-the12 .wq-opt[aria-checked="true"] .wq-rank { color: #0d0d0d; }

/* ---------- entry teaser ----------
 * The pop-up that greets a first visit on a partner site. Deliberately not the
 * quiz: one question's worth of screen, then the quiz opens on the CTA. */
/* The teaser is one card of content, so it opts out of the quiz card's
   min-height -- otherwise it renders as a full-height sheet with a headline
   floating at the top. */
.wq-card:has(> .wq-teaser) { min-height: 0; position: relative; }
.wq-card > .wq-close { position: absolute; top: 10px; right: 10px; }
.wq-teaser { text-align: center; padding: 34px 28px 30px; }
/* `text-transform: none` because a partner page styling its own h2 (Webflow
   templates do) otherwise reaches in and lowercases the headline. */
.wq-teaser h2 {
  margin: 0 0 10px;
  font-family: var(--wq-serif);
  font-weight: 400;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--wq-heading);
}
.wq-teaser p { margin: 0 0 22px; color: var(--wq-subtle); font-size: 15px; }
.wq-teaser .wq-cta { width: 100%; }
.wq-teaser-skip {
  display: block; margin: 14px auto 0; padding: 4px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--wq-subtle); text-decoration: underline;
}