fix(design): the nav rail's footer rows (language, About, Sign out) share the rail row and glyph (E28)

frontend/src/components/LanguageSwitcher.tsx

@@ -4,6 +4,7 @@ import { LANGUAGES, type LangCode } from "../i18n";
 import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
 import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
 import { Pressable } from "./ui/Pressable";
+import { RAIL_GLYPH, RAIL_ROW } from "./ui/NavRail";
 import { SURFACE } from "./ui/surfaces";
 
 // Compact language picker (globe + current code). Presentational: the parent decides what
@@ -52,20 +53,23 @@ export default function LanguageSwitcher({
         layer
         className={
           rail
-            ? "relative p-2 rounded-lg text-muted hover:text-fg transition touch-target"
+            ? `${RAIL_ROW} h-9 text-muted hover:text-fg`
             : "flex h-7 items-center gap-1.5 px-2.5 rounded-lg text-sm text-muted hover:text-fg transition touch-target"
         }
       >
-        <Globe className={rail ? "w-5 h-5" : "w-4 h-4"} />
         {rail ? (
-          /* Current-language badge (HU/EN) so the active language reads at a glance without
-             opening the menu. The ring matches the page background to detach it from the icon. */
-          <span className="absolute -bottom-1 -right-1 text-[0.5rem] font-bold leading-none px-1 py-px rounded-sm bg-accent text-accent-fg ring-2 ring-bg">
-            {current.code.toUpperCase()}
+          /* A rail row (F32), with the current-language badge (HU/EN) on the glyph's corner so the
+             active language reads at a glance. The ring matches the page to detach it from the icon. */
+          <span className="relative">
+            <Globe className={RAIL_GLYPH} />
+            <span className="absolute -bottom-1.5 -right-2.5 text-[0.5rem] font-bold leading-none px-1 py-px rounded-sm bg-accent text-accent-fg ring-2 ring-bg">
+              {current.code.toUpperCase()}
+            </span>
           </span>
         ) : (
-          <span className="text-xs font-semibold uppercase">{current.code}</span>
+          <Globe className="w-4 h-4" />
         )}
+        {rail ? null : <span className="text-xs font-semibold uppercase">{current.code}</span>}
       </Pressable>
 
       <PopoverSurface popover={pop} className={`${SURFACE.menu} w-40 animate-[popIn_0.16s_ease]`}>