/* ============================================================================
   Public application form — one question per screen
   ========================================================================== */

/* ---------------------------------------------------------------- chrome -- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: var(--z-chrome);
  background: rgba(255, 255, 255, .06);
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--metal);
  box-shadow: 0 0 12px rgba(223, 221, 216, .45);
  transition: width 520ms var(--ease);
}

.topbar {
  position: fixed;
  inset: 2px 0 auto 0;
  z-index: var(--z-chrome);
  background: rgba(11, 11, 13, .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 13px var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.step-meta {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.step-meta b { color: var(--text-2); font-weight: 500; }
@media (max-width: 560px) {
  .step-meta { font-size: 11px; letter-spacing: .06em; }
  .step-meta .meta-sec { display: none; }
}

/* ----------------------------------------------------------------- stage -- */
.stage {
  position: relative;
  z-index: var(--z-content);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px var(--s-5) 108px;
}
.screen { width: 100%; max-width: 660px; }

/* Entrance: the whole screen rises, its parts follow in a short stagger.
   Motion carries "this replaced that", nothing more. */
.screen.is-entering > * {
  animation: rise 420ms var(--ease) both;
}
.screen.is-entering > *:nth-child(1) { animation-delay: 0ms; }
.screen.is-entering > *:nth-child(2) { animation-delay: 45ms; }
.screen.is-entering > *:nth-child(3) { animation-delay: 85ms; }
.screen.is-entering > *:nth-child(4) { animation-delay: 115ms; }
.screen.is-entering > *:nth-child(5) { animation-delay: 140ms; }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

.ask {
  font-family: var(--f-display);
  font-size: clamp(27px, 4.3vw, 41px);
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--text);
  margin: 10px 0 var(--s-3);
  text-wrap: balance;
}
.sub {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-3);
  max-width: 54ch;
  margin-bottom: var(--s-5);
}
.body { margin-bottom: var(--s-5); }
.hint { font-size: 13px; color: var(--text-4); margin-top: 9px; }

.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 560px) { .pair-grid { grid-template-columns: 1fr; } }

.counter {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--text-4);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease);
}
.counter.is-met { color: var(--ok); }

/* --------------------------------------------------------------- choices -- */
.options { display: flex; flex-direction: column; gap: 9px; }

.option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 56px;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.option:hover { border-color: var(--line-2); background: var(--surface-2); }
.option:active { transform: scale(.994); }
.option.is-on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.option input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.option .key {
  flex: 0 0 26px;
  height: 26px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  transition: all var(--dur-fast) var(--ease);
}
.option.is-on .key {
  background: var(--metal);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 0 14px rgba(223, 221, 216, .28);
}
.option .label { font-size: 16px; color: var(--text); line-height: 1.45; }
.option .label small {
  display: block;
  font-size: 13px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- upload -- */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 168px;
  padding: var(--s-6) var(--s-5);
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--accent-line); background: var(--accent-soft); }
.drop svg { width: 26px; height: 26px; stroke: var(--text-3); fill: none; stroke-width: 1.4; margin-bottom: 4px; }
.drop b { font-size: 15.5px; font-weight: 500; color: var(--text); }
.drop span { font-size: 13px; color: var(--text-4); }

.thumb {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 13px 15px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  background: var(--accent-soft);
}
.thumb img { width: 84px; height: 60px; object-fit: cover; border-radius: var(--r-sm); background: var(--ink-800); }
.thumb .name { font-size: 14.5px; color: var(--text); font-weight: 500; word-break: break-all; }
.thumb .size { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }

/* --------------------------------------------------------------- recorder */
.recorder {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}
.recorder.is-live { border-color: rgba(240, 138, 130, .38); }
.recorder-row { display: flex; align-items: center; gap: var(--s-4); }

.mic {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--metal);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--shadow-2);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mic:hover { transform: scale(1.04); }
.mic:active { transform: scale(.97); }
.mic svg { width: 23px; height: 23px; fill: var(--accent-ink); }
.mic.is-live { background: linear-gradient(135deg, #F5A29B, #D8564C); animation: pulse 1.8s var(--ease) infinite; }
.mic.is-live svg { fill: #fff; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 138, 130, .38); }
  50%      { box-shadow: 0 0 0 14px rgba(240, 138, 130, 0); }
}

.rec-time {
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rec-state { font-size: 13.5px; color: var(--text-3); margin-top: 5px; }

.wave { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: var(--s-4); }
.wave i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-700);
  transition: height 90ms linear, background var(--dur) var(--ease);
}
.recorder.is-live .wave i { background: var(--pt-400); }

/* Chrome renders its media controls light regardless of color-scheme, so the
   player is inverted back into the dark surface and dimmed to sit behind the
   content rather than in front of it. */
audio {
  width: 100%;
  margin-top: var(--s-4);
  border-radius: var(--r-pill);
  filter: invert(.9) hue-rotate(180deg) contrast(.88) brightness(1.05);
  opacity: .9;
}
audio:hover, audio:focus-within { opacity: 1; }

/* -------------------------------------------------------------- scenario -- */
.scenario-card {
  position: relative;
  padding: 17px 19px 17px 22px;
  margin-bottom: var(--s-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--pt-400);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-2);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}
.scenario-card .eyebrow { display: block; margin-bottom: 7px; }

.timer {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(22, 22, 27, .88);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.timer b { font-size: 16px; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.timer.is-low { border-color: rgba(240,138,130,.45); color: var(--danger); }
.timer.is-low b { color: var(--danger); }
@media (max-width: 560px) { .timer { right: 12px; bottom: 12px; padding: 8px 14px; } }

/* ------------------------------------------------------------ nav / error */
.error {
  display: none;
  margin-bottom: var(--s-4);
  padding: 11px 15px;
  border-radius: var(--r-sm);
  border-left: 2px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
}
.error.is-shown { display: block; animation: shake 320ms var(--ease); }
@keyframes shake {
  0%, 100% { transform: none; }
  22% { transform: translateX(-5px); }
  66% { transform: translateX(4px); }
}

.nav { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 560px) {
  .nav .btn-primary { flex: 1 1 100%; }
  .kbd-hint { display: none; }
}

.back-btn {
  position: fixed;
  left: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-4);
  font-size: 13.5px;
  transition: all var(--dur-fast) var(--ease);
}
.back-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--line); }
@media (max-width: 560px) { .back-btn { left: 10px; bottom: 12px; } }

/* --------------------------------------------------------------- loading -- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  place-items: center;
  background: rgba(11, 11, 13, .8);
  backdrop-filter: blur(6px);
}
.loader.is-on { display: grid; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.loader-track { width: 148px; height: 2px; border-radius: 2px; background: var(--ink-700); overflow: hidden; }
.loader-track i { display: block; height: 100%; width: 40%; background: var(--metal); animation: slide 900ms var(--ease) infinite; }
@keyframes slide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(270%); }
}
.loader p { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* ------------------------------------------------------------------ hero -- */
.hero h1 {
  font-family: var(--f-display);
  font-size: clamp(37px, 6.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}
.hero .lede {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--text-2);
  max-width: 52ch;
  margin-bottom: var(--s-5);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
  gap: 1px;
  margin-bottom: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--line);
}
.fact { background: var(--surface); padding: 17px 19px; }
/* Solid, not gradient-clipped: a Bodoni en dash is a hairline, and clipping a
   gradient through it loses the stroke to antialiasing. */
.fact .v {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.15;
  color: var(--pt-100);
  white-space: nowrap;
}
.fact .k { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }

.terms {
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: var(--s-5);
}
.note { font-size: 13.5px; color: var(--text-4); margin-top: var(--s-4); }

/* Success / screen-out closing screens get a mark above the headline. */
.closing-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s-5);
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
}
.closing-mark svg { width: 21px; height: 21px; stroke: var(--pt-200); fill: none; stroke-width: 1.6; }