batch waiting cue: use the app's SIM silhouette for the card

Redraw the inline card-into-reader SVG after sim.svg: a rounded card
with the top-right cut corner and the 3x2 contact pad, sliding behind
the reader bar.  The viewBox grew to 72x48 and the resting position is
0, so the card is no longer clipped at the top; the insert slide is
20px.  The currentColor/Tailwind theming and the reduced-motion
fallback are unchanged.

1024 Python + 1063 frontend; simple-v472.

CHANGELOG.md

@@ -20,7 +20,8 @@ every change carries a descriptive commit message.
   title hints "Insert next card".  The speaker button next to the status mutes the chime
   and the choice is remembered (`simple_ram_batch_sound`); the chime is unlocked by the
   Start click (browser autoplay policy); reduced-motion users get the static card-above-
-  the-slot picture.
+  the-slot picture.  The card follows the app's SIM silhouette (`sim.svg`): a cut corner
+  and the contact pad, sliding behind the reader bar.
 
 ### Changed
 

frontend/index.html

@@ -1919,15 +1919,17 @@
 			<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-slate-400">
 				<div id="ram-op-spin" class="animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
 				<span id="ram-op-insert" class="hidden items-center" aria-hidden="true">
-					<svg viewBox="0 0 72 44" width="64" height="39" class="shrink-0">
+					<svg viewBox="0 0 72 48" width="64" height="43" class="shrink-0">
+						<!-- the card follows the app's SIM silhouette: a cut corner and the contact pad -->
 						<g class="ram-insert-card text-blue-600 dark:text-blue-400">
-							<rect x="27" y="1" width="18" height="26" rx="2.5" fill="currentColor"></rect>
-							<rect x="31" y="6" width="10" height="7" rx="1" fill="#fff" opacity="0.9"></rect>
-							<path d="M31 8.5h10M31 10.5h10M34.5 6v7M38.5 6v7" stroke="currentColor" stroke-width="0.6" opacity="0.55"></path>
+							<path d="M29.5 0.5 H39.5 L45 6 V24 A2.5 2.5 0 0 1 42.5 26.5 H29.5 A2.5 2.5 0 0 1 27 24 V3 A2.5 2.5 0 0 1 29.5 0.5 Z" fill="currentColor"></path>
+							<rect x="31.5" y="7.5" width="9" height="8" rx="1.2" fill="#fff" opacity="0.92"></rect>
+							<path d="M31.5 11.5h9M34.5 7.5v8M37.5 7.5v8" stroke="currentColor" stroke-width="0.55" opacity="0.6"></path>
 						</g>
-						<rect x="3" y="18" width="66" height="22" rx="4" fill="currentColor" class="text-gray-500 dark:text-slate-400"></rect>
-						<rect x="8" y="26" width="56" height="5" rx="2.5" fill="currentColor" class="text-gray-900" opacity="0.55"></rect>
-						<rect class="ram-insert-glow text-amber-500 dark:text-amber-400" x="8" y="26" width="56" height="5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.2"></rect>
+						<!-- the reader bar and its slot, drawn after the card so it slides behind -->
+						<rect x="3" y="27" width="66" height="20" rx="4" fill="currentColor" class="text-gray-500 dark:text-slate-400"></rect>
+						<rect x="8" y="33" width="56" height="5" rx="2.5" fill="currentColor" class="text-gray-900" opacity="0.55"></rect>
+						<rect class="ram-insert-glow text-amber-500 dark:text-amber-400" x="8" y="33" width="56" height="5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.2"></rect>
 					</svg>
 				</span>
 				<span id="ram-op-status" data-l10n="Working...">Working...</span>

frontend/src/style.css

@@ -10,13 +10,14 @@
    run waits.  The static transform is the reduced-motion fallback: the card
    rests above the slot. */
 .ram-insert-card {
-  transform: translateY(-14px);
+  /* the resting position is the card just above the slot (0); the insert
+     slide takes it 20px down, behind the reader front */
   animation: ram-insert 2.8s ease-in-out infinite;
 }
 @keyframes ram-insert {
-  0%, 12% { transform: translateY(-14px); }
-  45%, 55% { transform: translateY(10px); }
-  88%, 100% { transform: translateY(-14px); }
+  0%, 12% { transform: translateY(0); }
+  45%, 55% { transform: translateY(20px); }
+  88%, 100% { transform: translateY(0); }
 }
 .ram-insert-glow {
   animation: ram-insert-glow 1.4s ease-in-out infinite;

frontend/style.css

@@ -1944,21 +1944,22 @@ video {
    rests above the slot. */
 
 .ram-insert-card {
-  transform: translateY(-14px);
+  /* the resting position is the card just above the slot (0); the insert
+     slide takes it 20px down, behind the reader front */
   animation: ram-insert 2.8s ease-in-out infinite;
 }
 
 @keyframes ram-insert {
   0%, 12% {
-    transform: translateY(-14px);
+    transform: translateY(0);
   }
 
   45%, 55% {
-    transform: translateY(10px);
+    transform: translateY(20px);
   }
 
   88%, 100% {
-    transform: translateY(-14px);
+    transform: translateY(0);
   }
 }
 

frontend/sw.js

@@ -1,4 +1,4 @@
-const CACHE = 'simple-v471';
+const CACHE = 'simple-v472';
 const URLS = [
   'index.html',
   'help.html',