From 63f72e610efd8d50d4b369eb384698a4163fe1f0 Mon Sep 17 00:00:00 2001
From: simonredfern <simon@tesobe.com>
Date: Sun, 4 Oct 2026 22:59:29 +0200
Subject: [PATCH 1/2] more standard web behaviour

---
 src/lib/components/Card.svelte | 65 +++++++++++-----------------------
 src/routes/+page.svelte        | 28 +++++++--------
 src/routes/design/+page.svelte |  3 +-
 3 files changed, 35 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index b52d551..f76d30c 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -16,8 +16,9 @@
 	 *
 	 * Two deliberate extensions to the upstream API, neither of which changes how
 	 * a plain Card renders:
-	 *   - `href` renders the card as an anchor, making the whole card one click
-	 *     target (upstream is always a <section>).
+	 *   - `href` makes the title a link (upstream has no link variant). Only the
+	 *     title is the link, not the whole card: text inside an anchor cannot be
+	 *     selected by dragging, and the subtitle and body must stay selectable.
 	 *   - `leading` is a snippet slot before the titles, for an icon.
 	 */
 	import type { Snippet } from 'svelte';
@@ -62,7 +63,8 @@
 			<div class="ogcr-card__titles">
 				{#if title}
 					<!-- svelte-ignore svelte_component_deprecated -->
-					<svelte:element this={`h${headingLevel}`} class="ogcr-card__title">{title}</svelte:element
+					<svelte:element this={`h${headingLevel}`} class="ogcr-card__title"
+						>{#if href}<a {href} class="ogcr-card__link">{title}</a>{:else}{title}{/if}</svelte:element
 					>
 				{/if}
 				{#if subtitle}
@@ -79,24 +81,13 @@
 	{/if}
 {/snippet}
 
-{#if href}
-	<a
-		{href}
-		class="ogcr-card ogcr-card--link ogcr-card--padding-{padding} {className}"
-		class:ogcr-card--floating={floating}
-		{...rest}
-	>
-		{@render inner()}
-	</a>
-{:else}
-	<section
-		class="ogcr-card ogcr-card--padding-{padding} {className}"
-		class:ogcr-card--floating={floating}
-		{...rest}
-	>
-		{@render inner()}
-	</section>
-{/if}
+<section
+	class="ogcr-card ogcr-card--padding-{padding} {className}"
+	class:ogcr-card--floating={floating}
+	{...rest}
+>
+	{@render inner()}
+</section>
 
 <style>
 	.ogcr-card {
@@ -126,38 +117,26 @@
 		box-shadow: var(--elevation-l);
 	}
 
-	/* Link cards lift on hover via elevation and a border shift — never a fill
-	   change, which would not survive a theme swap and reads as a state change
-	   rather than an affordance. */
-	.ogcr-card--link {
-		text-decoration: none;
+	/* The title link reads as the title, underlining on hover like any link. */
+	.ogcr-card__link {
 		color: inherit;
-		transition:
-			border-color var(--motion-fast),
-			box-shadow var(--motion-fast);
+		text-decoration: none;
 	}
-
-	.ogcr-card--link:hover {
-		border-color: var(--border-strong);
-		box-shadow: var(--elevation-l);
+	.ogcr-card__link:hover {
+		text-decoration: underline;
 	}
 
 	/* Two-stop focus ring, spec §8: an inner surface halo so the ring has
 	   breathing room without outline-offset, then the solid interaction tone
 	   at 4px, which clears the 3:1 minimum of WCAG SC 2.4.11. */
-	.ogcr-card--link:focus-visible {
+	.ogcr-card__link:focus-visible {
 		outline: none;
+		border-radius: var(--radius-s);
 		box-shadow:
 			0 0 0 2px var(--surface-light),
 			0 0 0 4px var(--interaction-primary-default);
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.ogcr-card--link {
-			transition: none;
-		}
-	}
-
 	.ogcr-card__header {
 		display: flex;
 		align-items: center;
@@ -236,11 +215,7 @@
 		color: var(--color-primary-200);
 	}
 
-	:global([data-mode='dark']) .ogcr-card--link:hover {
-		border-color: var(--color-surface-500);
-	}
-
-	:global([data-mode='dark']) .ogcr-card--link:focus-visible {
+	:global([data-mode='dark']) .ogcr-card__link:focus-visible {
 		box-shadow:
 			0 0 0 2px var(--color-surface-900),
 			0 0 0 4px var(--interaction-primary-default);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a495490..8d44227 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -47,18 +47,12 @@
 			icon: Link2,
 			title: 'Chain',
 			description: 'Inspect on-chain state and the sync status.'
-		},
-		{
-			href: '/design',
-			icon: Palette,
-			title: 'Design System',
-			description: 'Browse OGCR components and tokens.'
 		}
 	];
 
 	// Below the fold: this deployment's OBP data model, then its other OBP apps, wherever
-	// OBP's app directory says they are. Only the public MCP server is linked, never
-	// public_obp_mcp_internal_url.
+	// OBP's app directory says they are, then the app's own design system. Only the
+	// public MCP server is linked, never public_obp_mcp_internal_url.
 	const tools = $derived(
 		[
 			{
@@ -78,6 +72,12 @@
 				icon: Bot,
 				title: 'MCP Server',
 				description: 'Connect AI tools to the API.'
+			},
+			{
+				href: '/design',
+				icon: Palette,
+				title: 'Design System',
+				description: 'Browse OGCR components and tokens.'
 			}
 		].filter((tool): tool is typeof tool & { href: string } => tool.href !== null)
 	);
@@ -87,20 +87,18 @@
 	<title>OGCR DCR</title>
 </svelte:head>
 
-<!-- The app's own sections first; after a gap, the OBP tools of this deployment. -->
+<!-- The app's own sections first; after a gap, the technical environment of this deployment. -->
 <section class="flex w-full justify-center p-8">
 	<div class="w-full max-w-5xl">
 		<div class="text-center">
 			<img src="/ogcr_logo.svg" alt="OGCR" class="mx-auto mb-6 h-16" />
 			<h1 class="mb-6 h1">OGCR DCR</h1>
-			<p class="mb-4 text-xl text-surface-600-400">
-				Explore features and architecture of the OGCR DCR
+			<p class="mb-4 h3 text-surface-600-400">
+				Explore and Operate
 			</p>
 		</div>
 
-		<!-- 1 column on mobile, 2 on tablet, 3 on desktop (design system §3). Six
-		     cards divide evenly into three, where the four-column desktop maximum
-		     would leave a ragged 4 + 2. -->
+		<!-- 1 column on mobile, 2 on tablet, 3 on desktop (design system §3). -->
 		<nav aria-label="Sections" class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
 			{#each destinations as { href, icon: Icon, title, description } (href)}
 				<Card {href} {title} subtitle={description}>
@@ -116,7 +114,7 @@
 {#if tools.length > 0}
 	<section aria-labelledby="obp-tools" class="mt-16 flex w-full justify-center px-8 pb-12">
 		<div class="w-full max-w-5xl">
-			<h2 id="obp-tools" class="mb-6 text-center h3">Environment</h2>
+			<h2 id="obp-tools" class="mb-6 text-center h3">Technical Environment</h2>
 			<nav aria-labelledby="obp-tools" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
 				{#each tools as { href, icon: Icon, title, description } (title)}
 					<Card {href} {title} subtitle={description}>
diff --git a/src/routes/design/+page.svelte b/src/routes/design/+page.svelte
index 763c4cb..54d4a5e 100644
--- a/src/routes/design/+page.svelte
+++ b/src/routes/design/+page.svelte
@@ -727,7 +727,8 @@
 			<Card title="Link card" subtitle="app extension" href="/design" padding="l">
 				<p class="text-body-s" style="color: var(--text-secondary);">
 					<code>href</code> and the <code>leading</code> snippet are our two documented additions to the
-					upstream API. Hover lifts by elevation, never by fill.
+					upstream API. With <code>href</code> only the title is a link, so the rest of the card
+					stays selectable text.
 				</p>
 			</Card>
 		</div>

From af42ce76a120dba2c002183d08786bb90234b3dd Mon Sep 17 00:00:00 2001
From: simonredfern <simon@tesobe.com>
Date: Sun, 4 Oct 2026 23:08:46 +0200
Subject: [PATCH 2/2] layout

---
 src/routes/+page.svelte | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8d44227..112ac07 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -51,8 +51,8 @@
 	];
 
 	// Below the fold: this deployment's OBP data model, then its other OBP apps, wherever
-	// OBP's app directory says they are, then the app's own design system. Only the
-	// public MCP server is linked, never public_obp_mcp_internal_url.
+	// OBP's app directory says they are. Only the public MCP server is linked, never
+	// public_obp_mcp_internal_url.
 	const tools = $derived(
 		[
 			{
@@ -72,12 +72,6 @@
 				icon: Bot,
 				title: 'MCP Server',
 				description: 'Connect AI tools to the API.'
-			},
-			{
-				href: '/design',
-				icon: Palette,
-				title: 'Design System',
-				description: 'Browse OGCR components and tokens.'
 			}
 		].filter((tool): tool is typeof tool & { href: string } => tool.href !== null)
 	);
@@ -87,7 +81,7 @@
 	<title>OGCR DCR</title>
 </svelte:head>
 
-<!-- The app's own sections first; after a gap, the technical environment of this deployment. -->
+<!-- The app's own sections first; then the technical environment of this deployment; the design system last. -->
 <section class="flex w-full justify-center p-8">
 	<div class="w-full max-w-5xl">
 		<div class="text-center">
@@ -112,7 +106,7 @@
 </section>
 
 {#if tools.length > 0}
-	<section aria-labelledby="obp-tools" class="mt-16 flex w-full justify-center px-8 pb-12">
+	<section aria-labelledby="obp-tools" class="mt-16 flex w-full justify-center px-8">
 		<div class="w-full max-w-5xl">
 			<h2 id="obp-tools" class="mb-6 text-center h3">Technical Environment</h2>
 			<nav aria-labelledby="obp-tools" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -127,3 +121,17 @@
 		</div>
 	</section>
 {/if}
+
+<section aria-labelledby="design" class="mt-16 flex w-full justify-center px-8 pb-12">
+	<div class="w-full max-w-5xl">
+		<h2 id="design" class="mb-6 text-center h3">Design</h2>
+		<!-- One card, centred at the width of one column of the grids above. -->
+		<nav aria-labelledby="design" class="mx-auto grid max-w-sm grid-cols-1">
+			<Card href="/design" title="Design System" subtitle="Browse OGCR components and tokens.">
+				{#snippet leading()}
+					<Palette class="size-6" aria-hidden="true" />
+				{/snippet}
+			</Card>
+		</nav>
+	</div>
+</section>