/* ============================================================================
   BioProfile - the gamified scan format (T237, from the T171 prototype).
   Loaded by app/js/scan-format.js only when the format is v2. Every rule is
   scoped under .v2 so nothing here reaches the old flow or the rest of the app;
   every value is a token from design-system/css/tokens.css. The rail gradient
   is the four rejuvenation colours closing on the brand teal (DESIGN-SYSTEM 1.2).
   ========================================================================== */
.v2, .v2-rail {
  --rail-gradient: linear-gradient(90deg, var(--bp-lime) 0%, var(--bp-olive) 26%,
                   var(--bp-emerald) 52%, var(--bp-forest) 76%, var(--bp-teal) 100%);
  --pillar: var(--bp-teal); --pillar-08: var(--bp-teal-08); --pillar-ink: var(--bp-teal);
}
/* the old flow's bar and card chrome are not this format's */
.v2-on #qz-progress { display: none !important; }
.v2-on .mini-main, .v2-on .app-main { padding-top: 0; }
.v2-on .qz-shell { max-width: 560px; }

/* ---- the rail --------------------------------------------------------------- */
.v2-rail { background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--topbar-h, 64px); z-index: 19;
  margin: 0 calc(var(--s-4) * -1); padding: var(--s-3) var(--s-4) var(--s-2); }
@media (min-width: 900px) { .v2-rail { margin: 0 calc(var(--s-10) * -1); } }
.v2-rail[hidden] { display: none; }
.v2-rail__row { display: flex; align-items: center; gap: var(--s-3); max-width: 560px; margin: 0 auto; }
/* T251 row 4.7 (2026-09-10): 44 px, because a thumb is 44 px. This was 28 and
   the skip below had no floor at all, and neither is reachable by the shared
   touch rule in design-system/css/components.css, which names the design
   system's own class list and not this lane's. They get their floor here, in
   that rule's shape; the close hands the fold into the shared rule to the
   follow-on, when the design system is not another lane's file. The icon keeps
   its 17 px: the TARGET grows, the drawing does not. */
.v2-rail__back { flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: var(--ink-2); border: 0; background: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.v2-rail__back:hover { background: var(--paper-3); color: var(--ink); }
.v2-rail__back[disabled] { opacity: 0; pointer-events: none; }
.v2-rail__back svg { width: 17px; height: 17px; }
.v2-rail__track { position: relative; flex: 1 1 auto; height: 8px; border-radius: var(--r-pill); background: var(--viz-track); }
.v2-rail__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill);
  width: calc(var(--pct) * 1%); background-image: var(--rail-gradient); background-repeat: no-repeat;
  background-size: calc(10000% / max(var(--pct), 1)) 100%;
  transition: width var(--dur-3) var(--ease-out), background-size var(--dur-3) var(--ease-out); }
.v2-rail__node { position: absolute; top: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 4px; background: var(--line-2); box-shadow: 0 0 0 2px var(--paper);
  display: grid; place-items: center; transform: translateY(-50%);
  transition: width var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out),
              margin-left var(--dur-2) var(--ease-out), border-radius var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease); }
.v2-rail__node svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.4);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out); }
.v2-rail__node.is-done { width: 18px; height: 18px; margin-left: -9px; border-radius: 6px; }
.v2-rail__node.is-done svg { opacity: 1; transform: scale(1); }
.v2-rail__node.just-ticked { animation: v2NodePop .55s var(--ease-out); }
@keyframes v2NodePop { 0% { transform: translateY(-50%) scale(.6); } 50% { transform: translateY(-50%) scale(1.35); } 100% { transform: translateY(-50%) scale(1); } }
.v2-rail__pct { flex: none; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: var(--w-semi); font-size: var(--t-sm); color: var(--bp-teal); }
.v2-rail__left { max-width: 560px; margin: var(--s-2) auto 0; padding-left: 40px; font-size: var(--t-xs); color: var(--ink-3); }
.v2-rail__left[hidden] { display: none; }

/* ---- the stage ---------------------------------------------------------------- */
.v2-stage { display: flex; min-height: calc(100dvh - var(--topbar-h, 64px) - 64px); padding: var(--s-5) 0 var(--s-8); }
.v2-shell { max-width: 560px; margin: auto; width: 100%; }
.v2 .v2-screen { animation: v2ScreenIn var(--dur-3) var(--ease-out) both; }
@keyframes v2ScreenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.v2 .v2-screen.is-back { animation-name: v2ScreenInBack; }
@keyframes v2ScreenInBack { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.v2 .v2-opts .v2-opt { animation: v2OptIn .3s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 34ms); }
@keyframes v2OptIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.v2 .v2-reward .v2-stagger > * { animation: v2OptIn .34s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
.v2 .v2-note { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--warn-08); color: var(--ink); font-size: var(--t-sm); font-weight: var(--w-med); }

/* ---- type ------------------------------------------------------------------- */
.v2 .v2-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-eyebrow);
  font-weight: var(--w-med); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-3); }
.v2 .v2-eyebrow b { font-weight: var(--w-semi); color: inherit; }
.v2 .v2-prompt { font-size: 1.375rem; line-height: var(--lh-snug); font-weight: var(--w-semi); color: var(--ink);
  text-wrap: balance; margin-top: var(--s-3); }
@media (min-width: 760px) { .v2 .v2-prompt { font-size: 1.75rem; } }
.v2 .v2-help { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-body); text-wrap: pretty; }
.v2 .v2-lede { font-size: var(--t-lg); color: var(--ink-2); line-height: var(--lh-body); text-wrap: pretty; }

/* ---- answer tiles ------------------------------------------------------------ */
.v2 .v2-opts { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.v2 .v2-opt { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4); min-height: 60px; background: var(--paper); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); border: 1px solid var(--line-2); color: var(--ink); cursor: pointer; font: inherit;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease-out); }
.v2 .v2-opt:hover { border-color: var(--pillar); box-shadow: var(--sh-2); }
.v2 .v2-opt:active { transform: scale(.99); }
.v2 .v2-opt__ico { position: relative; flex: none; width: 38px; height: 38px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--pillar-ink); transition: color var(--dur-1) var(--ease); }
.v2 .v2-opt__ico::before { content: ""; position: absolute; inset: 3px; border-radius: var(--r-pill);
  background: var(--pillar-08); transition: background var(--dur-1) var(--ease); }
.v2 .v2-opt__ico > svg:not(.v2-opt__ring) { position: relative; width: 18px; height: 18px; }
.v2 .v2-opt__ring { position: absolute; inset: 0; width: 38px; height: 38px; overflow: visible; }
.v2 .v2-opt__ring circle { fill: none; stroke-width: 2.2; stroke-linecap: round;
  transition: stroke var(--dur-1) var(--ease), stroke-dasharray var(--dur-2) var(--ease-out); }
.v2 .v2-opt__ring .track { stroke: var(--pillar); opacity: .16; }
.v2 .v2-opt__ring .val { stroke: var(--pillar); }
.v2 .v2-opt__label { flex: 1 1 auto; font-size: var(--t-body); font-weight: var(--w-med); line-height: var(--lh-snug); }
.v2 .v2-opt__mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink-4);
  transition: color var(--dur-1) var(--ease); }
.v2 .v2-opt__mark svg { width: 18px; height: 18px; }
.v2 .v2-opt__mark .tick { display: none; }
.v2 .v2-opt.is-on { border-color: var(--pillar); box-shadow: inset 0 0 0 1px var(--pillar), var(--sh-2);
  background: var(--pillar-08); transform: translateY(-1px); }
.v2 .v2-opt.is-on .v2-opt__ico { color: #fff; }
.v2 .v2-opt.is-on .v2-opt__ico::before { background: var(--pillar); }
.v2 .v2-opt.is-on[data-lightink="1"] .v2-opt__ico { color: var(--ink); }
.v2 .v2-opt.is-on .v2-opt__ring .val { stroke: #fff; opacity: .92; }
.v2 .v2-opt.is-on .v2-opt__ring .track { stroke: #fff; opacity: .3; }
.v2 .v2-opt.is-on[data-lightink="1"] .v2-opt__ring .val { stroke: var(--ink); opacity: .55; }
.v2 .v2-opt.is-on[data-lightink="1"] .v2-opt__ring .track { stroke: var(--ink); opacity: .16; }
.v2 .v2-opt.is-on .v2-opt__mark { color: var(--pillar); }
.v2 .v2-opt.is-on .v2-opt__mark .chev { display: none; }
.v2 .v2-opt.is-on .v2-opt__mark .tick { display: block; animation: v2TickIn var(--dur-2) var(--ease-out) both; }
@keyframes v2TickIn { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
.v2 .v2-opt.is-on::after { content: ""; position: absolute; inset: -2px; border-radius: var(--r-lg);
  box-shadow: 0 0 0 2px var(--pillar); opacity: 0; pointer-events: none; animation: v2OptPulse .5s var(--ease-out) 1; }
@keyframes v2OptPulse { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.035); } }

/* ---- numeric screens --------------------------------------------------------- */
.v2 .v2-num { display: flex; align-items: flex-end; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.v2 .v2-num input { width: 5.5ch; border: 0; border-bottom: 2px solid var(--line-2); background: none;
  font-size: 3rem; font-weight: var(--w-semi); line-height: 1.1; text-align: center; color: var(--ink);
  padding: 0 0 var(--s-2); -moz-appearance: textfield; font-family: inherit; }
.v2 .v2-num input::-webkit-outer-spin-button, .v2 .v2-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v2 .v2-num input:focus { outline: none; border-bottom-color: var(--bp-teal); }
.v2 .v2-num__unit { display: inline-flex; align-items: center; padding: var(--s-1) var(--s-3); background: var(--bp-teal-08);
  color: var(--bp-teal); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-med); letter-spacing: .03em; margin-bottom: var(--s-3); }
.v2 .v2-num-warn { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--warn-08); color: var(--ink); font-size: var(--t-sm); line-height: var(--lh-body); }
.v2 .v2-num-warn[hidden] { display: none; }
.v2 .v2-skip { display: block; margin: var(--s-4) auto 0; min-height: 44px; padding: 0 var(--s-3);
  font-size: var(--t-sm); font-weight: var(--w-med); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.v2 .v2-skip:hover { color: var(--ink); }

/* ---- buttons ----------------------------------------------------------------- */
.v2 .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 52px;
  padding: 0 var(--s-6); border-radius: var(--r-pill); border: 0; cursor: pointer; font-family: inherit;
  font-size: var(--t-lg); font-weight: var(--w-semi); letter-spacing: .01em; background: var(--bp-teal); color: #fff;
  box-shadow: var(--sh-2); transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease-out); }
.v2 .v2-btn:hover { background: var(--bp-teal-600); }
.v2 .v2-btn:active { transform: scale(.985); }
/* T271: a disabled button is the button, faded, as the base draws every disabled
   control; white on the pale teal-40 read 2.04:1 and looked like a live control
   drawn badly rather than one waiting for an answer */
.v2 .v2-btn[disabled] { background: var(--bp-teal); opacity: .45; box-shadow: none; cursor: not-allowed; }
.v2 .v2-btn--ghost { background: none; color: var(--bp-teal); box-shadow: inset 0 0 0 1px var(--bp-teal-40); }
.v2 .v2-btn--ghost:hover { background: var(--bp-teal-08); }
.v2 .v2-btn--block { display: flex; width: 100%; }
.v2 .v2-cta { margin-top: var(--s-6); }
.v2 .v2-cta--tight { margin-top: var(--s-5); }
.v2 .v2-cta--row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.v2 .v2-cta--row .v2-btn { flex: 1 1 200px; }

/* ---- cards ------------------------------------------------------------------- */
.v2 .v2-card { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-xl);
  box-shadow: var(--sh-2); padding: var(--s-6); }
@media (min-width: 760px) { .v2 .v2-card { padding: var(--s-8); } }
.v2 .v2-medal { position: relative; width: 68px; height: 68px; margin: 0 auto; }
.v2 .v2-medal__chip { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--pillar); color: #fff;
  display: grid; place-items: center; box-shadow: var(--sh-2); animation: v2MedalIn .5s var(--ease-out) both; }
.v2 .v2-medal__chip[data-lightink="1"] { color: var(--ink); }
.v2 .v2-medal__chip svg { width: 32px; height: 32px; }
@keyframes v2MedalIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.v2 .v2-burst { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  color: var(--pillar); pointer-events: none; animation: v2BurstOut .8s var(--ease-out) both; }
@keyframes v2BurstOut { 0% { opacity: 0; transform: scale(.55); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.15); } }
.v2 .v2-reward { text-align: center; }
.v2 .v2-reward h2 { margin-top: var(--s-5); font-size: 1.375rem; line-height: var(--lh-snug); font-weight: var(--w-semi); text-wrap: balance; }
@media (min-width: 760px) { .v2 .v2-reward h2 { font-size: 1.6rem; } }
.v2 .v2-reward p { margin-top: var(--s-3); color: var(--ink-2); line-height: var(--lh-body); text-wrap: pretty; }
.v2 .v2-reward__rel { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--pillar-08); color: var(--ink); font-size: var(--t-sm); font-weight: var(--w-med); line-height: var(--lh-snug); }
/* the fact screen's photograph, at the card's own crop, 800 by 452 */
.v2 .v2-photo { margin: 0 calc(var(--s-6) * -1) var(--s-5); overflow: hidden; background: var(--paper-3); }
@media (min-width: 760px) { .v2 .v2-photo { margin: 0 calc(var(--s-8) * -1) var(--s-6); } }
.v2 .v2-photo img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 452; object-fit: cover; }
.v2 .v2-card--photo { padding-top: 0; overflow: hidden; }
.v2 .v2-fact__eyebrow { display: block; font-size: var(--t-eyebrow); font-weight: var(--w-med); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--pillar-text, var(--pillar)); }
.v2 .v2-fact__source { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--ink-3); }
.v2 .v2-fact__source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- the front door ---------------------------------------------------------- */
.v2 .v2-front { padding: var(--s-5); text-align: center; }
@media (min-width: 760px) { .v2 .v2-front { padding: var(--s-8); } }
.v2 .v2-front .v2-medal { width: 52px; height: 52px; }
.v2 .v2-front .v2-medal__chip svg { width: 26px; height: 26px; }
.v2 .v2-front__title { margin-top: var(--s-3); font-size: 1.375rem; line-height: var(--lh-snug); font-weight: var(--w-semi); text-wrap: balance; }
.v2 .v2-front__sub { margin-top: var(--s-2); font-size: var(--t-lg); color: var(--ink-2); line-height: var(--lh-snug); text-wrap: balance; }
.v2 .v2-front__meta { margin-top: var(--s-4); font-size: var(--t-eyebrow); font-weight: var(--w-med); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--ink-3); }
.v2 .v2-chapters { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-3); }
.v2 .v2-chap { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-3); background: var(--paper-3); border-radius: var(--r-md); }
.v2 .v2-chap__ico { flex: none; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--pillar); color: #fff; display: grid; place-items: center; }
.v2 .v2-chap__ico[data-lightink="1"] { color: var(--ink); }
.v2 .v2-chap__ico svg { width: 15px; height: 15px; }
.v2 .v2-chap__label { flex: 1 1 auto; font-size: var(--t-sm); font-weight: var(--w-med); text-align: left; }
.v2 .v2-chap__n { flex: none; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.v2 .v2-frontnote { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bp-sand-soft); border-radius: var(--r-md);
  color: var(--ink-2); font-size: var(--t-sm); line-height: var(--lh-body); text-align: left; }
.v2 .v2-front .v2-cta { margin-top: var(--s-4); }

/* ---- meters (the 40 percent reading and the reveal) -------------------------- */
.v2 .v2-meters { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); text-align: left; }
/* The head wraps: the name and the score keep the first line, the rank takes its own line under
   the name. On one line a long one-word name ("Darmgezondheid") and the capital rank were wider
   than the card on a phone and pushed the score out of view. */
.v2 .v2-meter__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-3); }
.v2 .v2-meter__ico { flex: none; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--pillar); color: #fff; display: grid; place-items: center; }
.v2 .v2-meter__ico[data-lightink="1"] { color: var(--ink); }
.v2 .v2-meter__ico svg { width: 18px; height: 18px; }
.v2 .v2-meter__name { flex: 1 1 0; min-width: 0; font-weight: var(--w-med); font-size: var(--t-body); }
.v2 .v2-meter__rank { order: 2; flex: 1 0 100%; padding-left: calc(34px + var(--s-3)); font-size: var(--t-xs); font-weight: var(--w-med); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.v2 .v2-meter__score { order: 1; flex: none; font-weight: var(--w-semi); font-variant-numeric: tabular-nums; color: var(--bp-teal); }
.v2 .v2-meter__bar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--viz-gap); overflow: hidden; margin-top: var(--s-2); }
.v2 .v2-meter__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r-pill); background: var(--viz-score); transition: width var(--dur-chart) var(--ease-out); }
.v2 .v2-meter__why { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-body); }

/* ---- the analysing ring ----------------------------------------------------- */
.v2 .v2-ring { width: 132px; height: 132px; margin: 0 auto; color: var(--bp-teal); }
.v2 .v2-ring .spin { transform-origin: 50% 50%; animation: v2RingSpin 2.4s linear infinite; }
@keyframes v2RingSpin { to { transform: rotate(360deg); } }
.v2 .v2-readout { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-8) auto 0; max-width: 300px; list-style: none; padding: 0; }
.v2 .v2-readout li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); opacity: 0; transform: translateY(6px); }
.v2 .v2-readout li.is-in { opacity: 1; transform: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out); }
.v2 .v2-readout li b { font-weight: var(--w-med); color: var(--ink); }
.v2 .v2-readout__tick { flex: none; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--ok-08); color: var(--ok); display: grid; place-items: center; }
.v2 .v2-readout__tick svg { width: 12px; height: 12px; }

/* ---- the gate ---------------------------------------------------------------- */
.v2 .v2-gate h1 { margin-top: var(--s-5); font-size: 1.375rem; line-height: var(--lh-snug); font-weight: var(--w-semi); text-align: center; text-wrap: balance; }
.v2 .v2-gate .v2-lede { margin-top: var(--s-3); text-align: center; }
.v2 .v2-field { margin-top: var(--s-4); }
.v2 .v2-field label { display: block; font-size: var(--t-sm); font-weight: var(--w-med); color: var(--ink-2); margin-bottom: var(--s-2); }
.v2 .v2-field input { width: 100%; padding: var(--s-3) var(--s-4); min-height: 52px; background: var(--paper); border: 0; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--t-lg); font-family: inherit; transition: box-shadow var(--dur-1) var(--ease); }
.v2 .v2-field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bp-teal); }
.v2 .v2-field input[readonly] { background: var(--paper-3); color: var(--ink-2); }
.v2 .v2-field__err { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--alert); }
.v2 .v2-field__err[hidden] { display: none; }
.v2 .v2-consent { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.v2 .v2-consent .v2-eyebrow { display: block; }
.v2 .v2-check { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); }
.v2 .v2-check input { margin-top: 4px; accent-color: var(--bp-teal); flex: none; width: 18px; height: 18px; }
.v2 .v2-legal { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-3); line-height: var(--lh-body); }
.v2 .v2-signedin { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--ok-08); color: var(--ink); font-size: var(--t-sm); line-height: var(--lh-body); }
/* the Google button, to Google's own guidance: white, a hairline, the four colour G, Roboto */
.v2 .v2-google { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: var(--s-4);
  border-radius: var(--r-md); font-size: 16px; font-weight: 600; background: #fff; color: #1f1f1f; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px #747775; font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease-out); }
.v2 .v2-google:hover { background: #f2f2f2; }
.v2 .v2-google:active { transform: scale(.99); }
.v2 .v2-google svg { width: 18px; height: 18px; }
.v2 .v2-divider { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); color: var(--ink-4); font-size: var(--t-xs); }
.v2 .v2-divider::before, .v2 .v2-divider::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--line); }

/* ---- notices (the safety mandate, unchanged) --------------------------------- */
.v2 .v2-notice { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); border-left: 4px solid var(--warn); background: var(--warn-08); text-align: left; }
.v2 .v2-notice--alert { border-left-color: var(--alert); background: var(--alert-08); }
.v2 .v2-notice b { display: block; font-weight: var(--w-semi); }
.v2 .v2-notice p { margin-top: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); }
.v2 .v2-fine { margin-top: var(--s-6); font-size: var(--t-sm); color: var(--ink-3); line-height: var(--lh-body); }
.v2 .v2-reveal-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: var(--s-5); }
.v2 .v2-reveal-card { background: var(--paper-3); border-radius: var(--r-lg); padding: var(--s-4); text-align: left; }
.v2 .v2-reveal-card .pill-tag { display: inline-block; }
.v2 .v2-reveal-card h3 { font-size: 1.02rem; margin-top: var(--s-2); font-weight: var(--w-semi); }
.v2 .v2-reveal-card p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }

/* the admin preview seals the page; nothing is tappable */
.v2-preview .v2-rail__back, .v2-preview .v2-opt, .v2-preview .v2-btn, .v2-preview .v2-google, .v2-preview input { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .v2 .v2-screen, .v2 .v2-opts .v2-opt, .v2 .v2-reward .v2-stagger > *, .v2 .v2-opt.is-on::after,
  .v2 .v2-medal__chip, .v2-rail__node.just-ticked, .v2 .v2-ring .spin { animation: none; }
  .v2 .v2-burst { display: none; }
}

/* ============================================================================
   T271b, the design round: the scan as designed screens.
   The operator's reading of the member pages (2026-09-11): designed above the
   consoles, at the level of the best platforms. The format's logic, its hooks and
   its words are T237's and untouched; what changes is where a screen stands, how
   the chapter is shown, the number field, and the front's hierarchy.
   ========================================================================== */

/* ---- the stage: a screen starts under the rail -----------------------------
   The stage centred one question in the window, which left an empty band of 110
   px on a phone and 200 px at a desk between the progress and the words. A
   question starts under the rail; a reward keeps a little air above it, as a
   moment. */
.v2-stage { display: block; min-height: 0; padding: var(--s-6) 0 var(--s-10); }
@media (min-width: 760px) { .v2-stage { padding-top: var(--s-10); } }
.v2-shell { margin: 0 auto; }
.v2 .v2-screen:has(.v2-reward) { padding-top: clamp(0px, 4vh, 40px); }

/* ---- the rail across its column --------------------------------------------
   The rail bled out of the 560 px column by the page's gutter and no further, so
   at a desk it was a 640 px white box floating under the topbar. It spans the
   window on /mini and the content column beside the member bar; its row stays on
   the question's column. */
.v2-rail { margin-inline: calc(50% - 50vw); padding-inline: var(--s-4); }
@media (min-width: 900px) {
  .app--member .v2-rail { margin-inline: calc(50% - (100vw - var(--mshell-w, 0px)) / 2); }
}

/* ---- the chapter chip --------------------------------------------------------- */
.v2 .v2-chip {
  display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%;
  padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: var(--pillar-08);
  color: var(--pillar-text); font-size: var(--t-sm); font-weight: var(--w-med);
  letter-spacing: 0; text-transform: none;
}
.v2 .v2-chip__ico { flex: none; width: 28px; height: 28px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--pillar-deep); color: #fff; }
.v2 .v2-chip__ico svg { width: 15px; height: 15px; }
.v2 .v2-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2 .v2-chip__n { flex: none; color: var(--ink-2); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.v2 .v2-chip + .v2-prompt { margin-top: var(--s-4); }

/* ---- the number field --------------------------------------------------------
   A "0" drawn at 48 px in grey read as an answer already given. The field is a
   field: bordered, its unit beside it, the placeholder quiet. */
.v2 .v2-num { align-items: center; }
.v2 .v2-num input {
  width: 6.5ch; padding: 10px 14px; border: 0; border-radius: var(--r-md); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1); font-size: 2.25rem; line-height: 1.2;
  transition: box-shadow var(--dur-1) var(--ease);
}
.v2 .v2-num input::placeholder { color: var(--ink-4); opacity: 1; }
.v2 .v2-num input:focus { box-shadow: inset 0 0 0 2px var(--bp-teal), var(--sh-2); }
.v2 .v2-num__unit { margin-bottom: 0; }

/* ---- the front ------------------------------------------------------------------ */
.v2 .v2-front { text-align: left; }
.v2 .v2-front__head { text-align: center; }
.v2 .v2-front__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.v2 .v2-front__facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--bp-teal-08); color: var(--bp-teal); font-size: var(--t-sm); font-weight: var(--w-med); }
.v2 .v2-front__facts svg { width: 16px; height: 16px; flex: none; }
/* the six chapters as the way through, on the rail's own colours */
.v2 .v2-front .v2-chapters { position: relative; gap: 0; margin-top: var(--s-5); }
.v2 .v2-front .v2-chapters::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, var(--bp-lime), var(--bp-olive) 30%, var(--bp-emerald) 55%, var(--bp-forest) 78%, var(--bp-teal)); }
.v2 .v2-front .v2-chap { position: relative; min-height: 44px; padding: 6px var(--s-2); background: none; border-radius: 0; }
.v2 .v2-front .v2-chap + .v2-chap { border-top: 1px solid var(--line); }
.v2 .v2-front .v2-chap__ico { box-shadow: 0 0 0 3px var(--paper); }
.v2 .v2-front .v2-chap__label { font-size: var(--t-body); }
.v2 .v2-front .v2-chap__n { color: var(--ink-2); }
.v2 .v2-front .v2-btn svg { width: 18px; height: 18px; }
.v2 .v2-front .v2-frontnote { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-4);
  padding: 0; background: none; font-size: var(--t-xs); color: var(--ink-2); }
.v2 .v2-front .v2-frontnote svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--bp-teal); }

/* ---- the gate: on a phone it is the page ------------------------------------
   On a 390 px phone the card left the fields 308 px and drew each consent as a
   card of its own. Under 560 px the gate (and the reveal and the finish after it,
   which share its card) is the page itself, and the two consents are one group
   under their heading, a ticked row washed in teal. The fields, the consents, the
   buttons, every word, every hook and the submit are exactly where they were:
   this is the screen a paid click is captured on. */
@media (max-width: 560px) {
  .v2 .v2-card.v2-gate { background: none; border: 0; border-radius: 0; box-shadow: none; padding: var(--s-2) 0 0; }
}
/* The two consents stay one group under their heading, 8 px apart. Drawn first as
   one joined list, the two rows touched (0 px), which is exactly what the base
   measures away; the census after caught it on the gate at every width. */
.v2 .v2-consent { gap: 8px; }
.v2 .v2-consent .v2-eyebrow { margin-bottom: var(--s-1); }
.v2 .v2-check:has(input:checked) { background: var(--bp-teal-08); }
.v2 .v2-legal { line-height: 1.6; }