/* V093 — the two "there are no questions" defects.

   Both were reported as the same sentence and they were two different bugs in
   two different places. The first was mine and it was severe; the second had
   been there since the first commit.

   Measured, at 1440x900, clicking "Open Question" on a P1 card:

     1. The question column was display:none, width 0. The question image was
        in the DOM the whole time (naturalWidth 1371) and the class list said
        the workspace was "workspaceGrid writing-focus".
        index.html:136 is `.workspaceGrid.writing-focus .questionPaper
        {display:none}` - writing-focus is Focus Writing, and v089-features.mjs
        was setting it precisely when a question WAS present.
        After the fix: display:flex, width 469, question image 423x96.

     2. The card's thumbnail was 52x34. The file it points at is 1371x311 - the
        question, already cropped. At 52px wide it was the top-left corner of a
        formula, which is why a list of 120 cards read as a list of labels with
        nothing in them. */

body.ial-v030 #questionList .qcard {
  /* The thumbnail column is 176px. The source is 1371x311, so contain-fit at
     64px tall gives 282px of width and the column is wider than that - which
     is why the fit is "contain" and not "cover": cover would crop the sides of
     a formula and lose the very thing the card is showing. 64px is about two
     text lines, so the row height stays where it was. */
  grid-template-columns: 26px 176px minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body.ial-v030 #questionList .qcard > img.qthumb {
  width: 100% !important;
  height: 64px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border-radius: 6px !important;
  border: 1px solid #dbe3ef !important;
  background: #fff !important;
  min-height: 64px !important;
}

/* The three labels under the thumbnail keep the card readable when the image
   cannot load at all, which is the M1-FP3 range where Q{n}.webp does not exist
   for every question. */
body.ial-v030 #questionList .qcard > img.qthumb:not([src]) {
  visibility: hidden !important;
}

body.ial-v030 #questionList .qcard > label.qpick { grid-column: 1 !important; align-self: center !important; }
body.ial-v030 #questionList .qcard > div:not(.qright) { grid-column: 3 !important; min-width: 0 !important; }
body.ial-v030 #questionList .qcard > .qright { grid-column: 4 !important; }

/* Narrow screens: the thumbnail gets its own full-width row.

   The column COUNT is kept at v092's on purpose. v092's own narrow-screen rule
   declares three columns and this file loads after it, so a two-column template
   here was measured losing to it and the thumbnail was squeezed to 7px of
   width - two items sharing row 1 in a two-column grid, each getting half of
   what the checkbox left. Same count, different placement: the thumbnail moves
   to row 1 on its own and the text drops to row 2.

   This is the third time in this project that "my rule is later, therefore it
   wins" turned out to be false. Compare like for like instead. */
@media (max-width: 760px) {
  body.ial-v030 #questionList .qcard {
    grid-template-columns: 20px 52px minmax(0, 1fr) !important;
    row-gap: 8px !important;
  }
  body.ial-v030 #questionList .qcard > img.qthumb {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 110px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  body.ial-v030 #questionList .qcard > label.qpick {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }
  body.ial-v030 #questionList .qcard > div:not(.qright) {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
  }
  body.ial-v030 #questionList .qcard > .qright {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }
  body.ial-v030 #questionList .qcard > .qright .btn,
  body.ial-v030 #questionList .qcard > .qright button {
    width: 100% !important;
    margin-top: 4px !important;
  }
}

/* Dark theme: the thumbnail is a white scanned page, so it needs a border to
   read as a document rather than a hole. */
html[data-ial-theme="dark"] body.ial-v030 #questionList .qcard > img.qthumb {
  border-color: #2c3a52 !important;
  background: #f6f8fc !important;
}