/* The monitor finder rides on mousepads.css (body carries both classes); this is what differs. */

/* One rule for every tile (Patryk, 2026-10-22): the title on one line, the hint on two at most, the
   same on every screen. The copy is written to fit (monitor-data.js); these only make sure nothing
   longer breaks the row. */
.monitors-page .option strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.monitors-page .option small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 140px;
}

/* The drawings over the size and curve tiles (monitors.js, ART), in the ink, a
   dead tile's in its grey as the mouse page's renders are. */
.monitors-page .option-art { display: block; width: 100%; max-width: 112px; height: 60px; margin: 0 auto 8px; color: var(--ink); pointer-events: none }
.monitors-page .option.unavailable .option-art { opacity: .35 }
.monitors-page .options.with-art .option { min-height: 140px }

@media (min-width: 701px) {
  /* Six tiles shared the sheet's 760px at 111px each, and a hint went to three lines; the sheet
     widens instead, as the keyboard sheet does for its size row, so every tile keeps about 130px.
     Tiles are one row, never two (Patryk, 2026-10-22): the size screen's seven widen it further, and
     so do the must-haves of two uses together, seven and "No must-haves". */
  .monitors-page .questionnaire:has(.options > .option:nth-child(6):last-child) { width: min(900px, calc(100vw - 64px)) }
  .monitors-page .questionnaire:has(.options > .option:nth-child(7):last-child) { width: min(1040px, calc(100vw - 64px)) }
  .monitors-page .questionnaire:has(.options > .option:nth-child(8):last-child) { width: min(1180px, calc(100vw - 64px)) }
}
@media (max-width: 700px) {
  .monitors-page .options.with-art .option { min-height: 118px }
  .monitors-page .option-art { max-width: 92px; height: 48px; margin-bottom: 6px }
}