Simplify metric cards and tag contrast

Author: Edwin Chan

CENTRAL.md

@@ -33,7 +33,7 @@ Stack: Next.js, NextAuth (Google + dev bypass), Prisma, KaTeX for math, Lucide i
 
 ### Recently landed
 
-- **Hand-drawn visual system** — `app/globals.css` now provides paper/ink design tokens, graph-paper backgrounds, asymmetric squircle cards and controls, marker-color accents, and irregular badges/tabs. Shared surfaces use native asymmetric borders instead of `border-image`, which created rigid grey rectangles outside rounded controls. Dark structural borders are intentionally quieter, and search inputs are borderless at rest with one cyan focus stroke instead of cyan-plus-yellow highlighting. Global wavy eyebrow/title underlines remain removed. A signed-in production Chrome audit of `/problem-sets/1991-ajhsme` also removed percentage shape paths from variable-height panels, fixed oversized panel-header geometry, and removed the blue statement band. Desktop navigation is a 64 px icon rail that expands to 240 px on hover/focus, while mobile retains the stable off-canvas sheet. The simplified Sigma in `public/dbsmo-mark.svg` is shared by favicon metadata and the landing brand. `app/layout.tsx` loads Shantell Sans for display/control text while Inter remains the body and math font. Route-specific coverage was visually audited across dashboard, problem catalog/detail, writeups, practice, classes, leaderboard, users/profiles, settings, and admin surfaces; FTW and Playground were intentionally excluded. Unsupported browsers retain ordinary border/radius fallbacks; details are in `docs/visual-system.md`.
+- **Hand-drawn visual system** — `app/globals.css` now provides paper/ink design tokens, graph-paper backgrounds, asymmetric squircle cards and controls, marker-color accents, and irregular badges/tabs. Shared surfaces use native asymmetric borders instead of `border-image`, which created rigid grey rectangles outside rounded controls. Metric cards use the same neutral border on every edge instead of decorative colored strips. Dark structural borders are intentionally quieter, search inputs are borderless at rest with one cyan focus stroke, and selected problem-set tag counts use opaque ink/paper colors for readable contrast. Global wavy eyebrow/title underlines remain removed. A signed-in production Chrome audit of `/problem-sets/1991-ajhsme` also removed percentage shape paths from variable-height panels, fixed oversized panel-header geometry, and removed the blue statement band. Desktop navigation is a 64 px icon rail that expands to 240 px on hover/focus, while mobile retains the stable off-canvas sheet. The simplified Sigma in `public/dbsmo-mark.svg` is shared by favicon metadata and the landing brand. `app/layout.tsx` loads Shantell Sans for display/control text while Inter remains the body and math font. Route-specific coverage was visually audited across dashboard, problem catalog/detail, writeups, practice, classes, leaderboard, users/profiles, settings, and admin surfaces; FTW and Playground were intentionally excluded. Unsupported browsers retain ordinary border/radius fallbacks; details are in `docs/visual-system.md`.
 - **Mobile/classes cleanup** — fixed mobile `/problem-sets` hiding task rows by restoring the responsive card table, stabilized the mobile sidebar grid to avoid icon reflow on tap/focus, and made dashboard auth/actions render as a compact mobile account card. `/classes` now has a teacher/admin `Announcements` subtab that lists existing class messages and supports author/admin deletion. Display-name fallbacks now treat literal `"null"`/`"undefined"` strings as empty via `lib/display-name.ts`.
 - **Mobile sidebar focus fix** — mobile sidebar sheet geometry now remains stable under `:hover`, `:focus`, and `:focus-within`, preventing the nav grid from jumping upward when a mobile tap focuses one of the upper links (source: `app/globals.css`).
 - **Answer previews and LaTeX grading** — Practice and problem-set answer boxes now render a small KaTeX preview above the input using `mathInputToTex(...)`. `lib/grading.ts` normalizes math delimiters and common LaTeX forms through `lib/math-input.ts`, so expression answers and answer keys can use `$...$`, `\sqrt{...}`, coefficients before functions like `5\sqrt{2}-7`, `\frac{...}{...}`, braced powers, and `\pi`.

DBSMO/Projects/dbsmo/Common Tasks.md

@@ -19,6 +19,8 @@ Start with the final `Hand-drawn shape system` and `Hand-drawn route coverage` s
 
 The public sign-in sketch markup lives in `app/page.tsx`. Keep it `aria-hidden` because it is decorative. Inter/Shantell Sans variables are configured in `app/layout.tsx`; do not apply the handwriting font to answer inputs, equations, or long body copy. Shared hand-drawn outlines use native borders with asymmetric radii and progressive `corner-shape`; do not restore `border-image`, because it paints rigid rectangular frames outside squircles. Update light and dark ink tokens together and test desktop plus mobile widths. Search inputs should remain borderless at rest inside the search panel and use one cyan focus border without an additional outline. Never use percentage-based `border-shape` paths on variable-height panels: a 7,000 px problem panel turns a 1% path offset into 70 px. Do not restore global wavy eyebrow/title underlines. Include a long problem set in visual QA. The current route audit excludes FTW and Playground. Implementation/support notes are in `docs/visual-system.md`.
 
+Metric cards are deliberately neutral summary surfaces. Add new metrics with only `metric-card`; do not add `accent-*` classes or colored edge borders. Selected problem-set category counts use an opaque `--paper-raised` background and `--ink` text so both themes retain readable contrast (source: `app/globals.css`).
+
 ## Add or Change an Answer Type
 
 Edit:

DBSMO/Projects/dbsmo/Components.md

@@ -30,7 +30,7 @@ This note maps important [[dbsmo]] UI/components to their source files and usage
 ## Student Dashboard and Catalog
 
 - `DashboardPage` in `app/dashboard/page.tsx`: server-rendered dashboard that loads current user, class announcements, visible sets, attempts, student rows for admins, computes completion/score/topic metrics, and renders pinned announcements, metric cards, next actions, and recent set rows.
-- `MetricCard` in `app/dashboard/page.tsx`: local component for dashboard metric cards.
+- `MetricCard` in `app/dashboard/page.tsx`: local component for dashboard metric cards. Dashboard and admin metric cards intentionally share a neutral border without per-card colored edge accents (sources: `app/dashboard/page.tsx`, `app/admin/analytics/page.tsx`, `app/admin/feedback/page.tsx`, `app/admin/sets/[id]/analytics/page.tsx`, `app/admin/students/[id]/page.tsx`, `app/globals.css`).
 - `AssignmentsWidget` in `app/dashboard/assignments-widget.tsx`: client component that fetches `/api/assignments/mine`, sorts assignments, and renders up to five dashboard assignment links.
 - `ProblemSetsPage` in `app/problem-sets/page.tsx`: route page that handles catalog filtering/sorting/views/recommendations/pagination and renders set cards/links.
 - `ProblemSetPage` in `app/problem-sets/[slug]/page.tsx`: route page that loads a set by slug and chooses inline-statement vs PDF/file layout.

README.md

@@ -60,5 +60,6 @@ Session updates from the CodeGraph/Second Brain indexing pass onward:
 - Replaced regex-based math splitting with an escape-aware tokenizer, fixing HTML-style `<math>\$2000</math>` imports such as 1996 AJHSME question 18; added conservative package-style aliases and security regression coverage for hostile HTML, trusted KaTeX commands, recursive macros, and macro leakage.
 - Fixed every unsupported expression found in a production sweep of the 1985-1998 AJHSME sets: position-qualified `tabular` layouts now convert to safe KaTeX arrays for 1987 Q8/Q23, 1989 Q14/Q22, 1990 Q9, and 1991 Q6. Added safely portable MathLive notation aliases without enabling HTML/resource-loading commands.
 - Removed the rectangular `border-image` frames that appeared outside existing rounded controls, simplified search focus to one cyan stroke, and softened repeated structural borders in dark mode.
+- Removed colored edge accents from every metric card and increased selected problem-set tag count contrast in both themes.
 
 © 2026 Cosmic Crusader

app/admin/analytics/page.tsx

@@ -566,35 +566,35 @@ export default async function AnalyticsOverviewPage({
         />
 
         <section className="metric-grid analytics-metric-grid" aria-label="Overview metrics">
-          <article className="metric-card accent-cyan">
+          <article className="metric-card">
             <small>Total responses</small>
             <strong>{totalResponses}</strong>
           </article>
-          <article className="metric-card accent-purple">
+          <article className="metric-card">
             <small>Overall accuracy</small>
             <strong>{overallAccuracy}%</strong>
           </article>
-          <article className="metric-card accent-pink">
+          <article className="metric-card">
             <small>First attempt avg</small>
             <strong>{firstAttemptAccuracy}%</strong>
           </article>
-          <article className="metric-card accent-orange">
+          <article className="metric-card">
             <small>Best attempt avg</small>
             <strong>{bestAttemptAccuracy}%</strong>
           </article>
-          <article className="metric-card accent-cyan">
+          <article className="metric-card">
             <small>Active last 7d</small>
             <strong>{activeStudentCount}</strong>
           </article>
-          <article className="metric-card accent-purple">
+          <article className="metric-card">
             <small>Attempts last 7d</small>
             <strong>{recentAttemptCount}</strong>
           </article>
-          <article className="metric-card accent-pink">
+          <article className="metric-card">
             <small>Topics tracked</small>
             <strong>{topics.length}</strong>
           </article>
-          <article className="metric-card accent-orange">
+          <article className="metric-card">
             <small>Problem sets</small>
             <strong>{problemSets.length}</strong>
           </article>

app/admin/feedback/page.tsx

@@ -86,15 +86,15 @@ export default async function AdminFeedbackPage({
             <small>Total reports</small>
             <strong>{counts.all}</strong>
           </article>
-          <article className="metric-card accent-pink">
+          <article className="metric-card">
             <small>Open</small>
             <strong>{counts.open}</strong>
           </article>
-          <article className="metric-card accent-orange">
+          <article className="metric-card">
             <small>Reviewing</small>
             <strong>{counts.reviewing}</strong>
           </article>
-          <article className="metric-card accent-purple">
+          <article className="metric-card">
             <small>Resolved</small>
             <strong>{counts.resolved}</strong>
           </article>

app/admin/sets/[id]/analytics/page.tsx

@@ -81,19 +81,19 @@ export default async function SetAnalyticsPage({ params }: Props) {
           </div>
         </header>
         <section className="metric-grid" aria-label="Set analytics">
-          <article className="metric-card accent-cyan">
+          <article className="metric-card">
             <small>Total attempts</small>
             <strong>{set.attempts.length}</strong>
           </article>
-          <article className="metric-card accent-purple">
+          <article className="metric-card">
             <small>Unique students</small>
             <strong>{students.size}</strong>
           </article>
-          <article className="metric-card accent-pink">
+          <article className="metric-card">
             <small>Average score</small>
             <strong>{avg}%</strong>
           </article>
-          <article className="metric-card accent-orange">
+          <article className="metric-card">
             <small>Questions</small>
             <strong>{set.problems.length}</strong>
           </article>

app/admin/students/[id]/page.tsx

@@ -73,19 +73,19 @@ export default async function StudentDetailPage({ params, searchParams }: Props)
           </div>
         </header>
         <section className="metric-grid" aria-label="Student metrics">
-          <article className="metric-card accent-cyan">
+          <article className="metric-card">
             <small>Sets attempted</small>
             <strong>{sets.size}</strong>
           </article>
-          <article className="metric-card accent-purple">
+          <article className="metric-card">
             <small>Average score</small>
             <strong>{avg}%</strong>
           </article>
-          <article className="metric-card accent-pink">
+          <article className="metric-card">
             <small>Best score</small>
             <strong>{best}%</strong>
           </article>
-          <article className="metric-card accent-orange">
+          <article className="metric-card">
             <small>Total attempts</small>
             <strong>{n}</strong>
           </article>

app/dashboard/page.tsx

@@ -391,15 +391,11 @@ export default async function DashboardPage() {
         <AssignmentsWidget />
 
         <section className="metric-grid" aria-label="Student progress metrics">
-          <MetricCard
-            label="Attempted"
-            value={`${completedSets}/${totalSets || 0}`}
-            accent="grey"
-          />
-          <MetricCard label="Best average" value={`${averageScore}%`} accent="grey" />
-          <MetricCard label="Latest score" value={`${latestScore}%`} accent="grey" />
+          <MetricCard label="Attempted" value={`${completedSets}/${totalSets || 0}`} />
+          <MetricCard label="Best average" value={`${averageScore}%`} />
+          <MetricCard label="Latest score" value={`${latestScore}%`} />
           {currentUser.role === "ADMIN" ? (
-            <MetricCard label="Open reports" value={`${openReports}`} accent="grey" />
+            <MetricCard label="Open reports" value={`${openReports}`} />
           ) : null}
         </section>
 
@@ -574,17 +570,9 @@ export default async function DashboardPage() {
   );
 }
 
-function MetricCard({
-  label,
-  value,
-  accent,
-}: {
-  label: string;
-  value: string;
-  accent: "cyan" | "purple" | "pink" | "orange" | "black" | "grey";
-}) {
+function MetricCard({ label, value }: { label: string; value: string }) {
   return (
-    <article className={`metric-card accent-${accent}`}>
+    <article className="metric-card">
       <small>{label}</small>
       <strong>{value}</strong>
     </article>

app/globals.css

@@ -598,7 +598,6 @@ body.has-site-sidebar .app-footer {
   border-radius: var(--radius-card);
   background: var(--color-card-bg);
   box-shadow: var(--shadow-soft);
-  border-top: 5px solid var(--color-cyan);
   transition:
     transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
     box-shadow 220ms ease;
@@ -645,26 +644,6 @@ body.has-site-sidebar .app-footer {
   text-transform: uppercase;
 }
 
-.accent-purple {
-  border-top-color: var(--color-purple);
-}
-
-.accent-pink {
-  border-top-color: var(--color-pink);
-}
-
-.accent-orange {
-  border-top-color: var(--color-orange);
-}
-
-.accent-black {
-  border-top-color: var(--color-black);
-}
-
-.accent-grey {
-  border-top-color: var(--color-grey);
-}
-
 .content-grid,
 .problem-layout,
 .import-layout {
@@ -3206,23 +3185,9 @@ html {
 }
 
 .metric-card {
-  border-top: 0;
-  border-left: 4px solid var(--color-cyan);
   background: rgba(255, 255, 255, 0.96);
 }
 
-.accent-purple {
-  border-left-color: var(--color-purple);
-}
-
-.accent-pink {
-  border-left-color: var(--color-pink);
-}
-
-.accent-orange {
-  border-left-color: var(--color-orange);
-}
-
 .text-link {
   color: var(--color-blue);
 }
@@ -10764,22 +10729,6 @@ html:is(.light, .dark)
   text-wrap: balance;
 }
 
-html:is(.light, .dark) .metric-card {
-  border-left: 5px solid var(--marker-cyan);
-}
-
-html:is(.light, .dark) .metric-card.accent-purple {
-  border-left-color: var(--color-purple);
-}
-
-html:is(.light, .dark) .metric-card.accent-pink {
-  border-left-color: var(--marker-pink);
-}
-
-html:is(.light, .dark) .metric-card.accent-orange {
-  border-left-color: var(--marker-yellow);
-}
-
 .problem-jump-button,
 .answer-nav-button {
   border: 2px solid var(--ink-soft);
@@ -11429,6 +11378,12 @@ html:is(.light, .dark) .class-announcement-targets label:has(input:checked) {
   color: var(--ink);
 }
 
+html:is(.light, .dark) .category-pill.active .category-pill-count {
+  border: 1px solid var(--ink-soft);
+  background: var(--paper-raised);
+  color: var(--ink);
+}
+
 html:is(.light, .dark)
   :is(
     .search-panel input,