Add tests for grouped stock list behavior and improve stock view mode UI and API enhancements

src/styles/app.css

@@ -315,9 +315,63 @@ body {
 }
 
 .stock-view-switch {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.stock-view-switch-wrap {
+  min-width: min(100%, 38rem);
+}
+
+.stock-view-tab {
+  display: grid;
+  align-content: start;
+  gap: 0.2rem;
+  text-align: left;
+  border: 1px solid var(--lonc-border);
+  border-radius: 0.9rem;
+  background: rgba(255, 255, 255, 0.66);
+  color: inherit;
+  padding: 0.65rem 0.85rem;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.stock-view-tab:hover {
+  transform: translateY(-1px);
+  border-color: rgba(31, 75, 153, 0.24);
+  box-shadow: 0 8px 16px rgba(24, 42, 79, 0.08);
+}
+
+.stock-view-tab:focus-visible {
+  outline: 2px solid rgba(31, 75, 153, 0.4);
+  outline-offset: 2px;
+}
+
+.stock-view-tab-active {
+  border-color: rgba(31, 75, 153, 0.42);
+  background: rgba(31, 75, 153, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(31, 75, 153, 0.18);
+}
+
+.stock-view-tab-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+}
+
+.stock-view-tab-subtitle {
+  font-size: 0.78rem;
+  color: var(--lonc-muted);
+}
+
+@media (max-width: 767.98px) {
+  .stock-view-switch {
+    grid-template-columns: 1fr;
+  }
 }
 
 .overview-row-single-open > [class*='col-'] {
@@ -598,6 +652,28 @@ button.legend-card:focus-visible {
 
 .grouped-stock-summary-meta {
   align-items: center;
+  row-gap: 0.35rem;
+}
+
+.grouped-stock-secondary-details {
+  border-top: 1px dashed rgba(31, 39, 64, 0.14);
+  padding-top: 0.75rem;
+}
+
+.grouped-stock-secondary-toggle {
+  border-radius: 0.85rem;
+  border: 1px solid var(--lonc-border);
+  padding: 0.5rem 0.75rem;
+  background: rgba(255, 255, 255, 0.66);
+}
+
+.grouped-stock-secondary-toggle > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.grouped-stock-secondary-toggle > summary::-webkit-details-marker {
+  display: none;
 }
 
 .grouped-stock-toggle-label {