/* styles/check.css
 *
 * The seven questions. Built on the tokens in yuisho.css and the page shell
 * in page.css; this file adds only the question rows and the result.
 *
 * Deliberately quiet. The page works by letting someone notice something
 * uncomfortable about their own family, and a design that looks like a quiz
 * or a marketing funnel would make them defensive at exactly the wrong
 * moment. No progress bars racing, no colour rewarding a "yes", no score.
 */

.ask-list { list-style: none; margin: 0; padding: 0; }

.ask {
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ask:first-child { padding-top: 4px; }
.ask:last-child { border-bottom: 0; }

.ask-q {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.7;
  color: var(--sumi);
}

.ask-choices { display: flex; gap: 10px; }

.ask-choice {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--soft);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.ask-choice:hover { border-color: var(--soft); color: var(--sumi); }
.ask-choice:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

/* Neither answer is the good one. "No" is not failure and must not look like
 * it: the whole point is that an honest no is the useful answer. */
.ask-choice[aria-pressed="true"] {
  border-color: var(--sumi);
  color: var(--sumi);
  background: #fff;
}

#result h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 5.2vw, 27px);
  line-height: 1.55;
  margin: 0 0 16px;
}
.lede-p { font-size: 15.5px; line-height: 1.95; margin: 0 0 18px; }

.gap-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--paper);
  border-left: 2px solid var(--seal);
  border-radius: 0 3px 3px 0;
  font-size: 15px;
  line-height: 2;
}
.gap-list .gap-lead {
  color: var(--faint);
  font-size: 12.5px;
  letter-spacing: .1em;
  line-height: 1.6;
  margin-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .ask-choice { transition: none; }
}