From 932baa41eb2fab0637a932de36c9e1e9ac4b2527 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:30:14 -0400
Subject: [PATCH 01/14] Add endOfLine setting to Prettier config

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 .prettierrc.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index 544138be..3baced41 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "endOfLine": "auto"
 }

From 08655554494229b1d53466d7c7107fcc233335a9 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:31:03 -0400
Subject: [PATCH 02/14] Update design tokens for spacing and colors

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

diff --git a/docs/design-tokens.md b/docs/design-tokens.md
index 631dff4c..8bf5b3b8 100644
--- a/docs/design-tokens.md
+++ b/docs/design-tokens.md
@@ -46,7 +46,7 @@ Application rules:
 OpsNormal uses a small tracking scale instead of one-off component values.
 
 - `--ops-tracking-display`: `0.10em` for the product title and large display values
-- `--ops-tracking-section`: `0.04em` for legacy compact headings
+- `--ops-tracking-section`: `0.08em` for compact section headings
 - `--ops-tracking-eyebrow`: `0.14em` for standard eyebrows and compact labels
 - `--ops-tracking-eyebrow-strong`: `0.18em` for high-level shell metadata
 - `--ops-tracking-action`: `0.14em` for clipped action buttons
@@ -62,21 +62,21 @@ Application rules:
 ## Core surfaces
 
 - `--color-ops-base`: `#0a0f0d`
-- `--color-ops-surface-base`: `#0e1411`
-- `--color-ops-surface-1`: `#121814`
-- `--color-ops-surface-2`: `#1a221e`
-- `--color-ops-surface-3`: `#222b27`
-- `--color-ops-surface-raised`: `#1a221e`
-- `--color-ops-surface-overlay`: `#222b27`
-- `--color-ops-surface-interactive`: `#26342d`
+- `--color-ops-surface-base`: `#101613`
+- `--color-ops-surface-1`: `#151d1a`
+- `--color-ops-surface-2`: `#1c2521`
+- `--color-ops-surface-3`: `#24302a`
+- `--color-ops-surface-raised`: `#18211d`
+- `--color-ops-surface-overlay`: `#1f2a25`
+- `--color-ops-surface-interactive`: `#28342e`
 - `--color-ops-text-primary`: `#e6ece9`
 - `--color-ops-text-secondary`: `#b4bfba`
 - `--color-ops-text-muted`: `#8b9691`
-- `--color-ops-border-soft`: `#ffffff12`
-- `--color-ops-border-struct`: `#ffffff26`
-- `--color-ops-border-strong`: `#ffffff38`
-- `--color-ops-panel-border`: `#ffffff12`
-- `--color-ops-panel-border-strong`: `#ffffff26`
+- `--color-ops-border-soft`: `#ffffff14`
+- `--color-ops-border-struct`: `#ffffff29`
+- `--color-ops-border-strong`: `#ffffff3a`
+- `--color-ops-panel-border`: `#ffffff1a`
+- `--color-ops-panel-border-strong`: `#ffffff24`
 - `--color-ops-accent`: `#6ee7b7`
 - `--color-ops-accent-muted`: `#b7f7da`
 - `--color-ops-accent-border`: `#6ee7b724`
@@ -92,12 +92,12 @@ Application rules:
 
 ## Hover and elevation scale
 
-- `--ops-hover-1-bg`: `rgba(255, 255, 255, 0.01)`
-- `--ops-hover-2-bg`: `rgba(255, 255, 255, 0.025)`
+- `--ops-hover-1-bg`: `rgba(255, 255, 255, 0.015)`
+- `--ops-hover-2-bg`: `rgba(255, 255, 255, 0.035)`
 - `--ops-elevation-1`: standard card elevation
 - `--ops-elevation-2`: active or hovered panel elevation
 - `--ops-motion-standard`: `160ms ease-out`
-- `--ops-motion-select`: `220ms cubic-bezier(0.2, 0.8, 0.2, 1)`
+- `--ops-motion-select`: `cubic-bezier(0.2, 0, 0, 1)`
 
 Application rules:
 

From 04108afc337bdf347cfd46e7ff06fa437c702a51 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:32:17 -0400
Subject: [PATCH 03/14] Refactor CSS variables for recovery surfaces

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 public/recovery-surfaces.css | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/public/recovery-surfaces.css b/public/recovery-surfaces.css
index 64615f2a..28556fcd 100644
--- a/public/recovery-surfaces.css
+++ b/public/recovery-surfaces.css
@@ -2,8 +2,15 @@
   color-scheme: dark;
   --ops-fallback-panel-notch: 12px;
   --ops-fallback-chip-notch: 8px;
-  --ops-fallback-border-soft: rgba(255, 255, 255, 0.14);
-  --ops-fallback-border-strong: rgba(255, 255, 255, 0.22);
+  --ops-fallback-base: #0a0f0d;
+  --ops-fallback-surface-base: #101613;
+  --ops-fallback-surface-raised: #18211d;
+  --ops-fallback-surface-overlay: #1f2a25;
+  --ops-fallback-text-primary: #e6ece9;
+  --ops-fallback-text-secondary: #b4bfba;
+  --ops-fallback-text-muted: #8b9691;
+  --ops-fallback-border-soft: rgba(255, 255, 255, 0.08);
+  --ops-fallback-border-strong: rgba(255, 255, 255, 0.14);
   --ops-fallback-focus: rgba(183, 247, 218, 0.86);
 }
 
@@ -12,8 +19,8 @@
   min-height: 100vh;
   min-height: 100dvh;
   padding: 2rem;
-  background-color: #0a0f0d;
-  color: #e4e4e7;
+  background-color: var(--ops-fallback-base);
+  color: var(--ops-fallback-text-primary);
   font-family:
     system-ui,
     -apple-system,
@@ -59,7 +66,7 @@
   margin-top: 1rem;
   font-size: 0.875rem;
   line-height: 1.75;
-  color: #a1a1aa;
+  color: var(--ops-fallback-text-secondary);
 }
 
 .ops-boot-fallback-actions,
@@ -153,12 +160,12 @@
   border: 1px solid var(--ops-fallback-border-soft);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 30%),
-    rgba(0, 0, 0, 0.25);
+    var(--ops-fallback-surface-overlay);
 }
 
 .ops-crash-fallback-detail-label {
   letter-spacing: 0.16em;
-  color: #a1a1aa;
+  color: var(--ops-fallback-text-muted);
 }
 
 .ops-crash-fallback-detail {
@@ -178,10 +185,10 @@
 }
 
 .ops-crash-fallback-button-muted {
-  color: #e4e4e7;
+  color: var(--ops-fallback-text-primary);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 68%),
-    rgba(255, 255, 255, 0.05);
+    var(--ops-fallback-surface-raised);
   border-color: var(--ops-fallback-border-soft);
 }
 
@@ -227,7 +234,7 @@
   gap: 0.75rem;
   font-size: 0.8125rem;
   line-height: 1.5;
-  color: #e4e4e7;
+  color: var(--ops-fallback-text-primary);
 }
 
 .ops-crash-fallback-checkbox {

From daf90ae7b7996e68c6fac35a6de87040d7bdf026 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:33:05 -0400
Subject: [PATCH 04/14] Refactor layout and adjust class names in App component

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

diff --git a/src/App.tsx b/src/App.tsx
index 48aea165..67c0b643 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -225,7 +225,7 @@ function App() {
       <main
         id="main-content"
         tabIndex={-1}
-        className="app-shell mx-auto flex w-full max-w-7xl flex-col gap-6 lg:gap-8"
+        className="app-shell mx-auto flex w-full max-w-[1280px] flex-col gap-6 2xl:max-w-[1440px] lg:gap-8"
       >
         <NotchedFrame
           emphasis="primary"
@@ -233,7 +233,7 @@ function App() {
           innerClassName="tactical-panel bg-[linear-gradient(180deg,rgba(110,231,183,0.10),rgba(255,255,255,0.02)),var(--color-ops-surface-1)] p-5 sm:p-6 lg:p-7"
         >
           <header>
-            <div className="grid gap-5 lg:gap-6">
+            <div className="grid gap-4 lg:gap-6">
               <div className="flex max-w-4xl gap-4">
                 <div
                   className="hidden w-3 shrink-0 flex-col items-center self-stretch sm:flex"
@@ -255,18 +255,14 @@ function App() {
                       Personal Readiness Tracker
                     </p>
                   </div>
-                  <h1 className="ops-tracking-display mt-4 text-4xl font-semibold text-ops-text-primary uppercase sm:mt-5 sm:text-5xl">
+                  <h1 className="ops-tracking-display mt-3 text-3xl font-semibold text-ops-text-primary uppercase sm:mt-4 sm:text-4xl lg:text-5xl">
                     OpsNormal
                   </h1>
-                  <p className="mt-4 max-w-2xl text-sm leading-7 text-ops-text-secondary sm:text-base">
+                  <p className="mt-3 max-w-2xl text-sm leading-7 text-ops-text-secondary sm:text-base">
                     A local-only mirror for daily balance across work or school,
                     household, relationships, body, and rest. No account. No
                     cloud sync. No analytics layer.
                   </p>
-                  <div className="mt-5 space-y-1.5" aria-hidden="true">
-                    <span className="block h-px max-w-2xl bg-ops-border-soft" />
-                    <span className="clip-notched ops-notch-chip block h-1 w-12 bg-ops-accent/65 shadow-[0_0_14px_rgba(110,231,183,0.18)]" />
-                  </div>
                 </div>
               </div>
               <ErrorBoundary
@@ -288,31 +284,33 @@ function App() {
           </header>
         </NotchedFrame>
 
-        <InstallBanner compact={hasPriorityAlert} />
-        <PwaUpdateBanner
-          needRefresh={needRefresh}
-          offlineReady={offlineReady}
-          isApplyingUpdate={isApplyingUpdate}
-          updateStalled={updateStalled}
-          reloadRecoveryRequired={reloadRecoveryRequired}
-          externalUpdateInProgress={externalUpdateInProgress}
-          externalUpdateStalled={externalUpdateStalled}
-          onReload={handleApplyUpdate}
-          onDismiss={handleDismissBanner}
-          onReloadPage={handleReloadPage}
-          compact={hasPriorityAlert}
-        />
-        {databaseBlockedMessage ? (
-          <AlertSurface
-            tone="attention"
-            title="Database Upgrade Blocked"
-            description={databaseBlockedMessage}
-            role="alert"
-            aria-atomic="true"
-            titleId="database-upgrade-blocked-title"
+        <div className="flex flex-col gap-3">
+          <InstallBanner compact={hasPriorityAlert} />
+          <PwaUpdateBanner
+            needRefresh={needRefresh}
+            offlineReady={offlineReady}
+            isApplyingUpdate={isApplyingUpdate}
+            updateStalled={updateStalled}
+            reloadRecoveryRequired={reloadRecoveryRequired}
+            externalUpdateInProgress={externalUpdateInProgress}
+            externalUpdateStalled={externalUpdateStalled}
+            onReload={handleApplyUpdate}
+            onDismiss={handleDismissBanner}
+            onReloadPage={handleReloadPage}
+            compact={hasPriorityAlert}
           />
-        ) : null}
-        <BackupActionBanner prompt={backupActionPrompt} />
+          {databaseBlockedMessage ? (
+            <AlertSurface
+              tone="attention"
+              title="Database Upgrade Blocked"
+              description={databaseBlockedMessage}
+              role="alert"
+              aria-atomic="true"
+              titleId="database-upgrade-blocked-title"
+            />
+          ) : null}
+          <BackupActionBanner prompt={backupActionPrompt} />
+        </div>
 
         <ErrorBoundary
           resetKeys={[todayKey]}
@@ -375,21 +373,19 @@ function App() {
           innerClassName="tactical-subpanel px-4 py-4 text-sm leading-7 text-ops-text-secondary"
         >
           <footer>
-            <div className="border-t border-ops-panel-border-strong pt-6">
-              <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 font-semibold 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>
-                <FooterProvenance />
+            <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 font-semibold 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>
+              <FooterProvenance />
             </div>
           </footer>
         </NotchedFrame>

From e035839b83668ee72c5fdadf9c15979370e11639 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:33:49 -0400
Subject: [PATCH 05/14] Refactor DomainCard component for improved styling

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

diff --git a/src/components/DomainCard.tsx b/src/components/DomainCard.tsx
index 1b59e913..2a763833 100644
--- a/src/components/DomainCard.tsx
+++ b/src/components/DomainCard.tsx
@@ -14,6 +14,11 @@ interface DomainCardProps {
 }
 
 const STATUS_OPTIONS: UiStatus[] = ['nominal', 'degraded', 'unmarked'];
+const STATUS_CONTROL_LABELS: Record<UiStatus, string> = {
+  nominal: 'NOM',
+  degraded: 'DEG',
+  unmarked: 'NONE',
+};
 const RADIO_CONTROL_KEYS = new Set([
   ' ',
   'Enter',
@@ -53,8 +58,8 @@ export function DomainCard({
     : instructionId;
 
   const shellClassName = busy
-    ? 'panel-shadow clip-notched ops-notch-panel-outer bg-ops-border-strong p-px'
-    : 'ops-domain-card panel-shadow group clip-notched ops-notch-panel-outer bg-ops-border-strong p-px transition-colors hover:bg-ops-accent/25 focus-within:bg-ops-accent/25';
+    ? 'panel-shadow clip-notched ops-notch-panel-outer h-full bg-ops-border-strong p-px'
+    : 'ops-domain-card panel-shadow group clip-notched ops-notch-panel-outer h-full bg-ops-border-strong p-px transition-colors hover:bg-ops-accent/25 focus-within:bg-ops-accent/25';
 
   useEffect(() => {
     const pendingStatus = pendingKeyboardFocusStatusRef.current;
@@ -148,7 +153,7 @@ export function DomainCard({
     <div className={shellClassName}>
       <div
         className={[
-          'clip-notched ops-notch-panel-inner tactical-panel flex min-h-[15rem] transform-gpu flex-col justify-between bg-[linear-gradient(180deg,rgba(255,255,255,0.025),transparent_28%),var(--color-ops-surface-2)] p-4 text-left transition-transform duration-150 ease-out group-hover:-translate-y-px group-focus-within:-translate-y-px sm:p-5 xl:min-h-[16rem]',
+          'clip-notched ops-notch-panel-inner tactical-panel ops-domain-card-shell flex h-full min-h-[13rem] transform-gpu flex-col justify-between bg-[linear-gradient(180deg,rgba(255,255,255,0.025),transparent_28%),var(--color-ops-surface-2)] p-4 text-left transition-transform duration-150 ease-out sm:p-5 xl:min-h-[14rem]',
           spineClassName,
         ].join(' ')}
       >
@@ -168,7 +173,7 @@ export function DomainCard({
               />
               <span>{sector.shortLabel}</span>
             </span>
-            <h3 className="mt-2 text-sm leading-5 font-semibold tracking-[0.04em] text-ops-text-primary uppercase">
+            <h3 className="mt-2 text-sm leading-5 font-semibold tracking-[0.04em] text-ops-text-primary uppercase md:normal-case md:tracking-[0.02em]">
               {sector.label}
             </h3>
             <p className="mt-3 text-sm leading-6 text-ops-text-secondary">
@@ -177,7 +182,7 @@ export function DomainCard({
           </div>
         </div>
 
-        <div className="mt-6">
+        <div className="mt-5">
           <div
             className="ops-sector-caption border-t border-ops-border-soft pt-3"
             aria-hidden="true"
@@ -221,14 +226,14 @@ export function DomainCard({
                   }}
                   onKeyDown={(event) => handleRadioKeyDown(event, optionIndex)}
                   className={[
-                    'ops-focus-ring-chip ops-radio-chip tactical-chip-panel min-h-11 border px-2 py-2 text-center text-[11px] font-semibold tracking-[0.12em] uppercase',
+                    'ops-focus-ring-chip ops-radio-chip tactical-chip-panel min-h-11 border px-1 py-2 text-center text-[10px] font-semibold tracking-normal uppercase',
                     busy ? 'cursor-wait opacity-70' : '',
                     isSelected
                       ? `${content.classes} shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]`
                       : 'ops-radio-chip-ghost text-ops-text-secondary hover:text-ops-text-primary',
                   ].join(' ')}
                 >
-                  {content.shortLabel}
+                  {STATUS_CONTROL_LABELS[option]}
                 </button>
               );
             })}

From 77b047c7b56fbd2013203fe44a7de643257940f6 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:34:17 -0400
Subject: [PATCH 06/14] Update FooterProvenance layout classes

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

diff --git a/src/components/FooterProvenance.tsx b/src/components/FooterProvenance.tsx
index 7b3d747f..2d0a9f92 100644
--- a/src/components/FooterProvenance.tsx
+++ b/src/components/FooterProvenance.tsx
@@ -5,7 +5,7 @@ const REPO_URL = 'https://github.com/bradsaucier/opsnormal';
 export function FooterProvenance() {
   return (
     <div
-      className="ops-provenance grid gap-3 sm:w-full sm:self-end lg:grid-cols-[auto_1fr_auto] lg:items-center lg:gap-8"
+      className="ops-provenance grid gap-3 sm:w-full sm:self-end lg:grid-cols-[auto_auto_auto] lg:items-center lg:justify-end lg:gap-8"
       data-testid="footer-provenance"
     >
       <p className="ops-eyebrow-strong font-semibold text-ops-text-primary">

From b7e042e657e172a9199ce872d4c3574f6540d25b Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:34:39 -0400
Subject: [PATCH 07/14] Refactor attention tone class name in HeaderTelemetry

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

diff --git a/src/components/HeaderTelemetry.tsx b/src/components/HeaderTelemetry.tsx
index 61552b6f..94f0b8d6 100644
--- a/src/components/HeaderTelemetry.tsx
+++ b/src/components/HeaderTelemetry.tsx
@@ -19,8 +19,7 @@ type TelemetrySparkState = 'nominal' | 'degraded' | 'unmarked';
 const toneClassNameByTone: Record<TelemetryTone, string> = {
   default: 'text-ops-text-primary',
   accent: 'text-ops-accent-muted',
-  attention:
-    'bg-[var(--ops-status-degraded-bg)] text-[var(--ops-status-degraded-text)]',
+  attention: 'ops-telemetry-attention',
   subtle: 'text-ops-text-secondary',
 };
 

From e515ff8af5323a3960026afcb74609a37f0c59d9 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:35:13 -0400
Subject: [PATCH 08/14] Adjust padding in SectionCard component

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

diff --git a/src/components/SectionCard.tsx b/src/components/SectionCard.tsx
index b6292484..2b347882 100644
--- a/src/components/SectionCard.tsx
+++ b/src/components/SectionCard.tsx
@@ -26,7 +26,7 @@ export function SectionCard({
       <div
         className={`clip-notched ops-notch-panel-outer ops-section-frame ops-section-emphasis-${emphasis} p-px`}
       >
-        <section className="tactical-panel clip-notched ops-notch-panel-inner ops-section-surface p-6 sm:p-7 lg:p-8">
+        <section className="tactical-panel clip-notched ops-notch-panel-inner ops-section-surface p-5 sm:p-6 lg:p-8">
           {emphasis === 'primary' ? (
             <span className="ops-section-primary-tick" aria-hidden="true" />
           ) : null}
@@ -39,7 +39,7 @@ export function SectionCard({
             </div>
             {meta ? (
               <div className="lg:flex lg:self-stretch lg:border-l lg:border-ops-border-soft lg:pl-6">
-                <div className="clip-notched ops-notch-chip tactical-chip-panel px-3 py-3 text-sm text-ops-text-secondary sm:min-w-[14rem] sm:text-right lg:flex lg:items-center lg:justify-end">
+                <div className="clip-notched ops-notch-chip tactical-chip-panel ops-section-meta-panel px-3 py-3 text-sm text-ops-text-secondary sm:min-w-[14rem] sm:text-right lg:flex lg:items-center lg:justify-end lg:p-0">
                   {meta}
                 </div>
               </div>

From f52490d10149ee97f867c121adf62e62c66f60f2 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:36:06 -0400
Subject: [PATCH 09/14] Refactor TodayPanel layout and class names

Updated class names and structure for layout adjustments.

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

diff --git a/src/features/checkin/TodayPanel.tsx b/src/features/checkin/TodayPanel.tsx
index b94b4f6c..7455a19b 100644
--- a/src/features/checkin/TodayPanel.tsx
+++ b/src/features/checkin/TodayPanel.tsx
@@ -50,19 +50,24 @@ function DayCompletionRollup({
   const remainingCount = Math.max(totalCount - markedCount, 0);
 
   return (
-    <div className="ops-flat-panel-strong mb-4 grid gap-4 p-4 sm:p-5 lg:grid-cols-[auto_minmax(0,1fr)_auto] lg:items-center">
+    <div className="ops-flat-panel-strong mb-4 grid grid-cols-[auto_minmax(0,1fr)] gap-4 p-4 sm:p-5 lg:grid-cols-[auto_minmax(0,1fr)_auto] lg:items-center">
       <div className="min-w-[8rem]">
         <p className="ops-eyebrow-mixed">Daily roll-up</p>
         <p className="mt-2 text-3xl leading-none font-semibold text-ops-text-primary [font-variant-numeric:tabular-nums]">
           {markedCount}/{totalCount}
         </p>
       </div>
-      <div className="text-sm leading-6 text-ops-text-secondary">
+      <div
+        className={[
+          'text-sm leading-6 text-ops-text-secondary',
+          isComplete ? 'lg:hidden' : '',
+        ].join(' ')}
+      >
         {isComplete
           ? 'All five sectors are marked for today.'
           : `${remainingCount} sector${remainingCount === 1 ? '' : 's'} still open.`}
       </div>
-      <div className="flex flex-wrap items-center gap-3 lg:justify-end">
+      <div className="col-span-2 flex flex-wrap items-center gap-3 sm:col-span-1 sm:justify-end lg:col-span-1 lg:col-start-3">
         <span
           className={[
             'ops-status-frame clip-notched ops-notch-chip inline-flex min-h-8 items-center border px-3 text-xs font-semibold tracking-[0.14em] uppercase',
@@ -73,7 +78,7 @@ function DayCompletionRollup({
           {isComplete ? 'Complete' : 'Open'}
         </span>
         <div
-          className="flex items-center gap-1.5"
+          className="clip-notched ops-notch-chip tactical-chip-panel flex items-center gap-1.5 px-2 py-1.5"
           aria-label="Today sector status pips"
         >
           {SECTORS.map((sector, index) => (
@@ -216,23 +221,21 @@ export function TodayPanel({
         </div>
       ) : null}
 
-      {!hasEntriesForToday ? (
-        <div className="ops-flat-panel-strong mb-4 px-4 py-3">
-          <p className="ops-eyebrow-mixed">Awaiting first mark</p>
-          <p className="mt-2 max-w-2xl text-sm leading-6 text-ops-text-secondary">
-            No sectors are marked for today. Set one state below and the daily
-            roll-up will start tracking live progress.
-          </p>
-        </div>
-      ) : null}
-
       <div
-        id={directSelectHintId}
-        className="ops-flat-panel mb-4 px-4 py-3 text-sm leading-6 text-ops-text-secondary"
+        className={[
+          'mb-4 px-4 py-3 text-sm leading-6 text-ops-text-secondary',
+          hasEntriesForToday ? 'ops-flat-panel' : 'ops-flat-panel-strong',
+        ].join(' ')}
       >
-        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.
+        {!hasEntriesForToday ? (
+          <p className="ops-eyebrow-mixed mb-2">Awaiting first mark</p>
+        ) : null}
+        <p id={directSelectHintId}>
+          {!hasEntriesForToday ? 'No sectors are marked for today. ' : null}
+          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.
+        </p>
       </div>
 
       <DayCompletionRollup
@@ -242,9 +245,9 @@ export function TodayPanel({
         totalCount={completion.totalCount}
       />
 
-      <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 lg:gap-5">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5 lg:gap-5">
         {SECTORS.map((sector, index) => (
-          <div key={sector.id}>
+          <div key={sector.id} className="h-full">
             <DomainCard
               sector={sector}
               sectorSigil={`S${index + 1}`}

From 6788728bfe1dff60b34f1034be5e7eb5d09bf2cd Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:36:37 -0400
Subject: [PATCH 10/14] Adjust column header styles and attributes

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

diff --git a/src/features/history/DesktopHistoryGrid.tsx b/src/features/history/DesktopHistoryGrid.tsx
index 1060bb00..c0f6287a 100644
--- a/src/features/history/DesktopHistoryGrid.tsx
+++ b/src/features/history/DesktopHistoryGrid.tsx
@@ -105,6 +105,7 @@ export function DesktopHistoryGrid({ model }: DesktopHistoryGridProps) {
                         role="columnheader"
                         className="sticky top-0 left-0 z-30 border-r border-b border-ops-border-struct bg-ops-surface-2 px-4 py-1.5 text-left text-xs font-semibold tracking-[0.12em] text-ops-text-secondary uppercase"
                         scope="col"
+                        aria-sort="none"
                       >
                         Sector
                       </th>
@@ -118,17 +119,18 @@ export function DesktopHistoryGrid({ model }: DesktopHistoryGridProps) {
                             key={dateKey}
                             role="columnheader"
                             className={[
-                              'sticky top-0 z-20 min-w-[2.75rem] border-b border-ops-border-struct px-2 py-1.5 text-center text-xs font-semibold uppercase tracking-[0.12em]',
+                              'sticky top-0 z-20 min-w-[3rem] border-b border-ops-border-struct px-2 py-1.5 text-center text-xs font-semibold uppercase tracking-[0.12em]',
                               (dateIndex + 1) % 7 === 0
                                 ? 'ops-history-week-boundary'
                                 : '',
                               isToday
-                                ? 'ops-history-today-header bg-emerald-300/10 text-ops-accent-muted'
+                                ? 'ops-history-today-header bg-ops-surface-1 text-ops-accent-muted'
                                 : isSelectedColumn
                                   ? 'bg-white/[0.035] text-ops-text-primary'
                                   : 'bg-ops-surface-1 text-ops-text-secondary',
                             ].join(' ')}
                             scope="col"
+                            aria-sort="none"
                             aria-current={isToday ? 'date' : undefined}
                             title={isToday ? 'Today' : undefined}
                           >

From 4d2e1d89bbd50a38f6bd6c2b957e5f7aae9a4215 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:37:18 -0400
Subject: [PATCH 11/14] Update MobileHistoryGrid.tsx

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

diff --git a/src/features/history/MobileHistoryGrid.tsx b/src/features/history/MobileHistoryGrid.tsx
index b979866b..3fc3da86 100644
--- a/src/features/history/MobileHistoryGrid.tsx
+++ b/src/features/history/MobileHistoryGrid.tsx
@@ -357,7 +357,7 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
                 {selectedDaySummary}
               </p>
             </div>
-            <div className="clip-notched ops-notch-chip tactical-chip-panel px-3 py-2 text-xs uppercase tracking-[0.12em] text-ops-text-secondary">
+            <div className="clip-notched ops-notch-chip tactical-chip-panel px-3 py-2 text-xs uppercase tracking-[0.12em] text-ops-text-secondary sm:hidden">
               {visibleWeekIndex + 1} of {weekGroups.length} week groups
             </div>
           </div>

From 4f0f2029281cb7c6d9ccf33972d0df2edca2ea40 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:38:04 -0400
Subject: [PATCH 12/14] Enhance styles with new hover and motion variables

Added new CSS variables for hover effects and motion transitions. Updated styles for various components to utilize these new variables.

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

diff --git a/src/styles/index.css b/src/styles/index.css
index 839bdf78..eb0277c2 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -117,9 +117,14 @@
   --ops-tracking-eyebrow-strong: 0.18em;
   --ops-tracking-action: 0.14em;
   --ops-tracking-table: 0.16em;
+  --ops-hover-1-bg: rgba(255, 255, 255, 0.015);
+  --ops-hover-2-bg: rgba(255, 255, 255, 0.035);
+  --ops-motion-standard: 160ms ease-out;
   --ops-motion-select: cubic-bezier(0.2, 0, 0, 1);
   --ops-elevation-1:
     0 8px 18px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.14);
+  --ops-elevation-2:
+    0 14px 28px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.16);
   --ops-focus-ring-solid-edge: rgba(2, 18, 12, 0.96);
   --ops-focus-ring-solid-outer: rgba(255, 255, 255, 0.92);
   --ops-chip-min-h-sm: 36px;
@@ -291,6 +296,24 @@ h3,
   letter-spacing: var(--ops-tracking-table);
 }
 
+.ops-headline-h2,
+.ops-headline-h3 {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.ops-headline-h2 {
+  font-size: 1.5rem;
+  line-height: 1.35;
+}
+
+.ops-headline-h3 {
+  font-size: 1rem;
+  line-height: 1.65;
+}
+
 @media (min-width: 640px) {
   .app-shell {
     padding-right: max(1.5rem, var(--ops-safe-right));
@@ -625,6 +648,13 @@ h3,
   --ops-sector-spine-width: 5px;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .ops-domain-card:hover .ops-domain-card-shell,
+  .ops-domain-card:focus-within .ops-domain-card-shell {
+    transform: translateY(-1px);
+  }
+}
+
 .ops-section-spine-fault {
   box-shadow:
     inset 4px 0 0 var(--ops-status-degraded-border),
@@ -703,6 +733,54 @@ h3,
     inset 0 0 0 1px var(--color-ops-panel-border-strong);
 }
 
+.ops-flat-panel,
+.ops-flat-panel-strong {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.ops-flat-panel {
+  --ops-focus-ring-base-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.035),
+    inset 0 0 0 1px var(--color-ops-panel-border);
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.025),
+      rgba(255, 255, 255, 0) 32%
+    ),
+    var(--color-ops-surface-overlay);
+  box-shadow: var(--ops-focus-ring-base-shadow);
+}
+
+.ops-flat-panel-strong {
+  --ops-focus-ring-base-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.045),
+    inset 0 0 0 1px var(--color-ops-panel-border-strong);
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.035),
+      rgba(255, 255, 255, 0) 30%
+    ),
+    var(--color-ops-surface-raised);
+  box-shadow: var(--ops-focus-ring-base-shadow);
+}
+
+.ops-section-meta-panel {
+  min-width: 0;
+}
+
+@media (min-width: 1024px) {
+  .ops-section-meta-panel {
+    -webkit-clip-path: none;
+    clip-path: none;
+    background: transparent;
+    box-shadow: none;
+  }
+}
+
 .tactical-chip-panel {
   --ops-focus-ring-base-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.04),
@@ -837,6 +915,11 @@ h3,
   background: var(--ops-status-unmarked-border);
 }
 
+.ops-telemetry-attention {
+  background: rgba(245, 158, 11, 0.12);
+  color: #fde68a;
+}
+
 .ops-telemetry-grid > .ops-telemetry-chip {
   border-top: 1px solid var(--color-ops-panel-border-strong);
 }
@@ -970,12 +1053,12 @@ h3,
 }
 
 .ops-radio-chip.ops-status-unmarked[aria-checked='true'] {
-  --ops-radio-chip-status-border: rgba(255, 255, 255, 0.28);
-  border-color: rgba(255, 255, 255, 0.28);
+  --ops-radio-chip-status-border: rgba(255, 255, 255, 0.16);
+  border-color: rgba(255, 255, 255, 0.18);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%),
-    rgba(64, 76, 70, 0.64);
-  color: #d5ddd9;
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
+    rgba(255, 255, 255, 0.06);
+  color: #c5ceca;
 }
 
 .ops-history-row {
@@ -983,7 +1066,7 @@ h3,
 }
 
 .ops-history-row:hover {
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--ops-hover-1-bg);
 }
 
 .ops-history-cell {
@@ -994,22 +1077,17 @@ h3,
 }
 
 .ops-history-cell:hover {
-  background: rgba(255, 255, 255, 0.045);
-  box-shadow: var(--ops-elevation-1);
+  background: var(--ops-hover-2-bg);
+  box-shadow: var(--ops-elevation-2);
   transform: translateY(-1px);
 }
 
 .ops-history-today-header {
-  box-shadow:
-    inset 0 2px 0 var(--ops-status-nominal-border),
-    inset 1px 0 0 var(--ops-today-rail),
-    inset -1px 0 0 var(--ops-today-rail);
+  box-shadow: inset 0 2px 0 var(--ops-status-nominal-border);
 }
 
 .ops-history-today-cell {
-  box-shadow:
-    inset 1px 0 0 var(--ops-today-rail),
-    inset -1px 0 0 rgba(110, 231, 183, 0.22);
+  box-shadow: inset 0 -2px 0 var(--ops-today-rail);
 }
 
 .ops-history-week-boundary {
@@ -1018,15 +1096,14 @@ h3,
 
 .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 1px 0 0 var(--color-ops-border-soft),
     inset 0 2px 0 var(--ops-status-nominal-border);
 }
 
 .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.22);
+    inset 1px 0 0 var(--color-ops-border-soft),
+    inset 0 -2px 0 var(--ops-today-rail);
 }
 
 .ops-history-selected-cell {
@@ -1136,12 +1213,12 @@ h3,
   text-decoration: none;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    color 120ms ease,
-    box-shadow 120ms ease,
-    opacity 120ms ease,
-    transform 120ms ease;
+    background-color var(--ops-motion-standard),
+    border-color var(--ops-motion-standard),
+    color var(--ops-motion-standard),
+    box-shadow var(--ops-motion-standard),
+    opacity var(--ops-motion-standard),
+    transform var(--ops-motion-standard);
 }
 
 .ops-action-button-sm {
@@ -1325,11 +1402,73 @@ h3,
 
   .ops-action-button:hover,
   .ops-export-accordion-trigger-collapsed:hover,
-  .ops-history-cell:hover {
+  .ops-history-cell:hover,
+  .ops-domain-card:hover .ops-domain-card-shell,
+  .ops-domain-card:focus-within .ops-domain-card-shell {
     transform: none;
   }
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  body {
+    background: var(--color-ops-base);
+  }
+
+  .tactical-panel,
+  .tactical-subpanel,
+  .tactical-subpanel-strong,
+  .tactical-chip-panel,
+  .ops-flat-panel,
+  .ops-flat-panel-strong {
+    background-color: var(--color-ops-surface-base);
+  }
+}
+
+@media (forced-colors: active) {
+  .tactical-panel,
+  .tactical-subpanel,
+  .tactical-subpanel-strong,
+  .tactical-chip-panel,
+  .ops-flat-panel,
+  .ops-flat-panel-strong,
+  .ops-status-frame,
+  .ops-grid-cell {
+    forced-color-adjust: none;
+    border-color: CanvasText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+
+  .ops-status-nominal,
+  .ops-grid-nominal {
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .ops-status-degraded,
+  .ops-grid-degraded {
+    border-color: LinkText;
+    background: Canvas;
+    color: LinkText;
+  }
+
+  .ops-status-unmarked,
+  .ops-grid-unmarked {
+    border-color: GrayText;
+    background: Canvas;
+    color: GrayText;
+  }
+
+  .ops-action-button {
+    forced-color-adjust: none;
+    border-color: ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
+  }
+}
+
 .ops-provenance-facts {
   display: grid;
   grid-auto-flow: row;

From 81cfd79efcde6f20ae3238072a7ac00484116e8a Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:38:56 -0400
Subject: [PATCH 13/14] Update accessibility snapshot for radiogroup states

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 .../work-or-school-radiogroup.aria.yml                      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/e2e/accessibility.a11y.spec.ts-snapshots/work-or-school-radiogroup.aria.yml b/tests/e2e/accessibility.a11y.spec.ts-snapshots/work-or-school-radiogroup.aria.yml
index a31b3656..89597911 100644
--- a/tests/e2e/accessibility.a11y.spec.ts-snapshots/work-or-school-radiogroup.aria.yml
+++ b/tests/e2e/accessibility.a11y.spec.ts-snapshots/work-or-school-radiogroup.aria.yml
@@ -1,4 +1,4 @@
 - radiogroup "Work or School status":
-    - radio "Work or School NOMINAL" [checked]: OK
-    - radio "Work or School DEGRADED": DG
-    - radio "Work or School UNMARKED": UN
+    - radio "Work or School NOMINAL" [checked]: NOM
+    - radio "Work or School DEGRADED": DEG
+    - radio "Work or School UNMARKED": NONE

From 92964ebe7c5b6ada5402004cb4d27396c4596cef Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Mon, 4 May 2026 13:39:42 -0400
Subject: [PATCH 14/14] Update radio button options in domainCard test

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

diff --git a/tests/unit/domainCard.test.tsx b/tests/unit/domainCard.test.tsx
index 26f7b479..6ff94c7d 100644
--- a/tests/unit/domainCard.test.tsx
+++ b/tests/unit/domainCard.test.tsx
@@ -24,7 +24,7 @@ describe('DomainCard', () => {
     expect(screen.queryByText('STATE')).not.toBeInTheDocument();
     expect(
       screen.getAllByRole('radio').map((radio) => radio.textContent),
-    ).toEqual(['OK', 'DG', 'UN']);
+    ).toEqual(['NOM', 'DEG', 'NONE']);
 
     const group = screen.getByRole('radiogroup', {
       name: /work or school status/i,