scrolling within modals using keys/buttons/swipe (needs help with infinite scrolling)

src/assets/css/main.scss

@@ -530,4 +530,73 @@ $tiers: (
   fill: var(--bs-success-border-subtle);
   stroke: var(--bs-success-border-subtle);
   color: var(--bs-success-border-subtle);
+}
+
+/* Card Modal Navigation Styles */
+
+.card-nav-prev,
+.card-nav-next {
+    transition: all 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    padding: 0.375rem 0.5rem;
+}
+
+.card-nav-prev:hover:not(:disabled),
+.card-nav-next:hover:not(:disabled) {
+    background-color: var(--bs-secondary);
+    border-color: var(--bs-secondary);
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.card-nav-prev:active:not(:disabled),
+.card-nav-next:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.card-nav-prev:disabled,
+.card-nav-next:disabled {
+    cursor: not-allowed;
+}
+
+/* Optional: Add keyboard indicator hint */
+.modal-header {
+    position: relative;
+}
+
+/* Smooth fade in/out for disabled state */
+.card-nav-prev,
+.card-nav-next {
+    will-change: opacity;
+}
+
+/* Touch-friendly sizing on mobile */
+@media (max-width: 768px) {
+    .card-nav-prev,
+    .card-nav-next {
+        min-width: 40px;
+        padding: 0.5rem;
+    }
+}
+
+/* Optional: Add a subtle animation when swiping */
+@keyframes swipe-feedback {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.95);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.card-nav-prev.swiping,
+.card-nav-next.swiping {
+    animation: swipe-feedback 0.3s ease-out;
 }