/* =========================================================
   Sport in Australia — survey styles
   Mobile-first. Most people will answer this on a phone.
   ========================================================= */

:root{
  --ink:        #16211c;
  --ink-soft:   #4a5c53;
  --ink-faint:  #7d8d85;
  --paper:      #fbf8f2;
  --card:       #ffffff;
  --line:       #e3ded2;
  --line-soft:  #efeae0;

  --green:      #0b6b45;
  --green-deep: #084f34;
  --green-lite: #e6f2ec;
  --gold:       #e0a325;
  --gold-lite:  #fdf3dd;
  --ochre:      #c2603a;
  --sky:        #2f7fa8;

  --danger:     #b3402a;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(22,33,28,.06), 0 2px 8px rgba(22,33,28,.04);
  --shadow-md: 0 4px 12px rgba(22,33,28,.07), 0 12px 32px rgba(22,33,28,.06);
  --shadow-lg: 0 12px 28px rgba(22,33,28,.10), 0 32px 64px rgba(22,33,28,.08);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  --topbar-h: 68px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:       #eef3ef;
    --ink-soft:  #a9b8b0;
    --ink-faint: #74857c;
    --paper:     #0e1512;
    --card:      #16201b;
    --line:      #2a3730;
    --line-soft: #202b25;
    --green:     #3fbd85;
    --green-deep:#2fa16f;
    --green-lite:#152a21;
    --gold:      #e9b64c;
    --gold-lite: #2a2415;
    --ochre:     #d9805a;
    --sky:       #62aed3;
    --danger:    #f08a72;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 28px rgba(0,0,0,.45);
  }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- decorative background ---------- */
.bg-orbs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-orbs span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.42;
}
.bg-orbs span:nth-child(1){ width:46vmax; height:46vmax; top:-16vmax; right:-14vmax;
  background:radial-gradient(circle, var(--gold) 0%, transparent 68%); }
.bg-orbs span:nth-child(2){ width:40vmax; height:40vmax; bottom:-16vmax; left:-14vmax;
  background:radial-gradient(circle, var(--green) 0%, transparent 68%); opacity:.30; }
.bg-orbs span:nth-child(3){ width:28vmax; height:28vmax; top:38%; left:52%;
  background:radial-gradient(circle, var(--ochre) 0%, transparent 70%); opacity:.16; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:760px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }
.wrap--narrow{ max-width:640px; }

.screen{ display:none; }
.screen--active{ display:block; animation:fadeUp .45s cubic-bezier(.2,.7,.3,1) both; }

@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* =========================================================
   WELCOME
   ========================================================= */
.hero{ padding:clamp(48px,11vh,110px) 0 64px; }

.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); margin:0 0 20px;
}

.hero__title{
  font-family:var(--serif);
  font-size:clamp(38px,9vw,62px);
  line-height:1.03;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0 0 24px;
  text-wrap:balance;
}
.hero__title em{
  font-style:italic;
  color:var(--green);
  position:relative;
}

.hero__lede{
  font-size:clamp(17px,2.4vw,19px);
  color:var(--ink-soft);
  margin:0 0 34px;
  max-width:34em;
}
.hero__lede strong{ color:var(--ink); font-weight:600; }

.hero__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:0 0 36px;
}
.meta-pill{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px 12px;
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.meta-pill__num{ display:block; font-family:var(--serif); font-size:26px; font-weight:700; color:var(--green); line-height:1.1; }
.meta-pill__lbl{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.35; }

.hero__foot{ font-size:14px; color:var(--ink-faint); margin:18px 0 0; }
.hero__foot--quiet{ margin-top:14px; }

.req-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ochre); vertical-align:middle; margin:0 3px 2px;
}

.linkbtn{
  background:none; border:none; padding:0; font:inherit; color:var(--green);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  font:inherit; font-weight:600; cursor:pointer;
  border-radius:100px; border:1.5px solid transparent;
  padding:13px 26px;
  transition:transform .14s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.97); }

.btn--primary{
  background:var(--green); color:#fff; box-shadow:var(--shadow-md);
}
.btn--primary:hover{ background:var(--green-deep); box-shadow:var(--shadow-lg); }
@media (prefers-color-scheme: dark){ .btn--primary{ color:#08130d; } }

.btn--ghost{
  background:transparent; color:var(--ink-soft); border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--ink-faint); color:var(--ink); }

.btn--xl{ padding:17px 36px; font-size:18px; width:100%; }
@media (min-width:520px){ .btn--xl{ width:auto; } }

.btn__arrow{ transition:transform .2s ease; }
.btn--xl:hover .btn__arrow{ transform:translateX(4px); }

.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* =========================================================
   TOPBAR / PROGRESS
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
}
.topbar__inner{
  display:flex; align-items:center; gap:14px;
  height:var(--topbar-h);
}
.topbar__label{ display:flex; align-items:center; gap:10px; min-width:0; flex:0 0 auto; }
.topbar__icon{ font-size:22px; line-height:1; }
.topbar__label strong{ display:block; font-size:14.5px; font-weight:650; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; }
.topbar__label small{ display:block; font-size:11.5px; color:var(--ink-faint); }

.progress{
  flex:1; height:7px; background:var(--line-soft); border-radius:100px; overflow:hidden;
  min-width:40px;
}
.progress__bar{
  height:100%; width:0%; border-radius:100px;
  background:linear-gradient(90deg, var(--green), var(--gold));
  transition:width .45s cubic-bezier(.2,.8,.3,1);
}
.progress__pct{ font-size:12.5px; font-weight:650; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; flex:0 0 auto; }

@media (max-width:430px){
  .topbar__label small{ display:none; }
  .topbar__label strong{ max-width:30vw; }
}

/* =========================================================
   QUESTIONS
   ========================================================= */
.sec-blurb{
  font-family:var(--serif); font-size:clamp(21px,4.6vw,27px); font-weight:600;
  line-height:1.25; letter-spacing:-.015em;
  margin:34px 0 6px; text-wrap:balance;
}

#questions{ padding-bottom:8px; }

.q{
  background:var(--card);
  scroll-margin-top:calc(var(--topbar-h) + 16px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 22px;
  margin:18px 0;
  box-shadow:var(--shadow-sm);
  animation:qIn .4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes qIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.q:nth-child(1){ animation-delay:.02s } .q:nth-child(2){ animation-delay:.06s }
.q:nth-child(3){ animation-delay:.10s } .q:nth-child(4){ animation-delay:.14s }
.q:nth-child(5){ animation-delay:.17s } .q:nth-child(6){ animation-delay:.20s }
.q:nth-child(n+7){ animation-delay:.23s }

.q--invalid{ border-color:var(--danger); animation:shake .4s; }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-6px); } 40%,60%{ transform:translateX(6px); }
}

.q__head{ margin-bottom:16px; }
.q__title{
  font-size:19px; font-weight:650; line-height:1.35; letter-spacing:-.012em;
  margin:0; text-wrap:balance;
}
.q__title .req{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ochre); vertical-align:super; margin-left:5px;
}
.q__help{ font-size:14.5px; color:var(--ink-soft); margin:7px 0 0; }
.q__optional{
  display:inline-block; font-size:11px; font-weight:650; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:100px; padding:2px 9px; margin-top:9px;
}

/* ---------- option lists (single / multi) ---------- */
.opts{ display:grid; gap:9px; }
.opts--2col{ grid-template-columns:1fr; }
@media (min-width:540px){ .opts--2col{ grid-template-columns:1fr 1fr; } }

.opt{
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--line);
  background:var(--paper);
  border-radius:var(--r-md);
  padding:13px 15px;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.opt:hover{ border-color:var(--green); }
.opt:active{ transform:scale(.985); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }

.opt__box{
  flex:0 0 auto; width:22px; height:22px;
  border:1.5px solid var(--line); background:var(--card);
  display:grid; place-items:center;
  transition:all .16s ease;
}
.opt__box--radio{ border-radius:50%; }
.opt__box--check{ border-radius:7px; }
.opt__box svg{ width:13px; height:13px; opacity:0; transform:scale(.5); transition:all .18s cubic-bezier(.2,1.6,.4,1); }

.opt__text{ flex:1; min-width:0; }
.opt__label{ display:block; font-size:16px; font-weight:500; line-height:1.35; }
.opt__hint{ display:block; font-size:13px; color:var(--ink-faint); margin-top:2px; }

.opt:has(input:checked){
  border-color:var(--green);
  background:var(--green-lite);
}
.opt:has(input:checked) .opt__box{ background:var(--green); border-color:var(--green); }
.opt:has(input:checked) .opt__box svg{ opacity:1; transform:scale(1); }
.opt:has(input:checked) .opt__label{ font-weight:600; }
.opt input:focus-visible ~ .opt__text::after{ content:""; position:absolute; inset:-3px;
  border-radius:var(--r-md); outline:2px solid var(--green); outline-offset:2px; }

/* ---------- emoji / likert scale ---------- */
.scale{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
}
.scale__opt{
  border:1.5px solid var(--line); background:var(--paper);
  border-radius:var(--r-md); padding:14px 6px 11px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  cursor:pointer; text-align:center; position:relative;
  transition:all .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.scale__opt input{ position:absolute; opacity:0; pointer-events:none; }
.scale__opt:hover{ border-color:var(--green); }
.scale__opt:active{ transform:scale(.97); }
.scale__emoji{ font-size:26px; line-height:1; filter:grayscale(.55); transition:all .2s ease; }
.scale__num{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid var(--line); background:var(--card);
  font-weight:700; font-size:14px; color:var(--ink-soft);
  transition:all .16s ease;
}
.scale__lbl{ font-size:11.5px; line-height:1.25; color:var(--ink-soft); font-weight:500; }

.scale__opt:has(input:checked){ border-color:var(--green); background:var(--green-lite); }
.scale__opt:has(input:checked) .scale__emoji{ filter:none; transform:scale(1.22); }
.scale__opt:has(input:checked) .scale__num{ background:var(--green); border-color:var(--green); color:#fff; }
.scale__opt:has(input:checked) .scale__lbl{ color:var(--ink); font-weight:650; }
@media (prefers-color-scheme: dark){
  .scale__opt:has(input:checked) .scale__num{ color:#08130d; }
}

/* ---------- bipolar (A ←→ B) ---------- */
.bipolar__ends{
  display:flex; justify-content:space-between; gap:10px;
  font-size:13px; font-weight:650; margin-bottom:9px;
}
.bipolar__ends span:first-child{ color:var(--sky); }
.bipolar__ends span:last-child{ color:var(--ochre); }
.bipolar{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.bipolar__opt{
  border:1.5px solid var(--line); background:var(--paper);
  border-radius:var(--r-sm); padding:12px 4px 9px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; text-align:center; position:relative; transition:all .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.bipolar__opt input{ position:absolute; opacity:0; pointer-events:none; }
.bipolar__opt:hover{ border-color:var(--green); }
.bipolar__dot{
  border-radius:50%; border:1.5px solid var(--line); background:var(--card);
  transition:all .18s ease;
}
.bipolar__opt:nth-child(1) .bipolar__dot,
.bipolar__opt:nth-child(5) .bipolar__dot{ width:26px; height:26px; }
.bipolar__opt:nth-child(2) .bipolar__dot,
.bipolar__opt:nth-child(4) .bipolar__dot{ width:21px; height:21px; }
.bipolar__opt:nth-child(3) .bipolar__dot{ width:16px; height:16px; }
.bipolar__lbl{ font-size:11px; line-height:1.25; color:var(--ink-faint); }
.bipolar__opt:has(input:checked){ border-color:var(--green); background:var(--green-lite); }
.bipolar__opt:has(input:checked) .bipolar__dot{ background:var(--green); border-color:var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }
.bipolar__opt:has(input:checked) .bipolar__lbl{ color:var(--ink); font-weight:650; }

/* ---------- slider ---------- */
.slider__value{
  text-align:center; font-family:var(--serif); font-size:44px; font-weight:700;
  color:var(--green); line-height:1; margin-bottom:4px;
  font-variant-numeric:tabular-nums;
}
.slider__prompt{
  font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink-faint);
}
.slider__value small{ font-size:16px; color:var(--ink-faint); font-family:var(--sans); font-weight:500; }
.slider input[type=range]{
  width:100%; margin:14px 0 8px; -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer;
}
.slider input[type=range]::-webkit-slider-runnable-track{
  height:10px; border-radius:100px;
  background:linear-gradient(90deg, var(--green) var(--pct,50%), var(--line-soft) var(--pct,50%));
}
.slider input[type=range]::-moz-range-track{ height:10px; border-radius:100px; background:var(--line-soft); }
.slider input[type=range]::-moz-range-progress{ height:10px; border-radius:100px; background:var(--green); }
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:30px; height:30px; margin-top:-10px;
  border-radius:50%; background:var(--card); border:3px solid var(--green);
  box-shadow:var(--shadow-md); transition:transform .12s ease;
}
.slider input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.15); }
.slider input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--card);
  border:3px solid var(--green); box-shadow:var(--shadow-md);
}
.slider__ends{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-faint); }

/* untouched: identical specificity to the rules above, so order decides */
.slider--untouched .slider__value{ color:var(--ink-faint); }
.slider--untouched input[type=range]::-webkit-slider-runnable-track{ background:var(--line-soft); }
.slider--untouched input[type=range]::-moz-range-progress{ background:transparent; }
.slider--untouched input[type=range]::-webkit-slider-thumb{ border-color:var(--ink-faint); }
.slider--untouched input[type=range]::-moz-range-thumb{ border-color:var(--ink-faint); }

/* ---------- sport picker (searchable chips) ---------- */
.picker__search{ position:relative; margin-bottom:12px; }
.picker__search input{
  width:100%; font:inherit; font-size:16px;
  padding:12px 14px 12px 40px;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  background:var(--paper); color:var(--ink);
}
.picker__search input:focus{ outline:none; border-color:var(--green); background:var(--card); }
.picker__search::before{
  content:"🔍"; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:15px; opacity:.55; pointer-events:none;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--line); background:var(--paper);
  border-radius:100px; padding:9px 15px;
  font-size:14.5px; font-weight:500; cursor:pointer;
  transition:all .14s ease; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip:hover{ border-color:var(--green); }
.chip:active{ transform:scale(.95); }
.chip:has(input:checked){
  background:var(--green); border-color:var(--green); color:#fff; font-weight:600;
}
@media (prefers-color-scheme: dark){ .chip:has(input:checked){ color:#08130d; } }
.chip:has(input:checked)::before{ content:"✓"; font-weight:800; font-size:12px; }
.chip--add{ border-style:dashed; color:var(--green); font-weight:600; }
.chip--more{
  border-style:dashed; color:var(--ink-soft); font-weight:600;
  background:transparent; font-family:inherit;
}
.chip--more:hover{ color:var(--green); border-color:var(--green); }
.chip--hidden{ display:none; }

.picker__none{ font-size:14px; color:var(--ink-faint); padding:6px 2px; }
.picker__count{
  font-size:12.5px; color:var(--ink-faint); margin-top:10px; font-weight:500;
}
.picker__count--max{ color:var(--ochre); font-weight:650; }

/* ---------- text inputs ---------- */
.field input[type=text], .field input[type=email], .field textarea{
  width:100%; font:inherit; font-size:16.5px;
  padding:13px 15px;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  background:var(--paper); color:var(--ink);
  transition:border-color .16s ease, background .16s ease;
  resize:vertical;
}
.field textarea{ line-height:1.55; min-height:70px; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--green); background:var(--card);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); opacity:.8; }

.other-wrap{ margin-top:10px; }
.other-wrap input{
  width:100%; font:inherit; font-size:15.5px; padding:11px 14px;
  border:1.5px dashed var(--line); border-radius:var(--r-md);
  background:var(--paper); color:var(--ink);
}
.other-wrap input:focus{ outline:none; border-style:solid; border-color:var(--green); }

.counter{ text-align:right; font-size:12px; color:var(--ink-faint); margin-top:6px; }

/* ---------- navigation ---------- */
.nav{
  display:flex; gap:12px; align-items:center;
  margin:28px 0 0; padding:20px 0 40px;
  border-top:1px solid var(--line-soft);
}
.nav .btn--ghost{ flex:0 0 auto; }
.nav .btn--primary{ flex:1; padding-top:15px; padding-bottom:15px; font-size:17px; }

.nav-error{
  color:var(--danger); font-size:14.5px; font-weight:600;
  margin:-24px 0 24px; padding:12px 15px;
  background:color-mix(in srgb, var(--danger) 10%, transparent);
  border-radius:var(--r-md);
}

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* =========================================================
   DONE
   ========================================================= */
.done{ padding:clamp(56px,14vh,120px) 0 80px; text-align:center; }
.done__mark{ font-size:64px; line-height:1; margin-bottom:20px; animation:pop .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pop{ from{ transform:scale(.3); opacity:0; } to{ transform:scale(1); opacity:1; } }
.done h2{ font-family:var(--serif); font-size:clamp(30px,7vw,44px); font-weight:700;
  letter-spacing:-.02em; margin:0 0 14px; }
.done__lede{ font-size:18px; color:var(--ink-soft); margin:0 auto 28px; max-width:30em; text-wrap:balance; }
.done__card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; margin:0 auto 28px; max-width:30em; font-size:14.5px; color:var(--ink-soft);
  box-shadow:var(--shadow-sm); text-align:left;
}
.done__card strong{ color:var(--ink); }
.done__card.is-warn{ border-color:var(--gold); background:var(--gold-lite); }
.done__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.done__foot{ font-size:14px; color:var(--ink-faint); margin-top:28px; max-width:28em;
  margin-left:auto; margin-right:auto; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--ink); color:var(--paper);
  padding:12px 22px; border-radius:100px; font-size:14.5px; font-weight:600;
  box-shadow:var(--shadow-lg); z-index:100;
  opacity:0; transition:all .3s cubic-bezier(.2,.9,.3,1); pointer-events:none;
}
.toast--show{ opacity:1; transform:translate(-50%,0); }

/* ---------- motion / a11y ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }

/* fallback for browsers without :has() */
@supports not selector(:has(*)){
  .opt input:checked + .opt__box{ background:var(--green); border-color:var(--green); }
  .opt input:checked + .opt__box svg{ opacity:1; transform:scale(1); }
}