Further elevate OpsNormal visual polish

src/App.tsx

@@ -239,7 +239,8 @@ function App() {
                   className="hidden w-3 shrink-0 flex-col items-center self-stretch sm:flex"
                   aria-hidden="true"
                 >
-                  <span className="h-14 w-0.5 bg-ops-accent/60" />
+                  <span className="h-16 w-0.5 bg-ops-accent/75 shadow-[0_0_16px_rgba(110,231,183,0.22)]" />
+                  <span className="mt-2 h-8 w-px bg-ops-accent-border" />
                   <span className="mt-2 h-full w-px flex-1 bg-ops-border-struct" />
                 </div>
                 <div className="min-w-0">
@@ -264,6 +265,7 @@ function App() {
                   </p>
                 </div>
               </div>
+              <div className="h-px bg-ops-border-soft" aria-hidden="true" />
               <ErrorBoundary
                 fallbackRender={() => (
                   <HeaderTelemetryFallback
@@ -367,10 +369,10 @@ function App() {
         <NotchedFrame
           emphasis="quiet"
           notch="shell"
-          innerClassName="tactical-subpanel px-4 py-4 text-sm leading-6 text-ops-text-secondary"
+          innerClassName="tactical-subpanel px-4 py-4 text-sm leading-7 text-ops-text-secondary"
         >
           <footer>
-            <div className="border-t border-ops-border-soft pt-5">
+            <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">

src/components/DomainCard.tsx

@@ -148,7 +148,7 @@ export function DomainCard({
     <div className={shellClassName}>
       <div
         className={[
-          'clip-notched ops-notch-panel-inner tactical-panel flex min-h-[14rem] 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-[15rem]',
+          '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]',
           spineClassName,
         ].join(' ')}
       >
@@ -168,16 +168,16 @@ export function DomainCard({
               />
               <span>{sector.shortLabel}</span>
             </span>
-            <h3 className="mt-1.5 text-lg font-semibold tracking-[0.08em] text-ops-text-primary uppercase">
+            <h3 className="mt-2 text-lg font-semibold tracking-[0.08em] text-ops-text-primary uppercase">
               {sector.label}
             </h3>
-            <p className="mt-2.5 text-sm leading-6 text-ops-text-secondary">
+            <p className="mt-3 text-sm leading-6 text-ops-text-secondary">
               {sector.description}
             </p>
           </div>
         </div>
 
-        <div className="mt-5">
+        <div className="mt-6">
           <div className="ops-sector-caption border-t border-ops-border-soft pt-3">
             <span>{busy ? 'SAVING' : 'STATE'}</span>
           </div>

src/components/FooterProvenance.tsx

@@ -5,10 +5,10 @@ const REPO_URL = 'https://github.com/bradsaucier/opsnormal';
 export function FooterProvenance() {
   return (
     <div
-      className="ops-provenance flex flex-col gap-3 sm:w-full sm:max-w-sm sm:self-end"
+      className="ops-provenance flex flex-col gap-3 sm:w-full sm:max-w-sm sm:self-end lg:items-end"
       data-testid="footer-provenance"
     >
-      <p className="ops-eyebrow font-semibold text-ops-text-primary">
+      <p className="ops-eyebrow-strong font-semibold text-ops-text-primary">
         Provenance
       </p>
       <dl className="ops-provenance-facts">

src/components/HeaderTelemetry.tsx

@@ -60,19 +60,19 @@ function TelemetryChip({
   return (
     <div
       className={[
-        'ops-telemetry-chip flex min-h-[var(--ops-chip-min-h-lg)] flex-col justify-between px-3 py-3 text-left lg:px-4',
+        'ops-telemetry-chip flex min-h-[var(--ops-chip-min-h-lg)] flex-col justify-between px-3 py-3.5 text-left lg:px-4',
         isShimmering ? 'ops-telemetry-chip-shimmer' : '',
         toneClassNameByTone[tone],
       ].join(' ')}
     >
-      <span className="ops-eyebrow text-[10px] font-semibold text-ops-text-muted">
+      <span className="ops-eyebrow text-[10px] font-semibold tracking-[0.14em] text-ops-text-muted">
         {label}
       </span>
       <span className="mt-2 text-2xl leading-none font-semibold tracking-[0.04em] uppercase [font-variant-numeric:tabular-nums] sm:text-3xl">
         {value}
       </span>
       {detail ? (
-        <span className="mt-2 text-[10px] leading-4 tracking-[0.10em] text-ops-text-muted uppercase">
+        <span className="mt-2 text-[10px] leading-4 tracking-[0.12em] text-ops-text-muted uppercase">
           {detail}
         </span>
       ) : null}
@@ -84,7 +84,7 @@ function TelemetryHorizon({ children }: { children: ReactNode }) {
   return (
     <div className="clip-notched ops-notch-panel-outer bg-ops-border-struct p-px">
       <div className="clip-notched ops-notch-panel-inner tactical-subpanel bg-[linear-gradient(180deg,rgba(255,255,255,0.035),rgba(110,231,183,0.035)_32%,rgba(255,255,255,0)_54%),var(--color-ops-surface-overlay)]">
-        <div className="grid lg:grid-cols-[11rem_minmax(0,1fr)]">
+        <div className="grid lg:grid-cols-[10rem_minmax(0,1fr)] xl:grid-cols-[11rem_minmax(0,1fr)]">
           <div className="border-b border-ops-border-soft px-3 py-3 lg:border-r lg:border-b-0 lg:px-4">
             <p className="ops-eyebrow-strong ops-mono text-xs font-semibold text-ops-accent-muted">
               Status horizon

src/components/SectionCard.tsx

@@ -35,8 +35,10 @@ export function SectionCard({
               </h2>
             </div>
             {meta ? (
-              <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">
-                {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">
+                  {meta}
+                </div>
               </div>
             ) : null}
           </div>

src/features/checkin/TodayPanel.tsx

@@ -246,7 +246,7 @@ 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 sm:gap-4 md:grid-cols-3 lg:grid-cols-3 lg:gap-5 xl:grid-cols-5">
         {SECTORS.map((sector, index) => (
           <div key={sector.id}>
             <DomainCard

src/styles/index.css

@@ -423,11 +423,15 @@ h3,
 }
 
 .ops-history-edge-left {
-  background: linear-gradient(to right, var(--ops-fade-edge), transparent);
+  background:
+    linear-gradient(to right, rgba(110, 231, 183, 0.1), transparent 38%),
+    linear-gradient(to right, var(--ops-fade-edge), transparent);
 }
 
 .ops-history-edge-right {
-  background: linear-gradient(to left, var(--ops-fade-edge), transparent);
+  background:
+    linear-gradient(to left, rgba(110, 231, 183, 0.1), transparent 38%),
+    linear-gradient(to left, var(--ops-fade-edge), transparent);
 }
 
 .history-scroll-shell-mobile {
@@ -762,21 +766,21 @@ h3,
 }
 
 .ops-telemetry-grid > .ops-telemetry-chip {
-  border-top: 1px solid var(--color-ops-border-soft);
+  border-top: 1px solid var(--color-ops-panel-border-strong);
 }
 
 .ops-telemetry-grid > .ops-telemetry-chip:nth-child(-n + 2) {
   border-top: 0;
 }
 
 .ops-telemetry-grid > .ops-telemetry-chip:nth-child(odd) {
-  border-right: 1px solid var(--color-ops-border-soft);
+  border-right: 1px solid var(--color-ops-panel-border-strong);
 }
 
 @media (min-width: 1024px) {
   .ops-telemetry-grid > .ops-telemetry-chip {
     border-top: 0;
-    border-right: 1px solid var(--color-ops-border-soft);
+    border-right: 1px solid var(--color-ops-panel-border-strong);
   }
 
   .ops-telemetry-grid > .ops-telemetry-chip:last-child {
@@ -935,7 +939,8 @@ h3,
 
 .ops-history-selected-cell {
   box-shadow:
-    0 0 0 1px rgba(110, 231, 183, 0.28),
+    0 0 0 1px rgba(110, 231, 183, 0.34),
+    0 0 18px rgba(110, 231, 183, 0.12),
     inset 0 0 0 1.5px var(--ops-focus-ring);
 }
 
@@ -1054,6 +1059,9 @@ h3,
       rgba(255, 255, 255, 0) 68%
     ),
     var(--ops-button-bg-hover);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
 }
 
 .ops-action-button:focus-visible {
@@ -1065,11 +1073,15 @@ h3,
 
 .ops-action-button:disabled {
   cursor: not-allowed;
-  opacity: 0.7;
-  --ops-button-border: rgba(255, 255, 255, 0.1);
+  opacity: 0.55;
+  --ops-button-border: rgba(255, 255, 255, 0.08);
   --ops-button-bg: rgba(255, 255, 255, 0.04);
   --ops-button-bg-hover: rgba(255, 255, 255, 0.04);
-  --ops-button-text: #a1a1aa;
+  --ops-button-text: var(--color-ops-text-muted);
+}
+
+.ops-action-button:disabled:hover {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 .ops-action-button-subtle {