failproofai 0.0.11-beta.2 → 0.0.11-beta.3

package/.next/standalone/app/globals.css

@@ -1,78 +1,187 @@
+/* ============================================================
+   failproof_ai — unified design system
+   Single source of truth for fonts, color palette, and every
+   class that used to live in app/audit/audit-styles.css for the
+   /audit page only. After this change those classes (.section,
+   .share-btn, .btn-press, …) are available on every route, and
+   navigating between /audit and /policies no longer leaks
+   one-off resets in either direction.
+
+   IMPORTANT: every `@import` MUST come before any other rule,
+   per the CSS spec. `@import "tailwindcss"` inlines thousands
+   of utility rules at its position, so font @imports go above
+   it — putting them after silently breaks the build with a
+   PostCSS "must precede all rules" error.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=VT323&display=swap');
 @import "tailwindcss";
 
+@font-face {
+  font-family: 'Bitcount Prop Single';
+  src: url('/audit/fonts/bitcount-prop-single.woff2') format('woff2');
+  font-display: swap;
+  font-weight: 400;
+  font-style: normal;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.5rem;
-
-  /* Near-black canvas + brand pink accent — failproofai brand: pink primary
-     (#e4587d, from docs/docs.json colors.light) with green status reserved
-     for chart-2 / success indicators (the leaf gradient family). */
-  --background: #0a0a0a;
-  --foreground: #fafafa;
-  --card: #141416;
-  --card-foreground: #fafafa;
-  --popover: #141416;
-  --popover-foreground: #fafafa;
-  --primary: #e4587d;
-  --primary-foreground: #0a0a0a;
-  --secondary: #1f1f22;
-  --secondary-foreground: #fafafa;
-  --muted: #1f1f22;
-  --muted-foreground: #a1a1aa;
-  --accent: #e4587d;
+  /* ── audit-native tokens (used by .section / .share-btn / etc.) ── */
+  --bg: #131316;
+  --bg-2: #0e0e11;
+  --bg-3: #1a1a1f;
+  --bg-row-hover: #17171c;
+  --ink: #d8d6d2;
+  --ink-2: #9a9892;
+  --dim: #5e5c58;
+  --line: #25252b;
+  --line-2: #32323a;
+  --accent-pink: #e4587d;
+  --accent-pink-soft: rgba(228, 88, 125, 0.7);
+  --accent-pink-shadow: #a83a5a;
+  --accent-pink-bg: rgba(228, 88, 125, 0.12);
+  --accent-green: #66d1b5;
+  --accent-green-shadow: #3e9a82;
+  --accent-green-bg: rgba(102, 209, 181, 0.10);
+  --amber: #e8c46a;
+  --amber-bg: rgba(232, 196, 106, 0.10);
+
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --font-display: "Bitcount Prop Single", "VT323", "JetBrains Mono", monospace;
+
+  /* ── shadcn-compatible aliases (used by Tailwind utilities + the
+     hooks-client component tree). All point at the audit palette so
+     `bg-card`, `text-foreground`, `border-border`, etc. produce
+     audit visuals everywhere without rewriting any class names. ── */
+  --radius: 0;
+  --background: var(--bg);
+  --foreground: var(--ink);
+  --card: var(--bg-2);
+  --card-foreground: var(--ink);
+  --popover: var(--bg-2);
+  --popover-foreground: var(--ink);
+  --primary: var(--accent-pink);
+  --primary-foreground: var(--bg);
+  --secondary: var(--bg-3);
+  --secondary-foreground: var(--ink);
+  --muted: var(--bg-3);
+  --muted-foreground: var(--ink-2);
+  --accent: var(--accent-pink);
   --accent-light: #f08aa6;
   --accent-lighter: #f7b3c5;
   --accent-lightest: #fbd5de;
-  --accent-foreground: #0a0a0a;
-  --destructive: #ef4444;
-  --border: #27272a;
-  --input: #27272a;
-  --ring: #e4587d;
-  --chart-1: #e4587d;
-  --chart-2: #4ade80;
-  --chart-3: #fbbf24;
+  --accent-foreground: var(--bg);
+  --destructive: var(--accent-pink);
+  --border: var(--line);
+  --input: var(--line-2);
+  --ring: var(--accent-pink);
+  --chart-1: var(--accent-pink);
+  --chart-2: var(--accent-green);
+  --chart-3: var(--amber);
   --chart-4: #f87171;
   --chart-5: #a78bfa;
-  --sidebar: #141416;
-  --sidebar-foreground: #fafafa;
-  --sidebar-primary: #e4587d;
-  --sidebar-primary-foreground: #0a0a0a;
-  --sidebar-accent: #1f1f22;
-  --sidebar-accent-foreground: #fafafa;
-  --sidebar-border: #27272a;
-  --sidebar-ring: #e4587d;
+  --sidebar: var(--bg-2);
+  --sidebar-foreground: var(--ink);
+  --sidebar-primary: var(--accent-pink);
+  --sidebar-primary-foreground: var(--bg);
+  --sidebar-accent: var(--bg-3);
+  --sidebar-accent-foreground: var(--ink);
+  --sidebar-border: var(--line);
+  --sidebar-ring: var(--accent-pink);
 }
 
-/* Custom Scrollbar Styling */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+* { box-sizing: border-box; }
+
+html, body, #root {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 16px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
 }
 
-::-webkit-scrollbar-track {
-  background: var(--muted);
-  border-radius: var(--radius);
+body {
+  background-color: var(--bg);
+  background-image:
+    radial-gradient(ellipse 1200px 800px at 70% -10%, rgba(228, 88, 125, 0.055) 0%, transparent 60%),
+    radial-gradient(ellipse 1000px 700px at 0% 100%, rgba(102, 209, 181, 0.04) 0%, transparent 55%),
+    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.45) 100%),
+    linear-gradient(180deg, #16161a 0%, #0f0f12 100%);
+  background-attachment: fixed;
+  position: relative;
 }
 
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: var(--radius);
-  transition: background 0.2s ease;
+button { font-family: inherit; cursor: pointer; }
+a { color: inherit; }
+
+/* engineering-plate cross-hatch + grain — site-wide atmosphere */
+body::before {
+  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
+  background-image:
+    linear-gradient(0deg, rgba(255,255,255,0.018) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(255,255,255,0.012) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
+  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
+  opacity: 0.7;
+}
+body::after {
+  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.82  0 0 0 0 0.78  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+  opacity: 0.4;
+  mix-blend-mode: overlay;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: var(--primary);
+body > * {
+  position: relative;
+  z-index: 3;
 }
 
-::-webkit-scrollbar-corner {
-  background: var(--muted);
+/* shrink scrollbars without breaking the dark theme */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: var(--bg-2); }
+::-webkit-scrollbar-thumb { background: var(--line-2); }
+::-webkit-scrollbar-thumb:hover { background: var(--accent-pink); }
+* { scrollbar-width: thin; scrollbar-color: var(--line-2) var(--bg-2); }
+
+input[type="checkbox"] { accent-color: var(--accent-pink); }
+select { color-scheme: dark; }
+select option { background-color: var(--bg-2); color: var(--ink); }
+input[type="date"] { color-scheme: dark; }
+
+/* selection — pink wash ties prose snippets and code-like fragments to the
+   accent without redesigning anything; used app-wide. */
+::selection {
+  background: var(--accent-pink-bg);
+  color: var(--accent-light);
+}
+::-moz-selection {
+  background: var(--accent-pink-bg);
+  color: var(--accent-light);
 }
 
-/* Firefox scrollbar styling */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) var(--muted);
+/* focus-visible — keyboard users get a clear pink ring on every interactive
+   element. Pointer users see nothing different (`:focus-visible` only fires
+   on keyboard-driven focus). Bracketed outline + outline-offset matches the
+   pixel-craft chrome (no rounded glow). */
+:where(a, button, [role="button"], input, textarea, select, summary, [tabindex]):focus-visible {
+  outline: 1px solid var(--accent-pink);
+  outline-offset: 2px;
+}
+.btn:focus-visible,
+.tab:focus-visible {
+  outline: 1px solid var(--accent-pink);
+  outline-offset: 3px;
+}
+.btn-press:focus-visible {
+  outline: 1px solid var(--accent-pink);
+  outline-offset: 4px;
 }
 
 @theme inline {
@@ -82,8 +191,8 @@
   --color-accent-light: var(--accent-light);
   --color-accent-lighter: var(--accent-lighter);
   --color-accent-lightest: var(--accent-lightest);
-  --font-sans: var(--font-sans, system-ui, -apple-system, sans-serif);
-  --font-mono: var(--font-mono, ui-monospace, monospace);
+  --font-sans: var(--font-mono);
+  --font-mono: var(--font-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -112,10 +221,10 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
 }
 
 @layer base {
@@ -123,96 +232,382 @@
     @apply border-border outline-ring/50;
   }
   html {
-    font-size: 120%;
+    font-size: 100%;
   }
-  body {
-    @apply bg-background text-foreground font-sans;
+}
 
-    position: relative;
-  }
-  /* Faint pink vignette at the top — atmosphere without ornament. */
-  body::before {
-    content: "";
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: 0;
-    background:
-      radial-gradient(ellipse 90% 60% at 50% -10%, rgba(228, 88, 125, 0.07), transparent 65%);
-  }
-  body > * {
-    position: relative;
-    z-index: 1;
-  }
-  input[type="checkbox"] {
-    accent-color: var(--primary);
-  }
+/* ───────────────────────── app chrome (shared) ───────────────────────── */
 
-  select {
-    color-scheme: dark;
-  }
+.app-shell { position: relative; z-index: 3; min-height: 100vh; display: flex; flex-direction: column; }
 
-  select option {
-    background-color: var(--popover);
-    color: var(--popover-foreground);
-  }
+.app-header {
+  display: flex; align-items: center; gap: 16px;
+  padding: 14px 32px;
+  border-bottom: 1px solid var(--line);
+  background: rgba(10,10,10,0.85);
+  backdrop-filter: blur(8px);
+  position: sticky; top: 0; z-index: 50;
+}
+.h-brand { display: inline-flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
+.h-brand-mark {
+  color: var(--accent-pink);
+  font-family: var(--font-mono);
+  font-size: 18px;
+  letter-spacing: -3px;
+  font-weight: 700;
+  line-height: 1;
+}
+.h-brand-name {
+  font-family: var(--font-display);
+  font-size: 18px;
+  letter-spacing: 0.11em;
+  text-transform: lowercase;
+  color: var(--ink);
+}
+.h-brand-sep { color: var(--dim); font-size: 12px; }
+.h-brand-section {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+}
+.h-actions { display: flex; align-items: center; gap: 8px; }
 
-  /* Date Input Styling */
-  input[type="date"] {
-    position: relative;
-    overflow: visible;
-    color-scheme: dark;
-  }
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 7px 12px;
+  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
+  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
+  /* limit transitioned props so width/height/font don't animate, and use the
+     same cubic-bezier curve as .audit-bar-fill for a coherent motion feel */
+  transition:
+    color 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
+  white-space: nowrap;
+}
+.btn:hover { border-color: var(--ink); background: rgba(255,255,255,0.03); }
+.btn:active { transform: translateY(1px); }
+.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn[aria-disabled="true"]:hover, .btn:disabled:hover { border-color: var(--line-2); background: transparent; }
+.btn-primary { border-color: var(--accent-pink); color: var(--accent-pink); }
+.btn-primary:hover { background: var(--accent-pink); color: var(--bg); }
+.btn-press {
+  box-shadow: 4px 4px 0 0 var(--accent-pink-shadow);
+  transition:
+    box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 140ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.btn-press:hover { box-shadow: 2px 2px 0 0 var(--accent-pink-shadow); transform: translate(2px, 2px); }
+.btn-press:active { box-shadow: 0 0 0 0 var(--accent-pink-shadow); transform: translate(4px, 4px); }
 
-  input[type="date"]::-webkit-calendar-picker-indicator {
-    display: none;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    width: 0;
-    height: 0;
-    cursor: pointer;
-  }
+/* primary tab strip — used by both the audit page and the policies/projects nav rows */
+.tabs {
+  display: flex; gap: 0; padding: 0 24px;
+  border-bottom: 1px solid var(--line);
+  overflow-x: auto; scrollbar-width: none;
+}
+.tabs::-webkit-scrollbar { display: none; }
+.tab {
+  position: relative;
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 16px;
+  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
+  color: var(--ink-2);
+  border-bottom: 1px solid transparent; margin-bottom: -1px;
+  transition:
+    color 160ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
+  white-space: nowrap;
+  background: transparent;
+}
+.tab:hover { color: var(--ink); }
+/* faint underline preview on hover — emerges from center on inactive tabs;
+   active state keeps the existing sharp full-width pink line. */
+.tab::after {
+  content: "";
+  position: absolute;
+  left: 16px; right: 16px; bottom: -1px;
+  height: 1px;
+  background: var(--accent-pink);
+  transform: scaleX(0);
+  transform-origin: center;
+  opacity: 0.4;
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.tab:hover::after { transform: scaleX(1); }
+.tab.is-active { color: var(--accent-pink); border-bottom-color: var(--accent-pink); }
+.tab.is-active::after { display: none; }
 
-  input[type="date"]::-webkit-datetime-edit {
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    padding: 0;
-    gap: 0;
-  }
+/* ───────────────────────── canonical page chrome ───────────────────────── */
 
-  input[type="date"]::-webkit-datetime-edit-text {
-    color: var(--muted-foreground);
-    padding: 0 0.2rem;
-  }
+/* the canonical content shell. Scales to fill ultrawide monitors without
+   collapsing on mobile or letting prose lines get unreadable. The cap at
+   1840px keeps the line measure for tabular pages (policies activity,
+   sessions list) comfortably below "scan back to start of next row" length
+   on a 2560px display. Side gutter is clamped 20→56px so the chrome breathes
+   on big screens without crowding small ones. */
+.report {
+  width: 100%;
+  max-width: clamp(720px, 96vw, 1840px);
+  margin: 0 auto;
+  padding: 0 clamp(20px, 3vw, 56px);
+}
 
-  input[type="date"]::-webkit-datetime-edit-month-field,
-  input[type="date"]::-webkit-datetime-edit-day-field {
-    color: var(--foreground);
-    padding: 0 0.15rem;
-    width: 2.5ch;
-    min-width: 2.5ch;
-  }
+.section {
+  padding: 64px 0;
+  border-bottom: 1px solid var(--line);
+  position: relative;
+}
+.section:last-child { border-bottom: none; }
 
-  input[type="date"]::-webkit-datetime-edit-year-field {
-    color: var(--foreground);
-    padding: 0 0.15rem;
-    width: 5ch;
-    min-width: 5ch;
-    max-width: 5ch;
-    overflow: visible;
-  }
+.section-mast {
+  display: flex; align-items: baseline; justify-content: space-between;
+  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
+}
+.section-label {
+  font-family: var(--font-mono);
+  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
+  color: var(--accent-green);
+  display: inline-flex; align-items: baseline; gap: 10px;
+}
+.section-label .glyph { color: var(--accent-pink); letter-spacing: -2px; }
+.section-meta {
+  font-family: var(--font-mono);
+  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
+  color: var(--dim);
+}
+.section-meta .g { color: var(--accent-green); }
+.section-meta .p { color: var(--accent-pink); }
+.section-h {
+  font-family: var(--font-display);
+  font-size: clamp(28px, 4vw, 44px);
+  line-height: 1.05; letter-spacing: 0.11em;
+  font-weight: 400; color: var(--ink);
+  margin: 0 0 18px;
+  text-transform: lowercase;
+  text-wrap: balance;
+}
 
-  input[type="date"]::-webkit-datetime-edit-month-field:focus,
-  input[type="date"]::-webkit-datetime-edit-day-field:focus,
-  input[type="date"]::-webkit-datetime-edit-year-field:focus {
-    background-color: var(--muted);
-    color: var(--foreground);
-    border-radius: 0.25rem;
-  }
+.section-h-dot {
+  display: inline-block;
+  width: 0.5em; height: 0.5em;
+  border-radius: 50%;
+  background: var(--accent-green);
+  margin-left: 0.45em;
+  vertical-align: middle;
+  animation: section-h-dot-pulse 1.6s ease-in-out infinite;
+}
+@keyframes section-h-dot-pulse {
+  0%, 100% { opacity: 0.35; box-shadow: 0 0 3px var(--accent-green); }
+  50%      { opacity: 1;    box-shadow: 0 0 14px var(--accent-green); }
 }
 
+/* ───────────────────────── activity table styles ─────────────────────────
+   /policies activity tab. Lives next to the new .stat-bar + .filter-bar so
+   the table feels like the third panel of the same instrument family.    */
+
+.activity-table-wrap {
+  border: 1px solid var(--line-2);
+  border-top: 0;
+  background: var(--bg-2);
+}
+.activity-table { width: 100%; }
+.activity-thead { background: var(--bg-3); }
+.activity-thead tr { border-bottom: 1px solid var(--line-2); }
+.activity-th {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: var(--accent-green);
+  text-align: left;
+}
+.activity-th.text-right { text-align: right; }
+
+/* zebra rhythm — adds ambient banding without breaking the dark feel.
+   Hover overrides the stripe so rows feel responsive. */
+.activity-table tbody tr.activity-row-stripe { background: rgba(255, 255, 255, 0.012); }
+
+/* expanded-row treatment */
+.activity-detail {
+  border-left: 3px solid var(--accent-pink);
+  background: var(--bg);
+  padding: 16px 22px 18px;
+}
+.activity-detail-eyebrow {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-pink);
+  margin-bottom: 10px;
+  display: inline-flex; align-items: baseline; gap: 6px;
+}
+
+/* ───────────────────────── instrument strip (.stat-bar) ─────────────────────
+   3-cell brutalist stats row used by /policies activity. Spans the full
+   container so the top of the view feels composed at every width.
+   Each cell carries a small green eyebrow caption above a big mono numeral.
+   On narrow viewports the grid collapses to a single column.            */
+
+.stat-bar {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+}
+.stat-bar::before,
+.stat-bar::after { content: ""; position: absolute; width: 10px; height: 10px; }
+.stat-bar::before {
+  top: -1px; left: -1px;
+  border-top: 1px solid var(--accent-pink);
+  border-left: 1px solid var(--accent-pink);
+}
+.stat-bar::after {
+  bottom: -1px; right: -1px;
+  border-bottom: 1px solid var(--accent-pink);
+  border-right: 1px solid var(--accent-pink);
+}
+.stat-cell {
+  padding: 18px 24px;
+  border-right: 1px dashed var(--line);
+  display: flex; flex-direction: column; gap: 6px;
+  min-width: 0;
+}
+.stat-cell:last-child { border-right: none; }
+.stat-cell .eyebrow {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+}
+.stat-cell .eyebrow .glyph { color: var(--accent-pink); letter-spacing: -2px; margin-right: 6px; }
+.stat-cell .value {
+  font-family: var(--font-mono);
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+.stat-cell .value.is-deny { color: var(--accent-pink); }
+.stat-cell .value.is-warn { color: var(--amber); }
+.stat-cell .meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--dim);
+  letter-spacing: 0.05em;
+  /* let .meta values that contain a slash (e.g. policy paths) ellipsis */
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+@media (max-width: 800px) {
+  .stat-bar { grid-template-columns: 1fr; }
+  .stat-cell { border-right: none; border-bottom: 1px dashed var(--line); }
+  .stat-cell:last-child { border-bottom: none; }
+}
+
+/* ───────────────────────── filter console (.filter-bar) ──────────────────
+   Elastic row of `.filter-group`s. Each group stacks a small green eyebrow
+   label above its control. `.filter-group--grow` absorbs leftover space so
+   the text inputs naturally fill the remaining horizontal room.          */
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px 16px;
+  padding: 14px 16px;
+  background: var(--bg-2);
+  border: 1px solid var(--line-2);
+  border-top: 0;
+}
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.filter-group--grow { flex: 1 1 220px; }
+.filter-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+}
+.filter-input {
+  height: 30px;
+  width: 100%;
+  padding: 0 10px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line-2);
+  outline: none;
+  transition: border-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.filter-input::placeholder { color: var(--dim); }
+.filter-input:focus { border-color: var(--accent-pink); }
+.filter-clear {
+  align-self: flex-end;
+  /* sits at the same baseline as the inputs; matches .btn but smaller */
+  padding: 6px 10px;
+  font-family: var(--font-mono); font-size: 12px;
+  color: var(--accent-pink);
+  background: transparent;
+  border: 1px dashed var(--accent-pink-soft);
+}
+.filter-clear:hover { background: var(--accent-pink-bg); border-color: var(--accent-pink); }
+
+/* ───────────────────────── reusable bracket panel ───────────────────────── */
+
+.panel {
+  position: relative;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  padding: 28px;
+  transition:
+    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.panel::before,
+.panel::after {
+  transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1),
+              height 200ms cubic-bezier(0.22, 1, 0.36, 1),
+              border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.panel::before {
+  content: ""; position: absolute; top: -1px; left: -1px;
+  width: 10px; height: 10px;
+  border-top: 1px solid var(--accent-pink);
+  border-left: 1px solid var(--accent-pink);
+}
+.panel::after {
+  content: ""; position: absolute; bottom: -1px; right: -1px;
+  width: 10px; height: 10px;
+  border-bottom: 1px solid var(--accent-pink);
+  border-right: 1px solid var(--accent-pink);
+}
+/* opt-in interactive flavour: hovering grows the corner brackets and softens
+   the panel border. Apply to clickable card-like panels (e.g. project rows). */
+.panel.is-interactive { cursor: pointer; }
+.panel.is-interactive:hover { border-color: var(--line); }
+.panel.is-interactive:hover::before,
+.panel.is-interactive:hover::after { width: 16px; height: 16px; }
+.panel.is-interactive:focus-within { border-color: var(--accent-pink-soft); }
+
+/* ───────────────────────── animations (preserved from previous globals) ───────────────────────── */
+
 @keyframes entry-highlight {
   0%   { background-color: color-mix(in oklch, var(--primary), transparent 82%); }
   100% { background-color: transparent; }
@@ -221,7 +616,6 @@
   animation: entry-highlight 3s ease-out forwards;
   outline: 1px solid color-mix(in oklch, var(--primary), transparent 55%);
   outline-offset: -1px;
-  border-radius: var(--radius);
 }
 
 @keyframes expand-in {
@@ -231,3 +625,42 @@
 .animate-expand {
   animation: expand-in 150ms ease-out;
 }
+
+@keyframes audit-row-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.audit-row-enter {
+  opacity: 0;
+  animation: audit-row-in 400ms ease-out forwards;
+  animation-delay: var(--row-delay, 0ms);
+}
+
+@keyframes audit-bar-fill {
+  from { width: 0; }
+  to   { width: var(--bar-width, 100%); }
+}
+.audit-bar-fill {
+  width: var(--bar-width, 100%);
+  animation: audit-bar-fill 1000ms cubic-bezier(0.22, 1, 0.36, 1);
+  animation-delay: var(--bar-delay, 0ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .audit-row-enter,
+  .audit-bar-fill {
+    animation: none;
+    opacity: 1;
+  }
+  .section-h-dot {
+    animation: none;
+  }
+  .tab::after,
+  .panel,
+  .panel::before,
+  .panel::after,
+  .btn,
+  .btn-press {
+    transition: none;
+  }
+}