/* ---------- the application: one question at a time, full screen ---------- */
.flow {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  background:
    radial-gradient(60% 50% at 50% 42%, var(--glow) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, var(--ground-deep) 100%),
    var(--ground);
  opacity: 0;
  filter: blur(10px);
  transition: opacity 360ms var(--ease), filter 420ms var(--ease);
}
.flow.open {
  opacity: 1;
  filter: none;
}

/* progress along the top edge */
.flow-track {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--line);
}
.flow-track i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--laurel);
  transition: width 420ms var(--ease);
}

/* top bar: logo, count, close */
.flow-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px max(16px, 3vw);
}
.flow-top svg {
  height: 20px;
  width: auto;
  display: block;
}
.flow-count {
  margin-left: auto;
  font: 400 13px/1 var(--mono);
  color: var(--lead);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 120ms var(--ease), border-color 120ms var(--ease);
}
.icon-btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--field-line);
}
.icon-btn:disabled {
  opacity: .35;
  cursor: default;
}
.icon-btn svg {
  width: 20px;
  height: 20px;
}

.flow-stage {
  display: grid;
  place-items: center;
  padding: 8px max(16px, 6vw);
  overflow-y: auto;
  min-height: 0;
}

.flow-bottom {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px max(16px, 3vw) max(16px, env(safe-area-inset-bottom));
}

/* one question; .out leaves and .pre waits to come in, --dir is the direction of travel */
.q {
  width: min(680px, 100%);
  display: grid;
  gap: 14px;
}
.q > * {
  transition: opacity 340ms var(--ease), filter 440ms var(--ease), transform 440ms var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.q.out > * {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(calc(var(--dir, 1) * -28px));
}
.q.pre > * {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(calc(var(--dir, 1) * 28px));
  transition: none;
}

.q-num {
  font: 500 13px/1 var(--mono);
  color: var(--laurel);
  display: flex;
  gap: 8px;
  align-items: center;
}
.q-num svg {
  width: 14px;
  height: 14px;
}
.q-title {
  margin: 0;
  font: 600 clamp(26px, 3.4vw, 40px)/1.15 var(--display);
  letter-spacing: -.015em;
  color: var(--ink);
}
.q-title:focus { outline: none; }
.q-hint {
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
}

/* written answers: a single underline */
.q-field { margin-top: 18px; }
.q-input {
  width: 100%;
  font: 400 clamp(22px, 2.6vw, 30px)/1.3 var(--ui);
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  padding: 8px 0 10px;
}
textarea.q-input {
  resize: none;
  min-height: 3.4em;
  max-height: 32dvh;
  overflow: auto;
  font-size: clamp(20px, 2.2vw, 26px);
}
.q-input::placeholder { color: #8C899E; }
.q-input:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--laurel);
  padding-bottom: 9px;
}
.q-input[aria-invalid="true"] { border-bottom-color: var(--danger); }

/* multiple choice, with a key to press for each */
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.choices legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  text-align: left;
  font: 500 17px/1.3 var(--ui);
  color: var(--ink);
  background: rgba(28, 27, 37, .6);
  border: 1px solid var(--field-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.choice:hover { border-color: var(--ink-2); }
.choice[aria-checked="true"] {
  border-color: var(--laurel);
  background: rgba(82, 211, 191, .1);
}
.choice kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--field-line);
  font: 500 12px/1 var(--mono);
  color: var(--ink-2);
}
.choice[aria-checked="true"] kbd {
  background: var(--laurel);
  border-color: var(--laurel);
  color: var(--on-laurel);
}
.other-input { grid-column: 1 / -1; }

.q-err {
  margin: 0;
  min-height: 1.4em;
  font-size: 15px;
  color: var(--danger);
}

.q-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.q-actions .enter {
  font: 400 13px/1 var(--mono);
  color: var(--lead);
}
.q-actions .enter b {
  font-weight: 500;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .choices {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .choice {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
  }
  .q-actions .enter { display: none; }
  .q-hint { font-size: 16px; }
}

@media (max-height: 640px) {
  .q { gap: 10px; }
  .q-field { margin-top: 8px; }
  .choice { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow, .flow.open { filter: none; }
  .q > *, .q.out > *, .q.pre > * {
    filter: none;
    transform: none;
  }
}