diff --git a/.changeset/stylelint-scss-cleanup.md b/.changeset/stylelint-scss-cleanup.md
new file mode 100644
index 000000000..02d172038
--- /dev/null
+++ b/.changeset/stylelint-scss-cleanup.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Added Stylelint for SCSS and cleaned up the issues it found: removed dead and duplicate rules, replaced named colors (`white`, `red`) with variables, simplified redundant `&` nesting selectors, and fixed a missing space in a `.form-switch` transition declaration.
diff --git a/.stylelintrc b/.stylelintrc
deleted file mode 100644
index 87eb443df..000000000
--- a/.stylelintrc
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-twbs-bootstrap/scss"
-  ],
-  "rules": {
-    "selector-no-qualifying-type": null
-  }
-}
\ No newline at end of file
diff --git a/core/package.json b/core/package.json
index 5b7cfe286..ea0f6a113 100644
--- a/core/package.json
+++ b/core/package.json
@@ -11,7 +11,9 @@
     "clean": "shx rm -rf dist demo",
     "css": "tsx ../.build/build-css.ts scss dist/css --rtl --minify --banner",
     "css-build": "tsx ../.build/build-css.ts scss dist/css",
-    "css-lint": "pnpm run css-lint-variables",
+    "css-lint": "pnpm run lint:scss && pnpm run css-lint-variables",
+    "lint:scss": "stylelint \"scss/**/*.scss\" --config ../stylelint.config.mjs",
+    "lint:scss:fix": "pnpm run lint:scss --fix",
     "css-lint-variables": "find-unused-sass-variables scss/",
     "js": "pnpm run js-build && pnpm run js-build-min",
     "js-build": "concurrently \"pnpm run js-build-standalone\" \"pnpm run js-build-theme\"",
@@ -284,4 +286,4 @@
   "directories": {
     "doc": "docs"
   }
-}
\ No newline at end of file
+}
diff --git a/core/scss/_settings.scss b/core/scss/_settings.scss
index 14ca34ecf..7613d835e 100644
--- a/core/scss/_settings.scss
+++ b/core/scss/_settings.scss
@@ -11,8 +11,8 @@
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
 
-$black: #000000 !default;
-$white: #ffffff !default;
+$black: #000 !default;
+$white: #fff !default;
 
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
 $min-contrast-ratio: 2 !default;
diff --git a/core/scss/_variables-marketing.scss b/core/scss/_variables-marketing.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index 427a60f57..2f7be8444 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -628,12 +628,12 @@ $extra-colors: (
 ) !default;
 
 $social-colors: (
-  'x': #000000,
+  'x': #000,
   'facebook': #1877f2,
   'twitter': #1da1f2,
   'linkedin': #0a66c2,
   'google': #dc4e41,
-  'youtube': #ff0000,
+  'youtube': #f00,
   'vimeo': #1ab7ea,
   'dribbble': #ea4c89,
   'github': #181717,
@@ -727,8 +727,8 @@ $backdrop-opacity: 0.32 !default;
 $backdrop-blur: 4px !default;
 $backdrop-bg: light-dark(var(--gray-800), var(--black)) !default;
 $backdrops: (
-  dark: color-mix(in srgb, var(--color-dark), transparent var(--backdrop-opacity)),
-  light: color-mix(in srgb, var(--color-light), transparent var(--backdrop-opacity)),
+  dark: color-mix(in sRGB, var(--color-dark), transparent var(--backdrop-opacity)),
+  light: color-mix(in sRGB, var(--color-light), transparent var(--backdrop-opacity)),
 ) !default;
 
 // Gradient
@@ -1967,16 +1967,16 @@ $form-select-font-size-lg: $input-font-size-lg !default;
 $form-select-border-radius-lg: $input-border-radius-lg !default;
 $form-select-transition: $input-transition !default;
 
-$form-switch-color: white !default;
+$form-switch-color: $white !default;
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.25rem !default;
 $form-switch-padding-start: $form-switch-width + 0.5rem !default;
 $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius: $form-switch-width !default;
 $form-switch-transition: background-position 0.15s ease-in-out !default;
-$form-switch-focus-color: white !default;
+$form-switch-focus-color: $white !default;
 $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
-$form-switch-checked-color: white !default;
+$form-switch-checked-color: $white !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 
diff --git a/core/scss/bootstrap/_carousel.scss b/core/scss/bootstrap/_carousel.scss
index a41e6bb93..5e2856c92 100644
--- a/core/scss/bootstrap/_carousel.scss
+++ b/core/scss/bootstrap/_carousel.scss
@@ -46,13 +46,13 @@
 
 .carousel-item-next:not(.carousel-item-start),
 .active.carousel-item-end {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   transform: translateX(calc(var(--dir) * 100%));
 }
 
 .carousel-item-prev:not(.carousel-item-end),
 .active.carousel-item-start {
-  /*rtl:ignore*/
+  /* rtl:ignore */
   transform: translateX(calc(var(--dir) * -100%));
 }
 
diff --git a/core/scss/bootstrap/_nav.scss b/core/scss/bootstrap/_nav.scss
index 93c8e83c6..43b576a5d 100644
--- a/core/scss/bootstrap/_nav.scss
+++ b/core/scss/bootstrap/_nav.scss
@@ -141,7 +141,7 @@
 
     &:hover,
     &:focus {
-      border-bottom-color: currentcolor;
+      border-bottom-color: currentColor;
     }
   }
 
@@ -149,7 +149,7 @@
   .show > .nav-link {
     font-weight: $font-weight-bold;
     color: var(--nav-underline-link-active-color);
-    border-bottom-color: currentcolor;
+    border-bottom-color: currentColor;
   }
 }
 
diff --git a/core/scss/bootstrap/_offcanvas.scss b/core/scss/bootstrap/_offcanvas.scss
index 6cf643edb..c7f1dc68c 100644
--- a/core/scss/bootstrap/_offcanvas.scss
+++ b/core/scss/bootstrap/_offcanvas.scss
@@ -55,7 +55,8 @@
         inset-inline-start: 0;
         width: var(--offcanvas-width);
         border-inline-end: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
-        /*rtl:ignore*/
+
+        /* rtl:ignore */
         transform: translateX(calc(var(--dir) * -100%));
       }
 
@@ -64,7 +65,8 @@
         inset-inline-end: 0;
         width: var(--offcanvas-width);
         border-inline-start: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
-        /*rtl:ignore*/
+
+        /* rtl:ignore */
         transform: translateX(calc(var(--dir) * 100%));
       }
 
diff --git a/core/scss/bootstrap/_placeholders.scss b/core/scss/bootstrap/_placeholders.scss
index 3a50c23d2..d6121b5af 100644
--- a/core/scss/bootstrap/_placeholders.scss
+++ b/core/scss/bootstrap/_placeholders.scss
@@ -5,7 +5,7 @@
   min-height: 1em;
   vertical-align: middle;
   cursor: wait;
-  background-color: currentcolor;
+  background-color: currentColor;
   opacity: $placeholder-opacity-max;
 
   &.btn::before {
diff --git a/core/scss/bootstrap/_spinners.scss b/core/scss/bootstrap/_spinners.scss
index cf30b73ea..2b273643b 100644
--- a/core/scss/bootstrap/_spinners.scss
+++ b/core/scss/bootstrap/_spinners.scss
@@ -34,7 +34,7 @@
   --spinner-animation-name: spinner-border;
   // scss-docs-end spinner-border-css-vars
 
-  border: var(--spinner-border-width) solid currentcolor;
+  border: var(--spinner-border-width) solid currentColor;
   border-right-color: transparent;
 }
 
@@ -71,7 +71,7 @@
   --spinner-animation-name: spinner-grow;
   // scss-docs-end spinner-grow-css-vars
 
-  background-color: currentcolor;
+  background-color: currentColor;
   opacity: 0;
 }
 
diff --git a/core/scss/fonts/_geist.scss b/core/scss/fonts/_geist.scss
index d2f7fa9f0..12c64062a 100644
--- a/core/scss/fonts/_geist.scss
+++ b/core/scss/fonts/_geist.scss
@@ -2,204 +2,204 @@
 @use '../config' as *;
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 200;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 300;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 400;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 500;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 600;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 700;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 800;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 900;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
   font-display: swap;
 }
 
 // Geist Sans Variable Font
 @font-face {
-  font-family: 'Geist';
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100 900;
   src:
     url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
-  font-weight: 100 900;
-  font-style: normal;
   font-display: swap;
 }
 
 // Geist Mono Font Family
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 100;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 200;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 300;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 400;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 500;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 600;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 700;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 800;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 900;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
   font-display: swap;
 }
 
 // Geist Mono Variable Font
 @font-face {
   font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 100 900;
   src:
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
     url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
-  font-weight: 100 900;
-  font-style: normal;
   font-display: swap;
 }
diff --git a/core/scss/helpers/_index.scss b/core/scss/helpers/_index.scss
index d37247da2..2e27153e1 100644
--- a/core/scss/helpers/_index.scss
+++ b/core/scss/helpers/_index.scss
@@ -24,7 +24,7 @@
   align-self: stretch;
   width: $vr-border-width;
   min-height: 1em;
-  background-color: currentcolor;
+  background-color: currentColor;
   opacity: $hr-opacity;
 }
 
@@ -34,10 +34,10 @@
 .stretched-link {
   &::after {
     position: absolute;
-    top: 0;
-    inset-inline-end: 0;
-    bottom: 0;
     inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 0;
+    bottom: 0;
     z-index: 1;
     content: '';
   }
@@ -75,17 +75,17 @@
 
 .fixed-top {
   position: fixed;
-  top: 0;
-  inset-inline-end: 0;
   inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: 0;
   z-index: $zindex-fixed;
 }
 
 .fixed-bottom {
   position: fixed;
+  inset-inline-start: 0;
   inset-inline-end: 0;
   bottom: 0;
-  inset-inline-start: 0;
   z-index: $zindex-fixed;
 }
 
@@ -123,8 +123,8 @@
 
   > * {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
+    top: 0;
     width: 100%;
     height: 100%;
   }
diff --git a/core/scss/layout/_animations.scss b/core/scss/layout/_animations.scss
index 61cc99a97..b44196216 100644
--- a/core/scss/layout/_animations.scss
+++ b/core/scss/layout/_animations.scss
@@ -61,7 +61,7 @@
 }
 
 @keyframes blink {
-  from {
+  0% {
     opacity: 0;
   }
 
@@ -69,7 +69,7 @@
     opacity: 1;
   }
 
-  to {
+  100% {
     opacity: 0;
   }
 }
@@ -94,7 +94,7 @@
     transform: scale3d(1.25, 1.25, 1.25) rotate(-5deg);
   }
 
-  to {
+  100% {
     transform: scaleX(1);
   }
 }
diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss
index 85cadc7f6..606466b89 100644
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -12,28 +12,28 @@ html {
 
 // stylelint-disable property-no-vendor-prefix
 body {
-  letter-spacing: $body-letter-spacing;
-  touch-action: manipulation;
-  text-rendering: optimizeLegibility;
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+  padding: 0;
   font-feature-settings:
     'liga' 0,
     'cv03',
     'cv04',
     'cv11';
-  position: relative;
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
+  letter-spacing: $body-letter-spacing;
+  touch-action: manipulation;
+  text-rendering: optimizeLegibility;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  @include media-print {
+  @include media-print() {
     background: transparent;
   }
 }
 
-@include scrollbar;
+@include scrollbar();
 
 //
 // Fluid container
@@ -54,20 +54,20 @@ body {
   --theme-boxed-width: #{map.get($container-max-widths, xxl)};
 
   @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
     padding: 1rem;
+    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
     --theme-boxed-border-radius: #{$border-radius};
   }
 
   .page {
-    margin: 0 auto;
     max-width: var(--theme-boxed-width);
-    @include border-radius(var(--theme-boxed-border-radius));
+    margin: 0 auto;
     color: var(--body-color);
+    @include border-radius(var(--theme-boxed-border-radius));
 
     @include media-breakpoint-up(md) {
-      border: var(--border-width) var(--border-style) var(--border-color);
       background: var(--body-bg);
+      border: var(--border-width) var(--border-style) var(--border-color);
     }
 
     > .navbar:first-child {
diff --git a/core/scss/layout/_dark.scss b/core/scss/layout/_dark.scss
index 716c4461c..3b59491a3 100644
--- a/core/scss/layout/_dark.scss
+++ b/core/scss/layout/_dark.scss
@@ -40,7 +40,7 @@
 
     .navbar-brand-autodark {
       .navbar-brand-image {
-        @include autodark-image;
+        @include autodark-image();
       }
     }
   }
diff --git a/core/scss/layout/_footer.scss b/core/scss/layout/_footer.scss
index 3178d95a9..fc652442a 100644
--- a/core/scss/layout/_footer.scss
+++ b/core/scss/layout/_footer.scss
@@ -1,13 +1,13 @@
 @use '../config' as *;
 
 .footer {
-  border-top: var(--border-width) var(--border-style) $footer-border-color;
-  background-color: $footer-bg;
   padding: $footer-padding-y 0;
-  color: $footer-color;
   margin-top: auto;
+  color: $footer-color;
+  background-color: $footer-bg;
+  border-top: var(--border-width) var(--border-style) $footer-border-color;
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index 8c8edfc79..e276831c7 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -17,8 +17,8 @@
       margin-inline-end: 0;
 
       .nav-link {
-        padding: 0.5rem calc(#{$container-padding-x} / 2);
         justify-content: start;
+        padding: 0.5rem calc(#{$container-padding-x} / 2);
       }
     }
 
@@ -27,19 +27,19 @@
     }
 
     .dropdown-menu {
-      padding: 0;
-      background: transparent;
       position: static;
-      color: inherit;
-      box-shadow: none;
-      border: none;
       min-width: 0;
+      padding: 0;
       margin: 0;
+      color: inherit;
+      background: transparent;
+      border: none;
+      box-shadow: none;
 
       .dropdown-item {
-        min-width: 0;
         display: flex;
         width: auto;
+        min-width: 0;
         padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
         color: inherit;
 
@@ -59,21 +59,24 @@
         padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem);
       }
 
+      // Third-level submenu in the mobile vertical navbar — genuinely nested two
+      // dropdown-menu levels deep.
+      // stylelint-disable-next-line selector-max-class, selector-max-compound-selectors
       .dropdown-menu .dropdown-menu .dropdown-item {
         padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
       }
     }
 
-    .dropdown-toggle:after {
+    .dropdown-toggle::after {
       margin-inline-start: auto;
     }
 
-    .nav-item.active:after {
-      border-bottom-width: 0;
-      border-inline-start-width: 3px;
+    .nav-item.active::after {
       inset-inline-end: auto;
       top: 0;
       bottom: 0;
+      border-inline-start-width: 3px;
+      border-bottom-width: 0;
     }
   }
 }
@@ -90,9 +93,9 @@ Navbar
   --navbar-hover-color: #{$navbar-hover-color};
   align-items: stretch;
   min-height: $navbar-height;
-  box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color);
-  background: var(--navbar-bg);
   color: var(--navbar-color);
+  background: var(--navbar-bg);
+  box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color);
 
   .navbar-collapse & {
     flex-grow: 1;
@@ -113,16 +116,17 @@ Navbar
 
     .nav-link {
       position: relative;
+      justify-content: center;
       min-width: 2.5rem;
       min-height: 2.5rem;
-      justify-content: center;
       @include border-radius(var(--border-radius));
 
       .badge {
         position: absolute;
-        top: 0.5rem;
         inset-inline-end: 0.5rem;
-        /*rtl:ignore*/
+        top: 0.5rem;
+
+        /* rtl:ignore */
         transform: translate(calc(var(--dir) * 50%), -50%);
       }
     }
@@ -136,13 +140,13 @@ Navbar
 
     &#{$infix} {
       @include media-breakpoint-down(breakpoint-next($breakpoint)) {
-        @include navbar-vertical-nav;
+        @include navbar-vertical-nav();
       }
 
       @include media-breakpoint-up($next) {
         .navbar-collapse {
-          width: auto;
           flex: 1 1 auto;
+          width: auto;
         }
 
         .nav-item.active {
@@ -152,12 +156,12 @@ Navbar
             color: var(--navbar-active-color);
           }
 
-          &:after {
-            content: '';
+          &::after {
             position: absolute;
             inset-inline-start: 0;
             inset-inline-end: 0;
             bottom: -0.25rem;
+            content: '';
             border: 0 var(--border-style) var(--navbar-active-border-color);
             border-bottom-width: 2px;
           }
@@ -197,57 +201,57 @@ Navbar brand
  */
 .navbar-brand {
   display: inline-flex;
-  align-items: center;
-  font-weight: $navbar-brand-font-weight;
-  margin: 0;
-  line-height: 1;
   gap: $spacer-2;
+  align-items: center;
+  margin: 0;
+  font-weight: $navbar-brand-font-weight;
+  line-height: 1;
 }
 
 .navbar-brand-image {
-  height: $navbar-brand-image-height;
   width: auto;
+  height: $navbar-brand-image-height;
 }
 
 /**
 Navbar toggler
  */
 .navbar-toggler {
-  border: 0;
-  width: $navbar-brand-image-height;
-  height: $navbar-brand-image-height;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: $navbar-brand-image-height;
+  height: $navbar-brand-image-height;
+  border: 0;
 }
 
 .navbar-toggler-icon {
-  height: 2px;
+  position: relative;
   width: 1.25em;
+  height: 2px;
   background: currentColor;
   @include border-radius(var(--border-radius-pill));
-  position: relative;
   @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
 
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    height: inherit;
-    width: inherit;
-    border-radius: inherit;
-    background: inherit;
+  &::before,
+  &::after {
     position: absolute;
     inset-inline-start: 0;
+    display: block;
+    width: inherit;
+    height: inherit;
+    content: '';
+    background: inherit;
+    border-radius: inherit;
     @include transition(inherit);
   }
 
-  &:before {
+  &::before {
     top: -0.45em;
   }
 
-  &:after {
+  &::after {
     bottom: -0.45em;
   }
 
@@ -255,12 +259,12 @@ Navbar toggler
     transform: rotate(45deg);
     @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
 
-    &:before {
+    &::before {
       top: 0;
       transform: rotate(-90deg);
     }
 
-    &:after {
+    &::after {
       bottom: 0;
       opacity: 0;
     }
@@ -282,9 +286,9 @@ Navbar nav
   --nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
   --nav-link-icon-color: #{$nav-link-icon-color};
   --nav-link-hover-icon-color: #{$nav-link-hover-icon-color};
-  margin: 0;
-  padding: 0;
   align-items: stretch;
+  padding: 0;
+  margin: 0;
 
   .nav-item {
     display: flex;
@@ -297,11 +301,11 @@ Navbar nav
 Navbar side
  */
 .navbar-side {
-  margin: 0;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
+  margin: 0;
 }
 
 /**
@@ -316,15 +320,15 @@ Navbar vertical
 
         &#{$infix} {
           @include media-breakpoint-up($next) {
-            width: $sidebar-width;
             position: fixed;
-            top: 0;
             inset-inline-start: 0;
+            top: 0;
             bottom: 0;
             z-index: $zindex-fixed;
             align-items: start;
-            overflow-y: scroll;
+            width: $sidebar-width;
             padding: 0;
+            overflow-y: scroll;
             @include transition(transform $transition-time);
 
             &.navbar-right,
@@ -334,8 +338,8 @@ Navbar vertical
             }
 
             .navbar-brand {
-              padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
               justify-content: center;
+              padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
             }
 
             .navbar-collapse {
@@ -343,8 +347,8 @@ Navbar vertical
             }
 
             .navbar-nav {
-              flex-direction: column;
               flex-grow: 1;
+              flex-direction: column;
               min-height: auto;
 
               .nav-link {
@@ -356,8 +360,8 @@ Navbar vertical
             > [class^='container'] {
               flex-direction: column;
               align-items: stretch;
-              min-height: 100%;
               justify-content: start;
+              min-height: 100%;
               padding: 0;
             }
 
@@ -376,7 +380,7 @@ Navbar vertical
               padding-inline-end: $sidebar-width;
             }
 
-            @include navbar-vertical-nav;
+            @include navbar-vertical-nav();
           }
         }
       }
@@ -385,15 +389,15 @@ Navbar vertical
 }
 
 .navbar-overlap {
-  &:after {
-    content: '';
-    height: $navbar-overlap-height;
+  &::after {
     position: absolute;
-    top: 100%;
     inset-inline-start: 0;
     inset-inline-end: 0;
-    background: inherit;
+    top: 100%;
     z-index: -1;
+    height: $navbar-overlap-height;
+    content: '';
+    background: inherit;
     box-shadow: inherit;
   }
 }
diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss
index c7d3db5fe..dec8ff838 100644
--- a/core/scss/layout/_page.scss
+++ b/core/scss/layout/_page.scss
@@ -3,13 +3,13 @@
 // Skip-to-content link: hidden via .visually-hidden-focusable until keyboard focus reveals it
 .skip-link {
   position: fixed;
-  top: 0;
   inset-inline-start: 0;
+  top: 0;
   z-index: $zindex-tooltip;
   padding: 0.5rem 1rem;
-  background: var(--primary);
   color: var(--primary-fg, #fff);
   text-decoration: none;
+  background: var(--primary);
 
   &:focus-visible {
     outline: 2px solid var(--primary);
@@ -18,9 +18,9 @@
 }
 
 .page {
+  position: relative;
   display: flex;
   flex-direction: column;
-  position: relative;
   min-height: 100%;
 }
 
@@ -29,11 +29,11 @@
 }
 
 .page-wrapper {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
 
-  @include media-print {
+  @include media-print() {
     margin: 0 !important;
   }
 }
@@ -47,59 +47,46 @@
 
 // Content body
 .page-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
   margin-top: var(--page-padding-y);
   margin-bottom: var(--page-padding-y);
-  display: flex;
-  flex-direction: column;
-  flex: 1;
 }
 
 .page-body-card {
-  background: var(--bg-surface);
-  border-top: var(--border-width) var(--border-style) $card-border-color;
+  flex: 1;
   padding: var(--page-padding) 0;
   margin-bottom: 0;
-  flex: 1;
+  background: var(--bg-surface);
+  border-top: var(--border-width) var(--border-style) $card-border-color;
 
   .page-body ~ & {
     margin-top: 0;
   }
 }
 
-.page-cover {
-  background: no-repeat center/cover;
-  min-height: 9rem;
-
-  @include media-breakpoint-up(md) {
-    min-height: 12rem;
-  }
-
-  @include media-breakpoint-up(lg) {
-    min-height: 15rem;
-  }
-}
-
 .page-cover-overlay {
   position: relative;
 
-  &:after {
-    content: '';
+  &::after {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
     inset-inline-end: 0;
+    top: 0;
     bottom: 0;
+    content: '';
     background-image: $overlay-gradient;
   }
 }
 
 .page-header {
   display: flex;
-  flex-wrap: wrap;
-  min-height: 2.25rem;
   flex-direction: column;
+  flex-wrap: wrap;
   justify-content: center;
   max-width: 100%;
+  min-height: 2.25rem;
 
   .page-wrapper & {
     margin: var(--page-padding-y) 0 0;
@@ -107,24 +94,24 @@
 }
 
 .page-header-border {
-  border-bottom: var(--border-width) var(--border-style) var(--border-color);
   padding: var(--page-padding-y) 0;
   margin: 0 !important;
   background-color: var(--bg-surface);
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
 }
 
 .page-pretitle {
-  @include subheader;
+  @include subheader();
 }
 
 .page-title {
-  margin: 0;
-  font-size: $page-title-font-size;
-  line-height: $page-title-line-height;
-  font-weight: $page-title-font-weight;
-  color: inherit;
   display: flex;
   align-items: center;
+  margin: 0;
+  font-size: $page-title-font-size;
+  font-weight: $page-title-font-weight;
+  line-height: $page-title-line-height;
+  color: inherit;
 
   svg {
     width: 1.5rem;
@@ -149,32 +136,41 @@
 .page-cover {
   --page-cover-blur: 20px;
   --page-cover-padding: 1rem;
+  position: relative;
   min-height: 6rem;
   padding: var(--page-cover-padding) 0;
-  position: relative;
   overflow: hidden;
+  background: no-repeat center/cover;
+
+  @include media-breakpoint-up(md) {
+    min-height: 12rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    min-height: 15rem;
+  }
 }
 
 .page-cover-img {
   position: absolute;
-  top: calc(-2 * var(--page-cover-blur, 0));
   inset-inline-start: calc(-2 * var(--page-cover-blur, 0));
   inset-inline-end: calc(-2 * var(--page-cover-blur, 0));
+  top: calc(-2 * var(--page-cover-blur, 0));
   bottom: calc(-2 * var(--page-cover-blur, 0));
-  pointer-events: none;
-  filter: blur(var(--page-cover-blur));
-  object-fit: cover;
-  background-size: cover;
-  background-position: center;
   z-index: -1;
+  pointer-events: none;
+  object-fit: cover;
+  filter: blur(var(--page-cover-blur));
+  background-position: center;
+  background-size: cover;
 }
 
 //
 // Page tabs
 //
 .page-tabs {
-  margin-top: 0.5rem;
   position: relative;
+  margin-top: 0.5rem;
 }
 
 .page-header-tabs {
diff --git a/core/scss/marketing/_browser.scss b/core/scss/marketing/_browser.scss
index 1770c6d53..124d71e45 100644
--- a/core/scss/marketing/_browser.scss
+++ b/core/scss/marketing/_browser.scss
@@ -5,9 +5,9 @@
 
 .browser {
   @include border-radius(var(--border-radius-lg));
-  box-shadow: 0 0 0 1px var(--border-color);
-  background: var(--bg-surface-secondary);
   overflow: hidden;
+  background: var(--bg-surface-secondary);
+  box-shadow: 0 0 0 1px var(--border-color);
 }
 
 .browser-header {
@@ -18,8 +18,8 @@
 }
 
 .browser-dots {
-  margin-inline-end: 3rem;
   display: flex;
+  margin-inline-end: 3rem;
 }
 
 .browser-dots-colored {
@@ -39,31 +39,31 @@
 }
 
 .browser-dot {
-  margin-inline-end: 0.5rem;
   width: 0.75rem;
   min-width: 0.75rem;
   height: 0.75rem;
+  margin-inline-end: 0.5rem;
   background: var(--border-color);
-  @include border-radius(var(--border-radius-circle));
   border: 1px solid var(--border-color-dark);
+  @include border-radius(var(--border-radius-circle));
 }
 
 .browser-input {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
-  text-decoration: none;
   padding: 0.25rem;
-  color: var(--secondary);
   font-size: var(--font-size-h5);
-  @include border-radius(var(--border-radius));
   line-height: 1;
+  color: var(--secondary);
+  text-decoration: none;
   cursor: pointer;
+  background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-secondary));
   box-shadow:
     0 0 0 1px rgba(0, 0, 0, 0.05),
     0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-secondary));
+  @include border-radius(var(--border-radius));
 
   &:hover {
     text-decoration: none;
diff --git a/core/scss/marketing/_hero.scss b/core/scss/marketing/_hero.scss
index 80ea12e28..b32b3c2b0 100644
--- a/core/scss/marketing/_hero.scss
+++ b/core/scss/marketing/_hero.scss
@@ -4,15 +4,15 @@
 @use '../config' as *;
 
 .hero {
-  text-align: center;
   padding: 6.5rem 0;
+  text-align: center;
 }
 
 .hero-title {
   font-size: 3rem;
   font-weight: var(--font-weight-black);
-  letter-spacing: $spacing-tight;
   line-height: $headings-line-height;
+  letter-spacing: $spacing-tight;
 
   @include media-breakpoint-down(md) {
     font-size: 2rem;
@@ -20,11 +20,11 @@
 }
 
 .hero-description {
-  color: var(--secondary);
+  max-width: 45rem;
+  margin: 0 auto;
   font-size: var(--font-size-h2);
   line-height: 1.5;
-  margin: 0 auto;
-  max-width: 45rem;
+  color: var(--secondary);
 
   @include media-breakpoint-down(sm) {
     font-size: var(--font-size-h3);
@@ -39,25 +39,25 @@
 // Hero subheader
 //
 .hero-subheader {
-  @include subheader;
+  @include subheader();
   margin-bottom: 0.5rem;
 }
 
 .hero-img {
-  margin: 4rem auto;
-  max-width: 65rem;
-  @include border-radius($border-radius-lg);
   position: relative;
   z-index: 1;
+  max-width: 65rem;
+  margin: 4rem auto;
+  @include border-radius($border-radius-lg);
   //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
   //  0 4px 6px -2px rgba($color-text, 0.05);
 
   img,
   svg {
+    position: relative;
+    display: block;
     max-width: 100%;
     height: auto;
-    display: block;
-    position: relative;
   }
 }
 //
diff --git a/core/scss/marketing/_pricing.scss b/core/scss/marketing/_pricing.scss
index cd674861f..80259cef6 100644
--- a/core/scss/marketing/_pricing.scss
+++ b/core/scss/marketing/_pricing.scss
@@ -5,8 +5,8 @@ $pricing-card-width: 22rem;
 .pricing {
   display: flex;
   flex-direction: column;
-  margin: 0 auto;
   justify-content: center;
+  margin: 0 auto;
 
   @include media-breakpoint-up(md) {
     flex-direction: row;
@@ -14,21 +14,21 @@ $pricing-card-width: 22rem;
 }
 
 .pricing-card {
-  flex: 1;
+  position: relative;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  background: var(--bg-surface);
-  border: 1px solid $border-color;
   padding: 2rem;
   margin: 0 0 1rem;
-  position: relative;
-  box-shadow: var(--shadow-card);
   text-align: center;
+  background: var(--bg-surface);
+  border: 1px solid $border-color;
+  box-shadow: var(--shadow-card);
   @include border-radius($border-radius-lg);
 
   @include media-breakpoint-up(md) {
-    margin: 1rem -1px;
     max-width: $pricing-card-width;
+    margin: 1rem -1px;
 
     &:first-child {
       @include border-radius($border-radius-lg 0 0 $border-radius-lg);
@@ -41,8 +41,8 @@ $pricing-card-width: 22rem;
 
   &.featured {
     z-index: 1;
-    border: 2px solid var(--primary);
     order: -1;
+    border: 2px solid var(--primary);
 
     @include media-breakpoint-up(md) {
       order: unset;
@@ -61,51 +61,51 @@ $pricing-card-width: 22rem;
 
 .pricing-label {
   position: absolute;
-  top: 0;
   inset-inline-start: 0;
-  transform: translateY(-50%);
-  vertical-align: bottom;
   inset-inline-end: 0;
+  top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  vertical-align: bottom;
+  transform: translateY(-50%);
 }
 
 .pricing-btn {
-  margin-top: auto;
   padding-top: 2rem;
+  margin-top: auto;
 }
 
 .pricing-price {
   display: flex;
   justify-content: center;
-  font-size: 2.5rem;
-  line-height: 1;
-  font-weight: $font-weight-semibold;
   margin: 0.75rem 0;
+  font-size: 2.5rem;
+  font-weight: $font-weight-semibold;
+  line-height: 1;
 }
 
 .pricing-price-currency {
-  font-size: $h2-font-size;
-  line-height: 1.5;
   margin-inline-end: 0.25rem;
+  font-size: $h2-font-size;
   font-weight: $font-weight-semibold;
+  line-height: 1.5;
 }
 
 .pricing-price-description {
-  font-size: $h4-font-size;
-  line-height: $h4-line-height;
-  font-weight: $font-weight-normal;
-  color: $text-secondary;
   align-self: center;
   margin-inline-start: 0.5rem;
+  font-size: $h4-font-size;
+  font-weight: $font-weight-normal;
+  line-height: $h4-line-height;
+  color: $text-secondary;
 }
 
 .pricing-features {
-  margin: 1rem 0 0;
   padding: 0;
-  list-style: none;
+  margin: 1rem 0 0;
   text-align: start;
+  list-style: none;
 
   > li:not(:first-child) {
     margin-top: 0.25rem;
diff --git a/core/scss/marketing/_sections.scss b/core/scss/marketing/_sections.scss
index f337676a0..21103556f 100644
--- a/core/scss/marketing/_sections.scss
+++ b/core/scss/marketing/_sections.scss
@@ -35,9 +35,9 @@
 //
 .section {
   --section-bg: transparent;
-  background: var(--section-bg);
   position: relative;
   padding: 5rem 0;
+  background: var(--section-bg);
 }
 
 .section-sm {
@@ -63,9 +63,9 @@
 }
 
 .section-header {
-  text-align: center;
   max-width: 45rem;
   margin: 0 auto 5rem;
+  text-align: center;
 
   @at-root .section-sm & {
     margin-bottom: 4rem;
@@ -83,10 +83,10 @@
 }
 
 .section-description {
-  color: var(--secondary);
+  margin-top: 1rem;
   font-size: var(--font-size-h3);
   line-height: var(--line-height-h3);
-  margin-top: 1rem;
+  color: var(--secondary);
 }
 
 //
@@ -95,9 +95,9 @@
 .section-divider {
   position: absolute;
   bottom: 100%;
-  pointer-events: none;
-  height: 5rem;
   width: 100%;
+  height: 5rem;
+  pointer-events: none;
 
   path {
     fill: var(--section-bg);
@@ -109,14 +109,14 @@
   }
 
   .wave-2 {
-    animation: move-forever2 24s linear infinite;
     opacity: 0.5;
+    animation: move-forever2 24s linear infinite;
     animation-delay: -2s;
   }
 
   .wave-3 {
-    animation: move-forever3 18s linear infinite;
     opacity: 0.3;
+    animation: move-forever3 18s linear infinite;
     animation-delay: -2s;
   }
 }
diff --git a/core/scss/marketing/_shape.scss b/core/scss/marketing/_shape.scss
index 452b243b6..b09854eff 100644
--- a/core/scss/marketing/_shape.scss
+++ b/core/scss/marketing/_shape.scss
@@ -6,14 +6,14 @@
   --shape-size: #{$avatar-size};
   --shape-icon-size: #{$avatar-icon-size};
   --shape-border-radius: 35%;
-  background-color: var(--primary-lt);
-  color: var(--primary);
-  @include border-radius(var(--shape-border-radius));
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: var(--shape-size);
   width: var(--shape-size);
+  height: var(--shape-size);
+  color: var(--primary);
+  background-color: var(--primary-lt);
+  @include border-radius(var(--shape-border-radius));
 
   .icon {
     width: var(--shape-icon-size);
@@ -30,7 +30,7 @@
 
 @each $name, $color in $colors {
   .shape-#{$name} {
-    background: var(--#{$name}-lt);
     color: var(--#{$name});
+    background: var(--#{$name}-lt);
   }
 }
diff --git a/core/scss/mixins/bootstrap/_caret.scss b/core/scss/mixins/bootstrap/_caret.scss
index 175c016b0..7fd6c4df2 100644
--- a/core/scss/mixins/bootstrap/_caret.scss
+++ b/core/scss/mixins/bootstrap/_caret.scss
@@ -65,7 +65,7 @@
   }
 
   @if $direction == 'left' {
-    &:after {
+    &::after {
       content: none;
     }
   }
diff --git a/core/scss/tests/_caret.test.scss b/core/scss/tests/_caret.test.scss
index cf20fbae5..2fcca4d7f 100644
--- a/core/scss/tests/_caret.test.scss
+++ b/core/scss/tests/_caret.test.scss
@@ -106,7 +106,7 @@
           margin-inline-end: 0.306em;
           transform: rotate(45deg);
         }
-        .t:after {
+        .t::after {
           content: none;
         }
       }
diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss
index be662a644..4bd1774c4 100644
--- a/core/scss/ui/_accordion.scss
+++ b/core/scss/ui/_accordion.scss
@@ -27,37 +27,37 @@
 .accordion-button {
   position: relative;
   display: flex;
+  gap: var(--accordion-btn-gap);
   align-items: center;
   width: 100%;
   padding: var(--accordion-btn-padding-y) var(--accordion-padding-x);
+  font-size: inherit;
+  font-weight: var(--accordion-btn-font-weight);
   color: inherit;
   text-align: inherit;
   background-color: transparent;
   border: 0;
-  font-size: inherit;
-  font-weight: var(--accordion-btn-font-weight);
-  gap: var(--accordion-btn-gap);
 
   &:not(.collapsed) {
+    color: var(--accordion-active-color);
     border-bottom-color: transparent;
     box-shadow: none;
-    color: var(--accordion-active-color);
   }
 }
 
 .accordion-header {
-  margin: 0;
   position: relative;
   display: flex;
   gap: var(--accordion-header-gap);
   align-items: center;
   width: 100%;
+  margin: 0;
   color: var(--accordion-btn-color);
   text-align: start;
   background-color: transparent;
   border: 0;
-  overflow-anchor: none;
   transition: transform $transition-time;
+  overflow-anchor: none;
 
   &:hover {
     z-index: 2;
@@ -81,17 +81,17 @@
 
 .accordion-button-toggle {
   display: flex;
-  line-height: 1;
-  transition: $transition-time transform;
-  margin-inline-start: auto;
-  margin-inline-end: 0;
-  color: var(--secondary);
   width: var(--accordion-btn-toggle-width);
   height: var(--accordion-btn-toggle-width);
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+  line-height: 1;
+  color: var(--secondary);
+  transition: $transition-time transform;
 
   .accordion-button:not(.collapsed) & {
-    transform: rotate(-180deg);
     color: var(--accordion-active-color);
+    transform: rotate(-180deg);
   }
 
   path {
@@ -139,14 +139,14 @@
 }
 
 .accordion-body {
-  color: var(--secondary);
   padding: 0 var(--accordion-body-padding-x) var(--accordion-body-padding-y);
+  color: var(--secondary);
 }
 
 .accordion-flush {
   > .accordion-item {
-    border-inline-end: 0;
     border-inline-start: 0;
+    border-inline-end: 0;
     @include border-radius(0);
 
     &:first-child {
@@ -157,8 +157,7 @@
     }
 
     > .accordion-collapse,
-    > .accordion-header .accordion-button,
-    > .accordion-header .accordion-button.collapsed {
+    > .accordion-header .accordion-button {
       @include border-radius(0);
     }
   }
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index 81a9e1969..ab341f11b 100644
--- a/core/scss/ui/_alerts.scss
+++ b/core/scss/ui/_alerts.scss
@@ -8,7 +8,6 @@
   --alert-padding-y: #{$alert-padding-y};
   --alert-margin-bottom: #{$alert-margin-bottom};
   --alert-border-color: #{color-transparent(var(--alert-variant-color), 0.2, var(--bg-surface))};
-  --alert-border-color: var(--border-color);
   --alert-border: var(--border-width) solid var(--alert-border-color);
   --alert-border-radius: var(--border-radius);
   --alert-link-color: inherit;
@@ -19,22 +18,22 @@
   --alert-gap: #{$alert-gap};
 
   position: relative;
-  padding: var(--alert-padding-y) var(--alert-padding-x);
-  margin-bottom: var(--alert-margin-bottom);
-  background-color: color-mix(in srgb, var(--alert-bg), var(--bg-surface));
-  @include border-radius(var(--alert-border-radius));
-  border: var(--border-width) var(--border-style) var(--alert-border-color);
-  box-shadow: var(--box-shadow);
-  color: var(--alert-color);
   display: flex;
   flex-direction: row;
   gap: var(--alert-gap);
+  padding: var(--alert-padding-y) var(--alert-padding-x);
+  margin-bottom: var(--alert-margin-bottom);
+  color: var(--alert-color);
+  background-color: color-mix(in sRGB, var(--alert-bg), var(--bg-surface));
+  border: var(--border-width) var(--border-style) var(--alert-border-color);
+  box-shadow: var(--box-shadow);
+  @include border-radius(var(--alert-border-radius));
 }
 
 .alert-heading {
-  color: inherit;
   margin-bottom: var(--alert-heading-margin-bottom);
   font-weight: var(--alert-heading-font-weight);
+  color: inherit;
 }
 
 .alert-description {
@@ -42,9 +41,9 @@
 }
 
 .alert-icon {
-  color: var(--alert-color);
   width: var(--alert-icon-size) !important;
   height: var(--alert-icon-size) !important;
+  color: var(--alert-color);
 }
 
 .alert-action {
@@ -75,16 +74,16 @@
 
   .btn-close {
     position: absolute;
-    top: calc(var(--alert-padding-x) / 2 - 1px);
     inset-inline-end: calc(var(--alert-padding-y) / 2 - 1px);
+    top: calc(var(--alert-padding-x) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--alert-padding-y) * 1.25) var(--alert-padding-x);
   }
 }
 
 .alert-important {
-  background-color: var(--alert-variant-color);
   color: var(--white);
+  background-color: var(--alert-variant-color);
 
   .alert-description {
     color: inherit;
diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss
index 536a6916a..b122fddc7 100644
--- a/core/scss/ui/_avatars.scss
+++ b/core/scss/ui/_avatars.scss
@@ -13,26 +13,26 @@
   --avatar-brand-size: #{$avatar-brand-size};
   --avatar-border-radius: #{$avatar-border-radius};
   position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: var(--avatar-size);
   height: var(--avatar-size);
   font-size: var(--avatar-font-size);
   font-weight: var(--font-weight-medium);
   line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   color: var(--secondary);
   text-align: center;
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
   background: var(--avatar-bg) no-repeat center/cover;
-  @include border-radius(var(--avatar-border-radius));
   box-shadow: var(--avatar-box-shadow);
   transition:
     color $transition-time,
     background-color $transition-time,
     box-shadow $transition-time;
+  @include border-radius(var(--avatar-border-radius));
 
   .icon {
     width: var(--avatar-icon-size);
@@ -89,7 +89,7 @@
 //
 .avatar-list {
   --avatar-list-size: #{$avatar-size};
-  @include elements-list;
+  @include elements-list();
 
   a.avatar {
     &:hover {
@@ -125,11 +125,11 @@
 .avatar-upload {
   --avatar-upload-icon-size: #{$avatar-upload-icon-size};
   --avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top};
+  flex-direction: column;
+  background: $form-check-input-bg;
 
   border: var(--border-width) dashed var(--border-color);
-  background: $form-check-input-bg;
   box-shadow: none;
-  flex-direction: column;
   @include transition(color $transition-time, background-color $transition-time);
 
   svg {
@@ -139,16 +139,16 @@
   }
 
   &:hover {
-    border-color: var(--primary);
     color: var(--primary);
     text-decoration: none;
+    border-color: var(--primary);
   }
 }
 
 .avatar-upload-text {
+  margin-top: var(--avatar-upload-text-margin-top);
   font-size: $h6-font-size;
   line-height: 1;
-  margin-top: var(--avatar-upload-text-margin-top);
 }
 
 .avatar-cover {
@@ -160,13 +160,13 @@
 
 .avatar-brand {
   --avatar-brand-offset: #{$avatar-brand-offset};
-  width: var(--avatar-brand-size);
-  height: var(--avatar-brand-size);
   position: absolute;
   inset-inline-end: var(--avatar-brand-offset);
   bottom: var(--avatar-brand-offset);
   z-index: 1000;
+  width: var(--avatar-brand-size);
+  height: var(--avatar-brand-size);
   background: var(--bg-surface);
-  @include border-radius(var(--border-radius));
   border: 1px solid var(--border-color);
+  @include border-radius(var(--border-radius));
 }
diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss
index da4b20a68..32f61d168 100644
--- a/core/scss/ui/_badges.scss
+++ b/core/scss/ui/_badges.scss
@@ -11,24 +11,24 @@
   --badge-line-height: 1;
   --badge-gap: #{$badge-gap};
   display: inline-flex;
+  gap: var(--badge-gap);
+  align-items: center;
+  justify-content: center;
+  min-width: calc(1em + var(--badge-padding-y) * 2 + 2px);
   padding: var(--badge-padding-y) var(--badge-padding-x);
-  font-weight: var(--badge-font-weight);
+  overflow: hidden;
   font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  line-height: var(--badge-line-height);
   color: var(--badge-color);
   text-align: center;
+  letter-spacing: 0.04em;
   white-space: nowrap;
-  justify-content: center;
-  align-items: center;
-  gap: var(--badge-gap);
-  background: $badge-bg-color;
-  overflow: hidden;
+  vertical-align: bottom;
   user-select: none;
+  background: $badge-bg-color;
   border: var(--border-width) var(--border-style) transparent;
   @include border-radius(var(--badge-border-radius));
-  min-width: calc(1em + var(--badge-padding-y) * 2 + 2px);
-  letter-spacing: 0.04em;
-  vertical-align: bottom;
-  line-height: var(--badge-line-height);
 
   @at-root a#{&} {
     background: var(--bg-surface-secondary);
@@ -46,12 +46,12 @@
 .badge-dot {
   display: inline-block;
   width: $badge-empty-size;
-  height: $badge-empty-size;
   min-width: 0;
+  height: $badge-empty-size;
   min-height: auto;
   padding: 0;
-  @include border-radius(var(--border-radius-pill));
   vertical-align: baseline;
+  @include border-radius(var(--border-radius-pill));
 }
 
 //
@@ -73,7 +73,7 @@
 // Badges list
 //
 .badges-list {
-  @include elements-list;
+  @include elements-list();
 }
 
 //
@@ -81,11 +81,12 @@
 //
 .badge-notification {
   position: absolute !important;
-  top: 0 !important;
   inset-inline-end: 0 !important;
-  /*rtl:ignore*/
-  transform: translate(calc(var(--dir) * 50%), -50%);
+  top: 0 !important;
   z-index: 1;
+
+  /* rtl:ignore */
+  transform: translate(calc(var(--dir) * 50%), -50%);
 }
 
 .badge-blink {
diff --git a/core/scss/ui/_breadcrumbs.scss b/core/scss/ui/_breadcrumbs.scss
index 1581728f2..3a1a96fe6 100644
--- a/core/scss/ui/_breadcrumbs.scss
+++ b/core/scss/ui/_breadcrumbs.scss
@@ -18,13 +18,13 @@
 
   display: flex;
   flex-wrap: wrap;
-  @include font-size(var(--breadcrumb-font-size));
-  list-style: none;
-  background-color: var(--breadcrumb-bg);
-  @include border-radius(var(--breadcrumb-border-radius));
   padding: 0;
   margin: 0;
+  list-style: none;
   background: transparent;
+  background-color: var(--breadcrumb-bg);
+  @include font-size(var(--breadcrumb-font-size));
+  @include border-radius(var(--breadcrumb-border-radius));
 
   a {
     color: var(--breadcrumb-link-color);
@@ -41,8 +41,8 @@
 
 .breadcrumb-item {
   &.active {
-    color: var(--breadcrumb-item-active-color);
     font-weight: var(--breadcrumb-item-active-font-weight);
+    color: var(--breadcrumb-item-active-color);
 
     a {
       color: inherit;
@@ -53,7 +53,7 @@
   &.disabled {
     color: var(--breadcrumb-item-disabled-color);
 
-    &:before {
+    &::before {
       color: inherit;
     }
 
@@ -71,7 +71,8 @@
       padding-inline-end: var(--breadcrumb-item-padding-x);
       color: var(--breadcrumb-divider-color);
       content: var(--breadcrumb-divider, escape-svg($breadcrumb-divider));
-      /*rtl:raw:
+
+      /* rtl:raw:
       transform: scaleX(-1);
       */
     }
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 3246b92c7..2310abf20 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -17,26 +17,26 @@
   --btn-active-color: #{$active-color};
   --btn-active-bg: #{$active-bg};
   --btn-active-border-color: #{$active-border-color};
+  position: relative;
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  box-shadow: var(--btn-box-shadow);
-  position: relative;
   min-width: calc((var(--btn-line-height) * 1) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
   min-height: calc((var(--btn-line-height) * 1) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
+  white-space: nowrap;
+  box-shadow: var(--btn-box-shadow);
 
   @include border-radius(var(--btn-border-radius));
 
   .icon {
     width: var(--btn-icon-size);
-    height: var(--btn-icon-size);
     min-width: var(--btn-icon-size);
-    font-size: var(--btn-icon-size);
+    height: var(--btn-icon-size);
     margin: 0 calc(var(--btn-padding-x) / 2) 0 calc(var(--btn-padding-x) / -4);
-    vertical-align: bottom;
+    font-size: var(--btn-icon-size);
     color: var(--btn-icon-color);
+    vertical-align: bottom;
   }
 
   .avatar {
@@ -175,8 +175,8 @@
 // Button shapes
 //
 .btn-pill {
-  padding-inline-end: 1.5em;
   padding-inline-start: 1.5em;
+  padding-inline-end: 1.5em;
   @include border-radius(var(--border-radius-pill));
 
   &[class*='btn-icon'] {
@@ -195,23 +195,22 @@
 //
 .btn-icon,
 .btn-action {
+  //[BUG] btn-sm and btn-xl with an icon looks broken
+  //issue #2470 fixed
+  min-width: calc(var(--btn-line-height) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
   padding-inline-start: 0;
   padding-inline-end: 0;
 
   .icon {
     margin: calc(-1 * var(--btn-padding-x));
   }
-
-  //[BUG] btn-sm and btn-xl with an icon looks broken
-  //issue #2470 fixed
-  min-width: calc(var(--btn-line-height) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
 }
 
 //
 // Button list
 //
 .btn-list {
-  @include elements-list;
+  @include elements-list();
 }
 
 .btn-list-center {
@@ -224,12 +223,12 @@
 .btn-floating {
   --btn-floating-offset: #{$btn-floating-offset};
   position: fixed;
-  z-index: $zindex-fixed;
-  bottom: var(--btn-floating-offset);
   inset-inline-start: var(--btn-floating-offset);
+  bottom: var(--btn-floating-offset);
+  z-index: $zindex-fixed;
   box-shadow: var(--shadow-dropdown);
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
@@ -247,20 +246,20 @@
     opacity: 0;
   }
 
-  &:after {
-    content: '';
-    display: inline-block;
-    vertical-align: text-bottom;
-    border: $spinner-border-width var(--border-style) currentColor;
-    border-inline-end-color: transparent;
-    @include border-radius(var(--border-radius-pill));
-    color: var(--btn-color);
+  &::after {
     position: absolute;
-    width: var(--btn-icon-size);
-    height: var(--btn-icon-size);
     inset-inline-start: calc(50% - var(--btn-icon-size) / 2);
     top: calc(50% - var(--btn-icon-size) / 2);
+    display: inline-block;
+    width: var(--btn-icon-size);
+    height: var(--btn-icon-size);
+    color: var(--btn-color);
+    vertical-align: text-bottom;
+    content: '';
+    border: $spinner-border-width var(--border-style) currentColor;
+    border-inline-end-color: transparent;
     animation: spinner-border 0.75s linear infinite;
+    @include border-radius(var(--border-radius-pill));
   }
 }
 
@@ -274,7 +273,7 @@
   background: transparent;
   box-shadow: none;
 
-  &:after {
+  &::after {
     content: none;
   }
 
@@ -300,7 +299,7 @@
     color: var(--primary);
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
@@ -308,7 +307,7 @@
 .btn-actions {
   display: flex;
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
@@ -321,7 +320,7 @@
   &:hover,
   &:focus-visible {
     .icon {
-      /*rtl:ignore*/
+      /* rtl:ignore */
       transform: translateX(calc(var(--dir) * 4px));
     }
   }
@@ -339,7 +338,7 @@
     &:hover,
     &:focus-visible {
       .icon {
-        /*rtl:ignore*/
+        /* rtl:ignore */
         transform: translateX(calc(var(--dir) * -4px));
       }
     }
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index f8c507b6f..c67c53d38 100644
--- a/core/scss/ui/_calendars.scss
+++ b/core/scss/ui/_calendars.scss
@@ -84,11 +84,11 @@
 .calendar-range {
   position: relative;
 
-  &:before {
+  &::before {
     position: absolute;
-    top: 50%;
-    inset-inline-end: 0;
     inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 50%;
     height: var(--calendar-date-size);
     content: '';
     background: color-transparent(var(--primary), 0.1);
@@ -104,11 +104,11 @@
     }
   }
 
-  &.range-start:before {
+  &.range-start::before {
     inset-inline-start: 50%;
   }
 
-  &.range-end:before {
+  &.range-end::before {
     inset-inline-end: 50%;
   }
 }
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index aaae22d24..d746cb813 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -21,7 +21,7 @@
 .card {
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
-  @include media-print {
+  @include media-print() {
     border: none;
     box-shadow: none;
   }
@@ -65,15 +65,15 @@
 .card-stamp {
   --stamp-size: #{$card-stamp-size};
   position: absolute;
-  top: 0;
   inset-inline-end: 0;
+  top: 0;
   width: calc(var(--stamp-size) * 1);
   height: calc(var(--stamp-size) * 1);
   max-height: 100%;
-  border-start-end-radius: $border-radius;
-  opacity: $card-stamp-opacity;
   overflow: hidden;
   pointer-events: none;
+  border-start-end-radius: $border-radius;
+  opacity: $card-stamp-opacity;
 }
 
 .card-stamp-lg {
@@ -81,24 +81,24 @@
 }
 
 .card-stamp-icon {
-  background: var(--secondary);
-  color: var(--card-bg, var(--bg-surface));
+  position: relative;
+  inset-inline-end: calc(var(--stamp-size) * -0.25);
+  top: calc(var(--stamp-size) * -0.25);
   display: flex;
   align-items: center;
   justify-content: center;
-  @include border-radius(var(--border-radius-pill));
   width: calc(var(--stamp-size) * 1);
   height: calc(var(--stamp-size) * 1);
-  position: relative;
-  top: calc(var(--stamp-size) * -0.25);
-  inset-inline-end: calc(var(--stamp-size) * -0.25);
   font-size: calc(var(--stamp-size) * 0.75);
+  color: var(--card-bg, var(--bg-surface));
+  background: var(--secondary);
   transform: rotate(10deg);
+  @include border-radius(var(--border-radius-pill));
 
   .icon {
-    stroke-width: 2;
     width: calc(var(--stamp-size) * 0.75);
     height: calc(var(--stamp-size) * 0.75);
+    stroke-width: 2;
   }
 }
 
@@ -139,14 +139,14 @@
 
 .card-btn {
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   padding: $card-spacer-y $card-spacer-x;
+  font-weight: var(--font-weight-medium);
+  color: inherit;
   text-align: center;
   border-top: var(--border-width) var(--border-style) var(--border-color);
-  flex: 1;
-  color: inherit;
-  font-weight: var(--font-weight-medium);
   @include transition(background $transition-time);
 
   &:hover {
@@ -166,11 +166,11 @@ Stacked card
   --card-stacked-offset: #{$card-stacked-offset};
   position: relative;
 
-  &:after {
+  &::after {
     position: absolute;
-    top: calc(-1 * var(--card-stacked-offset));
-    inset-inline-end: var(--card-stacked-offset);
     inset-inline-start: var(--card-stacked-offset);
+    inset-inline-end: var(--card-stacked-offset);
+    top: calc(-1 * var(--card-stacked-offset));
     height: var(--card-stacked-offset);
     content: '';
     background: var(--card-bg, var(--bg-surface));
@@ -182,34 +182,34 @@ Stacked card
 .card-cover {
   position: relative;
   padding: $card-spacer-y $card-spacer-x;
-  background: #666666 no-repeat center/cover;
+  background: #666 no-repeat center/cover;
 
-  &:before {
+  &::before {
     position: absolute;
-    top: 0;
-    inset-inline-end: 0;
-    bottom: 0;
     inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 0;
+    bottom: 0;
     content: '';
     background: rgba($dark, 0.48);
   }
 
   &:first-child,
-  &:first-child:before {
+  &:first-child::before {
     @include border-radius($border-radius $border-radius 0 0);
   }
 }
 
 .card-cover-blurred {
-  &:before {
+  &::before {
     backdrop-filter: blur(2px);
   }
 }
 
 .card-actions {
   --card-actions-gutter: #{$card-actions-gutter};
-  margin: calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) auto;
   padding-inline-start: var(--card-actions-gutter);
+  margin: calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) auto;
 
   a {
     text-decoration: none;
@@ -218,9 +218,9 @@ Stacked card
 
 // Card header
 .card-header {
-  color: inherit;
   display: flex;
   align-items: center;
+  color: inherit;
   background-color: var(--card-cap-bg);
 
   &:first-child {
@@ -229,15 +229,15 @@ Stacked card
 }
 
 .card-header-light {
-  border-bottom-color: transparent;
   background: var(--bg-surface-tertiary);
+  border-bottom-color: transparent;
 }
 
 .card-header-tabs {
-  background: $card-header-tabs-bg;
   flex: 1;
-  margin: calc(var(--card-cap-padding-y) * -1) calc(var(--card-cap-padding-x) * -1) calc(var(--card-cap-padding-y) * -1);
   padding: calc(var(--card-cap-padding-y) * 0.5) calc(var(--card-cap-padding-x) * 0.5) 0;
+  margin: calc(var(--card-cap-padding-y) * -1) calc(var(--card-cap-padding-x) * -1);
+  background: $card-header-tabs-bg;
   @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
 }
 
@@ -271,13 +271,13 @@ Stacked card
 }
 
 .card-link-rotate:hover {
-  transform: rotate(1.5deg);
   opacity: 1;
+  transform: rotate(1.5deg);
 }
 
 .card-link-pop:hover {
-  transform: translateY(-2px);
   opacity: 1;
+  transform: translateY(-2px);
 }
 
 // Card footer
@@ -290,9 +290,9 @@ Stacked card
 }
 
 .card-footer-transparent {
+  padding-top: 0;
   background: transparent;
   border-color: transparent;
-  padding-top: 0;
 }
 
 .card-footer-borderless {
@@ -324,8 +324,8 @@ Stacked card
   margin: 0 0 var(--card-title-margin-bottom);
   font-size: $h3-font-size;
   font-weight: var(--font-weight-medium);
-  color: var(--heading-color);
   line-height: var(--card-title-line-height);
+  color: var(--heading-color);
 
   @at-root a#{&}:hover {
     color: inherit;
@@ -339,8 +339,8 @@ Stacked card
 .card-subtitle {
   --card-subtitle-margin-start: #{$card-subtitle-margin-start};
   margin-bottom: $card-title-spacer-y;
+  font-weight: 400;
   color: var(--secondary);
-  font-weight: normal;
 
   .card-header & {
     margin: 0;
@@ -383,7 +383,7 @@ Stacked card
     }
   }
 
-  @include media-print {
+  @include media-print() {
     padding: 0;
   }
 
@@ -402,8 +402,8 @@ Card optinos
 .card-options {
   --card-options-top: #{$card-options-top};
   --card-options-inset: #{$card-options-inset};
-  top: var(--card-options-top);
   inset-inline-end: var(--card-options-inset);
+  top: var(--card-options-top);
   display: flex;
   margin-inline-start: auto;
 }
@@ -422,9 +422,9 @@ Card status
  */
 .card-status-top {
   position: absolute;
-  top: 0;
-  inset-inline-end: 0;
   inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: 0;
   height: $card-status-size;
   @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
 }
@@ -489,10 +489,14 @@ Card table
       &:first-child {
         border-top: 0;
 
+        // Plain semantic table markup (thead/tbody/tfoot > tr > td/th) has no class
+        // hooks to target instead.
+        // stylelint-disable selector-max-type
         td,
         th {
           border-top: 0;
         }
+        // stylelint-enable selector-max-type
       }
     }
   }
@@ -500,6 +504,7 @@ Card table
   tbody {
     tr {
       &:last-child {
+        // stylelint-disable-next-line selector-max-type
         td {
           border-bottom: 0;
         }
@@ -554,8 +559,8 @@ Card avatar
   --card-avatar-ring-width: #{$card-avatar-ring-width};
   margin-inline-start: auto;
   margin-inline-end: auto;
-  box-shadow: 0 0 0 var(--card-avatar-ring-width) var(--card-bg, var(--bg-surface));
   margin-top: calc(-1 * calc(var(--avatar-size) * 0.5));
+  box-shadow: 0 0 0 var(--card-avatar-ring-width) var(--card-bg, var(--bg-surface));
 }
 
 /*
@@ -567,10 +572,10 @@ Card list group
   }
 
   .list-group-item {
-    padding-inline-end: $card-spacer-x;
     padding-inline-start: $card-spacer-x;
-    border-inline-end: 0;
+    padding-inline-end: $card-spacer-x;
     border-inline-start: 0;
+    border-inline-end: 0;
     border-radius: 0;
 
     &:last-child {
@@ -597,8 +602,8 @@ Card list group
       &.active,
       &:active,
       &:hover {
-        border-color: $card-border-color;
         color: var(--body-color);
+        border-color: $card-border-color;
       }
 
       &.active {
@@ -662,8 +667,8 @@ Card list group
   }
 
   .nav-tabs + .tab-content .card {
-    border-end-start-radius: var(--card-border-radius);
     border-start-start-radius: 0 !important;
+    border-end-start-radius: var(--card-border-radius);
   }
 
   .tab-content:has(+ .nav-tabs) .card {
@@ -689,8 +694,8 @@ Card gradient
   --card-gradient: var(--primary), var(--primary);
 
   background:
-    radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 0%, transparent) 80%) border-box,
-    linear-gradient(var(--card-gradient-direction), color-mix(in srgb, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
+    radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box,
+    linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
     linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box;
 }
 
diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss
index d7b7fac14..a46e51885 100644
--- a/core/scss/ui/_carousel.scss
+++ b/core/scss/ui/_carousel.scss
@@ -1,21 +1,18 @@
 @use '../config' as *;
 
-.carousel {
-}
-
 .carousel-indicators-vertical {
   --carousel-indicators-vertical-margin-inline-end: #{$carousel-indicators-vertical-margin-inline-end};
 
   inset-inline-start: auto;
   top: 0;
-  margin: 0 var(--carousel-indicators-vertical-margin-inline-end) 0 0;
   flex-direction: column;
+  margin: 0 var(--carousel-indicators-vertical-margin-inline-end) 0 0;
 
   [data-bs-target],
   [data-target] {
-    margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer;
     width: $carousel-indicator-height;
     height: $carousel-indicator-width;
+    margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer;
     border: 0;
     border-inline-start: $carousel-indicator-hit-area-height var(--border-style) transparent;
     border-inline-end: $carousel-indicator-hit-area-height var(--border-style) transparent;
@@ -27,9 +24,9 @@
   [data-target] {
     width: $carousel-indicator-dot-width;
     height: $carousel-indicator-dot-width;
-    @include border-radius(var(--border-radius-pill));
-    border: $carousel-indicator-hit-area-height var(--border-style) transparent;
     margin: 0;
+    border: $carousel-indicator-hit-area-height var(--border-style) transparent;
+    @include border-radius(var(--border-radius-pill));
   }
 }
 
@@ -38,21 +35,21 @@
   [data-target] {
     width: $carousel-indicator-thumb-width * 0.5;
     height: auto;
+    margin: 0 $carousel-indicator-spacer;
     background: no-repeat center/cover;
     border: 0;
-    @include border-radius(var(--border-radius));
     box-shadow: $box-shadow;
-    margin: 0 $carousel-indicator-spacer;
     opacity: $carousel-indicator-thumb-opacity;
+    @include border-radius(var(--border-radius));
 
     @include media-breakpoint-up(lg) {
       width: $carousel-indicator-thumb-width;
     }
 
-    &:before {
-      content: '';
-      padding-top: var(--aspect-ratio, 100%);
+    &::before {
       display: block;
+      padding-top: var(--aspect-ratio, 100%);
+      content: '';
     }
   }
 
@@ -65,11 +62,11 @@
 }
 
 .carousel-caption-background {
-  background: red;
   position: absolute;
   inset-inline-start: 0;
   inset-inline-end: 0;
   bottom: 0;
   height: 90%;
+  background: $dark;
   background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
 }
diff --git a/core/scss/ui/_charts.scss b/core/scss/ui/_charts.scss
index 5d1918ae8..e005a3a8b 100644
--- a/core/scss/ui/_charts.scss
+++ b/core/scss/ui/_charts.scss
@@ -39,8 +39,8 @@ Chart sparkline
   position: relative;
   width: var(--chart-sparkline-width);
   height: var(--chart-sparkline-height);
-  line-height: 1;
   min-height: 0 !important;
+  line-height: 1;
 }
 
 .chart-sparkline-sm {
@@ -65,10 +65,10 @@ Chart sparkline
   --chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size};
 
   position: absolute;
-  top: 0;
-  inset-inline-end: 0;
-  bottom: 0;
   inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/core/scss/ui/_chat.scss b/core/scss/ui/_chat.scss
index 91cf724a2..feab01471 100644
--- a/core/scss/ui/_chat.scss
+++ b/core/scss/ui/_chat.scss
@@ -13,10 +13,10 @@
 }
 
 .chat-bubble {
+  position: relative;
+  padding: var(--chat-bubble-padding);
   background: var(--bg-surface-secondary);
   @include border-radius(var(--border-radius-lg));
-  padding: var(--chat-bubble-padding);
-  position: relative;
 }
 
 .chat-bubble-me {
diff --git a/core/scss/ui/_close.scss b/core/scss/ui/_close.scss
index 6012f0f38..79d893780 100644
--- a/core/scss/ui/_close.scss
+++ b/core/scss/ui/_close.scss
@@ -9,36 +9,36 @@
   --btn-close-focus-opacity: #{$btn-close-focus-opacity};
   --btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
   --btn-close-size: #{$btn-close-width};
+  position: relative;
+  display: block;
 
   width: var(--btn-close-size);
   height: var(--btn-close-size);
   padding: $btn-close-padding-y $btn-close-padding-x;
   color: var(--btn-close-color);
-  mask: var(--btn-close-bg) no-repeat center/calc(var(--btn-close-size) * 0.75);
+  cursor: pointer;
   background-color: var(--btn-close-color);
   border: 0;
-  @include border-radius(var(--border-radius));
   opacity: var(--btn-close-opacity);
-  cursor: pointer;
-  display: block;
-  position: relative;
+  mask: var(--btn-close-bg) no-repeat center/calc(var(--btn-close-size) * 0.75);
+  @include border-radius(var(--border-radius));
 
   // Invisible overlay extending the hit area to a 24x24px minimum touch target
-  &:before {
-    content: '';
+  &::before {
     position: absolute;
     top: 50%;
     left: 50%;
     width: max(100%, 24px);
     height: max(100%, 24px);
+    content: '';
     transform: translate(-50%, -50%);
   }
 
   &:hover {
     color: var(--btn-close-color);
     text-decoration: none;
-    opacity: var(--btn-close-hover-opacity);
     background-color: var(--btn-close-color);
+    opacity: var(--btn-close-hover-opacity);
   }
 
   &:focus {
@@ -54,7 +54,7 @@
     opacity: var(--btn-close-disabled-opacity);
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_datagrid.scss b/core/scss/ui/_datagrid.scss
index 8c972b95d..5b9a61d67 100644
--- a/core/scss/ui/_datagrid.scss
+++ b/core/scss/ui/_datagrid.scss
@@ -10,11 +10,11 @@
   --datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
 
   display: grid;
-  grid-gap: var(--datagrid-padding);
   grid-template-columns: repeat(auto-fit, minmax(var(--datagrid-item-width), 1fr));
+  grid-gap: var(--datagrid-padding);
 }
 
 .datagrid-title {
-  @include subheader;
+  @include subheader();
   margin-bottom: var(--datagrid-title-margin-bottom);
 }
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index fb5d5ae2b..008daa2b5 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -14,27 +14,27 @@
   background-clip: border-box;
 
   &.card {
-    padding: 0;
-    min-width: $dropdown-max-width;
     display: none;
+    min-width: $dropdown-max-width;
+    padding: 0;
 
     &.show {
       display: flex;
     }
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
 
 .dropdown-item {
-  min-width: $dropdown-min-width;
   display: flex;
+  gap: var(--dropdown-item-gap);
   align-items: center;
+  min-width: $dropdown-min-width;
   margin: 0;
   line-height: $line-height-base;
-  gap: var(--dropdown-item-gap);
 }
 
 .dropdown-item-icon {
@@ -45,15 +45,15 @@
 }
 
 .dropdown-item-indicator {
-  height: var(--dropdown-item-icon-size);
   display: inline-flex;
+  align-items: center;
+  height: var(--dropdown-item-icon-size);
   line-height: 1;
   vertical-align: bottom;
-  align-items: center;
 }
 
 .dropdown-header {
-  @include subheader;
+  @include subheader();
   padding-bottom: var(--dropdown-header-padding-bottom);
   pointer-events: none;
 }
@@ -78,48 +78,49 @@
 }
 
 .dropdown-menu-arrow {
-  &:before {
-    content: '';
+  &::before {
     position: absolute;
-    top: calc(-1 * var(--dropdown-arrow-offset));
     inset-inline-start: var(--dropdown-arrow-inset);
+    top: calc(-1 * var(--dropdown-arrow-offset));
+    z-index: -1;
     display: block;
-    background: inherit;
     width: 14px;
     height: 14px;
-    /*rtl:ignore*/
-    transform: rotate(45deg);
-    transform-origin: center;
+    clip: rect(0, 9px, 9px, 0);
+    content: '';
+    background: inherit;
     border: 1px solid;
     border-color: inherit;
-    z-index: -1;
-    clip: rect(0px, 9px, 9px, 0px);
+
+    /* rtl:ignore */
+    transform: rotate(45deg);
+    transform-origin: center;
   }
 
   &.dropdown-menu-end {
-    &:before {
-      inset-inline-end: var(--dropdown-arrow-inset);
+    &::before {
       inset-inline-start: auto;
+      inset-inline-end: var(--dropdown-arrow-inset);
     }
   }
 }
 
 .dropend {
   > .dropdown-menu {
-    margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
     margin-inline-start: calc(-1 * var(--dropdown-dropend-offset));
+    margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
   }
 
   .dropdown-toggle {
-    &:after {
+    &::after {
       margin-inline-start: auto;
     }
   }
 }
 
 .dropdown-menu-card {
-  padding: 0;
   min-width: var(--dropdown-menu-card-min-width);
+  padding: 0;
 
   > .card {
     margin: 0;
diff --git a/core/scss/ui/_empty.scss b/core/scss/ui/_empty.scss
index 8cd71635d..d9f0a124e 100644
--- a/core/scss/ui/_empty.scss
+++ b/core/scss/ui/_empty.scss
@@ -25,9 +25,9 @@
 }
 
 .empty-icon {
-  margin: 0 0 var(--empty-icon-margin-bottom);
   width: var(--empty-icon-size);
   height: var(--empty-icon-size);
+  margin: 0 0 var(--empty-icon-margin-bottom);
   line-height: 1;
   color: var(--secondary);
 
@@ -52,8 +52,8 @@
 
 .empty-title {
   font-size: $h2-font-size;
-  line-height: $h2-line-height;
   font-weight: $headings-font-weight;
+  line-height: $h2-line-height;
 }
 
 .empty-title,
diff --git a/core/scss/ui/_flags.scss b/core/scss/ui/_flags.scss
index 07b6f9eef..1d38ce692 100644
--- a/core/scss/ui/_flags.scss
+++ b/core/scss/ui/_flags.scss
@@ -8,14 +8,14 @@
   display: inline-block;
   width: config.$avatar-size;
   aspect-ratio: 1.33333;
+  vertical-align: bottom;
   background: no-repeat center/cover;
   box-shadow: config.$flag-box-shadow;
   @include config.border-radius(config.$flag-border-radius);
-  vertical-align: bottom;
 
   &.flag-country-np {
-    box-shadow: none;
     border-radius: 0;
+    box-shadow: none;
   }
 }
 
diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss
index 665cf436b..17ecff8e5 100644
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -17,10 +17,10 @@ Form label
   font-weight: var(--font-weight-medium);
 
   &.required {
-    &:after {
-      content: '*';
+    &::after {
       margin-inline-start: var(--form-label-required-gap);
       color: $red;
+      content: '*';
     }
   }
 }
@@ -46,7 +46,7 @@ Form hint
     margin-bottom: 0;
   }
 
-  & + .form-control {
+  + .form-control {
     margin-top: var(--form-hint-margin-top);
   }
 
@@ -76,8 +76,8 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px var(--bg-surface-secondary) inset;
     color: var(--body-color);
+    box-shadow: 0 0 0 1000px var(--bg-surface-secondary) inset;
     -webkit-text-fill-color: var(--body-color);
   }
 
@@ -98,14 +98,14 @@ Form control
 }
 
 .form-control-dark {
-  background-color: rgba($black, 0.1);
   color: $white;
+  background-color: rgba($black, 0.1);
   border-color: transparent;
 
   &:focus {
     background-color: rgba($black, 0.1);
-    box-shadow: none;
     border-color: rgba($white, 0.24);
+    box-shadow: none;
   }
 
   &::placeholder {
@@ -119,11 +119,11 @@ Form control
 
 .form-control-flush {
   padding: 0;
+  line-height: inherit;
+  resize: none;
   background: none !important;
   border-color: transparent !important;
-  resize: none;
   box-shadow: none !important;
-  line-height: inherit;
 }
 
 .form-footer {
@@ -155,12 +155,12 @@ Form help
   --form-help-font-size: #{$form-help-font-size};
 
   display: inline-flex;
-  font-weight: var(--font-weight-semibold);
   align-items: center;
   justify-content: center;
   width: var(--form-help-size);
   height: var(--form-help-size);
   font-size: var(--form-help-font-size);
+  font-weight: var(--font-weight-semibold);
   color: $form-secondary-color;
   text-align: center;
   text-decoration: none;
@@ -222,8 +222,8 @@ Input group
   }
 
   .input-group-text {
-    background: $form-check-input-bg;
     z-index: 10;
+    background: $form-check-input-bg;
     @include transition($input-transition);
 
     &:first-child {
diff --git a/core/scss/ui/_grid.scss b/core/scss/ui/_grid.scss
index ead4714da..8e682632b 100644
--- a/core/scss/ui/_grid.scss
+++ b/core/scss/ui/_grid.scss
@@ -22,13 +22,13 @@
 @each $name, $value in (0: 0, sm: $grid-row-gutter-sm, md: $grid-row-gutter-md, lg: $grid-row-gutter-lg) {
   .row-#{$name} {
     --grid-row-gutter: #{$value};
-    margin-inline-end: calc(-1 * var(--grid-row-gutter));
     margin-inline-start: calc(-1 * var(--grid-row-gutter));
+    margin-inline-end: calc(-1 * var(--grid-row-gutter));
 
     > .col,
     > [class*='col-'] {
-      padding-inline-end: var(--grid-row-gutter);
       padding-inline-start: var(--grid-row-gutter);
+      padding-inline-end: var(--grid-row-gutter);
     }
 
     .card {
@@ -128,9 +128,9 @@
   height: 100%;
 
   > :not(template) {
-    flex: 1;
     display: flex;
-    justify-content: center;
+    flex: 1;
     flex-direction: column;
+    justify-content: center;
   }
 }
diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss
index a74650f00..b63e7349f 100644
--- a/core/scss/ui/_icons.scss
+++ b/core/scss/ui/_icons.scss
@@ -5,11 +5,11 @@
 
 .icon {
   --icon-size: #{$font-size-base * $line-height-base};
+  display: inline-block;
   width: var(--icon-size);
   height: var(--icon-size);
   font-size: var(--icon-size);
   vertical-align: bottom;
-  display: inline-block;
   transform-origin: center;
 
   @if $icon-stroke-width {
diff --git a/core/scss/ui/_images.scss b/core/scss/ui/_images.scss
index f34fd573b..4a62d2b5d 100644
--- a/core/scss/ui/_images.scss
+++ b/core/scss/ui/_images.scss
@@ -4,8 +4,8 @@
 
 .img-responsive {
   --img-responsive-ratio: #{math.percentage(0.75)};
-  background: no-repeat center/cover;
   padding-top: var(--img-responsive-ratio);
+  background: no-repeat center/cover;
 }
 
 .img-responsive-grid {
diff --git a/core/scss/ui/_legend.scss b/core/scss/ui/_legend.scss
index c2cbc6366..fc93318ec 100644
--- a/core/scss/ui/_legend.scss
+++ b/core/scss/ui/_legend.scss
@@ -6,9 +6,9 @@ Legend
 .legend {
   --legend-size: #{$legend-size};
   display: inline-block;
-  background: $legend-bg;
   width: var(--legend-size);
   height: var(--legend-size);
-  @include border-radius($legend-border-radius);
+  background: $legend-bg;
   border: 1px solid var(--border-color-translucent);
+  @include border-radius($legend-border-radius);
 }
diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss
index bd4eeb333..83df6ad95 100644
--- a/core/scss/ui/_lists.scss
+++ b/core/scss/ui/_lists.scss
@@ -8,13 +8,13 @@
 }
 
 .list-group-header {
-  background: $list-group-header-bg;
   padding: var(--list-group-header-padding-y) $list-group-item-padding-x;
   font-size: $h5-font-size;
   font-weight: var(--font-weight-medium);
   line-height: 1;
-  text-transform: uppercase;
   color: $list-group-header-color;
+  text-transform: uppercase;
+  background: $list-group-header-bg;
   border-bottom: var(--border-width) var(--border-style) var(--border-color);
 
   .list-group-flush > & {
@@ -26,6 +26,12 @@
 
 .list-group-item {
   background-color: inherit;
+
+  &.disabled,
+  &:disabled {
+    color: $gray-500;
+    background-color: $dropdown-link-hover-bg;
+  }
 }
 
 .list-group-item.active {
@@ -34,18 +40,10 @@
   border-inline-start-width: $border-width-wide;
 }
 
-.list-group-item {
-  &.disabled,
-  &:disabled {
-    color: $gray-500;
-    background-color: $dropdown-link-hover-bg;
-  }
-}
-
 .list-bordered {
   .list-item {
-    border-top: var(--border-width) var(--border-style) var(--border-color);
     margin-top: -1px;
+    border-top: var(--border-width) var(--border-style) var(--border-color);
 
     &:first-child {
       border-top: none;
@@ -119,8 +117,8 @@ Inline list
 }
 
 .list-inline-dots {
-  .list-inline-item + .list-inline-item:before {
-    content: ' · ';
+  .list-inline-item + .list-inline-item::before {
     margin-inline-end: $list-inline-padding;
+    content: ' · ';
   }
 }
diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss
index 4ea33a02f..e3a8b528e 100644
--- a/core/scss/ui/_loaders.scss
+++ b/core/scss/ui/_loaders.scss
@@ -8,21 +8,21 @@
   color: $blue;
   vertical-align: middle;
 
-  &:after {
+  &::after {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
+    top: 0;
     width: 100%;
     height: 100%;
     content: '';
     border: 1px var(--border-style);
     border-color: transparent;
-    border-top-color: currentColor;
     border-inline-start-color: currentColor;
-
-    @include border-radius(var(--border-radius-pill));
+    border-top-color: currentColor;
     animation: rotate-360 0.6s linear;
     animation-iteration-count: infinite;
+
+    @include border-radius(var(--border-radius-pill));
   }
 }
 
@@ -34,9 +34,9 @@ Dimmer
 
   .loader {
     position: absolute;
-    top: 50%;
-    inset-inline-end: 0;
     inset-inline-start: 0;
+    inset-inline-end: 0;
+    top: 50%;
     display: none;
     margin: 0 auto;
     transform: translateY(-50%);
@@ -56,7 +56,7 @@ Dimmer
 
 @keyframes animated-dots {
   0% {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     transform: translateX(calc(var(--dir) * -100%));
   }
 }
@@ -66,7 +66,7 @@ Dimmer
   overflow: hidden;
   vertical-align: bottom;
 
-  &:after {
+  &::after {
     display: inline-block;
     content: '...';
     animation: animated-dots 1.2s steps(4, jump-none) infinite;
diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss
index c8a4926c5..9cceec957 100644
--- a/core/scss/ui/_markdown.scss
+++ b/core/scss/ui/_markdown.scss
@@ -13,8 +13,8 @@ Prose (formerly markdown)
   --markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y};
   --markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x};
   --markdown-pre-max-height: #{$markdown-pre-max-height};
-  line-height: $markdown-line-height;
   font-size: $markdown-font-size;
+  line-height: $markdown-line-height;
 
   > :first-child {
     margin-top: 0;
@@ -58,9 +58,9 @@ Prose (formerly markdown)
   }
 
   > blockquote {
-    font-size: $h3-font-size;
-    margin: var(--markdown-blockquote-margin-y) 0;
     padding: var(--markdown-blockquote-padding-y) var(--markdown-blockquote-padding-x);
+    margin: var(--markdown-blockquote-margin-y) 0;
+    font-size: $h3-font-size;
   }
 
   > img,
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index 58fa8c2a1..78fa09283 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -4,18 +4,18 @@
 .modal-header {
   > .btn-close {
     position: absolute;
-    top: 0;
     inset-inline-end: 0;
+    top: 0;
+    z-index: 10;
     width: $modal-header-height;
     height: $modal-header-height;
-    margin: 0;
     padding: 0;
-    z-index: 10;
+    margin: 0;
   }
 }
 
 .modal-body {
-  @include scrollbar;
+  @include scrollbar();
 
   .modal-title {
     margin-bottom: var(--modal-body-title-margin-bottom);
@@ -28,9 +28,9 @@
 
 .modal-status {
   position: absolute;
-  top: 0;
   inset-inline-start: 0;
   inset-inline-end: 0;
+  top: 0;
   height: $modal-status-size;
   background: var(--secondary);
   @include border-radius($modal-content-border-radius $modal-content-border-radius 0 0);
@@ -39,15 +39,15 @@
 .modal-header {
   align-items: center;
   min-height: $modal-header-height;
-  background: $modal-header-bg;
   padding: 0 $modal-header-height 0 $modal-inner-padding;
+  background: $modal-header-bg;
 }
 
 .modal-title {
   font-size: $h3-font-size;
   font-weight: $headings-font-weight;
-  color: $headings-color;
   line-height: $line-height-base;
+  color: $headings-color;
 }
 
 .modal-footer {
@@ -73,7 +73,7 @@
   --modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
   --modal-footer-padding-y: #{$modal-footer-padding-y};
 
-  @include media-print {
+  @include media-print() {
     display: none !important;
   }
 }
diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss
index 9fb984d92..d59659c3a 100644
--- a/core/scss/ui/_nav.scss
+++ b/core/scss/ui/_nav.scss
@@ -16,9 +16,9 @@
   }
 
   .nav {
+    padding-inline-start: var(--nav-vertical-nested-padding-start);
     margin-inline-start: var(--nav-vertical-nested-margin-start);
     border-inline-start: var(--border-width) var(--border-style) var(--border-color);
-    padding-inline-start: var(--nav-vertical-nested-padding-start);
   }
 
   .nav-link.active,
@@ -81,12 +81,12 @@
 }
 
 .nav-link-toggle {
-  margin-inline-start: auto;
   padding: 0 var(--nav-link-toggle-padding-x);
+  margin-inline-start: auto;
   @include transition(transform $transition-time);
   @include caret();
 
-  &:after {
+  &::after {
     margin: 0;
   }
 
diff --git a/core/scss/ui/_offcanvas.scss b/core/scss/ui/_offcanvas.scss
index bd8eb6f95..bb498c8bb 100644
--- a/core/scss/ui/_offcanvas.scss
+++ b/core/scss/ui/_offcanvas.scss
@@ -1,7 +1,7 @@
 @use '../config' as *;
 
 .offcanvas {
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss
index 0e38fe31f..bee2743c7 100644
--- a/core/scss/ui/_pagination.scss
+++ b/core/scss/ui/_pagination.scss
@@ -1,15 +1,15 @@
 @use '../config' as *;
 
 .pagination {
+  gap: var(--pagination-gap);
   margin: 0;
+  line-height: var(--body-line-height);
+  user-select: none;
   --pagination-gap: #{$pagination-gap};
   --pagination-link-min-width: #{$pagination-link-min-width};
   --page-text-padding-x: #{$page-text-padding-x};
-  user-select: none;
-  gap: var(--pagination-gap);
-  line-height: var(--body-line-height);
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_patterns.scss b/core/scss/ui/_patterns.scss
index 1211f28ac..68a43918c 100644
--- a/core/scss/ui/_patterns.scss
+++ b/core/scss/ui/_patterns.scss
@@ -32,8 +32,8 @@
   background-position:
     0 0,
     calc(var(--pattern-size) / 2) calc(var(--pattern-size) / 2);
-  background-size: var(--pattern-size) var(--pattern-size);
   background-clip: padding-box;
+  background-size: var(--pattern-size) var(--pattern-size);
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
@@ -46,8 +46,8 @@
   background-position:
     -1px -1px,
     calc(var(--pattern-size) - 1px) calc(var(--pattern-size) - 1px);
-  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   background-clip: padding-box;
+  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
@@ -56,10 +56,10 @@
   --pattern-fill: color-mix(in oklch, var(--pattern-color) 6%, transparent);
   --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
   --pattern-size: #{$pattern-size};
-  background-size: var(--pattern-size) var(--pattern-size);
   background-image: repeating-linear-gradient(0deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent);
   background-position: -1px -1px;
   background-clip: padding-box;
+  background-size: var(--pattern-size) var(--pattern-size);
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
@@ -68,10 +68,10 @@
   --pattern-fill: color-mix(in oklch, var(--pattern-color) 6%, transparent);
   --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
   --pattern-size: #{$pattern-size};
-  background-size: var(--pattern-size) var(--pattern-size);
   background-image: repeating-linear-gradient(90deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent);
   background-position: -1px -1px;
   background-clip: padding-box;
+  background-size: var(--pattern-size) var(--pattern-size);
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
@@ -81,11 +81,11 @@
   --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
   --pattern-size: #{$pattern-size};
   background-image: linear-gradient(to right, var(--pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-fill) 1px, transparent 1px);
-  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   background-position:
     -1px -1px,
     -1px -1px;
   background-clip: padding-box;
+  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
@@ -95,9 +95,9 @@
   --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
   --pattern-size: #{$pattern-size};
   background-image: linear-gradient(45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%);
-  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   background-position: center center;
   background-clip: padding-box;
+  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
@@ -107,17 +107,17 @@
   --pattern-line: color-mix(in oklch, var(--pattern-color) 6%, transparent);
   --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
   background-image: linear-gradient(var(--pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--pattern-line) 2px, transparent 2px), linear-gradient(var(--pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-line) 1px, transparent 1px);
-  background-size:
-    calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
-    calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
-    calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2),
-    calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   background-position:
     -3px -3px,
     -3px -3px,
     -2px -2px,
     -2px -2px;
   background-clip: padding-box;
+  background-size:
+    calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
+    calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
+    calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2),
+    calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
@@ -127,11 +127,11 @@
   --pattern-fill: color-mix(in oklch, var(--pattern-color) 10%, transparent);
   --pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
   background-image: radial-gradient(var(--pattern-fill) 1px, transparent 1px), radial-gradient(var(--pattern-fill) 1px, transparent 1px);
-  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   background-position:
     0 0,
     var(--pattern-size) var(--pattern-size);
   background-clip: padding-box;
+  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
@@ -180,8 +180,8 @@
     linear-gradient(225deg, var(--pattern-fill) 25%, transparent 25%) calc(-1 * var(--pattern-size)) 0,
     linear-gradient(315deg, var(--pattern-fill) 25%, transparent 25%),
     linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%);
-  background-size: calc(2 * var(--pattern-size)) calc(2 * var(--pattern-size));
   background-clip: padding-box;
+  background-size: calc(2 * var(--pattern-size)) calc(2 * var(--pattern-size));
   border: var(--border-width) var(--border-style) var(--pattern-border);
 }
 
diff --git a/core/scss/ui/_payments.scss b/core/scss/ui/_payments.scss
index d99f29c35..4f0bcb156 100644
--- a/core/scss/ui/_payments.scss
+++ b/core/scss/ui/_payments.scss
@@ -4,12 +4,12 @@
 @use '../config' as *;
 
 .payment {
+  display: inline-block;
   height: config.$avatar-size;
   aspect-ratio: 1.66666;
-  display: inline-block;
-  background: no-repeat center/100% 100%;
-  vertical-align: bottom;
   font-style: normal;
+  vertical-align: bottom;
+  background: no-repeat center/100% 100%;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   @include config.border-radius(var(--border-radius));
 }
diff --git a/core/scss/ui/_popovers.scss b/core/scss/ui/_popovers.scss
index 8c5c55aed..462ee4b79 100644
--- a/core/scss/ui/_popovers.scss
+++ b/core/scss/ui/_popovers.scss
@@ -1,7 +1,7 @@
 @use '../config' as *;
 
 .popover {
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index 84780d3c8..5fd1e8e12 100644
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -2,14 +2,14 @@
 
 @keyframes progress-indeterminate {
   0% {
-    inset-inline-end: 100%;
     inset-inline-start: -35%;
+    inset-inline-end: 100%;
   }
 
   100%,
   60% {
-    inset-inline-end: -90%;
     inset-inline-start: 100%;
+    inset-inline-end: -90%;
   }
 }
 
@@ -61,18 +61,18 @@ Progress bar
 }
 
 .progress-bar-indeterminate {
-  &:after,
-  &:before {
+  &::after,
+  &::before {
     position: absolute;
+    inset-inline-start: 0;
     top: 0;
     bottom: 0;
-    inset-inline-start: 0;
     content: '';
     background-color: inherit;
     will-change: left, right;
   }
 
-  &:before {
+  &::before {
     animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
@@ -92,8 +92,8 @@ Progressbg
   --progressbg-padding-y: #{$progressbg-padding-y};
   --progressbg-padding-x: #{$progressbg-padding-x};
   position: relative;
-  padding: var(--progressbg-padding-y) var(--progressbg-padding-x);
   display: flex;
+  padding: var(--progressbg-padding-y) var(--progressbg-padding-x);
 }
 
 .progressbg-text {
@@ -101,26 +101,26 @@ Progressbg
   z-index: 1;
   display: flex;
   align-items: center;
-  @include text-truncate;
+  @include text-truncate();
 }
 
 .progressbg-progress {
   position: absolute;
-  top: 0;
-  inset-inline-end: 0;
-  bottom: 0;
   inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: 0;
+  bottom: 0;
   z-index: 0;
   height: 100%;
-  background: transparent;
   pointer-events: none;
+  background: transparent;
 }
 
 .progressbg-value {
   --progressbg-value-padding-start: #{$progressbg-value-padding-start};
-  font-weight: var(--font-weight-medium);
-  margin-inline-start: auto;
   padding-inline-start: var(--progressbg-value-padding-start);
+  margin-inline-start: auto;
+  font-weight: var(--font-weight-medium);
 }
 
 /**
@@ -130,11 +130,11 @@ Progress steps
   --progress-steps-gap: #{$progress-steps-gap};
   display: flex;
   flex-wrap: nowrap;
+  gap: var(--progress-steps-gap);
   width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
-  gap: var(--progress-steps-gap);
 }
 
 .progress-steps-item {
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index b221ec61f..caf1b97a5 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -17,9 +17,14 @@
   --ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
 
   position: absolute;
-  top: var(--ribbon-offset);
   inset-inline-end: calc(-1 * var(--ribbon-margin));
+  top: var(--ribbon-offset);
   z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ribbon-min-size);
+  min-height: var(--ribbon-min-size);
   padding: var(--ribbon-padding-y) var(--ribbon-padding-x);
   font-size: var(--ribbon-font-size);
   font-weight: var(--font-weight-semibold);
@@ -30,13 +35,8 @@
   background: var(--primary);
   border-color: var(--primary);
   @include border-radius(var(--ribbon-border-radius) 0 var(--ribbon-border-radius) var(--ribbon-border-radius));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--ribbon-min-size);
-  min-width: var(--ribbon-min-size);
 
-  &:before {
+  &::before {
     position: absolute;
     inset-inline-end: 0;
     bottom: 100%;
@@ -46,8 +46,8 @@
     filter: brightness(70%);
     border: calc(var(--ribbon-margin) * 0.5) var(--border-style);
     border-color: inherit;
-    border-top-color: transparent;
     border-inline-end-color: transparent;
+    border-top-color: transparent;
   }
 
   @if $enable-extra-colors {
@@ -70,45 +70,45 @@
 }
 
 .ribbon-top {
-  top: calc(-1 * var(--ribbon-margin));
   inset-inline-end: var(--ribbon-offset);
+  top: calc(-1 * var(--ribbon-margin));
   width: var(--ribbon-top-width);
   padding: var(--ribbon-top-padding-y) 0;
   @include border-radius(0 var(--ribbon-border-radius) var(--ribbon-border-radius) var(--ribbon-border-radius));
 
-  &:before {
-    top: 0;
+  &::before {
     inset-inline-end: 100%;
+    top: 0;
     bottom: auto;
     border-color: inherit;
-    border-top-color: transparent;
     border-inline-start-color: transparent;
+    border-top-color: transparent;
   }
 
   &.ribbon-start {
-    inset-inline-end: auto;
     inset-inline-start: var(--ribbon-offset);
+    inset-inline-end: auto;
 
-    &:before {
-      top: 0;
-      inset-inline-end: 100%;
+    &::before {
       inset-inline-start: auto;
+      inset-inline-end: 100%;
+      top: 0;
     }
   }
 }
 
 .ribbon-start {
-  inset-inline-end: auto;
   inset-inline-start: calc(-1 * var(--ribbon-margin));
+  inset-inline-end: auto;
   @include border-radius(0 var(--ribbon-border-radius) var(--ribbon-border-radius) var(--ribbon-border-radius));
 
-  &:before {
+  &::before {
+    inset-inline-start: 0;
     top: auto;
     bottom: 100%;
-    inset-inline-start: 0;
     border-color: inherit;
-    border-top-color: transparent;
     border-inline-start-color: transparent;
+    border-top-color: transparent;
   }
 }
 
@@ -121,44 +121,44 @@
   padding-inline-start: var(--ribbon-padding-y);
   @include border-radius(0 0 var(--ribbon-border-radius) 0);
 
-  &:after {
+  &::after {
     position: absolute;
-    top: 0;
     inset-inline-end: 100%;
+    top: 0;
     display: block;
     width: 0;
     height: 0;
     content: '';
     border: var(--ribbon-bookmark-border-size) var(--border-style);
     border-color: inherit;
-    border-inline-end-width: 0;
     border-inline-start-color: transparent;
     border-inline-start-width: var(--ribbon-bookmark-notch-width);
+    border-inline-end-width: 0;
   }
 
   &.ribbon-left {
     padding-inline-end: var(--ribbon-bookmark-notch-width);
 
-    &:after {
-      inset-inline-end: auto;
+    &::after {
       inset-inline-start: 100%;
+      inset-inline-end: auto;
+      border-inline-start-width: 0;
       border-inline-end-color: transparent;
 
       border-inline-end-width: var(--ribbon-bookmark-notch-width);
-      border-inline-start-width: 0;
     }
   }
 
   &.ribbon-top {
+    padding-inline-start: 0;
     padding-inline-end: 0;
     padding-bottom: var(--ribbon-padding-y);
-    padding-inline-start: 0;
     @include border-radius(0 var(--ribbon-border-radius) 0 0);
 
-    &:after {
-      top: 100%;
-      inset-inline-end: 0;
+    &::after {
       inset-inline-start: 0;
+      inset-inline-end: 0;
+      top: 100%;
       border-color: inherit;
       border-width: var(--ribbon-bookmark-border-size);
       border-top-width: 0;
diff --git a/core/scss/ui/_segmented.scss b/core/scss/ui/_segmented.scss
index ebe34f19f..3c9f9e2a2 100644
--- a/core/scss/ui/_segmented.scss
+++ b/core/scss/ui/_segmented.scss
@@ -25,31 +25,31 @@
 
   .nav-link {
     display: inline-flex;
+    flex-grow: 1;
     gap: calc(#{$nav-segmented-link-gap} + var(--nav-link-gap));
     align-items: center;
-    margin: 0;
-    font-size: var(--nav-font-size);
+    justify-content: center;
     min-width: calc(var(--nav-height) - 2 * var(--nav-padding));
     height: calc(var(--nav-height) - 2 * var(--nav-padding));
     padding: 0 calc(var(--nav-link-padding-x) - 2px);
-    border: 1px solid transparent;
-    background: transparent;
+    margin: 0;
+    font-size: var(--nav-font-size);
     color: var(--secondary);
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
+    background: transparent;
+    border: 1px solid transparent;
     transition:
       background-color $transition-time,
       color $transition-time;
     @include border-radius(var(--nav-radius));
-    flex-grow: 1;
-    justify-content: center;
 
     &:hover,
     &.hover {
-      background: rgba(0, 0, 0, 0.04);
       color: var(--body-color);
+      background: rgba(0, 0, 0, 0.04);
     }
 
     &.disabled,
diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss
index 908d910d6..e224ca7d7 100644
--- a/core/scss/ui/_signature.scss
+++ b/core/scss/ui/_signature.scss
@@ -4,19 +4,19 @@
   --signature-padding: var(--spacer-1);
   --signature-border-radius: var(--border-radius);
   --signature-canvas-height: 12.5rem;
-  border: var(--border-width) solid var(--border-color);
   padding: var(--signature-padding);
+  border: var(--border-width) solid var(--border-color);
   @include border-radius(var(--border-radius));
 }
 
 .signature-canvas {
-  border: var(--border-width) dashed var(--border-color);
-  @include border-radius(calc(var(--signature-border-radius) - var(--signature-padding)));
   display: block;
-  cursor: crosshair;
   width: 100%;
   // A fixed height is required: without it the canvas height comes from its own
   // width/height attributes, which `resizeCanvas()` rewrites on every resize —
   // each run then measures a different `offsetHeight` and the pad drifts.
   height: var(--signature-canvas-height);
+  cursor: crosshair;
+  border: var(--border-width) dashed var(--border-color);
+  @include border-radius(calc(var(--signature-border-radius) - var(--signature-padding)));
 }
diff --git a/core/scss/ui/_social.scss b/core/scss/ui/_social.scss
index b69c95c30..cf4574096 100644
--- a/core/scss/ui/_social.scss
+++ b/core/scss/ui/_social.scss
@@ -8,8 +8,8 @@
   display: inline-block;
   height: config.$avatar-size;
   aspect-ratio: 1;
-  background: no-repeat center/cover;
   vertical-align: bottom;
+  background: no-repeat center/cover;
 }
 
 @each $app in config.$social-apps {
diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss
index dd46cccd6..94945435b 100644
--- a/core/scss/ui/_stars.scss
+++ b/core/scss/ui/_stars.scss
@@ -4,8 +4,8 @@
   --stars-gap: #{$stars-gap};
 
   display: inline-flex;
-  color: $gray-400;
   font-size: $h5-font-size;
+  color: $gray-400;
 
   .star:not(:first-child) {
     margin-inline-start: var(--stars-gap);
diff --git a/core/scss/ui/_status.scss b/core/scss/ui/_status.scss
index 29baf20ba..b954f7cf5 100644
--- a/core/scss/ui/_status.scss
+++ b/core/scss/ui/_status.scss
@@ -31,12 +31,12 @@
     transform: scale(1, 1);
   }
   80% {
-    transform: scale(3, 3);
     opacity: 0;
+    transform: scale(3, 3);
   }
   100% {
-    transform: scale(3, 3);
     opacity: 0;
+    transform: scale(3, 3);
   }
 }
 
@@ -52,19 +52,19 @@
   --status-gap: #{$status-gap};
 
   display: inline-flex;
+  gap: var(--status-gap);
   align-items: center;
   height: var(--status-height);
   padding: var(--status-padding-y) var(--status-padding-x);
-  gap: var(--status-gap);
-  color: var(--status-color);
-  background: color-transparent(var(--status-color), 0.1);
+  margin: 0;
   font-size: $font-size-base;
-  text-transform: none;
-  letter-spacing: normal;
-  @include border-radius(var(--border-radius-pill));
   font-weight: var(--font-weight-medium);
   line-height: 1;
-  margin: 0;
+  color: var(--status-color);
+  text-transform: none;
+  letter-spacing: normal;
+  background: color-transparent(var(--status-color), 0.1);
+  @include border-radius(var(--border-radius-pill));
 
   .status-dot {
     background: var(--status-color);
@@ -76,9 +76,9 @@
 }
 
 .status-lite {
-  border: var(--border-width) var(--border-style) var(--border-color) !important;
-  background: transparent !important;
   color: var(--body-color) !important;
+  background: transparent !important;
+  border: var(--border-width) var(--border-style) var(--border-color) !important;
 }
 
 @each $name, $color in map.merge($theme-colors, $social-colors) {
@@ -103,11 +103,11 @@
 }
 
 .status-dot-animated {
-  &:before {
-    content: '';
+  &::before {
     position: absolute;
     inset: 0;
     z-index: 0;
+    content: '';
     background: inherit;
     border-radius: inherit;
     opacity: 0.6;
@@ -121,8 +121,8 @@
 .status-indicator {
   --status-indicator-size: #{$status-indicator-size};
   --status-indicator-color: var(--status-color, #{$text-secondary});
-  display: block;
   position: relative;
+  display: block;
   width: var(--status-indicator-size);
   height: var(--status-indicator-size);
 }
@@ -132,11 +132,11 @@
   position: absolute;
   inset-inline-start: 50%;
   top: 50%;
-  margin: calc(var(--status-circle-size) / -2) 0 0 calc(var(--status-circle-size) / -2);
   width: var(--status-circle-size);
   height: var(--status-circle-size);
-  @include border-radius(var(--border-radius-pill));
+  margin: calc(var(--status-circle-size) / -2) 0 0 calc(var(--status-circle-size) / -2);
   background: var(--status-color);
+  @include border-radius(var(--border-radius-pill));
 
   &:nth-child(1) {
     z-index: 3;
diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss
index 6b5e2dac7..9878c939e 100644
--- a/core/scss/ui/_steps.scss
+++ b/core/scss/ui/_steps.scss
@@ -40,11 +40,11 @@
   position: relative;
   flex: 1 1 0;
   min-height: var(--step-item-min-height);
+  padding-top: calc(var(--steps-dot-size));
   margin-top: 0;
   color: inherit;
   text-align: center;
   cursor: default;
-  padding-top: calc(var(--steps-dot-size));
 
   @at-root a#{&} {
     cursor: pointer;
@@ -54,12 +54,12 @@
     }
   }
 
-  &:after,
-  &:before {
+  &::after,
+  &::before {
     background: var(--steps-color);
   }
 
-  &:not(:last-child):after {
+  &:not(:last-child)::after {
     position: absolute;
     inset-inline-start: 50%;
     width: 100%;
@@ -67,41 +67,42 @@
     transform: translateY(-50%);
   }
 
-  &:after {
+  &::after {
     top: calc(var(--steps-dot-size) * 0.5);
     height: var(--steps-border-width);
   }
 
-  &:before {
-    content: '';
+  &::before {
     position: absolute;
-    top: 0;
     inset-inline-start: 50%;
+    top: 0;
     z-index: 1;
     box-sizing: content-box;
     display: flex;
     align-items: center;
     justify-content: center;
-    @include border-radius(var(--border-radius-pill));
-    /*rtl:ignore*/
-    transform: translateX(calc(var(--dir) * -50%));
-    color: var(--white);
     width: var(--steps-dot-size);
     height: var(--steps-dot-size);
+    color: var(--white);
+    content: '';
+
+    /* rtl:ignore */
+    transform: translateX(calc(var(--dir) * -50%));
+    @include border-radius(var(--border-radius-pill));
   }
 
   &.active {
     font-weight: var(--font-weight-semibold);
 
-    &:after {
+    &::after {
       background: var(--steps-inactive-color);
     }
 
-    & ~ .step-item {
+    ~ .step-item {
       color: var(--disabled-color);
 
-      &:after,
-      &:before {
+      &::after,
+      &::before {
         background: var(--steps-inactive-color);
       }
     }
@@ -118,7 +119,7 @@
   .step-item {
     counter-increment: steps;
 
-    &:before {
+    &::before {
       content: counter(steps);
     }
   }
@@ -139,31 +140,32 @@
   }
 
   .step-item {
-    text-align: start;
-    padding-top: 0;
-    padding-inline-start: calc(var(--steps-dot-size) + var(--steps-vertical-padding-start));
     min-height: auto;
+    padding-inline-start: calc(var(--steps-dot-size) + var(--steps-vertical-padding-start));
+    padding-top: 0;
+    text-align: start;
 
     &:not(:first-child) {
       margin-top: var(--steps-vertical-item-gap);
     }
 
-    &:before {
-      top: var(--steps-dot-offset);
+    &::before {
       inset-inline-start: 0;
+      top: var(--steps-dot-offset);
       transform: translate(0, 0);
     }
 
     &:not(:last-child) {
-      &:after {
+      &::after {
         position: absolute;
-        content: '';
-        /*rtl:ignore*/
-        transform: translateX(calc(var(--dir) * -50%));
-        top: var(--steps-dot-offset);
         inset-inline-start: calc(var(--steps-dot-size) * 0.5);
+        top: var(--steps-dot-offset);
         width: var(--steps-border-width);
         height: calc(100% + var(--steps-vertical-connector-gap));
+        content: '';
+
+        /* rtl:ignore */
+        transform: translateX(calc(var(--dir) * -50%));
       }
     }
   }
diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss
index 14d7dd552..593e64fea 100644
--- a/core/scss/ui/_switch-icon.scss
+++ b/core/scss/ui/_switch-icon.scss
@@ -1,16 +1,16 @@
 @use '../config' as *;
 
 .switch-icon {
+  position: relative;
   display: inline-block;
-  line-height: 1;
-  border: 0;
-  padding: 0;
-  background: transparent;
   width: $icon-size;
   height: $icon-size;
+  padding: 0;
+  line-height: 1;
   vertical-align: bottom;
-  position: relative;
   cursor: pointer;
+  background: transparent;
+  border: 0;
 
   &.disabled {
     pointer-events: none;
@@ -45,8 +45,8 @@
 
   .switch-icon-b {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
+    top: 0;
     opacity: 0;
   }
 
@@ -166,13 +166,13 @@
   }
 
   .switch-icon-b {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     transform: translateX(calc(var(--dir) * 100%));
   }
 
   &.active {
     .switch-icon-a {
-      /*rtl:ignore*/
+      /* rtl:ignore */
       transform: translateX(calc(var(--dir) * -100%));
     }
 
@@ -189,13 +189,13 @@
   }
 
   .switch-icon-b {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     transform: translateX(calc(var(--dir) * -100%));
   }
 
   &.active {
     .switch-icon-a {
-      /*rtl:ignore*/
+      /* rtl:ignore */
       transform: translateX(calc(var(--dir) * 100%));
     }
 
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index da05382d1..5881684a6 100644
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -5,13 +5,13 @@
 
   thead {
     th {
-      background: $table-th-bg;
-      @include subheader;
       padding-top: $table-th-padding-y;
       padding-bottom: $table-th-padding-y;
       white-space: nowrap;
+      background: $table-th-bg;
+      @include subheader();
 
-      @include media-print {
+      @include media-print() {
         background: transparent;
       }
     }
@@ -32,6 +32,9 @@
   }
 }
 
+// Matches Bootstrap's own `.table > :not(caption) > * > *` idiom for targeting every
+// cell regardless of thead/tbody/tfoot wrapping.
+// stylelint-disable selector-max-universal
 .table-nowrap {
   > :not(caption) > * > * {
     white-space: nowrap;
@@ -49,10 +52,11 @@
     text-align: center;
   }
 }
+// stylelint-enable selector-max-universal
 
 .td-truncate {
-  max-width: 1px;
   width: 100%;
+  max-width: 1px;
 }
 
 .table-mobile {
@@ -74,14 +78,14 @@
         td {
           display: block;
           padding: $table-cell-padding-x $table-cell-padding-y !important;
-          border: none;
           color: var(--body-color) !important;
+          border: none;
 
           &[data-label] {
-            &:before {
-              @include subheader;
-              content: attr(data-label);
+            &::before {
+              @include subheader();
               display: block;
+              content: attr(data-label);
             }
           }
         }
@@ -104,18 +108,18 @@ Table sort
 .table-sort {
   --table-sort-icon-size: #{$table-sort-icon-size};
   --table-sort-icon-margin-start: #{$table-sort-icon-margin-start};
+  display: block;
+  width: 100%;
+  padding: $table-th-padding-y $table-th-padding-x;
+  margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
 
   font: inherit;
   color: inherit;
+  text-align: inherit;
   text-transform: inherit;
   letter-spacing: inherit;
-  border: 0;
   background: inherit;
-  display: block;
-  width: 100%;
-  text-align: inherit;
-  margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
-  padding: $table-th-padding-y $table-th-padding-x;
+  border: 0;
   @include transition(color $transition-time);
 
   &:hover,
@@ -124,22 +128,22 @@ Table sort
     color: var(--body-color);
   }
 
-  &:after {
-    content: '';
+  &::after {
     display: inline-flex;
     width: var(--table-sort-icon-size);
     height: var(--table-sort-icon-size);
-    vertical-align: bottom;
-    mask-image: $table-sort-bg-image;
-    background: currentColor;
     margin-inline-start: var(--table-sort-icon-margin-start);
+    vertical-align: bottom;
+    content: '';
+    background: currentColor;
+    mask-image: $table-sort-bg-image;
   }
 
-  &.asc:after {
+  &.asc::after {
     mask-image: $table-sort-desc-bg-image;
   }
 
-  &.desc:after {
+  &.desc::after {
     mask-image: $table-sort-asc-bg-image;
   }
 }
diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss
index ff24c8fb2..1f8a7fd91 100644
--- a/core/scss/ui/_tags.scss
+++ b/core/scss/ui/_tags.scss
@@ -12,23 +12,23 @@
   --tag-icon-margin-end: #{$tag-icon-margin-end};
   --tag-icon-size: #{$tag-icon-size};
   --tag-check-size: #{$tag-check-size};
-
-  border: $border-width solid var(--border-color);
   display: inline-flex;
+  gap: var(--tag-gap);
   align-items: center;
   height: var(--tag-height);
-  @include border-radius(var(--border-radius));
   padding: 0 var(--tag-padding-x);
   background: var(--bg-surface);
+
+  border: $border-width solid var(--border-color);
   box-shadow: var(--shadow-input);
-  gap: var(--tag-gap);
+  @include border-radius(var(--border-radius));
 
   .btn-close {
-    margin-inline-end: var(--tag-close-margin-end);
-    margin-inline-start: var(--tag-close-margin-start);
-    padding: 0;
     width: var(--tag-close-size);
     height: var(--tag-close-size);
+    padding: 0;
+    margin-inline-start: var(--tag-close-margin-start);
+    margin-inline-end: var(--tag-close-margin-end);
     font-size: var(--tag-close-font-size);
   }
 }
@@ -53,10 +53,10 @@
 }
 
 .tag-icon {
-  color: var(--secondary);
-  margin-inline-end: var(--tag-icon-margin-end);
   width: var(--tag-icon-size);
   height: var(--tag-icon-size);
+  margin-inline-end: var(--tag-icon-margin-end);
+  color: var(--secondary);
 }
 
 .tag-check {
@@ -69,5 +69,5 @@
 // Tags list
 //
 .tags-list {
-  @include elements-list;
+  @include elements-list();
 }
diff --git a/core/scss/ui/_timeline.scss b/core/scss/ui/_timeline.scss
index c359644f0..53b975a75 100644
--- a/core/scss/ui/_timeline.scss
+++ b/core/scss/ui/_timeline.scss
@@ -6,8 +6,8 @@
 .timeline {
   --timeline-icon-size: #{$avatar-size};
   position: relative;
-  list-style: none;
   padding: 0;
+  list-style: none;
 }
 
 //
@@ -19,13 +19,13 @@
   &:not(:last-child) {
     margin-bottom: var(--page-padding);
 
-    &:before {
-      content: '';
+    &::before {
       position: absolute;
-      top: var(--timeline-icon-size);
       inset-inline-start: calc(var(--timeline-icon-size) / 2);
+      top: var(--timeline-icon-size);
       bottom: calc(-1 * var(--page-padding));
       width: var(--border-width);
+      content: '';
       background-color: var(--border-color);
       @include border-radius(var(--border-radius));
     }
@@ -34,15 +34,15 @@
 
 .timeline-event-icon {
   position: absolute;
+  z-index: 5;
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--timeline-icon-size, $avatar-size);
   height: var(--timeline-icon-size, $avatar-size);
-  background: var(--bg-surface-secondary);
   color: var(--secondary);
+  background: var(--bg-surface-secondary);
   @include border-radius(var(--border-radius));
-  z-index: 5;
 }
 
 .timeline-event-card {
diff --git a/core/scss/ui/_toasts.scss b/core/scss/ui/_toasts.scss
index 5db8798e9..2446f39e4 100644
--- a/core/scss/ui/_toasts.scss
+++ b/core/scss/ui/_toasts.scss
@@ -15,7 +15,7 @@
     }
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_toolbar.scss b/core/scss/ui/_toolbar.scss
index 2ec0ae315..e3529e881 100644
--- a/core/scss/ui/_toolbar.scss
+++ b/core/scss/ui/_toolbar.scss
@@ -4,15 +4,15 @@
   --toolbar-gutter: #{$toolbar-gutter};
 
   display: flex;
-  flex-wrap: nowrap;
   flex-shrink: 0;
+  flex-wrap: nowrap;
   margin: 0 calc(-1 * var(--toolbar-gutter));
 
   > * {
     margin: 0 var(--toolbar-gutter);
   }
 
-  @include media-print {
+  @include media-print() {
     display: none;
   }
 }
diff --git a/core/scss/ui/_tracking.scss b/core/scss/ui/_tracking.scss
index f5ece0f5c..fa0a1ed22 100644
--- a/core/scss/ui/_tracking.scss
+++ b/core/scss/ui/_tracking.scss
@@ -15,18 +15,18 @@
   .tracking-block {
     height: auto;
 
-    &:before {
-      content: '';
+    &::before {
       display: block;
       padding-top: 100%;
+      content: '';
     }
   }
 }
 
 .tracking-block {
   flex: 1;
-  @include border-radius(var(--tracking-block-border-radius));
-  height: var(--tracking-height);
   min-width: var(--tracking-block-min-width);
+  height: var(--tracking-height);
   background: var(--border-color);
+  @include border-radius(var(--tracking-block-border-radius));
 }
diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss
index 9f40dcef4..435946d17 100644
--- a/core/scss/ui/_type.scss
+++ b/core/scss/ui/_type.scss
@@ -3,16 +3,16 @@
 @forward 'typo/hr';
 
 .lead {
-  color: var(--secondary);
   font-size: inherit;
+  color: var(--secondary);
 }
 
 a {
   text-decoration-skip-ink: auto;
-  color: color-mix(in srgb, transparent, var(--link-color) var(--link-opacity, 100%));
+  color: color-mix(in sRGB, transparent, var(--link-color) var(--link-opacity, 100%));
 
   &:hover {
-    color: color-mix(in srgb, transparent, var(--link-hover-color) var(--link-opacity, 100%));
+    color: color-mix(in sRGB, transparent, var(--link-hover-color) var(--link-opacity, 100%));
   }
 }
 
@@ -97,7 +97,7 @@ blockquote {
     display: block;
     text-align: end;
 
-    &:before {
+    &::before {
       content: '— ';
     }
   }
@@ -125,22 +125,22 @@ dl {
 pre {
   --scrollbar-color: #{$pre-color};
   padding: $pre-padding;
-  background: $pre-bg;
-  color: $pre-color;
-  @include border-radius(var(--border-radius));
   line-height: $line-height-base;
+  color: $pre-color;
+  background: $pre-bg;
+  @include border-radius(var(--border-radius));
 
-  @include scrollbar;
+  @include scrollbar();
 
   code {
-    background: transparent;
     padding: 0;
+    background: transparent;
   }
 }
 
 code {
-  background: var(--code-bg);
   padding: 2px 4px;
+  background: var(--code-bg);
   @include border-radius(var(--border-radius));
 }
 
@@ -152,14 +152,14 @@ abbr {
 
 kbd,
 .kbd {
-  border: $kbd-border;
-  display: inline-block;
   box-sizing: border-box;
+  display: inline-block;
   max-width: 100%;
   font-size: $kbd-font-size;
   font-weight: $kbd-font-weight;
   line-height: 1;
   vertical-align: baseline;
+  border: $kbd-border;
   @include border-radius($kbd-border-radius);
 }
 
@@ -204,8 +204,8 @@ a:hover:has(.icon) {
   transition: background-color 0.15s ease-in-out;
 
   &:hover {
-    text-decoration: none;
     color: var(--primary);
+    text-decoration: none;
     background: color-transparent(var(--secondary), 0.04);
   }
 }
@@ -214,7 +214,7 @@ a:hover:has(.icon) {
 Subheader
  */
 .subheader {
-  @include subheader;
+  @include subheader();
 }
 
 /**
@@ -222,22 +222,22 @@ Mentions
  */
 .mention {
   display: inline-block;
-  box-shadow: var(--shadow-border);
-  @include border-radius(var(--border-radius-pill));
-  line-height: calc(16em / 12);
+  padding: calc(2em / 12) calc(8em / 12);
   font-size: calc(12em / 14);
+  font-weight: var(--font-weight-medium);
+  line-height: calc(16em / 12);
   color: var(--body-color);
   background: var(--bg-surface-tertiary);
-  padding: calc(2em / 12) calc(8em / 12);
-  font-weight: var(--font-weight-medium);
+  box-shadow: var(--shadow-border);
+  @include border-radius(var(--border-radius-pill));
 
   @at-root a#{&} {
     cursor: pointer;
 
     &:hover,
     &.hover {
-      background: var(--bg-surface-secondary);
       text-decoration: underline;
+      background: var(--bg-surface-secondary);
     }
   }
 }
@@ -245,26 +245,26 @@ Mentions
 .mention-avatar,
 .mention-app,
 .mention-color {
+  display: inline-flex;
   width: calc(14em / 12);
   height: calc(14em / 12);
-  @include border-radius(var(--border-radius-pill));
   margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
-  display: inline-flex;
+  text-align: center;
+  vertical-align: middle;
   background: no-repeat center center/cover;
   box-shadow: var(--shadow-border);
-  vertical-align: middle;
-  text-align: center;
+  @include border-radius(var(--border-radius-pill));
 }
 
 .mention-app {
-  box-shadow: none;
   background: none;
   border-radius: 0;
+  box-shadow: none;
 }
 
 .mention-count {
-  color: var(--secondary);
   margin-inline-start: calc(8em / 12);
+  color: var(--secondary);
 }
 
 $text-variants: (
@@ -274,11 +274,11 @@ $text-variants: (
 
 @each $variant, $color in $text-variants {
   .text-#{$variant} {
-    background: color-transparent($color, 0.04);
-    background: color-transparent($color, 4%);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-decoration-color: $color;
+    background: color-transparent($color, 0.04);
+    background: color-transparent($color, 4%);
   }
 }
 
@@ -288,11 +288,11 @@ $text-variants: (
   --steps-margin-start: #{$steps-margin-start};
   --steps-margin-bottom: #{$steps-margin-bottom};
   --steps-heading-margin-top: #{$steps-heading-margin-top};
-  margin-inline-start: var(--steps-margin-start);
   padding-inline-start: var(--steps-padding);
+  margin-inline-start: var(--steps-margin-start);
+  margin-bottom: var(--steps-margin-bottom);
   counter-reset: step;
   border-inline-start: 1px solid var(--border-color);
-  margin-bottom: var(--steps-margin-bottom);
 
   h3 {
     counter-increment: step;
@@ -301,22 +301,22 @@ $text-variants: (
       margin-top: var(--steps-heading-margin-top) !important;
     }
 
-    &:before {
-      content: counter(step);
-      display: inline-block;
+    &::before {
       position: absolute;
-      margin-top: 1px;
-      margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2);
+      display: inline-block;
       width: var(--steps-item-size);
       height: var(--steps-item-size);
-      text-align: center;
-      color: var(--body-color);
-      border: 1px solid var(--border-color);
-      background: var(--bg-surface);
-      @include border-radius(var(--border-radius));
-      line-height: calc(var(--steps-item-size) - 2px);
+      margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2);
+      margin-top: 1px;
       font-size: var(--font-size-h4);
       font-weight: var(--font-weight-semibold);
+      line-height: calc(var(--steps-item-size) - 2px);
+      color: var(--body-color);
+      text-align: center;
+      content: counter(step);
+      background: var(--bg-surface);
+      border: 1px solid var(--border-color);
+      @include border-radius(var(--border-radius));
     }
   }
 
@@ -329,13 +329,13 @@ $text-variants: (
   --callout-margin-bottom: #{$callout-margin-bottom};
   --callout-padding-y: #{$callout-padding-y};
   --callout-padding-x: #{$callout-padding-x};
+  padding: var(--callout-padding-y) var(--callout-padding-x);
   margin-bottom: var(--callout-margin-bottom);
+  background: var(--primary-lt);
   border: 1px solid var(--primary-200);
   @include border-radius(var(--border-radius));
-  padding: var(--callout-padding-y) var(--callout-padding-x);
-  background: var(--primary-lt);
 
-  & > :last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 }
diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss
index 1ac9eeac1..f22825fd1 100644
--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -25,14 +25,10 @@ Form check
 
 .form-check-input {
   --form-check-input-width: #{$form-check-input-width};
+  margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
 
   background-size: var(--form-check-input-width);
-  margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
   box-shadow: $form-check-input-box-shadow;
-
-  .form-switch & {
-    @include transition(background-color$transition-time, background-position $transition-time);
-  }
 }
 
 .form-check-label {
@@ -41,10 +37,10 @@ Form check
   display: block;
 
   &.required {
-    &:after {
-      content: '*';
+    &::after {
       margin-inline-start: var(--form-check-label-required-gap);
       color: $red;
+      content: '*';
     }
   }
 }
@@ -53,9 +49,9 @@ Form check
   --form-check-description-margin-top: #{$form-check-description-margin-top};
 
   display: block;
-  color: var(--secondary);
-  font-size: $h5-font-size;
   margin-top: var(--form-check-description-margin-top);
+  font-size: $h5-font-size;
+  color: var(--secondary);
 }
 
 .form-check-single {
@@ -73,6 +69,7 @@ Form switch
   .form-check-input {
     height: $form-switch-height;
     margin-top: ($form-check-min-height - $form-switch-height) * 0.5;
+    @include transition(background-color $transition-time, background-position $transition-time);
   }
 }
 
@@ -84,15 +81,15 @@ Form switch
   --form-switch-lg-bg-size: #{$form-switch-lg-bg-size};
   --form-switch-lg-input-offset: #{$form-switch-lg-input-offset};
   --form-switch-lg-label-padding-top: #{$form-switch-lg-label-padding-top};
-
-  padding-inline-start: var(--form-switch-lg-padding-start);
   min-height: var(--form-switch-lg-min-height);
 
+  padding-inline-start: var(--form-switch-lg-padding-start);
+
   .form-check-input {
-    height: var(--form-switch-lg-height);
     width: var(--form-switch-lg-width);
-    background-size: var(--form-switch-lg-bg-size);
+    height: var(--form-switch-lg-height);
     margin-inline-start: var(--form-switch-lg-input-offset);
+    background-size: var(--form-switch-lg-bg-size);
   }
 
   .form-check-label {
diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss
index 1ef58626a..aef9d7ae7 100644
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/core/scss/ui/forms/_form-colorinput.scss
@@ -27,10 +27,10 @@ Color Input
   @include border-radius(var(--border-radius));
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 
-  &:before {
+  &::before {
     position: absolute;
-    top: 0;
     inset-inline-start: 0;
+    top: 0;
     width: 100%;
     height: 100%;
     content: '';
@@ -50,7 +50,7 @@ Color Input
   }
 
   @at-root .form-colorinput-light & {
-    &:before {
+    &::before {
       background-image: escape-svg($form-check-input-checked-bg-image-dark);
     }
   }
diff --git a/core/scss/ui/forms/_form-custom.scss b/core/scss/ui/forms/_form-custom.scss
index 17a301614..c01c81929 100644
--- a/core/scss/ui/forms/_form-custom.scss
+++ b/core/scss/ui/forms/_form-custom.scss
@@ -13,7 +13,7 @@ Bootstrap color input
 Remove the cancel buttons in Chrome and Safari on macOS.
  */
 [type='search']::-webkit-search-cancel-button {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
diff --git a/core/scss/ui/forms/_form-icon.scss b/core/scss/ui/forms/_form-icon.scss
index 8577d0ef4..0da902cfe 100644
--- a/core/scss/ui/forms/_form-icon.scss
+++ b/core/scss/ui/forms/_form-icon.scss
@@ -22,21 +22,21 @@ Icon input
 .input-icon-addon {
   --input-icon-addon-width: #{$input-icon-addon-width};
   position: absolute;
+  inset-inline-start: 0;
   top: 0;
   bottom: 0;
-  inset-inline-start: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: var(--input-icon-addon-width);
   height: $input-height;
+  font-size: 1.2em;
   color: var(--icon-color);
   pointer-events: none;
-  font-size: 1.2em;
 
   &:last-child {
-    inset-inline-end: 0;
     inset-inline-start: auto;
+    inset-inline-end: 0;
   }
 }
diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss
index 1038cdf02..5b3066aeb 100644
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/core/scss/ui/forms/_form-imagecheck.scss
@@ -35,10 +35,10 @@ Image check
     border-color: var(--primary);
   }
 
-  &:before {
+  &::before {
     position: absolute;
-    top: var(--form-imagecheck-check-offset);
     inset-inline-start: var(--form-imagecheck-check-offset);
+    top: var(--form-imagecheck-check-offset);
     z-index: 1;
     display: block;
     width: $form-check-input-width;
@@ -72,8 +72,8 @@ Image check
 }
 
 .form-imagecheck-image {
-  max-width: 100%;
   display: block;
+  max-width: 100%;
   opacity: 0.64;
   @include transition(opacity $transition-time);
 
@@ -83,8 +83,8 @@ Image check
   }
 
   &:last-child {
-    border-end-end-radius: calc(var(--form-imagecheck-radius) - 1px);
     border-end-start-radius: calc(var(--form-imagecheck-radius) - 1px);
+    border-end-end-radius: calc(var(--form-imagecheck-radius) - 1px);
   }
 
   .form-imagecheck:hover &,
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index f77e0a6c1..12b40c137 100644
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/core/scss/ui/forms/_form-selectgroup.scss
@@ -7,9 +7,9 @@ Select group
   --form-selectgroup-gap: #{$form-selectgroup-gap};
   --form-selectgroup-icon-margin-x: #{$form-selectgroup-icon-margin-x};
   display: inline-flex;
-  margin: 0;
   flex-wrap: wrap;
   gap: var(--form-selectgroup-gap);
+  margin: 0;
 
   .form-selectgroup-item {
     margin: 0;
@@ -21,14 +21,14 @@ Select group
 }
 
 .form-selectgroup-item {
-  display: block;
   position: relative;
+  display: block;
 }
 
 .form-selectgroup-input {
   position: absolute;
-  top: 0;
   inset-inline-start: 0;
+  top: 0;
   z-index: -1;
   opacity: 0;
 }
@@ -37,18 +37,18 @@ Select group
   position: relative;
   display: block;
   min-width: $input-height;
-  margin: 0;
   padding: $input-btn-padding-y $input-btn-padding-x;
+  margin: 0;
   font-size: $input-btn-font-size;
   line-height: $input-line-height;
   color: var(--secondary);
-  background: $form-check-input-bg;
   text-align: center;
   cursor: pointer;
   user-select: none;
+  background: $form-check-input-bg;
   border: var(--border-width) var(--border-style) $input-border-color;
-  @include border-radius(var(--border-radius));
   box-shadow: $input-box-shadow;
+  @include border-radius(var(--border-radius));
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
@@ -64,8 +64,8 @@ Select group
   display: inline-block;
   width: $form-check-input-width;
   height: $form-check-input-width;
-  border: $form-check-input-border;
   vertical-align: middle;
+  border: $form-check-input-border;
   box-shadow: $form-check-input-box-shadow;
 
   .form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & {
@@ -95,8 +95,8 @@ Select group
 
 .form-selectgroup-check-floated {
   position: absolute;
-  top: $input-btn-padding-y;
   inset-inline-end: $input-btn-padding-y;
+  top: $input-btn-padding-y;
 }
 
 .form-selectgroup-input:checked + .form-selectgroup-label {
@@ -113,17 +113,14 @@ Select group
   box-shadow: $input-btn-focus-box-shadow;
 }
 
-.form-selectgroup-label-content {
-}
-
 /**
 Alternate version of form select group
  */
 .form-selectgroup-boxes {
   .form-selectgroup-label {
-    text-align: start;
     padding: $card-spacer-x $card-spacer-y;
     color: inherit;
+    text-align: start;
   }
 
   .form-selectgroup-input:checked {
diff --git a/core/scss/ui/typo/_hr.scss b/core/scss/ui/typo/_hr.scss
index cd76a7516..7ce983756 100644
--- a/core/scss/ui/typo/_hr.scss
+++ b/core/scss/ui/typo/_hr.scss
@@ -14,58 +14,58 @@ Hr text
   --hr-text-gap: #{$hr-text-gap};
   display: flex;
   align-items: center;
-  margin: $hr-margin-y 0;
-  @include subheader;
   height: 1px;
+  margin: $hr-margin-y 0;
+  @include subheader();
 
-  &:after,
-  &:before {
+  &::after,
+  &::before {
     flex: 1 1 auto;
     height: 1px;
     background-color: var(--border-color);
   }
 
-  &:before {
-    content: '';
+  &::before {
     margin-inline-end: var(--hr-text-gap);
+    content: '';
   }
 
-  &:after {
-    content: '';
+  &::after {
     margin-inline-start: var(--hr-text-gap);
+    content: '';
   }
 
   > *:first-child {
-    padding-inline-end: var(--hr-text-gap);
     padding-inline-start: 0;
+    padding-inline-end: var(--hr-text-gap);
     color: var(--secondary);
   }
 
   &.hr-text-left,
   &.hr-text-start {
-    &:before {
+    &::before {
       content: none;
     }
 
-    & > *:first-child {
-      padding-inline-end: var(--hr-text-gap);
+    > *:first-child {
       padding-inline-start: var(--hr-text-gap);
+      padding-inline-end: var(--hr-text-gap);
     }
   }
 
   &.hr-text-right,
   &.hr-text-end {
-    &:before {
+    &::before {
       content: '';
     }
 
-    &:after {
+    &::after {
       content: none;
     }
 
-    & > *:first-child {
-      padding-inline-end: 0;
+    > *:first-child {
       padding-inline-start: var(--hr-text-gap);
+      padding-inline-end: 0;
     }
   }
 
diff --git a/core/scss/utils/_background.scss b/core/scss/utils/_background.scss
index 33bdfe05c..b8b2870c8 100644
--- a/core/scss/utils/_background.scss
+++ b/core/scss/utils/_background.scss
@@ -12,6 +12,6 @@
 
 .bg-cover {
   background-repeat: no-repeat;
-  background-size: cover;
   background-position: center;
+  background-size: cover;
 }
diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss
index 83c2fd120..473bf0e83 100644
--- a/core/scss/utils/_colors.scss
+++ b/core/scss/utils/_colors.scss
@@ -52,7 +52,7 @@
       &:focus {
         $hover-color: if(sass(color-contrast($value) == $color-contrast-light): shade-color($value, $link-shade-percentage); else: tint-color($value, $link-shade-percentage));
         color: RGBA(#{to-rgb($hover-color)}, var(--link-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
-        text-decoration-color: RGBA(to-rgb($hover-color), var(--link-underline-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
+        text-decoration-color: rgba(to-rgb($hover-color), var(--link-underline-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
       }
     }
   }
@@ -97,7 +97,7 @@
 
 .bg-inverted {
   --bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--bg-surface-inverted) calc(var(--bg-opacity) * 100%), transparent) !important;
+  background-color: color-mix(in sRGB, var(--bg-surface-inverted) calc(var(--bg-opacity) * 100%), transparent) !important;
 }
 .bg-surface {
   background-color: var(--bg-surface) !important;
diff --git a/core/scss/vendor/_apexcharts.scss b/core/scss/vendor/_apexcharts.scss
index 00bcb78da..899de4650 100644
--- a/core/scss/vendor/_apexcharts.scss
+++ b/core/scss/vendor/_apexcharts.scss
@@ -1,19 +1,19 @@
 @use '../config' as *;
 
 .apexcharts-tooltip {
+  padding: 0.25rem !important;
+  font-size: $tooltip-font-size !important;
   color: $tooltip-color !important;
   background: $tooltip-bg !important;
-  font-size: $tooltip-font-size !important;
-  padding: 0.25rem !important;
   box-shadow: none !important;
 }
 
 .apexcharts-tooltip-title {
-  background: transparent !important;
-  border: 0 !important;
+  padding: 0.25rem 0.5rem !important;
   margin: 0 !important;
   font-weight: var(--font-weight-semibold);
-  padding: 0.25rem 0.5rem !important;
+  background: transparent !important;
+  border: 0 !important;
 }
 
 .apexcharts-tooltip-y-group {
@@ -21,10 +21,10 @@
 }
 
 .apexcharts-tooltip-series-group {
-  padding: 0 0.5rem 0 !important;
+  padding: 0 0.5rem !important;
 }
 
-.apexcharts-tooltip-marker:before {
+.apexcharts-tooltip-marker::before {
   font-size: 16px !important;
 }
 
diff --git a/core/scss/vendor/_coloris.scss b/core/scss/vendor/_coloris.scss
index a428ace09..396dbb9c3 100644
--- a/core/scss/vendor/_coloris.scss
+++ b/core/scss/vendor/_coloris.scss
@@ -1,8 +1,8 @@
 @use '../config' as *;
 
 .clr-picker {
-  box-shadow: var(--shadow-dropdown);
   background-color: var(--bg-surface);
+  box-shadow: var(--shadow-dropdown);
   @include border-radius(var(--border-radius));
 }
 
@@ -13,8 +13,8 @@
 input.clr-color {
   @include border-radius(var(--border-radius));
   color: var(--body-color);
-  border-color: var(--border-color);
   background: transparent;
+  border-color: var(--border-color);
 
   &:focus {
     @include focus-ring(true);
@@ -24,10 +24,10 @@ input.clr-color {
 .clr-swatches {
   button {
     @include border-radius(var(--border-radius));
-    padding: 0 2px 4px 2px;
+    padding: 0 2px 4px;
 
     &:focus {
-      @include focus-ring;
+      @include focus-ring();
     }
   }
 }
@@ -37,14 +37,14 @@ input.clr-color {
   overflow: visible;
 
   button,
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     @include border-radius(var(--border-radius));
   }
 
   button {
     &:focus {
-      @include focus-ring;
+      @include focus-ring();
     }
   }
 }
@@ -53,18 +53,18 @@ input.clr-color {
   display: block;
 
   button {
-    width: 1.5rem;
-    height: 1.5rem;
     inset-inline-start: 6px;
     inset-inline-end: auto;
+    width: 1.5rem;
+    height: 1.5rem;
     @include border-radius(var(--border-radius));
 
-    &:after {
+    &::after {
       box-shadow: inset 0 0 0 1px var(--border-color-translucent);
     }
 
     &:focus {
-      @include focus-ring;
+      @include focus-ring();
     }
   }
 
diff --git a/core/scss/vendor/_dropzone.scss b/core/scss/vendor/_dropzone.scss
index 8b30c27de..8dfbb1495 100644
--- a/core/scss/vendor/_dropzone.scss
+++ b/core/scss/vendor/_dropzone.scss
@@ -1,14 +1,14 @@
 @use '../config' as *;
 
 .dropzone {
-  border: var(--border-width) dashed var(--border-color) !important;
-  color: var(--secondary) !important;
   padding: 1rem !important;
+  color: var(--secondary) !important;
+  border: var(--border-width) dashed var(--border-color) !important;
 
   &.dz-drag-hover {
-    border: var(--border-width) dashed var(--primary);
-    background: color-transparent(var(--primary), 0.01);
     color: var(--primary);
+    background: color-transparent(var(--primary), 0.01);
+    border: var(--border-width) dashed var(--primary);
 
     .dz-message {
       opacity: 1;
diff --git a/core/scss/vendor/_fullcalendar.scss b/core/scss/vendor/_fullcalendar.scss
index b9ab18bf8..759fc2974 100644
--- a/core/scss/vendor/_fullcalendar.scss
+++ b/core/scss/vendor/_fullcalendar.scss
@@ -15,11 +15,11 @@
 }
 
 .fc-daygrid-dot-event {
-  background-color: var(--fc-event-bg-color);
-  border: 1px solid var(--fc-event-border-color);
-  color: var(--fc-event-text-color);
   padding-top: 1px;
   padding-bottom: 1px;
+  color: var(--fc-event-text-color);
+  background-color: var(--fc-event-bg-color);
+  border: 1px solid var(--fc-event-border-color);
 
   .fc-event-title {
     font-weight: inherit;
@@ -27,14 +27,14 @@
 }
 
 .fc-col-header-cell {
-  background-color: var(--bg-surface-secondary);
-  color: var(--secondary);
-  text-transform: uppercase;
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-h5);
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
+  font-size: var(--font-size-h5);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
+  color: var(--secondary);
+  text-transform: uppercase;
+  background-color: var(--bg-surface-secondary);
 }
 
 .fc-event-time {
@@ -50,8 +50,8 @@
 }
 
 .fc-button {
+  font-weight: var(--font-weight-medium) !important;
   color: var(--body-color) !important;
   background-color: transparent !important;
   border-color: var(--border-color) !important;
-  font-weight: var(--font-weight-medium) !important;
 }
diff --git a/core/scss/vendor/_jsvectormap.scss b/core/scss/vendor/_jsvectormap.scss
index e26cd0843..af3688eb2 100644
--- a/core/scss/vendor/_jsvectormap.scss
+++ b/core/scss/vendor/_jsvectormap.scss
@@ -1,22 +1,22 @@
 @use '../config' as *;
 
 .jvm-tooltip {
-  background: var(--bg-surface-inverted);
-  color: var(--text-inverted);
   font-family: inherit;
   font-size: $h5-font-size;
+  color: var(--text-inverted);
+  background: var(--bg-surface-inverted);
   box-shadow: $card-box-shadow;
 }
 
 .jvm-series-container .jvm-legend .jvm-legend-title {
-  border-bottom: 0;
   font-weight: var(--font-weight-medium);
+  border-bottom: 0;
 }
 
 .jvm-series-container .jvm-legend {
+  min-width: 8rem;
   background-color: var(--card-bg, var(--bg-surface));
   border: var(--border-width) var(--border-style) var(--border-color);
-  min-width: 8rem;
 
   .jvm-legend-inner .jvm-legend-tick {
     display: flex;
@@ -30,17 +30,17 @@
 }
 
 .jvm-zoom-btn {
-  border: var(--border-width) var(--border-style) var(--border-color);
-  background: var(--card-bg, var(--bg-surface));
-  color: var(--body-color);
-  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  line-height: 1;
   width: 1.5rem;
   height: 1.5rem;
+  padding: 0;
   font-size: 1rem;
+  line-height: 1;
+  color: var(--body-color);
+  background: var(--card-bg, var(--bg-surface));
+  border: var(--border-width) var(--border-style) var(--border-color);
   box-shadow: $card-box-shadow;
 
   &.jvm-zoomout {
diff --git a/core/scss/vendor/_litepicker.scss b/core/scss/vendor/_litepicker.scss
index be9261589..674c9c6a2 100644
--- a/core/scss/vendor/_litepicker.scss
+++ b/core/scss/vendor/_litepicker.scss
@@ -52,8 +52,8 @@
 
   .container__days {
     .day-item {
-      cursor: pointer !important;
       padding: 0.5rem 0 !important;
+      cursor: pointer !important;
       @include transition(color $transition-time, background-color $transition-time, border-color $transition-time);
     }
   }
@@ -62,8 +62,8 @@
     box-shadow: $input-box-shadow;
 
     .container__months {
-      box-shadow: none;
       background-color: var(--bg-forms);
+      box-shadow: none;
       @include border-radius(calc(var(--border-radius) - 1px));
     }
   }
diff --git a/core/scss/vendor/_nouislider.scss b/core/scss/vendor/_nouislider.scss
index 61ef7c474..1fbb7a776 100644
--- a/core/scss/vendor/_nouislider.scss
+++ b/core/scss/vendor/_nouislider.scss
@@ -1,11 +1,11 @@
 @use '../config' as *;
 
 .noUi-target {
+  color: $form-range-thumb-bg;
+  background: none;
   border: 0;
   box-shadow: none;
-  background: none;
   @include border-radius(0);
-  color: $form-range-thumb-bg;
 }
 
 .noUi-horizontal {
@@ -21,22 +21,22 @@
 .noUi-handle {
   width: $form-range-thumb-width;
   height: $form-range-thumb-height;
+  background: currentColor;
   border: $form-range-thumb-border;
+  outline: 0;
   box-shadow: $form-range-thumb-box-shadow;
   @include border-radius($form-range-thumb-border-radius);
-  background: currentColor;
-  outline: 0;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: none;
   }
 
   .noUi-horizontal & {
+    inset-inline-end: calc($form-range-thumb-height * -0.5);
+    top: calc($form-range-thumb-height * -0.5);
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    top: calc($form-range-thumb-height * -0.5);
-    inset-inline-end: calc($form-range-thumb-height * -0.5);
     margin: 1px 1px 0 0;
   }
 
diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss
index 314aadaa5..28f968948 100644
--- a/core/scss/vendor/_tom-select.scss
+++ b/core/scss/vendor/_tom-select.scss
@@ -41,10 +41,10 @@ $input-border-width: 1px;
 }
 
 .ts-dropdown {
-  background: var(--bg-surface);
-  color: var(--body-color);
-  box-shadow: var(--shadow-dropdown);
   z-index: $zindex-dropdown;
+  color: var(--body-color);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-dropdown);
 
   .option {
     padding: $dropdown-item-padding-y $dropdown-item-padding-x;
@@ -52,8 +52,8 @@ $input-border-width: 1px;
 
   // Override TomSelect's bootstrap5 preset which references --bs- vars not available in Tabler (#2600)
   .active {
-    background-color: var(--active-bg);
     color: var(--body-color);
+    background-color: var(--active-bg);
   }
 
   .active.create {
@@ -61,8 +61,8 @@ $input-border-width: 1px;
   }
 
   .optgroup-header {
-    background: var(--bg-surface);
     color: var(--body-color);
+    background: var(--bg-surface);
   }
 }
 
@@ -80,15 +80,15 @@ $input-border-width: 1px;
 .ts-wrapper.multi,
 .ts-wrapper.multi.disabled {
   .ts-control > div {
+    color: var(--body-color);
     background: var(--bg-surface-secondary);
     border: 1px solid var(--border-color);
-    color: var(--body-color);
   }
 }
 
 .ts-wrapper.disabled .ts-control {
-  opacity: 1;
   background-color: var(--secondary-bg);
+  opacity: 1;
 
   & > div.item {
     color: var(--gray-500);
diff --git a/core/scss/vendor/_wysiwyg.scss b/core/scss/vendor/_wysiwyg.scss
index 8d740d229..cfcb03b6a 100644
--- a/core/scss/vendor/_wysiwyg.scss
+++ b/core/scss/vendor/_wysiwyg.scss
@@ -1,13 +1,13 @@
 @use '../config' as *;
 
 .tox-hugerte {
+  font-family: var(--font-sans-serif) !important;
   border: var(--border-width) var(--border-style) var(--border-color) !important;
   @include border-radius($border-radius);
-  font-family: var(--font-sans-serif) !important;
 }
 
 .tox-toolbar__group {
-  padding: 0 0.5rem 0;
+  padding: 0 0.5rem;
 }
 
 .tox .tox-toolbar__primary {
@@ -16,9 +16,9 @@
 
 .tox:not(.tox-hugerte-inline) {
   .tox-editor-header {
+    padding: 0 !important;
     border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
     box-shadow: none !important;
-    padding: 0 !important;
   }
 }
 
diff --git a/package.json b/package.json
index f629e182c..41b264679 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,9 @@
     "publish": "changeset publish",
     "reformat-md": "tsx .build/reformat-mdx.ts",
     "lint": "pnpm run lint-md && pnpm run lint-prettier && pnpm run lint-scss-vars",
-    "lint:fix": "pnpm run lint-md-fix && pnpm run format-prettier",
+    "lint:fix": "(pnpm run lint-md-fix || true) && (pnpm run lint:scss:fix || true) && (pnpm run format-prettier || true)",
+    "lint:scss": "pnpm --filter @tabler/core lint:scss",
+    "lint:scss:fix": "pnpm --filter @tabler/core lint:scss:fix",
     "lint-md": "markdownlint --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"",
     "lint-md-fix": "markdownlint --fix --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"",
     "lint-prettier": "prettier --check \"core/scss/**/*.scss\" \"core/js/**/*.{js,ts}\" \"core/.build/**/*.{ts,mts,mjs}\" \".build/**/*.ts\" \"preview/scss/**/*.scss\" \"preview/js/**/*.{js,ts}\" \"{preview,docs,shared}/**/*.astro\" \"{preview,docs}/**/*.{mjs,mts}\" \"shared/**/*.{js,mjs,mts,ts}\" --cache",
@@ -34,6 +36,7 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.1",
+    "@stylistic/stylelint-config": "^2.0.0",
     "adm-zip": "^0.6.0",
     "autoprefixer": "^10.5.4",
     "bundlewatch": "^0.4.2",
@@ -53,6 +56,8 @@
     "rtlcss": "^4.3.0",
     "sass": "1.102.0",
     "shelljs": "^0.10.0",
+    "stylelint": "^16.26.1",
+    "stylelint-config-twbs-bootstrap": "^16.1.0",
     "terser": "^5.49.0",
     "tsx": "^4.23.1",
     "turbo": "2.10.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f8dff49d9..33c5123a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,9 @@ importers:
       '@changesets/cli':
         specifier: ^2.31.1
         version: 2.31.1(@types/node@26.1.1)
+      '@stylistic/stylelint-config':
+        specifier: ^2.0.0
+        version: 2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
       adm-zip:
         specifier: ^0.6.0
         version: 0.6.0
@@ -78,6 +81,12 @@ importers:
       shelljs:
         specifier: ^0.10.0
         version: 0.10.0
+      stylelint:
+        specifier: ^16.26.1
+        version: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-twbs-bootstrap:
+        specifier: ^16.1.0
+        version: 16.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
       terser:
         specifier: ^5.49.0
         version: 5.49.0
@@ -621,6 +630,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@cacheable/memory@2.2.0':
+    resolution: {integrity: sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==}
+
+  '@cacheable/utils@2.5.0':
+    resolution: {integrity: sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==}
+
   '@capsizecss/unpack@4.0.1':
     resolution: {integrity: sha512-CuNiSqg7+e1cO/GjffyMOm5Tt2jUF9CWHHnvQ/UkqvtkGfHdgwEC0wpmq7fkN3gxwpRnrAN0WzO3vREKmNolMQ==}
     engines: {node: '>=18'}
@@ -694,6 +709,47 @@ packages:
     resolution: {integrity: sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==}
     engines: {node: '>= 20.12.0'}
 
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.7':
+    resolution: {integrity: sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@csstools/media-query-list-parser@3.0.1':
+    resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.1
+      '@csstools/css-tokenizer': ^3.0.1
+
+  '@csstools/media-query-list-parser@4.0.3':
+    resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
+  '@dual-bundle/import-meta-resolve@4.2.1':
+    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
+
   '@emmetio/abbreviation@2.3.3':
     resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
 
@@ -1266,6 +1322,15 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@keyv/bigmap@1.3.1':
+    resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.6.0
+
+  '@keyv/serialize@1.1.1':
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
+
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -1714,6 +1779,18 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
+  '@stylistic/stylelint-config@2.0.0':
+    resolution: {integrity: sha512-8J4YAxggy2Nzkb8KJIOLbtMXTPZ5gpKVmyhiiuKEUgCl9XFND5lM0e/ZZBMGEYZ68h5qcsS/jgg1wh235erRAw==}
+    engines: {node: ^18.12 || >=20.9}
+    peerDependencies:
+      stylelint: ^16.8.0
+
+  '@stylistic/stylelint-plugin@3.1.3':
+    resolution: {integrity: sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==}
+    engines: {node: ^18.12 || >=20.9}
+    peerDependencies:
+      stylelint: ^16.8.0
+
   '@swc/helpers@0.2.14':
     resolution: {integrity: sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==}
 
@@ -2091,6 +2168,10 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
   astring@1.9.0:
     resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
@@ -2141,6 +2222,9 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+
   balanced-match@4.0.4:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
@@ -2189,10 +2273,17 @@ packages:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
 
+  cacheable@2.5.0:
+    resolution: {integrity: sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==}
+
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
   caniuse-lite@1.0.30001806:
     resolution: {integrity: sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==}
 
@@ -2276,6 +2367,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -2341,6 +2435,15 @@ packages:
   core-js@3.49.0:
     resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==}
 
+  cosmiconfig@9.0.2:
+    resolution: {integrity: sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   countup.js@2.10.1:
     resolution: {integrity: sha512-UHW/BsPDgVZfN919D4iu2HPv+jJxZUuaR3EhT0ScFZaD446GiQtkMTgOnOyJXdA2AewdlyUk9UvERlTHTbVpcw==}
 
@@ -2360,6 +2463,10 @@ packages:
   crossws@0.3.5:
     resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
 
+  css-functions-list@3.3.3:
+    resolution: {integrity: sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==}
+    engines: {node: '>=12'}
+
   css-select@5.2.2:
     resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
 
@@ -2375,6 +2482,11 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csso@5.0.5:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -2491,6 +2603,9 @@ packages:
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
@@ -2506,6 +2621,10 @@ packages:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
@@ -2616,6 +2735,10 @@ packages:
   fast-wrap-ansi@0.2.2:
     resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
 
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
   fastq@1.20.1:
     resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
@@ -2628,6 +2751,9 @@ packages:
       picomatch:
         optional: true
 
+  file-entry-cache@11.1.5:
+    resolution: {integrity: sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -2641,9 +2767,15 @@ packages:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
 
+  flat-cache@6.1.23:
+    resolution: {integrity: sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==}
+
   flatpickr@4.6.13:
     resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==}
 
+  flatted@3.4.4:
+    resolution: {integrity: sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==}
+
   flattie@1.1.1:
     resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
     engines: {node: '>=8'}
@@ -2761,10 +2893,21 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
+  global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
+
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
 
+  globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+
   good-listener@1.2.2:
     resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
 
@@ -2798,6 +2941,10 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
+  hashery@1.5.1:
+    resolution: {integrity: sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==}
+    engines: {node: '>=20'}
+
   hasown@2.0.4:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
@@ -2838,6 +2985,12 @@ packages:
   hastscript@9.0.1:
     resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
 
+  hookified@1.15.1:
+    resolution: {integrity: sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==}
+
+  hookified@2.2.0:
+    resolution: {integrity: sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==}
+
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
@@ -2847,6 +3000,10 @@ packages:
   html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
@@ -2886,6 +3043,14 @@ packages:
   immutable@5.1.9:
     resolution: {integrity: sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==}
 
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -2939,6 +3104,10 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -2954,6 +3123,10 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
   is-stream@1.1.0:
     resolution: {integrity: sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==}
     engines: {node: '>=0.10.0'}
@@ -3057,10 +3230,20 @@ packages:
     resolution: {integrity: sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==}
     hasBin: true
 
+  keyv@5.6.0:
+    resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==}
+
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
   kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
+
   lightningcss-android-arm64@1.32.0:
     resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
     engines: {node: '>= 12.0.0'}
@@ -3161,6 +3344,9 @@ packages:
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
+  lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -3211,6 +3397,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mathml-tag-names@2.1.3:
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
+
   mdast-util-definitions@6.0.0:
     resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
 
@@ -3271,6 +3460,10 @@ packages:
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -3590,6 +3783,10 @@ packages:
   package-manager-detector@1.7.0:
     resolution: {integrity: sha512-xg1eHpwYL/D/HEdWw2goFZP6vV0FH7W+PZ5rFkGjdIDLtxq7EkzBUeT3m+lndYCt8wKbmofUu1MUdMCXkCk9ZQ==}
 
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
   parse-entities@4.0.2:
     resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
 
@@ -3676,17 +3873,42 @@ packages:
     engines: {node: '>=18.12'}
     hasBin: true
 
+  postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+
   postcss-prefix-custom-properties@0.1.0:
     resolution: {integrity: sha512-sAKQSRw+KTl9G549Q9awV/ra06fOZNEIVIIRTwiSTbvkV1t8z7WPqNQ5XBbxF1fV2mp0yQFObavc5J/GxP0a6g==}
     peerDependencies:
       postcss: ^8.4.0
 
+  postcss-resolve-nested-selector@0.1.6:
+    resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
+
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
   postcss-scss@4.0.9:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.4.29
 
+  postcss-selector-parser@6.1.4:
+    resolution: {integrity: sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@7.1.4:
+    resolution: {integrity: sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==}
+    engines: {node: '>=4'}
+
+  postcss-sorting@8.0.2:
+    resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==}
+    peerDependencies:
+      postcss: ^8.4.20
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -3751,6 +3973,10 @@ packages:
     resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
     engines: {node: '>=6'}
 
+  qified@0.10.1:
+    resolution: {integrity: sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==}
+    engines: {node: '>=20'}
+
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
@@ -3867,6 +4093,10 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -4051,6 +4281,10 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  slice-ansi@4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+
   smol-toml@1.6.1:
     resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
     engines: {node: '>= 18'}
@@ -4110,6 +4344,10 @@ packages:
   string-natural-compare@2.0.3:
     resolution: {integrity: sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ==}
 
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
   string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
@@ -4145,6 +4383,9 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-search@0.1.0:
+    resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
+
   style-to-js@1.1.21:
     resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
 
@@ -4164,6 +4405,65 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  stylelint-config-recess-order@5.1.1:
+    resolution: {integrity: sha512-eDAHWVBelzDbMbdMj15pSw0Ycykv5eLeriJdbGCp0zd44yvhgZLI+wyVHegzXp5NrstxTPSxl0fuOVKdMm0XLA==}
+    peerDependencies:
+      stylelint: '>=16'
+
+  stylelint-config-recommended-scss@14.1.0:
+    resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^16.6.1
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-recommended@14.0.1:
+    resolution: {integrity: sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.1.0
+
+  stylelint-config-standard-scss@14.0.0:
+    resolution: {integrity: sha512-6Pa26D9mHyi4LauJ83ls3ELqCglU6VfCXchovbEqQUiEkezvKdv6VgsIoMy58i00c854wVmOw0k8W5FTpuaVqg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^16.11.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-standard@36.0.1:
+    resolution: {integrity: sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.1.0
+
+  stylelint-config-twbs-bootstrap@16.1.0:
+    resolution: {integrity: sha512-jp+/lHxOo5r21g05+qC/nbFueb7OH5Pub5SdWeBj7T0HVGuHDjB4NoNlWklmz1GsqNhAtFms6ZCnJsAgc8XOmQ==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.11.0
+
+  stylelint-order@6.0.4:
+    resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
+    peerDependencies:
+      stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1
+
+  stylelint-scss@6.14.0:
+    resolution: {integrity: sha512-ZKmHMZolxeuYsnB+PCYrTpFce0/QWX9i9gh0hPXzp73WjuIMqUpzdQaBCrKoLWh6XtCFSaNDErkMPqdjy1/8aA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.8.2
+
+  stylelint@16.26.1:
+    resolution: {integrity: sha512-v20V59/crfc8sVTAtge0mdafI3AdnzQ2KsWe6v523L4OA1bJO02S7MO2oyXDCS6iWb9ckIPnqAFVItqSBQr7jw==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
   suf-log@2.5.3:
     resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==}
 
@@ -4179,15 +4479,26 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  supports-hyperlinks@3.2.0:
+    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
+    engines: {node: '>=14.18'}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
   svgo@4.0.2:
     resolution: {integrity: sha512-ekx94z1rRc5LDi6oSUaeRnYhd0UOJxdtQCL2rF8xpWxD3TPAsISWOrxezqGovqS38GRZOdpDfvQe3ts6F7nsng==}
     engines: {node: '>=16'}
     hasBin: true
 
+  table@6.9.0:
+    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
+    engines: {node: '>=10.0.0'}
+
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
@@ -4422,6 +4733,9 @@ packages:
   url-polyfill@1.1.14:
     resolution: {integrity: sha512-p4f3TTAG6ADVF3mwbXw7hGw+QJyw5CnNGvYh5fCuQQZIiuKUswqcznyV3pGDP9j0TSmC4UvRKm8kl1QsX1diiQ==}
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -4701,6 +5015,10 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   ws@8.21.0:
     resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
     engines: {node: '>=10.0.0'}
@@ -5140,6 +5458,18 @@ snapshots:
   '@bruits/satteri-win32-x64-msvc@0.9.5':
     optional: true
 
+  '@cacheable/memory@2.2.0':
+    dependencies:
+      '@cacheable/utils': 2.5.0
+      '@keyv/bigmap': 1.3.1(keyv@5.6.0)
+      hookified: 1.15.1
+      keyv: 5.6.0
+
+  '@cacheable/utils@2.5.0':
+    dependencies:
+      hashery: 1.5.1
+      keyv: 5.6.0
+
   '@capsizecss/unpack@4.0.1':
     dependencies:
       fontkitten: 1.0.3
@@ -5314,6 +5644,32 @@ snapshots:
       fast-wrap-ansi: 0.2.2
       sisteransi: 1.0.5
 
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.7(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.4)':
+    dependencies:
+      postcss-selector-parser: 7.1.4
+
+  '@dual-bundle/import-meta-resolve@4.2.1': {}
+
   '@emmetio/abbreviation@2.3.3':
     dependencies:
       '@emmetio/scanner': 1.0.4
@@ -5701,6 +6057,14 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@keyv/bigmap@1.3.1(keyv@5.6.0)':
+    dependencies:
+      hashery: 1.5.1
+      hookified: 1.15.1
+      keyv: 5.6.0
+
+  '@keyv/serialize@1.1.1': {}
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.29.7
@@ -6035,6 +6399,23 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
+  '@stylistic/stylelint-config@2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))':
+    dependencies:
+      '@stylistic/stylelint-plugin': 3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+
+  '@stylistic/stylelint-plugin@3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      is-plain-object: 5.0.0
+      postcss: 8.5.23
+      postcss-selector-parser: 6.1.4
+      postcss-value-parser: 4.2.0
+      style-search: 0.1.0
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+
   '@swc/helpers@0.2.14': {}
 
   '@swc/helpers@0.5.15':
@@ -6378,6 +6759,8 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  astral-regex@2.0.0: {}
+
   astring@1.9.0: {}
 
   astro@7.1.5(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@26.1.1)(sass@1.102.0)(terser@5.49.0)(tsx@4.23.1)(yaml@2.9.0):
@@ -6591,6 +6974,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balanced-match@2.0.0: {}
+
   balanced-match@4.0.4: {}
 
   baseline-browser-mapping@2.11.6: {}
@@ -6643,11 +7028,21 @@ snapshots:
 
   bytes@3.1.2: {}
 
+  cacheable@2.5.0:
+    dependencies:
+      '@cacheable/memory': 2.2.0
+      '@cacheable/utils': 2.5.0
+      hookified: 1.15.1
+      keyv: 5.6.0
+      qified: 0.10.1
+
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
+  callsites@3.1.0: {}
+
   caniuse-lite@1.0.30001806: {}
 
   ccount@2.0.1: {}
@@ -6727,6 +7122,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  colord@2.9.3: {}
+
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -6775,6 +7172,15 @@ snapshots:
 
   core-js@3.49.0: {}
 
+  cosmiconfig@9.0.2(typescript@7.0.2):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.3.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 7.0.2
+
   countup.js@2.10.1: {}
 
   cross-env@10.1.0:
@@ -6800,6 +7206,8 @@ snapshots:
     dependencies:
       uncrypto: 0.1.3
 
+  css-functions-list@3.3.3: {}
+
   css-select@5.2.2:
     dependencies:
       boolbase: 1.0.0
@@ -6820,6 +7228,8 @@ snapshots:
 
   css-what@6.2.2: {}
 
+  cssesc@3.0.0: {}
+
   csso@5.0.5:
     dependencies:
       css-tree: 2.2.1
@@ -6927,6 +7337,8 @@ snapshots:
 
   emoji-regex@10.6.0: {}
 
+  emoji-regex@8.0.0: {}
+
   end-of-stream@1.4.5:
     dependencies:
       once: 1.4.0
@@ -6940,6 +7352,8 @@ snapshots:
 
   entities@6.0.1: {}
 
+  env-paths@2.2.1: {}
+
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
@@ -7097,6 +7511,8 @@ snapshots:
     dependencies:
       fast-string-width: 3.0.2
 
+  fastest-levenshtein@1.0.16: {}
+
   fastq@1.20.1:
     dependencies:
       reusify: 1.1.0
@@ -7105,6 +7521,10 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.5
 
+  file-entry-cache@11.1.5:
+    dependencies:
+      flat-cache: 6.1.23
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -7123,8 +7543,16 @@ snapshots:
       locate-path: 5.0.0
       path-exists: 4.0.0
 
+  flat-cache@6.1.23:
+    dependencies:
+      cacheable: 2.5.0
+      flatted: 3.4.4
+      hookified: 1.15.1
+
   flatpickr@4.6.13: {}
 
+  flatted@3.4.4: {}
+
   flattie@1.1.1: {}
 
   follow-redirects@1.16.0(debug@4.4.3(supports-color@5.5.0)):
@@ -7249,6 +7677,16 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  global-modules@2.0.0:
+    dependencies:
+      global-prefix: 3.0.0
+
+  global-prefix@3.0.0:
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -7258,6 +7696,8 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
+  globjoin@0.1.4: {}
+
   good-listener@1.2.2:
     dependencies:
       delegate: 3.2.0
@@ -7292,6 +7732,10 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
+  hashery@1.5.1:
+    dependencies:
+      hookified: 1.15.1
+
   hasown@2.0.4:
     dependencies:
       function-bind: 1.1.2
@@ -7424,12 +7868,18 @@ snapshots:
       property-information: 7.2.0
       space-separated-tokens: 2.0.2
 
+  hookified@1.15.1: {}
+
+  hookified@2.2.0: {}
+
   hosted-git-info@2.8.9: {}
 
   html-escaper@2.0.2: {}
 
   html-escaper@3.0.3: {}
 
+  html-tags@3.3.1: {}
+
   html-void-elements@3.0.0: {}
 
   http-cache-semantics@4.2.0: {}
@@ -7456,6 +7906,13 @@ snapshots:
 
   immutable@5.1.9: {}
 
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -7496,6 +7953,8 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
+  is-fullwidth-code-point@3.0.0: {}
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -7506,6 +7965,8 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
+  is-plain-object@5.0.0: {}
+
   is-stream@1.1.0: {}
 
   is-stream@2.0.1: {}
@@ -7597,8 +8058,16 @@ snapshots:
     dependencies:
       commander: 8.3.0
 
+  keyv@5.6.0:
+    dependencies:
+      '@keyv/serialize': 1.1.1
+
+  kind-of@6.0.3: {}
+
   kleur@4.1.5: {}
 
+  known-css-properties@0.37.0: {}
+
   lightningcss-android-arm64@1.32.0:
     optional: true
 
@@ -7670,6 +8139,8 @@ snapshots:
 
   lodash.startcase@4.4.0: {}
 
+  lodash.truncate@4.4.2: {}
+
   longest-streak@3.1.0: {}
 
   lru-cache@11.5.1: {}
@@ -7744,6 +8215,8 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mathml-tag-names@2.1.3: {}
+
   mdast-util-definitions@6.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -7919,6 +8392,8 @@ snapshots:
 
   mdurl@2.0.0: {}
 
+  meow@13.2.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -8391,6 +8866,10 @@ snapshots:
 
   package-manager-detector@1.7.0: {}
 
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
   parse-entities@4.0.2:
     dependencies:
       '@types/unist': 2.0.11
@@ -8472,15 +8951,37 @@ snapshots:
 
   pnpm@10.34.4: {}
 
+  postcss-media-query-parser@0.2.3: {}
+
   postcss-prefix-custom-properties@0.1.0(postcss@8.5.23):
     dependencies:
       postcss: 8.5.23
       postcss-value-parser: 4.2.0
 
+  postcss-resolve-nested-selector@0.1.6: {}
+
+  postcss-safe-parser@7.0.1(postcss@8.5.23):
+    dependencies:
+      postcss: 8.5.23
+
   postcss-scss@4.0.9(postcss@8.5.23):
     dependencies:
       postcss: 8.5.23
 
+  postcss-selector-parser@6.1.4:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@7.1.4:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-sorting@8.0.2(postcss@8.5.23):
+    dependencies:
+      postcss: 8.5.23
+
   postcss-value-parser@4.2.0: {}
 
   postcss@8.4.31:
@@ -8535,6 +9036,10 @@ snapshots:
 
   punycode.js@2.3.1: {}
 
+  qified@0.10.1:
+    dependencies:
+      hookified: 2.2.0
+
   quansync@0.2.11: {}
 
   queue-microtask@1.2.3: {}
@@ -8699,6 +9204,8 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  resolve-from@4.0.0: {}
+
   resolve-from@5.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -8985,6 +9492,12 @@ snapshots:
 
   slash@3.0.0: {}
 
+  slice-ansi@4.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+
   smol-toml@1.6.1: {}
 
   smol-toml@1.7.1: {}
@@ -9035,6 +9548,12 @@ snapshots:
 
   string-natural-compare@2.0.3: {}
 
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.6.0
@@ -9067,6 +9586,8 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-search@0.1.0: {}
+
   style-to-js@1.1.21:
     dependencies:
       style-to-object: 1.0.14
@@ -9082,6 +9603,112 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.29.7(supports-color@10.2.2)
 
+  stylelint-config-recess-order@5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
+    dependencies:
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-order: 6.0.4(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+
+  stylelint-config-recommended-scss@14.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
+    dependencies:
+      postcss-scss: 4.0.9(postcss@8.5.23)
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-scss: 6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+    optionalDependencies:
+      postcss: 8.5.23
+
+  stylelint-config-recommended@14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
+    dependencies:
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+
+  stylelint-config-standard-scss@14.0.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
+    dependencies:
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-recommended-scss: 14.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-config-standard: 36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+    optionalDependencies:
+      postcss: 8.5.23
+
+  stylelint-config-standard@36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
+    dependencies:
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+
+  stylelint-config-twbs-bootstrap@16.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
+    dependencies:
+      '@stylistic/stylelint-config': 2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      '@stylistic/stylelint-plugin': 3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+      stylelint-config-recess-order: 5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-config-standard: 36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-config-standard-scss: 14.0.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+      stylelint-scss: 6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
+    transitivePeerDependencies:
+      - postcss
+
+  stylelint-order@6.0.4(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
+    dependencies:
+      postcss: 8.5.23
+      postcss-sorting: 8.0.2(postcss@8.5.23)
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+
+  stylelint-scss@6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
+    dependencies:
+      css-tree: 3.2.1
+      is-plain-object: 5.0.0
+      known-css-properties: 0.37.0
+      mdn-data: 2.27.1
+      postcss-media-query-parser: 0.2.3
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-selector-parser: 7.1.4
+      postcss-value-parser: 4.2.0
+      stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
+
+  stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2):
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-syntax-patches-for-csstree': 1.1.7(css-tree@3.2.1)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.4)
+      '@dual-bundle/import-meta-resolve': 4.2.1
+      balanced-match: 2.0.0
+      colord: 2.9.3
+      cosmiconfig: 9.0.2(typescript@7.0.2)
+      css-functions-list: 3.3.3
+      css-tree: 3.2.1
+      debug: 4.4.3(supports-color@5.5.0)
+      fast-glob: 3.3.3
+      fastest-levenshtein: 1.0.16
+      file-entry-cache: 11.1.5
+      global-modules: 2.0.0
+      globby: 11.1.0
+      globjoin: 0.1.4
+      html-tags: 3.3.1
+      ignore: 7.0.6
+      imurmurhash: 0.1.4
+      is-plain-object: 5.0.0
+      known-css-properties: 0.37.0
+      mathml-tag-names: 2.1.3
+      meow: 13.2.0
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.23
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-safe-parser: 7.0.1(postcss@8.5.23)
+      postcss-selector-parser: 7.1.4
+      postcss-value-parser: 4.2.0
+      resolve-from: 5.0.0
+      string-width: 4.2.3
+      supports-hyperlinks: 3.2.0
+      svg-tags: 1.0.0
+      table: 6.9.0
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   suf-log@2.5.3:
     dependencies:
       s.color: 0.0.15
@@ -9096,8 +9723,15 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  supports-hyperlinks@3.2.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svg-tags@1.0.0: {}
+
   svgo@4.0.2:
     dependencies:
       commander: 11.1.0
@@ -9108,6 +9742,14 @@ snapshots:
       picocolors: 1.1.1
       sax: 1.6.0
 
+  table@6.9.0:
+    dependencies:
+      ajv: 8.20.0
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
   term-size@2.2.1: {}
 
   terser@5.49.0:
@@ -9306,6 +9948,8 @@ snapshots:
 
   url-polyfill@1.1.14: {}
 
+  util-deprecate@1.0.2: {}
+
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -9527,6 +10171,11 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
   ws@8.21.0: {}
 
   xxhash-wasm@1.1.0: {}
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
new file mode 100644
index 000000000..7abb2d9b7
--- /dev/null
+++ b/stylelint.config.mjs
@@ -0,0 +1,52 @@
+// Keep this dependency on the same major as stylelint-config-twbs-bootstrap uses
+// (currently @stylistic/stylelint-config@^2 / @stylistic/stylelint-plugin@^3). A newer
+// major lists rule names the plugin twbs loads does not register, and stylelint then
+// fails every file with "Unknown rule @stylistic/…".
+import stylistic from '@stylistic/stylelint-config'
+
+// Prettier already owns SCSS formatting in this repo (`pnpm lint-prettier`), so every
+// purely stylistic rule that stylelint-config-twbs-bootstrap pulls in through @stylistic
+// is switched off — otherwise the two tools fight over quotes, indentation and zeros.
+const prettierOwned = Object.fromEntries(Object.keys(stylistic.rules).map((rule) => [rule, null]))
+
+export default {
+  extends: ['stylelint-config-twbs-bootstrap'],
+  ignoreFiles: [
+    '**/node_modules/**',
+    '**/dist/**',
+    // sass-true fixtures spell out the exact CSS a mixin must emit, so any autofix here
+    // (property order, `!important`, hex length) rewrites the assertion and breaks
+    // `pnpm test:scss`. Bootstrap excludes its own `**/tests/` for the same reason.
+    'core/scss/tests/**',
+  ],
+  rules: {
+    ...prettierOwned,
+    'scss/dollar-variable-colon-space-after': null,
+    'selector-no-qualifying-type': null,
+    'scss/at-function-named-arguments': null,
+    'import-notation': null,
+    'value-keyword-case': ['lower', { ignoreProperties: ['/^\\$font-family/', '/^--.*font/'], camelCaseSvgKeywords: true }],
+    'declaration-no-important': null,
+  },
+  overrides: [
+    {
+      // Copied from upstream Bootstrap, which lints them under its own scss/vendor/ exclusion.
+      // Their declaration order is upstream's and is asserted by scss/tests — reordering it
+      // creates sync noise on every Bootstrap bump for no gain.
+      files: ['core/scss/bootstrap/**/*.scss', 'core/scss/mixins/bootstrap/**/*.scss'],
+      rules: { 'scss/operator-no-unspaced': null, 'order/properties-order': null },
+    },
+    {
+      // Overrides for third-party widgets — their class names and specificity aren't ours.
+      files: ['core/scss/vendor/**/*.scss'],
+      rules: {
+        'declaration-no-important': null,
+        'selector-class-pattern': null,
+        'selector-max-class': null,
+        'selector-max-compound-selectors': null,
+        'custom-property-no-missing-var-function': null,
+        'scss/selector-no-redundant-nesting-selector': null,
+      },
+    },
+  ],
+}