CUB-46: add Quick-Jump Button component (M3 FilledTonalIconButton)

frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss

@@ -0,0 +1,38 @@
+// ============================================================================
+// Quick-Jump Button — M3 FilledTonalIconButton
+// ============================================================================
+// Per spec: 8% state layer overlay on hover/focus using
+// --color-surface-light with opacity.
+// ============================================================================
+
+.quick-jump-button {
+  // M3 FilledTonalIconButton base: secondary container background
+  // with on-secondary-container icon color. We rely on the M3 theme
+  // token values provided by Angular Material, but override the
+  // ripple/state-layer to use the 8% overlay pattern.
+
+  // M3 state layer — 8% overlay on hover/focus
+  // Using the project's custom surface-light token with opacity
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--cc-on-surface, #E2E8F0);
+    opacity: 0;
+    transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+    pointer-events: none;
+  }
+
+  &:hover::after {
+    opacity: 0.08; // 8% state layer
+  }
+
+  &:focus-visible::after {
+    opacity: 0.08; // 8% state layer on focus
+  }
+
+  &:active::after {
+    opacity: 0.12; // 12% pressed state per M3 spec
+  }
+}