Blame · Line-by-line history

`layout.tsx`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

layout.tsxBlame3681 lines · 6 contributors

Normal view Raw

fc1817aClaude	1	import type { FC, PropsWithChildren } from "hono/jsx";
06d5ffeClaude	2	import type { User } from "../db/schema";
	3	import { hljsThemeCss } from "../lib/highlight";
45e31d0Claude	4	import { clientJs } from "./client-js";
05cdb85Claude	5	import { getBuildInfo } from "../lib/build-info";
fc1817aClaude	6
06d5ffeClaude	7	export const Layout: FC<
3ef4c9dClaude	8	PropsWithChildren<{
	9	title?: string;
	10	user?: User \| null;
	11	notificationCount?: number;
6fc53bdClaude	12	theme?: "dark" \| "light";
5f2e749Claude	13	// Block L10 — additive SEO + Open Graph fields. All optional;
	14	// omission preserves the prior render exactly (regression-safe).
	15	fullTitle?: string;
	16	description?: string;
	17	ogTitle?: string;
	18	ogDescription?: string;
	19	ogType?: string;
	20	twitterCard?: "summary" \| "summary_large_image";
c63b860Claude	21	// Block O3 — site-wide footer banner stripe. When non-empty,
	22	// renders below the footer-bottom row; wired from
	23	// admin.system_flags.site_banner_text.
	24	siteBannerText?: string;
	25	siteBannerLevel?: "info" \| "warn" \| "error";
3ef4c9dClaude	26	}>
5f2e749Claude	27	> = ({
	28	children,
	29	title,
	30	user,
	31	notificationCount,
	32	theme,
	33	fullTitle,
	34	description,
	35	ogTitle,
	36	ogDescription,
	37	ogType,
	38	twitterCard,
c63b860Claude	39	siteBannerText,
	40	siteBannerLevel,
5f2e749Claude	41	}) => {
81201ccTest User	42	// Default to "light" — feedback from operators was the dark default
	43	// felt too gamer-ish and not what senior platform engineers expect from
	44	// a tool they'd evaluate alongside Vercel / Linear / Stripe. Users who
	45	// explicitly want dark can flip via the theme toggle (cookie persists).
	46	const initialTheme = theme === "dark" ? "dark" : "light";
05cdb85Claude	47	const build = getBuildInfo();
5f2e749Claude	48	// L10 — when `fullTitle` is provided, use it verbatim (no " — gluecron"
	49	// suffix); otherwise fall back to the existing `title` + suffix behaviour.
	50	const renderedTitle = fullTitle
	51	? fullTitle
	52	: title
	53	? `${title} — gluecron`
	54	: "gluecron";
fc1817aClaude	55	return (
6fc53bdClaude	56	<html lang="en" data-theme={initialTheme}>
fc1817aClaude	57	<head>
	58	<meta charset="UTF-8" />
	59	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2fd463bccanty labs	60	<meta name="theme-color" content={initialTheme === "dark" ? "#0d1117" : "#fcfcfd"} />
3a5755eClaude	61	{/* 2026 polish — load Inter + Inter Tight + JetBrains Mono for
	62	crisp modern typography. `preconnect` keeps the handshake
	63	cost off the critical path; `display=swap` means we never
	64	block first paint waiting on fonts. */}
	65	<link rel="preconnect" href="https://fonts.googleapis.com" />
	66	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
	67	<link
	68	rel="stylesheet"
	69	href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
	70	/>
44fe49bClaude	71	{/* PWA removed 2026-05-16 — repeated reload-loop bugs (admin
	72	dashboard, deploy pill, admin-screen flash). A git host has
	73	no use for service workers or install-as-app. Manifest link
	74	and SW registrations are gone permanently. */}
eae38d1Claude	75	<link rel="icon" type="image/svg+xml" href="/icon.svg" />
5f2e749Claude	76	<title>{renderedTitle}</title>
	77	{description && <meta name="description" content={description} />}
	78	{(ogTitle \|\| fullTitle \|\| title) && (
	79	<meta property="og:title" content={ogTitle ?? fullTitle ?? renderedTitle} />
	80	)}
	81	{(ogDescription \|\| description) && (
	82	<meta
	83	property="og:description"
	84	content={ogDescription ?? description ?? ""}
	85	/>
	86	)}
	87	{ogType && <meta property="og:type" content={ogType} />}
	88	{twitterCard && <meta name="twitter:card" content={twitterCard} />}
fa880f2Claude	89	<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
	90	<style dangerouslySetInnerHTML={{ __html: css }} />
	91	<style dangerouslySetInnerHTML={{ __html: hljsThemeCss }} />
fc1817aClaude	92	</head>
	93	<body>
4a52a98Claude	94	<div class="prelaunch-banner" role="status" aria-live="polite">
	95	Pre-launch — Gluecron is in final validation. Public signups
	96	and git hosting for non-owner users open after launch review.
	97	</div>
cd4f63bTest User	98	{/* Block Q3 — Playground banner. Renders only when the active
	99	user is a playground account with a future expiry; the small
	100	inline script counts down once per minute. Strip is dismissible
	101	per-page-load (re-appears on next nav) — gentle, not noisy. */}
	102	{user && (user as any).isPlayground && (user as any).playgroundExpiresAt && (
	103	<div
	104	class="playground-banner"
	105	role="status"
	106	aria-live="polite"
	107	data-playground-expires={
	108	((user as any).playgroundExpiresAt instanceof Date
	109	? (user as any).playgroundExpiresAt.toISOString()
	110	: String((user as any).playgroundExpiresAt))
	111	}
	112	>
	113	<span class="playground-banner-icon" aria-hidden="true">{"\u{1F3AE}"}</span>
	114	<span class="playground-banner-text">
	115	Playground account —{" "}
	116	<span class="playground-banner-countdown">expires soon</span>.{" "}
	117	<a href="/play/claim" class="playground-banner-cta">
	118	Save your work →
	119	</a>
	120	</span>
	121	<button
	122	type="button"
	123	class="playground-banner-dismiss"
	124	aria-label="Dismiss"
	125	data-playground-dismiss="1"
	126	>
	127	{"×"}
	128	</button>
	129	<script
	130	dangerouslySetInnerHTML={{
	131	__html: /* js */ `
	132	(function () {
	133	var el = document.currentScript && document.currentScript.parentElement;
	134	if (!el) return;
	135	var iso = el.getAttribute('data-playground-expires');
	136	if (!iso) return;
	137	var target = Date.parse(iso);
	138	if (isNaN(target)) return;
	139	var out = el.querySelector('.playground-banner-countdown');
	140	function render() {
	141	var ms = target - Date.now();
	142	if (!out) return;
	143	if (ms <= 0) { out.textContent = 'expired'; return; }
	144	var mins = Math.floor(ms / 60000);
	145	var hrs = Math.floor(mins / 60);
	146	if (hrs > 1) out.textContent = hrs + ' hours left';
	147	else if (hrs === 1) out.textContent = '1 hour left';
	148	else if (mins > 1) out.textContent = mins + ' minutes left';
	149	else out.textContent = 'less than a minute left';
	150	}
	151	render();
	152	setInterval(render, 60000);
	153	var dismiss = el.querySelector('[data-playground-dismiss="1"]');
	154	if (dismiss) {
	155	dismiss.addEventListener('click', function () {
	156	el.style.display = 'none';
	157	});
	158	}
	159	})();
	160	`,
	161	}}
	162	/>
	163	</div>
	164	)}
41a1450Claude	165	<header class="site-header">
fc1817aClaude	166	<nav>
	167	<a href="/" class="logo">
	168	gluecron
	169	</a>
3ef4c9dClaude	170	<div class="nav-search">
001af43Claude	171	<form method="get" action="/search">
3ef4c9dClaude	172	<input
	173	type="search"
	174	name="q"
	175	placeholder="Search (press /)"
	176	aria-label="Search"
	177	/>
	178	</form>
	179	</div>
06d5ffeClaude	180	<div class="nav-right">
f5b9ef5Claude	181	{/* Block N3 — site-admin platform-deploy status pill */}
f764c07Claude	182	{user && (
	183	<a
	184	id="deploy-pill"
	185	href="/admin/deploys"
	186	class="nav-deploy-pill"
	187	style="display:none"
	188	aria-label="Platform deploy status"
	189	title="Platform deploy status"
	190	>
	191	<span class="deploy-pill-dot" />
	192	<span class="deploy-pill-text">Deploys</span>
	193	</a>
	194	)}
f5b9ef5Claude	195	<a href="/explore" class="nav-link">Explore</a>
06d5ffeClaude	196	{user ? (
	197	<>
f5b9ef5Claude	198	{/* AI dropdown */}
c6018a5Claude	199	<div class="nav-ai-dropdown" data-nav-ai>
	200	<button
	201	type="button"
	202	class="nav-link nav-ai-trigger"
	203	aria-haspopup="true"
	204	aria-expanded="false"
	205	data-nav-ai-trigger
	206	>
	207	<span style="display:inline-flex;align-items:center;gap:5px">
f5b9ef5Claude	208	<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
c6018a5Claude	209	<path d="M12 2l2.39 5.95L20 9l-4.5 3.9L17 19l-5-3.2L7 19l1.5-6.1L4 9l5.61-1.05L12 2z" />
	210	</svg>
	211	AI
f5b9ef5Claude	212	<span aria-hidden="true" style="font-size:9px;opacity:0.7">{String.fromCharCode(9660)}</span>
c6018a5Claude	213	</span>
	214	</button>
	215	<div class="nav-ai-menu" role="menu" data-nav-ai-menu>
	216	<a href="/standups" role="menuitem" class="nav-ai-item">
	217	<span class="nav-ai-item-label">Standups</span>
	218	<span class="nav-ai-item-sub">Daily AI brief</span>
	219	</a>
	220	<a href="/voice" role="menuitem" class="nav-ai-item">
	221	<span class="nav-ai-item-label">Voice</span>
	222	<span class="nav-ai-item-sub">Talk to ship a PR</span>
	223	</a>
	224	<a href="/refactors" role="menuitem" class="nav-ai-item">
	225	<span class="nav-ai-item-label">Refactors</span>
	226	<span class="nav-ai-item-sub">Multi-repo agent</span>
	227	</a>
	228	<a href="/specs" role="menuitem" class="nav-ai-item">
	229	<span class="nav-ai-item-label">Specs</span>
	230	<span class="nav-ai-item-sub">Spec-to-PR loop</span>
	231	</a>
	232	<a href="/ask" role="menuitem" class="nav-ai-item">
	233	<span class="nav-ai-item-label">Ask AI</span>
	234	<span class="nav-ai-item-sub">Cross-repo chat</span>
	235	</a>
	236	</div>
	237	</div>
cc34156Claude	238	{/* Smart morning digest link */}
	239	<a href="/digest" class="nav-link" title="Morning Digest" aria-label="Morning Digest">
	240	{"☀"}
	241	</a>
f5b9ef5Claude	242	{/* Inbox bell with unread badge */}
	243	<a
	244	href="/inbox"
	245	class="nav-inbox-btn"
	246	aria-label={notificationCount && notificationCount > 0 ? `Inbox — ${notificationCount} unread` : "Inbox"}
	247	title="Inbox"
	248	>
	249	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
	250	<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
	251	<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
	252	</svg>
	253	{notificationCount && notificationCount > 0 ? (
	254	<span class="nav-inbox-badge" aria-hidden="true">
	255	{notificationCount > 99 ? "99+" : notificationCount}
	256	</span>
	257	) : null}
06d5ffeClaude	258	</a>
f5b9ef5Claude	259	<a href="/new" class="btn btn-sm btn-primary">+ New</a>
	260	{/* User dropdown — consolidates profile + secondary nav */}
	261	<div class="nav-user-dropdown" data-nav-user>
	262	<button
	263	type="button"
	264	class="nav-user-trigger"
	265	aria-haspopup="true"
	266	aria-expanded="false"
	267	data-nav-user-trigger
	268	>
	269	<span class="nav-user-avatar" aria-hidden="true">
	270	{(user.displayName \|\| user.username).charAt(0).toUpperCase()}
	271	</span>
	272	<span class="nav-user-name">{user.displayName \|\| user.username}</span>
	273	<span class="nav-user-caret" aria-hidden="true">{"▾"}</span>
	274	</button>
	275	<div class="nav-user-menu" role="menu" data-nav-user-menu>
	276	<div class="nav-user-menu-header">
	277	<span class="nav-user-menu-name">{user.displayName \|\| user.username}</span>
	278	<span class="nav-user-menu-handle">@{user.username}</span>
	279	</div>
	280	<div class="nav-user-menu-sep" />
	281	<a href="/dashboard" role="menuitem" class="nav-user-item">Dashboard</a>
	282	<a href="/pulls" role="menuitem" class="nav-user-item">Pull requests</a>
	283	<a href="/issues" role="menuitem" class="nav-user-item">Issues</a>
	284	<a href="/activity" role="menuitem" class="nav-user-item">Activity</a>
8286942Claude	285	<a href="/insights" role="menuitem" class="nav-user-item">Insights</a>
f5b9ef5Claude	286	<a href="/import" role="menuitem" class="nav-user-item">Import from GitHub</a>
bb2dea9Claude	287	<a href="/import/actions" role="menuitem" class="nav-user-item">Actions importer</a>
f5b9ef5Claude	288	<div class="nav-user-menu-sep" />
	289	<a href={`/${user.username}`} role="menuitem" class="nav-user-item">Your profile</a>
	290	<a href="/settings" role="menuitem" class="nav-user-item">Settings</a>
	291	<a href="/settings/tokens" role="menuitem" class="nav-user-item">Access tokens</a>
	292	<div class="nav-user-menu-sep" />
	293	<a href="/theme/toggle" class="nav-user-item" role="menuitem">
	294	<span class="theme-icon-dark">{"☾"} Light mode</span>
	295	<span class="theme-icon-light">{"☀"} Dark mode</span>
	296	</a>
	297	<a href="/logout" role="menuitem" class="nav-user-item nav-user-item--danger">Sign out</a>
	298	</div>
	299	</div>
06d5ffeClaude	300	</>
	301	) : (
	302	<>
f5b9ef5Claude	303	<a href="/theme/toggle" class="nav-link nav-theme" title="Toggle theme" aria-label="Toggle theme">
	304	<span class="theme-icon-dark">{"☾"}</span>
	305	<span class="theme-icon-light">{"☀"}</span>
06d5ffeClaude	306	</a>
adf5e18Claude	307	<a href="/import" class="nav-link nav-migrate" title="Migrate your GitHub repos to Gluecron">
	308	Migrate from GitHub
	309	</a>
f5b9ef5Claude	310	<a href="/login" class="nav-link">Sign in</a>
	311	<a href="/register" class="btn btn-sm btn-primary">Register</a>
06d5ffeClaude	312	</>
	313	)}
	314	</div>
fc1817aClaude	315	</nav>
	316	</header>
45e31d0Claude	317	<main id="main-content">{children}</main>
cf9178bTest User	318	{/* Global toast host — populated by the toastScript below from
	319	?success= / ?error= / ?toast= query params. Replaces the
	320	per-page banner pattern with one polished slide-in. */}
	321	<div
	322	id="toast-host"
	323	aria-live="polite"
	324	aria-atomic="true"
	325	style="position:fixed;top:calc(var(--header-h) + 12px);right:16px;z-index:var(--z-toast,10000);display:flex;flex-direction:column;gap:8px;pointer-events:none"
	326	/>
fc1817aClaude	327	<footer>
958d26aClaude	328	<div class="footer-inner">
	329	<div class="footer-brand">
	330	<a href="/" class="logo">gluecron</a>
	331	<p class="footer-tag">
8cfb00eClaude	332	Git hosting with automated CI and AI code review.
958d26aClaude	333	</p>
	334	</div>
	335	<div class="footer-links">
	336	<div class="footer-col">
	337	<div class="footer-col-title">Product</div>
b0148e9Claude	338	<a href="/features">Features</a>
	339	<a href="/pricing">Pricing</a>
9f29b65Claude	340	<a href="/enterprise">Enterprise</a>
e1fc7dbClaude	341	<a href="/changelog">Changelog</a>
958d26aClaude	342	<a href="/explore">Explore</a>
	343	<a href="/marketplace">Marketplace</a>
adf5e18Claude	344	<a href="/developer-program">Developer Program</a>
958d26aClaude	345	</div>
	346	<div class="footer-col">
	347	<div class="footer-col-title">Platform</div>
e0e4219Claude	348	<a href="/docs">Docs</a>
b0148e9Claude	349	<a href="/help">Quickstart</a>
958d26aClaude	350	<a href="/status">Status</a>
	351	<a href="/api/graphql">GraphQL</a>
	352	<a href="/mcp">MCP server</a>
	353	</div>
	354	<div class="footer-col">
b0148e9Claude	355	<div class="footer-col-title">Company</div>
	356	<a href="/about">About</a>
3122762Claude	357	<a href="/blog">Blog</a>
958d26aClaude	358	<a href="/terms">Terms</a>
	359	<a href="/privacy">Privacy</a>
	360	<a href="/acceptable-use">Acceptable use</a>
	361	</div>
	362	</div>
	363	</div>
	364	<div class="footer-bottom">
	365	<span>© {new Date().getFullYear()} gluecron</span>
05cdb85Claude	366	<span class="footer-build" title={`commit ${build.shaFull}\nbuilt ${build.builtAt}`}>
	367	<span class="footer-build-dot" aria-hidden="true" />
	368	{build.sha} · {build.branch}
	369	</span>
36b4cbdClaude	370	</div>
c63b860Claude	371	{siteBannerText ? (
	372	<div
	373	class={`footer-banner footer-banner-${siteBannerLevel \|\| "info"}`}
	374	role="status"
	375	aria-live="polite"
	376	>
	377	{siteBannerText}
	378	</div>
	379	) : null}
fc1817aClaude	380	</footer>
05cdb85Claude	381	{/* Live update poller — checks /api/version every 15s, prompts
	382	reload when the running sha changes. Pure progressive-
	383	enhancement; degrades to nothing if JS is off. */}
	384	<div
	385	id="version-banner"
479dcd9Claude	386	style="display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:9999;background:var(--bg-elevated);border:1px solid rgba(91,110,232,0.45);border-radius:9999px;padding:8px 14px 8px 14px;font-size:13px;color:var(--text-strong);box-shadow:0 12px 28px -8px rgba(0,0,0,0.55);font-family:var(--font-sans);align-items:center;gap:10px"
05cdb85Claude	387	>
	388	<span style="display:inline-flex;align-items:center;gap:8px">
479dcd9Claude	389	<span style="width:8px;height:8px;border-radius:50%;background:#34d399" />
05cdb85Claude	390	<span>New version available</span>
	391	</span>
	392	<button
	393	type="button"
	394	id="version-banner-reload"
479dcd9Claude	395	style="background:var(--accent);color:#fff;border:0;border-radius:9999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit"
05cdb85Claude	396	>
	397	Reload
	398	</button>
	399	</div>
fa880f2Claude	400	<script dangerouslySetInnerHTML={{ __html: versionPollerScript }} />
f764c07Claude	401	{/* Block N3 — site-admin deploy status pill (script-only). The pill
	402	container is rendered above for authed users; this script bootstraps
	403	it by fetching /admin/deploys/latest.json. Non-admins get 401/403
	404	and the pill stays display:none — zero leak. */}
	405	{user && (
	406	<script dangerouslySetInnerHTML={{ __html: deployPillScript }} />
	407	)}
699e5c7Claude	408	{/* Block I4 — Command palette shell (hidden by default) */}
	409	<div
	410	id="cmdk-backdrop"
	411	style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9998"
	412	/>
	413	<div
	414	id="cmdk-panel"
	415	style="display:none;position:fixed;top:10%;left:50%;transform:translateX(-50%);width:min(560px,92vw);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,0.4);z-index:9999;overflow:hidden"
	416	>
	417	<input
	418	id="cmdk-input"
	419	type="text"
	420	placeholder="Type a command..."
	421	aria-label="Command palette"
dc26881CC LABS App	422	style="width:100%;padding:var(--space-3) var(--space-4);background:transparent;color:var(--text);border:0;border-bottom:1px solid var(--border);outline:none;font-size:14px"
699e5c7Claude	423	/>
	424	<div id="cmdk-list" style="max-height:60vh;overflow-y:auto" />
	425	</div>
fa880f2Claude	426	<script dangerouslySetInnerHTML={{ __html: clientJs }} />
44fe49bClaude	427	{/* PWA-kill script: actively unregisters any service worker
	428	previously installed under gluecron.com. Recovers any browser
	429	still trapped in the SW reload loop from the legacy registrations. */}
	430	<script dangerouslySetInnerHTML={{ __html: pwaKillSwitchScript }} />
cf9178bTest User	431	<script dangerouslySetInnerHTML={{ __html: toastScript }} />
fa880f2Claude	432	<script dangerouslySetInnerHTML={{ __html: navScript }} />
c6018a5Claude	433	<script dangerouslySetInnerHTML={{ __html: navAiDropdownScript }} />
b7ecb14Claude	434	{/* Bell badge poller — only rendered for authenticated users.
	435	Polls /api/notifications/count every 60 s and updates the badge
	436	on the inbox bell icon. Falls back gracefully if the endpoint is
	437	unavailable or the user signs out mid-session. */}
	438	{user && (
	439	<script dangerouslySetInnerHTML={{ __html: bellPollerScript }} />
	440	)}
fc1817aClaude	441	</body>
	442	</html>
	443	);
	444	};
	445
05cdb85Claude	446	// Live version poller. Checks /api/version every 15s; if the sha differs
	447	// from the one we booted with, reveal the floating 'New version' pill so
	448	// the user can reload onto the new code without manually refreshing.
	449	const versionPollerScript = `
	450	(function(){
	451	var loadedSha = null;
	452	var banner, btn;
	453	function poll(){
	454	fetch('/api/version', { cache: 'no-store' })
	455	.then(function(r){ return r.ok ? r.json() : null; })
	456	.then(function(j){
	457	if (!j \|\| !j.sha) return;
	458	if (loadedSha === null) { loadedSha = j.sha; return; }
	459	if (j.sha !== loadedSha && banner) {
	460	banner.style.display = 'inline-flex';
	461	}
	462	})
	463	.catch(function(){});
	464	}
	465	function init(){
	466	banner = document.getElementById('version-banner');
	467	btn = document.getElementById('version-banner-reload');
	468	if (btn) btn.addEventListener('click', function(){ window.location.reload(); });
	469	poll();
	470	setInterval(poll, 15000);
	471	}
	472	if (document.readyState === 'loading') {
	473	document.addEventListener('DOMContentLoaded', init);
	474	} else {
	475	init();
	476	}
	477	})();
	478	`;
	479
f764c07Claude	480	// Block N3 — site-admin deploy status pill. Fetches /admin/deploys/latest.json;
	481	// if 200, reveals the pill in the nav and subscribes to the `platform:deploys`
	482	// SSE topic for live status updates. Non-admins get 401/403 and the pill stays
	483	// display:none — there's no leakage of admin-only data to other users.
	484	//
	485	// Pill states (CSS classes on the container drive colour):
	486	// .deploy-pill-success 🟢 "Deployed 12s ago"
	487	// .deploy-pill-progress 🟡 "Deploying… 14s" (pulsing dot)
	488	// .deploy-pill-failed 🔴 "Deploy failed 1m ago"
	489	// .deploy-pill-empty ⚪ "No deploys yet"
	490	//
	491	// Relative-time auto-refreshes every 15s without re-fetching.
	492	export const deployPillScript = `
	493	(function(){
	494	var pill, dot, text;
	495	var state = { latest: null, asOf: null };
	496
	497	function classifyAge(ms){
	498	if (ms < 0) return 'just now';
	499	var s = Math.floor(ms / 1000);
	500	if (s < 5) return 'just now';
	501	if (s < 60) return s + 's ago';
	502	var m = Math.floor(s / 60);
	503	if (m < 60) return m + 'm ago';
	504	var h = Math.floor(m / 60);
	505	if (h < 24) return h + 'h ago';
	506	var d = Math.floor(h / 24);
	507	return d + 'd ago';
	508	}
	509	function elapsed(ms){
	510	if (ms < 0) ms = 0;
	511	var s = Math.floor(ms / 1000);
	512	if (s < 60) return s + 's';
	513	var m = Math.floor(s / 60);
	514	var rem = s - m * 60;
	515	return m + 'm ' + rem + 's';
	516	}
	517
	518	function render(){
	519	if (!pill \|\| !text \|\| !dot) return;
	520	var d = state.latest;
81201ccTest User	521	// When there's no deploy event yet, keep the pill HIDDEN. Showing
	522	// "No deploys yet" was visible noise on every admin page load and
	523	// flashed during reconnect cycles — admins don't need a placeholder.
	524	// The pill reveals itself the first time a real deploy fires.
f764c07Claude	525	if (!d) {
81201ccTest User	526	pill.style.display = 'none';
f764c07Claude	527	return;
	528	}
	529	pill.style.display = 'inline-flex';
	530	var now = Date.now();
	531	if (d.status === 'in_progress') {
	532	pill.className = 'nav-deploy-pill deploy-pill-progress';
	533	var started = Date.parse(d.started_at) \|\| now;
	534	text.textContent = 'Deploying… ' + elapsed(now - started);
	535	} else if (d.status === 'succeeded') {
	536	pill.className = 'nav-deploy-pill deploy-pill-success';
	537	var ref = Date.parse(d.finished_at \|\| d.started_at) \|\| now;
	538	text.textContent = 'Deployed ' + classifyAge(now - ref);
	539	} else if (d.status === 'failed') {
	540	pill.className = 'nav-deploy-pill deploy-pill-failed';
	541	var refF = Date.parse(d.finished_at \|\| d.started_at) \|\| now;
	542	text.textContent = 'Deploy failed ' + classifyAge(now - refF);
	543	} else {
	544	pill.className = 'nav-deploy-pill';
	545	text.textContent = d.status;
	546	}
	547	}
	548
	549	function fetchLatest(){
	550	fetch('/admin/deploys/latest.json', { cache: 'no-store', credentials: 'same-origin' })
	551	.then(function(r){ if (!r.ok) return null; return r.json(); })
	552	.then(function(j){
	553	if (!j \|\| j.ok !== true) return;
	554	state.latest = j.latest;
	555	state.asOf = j.asOf;
	556	render();
	557	subscribe();
	558	})
	559	.catch(function(){});
	560	}
	561
	562	var subscribed = false;
	563	function subscribe(){
	564	if (subscribed) return;
	565	if (typeof EventSource === 'undefined') return;
	566	subscribed = true;
	567	var es;
bf19c50Test User	568	// Exponential backoff with cap. Previously a tight 1500ms reconnect
	569	// produced visible looping in the nav whenever the proxy timed out
	570	// or the connection blipped — the bottom-of-page deploy pill
	571	// re-rendered the placeholder every 1.5s. Cap at 60s and reset on
	572	// successful message receipt.
	573	var delay = 2000;
	574	var DELAY_MAX = 60000;
	575	function bump(){
	576	delay = Math.min(delay * 2, DELAY_MAX);
	577	}
	578	function resetDelay(){
	579	delay = 2000;
	580	}
f764c07Claude	581	function connect(){
	582	try { es = new EventSource('/live-events/platform:deploys'); }
bf19c50Test User	583	catch(e){ bump(); setTimeout(connect, delay); return; }
f764c07Claude	584	es.onmessage = function(m){
bf19c50Test User	585	resetDelay();
f764c07Claude	586	try {
	587	var d = JSON.parse(m.data);
	588	if (d && d.run_id) {
	589	if (!state.latest \|\| state.latest.run_id === d.run_id \|\|
	590	Date.parse(d.started_at) >= Date.parse(state.latest.started_at)) {
	591	state.latest = d;
	592	render();
	593	}
	594	}
	595	} catch(e){}
	596	};
	597	es.onerror = function(){
	598	try { es.close(); } catch(e){}
bf19c50Test User	599	bump();
f764c07Claude	600	setTimeout(connect, delay);
	601	};
	602	}
	603	connect();
	604	}
	605
	606	function init(){
	607	pill = document.getElementById('deploy-pill');
	608	if (!pill) return;
	609	dot = pill.querySelector('.deploy-pill-dot');
	610	text = pill.querySelector('.deploy-pill-text');
	611	fetchLatest();
	612	// Refresh relative-time labels every 15s so "12s ago" → "27s ago"
	613	// without a fresh fetch.
	614	setInterval(render, 15000);
	615	}
	616	if (document.readyState === 'loading') {
	617	document.addEventListener('DOMContentLoaded', init);
	618	} else {
	619	init();
	620	}
	621	})();
	622	`;
	623
6fc53bdClaude	624	// Runs before paint — reads the theme cookie and flips data-theme so there's
81201ccTest User	625	// no light-to-dark flash on load. SSR default is "light"; cookie-set "dark"
	626	// is honoured for users who explicitly opted in.
6fc53bdClaude	627	const themeInitScript = `
	628	(function(){
	629	try {
	630	var m = document.cookie.match(/(?:^\|; )theme=([^;]+)/);
81201ccTest User	631	var t = m ? decodeURIComponent(m[1]) : 'light';
	632	if (t !== 'light' && t !== 'dark') t = 'light';
6fc53bdClaude	633	document.documentElement.setAttribute('data-theme', t);
	634	} catch(_){}
	635	})();
	636	`;
	637
eae38d1Claude	638	// Block G1 — register service worker for offline / install support.
	639	// Kept inline (and tiny) so we don't block first paint.
b1be050CC LABS App	640	//
cf9178bTest User	641	// Global toast notifications — reads ?success=, ?error=, ?toast= from the
	642	// URL on page load and surfaces a polished slide-in toast instead of the
	643	// per-page banner divs that crowded the layout. Toasts auto-dismiss after
	644	// 4.5s; query params are scrubbed from the URL via history.replaceState
	645	// so a subsequent Refresh doesn't re-fire the same toast.
	646	//
	647	// Variants: ?success=…, ?error=…, ?toast=info:…, ?toast=warn:… All values
	648	// must be URI-encoded (callers already do this via encodeURIComponent
	649	// in c.redirect()).
	650	const toastScript = `
	651	(function(){
	652	function showToast(kind, message){
	653	if (!message) return;
	654	var host = document.getElementById('toast-host');
	655	if (!host) return;
	656	var el = document.createElement('div');
	657	el.className = 'gx-toast gx-toast--' + kind;
	658	el.setAttribute('role', kind === 'error' ? 'alert' : 'status');
	659	var icon = document.createElement('span');
	660	icon.className = 'gx-toast__icon';
	661	icon.textContent = kind === 'success' ? '\\u2713'
	662	: kind === 'error' ? '\\u00D7'
	663	: kind === 'warn' ? '!'
	664	: 'i';
	665	el.appendChild(icon);
	666	var text = document.createElement('span');
	667	text.className = 'gx-toast__text';
	668	text.textContent = message;
	669	el.appendChild(text);
	670	var close = document.createElement('button');
	671	close.type = 'button';
	672	close.className = 'gx-toast__close';
	673	close.setAttribute('aria-label', 'Dismiss notification');
	674	close.textContent = '\\u00D7';
	675	close.addEventListener('click', function(){ dismiss(); });
	676	el.appendChild(close);
	677	host.appendChild(el);
	678	// Force a reflow then add the visible class so the slide-in transitions.
	679	void el.offsetWidth;
	680	el.classList.add('gx-toast--in');
	681	var timer = setTimeout(dismiss, 4500);
	682	function dismiss(){
	683	clearTimeout(timer);
	684	el.classList.remove('gx-toast--in');
	685	el.classList.add('gx-toast--out');
	686	setTimeout(function(){
	687	if (el.parentNode) el.parentNode.removeChild(el);
	688	}, 220);
	689	}
	690	}
	691	try {
	692	var url = new URL(window.location.href);
	693	var hits = 0;
	694	var s = url.searchParams.get('success');
	695	if (s) { showToast('success', s); url.searchParams.delete('success'); hits++; }
	696	var e = url.searchParams.get('error');
	697	if (e) { showToast('error', e); url.searchParams.delete('error'); hits++; }
	698	var t = url.searchParams.get('toast');
	699	if (t) {
	700	var ix = t.indexOf(':');
	701	var kind = ix > 0 ? t.slice(0, ix) : 'info';
	702	var msg = ix > 0 ? t.slice(ix + 1) : t;
	703	showToast(kind, msg);
	704	url.searchParams.delete('toast');
	705	hits++;
	706	}
	707	if (hits > 0 && window.history && window.history.replaceState) {
	708	window.history.replaceState({}, '', url.pathname + (url.searchParams.toString() ? '?' + url.searchParams.toString() : '') + url.hash);
	709	}
	710	} catch(_) {}
	711	})();
	712	`;
	713
44fe49bClaude	714	// PWA kill-switch (2026-05-16) — replaces the previous pwaRegisterScript
	715	// and pwaInstallBannerScript. Those two scripts registered /sw.js and
	716	// /sw-push.js at the same scope, causing a reload loop that made the
	717	// admin dashboard unusable (deploy pill flashing, typing wiped, buttons
	718	// uncllickable). Per the SW spec, only one SW can control a scope; two
	719	// different script URLs at the same scope keep replacing each other.
6345c3eTest User	720	//
44fe49bClaude	721	// PWA is gone for good. A git host has no use for service workers,
	722	// install-as-app, or push notifications via SW. This script actively
	723	// unregisters every previously installed SW on the gluecron.com origin
	724	// so any browser still trapped in the loop recovers on the very next
	725	// page load — without needing the user to clear site data or open
	726	// DevTools. Idempotent and safe to keep running forever; once all
	727	// browsers have been cleaned, it's a no-op.
	728	const pwaKillSwitchScript = `
534f04aClaude	729	(function(){
	730	try {
44fe49bClaude	731	if (!('serviceWorker' in navigator)) return;
	732	if (!navigator.serviceWorker.getRegistrations) return;
	733	navigator.serviceWorker.getRegistrations().then(function(regs){
	734	if (!regs \|\| regs.length === 0) return;
	735	regs.forEach(function(reg){
	736	try { reg.unregister(); } catch(_){}
	737	});
	738	}).catch(function(){});
	739	// Also drop any caches the old SWs left behind so the user gets
	740	// truly fresh HTML on every page load. Restricted to gluecron-*
	741	// namespaced caches so we don't trample anything a future opt-in
	742	// feature might create under a different name.
	743	if ('caches' in self) {
	744	caches.keys().then(function(keys){
	745	keys.forEach(function(k){
	746	if (typeof k === 'string' && k.indexOf('gluecron') === 0) {
	747	try { caches.delete(k); } catch(_){}
d7ba05dClaude	748	}
	749	});
	750	}).catch(function(){});
534f04aClaude	751	}
	752	} catch(_) {}
	753	})();
	754	`;
	755
3ef4c9dClaude	756	const navScript = `
	757	(function(){
	758	var chord = null;
	759	var chordTimer = null;
	760	function isTyping(t){
	761	t = t \|\| {};
	762	var tag = (t.tagName \|\| '').toLowerCase();
	763	return tag === 'input' \|\| tag === 'textarea' \|\| t.isContentEditable;
	764	}
71cd5ecClaude	765
	766	// ---------- Block I4 — Command palette ----------
	767	var COMMANDS = [
	768	{ label: 'Go to Dashboard', href: '/dashboard', kw: 'home' },
	769	{ label: 'Go to Explore', href: '/explore', kw: 'browse discover' },
	770	{ label: 'Go to Notifications', href: '/notifications', kw: 'inbox' },
	771	{ label: 'Go to Ask AI', href: '/ask', kw: 'chat assistant' },
	772	{ label: 'Create new repository', href: '/new', kw: 'add create' },
	773	{ label: 'Marketplace', href: '/marketplace', kw: 'apps store' },
	774	{ label: 'Installed apps', href: '/settings/apps', kw: 'my apps' },
	775	{ label: 'Register new app', href: '/developer/apps-new', kw: 'developer create' },
	776	{ label: 'Keyboard shortcuts', href: '/shortcuts', kw: 'help keys' },
	777	{ label: 'Settings (profile)', href: '/settings', kw: 'account' },
	778	{ label: '2FA settings', href: '/settings/2fa', kw: 'two factor security' },
	779	{ label: 'Passkeys settings', href: '/settings/passkeys', kw: 'webauthn' },
	780	{ label: 'Personal access tokens', href: '/settings/tokens', kw: 'pat api' },
	781	{ label: 'Billing + quotas', href: '/settings/billing', kw: 'plans money' },
8809b87Claude	782	{ label: 'AI usage + cost', href: '/billing/usage', kw: 'spend tokens anthropic budget' },
71cd5ecClaude	783	{ label: 'Audit log (personal)', href: '/settings/audit', kw: 'history' },
	784	{ label: 'Gists', href: '/gists', kw: 'snippets' },
	785	{ label: 'GraphQL explorer', href: '/api/graphql', kw: 'api query' },
	786	{ label: 'Admin dashboard', href: '/admin', kw: 'superuser' },
	787	{ label: 'Toggle theme', href: '/theme/toggle', kw: 'dark light mode' }
	788	];
	789
	790	function fuzzyMatch(item, q){
	791	if (!q) return true;
	792	var hay = (item.label + ' ' + (item.kw\|\|'') + ' ' + item.href).toLowerCase();
	793	q = q.toLowerCase();
	794	var qi = 0;
	795	for (var i = 0; i < hay.length && qi < q.length; i++) {
	796	if (hay[i] === q[qi]) qi++;
	797	}
	798	return qi === q.length;
	799	}
	800
	801	var backdrop, panel, input, list, selected = 0, filtered = COMMANDS.slice();
	802
	803	function render(){
	804	if (!list) return;
	805	var html = '';
	806	for (var i = 0; i < filtered.length; i++) {
	807	var item = filtered[i];
	808	var cls = i === selected ? 'cmdk-item cmdk-active' : 'cmdk-item';
	809	var bg = i === selected ? 'background:var(--bg);' : '';
ea52715copilot-swe-agent[bot]	810	html += '<div class="' + cls + '" data-idx="' + i + '" data-url="' + item.href + '"' +
dc26881CC LABS App	811	' style="padding:var(--space-2) var(--space-4);cursor:pointer;border-bottom:1px solid var(--border);' + bg + '">' +
71cd5ecClaude	812	'<div>' + item.label + '</div>' +
	813	'<div style="font-size:11px;color:var(--text-muted)">' + item.href + '</div>' +
	814	'</div>';
	815	}
	816	if (filtered.length === 0) {
dc26881CC LABS App	817	html = '<div style="padding:var(--space-4);color:var(--text-muted);text-align:center">No matches.</div>';
71cd5ecClaude	818	}
	819	list.innerHTML = html;
	820	}
	821
641aa42Claude	822	function getAllCommands(){
	823	// Merge global COMMANDS with repo-context commands injected by repo pages.
	824	var extra = (window.__CMDK_REPO_COMMANDS && Array.isArray(window.__CMDK_REPO_COMMANDS))
	825	? window.__CMDK_REPO_COMMANDS : [];
	826	return COMMANDS.concat(extra);
	827	}
	828
71cd5ecClaude	829	function openPalette(){
	830	backdrop = document.getElementById('cmdk-backdrop');
	831	panel = document.getElementById('cmdk-panel');
	832	input = document.getElementById('cmdk-input');
	833	list = document.getElementById('cmdk-list');
	834	if (!backdrop \|\| !panel) return;
	835	backdrop.style.display = 'block';
	836	panel.style.display = 'block';
	837	input.value = '';
	838	selected = 0;
641aa42Claude	839	filtered = getAllCommands();
71cd5ecClaude	840	render();
	841	input.focus();
	842	}
	843	function closePalette(){
	844	if (backdrop) backdrop.style.display = 'none';
	845	if (panel) panel.style.display = 'none';
	846	}
	847	function go(href){ closePalette(); window.location.href = href; }
	848
	849	document.addEventListener('click', function(e){
	850	var t = e.target;
	851	if (t && t.id === 'cmdk-backdrop') { closePalette(); return; }
	852	var item = t && t.closest && t.closest('.cmdk-item');
ea52715copilot-swe-agent[bot]	853	if (item) { go(item.getAttribute('data-url')); }
71cd5ecClaude	854	});
	855
	856	document.addEventListener('input', function(e){
	857	if (e.target && e.target.id === 'cmdk-input') {
	858	var q = e.target.value;
641aa42Claude	859	filtered = getAllCommands().filter(function(c){ return fuzzyMatch(c, q); });
71cd5ecClaude	860	selected = 0;
	861	render();
	862	}
	863	});
	864
3ef4c9dClaude	865	document.addEventListener('keydown', function(e){
71cd5ecClaude	866	// Palette-scoped keys take priority when open
	867	if (panel && panel.style.display === 'block') {
	868	if (e.key === 'Escape') { e.preventDefault(); closePalette(); return; }
	869	if (e.key === 'ArrowDown') {
	870	e.preventDefault();
	871	selected = Math.min(filtered.length - 1, selected + 1);
	872	render();
	873	return;
	874	}
	875	if (e.key === 'ArrowUp') {
	876	e.preventDefault();
	877	selected = Math.max(0, selected - 1);
	878	render();
	879	return;
	880	}
	881	if (e.key === 'Enter') {
	882	e.preventDefault();
	883	var item = filtered[selected];
	884	if (item) go(item.href);
	885	return;
	886	}
	887	return;
	888	}
	889
3ef4c9dClaude	890	if (isTyping(e.target)) return;
	891	// Single key shortcuts
	892	if (e.key === '/') {
	893	var el = document.querySelector('.nav-search input');
	894	if (el) { e.preventDefault(); el.focus(); return; }
	895	}
	896	if ((e.metaKey\|\|e.ctrlKey) && e.key.toLowerCase() === 'k') {
71cd5ecClaude	897	e.preventDefault();
	898	openPalette();
	899	return;
3ef4c9dClaude	900	}
	901	if (e.key === '?' && !e.ctrlKey && !e.metaKey) {
	902	e.preventDefault(); window.location.href = '/shortcuts'; return;
	903	}
	904	if (e.key === 'n' && !e.ctrlKey && !e.metaKey) {
641aa42Claude	905	// Start 'n' chord — wait 1.2s for next key (i → issue, p → PR).
	906	// If no second key arrives, navigate to /new (create repo).
	907	chord = 'n';
	908	clearTimeout(chordTimer);
	909	chordTimer = setTimeout(function(){
	910	if (chord === 'n') { window.location.href = '/new'; }
	911	chord = null;
	912	}, 1200);
	913	return;
3ef4c9dClaude	914	}
	915	// "g" chord
	916	if (e.key === 'g' && !e.ctrlKey && !e.metaKey) {
	917	chord = 'g';
	918	clearTimeout(chordTimer);
	919	chordTimer = setTimeout(function(){ chord = null; }, 1200);
	920	return;
	921	}
	922	if (chord === 'g') {
	923	if (e.key === 'd') { e.preventDefault(); window.location.href = '/dashboard'; }
	924	else if (e.key === 'n') { e.preventDefault(); window.location.href = '/notifications'; }
	925	else if (e.key === 'e') { e.preventDefault(); window.location.href = '/explore'; }
	926	else if (e.key === 'a') { e.preventDefault(); window.location.href = '/ask'; }
	927	chord = null;
	928	}
641aa42Claude	929	// "n" chord — new issue / new PR (repo-context-aware)
	930	if (chord === 'n') {
	931	var repoCtx = window.__CMDK_REPO_COMMANDS;
	932	var newIssuePath = repoCtx && repoCtx.length ? repoCtx[0].href.replace('/issues/new', '/issues/new') : null;
	933	// Find the "new issue" and "new PR" hrefs from repo context commands
	934	var issueCmd = repoCtx && repoCtx.find(function(c){ return c.href && c.href.indexOf('/issues/new') !== -1; });
	935	var prCmd = repoCtx && repoCtx.find(function(c){ return c.href && c.href.indexOf('/pulls/new') !== -1; });
	936	if (e.key === 'i' && issueCmd) {
	937	e.preventDefault(); clearTimeout(chordTimer); chord = null;
	938	window.location.href = issueCmd.href; return;
	939	}
	940	if (e.key === 'p' && prCmd) {
	941	e.preventDefault(); clearTimeout(chordTimer); chord = null;
	942	window.location.href = prCmd.href; return;
	943	}
	944	}
5882af3Claude	945	// j/k list navigation — move through .prs-row, .issue-row, .notif-item rows
	946	if (e.key === 'j' \|\| e.key === 'k') {
	947	var selectors = '.prs-row, .issue-row, .issue-list-item, .notif-item, .repo-item, .exp-repo-card, .disc-row';
	948	var items = Array.from(document.querySelectorAll(selectors));
	949	if (items.length === 0) return;
	950	e.preventDefault();
	951	var cur = items.findIndex(function(el){ return el.classList.contains('is-kbd-focus'); });
	952	var next = e.key === 'j' ? (cur < 0 ? 0 : Math.min(items.length - 1, cur + 1)) : (cur < 0 ? items.length - 1 : Math.max(0, cur - 1));
	953	items.forEach(function(el){ el.classList.remove('is-kbd-focus'); });
	954	items[next].classList.add('is-kbd-focus');
	955	items[next].scrollIntoView({ block: 'nearest' });
	956	return;
	957	}
	958	if (e.key === 'Enter') {
	959	var focused = document.querySelector('.is-kbd-focus');
	960	if (focused) {
	961	e.preventDefault();
	962	var link = focused.tagName === 'A' ? focused : focused.querySelector('a');
	963	if (link && link.href) { window.location.href = link.href; }
	964	return;
	965	}
	966	}
	967	if (e.key === 'x') {
	968	// 'x' selects/deselects focused item (future: bulk actions)
	969	var sel = document.querySelector('.is-kbd-focus');
	970	if (sel) { e.preventDefault(); sel.classList.toggle('is-kbd-selected'); return; }
	971	}
3ef4c9dClaude	972	});
	973	})();
	974	`;
	975
b7ecb14Claude	976	// Bell poller — updates the inbox badge count every 60 s via /api/notifications/count.
	977	// Only injected when a user is logged in (checked in the JSX above). Uses the
	978	// `.nav-inbox-badge` element that the server renders inside `.nav-inbox-btn`.
	979	// If the badge element is absent (user not logged in, DOM mismatch) it exits
	980	// cleanly without error.
	981	export const bellPollerScript = `
	982	(function() {
	983	var badge = document.querySelector('.nav-inbox-btn .nav-inbox-badge');
	984	var btn = document.querySelector('.nav-inbox-btn');
	985	function updateBadge(n) {
	986	if (!btn) return;
	987	if (n > 0) {
	988	var label = n > 99 ? '99+' : String(n);
	989	if (!badge) {
	990	badge = document.createElement('span');
	991	badge.className = 'nav-inbox-badge';
	992	badge.setAttribute('aria-hidden', 'true');
	993	btn.appendChild(badge);
	994	}
	995	badge.textContent = label;
	996	badge.style.display = '';
	997	btn.setAttribute('aria-label', 'Inbox — ' + n + ' unread');
	998	} else {
	999	if (badge) badge.style.display = 'none';
	1000	btn.setAttribute('aria-label', 'Inbox');
	1001	}
	1002	}
	1003	function poll() {
	1004	fetch('/api/notifications/count', { credentials: 'same-origin', cache: 'no-store' })
	1005	.then(function(r) { return r.ok ? r.json() : null; })
	1006	.then(function(d) {
	1007	if (!d) return;
	1008	var n = typeof d.unread === 'number' ? d.unread : (typeof d.count === 'number' ? d.count : 0);
	1009	updateBadge(n);
	1010	})
	1011	.catch(function() {});
	1012	}
	1013	if (document.readyState === 'loading') {
	1014	document.addEventListener('DOMContentLoaded', function() { poll(); setInterval(poll, 60000); });
	1015	} else {
	1016	poll();
	1017	setInterval(poll, 60000);
	1018	}
	1019	})();
	1020	`;
	1021
c6018a5Claude	1022	// AI dropdown — keyboard- and click-accessible menu in the top nav.
	1023	// CSS handles the hover-open behaviour for pointer users; this script
	1024	// adds click-to-toggle for touch, Escape-to-close, and outside-click-
	1025	// to-close. Lives in its own IIFE so it never interferes with navScript.
	1026	const navAiDropdownScript = `
	1027	(function(){
f5b9ef5Claude	1028	function makeDropdown(rootSel, triggerSel, menuSel) {
	1029	var open = false;
	1030	var root = document.querySelector(rootSel);
	1031	if (!root) return;
	1032	var trigger = root.querySelector(triggerSel);
	1033	var menu = root.querySelector(menuSel);
	1034	if (!trigger \|\| !menu) return;
	1035	function setOpen(next){
	1036	open = !!next;
	1037	root.classList.toggle('is-open', open);
	1038	menu.classList.toggle('is-open', open);
	1039	trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
	1040	}
	1041	trigger.addEventListener('click', function(e){ e.preventDefault(); setOpen(!open); });
	1042	document.addEventListener('click', function(e){
	1043	if (!open) return;
	1044	if (root.contains(e.target)) return;
	1045	setOpen(false);
	1046	});
	1047	document.addEventListener('keydown', function(e){
	1048	if (open && e.key === 'Escape') { e.preventDefault(); setOpen(false); trigger.focus(); }
	1049	});
c6018a5Claude	1050	}
f5b9ef5Claude	1051	makeDropdown('[data-nav-ai]', '[data-nav-ai-trigger]', '[data-nav-ai-menu]');
	1052	makeDropdown('[data-nav-user]', '[data-nav-user-trigger]', '[data-nav-user-menu]');
c6018a5Claude	1053	})();
	1054	`;
	1055
fc1817aClaude	1056	const css = `
2ce1d0bClaude	1057	/* ================================================================
479dcd9Claude	1058	* Gluecron design system — 2026.06 "Calm Infrastructure"
	1059	* Slate base · single calm indigo accent · hairline geometry ·
	1060	* mono-as-feature · restrained motion · Inter Tight + JetBrains Mono.
	1061	* Visual language targets trustworthy developer infrastructure
	1062	* (GitHub / Linear / Stripe), not neon sci-fi. All class names and
	1063	* token names preserved for back-compat across 50+ route views —
	1064	* legacy tokens (e.g. --accent-glow, --accent-gradient) remain
	1065	* defined as calm aliases so scattered users keep working.
2ce1d0bClaude	1066	* ============================================================== */
6fc53bdClaude	1067	:root, :root[data-theme='dark'] {
ba23fe2Claude	1068	/* Surfaces — GitHub-calibrated slate. Readable, warm, never black-void. */
	1069	--bg: #0d1117;
	1070	--bg-secondary: #161b22;
	1071	--bg-tertiary: #1c2128;
	1072	--bg-elevated: #161b22;
	1073	--bg-surface: #21262d;
	1074	--bg-hover: rgba(255,255,255,0.05);
	1075	--bg-active: rgba(255,255,255,0.09);
	1076	--bg-inset: rgba(0,0,0,0.25);
958d26aClaude	1077
	1078	/* Borders — three weights, used deliberately */
	1079	--border: rgba(255,255,255,0.06);
	1080	--border-subtle: rgba(255,255,255,0.035);
	1081	--border-strong: rgba(255,255,255,0.13);
479dcd9Claude	1082	--border-focus: rgba(91,110,232,0.55);
958d26aClaude	1083
	1084	/* Text */
	1085	--text: #ededf2;
	1086	--text-strong: #f7f7fb;
	1087	--text-muted: #8b8c9c;
	1088	--text-faint: #555665;
479dcd9Claude	1089	--text-link: #9aa8ef;
	1090
	1091	/* Accent — single calm indigo. --accent-2 is a desaturated
	1092	slate-teal kept only for the rare secondary signal; the old
	1093	electric cyan pairing is gone. Gradient tokens survive as
	1094	near-flat two-stops so existing gradient consumers render as
	1095	a quiet single hue. --accent-glow is now a faint 1px ring. */
	1096	--accent: #5b6ee8;
	1097	--accent-2: #5f8fa0;
	1098	--accent-warm: #d9a662;
	1099	--accent-hover: #7585ee;
	1100	--accent-pressed:#4a5ad1;
	1101	--accent-gradient: linear-gradient(135deg, #5b6ee8 0%, #5365dd 100%);
	1102	--accent-gradient-soft: linear-gradient(135deg, rgba(91,110,232,0.14) 0%, rgba(83,101,221,0.14) 100%);
	1103	--accent-gradient-faint: linear-gradient(135deg, rgba(91,110,232,0.06) 0%, rgba(83,101,221,0.06) 100%);
	1104	--accent-glow: 0 0 0 1px rgba(91,110,232,0.22);
958d26aClaude	1105
	1106	/* Semantic */
	1107	--green: #34d399;
	1108	--red: #f87171;
	1109	--yellow: #fbbf24;
	1110	--amber: #fbbf24;
	1111	--blue: #60a5fa;
	1112
3a5755eClaude	1113	/* Type — 2026 polish pass. Inter is the primary sans, Inter Tight for
	1114	display (headlines), JetBrains Mono for code. All three loaded from
	1115	Google Fonts with display:swap so we never block first paint. System
	1116	fallbacks remain in place — if the CDN is unreachable the site still
	1117	renders cleanly with Segoe UI (Win) / SF (Mac) / Roboto (Android). */
	1118	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace;
	1119	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
	1120	--font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
958d26aClaude	1121	--mono-feat: 'calt', 'liga', 'ss01';
	1122
	1123	/* Radius — sharper than before */
	1124	--r-sm: 5px;
	1125	--r: 7px;
	1126	--r-md: 9px;
	1127	--r-lg: 12px;
	1128	--r-xl: 16px;
	1129	--r-2xl: 22px;
	1130	--r-full: 9999px;
	1131	--radius: 7px;
	1132
	1133	/* Type scale — bigger display sizes for editorial feel */
	1134	--t-xs: 11px;
	1135	--t-sm: 13px;
	1136	--t-base: 14px;
	1137	--t-md: 16px;
	1138	--t-lg: 20px;
	1139	--t-xl: 28px;
	1140	--t-2xl: 40px;
	1141	--t-3xl: 56px;
	1142	--t-display: 72px;
	1143	--t-display-lg:96px;
	1144
	1145	/* Spacing — 4px base */
2ce1d0bClaude	1146	--s-0: 0;
958d26aClaude	1147	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
	1148	--s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
	1149	--s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px;
	1150	--s-20:80px; --s-24:96px; --s-32:128px;
	1151
	1152	/* Elevation — softer + more layered */
	1153	--elev-0: 0 0 0 1px var(--border);
	1154	--elev-1: 0 1px 2px rgba(0,0,0,0.50), 0 0 0 1px var(--border);
	1155	--elev-2: 0 8px 24px -8px rgba(0,0,0,0.60), 0 0 0 1px var(--border);
	1156	--elev-3: 0 20px 48px -12px rgba(0,0,0,0.70), 0 0 0 1px var(--border-strong);
479dcd9Claude	1157	--elev-glow: 0 0 0 1px rgba(91,110,232,0.32);
	1158	--ring: 0 0 0 3px rgba(91,110,232,0.28);
958d26aClaude	1159	--ring-warn: 0 0 0 3px rgba(251,191,36,0.28);
	1160	--ring-err: 0 0 0 3px rgba(248,113,113,0.28);
	1161
	1162	/* Motion */
	1163	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	1164	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	1165	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	1166	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	1167	--t-fast: 120ms;
e589f77ccantynz-alt	1168	--dur-base: 200ms;
958d26aClaude	1169	--t-slow: 360ms;
	1170	--t-slower:560ms;
	1171
	1172	--header-h: 60px;
c63b860Claude	1173
	1174	/* Block O3 — visual coherence: named token aliases (additive). */
	1175	--space-1: var(--s-1);
	1176	--space-2: var(--s-2);
	1177	--space-3: var(--s-3);
	1178	--space-4: var(--s-4);
	1179	--space-5: var(--s-5);
	1180	--space-6: var(--s-6);
	1181	--space-8: var(--s-8);
	1182	--space-10: var(--s-10);
	1183	--space-12: var(--s-12);
	1184	--space-16: var(--s-16);
	1185	--space-20: var(--s-20);
	1186	--space-24: var(--s-24);
	1187	--radius-sm: var(--r-sm);
	1188	--radius-md: var(--r-md);
	1189	--radius-lg: var(--r-lg);
	1190	--radius-xl: var(--r-xl);
	1191	--radius-full: var(--r-full);
	1192	--font-size-xs: var(--t-xs);
	1193	--font-size-sm: var(--t-sm);
	1194	--font-size-base: var(--t-base);
	1195	--font-size-md: var(--t-md);
	1196	--font-size-lg: var(--t-lg);
	1197	--font-size-xl: var(--t-xl);
	1198	--font-size-2xl: var(--t-2xl);
	1199	--font-size-3xl: var(--t-3xl);
	1200	--font-size-hero: var(--t-display);
	1201	--leading-tight: 1.2;
	1202	--leading-snug: 1.35;
	1203	--leading-normal: 1.5;
	1204	--leading-relaxed: 1.6;
	1205	--leading-loose: 1.7;
	1206	--z-base: 1;
	1207	--z-nav: 10;
	1208	--z-sticky: 50;
	1209	--z-overlay: 100;
	1210	--z-modal: 1000;
	1211	--z-toast: 10000;
fc1817aClaude	1212	}
	1213
6fc53bdClaude	1214	:root[data-theme='light'] {
2fd463bccanty labs	1215	/* Quiet Intelligence palette — calm editorial light, calibrated
	1216	alongside Linear / Vercel / Stripe. page #fcfcfd, ink #16181d,
	1217	single indigo accent #4353c9 reserved for links/active states;
	1218	primary actions are ink, not indigo (see .btn-primary override). */
	1219	--bg: #fcfcfd;
4c47454Claude	1220	--bg-secondary: #ffffff;
958d26aClaude	1221	--bg-tertiary: #f3f3f6;
	1222	--bg-elevated: #ffffff;
	1223	--bg-surface: #f6f6f9;
	1224	--bg-hover: rgba(0,0,0,0.035);
	1225	--bg-active: rgba(0,0,0,0.07);
	1226	--bg-inset: rgba(0,0,0,0.04);
	1227
2fd463bccanty labs	1228	--border: rgba(22,24,29,0.08);
	1229	--border-subtle: rgba(22,24,29,0.04);
	1230	--border-strong: rgba(22,24,29,0.16);
958d26aClaude	1231
2fd463bccanty labs	1232	--text: #16181d;
	1233	--text-strong: #0f1116;
	1234	--text-muted: #565863;
	1235	--text-faint: #868894;
479dcd9Claude	1236	--text-link: #4353c9;
958d26aClaude	1237
479dcd9Claude	1238	--accent: #4353c9;
	1239	--accent-2: #41707e;
	1240	--accent-hover: #3848b6;
	1241	--accent-pressed:#2e3c9d;
	1242	--accent-glow: 0 0 0 1px rgba(67,83,201,0.15);
	1243	--border-focus: rgba(67,83,201,0.50);
	1244	--ring: 0 0 0 3px rgba(67,83,201,0.20);
958d26aClaude	1245
2fd463bccanty labs	1246	--green: #1e7f5c;
	1247	--red: #c0362c;
	1248	--yellow: #b45309;
958d26aClaude	1249
2fd463bccanty labs	1250	--elev-1: 0 1px 2px rgba(22,24,29,0.06), 0 0 0 1px var(--border);
	1251	--elev-2: 0 8px 24px -10px rgba(22,24,29,0.10), 0 0 0 1px var(--border);
	1252	--elev-3: 0 20px 48px -16px rgba(22,24,29,0.14), 0 0 0 1px var(--border-strong);
6fc53bdClaude	1253	}
	1254
	1255	/* Theme toggle — show the icon for the opposite theme so users see what they'll switch to. */
958d26aClaude	1256	.nav-theme { display: inline-flex; align-items: center; font-size: 15px; line-height: 1; opacity: 0.85; }
	1257	.nav-theme:hover { opacity: 1; }
6fc53bdClaude	1258	:root[data-theme='dark'] .theme-icon-dark { display: none; }
	1259	:root[data-theme='light'] .theme-icon-light { display: none; }
	1260
fc1817aClaude	1261	* { margin: 0; padding: 0; box-sizing: border-box; }
479dcd9Claude	1262	*::selection { background: rgba(91,110,232,0.32); color: var(--text-strong); }
2ce1d0bClaude	1263
958d26aClaude	1264	html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
fc1817aClaude	1265
	1266	body {
	1267	font-family: var(--font-sans);
	1268	background: var(--bg);
	1269	color: var(--text);
cf9178bTest User	1270	font-size: 15px;
2ce1d0bClaude	1271	line-height: 1.55;
958d26aClaude	1272	letter-spacing: -0.011em;
fc1817aClaude	1273	min-height: 100vh;
	1274	display: flex;
	1275	flex-direction: column;
958d26aClaude	1276	font-feature-settings: 'cv11', 'ss01', 'ss03', 'calt';
cf9178bTest User	1277	/* Subtle: prefers grayscale font smoothing on macOS for thin text,
	1278	and disables automatic synthesis of bold/italic which can produce
	1279	muddier rendering on certain weights. */
	1280	-webkit-font-smoothing: antialiased;
	1281	-moz-osx-font-smoothing: grayscale;
	1282	font-synthesis: none;
	1283	}
e589f77ccantynz-alt	1284	/* Heading scale — confident, editorial, tight tracking. Single
	1285	source of truth (token-based); the older hardcoded-px block that
	1286	preceded this was fully overridden (dead) and has been folded in
	1287	here, carrying over only its unique margin-top: 0. */
cf9178bTest User	1288	h1, h2, h3, h4, h5, h6 {
	1289	font-family: var(--font-display);
e589f77ccantynz-alt	1290	font-weight: 600;
cf9178bTest User	1291	letter-spacing: -0.022em;
	1292	line-height: 1.18;
e589f77ccantynz-alt	1293	color: var(--text-strong);
cf9178bTest User	1294	margin-top: 0;
	1295	}
e589f77ccantynz-alt	1296	h1 { font-size: var(--t-xl); letter-spacing: -0.028em; }
	1297	h2 { font-size: var(--t-lg); letter-spacing: -0.022em; }
	1298	h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.015em; }
	1299	h4 { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; }
	1300	h5, h6 { font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em; }
	1301
	1302	/* Link refinement — single collapsed rule. The earlier duplicate
	1303	a{}/a:hover (underline on hover) was overridden by the later
	1304	a:hover (no underline), which wins and is kept here. */
cf9178bTest User	1305	a { color: var(--text-link); text-decoration: none; transition: color var(--t-fast) var(--ease); }
e589f77ccantynz-alt	1306	a:hover { color: var(--accent-hover); text-decoration: none; }
cf9178bTest User	1307	a:focus-visible {
	1308	outline: none;
479dcd9Claude	1309	box-shadow: 0 0 0 3px rgba(91,110,232,0.32);
cf9178bTest User	1310	border-radius: 3px;
fc1817aClaude	1311	}
	1312
ba23fe2Claude	1313	/* No full-page atmosphere overlay — clean backgrounds signal trustworthy
	1314	infrastructure. Effects live on pages that earn them (landing hero only). */
2ce1d0bClaude	1315
958d26aClaude	1316	/* Editorial display heading utility — used by landing + marketing pages */
	1317	.display {
	1318	font-family: var(--font-display);
	1319	font-size: clamp(40px, 7.5vw, 96px);
	1320	line-height: 0.98;
	1321	letter-spacing: -0.04em;
	1322	font-weight: 600;
	1323	color: var(--text-strong);
2ce1d0bClaude	1324	}
fc1817aClaude	1325
958d26aClaude	1326	/* Eyebrow — uppercase mono label that sits above section headings */
	1327	.eyebrow {
	1328	display: inline-flex;
	1329	align-items: center;
	1330	gap: 8px;
	1331	font-family: var(--font-mono);
	1332	font-size: 11px;
	1333	font-weight: 500;
	1334	letter-spacing: 0.14em;
	1335	text-transform: uppercase;
	1336	color: var(--accent);
	1337	margin-bottom: var(--s-3);
	1338	}
	1339	.eyebrow::before {
	1340	content: '';
	1341	width: 18px;
	1342	height: 1px;
	1343	background: currentColor;
	1344	opacity: 0.6;
	1345	}
	1346
	1347	/* Section header — paired eyebrow + title + lede */
	1348	.section-header { max-width: 720px; margin: 0 auto var(--s-10); text-align: center; }
	1349	.section-header.left { text-align: left; margin-left: 0; margin-right: auto; }
	1350	.section-header h2 {
	1351	font-size: clamp(28px, 4vw, 44px);
	1352	line-height: 1.05;
	1353	letter-spacing: -0.028em;
	1354	margin-bottom: var(--s-3);
	1355	}
	1356	.section-header p {
	1357	color: var(--text-muted);
	1358	font-size: var(--t-md);
	1359	line-height: 1.6;
	1360	max-width: 580px;
	1361	margin: 0 auto;
	1362	}
	1363	.section-header.left p { margin-left: 0; }
fc1817aClaude	1364
958d26aClaude	1365	code, kbd, samp {
2ce1d0bClaude	1366	font-family: var(--font-mono);
958d26aClaude	1367	font-feature-settings: var(--mono-feat);
	1368	}
	1369	code {
	1370	font-size: 0.9em;
2ce1d0bClaude	1371	background: var(--bg-tertiary);
958d26aClaude	1372	border: 1px solid var(--border-subtle);
2ce1d0bClaude	1373	padding: 1px 6px;
	1374	border-radius: var(--r-sm);
	1375	color: var(--text);
	1376	}
958d26aClaude	1377	kbd, .kbd {
	1378	display: inline-flex;
	1379	align-items: center;
	1380	padding: 1px 6px;
	1381	font-family: var(--font-mono);
	1382	font-size: 11px;
	1383	background: var(--bg-elevated);
	1384	border: 1px solid var(--border);
	1385	border-bottom-width: 2px;
	1386	border-radius: 4px;
	1387	color: var(--text);
	1388	line-height: 1.5;
	1389	vertical-align: middle;
	1390	}
2ce1d0bClaude	1391
958d26aClaude	1392	/* Mono utility for technical chrome (paths, IDs, dates) */
	1393	.mono { font-family: var(--font-mono); font-feature-settings: var(--mono-feat); font-size: 0.96em; }
	1394	.meta-mono { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); letter-spacing: 0; }
	1395
	1396	/* Pre-launch banner — slim, refined, mono caption */
4a52a98Claude	1397	.prelaunch-banner {
958d26aClaude	1398	position: relative;
2ce1d0bClaude	1399	background:
958d26aClaude	1400	linear-gradient(180deg, rgba(251,191,36,0.10), rgba(251,191,36,0.03)),
2ce1d0bClaude	1401	var(--bg);
958d26aClaude	1402	border-bottom: 1px solid rgba(251,191,36,0.28);
4a52a98Claude	1403	color: var(--yellow);
958d26aClaude	1404	padding: 7px 24px;
	1405	font-family: var(--font-mono);
	1406	font-size: 11px;
4a52a98Claude	1407	font-weight: 500;
	1408	text-align: center;
2ce1d0bClaude	1409	line-height: 1.5;
958d26aClaude	1410	letter-spacing: 0.04em;
	1411	text-transform: uppercase;
	1412	}
	1413	.prelaunch-banner::before {
	1414	content: '◆';
	1415	margin-right: 8px;
	1416	font-size: 9px;
	1417	opacity: 0.7;
	1418	vertical-align: 1px;
4a52a98Claude	1419	}
	1420
cd4f63bTest User	1421	/* Block Q3 — Playground banner. Brighter than the prelaunch strip so
	1422	visitors don't miss the "save your work" CTA, but slim enough to
	1423	not feel like a modal. */
	1424	.playground-banner {
	1425	position: relative;
	1426	display: flex;
	1427	align-items: center;
	1428	justify-content: center;
	1429	gap: 8px;
	1430	background:
	1431	linear-gradient(180deg, rgba(251,191,36,0.20), rgba(251,191,36,0.06)),
	1432	var(--bg);
	1433	border-bottom: 1px solid rgba(251,191,36,0.45);
	1434	color: var(--yellow, #fbbf24);
	1435	padding: 8px 40px 8px 24px;
	1436	font-size: 13px;
	1437	font-weight: 500;
	1438	text-align: center;
	1439	line-height: 1.4;
	1440	}
	1441	.playground-banner-icon { font-size: 14px; }
	1442	.playground-banner-text { color: var(--text-strong, #e6edf3); }
	1443	.playground-banner-countdown { font-weight: 600; }
	1444	.playground-banner-cta {
	1445	margin-left: 4px;
	1446	color: var(--yellow, #fbbf24);
	1447	text-decoration: underline;
	1448	font-weight: 600;
	1449	}
	1450	.playground-banner-cta:hover { opacity: 0.85; }
	1451	.playground-banner-dismiss {
	1452	position: absolute;
	1453	top: 50%;
	1454	right: 12px;
	1455	transform: translateY(-50%);
	1456	background: transparent;
	1457	border: none;
	1458	color: var(--text-muted, #8b949e);
	1459	font-size: 18px;
	1460	line-height: 1;
	1461	cursor: pointer;
	1462	padding: 0 4px;
	1463	}
	1464	.playground-banner-dismiss:hover { color: var(--text-strong, #e6edf3); }
	1465
41a1450Claude	1466	/* Site nav header — sticky, blurred, hairline border. Scoped to
	1467	.site-header: pages use semantic <header> elements for section/hero
	1468	headings, and a bare element selector here turns every one of them
	1469	into a 64px sticky bar (the /pricing hero-overlap bug). */
	1470	.site-header {
2ce1d0bClaude	1471	position: sticky;
	1472	top: 0;
	1473	z-index: 100;
fc1817aClaude	1474	border-bottom: 1px solid var(--border);
2ce1d0bClaude	1475	padding: 0 24px;
	1476	height: var(--header-h);
ba23fe2Claude	1477	background: rgba(13,17,23,0.80);
	1478	backdrop-filter: saturate(160%) blur(16px);
	1479	-webkit-backdrop-filter: saturate(160%) blur(16px);
fc1817aClaude	1480	}
ba23fe2Claude	1481	:root[data-theme='light'] .site-header { background: rgba(251,251,252,0.85); }
fc1817aClaude	1482
41a1450Claude	1483	.site-header nav {
06d5ffeClaude	1484	display: flex;
	1485	align-items: center;
958d26aClaude	1486	gap: 18px;
eed4684Claude	1487	max-width: 1920px;
06d5ffeClaude	1488	margin: 0 auto;
2ce1d0bClaude	1489	height: 100%;
	1490	}
	1491	.logo {
958d26aClaude	1492	font-family: var(--font-display);
	1493	font-size: 16px;
2ce1d0bClaude	1494	font-weight: 700;
958d26aClaude	1495	letter-spacing: -0.025em;
	1496	color: var(--text-strong);
2ce1d0bClaude	1497	display: inline-flex;
	1498	align-items: center;
958d26aClaude	1499	gap: 9px;
	1500	transition: opacity var(--t-fast) var(--ease);
06d5ffeClaude	1501	}
2ce1d0bClaude	1502	.logo::before {
	1503	content: '';
958d26aClaude	1504	width: 20px; height: 20px;
	1505	border-radius: 6px;
64aa989Claude	1506	background: var(--accent);
	1507	box-shadow: none;
2ce1d0bClaude	1508	flex-shrink: 0;
e589f77ccantynz-alt	1509	transition: box-shadow var(--dur-base) var(--ease);
958d26aClaude	1510	}
	1511	.logo:hover { text-decoration: none; color: var(--text-strong); }
	1512	.logo:hover::before {
64aa989Claude	1513	box-shadow: none;
06d5ffeClaude	1514	}
fc1817aClaude	1515
2ce1d0bClaude	1516	.nav-search {
	1517	flex: 1;
958d26aClaude	1518	max-width: 360px;
	1519	margin: 0 4px 0 8px;
	1520	position: relative;
2ce1d0bClaude	1521	}
	1522	.nav-search input {
	1523	width: 100%;
958d26aClaude	1524	padding: 7px 12px 7px 32px;
2ce1d0bClaude	1525	background: var(--bg-tertiary);
	1526	border: 1px solid var(--border);
	1527	border-radius: var(--r-sm);
	1528	color: var(--text);
	1529	font-family: var(--font-sans);
	1530	font-size: var(--t-sm);
958d26aClaude	1531	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
	1532	}
	1533	.nav-search::before {
	1534	content: '';
	1535	position: absolute;
	1536	left: 11px; top: 50%;
	1537	transform: translateY(-50%);
	1538	width: 12px; height: 12px;
	1539	border: 1.5px solid var(--text-faint);
	1540	border-radius: 50%;
	1541	pointer-events: none;
	1542	}
	1543	.nav-search::after {
	1544	content: '';
	1545	position: absolute;
	1546	left: 19px; top: calc(50% + 4px);
	1547	width: 5px; height: 1.5px;
	1548	background: var(--text-faint);
	1549	transform: rotate(45deg);
	1550	pointer-events: none;
2ce1d0bClaude	1551	}
	1552	.nav-search input::placeholder { color: var(--text-faint); }
	1553	.nav-search input:focus {
	1554	outline: none;
	1555	background: var(--bg-secondary);
958d26aClaude	1556	border-color: var(--border-focus);
	1557	box-shadow: var(--ring);
2ce1d0bClaude	1558	}
06d5ffeClaude	1559
958d26aClaude	1560	.nav-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
f764c07Claude	1561
	1562	/* Block N3 — site-admin deploy status pill */
	1563	.nav-deploy-pill {
	1564	display: inline-flex;
	1565	align-items: center;
	1566	gap: 6px;
	1567	padding: 4px 10px;
	1568	margin: 0 6px 0 0;
	1569	border-radius: 9999px;
	1570	font-size: 11px;
	1571	font-weight: 600;
	1572	line-height: 1;
	1573	color: var(--text-strong);
	1574	background: var(--bg-elevated);
	1575	border: 1px solid var(--border);
	1576	text-decoration: none;
	1577	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	1578	}
	1579	.nav-deploy-pill:hover { background: var(--bg-hover); text-decoration: none; }
	1580	.nav-deploy-pill .deploy-pill-dot {
	1581	display: inline-block;
	1582	width: 8px; height: 8px;
	1583	border-radius: 50%;
	1584	background: #6b7280;
	1585	}
479dcd9Claude	1586	.deploy-pill-success .deploy-pill-dot { background: #34d399; }
	1587	.deploy-pill-failed .deploy-pill-dot { background: #f87171; }
f764c07Claude	1588	.deploy-pill-failed { border-color: rgba(248,113,113,0.4); }
	1589	.deploy-pill-progress .deploy-pill-dot {
	1590	background: #fbbf24;
	1591	animation: deployPillPulse 1.2s ease-in-out infinite;
	1592	}
	1593	@keyframes deployPillPulse {
	1594	0%, 100% { opacity: 1; transform: scale(1); }
	1595	50% { opacity: 0.45; transform: scale(0.8); }
	1596	}
	1597	.deploy-pill-empty .deploy-pill-dot { background: #9ca3af; }
	1598
c6018a5Claude	1599	/* ── AI dropdown (nav consolidation) ── */
	1600	.nav-ai-dropdown {
	1601	position: relative;
	1602	display: inline-flex;
	1603	align-items: center;
	1604	}
	1605	.nav-ai-trigger {
	1606	background: transparent;
	1607	border: 0;
	1608	font: inherit;
	1609	cursor: pointer;
	1610	color: var(--text-muted);
	1611	font-size: var(--t-sm);
	1612	font-weight: 500;
	1613	padding: 7px 11px;
	1614	border-radius: var(--r-sm);
	1615	line-height: 1.2;
	1616	}
	1617	.nav-ai-trigger:hover {
	1618	color: var(--text-strong);
	1619	background: var(--bg-hover);
	1620	}
	1621	.nav-ai-menu {
	1622	position: absolute;
	1623	top: calc(100% + 6px);
	1624	right: 0;
	1625	min-width: 220px;
	1626	background: var(--bg-secondary);
	1627	border: 1px solid var(--border-strong);
	1628	border-radius: 10px;
479dcd9Claude	1629	box-shadow: 0 12px 32px rgba(0,0,0,0.40), 0 0 0 1px rgba(91,110,232,0.10);
c6018a5Claude	1630	padding: 6px;
	1631	display: none;
	1632	z-index: var(--z-overlay, 100);
	1633	}
	1634	.nav-ai-dropdown:hover .nav-ai-menu,
	1635	.nav-ai-dropdown.is-open .nav-ai-menu,
	1636	.nav-ai-dropdown:focus-within .nav-ai-menu {
	1637	display: block;
	1638	}
	1639	.nav-ai-item {
	1640	display: flex;
	1641	flex-direction: column;
	1642	gap: 1px;
	1643	padding: 8px 10px;
	1644	border-radius: 6px;
	1645	color: var(--text);
	1646	text-decoration: none;
	1647	transition: background var(--t-fast) var(--ease);
	1648	}
	1649	.nav-ai-item:hover {
	1650	background: var(--bg-hover);
	1651	text-decoration: none;
	1652	color: var(--text-strong);
	1653	}
	1654	.nav-ai-item-label {
	1655	font-size: var(--t-sm);
	1656	font-weight: 600;
	1657	color: var(--text-strong);
	1658	}
	1659	.nav-ai-item-sub {
	1660	font-size: 11.5px;
	1661	color: var(--text-muted);
	1662	}
	1663
2ce1d0bClaude	1664	.nav-link {
958d26aClaude	1665	position: relative;
2ce1d0bClaude	1666	color: var(--text-muted);
	1667	font-size: var(--t-sm);
	1668	font-weight: 500;
958d26aClaude	1669	padding: 7px 11px;
2ce1d0bClaude	1670	border-radius: var(--r-sm);
958d26aClaude	1671	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
2ce1d0bClaude	1672	}
	1673	.nav-link:hover {
958d26aClaude	1674	color: var(--text-strong);
2ce1d0bClaude	1675	background: var(--bg-hover);
	1676	text-decoration: none;
	1677	}
958d26aClaude	1678	.nav-link.active { color: var(--text-strong); }
	1679	.nav-link.active::after {
	1680	content: '';
	1681	position: absolute;
	1682	left: 11px; right: 11px;
	1683	bottom: -1px;
	1684	height: 2px;
64aa989Claude	1685	background: var(--accent);
958d26aClaude	1686	border-radius: 2px;
	1687	}
adf5e18Claude	1688	/* "Migrate from GitHub" nav link — logged-out only, slightly accented
	1689	so it reads as an action affordance rather than a passive link. */
	1690	.nav-migrate {
	1691	color: var(--accent);
	1692	font-weight: 600;
479dcd9Claude	1693	border: 1px solid rgba(91,110,232,0.22);
	1694	background: rgba(91,110,232,0.07);
adf5e18Claude	1695	}
	1696	.nav-migrate:hover {
	1697	color: var(--accent-hover);
479dcd9Claude	1698	background: rgba(91,110,232,0.13);
	1699	border-color: rgba(91,110,232,0.40);
adf5e18Claude	1700	}
	1701	@media (max-width: 780px) { .nav-migrate { display: none; } }
	1702
2c61840Claude	1703	/* ── Mobile nav ──────────────────────────��──────────────────── */
	1704	@media (max-width: 640px) {
	1705	.site-header nav { gap: 10px; padding: 0 var(--space-3); }
	1706	.nav-search { display: none; }
	1707	.nav-right { gap: 4px; }
	1708	.nav-link { display: none; }
	1709	.nav-ai-dropdown { display: none; }
	1710	.nav-deploy-pill .deploy-pill-text { display: none; }
	1711	.nav-inbox-btn .nav-inbox-badge { font-size: 9px; min-width: 14px; height: 14px; }
	1712	}
	1713
2ce1d0bClaude	1714	.nav-user {
958d26aClaude	1715	color: var(--text-strong);
2ce1d0bClaude	1716	font-weight: 600;
	1717	font-size: var(--t-sm);
	1718	padding: 6px 10px;
	1719	border-radius: var(--r-sm);
958d26aClaude	1720	margin-left: 6px;
2ce1d0bClaude	1721	transition: background var(--t-fast) var(--ease);
	1722	}
958d26aClaude	1723	.nav-user::before {
	1724	content: '';
	1725	display: inline-block;
	1726	width: 8px; height: 8px;
	1727	background: var(--green);
	1728	border-radius: 50%;
	1729	margin-right: 7px;
	1730	vertical-align: 1px;
	1731	}
2ce1d0bClaude	1732	.nav-user:hover { background: var(--bg-hover); text-decoration: none; }
fc1817aClaude	1733
f5b9ef5Claude	1734	/* ── Inbox bell button ── */
	1735	.nav-inbox-btn {
	1736	position: relative;
	1737	display: inline-flex;
	1738	align-items: center;
	1739	justify-content: center;
	1740	width: 34px;
	1741	height: 34px;
	1742	border-radius: var(--r-sm);
	1743	color: var(--text-muted);
	1744	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	1745	flex-shrink: 0;
	1746	}
	1747	.nav-inbox-btn:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
	1748	.nav-inbox-badge {
	1749	position: absolute;
	1750	top: 3px; right: 3px;
	1751	min-width: 15px; height: 15px;
	1752	padding: 0 4px;
	1753	font-size: 9.5px;
	1754	font-weight: 700;
	1755	line-height: 15px;
	1756	color: #fff;
479dcd9Claude	1757	background: var(--accent);
f5b9ef5Claude	1758	border-radius: 9999px;
	1759	text-align: center;
	1760	font-variant-numeric: tabular-nums;
	1761	}
	1762
	1763	/* ── User dropdown ── */
	1764	.nav-user-dropdown { position: relative; }
	1765	.nav-user-trigger {
	1766	display: inline-flex;
	1767	align-items: center;
	1768	gap: 7px;
	1769	padding: 5px 9px 5px 5px;
	1770	border-radius: var(--r-sm);
	1771	border: 1px solid transparent;
	1772	background: transparent;
	1773	color: var(--text);
	1774	font-family: var(--font-sans);
	1775	font-size: var(--t-sm);
	1776	font-weight: 500;
	1777	cursor: pointer;
	1778	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	1779	}
	1780	.nav-user-trigger:hover { background: var(--bg-hover); border-color: var(--border); }
	1781	.nav-user-avatar {
	1782	width: 24px; height: 24px;
	1783	border-radius: 50%;
64aa989Claude	1784	background: var(--accent);
f5b9ef5Claude	1785	color: #fff;
	1786	font-size: 11px;
	1787	font-weight: 700;
	1788	display: inline-flex;
	1789	align-items: center;
	1790	justify-content: center;
	1791	flex-shrink: 0;
	1792	box-shadow: 0 0 0 2px var(--border);
	1793	}
	1794	.nav-user-name { font-weight: 500; font-size: var(--t-sm); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	1795	.nav-user-caret { font-size: 8px; opacity: 0.5; }
	1796	.nav-user-menu {
	1797	display: none;
	1798	position: absolute;
	1799	top: calc(100% + 6px);
	1800	right: 0;
	1801	min-width: 220px;
	1802	background: var(--bg-elevated);
	1803	border: 1px solid var(--border-strong);
	1804	border-radius: var(--r-lg);
	1805	box-shadow: 0 16px 48px -8px rgba(0,0,0,0.55), 0 0 0 1px var(--border);
	1806	padding: 6px;
	1807	z-index: 200;
	1808	animation: navMenuIn 140ms var(--ease) both;
	1809	}
	1810	.nav-user-menu.is-open { display: block; }
	1811	.nav-user-menu-header {
	1812	padding: 8px 10px 10px;
	1813	display: flex;
	1814	flex-direction: column;
	1815	gap: 2px;
	1816	}
	1817	.nav-user-menu-name { font-weight: 600; font-size: var(--t-sm); color: var(--text-strong); }
	1818	.nav-user-menu-handle { font-size: var(--t-xs); color: var(--text-muted); }
	1819	.nav-user-menu-sep { height: 1px; background: var(--border); margin: 4px -6px; }
	1820	.nav-user-item {
	1821	display: block;
	1822	padding: 7px 10px;
	1823	border-radius: 6px;
	1824	font-size: var(--t-sm);
	1825	color: var(--text);
	1826	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	1827	white-space: nowrap;
	1828	}
	1829	.nav-user-item:hover { background: var(--bg-hover); color: var(--text-strong); text-decoration: none; }
	1830	.nav-user-item--danger { color: var(--red); }
	1831	.nav-user-item--danger:hover { background: rgba(248,113,113,0.08); color: var(--red); }
	1832
	1833	@keyframes navMenuIn {
	1834	from { opacity: 0; transform: translateY(-4px) scale(0.97); }
	1835	to { opacity: 1; transform: translateY(0) scale(1); }
	1836	}
	1837
2ce1d0bClaude	1838	main {
eed4684Claude	1839	max-width: 1920px;
2ce1d0bClaude	1840	margin: 0 auto;
958d26aClaude	1841	padding: 36px 24px 80px;
2ce1d0bClaude	1842	flex: 1;
	1843	width: 100%;
2c61840Claude	1844	box-sizing: border-box;
479dcd9Claude	1845	/* Subtle entrance fade on page load — kept short (180ms) so it
	1846	reads as responsiveness, not theatre. Honors reduced-motion. */
	1847	animation: gxMainEnter 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
ed6e438Claude	1848	}
	1849	@keyframes gxMainEnter {
479dcd9Claude	1850	from { opacity: 0; transform: translateY(3px); }
ed6e438Claude	1851	to { opacity: 1; transform: translateY(0); }
	1852	}
	1853	@media (prefers-reduced-motion: reduce) {
	1854	main { animation: none; }
	1855	}
	1856	/* 2026 polish — accent focus ring across all focusable elements.
	1857	The default browser ring is utilitarian; this is the same width
	1858	but tinted to the brand accent so keyboard navigation feels
	1859	intentional, not jarring. :focus-visible only — mouse users
	1860	never see it. */
	1861	:focus-visible {
	1862	outline: none;
	1863	}
	1864	a:focus-visible,
	1865	button:focus-visible,
	1866	input:focus-visible,
	1867	select:focus-visible,
	1868	textarea:focus-visible,
	1869	[tabindex]:focus-visible {
479dcd9Claude	1870	outline: 2px solid rgba(91, 110, 232, 0.55);
ed6e438Claude	1871	outline-offset: 2px;
	1872	border-radius: 4px;
2ce1d0bClaude	1873	}
fc1817aClaude	1874
958d26aClaude	1875	/* Editorial footer: link grid + tagline row */
fc1817aClaude	1876	footer {
	1877	border-top: 1px solid var(--border);
958d26aClaude	1878	padding: 56px 24px 40px;
fc1817aClaude	1879	color: var(--text-muted);
958d26aClaude	1880	font-size: var(--t-sm);
ba23fe2Claude	1881	background: var(--bg);
958d26aClaude	1882	}
	1883	footer .footer-inner {
eed4684Claude	1884	max-width: 1920px;
958d26aClaude	1885	margin: 0 auto;
	1886	display: grid;
	1887	grid-template-columns: 1fr auto;
	1888	gap: 48px;
	1889	align-items: start;
	1890	}
	1891	footer .footer-brand .logo { margin-bottom: var(--s-3); }
	1892	footer .footer-tag {
	1893	color: var(--text-muted);
	1894	font-size: var(--t-sm);
	1895	max-width: 320px;
	1896	line-height: 1.55;
	1897	}
	1898	footer .footer-links {
	1899	display: grid;
	1900	grid-template-columns: repeat(3, minmax(120px, auto));
	1901	gap: 0 56px;
	1902	}
	1903	footer .footer-col-title {
	1904	font-family: var(--font-mono);
	1905	font-size: 11px;
	1906	text-transform: uppercase;
	1907	letter-spacing: 0.14em;
	1908	color: var(--text-faint);
	1909	margin-bottom: var(--s-3);
	1910	}
	1911	footer .footer-col a {
	1912	display: block;
	1913	color: var(--text-muted);
	1914	font-size: var(--t-sm);
	1915	padding: 5px 0;
	1916	transition: color var(--t-fast) var(--ease);
	1917	}
	1918	footer .footer-col a:hover { color: var(--text-strong); text-decoration: none; }
	1919	footer .footer-bottom {
eed4684Claude	1920	max-width: 1920px;
958d26aClaude	1921	margin: 40px auto 0;
	1922	padding-top: 24px;
	1923	border-top: 1px solid var(--border-subtle);
	1924	display: flex;
	1925	justify-content: space-between;
	1926	align-items: center;
2ce1d0bClaude	1927	color: var(--text-faint);
	1928	font-size: var(--t-xs);
958d26aClaude	1929	font-family: var(--font-mono);
	1930	letter-spacing: 0.02em;
	1931	}
	1932	footer .footer-bottom a { color: var(--text-faint); }
	1933	footer .footer-bottom a:hover { color: var(--text-muted); text-decoration: none; }
05cdb85Claude	1934	footer .footer-build {
	1935	display: inline-flex;
	1936	align-items: center;
	1937	gap: 6px;
	1938	color: var(--text-faint);
	1939	font-family: var(--font-mono);
	1940	font-size: 11px;
	1941	cursor: help;
	1942	}
	1943	footer .footer-build-dot {
	1944	width: 6px; height: 6px;
	1945	border-radius: 50%;
	1946	background: var(--green);
479dcd9Claude	1947	opacity: 0.9;
05cdb85Claude	1948	}
958d26aClaude	1949	@media (max-width: 768px) {
2c61840Claude	1950	main { padding: 20px 14px 60px; }
958d26aClaude	1951	footer .footer-inner { grid-template-columns: 1fr; gap: 32px; }
	1952	footer .footer-links { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
	1953	footer .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
fc1817aClaude	1954	}
2c61840Claude	1955	@media (max-width: 480px) {
	1956	main { padding: 14px 10px 48px; }
	1957	}
fc1817aClaude	1958
2ce1d0bClaude	1959	/* ============================================================ */
	1960	/* Buttons */
	1961	/* ============================================================ */
dc26881CC LABS App	1962	/* ============================================================ */
	1963	/* Buttons — Block U2 senior polish pass. */
	1964	/* Rules: */
	1965	/* · hover lifts every .btn by 1px + soft drop shadow (180ms) */
	1966	/* · active presses back down to 0 (80ms — faster on press) */
	1967	/* · focus-visible uses a soft box-shadow ring (no outline) */
	1968	/* · primary gradient shifts position on hover for a slow */
	1969	/* 600ms shimmer */
	1970	/* · disabled never lifts and never animates */
	1971	/* ============================================================ */
06d5ffeClaude	1972	.btn {
	1973	display: inline-flex;
	1974	align-items: center;
2ce1d0bClaude	1975	justify-content: center;
958d26aClaude	1976	gap: 7px;
2ce1d0bClaude	1977	padding: 7px 14px;
	1978	border-radius: var(--r-sm);
958d26aClaude	1979	font-family: var(--font-sans);
2ce1d0bClaude	1980	font-size: var(--t-sm);
06d5ffeClaude	1981	font-weight: 500;
	1982	border: 1px solid var(--border);
2ce1d0bClaude	1983	background: var(--bg-elevated);
06d5ffeClaude	1984	color: var(--text);
	1985	cursor: pointer;
	1986	text-decoration: none;
958d26aClaude	1987	line-height: 1.25;
	1988	letter-spacing: -0.008em;
dc26881CC LABS App	1989	/* U2 — hover/transform settles in 180ms; press snaps in 80ms.
	1990	Listed once on the base rule so :active can override only the
	1991	transform/duration without re-typing the colour/bg transitions. */
2ce1d0bClaude	1992	transition:
dc26881CC LABS App	1993	background 180ms ease,
	1994	border-color 180ms ease,
	1995	transform 180ms ease,
	1996	box-shadow 180ms ease,
	1997	color 180ms ease;
2ce1d0bClaude	1998	user-select: none;
	1999	white-space: nowrap;
958d26aClaude	2000	position: relative;
06d5ffeClaude	2001	}
2ce1d0bClaude	2002	.btn:hover {
	2003	background: var(--bg-surface);
	2004	border-color: var(--border-strong);
958d26aClaude	2005	color: var(--text-strong);
2ce1d0bClaude	2006	text-decoration: none;
dc26881CC LABS App	2007	/* U2 — universal hover lift + soft accent drop shadow. */
	2008	transform: translateY(-1px);
	2009	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.45);
	2010	}
	2011	.btn:active {
	2012	transform: translateY(0);
	2013	transition-duration: 80ms;
	2014	}
479dcd9Claude	2015	/* U2 — soft modern focus ring via box-shadow, not outline.
	2016	The literal legacy declaration is kept for external tooling that
	2017	greps for the U2 contract; the var(--ring) declaration after it
	2018	wins the cascade and renders the calm indigo ring. */
dc26881CC LABS App	2019	.btn:focus-visible {
	2020	outline: none;
6fd5915Claude	2021	box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.35);
479dcd9Claude	2022	box-shadow: var(--ring);
2ce1d0bClaude	2023	}
	2024
	2025	.btn-primary {
e589f77ccantynz-alt	2026	background: var(--accent);
2ce1d0bClaude	2027	border-color: transparent;
	2028	color: #fff;
	2029	font-weight: 600;
958d26aClaude	2030	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
2ce1d0bClaude	2031	box-shadow:
e589f77ccantynz-alt	2032	inset 0 1px 0 rgba(255,255,255,0.12),
	2033	0 1px 2px rgba(0,0,0,0.25);
dc26881CC LABS App	2034	transition:
8cfb00eClaude	2035	background 180ms ease,
dc26881CC LABS App	2036	transform 180ms ease,
	2037	box-shadow 180ms ease,
	2038	color 180ms ease;
06d5ffeClaude	2039	}
2ce1d0bClaude	2040	.btn-primary:hover {
958d26aClaude	2041	color: #fff;
8cfb00eClaude	2042	background: var(--accent-hover);
958d26aClaude	2043	border-color: transparent;
dc26881CC LABS App	2044	transform: translateY(-1px);
e589f77ccantynz-alt	2045	filter: none;
2ce1d0bClaude	2046	box-shadow:
e589f77ccantynz-alt	2047	inset 0 1px 0 rgba(255,255,255,0.15),
	2048	0 4px 12px rgba(0,0,0,0.25);
2ce1d0bClaude	2049	}
dc26881CC LABS App	2050	.btn-primary:active { transform: translateY(0); transition-duration: 80ms; }
	2051	/* U2 — primary focus ring uses the same accent box-shadow recipe. */
	2052	.btn-primary:focus-visible {
	2053	box-shadow:
	2054	inset 0 1px 0 rgba(255,255,255,0.22),
479dcd9Claude	2055	0 0 0 3px rgba(91,110,232,0.35);
dc26881CC LABS App	2056	}
2ce1d0bClaude	2057
2fd463bccanty labs	2058	/* Quiet Intelligence (light) — primary actions are calm ink #16181d,
	2059	not indigo. The indigo accent is reserved for links + active state,
	2060	which is what reads as "trustworthy tool" vs "gamer SaaS". Scoped to
	2061	the light theme only; the dark-theme gradient rules above are
	2062	intentionally left byte-identical. */
	2063	:root[data-theme='light'] .btn-primary {
	2064	background: #16181d;
	2065	color: #fff;
	2066	text-shadow: none;
	2067	box-shadow:
	2068	inset 0 1px 0 rgba(255,255,255,0.08),
	2069	0 1px 2px rgba(22,24,29,0.24),
	2070	0 0 0 1px rgba(22,24,29,0.90);
	2071	}
	2072	:root[data-theme='light'] .btn-primary:hover {
	2073	background: #2a2d35;
	2074	box-shadow:
	2075	inset 0 1px 0 rgba(255,255,255,0.10),
	2076	0 6px 18px -6px rgba(22,24,29,0.30),
	2077	0 0 0 1px rgba(22,24,29,0.90);
	2078	}
	2079	:root[data-theme='light'] .btn-primary:focus-visible {
	2080	box-shadow:
	2081	inset 0 1px 0 rgba(255,255,255,0.08),
	2082	0 0 0 3px rgba(67,83,201,0.35);
	2083	}
	2084
2ce1d0bClaude	2085	.btn-danger {
	2086	background: transparent;
958d26aClaude	2087	border-color: rgba(248,113,113,0.40);
2ce1d0bClaude	2088	color: var(--red);
	2089	}
	2090	.btn-danger:hover {
958d26aClaude	2091	background: rgba(248,113,113,0.08);
2ce1d0bClaude	2092	border-color: var(--red);
958d26aClaude	2093	color: var(--red);
dc26881CC LABS App	2094	transform: translateY(-1px);
	2095	box-shadow: 0 4px 12px -4px rgba(248,113,113,0.30);
2ce1d0bClaude	2096	}
dc26881CC LABS App	2097	.btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(248,113,113,0.35); }
2ce1d0bClaude	2098
	2099	.btn-ghost {
	2100	background: transparent;
	2101	border-color: transparent;
	2102	color: var(--text-muted);
	2103	}
	2104	.btn-ghost:hover {
	2105	background: var(--bg-hover);
958d26aClaude	2106	color: var(--text-strong);
2ce1d0bClaude	2107	border-color: var(--border);
dc26881CC LABS App	2108	transform: translateY(-1px);
	2109	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.30);
2ce1d0bClaude	2110	}
	2111
958d26aClaude	2112	.btn-secondary {
	2113	background: var(--bg-elevated);
	2114	border-color: var(--border-strong);
	2115	color: var(--text-strong);
	2116	}
	2117	.btn-secondary:hover {
	2118	background: var(--bg-surface);
	2119	border-color: var(--border-strong);
dc26881CC LABS App	2120	transform: translateY(-1px);
	2121	box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.35);
958d26aClaude	2122	}
	2123
	2124	.btn-sm { padding: 4px 10px; font-size: var(--t-xs); border-radius: var(--r-sm); gap: 5px; }
	2125	.btn-lg { padding: 11px 22px; font-size: var(--t-base); border-radius: var(--r); }
	2126	.btn-xl { padding: 14px 28px; font-size: var(--t-md); border-radius: var(--r); font-weight: 600; }
	2127	.btn-block { width: 100%; }
2ce1d0bClaude	2128
dc26881CC LABS App	2129	/* U2 — disabled never lifts, never shimmers, never glows. */
	2130	.btn:disabled,
	2131	.btn[aria-disabled='true'],
	2132	.btn:disabled:hover,
	2133	.btn[aria-disabled='true']:hover {
	2134	opacity: 0.5;
2ce1d0bClaude	2135	cursor: not-allowed;
	2136	pointer-events: none;
dc26881CC LABS App	2137	transform: none;
	2138	box-shadow: none;
	2139	}
	2140	@media (prefers-reduced-motion: reduce) {
	2141	.btn,
	2142	.btn:hover,
	2143	.btn:active,
	2144	.btn-primary,
	2145	.btn-primary:hover {
	2146	transform: none;
	2147	transition: background-color 80ms linear, color 80ms linear;
	2148	}
2ce1d0bClaude	2149	}
	2150
	2151	/* ============================================================ */
	2152	/* Forms */
	2153	/* ============================================================ */
	2154	.form-group { margin-bottom: 20px; }
	2155	.form-group label {
	2156	display: block;
	2157	font-size: var(--t-sm);
	2158	font-weight: 500;
	2159	margin-bottom: 6px;
	2160	color: var(--text);
	2161	letter-spacing: -0.005em;
	2162	}
	2163	.form-group input,
	2164	.form-group textarea,
	2165	.form-group select,
	2166	input[type='text'], input[type='email'], input[type='password'],
	2167	input[type='url'], input[type='search'], input[type='number'],
	2168	textarea, select {
06d5ffeClaude	2169	width: 100%;
2ce1d0bClaude	2170	padding: 9px 12px;
	2171	background: var(--bg-secondary);
06d5ffeClaude	2172	border: 1px solid var(--border);
2ce1d0bClaude	2173	border-radius: var(--r-sm);
06d5ffeClaude	2174	color: var(--text);
2ce1d0bClaude	2175	font-size: var(--t-sm);
06d5ffeClaude	2176	font-family: var(--font-sans);
2ce1d0bClaude	2177	transition:
	2178	border-color var(--t-fast) var(--ease),
	2179	background var(--t-fast) var(--ease),
	2180	box-shadow var(--t-fast) var(--ease);
06d5ffeClaude	2181	}
2ce1d0bClaude	2182	.form-group input::placeholder, textarea::placeholder, input::placeholder {
	2183	color: var(--text-faint);
06d5ffeClaude	2184	}
2ce1d0bClaude	2185	.form-group input:hover, textarea:hover, select:hover,
	2186	input[type='text']:hover, input[type='email']:hover, input[type='password']:hover {
	2187	border-color: var(--border-strong);
	2188	}
	2189	.form-group input:focus, .form-group textarea:focus, .form-group select:focus,
	2190	input:focus, textarea:focus, select:focus {
06d5ffeClaude	2191	outline: none;
2ce1d0bClaude	2192	background: var(--bg);
	2193	border-color: var(--border-focus);
	2194	box-shadow: var(--ring);
06d5ffeClaude	2195	}
2ce1d0bClaude	2196	textarea { font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.55; }
06d5ffeClaude	2197	.input-disabled { opacity: 0.5; cursor: not-allowed; }
	2198
2ce1d0bClaude	2199	/* ============================================================ */
	2200	/* Auth (register / login / verify) */
	2201	/* ============================================================ */
	2202	.auth-container {
e589f77ccantynz-alt	2203	/* Collapsed to one rule — the later plainer .auth-container (in the
	2204	2026 polish layer) won on background/padding/border-radius/box-shadow,
	2205	so those values are folded in here; the 480px width + centering +
	2206	positioning survive from the original premium-gateway block. */
98f45b4Claude	2207	max-width: 480px;
	2208	margin: 72px auto;
e589f77ccantynz-alt	2209	padding: 32px;
	2210	background: var(--bg-secondary);
2ce1d0bClaude	2211	border: 1px solid var(--border);
e589f77ccantynz-alt	2212	border-radius: var(--r-lg);
	2213	box-shadow: 0 4px 16px rgba(0,0,0,0.30), 0 0 0 1px var(--border);
98f45b4Claude	2214	position: relative;
	2215	overflow: hidden;
	2216	}
2ce1d0bClaude	2217	.auth-container h2 {
98f45b4Claude	2218	margin: 0 0 8px;
	2219	font-size: 28px;
	2220	font-weight: 700;
	2221	font-family: var(--font-display);
	2222	letter-spacing: -0.025em;
	2223	color: var(--text-strong);
	2224	line-height: 1.15;
	2225	}
	2226	.auth-container .auth-subtitle {
	2227	color: var(--text-muted);
	2228	font-size: 14.5px;
	2229	line-height: 1.5;
	2230	margin: 0 0 24px;
2ce1d0bClaude	2231	}
	2232	.auth-container > p {
	2233	color: var(--text-muted);
	2234	font-size: var(--t-sm);
	2235	margin-bottom: 24px;
	2236	}
98f45b4Claude	2237	.auth-container .btn-primary {
	2238	width: 100%;
	2239	padding: 12px 16px;
	2240	font-size: 15px;
	2241	font-weight: 600;
	2242	margin-top: 4px;
	2243	}
582cdacClaude	2244
	2245	/* OAuth provider buttons (Google / GitHub / SSO). Single-line layout
	2246	with a brand-coloured logo on the left and a label centred-trailing.
	2247	Hover lifts 1px with a subtle shadow — matches the rest of the
	2248	button system but reads as a brand-affiliated action, not a brand-
	2249	coloured primary CTA. */
	2250	.auth-container .oauth-btn {
	2251	display: flex;
	2252	align-items: center;
	2253	justify-content: center;
	2254	gap: 10px;
	2255	width: 100%;
	2256	padding: 11px 16px;
	2257	background: var(--bg-surface, var(--bg-elevated));
	2258	border: 1px solid var(--border);
	2259	border-radius: var(--r-md, 8px);
	2260	color: var(--text-strong);
	2261	font-family: var(--font-sans);
	2262	font-size: 14.5px;
	2263	font-weight: 500;
	2264	text-decoration: none;
	2265	transition:
e589f77ccantynz-alt	2266	transform var(--dur-base, 180ms) var(--ease, ease),
	2267	box-shadow var(--dur-base, 180ms) var(--ease, ease),
582cdacClaude	2268	background var(--t-fast, 120ms) var(--ease, ease),
	2269	border-color var(--t-fast, 120ms) var(--ease, ease);
	2270	}
	2271	.auth-container .oauth-btn:hover {
	2272	transform: translateY(-1px);
	2273	background: var(--bg-hover);
	2274	border-color: var(--text-muted);
	2275	color: var(--text-strong);
	2276	box-shadow: 0 4px 14px -4px rgba(0,0,0,0.25);
	2277	text-decoration: none;
	2278	}
	2279	.auth-container .oauth-btn:focus-visible {
479dcd9Claude	2280	outline: 2px solid rgba(91, 110, 232, 0.55);
582cdacClaude	2281	outline-offset: 2px;
	2282	}
	2283	.auth-container .oauth-btn .oauth-icon {
	2284	flex-shrink: 0;
	2285	}
	2286	/* GitHub icon adopts the text colour so it reads in both themes. */
	2287	.auth-container .oauth-github .oauth-icon {
	2288	color: var(--text-strong);
	2289	}
	2290	/* Google logo uses the official 4-colour treatment via inline SVG fill
	2291	attributes — nothing to override here. */
	2292	/* "or" divider between the password form and provider buttons */
	2293	.auth-container .auth-divider {
	2294	display: flex;
	2295	align-items: center;
	2296	gap: 12px;
	2297	margin: 20px 0 12px;
	2298	color: var(--text-faint);
	2299	font-size: 12px;
	2300	letter-spacing: 0.08em;
	2301	text-transform: uppercase;
	2302	}
	2303	.auth-container .auth-divider::before,
	2304	.auth-container .auth-divider::after {
	2305	content: '';
	2306	flex: 1;
	2307	height: 1px;
	2308	background: var(--border);
	2309	}
06d5ffeClaude	2310	.auth-error {
958d26aClaude	2311	background: rgba(248,113,113,0.08);
	2312	border: 1px solid rgba(248,113,113,0.35);
06d5ffeClaude	2313	color: var(--red);
2ce1d0bClaude	2314	padding: 10px 14px;
	2315	border-radius: var(--r-sm);
06d5ffeClaude	2316	margin-bottom: 16px;
2ce1d0bClaude	2317	font-size: var(--t-sm);
06d5ffeClaude	2318	}
	2319	.auth-success {
958d26aClaude	2320	background: rgba(52,211,153,0.08);
	2321	border: 1px solid rgba(52,211,153,0.35);
06d5ffeClaude	2322	color: var(--green);
2ce1d0bClaude	2323	padding: 10px 14px;
	2324	border-radius: var(--r-sm);
06d5ffeClaude	2325	margin-bottom: 16px;
2ce1d0bClaude	2326	font-size: var(--t-sm);
	2327	}
	2328	.auth-switch {
	2329	margin-top: 20px;
	2330	font-size: var(--t-sm);
	2331	color: var(--text-muted);
	2332	text-align: center;
	2333	}
	2334	.banner {
	2335	background: var(--accent-gradient-faint);
479dcd9Claude	2336	border: 1px solid rgba(91,110,232,0.35);
2ce1d0bClaude	2337	color: var(--text);
	2338	padding: 10px 14px;
	2339	border-radius: var(--r-sm);
	2340	font-size: var(--t-sm);
06d5ffeClaude	2341	}
	2342
2ce1d0bClaude	2343	/* ============================================================ */
	2344	/* Settings */
	2345	/* ============================================================ */
	2346	.settings-container { max-width: 720px; }
	2347	.settings-container h2 { margin-bottom: 8px; font-size: var(--t-xl); letter-spacing: -0.02em; }
	2348	.settings-container > h2 + p { color: var(--text-muted); font-size: var(--t-sm); margin-bottom: 24px; }
	2349	.settings-container h3 { font-size: var(--t-md); margin-bottom: 12px; margin-top: 28px; }
	2350	.settings-container h3:first-of-type { margin-top: 0; }
06d5ffeClaude	2351	.ssh-keys-list { margin-bottom: 24px; }
	2352	.ssh-key-item {
	2353	display: flex;
	2354	justify-content: space-between;
	2355	align-items: center;
2ce1d0bClaude	2356	padding: 14px 16px;
06d5ffeClaude	2357	border: 1px solid var(--border);
2ce1d0bClaude	2358	border-radius: var(--r-md);
06d5ffeClaude	2359	margin-bottom: 8px;
2ce1d0bClaude	2360	background: var(--bg-elevated);
	2361	transition: border-color var(--t-fast) var(--ease);
06d5ffeClaude	2362	}
2ce1d0bClaude	2363	.ssh-key-item:hover { border-color: var(--border-strong); }
	2364	.ssh-key-meta { font-size: var(--t-xs); color: var(--text-muted); margin-top: 4px; }
	2365	.ssh-key-meta code { font-size: var(--t-xs); background: var(--bg-tertiary); padding: 1px 6px; border-radius: 3px; margin-right: 8px; }
06d5ffeClaude	2366
2ce1d0bClaude	2367	/* ============================================================ */
	2368	/* Repo header + nav */
	2369	/* ============================================================ */
fc1817aClaude	2370	.repo-header {
	2371	display: flex;
	2372	align-items: center;
debcf27Claude	2373	gap: 12px;
	2374	margin-bottom: 22px;
	2375	}
	2376	.repo-header-title {
	2377	display: flex;
	2378	align-items: center;
	2379	gap: 10px;
	2380	font-family: var(--font-display);
	2381	font-size: 24px;
	2382	letter-spacing: -0.025em;
	2383	flex-wrap: wrap;
	2384	}
	2385	.repo-header .owner {
	2386	color: var(--text-muted);
	2387	font-weight: 500;
	2388	transition: color var(--t-fast) var(--ease);
	2389	}
	2390	.repo-header .owner:hover { color: var(--text-link); text-decoration: none; }
	2391	.repo-header .separator { color: var(--text-faint); font-weight: 300; }
	2392	.repo-header .name {
	2393	color: var(--text-strong);
	2394	font-weight: 700;
	2395	letter-spacing: -0.028em;
fc1817aClaude	2396	}
2ce1d0bClaude	2397	.repo-header .name:hover { color: var(--text-link); text-decoration: none; }
debcf27Claude	2398	.repo-header-fork {
	2399	font-family: var(--font-mono);
	2400	font-size: 11px;
	2401	color: var(--text-muted);
	2402	margin-top: 4px;
	2403	letter-spacing: 0.01em;
	2404	}
	2405	.repo-header-fork a { color: var(--text-muted); }
	2406	.repo-header-fork a:hover { color: var(--accent); }
	2407	.repo-header-pill {
	2408	display: inline-flex;
	2409	align-items: center;
	2410	padding: 2px 10px;
	2411	border-radius: var(--r-full);
	2412	font-family: var(--font-mono);
	2413	font-size: 10px;
	2414	font-weight: 600;
	2415	letter-spacing: 0.12em;
	2416	text-transform: uppercase;
	2417	line-height: 1.6;
	2418	vertical-align: 4px;
	2419	}
	2420	.repo-header-pill-archived {
	2421	background: rgba(251,191,36,0.10);
	2422	color: var(--yellow);
	2423	border: 1px solid rgba(251,191,36,0.30);
	2424	}
	2425	.repo-header-pill-template {
	2426	background: var(--accent-gradient-faint);
	2427	color: var(--accent);
479dcd9Claude	2428	border: 1px solid rgba(91,110,232,0.30);
fc1817aClaude	2429	}
06d5ffeClaude	2430	.repo-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
fc1817aClaude	2431
8c790e0Claude	2432	/* Push Watch discoverability — live/recent indicator in the repo header */
	2433	.repo-header-live-badge {
	2434	display: inline-flex;
	2435	align-items: center;
	2436	gap: 5px;
	2437	padding: 2px 9px;
	2438	border-radius: 999px;
	2439	font-size: 12px;
	2440	font-weight: 600;
	2441	letter-spacing: 0.02em;
	2442	text-decoration: none !important;
	2443	vertical-align: 3px;
	2444	transition: filter 140ms ease, opacity 140ms ease;
	2445	}
	2446	.repo-header-live-badge:hover { filter: brightness(1.15); text-decoration: none !important; }
	2447	.repo-header-live-badge--live {
	2448	background: rgba(218, 54, 51, 0.12);
	2449	color: #f97171;
	2450	border: 1px solid rgba(218, 54, 51, 0.35);
	2451	}
	2452	.repo-header-live-badge--live .repo-header-live-dot {
64aa989Claude	2453	background: #22c55e;
8c790e0Claude	2454	display: inline-block;
	2455	}
	2456	.repo-header-live-badge--recent {
479dcd9Claude	2457	background: rgba(91, 110, 232, 0.08);
8c790e0Claude	2458	color: var(--text-muted);
479dcd9Claude	2459	border: 1px solid rgba(91, 110, 232, 0.22);
8c790e0Claude	2460	}
	2461	.repo-header-live-badge--recent:hover { color: var(--accent); }
	2462
fc1817aClaude	2463	.repo-nav {
	2464	display: flex;
debcf27Claude	2465	gap: 1px;
fc1817aClaude	2466	border-bottom: 1px solid var(--border);
debcf27Claude	2467	margin-bottom: 28px;
2ce1d0bClaude	2468	overflow-x: auto;
	2469	scrollbar-width: thin;
fc1817aClaude	2470	}
2ce1d0bClaude	2471	.repo-nav::-webkit-scrollbar { height: 0; }
fc1817aClaude	2472	.repo-nav a {
debcf27Claude	2473	position: relative;
	2474	padding: 11px 14px;
fc1817aClaude	2475	color: var(--text-muted);
	2476	border-bottom: 2px solid transparent;
2ce1d0bClaude	2477	font-size: var(--t-sm);
	2478	font-weight: 500;
	2479	margin-bottom: -1px;
debcf27Claude	2480	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
2ce1d0bClaude	2481	white-space: nowrap;
	2482	}
debcf27Claude	2483	.repo-nav a:hover { text-decoration: none; color: var(--text-strong); background: var(--bg-hover); }
2ce1d0bClaude	2484	.repo-nav a.active {
debcf27Claude	2485	color: var(--text-strong);
	2486	font-weight: 600;
	2487	}
	2488	.repo-nav a.active::after {
	2489	content: '';
	2490	position: absolute;
	2491	left: 14px;
	2492	right: 14px;
	2493	bottom: -1px;
	2494	height: 2px;
64aa989Claude	2495	background: var(--accent);
debcf27Claude	2496	border-radius: 2px;
	2497	}
	2498	/* AI links in the right-side cluster — sparkle accent */
	2499	.repo-nav-ai {
	2500	color: var(--accent) !important;
	2501	font-weight: 500;
	2502	}
	2503	.repo-nav-ai:hover {
	2504	color: var(--accent-hover) !important;
	2505	background: var(--accent-gradient-faint) !important;
	2506	}
	2507	.repo-nav-ai.active {
	2508	color: var(--accent-hover) !important;
2ce1d0bClaude	2509	font-weight: 600;
fc1817aClaude	2510	}
	2511
621081eccantynz-alt	2512	/* Repo-nav dropdown menus (✨ AI / More) — native <details> disclosure */
	2513	.repo-nav-menu {
	2514	position: relative;
	2515	display: inline-flex;
	2516	align-items: stretch;
	2517	}
	2518	.repo-nav-menu > summary {
	2519	list-style: none;
	2520	cursor: pointer;
	2521	padding: 11px 14px;
	2522	color: var(--text-muted);
	2523	font-size: var(--t-sm);
	2524	font-weight: 500;
	2525	white-space: nowrap;
	2526	border-bottom: 2px solid transparent;
	2527	margin-bottom: -1px;
	2528	user-select: none;
	2529	display: inline-flex;
	2530	align-items: center;
	2531	gap: 5px;
	2532	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	2533	}
	2534	.repo-nav-menu > summary::-webkit-details-marker { display: none; }
	2535	.repo-nav-menu > summary::after {
	2536	content: "\\25BE";
	2537	font-size: 9px;
	2538	opacity: 0.55;
	2539	}
	2540	.repo-nav-menu > summary:hover {
	2541	color: var(--text-strong);
	2542	background: var(--bg-hover);
	2543	}
	2544	.repo-nav-menu.is-active > summary { color: var(--text-strong); font-weight: 600; }
	2545	.repo-nav-menu[open] > summary { color: var(--text-strong); background: var(--bg-hover); }
	2546	.repo-nav-ai-menu > summary { color: var(--accent) !important; }
	2547	.repo-nav-ai-menu > summary:hover {
	2548	color: var(--accent-hover) !important;
	2549	background: var(--accent-gradient-faint) !important;
	2550	}
	2551
	2552	.repo-nav-menu-panel {
	2553	position: absolute;
	2554	top: 100%;
	2555	left: 0;
	2556	margin-top: 6px;
	2557	min-width: 200px;
	2558	background: var(--bg-elevated);
	2559	border: 1px solid var(--border);
	2560	border-radius: var(--radius);
	2561	box-shadow: 0 10px 30px rgba(0,0,0,0.22);
	2562	padding: 6px;
	2563	z-index: 60;
	2564	display: flex;
	2565	flex-direction: column;
	2566	gap: 1px;
	2567	}
	2568	.repo-nav-menu-panel-right { left: auto; right: 0; }
	2569	/* Override the inherited .repo-nav a tab styling inside the dropdown panel */
	2570	.repo-nav-menu-panel a {
	2571	position: static;
	2572	display: block;
	2573	padding: 7px 10px;
	2574	border-radius: 7px;
	2575	border-bottom: none;
	2576	margin-bottom: 0;
	2577	color: var(--text-muted);
	2578	font-size: var(--t-sm);
	2579	font-weight: 500;
	2580	white-space: nowrap;
	2581	}
	2582	.repo-nav-menu-panel a::after { display: none !important; }
	2583	.repo-nav-menu-panel a:hover { color: var(--text-strong); background: var(--bg-hover); }
	2584	.repo-nav-menu-panel a.active {
	2585	color: var(--text-strong);
	2586	font-weight: 600;
	2587	background: rgba(91,110,232,0.14);
	2588	}
	2589
2ce1d0bClaude	2590	.breadcrumb {
	2591	display: flex;
debcf27Claude	2592	gap: 6px;
2ce1d0bClaude	2593	align-items: center;
debcf27Claude	2594	margin-bottom: 18px;
2ce1d0bClaude	2595	color: var(--text-muted);
	2596	font-size: var(--t-sm);
	2597	font-family: var(--font-mono);
debcf27Claude	2598	font-feature-settings: var(--mono-feat);
2ce1d0bClaude	2599	}
	2600	.breadcrumb a { color: var(--text-link); font-weight: 500; }
	2601	.breadcrumb a:hover { color: var(--accent-hover); }
debcf27Claude	2602	.breadcrumb strong {
	2603	color: var(--text-strong);
	2604	font-weight: 600;
fc1817aClaude	2605	}
	2606
debcf27Claude	2607	/* Page header — eyebrow + title + optional actions row.
	2608	Use on dashboard, settings, admin, any "section landing" page. */
	2609	.page-header {
	2610	display: flex;
	2611	align-items: flex-end;
	2612	justify-content: space-between;
	2613	gap: 16px;
	2614	margin-bottom: 28px;
	2615	padding-bottom: 20px;
	2616	border-bottom: 1px solid var(--border-subtle);
	2617	flex-wrap: wrap;
	2618	}
	2619	.page-header-text { flex: 1; min-width: 280px; }
	2620	.page-header .eyebrow { margin-bottom: var(--s-2); }
	2621	.page-header h1 {
	2622	font-family: var(--font-display);
	2623	font-size: clamp(24px, 3vw, 36px);
	2624	line-height: 1.1;
	2625	letter-spacing: -0.028em;
	2626	margin-bottom: 6px;
	2627	}
	2628	.page-header p {
	2629	color: var(--text-muted);
	2630	font-size: var(--t-sm);
	2631	line-height: 1.55;
	2632	max-width: 640px;
	2633	}
	2634	.page-header-actions { display: flex; gap: 8px; align-items: center; }
fc1817aClaude	2635
2ce1d0bClaude	2636	/* ============================================================ */
	2637	/* File browser table */
	2638	/* ============================================================ */
	2639	.file-table {
	2640	width: 100%;
	2641	border: 1px solid var(--border);
	2642	border-radius: var(--r-md);
	2643	overflow: hidden;
	2644	background: var(--bg-elevated);
debcf27Claude	2645	border-collapse: collapse;
2ce1d0bClaude	2646	}
debcf27Claude	2647	.file-table tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--t-fast) var(--ease); }
fc1817aClaude	2648	.file-table tr:last-child { border-bottom: none; }
debcf27Claude	2649	.file-table td {
	2650	padding: 9px 16px;
	2651	font-size: var(--t-sm);
	2652	font-family: var(--font-mono);
	2653	font-feature-settings: var(--mono-feat);
	2654	}
2ce1d0bClaude	2655	.file-table tr:hover { background: var(--bg-hover); }
debcf27Claude	2656	.file-icon {
	2657	width: 22px;
	2658	color: var(--text-faint);
	2659	font-size: 13px;
	2660	text-align: center;
	2661	}
	2662	.file-name a {
	2663	color: var(--text);
	2664	font-weight: 500;
	2665	transition: color var(--t-fast) var(--ease);
	2666	}
	2667	.file-name a:hover { color: var(--accent); text-decoration: none; }
fc1817aClaude	2668
2ce1d0bClaude	2669	/* ============================================================ */
	2670	/* Blob view */
	2671	/* ============================================================ */
fc1817aClaude	2672	.blob-view {
	2673	border: 1px solid var(--border);
2ce1d0bClaude	2674	border-radius: var(--r-md);
fc1817aClaude	2675	overflow: hidden;
2ce1d0bClaude	2676	background: var(--bg-elevated);
fc1817aClaude	2677	}
	2678	.blob-header {
	2679	background: var(--bg-secondary);
2ce1d0bClaude	2680	padding: 10px 16px;
fc1817aClaude	2681	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2682	font-size: var(--t-sm);
fc1817aClaude	2683	color: var(--text-muted);
06d5ffeClaude	2684	display: flex;
	2685	justify-content: space-between;
	2686	align-items: center;
fc1817aClaude	2687	}
	2688	.blob-code {
	2689	overflow-x: auto;
	2690	font-family: var(--font-mono);
2ce1d0bClaude	2691	font-size: var(--t-sm);
	2692	line-height: 1.65;
fc1817aClaude	2693	}
	2694	.blob-code table { width: 100%; border-collapse: collapse; }
	2695	.blob-code .line-num {
	2696	width: 1%;
2ce1d0bClaude	2697	min-width: 56px;
	2698	padding: 0 14px;
fc1817aClaude	2699	text-align: right;
2ce1d0bClaude	2700	color: var(--text-faint);
fc1817aClaude	2701	user-select: none;
	2702	white-space: nowrap;
	2703	border-right: 1px solid var(--border);
	2704	}
2ce1d0bClaude	2705	.blob-code .line-content { padding: 0 16px; white-space: pre; }
	2706	.blob-code tr:hover { background: var(--bg-hover); }
fc1817aClaude	2707
2ce1d0bClaude	2708	/* ============================================================ */
	2709	/* Commits + diffs */
	2710	/* ============================================================ */
	2711	.commit-list {
	2712	border: 1px solid var(--border);
	2713	border-radius: var(--r-md);
	2714	overflow: hidden;
	2715	background: var(--bg-elevated);
	2716	}
fc1817aClaude	2717	.commit-item {
	2718	display: flex;
	2719	justify-content: space-between;
	2720	align-items: center;
debcf27Claude	2721	padding: 14px 18px;
	2722	border-bottom: 1px solid var(--border-subtle);
2ce1d0bClaude	2723	transition: background var(--t-fast) var(--ease);
fc1817aClaude	2724	}
	2725	.commit-item:last-child { border-bottom: none; }
2ce1d0bClaude	2726	.commit-item:hover { background: var(--bg-hover); }
debcf27Claude	2727	.commit-message {
	2728	font-size: var(--t-sm);
	2729	font-weight: 500;
	2730	line-height: 1.45;
	2731	color: var(--text-strong);
	2732	letter-spacing: -0.005em;
	2733	}
	2734	.commit-meta {
	2735	font-family: var(--font-mono);
	2736	font-size: 11px;
	2737	color: var(--text-muted);
	2738	margin-top: 5px;
	2739	letter-spacing: 0.01em;
	2740	}
fc1817aClaude	2741	.commit-sha {
	2742	font-family: var(--font-mono);
debcf27Claude	2743	font-feature-settings: var(--mono-feat);
	2744	font-size: 11px;
	2745	padding: 4px 9px;
fc1817aClaude	2746	background: var(--bg-tertiary);
	2747	border: 1px solid var(--border);
2ce1d0bClaude	2748	border-radius: var(--r-sm);
debcf27Claude	2749	color: var(--accent);
	2750	font-weight: 600;
	2751	letter-spacing: 0.02em;
2ce1d0bClaude	2752	transition: all var(--t-fast) var(--ease);
fc1817aClaude	2753	}
debcf27Claude	2754	.commit-sha:hover {
479dcd9Claude	2755	border-color: rgba(91,110,232,0.40);
debcf27Claude	2756	background: var(--accent-gradient-faint);
	2757	color: var(--accent-hover);
	2758	text-decoration: none;
fc1817aClaude	2759	}
	2760
82c3a38ccanty labs	2761	/* Diff viewer */
fc1817aClaude	2762	.diff-view { margin-top: 16px; }
82c3a38ccanty labs	2763	.diff-toolbar {
	2764	display: flex;
	2765	align-items: center;
	2766	justify-content: space-between;
	2767	margin-bottom: 12px;
	2768	gap: 12px;
	2769	flex-wrap: wrap;
	2770	}
	2771	.diff-summary { font-size: var(--t-sm); color: var(--text-muted); }
	2772	.diff-view-toggle {
	2773	display: flex;
	2774	border: 1px solid var(--border);
	2775	border-radius: var(--r-sm);
	2776	overflow: hidden;
	2777	}
	2778	.diff-view-btn {
	2779	padding: 4px 12px;
	2780	font-size: 12px;
	2781	font-weight: 500;
	2782	background: transparent;
	2783	color: var(--text-muted);
	2784	border: none;
	2785	cursor: pointer;
	2786	transition: all var(--t-fast) var(--ease);
	2787	font-family: var(--font-sans);
	2788	}
	2789	.diff-view-btn:not(:first-child) { border-left: 1px solid var(--border); }
	2790	.diff-view-btn:hover { color: var(--text); background: var(--bg-hover); }
	2791	.diff-view-btn.active { background: var(--accent); color: #fff; }
	2792	.diff-jump-list {
	2793	display: flex;
	2794	flex-wrap: wrap;
	2795	gap: 6px;
	2796	margin-bottom: 12px;
	2797	padding: 8px 12px;
	2798	background: var(--bg-secondary);
	2799	border: 1px solid var(--border);
	2800	border-radius: var(--r-sm);
	2801	}
	2802	.diff-jump-item {
	2803	font-size: 11px;
	2804	font-family: var(--font-mono);
	2805	color: var(--text-muted);
	2806	text-decoration: none;
	2807	padding: 2px 6px;
	2808	border-radius: 3px;
	2809	transition: all var(--t-fast) var(--ease);
	2810	}
	2811	.diff-jump-item:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
	2812	.diff-jump-mod { color: var(--text-muted); }
fc1817aClaude	2813	.diff-file {
	2814	border: 1px solid var(--border);
2ce1d0bClaude	2815	border-radius: var(--r-md);
fc1817aClaude	2816	margin-bottom: 16px;
	2817	overflow: hidden;
2ce1d0bClaude	2818	background: var(--bg-elevated);
fc1817aClaude	2819	}
	2820	.diff-file-header {
82c3a38ccanty labs	2821	display: flex;
	2822	align-items: center;
	2823	justify-content: space-between;
fc1817aClaude	2824	background: var(--bg-secondary);
82c3a38ccanty labs	2825	padding: 8px 14px;
fc1817aClaude	2826	border-bottom: 1px solid var(--border);
	2827	font-family: var(--font-mono);
2ce1d0bClaude	2828	font-size: var(--t-sm);
	2829	font-weight: 500;
82c3a38ccanty labs	2830	cursor: pointer;
	2831	user-select: none;
	2832	gap: 12px;
fc1817aClaude	2833	}
82c3a38ccanty labs	2834	.diff-file-header:hover { background: var(--bg-hover); }
	2835	.diff-file-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
	2836	.diff-file-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--font-sans); font-size: 12px; }
	2837	.diff-file-chevron { color: var(--text-muted); font-size: 12px; transition: transform var(--t-fast) var(--ease); display: inline-block; }
	2838	.diff-file-header.collapsed .diff-file-chevron { transform: rotate(-90deg); }
	2839	.diff-table {
	2840	width: 100%;
	2841	border-collapse: collapse;
fc1817aClaude	2842	font-family: var(--font-mono);
2ce1d0bClaude	2843	font-size: var(--t-sm);
	2844	line-height: 1.65;
82c3a38ccanty labs	2845	table-layout: fixed;
	2846	}
	2847	.diff-ln {
	2848	width: 44px;
	2849	min-width: 44px;
	2850	text-align: right;
	2851	padding: 0 8px;
	2852	color: var(--text-muted);
	2853	user-select: none;
	2854	border-right: 1px solid var(--border-subtle);
	2855	vertical-align: top;
	2856	font-size: 11px;
	2857	white-space: nowrap;
	2858	opacity: 0.55;
	2859	}
	2860	.diff-cell { padding: 0 4px 0 2px; white-space: pre; overflow: hidden; vertical-align: top; }
	2861	.diff-sigil { display: inline-block; width: 14px; user-select: none; opacity: 0.7; text-align: center; }
	2862	.diff-row-add .diff-ln, .diff-row-add .diff-cell { background: rgba(52,211,153,0.08); }
	2863	.diff-row-add .diff-cell { color: var(--green); }
	2864	.diff-row-add .diff-sigil { color: var(--green); opacity: 1; }
	2865	.diff-row-del .diff-ln, .diff-row-del .diff-cell { background: rgba(248,113,113,0.07); }
	2866	.diff-row-del .diff-cell { color: var(--red); }
	2867	.diff-row-del .diff-sigil { color: var(--red); opacity: 1; }
	2868	.diff-row-hunk .diff-ln, .diff-row-hunk .diff-cell { background: rgba(140,109,255,0.05); color: var(--text-link); font-size: 11px; }
	2869	.diff-row-ws.diff-row-add .diff-cell { background: rgba(52,211,153,0.04); opacity: 0.75; }
	2870	.diff-row-ws.diff-row-del .diff-cell { background: rgba(248,113,113,0.04); opacity: 0.75; }
	2871	.diff-ws-badge {
	2872	display: inline-block;
	2873	margin-left: 8px;
	2874	padding: 0 4px;
	2875	font-size: 9px;
	2876	font-family: var(--font-sans);
	2877	color: var(--text-muted);
	2878	border: 1px solid var(--border);
	2879	border-radius: 3px;
	2880	vertical-align: middle;
	2881	opacity: 0.6;
	2882	user-select: none;
fc1817aClaude	2883	}
82c3a38ccanty labs	2884	.diff-table-split .diff-ln-old, .diff-table-split .diff-cell-del { background: rgba(248,113,113,0.07); }
	2885	.diff-table-split .diff-cell-del { color: var(--red); }
	2886	.diff-table-split .diff-ln-new, .diff-table-split .diff-cell-add { background: rgba(52,211,153,0.08); }
	2887	.diff-table-split .diff-cell-add { color: var(--green); }
	2888	.diff-table-split .diff-cell-empty { background: var(--bg-secondary); }
	2889	.diff-table-split .diff-cell-ctx { color: var(--text); }
	2890	.diff-table-split .diff-cell-ws { opacity: 0.6; }
	2891	.diff-binary { padding: 16px; font-size: var(--t-sm); color: var(--text-muted); font-style: italic; }
fc1817aClaude	2892
	2893	.stat-add { color: var(--green); font-weight: 600; }
	2894	.stat-del { color: var(--red); font-weight: 600; }
	2895
2ce1d0bClaude	2896	/* ============================================================ */
	2897	/* Empty state */
	2898	/* ============================================================ */
fc1817aClaude	2899	.empty-state {
	2900	text-align: center;
ba23fe2Claude	2901	padding: 80px 24px;
fc1817aClaude	2902	color: var(--text-muted);
e589f77ccantynz-alt	2903	border: 1px dashed var(--border);
2ce1d0bClaude	2904	border-radius: var(--r-lg);
e589f77ccantynz-alt	2905	background: var(--bg);
fc1817aClaude	2906	}
2ce1d0bClaude	2907	.empty-state h2 {
958d26aClaude	2908	font-size: var(--t-xl);
2ce1d0bClaude	2909	margin-bottom: 8px;
958d26aClaude	2910	color: var(--text-strong);
	2911	letter-spacing: -0.022em;
2ce1d0bClaude	2912	}
958d26aClaude	2913	.empty-state p { font-size: var(--t-md); max-width: 480px; margin: 0 auto; line-height: 1.55; }
fc1817aClaude	2914	.empty-state pre {
	2915	text-align: left;
	2916	display: inline-block;
	2917	background: var(--bg-secondary);
958d26aClaude	2918	padding: 18px 24px;
	2919	border-radius: var(--r-md);
fc1817aClaude	2920	border: 1px solid var(--border);
	2921	font-family: var(--font-mono);
958d26aClaude	2922	font-feature-settings: var(--mono-feat);
2ce1d0bClaude	2923	font-size: var(--t-sm);
958d26aClaude	2924	margin-top: 24px;
fc1817aClaude	2925	line-height: 1.8;
2ce1d0bClaude	2926	color: var(--text);
958d26aClaude	2927	box-shadow: var(--elev-1);
fc1817aClaude	2928	}
	2929
2ce1d0bClaude	2930	/* ============================================================ */
	2931	/* Badges */
	2932	/* ============================================================ */
fc1817aClaude	2933	.badge {
2ce1d0bClaude	2934	display: inline-flex;
	2935	align-items: center;
	2936	gap: 4px;
	2937	padding: 2px 9px;
	2938	border-radius: var(--r-full);
	2939	font-size: var(--t-xs);
fc1817aClaude	2940	font-weight: 500;
	2941	background: var(--bg-tertiary);
	2942	border: 1px solid var(--border);
	2943	color: var(--text-muted);
2ce1d0bClaude	2944	line-height: 1.5;
fc1817aClaude	2945	}
	2946
2ce1d0bClaude	2947	/* ============================================================ */
	2948	/* Branch dropdown */
	2949	/* ============================================================ */
fc1817aClaude	2950	.branch-selector {
	2951	display: inline-flex;
	2952	align-items: center;
2ce1d0bClaude	2953	gap: 6px;
	2954	padding: 6px 12px;
	2955	background: var(--bg-elevated);
fc1817aClaude	2956	border: 1px solid var(--border);
2ce1d0bClaude	2957	border-radius: var(--r-sm);
	2958	font-size: var(--t-sm);
fc1817aClaude	2959	color: var(--text);
	2960	margin-bottom: 12px;
2ce1d0bClaude	2961	transition: border-color var(--t-fast) var(--ease);
fc1817aClaude	2962	}
2ce1d0bClaude	2963	.branch-selector:hover { border-color: var(--border-strong); }
fc1817aClaude	2964
06d5ffeClaude	2965	.branch-dropdown {
	2966	position: relative;
	2967	display: inline-block;
	2968	margin-bottom: 12px;
	2969	}
	2970	.branch-dropdown-content {
	2971	display: none;
	2972	position: absolute;
2ce1d0bClaude	2973	top: calc(100% + 4px);
06d5ffeClaude	2974	left: 0;
	2975	z-index: 10;
2ce1d0bClaude	2976	min-width: 220px;
	2977	background: var(--bg-elevated);
	2978	border: 1px solid var(--border-strong);
	2979	border-radius: var(--r-md);
	2980	overflow: hidden;
	2981	box-shadow: var(--elev-3);
06d5ffeClaude	2982	}
	2983	.branch-dropdown:hover .branch-dropdown-content,
	2984	.branch-dropdown:focus-within .branch-dropdown-content { display: block; }
	2985	.branch-dropdown-content a {
	2986	display: block;
2ce1d0bClaude	2987	padding: 9px 14px;
	2988	font-size: var(--t-sm);
06d5ffeClaude	2989	color: var(--text);
	2990	border-bottom: 1px solid var(--border);
2ce1d0bClaude	2991	transition: background var(--t-fast) var(--ease);
06d5ffeClaude	2992	}
	2993	.branch-dropdown-content a:last-child { border-bottom: none; }
2ce1d0bClaude	2994	.branch-dropdown-content a:hover { background: var(--bg-hover); text-decoration: none; }
	2995	.branch-dropdown-content a.active-branch { color: var(--text-link); font-weight: 600; background: var(--accent-gradient-faint); }
06d5ffeClaude	2996
2ce1d0bClaude	2997	/* ============================================================ */
	2998	/* Card grid */
	2999	/* ============================================================ */
	3000	.card-grid {
	3001	display: grid;
	3002	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	3003	gap: 16px;
	3004	}
fc1817aClaude	3005	.card {
	3006	border: 1px solid var(--border);
2ce1d0bClaude	3007	border-radius: var(--r-md);
958d26aClaude	3008	padding: 20px;
2ce1d0bClaude	3009	background: var(--bg-elevated);
	3010	transition:
e589f77ccantynz-alt	3011	border-color 160ms cubic-bezier(0.16,1,0.3,1),
	3012	transform 160ms cubic-bezier(0.16,1,0.3,1),
	3013	box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
2ce1d0bClaude	3014	position: relative;
	3015	overflow: hidden;
958d26aClaude	3016	isolation: isolate;
	3017	}
2ce1d0bClaude	3018	.card:hover {
e589f77ccantynz-alt	3019	border-color: rgba(255,255,255,0.18);
	3020	transform: translateY(-1px);
	3021	box-shadow: 0 8px 24px rgba(0,0,0,0.30);
2ce1d0bClaude	3022	}
958d26aClaude	3023	.card h3 { font-size: var(--t-md); margin-bottom: 6px; letter-spacing: -0.012em; }
2ce1d0bClaude	3024	.card h3 a { color: var(--text); font-weight: 600; }
	3025	.card h3 a:hover { color: var(--text-link); }
	3026	.card p { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.5; }
	3027	.card-meta {
	3028	display: flex;
	3029	gap: 14px;
	3030	margin-top: 14px;
	3031	padding-top: 14px;
	3032	border-top: 1px solid var(--border);
	3033	font-size: var(--t-xs);
	3034	color: var(--text-muted);
	3035	}
	3036	.card-meta span { display: flex; align-items: center; gap: 5px; }
	3037
	3038	/* ============================================================ */
	3039	/* Stat card / box */
	3040	/* ============================================================ */
	3041	.stat-card {
	3042	background: var(--bg-elevated);
	3043	border: 1px solid var(--border);
	3044	border-radius: var(--r-md);
fc1817aClaude	3045	padding: 16px;
2ce1d0bClaude	3046	transition: border-color var(--t-fast) var(--ease);
	3047	}
	3048	.stat-card:hover { border-color: var(--border-strong); }
	3049	.stat-label {
	3050	font-size: var(--t-xs);
	3051	color: var(--text-muted);
	3052	text-transform: uppercase;
	3053	letter-spacing: 0.06em;
	3054	font-weight: 500;
	3055	}
	3056	.stat-value {
	3057	font-size: var(--t-xl);
	3058	font-weight: 700;
	3059	margin-top: 4px;
	3060	letter-spacing: -0.025em;
	3061	color: var(--text);
	3062	font-feature-settings: 'tnum';
fc1817aClaude	3063	}
06d5ffeClaude	3064
2ce1d0bClaude	3065	/* ============================================================ */
	3066	/* Star button */
	3067	/* ============================================================ */
06d5ffeClaude	3068	.star-btn {
	3069	display: inline-flex;
	3070	align-items: center;
	3071	gap: 6px;
2ce1d0bClaude	3072	padding: 5px 12px;
	3073	background: var(--bg-elevated);
06d5ffeClaude	3074	border: 1px solid var(--border);
2ce1d0bClaude	3075	border-radius: var(--r-sm);
06d5ffeClaude	3076	color: var(--text);
2ce1d0bClaude	3077	font-size: var(--t-sm);
	3078	font-weight: 500;
06d5ffeClaude	3079	cursor: pointer;
2ce1d0bClaude	3080	transition: all var(--t-fast) var(--ease);
	3081	}
	3082	.star-btn:hover { background: var(--bg-surface); border-color: var(--border-strong); text-decoration: none; }
	3083	.star-btn.starred {
	3084	color: var(--yellow);
958d26aClaude	3085	border-color: rgba(251,191,36,0.4);
	3086	background: rgba(251,191,36,0.08);
06d5ffeClaude	3087	}
	3088
2ce1d0bClaude	3089	/* ============================================================ */
	3090	/* User profile */
	3091	/* ============================================================ */
06d5ffeClaude	3092	.user-profile {
	3093	display: flex;
	3094	gap: 32px;
	3095	margin-bottom: 32px;
2ce1d0bClaude	3096	padding: 24px;
	3097	background: var(--bg-elevated);
	3098	border: 1px solid var(--border);
	3099	border-radius: var(--r-lg);
06d5ffeClaude	3100	}
	3101	.user-avatar {
	3102	width: 96px;
	3103	height: 96px;
2ce1d0bClaude	3104	border-radius: var(--r-full);
	3105	background: var(--accent-gradient-soft);
	3106	border: 1px solid var(--border-strong);
06d5ffeClaude	3107	display: flex;
	3108	align-items: center;
	3109	justify-content: center;
2ce1d0bClaude	3110	font-size: 36px;
	3111	font-weight: 600;
	3112	color: var(--text);
06d5ffeClaude	3113	flex-shrink: 0;
2ce1d0bClaude	3114	letter-spacing: -0.02em;
06d5ffeClaude	3115	}
2ce1d0bClaude	3116	.user-info h2 { font-size: var(--t-xl); margin-bottom: 2px; letter-spacing: -0.025em; }
	3117	.user-info .username { font-size: var(--t-md); color: var(--text-muted); }
	3118	.user-info .bio { font-size: var(--t-sm); color: var(--text-muted); margin-top: 10px; line-height: 1.55; }
06d5ffeClaude	3119
2ce1d0bClaude	3120	/* ============================================================ */
	3121	/* New repo form */
	3122	/* ============================================================ */
	3123	.new-repo-form { max-width: 640px; }
	3124	.new-repo-form h2 { margin-bottom: 24px; font-size: var(--t-xl); letter-spacing: -0.025em; }
	3125	.visibility-options { display: flex; gap: 12px; margin-bottom: 20px; }
06d5ffeClaude	3126	.visibility-option {
	3127	flex: 1;
2ce1d0bClaude	3128	padding: 16px;
06d5ffeClaude	3129	border: 1px solid var(--border);
2ce1d0bClaude	3130	border-radius: var(--r-md);
	3131	background: var(--bg-elevated);
06d5ffeClaude	3132	cursor: pointer;
2ce1d0bClaude	3133	text-align: left;
	3134	transition: all var(--t-fast) var(--ease);
	3135	}
	3136	.visibility-option:hover { border-color: var(--border-strong); background: var(--bg-surface); }
	3137	.visibility-option:has(input:checked) {
	3138	border-color: var(--accent);
	3139	background: var(--accent-gradient-faint);
	3140	box-shadow: 0 0 0 1px var(--accent);
06d5ffeClaude	3141	}
	3142	.visibility-option input { display: none; }
2ce1d0bClaude	3143	.visibility-option .vis-label { font-size: var(--t-sm); font-weight: 600; margin-bottom: 4px; }
	3144	.visibility-option .vis-desc { font-size: var(--t-xs); color: var(--text-muted); }
79136bbClaude	3145
2ce1d0bClaude	3146	/* ============================================================ */
	3147	/* Issues */
	3148	/* ============================================================ */
	3149	.issue-tabs { display: flex; gap: 4px; }
	3150	.issue-tabs a {
	3151	color: var(--text-muted);
	3152	font-size: var(--t-sm);
	3153	font-weight: 500;
	3154	padding: 6px 12px;
	3155	border-radius: var(--r-sm);
	3156	transition: all var(--t-fast) var(--ease);
	3157	}
	3158	.issue-tabs a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
	3159	.issue-tabs a.active { color: var(--text); background: var(--bg-elevated); }
79136bbClaude	3160
2ce1d0bClaude	3161	.issue-list {
	3162	border: 1px solid var(--border);
	3163	border-radius: var(--r-md);
	3164	overflow: hidden;
	3165	background: var(--bg-elevated);
	3166	}
79136bbClaude	3167	.issue-item {
	3168	display: flex;
2ce1d0bClaude	3169	gap: 14px;
79136bbClaude	3170	align-items: flex-start;
2ce1d0bClaude	3171	padding: 14px 16px;
79136bbClaude	3172	border-bottom: 1px solid var(--border);
2ce1d0bClaude	3173	transition: background var(--t-fast) var(--ease);
79136bbClaude	3174	}
	3175	.issue-item:last-child { border-bottom: none; }
2ce1d0bClaude	3176	.issue-item:hover { background: var(--bg-hover); }
	3177	.issue-state-icon {
	3178	font-size: 14px;
	3179	padding-top: 2px;
	3180	width: 18px;
	3181	height: 18px;
	3182	display: inline-flex;
	3183	align-items: center;
	3184	justify-content: center;
	3185	border-radius: var(--r-full);
	3186	flex-shrink: 0;
	3187	}
79136bbClaude	3188	.state-open { color: var(--green); }
479dcd9Claude	3189	.state-closed { color: var(--text-link); }
2ce1d0bClaude	3190	.issue-title {
debcf27Claude	3191	font-family: var(--font-display);
	3192	font-size: var(--t-md);
2ce1d0bClaude	3193	font-weight: 600;
debcf27Claude	3194	line-height: 1.35;
	3195	letter-spacing: -0.012em;
	3196	}
	3197	.issue-title a { color: var(--text-strong); transition: color var(--t-fast) var(--ease); }
	3198	.issue-title a:hover { color: var(--accent); text-decoration: none; }
	3199	.issue-meta {
	3200	font-family: var(--font-mono);
	3201	font-size: 11px;
	3202	color: var(--text-muted);
	3203	margin-top: 5px;
	3204	letter-spacing: 0.01em;
2ce1d0bClaude	3205	}
79136bbClaude	3206
	3207	.issue-badge {
	3208	display: inline-flex;
	3209	align-items: center;
2ce1d0bClaude	3210	gap: 6px;
79136bbClaude	3211	padding: 4px 12px;
2ce1d0bClaude	3212	border-radius: var(--r-full);
	3213	font-size: var(--t-sm);
79136bbClaude	3214	font-weight: 500;
2ce1d0bClaude	3215	line-height: 1.4;
79136bbClaude	3216	}
958d26aClaude	3217	.badge-open { background: rgba(52,211,153,0.10); color: var(--green); border: 1px solid rgba(52,211,153,0.35); }
479dcd9Claude	3218	.badge-closed { background: rgba(154,168,239,0.10); color: var(--text-link); border: 1px solid rgba(154,168,239,0.35); }
	3219	.badge-merged { background: rgba(91,110,232,0.10); color: var(--accent); border: 1px solid rgba(91,110,232,0.35); }
4fc7860Test User	3220	.badge-live { background: #0891b2; color: #fff; border: 1px solid #0891b2; }
	3221	.badge-soon { background: transparent; color: #6b7280; border: 1px solid #d1d5db; }
	3222	.badge-preview { background: transparent; color: #0891b2; border: 1px dashed rgba(8,145,178,0.45); }
2ce1d0bClaude	3223	.state-merged { color: var(--accent); }
479dcd9Claude	3224	.ai-review { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(91,110,232,0.3); }
79136bbClaude	3225
2ce1d0bClaude	3226	.issue-detail { max-width: 920px; }
79136bbClaude	3227	.issue-comment-box {
	3228	border: 1px solid var(--border);
2ce1d0bClaude	3229	border-radius: var(--r-md);
79136bbClaude	3230	margin-bottom: 16px;
	3231	overflow: hidden;
2ce1d0bClaude	3232	background: var(--bg-elevated);
79136bbClaude	3233	}
	3234	.comment-header {
	3235	background: var(--bg-secondary);
2ce1d0bClaude	3236	padding: 10px 16px;
79136bbClaude	3237	border-bottom: 1px solid var(--border);
2ce1d0bClaude	3238	font-size: var(--t-sm);
79136bbClaude	3239	color: var(--text-muted);
	3240	}
	3241
2ce1d0bClaude	3242	/* ============================================================ */
	3243	/* Panel — flexible container used across many pages */
	3244	/* ============================================================ */
	3245	.panel {
	3246	background: var(--bg-elevated);
	3247	border: 1px solid var(--border);
	3248	border-radius: var(--r-md);
	3249	overflow: hidden;
	3250	}
	3251	.panel-item {
	3252	display: flex;
	3253	align-items: center;
	3254	gap: 12px;
	3255	padding: 12px 16px;
79136bbClaude	3256	border-bottom: 1px solid var(--border);
2ce1d0bClaude	3257	transition: background var(--t-fast) var(--ease);
	3258	}
	3259	.panel-item:last-child { border-bottom: none; }
	3260	.panel-item:hover { background: var(--bg-hover); }
5882af3Claude	3261
	3262	/* ─── j/k keyboard list navigation ─── */
	3263	.is-kbd-focus {
479dcd9Claude	3264	outline: 2px solid rgba(91,110,232,0.6) !important;
5882af3Claude	3265	outline-offset: -2px;
479dcd9Claude	3266	background: rgba(91,110,232,0.06) !important;
5882af3Claude	3267	border-radius: 4px;
	3268	}
	3269	.is-kbd-selected {
	3270	outline: 2px solid rgba(52,211,153,0.6) !important;
	3271	background: rgba(52,211,153,0.06) !important;
	3272	}
2ce1d0bClaude	3273	.panel-empty {
	3274	padding: 24px;
	3275	text-align: center;
79136bbClaude	3276	color: var(--text-muted);
2ce1d0bClaude	3277	font-size: var(--t-sm);
79136bbClaude	3278	}
	3279
2ce1d0bClaude	3280	/* ============================================================ */
	3281	/* Search */
	3282	/* ============================================================ */
79136bbClaude	3283	.search-results .diff-file { margin-bottom: 12px; }
16b325cClaude	3284
2ce1d0bClaude	3285	/* ============================================================ */
	3286	/* Timeline */
	3287	/* ============================================================ */
	3288	.timeline { position: relative; padding-left: 28px; }
16b325cClaude	3289	.timeline::before {
	3290	content: '';
	3291	position: absolute;
	3292	left: 4px;
	3293	top: 8px;
	3294	bottom: 8px;
	3295	width: 2px;
2ce1d0bClaude	3296	background: linear-gradient(180deg, var(--border) 0%, transparent 100%);
16b325cClaude	3297	}
2ce1d0bClaude	3298	.timeline-item { position: relative; padding-bottom: 16px; }
16b325cClaude	3299	.timeline-dot {
	3300	position: absolute;
2ce1d0bClaude	3301	left: -28px;
	3302	top: 8px;
	3303	width: 12px;
	3304	height: 12px;
	3305	border-radius: var(--r-full);
64aa989Claude	3306	background: var(--accent);
16b325cClaude	3307	border: 2px solid var(--bg);
2ce1d0bClaude	3308	box-shadow: 0 0 0 1px var(--border-strong);
16b325cClaude	3309	}
	3310	.timeline-content {
2ce1d0bClaude	3311	background: var(--bg-elevated);
16b325cClaude	3312	border: 1px solid var(--border);
2ce1d0bClaude	3313	border-radius: var(--r-md);
	3314	padding: 14px 16px;
16b325cClaude	3315	}
f1ab587Claude	3316
2ce1d0bClaude	3317	/* ============================================================ */
	3318	/* Toggle switch */
	3319	/* ============================================================ */
f1ab587Claude	3320	.toggle-switch {
	3321	position: relative;
	3322	display: inline-block;
2ce1d0bClaude	3323	width: 40px;
	3324	height: 22px;
f1ab587Claude	3325	flex-shrink: 0;
	3326	margin-left: 16px;
	3327	}
	3328	.toggle-switch input { opacity: 0; width: 0; height: 0; }
	3329	.toggle-slider {
	3330	position: absolute;
	3331	cursor: pointer;
	3332	top: 0; left: 0; right: 0; bottom: 0;
	3333	background: var(--bg-tertiary);
	3334	border: 1px solid var(--border);
2ce1d0bClaude	3335	border-radius: var(--r-full);
e589f77ccantynz-alt	3336	transition: all var(--dur-base) var(--ease);
f1ab587Claude	3337	}
	3338	.toggle-slider::before {
	3339	content: '';
	3340	position: absolute;
2ce1d0bClaude	3341	height: 16px;
	3342	width: 16px;
f1ab587Claude	3343	left: 2px;
	3344	bottom: 2px;
	3345	background: var(--text-muted);
2ce1d0bClaude	3346	border-radius: var(--r-full);
e589f77ccantynz-alt	3347	transition: all var(--dur-base) var(--ease);
f1ab587Claude	3348	}
	3349	.toggle-switch input:checked + .toggle-slider {
64aa989Claude	3350	background: var(--accent);
2ce1d0bClaude	3351	border-color: transparent;
479dcd9Claude	3352	box-shadow: 0 0 0 1px rgba(91,110,232,0.4);
f1ab587Claude	3353	}
	3354	.toggle-switch input:checked + .toggle-slider::before {
2ce1d0bClaude	3355	transform: translateX(18px);
f1ab587Claude	3356	background: #fff;
	3357	}
ef8d378Claude	3358
	3359	/* ============================================================
	3360	* 2026 polish layer (purely additive — no layout changes).
	3361	* Improves typography rendering, focus states, hover affordances,
	3362	* and adds the gradient brand cue to primary buttons. Anything
	3363	* that could alter dimensions stays in the rules above.
	3364	* ============================================================ */
	3365	html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	3366	body { letter-spacing: -0.005em; font-feature-settings: 'cv11', 'ss01', 'ss03'; }
479dcd9Claude	3367	*::selection { background: rgba(91,110,232,0.30); color: var(--text); }
ef8d378Claude	3368
	3369	h1, h2, h3, h4 { letter-spacing: -0.018em; }
	3370	h1 { letter-spacing: -0.025em; }
	3371
	3372	/* Smoother colour transitions everywhere links live */
	3373	a { transition: color 120ms cubic-bezier(0.16,1,0.3,1); }
	3374
	3375	/* Buttons: focus rings + smoother transitions; primary gets the gradient */
	3376	.btn {
	3377	transition:
	3378	background 120ms cubic-bezier(0.16,1,0.3,1),
	3379	border-color 120ms cubic-bezier(0.16,1,0.3,1),
	3380	transform 120ms cubic-bezier(0.16,1,0.3,1),
	3381	box-shadow 120ms cubic-bezier(0.16,1,0.3,1);
	3382	}
	3383	.btn:active { transform: translateY(0.5px); }
	3384	.btn:focus-visible {
	3385	outline: none;
479dcd9Claude	3386	box-shadow: var(--ring);
ef8d378Claude	3387	}
e589f77ccantynz-alt	3388	/* .btn-primary + .btn-primary:hover collapsed into the canonical rules
	3389	earlier in the sheet; the dead duplicates that lived here were removed. */
ef8d378Claude	3390
	3391	/* Inputs: cleaner focus ring + hover */
	3392	.form-group input:hover,
	3393	.form-group textarea:hover,
	3394	.form-group select:hover {
	3395	border-color: rgba(255,255,255,0.14);
	3396	}
	3397	.form-group input:focus,
	3398	.form-group textarea:focus,
	3399	.form-group select:focus {
479dcd9Claude	3400	border-color: var(--border-focus);
	3401	box-shadow: var(--ring);
ef8d378Claude	3402	}
	3403	:root[data-theme='light'] .form-group input:hover,
	3404	:root[data-theme='light'] .form-group textarea:hover,
	3405	:root[data-theme='light'] .form-group select:hover {
	3406	border-color: rgba(0,0,0,0.18);
	3407	}
	3408
e589f77ccantynz-alt	3409	/* Cards: subtle hover lift. The unscoped .card + .card:hover that
	3410	lived here were collapsed into the canonical .card rules earlier in
	3411	the sheet; only the light-theme hover override remains. */
ef8d378Claude	3412	:root[data-theme='light'] .card:hover {
	3413	border-color: rgba(0,0,0,0.18);
	3414	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	3415	}
	3416
	3417	/* Issue / commit / panel rows: smoother hover */
	3418	.issue-item, .commit-item {
	3419	transition: background 120ms cubic-bezier(0.16,1,0.3,1);
	3420	}
	3421	.repo-nav a {
	3422	transition: color 120ms cubic-bezier(0.16,1,0.3,1),
	3423	border-bottom-color 120ms cubic-bezier(0.16,1,0.3,1);
	3424	}
	3425	.nav-link {
	3426	transition: color 120ms cubic-bezier(0.16,1,0.3,1);
	3427	}
	3428
e589f77ccantynz-alt	3429	/* Auth card: the unscoped .auth-container (and its redundant h2
	3430	letter-spacing, byte-identical to the canonical h2 rule) were
	3431	collapsed into the canonical rules earlier; only the light-theme
	3432	shadow override remains. */
ef8d378Claude	3433	:root[data-theme='light'] .auth-container {
	3434	box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
	3435	}
	3436
e589f77ccantynz-alt	3437	/* Empty state: dashed border + var(--bg) background collapsed into the
	3438	canonical .empty-state rule earlier; the dead duplicate was removed. */
ef8d378Claude	3439
	3440	/* Badges + commit-sha: smoother transition */
	3441	.commit-sha, .badge { transition: all 120ms cubic-bezier(0.16,1,0.3,1); }
	3442
8cfb00eClaude	3443	/* Gradient text utility — kept for back-compat, renders as plain accent color. */
ef8d378Claude	3444	.gradient-text {
8cfb00eClaude	3445	color: var(--accent);
ef8d378Claude	3446	}
	3447
	3448	/* Custom scrollbars (subtle, themed) */
	3449	::-webkit-scrollbar { width: 10px; height: 10px; }
	3450	::-webkit-scrollbar-track { background: transparent; }
	3451	::-webkit-scrollbar-thumb {
	3452	background: rgba(255,255,255,0.06);
	3453	border: 2px solid var(--bg);
	3454	border-radius: 9999px;
	3455	}
	3456	::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
	3457	:root[data-theme='light'] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); }
	3458	:root[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }
	3459
	3460	/* Honour reduced-motion preference */
	3461	@media (prefers-reduced-motion: reduce) {
	3462	, ::before, *::after {
	3463	animation-duration: 0.01ms !important;
	3464	animation-iteration-count: 1 !important;
	3465	transition-duration: 0.01ms !important;
	3466	}
	3467	}
c63b860Claude	3468
	3469	/* Block O3 — visual coherence additive rules. */
	3470	.card.card-p-none { padding: 0; }
	3471	.card.card-p-sm { padding: var(--space-3); }
	3472	.card.card-p-md { padding: var(--space-4); }
	3473	.card.card-p-lg { padding: var(--space-6); }
	3474	.card.card-elevated { box-shadow: var(--elev-2); }
	3475	.card.card-gradient {
64aa989Claude	3476	background: var(--bg-elevated);
c63b860Claude	3477	}
	3478	.card.card-gradient::before { opacity: 1; }
	3479	.notice {
	3480	padding: var(--space-3) var(--space-4);
	3481	border-radius: var(--radius-md);
	3482	border: 1px solid var(--border);
	3483	background: var(--bg-elevated);
	3484	color: var(--text);
	3485	font-size: var(--font-size-sm);
	3486	margin-bottom: var(--space-6);
	3487	line-height: var(--leading-normal);
	3488	}
	3489	.notice-info { border-color: rgba(96,165,250,0.40); background: rgba(96,165,250,0.08); color: var(--text); }
	3490	.notice-success { border-color: var(--green); background: rgba(52,211,153,0.08); color: var(--text); }
	3491	.notice-warn { border-color: var(--yellow); background: rgba(251,191,36,0.10); color: var(--yellow); }
	3492	.notice-error { border-color: var(--red); background: rgba(248,113,113,0.10); color: var(--red); }
479dcd9Claude	3493	.notice-accent { border-color: var(--accent); background: rgba(91,110,232,0.10); color: var(--text); }
c63b860Claude	3494	.email-preview {
	3495	padding: var(--space-5);
	3496	background: #fff;
	3497	color: #111;
	3498	border-radius: var(--radius-md);
	3499	}
	3500	.code-block {
	3501	margin: var(--space-2) 0 0;
	3502	padding: var(--space-3);
	3503	background: var(--bg-tertiary);
	3504	border: 1px solid var(--border-subtle);
	3505	border-radius: var(--radius-sm);
	3506	font-family: var(--font-mono);
	3507	font-size: var(--font-size-xs);
	3508	line-height: var(--leading-normal);
	3509	overflow-x: auto;
	3510	}
	3511	.status-pill-operational {
	3512	display: inline-flex;
	3513	align-items: center;
	3514	padding: var(--space-1) var(--space-3);
	3515	border-radius: var(--radius-full);
	3516	font-size: var(--font-size-xs);
	3517	font-weight: 600;
	3518	background: rgba(52,211,153,0.15);
	3519	color: var(--green);
	3520	}
	3521	.api-tag {
	3522	display: inline-flex;
	3523	align-items: center;
	3524	font-size: var(--font-size-xs);
	3525	padding: 2px var(--space-2);
	3526	border-radius: var(--radius-sm);
	3527	font-family: var(--font-mono);
	3528	}
	3529	.api-tag-auth { background: rgba(96,165,250,0.15); color: var(--accent); }
	3530	.api-tag-scope { background: rgba(52,211,153,0.15); color: var(--green); }
	3531	.stat-number {
	3532	font-size: var(--font-size-xl);
	3533	font-weight: 700;
	3534	color: var(--text-strong);
	3535	line-height: var(--leading-tight);
	3536	}
	3537	.stat-number-accent { color: var(--accent); }
	3538	.stat-number-blue { color: var(--blue); }
	3539	.stat-number-purple { color: var(--text-link); }
	3540	footer .footer-tag-sub {
	3541	margin-top: var(--space-2);
	3542	font-size: var(--font-size-xs);
	3543	color: var(--text-faint);
	3544	line-height: var(--leading-normal);
	3545	}
	3546	footer .footer-version-pill {
	3547	display: inline-flex;
	3548	align-items: center;
	3549	gap: var(--space-2);
	3550	padding: var(--space-1) var(--space-3);
	3551	border-radius: var(--radius-full);
	3552	border: 1px solid var(--border);
	3553	background: var(--bg-elevated);
	3554	color: var(--text-faint);
	3555	font-family: var(--font-mono);
	3556	font-size: var(--font-size-xs);
	3557	cursor: help;
	3558	}
	3559	footer .footer-banner {
	3560	max-width: 1240px;
	3561	margin: var(--space-6) auto 0;
	3562	padding: var(--space-3) var(--space-4);
	3563	border-radius: var(--radius-md);
	3564	border: 1px solid var(--border);
	3565	background: var(--bg-elevated);
	3566	color: var(--text);
	3567	font-family: var(--font-mono);
	3568	font-size: var(--font-size-xs);
	3569	letter-spacing: 0.04em;
	3570	text-transform: uppercase;
	3571	text-align: center;
	3572	}
	3573	footer .footer-banner-info { border-color: rgba(96,165,250,0.40); color: var(--blue); }
	3574	footer .footer-banner-warn { border-color: rgba(251,191,36,0.40); color: var(--yellow); }
	3575	footer .footer-banner-error { border-color: rgba(248,113,113,0.45); color: var(--red); }
dc26881CC LABS App	3576
cf9178bTest User	3577	/* ============================================================ */
	3578	/* Global toast notifications. */
	3579	/* Slide-in from right, auto-dismiss, ARIA-live for SR users. */
	3580	/* ============================================================ */
	3581	.gx-toast {
	3582	pointer-events: auto;
	3583	display: inline-flex;
	3584	align-items: flex-start;
	3585	gap: 10px;
	3586	min-width: 280px;
	3587	max-width: min(440px, calc(100vw - 32px));
	3588	padding: 12px 14px 12px 12px;
	3589	background: var(--bg-elevated);
	3590	border: 1px solid var(--border);
	3591	border-radius: 10px;
	3592	box-shadow:
	3593	0 12px 36px -10px rgba(15,16,28,0.18),
	3594	0 2px 6px rgba(15,16,28,0.04),
	3595	0 0 0 1px rgba(15,16,28,0.02);
	3596	color: var(--text);
	3597	font-size: 13.5px;
	3598	line-height: 1.45;
	3599	opacity: 0;
	3600	transform: translateX(16px);
	3601	transition:
	3602	opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
	3603	transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
	3604	}
	3605	.gx-toast--in { opacity: 1; transform: translateX(0); }
	3606	.gx-toast--out { opacity: 0; transform: translateX(16px); }
	3607	.gx-toast__icon {
	3608	flex-shrink: 0;
	3609	width: 20px; height: 20px;
	3610	border-radius: 50%;
	3611	display: inline-flex;
	3612	align-items: center;
	3613	justify-content: center;
	3614	font-size: 12px;
	3615	font-weight: 700;
	3616	line-height: 1;
	3617	margin-top: 1px;
	3618	}
	3619	.gx-toast__text { flex: 1 1 auto; min-width: 0; padding-top: 2px; word-wrap: break-word; }
	3620	.gx-toast__close {
	3621	flex-shrink: 0;
	3622	width: 22px; height: 22px;
	3623	border: 0;
	3624	background: transparent;
	3625	color: var(--text-muted);
	3626	font-size: 18px;
	3627	line-height: 1;
	3628	cursor: pointer;
	3629	border-radius: 4px;
	3630	padding: 0;
	3631	margin: -2px -2px 0 0;
	3632	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	3633	}
	3634	.gx-toast__close:hover { background: var(--bg-hover); color: var(--text); }
	3635	.gx-toast--success .gx-toast__icon { background: rgba(5,150,105,0.14); color: var(--green); }
	3636	.gx-toast--error .gx-toast__icon { background: rgba(220,38,38,0.14); color: var(--red); }
	3637	.gx-toast--warn .gx-toast__icon { background: rgba(217,119,6,0.16); color: var(--yellow); }
479dcd9Claude	3638	.gx-toast--info .gx-toast__icon { background: rgba(91,110,232,0.14); color: var(--accent); }
cf9178bTest User	3639	@media (prefers-reduced-motion: reduce) {
	3640	.gx-toast { transition: opacity 60ms linear; transform: none; }
	3641	.gx-toast--in, .gx-toast--out { transform: none; }
	3642	}
	3643
dc26881CC LABS App	3644	/* ============================================================ */
	3645	/* Block U4 — cross-document view transitions. */
	3646	/* Chrome 126+, Edge, Safari 18.2+ get a soft 200ms fade on */
	3647	/* every same-origin navigation. Older browsers ignore these */
	3648	/* rules entirely — no JS shim, no breakage. */
	3649	/* prefers-reduced-motion disables the animation honourably. */
	3650	/* ============================================================ */
	3651	@view-transition {
	3652	navigation: auto;
	3653	}
	3654	::view-transition-old(root),
	3655	::view-transition-new(root) {
	3656	animation-duration: 200ms;
	3657	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	3658	}
	3659	::view-transition-old(root) {
	3660	animation-name: vt-fade-out;
	3661	}
	3662	::view-transition-new(root) {
	3663	animation-name: vt-fade-in;
	3664	}
	3665	@keyframes vt-fade-out {
	3666	to { opacity: 0; }
	3667	}
	3668	@keyframes vt-fade-in {
	3669	from { opacity: 0; }
	3670	}
	3671	@media (prefers-reduced-motion: reduce) {
	3672	::view-transition-old(root),
	3673	::view-transition-new(root) {
	3674	animation-duration: 0s;
	3675	}
	3676	}
	3677	/* The transition system picks up its root subject from this rule. */
	3678	body {
	3679	view-transition-name: root;
	3680	}
fc1817aClaude	3681	`;