/*
 * The Kool Life — tkl-leap.css
 * Styles for the "Leap Snapshot" quiz page template (page-leap-snapshot.php).
 * Full dark / bold treatment built ENTIRELY from the theme's existing brand
 * tokens (defined in style.css :root). Namespaced .leap-* so nothing collides
 * with existing theme classes. Loaded only on the Leap Snapshot template.
 */

/* The dark stage sits between the white nav and white footer. */
.leap-stage{
  background:var(--black);
  color:var(--white);
  min-height:calc(100vh - 56px);      /* fill viewport below the sticky nav */
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}

/* Progress bar pinned to the top of the stage */
.leap-progress{
  position:sticky;top:56px;z-index:10;
  height:4px;width:100%;
  background:rgba(255,255,255,.12);
}
.leap-progress-fill{
  height:100%;width:0%;
  background:var(--blue);
  transition:width .45s var(--ease);
}

.leap-inner{
  flex:1;display:flex;align-items:center;
  width:100%;max-width:760px;
  margin:0 auto;padding:48px 28px 64px;
}

/* ── Screens: only the active one is shown ── */
.leap-screen{display:none;width:100%}
.leap-screen.is-active{display:block;animation:fadeUp .55s var(--ease) both}

/* Step label — Space Mono, the single yellow touch */
.leap-step{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:22px;display:block;
}

/* Intro screen wordmark */
.leap-kicker{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:18px;display:block;
}
.leap-title{
  font-family:var(--font-con);
  font-size:clamp(48px,9vw,104px);
  font-weight:900;line-height:.9;
  letter-spacing:-.01em;text-transform:uppercase;
  color:var(--white);margin-bottom:20px;
}
.leap-title .leap-accent{
  display:inline-block;
  border-bottom:5px solid var(--blue);
  padding-bottom:8px;
}
.leap-lede{
  font-family:var(--font-body);font-size:18px;line-height:1.7;
  color:#CFCFCF;max-width:560px;margin-bottom:36px;
}

/* Question text */
.leap-q{
  font-family:var(--font-con);
  font-size:clamp(28px,4.6vw,46px);
  font-weight:900;line-height:1.02;
  letter-spacing:-.005em;text-transform:uppercase;
  color:var(--white);margin-bottom:10px;
}
.leap-hint{
  font-family:var(--font-body);font-size:15px;font-style:italic;
  color:var(--gray);margin-bottom:26px;
}

/* Inputs — square, dark, blue focus (mirrors the established form styling, inverted) */
.leap-field{
  width:100%;
  font-family:var(--font-body);font-size:17px;
  color:var(--white);
  background:#161616;
  border:1px solid #333;
  border-radius:0;
  padding:16px 18px;
  transition:border-color .15s;
}
.leap-field::placeholder{color:#6B6B6B}
.leap-field:focus{outline:none;border-color:var(--blue)}
textarea.leap-field{min-height:140px;resize:vertical;line-height:1.6}

.leap-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.leap-grid2{grid-template-columns:1fr}}

.leap-label{
  font-family:var(--font-con);font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--white);margin-bottom:7px;display:block;
}

.leap-error{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:#FF6B6B;margin-top:10px;min-height:12px;
}

/* ── Controls ── */
.leap-controls{
  display:flex;align-items:center;gap:14px;margin-top:30px;
}
.leap-btn{
  font-family:var(--font-con);font-size:14px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  border:none;border-radius:0;padding:15px 34px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.leap-btn-primary{background:var(--blue);color:var(--white)}
.leap-btn-primary:hover{background:var(--blue-dark)}
.leap-btn-ghost{
  background:transparent;color:#BFBFBF;
  border:1px solid #3A3A3A;padding:15px 24px;
}
.leap-btn-ghost:hover{border-color:var(--white);color:var(--white)}
.leap-btn[disabled]{opacity:.5;cursor:not-allowed}
.leap-skip{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray);background:none;border:none;
  cursor:pointer;margin-left:auto;padding:6px;transition:color .15s;
}
.leap-skip:hover{color:#BFBFBF}

/* ── Confirmation screen ── */
.leap-done{text-align:center;max-width:560px;margin:0 auto}
.leap-done-mark{
  width:64px;height:64px;border-radius:50%;
  background:var(--blue);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-con);font-size:30px;font-weight:900;
  margin:0 auto 26px;
}
.leap-done-h{
  font-family:var(--font-con);font-size:clamp(36px,6vw,60px);
  font-weight:900;text-transform:uppercase;line-height:.95;
  color:var(--white);margin-bottom:16px;
}
.leap-done-p{
  font-family:var(--font-body);font-size:17px;line-height:1.7;
  color:#CFCFCF;margin-bottom:8px;
}
.leap-done-foot{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-top:28px;
}

/* Submitting state */
.leap-sending .leap-btn-primary{opacity:.6;pointer-events:none}