Give the tab rail its own glass bar and reserve space for it

The three tab buttons now share one frosted glass pill instead of each
floating separately, and BrowseView/RoomView reserve TAB_RAIL_CLEARANCE
of right-side padding so a full-width row or grid never renders under
it - verified against the real library, where dense rows (e.g. Conni's
82 audiobooks) previously butted right up against the rail.

Also gitignore the real (non-.example) tippen-curriculum.yml and
tippen-progress.json, matching config.yml's own privacy treatment,
since the curriculum now contains real reward paths into a personal
library.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/components/TabRail.tsx

@@ -1,9 +1,14 @@
-/** The tab rail: icon-only, vertically centered on the right edge - audio player and
+/** The tab rail: icon-only, vertically centered on the right edge, all three sharing
+ * one frosted glass bar rather than each button floating separately - audio player and
  * typing always shown, the smarthome tab only when Home Assistant is configured, same
  * gate the old single toggle button used. Replaces that button now that there are
- * three destinations instead of two. */
+ * three destinations instead of two.
+ *
+ * Its footprint (this file's own `right`/padding/button-size numbers) is mirrored in
+ * `lib/theme.ts`'s `TAB_RAIL_CLEARANCE`, which the scrollable views reserve as padding
+ * on their own right edge so a full-width row or grid never renders underneath it. */
 
-import { PAGE_ICON, PAGE_LABEL } from "../lib/theme";
+import { PAGE_ICON, PAGE_LABEL, SHOW_GLASS_BLUR } from "../lib/theme";
 import type { UiState } from "../lib/keyboard";
 
 interface Props {
@@ -22,12 +27,19 @@ export function TabRail({ page, onSelect, showRoom }: Props) {
       style={{
         position: "absolute",
         top: "50%",
-        right: 24,
+        right: 16,
         transform: "translateY(-50%)",
         zIndex: 3,
         display: "flex",
         flexDirection: "column",
-        gap: 10,
+        gap: 8,
+        padding: 8,
+        borderRadius: 999,
+        background: "oklch(97% 0.01 210 / .22)",
+        backdropFilter: SHOW_GLASS_BLUR ? "blur(14px)" : undefined,
+        WebkitBackdropFilter: SHOW_GLASS_BLUR ? "blur(14px)" : undefined,
+        border: "1px solid oklch(97% 0.01 210 / .3)",
+        boxShadow: "0 8px 24px oklch(15% 0.05 210 / .35)",
       }}
     >
       {pages.map((candidate) => {
@@ -47,13 +59,11 @@ export function TabRail({ page, onSelect, showRoom }: Props) {
               justifyContent: "center",
               border: "none",
               borderRadius: 999,
-              background: active ? "var(--accent)" : "oklch(97% 0.01 210 / .95)",
-              boxShadow: "0 6px 18px oklch(15% 0.05 210 / .4)",
+              background: active ? "var(--accent)" : "transparent",
               fontSize: 20,
               fontWeight: 900,
-              color: active ? "#fff" : "var(--ink)",
               cursor: "pointer",
-              transition: "background 0.15s ease, color 0.15s ease",
+              transition: "background 0.15s ease",
             }}
           >
             {PAGE_ICON[candidate]}