/* Touch screen test: the touch area (which goes full screen), the floating
   controls shown in full screen, and the touch point table. Scoped under
   .tst; colours come from the site's tokens. */
.tst-bar { justify-content: space-between; align-items: end; }
.tst-field { display: grid; gap: 4px; min-width: 0; }
.tst-label { font-size: 14px; font-weight: 500; }

.tst-area { position: relative; height: clamp(320px, 62vh, 620px); overflow: hidden; border: 2px solid var(--line-strong); border-radius: var(--radius);
  background: var(--sunk); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; }
.tst-area.is-fs { height: 100%; border: 0; border-radius: 0; }
.tst-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tst-hint { position: absolute; left: 50%; top: 50%; max-width: 80%; margin: 0; transform: translate(-50%, -50%); color: var(--muted); font-size: 16px; text-align: center; pointer-events: none; transition: opacity .3s; }
.tst-area.is-touching .tst-hint { opacity: 0; }

/* In full screen the only controls float at the bottom; they fade and let
   touches through while a finger is down, so the cells under them can be
   tested too. */
.tst-float { display: none; position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); box-shadow: 0 4px 18px rgba(0, 0, 0, .18); font-size: 14px;
  white-space: nowrap; transition: opacity .2s; }
.tst-area.is-fs .tst-float { display: flex; }
.tst-area.is-touching .tst-float { opacity: .15; pointer-events: none; }

.tst-points { display: grid; gap: 10px; }
.tst-points h2 { font-size: 18px; }
.tst-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tst-table th, .tst-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tst-table thead th { color: var(--muted); font-size: 13px; font-weight: 600; }
.tst-table td { font: 400 14px/1.4 var(--f-mono); }
.tst-table td[colspan] { font-family: var(--f-body); color: var(--muted); }