/*
 * Quiz verification badges (migration 063). Markup comes from
 * application/helpers/verification_helper.php and, for the unlock popup,
 * from the JSON it feeds; nothing else draws a badge.
 *
 * Standalone on purpose: the legacy exam pages do not load etest-theme.css
 * and must not start to, so no theme variables are used here.
 *
 * Colour is a second signal, never the only one: the glyph and the words say
 * the same thing. Teacher Verified is green like "Pass"; AI Generated is a
 * plain neutral grey, because it is information, not a warning -- no amber,
 * no red. Both pairs clear WCAG AA for small text.
 */

.et-qv {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 2rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  flex: 0 0 auto; /* in a flex header the title truncates, not the badge */
}

.et-qv__glyph { font-weight: 700; line-height: 1; }
.et-qv__label { overflow: hidden; text-overflow: ellipsis; }

.et-qv--teacher { background: #e2f8f0; color: #0e6e4a; border-color: #b5ead6; }
.et-qv--ai      { background: #f1f3f7; color: #3d4658; border-color: #d6dbe4; }

.et-qv--sm { font-size: .72rem; padding: .18em .6em; }
.et-qv--lg { font-size: .85rem; padding: .3em .8em; }

/* Beside a price: "20 coins · ✓ Teacher Verified" */
.et-qv-price { display: inline-flex; align-items: center; gap: .35em; margin-left: .35em; vertical-align: middle; }
.et-qv-price__sep { color: #858796; }

/* The AI explanation: hover, keyboard focus, or tap (a tap focuses it). */
.et-qv-wrap { position: relative; display: inline-block; max-width: 100%; }
.et-qv--has-hint { cursor: help; }
.et-qv--has-hint:focus { outline: 2px solid #4e73df; outline-offset: 2px; }
.et-qv--has-hint:focus:not(:focus-visible) { outline: none; }
.et-qv__more { font-size: .9em; opacity: .75; }

.et-qv__hint {
  display: none;
  position: absolute;
  z-index: 1070;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: min(18rem, 80vw);
  padding: .45rem .65rem;
  border-radius: .4rem;
  background: #2b2f38;
  color: #fff;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.et-qv-wrap:hover .et-qv__hint,
.et-qv--has-hint:focus + .et-qv__hint { display: block; }

@media (max-width: 575.98px) {
  .et-qv--lg { font-size: .8rem; }

  /* In an exam's one-line header a phone has no room for the words: they
     squeezed the quiz title to a few letters on UAT. Keep the glyph, which
     still carries the meaning; the words stay for screen readers and in the
     title tooltip, and the student saw them in full before starting. */
  .et-exam-topbar .et-qv__label,
  .adv-topbar .et-qv__label,
  .quiz-header .et-qv__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .et-exam-topbar .et-qv, .adv-topbar .et-qv, .quiz-header .et-qv { padding: .18em .45em; }
}