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

/* The size tiles carry a worked example each, like the mouse page's shape tiles. All seven are one
   width (Patryk, 2026-10-05: same-size tiles, the boards a little smaller but still clear), and each
   shows its whole render across the tile, cut to a band 0.36 of its width tall: the renders share one
   scale (build-keyboard-images.cjs), so a full-size board spans nine tenths of its tile and a 60%
   two thirds of its own, and the row still reads as a size comparison. The tiles went down from
   148px to 128px, the board with them to 84% of the tile (Patryk, 2026-10-16: lower tiles, a
   smaller board); every board shrinks by the same share, so the comparison holds. */
.keyboards-page .options.with-shots .option { min-height: 128px; }
.keyboards-page .options.with-shots .option-shot {
  width: 84%; max-width: none; height: auto; aspect-ratio: 100 / 36;
  margin: 0 auto 6px; object-fit: cover; object-position: center;
}
@media (max-width: 700px) {
  .keyboards-page .options.with-shots .option { min-height: 104px; }
}

/* Wider than the mouse sheet on a desktop for the size row (Patryk, 2026-10-02), the way the mouse
   page widens for its grip screen: seven boards drawn to scale need the room. Every tile's hint stays
   on one line on every step. */
@media (min-width: 701px) {
  .keyboards-page .questionnaire:has(.options.with-shots) { width: min(1080px, calc(100vw - 64px)); }
  /* Block, not the base rule's flex: text-overflow does nothing on a flex container, so at 932-1024px
     "No number row" was cut at both edges with no ellipsis. */
  .keyboards-page .option small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
/* Eight size tiles in one row need a 1130px window for "Compact numpad" to fit its tile (measured);
   on a tablet (768px) every hint was cut to "No nu…". Narrower than that, the row is two rows of
   four, at the same scale, so it still reads as a size comparison (2026-10-16 audit). */
@media (min-width: 701px) and (max-width: 1129px) {
  .keyboards-page .options.with-shots:has(> .option:nth-child(5)) { flex-wrap: wrap; }
  .keyboards-page .options.with-shots:has(> .option:nth-child(5)) > .option { flex: 1 1 calc(25% - 6px); }
}

/* The scene draws each render cropped to its middle band: the board sits across the middle of a
   square, and showing the whole square hung each name under a block of white well below its board.
   120px of the 190px square keeps every board whole, angled shots included (the tallest is about
   0.58 of the square). keyboard-view.js places the shells knowing this. */
.keyboards-page .mouse img { width: 190px; height: 120px; object-fit: cover; }
/* The name follows the board, not the band: pulled up by the white under the board (half the band
   less half the board, --tall from keyboard-view.js), leaving 10px. */
.keyboards-page .mouse .caption { margin-top: calc(var(--tall, .58) * 95px - 50px); position: relative; z-index: 1; }
/* That pull-up lays the name over the band's white foot. A hovered shell lifts its image with a
   transform (style.css), which paints the image above the name, and its white then hid the name
   (Patryk, 2026-10-05); the name is lifted onto its own layer above the image. */
/* scene.js places a node by the point (95,111), the middle of the 190px square it was written for, and
   scales it round its own centre. A node is a button, which centres its content in its 222px: with a
   120px band and a name of varying height the board moved with the name, and two boards of a pair
   landed at different heights. Content from the top and the origin pinned to that point put every
   board where keyboard-view.js aims it. */
.keyboards-page .mouse { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; transform-origin: 95px 111px; }