Premium Visual Refinement: Cockpit Instrument Polish

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(' ')}
       >

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' : '',

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}

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}`}
       >