/* Field-test components. Structure and behaviour are unchanged from the
   repo-root vo2test.html; only the presentation is restyled onto site.css.
   Tokens come from site.css, which corrects two contrast failures the
   original shipped (see the comment at the top of that file). */
main .wrap{max-width:760px;padding-bottom:70px}
main header{padding:clamp(34px,6vw,58px) 0 0}
main h1{font-size:clamp(34px,6.2vw,56px);font-weight:800;margin:12px 0 0}
.deck{font-size:clamp(17px,2vw,20px);color:var(--ink-2);margin-top:14px;max-width:52ch}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.safety{margin:26px 0 0;padding:16px 18px;background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--warn);border-radius:6px;font-size:14.5px;color:var(--ink-2)}
.safety b{color:var(--ink)}
/* .chk must beat the `main label` rule below, which is for field labels only */
main label.chk{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-size:15px;
  font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;
  line-height:1.5;min-height:44px;padding:4px 0}
main label.chk input{width:auto;margin-top:4px;flex:none;min-width:20px;min-height:20px;
  accent-color:var(--arterial)}
#screenMsg{display:none;margin-top:14px;padding:13px 15px;border-radius:6px;background:var(--band);
  border:1px solid var(--arterial);color:var(--ink);font-size:14.5px;line-height:1.55}

.card{margin:22px 0 0;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:24px}
.card h2{font-size:21px;font-weight:700;margin-bottom:4px}
.hint{font-size:14px;color:var(--ink-3);margin:0 0 16px}

.tabs{display:flex;border:1px solid var(--rule-2);border-radius:7px;overflow:hidden;margin-bottom:18px}
.tabs button{flex:1;appearance:none;border:0;background:var(--sunk);color:var(--ink-2);
  font-family:var(--display);font-size:14.5px;font-weight:600;padding:13px 8px;min-height:48px;
  cursor:pointer;border-right:1px solid var(--rule-2)}
.tabs button:last-child{border-right:0}
/* selected state carries a marker as well as a colour */
.tabs button[aria-selected="true"]{background:var(--arterial);color:var(--on-accent)}
.tabs button[aria-selected="true"]::before{content:"\2713";margin-right:7px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
main label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
main label[for]{color:var(--ink-3)}
/* 16px is the floor: iOS Safari zooms the page when a focused input is smaller,
   and these are every field in the conversion flow. */
main input,main select{width:100%;padding:12px 13px;min-height:48px;font-family:var(--mono);
  font-size:16px;color:var(--ink);background:var(--ground);border:1px solid var(--rule-2);border-radius:6px}
.row-unit{display:grid;grid-template-columns:1fr auto;gap:8px}

.go{margin-top:20px;width:100%;appearance:none;border:0;border-radius:7px;background:var(--arterial);
  color:var(--on-accent);font-family:var(--display);font-weight:700;font-size:17px;padding:15px;
  min-height:52px;cursor:pointer}
.go:disabled{opacity:.55;cursor:not-allowed}

.timer{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.clock{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:34px;font-weight:600;letter-spacing:-.02em}
.tbtn{appearance:none;border:1px solid var(--rule-2);background:var(--sunk);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:14px;padding:12px 18px;min-height:44px;
  border-radius:6px;cursor:pointer}

#result{display:none;margin-top:22px}
#result.show{display:block}
.score{background:var(--surface);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.score .top{padding:28px 24px;border-bottom:1px solid var(--rule);background:var(--band)}
.big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(46px,11vw,68px);
  font-weight:600;line-height:1;color:var(--arterial);letter-spacing:-.03em}
.unit{font-family:var(--mono);font-size:13px;color:var(--ink-3);letter-spacing:.06em;margin-top:8px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fact{padding:18px 20px;border-right:1px solid var(--rule)}
.fact:last-child{border-right:0}
.fact .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fact .v{font-family:var(--display);font-size:24px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
@media (max-width:560px){.facts{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--rule)}.fact:last-child{border-bottom:0}}

.bar{height:10px;border-radius:5px;background:var(--sunk);border:1px solid var(--rule);
  position:relative;margin:14px 24px 22px;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--arterial);border-radius:4px}
.barlabels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3);margin:0 24px 20px}

.share{margin-top:16px;padding:16px 18px;background:var(--sunk);border:1px solid var(--rule);
  border-radius:7px;font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--ink)}
.copy{margin-top:10px;appearance:none;border:1px solid var(--rule-2);background:var(--surface);
  color:var(--ink);font-family:var(--display);font-weight:600;font-size:14px;padding:12px 18px;
  min-height:44px;border-radius:6px;cursor:pointer}

main details{margin-top:22px;background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;padding:18px 20px}
main summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:16px;
  min-height:44px;display:flex;align-items:center}
main details p,main details li{font-size:14.5px;color:var(--ink-2)}
main details ol{padding-left:1.2em}

main > .wrap > footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--ink-3)}

.after-test{margin-top:30px;padding:24px;background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--arterial);border-radius:10px}
.after-test h2{font-size:22px;font-weight:800;margin-bottom:8px}
.after-test p{color:var(--ink-2);font-size:15.5px}
.after-test .btn{margin-top:6px}

/* waitlist inside the result experience */
.after-test form{margin-top:18px}
.after-test label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.after-test input[type=email]{width:100%;padding:13px 14px;min-height:48px;font-family:var(--mono);
  font-size:16px;color:var(--ink);background:var(--ground);border:1px solid var(--rule-2);border-radius:6px}
.after-test .btn{width:100%;margin-top:14px}
.after-test .small{font-size:14px;color:var(--ink-2);margin:14px 0 0}

/* the protocol, immediately above the control that starts it */
.prep{margin:0 0 16px;padding:14px 16px;background:var(--sunk);border:1px solid var(--rule);
  border-left:3px solid var(--ink-3);border-radius:6px;font-size:14.5px;line-height:1.55;
  color:var(--ink-2)}
.prep b{color:var(--ink)}