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/financials/normalization-summary.tsx

@@ -1,66 +1,103 @@
-'use client';
+"use client";
 
-import { AlertTriangle } from 'lucide-react';
-import { Panel } from '@/components/ui/panel';
-import type { NormalizationMetadata } from '@/lib/types';
-import { cn } from '@/lib/utils';
+import { AlertTriangle } from "lucide-react";
+import type { NormalizationMetadata } from "@/lib/types";
+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',
-        props.tone === 'warning' && 'border-[#7f6250] bg-[linear-gradient(180deg,rgba(80,58,41,0.92),rgba(38,27,21,0.78))]'
+        "py-2",
+        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="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
+      <p className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+        {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
-      title="Normalization Summary"
-      subtitle="Pack, parser, and residual mapping health for the compact statement surface."
-      variant="surface"
-    >
-      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-8">
-        <SummaryCard label="Pack" value={normalization.fiscalPack ?? 'unknown'} />
-        <SummaryCard label="Regime" value={normalization.regime} />
-        <SummaryCard label="Parser" value={`${normalization.parserEngine} ${normalization.parserVersion}`} />
-        <SummaryCard label="Surface Rows" value={String(normalization.surfaceRowCount)} />
-        <SummaryCard label="Detail Rows" value={String(normalization.detailRowCount)} />
-        <SummaryCard label="KPI Rows" value={String(normalization.kpiRowCount)} />
-        <SummaryCard label="Unmapped Rows" value={String(normalization.unmappedRowCount)} />
-        <SummaryCard
+    <section className="border-t border-[color:var(--line-weak)] pt-4">
+      <header className="mb-3">
+        <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
+          Normalization Summary
+        </h3>
+        <p className="text-xs text-[color:var(--terminal-muted)]">
+          Pack, parser, and residual mapping health for the compact statement
+          surface.
+        </p>
+      </header>
+
+      <div className="grid gap-x-6 gap-y-1 md:grid-cols-4 xl:grid-cols-8">
+        <SummaryField
+          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">
-          <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+        <div className="mt-3 border-t border-[color:var(--line-weak)] pt-3">
+          <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>
   );
 }