/* The same scene, questionnaire and gallery as mice, with controls for pad-specific criteria. */
.mousepads-page .mouse img { width: 190px; height: 190px; margin: 0; }
/* A featured pad has its own scale (mousepad-view.js), not the mouse one, so its caption would follow it.
   scene.js publishes the mouse scale as --cs next to the pad's own --s; dividing one by the other keeps
   the name exactly the on-screen size of a mouse name. */
@media (min-width: 701px) {
  .mousepads-page .mouse.featured .caption { font-size: calc(12px * var(--cs, 1) / var(--s, 1)); }
  .mousepads-page .mouse.featured .caption small { font-size: calc(10px * var(--cs, 1) / var(--s, 1)); margin-top: calc(3px * var(--cs, 1) / var(--s, 1)); }
}
/* Pad tiles are the mouse page's tiles with nothing of their own: the same height, type, picked
   outline and round tick badge, and the same grey for a dead branch (it carries .unavailable as well
   as `disabled`). Only the colour screen differs. */
/* The colour screen is a centred row of swatches on the bare sheet, like a colour picker on a product
   page, with "No preference" as an ordinary full-width tile beneath. Only colours still in stock for
   the earlier answers are drawn (mousepads.js). */
.mousepads-page .options.pad-colors { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mousepads-page .pad-colors .option { flex: 1 1 0; min-width: 0; max-width: 72px; min-height: 0; padding: 10px 0 8px; gap: 7px; background: transparent; }
.mousepads-page .pad-colors .option:hover { background: var(--tile); }
.mousepads-page .pad-colors .option strong { font-size: 12px; font-weight: 500; }
.mousepads-page .pad-colors .option[data-value="any"] { flex: 1 1 100%; max-width: none; min-height: 48px; margin-top: 8px; background: var(--tile); }
.mousepads-page .pad-colors .option[data-value="any"] strong { font-weight: 700; }
.pad-swatch { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); transition: transform .18s, box-shadow .18s; }
/* A picked colour is ringed like a colour picker's, instead of the tile outline and tick badge, which
   would frame a 36px dot in a box (mousepads.js writes no badge here). */
.mousepads-page .pad-colors .option.selected { outline: none; background: transparent; }
.mousepads-page .pad-colors .option.selected .pad-swatch { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.mousepads-page .pad-colors .option.selected strong { font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .pad-colors .option:hover .pad-swatch { transform: scale(1.08); }
}
/* With Back hidden on the first screen, Start over takes its place on the left edge instead of
   floating one slot to the right of an empty gap. */
.question-footer #back[hidden] + #reset { left: 26px; }
/* The surface render over a material tile's name (mousepads.js, SHOTS). */
.pad-shot { display: block; width: 100%; max-width: 96px; height: 56px; margin: 0 auto 8px; object-fit: contain; pointer-events: none; }
/* The results list (layouts.css): a pad is wide where a mouse is tall, so its thumbnail box is a
   square rather than the mouse's narrow upright one. */
.mousepads-page .l-thumb { flex-basis: 40px; width: 40px; height: 40px; }
@media (max-width: 700px) {
  /* The tiles scroll sideways as the mouse rows do (style.css); only the swatches wrap, since a row
     of dots is narrow enough to fit and "No preference" sits under them. */
  .mousepads-page .options.pad-colors { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; animation: none; }
  .mousepads-page .pad-colors .option { flex: 0 0 60px; min-height: 0; padding: 8px 0 6px; }
  .mousepads-page .pad-colors .option[data-value="any"] { flex: 1 1 100%; min-height: 42px; }
  .pad-colors .pad-swatch { width: 30px; height: 30px; }
  .pad-shot { max-width: 80px; height: 46px; margin-bottom: 6px; }
  .question-footer #back[hidden] + #reset { left: 14px; }
}
@media (max-height: 650px) and (max-width: 700px) {
  .mousepads-page .questionnaire { max-height: 65dvh; overflow-y: auto; padding-top: 18px; }
}