From 32357c710bbd53a48efe8bcea193c89194c359b0 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 17:02:33 -0400
Subject: [PATCH 1/6] Refactor DomainCard component structure and attributes

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

diff --git a/src/components/DomainCard.tsx b/src/components/DomainCard.tsx
index ddf898f..3a22efa 100644
--- a/src/components/DomainCard.tsx
+++ b/src/components/DomainCard.tsx
@@ -147,10 +147,14 @@ export function DomainCard({
   }
 
   return (
-    <div className={shellClassName}>
+    <div
+      className={shellClassName}
+      data-status={resolvedStatus}
+      aria-busy={busy || undefined}
+    >
       <div
         className={[
-          'clip-notched ops-notch-panel-inner ops-surface-raised-card flex h-full min-h-[15rem] flex-col justify-between p-[var(--spacing-ops-5)] text-left transition-colors duration-150 ease-out sm:p-[var(--spacing-ops-6)] xl:min-h-[16rem]',
+          'ops-domain-card-inner clip-notched ops-notch-panel-inner ops-surface-raised-card flex h-full min-h-[15rem] flex-col justify-between p-[var(--spacing-ops-5)] text-left transition-colors duration-150 ease-out sm:p-[var(--spacing-ops-6)] xl:min-h-[16rem]',
           spineClassName,
         ].join(' ')}
       >

From 88bc348c7ec9e53fac89faff25746d777478c8a9 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 17:02:59 -0400
Subject: [PATCH 2/6] Add data-tone attribute to HeaderTelemetry component

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

diff --git a/src/components/HeaderTelemetry.tsx b/src/components/HeaderTelemetry.tsx
index 7bbfcd6..6bc7b51 100644
--- a/src/components/HeaderTelemetry.tsx
+++ b/src/components/HeaderTelemetry.tsx
@@ -172,6 +172,7 @@ function TelemetryChip({
 
   return (
     <div
+      data-tone={tone}
       className={[
         'ops-telemetry-chip min-h-[var(--ops-chip-min-h-lg)] px-3.5 py-4 text-left lg:px-4',
         isShimmering ? 'ops-telemetry-chip-shimmer' : '',

From 0ebb4d858daf41650ce1bdc1ad5ca35a454f149a Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 17:03:20 -0400
Subject: [PATCH 3/6] Refactor SectionCard layout and class names

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

diff --git a/src/components/SectionCard.tsx b/src/components/SectionCard.tsx
index 62fa218..94c2cfe 100644
--- a/src/components/SectionCard.tsx
+++ b/src/components/SectionCard.tsx
@@ -32,13 +32,13 @@ export function SectionCard({
       {emphasis === 'primary' ? (
         <span className="ops-section-primary-tick" aria-hidden="true" />
       ) : null}
-      <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-        <div className="max-w-3xl">
+      <div className="ops-section-header mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div className="ops-section-title-block max-w-3xl">
           {eyebrow ? <p className={eyebrowClassName}>{eyebrow}</p> : null}
-          <h2 className="ops-headline-h2 mt-2">{title}</h2>
+          <h2 className="ops-section-title ops-headline-h2 mt-2">{title}</h2>
         </div>
         {meta ? (
-          <div className="ops-section-meta text-sm text-ops-text-secondary sm:min-w-[14rem] sm:text-right lg:self-end">
+          <div className="ops-section-meta ops-section-meta-panel text-sm text-ops-text-secondary sm:min-w-[14rem] sm:text-right lg:self-end">
             {meta}
           </div>
         ) : null}

From b47e7bc32e2fe957f25c0b8ed2e557d7fd9232d1 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 17:04:16 -0400
Subject: [PATCH 4/6] Add class names to NotchedFrame components

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

diff --git a/src/features/export/exportPanelShared.tsx b/src/features/export/exportPanelShared.tsx
index 77b14ef..677a8ce 100644
--- a/src/features/export/exportPanelShared.tsx
+++ b/src/features/export/exportPanelShared.tsx
@@ -28,6 +28,9 @@ export function AccordionSection({
 
   return (
     <NotchedFrame
+      className="ops-export-accordion"
+      data-section={sectionKey}
+      data-open={isOpen ? 'true' : 'false'}
       outerClassName={
         isOpen ? 'bg-ops-panel-border-strong' : 'bg-ops-border-struct'
       }
@@ -141,6 +144,8 @@ export function SignalCard({
   return (
     <div role="listitem">
       <NotchedFrame
+        className="ops-signal-frame"
+        data-tone={tone}
         outerClassName={chromeClasses.outer}
         innerClassName={`min-h-[7.5rem] p-4 sm:p-5 ${chromeClasses.inner}`}
       >

From 021722ed47e511cf2596420b1cc6545527240d2a Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 17:05:23 -0400
Subject: [PATCH 5/6] Enhance styles for calibration frames and components

Add new styles for calibration frames and enhance existing components with additional visual effects.

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

diff --git a/src/styles/index.css b/src/styles/index.css
index a8354a0..fc7576e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -217,6 +217,9 @@
     transparent
   );
   --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);
+  --ops-readout-glow: rgba(110, 231, 183, 0.2);
 }
 
 html {
@@ -231,6 +234,10 @@ body {
   min-height: 100dvh;
   overscroll-behavior-y: contain;
   background:
+    linear-gradient(90deg, rgba(56, 189, 248, 0.018) 1px, transparent 1px)
+      center / 64px 64px,
+    linear-gradient(0deg, rgba(110, 231, 183, 0.012) 1px, transparent 1px)
+      center / 64px 64px,
     repeating-linear-gradient(
       0deg,
       transparent 0 47px,
@@ -249,6 +256,10 @@ body {
 @media (min-width: 640px) {
   body {
     background:
+      linear-gradient(90deg, rgba(56, 189, 248, 0.018) 1px, transparent 1px)
+        center / 72px 72px,
+      linear-gradient(0deg, rgba(110, 231, 183, 0.012) 1px, transparent 1px)
+        center / 72px 72px,
       repeating-linear-gradient(
         0deg,
         transparent 0 47px,
@@ -384,6 +395,9 @@ h3,
   font-size: 2.5rem;
   line-height: 1.1;
   letter-spacing: 0;
+  text-shadow:
+    0 0 28px rgba(110, 231, 183, 0.16),
+    0 1px 0 rgba(0, 0, 0, 0.72);
 }
 
 .ops-headline-h2 {
@@ -646,6 +660,48 @@ h3,
   position: relative;
 }
 
+.ops-notch-frame-outer::before,
+.ops-notch-frame-outer::after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.ops-notch-frame-outer::before {
+  inset: 0;
+  background:
+    linear-gradient(var(--ops-frame-calibration), var(--ops-frame-calibration))
+      top left / 2.25rem 1px no-repeat,
+    linear-gradient(var(--ops-frame-calibration), var(--ops-frame-calibration))
+      top left / 1px 2.25rem no-repeat,
+    linear-gradient(
+        var(--ops-frame-calibration-muted),
+        var(--ops-frame-calibration-muted)
+      )
+      bottom right / 2.25rem 1px no-repeat,
+    linear-gradient(
+        var(--ops-frame-calibration-muted),
+        var(--ops-frame-calibration-muted)
+      )
+      bottom right / 1px 2.25rem no-repeat;
+  opacity: 0.8;
+}
+
+.ops-notch-frame-outer::after {
+  top: 0;
+  right: clamp(1.25rem, 4vw, 4rem);
+  width: clamp(2.5rem, 8vw, 7rem);
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ops-frame-calibration),
+    transparent
+  );
+  opacity: 0.62;
+}
+
 .ops-section-surface {
   background: var(
     --ops-section-surface-background,
@@ -661,6 +717,87 @@ h3,
   );
 }
 
+.ops-section-header {
+  position: relative;
+  padding-bottom: 1rem;
+}
+
+.ops-section-header::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    rgba(110, 231, 183, 0.28),
+    var(--color-ops-panel-border-strong) 42%,
+    transparent
+  );
+}
+
+.ops-section-title-block {
+  position: relative;
+  min-width: 0;
+  padding-left: 1rem;
+}
+
+.ops-section-title-block::before {
+  content: '';
+  position: absolute;
+  top: 0.15rem;
+  bottom: 0.1rem;
+  left: 0;
+  width: 3px;
+  background: linear-gradient(
+    180deg,
+    var(--color-ops-accent-muted),
+    var(--color-ops-accent-deep)
+  );
+  opacity: 0.72;
+  box-shadow: 0 0 14px rgba(110, 231, 183, 0.14);
+}
+
+.ops-section-title {
+  text-wrap: balance;
+}
+
+.ops-section-meta-panel {
+  --notch: var(--ops-notch-chip);
+  align-self: flex-start;
+  border: 1px solid var(--color-ops-panel-border-strong);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%),
+    rgba(10, 15, 13, 0.28);
+  padding: 0.75rem 0.875rem;
+  -webkit-clip-path: polygon(
+    var(--notch) 0,
+    100% 0,
+    100% calc(100% - var(--notch)),
+    calc(100% - var(--notch)) 100%,
+    0 100%,
+    0 var(--notch)
+  );
+  clip-path: polygon(
+    var(--notch) 0,
+    100% 0,
+    100% calc(100% - var(--notch)),
+    calc(100% - var(--notch)) 100%,
+    0 100%,
+    0 var(--notch)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
+}
+
+@media (max-width: 639px) {
+  .ops-section-meta-panel {
+    width: 100%;
+  }
+}
+
 .ops-section-emphasis-primary {
   --ops-section-frame-background: linear-gradient(
     180deg,
@@ -883,6 +1020,10 @@ h3,
   line-height: 1;
   letter-spacing: 0.06em;
   font-variant-numeric: var(--ops-numeric);
+  transition:
+    filter var(--ops-motion-fast),
+    box-shadow var(--ops-motion-fast),
+    transform var(--ops-motion-fast);
 }
 
 .ops-grid-nominal {
@@ -936,6 +1077,9 @@ h3,
 .ops-sector-spine-unmarked {
   --ops-sector-spine-width: 4px;
   --ops-sector-spine-color: var(--ops-status-unmarked-border);
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
   box-shadow:
     inset var(--ops-sector-spine-width) 0 0 var(--ops-sector-spine-color),
     inset 0 1px 0 rgba(255, 255, 255, 0.08),
@@ -944,6 +1088,7 @@ h3,
     0 0 0 1px rgba(255, 255, 255, 0.02);
   transition:
     box-shadow var(--ops-motion-fast),
+    background-color var(--ops-motion-fast),
     transform var(--ops-motion-fast);
 }
 
@@ -1011,12 +1156,14 @@ h3,
   box-shadow:
     var(--ops-elevation-1),
     0 0 0 1px rgba(255, 255, 255, 0.025);
+  transform: translateZ(0);
   transition:
     box-shadow var(--ops-motion-fast),
     transform var(--ops-motion-fast);
 }
 
-.ops-domain-card > div {
+.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%),
@@ -1028,8 +1175,47 @@ h3,
     var(--color-ops-surface-raised);
 }
 
+.ops-domain-card-inner::after {
+  content: '';
+  position: absolute;
+  right: 1rem;
+  bottom: 0;
+  left: 1rem;
+  height: 3px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ops-domain-card-status-rail) 18%,
+    var(--ops-domain-card-status-rail) 82%,
+    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%),
+    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%),
+    var(--color-ops-surface-raised);
+}
+
 .ops-domain-card:hover,
 .ops-domain-card:focus-within {
+  transform: translateY(-2px);
   box-shadow:
     var(--ops-elevation-2),
     0 0 0 1px rgba(110, 231, 183, 0.08);
@@ -1145,6 +1331,7 @@ h3,
 }
 
 .ops-surface-hero {
+  position: relative;
   background:
     linear-gradient(90deg, rgba(110, 231, 183, 0.07), transparent 32%),
     linear-gradient(
@@ -1156,6 +1343,35 @@ h3,
     var(--color-ops-surface-1);
 }
 
+.ops-surface-hero > * {
+  position: relative;
+  z-index: 1;
+}
+
+.ops-surface-hero::after {
+  content: '';
+  position: absolute;
+  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;
+}
+
 .ops-surface-horizon-card {
   background:
     linear-gradient(
@@ -1371,17 +1587,26 @@ h3,
 .ops-telemetry-chip {
   position: relative;
   overflow: hidden;
+  isolation: isolate;
   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%),
     rgba(10, 15, 13, 0.16);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.07),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
+    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
+  transition:
+    background-color var(--ops-motion-fast),
+    box-shadow var(--ops-motion-fast);
 }
 
 .ops-telemetry-chip-primary {
   background:
+    linear-gradient(90deg, rgba(183, 247, 218, 0.28), 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%),
     rgba(10, 15, 13, 0.18);
@@ -1390,6 +1615,13 @@ h3,
     inset 0 -1px 0 rgba(0, 0, 0, 0.34);
 }
 
+.ops-telemetry-chip[data-tone='accent'] {
+  box-shadow:
+    inset 3px 0 0 rgba(110, 231, 183, 0.44),
+    inset 0 1px 0 rgba(183, 247, 218, 0.16),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.34);
+}
+
 .ops-telemetry-label-row,
 .ops-telemetry-value-row {
   display: flex;
@@ -1405,11 +1637,28 @@ h3,
 
 .ops-telemetry-register {
   flex: 0 0 auto;
+  --notch: 4px;
   border: 1px solid var(--color-ops-panel-border-strong);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 46%),
     rgba(10, 15, 13, 0.42);
   padding: 0.175rem 0.4rem;
+  -webkit-clip-path: polygon(
+    var(--notch) 0,
+    100% 0,
+    100% calc(100% - var(--notch)),
+    calc(100% - var(--notch)) 100%,
+    0 100%,
+    0 var(--notch)
+  );
+  clip-path: polygon(
+    var(--notch) 0,
+    100% 0,
+    100% calc(100% - var(--notch)),
+    calc(100% - var(--notch)) 100%,
+    0 100%,
+    0 var(--notch)
+  );
   font-family: var(--font-mono);
   font-size: 0.625rem;
   font-weight: 600;
@@ -1420,6 +1669,9 @@ h3,
 
 .ops-telemetry-value {
   display: block;
+  text-shadow:
+    0 0 18px var(--ops-readout-glow),
+    0 1px 0 rgba(0, 0, 0, 0.72);
 }
 
 .ops-telemetry-value-primary {
@@ -1437,6 +1689,11 @@ h3,
 }
 
 .ops-telemetry-chip-attention {
+  background:
+    linear-gradient(90deg, rgba(245, 158, 11, 0.22), transparent 32%) left top /
+      100% 1px no-repeat,
+    linear-gradient(180deg, rgba(245, 158, 11, 0.055), transparent 44%),
+    rgba(10, 15, 13, 0.18);
   box-shadow:
     inset 3px 0 0 var(--ops-status-degraded-border),
     inset 0 1px 0 rgba(255, 255, 255, 0.06),
@@ -1581,12 +1838,18 @@ h3,
   overflow: hidden;
   border-radius: 2px;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
+  transform: translateZ(0);
   transition:
     box-shadow var(--ops-motion-fast),
     background-color var(--ops-motion-fast),
     border-color var(--ops-motion-fast),
     color var(--ops-motion-fast),
-    opacity var(--ops-motion-fast);
+    opacity var(--ops-motion-fast),
+    transform var(--ops-motion-fast);
+}
+
+.ops-radio-chip:not([aria-disabled='true']):hover {
+  transform: translateY(-1px);
 }
 
 .ops-radio-chip-ghost {
@@ -1698,7 +1961,15 @@ h3,
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 
+.ops-history-cell:hover .ops-grid-cell {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+
 .ops-history-today-header {
+  background:
+    linear-gradient(180deg, rgba(110, 231, 183, 0.105), transparent 62%),
+    var(--color-ops-surface-2);
   box-shadow:
     inset 0 3px 0 var(--ops-status-nominal-border),
     inset 1px 0 0 var(--ops-today-rail),
@@ -1707,6 +1978,9 @@ h3,
 }
 
 .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);
   box-shadow:
     inset 1px 0 0 var(--ops-today-rail),
     inset -1px 0 0 rgba(110, 231, 183, 0.26),
@@ -1782,9 +2056,32 @@ h3,
 }
 
 .ops-mobile-day-button {
+  transform: translateZ(0);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.055),
     inset 0 -1px 0 rgba(0, 0, 0, 0.28);
+  transition:
+    border-color var(--ops-motion-fast),
+    background-color var(--ops-motion-fast),
+    box-shadow var(--ops-motion-fast),
+    color var(--ops-motion-fast),
+    transform var(--ops-motion-fast);
+}
+
+.ops-mobile-day-button:hover {
+  transform: translateY(-1px);
+}
+
+.ops-mobile-day-button[aria-current='date'] {
+  border-color: color-mix(
+    in srgb,
+    var(--ops-status-nominal-border) 78%,
+    transparent
+  );
+  box-shadow:
+    inset 0 3px 0 var(--ops-status-nominal-border),
+    inset 0 0 0 1px rgba(110, 231, 183, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
 }
 
 .ops-mobile-day-button[aria-pressed='true'] {
@@ -2261,6 +2558,8 @@ h3,
 .ops-signal-card {
   --ops-signal-rail: var(--color-ops-border-struct);
   background:
+    linear-gradient(90deg, var(--ops-frame-calibration-muted), 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.035), transparent 44%),
     var(--color-ops-surface-raised);
@@ -2272,6 +2571,15 @@ h3,
     var(--ops-elevation-1);
 }
 
+.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%),
+    var(--color-ops-surface-raised);
+}
+
 .ops-signal-card-safe {
   --ops-signal-rail: var(--ops-status-nominal-border);
 }
@@ -2280,6 +2588,16 @@ h3,
   --ops-signal-rail: var(--color-ops-border-struct);
 }
 
+.ops-export-accordion {
+  transform: translateZ(0);
+}
+
+.ops-export-accordion[data-open='true'] {
+  box-shadow:
+    var(--ops-elevation-1),
+    0 0 0 1px rgba(110, 231, 183, 0.04);
+}
+
 .ops-export-accordion-trigger {
   --ops-accordion-cap-color: rgba(110, 231, 183, 0.32);
   position: relative;
@@ -2361,8 +2679,13 @@ h3,
   }
 
   .ops-action-button:hover,
+  .ops-domain-card:hover,
+  .ops-domain-card:focus-within,
   .ops-export-accordion-trigger-collapsed:hover,
-  .ops-history-cell:hover {
+  .ops-history-cell:hover,
+  .ops-history-cell:hover .ops-grid-cell,
+  .ops-mobile-day-button:hover,
+  .ops-radio-chip:not([aria-disabled='true']):hover {
     transform: none;
   }
 }
@@ -2381,6 +2704,7 @@ h3,
   .ops-flat-panel,
   .ops-flat-panel-strong,
   .ops-inline-alert,
+  .ops-section-meta-panel,
   .ops-alert-inner-info,
   .ops-alert-inner-warning,
   .ops-alert-inner-danger,
@@ -2408,6 +2732,7 @@ h3,
   .ops-mobile-day-button,
   .ops-grid-cell,
   .ops-history-selected-cell,
+  .ops-domain-card-inner,
   .ops-crash-fallback-shell,
   .ops-boot-fallback-shell {
     border: 1px solid CanvasText;
@@ -2432,6 +2757,11 @@ h3,
   .ops-rule-hairline,
   .ops-rollup-pip-cell::before,
   .ops-rollup-pip-indicator,
+  .ops-section-header::after,
+  .ops-section-title-block::before,
+  .ops-domain-card-inner::after,
+  .ops-notch-frame-outer::before,
+  .ops-notch-frame-outer::after,
   .ops-telemetry-spark-today-tick::after,
   .ops-history-brief-spark-selected::after,
   .ops-history-sector-row-header::before,

From 4594d59c991f08629dd7f82b1bc9479a73aefb43 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Wed, 6 May 2026 17:06:13 -0400
Subject: [PATCH 6/6] Enhance domainCard test with data-status check

Added assertion to check 'data-status' attribute in domainCard test.

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

diff --git a/tests/unit/domainCard.test.tsx b/tests/unit/domainCard.test.tsx
index 26f7b47..5d0f616 100644
--- a/tests/unit/domainCard.test.tsx
+++ b/tests/unit/domainCard.test.tsx
@@ -54,6 +54,10 @@ describe('DomainCard', () => {
       );
 
       expect(container.querySelector(`.${expectedClassName}`)).not.toBeNull();
+      expect(container.querySelector('[data-status]')).toHaveAttribute(
+        'data-status',
+        status,
+      );
     },
   );