From 75337a80a7c667317bf7cfa885d06a56ddf237d9 Mon Sep 17 00:00:00 2001
From: PeterChrz <pc@stampedepress.org>
Date: Mon, 5 Oct 2026 00:15:44 -0400
Subject: [PATCH] ui: stack devlogic/sysops totals vertically with category
 accent colors

Replace side-by-side layout with stacked rows. Devlogic gets a sky-blue
left border and label tint; Sysops gets an amber left border and label
tint. Removes the | separator since the stacked rows establish clear
visual hierarchy.
---
 resources/views/livewire/summary/index.blade.php | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/resources/views/livewire/summary/index.blade.php b/resources/views/livewire/summary/index.blade.php
index af3ea7d..383b79d 100644
--- a/resources/views/livewire/summary/index.blade.php
+++ b/resources/views/livewire/summary/index.blade.php
@@ -166,10 +166,10 @@ class="w-64"
                     </div>
                     {{-- Dual totals: Devlogic (soft/prose/psych/depthsweep) + Sysops (infra/scenario) --}}
                     @if ($session->band->devlogic_tps !== null || $session->band->sysops_tps !== null)
-                        <div class="flex flex-wrap items-center gap-x-6 gap-y-1 border-b border-zinc-200 px-4 py-2 dark:border-zinc-700">
+                        <div class="flex flex-col border-b border-zinc-200 dark:border-zinc-700">
                             @if ($session->band->devlogic_tps !== null)
-                                <div class="flex items-center gap-x-3">
-                                    <span class="text-xs font-semibold uppercase tracking-wider text-zinc-400">{{ __('Devlogic total') }}</span>
+                                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-l-2 border-sky-400 bg-sky-50/50 px-4 py-2 dark:border-sky-500 dark:bg-sky-950/20">
+                                    <span class="text-xs font-semibold uppercase tracking-wider text-sky-600 dark:text-sky-400">{{ __('Devlogic total') }}</span>
                                     <span class="text-sm">
                                         <span class="font-mono font-semibold">{{ number_format($session->band->devlogic_tps, 1) }}</span>
                                         <span class="text-xs text-zinc-400">{{ __('tok/s') }}</span>
@@ -184,12 +184,9 @@ class="w-64"
                                     </span>
                                 </div>
                             @endif
-                            @if ($session->band->devlogic_tps !== null && $session->band->sysops_tps !== null)
-                                <span class="mx-2 text-zinc-300 dark:text-zinc-600">|</span>
-                            @endif
                             @if ($session->band->sysops_tps !== null)
-                                <div class="flex items-center gap-x-3">
-                                    <span class="text-xs font-semibold uppercase tracking-wider text-zinc-400">{{ __('Sysops total') }}</span>
+                                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-l-2 border-amber-400 bg-amber-50/50 px-4 py-2 dark:border-amber-500 dark:bg-amber-950/20">
+                                    <span class="text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">{{ __('Sysops total') }}</span>
                                     <span class="text-sm">
                                         <span class="font-mono font-semibold">{{ number_format($session->band->sysops_tps, 1) }}</span>
                                         <span class="text-xs text-zinc-400">{{ __('tok/s') }}</span>