fix(auth): render PIN dots as SVG circles (reliable on real iOS)

.changeset/pin-dots-svg.md

@@ -0,0 +1,8 @@
+---
+"pointsy": patch
+---
+
+Render the PIN dots as SVG circles. Styled HTML elements for the dots could fail
+to paint on some real iOS devices even when they rendered fine everywhere else;
+SVG `<circle>`s render identically across devices, so the four dots now always
+show (empty = muted sage, filled = emerald, wrong attempt = rose + shake).

components/auth/PinPad.tsx

@@ -81,13 +81,20 @@ export function PinPad({
     <div ref={padRef} className={styles.pad}>
       <input ref={hiddenRef} type="hidden" name={name} />
       <p className={styles.label}>{label}</p>
-      <output
+      {/* SVG circles, not styled HTML elements — they render identically on
+          every device (empty CSS-sized <span>s could collapse to nothing on
+          real iOS). */}
+      <svg
         className={errored ? `${styles.dots} ${styles.dotsError}` : styles.dots}
-        aria-label={`${pin.length} of ${length} digits entered`}
+        viewBox={`0 0 ${length * 32 - 14} 18`}
+        aria-hidden="true"
       >
         {Array.from({ length }).map((_, i) => (
-          <span
+          <circle
             key={i}
+            cx={9 + i * 32}
+            cy={9}
+            r={9}
             className={
               errored
                 ? styles.dotError
@@ -97,6 +104,9 @@ export function PinPad({
             }
           />
         ))}
+      </svg>
+      <output className="sr-only">
+        {pin.length} of {length} digits entered
       </output>
       <div className={styles.keys}>
         {KEYS.map((k) => (

components/auth/pin-pad.module.css

@@ -11,45 +11,34 @@
   color: var(--color-text);
 }
 
+/* The dots are an <svg> of <circle>s (see PinPad) — bulletproof on real iOS,
+   where empty CSS-sized HTML elements could collapse to nothing. */
 .dots {
-  display: flex;
-  justify-content: center;
-  gap: var(--space-3);
-  /* Reserve the row's height so the area never collapses to nothing. */
-  min-height: 20px;
+  display: block;
+  width: 8rem;
+  height: auto;
+  margin: 0 auto;
+  overflow: visible;
 }
 
-/*
- * Bulletproof on real iOS: SOLID filled circles (no border / box-sizing), and
- * `flex: 0 0 20px` so empty flex items can never shrink to nothing — the fragile
- * empty-span-with-border construct rendered fine in desktop WebKit but vanished
- * on-device.
- */
 .dot,
 .dotFilled,
 .dotError {
-  flex: 0 0 20px;
-  width: 20px;
-  height: 20px;
-  border-radius: 999px;
-  transition:
-    background-color 0.12s ease,
-    transform 0.12s ease;
+  transition: fill 0.12s ease;
 }
 
-/* Empty slot: a clearly visible muted-sage dot. */
+/* Empty slot: a clearly visible muted-sage circle. */
 .dot {
-  background: var(--color-text-faint);
+  fill: var(--color-text-faint);
 }
 
-/* Entered: solid emerald, slightly larger so filling is obvious. */
+/* Entered: solid emerald. */
 .dotFilled {
-  background: var(--color-primary);
-  transform: scale(1.1);
+  fill: var(--color-primary);
 }
 
 .dotError {
-  background: var(--color-danger);
+  fill: var(--color-danger);
 }
 
 /* Wrong-attempt flash: shake the dot row so the rejection is unmissable. */