Name Picker

public/css/kiosk.css

@@ -234,6 +234,21 @@ a:focus-visible {
   margin-bottom: 20px;
   -webkit-overflow-scrolling: touch;
 }
+
+/* The shortlist is the thing to tap, so make it read as the answer rather than
+   as another field. */
+#host-list .host-option,
+#freq-host-list .host-option {
+  border-color: var(--deep);
+  box-shadow: inset 0 0 0 1px var(--deep);
+  min-height: 64px;
+  font-size: 19px;
+  animation: rise 160ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  #host-list .host-option,
+  #freq-host-list .host-option { animation: none; }
+}
 .host-option small { display: block; color: var(--muted); font-size: 14px; }
 .host-empty {
   color: var(--muted);