/* V106 - Practice: a place to start.

   Every rule here answers a measurement taken on the live page, not a guess:
     .practiceFilterBar   246px at 1440, 273px at 390
     .practiceFilterMeta   92px at 1440 (wrapped), 262px at 390 (four rows)
     first question card  y=395 at 1440, y=502 at 390

   Specificity note, because it has bitten this project three times: the rules
   being overridden are written as `body.ial-v030 .x .y`. Everything below
   carries `body.ial-v030 #practice` for an id, which beats any number of
   classes without `!important` and survives being loaded before or after. */

/* ------------------------------------------------------------- the start row --
   Three ways in, in the order a student needs them: start something now,
   revisit what went wrong, or target what is weak. Each carries the number it
   would open, so a locked card is visibly locked before it is clicked. */
body.ial-v030 #practice .v106-start {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 12px;
  margin: 0 0 16px;
}

body.ial-v030 #practice .v106-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  color: var(--ink, #1e293b);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

body.ial-v030 #practice .v106-card:hover:not(:disabled) {
  border-color: #c7d2fe;
  box-shadow: 0 6px 18px rgba(49, 94, 251, .10);
  transform: translateY(-1px);
}

body.ial-v030 #practice .v106-card:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

body.ial-v030 #practice .v106-card:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

body.ial-v030 #practice .v106-primary {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(79, 70, 229, .28);
}

body.ial-v030 #practice .v106-primary:hover:not(:disabled) {
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(79, 70, 229, .34);
}

body.ial-v030 #practice .v106-card .v106-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

body.ial-v030 #practice .v106-card b {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

body.ial-v030 #practice .v106-card i {
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.35;
  color: #64748b;
}

body.ial-v030 #practice .v106-primary i { color: rgba(255, 255, 255, .78); }

body.ial-v030 #practice .v106-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #4338ca;
  background: #eef2ff;
  border-radius: 999px;
  white-space: nowrap;
}

body.ial-v030 #practice .v106-arrow {
  flex: 0 0 auto;
  font-size: 16px;
  color: #94a3b8;
}

body.ial-v030 #practice .v106-primary .v106-arrow { color: rgba(255, 255, 255, .85); }

/* A locked card keeps its place and its reason, but stops looking clickable.
   `disabled` alone is not enough: Safari keeps hover styles on disabled
   buttons, and the badge would still read as an invitation. */
body.ial-v030 #practice .v106-locked {
  background: #f8fafc;
  border-style: dashed;
  cursor: default;
  opacity: .72;
}

body.ial-v030 #practice .v106-locked:hover { box-shadow: none; transform: none; border-color: #e2e8f0; }
body.ial-v030 #practice .v106-locked .v106-arrow { display: none; }

/* ------------------------------------------------- the row the cards came from --
   The three preset buttons live on in the DOM (startMode() reads no state from
   them, but leaving them costs nothing) and stop competing with the count for
   the same line. So do the two labels that introduced them, and the Clear
   button: the search field already grows its own clear affordance. */
body.ial-v030 #practice .practiceFilterBar .practiceFilterMeta .v086-preset,
body.ial-v030 #practice .practiceFilterBar .practiceFilterMeta .sessionPresetLabel,
body.ial-v030 #practice .practiceFilterBar .practiceFilterMeta #practiceSelectedBtn,
body.ial-v030 #practice .practiceFilterBar #clearPracticeSearchBtn {
  display: none !important;
}

/* One line, always. This row wrapped at 1440 (92px for what is a count and a
   select) and into four rows at 390 (262px) - three of those rows were the
   preset buttons that have just moved out, and the fourth was the wrapping
   itself. */
body.ial-v030 #practice .practiceFilterBar .practiceFilterMeta {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  margin-top: 10px !important;
}

body.ial-v030 #practice .practiceFilterBar .practiceFilterMeta .spacer { flex: 1 1 auto; }

/* Measured at 390: the count was 77px wide and 34px tall - "2680" on one line,
   "QUESTIONS" on the next - and the sort select had been squeezed to 22px and
   pushed 107px outside the container. `nowrap` on the row does not help if the
   items themselves are allowed to shrink; they are told not to.

   `width` is the one that actually did it: the count is a block-level span and
   inherited `width: 100%` from the column it used to fill, so `flex: 0 0 auto`
   resolved its basis to 340px - the whole row - and everything after it was
   pushed out. Measured with offsetWidth, because the rect and the layout box
   disagree once a scroll container is involved. */
body.ial-v030 #practice .practiceFilterBar .practiceFilterMeta .countText {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
}

body.ial-v030 #practice .practiceFilterBar .practiceFilterMeta #v072SortSelect {
  flex: 0 1 auto !important;
  max-width: 124px !important;
  min-width: 0 !important;
}

/* v096's hint tells the reader to tick boxes and then "press Practice
   selected". Once a box is ticked the picked bar says the same thing with a
   button that exists, and the hint's closing words point at a control this
   layer has hidden. Two instructions for one gesture, one of them wrong. */
body.v106-has-picks #practice .practiceFilterBar #v096PickHint {
  display: none !important;
}

/* The second count. Two numbers on one page with no explanation is how a site
   teaches a reader it inflates; this says which is which. */
body.ial-v030 #practice .practiceFilterBar .v106-parts {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

/* ------------------------------------------------------ desktop: one row, four --
   Three selects and the search box on a single line, where they fit, instead
   of three lines with one control each. `display: contents` on the three-field
   wrapper promotes the three .filterField boxes into this grid; the search row
   stays a single item so its input can keep flexing and its button stays next
   to it.

   The drawer wrapper must stay in the layout at >=901px - it is what the
   mobile disclosure animates - so the grid is stated on it directly. */
@media (min-width: 901px) {
  body.ial-v030 #practice .practiceFilterBar #v092FilterDrawer {
    display: grid !important;
    grid-template-columns:
      minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(260px, 1.5fr) !important;
    gap: 10px !important;
    align-items: end !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  body.ial-v030 #practice .practiceFilterBar .practicePrimaryFilters {
    display: contents !important;
  }

  body.ial-v030 #practice .practiceFilterBar .practiceSearchRow {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    align-items: end !important;
    min-width: 0 !important;
  }

  body.ial-v030 #practice .practiceFilterBar .practiceSearchWrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* v097 re-shows the drawer's controls when it is open, but the list it
     restores is `.filterField`, its select and input, `#searchInput` and
     `.practicePrimaryFilters` - this label is not in it. Measured at 1440 with
     the row fully open: the other three labels are `visibility: visible` and
     this one is `hidden`, so the fourth column had a hole where a heading
     should be.

     The -6px is measured, not guessed: the search wrapper's label started at
     y=261 while the three filter labels started at y=255, because the two
     wrappers are bottom-aligned and differ in height. */
  body.ial-v030 #practice .practiceFilterBar .practiceSearchWrap > label {
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: -6px !important;
  }

  body.ial-v030 #practice .practiceFilterBar .practiceSearchActions {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  body.ial-v030 #practice .practiceFilterBar #advancedFilters {
    grid-column: 1 / -1 !important;
  }

  body.ial-v030 #practice .practiceFilterBar .practiceFilterMeta {
    margin-top: 8px !important;
  }

  /* At this width the drawer is already open and the whole filter row is on
     screen, so the disclosure has nothing left to disclose: measured, it opens
     `data-open="true"` and clicking it leaves both that attribute and the
     74px height unchanged. A button that announces a panel it cannot close,
     with `aria-expanded="true"` and no effect, is worse than no button. */
  body.ial-v030 #practice .practiceFilterBar .v092-filterToggle {
    display: none !important;
  }
}

/* ----------------------------------------------------------- the picked bar --
   Replaces a grey disabled button with a bar that only exists when there is
   something to practise. */
body.ial-v030 #practice .v106-picked {
  position: sticky;
  bottom: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding: 10px 12px 10px 16px;
  color: #fff;
  background: #1e293b;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
}

body.ial-v030 #practice .v106-picked b { font-size: 13px; font-weight: 700; }

body.ial-v030 #practice .v106-picked .btn.primary {
  background: #fff !important;
  color: #1e293b !important;
  border-color: #fff !important;
  font-weight: 800;
}

/* ------------------------------------------------------------------ phone --
   Below 760 the start cards stack, drop their second line, and lose the arrow:
   the badge stays because "12 waiting" is the only thing that makes Review
   worth tapping. */
@media (max-width: 760px) {
  /* Stacked, the three cards cost 160px on an 844px screen and pushed the first
     question to y=542 - worse than the 502 this layer set out to fix. Side by
     side they cost 54px, the second card shows at the edge so the row reads as
     scrollable, and a horizontal card rail is a known shape on a phone. */
  body.ial-v030 #practice .v106-start {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.ial-v030 #practice .v106-start::-webkit-scrollbar { display: none; }

  body.ial-v030 #practice .v106-card {
    flex: 0 0 auto;
    width: 214px;
    min-height: 54px;
    padding: 11px 13px;
    border-radius: 12px;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  /* The second line stays, on one line. It is the only thing that tells a
     reader why "Review my mistakes" cannot be tapped yet; hiding it left three
     identical cards where one of them quietly did nothing. */
  body.ial-v030 #practice .v106-card i {
    display: block;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.ial-v030 #practice .v106-arrow { display: none; }
  body.ial-v030 #practice .v106-card b { font-size: 13px; }
  body.ial-v030 #practice .v106-badge { font-size: 9.5px; padding: 2px 7px; }

  /* The state marker is a 20x24 pill with its own background and border, and
     at 390 it sat alone on the button's line reading as an image that failed
     to load. Hiding its inner dot left the pill, which is the part that
     showed. The answered state is already carried by the tick/cross above the
     topic and the personal accuracy beside it; a saved question still shows
     its star in My Work. */
  body.ial-v030 #questionList .qcard > .qright .qstate { display: none !important; }

  /* Two things that do not fit in a 340px row and do not earn the space they
     would take. The hint's own subject - the tick boxes - is already visible
     on every card, and the parts count is a footnote for a reader who is
     already on a phone because they wanted to do a question, not audit one. */
  body.ial-v030 #practice .practiceFilterBar #v096PickHint { display: none !important; }
  body.ial-v030 #practice .practiceFilterBar .v106-parts { display: none !important; }
}

/* ------------------------------------------------------- the thumbnail, again --
   v093 gave the thumbnail its own full-width row below 760px: 340px wide, up
   to 110px tall, showing a scanned question at a size where nothing on it can
   be read. It cost a card roughly 60px of height to say nothing. A thumbnail
   does its job at the size of a postage stamp, in the column beside the text
   it belongs to - which is where it already sits above 760px.

   Column count is 20px / 52px / rest, as v093 left it; only the placement
   changes. */
@media (max-width: 760px) {
  body.ial-v030 #questionList .qcard > img.qthumb {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 52px !important;
    height: 36px !important;
    max-height: 36px !important;
    min-height: 0 !important;
    margin-top: 2px !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  body.ial-v030 #questionList .qcard > div:not(.qright) {
    grid-column: 3 !important;
    grid-row: 1 !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 > .qright {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    /* The column is what put the status dot above the button and the button
       under it - measured, the button started at y=580 inside a row that began
       at y=546. One row, dot on the left, action on the right. */
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body.ial-v030 #questionList .qcard > .qright .btn {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
  }
}

/* ---------------------------------------------------------------- dark theme --
   Same three surfaces, restated. A single grey cannot serve both themes: the
   values that read as "quiet" on white are the ones that disappear on navy. */
html[data-ial-theme="dark"] body.ial-v030 #practice .v106-card {
  background: #131c2e;
  border-color: #26334a;
  color: #e8eefc;
}

html[data-ial-theme="dark"] body.ial-v030 #practice .v106-card i { color: #8b9bb5; }

html[data-ial-theme="dark"] body.ial-v030 #practice .v106-primary {
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  color: #fff;
  border-color: transparent;
}

html[data-ial-theme="dark"] body.ial-v030 #practice .v106-primary i { color: rgba(255, 255, 255, .8); }

html[data-ial-theme="dark"] body.ial-v030 #practice .v106-badge {
  color: #c7d2fe;
  background: #26315b;
}

html[data-ial-theme="dark"] body.ial-v030 #practice .v106-locked {
  background: #0e1626;
  border-color: #22304a;
}

html[data-ial-theme="dark"] body.ial-v030 #practice .practiceFilterBar .v106-parts { color: #7f8ea8; }

/* v096's hint is pinned to a pale blue with !important, which on navy reads as
   a piece of paper left on the page. It is the only light surface in this row,
   so it is restated rather than left to stand out. */
html[data-ial-theme="dark"] body.ial-v030 #practice .practiceFilterBar #v096PickHint {
  background: #1b2440 !important;
  border-color: #3b4a75 !important;
  color: #c7d2fe !important;
}

html[data-ial-theme="dark"] body.ial-v030 #practice .practiceFilterBar #v096PickHint::before {
  background: #0e1626 !important;
  border-color: #6d8bff !important;
}

html[data-ial-theme="dark"] body.ial-v030 #practice .v106-picked {
  background: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}

html[data-ial-theme="dark"] body.ial-v030 #practice .v106-picked .btn.primary {
  background: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
}