@glw907/cairn-cms 0.34.0 → 0.35.0

package/src/lib/components/LoginPage.svelte

@@ -8,12 +8,13 @@ the allowlist, so the page never leaks membership (spec §7.1).
   import './cairn-admin.css';
   import { onMount } from 'svelte';
   import CairnLogo from './CairnLogo.svelte';
+  import CsrfField from './CsrfField.svelte';
   import { cairnFaviconHref } from './cairn-favicon.js';
   import { warnIfChromeWrapped } from './chrome-guard.js';
 
   interface Props {
-    /** The login load's data: the site name and an optional error. */
-    data: { siteName: string; error: string | null };
+    /** The login load's data: the site name, an optional error, and the CSRF token. */
+    data: { siteName: string; error: string | null; csrf: string };
     /** The action result: `sent` is true once a request was accepted. */
     form: { sent?: boolean } | null;
   }
@@ -54,6 +55,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
         <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one below.</div>
       {/if}
       <form method="POST" class="flex flex-col gap-3">
+        <CsrfField token={data.csrf} />
         <label class="flex flex-col gap-1">
           <span class="text-sm font-medium">Email</span>
           <input

package/src/lib/components/ManageEditors.svelte

@@ -6,6 +6,7 @@ last-owner anti-lockout rule itself is enforced server-side (editors-routes). Ac
 named `?/setRole`, `?/remove`, and `?/add` actions.
 -->
 <script lang="ts">
+  import CsrfField from './CsrfField.svelte';
   import type { Editor } from '../auth/types.js';
 
   interface Props {
@@ -45,6 +46,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
           </td>
           <td class="flex justify-end gap-2">
             <form method="POST" action="?/setRole">
+              <CsrfField />
               <input type="hidden" name="email" value={editor.email} />
               <input type="hidden" name="role" value={editor.role === 'owner' ? 'editor' : 'owner'} />
               <button type="submit" class="btn btn-ghost btn-xs" disabled={isSelf} aria-label={`Toggle role for ${editor.displayName}`}>
@@ -52,6 +54,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
               </button>
             </form>
             <form method="POST" action="?/remove">
+              <CsrfField />
               <input type="hidden" name="email" value={editor.email} />
               <button type="submit" class="btn btn-ghost btn-xs text-error" disabled={isSelf} aria-label={`Remove ${editor.displayName}`}>
                 Remove
@@ -65,6 +68,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
 </div>
 
 <form method="POST" action="?/add" class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 grid gap-3 p-4 shadow-[var(--cairn-shadow)] sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
+  <CsrfField />
   <label class="flex flex-col gap-1">
     <span class="text-sm font-medium">Name</span>
     <input class="input" name="name" aria-label="Name" required />

package/src/lib/components/NavTree.svelte

@@ -8,6 +8,7 @@ validates on save.
 -->
 <script lang="ts">
   import { untrack } from 'svelte';
+  import CsrfField from './CsrfField.svelte';
   import { SortableList, sortItems } from '@rodrigodagostino/svelte-sortable-list';
   import type { SortableList as SortableListNS } from '@rodrigodagostino/svelte-sortable-list';
   import '@rodrigodagostino/svelte-sortable-list/styles.css';
@@ -98,6 +99,7 @@ validates on save.
 {/if}
 
 <form method="POST" action="?/save">
+  <CsrfField />
   <input type="hidden" name="tree" value={treeJson} />
 
   <div class="mb-2">

package/src/lib/components/RenameDialog.svelte

@@ -6,6 +6,8 @@ dated post keeps its date; only the slug changes. Built on a native <dialog>, fo
 DeleteDialog a11y conventions.
 -->
 <script lang="ts">
+  import CsrfField from './CsrfField.svelte';
+
   interface Props {
     /** The concept this entry belongs to, e.g. "posts". Posted with the confirm. */
     conceptId: string;
@@ -50,6 +52,7 @@ DeleteDialog a11y conventions.
       <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
     </div>
     <form method="POST" action="?/rename" class="flex flex-col gap-3">
+      <CsrfField />
       <input type="hidden" name="concept" value={conceptId} />
       <input type="hidden" name="id" value={id} />
       <label class="flex flex-col gap-1">

package/src/lib/components/csrf-context.ts

@@ -0,0 +1,2 @@
+/** The Svelte context key AdminLayout uses to hand a CSRF-token getter to descendant admin forms. */
+export const CSRF_CONTEXT_KEY = 'cairn:csrf';

package/src/lib/components/index.ts

@@ -3,6 +3,7 @@
 export { default as AdminLayout } from './AdminLayout.svelte';
 export { default as LoginPage } from './LoginPage.svelte';
 export { default as ConfirmPage } from './ConfirmPage.svelte';
+export { default as CsrfField } from './CsrfField.svelte';
 export { default as ConceptList } from './ConceptList.svelte';
 export { default as EditPage } from './EditPage.svelte';
 export { default as ManageEditors } from './ManageEditors.svelte';

package/src/lib/sveltekit/auth-routes.ts

@@ -14,6 +14,7 @@ import {
 } from '../auth/crypto.js';
 import { findEditor, issueToken, consumeToken, createSession, deleteSession, recentlyIssued } from '../auth/store.js';
 import { buildMagicLinkMessage, cloudflareSend, type AuthBranding, type SendMagicLink } from '../email.js';
+import { issueCsrfToken } from './csrf.js';
 import type { RequestContext } from './types.js';
 
 export interface AuthRoutesConfig {
@@ -63,23 +64,29 @@ export function createAuthRoutes(config: AuthRoutesConfig) {
     return { sent: true };
   }
 
-  /** GET /admin/login. Public. Carries the site name and an optional `?error` for the form. */
-  function loginLoad(event: RequestContext): { siteName: string; error: string | null } {
-    return { siteName: config.branding.siteName, error: event.url.searchParams.get('error') };
+  /** GET /admin/login. Public. Carries the site name, an optional `?error`, and the CSRF token. */
+  function loginLoad(event: RequestContext): { siteName: string; error: string | null; csrf: string } {
+    return {
+      siteName: config.branding.siteName,
+      error: event.url.searchParams.get('error'),
+      csrf: issueCsrfToken(event),
+    };
   }
 
   /**
    * GET /admin/auth/confirm. Renders the confirm page and consumes nothing; only the POST
-   * verifies. Sets Referrer-Policy: no-referrer so the token does not leak to a referrer.
+   * verifies. Sets Referrer-Policy: no-referrer so the token does not leak to a referrer, and
+   * issues the CSRF token so the confirm form can render the hidden field.
    */
   function confirmLoad(
     event: RequestContext,
-  ): { token: string; siteName: string; error: string | null } {
+  ): { token: string; siteName: string; error: string | null; csrf: string } {
     event.setHeaders({ 'Referrer-Policy': 'no-referrer' });
     return {
       token: event.url.searchParams.get('token') ?? '',
       siteName: config.branding.siteName,
       error: event.url.searchParams.get('error'),
+      csrf: issueCsrfToken(event),
     };
   }
 

package/src/lib/sveltekit/content-routes.ts

@@ -13,6 +13,8 @@ import { listMarkdown, readRaw, commitFiles, type FileChange } from '../github/r
 import { cachedInstallationToken } from '../github/signing.js';
 import { emptyManifest, manifestEntryFromFile, parseManifest, serializeManifest, upsertEntry, removeEntry, inboundLinks, type LinkTarget, type InboundLink } from '../content/manifest.js';
 import { CommitConflictError } from '../github/types.js';
+import { issueCsrfToken } from './csrf.js';
+import type { CookieJar } from './types.js';
 import type { CairnRuntime, ConceptDescriptor, FrontmatterField } from '../content/types.js';
 import type { Editor, Role } from '../auth/types.js';
 
@@ -36,6 +38,8 @@ export interface LayoutData {
   /** The nav group labels the user has collapsed, from the persisted cookie. Read at SSR so a
    *  collapsed group renders collapsed with no flash. Empty when none are collapsed. */
   collapsedNav: string[];
+  /** The session's CSRF double-submit token, rendered as a hidden field in every admin form. */
+  csrf: string;
 }
 
 /** One row in a concept's list view. */
@@ -88,8 +92,9 @@ export interface ContentEvent {
   request: Request;
   locals: { editor?: Editor | null };
   platform?: { env?: GithubKeyEnv };
-  /** SvelteKit's cookie jar; the layout load reads the persisted admin theme. Optional for non-route callers. */
-  cookies?: { get(name: string): string | undefined };
+  /** SvelteKit's cookie jar. The layout load reads the persisted admin theme and issues the CSRF
+   *  token. Optional for non-route callers. */
+  cookies?: CookieJar;
 }
 
 /** Injectable dependencies; tests stub the token mint to avoid signing a real key. */
@@ -134,6 +139,7 @@ export function createContentRoutes(runtime: CairnRuntime, deps: ContentRoutesDe
       navLabel: runtime.navMenu?.label ?? null,
       theme,
       collapsedNav,
+      csrf: event.cookies ? issueCsrfToken({ url: event.url, cookies: event.cookies }) : '',
     };
   }
 

package/src/lib/sveltekit/csrf-required-page.ts

@@ -0,0 +1,26 @@
+// The branded 403 the guard serves when an admin form POST fails the double-submit token check.
+// A sibling to https-required-page, built through the shared shell. It names the likely cause and
+// offers a fresh sign-in, and it does not mention Origin headers (the token path does not read them).
+import { renderStaticAdminPage } from './static-admin-page.js';
+
+/** Render the full HTML document for the CSRF-failed page. */
+export function csrfRequiredPage(): string {
+  const inner = `
+  <span class="eyebrow">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+    Security check
+  </span>
+  <h1>Let's try that again</h1>
+  <p>Your sign-in form could not be verified. This usually means the page was open across a browser restart, or cookies are blocked for this site.</p>
+
+  <a class="cta" href="/admin/login">
+    Back to sign-in
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+  </a>
+
+  <div class="fix">
+    <h2>If it keeps happening</h2>
+    <p>Allow cookies for this site, then open the sign-in page fresh and request a new link.</p>
+  </div>`;
+  return renderStaticAdminPage({ title: 'Security check · Cairn', innerHtml: inner });
+}

package/src/lib/sveltekit/csrf.ts

@@ -0,0 +1,61 @@
+// cairn owns CSRF for the admin once a site disables SvelteKit's global checkOrigin. These helpers
+// back the guard's two rules and the loads that issue the double-submit token. See
+// docs/superpowers/specs/2026-06-08-cairn-login-csrf-ownership-design.md.
+import { csrfCookieName, generateCsrfToken } from '../auth/crypto.js';
+import type { CookieJar, RequestContext } from './types.js';
+
+const UNSAFE_METHODS = new Set(['POST', 'PUT', 'PATCH', 'DELETE']);
+const FORM_CONTENT_TYPES = new Set([
+  'application/x-www-form-urlencoded',
+  'multipart/form-data',
+  'text/plain',
+]);
+
+/** True for a request SvelteKit's CSRF guard screens: an unsafe method with a form content type. */
+export function isUnsafeFormRequest(request: Request): boolean {
+  if (!UNSAFE_METHODS.has(request.method)) return false;
+  const type = (request.headers.get('content-type') ?? '').split(';', 1)[0].trim().toLowerCase();
+  return FORM_CONTENT_TYPES.has(type);
+}
+
+/** The faithful framework check: the Origin header equals the request's own origin. */
+export function originMatches(event: Pick<RequestContext, 'url' | 'request'>): boolean {
+  return event.request.headers.get('origin') === event.url.origin;
+}
+
+/** A length-checked constant-time compare, so the token check leaks no timing. */
+export function tokensMatch(a: string, b: string): boolean {
+  if (a.length === 0 || a.length !== b.length) return false;
+  let diff = 0;
+  for (let i = 0; i < a.length; i++) diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
+  return diff === 0;
+}
+
+/**
+ * Return the session's CSRF token, minting and setting it when absent. Lazy and stable: a second
+ * open admin tab reuses the same value, so its form field still matches the cookie. Session-scoped
+ * (no maxAge), HttpOnly (the server sets both halves), SameSite=Strict, and __Host- on https.
+ */
+export function issueCsrfToken(event: { url: URL; cookies: CookieJar }): string {
+  const secure = event.url.protocol === 'https:';
+  const name = csrfCookieName(secure);
+  const existing = event.cookies.get(name);
+  if (existing) return existing;
+  const token = generateCsrfToken();
+  event.cookies.set(name, token, { path: '/', httpOnly: true, secure, sameSite: 'strict' });
+  return token;
+}
+
+/** Validate the double-submit token on an admin form POST, reading the field from a body clone. */
+export async function validateCsrfToken(event: RequestContext): Promise<boolean> {
+  const cookie = event.cookies.get(csrfCookieName(event.url.protocol === 'https:'));
+  if (!cookie) return false;
+  let submitted = '';
+  try {
+    const form = await event.request.clone().formData();
+    submitted = String(form.get('csrf') ?? '');
+  } catch {
+    return false;
+  }
+  return tokensMatch(submitted, cookie);
+}

package/src/lib/sveltekit/guard.ts

@@ -5,6 +5,8 @@ import { redirect, error } from '@sveltejs/kit';
 import { resolveSession } from '../auth/store.js';
 import { sessionCookieName } from '../auth/crypto.js';
 import { httpsRequiredPage } from './https-required-page.js';
+import { isUnsafeFormRequest, originMatches, validateCsrfToken } from './csrf.js';
+import { csrfRequiredPage } from './csrf-required-page.js';
 import type { Editor } from '../auth/types.js';
 import type { HandleInput, RequestContext } from './types.js';
 
@@ -46,23 +48,45 @@ function applySecurityHeaders(headers: Headers): void {
   headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
 }
 
+/** A branded full-document admin page, hardened with the baseline headers and never cached. */
+function brandedAdminPage(status: number, body: string): Response {
+  const headers = new Headers({ 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' });
+  applySecurityHeaders(headers);
+  return new Response(body, { status, headers });
+}
+
 /** The hardened 400 help page for a deployed admin request that arrived over http. */
 function httpsRequiredResponse(url: URL): Response {
   const httpsUrl = new URL(url);
   httpsUrl.protocol = 'https:';
-  const headers = new Headers({
-    'Content-Type': 'text/html; charset=utf-8',
-    'Cache-Control': 'no-store',
+  return brandedAdminPage(400, httpsRequiredPage(httpsUrl.toString()));
+}
+
+/** A plain 403 for a non-admin cross-origin form POST, matching the framework's wording. */
+function csrfForbidden(): Response {
+  return new Response('Cross-site POST form submissions are forbidden', {
+    status: 403,
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
   });
-  applySecurityHeaders(headers);
-  return new Response(httpsRequiredPage(httpsUrl.toString()), { status: 400, headers });
+}
+
+/** The branded 403 for a failed admin double-submit token check. */
+function csrfRequiredResponse(): Response {
+  return brandedAdminPage(403, csrfRequiredPage());
 }
 
 /** The SvelteKit `Handle` that guards `/admin/**` and hardens admin responses. */
 export function createAuthGuard() {
   return async function handle({ event, resolve }: HandleInput): Promise<Response> {
     const { pathname } = event.url;
-    if (!isAdminPath(pathname)) return resolve(event);
+
+    // Rule 2 - non-admin: restore the framework's strict Origin check the consumer disabled when
+    // they set checkOrigin: false to hand cairn the admin CSRF authority.
+    if (!isAdminPath(pathname)) {
+      if (isUnsafeFormRequest(event.request) && !originMatches(event)) return csrfForbidden();
+      return resolve(event);
+    }
+
     // A deployed admin request over http never works: the magic-link form POST would fail the
     // framework's CSRF guard with an opaque 403. Serve the help page instead, before resolve()
     // runs that check. This covers the public login/auth paths too, since that is where the form
@@ -70,6 +94,13 @@ export function createAuthGuard() {
     if (event.url.protocol === 'http:' && !isLocalHost(event.url.hostname)) {
       return httpsRequiredResponse(event.url);
     }
+
+    // Rule 1 - admin: every unsafe form POST carries a valid double-submit token, else the branded
+    // 403 before resolve() runs. This covers the public login/auth posts too.
+    if (isUnsafeFormRequest(event.request) && !(await validateCsrfToken(event))) {
+      return csrfRequiredResponse();
+    }
+
     if (!isPublicAdminPath(pathname)) {
       const env = event.platform?.env ?? {};
       const id = event.cookies.get(sessionCookieName(event.url.protocol === 'https:'));

package/src/lib/sveltekit/https-required-page.ts

@@ -1,32 +1,10 @@
-// The standalone "this admin needs HTTPS" page. The auth guard serves it when a request reaches a
-// deployed Worker over http, which is the one case that makes the magic-link sign-in fail: the
-// JS-free login form posts over http, and the framework's CSRF guard rejects a form POST whose
-// origin scheme does not match, so the editor would otherwise hit an opaque 403. This page names
-// the problem, says why https is needed, and gives the exact Cloudflare fix.
-//
-// It is served raw from the edge, before SvelteKit renders anything, so it carries no external
-// request: the Warm Stone tokens are inlined for both colour schemes and the type falls back to the
-// system stack (the shipped admin fonts are not reachable from here). The cairn glyph is the same
-// public-domain Temaki mark the admin chrome uses. See docs/internal/admin-design-system.md.
-
-/** Escape a string for safe interpolation into HTML text and double-quoted attributes. */
-function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
-// The cairn stone-stack glyph (Temaki, CC0), drawn in currentColor like CairnLogo.svelte.
-const CAIRN_GLYPH =
-  '<path d="M6.28 14C5.56 14 1 13.89 1 12.91C1 11.46 2.16 11.07 3.2 10.81C4.36 10.51 13.18 9.77 ' +
-  '13.76 10.07C14.46 10.43 13.52 12.49 12.44 12.77C11.28 13.07 10.21 14 8.48 14C7.05 14 9.69 14 ' +
-  '6.28 14ZM6.92 4.5C6.67 4.5 5 4.43 5 3.88C5 3.07 5.75 2.51 5.96 2.35C6.36 2.03 6.32 1.62 6.54 ' +
-  '1.27C6.84 0.79 7.61 0.5 7.88 0.5C8.1 0.5 8.75 0.9 9.23 1.42C9.45 1.66 10 2.77 10 3.12C10 4.22 ' +
-  '9.36 4.5 8.85 4.5C8.33 4.5 8.15 4.5 6.92 4.5ZM3.68 8.22C3 7.73 3.67 6.86 4.57 6.21C5.38 5.63 ' +
-  '5.92 5.96 6.79 5.7C8.33 5.24 9.02 5.72 9.02 5.72L10.9 6.82C12.03 7.63 10.99 7.67 10.38 8.56C9.79 ' +
-  '9.42 8.18 9.11 7.42 9.33C6.78 9.53 5.75 9.71 4.62 8.9L3.68 8.22Z"/>';
+// The "this admin needs HTTPS" page. The auth guard serves it when a request reaches a deployed
+// Worker over http, which is the one case that makes the magic-link sign-in fail: the JS-free login
+// form posts over http, and the framework's CSRF guard rejects a form POST whose origin scheme does
+// not match, so the editor would otherwise hit an opaque 403. This page names the problem, says why
+// https is needed, and gives the exact Cloudflare fix. The shared shell lives in
+// static-admin-page.ts. See guard.ts.
+import { escapeHtml, renderStaticAdminPage } from './static-admin-page.js';
 
 /**
  * Render the full HTML document for the HTTPS-required page.
@@ -34,166 +12,7 @@ const CAIRN_GLYPH =
  */
 export function httpsRequiredPage(httpsUrl: string): string {
   const href = escapeHtml(httpsUrl);
-  return `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta name="robots" content="noindex, nofollow" />
-<title>HTTPS required · Cairn</title>
-<style>
-:root {
-  color-scheme: light;
-  --bg: oklch(96.5% 0.006 75);
-  --glow: oklch(52% 0.2 293 / 0.06);
-  --panel: oklch(99% 0.004 75);
-  --recessed: oklch(95% 0.008 75);
-  --ink: oklch(26% 0.014 75);
-  --muted: oklch(48% 0.01 75);
-  --subtle: oklch(42% 0.01 75);
-  --primary: oklch(52% 0.2 293);
-  --primary-content: oklch(98% 0.012 293);
-  --border: oklch(93% 0.008 75);
-  --shadow: 0 1px 2px oklch(28% 0.02 75 / 0.05), 0 18px 40px -12px oklch(28% 0.02 75 / 0.16);
-  --radius-box: 1rem;
-  --radius-field: 0.625rem;
-  --font: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-    --bg: oklch(15.5% 0.009 75);
-    --glow: oklch(68% 0.18 293 / 0.1);
-    --panel: oklch(24% 0.01 75);
-    --recessed: oklch(20% 0.01 75);
-    --ink: oklch(93% 0.006 75);
-    --muted: oklch(72% 0.01 75);
-    --subtle: oklch(80% 0.008 75);
-    --primary: oklch(68% 0.18 293);
-    --primary-content: oklch(20% 0.04 293);
-    --border: oklch(30% 0.014 75);
-    --shadow: 0 1px 2px oklch(0% 0 0 / 0.35), 0 18px 40px -12px oklch(0% 0 0 / 0.55);
-  }
-}
-* { box-sizing: border-box; }
-body {
-  margin: 0;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-  font-family: var(--font);
-  color: var(--ink);
-  background-color: var(--bg);
-  background-image: radial-gradient(80rem 50rem at 50% -20%, var(--glow), transparent 60%);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1.55;
-}
-main {
-  width: 100%;
-  max-width: 30rem;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-box);
-  box-shadow: var(--shadow);
-  padding: 2.25rem;
-}
-.brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem; }
-.brand .tile {
-  display: grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.75rem;
-  background: var(--primary);
-  color: var(--primary-content);
-  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.12);
-}
-.brand .tile svg { width: 1.25rem; height: 1.25rem; }
-.brand .word {
-  font-weight: 700;
-  font-size: 1.25rem;
-  letter-spacing: -0.01em;
-}
-.eyebrow {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--muted);
-  margin-bottom: 0.6rem;
-}
-.eyebrow svg { width: 0.85rem; height: 0.85rem; }
-h1 {
-  margin: 0 0 0.75rem;
-  font-size: 1.6rem;
-  font-weight: 800;
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-}
-p { margin: 0 0 1rem; color: var(--subtle); }
-.cta {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0.25rem 0 0.5rem;
-  padding: 0.7rem 1.15rem;
-  border-radius: var(--radius-field);
-  background: var(--primary);
-  color: var(--primary-content);
-  font-weight: 600;
-  font-size: 0.95rem;
-  text-decoration: none;
-  box-shadow: 0 4px 14px -4px oklch(52% 0.2 293 / 0.5);
-  transition: transform 0.12s ease, box-shadow 0.12s ease;
-}
-.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px oklch(52% 0.2 293 / 0.55); }
-.cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
-.cta svg { width: 1rem; height: 1rem; }
-.fix {
-  margin-top: 1.75rem;
-  padding: 1.1rem 1.2rem;
-  background: var(--recessed);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-field);
-}
-.fix h2 {
-  margin: 0 0 0.5rem;
-  font-size: 0.8125rem;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-}
-.fix p { margin: 0 0 0.65rem; font-size: 0.875rem; }
-.fix p:last-child { margin-bottom: 0; }
-.path {
-  display: block;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--ink);
-  letter-spacing: 0.01em;
-  margin: 0 0 0.65rem;
-}
-.path .arrow { color: var(--muted); padding: 0 0.35rem; font-weight: 400; }
-.foot {
-  margin-top: 1.75rem;
-  text-align: center;
-  font-size: 0.75rem;
-  color: var(--muted);
-}
-</style>
-</head>
-<body>
-<main>
-  <div class="brand">
-    <span class="tile"><svg viewBox="0 0 15 15" fill="currentColor" aria-hidden="true">${CAIRN_GLYPH}</svg></span>
-    <span class="word">Cairn</span>
-  </div>
-
+  const inner = `
   <span class="eyebrow">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
     Secure connection required
@@ -212,9 +31,6 @@ p { margin: 0 0 1rem; color: var(--subtle); }
     <span class="path">SSL/TLS<span class="arrow">&rsaquo;</span>Edge Certificates<span class="arrow">&rsaquo;</span>Always Use HTTPS</span>
     <p>Keep HSTS on too. The browser then stays on https and sign-in works.</p>
   </div>
-
-  <p class="foot">Powered by Cairn</p>
-</main>
-</body>
-</html>`;
+`;
+  return renderStaticAdminPage({ title: 'HTTPS required · Cairn', innerHtml: inner });
 }