Complete nav rewrite: native details/summary, zero JS state, zero transforms

- Mobile nav: uses <details>/<summary> for toggle, no useState, no useEffect
- Nav dropdown: uses <details>/<summary>, no useState, no event listeners
- Desktop: separate div with desktop nav items (hidden on mobile)
- Mobile: hamburger dropdown with absolute positioned panel
- CSS: removed ::after pseudo-element with transform, replaced hover
  with background-color only, added details[open] CSS rules
- No backdrop-filter, no will-change, no transition-all, no GPU hacks
- Works on every device without JS state management

src/app/globals.css

@@ -208,25 +208,14 @@ summary,
 		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 		border-radius: 0.5rem;
 	}
-	.nav-item::after {
-		content: "";
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		width: 60%;
-		height: 3px;
-		border-radius: 3px 3px 0 0;
-		background-color: var(--color-primary);
-		transform: translateX(-50%) scaleX(0);
-		transition: transform 0.2s ease-in-out;
-	}
-	.nav-item:hover::after {
-		transform: translateX(-50%) scaleX(1);
-	}
 	.nav-item:hover {
 		color: var(--color-primary-readable, var(--color-primary));
 		background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
 	}
+	.nav-item[aria-current="page"] {
+		color: var(--color-primary-readable, var(--color-primary));
+		background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+	}
 	.dropdown-item {
 		@apply block py-2.5 px-4 text-sm font-semibold rounded-lg mx-1;
 		color: var(--color-dropdown-text-readable, var(--color-text-readable));
@@ -1076,9 +1065,6 @@ tbody tr:hover {
 		height: auto;
 		min-height: 44px;
 	}
-	.nav-item::after {
-		display: none;
-	}
 	.dropdown-item {
 		font-size: 13px;
 		padding: 0.6rem 0.85rem;
@@ -1135,3 +1121,14 @@ body:has([data-admin]) {
 	--color-input: var(--admin-border);
 	--color-ring: var(--admin-accent);
 }
+
+/* ── Details/summary open states for nav ──────────────────── */
+details[open] > summary .details-open\:hidden {
+	display: none;
+}
+details[open] > summary .details-open\:block {
+	display: block;
+}
+details[open] > summary .details-open\:rotate-180 {
+	transform: rotate(180deg);
+}

src/components/nav-dropdown.tsx

@@ -1,7 +1,5 @@
-"use client";
-
 import Image from "next/image";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode } from "react";
 
 interface NavDropdownProps {
 	label: string;
@@ -10,36 +8,10 @@ interface NavDropdownProps {
 }
 
 export function NavDropdown({ label, icon, children }: NavDropdownProps) {
-	const [open, setOpen] = useState(false);
-	const ref = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		if (!open) return;
-		const onClick = (e: MouseEvent) => {
-			if (ref.current && !ref.current.contains(e.target as Node))
-				setOpen(false);
-		};
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === "Escape") setOpen(false);
-		};
-		document.addEventListener("mousedown", onClick);
-		document.addEventListener("keydown", onKey);
-		return () => {
-			document.removeEventListener("mousedown", onClick);
-			document.removeEventListener("keydown", onKey);
-		};
-	}, [open]);
-
 	return (
-		<div ref={ref} className="relative md:flex">
-			<button
-				type="button"
-				onClick={() => setOpen((v) => !v)}
-				onKeyDown={(e) => {
-					if (e.key === "Enter" || e.key === " ") setOpen((v) => !v);
-				}}
-				className="nav-item cursor-pointer"
-				aria-expanded={open}
+		<details className="relative">
+			<summary
+				className="nav-item cursor-pointer [&::-webkit-details-marker]:hidden"
 				aria-haspopup="true"
 			>
 				{icon ? (
@@ -54,7 +26,7 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 				) : null}
 				{label}
 				<svg
-					className={`ml-auto md:ml-1 w-3 h-3 ${open ? "rotate-180" : ""}`}
+					className="ml-auto md:ml-1 w-3 h-3 details-open:rotate-180"
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"
@@ -66,16 +38,13 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 						d="M19 9l-7 7-7-7"
 					/>
 				</svg>
-			</button>
-			{open && (
-				<div
-					className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-0 md:min-w-[200px] rounded-xl z-50 py-2"
-					role="menu"
-					onClick={() => setOpen(false)}
-				>
-					{children}
-				</div>
-			)}
-		</div>
+			</summary>
+			<div
+				className="dropdown-menu md:absolute left-0 top-full mt-0.5 min-w-0 md:min-w-[200px] rounded-xl z-50 py-2"
+				role="menu"
+			>
+				{children}
+			</div>
+		</details>
 	);
 }