/* ==========================================================================
   V092 — the question list is the page, so it starts at the top of it.

   Measured at 1440x900, the first question card began at y=626. Everything
   above it was chrome, in five blocks:

     y=46   h=139   the PRACTICE header, its H1 and its explanation
     y=201  h=35    "Open on iPad"
     y=290  h=64    Module / Topic / Question Type
     y=370  h=99    Search
     y=522  h=69    the QUICK SET block

   626px of header before the first question, on a 900px screen. The same
   layout on a 390x844 phone put the first card at y=1076 - a full screen
   past the fold - so on a phone the list of 2680 questions began with a page
   of controls and no questions. On a 768x1024 tablet it was y=867, also below
   the fold.

   This file does three things, and only the first is a layout change:
     1. The three primary filters and the search box move into a drawer that
        is closed by default, behind one control that says how many filters
        are active. Nothing is removed - every id stays, so every code path
        that reads moduleFilter / topicFilter / typeFilter / searchInput is
        unaffected.
     2. The QUICK SET block's head goes. Its body was already hidden, and the
        "Build your own set" button it advertised is one of the preset chips
        further up, so what remains is a heading that describes a control the
        student has already been given.
     3. The header shrinks to its H1, so the first card is reachable without
        scrolling on a laptop and is visible on a phone.

   The theme is deliberate: a page whose subject is "2680 questions" should
   open on a question. A student who came to practise should not have to scroll
   to find out whether there is anything to practise.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The drawer.

   #practiceFilterBar holds the primary filters, the search row and the
   advanced block. The existing #moreFiltersBtn toggle (v028) only controls
   #advancedFilters, so a new control is added rather than reusing it - two
   buttons that both say "Filters" and open different things is the kind of
   thing that reads as a bug.

   The drawer is collapsed with height, not display, so the transition can run;
   visibility is toggled at the same time so a collapsed drawer is out of the
   tab order and out of the accessibility tree. */
body.ial-v030 .v092-filterDrawer {
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: max-height .22s ease, opacity .18s ease, visibility 0s linear .22s !important;
}
body.ial-v030 .v092-filterDrawer.v092-open {
  max-height: 460px !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: max-height .22s ease, opacity .18s ease !important;
}
/* Below the breakpoint the filters are two columns of selects rather than
   three across, so the cap has to be taller or the last row is cut off. */
@media (max-width: 900px) {
  body.ial-v030 .v092-filterDrawer.v092-open { max-height: 720px !important; }
}

/* The toggle sits on the same line as the question count, so the two things a
   student reads first - how many there are, and how to change the list - are
   in one place. */
body.ial-v030 .v092-filterToggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1f2a44 !important;
  cursor: pointer !important;
}
body.ial-v030 .v092-filterToggle:hover { background: #f1f5f9 !important; }
body.ial-v030 .v092-filterToggle .v092-caret {
  display: inline-block !important;
  transition: transform .2s ease !important;
}
body.ial-v030 .v092-filterToggle[aria-expanded="true"] .v092-caret { transform: rotate(180deg) !important; }

/* A count of the active filters, so a closed drawer is not a closed book: the
   student can see that a filter is on without opening anything. */
body.ial-v030 .v092-filterCount {
  display: none !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #315efb !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 20px !important;
  text-align: center !important;
}
body.ial-v030 .v092-filterToggle[data-count="0"] .v092-filterCount { display: none !important; }
body.ial-v030 .v092-filterToggle:not([data-count="0"]) .v092-filterCount { display: inline-block !important; }

/* --------------------------------------------------------------------------
   2. The QUICK SET head.

   #practiceSetBuilderBody is already hidden by the markup, so what shows is a
   69px heading. It is removed from the layout rather than hidden by script so
   that a card rendered without JS also does not carry it.

   The build-your-own-set path is untouched: #toggleSetBuilderBtn and
   #practiceSetBuilderBody are what open it, and the preset row above still
   carries a "Practice selected" chip that reaches #practiceSelected(). */
body.ial-v030 .practiceSetBuilderHead { display: none !important; }
body.ial-v030 .practiceSetBuilder { display: none !important; }

/* --------------------------------------------------------------------------
   3. The header.

   The H1 stays - it is what tells a student which page they are on - and the
   explanation and the iPad button go. The iPad button is not lost: it is a
   convenience, and the workspace it opens is reachable from any question. */
body.ial-v030 .practiceHeader { margin-bottom: 10px !important; }
body.ial-v030 .practiceHeader p { display: none !important; }
body.ial-v030 .practiceHeaderActions { display: none !important; }
body.ial-v030 .practiceHeader h1 { font-size: 24px !important; margin: 0 !important; }
body.ial-v030 .practiceHeader .eyebrow { font-size: 10px !important; }

/* The bar itself stops reserving room for a row it no longer has. */
body.ial-v030 .v028-practice-filter-bar { margin-bottom: 12px !important; }

/* --------------------------------------------------------------------------
   4. The list gets the space back.

   Nothing here changes what a card looks like. The point is that with 600px
   returned, the first screen holds six or seven cards instead of one and a
   half - and on a phone, cards are visible without scrolling at all. */
body.ial-v030 .practiceSetBuilder { display: none !important; }
body.ial-v030 #questionList { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   4. The card's own grid.

   Measured, before this rule:
     desktop 1440  card 1334 wide, but the title and the meta line were 1024
                   while the Open Question button sat at x=1244 - 219px of
                   dead space between them, on the widest card on the site.
     phone 390     the title was 64px wide and 92px tall, wrapped to four
                   lines, with the 160px button sitting on top of it.

   The card is a grid whose columns do not reflow, and the structure has FOUR
   direct children, not three:

       label.qpick   the checkbox
       img.qthumb    the thumbnail
       div           the text  (no class - this is why `> div` and
                                 `> div:not(.qright)` both work by accident)
       div.qright    the button

   The first attempt declared three columns and addressed the text as
   "a div that is not .qright", which also matches the div inside label.qpick -
   so on a 390px phone the title measured 34px wide and 229px tall, wrapped
   to seven lines, and the card grew to 626px. Measured, not reasoned: the four
   children were listed with their grid positions to find it.

   Four columns, and the text takes whatever is left. */
body.ial-v030 #questionList .qcard {
  grid-template-columns: 20px 52px minmax(0, 1fr) auto !important;
  align-items: center !important;
}
body.ial-v030 #questionList .qcard > label.qpick { grid-column: 1 !important; }
body.ial-v030 #questionList .qcard > img.qthumb { grid-column: 2 !important; }
body.ial-v030 #questionList .qcard > div:not(.qright):not(.qpick) { grid-column: 3 !important; min-width: 0 !important; }
body.ial-v030 #questionList .qcard > .qright { grid-column: 4 !important; min-width: 0 !important; }
body.ial-v030 #questionList .qcard h4 { min-width: 0 !important; overflow-wrap: anywhere !important; }
body.ial-v030 #questionList .qcard .qmeta { min-width: 0 !important; }

@media (max-width: 680px) {
  /* The button drops to its own row and takes the full width. The title then
     has the whole card rather than 34px of it. */
  body.ial-v030 #questionList .qcard {
    grid-template-columns: 20px 52px minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }
  body.ial-v030 #questionList .qcard > .qright {
    grid-column: 1 / -1 !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;
  }
}

/* --------------------------------------------------------------------------
   5. Dark theme, for the new control only.
   -------------------------------------------------------------------------- */
html[data-ial-theme="dark"] body.ial-v030 .v092-filterToggle {
  background: #1a2333 !important;
  border-color: #33415c !important;
  color: #e2e8f0 !important;
}
html[data-ial-theme="dark"] body.ial-v030 .v092-filterToggle:hover { background: #232f45 !important; }
html[data-ial-theme="dark"] body.ial-v030 .v092-filterCount { background: #4263eb !important; color: #fff !important; }