/* trueFalse — two buttons, as big as the phone allows.
 *
 * Side by side rather than stacked. Two stacked buttons read as a list you
 * should consider in order; two side by side read as a fork, which is what this
 * question actually is. They stay side by side at 360px because two words fit
 * even there.
 */

.ba-tf__statement {
  margin: 0 0 var(--bt-s4);
  padding: var(--bt-s4);
  border-radius: var(--bt-radius);
  background: var(--bt-card);
  border: 2px solid var(--bt-line);
  box-shadow: var(--bt-shadow);
  font-size: var(--bt-fs-prompt);
  font-weight: 600;
  line-height: 1.4;
}

.ba-tf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bt-s3);
}

.ba-tf__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bt-s1);
  /* Deliberately far bigger than the 44px floor. This is the engine somebody
     answers while walking, and a big target is what makes it feel quick
     rather than careless. */
  min-height: 5.5rem;
  padding: var(--bt-s3);
  font: inherit;
  font-size: var(--bt-fs-prompt);
  font-weight: 700;
  color: var(--bt-ink);
  background: var(--bt-card);
  border: 2px solid var(--bt-line);
  border-radius: var(--bt-radius);
  cursor: pointer;
  transition: border-color var(--bt-t-quick) var(--bt-ease),
              background var(--bt-t-quick) var(--bt-ease),
              opacity var(--bt-t) var(--bt-ease),
              filter var(--bt-t) var(--bt-ease),
              transform var(--bt-t-quick) var(--bt-ease);
}

.ba-tf__mark {
  font-size: 1.6em;
  line-height: 1;
}

/* The tick is green and the cross is warm before anything is decided, because
   they label what the button means rather than whether you were right. */
.ba-tf__btn.is-true .ba-tf__mark { color: var(--bt-right); }
.ba-tf__btn.is-false .ba-tf__mark { color: var(--bt-close); }

.ba-tf__btn:not(:disabled):active { transform: translateY(2px); }

.ba-tf__btn.is-picked {
  border-color: var(--bt-saffron);
  background: #FFF6E4;
}

.ba-tf__btn.is-right {
  border-color: var(--bt-right);
  background: var(--bt-right-soft);
}

.ba-tf__btn.is-wrong {
  border-color: var(--bt-wrong);
  background: var(--bt-wrong-soft);
}

.ba-tf__btn.is-out {
  opacity: 0.4;
  filter: saturate(0.25);
}

.ba-tf__btn:disabled { cursor: default; }