From 35057be4d75475772806041a5c8dc920b4643aae Mon Sep 17 00:00:00 2001
From: Kieran Klukas <kieran@dunkirk.sh>
Date: Wed, 5 Aug 2026 15:57:28 -0400
Subject: [PATCH] style: match consent resource block to the page's visual
 vocabulary

The RFC 8707 resource block was written in a different dialect than the rest
of the consent page: rounded corners in a square-cornered brutalist layout, a
nonexistent --rule token falling back to a cold white border in a warm plum
palette, px sizing, and no panel around it while its peer section was boxed.

- .resources takes the same panel treatment as .scopes
- .resource-logo mirrors .app-logo (2.25rem, 0.5rem radius, paper-dim wash)
- .resource-name/.resource-host mirror .app-name/.app-url at smaller scale
- borders use var(--paper-dim); px to rem
---
 src/lib/oauth/pages.ts | 48 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/lib/oauth/pages.ts b/src/lib/oauth/pages.ts
index b9719b0..fa1a2f0 100644
--- a/src/lib/oauth/pages.ts
+++ b/src/lib/oauth/pages.ts
@@ -234,19 +234,49 @@ const CONSENT_STYLES = `
 		letter-spacing: 0.1rem;
 		margin-bottom: 0.75rem;
 	}
-	.resources { margin-bottom: 1.25rem; }
+	.resources {
+		margin-bottom: 1.75rem;
+		padding: 1.25rem;
+		background: rgba(12, 23, 19, 0.4);
+		border: 1px solid var(--paper-dim);
+	}
 	.resource {
-		display: flex; align-items: center; gap: 0.75rem;
-		padding: 0.6rem 0.75rem; border: 1px solid var(--rule, rgba(255,255,255,0.12));
-		border-radius: 0.6rem; margin-bottom: 0.4rem;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.625rem;
 	}
+	.resource + .resource { margin-top: 0.25rem; }
 	.resource-logo {
-		width: 32px; height: 32px; flex: none; display: flex; align-items: center;
-		justify-content: center; font-size: 1.1rem; border-radius: 0.4rem; overflow: hidden;
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 0.5rem;
+		background: rgba(188, 141, 160, 0.2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		overflow: hidden;
+		font-size: 1rem;
+	}
+	.resource-logo img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.resource-info { flex: 1; min-width: 0; }
+	.resource-name {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--paper);
+		line-height: 1.2;
+	}
+	.resource-host {
+		font-size: 0.8125rem;
+		color: var(--paper-dim);
+		font-family: monospace;
+		margin-top: 0.25rem;
 	}
-	.resource-logo img { width: 100%; height: 100%; object-fit: cover; }
-	.resource-name { font-weight: 600; font-size: 0.9rem; }
-	.resource-host { font-size: 0.75rem; color: var(--paper-dim); }
 	.scope-list {
 		list-style: none;
 		display: flex;
-- 
2.51.2