chore: complete update

resources/css/base/focus.css

@@ -0,0 +1,31 @@
+:focus-visible {
+    --outline-size: max(2px, 0.1em);
+
+    outline:
+        var(--outline-width, var(--outline-size))
+        var(--outline-style, solid)
+        var(--outline-color, currentColor);
+
+    outline-offset: var(--outline-offset, var(--outline-size));
+
+    border-radius: 0.25em;
+}
+
+:where(:not(:active):focus-visible) {
+    outline-offset: 5px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    :where(:focus-visible) {
+        transition: outline-offset .2s ease;
+    }
+    :where(:not(:active):focus-visible) {
+        transition-duration: .25s;
+    }
+}
+
+/* Scroll margin allowance below focused elements
+  to ensure they are clearly in view */
+:focus {
+    scroll-padding-block-end: 8vh;
+}