@charset "UTF-8";
/* ==========================================================================
   Who Said It — styles.css
   --------------------------------------------------------------------------
   ALMOST EVERYTHING THIS PAGE LOOKS LIKE IS SOMEWHERE ELSE, ON PURPOSE.

     /biblegames/shared/theme.css   the night sky, the golds, the three levels
                                    of ink, the type stacks, the focus ring,
                                    the self-check report panel.
     /biblegames/shared/quiz.css    the whole four-choice layout: the no-scroll
                                    flex column, the scoreboard, the answer
                                    grid, the feedback panel, the score card.
     this file                      only what belongs to Who Said It alone.

   index.php loads them in that order, so anything here overrides both.

   The test for whether a rule belongs in this file: WOULD WHO DID IT WANT IT
   DIFFERENT? If no, it goes in quiz.css and both games get it. If yes, here.

   In practice there is exactly one real difference between the two games, and
   it is section 2 below: THIS game's prompt is scripture, so it is set as
   scripture.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. What this game asks for                                                 */
/* -------------------------------------------------------------------------- */

:root {
  /*
   * Answers here are speakers' names. The longest in the bank are "John the
   * Baptist" and "Mary Magdalene", both shorter than Who Did It's "Joseph of
   * Arimathaea", so this game can afford slightly larger type on the buttons.
   */
  --ans-font: clamp(0.95rem, 3.3vw, 1.3rem);

  /* The colour of the drawn quotation marks. Dimmer than the words, so they
     frame the verse without competing with it. */
  --quote-mark: var(--gold-3);
}

/* -------------------------------------------------------------------------- */
/* 2. The quotation                                                           */
/* -------------------------------------------------------------------------- */

/*
 * The prompt on this page is scripture, so it is set as scripture: italic, in
 * the display face, between drawn quotation marks.
 *
 * THE MARKS ARE DRAWN IN CSS, NOT PUT IN THE TEXT.
 *
 * That is not decoration policy, it is accuracy policy. The element's text
 * content is exactly the words of the verse and nothing else, so a screen
 * reader reads scripture rather than scripture wrapped in punctuation, and a
 * copy-and-paste of the question gives someone the verse clean. It also means
 * BibleGames_Scripture.py can compare the rendered prompt against the KJV text
 * without having to strip anything off first.
 */
.ask {
  position: relative;
  max-width: 34ch;
  padding: 0 0.6em;
  font-style: italic;
}

.ask::before,
.ask::after {
  color: var(--quote-mark);
  font-size: 1.15em;
  font-style: normal;
  line-height: 0;
  /* Nudged down so the opening mark sits on the line of the words rather than
     floating above the cap height. */
  vertical-align: -0.15em;
}

.ask::before { content: '\201C'; margin-right: 0.04em; }
.ask::after  { content: '\201D'; margin-left: 0.04em; }

/* While the bank is still loading there is no verse to quote, so the marks
   would sit either side of the word "Loading" and look like a mistake. */
.ask:empty::before,
.ask:empty::after {
  content: '';
}

/* -------------------------------------------------------------------------- */
/* 3. Forced colours                                                          */
/* -------------------------------------------------------------------------- */

/*
 * Windows High Contrast discards our palette, and --quote-mark with it. The
 * marks must stay visible, because without them a quotation is indistinguish-
 * able from the game's own writing.
 */
@media (forced-colors: active) {
  .ask::before,
  .ask::after {
    color: CanvasText;
  }
}