/* BappaAsk — the frame around every question.
 *
 * Loaded after bappa-tokens.css, which is where every colour, gap and duration
 * below comes from. There is not a hex value or a millisecond in this file, and
 * that is not tidiness: an assessment has to match the lesson it follows, and a
 * value written here is a value that will drift from the lesson the next time
 * somebody adjusts one and not the other.
 *
 * Sized for a 360px phone first. Everything wider is the same layout with more
 * room, because most of the people this is for are holding the narrow case.
 */

/* An engine that sets `el.hidden = true` expects the thing to go away. The
   browser's own [hidden] rule is display:none at the very bottom of the
   cascade, so any author rule giving that element a display — flex, grid, block
   — silently beats it and the element stays on screen. It cost an afternoon
   once; it should not cost the next sixteen engines anything. */
.ba [hidden],
.bq [hidden] { display: none !important; }

.ba {
  font-family: var(--bt-font);
  color: var(--bt-ink);
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--bt-s3);
}

/* ── the question ───────────────────────────────────────────────────────── */

.ba__prompt {
  margin: 0;
  font-size: var(--bt-fs-prompt);
  font-weight: 700;
  line-height: 1.3;
}

.ba__media {
  margin: 0;
  border-radius: var(--bt-radius);
  overflow: hidden;
  background: var(--bt-card);
  box-shadow: var(--bt-shadow);
}
.ba__media img {
  display: block;
  width: 100%;
  height: auto;
}

.ba__input {
  display: block;
}

/* ── hint ────────────────────────────────────────────────────────────────
   A quiet second button, never as loud as the one that checks the answer.
   Asking for help should feel available, not encouraged. */

.ba__hint-text {
  margin: 0;
  padding: var(--bt-s3);
  border-radius: var(--bt-radius-sm);
  background: var(--bt-close-soft);
  color: var(--bt-close);
  font-size: var(--bt-fs-body);
  font-weight: 600;
}

.ba__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bt-s3);
  margin-top: var(--bt-s1);
}

.ba__hint,
.ba__submit,
.ba__next {
  font: inherit;
  font-weight: 700;
  min-height: var(--bt-tap);
  padding: 0 var(--bt-s4);
  border-radius: var(--bt-radius-pill);
  cursor: pointer;
  transition: transform var(--bt-t-quick) var(--bt-ease),
              opacity var(--bt-t-quick) var(--bt-ease);
}

.ba__hint {
  border: 2px solid var(--bt-line);
  background: transparent;
  color: var(--bt-ink-soft);
}

.ba__submit,
.ba__next {
  border: 0;
  color: #fff;
  background: var(--bt-green);
  box-shadow: var(--bt-shadow);
}

.ba__submit:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.ba__hint:not(:disabled):active,
.ba__submit:not(:disabled):active,
.ba__next:active {
  transform: translateY(2px);
}

.ba__hint:disabled { opacity: 0.4; cursor: default; }

/* The focus ring is not negotiable. Some of the people using this are on a
   borrowed laptop with a broken trackpad, working entirely by keyboard. */
.ba :focus-visible {
  outline: 3px solid var(--bt-saffron);
  outline-offset: 3px;
}

/* ── the verdict, and always the reason ─────────────────────────────────── */

.ba__feedback {
  padding: var(--bt-s4);
  border-radius: var(--bt-radius);
  border: 2px solid;
  animation: baRise var(--bt-t) var(--bt-ease);
}

@keyframes baRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.ba__verdict {
  margin: 0;
  font-size: var(--bt-fs-body);
  font-weight: 700;
}

.ba__why {
  margin: var(--bt-s2) 0 0;
  font-size: var(--bt-fs-body);
  line-height: 1.5;
  color: var(--bt-ink);
}

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

.ba__feedback.is-wrong,
.ba__feedback.is-partial {
  border-color: var(--bt-wrong);
  background: var(--bt-wrong-soft);
}
.ba__feedback.is-wrong .ba__verdict,
.ba__feedback.is-partial .ba__verdict { color: var(--bt-wrong); }

.ba__feedback.is-close {
  border-color: var(--bt-close);
  background: var(--bt-close-soft);
}
.ba__feedback.is-close .ba__verdict { color: var(--bt-close); }

/* Review mode: the answer shown, nothing judged. Neutral on purpose — there is
   no verdict here to colour. */
.ba__feedback.is-shown {
  border-color: var(--bt-line);
  background: var(--bt-card);
}
.ba__feedback.is-shown .ba__verdict { color: var(--bt-ink-soft); }

.ba__next {
  margin-top: var(--bt-s4);
}

/* ── shared building blocks ──────────────────────────────────────────────
   Every engine that offers things to tap uses these, so a chemistry option and
   a grammar option are the same object on screen. Kept here rather than copied
   into each engine, which is how seventeen slightly different buttons happen. */

.ba-opt {
  display: flex;
  align-items: center;
  gap: var(--bt-s3);
  width: 100%;
  min-height: calc(var(--bt-tap) + var(--bt-s3));
  padding: var(--bt-s3) var(--bt-s4);
  font: inherit;
  font-size: var(--bt-fs-body);
  font-weight: 600;
  text-align: left;
  color: var(--bt-ink);
  background: var(--bt-card);
  border: 2px solid var(--bt-line);
  border-radius: var(--bt-radius-sm);
  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-opt:not(:disabled):active { transform: translateY(1px); }

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

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

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

/* Not chosen and not the answer: faded out of the way rather than marked.
   Nothing was wrong with it — it just was not the question. */
.ba-opt.is-out {
  opacity: 0.4;
  filter: saturate(0.25);
}

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

.ba-opt__mark {
  flex: 0 0 auto;
  width: 1.6em;
  font-size: 1.1em;
  text-align: center;
}

.ba-opt__body { flex: 1 1 auto; }

.ba-opt__reason {
  display: block;
  margin-top: var(--bt-s1);
  font-size: var(--bt-fs-small);
  font-weight: 600;
  color: var(--bt-ink-soft);
}

/* ── the thing being carried ─────────────────────────────────────────────
   A clone of whatever was picked up, following the finger. The original stays
   in the layout, faded, so nothing reflows mid-drag and the target you were
   aiming at is still where you were aiming.

   pointer-events: none is load-bearing, not decoration: the drag finds its
   target with elementFromPoint, and a ghost that took pointer events would
   only ever find itself. */
.ba-ghost {
  position: fixed;
  z-index: 2147482500;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  transform: rotate(-1.5deg) scale(1.03);
  box-shadow: var(--bt-shadow-lift);
  cursor: grabbing;
}

.is-lifted {
  opacity: 0.3;
  filter: saturate(0.4);
}

/* Where it would land. */
.is-over {
  border-color: var(--bt-saffron) !important;
  background: #FFF6E4 !important;
}

.ba-opt img {
  display: block;
  width: 100%;
  max-width: 8rem;
  height: auto;
  border-radius: var(--bt-radius-sm);
}

/* The speaker beside a question.
   Inside the prompt rather than beside it, so it wraps with the last line and
   never ends up alone on a row of its own on a narrow phone. Quiet until
   wanted: it is an offer, not an instruction. */
.ba__say {
  margin-left: 0.4em;
  padding: 0 0.35em;
  font: inherit;
  font-size: 0.8em;
  line-height: 1.6;
  vertical-align: middle;
  background: var(--bt-cream);
  border: 2px solid var(--bt-line);
  border-radius: 999px;
  cursor: pointer;
}
.ba__say:hover { background: var(--bt-lit); }
.ba__say:active { transform: translateY(1px); }