From 90a65f2724bae1897723f477a326a936da4afa06 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:34:50 -0400
Subject: [PATCH 01/13] Update padding class in SectionCard component

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/components/SectionCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SectionCard.tsx b/src/components/SectionCard.tsx
index 94c2cfe..228893f 100644
--- a/src/components/SectionCard.tsx
+++ b/src/components/SectionCard.tsx
@@ -27,7 +27,7 @@ export function SectionCard({
     <NotchedFrame
       as="section"
       outerClassName={`ops-section-frame ops-section-emphasis-${emphasis}`}
-      innerClassName="ops-panel ops-section-surface p-5 sm:p-6 lg:p-8"
+      innerClassName="ops-panel ops-section-surface p-[var(--ops-section-pad)]"
     >
       {emphasis === 'primary' ? (
         <span className="ops-section-primary-tick" aria-hidden="true" />

From 183c32fbf3f99b0294683c64eee2b6008614d187 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:35:20 -0400
Subject: [PATCH 02/13] Refactor DomainCard layout and update styles

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/components/DomainCard.tsx | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/DomainCard.tsx b/src/components/DomainCard.tsx
index f4bf1b0..be598f2 100644
--- a/src/components/DomainCard.tsx
+++ b/src/components/DomainCard.tsx
@@ -4,6 +4,7 @@ import { getSectorTintClassName } from '../lib/sectorVisuals';
 import { getStatusContent } from '../lib/status';
 import type { Sector, UiStatus } from '../types';
 import { SectorGlyphMark } from './icons/SectorGlyphs';
+import { StatusBadge } from './StatusBadge';
 
 interface DomainCardProps {
   sector: Sector;
@@ -158,11 +159,11 @@ export function DomainCard({
           spineClassName,
         ].join(' ')}
       >
-        <div className="flex items-start gap-3.5">
-          <span className="grid shrink-0 justify-items-center gap-2.5">
+        <div className="grid gap-4">
+          <div className="flex items-start justify-between gap-3">
             <span
               className={[
-                'ops-domain-glyph inline-flex h-9 w-9 items-center justify-center rounded-[2px] border border-ops-border-soft bg-ops-surface-base',
+                'ops-domain-glyph inline-flex h-8 w-8 items-center justify-center rounded-[2px] border border-ops-border-soft bg-ops-surface-base',
                 sectorTintClassName,
                 `ops-domain-glyph-${resolvedStatus}`,
               ].join(' ')}
@@ -172,22 +173,27 @@ export function DomainCard({
             </span>
             <span
               className={[
-                'ops-coordinate-chip clip-notched ops-notch-chip ops-tracking-grid inline-flex min-h-6 items-center px-2 text-[10px] font-semibold uppercase',
+                'ops-coordinate-chip clip-notched ops-notch-chip ops-tracking-grid inline-flex min-h-7 items-center px-2.5 text-[10px] font-semibold uppercase',
                 sectorTintClassName,
               ].join(' ')}
               aria-hidden="true"
             >
               {sectorSigil}
             </span>
-          </span>
+          </div>
           <div className="min-w-0">
-            <span className="ops-mono ops-tracking-eyebrow flex flex-wrap items-center gap-2 text-xs font-semibold text-ops-text-muted uppercase">
-              <span>{sector.shortLabel}</span>
-            </span>
-            <h3 className="ops-domain-title ops-tracking-caption mt-2 text-sm leading-5 font-semibold text-ops-text-primary uppercase">
-              {sector.label}
-            </h3>
-            <p className="ops-domain-description mt-3 text-sm leading-6 text-ops-text-secondary">
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div className="min-w-0">
+                <span className="ops-mono ops-tracking-eyebrow flex flex-wrap items-center gap-2 text-xs font-semibold text-ops-text-muted uppercase">
+                  <span>{sector.shortLabel}</span>
+                </span>
+                <h3 className="ops-domain-title ops-headline-h3 mt-1 text-ops-text-primary">
+                  {sector.label}
+                </h3>
+              </div>
+              <StatusBadge status={resolvedStatus} size="sm" />
+            </div>
+            <p className="ops-domain-description mt-4 line-clamp-3 text-sm leading-6 text-ops-text-secondary">
               {sector.description}
             </p>
           </div>

From 3df79c45ad18999f2d35f95c406d1a3a6da5e859 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:36:54 -0400
Subject: [PATCH 03/13] Refactor TodayPanel layout and add entry message

Updated TodayPanel component to improve layout and messaging.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/checkin/TodayPanel.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/features/checkin/TodayPanel.tsx b/src/features/checkin/TodayPanel.tsx
index ea307c0..e23cad6 100644
--- a/src/features/checkin/TodayPanel.tsx
+++ b/src/features/checkin/TodayPanel.tsx
@@ -70,7 +70,7 @@ function DayCompletionRollup({
   return (
     <div
       className={[
-        'ops-day-rollup ops-rollup-spine tactical-subpanel-strong mb-4 grid gap-4 p-4 sm:p-5 lg:grid-cols-[auto_minmax(0,1fr)] lg:items-center',
+        'ops-day-rollup ops-rollup-spine tactical-subpanel mb-4 grid gap-4 p-4 sm:p-5 lg:grid-cols-[auto_1px_minmax(0,1fr)] lg:items-center',
         isComplete ? 'ops-day-rollup-complete ops-complete-badge' : '',
       ].join(' ')}
     >
@@ -83,6 +83,10 @@ function DayCompletionRollup({
           {rollupText}
         </p>
       </div>
+      <span
+        className="ops-rollup-divider hidden h-full min-h-16 lg:block"
+        aria-hidden="true"
+      />
       <div className="flex flex-wrap items-center gap-3 lg:justify-end">
         <div
           className="ops-day-rollup-meter clip-notched ops-notch-chip grid min-w-[13.5rem] grid-cols-5 gap-[2px] p-1"
@@ -236,13 +240,15 @@ export function TodayPanel({
       ) : null}
 
       <div className="ops-direct-select-brief ops-flat-panel-strong mb-4 px-4 py-3">
+        {!hasEntriesForToday ? (
+          <p className="ops-eyebrow mb-1.5 text-[10px] text-ops-accent-muted">
+            Awaiting today
+          </p>
+        ) : null}
         <p
           id={directSelectHintId}
           className="text-sm leading-6 text-ops-text-secondary lg:text-base lg:leading-7"
         >
-          {!hasEntriesForToday
-            ? 'No sectors are marked for today; set one state below and the daily roll-up will start tracking live progress. '
-            : ''}
           Choose a state directly. Arrow keys move inside the control group.
           Unmarked means no status recorded for the day. Nominal and degraded
           are deliberate check-ins, not automatic carry-forward.

From c74bb9e058608d7c3f9818ae78e82a928ef20767 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:37:33 -0400
Subject: [PATCH 04/13] Implement compact mode for StatusLegend

Add compact mode to StatusLegend component for a more concise display.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/components/StatusLegend.tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/StatusLegend.tsx b/src/components/StatusLegend.tsx
index fa79a69..e10d77a 100644
--- a/src/components/StatusLegend.tsx
+++ b/src/components/StatusLegend.tsx
@@ -1,6 +1,35 @@
 import { StatusBadge } from './StatusBadge';
 
-export function StatusLegend() {
+interface StatusLegendProps {
+  compact?: boolean;
+}
+
+export function StatusLegend({ compact = false }: StatusLegendProps) {
+  if (compact) {
+    return (
+      <div
+        className="ops-status-legend-compact ops-mono ops-tracking-grid flex flex-wrap items-center justify-center gap-2 text-[10px] font-semibold text-ops-text-muted uppercase"
+        aria-label="Legend: OK nominal, DG degraded, UN unmarked"
+      >
+        <span
+          className="ops-status-legend-swatch ops-status-legend-swatch-nominal"
+          aria-hidden="true"
+        />
+        <span>OK</span>
+        <span
+          className="ops-status-legend-swatch ops-status-legend-swatch-degraded"
+          aria-hidden="true"
+        />
+        <span>DG</span>
+        <span
+          className="ops-status-legend-swatch ops-status-legend-swatch-unmarked"
+          aria-hidden="true"
+        />
+        <span>UN</span>
+      </div>
+    );
+  }
+
   return (
     <div className="ops-status-legend ops-mono ops-flat-panel ops-tracking-grid grid gap-2 px-3 py-2 text-[11px] text-ops-text-muted uppercase">
       <p className="ops-eyebrow text-[10px] leading-none text-ops-text-muted">

From 244c5a0dc274d5eb639bdb5e2e6eeecd2b3e88fc Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:38:08 -0400
Subject: [PATCH 05/13] Refactor class names for history grid components

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/history/DesktopHistoryGrid.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/features/history/DesktopHistoryGrid.tsx b/src/features/history/DesktopHistoryGrid.tsx
index d5276ef..8b6a3ee 100644
--- a/src/features/history/DesktopHistoryGrid.tsx
+++ b/src/features/history/DesktopHistoryGrid.tsx
@@ -175,9 +175,9 @@ export function DesktopHistoryGrid({ model }: DesktopHistoryGridProps) {
                               ? 'ops-history-week-boundary'
                               : '',
                             isToday
-                              ? 'ops-history-today-header bg-[var(--ops-tint-1)] text-ops-accent-muted'
+                              ? 'ops-history-today-header text-ops-accent-muted'
                               : isSelectedColumn
-                                ? 'ops-history-selected-column-header ops-history-selection-axis-header bg-[var(--ops-tint-2)] text-ops-text-primary'
+                                ? 'ops-history-selected-column-header ops-history-selection-axis-header text-ops-text-primary'
                                 : 'bg-ops-surface-1 text-ops-text-secondary',
                           ].join(' ')}
                           scope="col"
@@ -201,7 +201,7 @@ export function DesktopHistoryGrid({ model }: DesktopHistoryGridProps) {
                         className={[
                           'ops-history-row',
                           isSelectedRow && hasInteractedWithHistory
-                            ? 'ops-history-row-selected bg-[var(--ops-tint-2)]'
+                            ? 'ops-history-row-selected'
                             : '',
                         ].join(' ')}
                       >
@@ -277,12 +277,12 @@ export function DesktopHistoryGrid({ model }: DesktopHistoryGridProps) {
                                   ? 'ops-history-week-boundary'
                                   : '',
                                 isSelected && hasInteractedWithHistory
-                                  ? 'ops-history-selected-cell ops-history-selection-node bg-[var(--ops-tint-3)]'
+                                  ? 'ops-history-selected-cell ops-history-selection-node'
                                   : isToday
                                     ? 'ops-history-today-cell'
                                     : dateKey === selectedCell.dateKey &&
                                         hasInteractedWithHistory
-                                      ? 'ops-history-selected-column ops-history-selection-axis bg-[var(--ops-tint-1)]'
+                                      ? 'ops-history-selected-column ops-history-selection-axis'
                                       : isOddWeek
                                         ? 'ops-history-week-band'
                                         : '',
@@ -323,7 +323,7 @@ export function DesktopHistoryGrid({ model }: DesktopHistoryGridProps) {
           <NotchedFrame
             withShadow={false}
             outerClassName="bg-ops-border-struct"
-            innerClassName={`history-scroll-shell ops-subpanel-strong ops-flat-panel-strong max-h-[calc(100vh-3rem)] overflow-y-auto p-5 ${getStatusSpineClassName(detailBriefStatus)}`}
+            innerClassName={`history-scroll-shell ops-history-detail-shell ops-surface-overlay-card ops-flat-panel-strong max-h-[calc(100vh-3rem)] overflow-y-auto p-5 ${getStatusSpineClassName(detailBriefStatus)}`}
           >
             <HistoryDetailBrief
               dateKeys={dateKeys}

From e98f99fbeddd8d216077d6722c5451bb67db0c90 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:38:34 -0400
Subject: [PATCH 06/13] Refactor HistoryDetailBrief layout and structure

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/history/HistoryDetailBrief.tsx | 71 +++++++++++----------
 1 file changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/features/history/HistoryDetailBrief.tsx b/src/features/history/HistoryDetailBrief.tsx
index 59198f9..02b42ed 100644
--- a/src/features/history/HistoryDetailBrief.tsx
+++ b/src/features/history/HistoryDetailBrief.tsx
@@ -8,7 +8,6 @@ import {
 } from '../../lib/sectorVisuals';
 import { getStatusLabel } from '../../lib/status';
 import { type Sector, type UiStatus } from '../../types';
-import { getStatusSpineClassName } from './historyGridShared';
 import type { HistoryGridModel } from './useHistoryGridModel';
 
 interface HistoryDetailBriefProps {
@@ -52,30 +51,43 @@ export function HistoryDetailBrief({
 
   return (
     <div className="ops-history-detail-brief grid gap-4">
-      <div className="ops-history-detail-header flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="ops-history-detail-label ops-eyebrow text-ops-text-muted">
-            {title}
-          </p>
-          <div className="mt-2 flex flex-wrap items-center gap-2">
-            {hasInteractedWithHistory ? (
-              <span
-                className={[
-                  'ops-coordinate-chip clip-notched ops-notch-chip ops-tracking-grid inline-flex min-h-7 items-center px-2.5 text-[10px] font-semibold uppercase',
-                  selectedSectorTintClassName,
-                ].join(' ')}
-              >
-                {selectedSectorCallsign} /{' '}
-                {formatDayLabel(selectedCell.dateKey)}
-              </span>
-            ) : null}
-            <p className="ops-headline-h3">{selectedSector.label}</p>
+      <div className="ops-history-detail-header grid gap-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-start gap-3">
+            <span
+              className={[
+                'ops-history-sector-mark inline-flex h-9 w-9 shrink-0 items-center justify-center border border-ops-border-soft',
+                selectedSectorTintClassName,
+              ].join(' ')}
+              aria-hidden="true"
+            >
+              <SectorGlyphMark sectorId={selectedSector.id} />
+            </span>
+            <div className="min-w-0">
+              <p className="ops-history-detail-label ops-eyebrow text-ops-text-muted">
+                {title}
+              </p>
+              <div className="mt-2 flex flex-wrap items-center gap-2">
+                {hasInteractedWithHistory ? (
+                  <span
+                    className={[
+                      'ops-coordinate-chip clip-notched ops-notch-chip ops-tracking-grid inline-flex min-h-7 items-center px-2.5 text-[10px] font-semibold uppercase',
+                      selectedSectorTintClassName,
+                    ].join(' ')}
+                  >
+                    {selectedSectorCallsign} /{' '}
+                    {formatDayLabel(selectedCell.dateKey)}
+                  </span>
+                ) : null}
+                <p className="ops-headline-h3">{selectedSector.label}</p>
+              </div>
+            </div>
           </div>
-          <h3 className="ops-history-detail-date ops-numeric ops-tracking-caption mt-4 text-2xl leading-none font-semibold text-ops-text-primary uppercase">
-            {selectedDateLabel}
-          </h3>
+          <StatusBadge status={selectedStatus} size="lg" />
         </div>
-        <StatusBadge status={selectedStatus} size="lg" />
+        <h3 className="ops-history-detail-date ops-numeric ops-tracking-caption text-2xl leading-none font-semibold text-ops-text-primary uppercase">
+          {selectedDateLabel}
+        </h3>
       </div>
 
       <span className="ops-rule-hairline" aria-hidden="true" />
@@ -96,10 +108,7 @@ export function HistoryDetailBrief({
             Selected day
           </span>
         </div>
-        <div
-          className="ops-history-brief-spark ops-telemetry-spark mt-3"
-          aria-hidden="true"
-        >
+        <div className="ops-history-momentum-strip mt-3" aria-hidden="true">
           {sectorMomentum.map(({ dateKey, status }) => (
             <span
               key={`${selectedSector.id}:${dateKey}`}
@@ -119,7 +128,7 @@ export function HistoryDetailBrief({
         <p className="ops-eyebrow text-[10px] text-ops-text-muted">
           Same-day neighbors
         </p>
-        <div role="list" className="mt-2 grid gap-2">
+        <div role="list" className="ops-history-neighbor-list mt-2">
           {selectedDayStatuses.map(({ sector, status }) => {
             const isSelectedSector = sector.id === selectedSector.id;
 
@@ -129,10 +138,8 @@ export function HistoryDetailBrief({
                 role="listitem"
                 aria-label={`${sector.label}: ${getStatusLabel(status)} on ${selectedDateLabel}.`}
                 className={[
-                  'ops-history-neighbor-row tactical-chip-panel flex items-center justify-between gap-3 px-3 py-2.5',
-                  isSelectedSector
-                    ? 'ops-history-neighbor-current'
-                    : getStatusSpineClassName(status),
+                  'ops-history-neighbor-row flex items-center justify-between gap-3 px-3 py-2.5',
+                  isSelectedSector ? 'ops-history-neighbor-current' : '',
                 ].join(' ')}
               >
                 <div className="flex min-w-0 items-center gap-2">

From 192f9f8bba0d5c022df4711f6dd5e05d247f8b92 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:38:59 -0400
Subject: [PATCH 07/13] Refactor MobileHistoryGrid layout and remove
 StatusLegend

Updated MobileHistoryGrid component to enhance layout and remove unnecessary elements.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/history/MobileHistoryGrid.tsx | 38 +++++-----------------
 1 file changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/features/history/MobileHistoryGrid.tsx b/src/features/history/MobileHistoryGrid.tsx
index b7d8c33..f3e25b9 100644
--- a/src/features/history/MobileHistoryGrid.tsx
+++ b/src/features/history/MobileHistoryGrid.tsx
@@ -114,7 +114,7 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
         <NotchedFrame
           withShadow={false}
           outerClassName="bg-ops-border-struct"
-          innerClassName="ops-subpanel p-3"
+          innerClassName="ops-subpanel ops-mobile-week-nav p-3"
         >
           <nav
             aria-label="Week navigation"
@@ -150,6 +150,9 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
                   {visibleWeekRange}
                 </span>
               </h3>
+              <div className="mt-2 flex justify-center">
+                <StatusLegend compact />
+              </div>
             </div>
             <button
               type="button"
@@ -163,9 +166,6 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
               <WeekChevronIcon direction="next" />
             </button>
           </nav>
-          <div className="mt-3 border-t border-ops-border-soft pt-3">
-            <StatusLegend />
-          </div>
         </NotchedFrame>
       </div>
 
@@ -231,8 +231,8 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
                   'p-3',
                 ].join(' ')}
               >
-                <div className="mb-3 flex items-center justify-between gap-3">
-                  <div>
+                <div className="mb-3 flex items-center justify-between gap-3 border-b border-ops-border-soft pb-3">
+                  <div className="min-w-0">
                     <p
                       id={weekHeadingId}
                       className="ops-tracking-grid text-xs font-semibold uppercase text-ops-text-secondary"
@@ -257,8 +257,8 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
                 <div
                   className={`grid gap-2 ${getMobileWeekGridColumnsClass(weekGroup.length)}`}
                 >
-                  <div className="ops-tracking-grid sticky left-0 z-10 bg-ops-surface-2 px-2 py-2 text-left text-[11px] font-semibold uppercase text-ops-text-secondary">
-                    Sector
+                  <div className="sticky left-0 z-10 min-h-14 border-b border-ops-border-soft bg-ops-surface-2">
+                    <span className="sr-only">Sector</span>
                   </div>
                   {weekGroup.map((dateKey) => {
                     const isToday = dateKey === todayKey;
@@ -350,28 +350,6 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
             );
           })}
         </div>
-
-        <div
-          className="mt-3 grid justify-items-center gap-2"
-          aria-hidden="true"
-        >
-          <p className="ops-tracking-grid text-[10px] font-semibold text-ops-text-muted uppercase">
-            Week {visibleWeekIndex + 1} of {weekGroups.length}
-          </p>
-          <div className="flex items-center justify-center gap-2">
-            {weekGroups.map((weekGroup, weekIndex) => (
-              <span
-                key={weekGroup[0] ?? `week-${weekIndex}`}
-                className={[
-                  'ops-mobile-week-pip clip-notched ops-notch-chip border',
-                  visibleWeekIndex === weekIndex
-                    ? 'border-ops-accent bg-ops-accent'
-                    : 'border-ops-border-soft bg-transparent',
-                ].join(' ')}
-              />
-            ))}
-          </div>
-        </div>
       </div>
 
       <NotchedFrame

From 6cd02da0b0d9fef554d61e7563bb655d78e86069 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:39:36 -0400
Subject: [PATCH 08/13] Update button classes and clean up ExportBackupSection

Refactor button classes and remove redundant text.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/export/ExportBackupSection.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/features/export/ExportBackupSection.tsx b/src/features/export/ExportBackupSection.tsx
index a86b253..6e1cf71 100644
--- a/src/features/export/ExportBackupSection.tsx
+++ b/src/features/export/ExportBackupSection.tsx
@@ -59,7 +59,7 @@ export function ExportBackupSection({
           </div>
 
           <div className="flex flex-col gap-2 sm:min-w-[13rem]">
-            <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
+            <div className="flex flex-col gap-2">
               <button
                 type="button"
                 onClick={() => void onJsonExport()}
@@ -70,14 +70,12 @@ export function ExportBackupSection({
               <button
                 type="button"
                 onClick={() => void onCsvExport()}
-                className={`${actionButtonClasses} ops-action-button-subtle`}
+                className="ops-export-register-link ops-focus-ring-chip"
+                aria-label="Export CSV"
               >
                 Export CSV
               </button>
             </div>
-            <p className="ops-tracking-grid text-[10px] leading-4 text-ops-text-muted uppercase">
-              Also available: CSV
-            </p>
           </div>
         </div>
 

From ca504ef5e397c903ec3a791127c53121c09bd834 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:40:05 -0400
Subject: [PATCH 09/13] Refactor export panel styles and class names

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/export/exportPanelShared.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/features/export/exportPanelShared.tsx b/src/features/export/exportPanelShared.tsx
index 3bc9bd9..57d6401 100644
--- a/src/features/export/exportPanelShared.tsx
+++ b/src/features/export/exportPanelShared.tsx
@@ -31,15 +31,13 @@ export function AccordionSection({
       className="ops-export-accordion"
       data-section={sectionKey}
       data-open={isOpen ? 'true' : 'false'}
-      outerClassName={
-        isOpen ? 'bg-ops-panel-border-strong' : 'bg-ops-border-struct'
-      }
+      outerClassName="bg-ops-border-struct"
       innerClassName={isOpen ? 'ops-subpanel-strong' : 'ops-subpanel'}
     >
       {isOpen ? (
         <div
           aria-hidden="true"
-          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-ops-accent-border"
+          className="ops-export-accordion-open-tick pointer-events-none absolute inset-x-0 top-0 h-px"
         />
       ) : null}
       <h3>
@@ -52,7 +50,7 @@ export function AccordionSection({
           className={[
             `ops-export-accordion-trigger ops-export-accordion-trigger-${sectionKey} ops-focus-ring-inset flex min-h-[60px] w-full items-stretch gap-3 px-4 py-4 text-left transition-[background-color,border-color,box-shadow,transform]`,
             isOpen
-              ? 'ops-export-accordion-trigger-open bg-[var(--ops-tint-1)]'
+              ? 'ops-export-accordion-trigger-open'
               : 'ops-export-accordion-trigger-collapsed',
           ].join(' ')}
         >

From 062dfd40079fe7fc6612499173fa1d401be8f4c8 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:40:41 -0400
Subject: [PATCH 10/13] Refactor footer layout in App component

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/App.tsx | 55 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ea63077..335c7fd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -363,34 +363,37 @@ function App() {
           </ErrorBoundary>
         </div>
 
-        <NotchedFrame
-          emphasis="quiet"
-          notch="shell"
-          innerClassName="ops-subpanel px-4 py-4 text-sm leading-6 text-ops-text-secondary"
-        >
-          <footer>
-            <div className="pt-4">
-              <span
-                className="ops-rule-hairline mb-4 max-w-3xl"
-                aria-hidden="true"
-              />
-              <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)] lg:items-start">
-                <div className="lg:max-w-2xl">
-                  <p className="ops-eyebrow-strong text-ops-text-primary">
-                    Boundary
-                  </p>
-                  <p className="mt-2">
-                    OpsNormal is a personal status tracking tool. It is not a
-                    medical device and does not diagnose, treat, cure, or
-                    prevent any disease or condition. It does not provide
-                    medical or psychological advice.
-                  </p>
+        <div className="ops-footer-boundary">
+          <span className="ops-rule-hairline mb-4" aria-hidden="true" />
+          <NotchedFrame
+            emphasis="quiet"
+            notch="shell"
+            innerClassName="ops-subpanel px-4 py-4 text-sm leading-6 text-ops-text-secondary"
+          >
+            <footer>
+              <div className="pt-4">
+                <span
+                  className="ops-rule-hairline mb-4 max-w-3xl"
+                  aria-hidden="true"
+                />
+                <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)] lg:items-start">
+                  <div className="lg:max-w-2xl">
+                    <p className="ops-eyebrow-strong text-ops-text-primary">
+                      Boundary
+                    </p>
+                    <p className="mt-2 text-sm leading-6 text-ops-text-secondary">
+                      OpsNormal is a personal status tracking tool. It is not a
+                      medical device and does not diagnose, treat, cure, or
+                      prevent any disease or condition. It does not provide
+                      medical or psychological advice.
+                    </p>
+                  </div>
+                  <FooterProvenance />
                 </div>
-                <FooterProvenance />
               </div>
-            </div>
-          </footer>
-        </NotchedFrame>
+            </footer>
+          </NotchedFrame>
+        </div>
       </main>
     </div>
   );

From eabf3fde7fbde969416fd7a80be30ff16f5d6814 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:41:25 -0400
Subject: [PATCH 11/13] Update FooterProvenance layout for responsiveness

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/components/FooterProvenance.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FooterProvenance.tsx b/src/components/FooterProvenance.tsx
index 56fa37e..413ce7b 100644
--- a/src/components/FooterProvenance.tsx
+++ b/src/components/FooterProvenance.tsx
@@ -5,13 +5,13 @@ const REPO_URL = 'https://github.com/bradsaucier/opsnormal';
 export function FooterProvenance() {
   return (
     <div
-      className="grid min-w-0 gap-2 sm:w-full sm:gap-3"
+      className="grid min-w-0 gap-2 sm:w-full sm:gap-3 lg:justify-items-end lg:text-right"
       data-testid="footer-provenance"
     >
       <p className="ops-eyebrow-strong font-semibold text-ops-text-primary">
         Provenance
       </p>
-      <div className="flex flex-wrap items-center gap-3 sm:gap-4">
+      <div className="flex flex-wrap items-center gap-3 sm:gap-4 lg:justify-end">
         <dl className="ops-provenance-facts">
           <div>
             <dt>Build</dt>

From 422f24d7f6fa63e0bcc55e5c698982c6019b008b Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:42:12 -0400
Subject: [PATCH 12/13] Enhance CSS styles with new variables and adjustments

Added new CSS variables for layout and styling adjustments. Updated several existing styles to improve visual consistency and responsiveness.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/styles/index.css | 426 ++++++++++++++++++++++++++-----------------
 1 file changed, 254 insertions(+), 172 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index 2e7c08f..f1f243a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -160,6 +160,13 @@
   --ops-chip-pad-y: 0.75rem;
   --ops-chip-pad-y-tight: 0.625rem;
   --ops-chip-gap: 0.625rem;
+  --ops-section-pad: clamp(1.25rem, 2.5vw, 2rem);
+  --ops-rail-baseline-color: color-mix(
+    in srgb,
+    var(--color-ops-accent-deep) 64%,
+    transparent
+  );
+  --ops-rail-baseline: 1px solid var(--ops-rail-baseline-color);
   --ops-text-on-sky: #e0f2fe;
   --ops-text-on-amber: #fef3c7;
   --ops-text-on-orange: #ffedd5;
@@ -222,15 +229,15 @@
   );
   --ops-history-selection-bg: color-mix(
     in srgb,
-    var(--color-ops-accent) 10%,
+    var(--color-ops-accent) 6%,
     transparent
   );
   --ops-history-selection-bg-strong: color-mix(
     in srgb,
-    var(--color-ops-accent) 15%,
+    var(--color-ops-accent) 7%,
     var(--color-ops-surface-2)
   );
-  --ops-history-selection-border: rgba(183, 247, 218, 0.34);
+  --ops-history-selection-border: rgba(183, 247, 218, 0.28);
   --ops-radio-chip-status-border: rgba(255, 255, 255, 0.18);
   --ops-frame-calibration: rgba(183, 247, 218, 0.34);
   --ops-frame-calibration-muted: rgba(255, 255, 255, 0.085);
@@ -493,7 +500,7 @@ h3,
   height: 1px;
   background: linear-gradient(
     90deg,
-    rgba(110, 231, 183, 0.34),
+    var(--ops-rail-baseline-color),
     var(--color-ops-border-soft) 34%,
     transparent
   );
@@ -569,7 +576,7 @@ h3,
       )
       right 2px top / 1px 100% no-repeat;
   box-shadow:
-    8px 0 22px rgba(110, 231, 183, 0.18),
+    4px 0 16px rgba(110, 231, 183, 0.1),
     0 0 1px rgba(255, 255, 255, 0.2);
 }
 
@@ -746,7 +753,7 @@ h3,
   height: 1px;
   background: linear-gradient(
     90deg,
-    rgba(110, 231, 183, 0.28),
+    var(--ops-rail-baseline-color),
     var(--color-ops-panel-border-strong) 42%,
     transparent
   );
@@ -771,7 +778,6 @@ h3,
     var(--color-ops-accent-deep)
   );
   opacity: 0.72;
-  box-shadow: 0 0 14px rgba(110, 231, 183, 0.14);
 }
 
 .ops-section-title {
@@ -816,24 +822,24 @@ h3,
 .ops-section-emphasis-primary {
   --ops-section-frame-background: linear-gradient(
     180deg,
-    rgba(110, 231, 183, 0.18),
+    rgba(110, 231, 183, 0.1),
     rgba(255, 255, 255, 0.02)
   );
   --ops-section-surface-background:
     linear-gradient(
       180deg,
-      rgba(110, 231, 183, 0.06),
-      rgba(110, 231, 183, 0) 12%
+      rgba(110, 231, 183, 0.035),
+      rgba(110, 231, 183, 0) 10%
     ),
     linear-gradient(
       180deg,
-      rgba(255, 255, 255, 0.04),
-      rgba(183, 247, 218, 0.04) 16%,
-      rgba(255, 255, 255, 0) 30%
+      rgba(255, 255, 255, 0.025),
+      rgba(183, 247, 218, 0.018) 16%,
+      rgba(255, 255, 255, 0) 28%
     ),
     var(--color-ops-surface-1);
   --ops-section-surface-shadow:
-    inset 0 1px 0 rgba(110, 231, 183, 0.28),
+    inset 0 1px 0 var(--ops-rail-baseline-color),
     inset 0 0 0 1px var(--color-ops-border-soft),
     inset 0 -30px 54px rgba(4, 8, 7, 0.22), var(--ops-elevation-1);
 }
@@ -845,9 +851,8 @@ h3,
   z-index: 1;
   width: clamp(2.5rem, 6vw, 5rem);
   height: 2px;
-  background: var(--color-ops-accent-deep);
+  background: var(--ops-rail-baseline-color);
   opacity: 0.72;
-  box-shadow: 0 0 14px rgba(46, 143, 106, 0.2);
   pointer-events: none;
 }
 
@@ -1062,12 +1067,14 @@ h3,
 }
 
 .ops-grid-unmarked {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 40%),
-    var(--ops-status-unmarked-bg);
+  background: color-mix(
+    in srgb,
+    var(--color-ops-surface-base) 82%,
+    transparent
+  );
   color: var(--ops-status-unmarked-text);
   box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
+    inset 0 0 0 1px var(--color-ops-panel-border),
     inset 0 -1px 0 rgba(0, 0, 0, 0.24);
 }
 
@@ -1099,7 +1106,6 @@ h3,
     inset var(--ops-sector-spine-width) 0 0 var(--ops-sector-spine-color),
     inset 0 1px 0 rgba(255, 255, 255, 0.08),
     inset 0 0 0 1px var(--color-ops-panel-border-strong),
-    inset 0 -32px 56px rgba(4, 8, 7, 0.2),
     0 0 0 1px rgba(255, 255, 255, 0.02);
   transition:
     box-shadow var(--ops-motion-fast),
@@ -1168,9 +1174,7 @@ h3,
 }
 
 .ops-domain-card {
-  box-shadow:
-    var(--ops-elevation-1),
-    0 0 0 1px rgba(255, 255, 255, 0.025);
+  box-shadow: var(--ops-elevation-1);
   transform: translateZ(0);
   transition:
     box-shadow var(--ops-motion-fast),
@@ -1180,8 +1184,8 @@ h3,
 .ops-domain-card-inner {
   --ops-domain-card-status-rail: var(--ops-status-unmarked-border);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 24%),
-    linear-gradient(0deg, rgba(4, 8, 7, 0.28), transparent 38%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 22%),
+    linear-gradient(0deg, rgba(4, 8, 7, 0.18), transparent 36%),
     radial-gradient(
       ellipse 85% 58% at 50% 0,
       var(--ops-sector-tint, rgba(110, 231, 183, 0.05)),
@@ -1205,26 +1209,24 @@ h3,
     transparent
   );
   opacity: 0.58;
-  box-shadow: 0 0 14px
-    color-mix(in srgb, var(--ops-domain-card-status-rail) 34%, transparent);
   pointer-events: none;
 }
 
 .ops-domain-card[data-status='nominal'] .ops-domain-card-inner {
   --ops-domain-card-status-rail: var(--ops-status-nominal-border);
   background:
-    linear-gradient(180deg, rgba(110, 231, 183, 0.08), transparent 24%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.055), transparent 48%),
-    linear-gradient(0deg, rgba(4, 8, 7, 0.28), transparent 38%),
+    linear-gradient(180deg, rgba(110, 231, 183, 0.045), transparent 24%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.035), transparent 48%),
+    linear-gradient(0deg, rgba(4, 8, 7, 0.18), transparent 38%),
     var(--color-ops-surface-raised);
 }
 
 .ops-domain-card[data-status='degraded'] .ops-domain-card-inner {
   --ops-domain-card-status-rail: var(--ops-status-degraded-border);
   background:
-    linear-gradient(180deg, rgba(245, 158, 11, 0.08), transparent 24%),
-    linear-gradient(90deg, rgba(245, 158, 11, 0.045), transparent 48%),
-    linear-gradient(0deg, rgba(4, 8, 7, 0.28), transparent 38%),
+    linear-gradient(180deg, rgba(245, 158, 11, 0.045), transparent 24%),
+    linear-gradient(90deg, rgba(245, 158, 11, 0.032), transparent 48%),
+    linear-gradient(0deg, rgba(4, 8, 7, 0.18), transparent 38%),
     var(--color-ops-surface-raised);
 }
 
@@ -1237,8 +1239,9 @@ h3,
 }
 
 .ops-domain-title {
-  font-family: var(--font-mono);
-  letter-spacing: var(--ops-tracking-title);
+  font-family: var(--font-sans);
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ops-domain-description {
@@ -1348,12 +1351,12 @@ h3,
 .ops-surface-hero {
   position: relative;
   background:
-    linear-gradient(90deg, rgba(110, 231, 183, 0.07), transparent 32%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.045), transparent 28%),
     linear-gradient(
       180deg,
-      rgba(110, 231, 183, 0.11),
-      rgba(255, 255, 255, 0.025) 34%,
-      rgba(4, 8, 7, 0.18)
+      rgba(255, 255, 255, 0.025),
+      rgba(255, 255, 255, 0.01) 28%,
+      rgba(4, 8, 7, 0.12)
     ),
     var(--color-ops-surface-1);
 }
@@ -1369,22 +1372,14 @@ h3,
   inset: 0;
   z-index: 0;
   pointer-events: none;
-  background:
-    linear-gradient(
-        90deg,
-        transparent 0,
-        transparent calc(100% - 1px),
-        rgba(183, 247, 218, 0.09) calc(100% - 1px)
-      )
-      left top / 5.25rem 100% repeat-x,
-    linear-gradient(
-        180deg,
-        transparent 0,
-        transparent calc(100% - 1px),
-        rgba(255, 255, 255, 0.045) calc(100% - 1px)
-      )
-      left top / 100% 4.5rem repeat-y;
-  opacity: 0.36;
+  background: linear-gradient(
+      90deg,
+      transparent 0,
+      transparent calc(100% - 1px),
+      rgba(183, 247, 218, 0.08) calc(100% - 1px)
+    )
+    left top / 5.25rem 100% repeat-x;
+  opacity: 0.18;
 }
 
 .ops-surface-horizon-card {
@@ -1623,8 +1618,8 @@ h3,
   background:
     linear-gradient(90deg, var(--ops-frame-calibration-muted), transparent 24%)
       left top / 100% 1px no-repeat,
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.045), transparent 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.024), transparent 42%),
     rgba(10, 15, 13, 0.16);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.07),
@@ -1637,12 +1632,14 @@ h3,
 
 .ops-telemetry-chip-primary {
   background:
-    linear-gradient(90deg, rgba(183, 247, 218, 0.28), transparent 32%) left
+    linear-gradient(90deg, rgba(183, 247, 218, 0.22), transparent 32%) left
       top / 100% 1px no-repeat,
-    linear-gradient(180deg, rgba(110, 231, 183, 0.12), transparent 54%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.075), transparent 46%),
+    linear-gradient(180deg, rgba(110, 231, 183, 0.065), transparent 54%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.042), transparent 46%),
     rgba(10, 15, 13, 0.18);
   box-shadow:
+    inset 2px 0 0 var(--ops-rail-baseline-color),
+    inset 0 -1px 0 var(--ops-rail-baseline-color),
     inset 0 1px 0 rgba(183, 247, 218, 0.16),
     inset 0 -1px 0 rgba(0, 0, 0, 0.34);
 }
@@ -1772,14 +1769,15 @@ h3,
 
 .ops-telemetry-chip-attention {
   background:
-    linear-gradient(90deg, rgba(245, 158, 11, 0.22), transparent 32%) left top /
+    linear-gradient(90deg, rgba(245, 158, 11, 0.12), transparent 32%) left top /
       100% 1px no-repeat,
-    linear-gradient(180deg, rgba(245, 158, 11, 0.055), transparent 44%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 44%),
     rgba(10, 15, 13, 0.18);
   box-shadow:
-    inset 3px 0 0 var(--ops-status-degraded-border),
+    inset 2px 0 0 var(--ops-status-degraded-border),
+    inset 0 -1px 0 var(--ops-status-degraded-border),
     inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    inset 0 0 0 1px rgba(245, 158, 11, 0.16);
+    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
 }
 
 .ops-telemetry-chip-attention-value {
@@ -1808,6 +1806,7 @@ h3,
   align-items: end;
   gap: 2px;
   border: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: var(--ops-rail-baseline);
   border-top-color: rgba(255, 255, 255, 0.05);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 38%),
@@ -1816,6 +1815,18 @@ h3,
   padding: 2px;
 }
 
+.ops-telemetry-rail {
+  display: block;
+  height: 16px;
+  margin-top: var(--ops-chip-gap);
+  border-bottom: var(--ops-rail-baseline);
+  background:
+    linear-gradient(90deg, var(--ops-frame-calibration-muted), transparent 36%)
+      left bottom / 100% 1px no-repeat,
+    linear-gradient(180deg, transparent 52%, rgba(255, 255, 255, 0.035) 52%)
+      left bottom / 100% 2px no-repeat;
+}
+
 .ops-telemetry-spark-segment {
   position: relative;
   display: block;
@@ -1977,35 +1988,29 @@ h3,
 
 .ops-radio-chip[aria-checked='true'] {
   box-shadow:
-    0 0 0 1px
-      color-mix(in srgb, var(--ops-radio-chip-status-border) 88%, white 12%),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
-    inset 0 1px 0 rgba(255, 255, 255, 0.14),
-    inset 0 -2px 0 rgba(0, 0, 0, 0.42),
+    inset 0 -2px 0 var(--ops-radio-chip-status-border),
+    inset 0 0 0 1px
+      color-mix(in srgb, var(--ops-radio-chip-status-border) 54%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
     var(--ops-focus-ring-base-shadow);
 }
 
 .ops-radio-chip[aria-checked='true']::before {
   content: '';
   position: absolute;
-  top: 4px;
-  left: 50%;
-  width: 1.5rem;
-  height: 2px;
+  right: 0.45rem;
+  bottom: 0.32rem;
+  left: 0.45rem;
+  height: 1px;
   background: var(--ops-radio-chip-status-border);
-  box-shadow:
-    0 0 0 1px rgba(10, 15, 13, 0.38),
-    0 0 8px
-      color-mix(in srgb, var(--ops-radio-chip-status-border) 60%, transparent);
-  transform: translateX(-50%);
 }
 
 .ops-radio-chip.ops-status-nominal[aria-checked='true'] {
   --ops-radio-chip-status-border: var(--ops-status-nominal-border);
   border-color: var(--ops-status-nominal-border);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%),
-    rgba(110, 231, 183, 0.28);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 38%),
+    rgba(110, 231, 183, 0.1);
   color: #dcffef;
 }
 
@@ -2013,8 +2018,8 @@ h3,
   --ops-radio-chip-status-border: var(--ops-status-degraded-border);
   border-color: var(--ops-status-degraded-border);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%),
-    rgba(245, 158, 11, 0.28);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 38%),
+    rgba(245, 158, 11, 0.1);
   color: #fff1c2;
 }
 
@@ -2022,8 +2027,8 @@ h3,
   --ops-radio-chip-status-border: rgba(255, 255, 255, 0.28);
   border-color: rgba(255, 255, 255, 0.28);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%),
-    rgba(64, 76, 70, 0.64);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%),
+    rgba(64, 76, 70, 0.34);
   color: #d5ddd9;
 }
 
@@ -2037,19 +2042,18 @@ h3,
 
 .ops-history-row-selected > th {
   background:
-    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 58%),
+    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 48%),
     var(--color-ops-surface-3);
 }
 
 .ops-history-selected-row-header {
   background:
-    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 68%),
-    var(--color-ops-surface-3);
+    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 54%),
+    var(--color-ops-surface-2);
   box-shadow:
-    inset 5px 0 0 var(--ops-sector-border, var(--ops-today-rail)),
+    inset 2px 0 0 var(--ops-sector-border, var(--ops-today-rail)),
     inset 0 -1px 0 var(--color-ops-border-soft),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    inset 0 0 0 1px var(--ops-history-selection-border);
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .ops-history-selection-row-header {
@@ -2073,72 +2077,70 @@ h3,
 }
 
 .ops-history-today-header {
-  background:
-    linear-gradient(180deg, rgba(110, 231, 183, 0.105), transparent 62%),
-    var(--color-ops-surface-2);
+  position: relative;
+  background: var(--color-ops-surface-1);
   box-shadow:
-    inset 0 3px 0 var(--ops-status-nominal-border),
     inset 1px 0 0 var(--ops-today-rail),
     inset -1px 0 0 var(--ops-today-rail),
-    inset 0 -1px 0 rgba(110, 231, 183, 0.2);
+    inset 0 -1px 0 var(--color-ops-panel-border-strong);
+}
+
+.ops-history-today-header::after {
+  content: '';
+  position: absolute;
+  right: 0.65rem;
+  bottom: 0.18rem;
+  left: 0.65rem;
+  height: 2px;
+  background: var(--ops-rail-baseline-color);
 }
 
 .ops-history-today-cell {
-  background:
-    linear-gradient(90deg, rgba(110, 231, 183, 0.07), transparent 48%),
-    color-mix(in srgb, var(--color-ops-surface-2) 52%, transparent);
+  background: color-mix(in srgb, var(--color-ops-surface-2) 18%, transparent);
   box-shadow:
     inset 1px 0 0 var(--ops-today-rail),
-    inset -1px 0 0 rgba(110, 231, 183, 0.26),
-    inset 0 0 0 1px rgba(110, 231, 183, 0.08);
+    inset -1px 0 0 rgba(110, 231, 183, 0.18);
 }
 
 .ops-history-week-boundary {
   padding-left: 0.5rem;
-  box-shadow:
-    inset 2px 0 0
-      color-mix(in srgb, var(--color-ops-accent-deep) 68%, transparent),
-    inset 4px 0 0 rgba(255, 255, 255, 0.055);
+  box-shadow: inset 1px 0 0 var(--ops-rail-baseline-color);
 }
 
 .ops-history-week-band {
-  background: color-mix(in srgb, var(--color-ops-surface-2) 70%, transparent);
+  background: rgba(255, 255, 255, 0.01);
 }
 
 .ops-history-today-header.ops-history-week-boundary {
   box-shadow:
     inset 1px 0 0 var(--ops-today-rail),
     inset -1px 0 0 var(--ops-today-rail),
-    inset 0 3px 0 var(--ops-status-nominal-border),
-    inset 0 -1px 0 rgba(110, 231, 183, 0.2);
+    inset 0 -1px 0 var(--color-ops-panel-border-strong);
 }
 
 .ops-history-today-cell.ops-history-week-boundary {
   box-shadow:
     inset 1px 0 0 var(--ops-today-rail),
-    inset -1px 0 0 rgba(110, 231, 183, 0.26),
-    inset 0 0 0 1px rgba(110, 231, 183, 0.08);
+    inset -1px 0 0 rgba(110, 231, 183, 0.18);
 }
 
 .ops-history-selected-column-header {
   background:
-    linear-gradient(180deg, var(--ops-history-selection-bg), transparent 70%),
+    linear-gradient(180deg, var(--ops-history-selection-bg), transparent 62%),
     var(--ops-history-selection-bg-strong);
   box-shadow:
-    inset 0 4px 0 var(--ops-history-selection-border),
+    inset 0 2px 0 var(--ops-history-selection-border),
     inset 1px 0 0 var(--ops-history-selection-border),
-    inset -1px 0 0 rgba(183, 247, 218, 0.18),
     inset 0 -1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .ops-history-selected-column {
   background:
-    linear-gradient(90deg, rgba(110, 231, 183, 0.04), transparent 58%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.018), transparent 58%),
     var(--ops-history-selection-bg);
   box-shadow:
     inset 1px 0 0 var(--ops-history-selection-border),
-    inset -1px 0 0 rgba(183, 247, 218, 0.14),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
+    inset -1px 0 0 rgba(183, 247, 218, 0.09);
 }
 
 .ops-history-selection-axis-header {
@@ -2151,7 +2153,7 @@ h3,
 
 .ops-history-selection-node {
   background:
-    linear-gradient(180deg, rgba(183, 247, 218, 0.12), transparent 72%),
+    linear-gradient(180deg, rgba(183, 247, 218, 0.08), transparent 72%),
     var(--ops-history-selection-bg-strong);
 }
 
@@ -2166,8 +2168,8 @@ h3,
 
 .ops-mobile-week-status {
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.065), transparent 38%),
-    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 52%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%),
+    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 42%),
     var(--color-ops-surface-overlay);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.09),
@@ -2175,6 +2177,10 @@ h3,
     inset 0 -12px 24px rgba(4, 8, 7, 0.18);
 }
 
+.ops-mobile-week-nav {
+  border-bottom: var(--ops-rail-baseline);
+}
+
 .ops-mobile-week-state-chip {
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%),
@@ -2211,7 +2217,7 @@ h3,
     transparent
   );
   box-shadow:
-    inset 0 3px 0 var(--ops-status-nominal-border),
+    inset 0 2px 0 var(--ops-rail-baseline-color),
     inset 0 0 0 1px rgba(110, 231, 183, 0.2),
     inset 0 -1px 0 rgba(0, 0, 0, 0.3);
 }
@@ -2219,12 +2225,12 @@ h3,
 .ops-mobile-day-button[aria-pressed='true'] {
   border-color: var(--ops-history-selection-border);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%),
-    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 72%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 40%),
+    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 58%),
     var(--ops-history-selection-bg-strong);
   box-shadow:
     inset 0 0 0 1px var(--ops-history-selection-border),
-    inset 0 3px 0 rgba(183, 247, 218, 0.58),
+    inset 0 2px 0 var(--ops-rail-baseline-color),
     inset 0 1px 0 rgba(255, 255, 255, 0.12),
     inset 0 -1px 0 rgba(2, 44, 28, 0.36);
 }
@@ -2252,16 +2258,25 @@ h3,
   position: relative;
   overflow: hidden;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 30%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.1), transparent 36%),
-    linear-gradient(0deg, rgba(4, 8, 7, 0.22), transparent 42%),
-    var(--color-ops-surface-raised);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.055), transparent 34%),
+    var(--color-ops-surface-overlay);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.07),
     inset 0 0 0 1px var(--color-ops-panel-border-strong),
     inset 0 -1px 0 rgba(0, 0, 0, 0.36);
 }
 
+.ops-rollup-divider {
+  background: linear-gradient(
+    180deg,
+    transparent,
+    var(--ops-rail-baseline-color) 18%,
+    var(--color-ops-panel-border-strong) 82%,
+    transparent
+  );
+}
+
 .ops-rollup-count-plate {
   min-height: var(--ops-chip-min-h-lg);
   border: 1px solid var(--color-ops-panel-border-strong);
@@ -2271,8 +2286,7 @@ h3,
   padding: var(--ops-chip-pad-y) var(--ops-chip-pad-x);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.07),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
-    var(--ops-elevation-1);
+    inset 0 -1px 0 rgba(0, 0, 0, 0.34);
 }
 
 .ops-day-rollup-meter {
@@ -2289,7 +2303,7 @@ h3,
 .ops-rollup-pip-cell {
   position: relative;
   overflow: hidden;
-  min-height: var(--ops-chip-min-h);
+  min-height: var(--ops-chip-min-h-sm);
   color: var(--color-ops-text-secondary);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.075),
@@ -2400,6 +2414,13 @@ h3,
   padding-bottom: var(--ops-chip-pad-y-tight);
 }
 
+.ops-history-detail-shell {
+  border: 1px solid var(--color-ops-panel-border-strong);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%),
+    var(--color-ops-surface-overlay);
+}
+
 .ops-history-detail-date {
   text-shadow:
     0 0 18px rgba(110, 231, 183, 0.12),
@@ -2413,13 +2434,19 @@ h3,
 .ops-history-momentum-panel {
   border-color: var(--color-ops-panel-border-strong);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 36%),
-    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 52%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36%),
+    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 42%),
     rgba(10, 15, 13, 0.24);
 }
 
-.ops-history-brief-spark {
+.ops-history-brief-spark,
+.ops-history-momentum-strip {
+  display: flex;
+  align-items: end;
+  gap: 2px;
   height: 18px;
+  border-bottom: var(--ops-rail-baseline);
+  padding-bottom: 2px;
 }
 
 .ops-history-brief-spark-selected::after {
@@ -2434,21 +2461,27 @@ h3,
 }
 
 .ops-history-neighbor-row {
-  min-height: 3.25rem;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%),
-    var(--color-ops-surface-base);
+  min-height: 3rem;
+  border-top: 1px solid var(--color-ops-panel-border);
+  background: var(--color-ops-surface-base);
 }
 
 .ops-history-neighbor-current {
   color: var(--color-ops-text-secondary);
   background:
-    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 62%),
-    var(--color-ops-surface-raised);
-  box-shadow:
-    inset 3px 0 0 var(--ops-history-selection-border),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05),
-    inset 0 0 0 1px var(--color-ops-panel-border-strong);
+    linear-gradient(90deg, var(--ops-history-selection-bg), transparent 52%),
+    var(--color-ops-surface-overlay);
+  box-shadow: inset 2px 0 0 var(--ops-rail-baseline-color);
+}
+
+.ops-history-neighbor-list {
+  overflow: hidden;
+  border: 1px solid var(--color-ops-panel-border-strong);
+  background: var(--color-ops-surface-base);
+}
+
+.ops-history-neighbor-list .ops-history-neighbor-row:first-child {
+  border-top: 0;
 }
 
 .ops-history-sector-mark {
@@ -2469,6 +2502,32 @@ h3,
   padding-top: 0.375rem;
 }
 
+.ops-status-legend-compact {
+  min-height: 1.25rem;
+}
+
+.ops-status-legend-swatch {
+  display: inline-block;
+  width: 0.625rem;
+  height: 0.625rem;
+  border: 1px solid currentColor;
+}
+
+.ops-status-legend-swatch-nominal {
+  color: var(--ops-status-nominal-border);
+  background: var(--ops-status-nominal-bg);
+}
+
+.ops-status-legend-swatch-degraded {
+  color: var(--ops-status-degraded-border);
+  background: var(--ops-status-degraded-bg);
+}
+
+.ops-status-legend-swatch-unmarked {
+  color: var(--ops-status-unmarked-border);
+  background: var(--ops-status-unmarked-bg);
+}
+
 .ops-focus-ring-inset:focus-visible,
 .ops-focus-ring-inset:focus-within {
   outline: none;
@@ -2701,6 +2760,26 @@ h3,
   box-shadow: var(--ops-focus-ring-shadow-on-solid);
 }
 
+.ops-export-register-link {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--color-ops-accent-muted);
+  padding: 0.25rem 0;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: var(--ops-tracking-grid);
+  text-align: center;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.ops-export-register-link:hover {
+  color: var(--color-ops-text-primary);
+}
+
 .ops-action-button-amber {
   --ops-button-border: rgba(251, 191, 36, 0.36);
   --ops-button-bg: rgba(245, 158, 11, 0.14);
@@ -2733,35 +2812,34 @@ h3,
   --ops-signal-rail: var(--color-ops-border-struct);
   min-height: 7.5rem;
   background:
-    linear-gradient(90deg, var(--ops-frame-calibration-muted), transparent 36%)
+    linear-gradient(90deg, var(--ops-frame-calibration-muted), transparent 30%)
       left top / 100% 1px no-repeat,
-    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.035), transparent 44%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.018), transparent 38%),
     var(--color-ops-surface-raised);
   box-shadow:
-    inset 4px 0 0 var(--ops-signal-rail),
+    inset 2px 0 0 var(--ops-signal-rail),
     inset 0 1px 0 rgba(255, 255, 255, 0.08),
     inset 0 -1px 0 rgba(0, 0, 0, 0.34),
-    inset 0 0 0 1px var(--color-ops-panel-border-strong),
-    var(--ops-elevation-1);
+    inset 0 0 0 1px var(--color-ops-panel-border-strong);
 }
 
 .ops-signal-frame[data-tone='safe'] .ops-signal-card {
   background:
-    linear-gradient(90deg, rgba(110, 231, 183, 0.18), transparent 36%) left
-      top / 100% 1px no-repeat,
-    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
-    linear-gradient(90deg, rgba(110, 231, 183, 0.055), transparent 44%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.1), transparent 30%) left top /
+      100% 1px no-repeat,
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
+    linear-gradient(90deg, rgba(110, 231, 183, 0.022), transparent 38%),
     var(--color-ops-surface-raised);
 }
 
 .ops-signal-frame[data-tone='warning'] .ops-signal-card {
   --ops-signal-rail: var(--ops-status-degraded-border);
   background:
-    linear-gradient(90deg, rgba(245, 158, 11, 0.14), transparent 34%) left top /
+    linear-gradient(90deg, rgba(245, 158, 11, 0.09), transparent 30%) left top /
       100% 1px no-repeat,
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
-    linear-gradient(90deg, rgba(245, 158, 11, 0.035), transparent 44%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
+    linear-gradient(90deg, rgba(245, 158, 11, 0.018), transparent 38%),
     var(--color-ops-surface-raised);
 }
 
@@ -2790,9 +2868,11 @@ h3,
 }
 
 .ops-export-accordion[data-open='true'] {
-  box-shadow:
-    var(--ops-elevation-1),
-    0 0 0 1px rgba(110, 231, 183, 0.04);
+  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.04);
+}
+
+.ops-export-accordion-open-tick {
+  background: var(--ops-rail-baseline-color);
 }
 
 .ops-export-accordion-status {
@@ -2834,19 +2914,13 @@ h3,
 
 .ops-export-accordion-trigger-open {
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--ops-accordion-cap-color) 10%, transparent),
-      transparent 42%
-    ),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
     var(--ops-tint-1);
   box-shadow:
-    inset 6px 0 0 var(--ops-accordion-cap-color),
+    inset 0 2px 0 var(--ops-rail-baseline-color),
     inset 0 1px 0 rgba(255, 255, 255, 0.08),
     inset 0 -1px 0 rgba(0, 0, 0, 0.3),
-    inset 0 0 0 1px var(--color-ops-panel-border-strong),
-    var(--ops-elevation-1);
+    inset 0 0 0 1px var(--color-ops-panel-border-strong);
 }
 
 .ops-export-accordion-trigger-collapsed:hover {
@@ -2877,11 +2951,9 @@ h3,
 }
 
 .ops-export-accordion-trigger-open .ops-export-accordion-cap {
-  width: 6px;
+  width: 5px;
   background: var(--ops-accordion-cap-color);
-  box-shadow:
-    0 0 0 1px rgba(10, 15, 13, 0.4),
-    0 0 12px color-mix(in srgb, var(--ops-accordion-cap-color) 42%, transparent);
+  box-shadow: 0 0 0 1px rgba(10, 15, 13, 0.4);
 }
 
 .ops-recovery-support-panel {
@@ -2945,12 +3017,16 @@ h3,
   .ops-signal-card,
   .ops-preview-fact-card,
   .ops-action-button,
+  .ops-export-register-link,
   .ops-radio-chip,
   .ops-rollup-count-plate,
   .ops-day-rollup-meter,
   .ops-rollup-pip-cell,
+  .ops-history-detail-shell,
   .ops-history-sector-mark,
   .ops-history-neighbor-row,
+  .ops-status-legend-compact,
+  .ops-status-legend-swatch,
   .ops-history-selected-row-header,
   .ops-history-selected-column-header,
   .ops-history-selected-column,
@@ -2984,15 +3060,20 @@ h3,
   .ops-hero-rail::after,
   .ops-hero-rail-tail,
   .ops-rule-hairline,
+  .ops-section-primary-tick,
   .ops-rollup-pip-cell::before,
   .ops-rollup-pip-indicator,
+  .ops-rollup-divider,
   .ops-section-header::after,
   .ops-section-title-block::before,
   .ops-domain-card-inner::after,
+  .ops-history-today-header::after,
   .ops-notch-frame-outer::before,
   .ops-notch-frame-outer::after,
+  .ops-export-accordion-open-tick,
   .ops-telemetry-spark-today-tick::after,
   .ops-history-brief-spark-selected::after,
+  .ops-history-momentum-strip,
   .ops-history-sector-row-header::before,
   .ops-history-mobile-sector-label::before,
   .ops-history-edge-left,
@@ -3033,6 +3114,7 @@ h3,
   .ops-focus-ring-chip-proxy:focus-visible,
   .ops-focus-ring-chip-proxy:focus-visible > .ops-focus-ring-chip,
   .ops-action-button:focus-visible,
+  .ops-export-register-link:focus-visible,
   .ops-radio-chip:focus-visible,
   .history-scroll-shell:focus-visible,
   .ops-skip-link:focus-visible {

From ab85de9ed758d4bf28f6cbf071b1c5a8b75fd2ee Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 08:43:52 -0400
Subject: [PATCH 13/13] Update design tokens guidelines in documentation

Clarify usage of design tokens for structural elements and hover effects.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 docs/design-tokens.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/design-tokens.md b/docs/design-tokens.md
index 660231b..291cc76 100644
--- a/docs/design-tokens.md
+++ b/docs/design-tokens.md
@@ -122,6 +122,8 @@ Application rules:
 - Use panel border tokens instead of one-off `border-white/10` and `bg-black/20` combinations when the surface belongs to the notch-clipped chrome language.
 - Use the four-step surface ramp to create visible lift. Do not introduce intermediate dark greens for local component depth.
 - Use `--color-ops-accent-deep` for structural rails, hero tail tracks, section ticks, and today rails that should recede behind live readiness status.
+- Use `--ops-rail-baseline` for quiet structural emerald lines that need to align across telemetry, section ticks, history momentum, and footer separation.
+- Use `--ops-section-pad` for first-level section padding so the vertical rhythm stays controlled by the app shell gap and not by ad hoc section padding.
 
 ## Hover and elevation scale
 
@@ -140,6 +142,7 @@ Application rules:
 - Use hover 1 for quiet rows and hover 2 for interactive cards or grid cells.
 - Animate transform, opacity, color, background, border, and shadow only.
 - New motion must remain covered by the reduced-motion override.
+- Structural baselines do not animate. They remain steady in normal, reduced-motion, and forced-colors modes.
 
 ## Shared chrome utilities
 
@@ -186,6 +189,7 @@ Application rules:
 - Use tone chip panels for import, restore, recovery, and fault guidance instead of repeating inline gradient stacks.
 - Use uniform calm `SignalCard` chrome for backup summary signals. Express caution with the left spine or an inline tone chip rather than recoloring the entire card amber when the state is an intended safety lock.
 - Accordion status chips stay in `.ops-export-accordion-status` so badge alignment remains stable across open and collapsed recovery panels.
+- Attention telemetry should stay on neutral chip chrome. Express alert state with the label pip, the left register tick, detail text, and the shared rail baseline.
 
 Frame emphasis:
 
@@ -203,6 +207,7 @@ Section shell emphasis:
 - `.ops-section-emphasis-standard` is the default shell weight for read-only mirrors such as history.
 - `.ops-section-emphasis-support` drops the emerald outer wash and uses structural framing for support or recovery surfaces.
 - Apply these through `SectionCard` only. They recalibrate shell hierarchy without changing notch geometry, focus chrome, or component signatures downstream.
+- Primary emphasis uses structural lines, not glow. The section tick, hero rail, and top edge should read as one restrained instrument baseline.
 
 Spine emphasis: