Place a11y button inline with theme switch, add Auto on/off toggle

- A11y toggle button now sits side-by-side with theme switch inside
  the FAB bar, separated by a divider
- A11y button height matches the theme switch
- Auto button replaced with a proper on/off toggle switch that
  clearly indicates system-follow state
- Manual theme switch turns off Auto automatically
- A11y panel floats from its inline position when opened
- Falls back to standalone toolbar when theme FAB is disabled

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/media/css/template.css

@@ -13979,7 +13979,6 @@ meter {
 }
 
 .footer {
-	padding-top: var(--footer-padding-top, 1rem);
 	color: var(--mainmenu-nav-link-color, #fff);
 	background-color: var(--nav-bg-color);
 	padding-bottom: var(--footer-padding-bottom, 80px);
@@ -13994,7 +13993,6 @@ meter {
 	-ms-flex-direction: column;
 	flex-direction: column;
 	width: 100%;
-	padding: var(--footer-grid-padding-y, 2.5rem) var(--footer-grid-padding-x, 0.5em);
 }
 
 .footer a {
@@ -17141,6 +17139,107 @@ button#mokoThemeSwitch {
 	color: var(--body-bg, #0e1318);
 }
 
+/* Auto toggle switch (on/off style) */
+.auto-toggle-wrap {
+	display: flex;
+	align-items: center;
+	gap: .35rem;
+}
+
+.auto-label {
+	font-size: .75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: .04em;
+	opacity: .7;
+	user-select: none;
+}
+
+.auto-switch {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	width: 32px;
+	height: 18px;
+	border: none;
+	border-radius: 999px;
+	background: var(--secondary-color, #6c757d);
+	cursor: pointer;
+	padding: 0;
+	transition: background .2s;
+}
+
+.auto-switch.on {
+	background: var(--link-color, #3565e5);
+}
+
+.auto-track {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.auto-knob {
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	background: #fff;
+	box-shadow: 0 1px 3px rgba(0,0,0,.3);
+	transition: transform .2s ease;
+}
+
+.auto-switch.on .auto-knob {
+	transform: translateX(14px);
+}
+
+/* FAB divider between theme controls and a11y */
+.fab-divider {
+	display: block;
+	width: 1px;
+	height: 24px;
+	background: currentColor;
+	opacity: .25;
+	margin: 0 .15rem;
+}
+
+/* Inline a11y toggle inside theme FAB */
+.a11y-toggle-inline {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	border: 1.5px solid currentColor;
+	background: transparent;
+	color: inherit;
+	font-size: 1rem;
+	cursor: pointer;
+	padding: 0;
+	transition: background .2s, color .2s;
+	opacity: .8;
+}
+
+.a11y-toggle-inline:hover,
+.a11y-toggle-inline:focus-visible {
+	opacity: 1;
+	background: rgba(255,255,255,.15);
+}
+
+.a11y-toggle-inline.active {
+	opacity: 1;
+	background: rgba(255,255,255,.25);
+}
+
+/* Floating a11y panel when inline */
+.a11y-toolbar-floating {
+	position: fixed;
+	z-index: 1202;
+}
+
 body.site.error-page {
 	margin: 0;
 	padding: 0;
@@ -17364,11 +17463,9 @@ html.a11y-pause-animations *::after {
   right: 2.5rem;
 }
 
-/* When theme FAB is present, sit a11y toolbar to its left */
+/* When theme FAB is present, a11y toggle is inline — hide standalone toolbar positioning */
 body[data-theme-fab-enabled="1"] #mokoA11yToolbar {
-  right: auto;
-  left: 2.5rem;
-  bottom: 1rem;
+  position: static;
 }
 
 /* Toggle button */