/* Test page, revision 2: nothing in the plate screen changes size or position
   while digits are tapped. Loaded after cone.css on test.html only. */

/* Stable viewport height: svh never changes when the browser toolbar moves.
   vh is the fallback for browsers without svh. */
body.test-app { height: 100vh; height: 100svh; overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.test-app.test-intro { height: auto; min-height: 100vh; min-height: 100svh; overscroll-behavior: auto; }
body.test-app.test-result { height: auto; overscroll-behavior: auto; }
html:has(body.test-app:not(.test-intro):not(.test-result)) { overflow: hidden; overscroll-behavior: none; }

/* Answer display: one fixed box. Empty dash, one digit, same size and font. */
body.test-app .readout,
body.test-app .readout.is-empty {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  min-width: 7rem;
  height: 2.6rem;
  min-height: 2.6rem;
  padding: 0;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
body.test-app .readout.is-empty { color: var(--muted); }

/* Message line under the pad: always one reserved line, never zero or two. */
body.test-app .hint {
  box-sizing: border-box;
  height: 1.5rem;
  min-height: 1.5rem;
  margin: 0.15rem 0 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.9rem;
  line-height: 1.5rem;
  text-align: center;
}
body.test-app .answer-col { min-width: 0; }

/* Progress row: label never wraps unpredictably. Phones: step on line 1,
   plate type on line 2, always two lines. */
body.test-app .progress { min-height: 40px; }
body.test-app .progress-label { flex-wrap: nowrap; min-width: 0; line-height: 1.25; }
body.test-app #step, body.test-app #badge { white-space: nowrap; }
@media (max-width: 479px) {
  body.test-app .progress-label { flex-direction: column; align-items: flex-start; gap: 0.1rem 0; }
  body.test-app #badge { font-size: 0.85rem; }
}

/* Pressed state: ring only. No transform, so nothing changes size. */
.key { -webkit-tap-highlight-color: transparent; }
.key:active, button.key:active {
  transform: none;
  background: var(--line);
  box-shadow: inset 0 0 0 3px var(--ink);
}
button.key[type="submit"]:active {
  background: var(--ink);
  box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 2px var(--ink);
}

/* Short phones: slightly shorter keys so the plate keeps its size. */
@media (max-height: 620px) and (max-width: 599px) {
  body.test-app .key { min-height: 44px; }
}

/* Landscape phones */
@media (min-width: 600px) and (orientation: landscape) and (max-height: 560px) {
  body.test-app .readout, body.test-app .readout.is-empty { height: 2.3rem; min-height: 2.3rem; font-size: 1.6rem; }
}