refactor: reorganize Financials toolbar and flatten UI

- Group toolbar controls by function (Statement, Period, Mode, Scale)
- Move Trend Chart above Matrix, hidden by default
- Add chart toggle to toolbar actions
- Flatten all sections: remove card styling, use subtle dividers
- Update StatementRowInspector and NormalizationSummary with flat layout

components/dashboard/index-card-row.tsx

@@ -10,6 +10,8 @@ type IndexCardProps = {
   positive?: boolean;
 };
 
+export type { IndexCardProps };
+
 type IndexCardRowProps = {
   cards: IndexCardProps[];
   className?: string;

components/financials/financials-toolbar.tsx

@@ -1,10 +1,18 @@
-'use client';
+"use client";
 
-import { memo, useMemo, useCallback, useRef, useEffect, useState } from 'react';
+import {
-import { Download, Search } from 'lucide-react';
+  Fragment,
-import { Button } from '@/components/ui/button';
+  memo,
-import { Input } from '@/components/ui/input';
+  useMemo,
-import { cn } from '@/lib/utils';
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
+import { Download, Search, BarChart3 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 
 export type FinancialControlOption = {
   value: string;
@@ -24,10 +32,11 @@ export type FinancialsToolbarProps = {
   searchValue: string;
   onSearchChange: (value: string) => void;
   onExport?: () => void;
+  showChart?: boolean;
+  onToggleChart?: () => void;
   className?: string;
 };
 
-// Debounce hook
 function useDebounce<T>(value: T, delay: number): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
@@ -44,38 +53,67 @@ function useDebounce<T>(value: T, delay: number): T {
   return debouncedValue;
 }
 
+function ControlGroup({
+  children,
+  showDivider = false,
+}: {
+  children: React.ReactNode;
+  showDivider?: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      {showDivider && <div className="mr-1.5 h-5 w-px bg-[var(--line-weak)]" />}
+      {children}
+    </div>
+  );
+}
+
 function FinancialsToolbarComponent({
   sections,
   searchValue,
   onSearchChange,
   onExport,
-  className
+  showChart = false,
+  onToggleChart,
+  className,
 }: FinancialsToolbarProps) {
   const [localSearch, setLocalSearch] = useState(searchValue);
   const debouncedSearch = useDebounce(localSearch, 300);
 
-  // Sync debounced search to parent
   useEffect(() => {
     onSearchChange(debouncedSearch);
   }, [debouncedSearch, onSearchChange]);
 
-  // Sync parent search to local (if changed externally)
   useEffect(() => {
     setLocalSearch(searchValue);
   }, [searchValue]);
 
+  const groupedSections = useMemo(() => {
+    const statementKeys = ["surface"];
+    const periodKeys = ["cadence"];
+    const modeKeys = ["display"];
+    const scaleKeys = ["scale"];
+
+    return {
+      statement: sections.filter((s) => statementKeys.includes(s.key)),
+      period: sections.filter((s) => periodKeys.includes(s.key)),
+      mode: sections.filter((s) => modeKeys.includes(s.key)),
+      scale: sections.filter((s) => scaleKeys.includes(s.key)),
+    };
+  }, [sections]);
+
   return (
-    <div className={cn('flex flex-wrap items-center gap-2 pb-3 mb-3 border-b border-[var(--line-weak)]', className)}>
+    <div className={cn("flex flex-col gap-2", className)}>
-      {/* Control sections */}
+      <div className="flex flex-wrap items-center gap-y-2">
-      <div className="flex flex-wrap items-center gap-1.5">
+        <ControlGroup>
-        {sections.map((section) => (
+          {groupedSections.statement.map((section) => (
-          <div key={section.key} className="flex items-center gap-1">
+            <Fragment key={section.key}>
               {section.options.map((option) => {
                 const isActive = section.value === option.value;
                 return (
                   <Button
                     key={`${section.key}-${option.value}`}
-                  variant={isActive ? 'secondary' : 'ghost'}
+                    variant={isActive ? "secondary" : "ghost"}
                     size="compact"
                     onClick={() => section.onChange(option.value)}
                     className="text-xs"
@@ -84,14 +122,77 @@ function FinancialsToolbarComponent({
                   </Button>
                 );
               })}
-          </div>
+            </Fragment>
           ))}
-      </div>
+        </ControlGroup>
+
+        <ControlGroup showDivider>
+          {groupedSections.period.map((section) => (
+            <Fragment key={section.key}>
+              {section.options.map((option) => {
+                const isActive = section.value === option.value;
+                return (
+                  <Button
+                    key={`${section.key}-${option.value}`}
+                    variant={isActive ? "secondary" : "ghost"}
+                    size="compact"
+                    onClick={() => section.onChange(option.value)}
+                    className="text-xs"
+                  >
+                    {option.label}
+                  </Button>
+                );
+              })}
+            </Fragment>
+          ))}
+        </ControlGroup>
+
+        {groupedSections.mode.length > 0 && (
+          <ControlGroup showDivider>
+            {groupedSections.mode.map((section) => (
+              <Fragment key={section.key}>
+                {section.options.map((option) => {
+                  const isActive = section.value === option.value;
+                  return (
+                    <Button
+                      key={`${section.key}-${option.value}`}
+                      variant={isActive ? "secondary" : "ghost"}
+                      size="compact"
+                      onClick={() => section.onChange(option.value)}
+                      className="text-xs"
+                    >
+                      {option.label}
+                    </Button>
+                  );
+                })}
+              </Fragment>
+            ))}
+          </ControlGroup>
+        )}
+
+        <ControlGroup showDivider>
+          {groupedSections.scale.map((section) => (
+            <Fragment key={section.key}>
+              {section.options.map((option) => {
+                const isActive = section.value === option.value;
+                return (
+                  <Button
+                    key={`${section.key}-${option.value}`}
+                    variant={isActive ? "secondary" : "ghost"}
+                    size="compact"
+                    onClick={() => section.onChange(option.value)}
+                    className="text-xs"
+                  >
+                    {option.label}
+                  </Button>
+                );
+              })}
+            </Fragment>
+          ))}
+        </ControlGroup>
 
-      {/* Spacer */}
         <div className="flex-1" />
 
-      {/* Search and actions */}
         <div className="flex items-center gap-2">
           <div className="relative">
             <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-[var(--terminal-muted)]" />
@@ -100,9 +201,25 @@ function FinancialsToolbarComponent({
               value={localSearch}
               onChange={(e) => setLocalSearch(e.target.value)}
               inputSize="compact"
-            className="w-48 pl-7"
+              className="w-40 pl-7"
             />
           </div>
+
+          {onToggleChart && (
+            <Button
+              variant={showChart ? "secondary" : "ghost"}
+              size="compact"
+              onClick={onToggleChart}
+              className="gap-1.5"
+              aria-pressed={showChart}
+            >
+              <BarChart3 className="h-3.5 w-3.5" />
+              <span className="hidden sm:inline">
+                {showChart ? "Hide" : "Show"} Chart
+              </span>
+            </Button>
+          )}
+
           {onExport && (
             <Button
               variant="ghost"
@@ -116,6 +233,7 @@ function FinancialsToolbarComponent({
           )}
         </div>
       </div>
+    </div>
   );
 }
 

components/financials/normalization-summary.tsx

@@ -1,66 +1,103 @@
-'use client';
+"use client";
 
-import { AlertTriangle } from 'lucide-react';
+import { AlertTriangle } from "lucide-react";
-import { Panel } from '@/components/ui/panel';
+import type { NormalizationMetadata } from "@/lib/types";
-import type { NormalizationMetadata } from '@/lib/types';
+import { cn } from "@/lib/utils";
-import { cn } from '@/lib/utils';
 
 type NormalizationSummaryProps = {
   normalization: NormalizationMetadata;
 };
 
-function SummaryCard(props: {
+function SummaryField(props: {
   label: string;
   value: string;
-  tone?: 'default' | 'warning';
+  tone?: "default" | "warning";
 }) {
   return (
     <div
       className={cn(
-        'data-surface px-3 py-3',
+        "py-2",
-        props.tone === 'warning' && 'border-[#7f6250] bg-[linear-gradient(180deg,rgba(80,58,41,0.92),rgba(38,27,21,0.78))]'
+        props.tone === "warning" && "border-l-2 border-[#7f6250] pl-3",
       )}
     >
-      <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{props.label}</p>
+      <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
-      <p className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
+        {props.label}
+      </p>
+      <p
+        className={cn(
+          "text-sm font-semibold",
+          props.tone === "warning"
+            ? "text-[#ffd7bf]"
+            : "text-[color:var(--terminal-bright)]",
+        )}
+      >
+        {props.value}
+      </p>
     </div>
   );
 }
 
-export function NormalizationSummary({ normalization }: NormalizationSummaryProps) {
+export function NormalizationSummary({
+  normalization,
+}: NormalizationSummaryProps) {
   const hasMaterialUnmapped = normalization.materialUnmappedRowCount > 0;
   const hasWarnings = normalization.warnings.length > 0;
 
   return (
-    <Panel
+    <section className="border-t border-[color:var(--line-weak)] pt-4">
-      title="Normalization Summary"
+      <header className="mb-3">
-      subtitle="Pack, parser, and residual mapping health for the compact statement surface."
+        <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
-      variant="surface"
+          Normalization Summary
-    >
+        </h3>
-      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-8">
+        <p className="text-xs text-[color:var(--terminal-muted)]">
-        <SummaryCard label="Pack" value={normalization.fiscalPack ?? 'unknown'} />
+          Pack, parser, and residual mapping health for the compact statement
-        <SummaryCard label="Regime" value={normalization.regime} />
+          surface.
-        <SummaryCard label="Parser" value={`${normalization.parserEngine} ${normalization.parserVersion}`} />
+        </p>
-        <SummaryCard label="Surface Rows" value={String(normalization.surfaceRowCount)} />
+      </header>
-        <SummaryCard label="Detail Rows" value={String(normalization.detailRowCount)} />
+
-        <SummaryCard label="KPI Rows" value={String(normalization.kpiRowCount)} />
+      <div className="grid gap-x-6 gap-y-1 md:grid-cols-4 xl:grid-cols-8">
-        <SummaryCard label="Unmapped Rows" value={String(normalization.unmappedRowCount)} />
+        <SummaryField
-        <SummaryCard
+          label="Pack"
+          value={normalization.fiscalPack ?? "unknown"}
+        />
+        <SummaryField label="Regime" value={normalization.regime} />
+        <SummaryField
+          label="Parser"
+          value={`${normalization.parserEngine} ${normalization.parserVersion}`}
+        />
+        <SummaryField
+          label="Surface Rows"
+          value={String(normalization.surfaceRowCount)}
+        />
+        <SummaryField
+          label="Detail Rows"
+          value={String(normalization.detailRowCount)}
+        />
+        <SummaryField
+          label="KPI Rows"
+          value={String(normalization.kpiRowCount)}
+        />
+        <SummaryField
+          label="Unmapped Rows"
+          value={String(normalization.unmappedRowCount)}
+        />
+        <SummaryField
           label="Material Unmapped"
           value={String(normalization.materialUnmappedRowCount)}
-          tone={hasMaterialUnmapped ? 'warning' : 'default'}
+          tone={hasMaterialUnmapped ? "warning" : "default"}
         />
       </div>
+
       {hasWarnings ? (
-        <div className="mt-3 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
+        <div className="mt-3 border-t border-[color:var(--line-weak)] pt-3">
-          <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+          <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
             Parser Warnings
           </p>
           <div className="mt-2 flex flex-wrap gap-2">
             {normalization.warnings.map((warning) => (
               <span
                 key={warning}
-                className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
+                className="rounded border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-2 py-0.5 text-xs text-[color:var(--terminal-bright)]"
               >
                 {warning}
               </span>
@@ -68,12 +105,17 @@ export function NormalizationSummary({ normalization }: NormalizationSummaryProp
           </div>
         </div>
       ) : null}
+
       {hasMaterialUnmapped ? (
-        <div className="mt-3 flex items-start gap-2 rounded-xl border border-[#7f6250] bg-[rgba(91,66,46,0.18)] px-3 py-3 text-sm text-[#f5d5c0]">
+        <div className="mt-3 flex items-start gap-2 border-l-2 border-[#7f6250] pl-3 text-sm text-[#f5d5c0]">
           <AlertTriangle className="mt-0.5 size-4 shrink-0" />
-          <p>Material unmapped rows were detected for this filing set. Use the inspector and detail rows before relying on cross-company comparisons.</p>
+          <p>
+            Material unmapped rows were detected for this filing set. Use the
+            inspector and detail rows before relying on cross-company
+            comparisons.
+          </p>
         </div>
       ) : null}
-    </Panel>
+    </section>
   );
 }

components/financials/statement-row-inspector.tsx

@@ -1,86 +1,145 @@
-'use client';
+"use client";
 
-import { Panel } from '@/components/ui/panel';
 import type {
   DetailFinancialRow,
   DimensionBreakdownRow,
   FinancialStatementPeriod,
   FinancialSurfaceKind,
-  SurfaceFinancialRow
+  SurfaceFinancialRow,
-} from '@/lib/types';
+} from "@/lib/types";
-import type { ResolvedStatementSelection } from '@/lib/financials/statement-view-model';
+import type { ResolvedStatementSelection } from "@/lib/financials/statement-view-model";
 
 type StatementRowInspectorProps = {
   selection: ResolvedStatementSelection | null;
   dimensionRows: DimensionBreakdownRow[];
   periods: FinancialStatementPeriod[];
-  surfaceKind: Extract<FinancialSurfaceKind, 'income_statement' | 'balance_sheet' | 'cash_flow_statement'>;
+  surfaceKind: Extract<
-  renderValue: (row: SurfaceFinancialRow | DetailFinancialRow, periodId: string, previousPeriodId: string | null) => string;
+    FinancialSurfaceKind,
-  renderDimensionValue: (value: number | null, rowKey: string, unit: SurfaceFinancialRow['unit']) => string;
+    "income_statement" | "balance_sheet" | "cash_flow_statement"
+  >;
+  renderValue: (
+    row: SurfaceFinancialRow | DetailFinancialRow,
+    periodId: string,
+    previousPeriodId: string | null,
+  ) => string;
+  renderDimensionValue: (
+    value: number | null,
+    rowKey: string,
+    unit: SurfaceFinancialRow["unit"],
+  ) => string;
 };
 
-function InspectorCard(props: {
+function InspectorField(props: { label: string; value: string }) {
-  label: string;
-  value: string;
-}) {
   return (
-    <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
+    <div className="py-1.5">
-      <p className="text-[color:var(--terminal-muted)]">{props.label}</p>
+      <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
-      <p className="font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
+        {props.label}
+      </p>
+      <p className="text-sm font-medium text-[color:var(--terminal-bright)]">
+        {props.value}
+      </p>
     </div>
   );
 }
 
 function renderList(values: string[] | null | undefined) {
-  return (values ?? []).length > 0 ? (values ?? []).join(', ') : 'n/a';
+  return (values ?? []).length > 0 ? (values ?? []).join(", ") : "n/a";
 }
 
 export function StatementRowInspector(props: StatementRowInspectorProps) {
   const selection = props.selection;
-  const parentSurfaceLabel = selection?.kind === 'detail'
+  const parentSurfaceLabel =
-    ? selection.parentSurfaceRow?.label ?? (selection.row.parentSurfaceKey === 'unmapped' ? 'Unmapped / Residual' : selection.row.parentSurfaceKey)
+    selection?.kind === "detail"
+      ? (selection.parentSurfaceRow?.label ??
+        (selection.row.parentSurfaceKey === "unmapped"
+          ? "Unmapped / Residual"
+          : selection.row.parentSurfaceKey))
       : null;
 
   return (
-    <Panel
+    <section className="border-t border-[color:var(--line-weak)] pt-4">
-      title="Row Details"
+      <header className="mb-3">
-      subtitle="Inspect compact-surface resolution, raw drill-down rows, and dimensional evidence."
+        <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
-      variant="surface"
+          Row Details
-    >
+        </h3>
+        <p className="text-xs text-[color:var(--terminal-muted)]">
+          Inspect compact-surface resolution, raw drill-down rows, and
+          dimensional evidence.
+        </p>
+      </header>
+
       {!selection ? (
-        <p className="text-sm text-[color:var(--terminal-muted)]">Select a compact surface row or raw detail row to inspect details.</p>
+        <p className="text-sm text-[color:var(--terminal-muted)]">
-      ) : selection.kind === 'surface' ? (
+          Select a compact surface row or raw detail row to inspect details.
+        </p>
+      ) : selection.kind === "surface" ? (
         <div className="space-y-4 text-sm">
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
-            <InspectorCard label="Label" value={selection.row.label} />
+            <InspectorField label="Label" value={selection.row.label} />
-            <InspectorCard label="Key" value={selection.row.key} />
+            <InspectorField label="Key" value={selection.row.key} />
-            <InspectorCard label="Resolution" value={selection.row.resolutionMethod ?? 'direct'} />
+            <InspectorField
-            <InspectorCard label="Confidence" value={selection.row.confidence ?? 'high'} />
+              label="Resolution"
+              value={selection.row.resolutionMethod ?? "direct"}
+            />
+            <InspectorField
+              label="Confidence"
+              value={selection.row.confidence ?? "high"}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
-            <InspectorCard label="Source Row Keys" value={renderList(selection.row.sourceRowKeys)} />
+            <InspectorField
-            <InspectorCard label="Source Concepts" value={renderList(selection.row.sourceConcepts)} />
+              label="Source Row Keys"
+              value={renderList(selection.row.sourceRowKeys)}
+            />
+            <InspectorField
+              label="Source Concepts"
+              value={renderList(selection.row.sourceConcepts)}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
-            <InspectorCard label="Source Fact IDs" value={(selection.row.sourceFactIds ?? []).length > 0 ? (selection.row.sourceFactIds ?? []).join(', ') : 'n/a'} />
+            <InspectorField
-            <InspectorCard label="Warning Codes" value={renderList(selection.row.warningCodes ?? [])} />
+              label="Source Fact IDs"
+              value={
+                (selection.row.sourceFactIds ?? []).length > 0
+                  ? (selection.row.sourceFactIds ?? []).join(", ")
+                  : "n/a"
+              }
+            />
+            <InspectorField
+              label="Warning Codes"
+              value={renderList(selection.row.warningCodes ?? [])}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
-            <InspectorCard label="Child Surface Rows" value={selection.childSurfaceRows.length > 0 ? selection.childSurfaceRows.map((row) => row.label).join(', ') : 'None'} />
+            <InspectorField
-            <InspectorCard label="Raw Detail Rows" value={String(selection.detailRows.length)} />
+              label="Child Surface Rows"
+              value={
+                selection.childSurfaceRows.length > 0
+                  ? selection.childSurfaceRows
+                      .map((row) => row.label)
+                      .join(", ")
+                  : "None"
+              }
+            />
+            <InspectorField
+              label="Raw Detail Rows"
+              value={String(selection.detailRows.length)}
+            />
           </div>
 
           {selection.detailRows.length > 0 ? (
-            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
+            <div className="border-t border-[color:var(--line-weak)] pt-3">
-              <p className="text-[color:var(--terminal-muted)]">Raw Detail Labels</p>
+              <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+                Raw Detail Labels
+              </p>
               <div className="mt-2 flex flex-wrap gap-2">
                 {selection.detailRows.map((row) => (
                   <span
                     key={`${selection.row.key}-${row.key}`}
-                    className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
+                    className="rounded border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-2 py-0.5 text-xs text-[color:var(--terminal-bright)]"
                   >
                     {row.label}
                   </span>
@@ -91,8 +150,11 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
 
           {selection.row.hasDimensions ? (
             props.dimensionRows.length === 0 ? (
-              <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected compact row.</p>
+              <p className="text-sm text-[color:var(--terminal-muted)]">
+                No dimensional facts were returned for the selected compact row.
+              </p>
             ) : (
+              <div className="border-t border-[color:var(--line-weak)] pt-3">
                 <div className="data-table-wrap">
                   <table className="data-table min-w-[760px]">
                     <thead>
@@ -105,48 +167,89 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
                     </thead>
                     <tbody>
                       {props.dimensionRows.map((row, index) => (
-                      <tr key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}>
+                        <tr
-                        <td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
+                          key={`${selection.row.key}-${row.periodId}-${row.axis}-${row.member}-${index}`}
+                        >
+                          <td>
+                            {props.periods.find(
+                              (period) => period.id === row.periodId,
+                            )?.periodLabel ?? row.periodId}
+                          </td>
                           <td>{row.axis}</td>
                           <td>{row.member}</td>
-                        <td>{props.renderDimensionValue(row.value, selection.row.key, selection.row.unit)}</td>
+                          <td>
+                            {props.renderDimensionValue(
+                              row.value,
+                              selection.row.key,
+                              selection.row.unit,
+                            )}
+                          </td>
                         </tr>
                       ))}
                     </tbody>
                   </table>
                 </div>
+              </div>
             )
           ) : (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional drill-down is available for this compact surface row.</p>
+            <p className="text-sm text-[color:var(--terminal-muted)]">
+              No dimensional drill-down is available for this compact surface
+              row.
+            </p>
           )}
         </div>
       ) : (
         <div className="space-y-4 text-sm">
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1 md:grid-cols-4">
-            <InspectorCard label="Label" value={selection.row.label} />
+            <InspectorField label="Label" value={selection.row.label} />
-            <InspectorCard label="Key" value={selection.row.key} />
+            <InspectorField label="Key" value={selection.row.key} />
-            <InspectorCard label="Parent Surface" value={parentSurfaceLabel ?? selection.row.parentSurfaceKey} />
+            <InspectorField
-            <InspectorCard label="Residual" value={selection.row.residualFlag ? 'Yes' : 'No'} />
+              label="Parent Surface"
+              value={parentSurfaceLabel ?? selection.row.parentSurfaceKey}
+            />
+            <InspectorField
+              label="Residual"
+              value={selection.row.residualFlag ? "Yes" : "No"}
+            />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
-            <InspectorCard label="Concept Key" value={selection.row.conceptKey} />
+            <InspectorField
-            <InspectorCard label="QName" value={selection.row.qname} />
+              label="Concept Key"
+              value={selection.row.conceptKey}
+            />
+            <InspectorField label="QName" value={selection.row.qname} />
           </div>
 
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-1">
-            <InspectorCard label="Local Name" value={selection.row.localName} />
+            <InspectorField
-            <InspectorCard label="Source Fact IDs" value={(selection.row.sourceFactIds ?? []).length > 0 ? (selection.row.sourceFactIds ?? []).join(', ') : 'n/a'} />
+              label="Local Name"
+              value={selection.row.localName}
+            />
+            <InspectorField
+              label="Source Fact IDs"
+              value={
+                (selection.row.sourceFactIds ?? []).length > 0
+                  ? (selection.row.sourceFactIds ?? []).join(", ")
+                  : "n/a"
+              }
+            />
           </div>
 
-          <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
+          <div className="border-t border-[color:var(--line-weak)] pt-3">
-            <p className="text-[color:var(--terminal-muted)]">Dimensions Summary</p>
+            <InspectorField
-            <p className="font-semibold text-[color:var(--terminal-bright)]">{renderList(selection.row.dimensionsSummary)}</p>
+              label="Dimensions Summary"
+              value={renderList(selection.row.dimensionsSummary)}
+            />
           </div>
 
           {props.dimensionRows.length === 0 ? (
-            <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional facts were returned for the selected raw detail row.</p>
+            <p className="text-sm text-[color:var(--terminal-muted)]">
+              No dimensional facts were returned for the selected raw detail
+              row.
+            </p>
           ) : (
+            <div className="border-t border-[color:var(--line-weak)] pt-3">
               <div className="data-table-wrap">
                 <table className="data-table min-w-[760px]">
                   <thead>
@@ -159,19 +262,34 @@ export function StatementRowInspector(props: StatementRowInspectorProps) {
                   </thead>
                   <tbody>
                     {props.dimensionRows.map((row, index) => (
-                    <tr key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}>
+                      <tr
-                      <td>{props.periods.find((period) => period.id === row.periodId)?.periodLabel ?? row.periodId}</td>
+                        key={`${selection.row.parentSurfaceKey}-${selection.row.key}-${row.periodId}-${index}`}
+                      >
+                        <td>
+                          {props.periods.find(
+                            (period) => period.id === row.periodId,
+                          )?.periodLabel ?? row.periodId}
+                        </td>
                         <td>{row.axis}</td>
                         <td>{row.member}</td>
-                      <td>{props.renderDimensionValue(row.value, selection.row.key, props.surfaceKind === 'balance_sheet' ? 'currency' : 'currency')}</td>
+                        <td>
+                          {props.renderDimensionValue(
+                            row.value,
+                            selection.row.key,
+                            props.surfaceKind === "balance_sheet"
+                              ? "currency"
+                              : "currency",
+                          )}
+                        </td>
                       </tr>
                     ))}
                   </tbody>
                 </table>
               </div>
+            </div>
           )}
         </div>
       )}
-    </Panel>
+    </section>
   );
 }