From d88ee33eb622e52cec5f442dd6416e68c8f758e4 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Mon, 20 Jan 2025 15:27:42 +0000
Subject: [PATCH] DEV: Introduce stylelint (#29852)

Stylelint is a css linter: https://stylelint.io/

As part of this change we have added two javascript scripts:

```
pnpm lint:css
pnpm lint:css:fix
```

Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for
configuration in VSCode.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
---
 .devcontainer/devcontainer.json               |   3 +-
 .github/workflows/linting.yml                 |   4 +
 .vscode/extensions.json                       |   3 +-
 .vscode/settings.json.sample                  |   8 +
 app/assets/stylesheets/color_definitions.scss |  20 -
 .../stylesheets/common/admin/admin_base.scss  | 146 +++++-
 .../admin/admin_bulk_users_delete_modal.scss  |   3 +
 .../common/admin/admin_config_area.scss       |   3 +
 .../common/admin/admin_filter.scss            |   5 +-
 .../stylesheets/common/admin/admin_intro.scss |   6 +
 .../common/admin/admin_report.scss            |   7 +-
 .../common/admin/admin_report_counters.scss   |   3 +-
 .../common/admin/admin_report_table.scss      |   1 +
 .../stylesheets/common/admin/admin_table.scss |   1 -
 app/assets/stylesheets/common/admin/api.scss  |  32 +-
 .../stylesheets/common/admin/backups.scss     |   1 -
 .../stylesheets/common/admin/badges.scss      |  15 +-
 .../common/admin/customize-install-theme.scss |  14 +-
 .../stylesheets/common/admin/customize.scss   | 119 ++++-
 .../admin/customize_themes_show_schema.scss   |   3 +-
 .../stylesheets/common/admin/dashboard.scss   |  43 +-
 .../stylesheets/common/admin/emails.scss      |  19 +
 .../common/admin/json_schema_editor.scss      |   7 +-
 .../common/admin/mini_profiler.scss           |   1 -
 .../stylesheets/common/admin/penalty.scss     |   4 +-
 .../stylesheets/common/admin/plugins.scss     |   5 +-
 .../admin/schema_theme_setting_editor.scss    |  15 +-
 .../stylesheets/common/admin/settings.scss    |  28 +-
 .../stylesheets/common/admin/sidebar.scss     |   1 +
 .../stylesheets/common/admin/staff_logs.scss  |  51 +-
 .../stylesheets/common/admin/users.scss       |  28 +-
 .../common/base/_bookmark-list.scss           |   1 +
 .../stylesheets/common/base/_topic-list.scss  |  28 +-
 .../stylesheets/common/base/activation.scss   |   5 +-
 app/assets/stylesheets/common/base/alert.scss |   5 +
 .../stylesheets/common/base/bbcode.scss       |   4 +-
 .../common/base/category-list.scss            |  43 +-
 .../stylesheets/common/base/colorpicker.scss  |   3 +-
 .../stylesheets/common/base/compose.scss      |  35 +-
 .../common/base/composer-user-selector.scss   |   1 +
 .../common/base/crawler_layout.scss           |  57 ++-
 .../stylesheets/common/base/d-image-grid.scss |  12 +-
 .../stylesheets/common/base/dialog.scss       |   4 +
 .../stylesheets/common/base/directory.scss    |  22 +-
 .../stylesheets/common/base/discourse.scss    |  34 +-
 .../common/base/edit-category.scss            |  18 +-
 .../common/base/edit-topic-timer-modal.scss   |   6 +
 .../stylesheets/common/base/exception.scss    |   5 +
 .../common/base/explain-reviewable.scss       |   5 +
 app/assets/stylesheets/common/base/faqs.scss  |  19 +-
 app/assets/stylesheets/common/base/group.scss |   9 +-
 .../stylesheets/common/base/groups.scss       |   6 +
 .../stylesheets/common/base/header.scss       |  48 +-
 .../stylesheets/common/base/history.scss      |  28 +-
 .../stylesheets/common/base/json_schema.scss  |  15 +-
 .../stylesheets/common/base/lightbox.scss     |   6 +-
 .../common/base/login-signup-page.scss        |  19 +-
 app/assets/stylesheets/common/base/login.scss |  21 +-
 .../common/base/magnific-popup.scss           |  93 ++--
 .../stylesheets/common/base/menu-panel.scss   |  51 +-
 app/assets/stylesheets/common/base/modal.scss |  34 +-
 .../stylesheets/common/base/new-user.scss     |   9 +-
 .../stylesheets/common/base/not-found.scss    |   9 +-
 .../stylesheets/common/base/onebox.scss       |  75 ++-
 .../common/base/personal-message.scss         |  15 +-
 .../stylesheets/common/base/popup-menu.scss   |   1 -
 .../common/base/reorder-categories.scss       |   1 +
 .../stylesheets/common/base/reviewables.scss  |  54 +-
 .../revise-and-reject-post-reviewable.scss    |   1 -
 app/assets/stylesheets/common/base/rtl.scss   |   1 -
 .../stylesheets/common/base/search-menu.scss  |  30 +-
 .../stylesheets/common/base/search.scss       |  25 +-
 .../stylesheets/common/base/share_link.scss   |   2 +-
 .../common/base/sidebar-custom-section.scss   |   6 +
 .../common/base/sidebar-footer.scss           |   5 +-
 .../common/base/sidebar-section-link.scss     |  13 +-
 .../common/base/sidebar-section.scss          |   6 +-
 .../stylesheets/common/base/sidebar.scss      |  47 +-
 .../stylesheets/common/base/tagging.scss      |  37 +-
 .../stylesheets/common/base/tooltip.scss      |   9 +-
 .../common/base/topic-admin-menu.scss         |  11 +-
 .../stylesheets/common/base/topic-footer.scss |   5 +-
 .../stylesheets/common/base/topic-post.scss   |  41 +-
 app/assets/stylesheets/common/base/topic.scss |  59 ++-
 .../stylesheets/common/base/user-badges.scss  |  23 +-
 app/assets/stylesheets/common/base/user.scss  |  72 ++-
 .../components/add-pm-participants.scss       |   1 +
 .../stylesheets/common/components/badges.scss |  13 +-
 .../stylesheets/common/components/banner.scss |   7 +-
 .../common/components/bookmark-list.scss      |   6 +
 .../common/components/bookmark-menu.scss      |   1 +
 .../common/components/bookmark-modal.scss     |   2 +-
 .../common/components/buttons.scss            |  77 ++-
 .../components/calendar-date-time-input.scss  |   1 -
 .../common/components/color-input.scss        |   4 +
 .../conditional-loading-section.scss          |   1 +
 .../common/components/d-lightbox.scss         |  69 +--
 .../common/components/d-page-header.scss      |   4 +-
 .../common/components/d-select.scss           |   1 -
 .../common/components/d-toggle-switch.scss    |   1 -
 .../common/components/date-input.scss         |  12 +-
 .../common/components/date-time-input.scss    |   1 +
 .../components/drafts-dropdown-menu.scss      |   1 -
 .../common/components/dropdown-menu.scss      |   2 +-
 .../common/components/emoji-picker.scss       |   1 -
 .../common/components/footer-nav.scss         |  11 +-
 .../components/form-template-field.scss       |   2 +-
 .../common/components/hashtag.scss            |   2 +-
 .../components/horizontal-overflow-nav.scss   |  11 +-
 .../common/components/keyboard_shortcuts.scss |   1 +
 .../common/components/more-topics.scss        |  15 +-
 .../stylesheets/common/components/navs.scss   |   9 +-
 .../common/components/post-list.scss          |   4 +
 .../components/powered-by-discourse.scss      |   3 +-
 .../categories-modal.scss                     |   2 +
 .../sidebar/edit-navigation-menu/modal.scss   |   5 +-
 .../edit-navigation-menu/tags-modal.scss      |   1 +
 .../components/signup-progress-bar.scss       |   3 +
 .../stylesheets/common/components/svg.scss    |   7 +-
 .../common/components/theme-card.scss         |  24 +-
 .../common/components/time-input.scss         |   1 +
 .../components/time-shortcut-picker.scss      |   1 +
 .../common/components/topic-map.scss          |  11 +-
 .../common/components/topic-query-filter.scss |   2 +-
 .../common/components/user-card.scss          |  55 +-
 .../common/components/user-info.scss          |   2 +
 .../common/components/user-stream-item.scss   |   9 +
 .../common/components/user-stream.scss        |   1 +
 app/assets/stylesheets/common/d-editor.scss   |  16 +-
 .../common/float-kit/d-default-toast.scss     |   4 +
 .../stylesheets/common/float-kit/d-menu.scss  |   3 +-
 .../common/float-kit/d-toasts.scss            |   1 -
 .../common/form-kit/_checkbox-group.scss      |   2 +-
 .../common/form-kit/_control-code.scss        |   1 +
 .../common/form-kit/_control-composer.scss    |   1 -
 .../common/form-kit/_control-icon.scss        |   1 +
 .../common/form-kit/_control-input-group.scss |   1 +
 .../common/form-kit/_control-menu.scss        |   1 +
 .../common/form-kit/_control-radio.scss       |   1 +
 .../common/form-kit/_control-textarea.scss    |   1 -
 .../stylesheets/common/form-kit/_row.scss     |   1 -
 .../stylesheets/common/foundation/base.scss   |  19 +-
 .../foundation/color_transformations.scss     |  15 +-
 .../stylesheets/common/foundation/colors.scss |  12 +-
 .../common/foundation/helpers.scss            |  12 +-
 .../stylesheets/common/foundation/math.scss   |   6 +
 .../stylesheets/common/foundation/mixins.scss |  18 +-
 .../common/foundation/variables.scss          |   5 +-
 app/assets/stylesheets/common/input_tip.scss  |   9 +-
 .../stylesheets/common/loading-slider.scss    |   5 -
 .../common/login/invite-signup.scss           |   4 +-
 .../stylesheets/common/modal/login-modal.scss |  46 +-
 .../common/modal/modal-overrides.scss         |  31 +-
 .../common/post-action-feedback.scss          |   1 +
 .../stylesheets/common/printer-friendly.scss  |  16 +-
 .../common/select-kit/category-row.scss       |   3 +
 .../common/select-kit/category-selector.scss  |   1 +
 .../common/select-kit/combo-box.scss          |   2 +-
 .../common/select-kit/composer-actions.scss   |   3 +
 .../select-kit/dropdown-select-box.scss       |   2 +
 .../select-kit/email-group-user-chooser.scss  |   5 +-
 .../future-date-input-selector.scss           |   1 +
 .../common/select-kit/multi-select.scss       |   5 +-
 .../common/select-kit/select-kit.scss         |   9 +-
 .../common/software-update-prompt.scss        |   1 +
 .../table-builder/insert-table-modal.scss     |   2 +-
 .../table-builder/jspreadsheet-theme.scss     |  16 +-
 .../table-builder/table-edit-decorator.scss   |   3 -
 .../stylesheets/common/topic-timeline.scss    |  27 +-
 .../stylesheets/desktop/category-list.scss    |  23 +-
 .../desktop/components/more-topics.scss       |   3 +
 .../components/sidebar/sidebar-section.scss   |   2 +
 .../desktop/components/user-card.scss         |  10 +
 .../desktop/components/user-info.scss         |   1 +
 app/assets/stylesheets/desktop/compose.scss   |  31 +-
 app/assets/stylesheets/desktop/discourse.scss |   2 +-
 app/assets/stylesheets/desktop/header.scss    |   4 +-
 .../desktop/latest-topic-list.scss            |   6 +-
 .../desktop/login-signup-page.scss            |  10 +-
 .../stylesheets/desktop/menu-panel.scss       |  10 +-
 app/assets/stylesheets/desktop/modal.scss     |   5 +
 .../desktop/post-action-feedback.scss         |   4 +
 .../stylesheets/desktop/topic-list.scss       |  43 +-
 .../stylesheets/desktop/topic-post.scss       |  32 +-
 app/assets/stylesheets/desktop/topic.scss     |   2 +
 app/assets/stylesheets/desktop/user.scss      |   8 +-
 app/assets/stylesheets/embed.scss             |   9 +-
 app/assets/stylesheets/ember_cli.scss         |   1 -
 .../stylesheets/mobile/admin_badges.scss      |   7 +
 .../stylesheets/mobile/admin_customize.scss   |   2 +
 .../stylesheets/mobile/components/_index.scss |   3 -
 .../mobile/components/bookmark-menu.scss      |   0
 .../mobile/components/more-topics.scss        |   1 +
 .../mobile/components/user-card.scss          |  20 +-
 app/assets/stylesheets/mobile/compose.scss    |   7 +
 app/assets/stylesheets/mobile/dashboard.scss  |   6 +-
 app/assets/stylesheets/mobile/discourse.scss  |   8 +-
 .../stylesheets/mobile/edit-category.scss     |   7 +-
 .../mobile/form-kit/_control-menu.scss        |   1 +
 app/assets/stylesheets/mobile/header.scss     |  12 +-
 .../stylesheets/mobile/list-controls.scss     |   3 +
 .../stylesheets/mobile/login-modal.scss       |  16 +
 .../stylesheets/mobile/login-signup-page.scss |  11 +-
 app/assets/stylesheets/mobile/menu-panel.scss |   3 +-
 .../stylesheets/mobile/modal-overrides.scss   |   1 +
 app/assets/stylesheets/mobile/modal.scss      |   5 +-
 app/assets/stylesheets/mobile/new-user.scss   |   2 +
 .../stylesheets/mobile/personal-message.scss  |   4 +
 .../mobile/post-action-feedback.scss          |   1 -
 .../stylesheets/mobile/reviewables.scss       |   2 +
 app/assets/stylesheets/mobile/sidebar.scss    |   1 +
 .../mobile/signup-progress-bar.scss           |   2 +
 app/assets/stylesheets/mobile/topic-list.scss |  49 +-
 app/assets/stylesheets/mobile/topic-post.scss |  48 +-
 app/assets/stylesheets/mobile/topic.scss      |   4 +
 app/assets/stylesheets/mobile/user.scss       |  25 +-
 app/assets/stylesheets/publish.scss           |   8 +-
 app/assets/stylesheets/qunit-custom.scss      |  16 +-
 app/assets/stylesheets/qunit.scss             |   1 -
 app/assets/stylesheets/vendor/normalize.scss  |  17 +-
 app/assets/stylesheets/vendor/pikaday.scss    |  17 +-
 .../stylesheets/vendor/rotate-center.scss     |   8 +-
 app/assets/stylesheets/wcag.scss              |  37 +-
 app/assets/stylesheets/wizard.scss            |  61 ++-
 package.json                                  |   5 +
 .../common/discourse-automation.scss          |   9 +
 .../stylesheets/common/base-common.scss       |  12 +-
 .../stylesheets/common/chat-browse.scss       |   3 +-
 .../stylesheets/common/chat-channel-card.scss |   2 +
 .../stylesheets/common/chat-channel-icon.scss |   1 +
 .../stylesheets/common/chat-channel.scss      |   2 +-
 .../common/chat-composer-button.scss          |   3 +
 .../common/chat-composer-dropdown.scss        |   2 -
 .../stylesheets/common/chat-composer.scss     |   2 +-
 .../stylesheets/common/chat-drawer.scss       |   4 +-
 .../stylesheets/common/chat-footer.scss       |   3 +
 .../stylesheets/common/chat-height-mixin.scss |   3 +-
 .../assets/stylesheets/common/chat-index.scss |  10 +-
 .../common/chat-message-actions.scss          |   5 +-
 .../common/chat-message-creator.scss          |   5 +-
 .../common/chat-message-images.scss           |   4 +
 .../stylesheets/common/chat-message-info.scss |   2 +
 .../stylesheets/common/chat-message.scss      |   3 +-
 .../common/chat-messages-scroller.scss        |   2 +-
 .../common/chat-modal-create-channel.scss     |   1 +
 .../chat-modal-move-message-to-channel.scss   |   1 +
 .../stylesheets/common/chat-navbar.scss       |   9 +-
 .../stylesheets/common/chat-onebox.scss       |   1 +
 .../assets/stylesheets/common/chat-reply.scss |   1 +
 .../common/chat-replying-indicator.scss       |   5 +-
 .../common/chat-scroll-to-bottom.scss         |   1 +
 .../common/chat-selection-manager.scss        |   1 +
 .../stylesheets/common/chat-skeleton.scss     |  11 +-
 .../common/chat-thread-list-item.scss         |   3 +
 .../common/chat-thread-participants.scss      |   1 +
 .../stylesheets/common/chat-thread.scss       |   2 +-
 .../stylesheets/common/chat-threads-list.scss |   4 +-
 .../stylesheets/common/chat-transcript.scss   |   3 +-
 .../common/chat-upload-drop-zone.scss         |   2 -
 .../stylesheets/common/chat-user-avatar.scss  |   8 +-
 .../stylesheets/common/chat-user-threads.scss |   3 +
 .../stylesheets/common/core-extensions.scss   |   1 +
 .../common/direct-message-creator.scss        |   2 +-
 .../common/incoming-chat-webhooks.scss        |   1 +
 .../chat/assets/stylesheets/common/index.scss |   1 -
 .../desktop/chat-index-drawer.scss            |   2 +
 .../desktop/chat-index-full-page.scss         |   4 +
 .../chat-message-thread-indicator.scss        |   2 +
 .../stylesheets/mixins/chat-scrollbar.scss    |   1 -
 .../stylesheets/mobile/base-mobile.scss       |   1 +
 .../mobile/chat-channel-members.scss          |   1 +
 .../stylesheets/mobile/chat-channel-row.scss  |  20 +-
 .../stylesheets/mobile/chat-composer.scss     |   8 +
 .../assets/stylesheets/mobile/chat-form.scss  |   2 +
 .../mobile/chat-message-creator.scss          |   0
 .../mobile/chat-message-thread-indicator.scss |   1 +
 .../stylesheets/mobile/chat-message.scss      |   2 +
 .../stylesheets/mobile/chat-user-threads.scss |   2 +
 .../chat/assets/stylesheets/mobile/index.scss |   1 -
 .../assets/stylesheets/checklist.scss         |  11 +-
 .../assets/stylesheets/details.scss           |   9 +-
 .../assets/stylesheets/lazy-videos.scss       |   3 +-
 .../assets/stylesheets/presence.scss          |   2 +-
 .../assets/stylesheets/footnotes.scss         |   3 +-
 .../poll/assets/stylesheets/common/poll.scss  |  36 +-
 .../stylesheets/desktop/poll-ui-builder.scss  |   1 +
 .../stylesheets/discourse_spoiler_alert.scss  |   2 +-
 .../styleguide/assets/stylesheets/colors.scss |  46 ++
 .../assets/stylesheets/styleguide.scss        |  11 +-
 .../assets/stylesheets/typography.scss        |  12 +
 pnpm-lock.yaml                                | 470 +++++++++++++++++-
 spec/lib/stylesheet/manager_spec.rb           |   2 +-
 spec/models/color_scheme_spec.rb              |   2 +-
 spec/models/theme_spec.rb                     |   2 +-
 spec/requests/site_controller_spec.rb         |   4 +-
 spec/serializers/wizard_serializer_spec.rb    |   2 +-
 stylelint.config.mjs                          |  43 ++
 297 files changed, 3174 insertions(+), 793 deletions(-)
 delete mode 100644 app/assets/stylesheets/mobile/components/bookmark-menu.scss
 delete mode 100644 plugins/chat/assets/stylesheets/mobile/chat-message-creator.scss
 create mode 100644 stylelint.config.mjs

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 0302db0538f..b52ef22f861 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -29,7 +29,8 @@
         "esbenp.prettier-vscode",
         "dbaeumer.vscode-eslint",
         "lifeart.vscode-glimmer-syntax",
-        "typed-ember.glint-vscode"
+        "typed-ember.glint-vscode",
+        "stylelint.vscode-stylelint"
       ]
     }
   }
diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
index 4fb88711c31..7fd50fa5269 100644
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -74,6 +74,10 @@ jobs:
         if: ${{ !cancelled() }}
         run: pnpm lint:hbs
 
+      - name: Stylelint
+        if: ${{ !cancelled() }}
+        run: pnpm lint:css
+
       - name: English locale lint (core)
         if: ${{ !cancelled() }}
         run: bundle exec ruby script/i18n_lint.rb "config/**/locales/{client,server}.en.yml"
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 563e65951d0..ef82a49b843 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -5,6 +5,7 @@
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
     "lifeart.vscode-glimmer-syntax",
-    "typed-ember.glint-vscode"
+    "typed-ember.glint-vscode",
+    "stylelint.vscode-stylelint"
   ]
 }
diff --git a/.vscode/settings.json.sample b/.vscode/settings.json.sample
index 649329140c0..664a2d2ed8c 100644
--- a/.vscode/settings.json.sample
+++ b/.vscode/settings.json.sample
@@ -34,4 +34,12 @@
   "task.autoDetect": "off",
   "eslint.debug": false,
   "rubyLsp.formatter": "syntax_tree",
+
+  // stylelint scss support
+  "stylelint.validate": ["css", "postcss", "scss"],
+
+  // disable other stylesheet linters
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false
 }
diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
index 9323390bcc0..ecaf382a6cd 100644
--- a/app/assets/stylesheets/color_definitions.scss
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -1,7 +1,6 @@
 // This file maps all SCSS color variables to CSS custom properties.
 // It is compiled to CSS separately from the rest of the app.
 // The source variables come from color_transformations.scss and variables.scss
-
 :root {
   --scheme-type: #{schemeType()};
   --primary: #{$primary};
@@ -16,7 +15,6 @@
   --love: #{$love};
   --d-selected: #{$selected};
   --d-hover: #{$hover};
-
   --always-black-rgb: 0, 0, 0;
   --primary-rgb: #{hexToRGB($primary)};
   --primary-low-rgb: #{hexToRGB($primary-low)};
@@ -26,14 +24,12 @@
   --tertiary-rgb: #{hexToRGB($tertiary)};
   --highlight-rgb: #{hexToRGB($highlight)};
   --success-rgb: #{hexToRGB($success)};
-
   --primary-very-low: #{$primary-very-low};
   --primary-low: #{$primary-low};
   --primary-low-mid: #{$primary-low-mid};
   --primary-medium: #{$primary-medium};
   --primary-high: #{$primary-high};
   --primary-very-high: #{$primary-very-high};
-
   --primary-50: #{$primary-50};
   --primary-100: #{$primary-100};
   --primary-200: #{$primary-200};
@@ -44,25 +40,20 @@
   --primary-700: #{$primary-700};
   --primary-800: #{$primary-800};
   --primary-900: #{$primary-900};
-
   --header_primary-low: #{$header_primary-low};
   --header_primary-low-mid: #{$header_primary-low-mid};
-
   --header_primary-medium: #{$header_primary-medium};
   --header_primary-high: #{$header_primary-high};
   --header_primary-very-high: #{$header_primary-very-high};
-
   --secondary-low: #{$secondary-low};
   --secondary-medium: #{$secondary-medium};
   --secondary-high: #{$secondary-high};
   --secondary-very-high: #{$secondary-very-high};
-
   --tertiary-very-low: #{$tertiary-very-low};
   --tertiary-low: #{$tertiary-low};
   --tertiary-medium: #{$tertiary-medium};
   --tertiary-high: #{$tertiary-high};
   --tertiary-hover: #{$tertiary-hover};
-
   --tertiary-50: #{$tertiary-50};
   --tertiary-100: #{$tertiary-100};
   --tertiary-200: #{$tertiary-200};
@@ -73,26 +64,20 @@
   --tertiary-700: #{$tertiary-700};
   --tertiary-800: #{$tertiary-800};
   --tertiary-900: #{$tertiary-900};
-
   --quaternary-low: #{$quaternary-low};
-
   --highlight-bg: #{$highlight-bg};
   --highlight-low: #{$highlight-low};
   --highlight-medium: #{$highlight-medium};
   --highlight-high: #{$highlight-high};
-
   --danger-low: #{$danger-low};
   --danger-low-mid: #{$danger-low-mid};
   --danger-medium: #{$danger-medium};
   --danger-hover: #{$danger-hover};
-
   --success-low: #{$success-low};
   --success-medium: #{$success-medium};
   --success-hover: #{$success-hover};
-
   --love-low: #{$love-low};
   --wiki: #{$wiki};
-
   --blend-primary-secondary-5: #{$blend-primary-secondary-5};
   --primary-med-or-secondary-med: #{$primary-med-or-secondary-med};
   --primary-med-or-secondary-high: #{$primary-med-or-secondary-high};
@@ -108,7 +93,6 @@
   --tertiary-or-white: #{$tertiary-or-white};
   --facebook-or-white: #{$facebook-or-white};
   --twitter-or-white: #{$twitter-or-white};
-
   --hljs-attr: #{$hljs-attr};
   --hljs-attribute: #{$hljs-attribute};
   --hljs-addition: #{$hljs-addition};
@@ -123,7 +107,6 @@
   --hljs-symbol: #{$hljs-symbol};
   --hljs-variable: #{$hljs-variable};
   --hljs-string: #{$hljs-string};
-
   --google: #{$google};
   --google-hover: #{$google-hover};
   --instagram: #{$instagram};
@@ -136,11 +119,9 @@
   --github-hover: #{$github-hover};
   --discord: #{$discord};
   --discord-hover: #{$discord-hover};
-
   --gold: #{$gold};
   --silver: #{$silver};
   --bronze: #{$bronze};
-
   --shadow-modal: 0 8px 60px rgba(0, 0, 0, #{$shadow-opacity-modal});
   --shadow-composer: 0 -1px 40px rgba(0, 0, 0, #{$shadow-opacity-composer});
   --shadow-menu-panel: 0 8px 12px rgba(0, 0, 0, #{$shadow-opacity-menu-panel});
@@ -149,7 +130,6 @@
   --shadow-header: 0 0 0 1px var(--primary-low);
   --shadow-footer-nav: 0 0 2px 0 rgba(0, 0, 0, #{$shadow-opacity-footer-nav});
   --shadow-focus-danger: 0 0 6px 0 var(--danger);
-
   --float-kit-arrow-stroke-color: var(--primary-low);
   --float-kit-arrow-fill-color: var(--secondary);
 }
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index e51bd3c4567..2424b406654 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -13,7 +13,6 @@ $mobile-breakpoint: 700px;
 }
 
 // Common admin styles
-
 .admin-main-nav {
   display: inline-flex;
   position: relative;
@@ -42,11 +41,14 @@ $mobile-breakpoint: 700px;
       margin: 0 0 0 -10px;
       padding: 0 10px 10px 10px;
     }
-    &:before {
+
+    &::before {
       display: none;
     }
+
     > li {
       margin: 0;
+
       &:last-of-type {
         > a {
           margin-right: 25px;
@@ -56,7 +58,7 @@ $mobile-breakpoint: 700px;
   }
   @include breakpoint(tablet) {
     // Fade-out for horizontal scroll nav
-    &:before {
+    &::before {
       content: "";
       position: absolute;
       width: 10px;
@@ -68,10 +70,11 @@ $mobile-breakpoint: 700px;
         rgba(var(--secondary-rgb), 0)
       );
     }
-    &:after {
+
+    &::after {
       content: "";
       position: absolute;
-      right: 0px;
+      right: 0;
       width: 30px;
       height: 100%;
       background: linear-gradient(
@@ -85,25 +88,27 @@ $mobile-breakpoint: 700px;
 
 .admin-contents {
   position: relative;
+
   .nav-stacked {
-    @media screen and (max-width: 700px) {
+    @media screen and (width <= 700px) {
       margin: 0;
     }
   }
 
-  .row:before,
-  .row:after {
+  .row::before,
+  .row::after {
     display: table;
     content: "";
   }
-  .row:after {
+
+  .row::after {
     clear: both;
   }
 
   &.admin-site-settings-category {
     overflow: hidden;
 
-    @media (max-width: 500px) {
+    @media (width <= 500px) {
       background-color: var(--primary-very-low);
     }
   }
@@ -116,31 +121,38 @@ $mobile-breakpoint: 700px;
   tr {
     text-align: left;
   }
+
   td,
   th {
     padding: 8px;
   }
+
   tr:hover {
     background-color: var(--primary-very-low);
   }
+
   tr.selected {
     background-color: var(--primary-low);
   }
+
   .filters input {
     margin-bottom: 0;
   }
+
   .label {
     display: none;
   }
 
-  @media screen and (max-width: 970px) and (min-width: 768px) {
+  @media screen and (width <= 970px) and (width >= 768px) {
     td,
     th {
       padding: 6px 4px;
     }
+
     th {
       vertical-align: bottom;
     }
+
     th.sortable {
       max-width: 100px;
     }
@@ -161,22 +173,25 @@ $mobile-breakpoint: 700px;
 
 .admin-contents table.grid {
   // Table switches to grid for narrow screens
-  @media screen and (max-width: 767px) {
+  @media screen and (width <= 767px) {
     thead {
       display: none;
     }
+
     .label {
       display: block;
       color: var(--primary-medium);
       font-size: var(--font-down-1);
       margin: 0.5em 0 0.15em 0;
     }
+
     tr {
       grid-template-columns: repeat(3, 1fr);
       display: grid;
       line-height: var(--line-height-medium);
       padding: 8px 0;
       min-width: 0;
+
       td {
         padding: 2px;
         align-self: center;
@@ -185,33 +200,39 @@ $mobile-breakpoint: 700px;
 
     tr.flagged-topic {
       grid-template-columns: 0.25fr 1fr 1fr;
+
       td.topic-title {
         grid-column-start: 2;
         grid-column-end: -2;
         min-width: 0;
         align-self: start;
       }
+
       td.last-flagged {
         grid-row: 1;
         grid-column-end: -1;
         text-align: right;
         align-self: start;
       }
+
       td.flag-details {
         grid-row: 2;
         grid-column-end: -1;
         text-align: right;
       }
+
       td.flagged-topic-users {
         grid-row: 1;
         grid-column-start: 1;
         max-width: 60px;
         align-self: start;
+
         a {
           display: inline-block;
           margin: 0 0.25em 0.25em 0;
         }
       }
+
       td.flag-counts {
         grid-row: 2;
         grid-column-start: 2;
@@ -219,7 +240,7 @@ $mobile-breakpoint: 700px;
     }
   }
 
-  @media screen and (min-width: 550px) {
+  @media screen and (width >= 550px) {
     tr {
       grid-template-columns: repeat(6, 1fr);
     }
@@ -229,34 +250,43 @@ $mobile-breakpoint: 700px;
 .site-texts {
   .search-area {
     margin-bottom: 2em;
+
     p {
       margin-top: 0;
     }
+
     .site-text-search {
       padding: 0.5em;
       font-size: var(--font-0);
       width: 50%;
     }
+
     .reseed {
       float: right;
     }
+
     .locale {
       margin-bottom: 0.5em;
     }
+
     .locale-search {
       width: 50%;
     }
   }
+
   .text-highlight {
     font-weight: bold;
   }
+
   .site-text {
     cursor: pointer;
     border-bottom: 1px solid var(--primary-low);
     margin-bottom: 0.5em;
+
     &.overridden {
       background-color: var(--highlight-bg);
     }
+
     h3 {
       font-weight: normal;
       font-size: var(--font-0);
@@ -264,6 +294,7 @@ $mobile-breakpoint: 700px;
         word-wrap: break-word;
       }
     }
+
     .site-text-edit {
       float: right;
     }
@@ -276,6 +307,7 @@ $mobile-breakpoint: 700px;
       max-height: $maxHeight;
       overflow: hidden;
       position: relative;
+
       &::after {
         content: " ";
         position: absolute;
@@ -298,6 +330,7 @@ $mobile-breakpoint: 700px;
       color: var(--primary-medium);
     }
   }
+
   .edit-site-text {
     textarea {
       display: block;
@@ -305,9 +338,11 @@ $mobile-breakpoint: 700px;
       max-width: 800px;
       margin: 0;
     }
+
     .save-button {
       margin-top: 1em;
     }
+
     .save-button,
     .title {
       margin-bottom: 1em;
@@ -317,15 +352,18 @@ $mobile-breakpoint: 700px;
         word-wrap: break-word;
       }
     }
+
     .go-back {
       margin-top: 1em;
     }
+
     .desc {
       padding-top: 3px;
       font-size: var(--font-down-1);
       line-height: var(--line-height-large);
       color: var(--primary-medium);
     }
+
     .outdated {
       border: 1px solid var(--primary-low);
       box-sizing: border-box;
@@ -339,6 +377,7 @@ $mobile-breakpoint: 700px;
       }
     }
   }
+
   p.warning {
     color: var(--danger);
   }
@@ -347,6 +386,7 @@ $mobile-breakpoint: 700px;
 .content-list {
   width: 27%;
   float: left;
+
   li a span.count {
     font-size: var(--font-down-1);
     float: right;
@@ -366,13 +406,16 @@ $mobile-breakpoint: 700px;
 .admin-content {
   .admin-contents {
     padding: 0 0 8px 0;
-    @include clearfix();
+    @include clearfix;
   }
+
   .view-options {
     float: right;
   }
+
   table.report {
     margin-top: 20px;
+
     tr {
       th:nth-of-type(1) {
         width: 20%;
@@ -392,11 +435,13 @@ $mobile-breakpoint: 700px;
           width: 60%;
         }
       }
+
       td.x-value {
         max-width: 0;
         @include ellipsis;
       }
     }
+
     .bar-container {
       float: left;
       width: 300px;
@@ -441,7 +486,6 @@ $mobile-breakpoint: 700px;
     &__controls {
       display: flex;
       margin-left: auto;
-
       align-items: center;
     }
 
@@ -460,6 +504,7 @@ $mobile-breakpoint: 700px;
 
     dt {
       font-weight: bold;
+
       &.other-accounts {
         display: flex;
         align-items: center;
@@ -469,9 +514,11 @@ $mobile-breakpoint: 700px;
         .btn {
           margin-left: auto;
         }
+
         .count {
           font-weight: bold;
           margin-left: 0.25em;
+
           &.--nonzero {
             color: var(--danger);
           }
@@ -481,6 +528,7 @@ $mobile-breakpoint: 700px;
 
     dd {
       margin: 0.25em 0 1em;
+
       &.other-accounts {
         margin: 1em 0 0 0;
         max-height: 13em;
@@ -493,6 +541,7 @@ $mobile-breakpoint: 700px;
           top: 0;
           line-height: 1.2;
           background: var(--secondary);
+
           th {
             padding: 0.25em;
           }
@@ -501,6 +550,7 @@ $mobile-breakpoint: 700px;
         ul {
           margin: 0;
         }
+
         li {
           list-style: none;
         }
@@ -537,24 +587,28 @@ $mobile-breakpoint: 700px;
   .username {
     input[type="text"] {
       min-width: 15em;
-      @media screen and (max-width: 500px) {
+      @media screen and (width <= 500px) {
         box-sizing: border-box;
         width: 100%;
       }
     }
   }
+
   .select-kit {
     width: 350px;
   }
+
   .select-kit.multi-select {
     width: 500px;
   }
+
   .select-kit.dropdown-select-box {
     width: auto;
   }
+
   .search-logs-filter {
     margin-left: auto;
-    @media screen and (max-width: 700px) {
+    @media screen and (width <= 700px) {
       flex: 1 1 100%;
       margin-left: 0;
     }
@@ -568,6 +622,7 @@ $mobile-breakpoint: 700px;
   .controls {
     @include clearfix;
   }
+
   .users-list-container {
     overflow-x: auto;
   }
@@ -577,6 +632,7 @@ $mobile-breakpoint: 700px;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
+
   .show-emails,
   .hide-emails {
     margin-left: auto;
@@ -591,15 +647,16 @@ $mobile-breakpoint: 700px;
   .admin-actions {
     margin-left: auto;
   }
+
   nav {
     background-color: var(--primary-low);
     width: 100%;
   }
+
   nav {
     display: inline-flex;
     position: relative;
     flex: 1 0 0px;
-    height: auto;
     overflow: hidden;
     padding: 0;
     height: 100%;
@@ -610,7 +667,7 @@ $mobile-breakpoint: 700px;
       margin-right: -10px;
     }
 
-    &:before {
+    &::before {
       // Fade out sides of horizontal nav
       content: "";
       position: absolute;
@@ -624,10 +681,10 @@ $mobile-breakpoint: 700px;
       );
     }
 
-    &:after {
+    &::after {
       content: "";
       position: absolute;
-      right: 0px;
+      right: 0;
       width: 15px;
       height: calc(100% - 5px);
       background: linear-gradient(
@@ -651,24 +708,28 @@ $mobile-breakpoint: 700px;
       -webkit-overflow-scrolling: touch;
     }
 
-    &:before {
+    &::before {
       display: none;
     }
   }
+
   h1 {
     font-size: var(--font-up-3);
     line-height: var(--line-height-medium);
     color: var(--primary);
   }
+
   .controls {
     background: var(--primary-low);
     width: 100%;
     padding: 10px;
     display: flex;
     align-items: center;
+
     .inline-form {
       // Hacky, but fixes email preview summary
       margin-bottom: -0.5em;
+
       > div {
         margin-right: 0.5em;
       }
@@ -677,29 +738,35 @@ $mobile-breakpoint: 700px;
     @include breakpoint(mobile-extra-large) {
       margin: 0 -10px;
     }
+
     input {
       @include breakpoint(tablet) {
         max-width: 150px;
       }
     }
+
     &.search {
       width: auto;
       white-space: nowrap;
+
       label {
         flex: 1 1 250px;
         display: flex;
         align-items: center;
+
         input {
           margin-right: 0.5em;
         }
       }
     }
   }
+
   .menu-toggle {
     border-color: var(--primary-medium);
     border-radius: 3px;
     background: transparent;
     color: var(--primary);
+
     &:hover {
       background-color: var(--primary-low-mid);
     }
@@ -716,12 +783,12 @@ $mobile-breakpoint: 700px;
 
   .search {
     label {
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
 
     // Hide the search checkbox for very small screens
     // Todo: find somewhere to display it - probably requires switching its order in the html
-    @media (max-width: 550px) {
+    @media (width <= 550px) {
       display: none;
     }
   }
@@ -731,6 +798,7 @@ $mobile-breakpoint: 700px;
       font-weight: bold;
     }
   }
+
   label {
     display: inline-block;
     margin-right: 5px;
@@ -772,9 +840,10 @@ $mobile-breakpoint: 700px;
     z-index: z("base") - 1;
     width: 250px;
   }
-  @media (max-width: 500px) {
+  @media (width <= 500px) {
     width: 50%;
   }
+
   .nav-stacked {
     background-color: inherit;
 
@@ -806,7 +875,7 @@ $mobile-breakpoint: 700px;
     transition: transform 0.3s ease;
     @include transform(translateX(250px));
   }
-  @media (max-width: 500px) {
+  @media (width <= 500px) {
     transition: transform 0.3s ease;
     @include transform(translateX(50%));
   }
@@ -834,6 +903,7 @@ section.details {
   padding: 5px;
   clear: both;
   text-align: right;
+
   .btn {
     line-height: var(--line-height-medium);
   }
@@ -848,6 +918,7 @@ section.details {
   input[type="text"] {
     width: 500px;
   }
+
   input#group-users {
     width: 600px;
   }
@@ -868,40 +939,48 @@ section.details {
   .d-icon-check {
     color: var(--success);
   }
+
   .d-icon-xmark {
     color: var(--danger);
   }
 }
 
-@media all and (min-width: 320px) and (max-width: 500px) {
+@media all and (width >= 320px) and (width <= 500px) {
   .full-width {
     margin: 0;
   }
+
   .site-settings-nav {
     width: 100%;
   }
+
   .site-settings-detail {
     width: 100%;
     padding: 0;
     border: none;
+
     .settings .setting {
       .setting-label {
         float: left;
         width: 100%;
+
         h3 {
           margin-bottom: 5px;
           font-weight: bold;
           margin-top: 25px;
         }
       }
+
       .setting-value {
         width: 100%;
       }
     }
   }
+
   .content-editor {
     width: 100%;
   }
+
   div.ac-wrap {
     width: 100% !important;
     box-sizing: border-box;
@@ -911,17 +990,21 @@ section.details {
   .dashboard-right {
     width: 100%;
   }
+
   .dashboard-stats {
     margin: 0;
   }
+
   .badges {
     .current-badge {
       margin: 70px 0 0 0;
     }
+
     .current-badge-actions {
       padding: 0;
     }
   }
+
   .customize .content-list,
   .customize .current-style {
     width: 100%;
@@ -1002,6 +1085,7 @@ table#user-badges {
       }
     }
   }
+
   .values {
     margin-bottom: 0.5em;
   }
@@ -1054,25 +1138,31 @@ table#user-badges {
     flex-flow: row wrap;
     margin-left: -0.25em;
     margin-top: -0.125em;
+
     .new-value-input {
       flex: 1 0 0px;
     }
+
     .value-input,
     .new-value-input {
       margin-top: 0.125em;
+
       &:last-of-type {
         margin-left: 0.25em;
       }
     }
+
     .remove-value-btn {
       margin-left: 0.25em;
       margin-top: 0.125em;
     }
+
     .add-value-btn {
       @include value-btn;
       margin-left: 0.25em;
       margin-top: 0.125em;
     }
+
     .new-value-input {
       margin-left: 0.25em;
     }
@@ -1083,10 +1173,12 @@ table#user-badges {
   .add-value-btn {
     margin-bottom: 9px;
   }
+
   .value {
     .value-input:last-of-type {
       margin-left: 2.35em;
     }
+
     .new-value-input:first-of-type {
       margin-right: 2.15em;
       margin-left: 0.25em;
diff --git a/app/assets/stylesheets/common/admin/admin_bulk_users_delete_modal.scss b/app/assets/stylesheets/common/admin/admin_bulk_users_delete_modal.scss
index 4789926f4ba..83fc2320bb9 100644
--- a/app/assets/stylesheets/common/admin/admin_bulk_users_delete_modal.scss
+++ b/app/assets/stylesheets/common/admin/admin_bulk_users_delete_modal.scss
@@ -6,16 +6,19 @@
     padding: 1em;
     overflow-y: auto;
   }
+
   &__progress-line {
     overflow-anchor: none;
 
     &.-success {
       color: var(--success);
     }
+
     &.-error {
       color: var(--danger);
     }
   }
+
   &__progress-anchor {
     overflow-anchor: auto;
     height: 1px;
diff --git a/app/assets/stylesheets/common/admin/admin_config_area.scss b/app/assets/stylesheets/common/admin/admin_config_area.scss
index 61c22029aed..cf1730a32c5 100644
--- a/app/assets/stylesheets/common/admin/admin_config_area.scss
+++ b/app/assets/stylesheets/common/admin/admin_config_area.scss
@@ -3,6 +3,7 @@
     margin-bottom: 1em;
   }
 }
+
 .admin-config-area-card {
   padding: 20px 5px 20px 20px;
   border: 1px solid var(--primary-low);
@@ -31,6 +32,7 @@
   &__control-group-horizontal {
     display: flex;
     margin-bottom: 18px;
+
     label {
       margin-right: 1em;
     }
@@ -46,6 +48,7 @@
     align-items: center;
     flex: 1;
   }
+
   &__content {
     margin-top: 0.5rem;
     padding-right: 15px;
diff --git a/app/assets/stylesheets/common/admin/admin_filter.scss b/app/assets/stylesheets/common/admin/admin_filter.scss
index 505b5084e74..a7ab4f12784 100644
--- a/app/assets/stylesheets/common/admin/admin_filter.scss
+++ b/app/assets/stylesheets/common/admin/admin_filter.scss
@@ -6,13 +6,14 @@
 
 .admin-filter__input-container {
   min-width: 50%;
-  @media screen and (max-width: 500px) {
+  @media screen and (width <= 500px) {
     width: 100%;
   }
+
   input {
     min-width: 15em;
     margin: 0;
-    @media screen and (max-width: 500px) {
+    @media screen and (width <= 500px) {
       box-sizing: border-box;
       width: 100%;
     }
diff --git a/app/assets/stylesheets/common/admin/admin_intro.scss b/app/assets/stylesheets/common/admin/admin_intro.scss
index e503d9e7093..6965869b1e1 100644
--- a/app/assets/stylesheets/common/admin/admin_intro.scss
+++ b/app/assets/stylesheets/common/admin/admin_intro.scss
@@ -13,18 +13,22 @@
     vertical-align: top;
     margin-top: 5px;
   }
+
   .create-actions {
     margin-bottom: 1em;
   }
+
   .content-wrapper {
     display: inline-block;
     vertical-align: top;
     width: 65%;
+
     h1 {
       display: inline-block;
       line-height: var(--line-height-medium);
     }
   }
+
   .external-link {
     display: block;
     margin-bottom: 5px;
@@ -33,9 +37,11 @@
   @include breakpoint(mobile-extra-large) {
     width: 100%;
     margin: 2em 0;
+
     .content-wrapper {
       width: 100%;
     }
+
     img {
       display: none;
     }
diff --git a/app/assets/stylesheets/common/admin/admin_report.scss b/app/assets/stylesheets/common/admin/admin_report.scss
index af979099241..ecbf5eddcfc 100644
--- a/app/assets/stylesheets/common/admin/admin_report.scss
+++ b/app/assets/stylesheets/common/admin/admin_report.scss
@@ -61,6 +61,7 @@
 
     &.no-change {
       color: var(--primary-medium);
+
       .d-icon {
         display: none;
       }
@@ -97,7 +98,7 @@
     }
 
     .d-icon {
-      color: currentColor;
+      color: currentcolor;
       font-size: var(--font-up-5);
       display: block;
       margin: 0.25em auto;
@@ -212,7 +213,7 @@
   border-bottom: 1px solid var(--primary-low);
   padding-bottom: 0.5em;
 
-  @media screen and (max-width: 400px) {
+  @media screen and (width <= 400px) {
     flex-wrap: wrap;
   }
 
@@ -227,7 +228,6 @@
 
 .admin-reports-list {
   --d-border-radius: var(--space-0);
-
   display: flex;
   flex-wrap: wrap;
   list-style-type: none;
@@ -237,7 +237,6 @@
     padding-top: 0;
 
     .admin-section-landing-item {
-      margin-bottom: 0;
       padding: var(--space-4);
       border-radius: var(--d-border-radius);
       outline: 1px solid var(--primary-low);
diff --git a/app/assets/stylesheets/common/admin/admin_report_counters.scss b/app/assets/stylesheets/common/admin/admin_report_counters.scss
index e26f7daa63d..6b0565ef230 100644
--- a/app/assets/stylesheets/common/admin/admin_report_counters.scss
+++ b/app/assets/stylesheets/common/admin/admin_report_counters.scss
@@ -26,7 +26,7 @@
         }
       }
 
-      @media screen and (max-width: 400px) {
+      @media screen and (width <= 400px) {
         &.title .d-icon {
           display: none;
         }
@@ -43,6 +43,7 @@
           color: var(--success);
         }
       }
+
       &.high-trending-down,
       &.trending-down {
         .d-icon {
diff --git a/app/assets/stylesheets/common/admin/admin_report_table.scss b/app/assets/stylesheets/common/admin/admin_report_table.scss
index c1a91227ff3..6ac9c589c44 100644
--- a/app/assets/stylesheets/common/admin/admin_report_table.scss
+++ b/app/assets/stylesheets/common/admin/admin_report_table.scss
@@ -50,6 +50,7 @@
       &:hover {
         color: var(--primary-medium);
         background: var(--primary-low);
+
         .d-icon {
           color: var(--primary-medium);
         }
diff --git a/app/assets/stylesheets/common/admin/admin_table.scss b/app/assets/stylesheets/common/admin/admin_table.scss
index ea04fbad7e9..249fc0a933b 100644
--- a/app/assets/stylesheets/common/admin/admin_table.scss
+++ b/app/assets/stylesheets/common/admin/admin_table.scss
@@ -71,7 +71,6 @@
   .status-label {
     --d-border-radius: var(--space-4);
     --status-icon-diameter: 8px;
-
     display: flex;
     flex-wrap: nowrap;
     width: fit-content;
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index d29bf07dda4..0445f9ab3e0 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -1,5 +1,4 @@
 // Styles for admin/api
-
 .d-admin-table.web-hooks {
   .d-admin-row__overview.payload-url {
     word-wrap: break-word;
@@ -24,7 +23,6 @@
 }
 
 // Api keys
-
 .admin-api-keys {
   .api-key-show {
     .form-element,
@@ -43,8 +41,10 @@
           margin: 0;
         }
       }
+
       &.label-area {
         width: 25%;
+
         label {
           margin-right: 1em;
         }
@@ -59,18 +59,22 @@
   .api-key {
     padding: 10px;
     margin-bottom: 10px;
+
     .form-element,
     .form-element-desc {
       float: left;
       padding: 0.5em 0;
+
       &.input-area {
         input[type="checkbox"] {
           margin-top: 0.5em;
         }
+
         .ac-wrap {
           width: 50% !important;
         }
       }
+
       &.label-area {
         label {
           text-align: left;
@@ -78,20 +82,24 @@
         }
       }
     }
+
     .controls {
       float: right;
       text-align: left;
       width: 50%;
     }
+
     .scopes-title {
       margin-top: 20px;
     }
   }
+
   .scopes-table.grid {
     margin: 20px 0;
 
     tr {
       grid-template-columns: repeat(4, 1fr);
+
       input {
         margin-bottom: 2px;
       }
@@ -127,9 +135,11 @@
   .tip.good:empty {
     display: none;
   }
+
   input {
     max-width: calc(100% - 10px);
   }
+
   .select-kit,
   .select-kit.multi-select {
     width: 100%;
@@ -159,15 +169,19 @@
     padding-bottom: 10px;
     border-bottom: var(--primary-low) 1px solid;
   }
+
   .filters {
     border-bottom: var(--primary-low) 1px solid;
+
     .filter {
       margin-bottom: 1em;
     }
+
     label .d-icon {
       margin-right: 0.25em;
     }
   }
+
   .instructions {
     margin-top: 5px;
   }
@@ -199,6 +213,7 @@
   li {
     padding: 2px 0;
   }
+
   .col {
     display: inline-block;
     padding-top: 6px;
@@ -206,38 +221,49 @@
     overflow-y: auto;
     overflow-x: hidden;
   }
+
   .col.heading {
     font-weight: bold;
     padding: 4px 0;
   }
+
   .col.heading.actions {
     padding: 4px 0;
   }
+
   .col.first {
     width: 90px;
   }
+
   .col.event-id {
     width: 90px;
   }
+
   .col.timestamp {
     width: 180px;
   }
+
   .col.completion {
     width: 250px;
   }
+
   .col.actions {
     padding-top: 0;
+
     a {
       text-decoration: underline;
     }
   }
+
   .details {
     display: block;
     margin-top: 1rem;
   }
+
   label {
     font-size: var(--font-0);
   }
+
   &.content-list {
     width: 100%;
   }
@@ -259,9 +285,11 @@
 .hook-event {
   display: inline-block;
   width: 100%;
+
   label {
     display: inline-block;
   }
+
   p {
     margin: 0 0 5px 25px;
   }
diff --git a/app/assets/stylesheets/common/admin/backups.scss b/app/assets/stylesheets/common/admin/backups.scss
index 05127484ac8..299640b5639 100644
--- a/app/assets/stylesheets/common/admin/backups.scss
+++ b/app/assets/stylesheets/common/admin/backups.scss
@@ -1,5 +1,4 @@
 // Styles for /admin/backups
-
 .admin-backups {
   .before-backup-list-outlet {
     margin-top: 1em;
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index 5088d6fb559..90db3e5b59e 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -1,15 +1,16 @@
 // Styles for admin/badges
 .admin-badges {
   // flex page layout
-
   .badges {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
+
     .badges-header {
       display: flex;
       align-items: center;
       flex: 1 0 100%;
+
       .create-new-badge {
         margin-left: auto;
         display: flex;
@@ -17,6 +18,7 @@
         gap: 0.5em;
       }
     }
+
     .content-list {
       flex: 0 0 27%;
     }
@@ -29,14 +31,17 @@
       border-right: 1px solid var(--primary-low);
       border-left: 1px solid var(--primary-low);
       border-bottom: 1px solid var(--primary-low);
+
       .admin-badge-list-item {
         &:first-child {
           border-top: none;
         }
+
         &:last-child {
           border-top: none;
         }
       }
+
       .list-badge {
         float: right;
         font-size: var(--font-down-1);
@@ -47,6 +52,7 @@
         border-radius: 3px;
       }
     }
+
     .user-badge {
       border: none;
       background-color: unset;
@@ -138,6 +144,7 @@
     &.success {
       color: var(--success);
     }
+
     &.failure {
       color: var(--danger);
     }
@@ -149,9 +156,11 @@
   .badge-groupings {
     margin-bottom: 10px;
   }
+
   .badge-groupings-list {
     list-style: none;
     margin: 0;
+
     .badge-grouping-item {
       border-bottom: 1px solid var(--primary-low);
       display: flex;
@@ -159,6 +168,7 @@
       align-items: center;
       padding: 5px 0;
     }
+
     .badge-grouping {
       .badge-grouping-name-input {
         margin: 0;
@@ -179,13 +189,16 @@
     background-color: var(--primary-low);
     white-space: pre-wrap;
   }
+
   .count-warning {
     background-color: var(--danger-low);
     margin-bottom: 5px;
     padding: 10px;
+
     p {
       margin: 0;
     }
+
     .heading {
       color: var(--danger);
       font-weight: bold;
diff --git a/app/assets/stylesheets/common/admin/customize-install-theme.scss b/app/assets/stylesheets/common/admin/customize-install-theme.scss
index f49c66df338..0b95250ecd1 100644
--- a/app/assets/stylesheets/common/admin/customize-install-theme.scss
+++ b/app/assets/stylesheets/common/admin/customize-install-theme.scss
@@ -4,9 +4,11 @@
     .install-theme-items {
       flex: 0 0 150px;
     }
+
     .install-theme-content {
       flex: 1 1 100%;
     }
+
     .select-kit {
       width: 100%;
     }
@@ -34,13 +36,14 @@
   label {
     display: block;
     padding: 10px 30px 10px 10px;
-    margin-bottom: 0px;
+    margin-bottom: 0;
     cursor: pointer;
   }
 
   input:checked + label {
     color: var(--secondary);
     background-color: var(--tertiary);
+
     + .d-icon {
       display: block;
       color: var(--secondary);
@@ -57,6 +60,7 @@
 
 .install-theme-content {
   width: calc(100% - 20px);
+
   input[type="file"] {
     width: 100%;
     overflow: hidden; // Chrome needs this
@@ -64,7 +68,7 @@
 }
 
 .install-theme-items + .install-theme-content {
-  padding: 0px 0px 10px 20px;
+  padding: 0 0 10px 20px;
   width: calc(100% - 200px);
 }
 
@@ -82,7 +86,7 @@
 
 .popular-theme-item {
   border-bottom: 1px solid var(--primary-low);
-  padding: 8px 0px;
+  padding: 8px 0;
   display: flex;
   align-items: center;
 
@@ -90,8 +94,10 @@
     flex-direction: column;
     align-items: initial;
   }
+
   .popular-theme-name {
     flex: 1;
+
     .popular-theme-type {
       font-weight: normal;
       font-size: var(--font-down-2);
@@ -101,6 +107,7 @@
     a {
       color: var(--primary-very-high);
       font-weight: bold;
+
       &:hover,
       &:visited,
       &:active {
@@ -113,6 +120,7 @@
       padding-right: 20px;
     }
   }
+
   .popular-theme-buttons {
     @include breakpoint(mobile-extra-large) {
       display: flex;
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 479e6d2cff4..29833de8f33 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -1,9 +1,9 @@
 // Customize area
-
 .email-template {
   input {
     width: 100%;
   }
+
   label {
     font-weight: bold;
   }
@@ -12,6 +12,7 @@
 .create-theme-modal {
   div.input {
     margin-bottom: 12px;
+
     .label {
       width: 20%;
       display: inline-block;
@@ -29,6 +30,7 @@
     width: 100%;
     height: 100%;
     min-height: 300px;
+
     .ace_editor {
       position: absolute;
       left: 0;
@@ -49,16 +51,19 @@
   .admin-container {
     padding: 0;
   }
+
   .error-message,
   .raw-error {
     margin-top: 5px;
     margin-bottom: 5px;
   }
+
   .error-message {
     .fa {
       color: var(--danger);
     }
   }
+
   .raw-error {
     background-color: var(--primary-very-low);
     padding: 5px;
@@ -75,13 +80,16 @@
   /* TODO: Remove when admin header has been added to all /customize pages */
   h1 {
     margin-bottom: 10px;
+
     input {
       margin-bottom: 0;
       font-size: var(--font-down-2);
+
       .ios-device & {
         font-size: var(--font-down-2);
       }
     }
+
     &.d-page-header__title {
       margin: 0;
     }
@@ -104,15 +112,18 @@
     padding-left: 10px;
     padding-right: 10px;
   }
+
   .admin-footer {
     margin-top: 20px;
   }
+
   .color-schemes li {
     .d-icon {
       margin-right: 0.25em;
       color: var(--primary-medium);
     }
   }
+
   .show-current-style {
     display: inline-block;
     vertical-align: top;
@@ -128,12 +139,15 @@
         min-width: 0;
         overflow-wrap: anywhere;
       }
+
       input {
         margin: 0;
       }
+
       .btn {
         margin-left: 0.5em;
       }
+
       a {
         font-size: var(--font-down-2);
       }
@@ -165,6 +179,7 @@
     a.license-url {
       display: inline-block;
       margin-right: 10px;
+
       .d-icon {
         margin-left: 5px;
       }
@@ -175,6 +190,7 @@
       font-weight: bold;
       margin-bottom: 7px;
     }
+
     .control-unit {
       margin-top: 0.5em;
       margin-bottom: 2em;
@@ -184,11 +200,11 @@
         justify-content: space-between;
         width: 79.7%;
 
-        @media screen and (max-width: 700px) {
+        @media screen and (width <= 700px) {
           width: 100%;
         }
 
-        @media screen and (min-width: 700px) and (max-width: 768px) {
+        @media screen and (width >= 700px) and (width <= 768px) {
           width: 73%;
         }
 
@@ -198,15 +214,19 @@
         }
       }
     }
+
     .control {
       margin-bottom: 10px;
     }
+
     .description {
       margin-bottom: 12px;
     }
+
     .theme-controls {
       display: flex;
       flex-wrap: wrap;
+
       .btn {
         margin: 0 0.5em 0.5em 0;
       }
@@ -215,25 +235,32 @@
     &.color-scheme .admin-controls {
       display: flex;
       padding: 1em;
+
       label {
         margin-bottom: 0;
+
         input[type="checkbox"] {
           margin-top: 0;
         }
       }
+
       .pull-left {
         width: 70%;
       }
+
       .pull-right {
         width: 30%;
       }
     }
   }
+
   .add-component-button {
     vertical-align: middle;
   }
+
   .themes-list {
     display: inline-block;
+
     .create-actions {
       margin-top: 0.5em;
     }
@@ -243,6 +270,7 @@
     width: 100%;
     display: flex;
     border: 1px solid var(--primary-low);
+
     .tab {
       border: none;
       padding: 1em;
@@ -250,11 +278,13 @@
       box-sizing: border-box;
       text-align: center;
       background: var(--d-nav-bg-color);
+
       &.themes-tab {
         border-top-right-radius: 0;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
       }
+
       &.components-tab {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
@@ -266,10 +296,12 @@
         &:hover {
           color: var(--d-nav-color--hover);
           background: var(--d-nav-bg-color--hover);
+
           &.active {
             color: var(--d-nav-color--active);
             background: var(--d-nav-bg-color--active);
           }
+
           .d-icon {
             color: inherit;
           }
@@ -278,7 +310,7 @@
 
       &.active {
         position: relative;
-        @include nav-active();
+        @include nav-active;
       }
     }
 
@@ -286,6 +318,7 @@
       @include ellipsis;
     }
   }
+
   .themes-list-search {
     display: flex;
     align-items: center;
@@ -299,6 +332,7 @@
       position: absolute;
       padding-left: 0.5em;
     }
+
     &__input {
       width: 100%;
       height: 100%;
@@ -328,17 +362,19 @@
       white-space: nowrap;
       margin-right: 1em;
     }
+
     &__input {
       margin-right: 0.5em;
+
       summary {
         width: auto;
       }
     }
   }
+
   .themes-list-filter,
   .themes-list-search {
     color: var(--primary);
-    border-bottom: 1px solid var(--primary-low);
     display: flex;
     border-right: 1px solid var(--primary-low);
     border-bottom: 1px solid var(--primary-low);
@@ -350,10 +386,10 @@
     max-height: 60vh;
     border-bottom-right-radius: var(--d-border-radius);
     border-bottom-left-radius: var(--d-border-radius);
-    @media screen and (max-height: 1000px) {
+    @media screen and (height <= 1000px) {
       max-height: 50vh;
     }
-    @media screen and (max-height: 800px) {
+    @media screen and (height <= 800px) {
       max-height: 40vh;
     }
     border-right: 1px solid var(--primary-low);
@@ -364,6 +400,7 @@
     &__item:last-child {
       border-bottom: none;
     }
+
     &__item {
       color: var(--primary);
       border-bottom: 1px solid var(--primary-low);
@@ -377,6 +414,7 @@
       &.inactive-theme {
         color: var(--primary-high);
         background: var(--primary-very-low);
+
         &:not(.selected):hover {
           color: var(--primary);
         }
@@ -392,14 +430,17 @@
           padding-left: 0.33em;
           padding-top: 1em;
         }
+
         .btn.select-inactive-mode {
           padding-left: 0;
           padding-top: 0;
           padding-bottom: 0;
         }
       }
-      &:not(.inactive-indicator):not(.selected):hover {
+
+      &:not(.inactive-indicator, .selected):hover {
         background-color: var(--primary-very-low);
+
         .component {
           border-color: var(--primary-low-mid);
         }
@@ -408,17 +449,21 @@
       &.selected {
         color: var(--secondary);
         background-color: var(--tertiary);
+
         .components-list {
           color: var(--secondary);
         }
       }
+
       &:not(.selected) {
         .broken-indicator {
           color: var(--danger);
         }
+
         .fa {
           opacity: 0.7;
         }
+
         .default-indicator {
           color: var(--success);
         }
@@ -433,6 +478,7 @@
         display: flex;
         align-items: center;
         @include line-clamp(4);
+
         .icons {
           margin-left: auto;
         }
@@ -440,13 +486,16 @@
         .cancel-select-inactive-mode {
           margin-left: auto;
         }
+
         .btn-delete {
           font-size: var(--font-down-1);
           margin-left: 0.5em;
+
           svg {
             margin-right: 0.5em;
           }
         }
+
         input {
           margin-top: 0;
         }
@@ -496,6 +545,7 @@
     .theme-setting {
       min-height: 35px;
     }
+
     .theme-translation {
       padding-bottom: 0;
       margin-top: 18px;
@@ -505,16 +555,19 @@
         height: unset;
       }
     }
+
     .setting-label {
       @include breakpoint(tablet, min-width) {
         width: 25%;
       }
       word-wrap: break-word;
+
       h3 {
         margin-top: 0;
         margin-bottom: 0.5rem;
       }
     }
+
     .setting {
       padding-bottom: 0;
     }
@@ -555,6 +608,7 @@
     width: 100%;
     padding: 0;
     margin: 0;
+
     .wrapper {
       position: absolute;
       top: 20px;
@@ -568,9 +622,11 @@
   .current-style {
     float: left;
   }
+
   .content-list ul {
     margin-bottom: 10px;
   }
+
   .current-style {
     width: 100%;
 
@@ -633,9 +689,11 @@
         top: 80px;
         width: 100%;
       }
+
       .admin-footer {
         margin-top: 10px;
       }
+
       .ace-wrapper {
         height: calc(100vh - 200px);
       }
@@ -658,6 +716,7 @@
     .status-actions {
       float: right;
       margin-top: 7px;
+
       span {
         margin-right: 10px;
       }
@@ -666,6 +725,7 @@
     .buttons {
       float: left;
       width: 200px;
+
       .saving {
         padding: 5px 0 0 0;
         margin-left: 10px;
@@ -674,11 +734,13 @@
       }
     }
   }
+
   .color-scheme {
     .controls {
       display: flex;
       align-items: center;
       margin-bottom: 1em;
+
       button:not(:last-child),
       a {
         margin-right: 10px;
@@ -693,32 +755,41 @@
       display: block;
     }
   }
+
   .colors {
     thead th {
       border: none;
     }
+
     td.hex {
       width: 160px;
+
       .color-picker {
         display: inline-flex;
       }
     }
+
     td.actions {
       width: 200px;
     }
+
     .color-picker input {
       width: 80px;
       margin-bottom: 0;
     }
+
     th.overridden {
       text-align: right;
     }
+
     .color-input {
       display: flex;
     }
+
     h3 {
       margin: 0;
     }
+
     .description {
       margin: 0.15em 0 0;
       color: var(--primary-high);
@@ -742,24 +813,29 @@
   .removable-list {
     list-style: none;
     margin-left: 0;
+
     li {
       &.disabled-child {
         .child-link {
           color: var(--primary-medium);
+
           &:hover {
             text-decoration: underline;
           }
         }
       }
+
       .btn {
         margin-left: 5px;
       }
       display: table-row;
+
       .col.child-link {
         padding-right: 10px;
         padding-bottom: 10px;
         min-width: 80px;
       }
+
       .col {
         display: table-cell;
       }
@@ -771,10 +847,12 @@
   input[type="file"] {
     display: block;
     margin-bottom: 0.25em;
+
     + label {
       color: var(--primary-medium);
     }
   }
+
   label {
     display: inline-block;
   }
@@ -786,11 +864,13 @@
 
 .public-key {
   margin-top: 1em;
+
   textarea {
     cursor: auto;
     min-height: 220px;
     margin-bottom: 0;
   }
+
   button {
     position: absolute;
     top: 0;
@@ -817,6 +897,7 @@
     }
   }
 }
+
 .admin-config-area__settings-no-results {
   padding-left: 18px;
 }
@@ -833,38 +914,46 @@
 // embedding
 .embeddable-hosts {
   margin-bottom: 2em;
+
   table.grid {
     margin-bottom: 1em;
+
     .tag-chooser,
     .user-chooser {
       width: 100%;
     }
+
     tr td {
       word-wrap: break-word;
       max-width: 25vw;
       align-self: start;
     }
+
     td.controls {
       min-width: 6em;
     }
+
     .select-kit.combo-box.category-chooser {
       width: calc(100% - 10px);
     }
   }
-  @media screen and (max-width: 880px) {
+  @media screen and (width <= 880px) {
     table.grid {
       thead {
         display: none;
       }
+
       div.label {
         display: block;
         font-size: var(--font-down-1);
         color: var(--primary-medium);
       }
+
       td.controls,
       td.editing-controls {
         align-self: end;
       }
+
       tr {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
@@ -872,16 +961,18 @@
     }
   }
 
-  @media screen and (max-width: 580px) {
+  @media screen and (width <= 580px) {
     table.grid {
       tr td.editing-input {
         grid-column-start: 1;
         grid-column-end: 4;
         max-width: 100%;
+
         input {
           width: calc(100% - 20px);
         }
       }
+
       td.editing-controls {
         margin-top: 1em;
         max-width: 100%;
@@ -892,6 +983,7 @@
   @include breakpoint(mobile-medium) {
     table.grid tr {
       grid-template-columns: repeat(2, 1fr);
+
       td.controls {
         text-align: left;
       }
@@ -906,6 +998,7 @@
         color: var(--primary-medium);
       }
     }
+
     svg.d-icon {
       color: var(--primary-low-mid);
     }
@@ -916,14 +1009,17 @@
   h2 {
     margin-bottom: 1em;
   }
+
   .user-field {
     padding-block: 0.5em;
     margin-bottom: 1em;
     border-bottom: 1px solid var(--primary-low);
+
     .form-display {
       width: 25%;
       float: left;
     }
+
     .clearfix {
       clear: both;
     }
@@ -948,6 +1044,7 @@
     padding: 7px;
     margin-bottom: 7px;
   }
+
   .robots-txt-input {
     width: 100%;
     box-sizing: border-box;
@@ -972,6 +1069,7 @@
     width: 100%;
     height: calc(100vh - 480px);
     min-height: 200px;
+
     .ace_editor {
       position: absolute;
       left: 0;
@@ -1027,6 +1125,7 @@
     .footer-buttons {
       display: flex;
       gap: 0.5rem;
+
       .btn-danger {
         margin-left: auto;
       }
diff --git a/app/assets/stylesheets/common/admin/customize_themes_show_schema.scss b/app/assets/stylesheets/common/admin/customize_themes_show_schema.scss
index d1e030e0cb2..430f603a09f 100644
--- a/app/assets/stylesheets/common/admin/customize_themes_show_schema.scss
+++ b/app/assets/stylesheets/common/admin/customize_themes_show_schema.scss
@@ -8,9 +8,10 @@
     align-items: center;
     gap: 0.25em;
     color: var(--tertiary);
+
     .d-icon {
       font-size: var(--font-down-1);
-      color: currentColor;
+      color: currentcolor;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index da1cd305bbb..16246bf751a 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -22,7 +22,7 @@
     overflow-x: auto;
 
     // Fade-out for horizontal scroll nav
-    &:before {
+    &::before {
       content: "";
       position: absolute;
       width: 10px;
@@ -34,10 +34,11 @@
         rgba(var(--secondary-rgb), 0)
       );
     }
-    &:after {
+
+    &::after {
       content: "";
       position: absolute;
-      right: 0px;
+      right: 0;
       width: 30px;
       height: 100%;
       background: linear-gradient(
@@ -108,7 +109,7 @@
       border-bottom: 1px solid var(--primary-low);
       padding-bottom: 0.5em;
 
-      @media screen and (max-width: 400px) {
+      @media screen and (width <= 400px) {
         flex-wrap: wrap;
       }
 
@@ -196,13 +197,15 @@
       }
     }
 
-    @media screen and (max-width: 400px) {
+    @media screen and (width <= 400px) {
       flex-wrap: wrap;
+
       .storage-stats,
       .last-dashboard-update {
         flex: 1 1 100%;
         text-align: left;
       }
+
       .last-dashboard-update {
         display: block;
         margin: 0 20px 20px 20px;
@@ -211,13 +214,16 @@
         border-left: none;
       }
     }
+
     .last-dashboard-update {
       text-align: center;
       display: flex;
       flex-direction: column;
       justify-content: center;
+
       div {
         align-self: center;
+
         h4 {
           margin-bottom: 0;
         }
@@ -274,6 +280,7 @@
       display: flex;
       align-items: center;
       color: var(--primary-medium);
+
       .btn {
         margin-right: 1em;
       }
@@ -403,21 +410,27 @@
         color: var(--primary-high);
       }
     }
+
     &.user-basic,
     &.user-member {
       background: var(--bronze);
+
       .label {
         color: var(--secondary);
       }
     }
+
     &.user-regular {
       background: var(--silver);
+
       .label {
         color: var(--secondary);
       }
     }
+
     &.user-leader {
       background: var(--gold);
+
       .label {
         color: var(--secondary);
       }
@@ -534,7 +547,7 @@
   .update-header {
     flex: 1 1 100%;
 
-    @media screen and (max-width: 650px) {
+    @media screen and (width <= 650px) {
       margin: 0;
     }
 
@@ -590,26 +603,33 @@
     @include breakpoint(medium) {
       max-width: unset;
     }
+
     .face {
       margin: 0 0.75em 0 0;
       font-size: var(--font-up-3);
     }
   }
+
   &.critical .version-notes .normal-note {
     display: none;
   }
+
   &.normal .version-notes .critical-note {
     display: none;
   }
+
   .fa {
     font-size: var(--font-up-4);
   }
+
   .up-to-date {
     color: var(--success);
   }
+
   .updates-available {
     color: var(--danger);
   }
+
   .critical-updates-available {
     color: var(--danger);
   }
@@ -642,6 +662,7 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
+
     .btn {
       margin-left: 1em;
     }
@@ -654,6 +675,7 @@
     font-size: var(--font-up-1);
     margin-bottom: 1em;
   }
+
   .admin-new-feature-item__learn-more {
     display: inline-block;
   }
@@ -674,10 +696,12 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: 1em;
+
   .d-toggle-switch {
     margin-left: 1em;
     align-items: flex-start;
   }
+
   p {
     margin-top: 0;
   }
@@ -686,9 +710,11 @@
 .admin-new-feature-item__screenshot {
   margin-bottom: 1em;
 }
+
 .admin-new-feature-item__tooltip-header {
   font-weight: bold;
 }
+
 .admin-new-feature-item__tooltip-content {
   margin-top: 0.5em;
 }
@@ -697,9 +723,11 @@
   display: flex;
   align-items: flex-start;
   border-bottom: 1px solid var(--primary-low);
+
   &:not(:first-child) {
     margin-top: var(--space-4);
   }
+
   &:last-child {
     border-bottom: none;
   }
@@ -713,15 +741,18 @@
   &__content {
     width: 100%;
   }
+
   &__header {
     display: flex;
     align-items: baseline;
     font-weight: bold;
     margin-bottom: 0.5em;
   }
+
   &__screenshot {
     width: 100%;
   }
+
   &__new-feature-version {
     margin-left: auto;
     color: var(--primary-low-mid);
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index c4c620af3f1..cb1403cd4c1 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -5,29 +5,35 @@
   .filters input {
     width: 100%;
   }
+
   .time {
     width: 50px;
   }
+
   .reply-key {
     display: block;
     font-size: var(--font-down-1);
     color: var(--primary-medium);
   }
+
   .username div {
     max-width: 180px;
     @include ellipsis;
   }
+
   .addresses p {
     margin: 2px 0;
     max-width: 200px;
     @include ellipsis;
   }
+
   .sent-email-address a {
     // prevent long email addresses from breaking the layout
     display: inline-block;
     max-width: 300px;
     overflow-wrap: break-word;
   }
+
   .email-address {
     max-width: 250px;
     @include ellipsis;
@@ -35,6 +41,7 @@
 
   .email-details {
     text-align: right;
+
     a {
       color: var(--primary-high);
     }
@@ -45,19 +52,24 @@
   .control-group {
     margin: 8px 0;
   }
+
   .controls {
     margin-left: 110px;
   }
+
   p {
     margin: 5px 10px;
   }
+
   .error-description {
     color: var(--primary-medium);
     font-size: var(--font-down-1);
   }
+
   hr {
     margin: 0;
   }
+
   label {
     font-weight: bold;
     float: left;
@@ -65,10 +77,12 @@
     text-align: right;
     margin: 0 10px;
   }
+
   ul {
     list-style: none;
     margin: 0 10px;
   }
+
   textarea {
     width: 95%;
     height: 150px;
@@ -87,6 +101,7 @@
   .controls {
     margin: 1em 0.5em;
   }
+
   .preview-output iframe {
     width: 100%;
     height: 600px;
@@ -138,17 +153,21 @@
       margin: 0;
       width: unset;
     }
+
     .control-group {
       textarea {
         height: 200px;
       }
+
       &:last-of-type textarea {
         height: 40px;
       }
     }
+
     .controls {
       margin: 0;
     }
+
     p {
       margin: 5px 0;
     }
diff --git a/app/assets/stylesheets/common/admin/json_schema_editor.scss b/app/assets/stylesheets/common/admin/json_schema_editor.scss
index 79d6af734b3..cece940c7d7 100644
--- a/app/assets/stylesheets/common/admin/json_schema_editor.scss
+++ b/app/assets/stylesheets/common/admin/json_schema_editor.scss
@@ -32,13 +32,14 @@
 
     > .btn-group:last-child {
       position: absolute;
-      right: 0px;
-      top: 0px;
+      right: 0;
+      top: 0;
 
       .btn {
         font-size: var(--font-down-1);
       }
     }
+
     > .btn-group {
       margin-top: 0;
       display: flex;
@@ -65,6 +66,7 @@
     th {
       vertical-align: middle;
       padding: 0.5em 0;
+
       &:last-child {
         text-align: right;
       }
@@ -102,6 +104,7 @@
     > .card-title {
       width: 100%;
       border-bottom: 1px solid var(--primary-low);
+
       > .json-editor-btn-collapse {
         float: right;
       }
diff --git a/app/assets/stylesheets/common/admin/mini_profiler.scss b/app/assets/stylesheets/common/admin/mini_profiler.scss
index 355ef193576..1dc2ab878a5 100644
--- a/app/assets/stylesheets/common/admin/mini_profiler.scss
+++ b/app/assets/stylesheets/common/admin/mini_profiler.scss
@@ -1,6 +1,5 @@
 // Some basic overrides to https://github.com/MiniProfiler/rack-mini-profiler/blob/master/lib/html/includes.scss
 // which make the badge conform to the current site theme.
-
 .profiler-queries-bg {
   z-index: z("header") - 2;
 }
diff --git a/app/assets/stylesheets/common/admin/penalty.scss b/app/assets/stylesheets/common/admin/penalty.scss
index 3e5fa827b9e..91d647f0f04 100644
--- a/app/assets/stylesheets/common/admin/penalty.scss
+++ b/app/assets/stylesheets/common/admin/penalty.scss
@@ -83,16 +83,18 @@
 
       th,
       td {
-        padding: 8px 0px;
+        padding: 8px 0;
       }
     }
   }
+
   .penalty-history {
     position: sticky;
     bottom: 0;
     background-color: var(--secondary);
     padding: 0 0 1em 0;
   }
+
   .penalty-history::before {
     position: absolute;
     content: "";
diff --git a/app/assets/stylesheets/common/admin/plugins.scss b/app/assets/stylesheets/common/admin/plugins.scss
index a5cb0147cf4..01444a9cc84 100644
--- a/app/assets/stylesheets/common/admin/plugins.scss
+++ b/app/assets/stylesheets/common/admin/plugins.scss
@@ -1,5 +1,4 @@
 // Styles for /admin/plugins
-
 .admin-contents.admin-plugins {
   .controls {
     .settings-button {
@@ -82,11 +81,11 @@
     .horizontal-overflow-nav {
       background: transparent;
 
-      &:before {
+      &::before {
         display: none;
       }
 
-      &:after {
+      &::after {
         display: none;
       }
     }
diff --git a/app/assets/stylesheets/common/admin/schema_theme_setting_editor.scss b/app/assets/stylesheets/common/admin/schema_theme_setting_editor.scss
index b49d887716a..e1820cabf32 100644
--- a/app/assets/stylesheets/common/admin/schema_theme_setting_editor.scss
+++ b/app/assets/stylesheets/common/admin/schema_theme_setting_editor.scss
@@ -26,6 +26,7 @@
         ul {
           padding: 0 calc(var(--schema-space) * 2) 0 var(--schema-space);
           margin: 0 0 1em;
+
           li:hover {
             background: var(--primary-very-low);
           }
@@ -41,6 +42,7 @@
           padding: var(--schema-space) calc(var(--schema-space) * 3)
             var(--schema-space) calc(var(--schema-space) * 2);
           gap: 0.5em;
+
           .d-icon {
             font-size: var(--font-down-3);
             margin-left: auto;
@@ -52,15 +54,17 @@
           width: 100%;
           border-bottom: 1px solid var(--primary-low);
           color: var(--primary-700);
+
           &:hover {
             color: var(--primary-800);
             background: var(--primary-very-low);
           }
 
           .schema-theme-setting-editor__tree-node-text {
-            color: currentColor;
+            color: currentcolor;
+
             .d-icon {
-              color: currentColor;
+              color: currentcolor;
               margin-left: 0;
               margin-right: var(--schema-space);
             }
@@ -120,6 +124,7 @@
             .d-icon {
               color: var(--primary-700);
             }
+
             &:hover {
               background: var(--primary-very-low);
             }
@@ -128,6 +133,7 @@
           &.--child {
             margin-left: var(--schema-space);
             border-left: 1px solid var(--primary-200);
+
             .schema-theme-setting-editor__tree-node-text {
               color: var(--primary-800);
             }
@@ -143,15 +149,16 @@
         padding: var(--schema-space);
 
         .d-icon {
-          color: currentColor;
+          color: currentcolor;
           font-size: var(--font-down-1);
         }
 
         &:hover {
           background: var(--primary-very-low);
           color: var(--tertiary-hover);
+
           .d-icon {
-            color: currentColor;
+            color: currentcolor;
           }
         }
       }
diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss
index 2126f320bde..645148dd013 100644
--- a/app/assets/stylesheets/common/admin/settings.scss
+++ b/app/assets/stylesheets/common/admin/settings.scss
@@ -1,8 +1,8 @@
 // styles for admin/settings
-
 .settings {
   .setting {
     padding-bottom: 20px;
+
     .setting-label {
       float: left;
       width: 17.6576%;
@@ -12,27 +12,33 @@
         margin-right: 0;
         margin-left: 0;
         width: 100%;
+
         h3 {
           margin-bottom: 6px;
         }
       }
+
       .history-icon {
         opacity: 0;
         transition: opacity 0.3s;
         color: var(--primary-medium);
       }
+
       &:hover .history-icon {
         opacity: 1;
       }
     }
+
     .setting-value {
       float: left;
       width: 53%;
       padding-right: 20px;
+
       input[type="checkbox"],
       input[type="radio"] {
         flex: 0 0 auto;
       }
+
       .category-selector {
         width: 95%;
       }
@@ -40,24 +46,29 @@
         width: 100%;
         padding-right: 0;
       }
+
       .select-kit {
         width: 100% !important; // Needs !important to override hard-coded value
         @media (max-width: $mobile-breakpoint) {
           width: 100% !important; // !important overrides hard-coded mobile width of 68px
         }
       }
+
       .image-uploader {
         display: flex;
       }
+
       .uploaded-image-preview {
         background-size: contain;
         background-repeat: no-repeat;
         background-color: var(--primary-medium);
       }
     }
+
     .setting-controls {
       float: left;
     }
+
     .input-setting-string,
     .input-setting-integer,
     .input-setting-textarea {
@@ -66,9 +77,11 @@
         width: 100%;
       }
     }
+
     .input-setting-textarea {
       height: 150px;
     }
+
     .input-setting-list {
       @media (max-width: $mobile-breakpoint) {
         width: 100%;
@@ -78,6 +91,7 @@
       border: 1px solid var(--primary-low);
       border-radius: 3px;
       transition: border linear 0.2s, box-shadow linear 0.2s;
+
       li.sortable-placeholder {
         @include unselectable;
         padding: 3px 5px 3px 18px;
@@ -93,30 +107,37 @@
         height: 1em;
       }
     }
+
     .desc,
     .validation-error {
       padding-top: 3px;
       font-size: var(--font-down-1);
       line-height: var(--line-height-large);
     }
+
     .validation-error {
       color: var(--danger);
     }
+
     .desc {
       color: var(--primary-medium);
     }
+
     h3 {
       font-size: var(--font-0);
       font-weight: normal;
     }
   }
+
   .setting.overridden {
     .values input {
       background-color: var(--highlight-bg);
     }
+
     h3 {
       position: relative;
-      &:before {
+
+      &::before {
         content: "";
         position: absolute;
         top: 0.5rem;
@@ -128,6 +149,7 @@
       }
     }
   }
+
   .setting.overridden.string {
     input[type="text"],
     input[type="password"],
@@ -135,9 +157,11 @@
       background-color: var(--highlight-bg);
     }
   }
+
   .warning {
     color: var(--danger);
   }
+
   .file-types-list__button {
     margin-top: 0.5em;
     margin-bottom: 0.2em;
diff --git a/app/assets/stylesheets/common/admin/sidebar.scss b/app/assets/stylesheets/common/admin/sidebar.scss
index 24cf230a5c4..0b363213f2b 100644
--- a/app/assets/stylesheets/common/admin/sidebar.scss
+++ b/app/assets/stylesheets/common/admin/sidebar.scss
@@ -1,5 +1,6 @@
 .admin-area .sidebar-wrapper .admin-panel {
   background-color: var(--d-sidebar-admin-background);
+
   .sidebar-section-header-text {
     font-weight: bold;
     color: var(--primary-very-high);
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index f5c4a5bca2c..c4efcaa7c81 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -1,5 +1,4 @@
 // Styles for /admin/logs
-
 .log-details-modal {
   pre {
     white-space: pre-wrap;
@@ -10,11 +9,12 @@
 .staff-actions {
   width: 100%;
   word-wrap: break-word;
-  @media screen and (min-width: 550px) and (max-width: 767px) {
+  @media screen and (width >= 550px) and (width <= 767px) {
     table.staff-logs tr {
       display: grid;
       grid-template-rows: auto auto;
       grid-template-columns: repeat(4, 1fr);
+
       td {
         align-self: start;
         padding: 2px 4px;
@@ -24,11 +24,14 @@
     td.created-at {
       grid-column-start: -1;
     }
+
     td.subject {
       grid-row: 2;
       grid-column-start: 2;
+
       div.subject {
         display: flex;
+
         a {
           word-wrap: break-word;
           min-width: 25px;
@@ -53,29 +56,35 @@
   @include breakpoint(mobile-extra-large) {
     table.staff-logs tr {
       grid-template-columns: 1fr 1fr 0.5fr;
+
       td.staff-users {
         grid-column-start: 1;
         grid-column-end: 3;
       }
+
       td.created-at {
         grid-row: 1;
         grid-column-start: -1;
         text-align: right;
       }
+
       td.action {
         grid-row: 2;
         grid-column-start: 1;
       }
+
       td.subject {
         grid-row: 2;
         grid-column-start: 2;
         grid-column-end: 5;
         max-width: 60vw;
       }
+
       td.details,
       td.context {
         max-width: unset;
       }
+
       td.details {
         grid-row: 3;
         grid-column-start: 1;
@@ -83,6 +92,7 @@
         padding: 0.25em 0;
         max-width: 90vw;
       }
+
       td.context {
         grid-row: 4;
         grid-column-start: 1;
@@ -94,24 +104,30 @@
   .staff-user {
     font-weight: bold;
     display: flex;
+
     a:first-of-type {
       margin-right: 0.25em;
     }
+
     .deleted-user {
       font-size: var(--font-up-2);
     }
   }
+
   .created_at {
     text-align: center;
   }
+
   td.subject,
   td.details {
     max-width: 10vw;
+
     > div {
       max-height: 100px;
       overflow-y: auto;
     }
   }
+
   td.context {
     word-break: break-all;
   }
@@ -120,17 +136,21 @@
 .staff-action-logs-controls {
   display: flex;
   align-items: center;
+
   .select-kit {
     margin: 0 0.5em;
   }
+
   button {
     margin-left: auto;
   }
   margin: 0 0 1em 0;
+
   a.filter {
     .label {
       font-weight: bold;
     }
+
     .d-icon {
       margin-left: 0.5em;
     }
@@ -144,14 +164,15 @@
 .screened-ip-controls {
   display: flex;
   flex-wrap: wrap;
+
   .screened-ip-address-form {
     .combobox {
       width: 140px;
     }
-    @media screen and (min-width: 900px) {
+    @media screen and (width >= 900px) {
       margin-left: auto;
     }
-    @media screen and (max-width: 899px) {
+    @media screen and (width <= 899px) {
       margin-top: 1em;
     }
   }
@@ -161,22 +182,24 @@ table.screened-ip-addresses {
   td.ip_address {
     min-width: 150px;
     word-wrap: break-word;
+
     input {
       width: 80%;
     }
   }
+
   td.actions {
     text-align: right;
   }
 }
 
-@media screen and (min-width: 550px) {
+@media screen and (width >= 550px) {
   table.screened-ip-addresses tr {
     grid-template-columns: repeat(5, 1fr) auto;
   }
 }
 
-@media screen and (max-width: 549px) {
+@media screen and (width <= 549px) {
   table.screened-ip-addresses tr {
     td.actions {
       grid-row: 3;
@@ -185,16 +208,19 @@ table.screened-ip-addresses {
       text-align: right;
       margin-top: 0.5em;
     }
+
     td.created_at {
       grid-row: 1;
       grid-column-start: 3;
       text-align: right;
     }
+
     td.last_match_at {
       grid-row: 2;
       grid-column-start: 3;
       text-align: right;
     }
+
     td.match_count {
       grid-row: 2;
       grid-column-start: 2;
@@ -229,11 +255,13 @@ table.screened-ip-addresses {
       grid-column-end: 3;
       word-wrap: break-word;
     }
+
     td.ip_address {
       grid-row: 2;
       grid-column-start: 1;
       grid-column-end: -1;
     }
+
     td.action {
       margin-top: 0.25em;
     }
@@ -241,7 +269,6 @@ table.screened-ip-addresses {
 }
 
 // Watched words
-
 .watched-word-box {
   display: inline-block;
   width: 250px;
@@ -279,6 +306,7 @@ table.screened-ip-addresses {
 
 .watched-words-uploader {
   display: inline-block;
+
   label {
     font-weight: normal;
   }
@@ -334,9 +362,11 @@ table.screened-ip-addresses {
     padding-top: 4px;
     vertical-align: top;
   }
+
   input.watched-word-input-field {
     min-width: 300px;
   }
+
   .select-kit.multi-select.watched-word-input-field {
     width: 300px;
     margin-bottom: 9px;
@@ -348,20 +378,20 @@ table.screened-ip-addresses {
 }
 
 // Search logs
-
 table.search-logs-list {
   td.term {
     width: 60%;
     word-wrap: break-word;
-    @media screen and (max-width: 767px) {
+    @media screen and (width <= 767px) {
       width: 100%;
     }
   }
+
   th:not(.term),
   td:not(.term) {
     text-align: center;
   }
-  @media screen and (min-width: 550px) {
+  @media screen and (width >= 550px) {
     tr {
       td.term {
         grid-column-start: 1;
@@ -375,6 +405,7 @@ table.search-logs-list {
         grid-column-start: 1;
         grid-column-end: 4;
       }
+
       th:not(.term),
       td:not(.term) {
         text-align: left;
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss
index bcce5f6374f..6ee912234f1 100644
--- a/app/assets/stylesheets/common/admin/users.scss
+++ b/app/assets/stylesheets/common/admin/users.scss
@@ -1,5 +1,4 @@
 //Styles for /admin/users
-
 .display-row.associations .value {
   width: 750px;
   @media (max-width: $mobile-breakpoint) {
@@ -14,25 +13,31 @@
   display: flex;
   align-items: center;
   padding: 10px 5px;
+
   &:nth-of-type(1) {
     border-top: 0;
   }
+
   &.highlight-danger {
     background-color: var(--danger-low);
   }
   border-top: 1px solid var(--primary-low);
-  &:before,
-  &:after {
+
+  &::before,
+  &::after {
     display: table;
     content: "";
   }
-  &:after {
+
+  &::after {
     clear: both;
   }
+
   &.secondary-emails ul {
     margin: 0;
     list-style: none;
   }
+
   .field {
     font-weight: bold;
     width: 17.65765%;
@@ -44,12 +49,14 @@
       margin-top: 5px;
     }
   }
+
   .value {
     width: 100%;
     max-width: 350px;
     min-width: 50px;
     margin-left: 12px;
     word-break: break-word;
+
     .select-kit {
       min-width: 100px;
     }
@@ -57,17 +64,21 @@
       text-align: left;
       margin-left: 0;
     }
+
     .select-kit {
       width: inherit;
     }
   }
+
   .long-value {
     margin-left: 12px;
     font-size: var(--font-down-1);
+
     button {
       margin-left: 10px;
     }
   }
+
   .controls {
     margin-left: 12px;
     @media (max-width: $mobile-breakpoint) {
@@ -75,10 +86,12 @@
       text-align: left;
       margin-left: 0;
     }
+
     .btn {
       margin-right: 5px;
     }
   }
+
   &.username,
   &.name {
     .value {
@@ -91,6 +104,7 @@
   input {
     margin-bottom: 0;
   }
+
   .users-list {
     .username .d-icon {
       color: var(--primary-medium);
@@ -103,8 +117,10 @@
     &.username {
       justify-content: start;
     }
+
     &.email {
       justify-content: start;
+
       span {
         display: flex;
         min-width: 17em;
@@ -115,6 +131,7 @@
 
   .directory-table {
     margin-top: 1em;
+
     &__column-header {
       &--username,
       &---email,
@@ -145,6 +162,7 @@
       @include breakpoint("tablet") {
         grid-column-start: 1;
         grid-column-end: -1;
+
         span {
           max-width: 100%;
         }
@@ -187,6 +205,7 @@
   .display-row {
     flex-direction: column;
     align-items: flex-start;
+
     .field,
     .value {
       width: 100%;
@@ -201,6 +220,7 @@
     word-wrap: break-word;
     max-width: 100%;
     margin: 0;
+
     button {
       margin: 5px 0;
       display: block;
diff --git a/app/assets/stylesheets/common/base/_bookmark-list.scss b/app/assets/stylesheets/common/base/_bookmark-list.scss
index d4c8d07d25c..453e29b2d20 100644
--- a/app/assets/stylesheets/common/base/_bookmark-list.scss
+++ b/app/assets/stylesheets/common/base/_bookmark-list.scss
@@ -3,6 +3,7 @@
     .texts .name {
       font-weight: normal;
     }
+
     .icons {
       font-size: var(--font-down-2);
       margin-right: 0.75em;
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 4c49eba16b9..5f497a75c73 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -1,5 +1,4 @@
 // Topic list navigation & controls
-
 .list-controls {
   background: var(--d-content-background);
 
@@ -9,10 +8,12 @@
     border: 1px solid var(--primary-medium);
     font-size: var(--font-0);
     height: 100%;
+
     &:focus {
       border-color: var(--tertiary);
     }
   }
+
   .select-kit {
     .select-kit-collection {
       max-height: 40vh;
@@ -22,6 +23,7 @@
 
 .navigation-container {
   width: 100%;
+
   --nav-space: 0.75em;
   display: flex;
   flex-wrap: wrap;
@@ -34,6 +36,7 @@
   list-style: none;
   padding: 0;
   margin: 0 0 var(--nav-space) 0;
+
   > li {
     // only target the top-level li, not dropdowns
     display: flex;
@@ -56,12 +59,15 @@
   align-items: stretch;
   margin-bottom: var(--nav-space);
   gap: var(--nav-space) 0; // used if the buttons wrap
+
   > * {
     white-space: nowrap;
+
     &:not(:last-child) {
       margin-right: 0.4em;
     }
   }
+
   .select-kit-header {
     height: 100%;
   }
@@ -70,6 +76,7 @@
       .d-button-label {
         display: none;
       }
+
       .d-icon {
         margin: 0;
       }
@@ -83,6 +90,7 @@
 
 .category-heading {
   max-width: 100%;
+
   p {
     margin-top: 0;
     line-height: var(--line-height-large);
@@ -120,16 +128,17 @@
 }
 
 // Topic list body
-
 .topic-list-item.visited .topic-list-data,
 .latest-topic-list-item.visited,
 .category-topic-link.visited {
   a.title:not(.badge-notification) {
     color: var(--primary-medium);
   }
+
   .badge-category {
     color: var(--primary-medium);
   }
+
   .discourse-tag,
   .discourse-tag:visited {
     color: var(--primary-medium);
@@ -147,6 +156,7 @@
 
 .topic-list-main-link {
   font-size: var(--font-up-1);
+
   a.title {
     padding: 15px 0;
     word-break: break-word;
@@ -176,6 +186,7 @@
     .texts .name {
       font-weight: normal;
     }
+
     .icons {
       font-size: var(--font-down-2);
       margin-right: 0.75em;
@@ -228,8 +239,9 @@
     text-align: left;
     vertical-align: middle;
   }
+
   .btn-flat .d-icon {
-    color: currentColor;
+    color: currentcolor;
   }
 
   td {
@@ -250,6 +262,7 @@
     .title:focus {
       outline: none;
     }
+
     .title:focus-visible {
       outline: none;
     }
@@ -259,6 +272,7 @@
     &.read {
       display: none;
     }
+
     .d-icon {
       vertical-align: middle;
       font-size: var(--font-down-5);
@@ -271,13 +285,16 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 0.5em;
+
     .discourse-tags {
       flex-wrap: wrap;
     }
+
     a.discourse-tag.box {
       padding-top: 0;
       padding-bottom: 0;
     }
+
     .discourse-tag.box {
       margin-right: 0.25em;
     }
@@ -298,9 +315,11 @@
           align-items: center;
           height: 1.25em;
           color: var(--primary-high);
+
           .mobile-view & {
             height: 1.1em;
           }
+
           .d-icon {
             margin-right: 5px;
           }
@@ -343,6 +362,7 @@
   .num.activity {
     a {
       padding: 15px 5px;
+
       span.relative-date {
         pointer-events: none;
       }
@@ -378,6 +398,7 @@
 .loading .topic-list {
   border: 0;
   box-shadow: none;
+
   .topic-list-item {
     background-color: transparent;
   }
@@ -406,6 +427,7 @@
     margin-bottom: 0;
     font-size: var(--font-0);
   }
+
   .spinner {
     margin-top: 40px;
   }
diff --git a/app/assets/stylesheets/common/base/activation.scss b/app/assets/stylesheets/common/base/activation.scss
index b6c27143f0e..81b185d7e5d 100644
--- a/app/assets/stylesheets/common/base/activation.scss
+++ b/app/assets/stylesheets/common/base/activation.scss
@@ -1,6 +1,5 @@
 // Styles used before the user is logged into discourse. For example, activating their
 // account or changing their email.
-
 .account-created-page,
 .activate-account-page {
   background: var(--secondary);
@@ -9,6 +8,7 @@
     padding: 0;
     height: 100%;
   }
+
   .above-main-container-outlet {
     display: none;
   }
@@ -24,7 +24,7 @@
   padding: 2rem 3rem;
   background: var(--secondary);
   margin: 10vh auto 1em auto;
-  @media screen and (max-height: 700px) {
+  @media screen and (height <= 700px) {
     margin: 1em auto 1em auto;
   }
 }
@@ -34,6 +34,7 @@
     font-size: var(--font-up-1);
     line-height: var(--line-height-large);
   }
+
   .activation-controls {
     display: flex;
     flex-wrap: wrap;
diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss
index 89af99b9332..2313ef2cd5e 100644
--- a/app/assets/stylesheets/common/base/alert.scss
+++ b/app/assets/stylesheets/common/base/alert.scss
@@ -11,6 +11,7 @@
     top: 0.265em;
     right: 0.66em;
     padding: 0;
+
     .d-icon {
       color: var(--primary-medium);
     }
@@ -20,17 +21,21 @@
     background-color: var(--success-low);
     color: var(--primary);
   }
+
   &.alert-error {
     background-color: var(--danger-low);
     color: var(--primary);
   }
+
   &.alert-warning {
     background-color: var(--highlight-bg);
     color: var(--primary);
   }
+
   &.alert-info {
     background-color: var(--tertiary-low);
     color: var(--primary);
+
     &.clickable {
       color: var(--tertiary);
       z-index: z("base");
diff --git a/app/assets/stylesheets/common/base/bbcode.scss b/app/assets/stylesheets/common/base/bbcode.scss
index f40d8ac9a7f..db2fa4a2f6d 100644
--- a/app/assets/stylesheets/common/base/bbcode.scss
+++ b/app/assets/stylesheets/common/base/bbcode.scss
@@ -1,15 +1,17 @@
 // Support for BBCode styles like colors and font sizes
-
 span {
   &.bbcode-b {
     font-weight: bold;
   }
+
   &.bbcode-i {
     font-style: italic;
   }
+
   &.bbcode-u {
     text-decoration: underline;
   }
+
   &.bbcode-s {
     text-decoration: line-through;
   }
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 35cbf8a383e..48c359c56dd 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -1,9 +1,11 @@
 .category-list {
   table-layout: fixed;
+
   .category-text-title {
     display: flex;
     align-items: baseline;
   }
+
   .category-name {
     display: inline-block;
     max-width: 100%;
@@ -11,6 +13,7 @@
     vertical-align: text-top;
     line-height: var(--line-height-medium);
   }
+
   &.with-topics {
     .subcategories-with-subcategories {
       .category-description {
@@ -18,6 +21,7 @@
       }
     }
   }
+
   &.hidden {
     display: none;
   }
@@ -32,9 +36,11 @@
     h3 {
       display: inline;
     }
+
     .category-text-title {
       display: inline-flex;
     }
+
     .stat {
       margin-left: 0.5em;
     }
@@ -66,7 +72,7 @@
 
     .parent-box-link {
       // This avoids an issue with nested links by layering links instead
-      &:before {
+      &::before {
         content: "";
         position: absolute;
         z-index: 0;
@@ -100,10 +106,8 @@
     padding: 1em;
     display: flex;
     flex-direction: column;
-
     border-width: 2px;
     border-left-width: 0;
-
     border-style: solid;
     border-color: var(--primary-low);
   }
@@ -117,11 +121,13 @@
 
 .category-boxes {
   grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+
   .category-box {
     > a {
       width: 100%;
       padding: 0;
     }
+
     .category-box-inner {
       padding: 1em;
 
@@ -148,8 +154,10 @@
 
     //  allow clicks to fall through the description text to the category below...
     pointer-events: none;
+
     .overflow {
       max-height: 6em;
+
       div a {
         //  ...but links in description should still be clickable
         pointer-events: auto;
@@ -180,11 +188,14 @@
 
     .category-title-link {
       display: flex;
+
       .category-logo {
         flex: 1 0 auto;
         margin: 0.25em 0.5em 0.5em 0;
+
         --max-height: 40px;
       }
+
       .category-text-title {
         order: 2;
         line-height: var(--line-height-medium);
@@ -192,7 +203,8 @@
         margin-bottom: 0.25em;
         word-wrap: break-word;
       }
-      &:before {
+
+      &::before {
         // This avoids an issue with nested links by layering links instead
         content: "";
         position: absolute;
@@ -222,25 +234,31 @@
   .subcategories {
     display: flex;
     flex-flow: wrap;
+
     .subcategory {
       display: flex;
       align-items: center;
       @include ellipsis;
       margin-bottom: 0.6em;
+
       .badge-category__wrapper {
         overflow: hidden;
       }
+
       .subcategory-image-placeholder {
         display: inline-block;
         margin-right: 0.6em;
         flex: 1 0 auto;
       }
+
       .subcategory-link {
         min-width: 0;
         @include ellipsis;
       }
+
       .category-logo img {
         display: inline-block;
+
         --height: 20px;
         height: var(--height);
         width: calc(var(--height) * var(--aspect-ratio));
@@ -252,6 +270,7 @@
 
 .category-boxes-with-topics {
   grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
+
   .category-box {
     padding: 0;
   }
@@ -264,6 +283,7 @@
 
   .category-box-heading {
     margin-bottom: 0.5em;
+
     a[href] {
       width: 100%;
       color: var(--primary);
@@ -272,22 +292,27 @@
 
   .featured-topics {
     margin-bottom: 1em;
+
     // we absolutely position the parent category's link so the whole box is clickable
     // to prevent this covering topic links, we need to raise the z-index
     z-index: 1;
+
     ul {
       color: var(--primary-medium);
       list-style: none;
       padding: 0;
       margin: 0;
     }
+
     li {
       padding: 4px 0;
       display: flex;
       align-items: baseline;
+
       a {
         @include line-clamp(2);
       }
+
       .d-icon {
         margin-right: 0.15em;
         width: 0.76em;
@@ -301,6 +326,7 @@
   h3,
   h4 {
     margin-bottom: 0;
+
     .d-icon {
       color: var(--primary-high);
       height: 0.76em;
@@ -309,11 +335,13 @@
       margin-right: 0.1em;
     }
   }
+
   .category-description {
     margin-top: 0.5em;
     overflow: hidden;
     color: var(--primary-high);
   }
+
   .category-logo.aspect-image {
     margin-top: 0.5em;
   }
@@ -330,9 +358,11 @@
   margin-top: 1em;
   margin-bottom: 0;
   border-top: 1px solid var(--primary-low);
+
   .category-description {
     font-size: var(--font-down-1);
   }
+
   .category-logo.aspect-image {
     --max-height: 75px;
   }
@@ -344,6 +374,7 @@
     color: var(--primary-medium);
     font-size: var(--font-down-1);
   }
+
   > .category-description,
   tr.category-description {
     display: none;
@@ -355,8 +386,8 @@
     .category {
       &.no-category-style {
         border-color: transparent;
-        border-left: 0px;
-        padding-left: 0px;
+        border-left: 0;
+        padding-left: 0;
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/colorpicker.scss b/app/assets/stylesheets/common/base/colorpicker.scss
index 47f83290193..46c7bee5dd7 100644
--- a/app/assets/stylesheets/common/base/colorpicker.scss
+++ b/app/assets/stylesheets/common/base/colorpicker.scss
@@ -1,5 +1,4 @@
 // styles for the category badge color picker
-
 .category-color-editor {
   input {
     width: 5.5em;
@@ -29,9 +28,11 @@
       padding: 0;
       flex: 0 0 auto;
       color: white;
+
       svg {
         display: none;
       }
+
       &.used-color svg {
         display: inline-flex;
         opacity: 0.8;
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 9998a91888e..db45afc6678 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -29,13 +29,14 @@ html.composer-open {
     .submit-panel .mobile-preview {
       display: none;
     }
+
     .d-editor-preview-wrapper {
       display: none;
       flex: 0;
     }
   }
 
-  @media screen and (max-width: 1200px) {
+  @media screen and (width <= 1200px) {
     min-width: 0;
   }
   z-index: z("composer", "content");
@@ -59,6 +60,7 @@ html.composer-open {
       border-color: var(--secondary);
       border-right-color: transparent;
     }
+
     .d-icon {
       color: var(--secondary);
     }
@@ -100,10 +102,12 @@ html.composer-open {
   &.draft {
     cursor: pointer;
     display: flex;
+
     .draft-text {
       display: block;
       @include ellipsis;
     }
+
     .grippie,
     .saving-text {
       display: none;
@@ -132,6 +136,7 @@ html.composer-open {
         color: var(--primary-medium);
       }
     }
+
     .composer-action-title {
       display: flex;
       align-items: center;
@@ -157,7 +162,7 @@ html.composer-open {
         margin-right: 5px;
         max-width: 100px;
         @include ellipsis;
-        @media screen and (max-width: 500px) {
+        @media screen and (width <= 500px) {
           display: none;
         }
       }
@@ -193,9 +198,11 @@ html.composer-open {
 
   .display-edit-reason {
     display: inline-flex;
+
     a {
       display: inline-flex;
     }
+
     .d-icon {
       padding: 0.3em 0.5em;
       color: var(--tertiary);
@@ -274,13 +281,16 @@ html.composer-open {
       .selected-name {
         max-width: 100%;
         overflow: hidden;
+
         .name {
           display: flex;
           max-width: 100%;
           gap: 0 0.5em;
+
           .badge-category {
             overflow: hidden;
           }
+
           // This prevents the first category from being too-truncated at the expense of a long subcategory
           > span:last-of-type:not(:first-of-type) {
             flex-shrink: 10;
@@ -333,11 +343,13 @@ html.composer-open {
 
   .tags-input {
     position: relative;
-    margin: 0 0 8px 0px;
+    margin: 0 0 8px 0;
     flex-grow: 1;
+
     .mini-tag-chooser {
       z-index: z("composer", "dropdown");
       width: 100%;
+
       .select-kit-header {
         color: var(--primary-high);
       }
@@ -399,10 +411,12 @@ html.composer-open {
     display: flex;
     align-items: center;
     margin-right: auto;
+
     a {
       margin-left: 0.33em;
       color: var(--primary-high);
     }
+
     .spinner {
       margin-right: 0.33em;
     }
@@ -410,11 +424,13 @@ html.composer-open {
 
   #draft-status {
     margin-left: auto;
+
     .d-icon-user-pen {
       color: var(--danger);
       font-size: 20px;
       vertical-align: -5.5px;
     }
+
     + .btn-mini-toggle {
       margin-left: 0;
     }
@@ -452,10 +468,12 @@ html.composer-open {
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;
       }
+
       &:last-of-type a {
         border-bottom-left-radius: 8px;
         border-bottom-right-radius: 8px;
       }
+
       a {
         @include ellipsis;
         align-items: center;
@@ -518,6 +536,7 @@ html.composer-open {
     li a {
       padding: 0.5em 1em;
     }
+
     .emoji {
       height: 0.75em;
       width: 0.75em;
@@ -528,6 +547,7 @@ html.composer-open {
     li:last-of-type a {
       color: var(--primary-high);
     }
+
     .emoji {
       margin-right: 0.25em;
     }
@@ -538,6 +558,7 @@ div.ac-wrap.disabled {
   input {
     display: none;
   }
+
   .item a {
     display: none;
   }
@@ -552,6 +573,7 @@ div.ac-wrap div.item a.remove,
   border-radius: 12px;
   box-sizing: border-box;
   border: 1px solid var(--primary-low);
+
   &:hover {
     background-color: var(--danger-low);
     border: 1px solid var(--danger-medium);
@@ -567,10 +589,12 @@ div.ac-wrap {
   align-items: center;
   min-height: 30px;
   box-sizing: border-box;
+
   div.item {
     float: left;
     padding: 4px 10px;
     line-height: var(--line-height-large);
+
     span {
       display: inline-block;
       line-height: var(--line-height-medium);
@@ -587,6 +611,7 @@ div.ac-wrap {
 
   input[type="text"] {
     float: left;
+
     &.fullwidth-input {
       width: 100%;
     }
@@ -596,6 +621,7 @@ div.ac-wrap {
 .md-table {
   overflow-y: auto;
   margin: 1em 0;
+
   .mobile-view & {
     table {
       width: 100%;
@@ -624,6 +650,7 @@ div.ac-wrap {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -641,7 +668,7 @@ div.ac-wrap {
       // this might be overkill
       // but on iPad with a physical keyboard the composer is shifted up on scroll
       // this adds a solid box shadow below, looks cleaner
-      box-shadow: 0 150px 0px 0px var(--secondary);
+      box-shadow: 0 150px 0 0 var(--secondary);
 
       &.open {
         z-index: z("mobile-composer");
diff --git a/app/assets/stylesheets/common/base/composer-user-selector.scss b/app/assets/stylesheets/common/base/composer-user-selector.scss
index e689d53c373..c45177ddf1e 100644
--- a/app/assets/stylesheets/common/base/composer-user-selector.scss
+++ b/app/assets/stylesheets/common/base/composer-user-selector.scss
@@ -2,6 +2,7 @@ div.ac-wrap.composer-user-selector-limited {
   width: 400px;
   padding: 0 10px;
   margin-bottom: 5px;
+
   .btn-primary {
     margin-left: 0.5em;
     padding: 3px 6px 2px;
diff --git a/app/assets/stylesheets/common/base/crawler_layout.scss b/app/assets/stylesheets/common/base/crawler_layout.scss
index 368e24e42d3..cd085cd5368 100644
--- a/app/assets/stylesheets/common/base/crawler_layout.scss
+++ b/app/assets/stylesheets/common/base/crawler_layout.scss
@@ -1,10 +1,10 @@
 // IMPORTANT: This stylesheet needs to work for super old browsers, including those
 // without support for `var()`. Therefore every color definition needs to define a simple
 // value first, as a fallback
-
 body.crawler,
 body > noscript {
   font-family: serif;
+
   h1,
   h2,
   h3,
@@ -13,11 +13,13 @@ body > noscript {
   h6 {
     font-family: serif;
   }
+
   &.browser-update {
     header {
       height: 50px;
       margin-bottom: 1em;
     }
+
     .buorg {
       position: absolute;
       top: 50px;
@@ -29,33 +31,32 @@ body > noscript {
       font-size: 14px;
       margin-bottom: 10px;
     }
+
     #topic-title {
       margin-top: 2em;
     }
   }
 
-  &:after,
-  &:before {
+  &::after,
+  &::before {
     // common way to show fixed background images
     display: none;
   }
 
   a {
     // we want all links to look like links
-    color: blue !important;
     color: var(--tertiary) !important;
     text-decoration: underline !important;
   }
+
   > header {
     // site header
     box-sizing: border-box;
     width: 100%;
     top: 0;
-    background-color: #fff;
     background-color: var(--header_background);
     padding: 10px;
     box-shadow: none;
-    border-bottom: 1px solid #eee;
     border-bottom: 1px solid var(--header_primary-medium);
   }
 
@@ -64,11 +65,12 @@ body > noscript {
   }
 
   // topic list
-
   div#main-outlet {
     padding: 10px;
+
     div.post {
       word-break: break-word;
+
       img {
         max-width: 100%;
         height: auto;
@@ -82,27 +84,32 @@ body > noscript {
     margin: 2em 0;
 
     thead {
-      border-bottom: 1px solid #ddd;
       border-bottom: 1px solid var(--primary_low);
+
       th {
         padding: 0 0 0.5em;
       }
+
       th:nth-child(2) {
         display: none;
       }
+
       th:first-of-type {
         width: 60%;
         padding-left: 0;
       }
+
       th:last-of-type,
       th.replies,
       th.views {
         text-align: center;
       }
+
       th:last-of-type,
       th.replies {
         width: 20%;
       }
+
       th.posters {
         display: none;
       }
@@ -111,31 +118,38 @@ body > noscript {
     td {
       padding: 10px 0;
     }
+
     td.posters {
       display: none;
     }
+
     td:last-of-type,
     td.replies,
     td.views {
       text-align: center;
     }
+
     td:first-of-type {
       width: 60%;
     }
+
     td:last-of-type,
     td.replies {
       width: 20%;
     }
 
-    @media (max-width: 850px) {
+    @media (width <= 850px) {
       table-layout: auto;
       margin: 0;
+
       td {
         word-break: break-word;
+
         &.posters {
           a:not(:last-of-type) {
             display: none;
           }
+
           a:last-of-type {
             display: block;
           }
@@ -161,14 +175,16 @@ body > noscript {
     }
 
     .topic-list-item {
-      border-bottom: 1px solid #eee;
       border-bottom: 1px solid var(--primary-low);
+
       > * {
         padding: 0.75em 0;
       }
+
       td.main-link {
         padding-right: 1em;
       }
+
       p.excerpt {
         font-size: var(--font-down-1);
       }
@@ -190,17 +206,18 @@ body > noscript {
   }
 
   // topics
-
   div#main-outlet {
     div.post {
       word-break: break-word;
       overflow: auto;
       max-width: 100%;
+
       img {
         max-width: 100%;
         height: auto;
       }
     }
+
     .topic-body {
       float: unset;
     }
@@ -210,14 +227,15 @@ body > noscript {
     margin-top: 1em;
     margin-bottom: 2em;
     padding-top: 1.5em;
-    border-top: 1px solid #eee;
     border-top: 1px solid var(--primary-low);
   }
 
   .crawler-post-meta {
     margin-bottom: 1em;
+
     .creator {
       word-break: break-all;
+
       a {
         font-weight: bold;
       }
@@ -234,6 +252,7 @@ body > noscript {
     @include breakpoint(tablet, min-width) {
       float: right;
     }
+
     [itemprop="position"] {
       float: left;
       margin-right: 0.5em;
@@ -242,10 +261,10 @@ body > noscript {
 
   .crawler-linkback-list {
     margin-top: 1em;
+
     a {
       display: block;
       padding: 0.5em 0;
-      border-top: 1px solid #ddd;
       border-top: 1px solid var(--primary-low);
     }
   }
@@ -260,6 +279,7 @@ body > noscript {
     > * {
       display: block;
     }
+
     h1 {
       margin-bottom: 0.25em;
     }
@@ -274,34 +294,33 @@ body > noscript {
   code,
   blockquote,
   aside.quote .title {
-    background: #eee;
     background: var(--primary-low);
   }
 
   .md-table {
     tr {
-      border: 1px solid #ddd;
       border: 1px solid var(--primary-low);
     }
+
     th {
       font-weight: bold;
     }
+
     td,
     th {
       padding: 0.25em;
-      border-right: 1px solid #ddd;
       border-right: 1px solid var(--primary-low);
     }
   }
 
   // footer
-
   footer {
     margin-top: 2em;
   }
 
   .noscript-footer-nav {
     margin-top: 4em;
+
     a {
       margin-right: 0.25em;
       white-space: nowrap;
@@ -315,13 +334,16 @@ body > noscript {
 
   .crawler-nav {
     margin: 1em 0;
+
     ul {
       margin: 0;
       list-style-type: none;
     }
+
     li {
       display: inline-block;
     }
+
     a {
       display: inline-block;
       padding: 0.5em 1em 0.5em 0;
@@ -332,6 +354,7 @@ body > noscript {
 .buorg div {
   padding: 8px;
 }
+
 .buorg a,
 .buorg a:visited {
   color: #e25600;
diff --git a/app/assets/stylesheets/common/base/d-image-grid.scss b/app/assets/stylesheets/common/base/d-image-grid.scss
index 6dfefc8b9f5..074fad879c2 100644
--- a/app/assets/stylesheets/common/base/d-image-grid.scss
+++ b/app/assets/stylesheets/common/base/d-image-grid.scss
@@ -18,12 +18,14 @@
 
   .d-image-grid-column {
     box-sizing: border-box;
+
     // use flex layout, flex-grow and object-fit: cover
     // to better have the images fill their containers
     // and line up vertically (it's not perfect!)
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+
     .button-wrapper {
       bottom: 0;
       min-width: unset;
@@ -33,11 +35,12 @@
     > span {
       flex-grow: 1;
       overflow: hidden;
+
       // hardcoded max-height here prevents extra tall images
       // from having an outsized effect on the grid
       max-height: 1200px;
 
-      img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
+      img:not(.thumbnail, .ytp-thumbnail-image, .emoji) {
         height: 100%;
         object-fit: cover;
       }
@@ -63,9 +66,11 @@
       .meta .informations {
         display: none;
       }
+
       .meta .filename {
         flex-grow: 3;
       }
+
       // full-height lightbox element in container
       > .lightbox {
         height: 100%;
@@ -76,14 +81,15 @@
     .image-wrapper {
       display: block;
       margin-bottom: $grid-column-gap;
-      padding-bottom: 0em;
+      padding-bottom: 0;
     }
   }
 
   .d-editor-preview & {
     .image-wrapper {
       margin-bottom: $grid-column-gap;
-      padding-bottom: 0em;
+      padding-bottom: 0;
+
       .button-wrapper {
         .scale-btn-container,
         &[editing] .wrap-image-grid-button {
diff --git a/app/assets/stylesheets/common/base/dialog.scss b/app/assets/stylesheets/common/base/dialog.scss
index f8c5d9fbbb8..39f0634fb9b 100644
--- a/app/assets/stylesheets/common/base/dialog.scss
+++ b/app/assets/stylesheets/common/base/dialog.scss
@@ -16,6 +16,7 @@
  * Ensures the dialog container and all its descendants are not
  * visible and not focusable when it is hidden.
  */
+
 .dialog-container[aria-hidden="true"] {
   display: none;
 }
@@ -69,6 +70,7 @@
     margin-left: auto;
     flex-basis: content;
     padding-left: 15px;
+
     .d-icon {
       color: var(--primary-high);
     }
@@ -81,7 +83,9 @@
   align-items: center;
   padding: 14px 15px 10px;
   border-top: 1px solid var(--primary-low);
+
   --btn-bottom-margin: 0.3em;
+
   .btn {
     margin: 0 0.75em var(--btn-bottom-margin) 0;
   }
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 2145fcb9926..91ed51458c5 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -5,10 +5,9 @@
 
 .directory {
   .directory-value-list-item:not(:empty)
-    ~ .directory-value-list-item:not(:empty):before {
+    ~ .directory-value-list-item:not(:empty)::before {
     content: "| ";
   }
-
   margin-bottom: 100px;
   background: var(--d-content-background);
 
@@ -29,6 +28,7 @@
   .directory-controls {
     display: flex;
     justify-content: space-between;
+
     .total-rows {
       color: var(--primary-medium);
       font-weight: normal;
@@ -55,6 +55,7 @@
         align-items: center;
         margin-bottom: 0;
       }
+
       .d-icon-heart {
         color: var(--love);
         margin: 0 0.25em 0 0;
@@ -75,6 +76,7 @@
       }
     }
   }
+
   .d-modal__footer {
     justify-content: space-between;
   }
@@ -86,6 +88,7 @@
       &__value {
         white-space: nowrap;
         font-size: var(--font-up-2);
+
         &,
         &--user-field {
           color: var(--primary-medium);
@@ -98,7 +101,8 @@
 .directory-table-container {
   container-type: inline-size;
   container-name: directory-table;
-  transform: translateX(0px);
+  transform: translateX(0);
+
   // transform here creates a containing blocks which
   // is used by fixed-positioned dropdowns
   // if omitted, `overflow-x: auto;` below will clip them
@@ -150,6 +154,7 @@
     white-space: nowrap;
     color: var(--primary-medium);
     padding: 0.5em;
+
     .d-icon {
       margin-right: 0.25em;
     }
@@ -170,6 +175,7 @@
 
   &__value {
     white-space: nowrap;
+
     &--user-field {
       max-width: 30em;
     }
@@ -194,6 +200,7 @@
     display: flex;
     min-width: 0;
     width: 100%;
+
     .user-detail {
       padding: 0;
       width: 100%;
@@ -205,6 +212,7 @@
         font-size: var(--font-down-1);
       }
     }
+
     .title {
       margin: 0;
     }
@@ -247,11 +255,12 @@
       }
 
       // flexible divider between the label and value
-      &:after {
+      &::after {
         flex: 1 1 0; // can grow or shrink, but should be 0 width if needed
         color: var(--primary-300);
         min-width: 0;
         overflow: hidden;
+
         // this needs to be long to account for all possible widths
         content: "................................................................................................................................................................";
       }
@@ -266,6 +275,7 @@
       font-size: var(--font-0);
       color: var(--primary);
       align-self: start;
+
       &--user-field {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -293,10 +303,12 @@
       &--user-field {
         padding: 0.25em;
         border: none;
+
         &:first-child {
           width: 100%;
           padding: 0.5em 0.25em 1em;
           justify-content: start;
+
           // force full width of the cell
           grid-column-start: 1;
           grid-column-end: -1;
@@ -306,10 +318,12 @@
       &--user-field {
         display: flex;
         order: 2;
+
         // force full width of the cell
         // because we don't know how much content there is
         grid-column-start: 1;
         grid-column-end: -1;
+
         .directory-table__label {
           margin-right: 0.25em;
         }
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 86af3a93392..0c366c2c245 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -2,7 +2,6 @@
 // global styles that apply to the Discourse application specifically
 // BEWARE: changing these styles implies they take effect anywhere they are seen
 // throughout the Discourse application
-
 :root {
   --d-input-bg-color: var(--secondary);
   --d-input-text-color: var(--primary);
@@ -26,6 +25,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -35,6 +35,7 @@
   0% {
     background-color: var(--tertiary-low);
   }
+
   100% {
     background-color: transparent;
   }
@@ -45,6 +46,7 @@
   0% {
     background-position: -1000px 0;
   }
+
   100% {
     background-position: 1100px 0;
   }
@@ -57,7 +59,6 @@
     animation-iteration-count: infinite;
     animation-name: placeHolderShimmer;
     animation-timing-function: linear;
-    background: var(--primary-very-low);
     background: linear-gradient(
       to right,
       var(--primary-very-low) 10%,
@@ -85,6 +86,7 @@ body {
 big {
   font-size: var(--font-up-5);
 }
+
 small {
   font-size: var(--font-down-2);
 }
@@ -110,6 +112,7 @@ a.cancel {
   line-height: normal;
   color: var(--primary-high);
   transition: var(--d-button-transition);
+
   &:hover {
     color: var(--danger);
   }
@@ -149,10 +152,12 @@ label {
   &:not(.checkbox-label) {
     font-weight: bold;
   }
+
   > .d-icon {
     align-self: center;
     margin-right: 4px;
   }
+
   a {
     // flex removes whitespace characters between text nodes and elements
     // so we need to add it back
@@ -170,6 +175,7 @@ input {
     cursor: pointer;
     flex-shrink: 0; // Adding for safety, Safari will shrink checkboxes
   }
+
   &[type="submit"],
   &[type="reset"],
   &[type="button"],
@@ -213,6 +219,7 @@ input {
     border: var(--d-input-border);
     border-radius: var(--d-input-border-radius);
     color-scheme: var(--scheme-type);
+
     &:focus {
       @include default-focus;
     }
@@ -226,7 +233,6 @@ input {
 input[type="search"] {
   &::-webkit-search-cancel-button,
   &::-webkit-search-decoration {
-    -webkit-appearance: none;
     appearance: none;
   }
 }
@@ -280,7 +286,7 @@ input,
 select,
 textarea {
   color: var(--d-input-text-color);
-  caret-color: currentColor;
+  caret-color: currentcolor;
 
   &[disabled],
   &[readonly] {
@@ -298,15 +304,16 @@ textarea {
 }
 
 // Common Classes
-
 .sortable {
   white-space: nowrap;
+
   .discourse-no-touch & {
     &:hover,
     &:focus {
       background-color: var(--primary-low);
     }
   }
+
   .d-icon {
     margin-left: 0.25em;
   }
@@ -351,6 +358,7 @@ textarea {
   margin-right: auto;
   margin-left: auto;
   padding: 0 var(--d-wrap-padding-h);
+
   .contents {
     position: relative;
   }
@@ -372,9 +380,11 @@ textarea {
 
 .tip {
   display: inline-block;
+
   &.good {
     color: var(--success);
   }
+
   &.bad {
     color: var(--danger);
   }
@@ -409,7 +419,7 @@ textarea {
   background-color: var(--secondary);
   border-radius: 50%;
   height: 1em;
-  box-shadow: 0px 0px 0px 2px var(--secondary);
+  box-shadow: 0 0 0 2px var(--secondary);
 
   .d-icon.d-icon-discourse-dnd {
     color: var(--header_primary-medium) !important;
@@ -522,7 +532,6 @@ textarea {
 .spinner {
   margin: 20px auto 20px auto;
   position: relative;
-  -webkit-animation: rotate-forever 1s infinite linear;
   animation: rotate-forever 1s infinite linear;
   height: 30px;
   width: 30px;
@@ -597,6 +606,7 @@ textarea {
   .control-group,
   .controls {
     margin-left: 0;
+
     label {
       font-weight: normal;
     }
@@ -604,7 +614,6 @@ textarea {
 }
 
 // Special elements
-
 #main-outlet-wrapper {
   box-sizing: border-box;
   width: 100%;
@@ -667,8 +676,10 @@ textarea {
 #footer {
   .container {
     height: 50px;
+
     .contents {
       padding-top: 10px;
+
       a[href] {
         color: var(--secondary);
       }
@@ -750,8 +761,10 @@ textarea {
     grid-area: dropdown;
     align-self: center;
     justify-self: end;
+
     summary {
       background: transparent;
+
       .d-icon {
         color: var(--primary-high);
       }
@@ -766,11 +779,13 @@ textarea {
 .topic-statuses {
   // avoid adding margin/padding on this parent; sometimes it appears as an empty container
   float: left;
+
   .topic-status {
     margin: 0;
     display: inline-flex;
     color: var(--primary-medium);
     margin-right: 0.2em;
+
     .d-icon {
       height: 0.74em;
       width: 0.75em;
@@ -832,8 +847,9 @@ a#skip-link {
   background: var(--tertiary);
   transition: top 0.3s ease-out;
   z-index: z("header") + 1;
+
   &:focus {
-    top: 0px;
+    top: 0;
     transition: top 0.15s ease-in;
   }
 }
diff --git a/app/assets/stylesheets/common/base/edit-category.scss b/app/assets/stylesheets/common/base/edit-category.scss
index 85b8d210315..880fe68b97c 100644
--- a/app/assets/stylesheets/common/base/edit-category.scss
+++ b/app/assets/stylesheets/common/base/edit-category.scss
@@ -27,6 +27,7 @@ div.edit-category {
   .edit-category-nav {
     grid-area: sidebar;
     grid-row: 2 / span 3;
+
     .nav-stacked {
       background-color: var(--secondary);
     }
@@ -75,6 +76,7 @@ div.edit-category {
       margin-top: 10px;
       padding: 5px 10px;
       position: relative;
+
       .arrow-div {
         border: solid transparent;
         content: " ";
@@ -90,18 +92,22 @@ div.edit-category {
       list-style: none;
       margin: 0 0 30px;
       padding: 0;
+
       .name {
         margin-right: 20px;
         display: inline-block;
         min-width: 100px;
       }
+
       .permission {
         margin-left: 20px;
       }
+
       .d-icon-circle-xmark {
         margin-left: 5px;
         color: var(--danger);
       }
+
       li {
         margin-bottom: 10px;
       }
@@ -122,6 +128,7 @@ div.edit-category {
     label {
       max-width: $category-settings-width;
     }
+
     input[type="number"] {
       width: $number-input-width;
     }
@@ -178,7 +185,6 @@ div.edit-category {
       input[type="number"] {
         width: 4em;
       }
-
       margin-bottom: 1em;
     }
   }
@@ -198,35 +204,42 @@ div.edit-category {
   .permission-row {
     border-bottom: 1px solid var(--primary-low);
     display: flex;
+
     &.row-header {
       font-weight: bold;
       border-bottom: 2px solid var(--primary-low);
     }
+
     .group-name,
     .options {
       display: flex;
       box-sizing: border-box;
       text-align: center;
       width: 50%;
-      margin: 0px;
+      margin: 0;
       align-items: center;
     }
+
     .group-name {
       text-align: left;
       padding: 0.5em;
       padding-left: 0;
+
       .group-name-label {
         @include ellipsis;
       }
     }
+
     .cell,
     .btn-flat {
       width: 33%;
       padding: 0.5em;
     }
+
     .btn-flat:hover {
       background-color: transparent;
     }
+
     .btn-flat .d-icon-square-check,
     .btn-flat:hover .d-icon-square-check {
       color: var(--success);
@@ -256,6 +269,7 @@ div.edit-category {
 
   .add-group {
     margin: 1em 0;
+
     .group-name {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss b/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
index e774cd8c9df..185c5e8849a 100644
--- a/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
@@ -2,26 +2,32 @@
   .select-kit.combo-box {
     width: 100%;
   }
+
   .radios {
     margin-bottom: 10px;
   }
+
   label {
     display: inline-flex;
     padding-right: 5px;
     align-items: center;
+
     input {
       margin-top: 0;
     }
   }
+
   .topic-timer-duration {
     width: 100%;
   }
+
   .pika-single {
     position: absolute !important; /* inline JS styles */
   }
 
   .modal-topic-timer-info {
     margin-top: 1rem;
+
     .topic-timer-info {
       border-top: 0;
     }
diff --git a/app/assets/stylesheets/common/base/exception.scss b/app/assets/stylesheets/common/base/exception.scss
index 7cb48ffc5f7..b70e691dc0f 100644
--- a/app/assets/stylesheets/common/base/exception.scss
+++ b/app/assets/stylesheets/common/base/exception.scss
@@ -5,19 +5,24 @@
   .face {
     font-size: 4.286em;
   }
+
   .reason {
     font-size: var(--font-up-4);
   }
+
   .url {
     font-style: italic;
     font-size: var(--font-down-1);
   }
+
   .desc {
     margin-top: 16px;
+
     .d-icon-circle-check {
       color: var(--success);
     }
   }
+
   .buttons {
     align-items: center;
     display: inline-flex;
diff --git a/app/assets/stylesheets/common/base/explain-reviewable.scss b/app/assets/stylesheets/common/base/explain-reviewable.scss
index 0a4bd1421a4..db723c39ccf 100644
--- a/app/assets/stylesheets/common/base/explain-reviewable.scss
+++ b/app/assets/stylesheets/common/base/explain-reviewable.scss
@@ -4,18 +4,23 @@
   .thresholds {
     margin-top: 1em;
   }
+
   table {
     width: 100%;
   }
+
   table td {
     padding: 0.5em;
   }
+
   td.sum {
     text-align: right;
   }
+
   td.sum.total {
     font-weight: bold;
   }
+
   tr.total {
     td {
       background-color: var(--primary-low);
diff --git a/app/assets/stylesheets/common/base/faqs.scss b/app/assets/stylesheets/common/base/faqs.scss
index 21f6633446f..2a97aae6b99 100644
--- a/app/assets/stylesheets/common/base/faqs.scss
+++ b/app/assets/stylesheets/common/base/faqs.scss
@@ -2,28 +2,40 @@
   /* covers /about, /faq, /guidelines, /tos, /privacy, and login-required */
   max-width: 700px;
   background: var(--d-content-background);
+
   .about-page & {
     max-width: unset;
-    section:not(.admins):not(.moderators):not(.category-moderators):not(
-        .about__admins
-      ):not(.about__moderators):not(.about__header) {
+
+    section:not(
+        .admins,
+        .moderators,
+        .category-moderators,
+        .about__admins,
+        .about__moderators,
+        .about__header
+      ) {
       max-width: 700px;
     }
+
     .about.category-moderators {
       .badge-category__wrapper .badge-category {
         color: var(--primary);
       }
     }
   }
+
   .mobile-view & {
     font-size: var(--font-0);
   }
+
   li {
     margin-bottom: 8px;
   }
+
   .nav-pills {
     margin: 0 0 2em;
   }
+
   ul:not(.nav-pills),
   ol:not(.nav-pills) {
     margin-left: 40px;
@@ -32,6 +44,7 @@
 
 .body-page-button-container {
   display: flex;
+
   button {
     margin-right: 0.75em;
   }
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 4a196868ee7..cc70600712c 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -98,6 +98,7 @@
   .group-details-button {
     display: flex;
     flex-wrap: wrap;
+
     button:not(:last-child) {
       margin-right: 0.5em;
     }
@@ -148,9 +149,11 @@ table.group-manage-logs {
         grid-column-start: 1;
         grid-column-end: -1;
       }
+
       .member-settings {
         margin-left: auto;
       }
+
       .user-info {
         padding-right: 3.5em;
       }
@@ -277,11 +280,11 @@ table.group-category-permissions {
     li {
       display: inline-block;
 
-      &:before {
+      &::before {
         content: "|";
       }
 
-      &:first-child:before {
+      &:first-child::before {
         content: "";
       }
     }
@@ -313,6 +316,6 @@ table.group-category-permissions {
 }
 
 .groups-form .control-group.buttons {
-  margin-bottom: 0px;
+  margin-bottom: 0;
   padding: 1em 0;
 }
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 91d7e4a9d59..ac6860a2bcd 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -4,6 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 1em;
+
   .groups-header-new {
     order: 2;
     margin-bottom: 0.5em;
@@ -99,12 +100,14 @@
         display: flex;
         align-items: center;
         color: var(--primary-high);
+
         .d-icon {
           margin-right: 0.25em;
           font-size: 0.8em;
           color: var(--primary-medium);
         }
       }
+
       .group-description {
         color: var(--primary-high);
         word-wrap: break-word;
@@ -134,6 +137,7 @@
         }
       }
     }
+
     .avatar-flair-image {
       width: $size;
     }
@@ -144,8 +148,10 @@
   .control-group-inline {
     display: inline;
   }
+
   &.groups-notifications-form {
     max-width: 33em;
+
     .control-instructions {
       color: var(--primary-medium);
       margin-bottom: 10px;
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 66eb586b4da..37a453725e6 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -29,6 +29,7 @@
         .logo-wrapper {
           float: left;
         }
+
         .auth-buttons {
           float: right;
           margin-top: 0.4em;
@@ -51,10 +52,12 @@
     @media (prefers-reduced-motion) {
       animation-duration: 0s;
     }
+
     // min-width acts as a placeholder if the small logo takes a while to load
     // it prevents topic title from shifting after the small logo loads
     // it's set to match the #site-logo height so square small logos don't resize when titles dock
     min-width: var(--d-logo-height);
+
     a,
     a:visited {
       min-width: 0;
@@ -116,6 +119,7 @@
   .login-button,
   .sign-up-button {
     padding: 6px 10px;
+
     .fa {
       margin-right: 3px;
     }
@@ -155,25 +159,30 @@
     cursor: pointer;
     border: 1px solid transparent;
     outline: none;
+
     img.avatar {
       width: 2.1333em;
       height: 2.1333em;
     }
+
     .discourse-no-touch &:hover,
     .discourse-no-touch &:focus {
       background-color: var(--primary-low);
       border-top: 1px solid transparent;
       border-left: 1px solid transparent;
       border-right: 1px solid transparent;
+
       > .d-icon {
         color: var(--primary-medium);
       }
     }
+
     &:active {
       color: var(--primary);
       background-color: var(--primary-low);
     }
   }
+
   .drop-down-mode & {
     .active .icon {
       position: relative;
@@ -182,10 +191,12 @@
       border-top: 1px solid var(--primary-low);
       border-left: 1px solid var(--primary-low);
       border-right: 1px solid var(--primary-low);
+
       > .d-icon {
         color: var(--primary-medium);
       }
-      &:after {
+
+      &::after {
         display: block;
         position: absolute;
         top: 100%;
@@ -196,6 +207,7 @@
         content: "";
         border-top: 1px solid var(--secondary);
       }
+
       &:hover {
         border-bottom: none;
       }
@@ -213,14 +225,15 @@
   .notifications {
     position: relative;
   }
+
   .header-dropdown-toggle {
     position: relative;
   }
+
   .badge-notification {
     border: 2px solid var(--header_background);
     position: absolute;
     z-index: z("base");
-    left: 0;
     top: -4px;
     min-width: 0.6em;
     left: auto;
@@ -230,9 +243,11 @@
       &.new-pms {
         background-color: var(--success);
       }
+
       &.new-reviewables {
         background-color: var(--danger);
       }
+
       .d-icon {
         color: var(--secondary);
         font-size: var(--font-down-1);
@@ -240,9 +255,11 @@
       }
     }
   }
+
   .unread-notifications {
     background-color: var(--tertiary-med-or-tertiary);
   }
+
   .unread-high-priority-notifications {
     left: auto;
     right: 25px;
@@ -258,12 +275,14 @@
     width: 2.2857em;
     height: 2.2857em;
     padding: 0.2143em;
+
     &:focus,
     .discourse-no-touch & {
       &:hover {
         background-color: var(--primary-low);
       }
     }
+
     .d-icon {
       width: 100%;
       font-size: var(--font-up-4);
@@ -282,8 +301,10 @@
   height: 100%;
   line-height: var(--line-height-medium);
   padding: 0 1.5em 0 0.5em;
+
   // we need to hide overflow in both to truncate the title in a flexbox
   overflow: hidden;
+
   .extra-info {
     overflow: hidden;
     width: 100%;
@@ -292,6 +313,7 @@
       animation-duration: 0s;
     }
   }
+
   .title-wrapper {
     display: grid;
     grid-template-areas:
@@ -300,67 +322,83 @@
     grid-template-columns: auto minmax(2em, 1fr); // min must be as wide as ellipsis
     align-items: baseline;
     gap: 0 0.5em;
+
     .header-title {
       grid-area: title;
     }
+
     .categories-wrapper {
       grid-area: categories;
     }
+
     .topic-header-extra {
       grid-area: extra;
+
       .archetype-private_message & {
         grid-area: categories;
       }
     }
   }
+
   .topic-link {
     color: var(--header_primary);
     display: block;
     @include ellipsis;
   }
+
   .topic-statuses {
     .d-icon {
       color: var(--header_primary-medium);
     }
+
     .d-icon-envelope {
       color: var(--danger);
     }
   }
+
   .header-title {
     padding: 0;
     margin: 0;
     font-size: var(--font-up-3);
     width: 100%;
   }
+
   .categories-wrapper {
     display: inline-flex;
     flex: 0 1 auto;
     gap: 0 0.5em;
     @include ellipsis;
   }
+
   .badge-category__wrapper {
     min-width: 2.75em; // min needed for ellipsis
     @include ellipsis;
+
     .badge-category {
       color: var(--header_primary-high);
     }
   }
+
   .topic-header-extra {
     display: inline-flex;
     align-items: center;
     max-width: 100%;
     gap: 0.5em;
+
     .discourse-tags {
       display: inline;
       color: var(--header_primary-high);
       @include ellipsis;
+
       .discourse-tag {
         display: inline; // tags need to stay inline in order for them to truncate
         vertical-align: unset;
       }
     }
+
     .topic-featured-link {
       align-self: baseline;
+
       .d-icon {
         font-size: var(--font-down-2);
       }
@@ -378,9 +416,11 @@ $mobile-avatar-height: 1.532em;
   align-items: center;
   font-size: var(--font-down-1);
   @include ellipsis;
+
   &:not(:first-child) {
     margin-left: 5px;
   }
+
   .trigger-user-card,
   .trigger-group-card {
     &:not(:last-of-type) {
@@ -391,10 +431,12 @@ $mobile-avatar-height: 1.532em;
   .trigger-user-card {
     .icon {
       height: $avatar-height;
+
       .mobile-view & {
         height: $mobile-avatar-height;
       }
       display: inline-block;
+
       img {
         height: 100%;
         width: auto;
@@ -413,6 +455,7 @@ $mobile-avatar-height: 1.532em;
       display: flex;
       align-items: center;
       height: $avatar-height;
+
       .mobile-view & {
         height: $mobile-avatar-height;
       }
@@ -455,6 +498,7 @@ $mobile-avatar-height: 1.532em;
 
 #additional-panel-wrapper {
   position: absolute;
+
   // positions are relative to the .d-header .panel div
   top: 100%; // directly underneath .panel
   right: -10px; // 10px to the right of .panel - adjust as needed
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
index f59fad63bef..7ea7205a60b 100644
--- a/app/assets/stylesheets/common/base/history.scss
+++ b/app/assets/stylesheets/common/base/history.scss
@@ -1,5 +1,4 @@
 // styles that apply to the popup that appears when you show the edit history of a post
-
 .modal.history-modal {
   .d-modal__footer {
     justify-content: space-between;
@@ -44,12 +43,15 @@
     @include breakpoint(tablet) {
       width: 100%;
       margin-top: 0.5em;
+
       .nav-pills {
         width: 100%;
+
         li {
           margin: 0;
           flex: 1 1 auto;
         }
+
         a {
           width: 100%;
           justify-content: center;
@@ -77,6 +79,7 @@
     .-tag-revisions {
       display: block;
     }
+
     .discourse-tags {
       display: inline;
       font-size: var(--font-down-1);
@@ -122,11 +125,13 @@
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
+
     td {
       word-wrap: anywhere;
       white-space: pre-wrap;
       flex: 0 1 50%;
     }
+
     tbody {
       border: none;
     }
@@ -153,8 +158,10 @@
 
   #revisions {
     word-wrap: break-word;
+
     table {
       margin-top: 10px;
+
       tr {
         border: none;
       }
@@ -163,6 +170,7 @@
     .row:first-of-type {
       margin-top: 10px;
     }
+
     .revision-content table {
       thead {
         th {
@@ -174,6 +182,7 @@
 
       td {
         padding: 3px 3px 3px 0.5em;
+
         img {
           max-width: none;
         }
@@ -184,10 +193,12 @@
   #revision-footer-buttons {
     display: flex;
     gap: 0.5em;
+
     button {
       margin: 0;
       flex: 1 1 auto;
       min-width: 0;
+
       .d-button-label {
         @include ellipsis;
       }
@@ -195,6 +206,7 @@
     @include breakpoint(tablet) {
       width: 100%;
       flex: 1 1 100%;
+
       button {
         font-size: var(--font-down-1);
       }
@@ -212,13 +224,16 @@
   del,
   .diff-del {
     color: var(--primary);
+
     &:not(s, .bbcode-u, .bbcode-s) {
       text-decoration: none;
     }
+
     code,
     img {
       border: 2px solid;
     }
+
     a {
       text-decoration: none;
     }
@@ -227,14 +242,17 @@
   ins,
   .diff-ins {
     background: var(--success-low);
+
     code,
     img {
       border-color: var(--success);
     }
+
     img {
       opacity: 0.75;
       filter: alpha(opacity=75);
     }
+
     a {
       color: var(--success);
     }
@@ -243,14 +261,17 @@
   del,
   .diff-del {
     background: var(--danger-low);
+
     code,
     img {
       border-color: var(--danger);
     }
+
     img {
       opacity: 0.5;
       filter: alpha(opacity=50);
     }
+
     a {
       color: var(--danger);
     }
@@ -259,21 +280,26 @@
   span.date {
     font-weight: bold;
   }
+
   span.edit-reason {
     background-color: var(--highlight-bg);
   }
+
   .d-icon-ban {
     color: var(--danger);
   }
+
   .hidden-revision-either {
     opacity: 0.5;
   }
+
   .hidden-revision-previous .row {
     div:nth-of-type(1),
     td:nth-of-type(1) {
       opacity: 0.5;
     }
   }
+
   .hidden-revision-current .row {
     div:nth-of-type(2),
     td:nth-of-type(2) {
diff --git a/app/assets/stylesheets/common/base/json_schema.scss b/app/assets/stylesheets/common/base/json_schema.scss
index 036fb0ca7df..d3c646fc84a 100644
--- a/app/assets/stylesheets/common/base/json_schema.scss
+++ b/app/assets/stylesheets/common/base/json_schema.scss
@@ -1,5 +1,4 @@
 // styles used for JSON schema settings
-
 .d-modal.json-schema-editor-modal {
   --modal-max-width: 95vw;
   --modal-width: unset;
@@ -44,6 +43,7 @@
     .json-editor-btn-add {
       @extend .btn, .ok;
       gap: var(--space-1);
+
       span {
         display: inline;
       }
@@ -52,6 +52,7 @@
     button {
       @extend .btn;
       @extend .no-text;
+
       span {
         display: none;
       }
@@ -79,6 +80,7 @@
       ); // down chevron
       background-repeat: no-repeat;
       background-position: 98%;
+
       &:focus {
         @include default-focus;
       }
@@ -109,12 +111,14 @@
       display: flex;
       align-items: center;
       margin: 0;
+
       button.json-editor-btn-collapse.json-editor-btntype-toggle {
         // needs the specificity
         background: transparent;
         margin: 0 0 0 calc(var(--space-2) * -1);
         padding: var(--space-1) var(--space-2);
         font-size: var(--font-down-2);
+
         .d-icon {
           color: var(--primary-medium);
         }
@@ -136,11 +140,13 @@
 
     [data-schemaid="root"] {
       position: relative;
+
       > .je-header {
         label,
         .json-editor-btn-collapse {
           display: none;
         }
+
         button {
           position: absolute;
           right: 0;
@@ -158,7 +164,6 @@
     }
 
     // for "format":"tabs-top"
-
     .je-tabholder--top {
       margin: 0;
       display: flex;
@@ -208,16 +213,16 @@
     }
 
     // for "format":"table"
-
     table {
       width: 100%;
       margin-bottom: 1em;
 
       td,
       th {
-        &:not(:first-child):not(:last-child) {
+        &:not(:first-child, :last-child) {
           padding: var(--space-2);
         }
+
         &:first-child,
         &:last-child {
           padding: var(--space-2) 0;
@@ -237,9 +242,11 @@
             display: flex;
             flex-direction: column;
             gap: var(--space-1);
+
             button {
               margin: 0;
             }
+
             .delete {
               order: 2;
             }
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index 10c83324a00..83c8f4c2bcb 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -4,6 +4,7 @@ $meta-element-margin: 6px;
   position: relative;
   display: inline-block;
   overflow: hidden;
+
   &:hover .meta {
     opacity: 0.9;
     transition: opacity 0.5s;
@@ -25,10 +26,12 @@ $meta-element-margin: 6px;
 .lightbox-wrapper {
   display: inline-block;
   vertical-align: middle;
+
   img {
     object-fit: cover;
     object-position: top;
   }
+
   &,
   * {
     outline: 0;
@@ -55,8 +58,9 @@ $meta-element-margin: 6px;
     margin: $meta-element-margin;
     opacity: 0.8;
     color: var(--secondary);
+
     + .filename {
-      margin-left: 0px;
+      margin-left: 0;
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/login-signup-page.scss b/app/assets/stylesheets/common/base/login-signup-page.scss
index 15faee88acd..9c6b322efb0 100644
--- a/app/assets/stylesheets/common/base/login-signup-page.scss
+++ b/app/assets/stylesheets/common/base/login-signup-page.scss
@@ -1,5 +1,4 @@
 // Shared styles
-
 .login-fullpage,
 .signup-fullpage {
   height: 100%;
@@ -20,17 +19,21 @@ body.activate-account-page {
   .below-site-header-outlet {
     display: none;
   }
+
   #main-outlet {
     padding: 0;
   }
+
   .d-header {
     box-shadow: none;
     border: none;
     background-color: var(--secondary);
   }
+
   .d-header .home-logo-wrapper-outlet {
     width: 100%;
   }
+
   .d-header .title a {
     margin: 0 auto;
   }
@@ -80,7 +83,6 @@ body.signup-page {
 
   .login-left-side {
     box-sizing: border-box;
-    width: 100%;
     padding: 3rem;
     overflow: auto;
     width: 100%;
@@ -144,7 +146,7 @@ body.signup-page {
       pointer-events: none;
       left: 1em;
       top: 13px;
-      box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
+      box-shadow: 0 0 0 0 rgba(var(--tertiary-rgb), 0);
       transition: 0.2s ease all;
     }
 
@@ -158,9 +160,11 @@ body.signup-page {
       padding: 0 0.25em 0 0.25em;
       font-size: $font-down-1;
     }
+
     .user-field.text label.control-label {
       top: 13px;
     }
+
     .user-field.text:focus-within,
     .user-field.dropdown:focus-within,
     .user-field.multiselect:focus-within {
@@ -179,6 +183,7 @@ body.signup-page {
     input.alt-placeholder:invalid {
       color: var(--primary);
     }
+
     .user-field.dropdown,
     .user-field.multiselect {
       .more-info,
@@ -243,6 +248,7 @@ body.signup-page {
     font-size: var(--font-down-1);
     min-height: 1.4em;
     display: block;
+
     &.bad {
       color: var(--danger);
     }
@@ -267,6 +273,7 @@ body.signup-page {
   .create-account__password-info {
     display: flex;
     justify-content: space-between;
+
     .create-account__password-tip-validation {
       display: flex;
     }
@@ -280,9 +287,11 @@ body.signup-page {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+
     &__accept {
       width: 100%;
     }
+
     &__info {
       display: flex;
       align-items: center;
@@ -292,6 +301,7 @@ body.signup-page {
       line-height: 1rem;
       color: var(--primary-medium);
     }
+
     &__sign-in {
       padding: 0;
       height: 100%;
@@ -301,7 +311,6 @@ body.signup-page {
 }
 
 // Login page
-
 .login-fullpage {
   #second-factor {
     input {
@@ -320,7 +329,6 @@ body.signup-page {
 }
 
 // Signup page
-
 .signup-fullpage {
   .password-confirmation {
     display: none;
@@ -372,6 +380,7 @@ body.signup-page {
       .controls .checkbox-label {
         display: flex;
         align-items: center;
+
         input[type="checkbox"].ember-checkbox {
           width: 1em !important;
           min-width: unset;
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index b406cf5a8bd..a300760869e 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -1,6 +1,7 @@
 body.invite-page {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
+
   #main-outlet-wrapper {
     padding: 0;
   }
@@ -11,6 +12,7 @@ body.invite-page {
   #modal-alert {
     box-sizing: border-box;
     display: inline-block;
+
     // if you want to use flexbox here make sure child elements like <b> don't cause line breaks
     padding: 1em 3.5em 1em 1em; // large right padding to make sure long text isn't under the close button
     width: 100%;
@@ -18,9 +20,10 @@ body.invite-page {
     margin-bottom: 0;
     min-height: 35px;
   }
+
   #modal-alert:empty {
-    min-height: 0px;
-    padding: 0px;
+    min-height: 0;
+    padding: 0;
     overflow: hidden;
     display: inline;
   }
@@ -30,6 +33,7 @@ body.invite-page {
 #new-account-link {
   cursor: pointer;
   text-align: left;
+
   // the second button can wrap in some locales, and this helps alignment
 }
 
@@ -39,16 +43,19 @@ body.invite-page {
     display: flex;
     flex-direction: column;
     width: 400px;
+
     input {
       padding: 0.75em 0.77em;
       min-width: 250px;
       margin-bottom: 0.25em;
       width: 100%;
     }
+
     .input {
       position: relative;
       margin-bottom: 1em;
     }
+
     .tip {
       display: block;
     }
@@ -64,6 +71,7 @@ body.invite-page {
   right: 0;
   top: 0;
   padding: 0.75em 0.77em; // alligns with input padding
+
   .ios-device & {
     // reset form-item-sizing mixin styles
     padding: 0.7em;
@@ -73,6 +81,7 @@ body.invite-page {
 
 .auth-message {
   padding: 0 15px 15px 15px;
+
   &:empty {
     padding: 0;
   }
@@ -82,15 +91,18 @@ body.invite-page {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+
   p {
     margin: 0;
     font-size: var(--font-0);
   }
+
   a {
     display: inline-block;
     padding: 1em 0.5em 1em 0;
     color: var(--tertiary);
   }
+
   button {
     margin-right: 1em;
   }
@@ -101,8 +113,10 @@ body.invite-page {
   background-color: var(--secondary);
   padding: 20px;
   margin: 0 auto;
+
   .content-wrapper {
     padding: 1em 2.5em 1em 2.5em;
+
     .image-wrapper {
       text-align: center;
       padding-bottom: 1em;
@@ -111,11 +125,14 @@ body.invite-page {
         max-width: 200px;
       }
     }
+
     .email-login-form {
       text-align: center;
+
       .btn-primary {
         margin-top: 10px;
       }
+
       #security-key {
         justify-content: center;
       }
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index f84686ed600..5be9c7897eb 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -29,7 +29,7 @@
 
 @use "sass:math";
 
-$overlay-color: #000000 !default;
+$overlay-color: #000 !default;
 $overlay-opacity: 0.8 !default;
 $shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe
 $popup-padding-left: 8px !default; // Padding from left and from right side
@@ -77,7 +77,6 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
   z-index: z("modal", "popover");
   overflow: hidden;
   position: fixed;
-
   background: $overlay-color;
   animation: fade 0.3s alternate;
 }
@@ -91,7 +90,7 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
   z-index: z("modal", "popover") + 1;
   position: fixed;
   outline: 0 !important;
-  -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
+  backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
 }
 
 // Root container
@@ -103,14 +102,12 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
   left: 0;
   top: 0;
   padding: 0 $popup-padding-left;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 // Vertical centerer helper
 .mfp-container {
-  &:before {
+  &::before {
     content: "";
     display: inline-block;
     height: 100%;
@@ -121,7 +118,7 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
 // Remove vertical centering when popup has class `mfp-align-top`
 .mfp-align-top {
   .mfp-container {
-    &:before {
+    &::before {
       display: none;
     }
   }
@@ -136,6 +133,7 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
   text-align: left;
   z-index: $z-index-base + 5;
 }
+
 .mfp-inline-holder,
 .mfp-ajax-holder {
   .mfp-content {
@@ -148,20 +146,18 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
 .mfp-ajax-cur {
   cursor: progress;
 }
+
 .mfp-zoom-out-cur {
   &,
   .mfp-image-holder .mfp-close {
-    cursor: -moz-zoom-out;
-    cursor: -webkit-zoom-out;
     cursor: zoom-out;
   }
 }
+
 .mfp-zoom {
-  cursor: pointer;
-  cursor: -webkit-zoom-in;
-  cursor: -moz-zoom-in;
   cursor: zoom-in;
 }
+
 .mfp-auto-cursor {
   .mfp-content {
     cursor: auto;
@@ -216,8 +212,10 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
   left: 8px;
   right: 8px;
   z-index: $z-index-base + 4;
+
   a {
     color: $controls-text-color;
+
     &:hover {
       color: $controls-text-color-hover;
     }
@@ -246,13 +244,13 @@ button {
     cursor: pointer;
     background: transparent;
     border: 0;
-    -webkit-appearance: none;
+    appearance: none;
     display: block;
     padding: 0;
     z-index: $z-index-base + 6;
-    -webkit-box-shadow: none;
     box-shadow: none;
   }
+
   &::-moz-focus-inner {
     padding: 0;
     border: 0;
@@ -286,11 +284,13 @@ button {
     top: 1px;
   }
 }
+
 .mfp-close-btn-in {
   .mfp-close {
     color: $inner-close-icon-color;
   }
 }
+
 .mfp-image-holder,
 .mfp-iframe-holder {
   .mfp-close {
@@ -323,16 +323,19 @@ button {
     width: 90px;
     height: 110px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
     &:active {
       margin-top: -54px;
     }
+
     &:hover,
     &:focus {
       outline: 0;
       opacity: 1;
     }
-    &:before,
-    &:after,
+
+    &::before,
+    &::after,
     .mfp-b,
     .mfp-a {
       content: "";
@@ -347,14 +350,14 @@ button {
       border: medium inset transparent;
     }
 
-    &:after,
+    &::after,
     .mfp-a {
       border-top-width: 13px;
       border-bottom-width: 13px;
       top: 8px;
     }
 
-    &:before,
+    &::before,
     .mfp-b {
       border-top-width: 21px;
       border-bottom-width: 21px;
@@ -364,12 +367,13 @@ button {
   .mfp-arrow-left {
     left: 0;
 
-    &:after,
+    &::after,
     .mfp-a {
       border-right: 17px solid #fff;
       margin-left: 31px;
     }
-    &:before,
+
+    &::before,
     .mfp-b {
       margin-left: 25px;
       border-right: 27px solid #3f3f3f;
@@ -378,12 +382,14 @@ button {
 
   .mfp-arrow-right {
     right: 0;
-    &:after,
+
+    &::after,
     .mfp-a {
       border-left: 17px solid #fff;
       margin-left: 39px;
     }
-    &:before,
+
+    &::before,
     .mfp-b {
       border-left: 27px solid #3f3f3f;
     }
@@ -395,20 +401,24 @@ button {
   .mfp-iframe-holder {
     padding-top: $iframe-padding-top;
     padding-bottom: $iframe-padding-top;
+
     .mfp-content {
       line-height: 0;
       width: 100%;
       max-width: $iframe-max-width;
     }
+
     .mfp-close {
       top: -40px;
     }
   }
+
   .mfp-iframe-scaler {
     width: 100%;
     height: 0;
     overflow: hidden;
     padding-top: $iframe-ratio * 100%;
+
     iframe {
       position: absolute;
       display: block;
@@ -432,8 +442,6 @@ button {
       height: auto;
       display: block;
       line-height: 0;
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
       box-sizing: border-box;
       padding: $image-padding-top 0 $image-padding-bottom;
       margin: 0 auto;
@@ -443,7 +451,8 @@ button {
   /* The shadow behind the image */
   .mfp-figure {
     line-height: 0;
-    &:after {
+
+    &::after {
       content: "";
       position: absolute;
       left: 0;
@@ -457,16 +466,19 @@ button {
       box-shadow: $shadow;
       background: $image-background;
     }
+
     small {
       color: $caption-subtitle-color;
       display: block;
       font-size: var(--font-down-1);
       line-height: var(--line-height-medium);
     }
+
     figure {
       margin: 0;
     }
   }
+
   .mfp-bottom-bar {
     margin-top: -$image-padding-bottom + 4;
     position: absolute;
@@ -475,6 +487,7 @@ button {
     width: 100%;
     cursor: auto;
   }
+
   .mfp-title {
     text-align: left;
     line-height: var(--line-height-medium);
@@ -482,6 +495,7 @@ button {
     word-wrap: break-word;
     padding-right: 36px; // leave some space for counter at right side
     max-width: 100%;
+
     // add the download icon
     a.image-source-link .d-icon {
       padding-right: 5px;
@@ -518,32 +532,37 @@ button {
   }
 
   @if $include-mobile-layout-for-image {
-    @media all and (max-width: 800px) and (orientation: landscape),
-      screen and (max-height: 300px) {
+    @media all and (width <= 800px) and (orientation: landscape),
+      screen and (height <= 300px) {
       /**
        * Remove all paddings around the image on small screen
        */
+
       .mfp-img-mobile {
         .mfp-image-holder {
           padding-left: 0;
           padding-right: 0;
         }
+
         img {
           &.mfp-img {
             padding: 0;
           }
         }
+
         .mfp-figure {
           /* The shadow behind the image */
-          &:after {
+          &::after {
             top: 0;
             bottom: 0;
           }
+
           small {
             display: inline;
             margin-left: 5px;
           }
         }
+
         .mfp-bottom-bar {
           background: rgba(0, 0, 0, 0.6);
           bottom: 0;
@@ -551,17 +570,18 @@ button {
           top: auto;
           padding: 3px 5px;
           position: fixed;
-          -webkit-box-sizing: border-box;
-          -moz-box-sizing: border-box;
           box-sizing: border-box;
+
           &:empty {
             padding: 0;
           }
         }
+
         .mfp-counter {
           right: 5px;
           top: 3px;
         }
+
         .mfp-close {
           top: 0;
           right: 0;
@@ -579,18 +599,19 @@ button {
 }
 
 // Scale navigation arrows and reduce padding from sides
-@media all and (max-width: 900px) {
+@media all and (width <= 900px) {
   .mfp-arrow {
     @include transform(scale(0.75));
   }
+
   .mfp-arrow-left {
     transform-origin: 0;
-    -webkit-transform-origin: 0;
   }
+
   .mfp-arrow-right {
     transform-origin: 100%;
-    -webkit-transform-origin: 100%;
   }
+
   .mfp-container {
     padding-left: $popup-padding-left-mobile;
     padding-right: $popup-padding-left-mobile;
@@ -604,8 +625,6 @@ button {
     @media screen and (prefers-reduced-motion: no-preference) {
       transition: all 0.2s;
     }
-    -webkit-transform: scale(0.8);
-    -ms-transform: scale(0.8);
     transform: scale(0.8);
   }
 
@@ -620,6 +639,7 @@ button {
       opacity: 1;
       @include transform(scale(1));
     }
+
     &.mfp-bg {
       opacity: 0.7;
     }
@@ -631,6 +651,7 @@ button {
       @include transform(scale(0.8));
       opacity: 0;
     }
+
     &.mfp-bg {
       opacity: 0;
     }
@@ -642,9 +663,11 @@ button {
     overflow-y: auto !important;
     overflow-x: auto !important;
   }
+
   .mfp-figure {
     overflow: auto;
   }
+
   .mfp-img {
     max-width: none;
   }
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index c47dc918518..dced6e7af23 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -7,12 +7,14 @@
     width: 100%;
   }
 }
+
 .header-cloak {
   display: none;
 }
 
 .menu-panel.drop-down {
   position: absolute;
+
   // positions are relative to the .d-header .panel div
   top: 100%; // directly underneath .panel
   right: -10px; // 10px to the right of .panel - adjust as needed
@@ -70,10 +72,12 @@
     .show-all {
       display: flex;
       flex: 1 1 auto;
+
       button {
         width: 100%;
       }
     }
+
     .notifications-dismiss {
       margin-left: 0.5em;
     }
@@ -81,6 +85,7 @@
     .btn {
       background-color: var(--primary-very-low);
       color: var(--primary-high);
+
       &:hover {
         background: var(--primary-low);
         color: var(--primary);
@@ -105,7 +110,7 @@
   right: 0;
   width: 320px;
   padding: 0;
-  border-top-right-radius: 0px;
+  border-top-right-radius: 0;
 
   .panel-body-bottom {
     flex: 0;
@@ -129,7 +134,7 @@
       position: relative;
       border-radius: 0;
       padding: 0.857em;
-      @media screen and (max-height: 400px) {
+      @media screen and (height <= 400px) {
         // helps with 400% zoom level
         font-size: var(--font-down-1);
         padding: 0.5em 0.875em;
@@ -145,7 +150,7 @@
         right: 6px;
         top: 6px;
         font-size: var(--font-down-3);
-        @media screen and (max-height: 400px) {
+        @media screen and (height <= 400px) {
           // helps with 400% zoom level
           right: 0;
           top: 0;
@@ -155,6 +160,7 @@
       &.active {
         background-color: var(--d-selected);
       }
+
       &:hover {
         background-color: var(--d-hover);
       }
@@ -189,9 +195,11 @@
       align-items: center;
       overflow-y: auto; // really short viewports
     }
+
     li {
       flex: 1 1 auto;
       max-height: 3em; // prevent buttons from getting too tall
+
       > * {
         // button, a, and everything else
         height: 100%;
@@ -199,15 +207,18 @@
         margin: 0;
         padding: 0 0.5em;
       }
+
       img.emoji {
         height: 1em;
         width: 1em;
         padding-top: 0.2em;
         margin-right: 0.5em;
       }
+
       .d-icon {
         padding-top: 0;
       }
+
       &.enabled .d-icon {
         color: var(--tertiary);
       }
@@ -224,7 +235,6 @@
         font-size: var(--font-down-3);
         color: var(--primary-medium);
       }
-
       justify-content: unset;
       line-height: var(--line-height-large);
       width: 100%;
@@ -267,6 +277,7 @@
     padding: 0.25em 0.5em;
     display: block;
     color: var(--primary);
+
     &:hover,
     &:focus {
       background-color: var(--d-hover);
@@ -294,6 +305,7 @@
     padding: 0.25em 0.5em;
     display: block;
     color: var(--primary);
+
     &:hover,
     &:focus {
       background-color: var(--d-hover);
@@ -324,8 +336,10 @@
     padding: 0.25em 0.5em;
     width: 50%;
     box-sizing: border-box;
+
     a {
       display: inline-flex;
+
       &:hover,
       &:focus {
         background: transparent;
@@ -335,6 +349,7 @@
         }
       }
     }
+
     .badge-notification {
       color: var(--primary-med-or-secondary-med);
       background-color: transparent;
@@ -365,6 +380,7 @@
       color: var(--d-sidebar-link-color);
       display: flex;
       align-items: center;
+
       svg {
         margin-right: var(--d-sidebar-section-link-prefix-margin-right);
         height: 0.75em;
@@ -413,6 +429,7 @@
   &:hover .d-icon {
     color: var(--primary-medium);
   }
+
   .icon {
     color: var(--primary-high);
   }
@@ -439,6 +456,7 @@
     &.pending {
       background-color: var(--tertiary-low);
     }
+
     &:hover {
       background-color: var(--d-hover);
       outline: none;
@@ -446,6 +464,7 @@
 
     &:focus-within {
       background: var(--d-hover);
+
       a {
         // we don't need the link focus because we're styling the parent
         outline: 0;
@@ -484,6 +503,7 @@
       flex: 0 1 auto;
       min-width: 1.2em;
       max-width: 10em;
+
       &:nth-of-type(2) {
         // margin for comma between username and username2
         margin-left: 0.25em;
@@ -497,10 +517,12 @@
 
     &:focus-within {
       background: var(--d-hover);
+
       a {
         // we don't need the link focus because we're styling the parent
         outline: 0;
       }
+
       .btn-flat:focus {
         // undo default btn-flat style
         background: transparent;
@@ -511,7 +533,7 @@
     .profile-tab-btn {
       display: flex;
       margin: 0.25em;
-      padding: 0em 0.25em;
+      padding: 0 0.25em;
     }
 
     button {
@@ -537,6 +559,7 @@
       overflow: hidden;
     }
   }
+
   li:not(.show-all) {
     padding: 0;
     align-self: flex-start;
@@ -547,26 +570,32 @@
       margin-right: 0.5em;
     }
   }
+
   .is-warning {
     .d-icon-envelope {
       color: var(--danger);
     }
   }
+
   .read {
     background-color: var(--secondary);
   }
+
   .none {
     padding-top: 5px;
   }
+
   .spinner-container {
     min-height: 2em;
   }
+
   .spinner {
     width: 20px;
     height: 20px;
     border-width: 2px;
     margin: 0 auto;
   }
+
   .show-all a {
     width: 100%;
     display: flex;
@@ -575,11 +604,13 @@
     min-height: 30px;
     color: var(--primary-med-or-secondary-high);
     background: var(--blend-primary-secondary-5);
+
     &:hover {
       color: var(--primary);
       background: var(--primary-low);
     }
   }
+
   /* as a big ol' click target, don't let text inside be selected */
   @include unselectable;
 }
@@ -599,6 +630,7 @@
       .item-label {
         font-weight: bold;
       }
+
       .item-description {
         color: var(--primary);
       }
@@ -617,6 +649,7 @@
           width: 100%;
           height: 100%;
         }
+
         &__icon-wrapper {
           position: absolute;
           right: -0.65em;
@@ -638,10 +671,12 @@
           }
         }
       }
+
       & + div {
         padding: 0.25em 0;
       }
     }
+
     &.unread .icon-avatar__icon-wrapper {
       background: var(--tertiary);
 
@@ -658,11 +693,13 @@
   .panel-body {
     display: block;
   }
+
   .panel-body-contents {
     max-height: unset;
     min-height: 100%;
   }
 }
+
 .header-cloak {
   height: 100%;
   width: 100%;
@@ -677,6 +714,7 @@
 .menu-panel.slide-in {
   top: 0;
   box-sizing: border-box;
+
   // ensure there's always space to click outside on tiny devices
   max-width: 90vw;
 
@@ -684,7 +722,6 @@
   @supports (height: 100dvh) {
     --100dvh: 100dvh;
   }
-  box-shadow: 0px 0 30px -2px rgba(0, 0, 0, 0.5);
-
+  box-shadow: 0 0 30px -2px rgba(0, 0, 0, 0.5);
   height: var(--100dvh);
 }
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index cae867fb4c8..6e1e21d03f2 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -1,8 +1,6 @@
 // Modal wrappers
-
 .d-modal {
   pointer-events: none; // Allow clicks through wrappers so they hit the adjacent backdrop element
-
   display: flex;
   align-items: center;
   width: 100%;
@@ -37,10 +35,12 @@
     .modal-close {
       margin-left: auto;
       align-self: start;
+
       .d-icon {
         font-size: var(--font-up-2);
         color: var(--primary-high);
       }
+
       &:focus-visible {
         .d-icon {
           color: var(--primary);
@@ -82,6 +82,7 @@
         width: 100%;
       }
     }
+
     textarea {
       width: 100%;
       height: 80px;
@@ -94,10 +95,12 @@
     section.field {
       padding: 0.25em 0;
       margin-bottom: 5px;
+
       &.with-items {
         display: flex;
         align-items: flex-start;
       }
+
       .field-item {
         display: inline-block;
         margin-right: 10px;
@@ -109,6 +112,7 @@
       max-width: 100%;
     }
   }
+
   &__footer {
     display: flex;
     flex-wrap: wrap;
@@ -117,6 +121,7 @@
     border-top: 1px solid var(--primary-low);
     gap: 0.5rem;
   }
+
   &__backdrop {
     user-select: none;
     position: fixed;
@@ -139,7 +144,6 @@
 }
 
 //legacy
-
 .input-hint-text {
   margin-left: 0.5em;
   color: var(--secondary-high);
@@ -154,6 +158,7 @@
   left: 0;
   z-index: z("modal", "overlay");
   background-color: #111;
+
   &.fade {
     opacity: 0;
   }
@@ -174,6 +179,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 0.6;
   }
@@ -187,6 +193,7 @@
   .nav {
     padding: 10px 30px 10px 15px;
     background-color: var(--secondary);
+
     li > a {
       font-size: var(--font-0);
     }
@@ -237,6 +244,7 @@
 
     &.btn-reply-here {
       --text-color: var(--primary);
+
       .discourse-no-touch & {
         &:hover {
           --text-color: var(--secondary);
@@ -260,6 +268,7 @@
       align-items: baseline;
       color: var(--text-color);
       font-size: var(--font-up-1);
+
       .d-icon {
         color: var(--text-color);
         margin: 0;
@@ -276,9 +285,11 @@
       display: flex;
       align-items: baseline;
       gap: 0.5em;
+
       .discourse-tags {
         font-size: var(--font-down-1);
       }
+
       .badge-category__name,
       .discourse-tag {
         color: var(--text-color);
@@ -295,6 +306,7 @@
     border-radius: 25px;
     overflow: hidden;
     margin: 30px 0 20px;
+
     span {
       display: block;
       width: 0%;
@@ -312,24 +324,30 @@
   .btn {
     background-color: transparent;
     margin-right: 5px;
+
     &:hover,
     &.active {
       color: var(--primary);
     }
+
     &.active {
       font-weight: bold;
     }
+
     &:focus {
       outline: 2px solid var(--primary-low);
     }
   }
+
   .incoming-email-tabs {
     margin-bottom: 15px;
   }
+
   .incoming-email-content {
     height: 300px;
     max-width: 100%;
     width: 90vw; // forcing textarea wider
+
     textarea,
     .incoming-email-html-part {
       height: 95%;
@@ -338,17 +356,19 @@
       padding-top: 10px;
       width: 100%;
     }
+
     textarea {
       font-family: var(--d-font-family--monospace);
       resize: none;
       border-radius: 0;
       box-shadow: none;
     }
+
     .incoming-email-html-part {
       width: calc(100% - 36px);
       padding: 10px 4px 4px 4px;
     }
-    @media screen and (max-width: 760px) {
+    @media screen and (width <= 760px) {
       .incoming-email-html-part {
         width: calc(100% - 10px);
       }
@@ -388,17 +408,22 @@
   form {
     margin: 0;
   }
+
   .flag-action-type .controls .checkbox-label {
     margin-bottom: 0.25em;
   }
+
   .flag-action-type-details {
     width: 100%;
+
     // max-width: 500px;
     line-height: var(--line-height-large);
+
     a {
       margin: 0;
     }
   }
+
   .flag-confirmation {
     margin-top: 0.5em;
     padding-left: 1.125em;
@@ -466,6 +491,7 @@
   flex-wrap: wrap;
   align-items: baseline;
   margin-bottom: 0.5em;
+
   .description {
     width: 100%;
     margin-top: 0.25em;
diff --git a/app/assets/stylesheets/common/base/new-user.scss b/app/assets/stylesheets/common/base/new-user.scss
index 17b025d7c27..efe12af6736 100644
--- a/app/assets/stylesheets/common/base/new-user.scss
+++ b/app/assets/stylesheets/common/base/new-user.scss
@@ -27,6 +27,7 @@
 @mixin bordered-nav-pills {
   width: 100%;
   margin: 0;
+
   .d-icon {
     font-size: var(--font-down-1);
   }
@@ -38,6 +39,7 @@
           font-size: var(--font-up-1);
           margin: 0;
         }
+
         span {
           display: none;
         }
@@ -68,6 +70,7 @@
   .user-navigation-primary {
     [class*="horizontal-overflow-nav__scroll"] {
       font-size: var(--font-up-1);
+
       .d-icon {
         margin-top: 0.15em; // minor alignment
       }
@@ -78,7 +81,6 @@
     position: relative;
     display: flex;
     min-width: 0;
-
     gap: 0 0.5em;
     font-size: var(--font-down-1);
 
@@ -95,10 +97,12 @@
       // manage long group names
       max-width: 20vw;
       min-width: 7em;
+
       .select-kit-selected-name,
       .name {
         @include ellipsis;
       }
+
       .name {
         min-width: 0;
       }
@@ -110,6 +114,7 @@
       @include breakpoint(extra-large) {
         font-size: var(--font-down-1);
       }
+
       > li {
         margin: 0;
       }
@@ -163,6 +168,7 @@
 
 .user-preferences__tracking-topics-wrapper {
   margin-bottom: 3em;
+
   .control-label {
     margin-bottom: 1em;
   }
@@ -172,6 +178,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
   gap: 2em;
+
   .control-group {
     width: 100%;
     min-width: 16em;
diff --git a/app/assets/stylesheets/common/base/not-found.scss b/app/assets/stylesheets/common/base/not-found.scss
index 6cf7a3ab4be..bbe120d2574 100644
--- a/app/assets/stylesheets/common/base/not-found.scss
+++ b/app/assets/stylesheets/common/base/not-found.scss
@@ -1,5 +1,4 @@
 // Page not found styles
-
 .not-found-container {
   background: var(--d-content-background);
 }
@@ -19,7 +18,7 @@
 
 .page-not-found-topics {
   display: flex;
-  @media screen and (max-width: 600px) {
+  @media screen and (width <= 600px) {
     flex-wrap: wrap;
   }
 }
@@ -31,9 +30,10 @@
   max-width: 400px;
   margin-bottom: 40px;
   padding-right: 20px;
-  @media screen and (max-width: 600px) {
+  @media screen and (width <= 600px) {
     width: 100%;
   }
+
   h2 {
     margin-bottom: 10px;
   }
@@ -44,11 +44,12 @@
   flex-wrap: wrap;
   align-items: baseline;
   margin-bottom: 15px;
-  @media screen and (max-width: 600px) {
+  @media screen and (width <= 600px) {
     &:nth-of-type(n + 6) {
       display: none;
     }
   }
+
   a:not(.badge-category__wrapper) {
     flex-basis: 100%;
   }
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index e215c0c8330..c93d1118425 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -1,5 +1,5 @@
 a.loading-onebox {
-  &:before {
+  &::before {
     content: "";
     display: inline-flex;
     float: left;
@@ -16,10 +16,10 @@ a.loading-onebox {
 
 .onebox-result {
   @include post-aside;
-
   margin-top: 15px;
   padding: 12px;
   font-size: var(--font-0);
+
   > .source {
     margin-bottom: 12px;
     margin-right: 10px;
@@ -27,6 +27,7 @@ a.loading-onebox {
     color: var(--primary);
     position: relative;
     height: 20px;
+
     .info {
       a {
         color: black;
@@ -35,6 +36,7 @@ a.loading-onebox {
       }
       position: absolute;
       font-size: var(--font-0);
+
       img.favicon {
         margin-right: 3px;
       }
@@ -43,6 +45,7 @@ a.loading-onebox {
 
   .onebox-result-body {
     padding-top: 5px;
+
     img {
       max-height: 80%;
       max-width: 25%;
@@ -50,16 +53,20 @@ a.loading-onebox {
       float: left;
       margin-right: 1em;
     }
+
     h3,
     h4 {
       margin: 0;
     }
+
     code {
       max-height: 400px;
     }
+
     .metrics {
       clear: both;
       padding-bottom: 25px;
+
       .metric {
         padding-left: 33px;
         float: left;
@@ -75,6 +82,7 @@ a.loading-onebox {
       float: none;
       margin-right: 7px;
     }
+
     img.popcorn {
       float: none;
       margin-left: 20px;
@@ -145,12 +153,13 @@ aside.onebox {
     img:not(.avatar, .onebox-avatar-inline) {
       max-height: 170px;
       max-width: 20%;
-      @media all and (max-width: 600px) {
+      @media all and (width <= 600px) {
         max-width: 35%;
       }
       height: auto;
       float: left;
       margin-right: 1em;
+
       &.onebox-full-image {
         max-height: none;
         max-width: none;
@@ -160,6 +169,7 @@ aside.onebox {
     [style*="--aspect-ratio"] > :first-child {
       width: 100%;
     }
+
     [style*="--aspect-ratio"] > img {
       height: auto;
     }
@@ -169,6 +179,7 @@ aside.onebox {
     @supports (--custom: property) {
       .aspect-image {
         max-height: 170px;
+
         --magic-ratio: calc(var(--aspect-ratio) + 0.15);
         width: calc(128px * var(--magic-ratio));
         max-width: 20%;
@@ -204,11 +215,13 @@ aside.onebox {
       [style*="--aspect-ratio"] {
         position: relative;
       }
+
       [style*="--aspect-ratio"]::before {
         content: "";
         display: block;
         padding-bottom: calc(100% / (var(--aspect-ratio)));
       }
+
       [style*="--aspect-ratio"] > :first-child {
         position: absolute;
         top: 0;
@@ -246,14 +259,17 @@ aside.onebox {
       .fa {
         margin-right: 5px;
       }
+
       .full-name,
       .location {
         margin-right: 10px;
       }
+
       .user-onebox--joined {
         color: var(--primary-medium);
         margin-top: 10px;
       }
+
       .aspect-image {
         width: 80px;
         height: 80px;
@@ -283,8 +299,9 @@ aside.onebox {
     }
 
     .video-icon {
-      &:before {
+      &::before {
         opacity: 0.8;
+
         // ideally, the SVG used here should be in HTML and reference the SVG sprite
         content: svg-uri(
           '<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 512 512" fill="white"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
@@ -323,10 +340,12 @@ aside.onebox {
   background-color: var(--primary-low-mid);
   color: var(--primary);
   border: 1px inset var(--primary);
+
   .gdocs-onebox-logo {
     display: inline-block;
     width: 128px;
     height: 128px;
+
     &.g-calendar-logo {
       background: absolute-image-url(
           "/favicons/google_branding/logo_calendar_128px.png"
@@ -354,7 +373,7 @@ pre.onebox {
 }
 
 // -- Onebox Github Code Blob --
-pre.onebox code ol.lines li:before {
+pre.onebox code ol.lines li::before {
   position: absolute;
   display: inline-block;
   width: 35px;
@@ -375,6 +394,7 @@ pre.onebox code ol.lines li:before {
     margin-bottom: 5px;
     font-size: 1rem;
   }
+
   .git-blob-info {
     font-size: var(--font-down-1);
   }
@@ -384,9 +404,11 @@ pre.onebox code ol {
   margin-left: 0;
   line-height: var(--line-height-large);
 }
+
 pre.onebox code {
   background-color: var(--primary-very-low);
 }
+
 pre.onebox code li {
   padding-left: 5px;
 }
@@ -417,6 +439,7 @@ pre.onebox code {
 .onebox-warning-message {
   margin-top: 5px;
   color: var(--primary-med-or-secondary-med);
+
   img.emoji {
     width: 20px;
     height: 20px;
@@ -481,6 +504,7 @@ pre.onebox code {
   .branches {
     grid-area: branches;
     font-size: var(--font-down-1);
+
     code {
       word-break: break-all;
     }
@@ -489,6 +513,7 @@ pre.onebox code {
   .github-info-container {
     width: 100%;
     overflow-x: hidden;
+
     > span {
       // TODO: remove in a few months
       // replaced by .github-info in new commit oneboxes
@@ -510,6 +535,7 @@ pre.onebox code {
       .added {
         color: var(--success);
       }
+
       .removed {
         color: var(--danger);
       }
@@ -533,7 +559,7 @@ pre.onebox code {
 
     .show-more {
       // padding on right for larger hitzone
-      padding: 0.5em 1.5em 0em 0.25em;
+      padding: 0.5em 1.5em 0 0.25em;
     }
   }
 
@@ -624,9 +650,11 @@ pre.onebox code {
 .onebox-body .status_tag.open {
   background-color: #6cc644;
 }
+
 .onebox-body .status_tag.merged {
   background-color: #6e5494;
 }
+
 .onebox-body .status_tag.closed {
   background-color: #bd2c00;
 }
@@ -646,6 +674,7 @@ aside.onebox.twitterstatus .onebox-body {
     height: 36px;
     margin-right: 12px;
   }
+
   .twitter-screen-name {
     font-size: var(--font-down-1);
   }
@@ -704,7 +733,7 @@ aside.onebox.twitterstatus .onebox-body {
     white-space: nowrap;
 
     svg {
-      fill: currentColor;
+      fill: currentcolor;
       margin-right: 0.25em;
     }
   }
@@ -775,6 +804,7 @@ aside.onebox.xkcd .onebox-body img {
     background: absolute-image-url("/favicons/pdf_64px.png") no-repeat;
     background-size: 48px 48px;
   }
+
   .filesize {
     color: gray;
   }
@@ -788,9 +818,11 @@ aside.onebox.xkcd .onebox-body img {
   .label2 {
     color: var(--primary-med-or-secondary-med);
   }
+
   .label1 {
     float: left;
   }
+
   .label2 {
     float: right;
   }
@@ -802,6 +834,7 @@ aside.onebox.xkcd .onebox-body img {
     height: 16px;
     margin-right: 0.5em;
   }
+
   &.category-onebox {
     border: 1px solid var(--primary-low);
     padding-left: calc(1em - 5px);
@@ -817,6 +850,7 @@ aside.onebox.xkcd .onebox-body img {
 
   .discourse-tags {
     vertical-align: bottom;
+
     .d-icon-tag {
       font-size: var(--font-down-1);
       margin-right: 0.35em;
@@ -844,6 +878,7 @@ aside.onebox.xkcd .onebox-body img {
   div.aspect-image-full-size {
     position: relative;
   }
+
   div.description {
     color: var(--primary-med-or-secondary-med);
   }
@@ -853,11 +888,13 @@ aside.onebox.xkcd .onebox-body img {
   .thumbnail {
     width: 60px;
     height: 60px;
+
     &.onebox-full-image {
       max-height: 60px;
       max-width: 60px;
     }
   }
+
   .label1 {
     color: var(--primary-med-or-secondary-med);
   }
@@ -884,16 +921,19 @@ aside.onebox.mixcloud-preview {
   border: 0;
   height: 120px;
   background-color: #1c1f21;
+
   article.onebox-body img {
     padding: 0;
     max-height: 120px;
   }
+
   .onebox-body {
     a[href],
     a[href]:visited,
     a[href]:hover {
       color: #d1d1d1;
     }
+
     .video-icon {
       position: relative;
       top: 17px;
@@ -901,9 +941,11 @@ aside.onebox.mixcloud-preview {
       float: left;
       padding-left: 6px;
     }
+
     .mixcloud-text {
       padding-left: 170px;
       font-family: sans-serif;
+
       h3 {
         font-size: 13px;
         font-weight: 300;
@@ -911,6 +953,7 @@ aside.onebox.mixcloud-preview {
         padding-top: 15px;
         height: 20px;
       }
+
       h4 {
         font-size: 12px;
         font-weight: 200;
@@ -1044,39 +1087,43 @@ iframe.loom-onebox {
     align-items: center;
 
     &.image {
-      &:before {
+      &::before {
         opacity: 0.8;
         content: svg-uri(
           '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="grey" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>'
         );
       }
     }
+
     &.video {
-      &:before {
+      &::before {
         opacity: 0.8;
         content: svg-uri(
           '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="white" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>'
         );
       }
     }
+
     &.audio {
-      &:before {
+      &::before {
         opacity: 0.4;
         content: svg-uri(
           '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M511.99 32.01c0-21.71-21.1-37.01-41.6-30.51L150.4 96c-13.3 4.2-22.4 16.5-22.4 30.5v261.42c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64V214.31l256-75.02v184.63c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64l-.01-351.99z"></path></svg>'
         );
       }
     }
+
     &.map {
-      &:before {
+      &::before {
         opacity: 0.4;
         content: svg-uri(
           '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"></path></svg>'
         );
       }
     }
+
     &.generic {
-      &:before {
+      &::before {
         opacity: 0.4;
         content: svg-uri(
           '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"></path></svg>'
@@ -1099,9 +1146,11 @@ aside.onebox.preview-error .site-icon {
     height: 36px;
     margin-right: 12px;
   }
+
   .threads-screen-name {
     font-size: var(--font-down-1);
   }
+
   h4 {
     margin-bottom: 0;
   }
@@ -1159,7 +1208,7 @@ aside.onebox.preview-error .site-icon {
     margin-left: 0.75em;
 
     svg {
-      fill: currentColor;
+      fill: currentcolor;
       margin-right: 0.25em;
     }
   }
diff --git a/app/assets/stylesheets/common/base/personal-message.scss b/app/assets/stylesheets/common/base/personal-message.scss
index 035c347795b..577b445f324 100644
--- a/app/assets/stylesheets/common/base/personal-message.scss
+++ b/app/assets/stylesheets/common/base/personal-message.scss
@@ -4,6 +4,7 @@
 
   .topic-post {
     margin-bottom: 0.5em;
+
     &:last-child {
       margin-bottom: 1.5em;
     }
@@ -14,6 +15,7 @@
       var(--pm-border-radius);
     border: 1px solid var(--primary-low);
     padding-left: var(--pm-padding);
+
     .desktop-view & {
       margin-left: calc(var(--pm-padding) * -1);
     }
@@ -52,6 +54,7 @@
       var(--topic-body-width) + var(--topic-body-width-padding) * 2 +
         var(--topic-avatar-width) - 1.65em
     );
+
     &.old {
       border: 1px solid var(--primary-low);
     }
@@ -97,6 +100,7 @@
 
     .participants {
       margin-bottom: 1.5em;
+
       .user {
         border: none;
         background: var(--primary-low);
@@ -113,21 +117,26 @@
 
   .embedded-posts {
     border: none;
+
     .topic-body {
       overflow: visible;
       width: 100%;
     }
+
     .topic-avatar {
       padding-left: 0;
     }
+
     .collapse-down,
     .collapse-up {
       display: none;
     }
+
     &.bottom {
       margin-bottom: 0;
       margin-right: calc(var(--topic-body-width-padding) * 2);
     }
+
     &.top {
       .cooked {
         border: 1px solid var(--primary-low);
@@ -135,6 +144,7 @@
         margin-left: calc(var(--pm-padding) * -1);
         padding-left: 2.15em;
       }
+
       .row {
         .topic-body,
         .topic-avatar {
@@ -151,12 +161,12 @@
   }
 
   // special post type colors
-
   .current-user-post {
     .regular.contents {
       background: var(--tertiary-very-low);
       border-color: var(--tertiary-very-low);
     }
+
     .embedded-posts {
       .topic-body .cooked {
         background: transparent;
@@ -174,6 +184,7 @@
     .regular.contents {
       background: var(--highlight-low);
       border-color: var(--highlight-low);
+
       .cooked {
         background: transparent;
       }
@@ -195,10 +206,12 @@
     .topic-body .regular.contents {
       background: var(--danger-low);
       border-color: transparent;
+
       .cooked {
         background: transparent;
       }
     }
+
     &.whisper {
       .topic-body .regular.contents {
         border-color: var(--danger-low-mid);
diff --git a/app/assets/stylesheets/common/base/popup-menu.scss b/app/assets/stylesheets/common/base/popup-menu.scss
index 01705b39308..9fc8c4cb64e 100644
--- a/app/assets/stylesheets/common/base/popup-menu.scss
+++ b/app/assets/stylesheets/common/base/popup-menu.scss
@@ -1,6 +1,5 @@
 // LEGACY STYLES
 // some plugins rely on these (discourse-topic-voting is one)
-
 .popup-menu {
   background-color: var(--secondary);
   width: 14em;
diff --git a/app/assets/stylesheets/common/base/reorder-categories.scss b/app/assets/stylesheets/common/base/reorder-categories.scss
index 4190665d390..67199039407 100644
--- a/app/assets/stylesheets/common/base/reorder-categories.scss
+++ b/app/assets/stylesheets/common/base/reorder-categories.scss
@@ -14,6 +14,7 @@
     width: 100%;
     padding-bottom: 150px;
     margin: 0 0.667em;
+
     td {
       padding: 0.5em 0.5em 0.5em 0;
       min-width: 10em;
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index 5ef45c0ea50..ed9b457416b 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -9,19 +9,24 @@
 
   .status {
     color: var(--primary-medium);
+
     span.approved {
       color: var(--success);
+
       .d-icon {
-        color: currentColor;
+        color: currentcolor;
       }
     }
+
     span.rejected {
       color: var(--danger);
+
       .d-icon {
-        color: currentColor;
+        color: currentcolor;
       }
     }
   }
+
   .explain {
     margin-left: 0.5em;
   }
@@ -64,6 +69,7 @@
   .saved {
     margin-left: 0.5em;
   }
+
   .reviewable-score-type {
     display: flex;
     margin-bottom: 0.5em;
@@ -71,6 +77,7 @@
     .select-kit {
       min-width: 10em;
     }
+
     .title {
       width: 30%;
     }
@@ -80,6 +87,7 @@
 .reviewable-user-info {
   max-width: 100%;
   margin: 0.5em 0;
+
   .reviewable-user-fields {
     margin-bottom: 2em;
   }
@@ -87,13 +95,14 @@
   .reviewable-user-details {
     border-bottom: 1px solid var(--primary-low);
     padding-bottom: 0.25em;
-
     display: flex;
+
     .name {
       width: 8em;
       font-weight: bold;
       margin-right: 1em;
     }
+
     .value {
       max-width: calc(
         100% - 8em - 1em
@@ -136,6 +145,7 @@
 .reviewable-claimed-topic {
   display: flex;
   align-items: center;
+
   .btn-small {
     margin-left: 0.5em;
   }
@@ -152,6 +162,7 @@
 .claimed-by {
   display: flex;
   align-items: center;
+
   .claimed-username {
     margin-left: 0.5em;
   }
@@ -188,6 +199,7 @@
     width: 5em;
   }
 }
+
 .user-flag-percentage {
   display: flex;
   align-items: center;
@@ -195,22 +207,28 @@
 
   .percentage-label {
     margin-right: 0.25em;
+
     &.agreed {
       color: var(--success);
+
       + .d-icon {
         color: var(--success);
       }
     }
+
     &.disagreed {
       color: var(--danger);
+
       + .d-icon {
         color: var(--danger);
       }
     }
+
     &.ignored {
       color: var(--primary-medium);
     }
   }
+
   .d-icon {
     font-size: 0.9em;
   }
@@ -231,6 +249,7 @@
     margin-bottom: 0.5em;
     font-size: var(--font-down-1);
     align-items: baseline;
+
     .reviewable-type {
       margin-right: 0.25em;
       padding: 0.25em 0.5em;
@@ -239,26 +258,32 @@
       color: var(--secondary);
       border-radius: 8px;
       background-color: var(--secondary-high);
+
       &.-flagged-post,
       &.-flagged-chat-message {
         background-color: var(--danger);
       }
+
       &.-queued-post,
       &.-queued-topic,
       &.-user {
         background-color: var(--tertiary);
       }
     }
+
     .reply-count {
       margin-left: 1em;
     }
+
     .created-at {
       margin-left: 1em;
       margin-right: auto;
+
       a {
         color: var(--primary-med-or-secondary-med);
       }
     }
+
     .score {
       font-size: var(--font-down-1);
     }
@@ -287,6 +312,7 @@
       background-color: var(--success);
       color: var(--secondary);
     }
+
     .reject-post,
     .reject-post > summary {
       background-color: var(--danger);
@@ -313,7 +339,7 @@
 }
 
 .blur-images {
-  img:not(.avatar):not(.emoji) {
+  img:not(.avatar, .emoji) {
     filter: blur(10px);
     transition: 0.2s ease-in-out;
 
@@ -346,6 +372,7 @@
       margin-left: 0.5em;
     }
   }
+
   .user,
   .reviewed-by {
     display: flex;
@@ -378,18 +405,22 @@
 
   tbody {
     border-width: 1px;
+
     td {
       white-space: nowrap;
       vertical-align: baseline;
+
       &.user a,
       &.reviewed-by a {
         max-width: 150px;
         @include ellipsis;
       }
     }
+
     > tr > th {
       text-align: left;
     }
+
     > tr > th,
     > tr > td {
       &:not(:empty) {
@@ -429,13 +460,16 @@
 
 .reviewable-item {
   margin-block: 3rem;
+
   .show-raw-email {
     color: var(--primary-medium);
     font-size: var(--font-down-2);
   }
+
   .post-title {
     background-color: yellow;
   }
+
   .created-by {
     margin-right: 1em;
     padding-top: 0.35em;
@@ -458,6 +492,7 @@
       display: flex;
     }
   }
+
   .reviewable-post-header {
     display: flex;
     justify-content: space-between;
@@ -470,6 +505,7 @@
       align-items: center;
       color: var(--primary-medium);
       font-size: 0.9em;
+
       .d-icon {
         margin-right: 0.5em;
       }
@@ -490,7 +526,7 @@
       max-height: 50vh;
       overflow: hidden;
 
-      &:after {
+      &::after {
         content: "";
         position: absolute;
         left: 0;
@@ -504,9 +540,11 @@
         transform: translateX(-50%) translateY(-50%);
       }
     }
+
     p {
       margin-bottom: 0;
     }
+
     &__toggle-btn {
       background: var(--primary-very-low);
       color: var(--primary-high);
@@ -549,6 +587,7 @@
     width: 100%;
     color: var(--primary-medium);
     margin-bottom: 0.75em;
+
     .title-text {
       font-weight: bold;
       color: var(--primary);
@@ -556,9 +595,11 @@
       font-size: var(--font-up-2);
       margin-right: 0.75em;
     }
+
     .badge-category__wrapper {
       margin-left: 0.25em;
     }
+
     .discourse-tag {
       vertical-align: bottom;
       padding-left: 0.1em;
@@ -573,13 +614,14 @@
 .editable-fields {
   .editable-created-by {
     display: flex;
+
     .avatar {
       margin-right: 0.25em;
     }
     margin-bottom: 0.5em;
   }
-
   width: 100%;
+
   .editable-field {
     .mini-tag-chooser {
       margin: 0;
diff --git a/app/assets/stylesheets/common/base/revise-and-reject-post-reviewable.scss b/app/assets/stylesheets/common/base/revise-and-reject-post-reviewable.scss
index d353e664ece..892a1d9446e 100644
--- a/app/assets/stylesheets/common/base/revise-and-reject-post-reviewable.scss
+++ b/app/assets/stylesheets/common/base/revise-and-reject-post-reviewable.scss
@@ -10,7 +10,6 @@
 
   .revise-and-reject-reviewable__queued-post {
     @extend .reviewable-item;
-
     padding: 1em;
     margin: 0 0 1em 0;
 
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 0bcca94736b..8cc8b5c5ef1 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -1,5 +1,4 @@
 // Right to left styles.
-
 .rtl {
   .d-icon-align-right,
   .d-icon-angles-right,
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index f4e3aa5c349..27addceea8f 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -37,6 +37,7 @@ $search-pad-horizontal: 0.5em;
       width: auto;
       flex-grow: 1;
       padding-right: 50px;
+
       &:focus {
         outline: none;
       }
@@ -47,10 +48,12 @@ $search-pad-horizontal: 0.5em;
       margin-right: 0;
       white-space: nowrap;
       background-color: var(--primary-200);
+
       &:hover {
         background-color: var(--primary-medium);
       }
     }
+
     &:focus-within {
       @include default-focus;
     }
@@ -58,6 +61,7 @@ $search-pad-horizontal: 0.5em;
 
   .heading {
     padding: 5px 0 5px 5px;
+
     .filter {
       padding: 0 5px;
     }
@@ -94,9 +98,7 @@ $search-pad-horizontal: 0.5em;
           // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
           overflow-wrap: break-word;
           word-wrap: break-word;
-          word-break: break-all;
           word-break: break-word;
-          -webkit-hyphens: auto;
           hyphens: auto;
           margin-top: 0.25em;
         }
@@ -127,6 +129,7 @@ $search-pad-horizontal: 0.5em;
       .badge-category__wrapper {
         font-size: var(--font-0);
       }
+
       .widget-link {
         margin-bottom: 0;
       }
@@ -160,6 +163,7 @@ $search-pad-horizontal: 0.5em;
           font-size: var(--font-down-2);
         }
       }
+
       .user-result {
         display: flex;
         align-items: center;
@@ -195,12 +199,13 @@ $search-pad-horizontal: 0.5em;
 
         .d-icon {
           font-size: var(--font-down-2);
-          color: currentColor;
+          color: currentcolor;
         }
       }
 
       .avatar-flair {
         border-radius: 50%;
+
         &.avatar-flair-image {
           background-repeat: no-repeat;
           background-size: 100% 100%;
@@ -210,6 +215,7 @@ $search-pad-horizontal: 0.5em;
       .group-names {
         @include user-item-flex;
         min-width: 0;
+
         .name,
         .slug {
           @include ellipsis;
@@ -241,6 +247,7 @@ $search-pad-horizontal: 0.5em;
         height: 20px;
         margin-right: 0.5em;
       }
+
       .username {
         margin-right: 0.33em;
       }
@@ -270,9 +277,11 @@ $search-pad-horizontal: 0.5em;
       overflow-wrap: anywhere;
       white-space: wrap;
       min-width: 0;
+
       .keyword {
         margin-right: 0.33em;
       }
+
       .badge-wrapper {
         font-size: var(--font-0);
         margin-left: 2px;
@@ -294,21 +303,26 @@ $search-pad-horizontal: 0.5em;
       .search-item-prefix {
         margin-right: 0.33em;
       }
+
       .badge-category__wrapper {
         font-size: var(--font-0);
       }
+
       .search-link {
         display: flex;
         flex-wrap: wrap;
         align-items: baseline;
         @include ellipsis;
+
         .d-icon {
           margin-right: 0.33em;
           vertical-align: middle;
         }
+
         .d-icon-tag {
           font-size: 0.7em;
         }
+
         .d-icon-magnifying-glass {
           font-size: var(--font-down-1);
         }
@@ -321,12 +335,14 @@ $search-pad-horizontal: 0.5em;
     padding: $search-pad-vertical 1px;
     font-size: var(--font-down-2);
     color: var(--primary-medium);
+
     .tip-label {
       background-color: rgba(var(--tertiary-rgb), 0.1);
       margin-right: 4px;
       padding: 2px 4px;
       display: inline-block;
       border: none;
+
       &.tip-clickable {
         cursor: pointer;
       }
@@ -339,14 +355,17 @@ $search-pad-horizontal: 0.5em;
     .search-menu-assistant-item .search-link {
       flex-wrap: nowrap;
     }
+
     .heading {
       display: flex;
       justify-content: space-between;
+
       h4 {
         color: var(--primary-medium);
         font-weight: normal;
         margin-bottom: 0;
       }
+
       .clear-recent-searches {
         cursor: pointer;
         color: var(--primary-low-mid);
@@ -369,12 +388,14 @@ $search-pad-horizontal: 0.5em;
 
     .show-advanced-search,
     a.clear-search {
-      padding: 0px 3px;
+      padding: 0 3px;
       display: inline-block;
       background-color: transparent;
+
       .d-icon {
         color: var(--primary-medium);
       }
+
       &:focus,
       &:hover {
         .d-icon {
@@ -417,6 +438,7 @@ $search-pad-horizontal: 0.5em;
       margin-right: 0.25em;
     }
   }
+
   .search-result-topic,
   .search-result-post {
     .search-link {
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 4c0fbfece06..00cdbcf09e9 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -18,9 +18,10 @@
   }
 
   .search-header {
-    @include search-page-spacing();
+    @include search-page-spacing;
     background: var(--primary-very-low);
   }
+
   .warning {
     background-color: var(--danger-medium);
     padding: 5px 8px;
@@ -56,6 +57,7 @@
 
     .select-kit {
       flex: 1 1 20%;
+
       .name {
         white-space: nowrap;
       }
@@ -74,6 +76,7 @@
 
   .search-advanced {
     position: relative;
+
     .search-actions,
     .search-title,
     .search-bar {
@@ -81,7 +84,7 @@
     }
 
     .search-results {
-      @include search-page-spacing();
+      @include search-page-spacing;
 
       @include breakpoint(tablet) {
         padding: 1rem 0.5rem 1rem 0.25rem;
@@ -121,6 +124,7 @@
         margin: 0;
         padding: 0;
         display: inline;
+
         button {
           margin-right: 0.5em;
         }
@@ -129,6 +133,7 @@
       .sort-by.inline-form label {
         margin-bottom: 0;
       }
+
       #search-sort-by {
         margin-bottom: 0;
       }
@@ -177,18 +182,22 @@
         cursor: pointer;
         padding-top: 0.25em;
         padding-bottom: 0.25em;
+
         &:focus-visible {
           outline: 2px solid transparent;
           background-color: var(--tertiary-very-low);
         }
       }
+
       &[open] > summary {
         color: var(--primary);
         margin-bottom: 1em;
+
         &:focus-visible {
           background-color: var(--tertiary-very-low);
         }
       }
+
       .control-label {
         font-weight: bold;
         color: var(--primary-high);
@@ -220,6 +229,7 @@
         .search-advanced-options {
           column-count: 2;
           column-gap: 2em;
+
           .control-group {
             break-inside: avoid;
           }
@@ -238,6 +248,7 @@
           // overriding inline width from JS
           width: 100% !important;
         }
+
         .select-kit {
           min-width: unset;
         }
@@ -334,6 +345,7 @@
     flex-wrap: wrap;
     margin-top: 0.25em;
     gap: 0 0.5em;
+
     .badge-category__wrapper {
       max-width: 100%;
     }
@@ -353,6 +365,7 @@
     font-size: var(--font-0);
     line-height: var(--line-height-large);
     color: var(--primary-medium);
+
     .date {
       color: var(--primary-high);
     }
@@ -366,6 +379,7 @@
     display: block;
     color: var(--primary-high);
     margin-top: 0.25em;
+
     .d-icon {
       color: var(--love);
       font-size: var(--font-down-1);
@@ -375,18 +389,21 @@
   a.search-link.visited .topic-title {
     color: var(--primary-medium);
   }
+
   .search-link {
     .topic-title {
       font-size: var(--font-up-1);
       line-height: var(--line-height-medium);
       color: var(--primary);
     }
+
     .topic-statuses {
       display: inline-block;
       flex-shrink: 0;
       font-size: 1.1em;
       line-height: var(--line-height-medium);
       color: var(--primary-medium);
+
       span {
         line-height: 1;
       }
@@ -414,17 +431,20 @@
       min-width: 25px;
       flex: 0 0 auto;
     }
+
     .user-titles {
       display: flex;
       flex-direction: column;
       max-width: 300px;
       overflow: hidden;
+
       .name {
         color: var(--primary-high-or-secondary-low);
         font-size: var(--font-0);
         font-weight: 700;
         @include ellipsis;
       }
+
       .username {
         color: var(--primary-high-or-secondary-low);
         font-size: var(--font-down-1);
@@ -436,6 +456,7 @@
   .category-items,
   .tag-items {
     margin-bottom: 1.5em;
+
     .fps-category-item,
     .fps-tag-item {
       margin-bottom: 1.5em;
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index a2ada39ecc2..7b6a8bfe93e 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -1,5 +1,4 @@
 // styles that apply to the "share" modal & popup when sharing a link to a post or topic
-
 .link-share-container,
 .notify-user-input {
   display: flex;
@@ -47,6 +46,7 @@
     color: var(--twitter);
   }
 }
+
 .share-facebook {
   .d-icon {
     color: var(--facebook);
diff --git a/app/assets/stylesheets/common/base/sidebar-custom-section.scss b/app/assets/stylesheets/common/base/sidebar-custom-section.scss
index 925bced9957..515fb2f5815 100644
--- a/app/assets/stylesheets/common/base/sidebar-custom-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-custom-section.scss
@@ -2,9 +2,11 @@
   .sidebar-section-wrapper {
     padding-bottom: 0;
   }
+
   .sidebar-section-header {
     display: flex;
   }
+
   .sidebar-section[data-section-name="community"]
     .sidebar-section-link-prefix.icon {
     cursor: pointer;
@@ -20,15 +22,18 @@
     a {
       pointer-events: none;
     }
+
     .sidebar-section-link-wrapper {
       .sidebar-section-link-prefix.icon,
       .sidebar-section-link {
         background: none;
         color: var(--primary-low-mid);
       }
+
       .sidebar-section-link.drag {
         font-weight: bold;
         color: var(--primary-high);
+
         .sidebar-section-link-prefix.icon {
           color: var(--primary-high);
         }
@@ -36,6 +41,7 @@
     }
   }
 }
+
 .discourse-touch {
   .sidebar-custom-sections {
     a:hover {
diff --git a/app/assets/stylesheets/common/base/sidebar-footer.scss b/app/assets/stylesheets/common/base/sidebar-footer.scss
index 6e13a33f1f2..2aea3a6f7df 100644
--- a/app/assets/stylesheets/common/base/sidebar-footer.scss
+++ b/app/assets/stylesheets/common/base/sidebar-footer.scss
@@ -11,7 +11,8 @@
     position: relative;
     padding: 0.5em 0.8em;
     padding-bottom: max(env(safe-area-inset-bottom), 0.5em);
-    &:before {
+
+    &::before {
       // fade to make scroll more apparent
       position: absolute;
       content: "";
@@ -37,6 +38,7 @@
     font-size: var(--font-down-1);
     color: var(--d-sidebar-link-color);
     padding: 0 0.5em;
+
     &:hover,
     &:focus {
       background: var(--d-sidebar-highlight-background);
@@ -60,6 +62,7 @@
     &:focus,
     &:hover {
       background: var(--d-sidebar-highlight-background);
+
       .d-icon {
         color: var(--d-sidebar-highlight-color);
       }
diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss
index ebb46ded82c..864010d5124 100644
--- a/app/assets/stylesheets/common/base/sidebar-section-link.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss
@@ -19,8 +19,9 @@
     .prefix-image {
       border: 1px solid transparent;
     }
+
     &.active .prefix-image {
-      box-shadow: 0px 0px 0px 1px var(--success);
+      box-shadow: 0 0 0 1px var(--success);
     }
   }
 
@@ -36,9 +37,11 @@
       background: var(--d-sidebar-highlight-background);
       color: var(--d-sidebar-highlight-color);
       outline: none;
+
       .prefix-text {
         background: var(--d-sidebar-highlight-prefix-background);
       }
+
       .sidebar-section-link-suffix.icon.unread svg {
         color: var(--d-sidebar-highlight-suffix-color);
       }
@@ -55,15 +58,19 @@
           color: var(--d-sidebar-active-color);
         }
       }
+
       .prefix-text {
         background: var(--d-sidebar-active-prefix-background);
       }
+
       .sidebar-section-link-content-badge {
         color: var(--d-sidebar-active-color);
       }
+
       .sidebar-section-link-suffix.icon.unread svg {
         color: var(--d-sidebar-active-suffix-color);
       }
+
       .sidebar-section-link-hover:hover .sidebar-section-hover-button {
         background-color: var(--d-sidebar-active-background);
       }
@@ -71,9 +78,11 @@
 
     &--muted {
       opacity: 0.5;
+
       .sidebar-section-link-prefix.icon .d-icon {
         color: var(--primary-medium);
       }
+
       &.active {
         .sidebar-section-link-prefix.icon .d-icon {
           color: var(--primary-high);
@@ -95,6 +104,7 @@
     .sidebar-section-link-suffix {
       margin-left: 1em;
       font-size: var(--font-down-4);
+
       &.icon {
         &.urgent svg {
           color: var(--success);
@@ -198,6 +208,7 @@
         margin-right: -0.2em;
       }
     }
+
     .prefix-span {
       width: 0.8em;
       height: 0.8em;
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index 05f7371d890..00b1ba27b31 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -32,7 +32,6 @@
           opacity: 1;
         }
       }
-
       background: transparent;
       border: none;
       margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
@@ -48,6 +47,7 @@
       &:focus {
         outline: none;
         background: var(--d-sidebar-highlight-hover-background);
+
         .d-icon {
           color: var(--d-sidebar-highlight-hover-icon);
         }
@@ -56,6 +56,7 @@
       .discourse-no-touch & {
         &:hover {
           background: var(--d-sidebar-highlight-hover-background);
+
           .d-icon {
             color: var(--d-sidebar-highlight-hover-icon);
           }
@@ -80,6 +81,7 @@
 
       &:hover {
         color: var(--d-sidebar-header-color);
+
         .d-icon {
           color: var(--d-sidebar-header-icon-color);
         }
@@ -100,6 +102,7 @@
   .sidebar-section-header-global-indicator {
     margin: 0 0.75em 0 0.25em;
     font-size: var(--font-down-2);
+
     .d-icon {
       margin-top: -0.125em; // optical alignment
     }
@@ -124,6 +127,7 @@
       font-size: var(--font-0);
       text-transform: none;
       line-height: var(--line-height-medium);
+
       .name {
         font-size: var(--font-0);
       }
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index b46d086f25a..b3891392db6 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -3,24 +3,21 @@
   @include breakpoint(large) {
     --d-sidebar-width: #{$d-sidebar-narrow-width};
   }
+
   --d-sidebar-row-horizontal-padding: 1rem;
+
   // ems so height is variable along with font size
   --d-sidebar-row-height: 2.2em;
-
   --d-sidebar-animation-time: 0.25s;
   --d-sidebar-animation-ease: ease-in-out;
-
   --d-sidebar-background: var(--secondary);
   --d-sidebar-admin-background: var(--primary-very-low);
 
   // must be rgba for gradient
   --d-sidebar-footer-fade: rgba(var(--secondary-rgb), 1);
-
   --d-sidebar-header-color: var(--primary-medium);
   --d-sidebar-header-icon-color: var(--primary-medium);
-
   --d-sidebar-border-color: var(--primary-low);
-
   --d-sidebar-link-color: var(--primary-high);
   --d-sidebar-link-icon-color: var(--primary-500);
   --d-sidebar-link-badge-color: var(--primary-700); // example: new count
@@ -38,10 +35,10 @@
   --d-sidebar-highlight-prefix-background: var(--primary-300);
   --d-sidebar-highlight-prefix-color: var(--d-sidebar-highlight-color);
   --d-sidebar-highlight-suffix-color: var(--tertiary-med-or-tertiary);
-
   --d-sidebar-highlight-hover-background: var(
     --primary-medium
   ); // example: hovering a button within a highlighted section
+
   --d-sidebar-highlight-hover-icon: var(
     --primary-very-low
   ); // example: hovering a button within a highlighted section
@@ -74,11 +71,9 @@
   @supports (height: 1dvh) {
     --1dvh: 1dvh;
   }
-
   height: calc(
     var(--composer-vh, var(--1dvh)) * 100 - var(--main-outlet-offset, 0px)
   );
-
   align-self: start;
   overflow-y: auto;
 
@@ -86,11 +81,11 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    height: 100%;
     width: 100%;
     padding: 0;
     border-right: 1px solid var(--primary-low);
     overflow-x: hidden;
+
     // allows sidebar to scroll to the bottom when the composer is open
     height: calc(100% - var(--composer-height, 0px));
   }
@@ -112,7 +107,6 @@
     --scrollbarBg: transparent;
     --scrollbarThumbBg: var(--primary-low);
     --scrollbarWidth: 0.5em;
-
     scrollbar-color: transparent var(--scrollbarBg);
     transition: scrollbar-color 0.25s ease-in-out;
     transition-delay: 0.5s;
@@ -136,7 +130,6 @@
       &::-webkit-scrollbar-thumb {
         background-color: var(--scrollbarThumbBg);
       }
-
       transition-delay: 0s;
     }
 
@@ -144,6 +137,7 @@
       color: var(--d-sidebar-link-color);
       display: flex;
       align-items: center;
+
       svg {
         margin-right: var(--d-sidebar-section-link-prefix-margin-right);
         height: 0.75em;
@@ -168,23 +162,29 @@
     cursor: move;
     -webkit-user-drag: element;
   }
+
   .dragging {
     opacity: 0.4;
   }
+
   form {
     margin-bottom: 0;
   }
+
   .input-group input {
     width: 100%;
     margin-bottom: 0;
   }
+
   input.warning {
     border: 1px solid var(--danger);
   }
+
   .icon.warning,
   .value.warning {
     position: absolute;
   }
+
   .sidebar-section-form__input-wrapper {
     margin-bottom: 1em;
 
@@ -198,7 +198,6 @@
     grid-template-columns: 2em 4.5em repeat(2, 1fr) 2em;
     padding: 0.55em 0 0.7em;
     -webkit-user-drag: none;
-    user-drag: none;
     cursor: default;
     border-top: 2px solid transparent;
     border-bottom: 2px solid transparent;
@@ -215,9 +214,11 @@
     &.drag-above {
       border-top: 2px solid var(--tertiary);
     }
+
     &.drag-below {
       border-bottom: 2px solid var(--tertiary);
     }
+
     .link-icon {
       grid-column: 2;
     }
@@ -237,19 +238,23 @@
   .btn-flat.add-link {
     margin-top: 0.5em;
     margin-left: -0.5em;
+
     &:active,
     &:focus {
       background: none;
     }
+
     svg {
       color: var(--tertiary);
       width: 0.75em;
       height: 0.75em;
     }
+
     &:hover svg {
       color: var(--tertiary-hover);
     }
   }
+
   .d-modal__footer {
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -257,36 +262,45 @@
     @include breakpoint(mobile-extra-large) {
       grid-template-columns: auto 1fr;
       justify-items: left;
+
       .mark-public-wrapper {
         grid-row: 1;
         grid-column: 1 / span 2;
       }
+
       .checkbox-label {
         padding: 0 0 0.5em 0;
       }
     }
+
     .reset-link,
     .delete {
       margin: 0;
       justify-self: right;
     }
+
     .mark-public-wrapper {
       &.-disabled label {
         cursor: not-allowed;
       }
+
       .checkbox-label {
         margin: 0;
       }
     }
   }
+
   .select-kit.multi-select .multi-select-header .formatted-selection {
     display: none;
   }
+
   .select-kit.is-expanded .select-kit-body {
     min-width: 220px;
   }
+
   .reset-link {
     margin-right: 0;
+
     .discourse-no-touch & {
       &:hover {
         .d-icon {
@@ -294,15 +308,18 @@
         }
       }
     }
+
     .d-icon {
       font-size: var(--font-down-1);
       color: var(--tertiary);
     }
   }
+
   .delete-link {
     .d-icon {
       color: var(--primary-medium);
     }
+
     .discourse-no-touch & {
       &:hover {
         .d-icon {
@@ -315,6 +332,7 @@
 
 .sidebar__panel-switch-button {
   margin: 1em 1.3em 0 1.3em;
+
   &:last-of-type {
     margin-bottom: 1em;
   }
@@ -356,8 +374,8 @@
     border: 0;
     background: none;
     margin-bottom: 0;
-    width: 50px;
     height: 2em;
+
     &:focus-within {
       outline: 0;
     }
@@ -375,10 +393,12 @@
 .sidebar-no-results {
   margin: 0.5em var(--d-sidebar-row-horizontal-padding) 0
     var(--d-sidebar-row-horizontal-padding);
+
   &__title {
     font-weight: bold;
   }
 }
+
 .sidebar-no-results {
   display: block;
 }
@@ -396,6 +416,7 @@
 .sidebar-toggle-all-sections.btn-transparent {
   padding-right: 0;
   color: var(--d-sidebar-link-color);
+
   svg {
     width: 0.75em;
     height: 0.85em;
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index f0d01856a7f..85162f24fe8 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -84,6 +84,7 @@
     background-color: var(--primary-low);
     color: var(--primary-high);
     padding: 2px 8px;
+
     .extra-info-wrapper & {
       background-color: var(--header_primary-low);
       color: var(--header_primary-medium);
@@ -100,7 +101,8 @@
     margin-right: 0.5em;
     display: inline-flex;
     align-items: center;
-    &:before {
+
+    &::before {
       flex-shrink: 0;
       background: var(--primary-low-mid);
       margin-right: 5px;
@@ -110,7 +112,8 @@
       display: inline-block;
       content: "";
     }
-    &.large:before {
+
+    &.large::before {
       width: 13px;
       height: 13px;
     }
@@ -120,7 +123,7 @@
 .discourse-tags,
 .list-tags,
 .search-category {
-  .discourse-tag.simple:not(:last-child):after {
+  .discourse-tag.simple:not(:last-child)::after {
     content: ",\00a0";
     margin-left: 1px;
   }
@@ -174,10 +177,12 @@ header .discourse-tag {
 
 .tag-sort-options {
   margin-bottom: 20px;
+
   a {
     text-decoration: underline;
     display: inline-flex;
   }
+
   span.active a {
     font-weight: bold;
   }
@@ -197,6 +202,7 @@ header .discourse-tag {
 
 .tags-admin-menu {
   margin-top: 20px;
+
   ul {
     width: 320px;
   }
@@ -215,11 +221,14 @@ header .discourse-tag {
     padding: 20px;
     margin: 1em 0;
   }
+
   .tag-groups-sidebar {
     grid-area: sidebar;
+
     // generic .content-list overrides
     width: auto;
     float: none;
+
     ul li:last-child {
       margin-bottom: 1em;
     }
@@ -246,9 +255,10 @@ header .discourse-tag {
       font-size: var(--font-0);
       display: inline-block;
       margin-right: 5px;
+
       &.radio {
-        padding-left: 0px;
-        margin-right: 0px;
+        padding-left: 0;
+        margin-right: 0;
       }
     }
 
@@ -259,24 +269,30 @@ header .discourse-tag {
       grid-template-areas:
         "input label"
         "empty dropdown";
+
       input {
         grid-area: input;
       }
+
       label {
         grid-area: label;
       }
     }
+
     .btn {
       margin-right: 10px;
     }
+
     .group-access-control {
       margin-bottom: 1em;
       grid-area: dropdown;
       grid-row: 2;
     }
+
     input[type="radio"] ~ .group-access-control {
       display: none;
     }
+
     input[type="radio"]:checked ~ .group-access-control {
       display: block;
     }
@@ -288,6 +304,7 @@ header .discourse-tag {
 
     .tag-groups-sidebar {
       max-width: 90px;
+
       ul li a {
         word-break: break-word;
         max-width: 90px;
@@ -304,10 +321,12 @@ header .discourse-tag {
   .saving {
     margin-left: 20px;
   }
+
   .parent-tag-section {
     .tag-chooser {
       width: 210px;
     }
+
     .description {
       color: var(--primary-medium);
       margin-top: 0.5em;
@@ -337,6 +356,7 @@ section.tag-info {
     #edit-description {
       height: 120px;
     }
+
     .edit-controls {
       display: flex;
       gap: 0.5em;
@@ -347,17 +367,21 @@ section.tag-info {
     display: flex;
     font-size: var(--font-up-4);
     align-items: baseline;
+
     button {
       font-size: var(--font-down-1);
+
       .d-icon {
         color: var(--primary-high);
       }
+
       .discourse-no-touch & {
         &:hover {
           background: transparent;
         }
       }
     }
+
     .edit-tag {
       color: var(--primary-high);
       font-size: var(--font-down-2);
@@ -374,6 +398,7 @@ section.tag-info {
     display: flex;
     align-items: center;
     margin-bottom: 0.25em;
+
     a {
       margin-left: 0.5em;
     }
@@ -400,6 +425,7 @@ section.tag-info {
     margin: 0.5em 0 0;
     padding: 0;
     border: none;
+
     a {
       color: var(--primary-medium);
     }
@@ -421,6 +447,7 @@ body.tags-intersection {
 .tags-controls {
   display: flex;
   margin: 0;
+
   h2 {
     order: -1;
     margin-right: auto;
diff --git a/app/assets/stylesheets/common/base/tooltip.scss b/app/assets/stylesheets/common/base/tooltip.scss
index 2a16839b269..1af1bdf936f 100644
--- a/app/assets/stylesheets/common/base/tooltip.scss
+++ b/app/assets/stylesheets/common/base/tooltip.scss
@@ -1,7 +1,6 @@
 #discourse-tooltip {
   --d-tooltip-background: var(--secondary);
   --d-tooltip-border: var(--primary-medium);
-
   background-color: var(--d-tooltip-background);
   position: absolute;
   z-index: z("tooltip");
@@ -22,8 +21,8 @@
     background: var(--d-tooltip-background);
   }
 
-  .tooltip-pointer:before,
-  .tooltip-pointer:after {
+  .tooltip-pointer::before,
+  .tooltip-pointer::after {
     position: absolute;
     pointer-events: none;
     border: solid transparent;
@@ -33,7 +32,7 @@
     width: 0;
   }
 
-  .tooltip-pointer:after {
+  .tooltip-pointer::after {
     border-bottom-color: var(--d-tooltip-background);
     border-width: 8px;
     left: 50%;
@@ -41,7 +40,7 @@
     margin-bottom: -0.5px;
   }
 
-  .tooltip-pointer:before {
+  .tooltip-pointer::before {
     border-bottom-color: var(--d-tooltip-border);
     border-width: 9px;
     left: 50%;
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 9819a485f60..3f198d82ef9 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -1,5 +1,4 @@
 // Styles for the topic admin menu
-
 .topic-admin-popup-menu {
   ul {
     margin: 0;
@@ -7,13 +6,16 @@
 
     li {
       border: none;
+
       &:not(:last-of-type) {
         // so buttons don't appear "stuck" together when multiple are highlighted
         margin-bottom: 2px;
       }
     }
+
     ul {
       padding: 0.5em;
+
       &:not(:last-of-type) {
         border-bottom: 1px solid var(--primary-low);
       }
@@ -35,30 +37,35 @@
 }
 
 // Styles for select posts mini menu
-
 .selected-posts {
   border: 1px solid var(--tertiary-medium);
   background-color: var(--tertiary-low);
+
   .btn {
     border: none;
     color: var(--secondary);
     font-weight: normal;
     margin-bottom: 10px;
+
     &:not(.btn-danger) {
       background: var(--tertiary);
       border-color: var(--tertiary);
+
       &[href] {
         color: var(--secondary);
       }
+
       &:hover {
         color: var(--secondary);
         background: var(--tertiary-high);
       }
+
       &:active {
         @include linear-gradient(var(--tertiary-hover), var(--tertiary));
         color: var(--secondary);
       }
     }
+
     &[disabled] {
       text-shadow: 0 1px 0 rgba(var(--primary-rgb), 0.2);
       @include linear-gradient(var(--tertiary), var(--tertiary-hover));
diff --git a/app/assets/stylesheets/common/base/topic-footer.scss b/app/assets/stylesheets/common/base/topic-footer.scss
index a39f78d427e..d6b7fd110bc 100644
--- a/app/assets/stylesheets/common/base/topic-footer.scss
+++ b/app/assets/stylesheets/common/base/topic-footer.scss
@@ -4,7 +4,6 @@
   html.anon & {
     justify-content: end;
   }
-
   max-width: calc(
     var(--topic-avatar-width) + var(--topic-body-width) +
       var(--topic-body-width-padding) * 2
@@ -52,7 +51,6 @@
       display: none;
     }
   }
-
   display: flex;
   justify-content: flex-end;
   overflow: hidden;
@@ -72,7 +70,6 @@
     position: relative;
     background-color: var(--secondary);
     color: var(--tertiary);
-
     padding: 0.5rem 1em;
     border: 1px solid var(--tertiary-low);
 
@@ -89,12 +86,14 @@
       font-size: var(--font-up-1);
       font-weight: bold;
     }
+
     .d-icon {
       position: absolute;
       right: 8px;
       bottom: 9px;
       z-index: z("base");
     }
+
     .bg {
       position: absolute;
       top: 0;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index e7f64679262..e8b10e7cdf4 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -21,7 +21,7 @@
   position: relative;
   overflow: hidden;
 
-  &:before {
+  &::before {
     @media (prefers-reduced-motion: no-preference) {
       animation: placeHolderShimmer 4s linear infinite forwards;
     }
@@ -81,7 +81,7 @@
 
   .svg-icon-title {
     margin-left: 3px;
-    margin-right: 0px;
+    margin-right: 0;
   }
 
   .new_user a,
@@ -119,7 +119,7 @@
         opacity: 1;
       }
 
-      &:before {
+      &::before {
         content: svg-uri(
           '<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 512 512" fill="#{$primary-medium}"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>'
         );
@@ -228,7 +228,7 @@
     top: 0;
   }
 
-  img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
+  img:not(.thumbnail, .ytp-thumbnail-image, .emoji) {
     max-width: 100%;
     height: auto;
     display: inline-block; // Ensure dimensions are maintained even after load error
@@ -320,7 +320,6 @@ nav.post-controls {
   display: flex;
   align-items: center;
   justify-content: space-between;
-
   color: var(--primary-low-mid);
 
   @include user-select(none);
@@ -368,6 +367,7 @@ nav.post-controls {
         &.button-count {
           // Like count button
           height: 100%; // sometimes the font might be shorter than the icon
+
           &:not(.my-likes) {
             padding-right: 0;
           }
@@ -387,7 +387,6 @@ nav.post-controls {
       .d-icon {
         opacity: 1;
       }
-
       display: inline-flex;
     }
 
@@ -451,7 +450,6 @@ nav.post-controls {
   }
 
   .show-replies {
-    font-size: var(--font-up-1);
     font-size: inherit;
     padding: 10px;
     color: var(--primary-medium);
@@ -484,11 +482,11 @@ nav.post-controls {
 
     .post-info a,
     a {
-      color: currentColor;
+      color: currentcolor;
     }
 
     .d-icon {
-      color: currentColor;
+      color: currentcolor;
     }
   }
 
@@ -506,11 +504,11 @@ nav.post-controls {
 
     .widget-button {
       &:hover {
-        color: currentColor;
+        color: currentcolor;
         background: var(--danger-low);
 
         .d-icon {
-          color: currentColor;
+          color: currentcolor;
         }
       }
 
@@ -538,9 +536,11 @@ nav.post-controls {
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.5);
   }
+
   100% {
     transform: scale(1);
   }
@@ -571,9 +571,9 @@ aside.quote {
 
   .title {
     @include post-aside;
-
     color: var(--primary-high-or-secondary-low);
     padding: 0.8em 0.8em 0 0.8em;
+
     // blockquote is underneath this and has top margin
     .avatar {
       margin-right: 0.5em;
@@ -689,7 +689,7 @@ aside.quote {
   .buttons {
     display: flex;
     flex-wrap: wrap;
-    @media screen and (max-width: 420px) {
+    @media screen and (width <= 420px) {
       flex-direction: column;
       align-items: flex-start;
 
@@ -774,7 +774,7 @@ aside.quote {
       // this pseudo element creates a transition buffer zone
       // without it, the width change on hover can cause transition jitter
       // the width is roughly wide enough to cover long translations of "share"
-      &:after {
+      &::after {
         content: "";
         position: absolute;
         display: block;
@@ -976,8 +976,6 @@ pre {
     top: 0;
     min-height: 0;
     font-size: var(--font-down-2);
-    min-height: 0;
-    font-size: var(--font-down-2);
     opacity: 0.7;
     cursor: pointer;
 
@@ -1277,7 +1275,6 @@ span.mention {
   &:not(a) {
     color: var(--primary-low-mid-or-secondary-high);
   }
-
   display: inline-flex;
   flex-direction: column;
   border: 1px solid var(--primary-low);
@@ -1295,7 +1292,6 @@ span.mention {
 }
 
 /* below standard tablet portrait ----------- */
-
 .reply-to-tab {
   display: flex;
   align-items: center;
@@ -1309,7 +1305,6 @@ span.mention {
 }
 
 // Select posts
-
 .topic-post {
   &.selected {
     article.boxed {
@@ -1322,7 +1317,7 @@ span.mention {
       }
 
       .topic-body {
-        .contents:after {
+        .contents::after {
           display: none;
         }
       }
@@ -1349,12 +1344,13 @@ span.mention {
   }
 }
 
-@media all and (max-width: 767px) {
+@media all and (width <= 767px) {
   .reply-to-tab {
     span {
       display: none;
     }
   }
+
   .user-title {
     float: left;
     clear: left;
@@ -1466,7 +1462,6 @@ iframe {
 }
 
 .posts-filtered-notice {
-  position: -webkit-sticky;
   position: sticky;
   background-color: var(--tertiary-low);
   bottom: 0;
@@ -1522,7 +1517,6 @@ iframe {
     align-items: flex-end;
 
     > .d-icon {
-      cursor: pointer;
       padding: 0.5em;
       margin: 0.5em;
       background-color: rgba(var(--always-black-rgb), 0.25);
@@ -1619,6 +1613,7 @@ html.discourse-no-touch .fullscreen-table-wrapper:hover {
 
 .read-state {
   position: absolute;
+
   // We use absolute positioning here because we want it to display in the padding
   align-self: center;
   color: var(--tertiary-medium);
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 5a12b5bad88..a05a9b30b71 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -2,17 +2,21 @@
   0% {
     margin-bottom: -60px;
   }
+
   50% {
     margin-bottom: 10px;
   }
+
   65% {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
+
   77% {
     margin-bottom: 5px;
   }
+
   100% {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 }
 
@@ -25,6 +29,7 @@
   grid-template-areas: "posts timeline";
   grid-template-columns: auto auto;
   margin-bottom: var(--below-topic-margin);
+
   > .row {
     grid-area: posts;
     max-width: calc(
@@ -35,6 +40,7 @@
 
   .timeline-container {
     margin-left: unset !important;
+
     /* This is a temporary override to ease the transition
     to the sticky position timeline for themes with custom timeline positioning.
     Without this those themes would render topics unreadable. */
@@ -45,7 +51,7 @@
   }
 
   // timeline
-  @media screen and (min-width: 925px) {
+  @media screen and (width >= 925px) {
     // at 925px viewport width and above the timeline is visible (see topic-navigation.js)
     .topic-navigation {
       grid-area: timeline;
@@ -78,7 +84,7 @@
         display: flex;
         align-items: center;
         position: absolute;
-        right: 0px;
+        right: 0;
         top: 8px;
         color: var(--primary);
         opacity: 0.5;
@@ -86,10 +92,12 @@
       }
     }
   }
+
   // progress bar
-  @media screen and (max-width: 924px) {
+  @media screen and (width <= 924px) {
     grid-template-areas: "posts";
     grid-template-columns: auto;
+
     .topic-navigation {
       display: flex;
       justify-content: flex-end;
@@ -102,6 +110,7 @@
     .timeline-container:not(.timeline-fullscreen) {
       display: none; // hiding this because sometimes the JS switch lags and causes layout issues
     }
+
     .timeline-container .timeline-scroller-content {
       position: relative;
     }
@@ -113,11 +122,12 @@
   animation-duration: 0.5s;
   animation-name: button-jump-up;
   text-align: center;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   margin-right: 0.5em;
   position: absolute;
   right: 0;
   bottom: 100%; // above parent container + some extra space
+
   .btn {
     margin: 0;
   }
@@ -131,12 +141,15 @@
     var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
       var(--topic-avatar-width)
   );
+
   &:empty {
     padding: 0;
   }
+
   span .d-icon {
     font-size: var(--font-down-1);
   }
+
   .topic-timer-heading,
   .slow-mode-heading {
     display: flex;
@@ -144,12 +157,14 @@
     margin: 0;
     padding: var(--below-topic-margin) 0;
   }
+
   .slow-mode-remove,
   .topic-timer-modify {
     display: flex;
     margin-left: auto;
     align-self: flex-start;
   }
+
   button {
     font-size: var(--font-down-2);
     background: transparent;
@@ -159,12 +174,15 @@
 .title-wrapper {
   display: flex;
   flex-wrap: wrap;
+
   .topic-statuses {
     line-height: 1.2;
+
     .d-icon {
       color: var(--primary-medium);
     }
   }
+
   .header-title .private-message-glyph-wrapper {
     float: left;
     margin-right: 0.25em;
@@ -175,10 +193,11 @@
   .title-wrapper {
     display: flex;
     flex-wrap: wrap;
-    @media screen and (min-width: 925px) {
+    @media screen and (width >= 925px) {
       width: 90%; // topic title isn't full-width on wide screens
     }
   }
+
   h1 {
     margin-bottom: 0;
     width: 100%;
@@ -187,6 +206,7 @@
   a.edit-topic .d-icon {
     font-size: 0.8em;
   }
+
   .edit-topic-title {
     display: flex;
     flex-wrap: wrap;
@@ -197,6 +217,7 @@
       var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
         var(--topic-avatar-width)
     );
+
     .select-kit .category-row {
       max-width: unset;
     }
@@ -204,6 +225,7 @@
 
   .edit-title__wrapper {
     flex: 1 1 100%;
+
     #edit-title {
       width: 100%;
       margin: 0;
@@ -215,6 +237,7 @@
     @include breakpoint(tablet) {
       min-width: 0; // allows category name to shrink to fit narrow screens
     }
+
     .select-kit.combo-box.category-chooser {
       width: 100%;
     }
@@ -229,12 +252,14 @@
     .mini-tag-chooser {
       width: 100%;
     }
+
     .select-kit-header--filter {
       flex-wrap: nowrap; // forces the whole input to wrap if needed, rather than individual tags
       min-width: 0;
       @include breakpoint(tablet) {
         flex-wrap: wrap; // individual tags will need to wrap on narrow screens
       }
+
       button {
         min-width: 0;
       }
@@ -260,22 +285,27 @@
 
 .private_message {
   background: var(--d-content-background);
+
   #topic-title {
     .edit-topic-title {
       position: relative;
       min-width: 0;
+
       .private-message-glyph {
         position: absolute;
         z-index: 1;
         left: 0.75em;
         top: 1.2em;
+
         .mobile-view & {
           top: 1.1em;
         }
       }
+
       #edit-title {
         padding-left: 2.25em;
       }
+
       .mini-tag-chooser {
         margin-left: 0;
         @include breakpoint(mobile-large, min-width) {
@@ -295,7 +325,6 @@
 .has-pending-posts {
   display: flex;
   justify-content: space-between;
-
   padding: 0.5em;
   background-color: var(--highlight-bg);
   margin-top: 1em;
@@ -305,46 +334,58 @@
 .post-links-container {
   @include unselectable;
   clear: both;
+
   .post-links {
     margin-top: 1em;
     padding-top: 1em;
     border-top: 1px solid var(--primary-low);
+
     li:last-of-type {
       margin-bottom: 1em;
     }
   }
+
   .expand-links {
     color: var(--primary-med-or-secondary-med);
   }
+
   .track-link {
     display: flex;
     align-items: center;
+
     span:not(.badge) {
       @include ellipsis;
     }
   }
+
   ul {
     margin: 0;
     list-style: none;
+
     li {
       margin-bottom: 0.5em;
+
       a[href] {
         color: var(--primary-med-or-secondary-med);
       }
+
       .d-icon {
         font-size: var(--font-down-2);
         margin: 0 0.5em 0 0;
       }
     }
   }
+
   a.reply-new {
     .d-icon {
       background: var(--secondary);
       border-radius: 20px;
       transition: all linear 0.15s;
     }
+
     &:hover {
       color: var(--tertiary);
+
       .d-icon {
         background: var(--tertiary-low);
       }
@@ -358,6 +399,7 @@ a.topic-featured-link {
   text-transform: lowercase;
   color: var(--primary-med-or-secondary-med);
   font-size: 0.875rem;
+
   .d-icon {
     font-size: var(--font-down-1);
     margin-right: 0.25em;
@@ -370,6 +412,7 @@ a.topic-featured-link {
       var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
         var(--topic-avatar-width)
     );
+
     .reviewable-item {
       .post-body {
         max-height: unset;
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index f827ba4c00d..160cca87184 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -37,19 +37,22 @@
   &.disabled {
     color: var(--primary-medium);
     background-color: var(--primary-very-low);
+
     .fa {
       opacity: 0.4;
     }
   }
 }
 
-@media all and (max-width: 750px) {
+@media all and (width <= 750px) {
   .show-badge .user-badge-with-posts .badge-user a.post-link {
     width: auto;
   }
+
   .show-badge div.badge-user {
     padding: 0;
   }
+
   .badges-listing {
     display: block;
 
@@ -64,6 +67,7 @@
 
     .row {
       display: block;
+
       > div {
         display: block;
         margin-top: 10px;
@@ -82,6 +86,7 @@
 .show-badge .single-user {
   margin-left: 2%;
   padding-bottom: 20px;
+
   .load-more {
     padding-top: 30px;
     display: block;
@@ -91,18 +96,20 @@
 
 .show-badge .single-user .badge-user {
   padding-left: 0;
-
   text-align: left;
   display: block;
   margin: 20px 0;
+
   .badge-info {
     display: none;
   }
+
   .date {
     display: inline-block;
     font-size: var(--font-up-1);
     margin-left: 10px;
   }
+
   .post-link {
     font-size: var(--font-up-2);
     width: 500px;
@@ -111,7 +118,7 @@
   }
   width: 800px;
 
-  &:after {
+  &::after {
     content: "";
     clear: both;
     display: table;
@@ -171,7 +178,7 @@
       display: inline-block;
       line-height: var(--line-height-medium);
 
-      &:after {
+      &::after {
         content: "";
         position: absolute;
         left: 0;
@@ -224,7 +231,7 @@
       h3 {
         margin-bottom: 0.25em;
         font-size: var(--font-up-1);
-        @media screen and (min-width: 900px) {
+        @media screen and (width >= 900px) {
           font-size: var(--font-up-2);
         }
       }
@@ -235,7 +242,7 @@
     width: 100%;
     align-self: flex-start;
 
-    @media screen and (min-width: 767px) {
+    @media screen and (width >= 767px) {
       max-width: calc(var(--d-max-width) / 2);
     }
 
@@ -260,6 +267,7 @@
 .badge-groups {
   margin: 20px 0;
   color: var(--primary-med-or-secondary-med);
+
   h3 {
     margin-bottom: 1em;
   }
@@ -300,6 +308,7 @@
   .grant-info-item {
     margin-bottom: 1em;
     color: var(--primary-med-or-secondary-med);
+
     &:first-of-type {
       margin-right: 10px;
     }
@@ -312,6 +321,7 @@
 
     .badge-title {
       height: 100%;
+
       &__saved {
         color: var(--success);
       }
@@ -334,6 +344,7 @@
       align-items: baseline;
       gap: 0.5em;
       margin: 0;
+
       button:last-of-type {
         margin-right: auto;
       }
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 6c2ad411087..81262e20505 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -1,6 +1,5 @@
 // Common styles for "/user" section
 // These styles are also used for "/groups" — test those pages if making significant changes
-
 .user-content-wrapper {
   // Grid layout
   width: 100%;
@@ -8,6 +7,7 @@
   grid-template-columns: 1fr 5fr;
   grid-template-rows: auto auto 1fr auto;
   grid-gap: 20px;
+
   .user-primary-navigation {
     grid-column-start: 1;
     grid-column-end: 3;
@@ -18,12 +18,14 @@
       flex-wrap: wrap;
     }
   }
+
   .user-secondary-navigation {
     grid-column-start: 1;
     grid-column-end: 2;
     grid-row-start: 2;
     grid-row-end: 3;
   }
+
   .solo-preference,
   .user-content,
   .spinner {
@@ -32,6 +34,7 @@
     grid-column-start: 1;
     grid-column-end: 3;
   }
+
   .user-content {
     min-width: 100%;
   }
@@ -41,6 +44,7 @@
     grid-column-start: 2;
     grid-column-end: 3;
   }
+
   .user-additional-controls {
     grid-row-start: 3;
     align-self: start;
@@ -99,6 +103,7 @@
         background-position: center center;
         background-repeat: no-repeat;
       }
+
       .staff-counters {
         margin-bottom: 0;
       }
@@ -116,6 +121,7 @@
       dl {
         margin: 0;
         padding: 0.25em 0;
+
         div {
           display: inline-flex;
           align-items: baseline;
@@ -139,10 +145,12 @@
           span:not(:last-of-type) {
             margin-right: 0.25em;
           }
-          span:after {
+
+          span::after {
             content: ",";
           }
-          span:last-of-type:after {
+
+          span:last-of-type::after {
             content: "";
           }
         }
@@ -189,6 +197,7 @@
       .user-profile-avatar {
         position: relative;
         align-self: flex-start;
+
         .avatar-flair {
           bottom: 8px;
           right: 16px;
@@ -244,6 +253,7 @@
         .avatar-flair {
           bottom: 8px;
           right: 2px;
+
           .d-icon {
             font-size: var(--font-0);
           }
@@ -258,6 +268,7 @@
     display: flex;
     padding: 10px;
     margin-bottom: 16px;
+
     > div,
     > div a {
       display: flex;
@@ -316,9 +327,11 @@
       }
     }
   }
+
   .user-content {
     .admin-controls nav {
       margin: 0;
+
       .nav-pills {
         overflow-x: auto;
       }
@@ -350,7 +363,7 @@
   }
 
   .user-field-value-list-item:not(:last-of-type) {
-    &:after {
+    &::after {
       // create comma separated list
       content: ",";
     }
@@ -363,34 +376,43 @@
     grid-template-columns: 2em 1fr auto;
     grid-template-rows: auto auto;
     align-items: center;
+
     &:not(:last-of-type) {
       margin-bottom: 0.75em;
     }
+
     span {
       word-break: break-word; // Prevents long emails from breaking the modal width
     }
+
     input[type="radio"] {
       margin-top: 0;
     }
+
     button {
       margin-left: auto;
     }
+
     label a {
       margin: 0;
     }
   }
+
   --label-max-width: 300px;
+
   label.radio {
     display: flex;
     align-items: center;
     max-width: var(--label-max-width);
     margin: 0 0.5em 0 0;
     padding: 0;
+
     .avatar {
       flex: 0 0 auto;
       margin: 0 0.75em 0 0;
     }
   }
+
   .error {
     color: var(--danger);
     margin: 0;
@@ -401,7 +423,8 @@
 }
 
 .top-section {
-  @include clearfix();
+  @include clearfix;
+
   ul {
     list-style: none;
     margin: 0;
@@ -411,6 +434,7 @@
 .top-section,
 .top-sub-section {
   margin-bottom: 20px;
+
   &.badges-section {
     display: flex;
     flex-wrap: wrap;
@@ -440,6 +464,7 @@
     &.linked-stat {
       // This makes the entire "box" (the li) clickable instead of a narrow area.
       padding: 0;
+
       a {
         padding: 10px 14px 10px 0;
         width: 100%;
@@ -479,20 +504,23 @@
 
   .user-info .user-detail {
     width: 100%;
+
     .name-line {
       span {
         width: auto;
       }
+
       .username {
         overflow-wrap: anywhere;
       }
+
       > a {
         flex-wrap: nowrap;
       }
     }
   }
 
-  @media all and (max-width: 600px) {
+  @media all and (width <= 600px) {
     float: none;
     width: 100%;
   }
@@ -516,12 +544,15 @@
 .top-categories-section {
   table {
     max-width: 95%;
+
     tr {
       border: none;
     }
+
     td,
     th {
       padding: 0.5em;
+
       &.topic-count,
       &.reply-count {
         text-align: center;
@@ -568,15 +599,18 @@
     label {
       align-items: center;
       display: inline-block;
+
       .d-icon {
         margin-right: 3px;
       }
     }
+
     .select-kit.multi-select {
       @include breakpoint(mobile-extra-large) {
         width: 100%;
       }
     }
+
     .show-tracking {
       float: right;
     }
@@ -630,10 +664,12 @@
       padding: 8px;
     }
   }
+
   .featured-topic-link {
     padding: 5px 0;
     font-weight: bold;
   }
+
   .save-theme-alert {
     font-size: var(--font-down-1);
   }
@@ -661,6 +697,7 @@
   .success-back {
     display: flex;
     align-items: center;
+
     .d-icon {
       margin-right: 0.25em;
     }
@@ -668,6 +705,7 @@
 
   @mixin inactiveMode() {
     color: var(--primary-medium);
+
     .select-kit.combo-box .select-kit-header {
       border-color: var(--primary-medium);
     }
@@ -803,6 +841,7 @@
     .select-kit {
       .select-kit-header {
         background: transparent;
+
         &:hover .d-icon {
           color: var(--primary-high);
         }
@@ -833,7 +872,6 @@
 
   textarea.backup-codes-area {
     flex: 1 1 100%;
-    height: 100%;
     resize: none;
     margin: 0;
     padding: 0.5em;
@@ -843,6 +881,7 @@
     cursor: auto;
     outline: none;
     font-family: var(--d-font-family--monospace);
+
     &:focus {
       box-shadow: none;
       border-color: var(--primary-low);
@@ -853,6 +892,7 @@
     padding: 0.5em;
     flex: 1 1 2em;
     margin-left: auto;
+
     .btn {
       margin-bottom: 0.5em;
     }
@@ -881,10 +921,12 @@
   font-weight: bold;
   font-size: var(--font-up-5);
   line-height: var(--line-height-medium);
+
   .d-icon {
     font-size: 0.8em;
     vertical-align: baseline;
   }
+
   .user-status-message {
     display: inline-flex;
     vertical-align: baseline;
@@ -900,6 +942,7 @@
   font-size: var(--font-0);
   margin-top: 0.5em;
   @include ellipsis;
+
   .d-icon {
     font-size: var(--font-down-1);
     color: var(--primary-high);
@@ -910,6 +953,7 @@
 .user-profile__location-and-website {
   display: flex;
   max-width: 100%;
+
   .user-profile-location {
     margin-right: 1em;
   }
@@ -920,27 +964,31 @@
   margin-bottom: 1em;
   text-align: justify;
   overflow-y: auto;
+
   .selectable-avatar {
     margin: 5px;
     display: inline-block;
     position: relative;
+
     .avatar {
       cursor: pointer;
       width: 60px;
       height: 60px;
     }
+
     &:hover {
       .selectable-avatar__remove {
         visibility: visible;
       }
     }
+
     &__remove {
       visibility: hidden;
       color: var(--primary-high);
       position: absolute;
-      bottom: 0px;
+      bottom: 0;
       width: 100%;
-      left: 0px;
+      left: 0;
       text-align: center;
       font-size: var(--font-up-2);
     }
@@ -996,10 +1044,12 @@
   .notification-schedule-table {
     .notification-schedule-tbody {
       border-top-width: 1px;
+
       .day {
         .day-label {
           padding: 1em 1em 1em 0;
         }
+
         .to {
           padding: 0 0.5em;
         }
@@ -1014,15 +1064,19 @@
   .controls {
   display: flex;
   flex-direction: column;
+
   .control-label.alt-placeholder {
     order: 1;
   }
+
   .ember-text-field {
     order: 2;
   }
+
   .tip {
     order: 3;
   }
+
   .instructions {
     order: 4;
   }
diff --git a/app/assets/stylesheets/common/components/add-pm-participants.scss b/app/assets/stylesheets/common/components/add-pm-participants.scss
index 241c87d2766..e39da4cc7a2 100644
--- a/app/assets/stylesheets/common/components/add-pm-participants.scss
+++ b/app/assets/stylesheets/common/components/add-pm-participants.scss
@@ -96,6 +96,7 @@
 
     .invite-user-input-wrapper {
       display: flex;
+
       div.ac-wrap {
         flex: 1;
       }
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index d7d2a4a6956..bab26bcfcc4 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -14,7 +14,6 @@
 
 // Category badges
 // --------------------------------------------------
-
 .badge-category__wrapper {
   color: var(--primary-high);
   overflow: hidden;
@@ -32,7 +31,7 @@
     color: var(--primary-high);
     min-width: 0;
 
-    &:before {
+    &::before {
       content: "";
       background: var(--category-badge-color);
       flex: 0 0 auto;
@@ -41,14 +40,14 @@
     }
 
     &__name {
-      color: currentColor;
+      color: currentcolor;
       text-overflow: ellipsis;
       overflow: hidden;
       min-width: 0;
     }
 
     &.--has-parent {
-      &:before {
+      &::before {
         background: linear-gradient(
           90deg,
           var(--parent-category-badge-color) 50%,
@@ -71,7 +70,6 @@
 
 // Notification badge
 // --------------------------------------------------
-
 .badge-notification {
   @extend %badge;
   position: relative;
@@ -83,6 +81,7 @@
   line-height: var(--line-height-small);
   text-align: center;
   background-color: var(--primary-low-mid-or-secondary-low);
+
   &[href] {
     color: var(--secondary);
   }
@@ -92,7 +91,6 @@
   }
 
   // Unread posts
-
   &.unread-posts {
     background-color: var(--tertiary-med-or-tertiary);
     color: var(--secondary);
@@ -116,11 +114,11 @@
 
 // Posts badge
 // --------------------------------------------------
-
 .badge-posts {
   font-weight: normal;
   font-size: var(--font-0);
   line-height: var(--line-height-small);
+
   &[href] {
     color: var(--primary-med-or-secondary-med);
   }
@@ -128,7 +126,6 @@
 
 // Group badge
 // --------------------------------------------------
-
 .badge-group {
   @extend %badge;
   padding: 2px 5px;
diff --git a/app/assets/stylesheets/common/components/banner.scss b/app/assets/stylesheets/common/components/banner.scss
index 2788f416558..40285948c2b 100644
--- a/app/assets/stylesheets/common/components/banner.scss
+++ b/app/assets/stylesheets/common/components/banner.scss
@@ -1,7 +1,6 @@
 // --------------------------------------------------
 // Banner
 // --------------------------------------------------
-
 #banner {
   padding: 1em;
   background: var(--tertiary-low);
@@ -16,15 +15,17 @@
     display: flex;
 
     > .btn {
-      padding-top: 0em;
-      padding-bottom: 0em;
+      padding-top: 0;
+      padding-bottom: 0;
       color: var(--primary-high);
+
       .d-icon {
         color: var(--primary-medium);
       }
 
       &:hover {
         color: var(--primary);
+
         .d-icon {
           color: var(--primary-high);
         }
diff --git a/app/assets/stylesheets/common/components/bookmark-list.scss b/app/assets/stylesheets/common/components/bookmark-list.scss
index c64cdd47574..564f422e224 100644
--- a/app/assets/stylesheets/common/components/bookmark-list.scss
+++ b/app/assets/stylesheets/common/components/bookmark-list.scss
@@ -15,6 +15,7 @@ $mobile-breakpoint: 700px;
       padding-right: 0.5em;
     }
   }
+
   .main-link.topic-list-data {
     .bookmark-status-with-link {
       a.title {
@@ -22,10 +23,12 @@ $mobile-breakpoint: 700px;
       }
     }
   }
+
   .d-icon.bookmark-pinned {
     font-size: var(--font-down-2);
     margin-right: 0.2em;
   }
+
   .bookmark-metadata {
     font-size: var(--font-down-2);
     margin-bottom: 0.25em;
@@ -35,6 +38,7 @@ $mobile-breakpoint: 700px;
       margin-right: 1em;
       margin-bottom: 0.25em;
       line-height: var(--line-height-medium);
+
       span {
         word-break: break-word;
       }
@@ -48,6 +52,7 @@ $mobile-breakpoint: 700px;
       margin-right: 0.25em;
     }
   }
+
   .bookmark-status-with-link {
     display: flex;
     flex-direction: row;
@@ -56,6 +61,7 @@ $mobile-breakpoint: 700px;
     .mobile-view & {
       margin-bottom: 0.15em;
     }
+
     .topic-statuses {
       float: none;
     }
diff --git a/app/assets/stylesheets/common/components/bookmark-menu.scss b/app/assets/stylesheets/common/components/bookmark-menu.scss
index 8cbb1e6c947..dd63ef6f465 100644
--- a/app/assets/stylesheets/common/components/bookmark-menu.scss
+++ b/app/assets/stylesheets/common/components/bookmark-menu.scss
@@ -49,6 +49,7 @@
       color: var(--primary) !important;
       background: var(--tertiary-very-low);
     }
+
     .--remove & {
       color: var(--danger);
     }
diff --git a/app/assets/stylesheets/common/components/bookmark-modal.scss b/app/assets/stylesheets/common/components/bookmark-modal.scss
index c343b569410..cf90e19e68d 100644
--- a/app/assets/stylesheets/common/components/bookmark-modal.scss
+++ b/app/assets/stylesheets/common/components/bookmark-modal.scss
@@ -12,6 +12,7 @@
         margin-bottom: 0.5em;
       }
     }
+
     &__footer {
       .delete-bookmark {
         margin-left: auto;
@@ -47,7 +48,6 @@
     .select-kit {
       width: 100%;
     }
-
     margin-bottom: 18px;
 
     label {
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index b23442cd2e9..7f810aad9c2 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -20,6 +20,7 @@
   margin: 0;
   font-weight: normal;
   color: $text-color;
+
   &:visited {
     // covers cases where we add button classes to links
     color: $text-color;
@@ -33,19 +34,23 @@
   border-radius: var(--d-button-border-radius);
   transition: var(--d-button-transition);
   cursor: pointer;
+
   .d-icon {
     color: $icon-color;
     margin-right: 0.45em;
     transition: var(--d-button-transition);
+
     // For Windows High Contrast (see whcm.scss for more)
     @media (forced-colors: active) {
       color: ButtonText;
     }
   }
+
   .d-button-label + .d-icon {
     margin-left: 0.45em;
     margin-right: 0;
   }
+
   &.no-text {
     .d-icon {
       margin-right: 0;
@@ -54,18 +59,22 @@
   @include hover {
     background-color: $hover-bg-color;
     color: $hover-text-color;
+
     .d-icon {
       color: $hover-icon-color;
+
       // For Windows High Contrast (see whcm.scss for more)
       @media (forced-colors: active) {
         color: Highlight;
       }
     }
   }
+
   &:focus-visible {
     outline: none;
     background-color: $hover-bg-color;
     color: $hover-text-color;
+
     .d-icon {
       color: $hover-icon-color;
       @media (forced-colors: active) {
@@ -74,34 +83,40 @@
     }
   }
 
-  .discourse-no-touch &:active:not(:hover):not(:focus),
-  .discourse-no-touch &.btn-active:not(:hover):not(:focus),
-  &:active:not(:hover):not(:focus),
-  &.btn-active:not(:hover):not(:focus) {
+  .discourse-no-touch &:active:not(:hover, :focus),
+  .discourse-no-touch &.btn-active:not(:hover, :focus),
+  &:active:not(:hover, :focus),
+  &.btn-active:not(:hover, :focus) {
     @include darken-background($bg-color, 0.6);
     color: $hover-text-color;
+
     .d-icon {
       color: $hover-icon-color;
     }
   }
+
   .discourse-no-touch &:active,
   .discourse-no-touch &.btn-active,
   &:active,
   &.btn-active {
     @include darken-background($bg-color, 0.3);
     color: $hover-text-color;
+
     .d-icon {
       color: $hover-icon-color;
     }
   }
+
   &[disabled],
   &.disabled {
     &:not(.is-loading) {
       opacity: 0.4;
     }
+
     &:hover {
       color: $text-color;
       background: $bg-color;
+
       .d-icon {
         color: $icon-color;
       }
@@ -136,14 +151,12 @@
 
 // Default button
 // --------------------------------------------------
-
 .btn {
   @include btn;
 }
 
 // Primary button
 // --------------------------------------------------
-
 .btn-primary {
   @include btn(
     $text-color: var(--secondary),
@@ -156,7 +169,6 @@
 
 // Danger button
 // --------------------------------------------------
-
 .btn-danger {
   @include btn(
     $text-color: var(--secondary),
@@ -169,7 +181,6 @@
 
 // ✘ and ✔ buttons
 // --------------------------------------------------
-
 .btn.cancel {
   @include btn(
     $text-color: var(--secondary),
@@ -192,65 +203,77 @@
 
 // Social buttons
 // --------------------------------------------------
-
 .btn-social {
   color: #000;
   background: #fff;
   border-radius: var(--d-border-radius);
+
   &:focus-visible {
     outline: 1px solid #000;
   }
+
   &[href] {
     color: var(--secondary);
   }
-  &:before {
+
+  &::before {
     margin-right: 9px;
     font-size: var(--font-0);
   }
+
   .d-icon,
   &.btn:hover .d-icon {
     color: #000;
   }
+
   &.cas {
     .d-icon {
       color: var(--cas);
     }
+
     &:hover {
       .d-icon {
         color: var(--cas);
       }
     }
   }
+
   &.twitter {
     .d-icon {
       color: var(--twitter);
     }
+
     &:hover {
       .d-icon {
         color: var(--twitter);
       }
     }
   }
+
   &.github {
     .d-icon {
       color: var(--github);
     }
+
     &:hover {
       .d-icon {
         color: var(--github);
       }
     }
   }
+
   &.discord {
     .d-icon {
       color: var(--discord);
     }
+
     &:hover {
       .d-icon {
         color: var(--discord);
       }
     }
   }
+
   // https://developers.facebook.com/docs/facebook-login/userexperience/#buttondesign
   // if you are unable to use Facebook blue, revert to black and white.
 }
@@ -259,69 +282,79 @@
 // --------------------------------------------------
 
 // Small
-
 .btn-small {
   font-size: var(--font-down-1);
   min-height: 20px;
 }
 
 // Large
-
 .btn-large {
   font-size: var(--font-up-1);
 }
 
 // Bonus Buttons
 // --------------------------------------------------
-
 .btn-flat {
   background: transparent;
   border: 0;
   line-height: var(--line-height-small);
   transition: var(--d-button-transition);
+
   .d-icon {
     color: var(--primary-low-mid);
     transition: var(--d-button-transition);
   }
+
   .discourse-no-touch & {
     &:hover,
     &:focus-visible {
       color: var(--primary);
+
       .d-icon {
         color: var(--primary);
       }
     }
+
     &:hover {
       background: transparent;
     }
+
     &:focus-visible {
       background: var(--primary-low);
     }
   }
+
   &.close {
     background: transparent;
     font-size: var(--font-up-2);
+
     .d-icon {
       color: var(--primary-high);
     }
+
     .discourse-no-touch & {
       &:hover,
       &:focus-visible {
         background: transparent;
+
         .d-icon {
           color: var(--primary);
         }
       }
     }
+
     &:focus-visible {
       background: transparent;
+
       .d-icon {
         color: var(--primary);
       }
     }
   }
+
   &.btn-text {
     color: var(--tertiary);
+
     &[disabled] {
       &,
       &:hover,
@@ -330,6 +363,7 @@
         color: var(--primary);
       }
     }
+
     &:not([disabled]) {
       &:hover,
       &.btn-hover,
@@ -343,13 +377,16 @@
       }
     }
   }
+
   &:focus-visible {
     outline: none;
     background: var(--primary-low);
+
     .d-icon {
       color: var(--primary);
     }
   }
+
   &.back-button {
     margin-bottom: 1em;
   }
@@ -360,12 +397,14 @@
   border: 0;
   padding: 0;
   color: var(--tertiary);
+
   .discourse-no-touch & {
     &:hover {
       color: var(--tertiary);
       background: transparent;
     }
   }
+
   &:focus-visible {
     color: var(--tertiary);
     background: transparent;
@@ -375,12 +414,15 @@
 
 @mixin btn-colors($btn-color) {
   color: var(--#{$btn-color});
+
   .d-icon {
     color: inherit;
   }
+
   &:focus-visible {
     color: var(--#{$btn-color}-hover);
   }
+
   .discourse-no-touch & {
     &:hover {
       color: var(--#{$btn-color}-hover);
@@ -394,32 +436,40 @@
     background: transparent;
     border: 0;
     color: var(--primary);
+
     .d-icon {
       color: var(--primary-high);
     }
+
     &:focus-visible {
       background: transparent;
       color: var(--tertiary-hover);
+
       .d-icon {
         color: inherit;
       }
     }
+
     .discourse-no-touch & {
       &:hover {
         background: transparent;
         color: var(--tertiary-hover);
+
         .d-icon {
           color: inherit;
         }
       }
     }
   }
+
   &.btn-primary {
     @include btn-colors("tertiary");
   }
+
   &.btn-danger {
     @include btn-colors("danger");
   }
+
   &.btn-success {
     @include btn-colors("success");
   }
@@ -428,6 +478,7 @@
 .btn-mini-toggle {
   border-radius: var(--d-border-radius);
   padding: 0.4em 0.467em;
+
   .d-icon {
     color: var(--primary-medium);
   }
diff --git a/app/assets/stylesheets/common/components/calendar-date-time-input.scss b/app/assets/stylesheets/common/components/calendar-date-time-input.scss
index 44935985630..37fb5fd94f6 100644
--- a/app/assets/stylesheets/common/components/calendar-date-time-input.scss
+++ b/app/assets/stylesheets/common/components/calendar-date-time-input.scss
@@ -2,7 +2,6 @@
   .fake-input {
     display: none;
   }
-
   padding: 5px;
   border: 1px solid var(--primary-low);
   z-index: 1;
diff --git a/app/assets/stylesheets/common/components/color-input.scss b/app/assets/stylesheets/common/components/color-input.scss
index 8fdacad1a0f..e6e76205369 100644
--- a/app/assets/stylesheets/common/components/color-input.scss
+++ b/app/assets/stylesheets/common/components/color-input.scss
@@ -10,9 +10,11 @@
     padding-left: 0.5em;
     padding-right: 0.5em;
   }
+
   .hex-input {
     margin: 0;
   }
+
   .picker {
     padding: 0;
     border-left: none;
@@ -20,10 +22,12 @@
     margin-bottom: 0;
     height: unset;
   }
+
   // Reset webkit/blink default style
   input[type="color"]::-webkit-color-swatch-wrapper {
     padding: 0;
   }
+
   input[type="color"]::-webkit-color-swatch {
     border: none;
     border-radius: 0; // Reset webkit specific style
diff --git a/app/assets/stylesheets/common/components/conditional-loading-section.scss b/app/assets/stylesheets/common/components/conditional-loading-section.scss
index 2c182df5d09..cbfd44f5b2b 100644
--- a/app/assets/stylesheets/common/components/conditional-loading-section.scss
+++ b/app/assets/stylesheets/common/components/conditional-loading-section.scss
@@ -25,6 +25,7 @@
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
diff --git a/app/assets/stylesheets/common/components/d-lightbox.scss b/app/assets/stylesheets/common/components/d-lightbox.scss
index da938f4b4d1..8b89efa4d41 100644
--- a/app/assets/stylesheets/common/components/d-lightbox.scss
+++ b/app/assets/stylesheets/common/components/d-lightbox.scss
@@ -1,5 +1,4 @@
 /* Main document */
-
 html.has-lightbox {
   overflow: hidden;
 
@@ -16,16 +15,15 @@ html.has-lightbox {
   }
 
   --carousel-item-size: clamp(6.5rem, 12vh, 15rem);
-  --d-lightbox-primary: #ffffff;
-  --d-lightbox-secondary: #000000;
+  --d-lightbox-primary: #fff;
+  --d-lightbox-secondary: #000;
   --d-lightbox-secondary-translucent: rgba(0, 0, 0, 0.25);
-  --d-lightbox-tertiary: #222222;
+  --d-lightbox-tertiary: #222;
 }
 
-/* Lightbox element*/
+/* Lightbox element */
 
 // Grid
-
 .d-lightbox {
   overscroll-behavior: contain;
 
@@ -46,7 +44,6 @@ html.has-lightbox {
   &.is-vertical &__content {
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr auto auto;
-
     grid-template-areas:
       "lightbox-header"
       "lightbox-body"
@@ -102,7 +99,6 @@ html.has-lightbox {
     grid-area: lightbox-body;
     display: grid;
     place-items: center stretch;
-
     grid-auto-flow: column;
     grid-template-columns: auto 1fr auto;
     grid-template-areas: "lightbox-previous-button lightbox-main-image lightbox-next-button";
@@ -192,6 +188,7 @@ html.has-lightbox {
   &__carousel-items {
     grid-auto-flow: column;
   }
+
   &__carousel-item,
   &__carousel-item.is-current {
     height: var(--carousel-item-size);
@@ -226,7 +223,6 @@ html.has-lightbox {
 }
 
 /* Base styles */
-
 .d-lightbox {
   &.is-visible {
     position: fixed;
@@ -256,7 +252,6 @@ html.has-lightbox {
       var(--d-lightbox-secondary),
       transparent
     );
-
     position: relative;
   }
 }
@@ -330,12 +325,14 @@ html.has-lightbox {
     gap: 0 0.25em;
     word-break: break-word;
     max-width: 100%;
+
     // right/left padding to align with buttons
     padding: 0 0.65em;
     border: 1px solid transparent;
     width: 100%;
     min-width: 0;
     overflow: hidden;
+
     &:focus-visible {
       outline: none;
       border: 1px solid var(--tertiary);
@@ -363,6 +360,7 @@ html.has-lightbox {
     position: relative;
     color: var(--d-lightbox-primary);
   }
+
   &__carousel-previous-button,
   &__carousel-next-button {
     z-index: 2;
@@ -410,8 +408,9 @@ html.has-lightbox {
   &.is-vertical &__carousel {
     position: relative;
     background-color: var(--d-lightbox-secondary-translucent);
-    &:before,
-    &:after {
+
+    &::before,
+    &::after {
       content: "";
       position: absolute;
       display: block;
@@ -421,15 +420,10 @@ html.has-lightbox {
       width: 20%;
     }
 
-    &:before {
+    &::before {
       left: 0;
       top: 0;
       background: var(--d-lightbox-secondary);
-      -webkit-mask-image: linear-gradient(
-        90deg,
-        var(--d-lightbox-secondary),
-        transparent
-      );
       mask-image: linear-gradient(
         90deg,
         var(--d-lightbox-secondary),
@@ -437,15 +431,10 @@ html.has-lightbox {
       );
     }
 
-    &:after {
+    &::after {
       right: 0;
       bottom: 0;
       background: var(--d-lightbox-secondary);
-      -webkit-mask-image: linear-gradient(
-        -90deg,
-        var(--d-lightbox-secondary),
-        transparent
-      );
       mask-image: linear-gradient(
         -90deg,
         var(--d-lightbox-secondary),
@@ -454,12 +443,12 @@ html.has-lightbox {
     }
 
     .rtl & {
-      &:before {
+      &::before {
         left: auto;
         right: 0;
       }
 
-      &:after {
+      &::after {
         left: 0;
         right: auto;
       }
@@ -479,8 +468,9 @@ html.has-lightbox {
 .d-lightbox {
   &.is-horizontal &__carousel {
     position: relative;
-    &:before,
-    &:after {
+
+    &::before,
+    &::after {
       content: "";
       position: absolute;
       display: block;
@@ -490,15 +480,10 @@ html.has-lightbox {
       width: 100%;
     }
 
-    &:before {
+    &::before {
       left: 0;
       top: 0;
       background: var(--d-lightbox-secondary);
-      -webkit-mask-image: linear-gradient(
-        180deg,
-        var(--d-lightbox-secondary),
-        transparent
-      );
       mask-image: linear-gradient(
         180deg,
         var(--d-lightbox-secondary) 20%,
@@ -506,15 +491,10 @@ html.has-lightbox {
       );
     }
 
-    &:after {
+    &::after {
       right: 0;
       bottom: 0;
       background: var(--d-lightbox-secondary);
-      -webkit-mask-image: linear-gradient(
-        0,
-        var(--d-lightbox-secondary),
-        transparent
-      );
       mask-image: linear-gradient(
         0,
         var(--d-lightbox-secondary) 20%,
@@ -555,6 +535,7 @@ html.has-lightbox {
     &:focus-visible {
       outline: 1px solid var(--tertiary);
       border-radius: 1px;
+
       .d-icon {
         color: var(--tertiary);
       }
@@ -616,7 +597,6 @@ html.has-lightbox {
   &.can-zoom {
     .d-lightbox__body {
       @extend %lightbox-scrollable;
-
       overflow: auto;
       height: 100%;
       width: 100%;
@@ -677,6 +657,7 @@ html.has-lightbox {
     .d-lightbox__body {
       gap: 0;
     }
+
     .d-lightbox__main-image,
     .d-lightbox__zoomed-image-container {
       transform: rotate(var(--d-lightbox-image-rotation));
@@ -707,7 +688,6 @@ html.has-lightbox {
 }
 
 /* Animations */
-
 .d-lightbox {
   &.is-visible &__content {
     @extend %lightbox-animation-base;
@@ -755,9 +735,10 @@ html.has-lightbox {
 
   // MOZ
   scrollbar-width: none;
-  overflow: auto;
+
   // Webkit
   overflow: overlay;
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -767,6 +748,7 @@ html.has-lightbox {
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
@@ -776,6 +758,7 @@ html.has-lightbox {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
diff --git a/app/assets/stylesheets/common/components/d-page-header.scss b/app/assets/stylesheets/common/components/d-page-header.scss
index b7a43579251..d43d6a49c96 100644
--- a/app/assets/stylesheets/common/components/d-page-header.scss
+++ b/app/assets/stylesheets/common/components/d-page-header.scss
@@ -45,11 +45,11 @@ $mobile-breakpoint: 700px;
     .horizontal-overflow-nav {
       background: transparent;
 
-      &:before {
+      &::before {
         display: none;
       }
 
-      &:after {
+      &::after {
         display: none;
       }
     }
diff --git a/app/assets/stylesheets/common/components/d-select.scss b/app/assets/stylesheets/common/components/d-select.scss
index 87014e20784..ee2dbc505b1 100644
--- a/app/assets/stylesheets/common/components/d-select.scss
+++ b/app/assets/stylesheets/common/components/d-select.scss
@@ -6,7 +6,6 @@
   border-radius: var(--d-input-border-radius);
   box-sizing: border-box;
   margin: 0;
-  appearance: none;
   padding: 0 2em 0 0.5em !important;
   appearance: none;
   background-image: svg-uri(
diff --git a/app/assets/stylesheets/common/components/d-toggle-switch.scss b/app/assets/stylesheets/common/components/d-toggle-switch.scss
index 4c2125df048..1421746c1cd 100644
--- a/app/assets/stylesheets/common/components/d-toggle-switch.scss
+++ b/app/assets/stylesheets/common/components/d-toggle-switch.scss
@@ -19,7 +19,6 @@
       background-color: var(--tertiary-hover);
     }
   }
-
   display: flex;
   align-items: center;
   gap: 0.5rem;
diff --git a/app/assets/stylesheets/common/components/date-input.scss b/app/assets/stylesheets/common/components/date-input.scss
index c68fb468fcc..19aa56edf2f 100644
--- a/app/assets/stylesheets/common/components/date-input.scss
+++ b/app/assets/stylesheets/common/components/date-input.scss
@@ -15,8 +15,8 @@ $calendar-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16
     box-shadow: none;
     position: relative;
 
-    &::-webkit-input-placeholder,
-    &::-ms-input-placeholder,
+    &::input-placeholder,
+    &::input-placeholder,
     &::placeholder {
       font-size: var(--font-0);
       color: var(--primary-medium);
@@ -27,7 +27,7 @@ $calendar-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16
     }
 
     // iOS doesn't display the placeholder attribute for date inputs
-    html.ios-device &:after {
+    html.ios-device &::after {
       font-size: var(--font-0);
       color: var(--primary-medium);
       content: attr(placeholder);
@@ -42,22 +42,22 @@ $calendar-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16
     html:not(.ios-device) & {
       &::after {
         content: "";
-        -webkit-mask: svg-uri($calendar-icon) no-repeat 50% 50%;
         mask: svg-uri($calendar-icon) no-repeat 50% 50%;
         position: absolute;
         right: 4px;
-        top: 0px;
+        top: 0;
         box-sizing: border-box;
         background-color: var(--primary);
         height: 100%;
         width: 20px;
         z-index: 1;
       }
+
       &::-webkit-calendar-picker-indicator {
         background: transparent;
         position: absolute;
         cursor: pointer;
-        right: 0px;
+        right: 0;
         z-index: 2;
       }
     }
diff --git a/app/assets/stylesheets/common/components/date-time-input.scss b/app/assets/stylesheets/common/components/date-time-input.scss
index ec3c7ca3cf9..25913051fb8 100644
--- a/app/assets/stylesheets/common/components/date-time-input.scss
+++ b/app/assets/stylesheets/common/components/date-time-input.scss
@@ -16,6 +16,7 @@
 
   .d-time-input {
     width: 90px;
+
     .select-kit-header {
       border-color: transparent;
       width: 90px;
diff --git a/app/assets/stylesheets/common/components/drafts-dropdown-menu.scss b/app/assets/stylesheets/common/components/drafts-dropdown-menu.scss
index c35c331012d..b30eac8e6e4 100644
--- a/app/assets/stylesheets/common/components/drafts-dropdown-menu.scss
+++ b/app/assets/stylesheets/common/components/drafts-dropdown-menu.scss
@@ -1,5 +1,4 @@
 // Styles for the drafts dropdown menu
-
 .topic-drafts-menu-trigger {
   margin-left: -0.3em;
 }
diff --git a/app/assets/stylesheets/common/components/dropdown-menu.scss b/app/assets/stylesheets/common/components/dropdown-menu.scss
index f40aedf01c4..d0b5e938592 100644
--- a/app/assets/stylesheets/common/components/dropdown-menu.scss
+++ b/app/assets/stylesheets/common/components/dropdown-menu.scss
@@ -13,7 +13,7 @@
   }
 
   &__divider {
-    margin: 0rem;
+    margin: 0;
     height: 0;
   }
 }
diff --git a/app/assets/stylesheets/common/components/emoji-picker.scss b/app/assets/stylesheets/common/components/emoji-picker.scss
index 22e6af58185..47e019d89b3 100644
--- a/app/assets/stylesheets/common/components/emoji-picker.scss
+++ b/app/assets/stylesheets/common/components/emoji-picker.scss
@@ -102,7 +102,6 @@
   }
 
   &__sections-nav {
-    height: 100%;
     display: flex;
     flex-direction: column;
     min-width: 40px;
diff --git a/app/assets/stylesheets/common/components/footer-nav.scss b/app/assets/stylesheets/common/components/footer-nav.scss
index c6811fcde19..a90a58219f8 100644
--- a/app/assets/stylesheets/common/components/footer-nav.scss
+++ b/app/assets/stylesheets/common/components/footer-nav.scss
@@ -16,7 +16,7 @@ html.footer-nav-visible {
   #reply-control.draft {
     bottom: var(--footer-nav-height);
     margin-bottom: env(safe-area-inset-bottom);
-    padding-bottom: 0px;
+    padding-bottom: 0;
   }
 
   .with-topic-progress {
@@ -48,18 +48,20 @@ html.footer-nav-visible {
   }
 
   &.visible {
-    bottom: 0px;
+    bottom: 0;
   }
 
   .footer-nav-widget {
     display: flex;
     justify-content: "space-evenly";
     @include unselectable;
+
     button {
       flex: 1;
       margin: 4px;
       border-radius: 2px;
       padding: 14px 18px;
+
       &:disabled {
         opacity: 0.6;
       }
@@ -76,15 +78,16 @@ html.footer-nav-visible {
 @supports (-webkit-backdrop-filter: blur(10px)) {
   html:not(.footer-nav-ipad) .footer-nav {
     background-color: rgba(var(--header_background-rgb), 0.7);
-    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
   }
 }
 
 html.footer-nav-ipad {
   padding-top: var(--footer-nav-height);
+
   .footer-nav {
     bottom: auto;
-    top: 0px;
+    top: 0;
     background-color: var(--header_background);
     z-index: z("ipad-header-nav");
     padding-bottom: 0; // resets safe-area-inset-bottom
diff --git a/app/assets/stylesheets/common/components/form-template-field.scss b/app/assets/stylesheets/common/components/form-template-field.scss
index f1a37ef3046..60550b1761b 100644
--- a/app/assets/stylesheets/common/components/form-template-field.scss
+++ b/app/assets/stylesheets/common/components/form-template-field.scss
@@ -20,8 +20,8 @@
     padding: 0.5em 0.65em;
     font-size: var(--font-0);
   }
-  // END of what should be removed after updating dropdown/multi-select to use select-kit
 
+  // END of what should be removed after updating dropdown/multi-select to use select-kit
   &__required-indicator {
     color: var(--danger);
     margin-left: 0.5em;
diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss
index c60e69b9978..7bc13c4f8b4 100644
--- a/app/assets/stylesheets/common/components/hashtag.scss
+++ b/app/assets/stylesheets/common/components/hashtag.scss
@@ -66,7 +66,7 @@ a.hashtag {
     max-height: inherit;
     overflow-y: auto;
 
-    &:after {
+    &::after {
       content: "";
       position: absolute;
       bottom: 0;
diff --git a/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss b/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
index beb664c51ae..056d3f5b8b6 100644
--- a/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
+++ b/app/assets/stylesheets/common/components/horizontal-overflow-nav.scss
@@ -2,6 +2,7 @@
   position: relative;
   min-width: 0;
   width: 100%;
+
   .nav-pills {
     overflow: auto;
     min-width: 0;
@@ -12,10 +13,12 @@
 
     // hides scrollbars, but allows mouse scrolling
     scrollbar-width: none;
+
     &::-webkit-scrollbar {
       height: 0;
     }
   }
+
   &.has-scroll {
     .nav-pills {
       scroll-behavior: smooth; // smooth scrolling on user interaction
@@ -36,11 +39,13 @@
   display: flex;
   align-items: center;
   transition: opacity 0.25s;
+
   .d-icon {
     pointer-events: none;
     margin-bottom: 0.2em;
     color: var(--d-nav-color--active);
   }
+
   &.disabled {
     // hiding with opacity so we can transition visibility
     opacity: 0;
@@ -50,7 +55,8 @@
 
 .horizontal-overflow-nav__scroll-right {
   right: 0;
-  &:before {
+
+  &::before {
     content: "";
     margin-left: calc(var(--fade-width) * -1);
     height: 100%;
@@ -65,7 +71,8 @@
 
 .horizontal-overflow-nav__scroll-left {
   left: 0;
-  &:after {
+
+  &::after {
     content: "";
     margin-right: calc(var(--fade-width) * -1);
     height: 100%;
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index 24e8cd4b5ae..5f82069e82f 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -55,6 +55,7 @@
 
   .keyboard-shortcuts-help__container {
     columns: 2 20em; // Set maximum of 2 columns
+
     section {
       display: inline-block;
       margin-bottom: 1.5em;
diff --git a/app/assets/stylesheets/common/components/more-topics.scss b/app/assets/stylesheets/common/components/more-topics.scss
index e0f496b1836..f9e5bbd9bc1 100644
--- a/app/assets/stylesheets/common/components/more-topics.scss
+++ b/app/assets/stylesheets/common/components/more-topics.scss
@@ -6,18 +6,22 @@
   .nav {
     margin-block: 0;
     top: 2px;
+
     li {
       .btn {
         color: var(--primary);
         background-color: transparent;
         padding: 0.5em 5px;
-        border-radius: 0px;
+        border-radius: 0;
+
         &:hover {
-          box-shadow: inset 0px -3px 0px 0px rgba(var(--tertiary-rgb), 0.5);
+          box-shadow: inset 0 -3px 0 0 rgba(var(--tertiary-rgb), 0.5);
         }
+
         &.active {
-          box-shadow: inset 0px -3px 0px 0px var(--tertiary);
+          box-shadow: inset 0 -3px 0 0 var(--tertiary);
         }
+
         .d-icon,
         &:hover .d-icon,
         &:active .d-icon {
@@ -37,7 +41,7 @@
   }
 
   .more-topics__list {
-    .topic-list-header:after {
+    .topic-list-header::after {
       content: "";
       display: block;
       height: 12px;
@@ -45,10 +49,12 @@
 
     .topic-list-body {
       border-top: none;
+
       .topic-list-item {
         &:first-child td {
           padding-top: 0;
         }
+
         &:last-of-type {
           border-bottom: none;
         }
@@ -60,7 +66,6 @@
   .suggested-topics-message .badge-category__wrapper .badge-category {
     display: inline;
     vertical-align: baseline;
-    line-height: var(--line-height-medium);
     margin-right: 0;
     line-height: 0.8;
     max-width: 150px;
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index 944fd182630..92d97f21b3d 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -8,6 +8,7 @@
 %nav {
   margin-left: 0;
   list-style: none;
+
   li a {
     display: block;
     text-decoration: none;
@@ -16,10 +17,8 @@
 
 // Pill nav
 // --------------------------------------------------
-
 .nav-pills {
   @extend %nav;
-
   display: flex;
   flex-direction: row;
   align-items: stretch;
@@ -51,6 +50,7 @@
       &:hover {
         color: var(--d-nav-color--hover);
         background: var(--d-nav-bg-color--hover);
+
         .d-icon {
           color: var(--d-nav-color--hover);
         }
@@ -59,14 +59,13 @@
 
     a.active,
     button.active {
-      @include nav-active();
+      @include nav-active;
     }
   }
 }
 
 // Stacked nav
 // --------------------------------------------------
-
 .nav-stacked {
   @extend %nav;
   padding: 0;
@@ -120,6 +119,6 @@
 .user-navigation .nav-pills > li {
   a,
   button {
-    border-radius: 0px;
+    border-radius: 0;
   }
 }
diff --git a/app/assets/stylesheets/common/components/post-list.scss b/app/assets/stylesheets/common/components/post-list.scss
index b980e1f853f..d2f2400506e 100644
--- a/app/assets/stylesheets/common/components/post-list.scss
+++ b/app/assets/stylesheets/common/components/post-list.scss
@@ -28,6 +28,7 @@
     &__details {
       flex-grow: 1;
       min-width: 0;
+
       .badge-category__wrapper {
         width: 100%;
       }
@@ -60,12 +61,15 @@
     font-size: var(--font-0);
     word-wrap: break-word;
     color: var(--primary);
+
     &:empty {
       display: none;
     }
+
     details.disabled {
       color: var(--primary-medium);
     }
+
     .emoji.only-emoji {
       // oversized emoji break excerpt layout
       // so we match inline emoji size
diff --git a/app/assets/stylesheets/common/components/powered-by-discourse.scss b/app/assets/stylesheets/common/components/powered-by-discourse.scss
index 20254a82ad2..12ce5c29fb3 100644
--- a/app/assets/stylesheets/common/components/powered-by-discourse.scss
+++ b/app/assets/stylesheets/common/components/powered-by-discourse.scss
@@ -26,7 +26,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.5em;
-    color: currentColor;
+    color: currentcolor;
     background: var(--secondary);
     border-radius: 0.62em;
     padding: 0.25em 0.65em 0.25em 0.5em;
@@ -67,6 +67,7 @@
       0% {
         background-position: 0% 50%;
       }
+
       100% {
         background-position: 100% 50%;
       }
diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/categories-modal.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/categories-modal.scss
index b89202f7ee9..f974b8f2983 100644
--- a/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/categories-modal.scss
+++ b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/categories-modal.scss
@@ -36,6 +36,7 @@
     margin: 0;
     flex-grow: 1;
     font-weight: normal;
+
     input[type="checkbox"] {
       margin-right: 0;
     }
@@ -66,6 +67,7 @@
     color: var(--primary-high);
     font-size: var(--font-down-1);
     margin: 0.25em 0;
+
     // avoids long words (like urls) from breaking the layou
     word-break: break-word;
   }
diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss
index df29a8880c2..5f295e6fcd3 100644
--- a/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss
+++ b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss
@@ -3,6 +3,7 @@
     width: 100%;
   }
 }
+
 .sidebar__edit-navigation-menu__filter {
   display: flex;
   gap: 0.5em;
@@ -37,6 +38,7 @@
     width: 100%;
     position: relative;
     flex: 1 1 70%;
+
     input {
       margin: 0;
     }
@@ -48,6 +50,7 @@
 
     .select-kit {
       width: 100%;
+
       summary {
         height: 100%;
       }
@@ -70,7 +73,7 @@
       border-color: var(--tertiary);
       outline: none;
       outline-offset: 0;
-      box-shadow: inset 0px 0px 0px 1px var(--tertiary);
+      box-shadow: inset 0 0 0 1px var(--tertiary);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss
index 01a13889452..fea3b38f9b4 100644
--- a/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss
+++ b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss
@@ -31,6 +31,7 @@
         overflow: hidden;
         margin: 0;
       }
+
       &-name {
         // avoid long tags breaking the layou
         word-break: break-all;
diff --git a/app/assets/stylesheets/common/components/signup-progress-bar.scss b/app/assets/stylesheets/common/components/signup-progress-bar.scss
index 09c3892cf37..b0b69b6ab74 100644
--- a/app/assets/stylesheets/common/components/signup-progress-bar.scss
+++ b/app/assets/stylesheets/common/components/signup-progress-bar.scss
@@ -10,6 +10,7 @@
   box-sizing: border-box;
   margin-bottom: 1.2em;
   gap: 1rem;
+
   .account-created &,
   .activate-account & {
     margin-inline: 0;
@@ -29,6 +30,7 @@
 
     &:last-child {
       width: var(--progress-bar-circle-size);
+
       .signup-progress-bar__circle {
         transform: translateX(-50%);
         z-index: 1;
@@ -60,6 +62,7 @@
       box-shadow: 0 0 1px calc(var(--progress-bar-circle-size) / 2)
         var(--success-low);
     }
+
     .--completed & {
       background-color: var(--success);
       border-color: var(--success);
diff --git a/app/assets/stylesheets/common/components/svg.scss b/app/assets/stylesheets/common/components/svg.scss
index 51110c14237..3be127645c6 100644
--- a/app/assets/stylesheets/common/components/svg.scss
+++ b/app/assets/stylesheets/common/components/svg.scss
@@ -6,7 +6,7 @@
   display: inline-flex;
   position: relative;
   vertical-align: -0.125em;
-  fill: currentColor;
+  fill: currentcolor;
   flex-shrink: 0; // Prevent the icon from shrinking if it's in a flexbox
   overflow: visible;
 }
@@ -23,7 +23,6 @@ svg > use {
 //    <svg class="... d-icon-icon2 fa-stack-2x ..." xmlns="http://www.w3.org/2000/svg"><use href="#icon2"></use></svg>
 // </span>
 // -------------------------
-
 .fa-stack {
   position: relative;
   width: 1em;
@@ -32,8 +31,8 @@ svg > use {
 
   .fa-stack-1x,
   .fa-stack-2x {
-    left: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
     position: absolute;
   }
 
diff --git a/app/assets/stylesheets/common/components/theme-card.scss b/app/assets/stylesheets/common/components/theme-card.scss
index b5adfc940af..511e1a7cfe0 100644
--- a/app/assets/stylesheets/common/components/theme-card.scss
+++ b/app/assets/stylesheets/common/components/theme-card.scss
@@ -1,6 +1,6 @@
 @mixin theme-card-border($color) {
   border-color: var(--#{$color}-medium);
-  box-shadow: 0px 0px 0px 3px var(--#{$color}-low);
+  box-shadow: 0 0 0 3px var(--#{$color}-low);
 }
 
 .themes-cards-container {
@@ -13,40 +13,46 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  box-shadow: 0px 0px 0px 3px transparent;
+  box-shadow: 0 0 0 3px transparent;
   transition: box-shadow 0.3s ease-in-out;
+
   &.--updating {
     animation: updating 3s ease-in-out 1,
       updatingInfinite 3s ease-in-out 3s infinite;
     @keyframes updating {
       0% {
-        box-shadow: 0px 0px 0px 3px transparent;
+        box-shadow: 0 0 0 3px transparent;
         border: 1px solid var(--success);
       }
+
       50% {
-        box-shadow: 0px 0px 0px 6px var(--success-low);
+        box-shadow: 0 0 0 6px var(--success-low);
         border: 1px solid var(--success);
       }
+
       100% {
-        box-shadow: 0px 0px 0px 3px var(--success-low);
+        box-shadow: 0 0 0 3px var(--success-low);
         border: 1px solid var(--success);
       }
     }
     @keyframes updatingInfinite {
       0% {
-        box-shadow: 0px 0px 0px 3px var(--success-low);
+        box-shadow: 0 0 0 3px var(--success-low);
         border: 1px solid var(--success);
       }
+
       50% {
-        box-shadow: 0px 0px 0px 6px var(--success-low);
+        box-shadow: 0 0 0 6px var(--success-low);
         border: 1px solid var(--success);
       }
+
       100% {
-        box-shadow: 0px 0px 0px 3px var(--success-low);
+        box-shadow: 0 0 0 3px var(--success-low);
         border: 1px solid var(--success);
       }
     }
   }
+
   &.--updating .d-icon-arrows-rotate {
     animation: rotate 3s linear infinite;
     margin-right: 0.45em;
@@ -54,11 +60,13 @@
       0% {
         transform: rotate(0deg);
       }
+
       100% {
         transform: rotate(360deg);
       }
     }
   }
+
   .admin-config-area-card__content {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/stylesheets/common/components/time-input.scss b/app/assets/stylesheets/common/components/time-input.scss
index 918d1c1846e..78e1e8e3ed6 100644
--- a/app/assets/stylesheets/common/components/time-input.scss
+++ b/app/assets/stylesheets/common/components/time-input.scss
@@ -28,6 +28,7 @@
     .select-kit-filter {
       width: auto;
       overflow: hidden;
+
       .filter-input {
         min-width: 0;
       }
diff --git a/app/assets/stylesheets/common/components/time-shortcut-picker.scss b/app/assets/stylesheets/common/components/time-shortcut-picker.scss
index c50f0137e7a..a94f031874d 100644
--- a/app/assets/stylesheets/common/components/time-shortcut-picker.scss
+++ b/app/assets/stylesheets/common/components/time-shortcut-picker.scss
@@ -3,6 +3,7 @@
   border: 1px solid var(--primary-low);
   border-top: none;
   background: var(--primary-very-low);
+
   .d-icon {
     padding: 0 0.75em 0 0;
     color: var(--primary-high);
diff --git a/app/assets/stylesheets/common/components/topic-map.scss b/app/assets/stylesheets/common/components/topic-map.scss
index 11ed9547889..8ae15f055f1 100644
--- a/app/assets/stylesheets/common/components/topic-map.scss
+++ b/app/assets/stylesheets/common/components/topic-map.scss
@@ -2,7 +2,6 @@
   // topic map under OP
   border-top: 1px solid var(--primary-low);
   border-bottom: none;
-
   padding-left: calc(
     var(--topic-body-width-padding) + var(--topic-avatar-width)
   );
@@ -52,7 +51,7 @@ body:not(.archetype-private_message) {
 
   &.--op,
   &.--bottom {
-    @media screen and (max-width: 500px) {
+    @media screen and (width <= 500px) {
       padding-left: 0;
     }
   }
@@ -254,7 +253,7 @@ body:not(.archetype-private_message) {
       color: var(--primary-medium);
     }
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       display: none;
     }
   }
@@ -415,6 +414,7 @@ body:not(.archetype-private_message) {
 
     .link-summary {
       width: 100%;
+
       .d-icon {
         color: var(--primary-high);
       }
@@ -428,6 +428,7 @@ body:not(.archetype-private_message) {
       gap: 0.5em;
       padding: 0.75em 1rem;
     }
+
     .poster {
       display: block;
       position: relative;
@@ -437,6 +438,7 @@ body:not(.archetype-private_message) {
         height: 2.25em;
       }
     }
+
     .post-count,
     .avatar-flair {
       position: absolute;
@@ -445,6 +447,7 @@ body:not(.archetype-private_message) {
       align-items: center;
       justify-content: center;
     }
+
     .post-count {
       top: -0.15em;
       right: -0.25em;
@@ -452,6 +455,7 @@ body:not(.archetype-private_message) {
       font-size: var(--font-down-2);
       line-height: var(--line-height-small);
     }
+
     .avatar-flair {
       right: -0.25em;
       bottom: -0.15em;
@@ -473,6 +477,7 @@ body:not(.archetype-private_message) {
         justify-content: space-evenly;
         padding: 0 1rem;
       }
+
       &__count {
         font-size: var(--font-up-4);
         color: var(--primary-high);
diff --git a/app/assets/stylesheets/common/components/topic-query-filter.scss b/app/assets/stylesheets/common/components/topic-query-filter.scss
index 9c99a807cb6..464313f1acc 100644
--- a/app/assets/stylesheets/common/components/topic-query-filter.scss
+++ b/app/assets/stylesheets/common/components/topic-query-filter.scss
@@ -41,7 +41,7 @@
       border-color: var(--tertiary);
       outline: none;
       outline-offset: 0;
-      box-shadow: inset 0px 0px 0px 1px var(--tertiary);
+      box-shadow: inset 0 0 0 1px var(--tertiary);
     }
   }
 }
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index ce600808f80..202a4a01a84 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -3,6 +3,7 @@
 .fk-d-menu[data-identifier="usercard"] {
   max-width: calc(100vw - 2em);
   width: auto;
+
   .fk-d-menu__inner-content {
     min-width: 0;
     overflow: visible;
@@ -27,7 +28,8 @@
   border-radius: 100%;
   position: relative;
   overflow: hidden;
-  &:before {
+
+  &::before {
     @media (prefers-reduced-motion: no-preference) {
       animation: placeHolderShimmer 4s linear infinite forwards;
     }
@@ -62,21 +64,26 @@
   .card-content {
     padding: 10px;
     background: rgba(var(--secondary-rgb), 0.85);
-    &:after {
+
+    &::after {
       content: "";
       display: block;
       clear: both;
     }
+
     a.card-huge-avatar {
       display: block;
     }
+
     .bio {
       @include line-clamp(2);
     }
   }
+
   .card-row:not(.first-row) {
     margin-top: 0.5em;
   }
+
   // avatar - names - controls
   .first-row {
     .names {
@@ -97,37 +104,46 @@
         flex: 0 1 auto;
         @include ellipsis;
       }
+
       span {
         display: block;
       }
     }
+
     .usercard-controls {
       list-style-type: none;
       margin: 0;
+
       button {
         width: 100%;
       }
     }
   }
+
   .btn {
     margin-bottom: 5px;
   }
+
   .names__primary {
     line-height: var(--line-height-medium);
     font-size: var(--font-up-5);
     font-weight: bold;
+
     .d-icon {
       color: var(--primary);
     }
   }
+
   .names__secondary {
     font-size: var(--font-up-1);
   }
+
   .metadata {
     display: flex;
     flex-wrap: wrap;
     gap: 0.15em 0.5em;
     color: var(--primary);
+
     &.email,
     .desc,
     a {
@@ -140,12 +156,14 @@
     margin: 0;
     @include ellipsis;
   }
+
   .names__primary,
   .names__secondary {
     a {
       color: var(--primary);
     }
   }
+
   p {
     margin: 0 0 5px 0;
   }
@@ -156,53 +174,65 @@
   // avatar - names - controls
   .first-row {
     display: flex;
+
     .avatar-placeholder {
       width: var(--avatar-width);
       height: var(--avatar-width);
     }
+
     .user-card-avatar {
       margin-top: var(--avatar-margin);
       max-height: var(--avatar-width);
     }
+
     .avatar {
       width: var(--avatar-width);
       height: var(--avatar-width);
     }
+
     .new-user a {
       color: var(--primary-low-mid);
     }
   }
+
   // user bio - suspension reason
   .second-row {
     max-height: 150px;
     overflow: auto;
+
     .bio {
       a:not(.mention) {
         color: var(--tertiary);
       }
+
       .overflow {
         max-height: 60px;
         overflow: hidden;
       }
     }
+
     .suspended {
       color: var(--danger);
+
       .suspension-reason-title,
       .suspension-date {
         font-weight: bold;
       }
     }
+
     .profile-hidden,
     .inactive-user {
       font-size: var(--font-up-1);
       margin-top: 0.5em;
     }
   }
+
   // featured topic
   .featured-topic {
     .desc {
       color: var(--primary-high);
     }
+
     a {
       color: var(--primary);
       text-decoration: underline;
@@ -215,34 +245,41 @@
     flex-wrap: wrap;
     width: 100%;
     align-items: center;
+
     .location,
     .website-name {
       display: flex;
       overflow: hidden;
       align-items: center;
+
       .d-icon {
         margin-right: 0.25em;
       }
     }
+
     .website-name a,
     .location span {
       @include ellipsis;
       color: var(--primary);
     }
+
     .location,
     .local-time,
     .website-name {
       margin-right: 0.5em;
     }
+
     .website-name a {
       text-decoration: underline;
     }
   }
+
   // custom user fields
   .public-user-fields {
     margin: 0;
+
     .user-field-value-list-item:not(:last-of-type) {
-      &:after {
+      &::after {
         // create comma separated list
         content: ",";
       }
@@ -252,20 +289,24 @@
   // badges
   .badge-section {
     line-height: 0;
+
     .user-badge {
       @include ellipsis;
       background: var(--primary-very-low);
       border: 1px solid var(--primary-low);
       color: var(--primary);
     }
+
     .user-card-badge-link {
       overflow: hidden;
     }
+
     .user-card-badge-link,
     .more-user-badges {
       vertical-align: top;
       display: inline-block;
     }
+
     .more-user-badges a {
       @extend .user-badge;
     }
@@ -299,9 +340,11 @@
   // avatar - names and controls
   .first-row {
     display: flex;
+
     .group-card-avatar {
       margin-top: var(--avatar-margin);
     }
+
     .avatar-flair {
       display: flex;
       background-size: contain;
@@ -309,27 +352,33 @@
       width: var(--avatar-width);
       height: var(--avatar-width);
       color: var(--primary);
+
       .d-icon {
         margin: auto;
         font-size: calc(var(--avatar-width) / 1.5);
       }
+
       &.rounded {
         border-radius: 50%;
       }
     }
   }
+
   // group bio
   .second-row {
     max-height: 150px;
     overflow: auto;
+
     .bio {
       a:not(.mention) {
         color: var(--tertiary);
       }
+
       img {
         max-width: 100%;
         height: auto;
       }
+
       .overflow {
         max-height: 60px;
         overflow: hidden;
diff --git a/app/assets/stylesheets/common/components/user-info.scss b/app/assets/stylesheets/common/components/user-info.scss
index 66b89227337..9b2f2af7eb8 100644
--- a/app/assets/stylesheets/common/components/user-info.scss
+++ b/app/assets/stylesheets/common/components/user-info.scss
@@ -22,6 +22,7 @@
         gap: 0 0.5em;
         color: var(--primary-high);
       }
+
       .name,
       .username {
         width: 100%;
@@ -35,6 +36,7 @@
 
     .details {
       color: var(--primary);
+
       .d-icon-reply {
         color: var(--primary-medium);
       }
diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss
index 7999d122130..8ed3a54c323 100644
--- a/app/assets/stylesheets/common/components/user-stream-item.scss
+++ b/app/assets/stylesheets/common/components/user-stream-item.scss
@@ -34,6 +34,7 @@
   .user-stream-item__details {
     flex-grow: 1;
     min-width: 0;
+
     .badge-category__wrapper {
       width: 100%;
     }
@@ -88,15 +89,18 @@
       a {
         align-items: center;
       }
+
       .d-icon {
         color: var(--primary-medium);
       }
+
       .relative-date {
         margin-left: auto;
         padding-top: 0;
         float: none;
       }
     }
+
     &:not(.show-avatars) {
       li.notification {
         padding: 0.75em 0;
@@ -142,12 +146,15 @@
     font-size: var(--font-0);
     word-wrap: break-word;
     color: var(--primary);
+
     &:empty {
       display: none;
     }
+
     details.disabled {
       color: var(--primary-medium);
     }
+
     .emoji.only-emoji {
       // oversized emoji break excerpt layout
       // so we match inline emoji size
@@ -176,9 +183,11 @@
     width: 15px;
     display: inline-block;
     color: var(--primary);
+
     &.d-icon-heart {
       color: var(--love);
     }
+
     &.d-icon-trash-can {
       color: var(--secondary);
     }
diff --git a/app/assets/stylesheets/common/components/user-stream.scss b/app/assets/stylesheets/common/components/user-stream.scss
index c1ca00f3415..300a1f286f4 100644
--- a/app/assets/stylesheets/common/components/user-stream.scss
+++ b/app/assets/stylesheets/common/components/user-stream.scss
@@ -1,5 +1,6 @@
 .user-stream {
   margin: 0;
+
   &.filter-deleted {
     grid-column-start: 1;
     grid-column-end: 3;
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 228ff08c3f2..b4ed4ceb3e2 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -42,6 +42,7 @@
 
   &.disabled {
     cursor: not-allowed;
+
     .d-editor-button-bar {
       opacity: 0.5;
       pointer-events: none;
@@ -69,7 +70,7 @@
   margin: 0;
   min-height: auto;
   word-wrap: break-word;
-  -webkit-appearance: none;
+  appearance: none;
   border-radius: 0;
 }
 
@@ -117,24 +118,30 @@
     height: 100%;
     min-height: 10em;
   }
+
   .local-dates.btn {
     display: none;
   }
+
   .d-editor-container {
     display: block;
   }
+
   .d-editor-textarea-wrapper {
     border: 1px solid var(--primary-low);
   }
+
   .d-editor-preview-wrapper {
     max-width: 100%;
     margin: 0;
     padding: 0;
   }
+
   .d-editor-preview {
     background-color: var(--primary-very-low);
     margin-top: 1em;
     padding: 0.667em;
+
     &:empty {
       margin: 0;
       padding: 0;
@@ -150,12 +157,14 @@
 
 .d-editor-preview img {
   vertical-align: baseline; // consistent with cooked
+
   &.emoji,
   &.avatar,
   &.onebox-avatar,
   &.site-icon {
     vertical-align: text-bottom;
   }
+
   &.resizable {
     object-fit: cover;
     object-position: top;
@@ -221,6 +230,7 @@
 
     .alt-text-readonly-container {
       flex: 1 1 auto;
+
       // arbitrary min-width value allows for correct shrinking
       min-width: 100px;
 
@@ -246,6 +256,7 @@
       flex: 1;
       max-width: 100%;
       height: 95%; // gives input some padding
+
       .alt-text-input,
       .alt-text-edit-ok,
       .alt-text-edit-cancel {
@@ -320,8 +331,9 @@
     color: var(--primary-medium);
 
     .d-icon {
-      color: currentColor;
+      color: currentcolor;
     }
+
     .discourse-no-touch & {
       &:hover {
         color: var(--primary-low);
diff --git a/app/assets/stylesheets/common/float-kit/d-default-toast.scss b/app/assets/stylesheets/common/float-kit/d-default-toast.scss
index 0568cd21c8d..e2bb1337547 100644
--- a/app/assets/stylesheets/common/float-kit/d-default-toast.scss
+++ b/app/assets/stylesheets/common/float-kit/d-default-toast.scss
@@ -20,17 +20,21 @@
       background-color: var(--success-low);
       color: var(--primary);
     }
+
     &.alert-error {
       background-color: var(--danger-low);
       color: var(--primary);
     }
+
     &.alert-warning {
       background-color: var(--highlight-bg);
       color: var(--primary);
     }
+
     &.alert-info {
       background-color: var(--tertiary-low);
       color: var(--primary);
+
       &.clickable {
         color: var(--tertiary);
         z-index: z("base");
diff --git a/app/assets/stylesheets/common/float-kit/d-menu.scss b/app/assets/stylesheets/common/float-kit/d-menu.scss
index 42143182d52..731bc0e29cb 100644
--- a/app/assets/stylesheets/common/float-kit/d-menu.scss
+++ b/app/assets/stylesheets/common/float-kit/d-menu.scss
@@ -115,6 +115,7 @@
           color: inherit;
         }
       }
+
       &:hover,
       &:focus {
         background: var(--d-hover);
@@ -137,6 +138,6 @@
   }
 
   &__divider {
-    margin: 0rem;
+    margin: 0;
   }
 }
diff --git a/app/assets/stylesheets/common/float-kit/d-toasts.scss b/app/assets/stylesheets/common/float-kit/d-toasts.scss
index 5bbaf8e4938..7a1b39bbe39 100644
--- a/app/assets/stylesheets/common/float-kit/d-toasts.scss
+++ b/app/assets/stylesheets/common/float-kit/d-toasts.scss
@@ -6,7 +6,6 @@
 
 .fk-d-toasts {
   --transform-y: 0;
-
   position: fixed;
   top: calc(var(--header-offset) + 0.33rem);
   right: 5px;
diff --git a/app/assets/stylesheets/common/form-kit/_checkbox-group.scss b/app/assets/stylesheets/common/form-kit/_checkbox-group.scss
index 60102f6555c..75b9128fa2d 100644
--- a/app/assets/stylesheets/common/form-kit/_checkbox-group.scss
+++ b/app/assets/stylesheets/common/form-kit/_checkbox-group.scss
@@ -1,4 +1,4 @@
 .form-kit__checkbox-group {
   display: flex;
-  gap: 0em;
+  gap: 0;
 }
diff --git a/app/assets/stylesheets/common/form-kit/_control-code.scss b/app/assets/stylesheets/common/form-kit/_control-code.scss
index 63b5b2bf4a2..24448b7e9f6 100644
--- a/app/assets/stylesheets/common/form-kit/_control-code.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-code.scss
@@ -1,6 +1,7 @@
 .form-kit__field-code {
   .ace-wrapper {
     width: 100%;
+
     > .loading-container {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/common/form-kit/_control-composer.scss b/app/assets/stylesheets/common/form-kit/_control-composer.scss
index ab6341152ae..f95a915c8bd 100644
--- a/app/assets/stylesheets/common/form-kit/_control-composer.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-composer.scss
@@ -1,7 +1,6 @@
 .form-kit__control-composer {
   // same default effective height (150px) than a text control
   height: 189px;
-
   width: 100%;
 
   .d-editor-preview-wrapper {
diff --git a/app/assets/stylesheets/common/form-kit/_control-icon.scss b/app/assets/stylesheets/common/form-kit/_control-icon.scss
index 6f77a9f5e0c..b7ee3f8452c 100644
--- a/app/assets/stylesheets/common/form-kit/_control-icon.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-icon.scss
@@ -1,6 +1,7 @@
 .form-kit__control-icon {
   width: 100% !important;
   min-width: var(--form-kit-small-input);
+
   .formatted-selection {
     display: none !important;
   }
diff --git a/app/assets/stylesheets/common/form-kit/_control-input-group.scss b/app/assets/stylesheets/common/form-kit/_control-input-group.scss
index ce79859c3b8..420e5ae803f 100644
--- a/app/assets/stylesheets/common/form-kit/_control-input-group.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-input-group.scss
@@ -41,6 +41,7 @@
 
   > :not(:first-child) {
     margin-left: -1px;
+
     .form-kit__control-input {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
diff --git a/app/assets/stylesheets/common/form-kit/_control-menu.scss b/app/assets/stylesheets/common/form-kit/_control-menu.scss
index 8503e08643d..fc07ae59f1a 100644
--- a/app/assets/stylesheets/common/form-kit/_control-menu.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-menu.scss
@@ -7,6 +7,7 @@
   .dropdown-menu {
     min-width: 200px;
   }
+
   .dropdown-menu__item {
     &:hover {
       background: var(--d-hover);
diff --git a/app/assets/stylesheets/common/form-kit/_control-radio.scss b/app/assets/stylesheets/common/form-kit/_control-radio.scss
index a18eb6459b1..696331b6591 100644
--- a/app/assets/stylesheets/common/form-kit/_control-radio.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-radio.scss
@@ -8,6 +8,7 @@
   .form-kit__field[data-disabled] & {
     cursor: not-allowed;
   }
+
   input[type="radio"] {
     margin-right: 0; //old input overrule
   }
diff --git a/app/assets/stylesheets/common/form-kit/_control-textarea.scss b/app/assets/stylesheets/common/form-kit/_control-textarea.scss
index 769135f8f37..92e2b4c2fa6 100644
--- a/app/assets/stylesheets/common/form-kit/_control-textarea.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-textarea.scss
@@ -10,6 +10,5 @@
 
   // prevents firefox/chrome to add spacing under textarea
   display: block;
-
   border-radius: var(--d-input-border-radius);
 }
diff --git a/app/assets/stylesheets/common/form-kit/_row.scss b/app/assets/stylesheets/common/form-kit/_row.scss
index 290d16286a2..60944eab057 100644
--- a/app/assets/stylesheets/common/form-kit/_row.scss
+++ b/app/assets/stylesheets/common/form-kit/_row.scss
@@ -8,7 +8,6 @@
 
   > * {
     flex-shrink: 0;
-
     padding-right: calc(var(--form-kit-gutter-x) * 0.5);
     padding-left: calc(var(--form-kit-gutter-x) * 0.5);
   }
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 951cc797137..37e7cb3ccb0 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -1,7 +1,6 @@
 // These CSS custom properties are added here instead of in variables.scss
 // because variables.scss is injected into every theme CSS file
 // which causes problems when overriding custom properties in themes
-
 :root {
   --topic-body-width: #{$topic-body-width};
   --topic-body-width-padding: #{$topic-body-width-padding};
@@ -13,14 +12,13 @@
   --d-input-border-radius: 2px;
   --d-content-background: initial;
   --d-font-family--monospace: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
-    "Liberation Mono", Menlo, Monaco, Consolas, monospace;
+    "Liberation Mono", menlo, monaco, consolas, monospace;
   --d-button-transition: none;
 }
 
 // --------------------------------------------------
 // Base styles for HTML elements
 // --------------------------------------------------
-
 html {
   color: var(--primary);
   font-family: var(--font-family);
@@ -49,17 +47,19 @@ html {
 
 // Links
 // --------------------------------------------------
-
 a {
   color: var(--tertiary);
   text-decoration: none;
   cursor: pointer;
+
   &:visited {
     color: var(--tertiary);
   }
+
   &:hover {
     color: var(--tertiary);
   }
+
   &:active {
     color: var(--tertiary);
   }
@@ -67,7 +67,6 @@ a {
 
 // Typography
 // --------------------------------------------------
-
 hr {
   display: block;
   height: 1px;
@@ -79,7 +78,6 @@ hr {
 
 // Lists
 // --------------------------------------------------
-
 ul,
 ol,
 dd {
@@ -112,7 +110,6 @@ li,
 
 // Embedded content
 // --------------------------------------------------
-
 img {
   vertical-align: middle;
 }
@@ -123,7 +120,6 @@ img {
 
 // Forms
 // --------------------------------------------------
-
 fieldset {
   margin: 0;
   border: 0;
@@ -132,8 +128,8 @@ fieldset {
 
 pre code {
   overflow: auto;
-  -moz-tab-size: 4;
   tab-size: 4;
+
   &.lang-markdown {
     white-space: pre-wrap;
   }
@@ -141,7 +137,6 @@ pre code {
 
 // Tables
 // --------------------------------------------------
-
 table {
   border-collapse: collapse;
 }
@@ -167,7 +162,6 @@ ruby > rt {
 
 // Buttons (was in normalized)
 // --------------------------------------------------
-
 button,
 html input[type="button"],
 input[type="reset"],
@@ -177,11 +171,11 @@ input[type="submit"] {
 
 // Inline form
 // --------------------------------------------------
-
 .inline-form {
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
+
   &.full-width {
     display: flex;
   }
@@ -202,6 +196,7 @@ input[type="submit"] {
   > .d-date-input {
     margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
     margin-right: 0.5em;
+
     &:last-child {
       margin-right: 0;
     }
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index 93b706aabe7..9cd4c00c4df 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -21,7 +21,6 @@ $primary-600: dark-light-diff($primary, $secondary, 50%, -35%) !default;
 $primary-700: dark-light-diff($primary, $secondary, 38%, -30%) !default;
 $primary-800: dark-light-diff($primary, $secondary, 30%, -25%) !default;
 $primary-900: dark-light-diff($primary, $secondary, 15%, -10%) !default;
-
 $header_primary-low: blend-header-primary-background(10%) !default;
 $header_primary-low-mid: blend-header-primary-background(35%) !default;
 $header_primary-medium: blend-header-primary-background(55%) !default;
@@ -104,56 +103,44 @@ $wiki: green !default;
 
 //blended variants
 $blend-primary-secondary-5: blend-two-colors($primary, $secondary, 5%) !default;
-
 $primary-med-or-secondary-med: dark-light-choose(
   $primary-medium,
   $secondary-medium
 ) !default;
-
 $primary-med-or-secondary-high: dark-light-choose(
   $primary-medium,
   $secondary-high
 ) !default;
-
 $primary-high-or-secondary-low: dark-light-choose(
   $primary-high,
   $secondary-low
 ) !default;
-
 $primary-low-mid-or-secondary-high: dark-light-choose(
   $primary-low-mid,
   $secondary-high
 ) !default;
-
 $primary-low-mid-or-secondary-low: dark-light-choose(
   $primary-low-mid,
   $secondary-low
 ) !default;
-
 $primary-or-primary-low-mid: dark-light-choose(
   $primary,
   $primary-low-mid
 ) !default;
-
 $highlight-low-or-medium: dark-light-choose(
   $highlight-low,
   $highlight-medium
 ) !default;
-
 $tertiary-or-tertiary-low: dark-light-choose($tertiary, $tertiary-low) !default;
-
 $tertiary-low-or-tertiary-high: dark-light-choose(
   $tertiary-low,
   $tertiary-high
 ) !default;
-
 $tertiary-med-or-tertiary: dark-light-choose(
   $tertiary-medium,
   $tertiary
 ) !default;
-
 $secondary-or-primary: dark-light-choose($secondary, $primary) !default;
-
 $tertiary-or-white: dark-light-choose($tertiary, unquote("#fff")) !default;
 $facebook-or-white: dark-light-choose($facebook, unquote("#fff")) !default;
 $twitter-or-white: dark-light-choose($twitter, unquote("#fff")) !default;
@@ -172,7 +159,7 @@ $hljs-deletion: dark-light-choose(#c02d2e, #de7176) !default;
 $hljs-keyword: dark-light-choose(#015692, #88aece) !default;
 $hljs-title: dark-light-choose(#b75501, #f08d49) !default;
 $hljs-name: dark-light-choose(#b75501, #f08d49) !default;
-$hljs-punctuation: dark-light-choose(#535a60, #cccccc) !default;
+$hljs-punctuation: dark-light-choose(#535a60, #ccc) !default;
 $hljs-symbol: dark-light-choose(#54790d, #b5bd68) !default;
 $hljs-variable: dark-light-choose(#54790d, #b5bd68) !default;
 $hljs-string: dark-light-choose(#54790d, #b5bd68) !default;
diff --git a/app/assets/stylesheets/common/foundation/colors.scss b/app/assets/stylesheets/common/foundation/colors.scss
index 26de30c426d..062c9262370 100644
--- a/app/assets/stylesheets/common/foundation/colors.scss
+++ b/app/assets/stylesheets/common/foundation/colors.scss
@@ -1,12 +1,12 @@
-$primary: #222222 !default;
-$secondary: #ffffff !default;
-$tertiary: #0088cc !default;
+$primary: #222 !default;
+$secondary: #fff !default;
+$tertiary: #08c !default;
 $quaternary: #e45735 !default;
-$header_background: #ffffff !default;
-$header_primary: #333333 !default;
+$header_background: #fff !default;
+$header_primary: #333 !default;
 $highlight: #ffff4d !default;
 $selected: #d1f0ff !default;
 $hover: #f2f2f2 !default;
 $danger: #c80001 !default;
-$success: #009900 !default;
+$success: #090 !default;
 $love: #fa6c8d !default;
diff --git a/app/assets/stylesheets/common/foundation/helpers.scss b/app/assets/stylesheets/common/foundation/helpers.scss
index ce7dd3ec231..40dbce8d026 100644
--- a/app/assets/stylesheets/common/foundation/helpers.scss
+++ b/app/assets/stylesheets/common/foundation/helpers.scss
@@ -4,7 +4,6 @@
 
 // Floats
 // --------------------------------------------------
-
 .pull-left {
   float: left;
 }
@@ -15,7 +14,6 @@
 
 // Element visibility
 // --------------------------------------------------
-
 .show {
   display: block;
 }
@@ -42,21 +40,20 @@
 
 // Contain floats
 // --------------------------------------------------
-
 .clearfix {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     display: table;
     content: " ";
   }
-  &:after {
+
+  &::after {
     clear: both;
   }
 }
 
 // Overflow
 // --------------------------------------------------
-
 .overflow-ellipsis {
   white-space: nowrap;
   overflow: hidden;
@@ -65,7 +62,6 @@
 
 // Clickable elements
 // --------------------------------------------------
-
 .clickable {
   cursor: pointer;
 }
diff --git a/app/assets/stylesheets/common/foundation/math.scss b/app/assets/stylesheets/common/foundation/math.scss
index 02dd4aceea6..ecaf4922a6d 100644
--- a/app/assets/stylesheets/common/foundation/math.scss
+++ b/app/assets/stylesheets/common/foundation/math.scss
@@ -27,6 +27,7 @@ $SQRT2: 1.4142135623730951;
     @warn "Argument for `fact()` must be a positive integer.";
     @return null;
   }
+
   $ret: 1;
   @while $x > 0 {
     $ret: $ret * $x;
@@ -69,6 +70,7 @@ $SQRT2: 1.4142135623730951;
     @if $exp % 2 == 1 {
       $x: $x * $b;
     }
+
     $b: $b * $b;
     $exp: floor($exp * 0.5);
   }
@@ -84,6 +86,7 @@ $SQRT2: 1.4142135623730951;
   @if $x <= 0 {
     @return math.div(0, 0);
   }
+
   $k: nth(frexp(math.div($x, $SQRT2)), 2);
   $x: math.div($x, ldexp(1, $k));
   $x: math.div($x - 1, $x + 1);
@@ -104,6 +107,7 @@ $SQRT2: 1.4142135623730951;
   @if $exp != floor($exp) {
     @return error("Exponent for `ipow()` must be an integer.");
   }
+
   $r: 1;
   $s: 0;
   @if $exp < 0 {
@@ -114,6 +118,7 @@ $SQRT2: 1.4142135623730951;
     @if $exp % 2 == 1 {
       $r: $r * $base;
     }
+
     $exp: floor($exp * 0.5);
     $base: $base * $base;
   }
@@ -158,6 +163,7 @@ $SQRT2: 1.4142135623730951;
   @if $x < 0 {
     @return error("Argument for `sqrt()` must be a positive number.");
   }
+
   $ret: 1;
   @for $i from 1 through 24 {
     $ret: $ret - math.div(pow($ret, 2) - $x, 2 * $ret);
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 2a4a5744bac..3b7cf47b89b 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -48,12 +48,13 @@ $breakpoints: (
 // Clearfix
 
 @mixin clearfix() {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: "";
     display: table;
   }
-  &:after {
+
+  &::after {
     clear: both;
   }
 }
@@ -114,6 +115,7 @@ $hpad: 0.65em;
   line-height: normal;
   box-sizing: border-box;
   padding: $vpad $hpad;
+
   .ios-device & {
     font-size: var(--font-size-ios-input);
     padding-top: $vpad * 0.8;
@@ -122,14 +124,12 @@ $hpad: 0.65em;
 }
 
 @mixin sticky {
-  position: -webkit-sticky;
   position: sticky;
 }
 
 // Unselectable (avoids unwanted selections with iPad, touch laptops, etc)
 
 @mixin user-select($mode) {
-  -webkit-user-select: $mode;
   user-select: $mode;
 }
 
@@ -151,8 +151,6 @@ $hpad: 0.65em;
 
 @mixin appearance-none() {
   // resets default browser styles
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
 }
 
@@ -241,7 +239,7 @@ $hpad: 0.65em;
   // it returns a CDN or subfolder path (if applicable).
   // SCSS will compile (and return the relative path) if public_image_path is missing.
   @if variable-exists(public_image_path) {
-    @if (str-index("#{$path}", "/plugins") == 1) {
+    @if str-index("#{$path}", "/plugins") == 1 {
       $plugin_asset_path: str-replace($public_image_path, "/images", "");
       @return url("#{$plugin_asset_path}#{$path}");
     } @else {
@@ -279,10 +277,12 @@ $hpad: 0.65em;
 @mixin nav-active() {
   color: var(--d-nav-color--active);
   background: var(--d-nav-bg-color--active);
+
   .d-icon {
     color: var(--d-nav-color--active);
   }
-  &:after {
+
+  &::after {
     content: "";
     position: absolute;
     left: 0;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 16bed62b871..3657ca9d126 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -11,19 +11,17 @@
 $small-width: 800px !default;
 $medium-width: 995px !default;
 $large-width: 1110px !default;
-
 $topic-body-width: 690px;
 $topic-body-width-padding: 11px;
 $topic-avatar-width: 45px;
 $reply-area-max-width: 1475px !default;
-
 $d-sidebar-width: 17em !default;
 $d-sidebar-narrow-width: 14em !default;
 
 // Brand color variables
 // --------------------------------------------------
 
-$google: #ffffff !default;
+$google: #fff !default;
 $google-hover: darken($google, 5%) !default;
 $instagram: #e1306c !default;
 $instagram-hover: darken($instagram, 15%) !default;
@@ -113,6 +111,7 @@ $z-layers: (
     @if not map-has-key($map, $key) {
       @return false;
     }
+
     $map: map-get($map, $key);
   }
   @return true;
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index 69cbb2e2503..0745218f14f 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -1,12 +1,14 @@
 @keyframes slidein {
   0% {
-    transform: translateX(0px);
+    transform: translateX(0);
   }
+
   50% {
     transform: translateX(5px);
   }
+
   100% {
-    transform: translateX(0px);
+    transform: translateX(0);
   }
 }
 
@@ -25,14 +27,17 @@
     color: white;
     box-shadow: var(--shadow-dropdown);
   }
+
   &.hide,
   &.good {
     display: none;
   }
+
   .d-icon {
     color: var(--primary);
     opacity: 0.5;
     font-size: var(--font-0);
+
     &:hover {
       opacity: 1;
     }
diff --git a/app/assets/stylesheets/common/loading-slider.scss b/app/assets/stylesheets/common/loading-slider.scss
index e8ec89ff589..d099bf0bf6d 100644
--- a/app/assets/stylesheets/common/loading-slider.scss
+++ b/app/assets/stylesheets/common/loading-slider.scss
@@ -1,22 +1,17 @@
 .loading-indicator-container {
   --loading-width: 0.8;
   --still-loading-width: 0.9;
-
   --still-loading-duration: 10s;
   --done-duration: 0.4s;
   --fade-out-duration: 0.4s;
-
   position: fixed;
   top: 0;
   left: 0;
   z-index: z("header") + 1;
-
   height: 3px;
   width: 100%;
-
   opacity: 0;
   transition: opacity var(--fade-out-duration) ease var(--done-duration);
-
   background-color: var(--primary-low);
 
   .loading-indicator {
diff --git a/app/assets/stylesheets/common/login/invite-signup.scss b/app/assets/stylesheets/common/login/invite-signup.scss
index a2058f0b2c4..a47613d3bb9 100644
--- a/app/assets/stylesheets/common/login/invite-signup.scss
+++ b/app/assets/stylesheets/common/login/invite-signup.scss
@@ -34,11 +34,13 @@
       display: flex;
       justify-content: space-between;
     }
+
     &-tip-validation {
       display: flex;
       flex-direction: column;
     }
   }
+
   .invitation-cta {
     display: flex;
     align-items: center;
@@ -79,7 +81,7 @@
   padding: 2rem 3rem;
   background: var(--secondary);
   margin: 0 auto;
-  @media screen and (max-width: 700px) {
+  @media screen and (width <= 700px) {
     margin: 1em auto 1em auto;
     padding: 1rem;
   }
diff --git a/app/assets/stylesheets/common/modal/login-modal.scss b/app/assets/stylesheets/common/modal/login-modal.scss
index ae455800426..a8327428c63 100644
--- a/app/assets/stylesheets/common/modal/login-modal.scss
+++ b/app/assets/stylesheets/common/modal/login-modal.scss
@@ -1,6 +1,7 @@
 /*
 * shared styles
 */
+
 .d-modal.login-modal,
 .d-modal.create-account {
   &.awaiting-approval {
@@ -10,9 +11,9 @@
   .d-modal {
     &__container {
       position: relative;
-      width: max-content;
       width: 100%;
     }
+
     &__header {
       border-bottom: none;
       padding: 0;
@@ -21,11 +22,13 @@
       right: 0.75em;
       z-index: z("max");
     }
+
     &__body {
       display: flex;
       gap: 2rem;
       padding: 0;
     }
+
     &__footer {
       flex-wrap: nowrap;
       padding: 0;
@@ -77,6 +80,7 @@
     font-size: var(--font-down-1);
     min-height: 1.4em;
     display: block;
+
     &.bad {
       color: var(--danger);
     }
@@ -103,6 +107,7 @@
   #modal-alert {
     box-sizing: border-box;
     display: inline-block;
+
     // if you want to use flexbox here make sure child elements like <b> don't cause line breaks
     padding: 1em 3.5em 1em 1em; // large right padding to make sure long text isn't under the close button
     width: 100%;
@@ -111,8 +116,8 @@
     min-height: 35px;
 
     &:empty {
-      min-height: 0px;
-      padding: 0px;
+      min-height: 0;
+      padding: 0;
       overflow: hidden;
       display: inline;
     }
@@ -140,6 +145,7 @@
         width: 100%;
       }
     }
+
     &__existing-account,
     &__no-account-yet {
       color: var(--primary-medium);
@@ -147,6 +153,7 @@
       margin-bottom: 0.5rem;
       text-align: center;
       width: 100%;
+
       &::before {
         content: " ";
         display: block;
@@ -159,32 +166,38 @@
   }
 
   .desktop-view & {
-    @media screen and (max-width: 767px) {
+    @media screen and (width <= 767px) {
       // important to maintain narrow desktop widths
       // for auth modals in Discourse Hub on iPad
       .d-modal__header {
         right: 0;
         top: 0;
       }
+
       .has-alt-auth {
         flex-direction: column;
         overflow: auto;
         gap: 0;
+
         .d-modal__footer,
         .btn-social {
           font-size: var(--font-down-1);
         }
+
         .login-left-side {
           overflow: unset;
           padding: 1em;
         }
+
         .login-right-side {
           padding: 1em;
           max-width: unset;
         }
+
         #login-form {
           margin: 1.5em 0;
         }
+
         .signup-progress-bar {
           display: none;
         }
@@ -200,7 +213,6 @@
 }
 
 /* end shared styles */
-
 .d-modal.create-account,
 .d-modal.login-modal {
   &:not(:has(.login-right-side)) .d-modal__container {
@@ -213,15 +225,18 @@
     &__container {
       width: 100%;
     }
+
     &__footer {
       flex-direction: column;
       align-items: flex-start;
     }
+
     &__footer-buttons {
       display: flex;
       flex-direction: column;
       width: 100%;
       align-items: center;
+
       .already-have-account {
         color: var(--primary-medium);
         margin-bottom: 0.5em;
@@ -242,6 +257,7 @@
   .create-account__password-info {
     display: flex;
     justify-content: space-between;
+
     .create-account__password-tip-validation {
       display: flex;
     }
@@ -260,6 +276,7 @@
       display: flex;
       flex-direction: column;
       margin-bottom: 1em;
+
       input,
       .select-kit-header {
         padding: 0.75em 0.77em;
@@ -267,19 +284,23 @@
         margin-bottom: 0.25em;
         width: 100%;
       }
+
       input:focus {
         outline: none;
         border: 1px solid var(--tertiary);
         box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25);
       }
+
       input:disabled {
         background-color: var(--primary-low);
       }
+
       span.more-info {
         color: var(--primary-medium);
         min-height: 1.4em; // prevents height increase due to tips
         overflow-wrap: anywhere;
       }
+
       label.alt-placeholder,
       .user-field.text label.control-label,
       .user-field.dropdown label.control-label,
@@ -291,9 +312,10 @@
         pointer-events: none;
         left: 1em;
         top: 13px;
-        box-shadow: 0 0 0 0px rgba(var(--tertiary-rgb), 0);
+        box-shadow: 0 0 0 0 rgba(var(--tertiary-rgb), 0);
         transition: 0.2s ease all;
       }
+
       .user-field.text label.control-label,
       .user-field.dropdown label.control-label,
       .user-field.multiselect label.control-label {
@@ -304,14 +326,17 @@
         padding: 0 0.25em 0 0.25em;
         font-size: $font-down-1;
       }
+
       .user-field.text label.control-label {
         top: 13px;
       }
+
       .user-field.text:focus-within,
       .user-field.dropdown:focus-within,
       .user-field.multiselect:focus-within {
         z-index: 1000; // ensures the active input is always on top of sibling input labels
       }
+
       input:focus + label.alt-placeholder,
       input.value-entered + label.alt-placeholder {
         top: -8px;
@@ -320,9 +345,11 @@
         padding: 0 0.25em 0 0.25em;
         font-size: var(--font-down-1);
       }
+
       input.alt-placeholder:invalid {
         color: var(--primary);
       }
+
       .user-field.dropdown,
       .user-field.multiselect {
         .more-info,
@@ -359,6 +386,7 @@
         min-width: 250px;
         box-shadow: none;
       }
+
       input:focus {
         outline: none;
         border: 1px solid var(--tertiary);
@@ -380,6 +408,7 @@
             font-size: 14px;
             color: var(--primary-medium);
           }
+
           label.alt-placeholder.control-label {
             color: var(--primary-medium);
             font-size: 16px;
@@ -393,21 +422,26 @@
             text-overflow: ellipsis;
           }
         }
+
         details:not(.has-selection) span.name,
         details:not(.has-selection) span.formatted-selection {
           color: var(--primary-medium);
         }
+
         .select-kit-row span.name {
           color: var(--primary);
         }
+
         .select-kit.combo-box.is-expanded summary {
           outline: none;
           border: 1px solid var(--tertiary);
           box-shadow: 0 0 0 2px rgba(var(--tertiary-rgb), 0.25);
         }
+
         .controls .checkbox-label {
           display: flex;
           align-items: center;
+
           input[type="checkbox"].ember-checkbox {
             width: 1em !important;
             min-width: unset;
diff --git a/app/assets/stylesheets/common/modal/modal-overrides.scss b/app/assets/stylesheets/common/modal/modal-overrides.scss
index 4e1ab6a161d..e457b60ee85 100644
--- a/app/assets/stylesheets/common/modal/modal-overrides.scss
+++ b/app/assets/stylesheets/common/modal/modal-overrides.scss
@@ -1,12 +1,14 @@
 .d-modal.insert-hyperlink-modal {
   .insert-link {
     overflow-y: visible;
+
     input {
       min-width: 300px;
     }
 
     .inputs {
       position: relative;
+
       .spinner {
         position: absolute;
         right: 8px;
@@ -14,6 +16,7 @@
         width: 10px;
         height: 10px;
       }
+
       .internal-link-results {
         position: absolute;
         top: 70%;
@@ -24,19 +27,23 @@
         max-height: 150px;
         width: 90%;
         overflow-y: auto;
+
         > .search-link {
           padding: 6px;
           border-bottom: 1px solid var(--primary-low);
           cursor: pointer;
           display: block;
+
           &:hover,
           &:focus {
             background-color: var(--highlight-bg);
           }
+
           .search-category {
             display: flex;
             align-items: center;
           }
+
           .discourse-tags {
             font-size: var(--font-down-1);
           }
@@ -57,6 +64,7 @@
 .jump-to-post-modal {
   .d-modal__body {
     overflow-y: visible;
+
     #post-jump {
       margin: 0;
       width: 100px;
@@ -78,6 +86,7 @@
     .jump-to-date-control {
       display: flex;
       align-items: center;
+
       .input-hint-text {
         margin-left: 0;
         margin-right: 0.5em;
@@ -111,6 +120,7 @@
       width: 40em; //fixed width to avoid jumps when switching to different views
     }
   }
+
   #split-topic-name,
   #choose-topic-title,
   #choose-message-title {
@@ -130,9 +140,11 @@
     .radio {
       flex-wrap: wrap;
     }
+
     .topic-title {
       max-width: 90%;
     }
+
     .topic-categories {
       display: flex;
       font-weight: normal;
@@ -159,6 +171,7 @@
 
       .publish-url {
         margin-bottom: 1em;
+
         .example-url,
         .invalid-slug {
           font-weight: bold;
@@ -202,15 +215,18 @@
       width: 100%;
     }
   }
+
   p {
     margin-top: 0;
   }
+
   .bulk-buttons {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
     gap: 0.5em;
     max-width: 100%;
     min-width: 0;
+
     .d-button-label {
       @include ellipsis;
     }
@@ -229,12 +245,15 @@
       display: flex;
     }
   }
+
   p {
     margin-top: 0;
   }
+
   #bulk-topics-cancel {
     margin-left: auto;
   }
+
   .bulk-close-note-section {
     margin-top: 1em;
   }
@@ -288,11 +307,13 @@
 
 .d-modal.chat-modal-new-message {
   align-items: flex-start;
+
   .d-modal {
     &__container {
       width: var(--modal-max-width);
       margin-top: 1rem;
     }
+
     &__body {
       padding: 0;
 
@@ -306,20 +327,23 @@
     &__add-members-header-container {
       padding-inline: 1rem 0.5rem;
     }
+
     &__add-members-header {
       align-items: center;
     }
+
     &__members {
       min-height: unset;
       padding: 0.25rem 0.5rem;
     }
+
     &__add-members__close-btn {
       margin-top: 0;
       height: 33px;
     }
   }
 
-  @media screen and (max-width: 768px) {
+  @media screen and (width <= 768px) {
     .d-modal {
       &__container {
         width: 100%;
@@ -336,6 +360,7 @@
       max-height: 100vh;
     }
   }
+
   .modal-close {
     margin-left: auto;
   }
@@ -347,6 +372,7 @@
       display: grid;
       grid-template-rows: auto 1fr auto;
     }
+
     &__footer {
       justify-content: space-between;
     }
@@ -356,6 +382,7 @@
 .d-modal.fullscreen-code-modal {
   pre {
     margin: 0;
+
     code {
       max-width: none;
       max-height: none;
@@ -444,6 +471,7 @@
         @include ellipsis;
         width: 100%;
         justify-content: flex-start;
+
         &:focus {
           background-color: var(--tertiary-50);
         }
@@ -507,6 +535,7 @@
     list-style: none;
     padding: 0;
     margin: 0;
+
     .format {
       .previewed-format {
         color: var(--primary-medium);
diff --git a/app/assets/stylesheets/common/post-action-feedback.scss b/app/assets/stylesheets/common/post-action-feedback.scss
index af2cd1a590f..7a8d2d1c774 100644
--- a/app/assets/stylesheets/common/post-action-feedback.scss
+++ b/app/assets/stylesheets/common/post-action-feedback.scss
@@ -16,6 +16,7 @@
       }
     }
   }
+
   .post-action-feedback-svg {
     position: absolute;
     bottom: 0;
diff --git a/app/assets/stylesheets/common/printer-friendly.scss b/app/assets/stylesheets/common/printer-friendly.scss
index e00be1854e8..2aef208e6d6 100644
--- a/app/assets/stylesheets/common/printer-friendly.scss
+++ b/app/assets/stylesheets/common/printer-friendly.scss
@@ -1,6 +1,7 @@
 @media print {
   /* remove items N/A for print
   ** visual clutter etc. */
+
   .avatar,
   .topic-avatar,
   header,
@@ -39,49 +40,60 @@
   .poll-info {
     display: none !important;
   }
+
   /* For readability */
   a,
   a:visited {
-    color: #0088cc !important;
+    color: #08c !important;
   }
+
   /* bottom border to help separate posts */
   div.row {
     border-top: 1px solid #aaa;
   }
+
   .cooked pre code {
     max-height: none;
   }
+
   #main-outlet {
     padding: 0 !important;
   }
+
   html,
   body {
     min-width: 0;
     height: auto;
   }
+
   .lightbox-wrapper img {
     max-width: 500px !important;
     height: auto !important;
   }
+
   .topic-body {
     width: auto;
     margin: 0;
     padding: 0;
     float: none;
   }
+
   .topic-post article.boxed .select-posts {
     width: auto;
     left: auto;
     right: 0;
   }
+
   .gap {
     width: auto;
   }
+
   /* restyle div#topic-title */
   #topic-title {
     margin: 0;
     padding: 0;
   }
+
   #topic-title div div h1 {
     margin: 2.5em 0 0 0;
     padding: 0;
@@ -89,11 +101,13 @@
     font-weight: normal;
     font-size: normal;
   }
+
   a,
   a:visited {
     color: #ddd;
     font-weight: bold;
   }
+
   /* localhost  - MOOT for production */
   .topic-category-outlet.show-topic-category-location,
   div.alert.alert-info.alert-emails-disabled,
diff --git a/app/assets/stylesheets/common/select-kit/category-row.scss b/app/assets/stylesheets/common/select-kit/category-row.scss
index 03a9c137360..264405cd9b5 100644
--- a/app/assets/stylesheets/common/select-kit/category-row.scss
+++ b/app/assets/stylesheets/common/select-kit/category-row.scss
@@ -10,14 +10,17 @@
       flex: 1 1 auto;
       gap: 0 0.5em;
     }
+
     .category-desc p {
       margin: 0;
     }
+
     .category-desc {
       margin: 0;
       font-size: var(--font-down-1);
       color: var(--primary-medium);
     }
+
     .topic-count {
       white-space: nowrap;
     }
diff --git a/app/assets/stylesheets/common/select-kit/category-selector.scss b/app/assets/stylesheets/common/select-kit/category-selector.scss
index 89d0b277195..f5582955e61 100644
--- a/app/assets/stylesheets/common/select-kit/category-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/category-selector.scss
@@ -22,6 +22,7 @@
       .badge-category .d-icon {
         margin: 0;
       }
+
       &:hover,
       &:focus {
         .badge-category {
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index 20299a04aa8..e64c2eb6426 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -43,7 +43,6 @@
       .collection-header {
         a {
           white-space: nowrap;
-          color: var(--primary);
           line-height: var(--line-height-medium);
           font-weight: bold;
           display: block;
@@ -62,6 +61,7 @@
         background: var(--primary-low);
         border-color: var(--primary-low-mid);
         color: var(--primary-medium);
+
         .d-icon {
           color: var(--primary-medium);
         }
diff --git a/app/assets/stylesheets/common/select-kit/composer-actions.scss b/app/assets/stylesheets/common/select-kit/composer-actions.scss
index 22c79747e60..3b7506cef82 100644
--- a/app/assets/stylesheets/common/select-kit/composer-actions.scss
+++ b/app/assets/stylesheets/common/select-kit/composer-actions.scss
@@ -2,6 +2,7 @@
   &.dropdown-select-box {
     &.composer-actions {
       margin: 0;
+
       .select-kit-header {
         background: none;
         outline: none;
@@ -13,11 +14,13 @@
         .d-icon {
           padding: 5px 6px;
         }
+
         &:hover,
         &:focus {
           background: var(--primary-low);
         }
       }
+
       .d-icon {
         margin: 0 !important;
       }
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 2533d8f8eef..73300852840 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -85,10 +85,12 @@
       }
     }
   }
+
   &.user-notifications-dropdown {
     .select-kit-header .d-icon {
       margin-left: 0;
     }
+
     .select-kit-header-wrapper {
       justify-content: center;
     }
diff --git a/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss b/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss
index 32deda464b5..40141175d5d 100644
--- a/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss
@@ -14,17 +14,20 @@
       line-height: var(--line-height-medium);
       margin-right: 0.5em;
     }
+
     .name {
       color: var(--primary-high);
       font-size: var(--font-down-1);
       @include ellipsis;
     }
+
     .avatar,
     .d-icon {
       margin-left: 0;
       margin-right: 0.5em;
     }
   }
+
   .select-kit-header {
     .x-more-item {
       background: var(--primary-low);
@@ -34,7 +37,7 @@
       display: flex;
       justify-content: space-between;
       box-sizing: border-box;
-      margin: 2px 0 0px 3px;
+      margin: 2px 0 0 3px;
       float: left;
       height: 30px;
       color: inherit;
diff --git a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
index 489f6a75a09..74b2c2d762a 100644
--- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
@@ -42,6 +42,7 @@
   .future-date-input-time-picker {
     margin-top: 0.5em;
     margin-bottom: 0;
+
     input {
       margin-bottom: 0;
       margin-left: 5px;
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index b18aba51f2f..8c0b112607f 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -19,6 +19,7 @@
         background: var(--primary-low);
         border-color: var(--primary-low-mid);
         color: var(--primary-medium);
+
         .d-icon {
           color: var(--primary-medium);
         }
@@ -29,7 +30,6 @@
       display: flex;
       width: 100%;
       flex-wrap: wrap;
-      padding: 0;
       justify-content: flex-start;
       box-sizing: border-box;
       border-bottom: 1px solid var(--primary-low);
@@ -67,6 +67,7 @@
         margin: -0.35em;
         margin-left: -0.25em;
         position: relative;
+
         .selected-choice {
           margin: 0.125em 0.25em 0.125em 0;
           padding: 0.2em 0.3em;
@@ -84,9 +85,11 @@
           margin-left: 0.25em;
           position: static;
           min-height: 28px;
+
           &.is-expanded {
             padding: 0;
           }
+
           .filter-input {
             min-height: auto;
           }
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 244c456cce4..88b2ca7540d 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -15,7 +15,7 @@
     list-style-type: none;
     display: block;
 
-    &:before {
+    &::before {
       content: none !important;
       margin: 0;
     }
@@ -38,7 +38,6 @@
       align-items: center;
       justify-content: center;
       border-radius: 0;
-      border: none;
       border: 1px solid var(--primary-low);
       box-shadow: var(--shadow-dropdown);
       background: var(--secondary);
@@ -82,6 +81,7 @@
     display: flex;
     align-items: stretch;
     height: 100%;
+
     &:not(.btn) {
       border-radius: var(--d-input-border-radius);
       padding-left: 0.5em;
@@ -101,7 +101,6 @@
     }
 
     .d-icon-spinner {
-      -webkit-animation: rotate-forever 1s infinite linear;
       animation: rotate-forever 1s infinite linear;
     }
 
@@ -126,6 +125,7 @@
         display: inline-flex;
         gap: 0.5em;
         min-width: 0;
+
         > .d-icon {
           margin-left: 0.5em;
           margin-right: 0;
@@ -265,7 +265,7 @@
     }
 
     &::-webkit-scrollbar {
-      -webkit-appearance: none;
+      appearance: none;
       width: 10px;
     }
 
@@ -357,6 +357,7 @@
     0% {
       width: 0;
     }
+
     100% {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/common/software-update-prompt.scss b/app/assets/stylesheets/common/software-update-prompt.scss
index d01e7b4de80..6288bccebf2 100644
--- a/app/assets/stylesheets/common/software-update-prompt.scss
+++ b/app/assets/stylesheets/common/software-update-prompt.scss
@@ -4,6 +4,7 @@
   right: 0;
   left: 0;
   top: var(--header-offset, 60px);
+
   .static-login &,
   .wizard &,
   .invite-page & {
diff --git a/app/assets/stylesheets/common/table-builder/insert-table-modal.scss b/app/assets/stylesheets/common/table-builder/insert-table-modal.scss
index 08f4de87045..8f3a61d9bf2 100644
--- a/app/assets/stylesheets/common/table-builder/insert-table-modal.scss
+++ b/app/assets/stylesheets/common/table-builder/insert-table-modal.scss
@@ -28,7 +28,6 @@
     width: 100%;
     height: 100%;
     max-height: unset;
-
     display: grid;
     grid-template-rows: auto 1fr auto;
   }
@@ -66,6 +65,7 @@
       h4 {
         color: var(--primary);
       }
+
       li {
         margin-block: 0.25rem;
         color: var(--primary-high);
diff --git a/app/assets/stylesheets/common/table-builder/jspreadsheet-theme.scss b/app/assets/stylesheets/common/table-builder/jspreadsheet-theme.scss
index a05f4552798..59b36722528 100644
--- a/app/assets/stylesheets/common/table-builder/jspreadsheet-theme.scss
+++ b/app/assets/stylesheets/common/table-builder/jspreadsheet-theme.scss
@@ -3,20 +3,16 @@
   --jexcel_header_color_highlighted: var(--primary-high);
   --jexcel_header_background: var(--primary-very-low);
   --jexcel_header_background_highlighted: var(--primary-low);
-
   --jexcel_content_color: var(--primary);
   --jexcel_content_color_highlighted: var(--primary-high);
   --jexcel_content_background: var(--secondary);
   --jexcel_content_background_highlighted: var(--tertiary-very-low);
-
   --jexcel_menu_background: var(--secondary);
   --jexcel_menu_background_highlighted: var(--secondary-very-high);
   --jexcel_menu_color: var(--primary-medium);
   --jexcel_menu_color_highlighted: var(--primary);
-
   --jexcel_border_color: var(--primary-low-mid);
   --jexcel_border_color_highlighted: var(--tertiary-high);
-
   --active_color: var(--primary-very-low);
   --active-color: var(--active_color);
 }
@@ -36,6 +32,7 @@ table.jexcel > thead > tr > td {
   padding: 10px;
   font-weight: bold;
 }
+
 table.jexcel > tbody > tr > td {
   padding: 8px;
   border-right: 1px solid transparent;
@@ -197,32 +194,39 @@ table.jexcel > tbody > tr.selected > td:first-child {
 .jexcel .highlight-bottom {
   border-bottom: 1.5px solid var(--jexcel_border_color_highlighted);
 }
+
 .jexcel .highlight-right {
   border-right: 1.5px solid var(--jexcel_border_color_highlighted);
 }
+
 .jexcel .highlight-left {
   border-left: 1.5px solid var(--jexcel_border_color_highlighted);
 }
+
 .jexcel .highlight-top {
   border-top: 1.5px solid var(--jexcel_border_color_highlighted);
 }
+
 .jexcel .copying-top {
   border-top-color: var(--jexcel_border_color_highlighted);
 }
+
 .jexcel .copying-right {
   border-right-color: var(--jexcel_border_color_highlighted);
 }
+
 .jexcel .copying-left {
   border-left-color: var(--jexcel_border_color_highlighted);
 }
+
 .jexcel .copying-bottom {
   border-bottom-color: var(--jexcel_border_color_highlighted);
 }
+
 .jexcel_border_main,
 .jexcel .highlight-top.highlight-left,
 .jexcel .highlight-top,
 .jexcel .highlight-left {
-  -webkit-box-shadow: unset;
   box-shadow: unset;
 }
 
@@ -258,9 +262,11 @@ table.jexcel > tbody > tr > td {
 .jexcel_container {
   padding: 0.5em;
   min-width: 100%;
+
   .jexcel_content {
     min-width: 100%;
     padding: 0;
+
     table.jexcel {
       min-width: 100%;
     }
diff --git a/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss b/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
index 261c40c843a..2b2c7e49f51 100644
--- a/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
+++ b/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
@@ -1,8 +1,5 @@
 .btn-edit-table {
-  -webkit-user-select: none;
   -webkit-touch-callout: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 33c6fdb1dbf..5df9a387c06 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -20,9 +20,10 @@
       transition: max-height 0.4s ease-out;
     }
 
-    @media screen and (max-height: 425px) {
+    @media screen and (height <= 425px) {
       max-height: 75vh;
     }
+
     .topic-timeline {
       .timeline-footer-controls {
         display: flex;
@@ -30,6 +31,7 @@
         max-width: calc(100% - 9em); // 9em is the width of the timeline
       }
     }
+
     .timeline-controls {
       display: table-cell;
       vertical-align: top;
@@ -49,14 +51,16 @@
     right: 0;
     border-top: 1px solid var(--primary-low);
     box-shadow: var(--shadow-composer);
-    padding: 20px 0px;
+    padding: 20px 0;
     z-index: z("fullscreen");
-    @media screen and (max-height: 425px) {
+    @media screen and (height <= 425px) {
       padding-top: 10px;
     }
+
     .back-button {
       display: none;
     }
+
     .topic-timeline {
       width: 100%;
       table-layout: fixed;
@@ -68,26 +72,30 @@
       .timeline-date-wrapper {
         text-align: right;
       }
+
       .post-excerpt {
         max-width: 650px;
         line-height: var(--line-height-large);
         display: block;
         @include line-clamp(8);
-        @media screen and (max-height: 425px) {
+        @media screen and (height <= 425px) {
           @include line-clamp(5);
         }
       }
+
       .username {
         color: var(--primary-high-or-secondary-low);
         word-wrap: break-word;
         font-weight: bold;
       }
+
       .title {
         margin-top: 0;
         padding-left: 1em;
         display: table-cell;
         vertical-align: top;
         width: 100%;
+
         h2 {
           margin-top: 0;
           display: block;
@@ -95,17 +103,21 @@
           font-size: var(--font-up-2);
           @include line-clamp(4);
         }
+
         a {
           color: var(--primary);
         }
       }
+
       .timeline-last-read {
         right: 0;
         margin-left: 0;
+
         .progress {
           display: none;
         }
       }
+
       .timeline-footer-controls {
         display: none;
         position: absolute;
@@ -122,6 +134,7 @@
         padding-right: 1.5em;
         width: 7em;
       }
+
       .timeline-scrollarea {
         border-right: 1px solid var(--tertiary-low-or-tertiary-high);
         border-left: none;
@@ -132,6 +145,7 @@
           margin-right: -1.5em;
           padding-right: 1.5em;
           justify-content: flex-end;
+
           .timeline-scroller-content {
             box-sizing: border-box;
             max-width: 100%;
@@ -140,6 +154,7 @@
             padding-left: 0;
             padding-right: 1em;
           }
+
           .timeline-handle {
             float: none;
             width: 11px;
@@ -213,14 +228,17 @@
     .timeline-padding {
       transition: height 0.15s ease-out;
       cursor: pointer;
+
       // this element has a click event
       // the negative margin lets this element overlap
       // the scrollarea's vertical track and thus it
       // enables taps on the track to work
       margin-left: -1em;
+
       .widget-dragging & {
         transition: none;
       }
+
       .dragging & {
         transition: none;
       }
@@ -274,6 +292,7 @@
     .timeline-last-read {
       position: absolute;
       margin-left: -0.35em;
+
       .progress {
         font-size: 0.8em;
         color: var(--tertiary);
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index f8f9c1fbd70..29fa09da778 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -21,6 +21,7 @@
 
   &.with-topics {
     margin-left: 3px;
+
     .category {
       width: 45%;
     }
@@ -40,13 +41,16 @@
       font-size: var(--font-up-1);
       font-weight: bold;
     }
+
     .unit {
       font-size: var(--font-down-1);
     }
+
     .badge-notification {
       display: block;
       text-align: right;
       padding-right: 0;
+
       &:first-child {
         margin-top: 0.75em;
       }
@@ -58,29 +62,36 @@
     flex-wrap: wrap;
     gap: 0.15em 0.75em;
     margin-top: 0.5em;
+
     .subcategory {
       display: inline-flex;
       align-items: baseline;
       gap: 0.25em;
       @include ellipsis;
+
       .badge-category {
         min-width: 0;
       }
     }
+
     .category__badges {
       display: flex;
       gap: 0.25em;
+
       .badge-notification {
         top: 0;
         padding: 0;
       }
     }
+
     .badge-notification.unread-posts {
       display: block;
       padding: 0;
     }
+
     &__more-subcategories {
       font-size: var(--font-down-1);
+
       a {
         color: var(--primary-high);
       }
@@ -91,18 +102,22 @@
     margin: 10px 0 0;
     display: flex;
     align-items: baseline;
+
     &:first-of-type {
       margin-top: 13px;
     }
+
     a.last-posted-at,
     a.last-posted-at:visited {
       font-size: var(--font-down-1);
       color: var(--primary-med-or-secondary-high);
     }
+
     .title {
       @include ellipsis;
       flex: 0 1 auto;
     }
+
     .topic-post-badges .badge.unread-posts,
     .title {
       margin-right: 5px;
@@ -118,9 +133,11 @@
   tbody {
     .category {
       border-left: 6px solid var(--category-badge-color, var(--primary-low));
+
       h3,
       h4 {
         line-height: var(--line-height-medium);
+
         a[href] {
           color: var(--primary);
         }
@@ -153,13 +170,13 @@
   }
 
   div.column.categories {
-    @media all and (max-width: 600px) {
+    @media all and (width <= 600px) {
       margin-right: 0;
     }
-    @media all and (min-width: 600px) {
+    @media all and (width >= 600px) {
       margin-right: 1em;
     }
-    @media all and (min-width: 700px) {
+    @media all and (width >= 700px) {
       margin-right: 2em;
     }
   }
diff --git a/app/assets/stylesheets/desktop/components/more-topics.scss b/app/assets/stylesheets/desktop/components/more-topics.scss
index c0ed751c592..0fafcb6e30a 100644
--- a/app/assets/stylesheets/desktop/components/more-topics.scss
+++ b/app/assets/stylesheets/desktop/components/more-topics.scss
@@ -1,8 +1,10 @@
 .more-topics__container {
   .nav {
     position: absolute;
+
     li {
       margin-right: 0;
+
       .btn {
         font-size: var(--font-0);
         line-height: var(--line-height-large);
@@ -10,6 +12,7 @@
       }
     }
   }
+
   .more-topics__lists:not(.single-list) {
     .topic-list-header .default {
       visibility: hidden;
diff --git a/app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss b/app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss
index f7bc82c6122..f1f9ece5593 100644
--- a/app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss
+++ b/app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss
@@ -1,9 +1,11 @@
 .sidebar-section-wrapper {
   padding-block: 0.35rem;
   border-bottom: 1px solid var(--d-sidebar-border-color);
+
   &:first-child {
     padding-top: 0;
   }
+
   &[data-section-name="user-threads"] {
     padding-bottom: 0;
   }
diff --git a/app/assets/stylesheets/desktop/components/user-card.scss b/app/assets/stylesheets/desktop/components/user-card.scss
index 5149f1889f9..356799bd340 100644
--- a/app/assets/stylesheets/desktop/components/user-card.scss
+++ b/app/assets/stylesheets/desktop/components/user-card.scss
@@ -6,12 +6,15 @@
     .names {
       flex: 1 1 auto;
     }
+
     .usercard-controls {
       max-width: 225px;
+
       button {
         min-width: 150px;
       }
     }
+
     .user-profile-link {
       &:focus-visible {
         border: 1px solid;
@@ -19,6 +22,7 @@
       }
     }
   }
+
   .names__primary {
     .d-icon {
       font-size: var(--font-down-1);
@@ -30,12 +34,15 @@
     // at 200% - 400% zoom levels
     --avatar-width: 4em;
     --avatar-margin: 0;
+
     .names__primary {
       font-size: var(--font-up-2);
     }
+
     .first-row {
       gap: 0.5em 0;
       flex-wrap: wrap;
+
       .usercard-controls {
         max-width: unset;
         width: 100%;
@@ -43,8 +50,10 @@
         flex-wrap: wrap;
         gap: 0 0.5em;
       }
+
       li {
         flex: 1 1 0;
+
         &:empty {
           display: none;
         }
@@ -61,6 +70,7 @@
       display: block;
       max-width: 185px;
     }
+
     .more-user-badges {
       max-width: 125px;
     }
diff --git a/app/assets/stylesheets/desktop/components/user-info.scss b/app/assets/stylesheets/desktop/components/user-info.scss
index 054f5816c14..5a45f38189e 100644
--- a/app/assets/stylesheets/desktop/components/user-info.scss
+++ b/app/assets/stylesheets/desktop/components/user-info.scss
@@ -1,6 +1,7 @@
 .user-info {
   &.medium {
     display: flex;
+
     .user-image {
       width: 55px;
       margin-right: 0;
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index e5285aeb419..dd1a0db7e7e 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -24,14 +24,17 @@
       .title-and-category {
         flex-wrap: nowrap;
         gap: 0.5em;
+
         .tags-input {
           max-width: 50%;
           flex: 1 1 auto;
         }
       }
+
       .title-input {
         max-width: 50%;
         min-width: 0;
+
         input {
           min-width: 0;
         }
@@ -42,6 +45,7 @@
     .users-input {
       width: 100%;
       flex: 0 0 auto;
+
       &.can-warn {
         // space for warning, inverse of mini-tag-chooser width
         width: 60%;
@@ -51,6 +55,7 @@
     .add-warning {
       flex: 1 1 auto;
       overflow: hidden;
+
       span {
         // protects the space of the user input in case there's a very long translation
         @include ellipsis;
@@ -71,7 +76,7 @@
     padding: 4px 0;
     background: var(--tertiary);
 
-    &:before {
+    &::before {
       content: "";
       display: block;
       width: 24px;
@@ -122,9 +127,11 @@
   &.get-a-room {
     bottom: unset;
     padding: 2.25em 6em 2.5em 2.25em;
+
     p {
       font-size: var(--font-up-1);
     }
+
     button:not(.close) {
       margin-top: 0.5em;
     }
@@ -142,15 +149,18 @@
     top: 0;
     color: var(--primary-medium);
     font-size: var(--font-0);
+
     .d-icon {
-      color: currentColor;
+      color: currentcolor;
       font-size: var(--font-up-1);
       margin: 0 0 0 0.25em;
     }
+
     .discourse-no-touch & {
       &:active,
       &:focus {
         background: transparent;
+
         .d-icon {
           color: var(--primary);
         }
@@ -161,6 +171,7 @@
   ul {
     margin: 0;
     padding: 0 0 0 1.5em;
+
     &.list,
     &.topics {
       list-style: none;
@@ -182,6 +193,7 @@
 
 .custom-body {
   background-color: var(--tertiary-low);
+
   p {
     max-width: 98%;
   }
@@ -206,19 +218,24 @@
     flex: 0 1 auto;
     margin-right: 0.5em;
   }
+
   span.badge-wrapper {
     margin-left: 0;
   }
+
   .blurb {
     color: var(--primary-high);
   }
+
   .topic-title,
   .blurb {
     margin-bottom: 0.5em;
+
     .d-icon {
       color: var(--primary-high);
     }
   }
+
   span.topic {
     display: flex;
     flex-direction: column;
@@ -246,6 +263,7 @@
 
 a.toggle-preview {
   color: var(--primary-high);
+
   &:hover {
     color: var(--tertiary);
   }
@@ -288,18 +306,22 @@ a.toggle-preview {
       .d-editor-textarea-wrapper {
         border: none;
       }
+
       &.show-preview .d-editor-textarea-wrapper {
         border-right: 1px solid var(--primary-low);
       }
+
       #draft-status,
       #file-uploading {
         margin-left: 0;
         text-align: initial;
       }
+
       .composer-popup {
         top: 30px;
       }
-      &:before {
+
+      &::before {
         content: "";
         background: var(--secondary);
         width: 100%;
@@ -324,6 +346,7 @@ a.toggle-preview {
   left: 50%;
   top: 10%;
   transform: translate(-50%, 0);
+
   .rtl & {
     // R2 is not smart enough to support this swap
     transform: translate(50%, 0);
@@ -334,6 +357,7 @@ a.toggle-preview {
   padding: 0.5em 0.75em;
   pointer-events: none;
   border-radius: 2px;
+
   kbd {
     background: none;
   }
@@ -345,6 +369,7 @@ a.toggle-preview {
       height: auto;
     }
   }
+
   #reply-control:not(.fullscreen) {
     .has-sidebar-page & {
       width: auto;
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 3d6e860d5d1..dcb4d01c1f7 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -2,7 +2,6 @@
 // global styles that apply to the Discourse application specifically
 // BEWARE: changing these styles implies they take effect anywhere they are seen
 // throughout the Discourse application
-
 :root {
   --d-max-width: 1110px;
 }
@@ -25,6 +24,7 @@ body.dragging {
   .control-group {
     margin-bottom: 1.25em;
   }
+
   .controls:not(.controls-dropdown) + .controls {
     margin-top: 0.5em;
   }
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 3a6baa2cf04..b9ea191e567 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -1,12 +1,13 @@
 // --------------------------------------------------
 // Discourse header
 // --------------------------------------------------
-
 .d-header {
   height: 4em;
+
   #site-text-logo {
     font-size: var(--font-up-3);
   }
+
   .extra-info {
     &:not(.two-rows) {
       .header-title {
@@ -32,6 +33,7 @@
   word-wrap: break-word;
   font-size: var(--font-down-2);
   line-height: var(--line-height-large);
+
   .search-highlight {
     color: var(--primary-high-or-secondary-low);
   }
diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss
index 2672450beab..a9bd3888d4c 100644
--- a/app/assets/stylesheets/desktop/latest-topic-list.scss
+++ b/app/assets/stylesheets/desktop/latest-topic-list.scss
@@ -23,33 +23,37 @@
   padding: 1em;
   border-bottom: 1px solid var(--primary-low);
   display: flex;
-
   align-items: center;
 
   .topic-poster {
     position: relative;
     width: 60px;
+
     .avatar-flair {
       position: absolute;
       bottom: 0;
       right: 10px;
     }
   }
+
   .main-link {
     @extend .topic-list-main-link;
     flex: 0 1 auto;
     max-width: 65%;
     font-size: var(--font-0);
+
     .top-row {
       margin-bottom: 0.1em;
       font-size: var(--font-up-1);
     }
+
     .bottom-row {
       display: flex;
       flex-wrap: wrap;
       gap: 0 0.5em;
     }
   }
+
   .topic-stats {
     flex: 1 0 0px;
     text-align: right;
diff --git a/app/assets/stylesheets/desktop/login-signup-page.scss b/app/assets/stylesheets/desktop/login-signup-page.scss
index 92bc881656a..dea014563a9 100644
--- a/app/assets/stylesheets/desktop/login-signup-page.scss
+++ b/app/assets/stylesheets/desktop/login-signup-page.scss
@@ -1,5 +1,4 @@
 // Shared styles
-
 .login-fullpage,
 .signup-fullpage,
 .invites-show {
@@ -20,12 +19,14 @@
         width: 100%;
       }
     }
+
     &__existing-account,
     &__no-account-yet {
       font-size: var(--font-down-1);
       margin-bottom: 0.5rem;
       text-align: center;
       width: 100%;
+
       &::before {
         content: " ";
         display: block;
@@ -35,6 +36,7 @@
         margin-block: 1rem;
       }
     }
+
     &__disclaimer {
       font-size: var(--font-down-1);
       margin-bottom: 0.5rem;
@@ -45,26 +47,30 @@
     height: 100%;
   }
 
-  @media screen and (max-width: 767px) {
+  @media screen and (width <= 767px) {
     // important to maintain narrow desktop widths
     // for auth modals in Discourse Hub on iPad
     .has-alt-auth {
       flex-direction: column;
       overflow: auto;
       gap: 0;
+
       .login-page-cta,
       .signup-page-cta,
       .btn-social {
         font-size: var(--font-down-1);
       }
+
       .login-left-side {
         overflow: unset;
         padding: 1em;
         max-width: unset;
       }
+
       .login-right-side {
         padding: 1em;
         max-width: unset;
+
         &::before {
           height: 1px;
           width: calc(100% - 2em);
diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss
index f290dbae172..04831721b9b 100644
--- a/app/assets/stylesheets/desktop/menu-panel.scss
+++ b/app/assets/stylesheets/desktop/menu-panel.scss
@@ -11,11 +11,11 @@
 }
 
 // Sidebar-hamburger hybrid
-
 .hamburger-panel .revamped {
   --d-sidebar-highlight-background: var(--d-hover);
   --d-sidebar-row-horizontal-padding: 0.5rem;
   --d-sidebar-row-height: 30px;
+
   // 1.25rem gets text left-aligned with the hamburger icon
   --d-sidebar-row-horizontal-padding: 0.66rem;
   width: 360px;
@@ -41,16 +41,20 @@
 
     &.sidebar-section {
       padding-top: 0.5em;
+
       .sidebar-section-header-wrapper {
         margin: 0 0 0.5em;
         padding-bottom: 0.25em;
+
         .d-icon-globe {
           color: var(--primary-medium);
         }
       }
+
       .sidebar-section-content {
         display: grid;
         grid-template-columns: 1fr 1fr;
+
         li {
           min-width: 0;
         }
@@ -71,11 +75,13 @@
   .sidebar-footer-wrapper {
     padding: 0;
     margin-top: 1em;
+
     .sidebar-footer-container {
       padding: 0;
       border: none;
       background: var(--secondary);
-      &:before {
+
+      &::before {
         top: -1.5em;
         background: linear-gradient(
           to bottom,
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 77a183df7fe..2fd123fe38c 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -6,13 +6,16 @@ html.modal-open {
   --modal-max-width: 600px;
   --modal-width: 30em; // set in ems to scale with user font-size
   --modal-min-width: 400px;
+
   &__container {
     max-width: var(--modal-max-width);
     min-width: var(--modal-min-width);
     min-height: var(--modal-min-height); // unset, optional theme utility
+
     .d-modal.-large & {
       max-width: 800px;
     }
+
     .d-modal.-max & {
       max-width: 90vw;
     }
@@ -29,10 +32,12 @@ html.modal-open {
 .close {
   font-size: var(--font-up-3);
   text-decoration: none;
+
   &:visited {
     color: var(--primary-high);
   }
   cursor: pointer;
+
   &:hover {
     color: var(--primary);
   }
diff --git a/app/assets/stylesheets/desktop/post-action-feedback.scss b/app/assets/stylesheets/desktop/post-action-feedback.scss
index 2d32ebd70ae..6701a041e10 100644
--- a/app/assets/stylesheets/desktop/post-action-feedback.scss
+++ b/app/assets/stylesheets/desktop/post-action-feedback.scss
@@ -10,21 +10,25 @@
   opacity: 0;
   z-index: calc(z("timeline") + 1);
 }
+
 .--transition {
   .post-action-feedback-alert,
   .post-action-feedback-svg {
     transition: opacity 0.25s, color 0.25s;
   }
 }
+
 .--activated {
   .post-action-feedback-alert,
   .post-action-feedback-svg {
     opacity: 1;
   }
+
   .post-action-feedback-alert {
     &.-success {
       color: var(--success);
     }
+
     &.-fail {
       color: var(--danger);
     }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 2a538e54d24..ac996747872 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -4,17 +4,19 @@
 
 // Base list
 // --------------------------------------------------
-
 .topic-list-icons {
   .d-icon-thumbtack {
     color: var(--primary-med-or-secondary-med);
   }
+
   .d-icon-thumbtack.unpinned {
     color: var(--primary-med-or-secondary-med);
   }
+
   a.title {
     color: var(--primary);
   }
+
   .d-icon-bookmark {
     color: var(--primary-med-or-secondary-med);
   }
@@ -22,16 +24,19 @@
 
 .topic-list {
   @extend .topic-list-icons;
-
   margin: 0 0 10px;
+
   .topic-list-data {
     padding: 0.8em 0.33em;
+
     &:first-of-type {
       padding-left: 0.67em;
     }
+
     &:last-of-type {
       padding-right: 0.67em;
     }
+
     th & {
       border-bottom: 3px solid var(--primary-low);
     }
@@ -46,11 +51,13 @@
   .topic-list-data.bulk-select {
     padding: 0;
     width: 30px;
+
     label {
-      margin: 0px;
+      margin: 0;
       padding: 0.8em 0.67em 1.1em 0.67em;
       cursor: pointer;
     }
+
     + .main-link {
       padding-left: 0;
     }
@@ -63,8 +70,9 @@
     padding-left: 0.5em;
     padding-right: 0.5em;
     position: relative;
+
     &.active {
-      @include nav-active();
+      @include nav-active;
     }
   }
 
@@ -75,9 +83,11 @@
     // we know there are up to 5 avatars of fixed size
     // will be overridden by media width queries on narrow displays to 1 avatar's width
     width: 146px;
+
     > a {
       float: left;
       margin-right: 4px;
+
       &:last-of-type {
         margin-right: 0;
       }
@@ -90,9 +100,11 @@
       }
     }
   }
+
   .topic-list-data.posters {
     height: $td-posters-height;
   }
+
   .posters a:first-child .avatar.latest:not(.single) {
     box-shadow: 0 0 3px 1px rgba(var(--tertiary-rgb), 0.35);
     border: 1px solid rgba(var(--tertiary-rgb), 0.5);
@@ -103,9 +115,11 @@
   .likes {
     width: 4.3em;
   }
+
   .views {
     width: 4.3em;
   }
+
   .posts {
     width: 4.3em;
   }
@@ -117,24 +131,30 @@
     text-align: left;
     font-size: var(--font-down-1);
     margin-top: 5px;
+
     .fa {
       margin-right: 2px;
     }
+
     a {
       color: var(--primary-med-or-secondary-med);
       margin-right: 3px;
       line-height: var(--line-height-large);
     }
   }
+
   .activity {
     width: 4em;
+
     &:lang(zh_CN) {
       width: 5.3em;
     }
   }
+
   .age {
     width: 4em;
   }
+
   .with-year {
     white-space: nowrap;
   }
@@ -142,11 +162,14 @@
 
 .topic-list-bottom {
   margin: 1.25em 0;
+
   .dismiss-container-bottom {
     float: right;
   }
+
   .--no-topics-education + & {
     margin: 0;
+
     .footer-message {
       padding-top: 4em;
     }
@@ -155,7 +178,6 @@
 
 // Misc. stuff
 // --------------------------------------------------
-
 #list-area .top-lists {
   h2 {
     cursor: pointer;
@@ -195,6 +217,7 @@
 .bulk-select-topics {
   display: inline-flex;
   margin-left: -5px;
+
   .btn {
     margin-right: 0.5em;
   }
@@ -228,25 +251,31 @@
     .views {
       display: none;
     }
+
     // reduce width for more title space
     .posts {
       width: 3em;
     }
+
     .posters {
       width: 2em;
       text-align: center;
     }
+
     // show only the first poster
     .topic-list-data.posters {
       a:first-child .avatar.latest:not(.single) {
-        top: 0px;
-        left: 0px;
+        top: 0;
+        left: 0;
       }
+
       a:not(.latest) {
         display: none;
       }
+
       a.latest {
         width: 100%;
+
         img {
           margin: 0 auto;
         }
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 8b5409ead07..67b318b3979 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -135,7 +135,6 @@ nav.post-controls {
     .topic-post & {
       margin-right: 0.5em;
     }
-
     white-space: nowrap;
 
     .d-icon {
@@ -146,7 +145,7 @@ nav.post-controls {
     &[aria-expanded="true"] {
       background: var(--primary-low);
       color: var(--primary-high);
-      box-shadow: 0px 0px 0px 1px var(--primary-300);
+      box-shadow: 0 0 0 1px var(--primary-300);
       z-index: 1;
 
       .d-icon {
@@ -189,7 +188,6 @@ pre.codeblock-buttons:hover {
   h3 {
     margin: 10px 0;
   }
-
   border: 1px solid var(--primary-low);
 
   .topic-body {
@@ -219,8 +217,9 @@ pre.codeblock-buttons:hover {
     border: 1px solid var(--primary-low);
     padding: 6px 9px 8px;
     z-index: 99; // Needs to be higher than topic-avatar
+
     .d-icon {
-      color: currentColor;
+      color: currentcolor;
     }
 
     .discourse-no-touch & {
@@ -229,7 +228,7 @@ pre.codeblock-buttons:hover {
         color: var(--primary-high);
 
         .d-icon {
-          color: currentColor;
+          color: currentcolor;
         }
       }
     }
@@ -250,7 +249,7 @@ pre.codeblock-buttons:hover {
 
         .row {
           // Main reply line
-          &:before {
+          &::before {
             content: "";
             position: absolute;
             top: -22px;
@@ -264,8 +263,9 @@ pre.codeblock-buttons:hover {
 
       .row {
         padding-bottom: 0.5em;
+
         // Main reply line
-        &:before {
+        &::before {
           content: "";
           position: absolute;
           top: -22px;
@@ -367,18 +367,18 @@ pre.codeblock-buttons:hover {
 
   // top means "in reply to expansion" above a post
   &.top {
-    margin-left: 0px;
+    margin-left: 0;
     border: none;
 
     .collapse-down {
       transform: translate(17%, 230%);
       z-index: 1;
     }
-
     width: calc(
       var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
         var(--topic-avatar-width) - (var(--topic-avatar-width) + 2px)
     ); // 2px accounts for left and right borders
+
     .row {
       .topic-body,
       .topic-avatar {
@@ -480,6 +480,7 @@ video {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -510,7 +511,6 @@ video {
 }
 
 /* solo quotes */
-
 blockquote {
   /* leave browser defaults for top and bottom here */
   margin-left: 0;
@@ -519,7 +519,6 @@ blockquote {
 }
 
 /* quotes with attribution */
-
 .quote {
   & > blockquote {
     .onebox-result {
@@ -606,7 +605,6 @@ blockquote {
 }
 
 /* hide the reply border above the time gap notices */
-
 .time-gap + .topic-post .topic-body,
 .time-gap + .topic-post .topic-avatar {
   border-top: none;
@@ -687,9 +685,10 @@ blockquote {
   }
 }
 
-a.attachment:before {
+a.attachment::before {
   display: inline-block;
   margin-right: 4px;
+
   // ideally, the SVG used here should be in HTML and reference the SVG sprite
   content: svg-uri(
     '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 512 512" fill="#{$tertiary}"><path d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg>'
@@ -705,7 +704,7 @@ a.attachment:before {
     align-items: center;
   }
 
-  &:after {
+  &::after {
     visibility: hidden;
     display: block;
     font-size: 0;
@@ -751,17 +750,20 @@ span.highlighted {
 
 /* Tablet (portrait) ----------- */
 
-@media all and (max-width: 790px) {
+@media all and (width <= 790px) {
   .topic-avatar {
     width: 45px;
   }
+
   .topic-post .reply-to-tab {
     right: 15%;
   }
+
   .topic-body {
     box-sizing: border-box;
     width: calc(100% - 47px); //100% - [width of .topic-avatar + 2px]
   }
+
   .embedded-posts {
     // top means "in reply to expansion" above a post
     &.top {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 557e42faa66..c9e8c99de58 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -3,6 +3,7 @@
   clear: both;
   text-align: right;
   margin-bottom: 10px;
+
   .post-action {
     display: inline-block;
     margin-left: 10px;
@@ -23,6 +24,7 @@
     line-height: var(--line-height-medium);
     overflow-wrap: break-word;
     width: 100%;
+
     a {
       color: var(--primary);
     }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 17b04db9d91..065db52d402 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -1,5 +1,4 @@
 // Desktop styles for "/user" section
-
 .user-profile-hidden {
   font-size: 1.5em;
   text-align: center;
@@ -10,6 +9,7 @@
 
   .combo-box {
     width: 100%;
+
     &:not(:last-of-type) {
       margin-bottom: 0.875em;
     }
@@ -21,10 +21,12 @@
 
     li {
       border-bottom: none;
+
       &:hover,
       &.active {
         background: var(--primary-very-low);
       }
+
       &.archive {
         padding-left: 1.4em;
       }
@@ -73,7 +75,7 @@
 }
 
 .invite-controls .btn {
-  margin-right: 0px;
+  margin-right: 0;
 }
 
 table.user-invite-list {
@@ -131,6 +133,7 @@ table.user-invite-list {
       .user-profile-image {
         height: 300px;
       }
+
       .details {
         box-sizing: border-box;
         width: 100%;
@@ -153,6 +156,7 @@ table.user-invite-list {
       .user-profile-image {
         display: none;
       }
+
       .controls {
         display: flex;
         max-width: unset;
diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss
index a35d436eab5..d5eedf31d0c 100644
--- a/app/assets/stylesheets/embed.scss
+++ b/app/assets/stylesheets/embed.scss
@@ -19,6 +19,7 @@ article.post {
   .quote .title {
     border-left: 5px solid var(--primary-very-low);
     padding: 10px 10px 0 12px;
+
     .avatar {
       margin-right: 7px;
     }
@@ -33,9 +34,11 @@ article.post {
     padding: 10px 8px 10px 13px;
     margin: 0 0 10px 0;
     border-left: 5px solid var(--primary-very-low);
+
     p {
       margin: 0 0 10px 0;
     }
+
     p:last-of-type {
       margin-bottom: 0;
     }
@@ -67,10 +70,12 @@ article.post {
     pre {
       white-space: pre-wrap;
     }
+
     img {
       max-width: 100%;
       height: auto;
     }
+
     p {
       margin: 0 0 1em 0;
     }
@@ -93,6 +98,7 @@ article.post {
   a {
     color: var(--primary-high);
   }
+
   a.staff {
     background-color: var(--highlight-bg);
   }
@@ -135,7 +141,6 @@ header.discourse {
   padding-bottom: 8px;
   font-size: var(--font-up-2);
   border-bottom: 3px solid var(--primary-low);
-
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -154,6 +159,7 @@ header.discourse {
 footer {
   font-size: var(--font-up-2);
   margin-top: 0.5em;
+
   .button {
     color: white;
     padding: 6px 8px;
@@ -174,6 +180,7 @@ footer {
 // which we will now clean up
 aside.onebox {
   margin-bottom: 20px;
+
   p {
     margin-bottom: 0 !important;
   }
diff --git a/app/assets/stylesheets/ember_cli.scss b/app/assets/stylesheets/ember_cli.scss
index 175fe19cf75..abcf60a4b11 100644
--- a/app/assets/stylesheets/ember_cli.scss
+++ b/app/assets/stylesheets/ember_cli.scss
@@ -10,7 +10,6 @@ pre {
 
 pre,
 code {
-  padding: 0;
   margin: 0;
   padding: 0.5rem;
 }
diff --git a/app/assets/stylesheets/mobile/admin_badges.scss b/app/assets/stylesheets/mobile/admin_badges.scss
index 3dfff599d31..cc7ac95beb7 100644
--- a/app/assets/stylesheets/mobile/admin_badges.scss
+++ b/app/assets/stylesheets/mobile/admin_badges.scss
@@ -2,25 +2,31 @@
   .admin-badges {
     .badges {
       margin: 0 0.25em;
+
       .content-list {
         flex: 0 0 100%;
         width: 100%;
+
         .admin-badge-list {
           max-height: 40vh;
           margin-right: 0;
         }
       }
     }
+
     .badge-intro {
       flex: 0 1 75%;
     }
+
     .current-badge {
       margin: 20px 0;
       width: 100%;
+
       textarea {
         width: 100%;
       }
     }
+
     input[type="text"] {
       width: 100%;
     }
@@ -30,6 +36,7 @@
     .d-button-label {
       display: none;
     }
+
     .d-icon {
       margin-right: 0;
     }
diff --git a/app/assets/stylesheets/mobile/admin_customize.scss b/app/assets/stylesheets/mobile/admin_customize.scss
index 08a0cce3a17..626dfc1c4a2 100644
--- a/app/assets/stylesheets/mobile/admin_customize.scss
+++ b/app/assets/stylesheets/mobile/admin_customize.scss
@@ -26,6 +26,7 @@ body .admin-customize {
     h1 input {
       width: 100%;
     }
+
     .copy-to-clipboard {
       display: none;
     }
@@ -42,6 +43,7 @@ body .admin-customize {
     td {
       vertical-align: top;
     }
+
     td.actions {
       width: 40px;
     }
diff --git a/app/assets/stylesheets/mobile/components/_index.scss b/app/assets/stylesheets/mobile/components/_index.scss
index 133fb5db2e6..9561ddad5c8 100644
--- a/app/assets/stylesheets/mobile/components/_index.scss
+++ b/app/assets/stylesheets/mobile/components/_index.scss
@@ -1,9 +1,6 @@
-@import "bookmark-menu";
-@import "more-topics";
 @import "topic-map";
 @import "user-card";
 @import "user-stream-item";
 @import "welcome-header";
 @import "more-topics";
-@import "bookmark-menu";
 @import "emoji-picker";
diff --git a/app/assets/stylesheets/mobile/components/bookmark-menu.scss b/app/assets/stylesheets/mobile/components/bookmark-menu.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/app/assets/stylesheets/mobile/components/more-topics.scss b/app/assets/stylesheets/mobile/components/more-topics.scss
index b9b5d0901b4..25af96fc3b0 100644
--- a/app/assets/stylesheets/mobile/components/more-topics.scss
+++ b/app/assets/stylesheets/mobile/components/more-topics.scss
@@ -12,6 +12,7 @@
       font-size: var(--font-down-1);
       vertical-align: top;
     }
+
     .suggested-topics-message {
       margin-top: 1em;
     }
diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss
index d80b9727b7e..ab4550d4d49 100644
--- a/app/assets/stylesheets/mobile/components/user-card.scss
+++ b/app/assets/stylesheets/mobile/components/user-card.scss
@@ -9,30 +9,38 @@
   margin: 0;
   max-height: 85vh; // 2.5vh margin-top and margin-bottom. 10vh top
   box-sizing: border-box;
+
   // avatar - names - controls
   .first-row {
     flex-wrap: wrap;
+
     .names {
       flex: 1 1 0;
       box-sizing: border-box;
     }
+
     .user-card-avatar {
       flex: 0 0 auto;
     }
+
     .usercard-controls {
       width: 100%; // always wraps to next line
       display: flex;
       flex-wrap: wrap;
       margin-top: 1em;
       gap: 0.5em;
+
       li {
         flex: 1 0 45%;
         min-width: 8em;
+
         &:empty {
           display: none;
         }
+
         button {
           margin: 0;
+
           .d-button-label {
             @include ellipsis;
           }
@@ -40,15 +48,19 @@
       }
     }
   }
+
   .names__primary {
     font-size: var(--font-up-3);
+
     .d-icon {
       font-size: var(--font-down-2);
     }
   }
+
   .names__secondary {
     font-size: var(--font-0);
   }
+
   .user-status {
     font-size: var(--font-down-1);
   }
@@ -61,6 +73,7 @@
     display: flex;
     align-items: flex-start;
     flex-wrap: wrap;
+
     .user-card-badge-link,
     .more-user-badges {
       display: flex;
@@ -68,18 +81,22 @@
       max-width: 50%; // for text ellipsis
       padding: 2px 0;
       box-sizing: border-box;
+
       &:nth-child(odd) {
         padding-right: 4px;
       }
+
       a {
         width: 100%;
         display: flex;
       }
     }
+
     .user-badge {
       display: flex;
       margin: 0;
       width: 100%;
+
       .badge-display-name {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -88,11 +105,12 @@
   }
 
   .public-user-fields {
-    @media screen and (max-height: 550px) {
+    @media screen and (height <= 550px) {
       max-height: 12vh;
     }
     max-height: 40vh;
     overflow-y: auto;
+
     .public-user-field {
       @include line-clamp(3);
     }
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 45b110bb039..0bee0087b57 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -79,6 +79,7 @@
 
     .create {
       max-width: 50vw;
+
       span {
         @include ellipsis;
       }
@@ -92,6 +93,7 @@
       #file-uploading {
         margin-left: 6px;
       }
+
       .cancel {
         font-size: 1.4em;
         color: var(--primary-low-mid);
@@ -99,11 +101,13 @@
         padding: 3px 6px;
       }
     }
+
     .mobile-file-upload:not(.hidden),
     .mobile-preview {
       // Alignment fix, remove if converted to buttons
       display: inline-flex;
     }
+
     .mobile-file-upload {
       &.hidden + .mobile-preview {
         // Hide preview button while file is uploading to make room for upload progress
@@ -121,6 +125,7 @@
       padding-top: 10px;
       z-index: z("fullscreen") + 1;
       background-color: var(--secondary);
+
       .cancel,
       .mobile-file-upload,
       .mobile-preview {
@@ -141,6 +146,7 @@
       margin: 0;
       padding: 10px;
       overflow: auto;
+
       .d-editor-preview {
         margin-bottom: 40px;
       }
@@ -172,6 +178,7 @@
   .title-and-category,
   .user-selector {
     margin: 0;
+
     .users-input {
       margin-bottom: 6px;
     }
diff --git a/app/assets/stylesheets/mobile/dashboard.scss b/app/assets/stylesheets/mobile/dashboard.scss
index f7143d41355..97131bf4d72 100644
--- a/app/assets/stylesheets/mobile/dashboard.scss
+++ b/app/assets/stylesheets/mobile/dashboard.scss
@@ -2,22 +2,25 @@
   .activity-metrics .counters-list {
     font-size: var(--font-down-1);
   }
+
   .navigation a.navigation-link {
     padding: 0.4em;
     font-size: var(--font-down-1);
+
     .emoji {
       width: 1.3em;
       height: 1.3em;
       margin-right: 0;
     }
   }
+
   .dashboard-new-features .section-body {
     grid-template-columns: none;
   }
 
   .admin-new-feature-item {
     &__new-feature-emoji {
-      padding-left: 0em;
+      padding-left: 0;
     }
   }
 }
@@ -26,6 +29,7 @@
   h3 {
     margin-right: 0.5em;
   }
+
   &__new-feature-version {
     font-size: var(--font-down-1);
   }
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index df3b7ae2387..63b560ad645 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -4,7 +4,6 @@
 // throughout the Discourse application
 
 // Base Elements
-
 body {
   background-color: var(--secondary);
 }
@@ -53,6 +52,7 @@ blockquote {
 
   a {
     color: var(--primary);
+
     .d-icon {
       margin-right: 0.25em;
       color: var(--primary-medium);
@@ -65,6 +65,7 @@ blockquote {
     @include form-item-sizing;
     border-color: var(--primary-medium);
     max-width: 100%;
+
     .selection {
       @include ellipsis;
       max-width: 120px;
@@ -80,6 +81,7 @@ blockquote {
 
   .drop {
     display: none;
+
     &.expanded {
       left: 0;
       display: block;
@@ -115,7 +117,6 @@ blockquote {
 }
 
 // Special elements
-
 #main-outlet-wrapper {
   margin-left: unset;
   margin-right: unset;
@@ -123,7 +124,8 @@ blockquote {
 
 #main-outlet {
   padding-top: 1.25em;
-  &:after {
+
+  &::after {
     // setup overlay for sidebar
     content: "";
     opacity: 0;
diff --git a/app/assets/stylesheets/mobile/edit-category.scss b/app/assets/stylesheets/mobile/edit-category.scss
index 58e9f1b1407..f4f7988da0b 100644
--- a/app/assets/stylesheets/mobile/edit-category.scss
+++ b/app/assets/stylesheets/mobile/edit-category.scss
@@ -9,7 +9,8 @@ div.edit-category {
     border-bottom: 1px solid var(--primary-low);
     margin: 0.5em 0;
     overflow: hidden;
-    &:after {
+
+    &::after {
       background: linear-gradient(
         to right,
         rgba(var(--secondary-rgb), 0),
@@ -17,7 +18,7 @@ div.edit-category {
       );
       content: "";
       position: absolute;
-      right: 0px;
+      right: 0;
       height: 100%;
       width: 30px;
     }
@@ -30,10 +31,12 @@ div.edit-category {
     display: inline-flex;
     width: 100%;
     margin-bottom: 0;
+
     li {
       font-size: var(--font-down-1);
       border-bottom: none;
     }
+
     a.active::after {
       display: none;
     }
diff --git a/app/assets/stylesheets/mobile/form-kit/_control-menu.scss b/app/assets/stylesheets/mobile/form-kit/_control-menu.scss
index 6277b24c5db..e2e89e67f45 100644
--- a/app/assets/stylesheets/mobile/form-kit/_control-menu.scss
+++ b/app/assets/stylesheets/mobile/form-kit/_control-menu.scss
@@ -12,6 +12,7 @@
         background: rgba(0, 0, 0, 0);
       }
     }
+
     &:last-of-type .btn {
       color: var(--tertiary);
     }
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 5f1d5d71065..e56ad0ced9a 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -1,7 +1,6 @@
 // --------------------------------------------------
 // Discourse header
 // --------------------------------------------------
-
 .d-header {
   height: 3.66em;
 
@@ -12,26 +11,32 @@
   #site-text-logo {
     font-size: var(--font-up-1);
   }
+
   .extra-info-wrapper {
     .extra-info {
       // header title should not be centered if there's no tags / categories
       &:not(.two-rows) {
         min-height: 2.25em;
       }
+
       .header-title {
         font-size: var(--font-0);
+
         // the margin-bottom here is fragile, changing it can cause tag alignment issues
         margin: 0 0 0.35em 0;
+
         .archetype-private_message & {
           // PMs might have participant avatars in the header
           margin: 0 0 0.15em 0;
         }
       }
+
       .private-message-glyph-wrapper {
         float: left;
       }
     }
   }
+
   button.sign-up-button {
     display: none;
   }
@@ -44,6 +49,7 @@
       display: none;
     }
   }
+
   // Fade in header avatar + icons if topic title is not visible in mobile header
   .panel .icons {
     animation: fadein 0.5s;
@@ -51,6 +57,7 @@
       animation-duration: 0s;
     }
   }
+
   // A rendering bug in safari causes header SVGs to jitter after animations.
   // translateZ() forces gpu rendering which fixes the issue.
   .d-header-icons {
@@ -62,8 +69,9 @@
   .d-icon {
     line-height: var(--line-height-medium);
   }
+
   .active .icon {
-    &:after {
+    &::after {
       margin-top: -1px;
     }
   }
diff --git a/app/assets/stylesheets/mobile/list-controls.scss b/app/assets/stylesheets/mobile/list-controls.scss
index cf5dd406fbe..07412eb9ff2 100644
--- a/app/assets/stylesheets/mobile/list-controls.scss
+++ b/app/assets/stylesheets/mobile/list-controls.scss
@@ -3,6 +3,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+
     #create-topic {
       box-sizing: border-box;
       display: flex;
@@ -40,9 +41,11 @@
         margin-left: 0.5em;
       }
     }
+
     > li {
       margin-right: 0;
     }
+
     > li > a {
       line-height: var(--line-height-large);
       display: flex;
diff --git a/app/assets/stylesheets/mobile/login-modal.scss b/app/assets/stylesheets/mobile/login-modal.scss
index 2259e689691..18059665175 100644
--- a/app/assets/stylesheets/mobile/login-modal.scss
+++ b/app/assets/stylesheets/mobile/login-modal.scss
@@ -3,10 +3,12 @@
   #main-outlet {
     padding: 0;
   }
+
   .contents.body-page {
     margin: 0;
   }
 }
+
 .login-welcome {
   gap: 2em;
   height: 100svh;
@@ -28,12 +30,14 @@
 .d-modal.login-modal,
 .d-modal.create-account {
   padding-bottom: var(--safe-area-inset-bottom);
+
   .d-modal {
     &__container {
       height: 100svh;
       max-height: unset;
       width: 100%;
     }
+
     &__body {
       flex-direction: column;
       gap: unset;
@@ -41,10 +45,12 @@
       padding-bottom: 1em;
       outline: none;
     }
+
     &__footer {
       padding: 1em 1.5rem;
       border-top: 1px solid var(--primary-low);
     }
+
     &__footer-buttons {
       gap: 0.5em;
     }
@@ -113,6 +119,7 @@
         margin-bottom: 0.5rem;
       }
     }
+
     &__signup {
       background: none !important;
       font-size: var(--font-down);
@@ -127,6 +134,7 @@
         margin-bottom: 0.5rem;
       }
     }
+
     &__login {
       background: none !important;
       font-size: var(--font-down);
@@ -169,16 +177,20 @@
       &:not(:last-child) {
         margin-bottom: 0.75em;
       }
+
       input:focus + label,
       input.value-entered + label.alt-placeholder {
         top: -10px;
       }
+
       input.alt-placeholder:invalid {
         color: var(--primary);
       }
+
       label.more-info {
         color: var(--primary-medium);
       }
+
       .more-info,
       .tip,
       .instructions {
@@ -190,6 +202,7 @@
       display: contents;
     }
   }
+
   .caps-lock-warning {
     display: none;
   }
@@ -206,6 +219,7 @@
       .user-field.text label.control-label {
         top: 11px;
       }
+
       div.user-field:not(.dropdown)
         .controls
         input:focus
@@ -215,6 +229,7 @@
         label.alt-placeholder.control-label {
         top: -10px;
       }
+
       .user-field.dropdown label.control-label,
       .user-field.multiselect label.control-label {
         top: -10px;
@@ -262,6 +277,7 @@
     flex-direction: column;
     flex-grow: 1;
     align-items: center;
+
     .tada-image {
       margin: 0;
     }
diff --git a/app/assets/stylesheets/mobile/login-signup-page.scss b/app/assets/stylesheets/mobile/login-signup-page.scss
index c946eea03c6..11d92fc9ab9 100644
--- a/app/assets/stylesheets/mobile/login-signup-page.scss
+++ b/app/assets/stylesheets/mobile/login-signup-page.scss
@@ -1,5 +1,4 @@
 // Shared styles
-
 .login-page,
 .signup-page,
 .invite-page {
@@ -57,7 +56,6 @@
         height: 2.5em;
         margin-bottom: 0.25em;
       }
-
       margin-bottom: 1em;
 
       input:focus + label,
@@ -83,6 +81,7 @@
       .user-field.text label.control-label {
         top: 11px;
       }
+
       div.user-field:not(.dropdown)
         .controls
         input:focus
@@ -92,6 +91,7 @@
         label.alt-placeholder.control-label {
         top: -10px;
       }
+
       .user-field.dropdown label.control-label,
       .user-field.multiselect label.control-label {
         top: -10px;
@@ -157,13 +157,13 @@
   .login-welcome-header {
     padding-inline: 0;
   }
+
   .signup-progress-bar {
     margin-inline: 0;
   }
 }
 
 // Login page
-
 .login-fullpage .login-body {
   .login-page-cta {
     &__buttons {
@@ -172,11 +172,13 @@
         margin-bottom: 0.5rem;
       }
     }
+
     &__signup {
       background: none !important;
       font-size: var(--font-up-1);
       padding: 0;
     }
+
     &__no-account-yet {
       font-size: var(--font-up-1);
     }
@@ -184,7 +186,6 @@
 }
 
 // Signup page
-
 .signup-fullpage .signup-body {
   .signup-page-cta {
     &__buttons {
@@ -193,11 +194,13 @@
         margin-bottom: 0.5rem;
       }
     }
+
     &__login {
       background: none !important;
       font-size: var(--font-up-1);
       padding: 0;
     }
+
     &__existing-account {
       font-size: var(--font-up-1);
     }
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index 014635ec3d3..1ddfb50e97e 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -1,7 +1,6 @@
 .panel-body-contents {
   // 2em padding very useful for iOS Safari's overlayed bottom nav
   // padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
-
   .user-menu.revamped & {
     height: 100%;
 
@@ -47,7 +46,7 @@
   }
 
   .sidebar-footer-container {
-    &:before {
+    &::before {
       background: linear-gradient(
         to bottom,
         rgba(var(--primary-very-low-rgb), 0),
diff --git a/app/assets/stylesheets/mobile/modal-overrides.scss b/app/assets/stylesheets/mobile/modal-overrides.scss
index 3c550539fc5..ea590693844 100644
--- a/app/assets/stylesheets/mobile/modal-overrides.scss
+++ b/app/assets/stylesheets/mobile/modal-overrides.scss
@@ -3,6 +3,7 @@
     flex-direction: column;
     gap: 0.5em;
   }
+
   .calendar-date-time-input {
     width: 100%;
     margin: 0 0 1rem 0;
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index f77964c6854..fa890c3aa5d 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -43,6 +43,7 @@ html:not(.keyboard-visible.mobile-view) {
       align-items: stretch;
     }
   }
+
   .ios-device & {
     &__footer {
       margin-top: auto;
@@ -66,12 +67,12 @@ html:not(.keyboard-visible.mobile-view) {
 }
 
 //legacy
-
 .modal {
   &.fade {
     transition: opacity 0.3s linear, top 0.3s ease-out;
     top: -25%;
   }
+
   &.fade.in {
     top: 50%;
   }
@@ -81,7 +82,7 @@ html:not(.keyboard-visible.mobile-view) {
   font-size: var(--font-up-4);
 }
 
-@media only screen and (max-device-width: 568px) {
+@media only screen and (device-width <= 568px) {
   .flag-modal-body .flag-message {
     height: 3em;
   }
diff --git a/app/assets/stylesheets/mobile/new-user.scss b/app/assets/stylesheets/mobile/new-user.scss
index e123d7b5493..24a6cbe7514 100644
--- a/app/assets/stylesheets/mobile/new-user.scss
+++ b/app/assets/stylesheets/mobile/new-user.scss
@@ -29,6 +29,7 @@
         .select-kit-header-wrapper .name {
           display: none;
         }
+
         .d-icon {
           margin: 0;
         }
@@ -49,6 +50,7 @@
 
     .user-content {
       margin: 0;
+
       table {
         margin-top: -1px; // align under nav border
       }
diff --git a/app/assets/stylesheets/mobile/personal-message.scss b/app/assets/stylesheets/mobile/personal-message.scss
index 2c817042051..316a840a9a6 100644
--- a/app/assets/stylesheets/mobile/personal-message.scss
+++ b/app/assets/stylesheets/mobile/personal-message.scss
@@ -1,10 +1,12 @@
 .archetype-private_message {
   .topic-body {
     flex: 1 1 auto;
+
     .cooked {
       padding: 0;
       margin: 0;
     }
+
     .contents.regular {
       margin-top: 0.5em;
       margin-left: 0;
@@ -23,6 +25,7 @@
 
   .topic-post {
     margin: 0;
+
     article {
       border-top: none;
     }
@@ -41,6 +44,7 @@
 
   .topic-meta-data .names .first.staff {
     flex-basis: 100%;
+
     & + .second,
     & + .second + .user-title {
       flex-basis: unset;
diff --git a/app/assets/stylesheets/mobile/post-action-feedback.scss b/app/assets/stylesheets/mobile/post-action-feedback.scss
index 1bbf2640d26..981f830eaf3 100644
--- a/app/assets/stylesheets/mobile/post-action-feedback.scss
+++ b/app/assets/stylesheets/mobile/post-action-feedback.scss
@@ -6,7 +6,6 @@
 
 .post-action-feedback-alert {
   --transform-y: 0;
-
   position: fixed;
   top: calc(var(--header-offset) + 0.5rem);
   left: 0;
diff --git a/app/assets/stylesheets/mobile/reviewables.scss b/app/assets/stylesheets/mobile/reviewables.scss
index a060dedf9ac..1c53de85f34 100644
--- a/app/assets/stylesheets/mobile/reviewables.scss
+++ b/app/assets/stylesheets/mobile/reviewables.scss
@@ -25,6 +25,7 @@
     width: 100%;
     overflow-x: scroll;
     border-top: 1px solid var(--primary-low);
+
     thead {
       tr {
         display: flex;
@@ -41,6 +42,7 @@
         display: flex;
         flex-direction: column;
       }
+
       tr {
         border: 0;
       }
diff --git a/app/assets/stylesheets/mobile/sidebar.scss b/app/assets/stylesheets/mobile/sidebar.scss
index 2e790b79708..2d3345b2d8e 100644
--- a/app/assets/stylesheets/mobile/sidebar.scss
+++ b/app/assets/stylesheets/mobile/sidebar.scss
@@ -5,6 +5,7 @@
 .sidebar-section-form-modal {
   .row-wrapper {
     grid-template-columns: 4.5em repeat(2, 1fr) 2em;
+
     .link-icon {
       grid-column: 1;
     }
diff --git a/app/assets/stylesheets/mobile/signup-progress-bar.scss b/app/assets/stylesheets/mobile/signup-progress-bar.scss
index b037282adb5..2c9a91417a7 100644
--- a/app/assets/stylesheets/mobile/signup-progress-bar.scss
+++ b/app/assets/stylesheets/mobile/signup-progress-bar.scss
@@ -13,10 +13,12 @@ $progress-bar-circle-size: 0.5rem;
   &__segment {
     width: auto;
   }
+
   &__circle {
     height: $progress-bar-circle-size;
     width: $progress-bar-circle-size;
     transform: none !important;
+
     .--active & {
       background: var(--success);
       box-shadow: 0 0 1px 5px var(--success-low);
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 36a97cde37e..6c3478869f7 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -1,7 +1,6 @@
 // --------------------------------------------------
 // Topic lists
 // --------------------------------------------------
-
 .topic-list {
   .right {
     margin-left: 55px;
@@ -17,10 +16,12 @@
     position: relative;
     z-index: z("base") + 1; // Intentionally overlapping category to create bigger tap target
     font-size: var(--font-up-1);
+
     a.title {
       color: var(--primary);
       padding: 0;
     }
+
     .topic-statuses {
       a {
         line-height: 0.8;
@@ -37,6 +38,7 @@
     font-size: var(--font-0);
     line-height: var(--line-height-small);
     padding: 0.15em 0.4em 0.2em 0.4em;
+
     .d-icon {
       color: var(--secondary);
     }
@@ -44,6 +46,7 @@
     &.new-topic::before {
       margin-right: 0;
     }
+
     &.new-topic {
       padding: 0;
     }
@@ -61,13 +64,16 @@
     align-items: baseline;
     margin-top: 0.5em;
     z-index: z("base");
+
     .num.activity {
       margin-left: auto;
       font-size: var(--font-down-1);
     }
+
     .category a {
       max-width: 160px;
     }
+
     .num .d-icon,
     a,
     a:visited {
@@ -113,6 +119,7 @@
 
   .age {
     white-space: nowrap;
+
     a {
       color: var(--primary-medium);
     }
@@ -140,6 +147,7 @@
 
   tbody {
     border-top: none;
+
     .category {
       border-left: 6px solid;
     }
@@ -150,11 +158,13 @@
   tr:first-of-type {
     border: none;
   }
+
   // Allow percentage widths on table cells to include their padding
   box-sizing: border-box;
+
   *,
-  *:before,
-  *:after {
+  *::before,
+  *::after {
     box-sizing: inherit;
   }
 
@@ -188,17 +198,21 @@
   margin: 1.25em 10px 0;
   border-bottom: none !important;
   border-top: 1px solid var(--primary-low) !important;
+
   &:last-of-type {
     margin-top: 0;
     margin-bottom: 1.25em;
     border-bottom: 1px solid var(--primary-low) !important;
   }
+
   td:first-of-type {
-    padding: 12px 0px;
+    padding: 12px 0;
   }
+
   .category-logo.aspect-image {
     display: none;
   }
+
   .subcategories {
     padding-left: 10px;
   }
@@ -206,6 +220,7 @@
 
 tr.category-topic-link {
   border-bottom: 1px solid var(--primary-low);
+
   &:last-of-type {
     border-bottom: none;
   }
@@ -220,9 +235,11 @@ tr.category-topic-link {
   h4 {
     max-width: 100%;
     padding: 0 0 0 10px;
+
     .d-icon {
       margin-right: 5px;
     }
+
     a[href] {
       color: var(--primary);
     }
@@ -257,6 +274,7 @@ tr.category-topic-link {
 
   .subcategories-list {
     border-bottom: none;
+
     td {
       padding-top: 15px;
     }
@@ -266,6 +284,7 @@ tr.category-topic-link {
     .num {
       white-space: nowrap;
     }
+
     .topic-excerpt {
       width: 110%;
     }
@@ -274,18 +293,22 @@ tr.category-topic-link {
   .posters {
     float: left;
   }
+
   > footer {
     border-top: 1px solid var(--primary-low);
     padding: 7px 10px;
+
     .category-stat {
       float: left;
       margin: 3px 1em 0 0;
       font-weight: normal;
       font-size: var(--font-down-1);
+
       .value {
         font-weight: bold;
       }
     }
+
     .btn {
       float: right;
       margin-left: 7px;
@@ -316,11 +339,11 @@ tr.category-topic-link {
 
 // Misc. stuff
 // --------------------------------------------------
-
 .dropdown,
 .multiselect {
   position: relative;
 }
+
 .dropdown-toggle:active,
 .open .dropdown-toggle {
   outline: 0;
@@ -347,26 +370,32 @@ tr.category-topic-link {
 td .main-link {
   width: 78%;
   display: inline-block;
+
   a.title {
     padding: 0.33em 0.67em 0.33em 0;
     word-wrap: break-word;
   }
 }
+
 .topic-list {
   &-body {
     border-width: 1px;
   }
+
   .num.posts-map {
     font-size: var(--font-up-2);
     padding: 0;
+
     > button,
     > a {
       padding: 0;
     }
   }
+
   .num.activity a {
     padding: 0;
   }
+
   // so the topic excerpt is full width
   // as the containing div is 80%
   .topic-excerpt {
@@ -394,7 +423,6 @@ td .main-link {
 }
 
 // Bulk select
-
 .topic-list-header {
   display: none;
 }
@@ -406,6 +434,7 @@ td .main-link {
     z-index: z("base") + 2;
     top: var(--header-offset);
     background: var(--secondary);
+
     tr {
       display: flex;
       align-items: center;
@@ -414,11 +443,14 @@ td .main-link {
 
     .topic-list-data {
       display: none;
+
       &.bulk-select {
         display: inline-block;
       }
+
       &.default {
         display: flex;
+
         .bulk-select-topic-dropdown__count {
           display: none;
         }
@@ -437,6 +469,7 @@ td .main-link {
   padding-left: 0.85em;
   gap: 0.5em;
   font-size: var(--font-down-1);
+
   .select-kit-collection {
     font-size: var(--font-up-1);
   }
@@ -467,7 +500,8 @@ td .main-link {
 
     &.active {
       @include nav-active;
-      &:after {
+
+      &::after {
         height: 0.15em;
         bottom: -0.15em;
       }
@@ -478,6 +512,7 @@ td .main-link {
 #list-area .show-more .alert {
   align-items: center;
   gap: 0.5em;
+
   &.loading {
     color: var(--primary-medium);
   }
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 424924322b2..7a74e35b3da 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -33,6 +33,7 @@ nav.post-controls {
   --control-space: 0.58em;
   --control-space-small: calc(var(--control-space) / 2);
   --control-space-large: calc(var(--control-space) * 1.3);
+
   // on small devices with many buttons this can overflow
   overflow-x: scroll;
 
@@ -42,16 +43,19 @@ nav.post-controls {
     :first-child {
       margin-left: auto;
     }
+
     // Some buttons can be doubled up, like likes or flags
     .double-button {
       button {
         &.button-count {
           padding: var(--control-space);
+
           + .toggle-like,
           + .create-flag {
             padding: var(--control-space) var(--control-space-large)
               var(--control-space) var(--control-space-small);
           }
+
           &.regular-likes {
             padding: var(--control-space) var(--control-space-small)
               var(--control-space) var(--control-space-large);
@@ -59,11 +63,14 @@ nav.post-controls {
         }
       }
     }
+
     button {
       padding: var(--control-space) var(--control-space-large);
+
       &.expand-post {
         margin: var(--control-space) 0 var(--control-space) 0;
       }
+
       &.has-like {
         .d-icon {
           color: var(--love);
@@ -82,15 +89,18 @@ nav.post-controls {
       padding-left: var(--control-space);
       margin-left: 0 !important;
     }
+
     &[aria-expanded="true"] {
       background: var(--primary-low);
       color: var(--primary-high);
-      box-shadow: 0px 0px 0px 1px var(--primary-300);
+      box-shadow: 0 0 0 1px var(--primary-300);
       z-index: 1;
       margin-left: 1px;
+
       .d-icon {
         color: var(--primary-high);
       }
+
       &:hover,
       &:focus {
         color: var(--primary);
@@ -102,15 +112,19 @@ nav.post-controls {
   &.replies-button-visible {
     display: flex;
     align-items: center;
+
     .show-replies {
       display: flex;
+
       + .reply {
         margin-left: 0;
       }
+
       .d-icon {
         padding-left: var(--control-space);
       }
     }
+
     .actions {
       flex-grow: 2;
     }
@@ -124,7 +138,7 @@ nav.post-controls button.reply .d-icon {
 .post-admin-menu {
   bottom: -50px;
   left: 135px;
-  @media screen and (max-width: 374px) {
+  @media screen and (width <= 374px) {
     left: 50px;
   }
 }
@@ -134,15 +148,17 @@ nav.post-controls button.reply .d-icon {
   padding: 0.75em 0.5em 0.75em 0;
   max-width: 100%;
   margin-left: 0;
+
   > div {
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     margin-bottom: 1.5em;
+
     .row {
       // Main reply line
-      &:before {
+      &::before {
         content: "";
         position: absolute;
         top: calc(-2px - 0.75em);
@@ -152,11 +168,13 @@ nav.post-controls button.reply .d-icon {
         left: 24px;
       }
     }
+
     .topic-avatar {
       @include sticky;
       top: calc(var(--header-offset) + 0.5em);
       margin-right: 15px;
     }
+
     .topic-body {
       display: flex;
       flex-direction: column;
@@ -164,28 +182,36 @@ nav.post-controls button.reply .d-icon {
       margin-left: auto;
       gap: 0.25em 0;
       padding-bottom: 1.5em;
+
       .topic-meta-data.embedded-reply {
         margin-left: 0;
+
         h5 a {
           margin-left: 10px;
         }
+
         .names {
           margin-bottom: 0.25em;
+
           .user-title {
             display: none;
           }
+
           .second {
             flex-basis: auto;
           }
         }
+
         .post-link-arrow {
           position: absolute;
           bottom: 0;
+
           .post-info.arrow {
             padding: 0.5em 0;
             margin-right: 0;
             color: var(--primary-med-or-secondary-high);
             line-height: 1;
+
             &:hover,
             &:focus {
               color: var(--primary-high);
@@ -195,6 +221,7 @@ nav.post-controls button.reply .d-icon {
       }
     }
   }
+
   .collapse-up {
     position: relative;
     padding: 6px;
@@ -202,21 +229,26 @@ nav.post-controls button.reply .d-icon {
     background: var(--primary-low);
     z-index: 1;
     transform: translate(25%, -30%);
-    box-shadow: 0px 0px 0px 1px var(--primary-300);
+    box-shadow: 0 0 0 1px var(--primary-300);
+
     .archetype-private_message & {
       display: flex;
     }
+
     .d-icon {
       transform: scale(0.871);
     }
+
     &:hover,
     &:focus {
       background: var(--primary-300);
+
       .d-icon {
         color: var(--primary);
       }
     }
   }
+
   .load-more-replies {
     font-size: var(--font-down-1);
     position: absolute;
@@ -300,6 +332,7 @@ span.btn-text {
 
 blockquote {
   clear: both;
+
   /* leave browser defaults for top and bottom here */
   margin-left: 0;
   margin-right: 0;
@@ -325,12 +358,14 @@ span.highlighted {
   float: left;
   margin-right: 10px;
   z-index: z("base") + 1;
+
   /* must render on top of topic-body + topic-meta-data, otherwise not tappable */
 }
 
 .topic-meta-data {
   margin-left: 50px;
   font-size: var(--font-down-1);
+
   .names {
     line-height: var(--line-height-medium);
     display: flex;
@@ -364,6 +399,7 @@ span.highlighted {
 
     .user-badge-buttons {
       order: 5;
+
       .user-badge {
         padding-top: 0;
       }
@@ -399,6 +435,7 @@ span.highlighted {
 .post-notice {
   box-sizing: border-box;
   margin-bottom: 1em;
+
   &.old {
     border-top: none;
     padding-top: 0;
@@ -411,8 +448,8 @@ span.highlighted {
   flex-wrap: wrap;
   justify-content: flex-start;
   margin: 1em -9px;
-
   z-index: 101;
+
   .filtered-replies-show-all {
     position: absolute;
     right: 1em;
@@ -425,6 +462,7 @@ span.highlighted {
 
   .filtered-avatar {
     margin-left: 0;
+
     img.avatar {
       width: 20px;
       height: 20px;
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 7424e3a6c0d..0dabff582db 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -16,12 +16,14 @@
   h1 {
     font-size: var(--font-up-3);
     line-height: var(--line-height-medium);
+
     a {
       color: var(--primary);
       vertical-align: middle;
       word-wrap: break-word;
     }
   }
+
   .title-category-wrapper {
     margin-top: 5px;
   }
@@ -76,9 +78,11 @@ sub sub {
   .now-date {
     padding: 0.5em 0;
   }
+
   .timeline-scrollarea-wrapper .timeline-date-wrapper {
     @include ellipsis;
   }
+
   .topic-category {
     margin-bottom: 0.5rem;
   }
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 94279d2f873..4a44f8a20f8 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -1,31 +1,35 @@
 // Mobile styles for "/user" section
-
 .user-content-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto auto;
   grid-gap: 16px;
   padding-top: 1em;
+
   .user-primary-navigation {
     grid-column-start: 1;
     grid-row-start: 1;
     grid-column-end: 2;
     min-width: 120px;
   }
+
   .user-secondary-navigation {
     grid-column-start: 2;
     grid-row-start: 1;
     min-width: 120px;
   }
+
   .user-additional-controls + .user-content,
   .user-secondary-navigation + .user-content {
     grid-column-start: 1;
   }
+
   .user-additional-controls {
     grid-column-start: 1;
     grid-column-end: 3;
     grid-row-start: 2;
   }
+
   .user-content,
   .spinner {
     grid-row-start: 3;
@@ -33,12 +37,10 @@
   }
 
   // specific to messages
-
   .user-messages {
     grid-row-start: 2;
     grid-column-start: 1;
     grid-column-end: 3;
-
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
@@ -63,6 +65,7 @@
   .paginated-topics-list {
     margin-top: 0;
   }
+
   .show-mores {
     margin-top: 0.5em;
   }
@@ -74,6 +77,7 @@
   .user-content {
     box-sizing: border-box;
     background-color: var(--secondary);
+
     table {
       width: 100%;
       margin-top: 12px;
@@ -100,6 +104,7 @@
         display: block;
         float: none;
         margin: 8px auto;
+
         img.avatar {
           float: none;
         }
@@ -119,11 +124,13 @@
         flex-wrap: wrap;
         justify-content: center;
         font-size: var(--font-0);
+
         .d-icon {
           width: 0.8em;
           height: 0.8em;
           margin-right: 0.25em;
         }
+
         a {
           text-decoration: underline;
         }
@@ -184,6 +191,7 @@
       .user-profile-image {
         height: 200px;
       }
+
       .user-profile-avatar {
         margin-top: -60px;
       }
@@ -197,10 +205,12 @@
         > span {
           display: flex;
           flex: 1 1 45%;
+
           button,
           a {
             width: 100%;
           }
+
           .select-kit.dropdown-select-box.user-notifications-dropdown {
             width: 100%;
           }
@@ -220,6 +230,7 @@
 
 .user-main .collapsed-info.about.has-background {
   background-image: none !important; // todo: make changes to behavior to remove this
+
   .details {
     margin-top: 0;
   }
@@ -228,15 +239,18 @@
 .user-main .collapsed-info.about .details {
   display: flex;
   margin-bottom: 0;
+
   .user-profile-avatar {
     margin: 0;
     flex: 0 0 auto;
     align-self: flex-start;
   }
+
   .primary .primary-textual {
     flex: 1 0 80%;
     margin: 0;
   }
+
   .user-profile-names {
     text-align: left;
   }
@@ -250,6 +264,7 @@
   li {
     margin: 0 15px 10px 0;
     padding: 0;
+
     &.linked-stat {
       a {
         padding: 0;
@@ -282,6 +297,7 @@
     overflow: auto;
     width: 100%;
     padding: 5px 0;
+
     input {
       margin-right: 5px;
       flex: 0 0 auto;
@@ -316,6 +332,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+
     .user-invite-search {
       width: 100%;
     }
@@ -377,12 +394,14 @@
     margin-top: 1em;
   }
 }
+
 .second-factor {
   .second-factor-item {
     width: auto;
     display: flex;
     justify-content: space-between;
   }
+
   .details {
     width: 75%;
   }
diff --git a/app/assets/stylesheets/publish.scss b/app/assets/stylesheets/publish.scss
index e8fe3e237c8..19a448f5d94 100644
--- a/app/assets/stylesheets/publish.scss
+++ b/app/assets/stylesheets/publish.scss
@@ -14,12 +14,12 @@
 .published-page-header {
   box-sizing: border-box;
   width: 100%;
-  top: 0;
   z-index: z("header");
   background-color: var(--header_background);
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
   position: sticky;
   top: 0;
+
   .published-page-header-wrapper {
     box-sizing: border-box;
     max-width: calc(
@@ -28,14 +28,16 @@
     );
     width: 100%;
     display: flex;
-    margin: 0em auto;
+    margin: 0 auto;
     padding: 0.5em 10px; // 10px matches .wrap padding
     align-items: center;
+
     .published-page-logo {
       height: 45px;
       margin-right: 1em;
       line-height: 1em;
     }
+
     .published-page-title {
       color: var(--header_primary);
       font-size: var(--font-up-5);
@@ -70,6 +72,7 @@
     width: 45px;
     border: 4px solid var(--tertiary-medium);
   }
+
   .topic-created-at {
     color: var(--primary-medium);
   }
@@ -77,6 +80,7 @@
 
 .published-page-content-body {
   font-size: 1.25em;
+
   img {
     max-width: 100%;
     height: auto;
diff --git a/app/assets/stylesheets/qunit-custom.scss b/app/assets/stylesheets/qunit-custom.scss
index 3936aafe108..e3f1c96e2ba 100644
--- a/app/assets/stylesheets/qunit-custom.scss
+++ b/app/assets/stylesheets/qunit-custom.scss
@@ -83,7 +83,7 @@ body {
   }
 
   #qunit-tests b.failed {
-    color: #ff7777;
+    color: #f77;
   }
 
   #qunit-tests b.passed {
@@ -125,7 +125,7 @@ body {
   #qunit-tests li li.fail {
     background-color: #222;
     border-color: #7e2121;
-    color: #ff7777;
+    color: #f77;
   }
 
   .qunit-assert-list {
@@ -155,12 +155,12 @@ body {
   // Hardcode "dark" theme vars for now
   :root {
     --scheme-type: dark;
-    --primary: #dddddd;
-    --secondary: #222222;
+    --primary: #ddd;
+    --secondary: #222;
     --tertiary: #0f82af;
     --quaternary: #c14924;
-    --header_background: #111111;
-    --header_primary: #dddddd;
+    --header_background: #111;
+    --header_primary: #ddd;
     --highlight: #a87137;
     --danger: #e45735;
     --success: #1ca551;
@@ -241,7 +241,7 @@ body {
     --tertiary-or-tertiary-low: #052e3d;
     --tertiary-low-or-tertiary-high: #0b6283;
     --tertiary-med-or-tertiary: #0f82af;
-    --secondary-or-primary: #dddddd;
+    --secondary-or-primary: #ddd;
     --tertiary-or-white: #fff;
     --facebook-or-white: #fff;
     --twitter-or-white: #fff;
@@ -254,7 +254,7 @@ body {
     --hljs-symbol: #fbe;
     --hljs-bg: #333;
     --hljs-builtin-name: #14aeea;
-    --google: #ffffff;
+    --google: #fff;
     --google-hover: #f2f2f2;
     --instagram: #e1306c;
     --instagram-hover: #ac194b;
diff --git a/app/assets/stylesheets/qunit.scss b/app/assets/stylesheets/qunit.scss
index 9f036b8922b..cd79425feb8 100644
--- a/app/assets/stylesheets/qunit.scss
+++ b/app/assets/stylesheets/qunit.scss
@@ -1,5 +1,4 @@
 // Styles for Ember CLI test environment
-
 :root {
   --font-family: "Arial";
 }
diff --git a/app/assets/stylesheets/vendor/normalize.scss b/app/assets/stylesheets/vendor/normalize.scss
index 192eb9ce433..9b9b14f2fac 100644
--- a/app/assets/stylesheets/vendor/normalize.scss
+++ b/app/assets/stylesheets/vendor/normalize.scss
@@ -10,7 +10,7 @@
 
 html {
   line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+  text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -62,7 +62,7 @@ hr {
  */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -83,8 +83,7 @@ a {
  */
 
 abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
+  border-bottom: none; /* 1 */ /* 2 */
   text-decoration: underline dotted; /* 2 */
 }
 
@@ -105,7 +104,7 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -196,7 +195,7 @@ button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
+  appearance: button;
 }
 
 /**
@@ -288,7 +287,7 @@ textarea {
  */
 
 [type="search"] {
-  -webkit-appearance: textfield; /* 1 */
+  appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
@@ -297,7 +296,7 @@ textarea {
  */
 
 [type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
@@ -306,7 +305,7 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
+  appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
 
diff --git a/app/assets/stylesheets/vendor/pikaday.scss b/app/assets/stylesheets/vendor/pikaday.scss
index ac1dcdf9da1..35cec6a44fd 100644
--- a/app/assets/stylesheets/vendor/pikaday.scss
+++ b/app/assets/stylesheets/vendor/pikaday.scss
@@ -28,7 +28,7 @@ $pd-day-disabled-color: var(--primary) !default;
 $pd-week-color: var(--primary) !default;
 
 // Font
-$pd-font-family: Arial, sans-serif !default;
+$pd-font-family: arial, sans-serif !default;
 
 
 .pika-single {
@@ -54,13 +54,13 @@ $pd-font-family: Arial, sans-serif !default;
 // clear child float (pika-lendar), using the famous micro clearfix hack
 // http://nicolasgallagher.com/micro-clearfix-hack/
 .pika-single {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
         content: " ";
         display: table;
     }
 
-    &:after { clear: both }
+    &::after { clear: both }
 }
 
 .pika-lendar {
@@ -130,10 +130,6 @@ $pd-font-family: Arial, sans-serif !default;
 .pika-prev,
 .is-rtl .pika-next {
     float: left;
-    -webkit-mask: svg-uri(
-        '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>'
-      )
-      no-repeat 50% 50%;
     mask: svg-uri(
         '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>'
       )
@@ -143,10 +139,6 @@ $pd-font-family: Arial, sans-serif !default;
 .pika-next,
 .is-rtl .pika-prev {
     float: right;
-    -webkit-mask: svg-uri(
-        '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>'
-      )
-      no-repeat 50% 50%;
     mask: svg-uri(
         '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>'
       )
@@ -186,7 +178,6 @@ $pd-font-family: Arial, sans-serif !default;
 .pika-button {
     cursor: pointer;
     display: block;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
     outline: none;
     border: 0;
diff --git a/app/assets/stylesheets/vendor/rotate-center.scss b/app/assets/stylesheets/vendor/rotate-center.scss
index 1a822753f2b..2f7c4d60d4c 100644
--- a/app/assets/stylesheets/vendor/rotate-center.scss
+++ b/app/assets/stylesheets/vendor/rotate-center.scss
@@ -10,23 +10,21 @@
  * animation rotate-center
  * ----------------------------------------
  */
- @-webkit-keyframes rotate-center {
+ @keyframes rotate-center {
   0% {
-    -webkit-transform: rotate(0);
             transform: rotate(0);
   }
+
   100% {
-    -webkit-transform: rotate(360deg);
             transform: rotate(360deg);
   }
 }
 @keyframes rotate-center {
   0% {
-    -webkit-transform: rotate(0);
             transform: rotate(0);
   }
+
   100% {
-    -webkit-transform: rotate(360deg);
             transform: rotate(360deg);
   }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/wcag.scss b/app/assets/stylesheets/wcag.scss
index 7bdb87e0431..8020210c691 100644
--- a/app/assets/stylesheets/wcag.scss
+++ b/app/assets/stylesheets/wcag.scss
@@ -1,7 +1,6 @@
 // Overrides for WCAG color schemes only
 
 // Global
-
 ::placeholder {
   color: var(--primary-medium);
   opacity: 1;
@@ -16,6 +15,7 @@ html.discourse-no-touch {
     .d-icon {
       color: var(--primary-medium);
     }
+
     &:hover,
     &.btn-hover,
     &:focus {
@@ -24,9 +24,11 @@ html.discourse-no-touch {
       }
     }
   }
+
   .btn-primary .d-icon {
     color: var(--secondary);
   }
+
   .btn-icon.ok,
   .btn-icon.cancel,
   .btn-danger:not(.btn-flat, .btn-transparent) {
@@ -34,6 +36,7 @@ html.discourse-no-touch {
       color: var(--secondary);
     }
   }
+
   .btn-flat.delete.d-hover,
   .btn-flat.delete:hover {
     background: var(--danger);
@@ -60,27 +63,29 @@ html {
   .d-editor-button-bar {
     .btn-icon.btn-default .d-icon {
       color: var(--primary-low-mid);
+
       .discourse-no-touch & {
         &:hover {
           color: var(--secondary);
         }
       }
     }
+
     .btn-icon:not(.btn-flat, .btn-danger, .btn-primary):focus {
       .d-icon {
-        color: currentColor;
+        color: currentcolor;
       }
     }
   }
 
   // Site header
-
   .menu-panel li a.widget-link:hover,
   .menu-panel li a.widget-link:focus,
   .menu-panel li.heading a.widget-link:hover,
   .menu-panel li.heading a.widget-link:focus {
     color: var(--primary);
     background-color: var(--highlight-medium);
+
     .d-icon {
       color: var(--primary);
     }
@@ -107,7 +112,6 @@ html {
   }
 
   // Topic list
-
   table th {
     color: var(--primary-high);
   }
@@ -128,6 +132,7 @@ html {
   .badge-notification.unread-posts {
     background: var(--tertiary);
   }
+
   .select-kit.dropdown-select-box.period-chooser
     .period-chooser-header
     h2.selected-name
@@ -151,13 +156,13 @@ html {
   }
 
   // Posts
-
   .discourse-no-touch .topic-body .actions .fade-out {
     opacity: 1;
   }
 
   .topic-body .reply-to-tab {
     color: var(--primary-medium);
+
     .d-icon {
       color: var(--primary-low-mid);
     }
@@ -167,6 +172,7 @@ html {
     .timeline-scrollarea {
       border-color: var(--primary-low-mid);
     }
+
     .timeline-handle {
       background: var(--primary-low-mid);
     }
@@ -183,6 +189,7 @@ html {
       color: var(--tertiary);
     }
   }
+
   .meta .d-icon + .filename,
   .meta .informations {
     color: var(--secondary);
@@ -202,7 +209,6 @@ html {
   }
 
   // Post controls
-
   .topic-admin-menu,
   .timeline-controls {
     .btn .d-icon {
@@ -217,6 +223,7 @@ html {
       button.create .d-icon {
         color: var(--primary-high-or-secondary-low);
       }
+
       button {
         &.d-hover,
         &:hover,
@@ -224,6 +231,7 @@ html {
         &:active {
           background: var(--primary-medium);
           color: var(--secondary);
+
           .d-icon {
             color: var(--secondary);
           }
@@ -234,15 +242,18 @@ html {
         &.delete:focus {
           background: var(--danger);
           color: var(--secondary);
+
           .d-icon {
             color: var(--secondary);
           }
         }
+
         &.bookmark {
           &.bookmarked {
             .d-icon {
               color: var(--tertiary);
             }
+
             &.d-hover,
             &:hover {
               .d-icon {
@@ -252,9 +263,11 @@ html {
           }
         }
       }
+
       .double-button .button-count {
         color: var(--primary-medium);
       }
+
       .double-button:hover {
         button,
         .d-icon,
@@ -266,10 +279,12 @@ html {
 
     .show-replies {
       color: var(--primary-medium);
+
       &:hover,
       &:focus {
         color: var(--secondary);
         background: var(--primary-medium);
+
         .d-icon {
           color: var(--secondary);
         }
@@ -278,7 +293,6 @@ html {
   }
 
   // Categories
-
   .list-cell,
   .table-heading,
   .category-list td,
@@ -332,7 +346,6 @@ html {
   }
 
   // Notifications
-
   .user-menu.revamped .tabs-list .btn .badge-notification {
     background-color: dark-light-choose($tertiary-high, $tertiary);
   }
@@ -346,7 +359,6 @@ html {
   }
 
   // Admin Settings
-
   .admin-controls {
     .nav-pills > li > a:not(.active):hover {
       background: var(--primary-medium);
@@ -359,7 +371,7 @@ html {
     background-color: yellow; // resets to browser default
   }
 
-  .settings .setting.overridden h3:before {
+  .settings .setting.overridden h3::before {
     background-color: var(--tertiary);
   }
 
@@ -368,7 +380,6 @@ html {
   }
 
   // Dashboard
-
   .user-metrics .table-cell.user-basic .label,
   .user-metrics .table-cell.user-member .label,
   .user-metrics .table-cell.user-leader .label {
@@ -380,7 +391,6 @@ html {
   }
 
   // Search
-
   .search-container
     .search-filters
     details.search-advanced-additional-options
@@ -394,7 +404,6 @@ html {
   }
 
   // Review
-
   .reviewable-item .reviewable-meta-data .created-at a {
     color: var(--primary-medium);
   }
@@ -409,7 +418,6 @@ html {
 }
 
 // chat
-
 .no-touch
   .chat-messages-container
   .chat-message:hover
@@ -420,7 +428,6 @@ html {
 }
 
 // sidebar
-
 .sidebar-wrapper
   .sidebar-sections
   .sidebar-section-link-suffix.icon.unread
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index ca6268fd7dd..b42d109400c 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -21,7 +21,6 @@ body.wizard {
   background-size: 110vw 110vh; // crops better than cover at various viewport sizes
   background-repeat: no-repeat;
   background-position: bottom;
-
   color: var(--primary-very-high);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
@@ -58,7 +57,7 @@ body.wizard {
     @include breakpoint("mobile-extra-large") {
       height: 50px;
     }
-    @media screen and (max-height: 900px) {
+    @media screen and (height <= 900px) {
       .desktop-view & {
         display: none;
       }
@@ -80,7 +79,6 @@ body.wizard {
   box-shadow: 0 4px 19px 6px rgba(0, 0, 0, 0.05);
   box-sizing: border-box;
   margin: 1em auto;
-  padding: 0;
   border: 1px solid var(--primary-low);
   border-radius: 8px;
   padding: 2em;
@@ -184,7 +182,7 @@ body.wizard {
 
   &__field.text-governing-law,
   &__field.text-city-for-disputes {
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       display: none;
     }
   }
@@ -204,7 +202,7 @@ body.wizard {
     box-sizing: border-box;
     margin-right: 1em;
 
-    @media only screen and (max-width: 925px) {
+    @media only screen and (width <= 925px) {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
@@ -217,7 +215,7 @@ body.wizard {
       border-radius: 0.5em;
       margin-top: -1em;
 
-      @media only screen and (max-width: 925px) {
+      @media only screen and (width <= 925px) {
         display: none;
       }
     }
@@ -228,6 +226,7 @@ body.wizard {
     justify-content: flex-end;
     position: relative;
     padding-right: 10px;
+
     .preview-nav-button {
       text-align: center;
       padding: 10px 15px;
@@ -236,6 +235,7 @@ body.wizard {
       font-size: 14px;
       font-weight: bold;
       color: var(--primary-high);
+
       &.active {
         background: var(--secondary);
         border-bottom-left-radius: 10px;
@@ -255,18 +255,21 @@ body.wizard {
     border-radius: 10px;
     cursor: grab;
     user-select: none;
+
     &.dragging {
       cursor: grabbing;
     }
+
     .topic-preview {
       position: absolute;
-      left: 0px;
-      top: 0px;
+      left: 0;
+      top: 0;
     }
+
     .homepage-preview {
       position: absolute;
       left: calc(100% + 25px);
-      top: 0px;
+      top: 0;
     }
   }
 
@@ -309,7 +312,7 @@ body.wizard {
 
   &__step-form {
     flex: 1 0 50%;
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       width: 100%;
     }
   }
@@ -341,7 +344,7 @@ body.wizard {
 
   &__step-text {
     display: inline;
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       display: none;
     }
   }
@@ -368,7 +371,6 @@ body.wizard {
 
   &__button {
     border-radius: 2px;
-    font-size: var(--font-0);
     border: 0;
     padding: 0.5em;
     transition: var(--d-button-transition);
@@ -406,6 +408,7 @@ body.wizard {
       margin-left: 0;
     }
   }
+
   &__button.primary:hover,
   &__button.primary:focus {
     background-color: var(--tertiary-hover);
@@ -450,6 +453,7 @@ body.wizard {
     color: var(--tertiary-hover);
     background-color: transparent;
   }
+
   &__button.finish:active,
   &__button.finish:disabled {
     background-color: transparent;
@@ -545,7 +549,7 @@ body.wizard {
       margin: 0;
     }
 
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       font-size: var(--font-0);
     }
   }
@@ -554,14 +558,13 @@ body.wizard {
     color: var(--primary-high);
     font-size: var(--font-up-1);
     margin: 0.25em 0 0.5em 3.5em;
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       margin-left: 2em;
     }
   }
 
   &__text-input {
     border-radius: 4px !important;
-    padding: 5px;
     width: 100%;
     font-size: var(--font-up-1);
     margin: 0;
@@ -582,6 +585,7 @@ body.wizard {
   &__dropdown.color-palettes .select-kit-row.color-palettes-row .name {
     flex: 0 0 30%;
   }
+
   &__dropdown.color-palettes .select-kit-row.color-palettes-row .palettes {
     flex: 1 1 70%;
     overflow: hidden;
@@ -615,31 +619,32 @@ body.wizard {
     position: relative;
     vertical-align: middle;
     transition: background 0.25s;
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       height: 20px;
       width: 35px;
     }
   }
-  &__checkbox-slider:before,
-  &__checkbox-slider:after {
+
+  &__checkbox-slider::before,
+  &__checkbox-slider::after {
     content: "";
     display: block;
     position: absolute;
   }
 
-  &__checkbox-slider:after {
+  &__checkbox-slider::after {
     content: "\2713"; // checkmark
     color: var(--secondary);
     top: 4px;
     left: 9px;
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       top: 3px;
       left: 5px;
       font-size: var(--font-down-3);
     }
   }
 
-  &__checkbox-slider:before {
+  &__checkbox-slider::before {
     background: var(--secondary);
     border-radius: 50%;
     width: 20px;
@@ -647,23 +652,26 @@ body.wizard {
     top: 4px;
     left: 4px;
     transition: left 0.25s;
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       height: 12px;
       width: 12px;
     }
   }
+
   &__field.checkbox-field
     .wizard-container__label:hover
-    .wizard-container__checkbox-slider:before {
+    .wizard-container__checkbox-slider::before {
     background: var(--secondary);
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
   }
+
   &__checkbox:checked + .wizard-container__checkbox-slider {
     background: var(--tertiary);
   }
-  &__checkbox:checked + .wizard-container__checkbox-slider:before {
+
+  &__checkbox:checked + .wizard-container__checkbox-slider::before {
     left: 26px;
-    @media only screen and (max-width: 568px) {
+    @media only screen and (width <= 568px) {
       left: 20px;
     }
   }
@@ -742,7 +750,7 @@ body.wizard {
     .wizard-congratulations-wrap {
       display: flex;
       gap: 1em;
-      @media screen and (max-width: 750px) {
+      @media screen and (width <= 750px) {
         flex-direction: column-reverse;
       }
     }
@@ -771,7 +779,6 @@ body.wizard {
 }
 
 // Register admin page... /finish-installation/register
-
 .wizard-container-contents.finish-installation {
   .wizard-container__combobox {
     background: var(--secondary);
diff --git a/package.json b/package.json
index aa8e2c1905d..df5135a399e 100644
--- a/package.json
+++ b/package.json
@@ -36,12 +36,17 @@
     "prettier": "^2.8.8",
     "puppeteer-core": "^24.1.0",
     "squoosh": "https://codeload.github.com/discourse/squoosh/tar.gz/dc9649d",
+    "stylelint": "^16.10.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "terser": "^5.37.0",
     "typescript": "^5.7.3"
   },
   "scripts": {
     "dev": "concurrently \"bin/ember-cli server --environment=development\" \"RAILS_ENV=development bin/rails server\"",
     "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:css": "pnpm stylelint 'app/assets/stylesheets/**/*.scss' $(script/list_bundled_plugins '/assets/stylesheets/**/*.scss')",
+    "lint:css:fix": "pnpm stylelint --fix 'app/assets/stylesheets/**/*.scss' $(script/list_bundled_plugins '/assets/stylesheets/**/*.scss')",
     "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:js": "eslint ./app/assets/javascripts $(script/list_bundled_plugins) --cache --no-error-on-unmatched-pattern",
     "lint:js:fix": "eslint --fix ./app/assets/javascripts $(script/list_bundled_plugins) --no-error-on-unmatched-pattern",
diff --git a/plugins/automation/assets/stylesheets/common/discourse-automation.scss b/plugins/automation/assets/stylesheets/common/discourse-automation.scss
index e29bc636f36..905fac391ff 100644
--- a/plugins/automation/assets/stylesheets/common/discourse-automation.scss
+++ b/plugins/automation/assets/stylesheets/common/discourse-automation.scss
@@ -57,9 +57,11 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+
     h2 {
       margin: 0 auto 0 0;
     }
+
     &-filter {
       margin: 0;
       flex: 0 1 15em;
@@ -81,9 +83,11 @@
     grid-template-rows: subgrid;
     grid-row: span 4;
     gap: 0;
+
     &__buttons {
       display: none; // empty container
     }
+
     &__description {
       max-width: 18.75em;
     }
@@ -128,6 +132,7 @@
 
   .alert {
     padding: 1em;
+
     p {
       margin: 0;
     }
@@ -312,9 +317,11 @@
       .control-group {
         display: flex;
         flex-direction: column;
+
         .control-label {
           width: 100%;
         }
+
         .controls {
           margin: 0;
         }
@@ -340,9 +347,11 @@
     .pm-field:not(:last-child) {
       margin-bottom: 1em;
     }
+
     .pm-title {
       width: 100%;
     }
+
     .pm-textarea {
       width: 100%;
       box-sizing: border-box;
diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index 90790eeffb6..a5bc25ca579 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/plugins/chat/assets/stylesheets/common/base-common.scss
@@ -27,6 +27,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
   background-color: rgba(0, 0, 0, 0.75);
   z-index: z("header");
   pointer-events: none;
+
   &-content {
     width: max-content;
     display: flex;
@@ -35,27 +36,33 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
     padding: 2em;
     background-color: #1d1d1d;
     border-radius: 0.25em;
+
     &-images {
       .d-icon {
         height: 3em;
         width: 3em;
         color: var(--secondary-or-primary);
+
         &:first-of-type {
           transform: rotate(-5deg);
         }
+
         &:nth-of-type(2) {
           height: 4em;
           width: 4em;
         }
+
         &:last-of-type {
           transform: rotate(5deg);
         }
       }
     }
+
     &-text {
       margin: 1.5em 0 0 0;
       font-size: var(--font-up-1);
       color: var(--secondary-or-primary);
+
       .d-icon-upload {
         padding-right: 0.25em;
         position: relative;
@@ -94,7 +101,6 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
       .d-icon {
         color: var(--header_primary-low-mid);
       }
-
       background: none;
     }
   }
@@ -155,8 +161,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
 
   .is-online & {
     padding: 2px;
-    box-shadow: inset 0px 0px 0px 1px var(--success),
-      inset 0px 0px 0px 2px var(--secondary);
+    box-shadow: inset 0 0 0 1px var(--success), inset 0 0 0 2px var(--secondary);
   }
 }
 
@@ -277,6 +282,7 @@ html.has-full-page-chat {
       min-height: 0;
     }
   }
+
   [data-popper-reference-hidden] {
     visibility: hidden;
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-browse.scss b/plugins/chat/assets/stylesheets/common/chat-browse.scss
index e89e9fda456..21abcbcc2d1 100644
--- a/plugins/chat/assets/stylesheets/common/chat-browse.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-browse.scss
@@ -63,7 +63,8 @@
     display: flex;
     align-items: center;
     margin: 0;
-    &:before {
+
+    &::before {
       content: none; //there is a strange thing applied on nav-pills and this resets it
     }
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-card.scss b/plugins/chat/assets/stylesheets/common/chat-channel-card.scss
index 406fbadca64..06aa9e9481a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-card.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-card.scss
@@ -31,9 +31,11 @@
   &__muted {
     color: var(--primary-medium);
   }
+
   &__read-restricted {
     font-size: var(--font-down-2-rem);
   }
+
   &__muted {
     font-size: var(--font-down-1-rem);
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss b/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss
index 2f98a9d7185..c6207afb1c6 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-icon.scss
@@ -1,5 +1,6 @@
 .chat-channel-icon {
   flex-shrink: 0;
+
   &.--users-count {
     display: flex;
     justify-content: center;
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel.scss b/plugins/chat/assets/stylesheets/common/chat-channel.scss
index 53894511fa0..8923cc8109d 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel.scss
@@ -7,7 +7,7 @@
   overflow: hidden;
   grid-area: main;
   min-width: 250px;
-  @include chat-height(var(--chat-header-offset, 0px));
+  @include chat-height(var(--chat-header-offset, 0));
 
   .join-channel-btn.in-float {
     position: absolute;
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
index c01d2f23cfc..cd329728f45 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
@@ -44,9 +44,11 @@
       0% {
         transform: scale(0.9);
       }
+
       50% {
         transform: scale(1.2);
       }
+
       100% {
         transform: scale(0.9);
       }
@@ -83,6 +85,7 @@
     &:hover {
       transform: scale(1.1);
     }
+
     .d-icon {
       .is-focused & {
         color: var(--tertiary);
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
index 34edc0d146d..2f2bdbcca88 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
@@ -3,7 +3,6 @@
 
   .d-icon {
     padding: 5px;
-
     background: var(--primary-low);
     border-radius: 100%;
   }
@@ -14,7 +13,6 @@
     .d-icon {
       color: var(--primary) !important;
     }
-
     background: none !important;
     background-image: none !important;
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss
index c691658de65..0abbf713121 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss
@@ -91,7 +91,7 @@
     margin: 5px 0;
     text-overflow: ellipsis;
     cursor: inherit;
-    @include chat-scrollbar();
+    @include chat-scrollbar;
     white-space: pre-wrap !important;
     min-width: 20px;
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
index f35458f7443..9d3e682d47f 100644
--- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
@@ -66,7 +66,7 @@ html.rtl {
     border-bottom: 0;
     border-top-left-radius: var(--d-border-radius-large);
     border-top-right-radius: var(--d-border-radius-large);
-    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.125);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -94,7 +94,7 @@ html.rtl {
 }
 
 .chat-drawer-content {
-  @include chat-scrollbar();
+  @include chat-scrollbar;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
diff --git a/plugins/chat/assets/stylesheets/common/chat-footer.scss b/plugins/chat/assets/stylesheets/common/chat-footer.scss
index 4e99e44753c..51f258d89e4 100644
--- a/plugins/chat/assets/stylesheets/common/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-footer.scss
@@ -35,6 +35,7 @@
         color: var(--d-nav-color--active);
       }
     }
+
     &:hover,
     &:focus {
       .discourse-no-touch &,
@@ -67,12 +68,14 @@
       right: unset;
       left: 50%;
       margin-left: 0.75rem;
+
       &.-urgent {
         height: 1em;
         width: min-content;
         min-width: 0.6em;
         padding: 0.21em 0.42em;
       }
+
       &:not(.-urgent) {
         width: 11px;
         height: 11px;
diff --git a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
index f92d80c9b09..bd3909d1392 100644
--- a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
@@ -1,11 +1,10 @@
-@mixin chat-height($inset: 0px) {
+@mixin chat-height($inset: 0) {
   // desktop and mobile
   // -1px is for the bottom border of the chat navbar
   $base-height: calc(
     var(--composer-vh, 1vh) * 100 - var(--main-outlet-offset, 0px) - 1px -
       $inset
   );
-
   height: calc($base-height - var(--composer-height, 0px));
 
   // mobile with keyboard opened
diff --git a/plugins/chat/assets/stylesheets/common/chat-index.scss b/plugins/chat/assets/stylesheets/common/chat-index.scss
index 4a4956a2aea..b3a8f935064 100644
--- a/plugins/chat/assets/stylesheets/common/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-index.scss
@@ -8,14 +8,14 @@
   padding: 0.5rem;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
   z-index: z("usercard");
-  box-shadow: 0px 5px 5px -1px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.25);
 
   .d-icon {
     color: var(--primary-very-low);
   }
 
   &:active {
-    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.25);
     transform: scale(0.9);
   }
 
@@ -29,12 +29,12 @@
 .channels-list,
 .channels-list-container {
   position: relative;
-  @include chat-scrollbar();
+  @include chat-scrollbar;
   height: 100%;
   padding-bottom: 1rem;
 
   @include breakpoint(mobile-large) {
-    @include chat-scrollbar();
+    @include chat-scrollbar;
   }
 
   .open-browse-page-btn,
@@ -46,7 +46,7 @@
     color: var(--primary-medium);
     font-size: var(--font-0-rem);
 
-    &:after {
+    &::after {
       content: "";
       position: absolute;
       top: -50%;
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-actions.scss b/plugins/chat/assets/stylesheets/common/chat-message-actions.scss
index 033f290edac..c6d28d76585 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-actions.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-actions.scss
@@ -74,8 +74,8 @@
       width: 2.5em;
       transition: var(--d-button-transition);
       border-radius: var(--d-border-radius);
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
 
       &:focus {
         border-color: var(--primary-300);
@@ -128,7 +128,6 @@
 
   .chat-message-reaction {
     @include chat-reaction;
-
     align-items: center;
     border-radius: 0;
     border-left-color: transparent;
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
index 9bbaf495481..24f55c7269c 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
@@ -33,6 +33,7 @@
     .-group & {
       width: 26px;
       height: 26px;
+
       .d-icon-user-group {
         padding: 5px 5px;
         box-sizing: border-box;
@@ -225,6 +226,7 @@
     .user-status {
       display: flex;
       align-items: center;
+
       .fk-d-tooltip__trigger-container {
         display: flex;
         align-items: center;
@@ -234,6 +236,7 @@
           width: var(--font-down-2-rem);
           height: var(--font-down-2-rem);
         }
+
         .user-status-message-description {
           @include ellipsis;
           font-size: var(--font-down-2-rem);
@@ -290,7 +293,7 @@
 
     &:focus,
     &:focus-within {
-      @include default-focus();
+      @include default-focus;
     }
 
     &-container {
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-images.scss b/plugins/chat/assets/stylesheets/common/chat-message-images.scss
index f532182b426..8238c751de8 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-images.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-images.scss
@@ -43,9 +43,11 @@ $max_image_height: 150px;
         .thumbnail.onebox-avatar {
           display: none;
         }
+
         .aspect-image {
           margin-right: 0;
           max-width: 100%;
+
           + h3 {
             margin-top: 0.25rem;
           }
@@ -54,6 +56,7 @@ $max_image_height: 150px;
         h3 {
           margin-block: 0.75rem 0;
         }
+
         p {
           margin-top: 0.5rem;
         }
@@ -78,6 +81,7 @@ $max_image_height: 150px;
     object-fit: contain;
     max-height: $max_image_height;
     max-width: calc(#{$max_image_height} / 9 * 16);
+
     &:has(div[data-provider-name="tiktok"]) {
       max-height: unset;
     }
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-info.scss b/plugins/chat/assets/stylesheets/common/chat-message-info.scss
index 211a480c835..861c10b7ede 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-info.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-info.scss
@@ -92,6 +92,7 @@
       height: 0.9em;
       width: 0.9em;
     }
+
     &__restricted-category-icon {
       background: var(--tertiary-very-low);
       height: 0.355em;
@@ -99,6 +100,7 @@
       margin-right: 0.4em;
       padding: 1px 1px 2px 1px;
     }
+
     &:has(.--users-count) {
       display: none;
     }
diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss
index 7111289392a..490e627aa5a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message.scss
@@ -115,7 +115,7 @@
 
     .react-btn {
       vertical-align: top;
-      padding: 0em 0.25em;
+      padding: 0 0.25em;
       background: none;
       border: none;
       will-change: scale;
@@ -178,6 +178,7 @@
 
     &.-deleted {
       background-color: var(--danger-low);
+
       .chat-message-expand {
         color: var(--danger);
       }
diff --git a/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss b/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
index 572d4e4b04a..ed2378bab00 100644
--- a/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
@@ -7,7 +7,7 @@
   z-index: 1;
   margin: 0 1px 0 0;
   will-change: transform;
-  @include chat-scrollbar();
+  @include chat-scrollbar;
   min-height: 1px;
   box-sizing: border-box;
   transition: padding-top 0.2s ease-in-out;
diff --git a/plugins/chat/assets/stylesheets/common/chat-modal-create-channel.scss b/plugins/chat/assets/stylesheets/common/chat-modal-create-channel.scss
index 256d9495763..ed36faf30b5 100644
--- a/plugins/chat/assets/stylesheets/common/chat-modal-create-channel.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-modal-create-channel.scss
@@ -10,6 +10,7 @@
     width: 100%;
     margin-bottom: 0;
   }
+
   .category-chooser {
     .select-kit-selected-name.selected-name.choice {
       color: var(
diff --git a/plugins/chat/assets/stylesheets/common/chat-modal-move-message-to-channel.scss b/plugins/chat/assets/stylesheets/common/chat-modal-move-message-to-channel.scss
index 2f9abebc49e..9d0b27644e1 100644
--- a/plugins/chat/assets/stylesheets/common/chat-modal-move-message-to-channel.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-modal-move-message-to-channel.scss
@@ -1,6 +1,7 @@
 .chat-modal-move-message-to-channel {
   &__channel-chooser {
     width: 100%;
+
     .category-chat-badge {
       .d-icon {
         color: inherit;
diff --git a/plugins/chat/assets/stylesheets/common/chat-navbar.scss b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
index 668bdd66c79..3186147d67a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-navbar.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
@@ -25,7 +25,7 @@
     }
 
     &__toggle-drawer-button {
-      &:after {
+      &::after {
         @container (inline-size) {
           content: "";
           position: absolute;
@@ -56,7 +56,7 @@
 }
 
 .c-navbar__channel-title {
-  @include ellipsis();
+  @include ellipsis;
   font-weight: 700;
   height: var(--chat-header-offset);
   display: flex;
@@ -66,11 +66,11 @@
 .c-navbar__title {
   display: flex;
   align-items: center;
-  @include ellipsis();
+  @include ellipsis;
   height: var(--chat-header-offset);
 
   &-text {
-    @include ellipsis();
+    @include ellipsis;
     font-weight: 700;
     max-width: 100%;
     vertical-align: middle;
@@ -108,6 +108,7 @@
   display: flex;
   align-items: center;
   height: var(--chat-header-offset);
+
   .d-icon {
     color: var(--primary-low-mid);
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-onebox.scss b/plugins/chat/assets/stylesheets/common/chat-onebox.scss
index e19320dbb4b..8430f77ba43 100644
--- a/plugins/chat/assets/stylesheets/common/chat-onebox.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-onebox.scss
@@ -30,6 +30,7 @@
     .chat-onebox-images.onebox {
       display: flex;
       flex-wrap: wrap;
+
       img {
         width: auto;
         max-height: 150px;
diff --git a/plugins/chat/assets/stylesheets/common/chat-reply.scss b/plugins/chat/assets/stylesheets/common/chat-reply.scss
index 5b2259ae07d..4e638e3e15e 100644
--- a/plugins/chat/assets/stylesheets/common/chat-reply.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-reply.scss
@@ -43,6 +43,7 @@
     margin-top: 0;
     display: inline-block;
   }
+
   > p {
     margin-top: 0.35em;
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss
index b71cd1e319e..7d8f2ce8e3f 100644
--- a/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss
@@ -8,7 +8,7 @@
     height: 16px;
   }
 
-  &:before {
+  &::before {
     // unicode zero width space character
     // Ensures the span height is consistent even when empty
     content: "\200b";
@@ -27,9 +27,11 @@
       @media (prefers-reduced-motion: no-preference) {
         animation: chat-replying-indicator__wave 1.8s linear infinite;
       }
+
       &:nth-child(2) {
         animation-delay: -1.6s;
       }
+
       &:nth-child(3) {
         animation-delay: -1.4s;
       }
@@ -41,6 +43,7 @@
       100% {
         transform: initial;
       }
+
       30% {
         transform: translateY(-0.2em);
       }
diff --git a/plugins/chat/assets/stylesheets/common/chat-scroll-to-bottom.scss b/plugins/chat/assets/stylesheets/common/chat-scroll-to-bottom.scss
index eb8cb539643..76710613f38 100644
--- a/plugins/chat/assets/stylesheets/common/chat-scroll-to-bottom.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-scroll-to-bottom.scss
@@ -41,6 +41,7 @@
     &:active,
     &:focus {
       background: none !important;
+
       .d-icon {
         color: var(--secondary) !important;
       }
diff --git a/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss b/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
index d4ab08890aa..247218cfaa5 100644
--- a/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
@@ -34,6 +34,7 @@
   @keyframes chat-quote-message-background-fade-highlight {
     0% {
     }
+
     100% {
       background-color: transparent;
       color: transparent;
diff --git a/plugins/chat/assets/stylesheets/common/chat-skeleton.scss b/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
index adcd57d5a3f..89797a3c68e 100644
--- a/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
@@ -13,7 +13,7 @@
       ". content";
     grid-template-columns: auto 1fr;
 
-    &:not(:first-of-type):not(:last-of-type) {
+    &:not(:first-of-type, :last-of-type) {
       margin-top: 1.5em;
       margin-bottom: 1.5em;
     }
@@ -29,6 +29,7 @@
     .chat-skeleton__body:nth-of-type(odd) & {
       background-color: var(--primary-100);
     }
+
     .chat-skeleton__body:nth-of-type(even) & {
       background-color: var(--primary-200);
     }
@@ -45,6 +46,7 @@
     .chat-skeleton__body:nth-of-type(odd) & {
       background-color: var(--primary-100);
     }
+
     .chat-skeleton__body:nth-of-type(even) & {
       background-color: var(--primary-200);
     }
@@ -86,6 +88,7 @@
     .chat-skeleton__body:nth-of-type(odd) & {
       background-color: var(--primary-100);
     }
+
     .chat-skeleton__body:nth-of-type(even) & {
       background-color: var(--primary-200);
     }
@@ -109,10 +112,10 @@
     overflow: hidden;
 
     *[class^="chat-skeleton__message-"]:not(
-        .chat-skeleton__message-content
-      ):not(.chat-skeleton__message-text):not(
+        .chat-skeleton__message-content,
+        .chat-skeleton__message-text,
         .chat-skeleton__message-reactions
-      ):after {
+      )::after {
       position: absolute;
       top: 0;
       right: 0;
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss b/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss
index 21e84ebfeb4..4f0b6286fc5 100644
--- a/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss
@@ -73,12 +73,14 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+
     .chat-user-avatar {
       cursor: pointer;
 
       &__container {
         padding: 0;
       }
+
       .avatar {
         border: 2px solid var(--primary-very-low);
         padding: 0;
@@ -92,6 +94,7 @@
         margin-right: -6px;
       }
     }
+
     .chat-thread-participants__avatar-group {
       overflow: hidden;
       justify-content: flex-start;
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss b/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss
index f3108d86802..8ae3f3aee00 100644
--- a/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss
@@ -35,6 +35,7 @@
         &:not(:last-child) {
           margin-right: -10px;
         }
+
         .avatar {
           border: 1px solid var(--primary-very-low);
         }
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread.scss b/plugins/chat/assets/stylesheets/common/chat-thread.scss
index 0a16859210f..748b254477e 100644
--- a/plugins/chat/assets/stylesheets/common/chat-thread.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-thread.scss
@@ -2,5 +2,5 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  @include chat-height(var(--chat-header-expanded-offset, 0px));
+  @include chat-height(var(--chat-header-expanded-offset, 0));
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
index 78ecd8f03b3..9e8a9cea335 100644
--- a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
@@ -8,7 +8,7 @@
 
   &__items {
     overflow-y: scroll;
-    @include chat-scrollbar();
+    @include chat-scrollbar;
     box-sizing: border-box;
     flex-grow: 1;
     overscroll-behavior: contain;
@@ -18,6 +18,6 @@
 
   &__no-threads {
     @include thread-list-item;
-    margin: 0.5rem 0rem 0.5rem 0.5rem;
+    margin: 0.5rem 0 0.5rem 0.5rem;
   }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-transcript.scss b/plugins/chat/assets/stylesheets/common/chat-transcript.scss
index ff4c2312bea..09868ad8e5a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-transcript.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-transcript.scss
@@ -78,6 +78,7 @@
 
         .chat-transcript-thread {
           min-width: 0;
+
           &-header {
             margin-bottom: 0.5rem;
           }
@@ -106,7 +107,6 @@
 
     .chat-transcript-reaction {
       @include chat-reaction;
-
       pointer-events: none;
     }
   }
@@ -114,6 +114,7 @@
   .chat-transcript-images.onebox {
     display: flex;
     flex-wrap: wrap;
+
     img {
       width: auto;
       max-height: 150px;
diff --git a/plugins/chat/assets/stylesheets/common/chat-upload-drop-zone.scss b/plugins/chat/assets/stylesheets/common/chat-upload-drop-zone.scss
index 51605df508c..7ece4e1b5ad 100644
--- a/plugins/chat/assets/stylesheets/common/chat-upload-drop-zone.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-upload-drop-zone.scss
@@ -32,7 +32,6 @@
         transform: scale(1);
       }
     }
-
     position: absolute;
     top: 0;
     left: calc(50% - 100px / 2);
@@ -49,7 +48,6 @@
         transform: scale(1);
       }
     }
-
     position: absolute;
     top: 0;
     left: calc(50% - 100px / 2);
diff --git a/plugins/chat/assets/stylesheets/common/chat-user-avatar.scss b/plugins/chat/assets/stylesheets/common/chat-user-avatar.scss
index 11d0082da08..bb45ff02795 100644
--- a/plugins/chat/assets/stylesheets/common/chat-user-avatar.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-user-avatar.scss
@@ -6,8 +6,8 @@
   &.is-online {
     .avatar {
       padding: 2px;
-      box-shadow: inset 0px 0px 0px 1px var(--success),
-        inset 0px 0px 0px 2px var(--secondary);
+      box-shadow: inset 0 0 0 1px var(--success),
+        inset 0 0 0 2px var(--secondary);
     }
   }
 
@@ -22,8 +22,8 @@
       .chat-message & {
         width: 10px;
         height: 10px;
-        right: 0px;
-        bottom: 0px;
+        right: 0;
+        bottom: 0;
       }
 
       .chat-channel-title & {
diff --git a/plugins/chat/assets/stylesheets/common/chat-user-threads.scss b/plugins/chat/assets/stylesheets/common/chat-user-threads.scss
index b58ed1a7b2a..aada85a7eeb 100644
--- a/plugins/chat/assets/stylesheets/common/chat-user-threads.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-user-threads.scss
@@ -12,6 +12,7 @@
   .chat-message-thread-indicator {
     margin-left: 0;
     margin-top: 1rem;
+
     &:hover {
       box-shadow: none;
     }
@@ -59,9 +60,11 @@
 //sidebar
 #sidebar-section-content-user-threads {
   padding-bottom: 0.35em;
+
   .sidebar-section-link-content-text {
     color: var(--d-sidebar-link-color);
   }
+
   .active .sidebar-section-link-content-text {
     color: var(--d-sidebar-active-color);
   }
diff --git a/plugins/chat/assets/stylesheets/common/core-extensions.scss b/plugins/chat/assets/stylesheets/common/core-extensions.scss
index 89725bb9c3a..13f7dd420f0 100644
--- a/plugins/chat/assets/stylesheets/common/core-extensions.scss
+++ b/plugins/chat/assets/stylesheets/common/core-extensions.scss
@@ -21,6 +21,7 @@
 
   li.user-profile-controls-outlet.chat-button {
     order: -1;
+
     &:empty {
       display: none;
     }
diff --git a/plugins/chat/assets/stylesheets/common/direct-message-creator.scss b/plugins/chat/assets/stylesheets/common/direct-message-creator.scss
index c857ae4d8d3..cd9016261a3 100644
--- a/plugins/chat/assets/stylesheets/common/direct-message-creator.scss
+++ b/plugins/chat/assets/stylesheets/common/direct-message-creator.scss
@@ -36,7 +36,6 @@
 
   .selected-user {
     list-style: none;
-    padding: 0;
     margin: 1px 0.25rem 0.25rem 1px;
     padding: 0.25rem 0.5rem 0.25rem 0.25rem;
     background: var(--primary-very-low);
@@ -166,6 +165,7 @@
 
     .btn {
       padding: 0.25em;
+
       &:last-child {
         margin: 0;
       }
diff --git a/plugins/chat/assets/stylesheets/common/incoming-chat-webhooks.scss b/plugins/chat/assets/stylesheets/common/incoming-chat-webhooks.scss
index 4421a8fa185..305e3589698 100644
--- a/plugins/chat/assets/stylesheets/common/incoming-chat-webhooks.scss
+++ b/plugins/chat/assets/stylesheets/common/incoming-chat-webhooks.scss
@@ -19,6 +19,7 @@
         font-size: var(--font-up-1);
       }
     }
+
     &--controls {
       display: inline-block;
       vertical-align: top;
diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss
index aa6dc98230a..9d38abf2752 100644
--- a/plugins/chat/assets/stylesheets/common/index.scss
+++ b/plugins/chat/assets/stylesheets/common/index.scss
@@ -56,7 +56,6 @@
 @import "chat-modal-archive-channel";
 @import "chat-modal-edit-channel-description";
 @import "chat-modal-create-channel";
-@import "chat-modal-create-channel";
 @import "chat-modal-channel-summary";
 @import "chat-modal-move-message-to-channel";
 @import "chat-scroll-to-bottom";
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss b/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss
index 9724af623c5..823d651bdea 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss
@@ -27,10 +27,12 @@
 
     &.--threads {
       margin-top: 0.25rem;
+
       .c-unread-indicator {
         width: 8px;
         height: 8px;
       }
+
       .chat-channel-title {
         gap: 0.5rem;
         color: var(--primary);
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss b/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss
index cfcd6255e48..10ff04003f7 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss
@@ -32,9 +32,11 @@
         height: 2.5em;
         padding: 0 0.5rem;
         margin: 0 0.5rem 0.125rem 0.5rem;
+
         &:hover,
         &.active {
           background-color: var(--primary-low);
+
           .chat-channel-title {
             .category-chat-name,
             .chat-name,
@@ -51,9 +53,11 @@
         }
       }
     }
+
     .channels-list-container {
       height: auto;
     }
+
     .channels-list-container.center-empty-channels-list {
       height: 90%;
     }
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-message-thread-indicator.scss b/plugins/chat/assets/stylesheets/desktop/chat-message-thread-indicator.scss
index 9863732a557..4a1b3ba6d4f 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-message-thread-indicator.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-message-thread-indicator.scss
@@ -15,11 +15,13 @@
     grid-template-areas:
       "avatar info info participants"
       "excerpt excerpt excerpt replies";
+
     &__replies-count {
       align-self: center;
       grid-area: replies;
       justify-content: flex-end;
     }
+
     &__last-reply-excerpt {
       white-space: wrap;
       display: -webkit-box;
diff --git a/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss b/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
index db27af0dd2f..461dc18680f 100644
--- a/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
+++ b/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
@@ -2,7 +2,6 @@
   --scrollbarBg: transparent;
   --scrollbarThumbBg: var(--primary-low);
   --scrollbarWidth: 10px;
-
   scrollbar-color: transparent var(--scrollbarBg);
   transition: scrollbar-color 0.25s ease-in-out;
 
diff --git a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
index 18632587a0e..dd4c1797ea8 100644
--- a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
+++ b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
@@ -67,6 +67,7 @@ html.has-full-page-chat {
   &.active .d-icon {
     color: var(--primary-medium);
   }
+
   .chat-channel-unread-indicator {
     border-color: var(--primary-very-low);
   }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss b/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
index d7c30846923..29be3b7613f 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
@@ -3,6 +3,7 @@
     padding-bottom: 1em;
   }
 }
+
 .c-channel-members {
   width: 100%;
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss b/plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss
index 45f8bc408c7..5a599f406a6 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss
@@ -1,6 +1,7 @@
 :root {
   --channel-list-avatar-size: 43px;
 }
+
 .chat-channel-row {
   margin: 0;
   border-radius: 0;
@@ -15,7 +16,6 @@
     .chat-channel-row__content {
       background-color: var(--danger-low);
     }
-
     height: 0 !important;
     overflow: hidden;
     opacity: 0.5 !important;
@@ -27,14 +27,16 @@
     z-index: 2;
     box-sizing: border-box;
     transition: border-radius 0.25s ease-in-out;
+
     //for sliding delete animation
     background: var(--primary-very-low);
     height: 100%;
 
     &.-animate-reset {
       transition: margin-right 0.15s ease-out;
-      margin-right: 0px !important;
+      margin-right: 0 !important;
     }
+
     &:not(.-animate-reset) {
       border-top-right-radius: 0.25rem;
       border-bottom-right-radius: 0.25rem;
@@ -48,6 +50,7 @@
       align-items: center;
       flex-grow: 1;
     }
+
     .is-dm & {
       display: grid;
       grid-template-areas:
@@ -55,6 +58,7 @@
         "msg msg";
       width: 100%;
       align-items: center;
+
       &:has(.chat-channel-unread-indicator) {
         grid-template-areas:
           "name metadata"
@@ -69,10 +73,10 @@
     justify-content: flex-end;
     align-items: center;
     position: absolute;
-    top: 0px;
-    bottom: 0px;
-    right: 0px;
-    left: 0px;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
     background: var(--danger);
     color: var(--primary-very-low);
 
@@ -101,16 +105,20 @@
     &__channel-info {
       grid-area: name;
     }
+
     &__metadata {
       grid-area: metadata;
+
       .chat-channel-unread-indicator {
         font-size: var(--font-down-2);
         margin-top: 0.25rem;
       }
     }
+
     &__metadata-date {
       font-size: var(--font-down-2);
     }
+
     &__last-message {
       @include ellipsis;
       grid-area: msg;
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-composer.scss b/plugins/chat/assets/stylesheets/mobile/chat-composer.scss
index 35a538aa6c1..0dea530a46e 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-composer.scss
@@ -2,10 +2,12 @@
   &__wrapper {
     padding-top: 0.75rem;
     background: none;
+
     .chat-replying-indicator {
       padding-left: calc(1rem + (2 * 5px) + 0.2rem + (2 * 0.65rem) + 1px);
     }
   }
+
   &__outer-container {
     padding: 0;
     align-items: flex-end;
@@ -14,22 +16,27 @@
       opacity: 0.5;
     }
   }
+
   &__inner-container {
     align-self: stretch;
     min-height: unset;
   }
+
   &__input-container {
     padding: 0.15em 0.5em;
     background: var(--primary-very-low);
   }
+
   &__input {
     .ios-device & {
       background-color: transparent;
     }
   }
+
   &-button__wrapper {
     margin-bottom: 0.3em;
   }
+
   &-button.-send {
     height: auto;
     width: auto;
@@ -42,6 +49,7 @@
     .is-send-enabled & {
       background-color: var(--tertiary-high);
       color: var(--secondary);
+
       .d-icon {
         color: inherit;
       }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-form.scss b/plugins/chat/assets/stylesheets/mobile/chat-form.scss
index f443a8aed92..afbaf713ee0 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-form.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-form.scss
@@ -14,11 +14,13 @@
       padding: 1rem;
     }
   }
+
   &__section-title {
     .chat-form__section:not(:first-of-type) & {
       margin-top: 1.5rem;
     }
   }
+
   &__row-content {
     min-height: 40px;
   }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message-creator.scss b/plugins/chat/assets/stylesheets/mobile/chat-message-creator.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message-thread-indicator.scss b/plugins/chat/assets/stylesheets/mobile/chat-message-thread-indicator.scss
index 2e9c7fc0016..7cf57f64c20 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-message-thread-indicator.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-message-thread-indicator.scss
@@ -21,6 +21,7 @@
     margin-top: 0.5rem;
     margin-right: 0.25rem;
   }
+
   &__replies-count {
     grid-area: replies;
   }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message.scss b/plugins/chat/assets/stylesheets/mobile/chat-message.scss
index ca852dd5278..629a85c1fb1 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-message.scss
@@ -36,9 +36,11 @@
     0% {
       transform: scale(1);
     }
+
     80% {
       transform: scale(0.95);
     }
+
     100% {
       transform: scale(1);
     }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss b/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss
index 03e9d1a8638..941481b92eb 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss
@@ -42,8 +42,10 @@
   .chat__thread-title-container {
     display: flex;
     grid-area: title;
+
     .chat__thread-title {
       @include ellipsis;
+
       &__name {
         @include ellipsis;
       }
diff --git a/plugins/chat/assets/stylesheets/mobile/index.scss b/plugins/chat/assets/stylesheets/mobile/index.scss
index 6b3e0e9cd3c..5e2eab04656 100644
--- a/plugins/chat/assets/stylesheets/mobile/index.scss
+++ b/plugins/chat/assets/stylesheets/mobile/index.scss
@@ -9,7 +9,6 @@
 @import "chat-thread";
 @import "chat-threads-list";
 @import "chat-message-thread-indicator";
-@import "chat-message-creator";
 @import "chat-channel-row";
 @import "chat-channel-members";
 @import "chat-channel-settings";
diff --git a/plugins/checklist/assets/stylesheets/checklist.scss b/plugins/checklist/assets/stylesheets/checklist.scss
index b4b9752d87e..bebcf914c8b 100644
--- a/plugins/checklist/assets/stylesheets/checklist.scss
+++ b/plugins/checklist/assets/stylesheets/checklist.scss
@@ -3,18 +3,13 @@ span.chcklst-stroked {
 }
 
 @mixin checklist-svg-icon($svg) {
-  &:before {
+  &::before {
     background-color: var(--primary);
     content: "";
-    -webkit-mask: svg-uri(
-        '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 448 512"><path d="#{$svg}"></path></svg>'
-      )
-      no-repeat 50% 50%;
     mask: svg-uri(
         '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 448 512"><path d="#{$svg}"></path></svg>'
       )
       no-repeat 50% 50%;
-    -webkit-mask-size: cover;
     mask-size: cover;
     width: 1em;
     height: 1em;
@@ -32,6 +27,7 @@ span.chcklst-box {
         "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"
       );
     }
+
     &.fa-square {
       @include checklist-svg-icon(
         "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"
@@ -80,7 +76,8 @@ ul li.has-checkbox {
   0% {
     transform: rotate(0deg);
   }
-  to {
+
+  100% {
     transform: rotate(1turn);
   }
 }
diff --git a/plugins/discourse-details/assets/stylesheets/details.scss b/plugins/discourse-details/assets/stylesheets/details.scss
index 741464acc55..40b415b52ab 100644
--- a/plugins/discourse-details/assets/stylesheets/details.scss
+++ b/plugins/discourse-details/assets/stylesheets/details.scss
@@ -52,7 +52,7 @@ summary:first-of-type {
   display: block;
 }
 
-summary:before {
+summary::before {
   content: "\25BA";
   margin-right: 0.25em;
 }
@@ -62,8 +62,8 @@ details[open] .lightbox-wrapper {
   display: block;
 }
 
-details[open] > summary:before,
-details.open > summary:before {
+details[open] > summary::before,
+details.open > summary::before {
   content: "\25BC";
 }
 
@@ -99,12 +99,13 @@ summary::-webkit-details-marker {
     &[open] {
       background: var(--primary-very-low);
       padding: 0.5rem 0.75rem;
+
       summary {
         padding: 0;
       }
     }
 
-    summary:before {
+    summary::before {
       content: "" !important;
       display: none;
     }
diff --git a/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss b/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss
index 045981f100d..4be35f2612f 100644
--- a/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss
+++ b/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss
@@ -32,12 +32,11 @@
     }
 
     &:focus {
-      outline: 5px auto Highlight;
       outline: 5px auto -webkit-focus-ring-color;
     }
 
     &:active {
-      outline: 0px;
+      outline: 0;
     }
   }
 
diff --git a/plugins/discourse-presence/assets/stylesheets/presence.scss b/plugins/discourse-presence/assets/stylesheets/presence.scss
index da305830e84..b9dfb6f6467 100644
--- a/plugins/discourse-presence/assets/stylesheets/presence.scss
+++ b/plugins/discourse-presence/assets/stylesheets/presence.scss
@@ -75,7 +75,7 @@
 
 // When topic progress is visible in the posts grid area and is sticky,
 // adjust positioning so presence is on the same line
-@media screen and (max-width: 924px) {
+@media screen and (width <= 924px) {
   body:has(.topic-navigation.with-topic-progress)
     .topic-above-footer-buttons-outlet.presence {
     margin-top: -3.2em;
diff --git a/plugins/footnote/assets/stylesheets/footnotes.scss b/plugins/footnote/assets/stylesheets/footnotes.scss
index 57e98c403c1..e208dccc98d 100644
--- a/plugins/footnote/assets/stylesheets/footnotes.scss
+++ b/plugins/footnote/assets/stylesheets/footnotes.scss
@@ -1,7 +1,7 @@
 .inline-footnotes {
   a.expand-footnote {
     user-select: none;
-    padding: 0px 0.5em;
+    padding: 0 0.5em;
     margin: 0 0 0 0.25em;
     color: var(--primary-low-mid-or-secondary-high);
     background: var(--primary-low);
@@ -25,6 +25,7 @@
   .footnotes-list,
   .footnotes-sep {
     position: absolute;
+
     // the left/right positioning prevents overflow issues
     // with long words causing overflow on small screens
     left: 0;
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index 4c645da9fb7..4d9d6c1b684 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -22,6 +22,7 @@ div.poll-outer {
       color: var(--primary);
       padding: 0.5em 0;
       word-break: break-word;
+
       button {
         background-color: transparent;
         border: none;
@@ -55,11 +56,13 @@ div.poll-outer {
         &.nav-items {
           display: flex;
           gap: 0.5em;
+
           .nav-btn {
             background-color: var(--secondary);
             border: none;
             color: var(--primary-medium);
           }
+
           .active {
             .nav-btn {
               color: var(--primary);
@@ -67,10 +70,12 @@ div.poll-outer {
           }
         }
       }
+
       .rank {
         display: inline-block;
         min-width: 20px;
       }
+
       .poll-results-ranked_choice-subtitle-rounds {
         margin: 0.25em 0 0.67rem;
       }
@@ -79,8 +84,8 @@ div.poll-outer {
     img {
       // Hacky way to stop images without width/height
       // from causing abrupt unintended scrolling
-      &:not([width]):not(.emoji),
-      &:not([height]):not(.emoji) {
+      &:not([width], .emoji),
+      &:not([height], .emoji) {
         width: 200px !important;
         height: 200px !important;
         object-fit: contain;
@@ -97,6 +102,7 @@ div.poll-outer {
       @include breakpoint("mobile-extra-large") {
         border-top: 1px solid var(--primary-low);
         flex-direction: row-reverse;
+
         &_counts,
         &_instructions {
           padding: 1em;
@@ -153,10 +159,12 @@ div.poll-outer {
             display: flex;
             flex-direction: column;
             align-items: center;
+
             .info-label,
             .info-number {
               margin: 0;
             }
+
             + .poll-info_counts-count {
               display: flex;
               flex-direction: row;
@@ -165,6 +173,7 @@ div.poll-outer {
               min-width: 0;
               gap: 0 0.33em;
               margin: 0.5em;
+
               .info-number,
               .info-label {
                 font-size: var(--font-up-1);
@@ -188,12 +197,14 @@ div.poll-outer {
         flex-direction: column;
         justify-content: center;
         align-self: start;
+
         &:empty {
           display: none;
         }
 
         @include breakpoint("mobile-extra-large", min-width) {
           padding-top: 1.25em;
+
           &:not(:empty) {
             border-top: 1px solid var(--primary-low);
           }
@@ -203,6 +214,7 @@ div.poll-outer {
           padding-right: 1em;
           height: 100%;
           flex: 1 1 auto;
+
           &:not(:empty) {
             border-right: 1px solid var(--primary-low);
           }
@@ -211,6 +223,7 @@ div.poll-outer {
         li {
           display: flex;
           gap: 0.5em;
+
           &:not(:last-child) {
             margin-bottom: 0.5em;
           }
@@ -219,15 +232,18 @@ div.poll-outer {
             &:not(:last-child) {
               margin-bottom: 1em;
             }
+
             &:not(:first-child:last-child) {
               // only applied when there are multiple items
               .d-icon {
                 width: 15%;
               }
+
               span {
                 width: 85%;
               }
             }
+
             &:first-child:last-child {
               // when there's a single item, it looks better centered
               display: inline;
@@ -251,6 +267,7 @@ div.poll-outer {
         .info-label {
           font-size: var(--font-up-2);
         }
+
         .info-number {
           font-size: var(--font-up-6);
         }
@@ -294,17 +311,20 @@ div.poll-outer {
       button {
         white-space: nowrap;
         align-self: start;
+
         .d-button-label {
           @include ellipsis;
         }
 
         @include breakpoint("tablet") {
           flex: 1 1 0;
+
           &:first-child:last-child {
             // if there's only one button,
             // don't expand the width
             flex: 0 1 auto;
           }
+
           &.toggle-results:first-child {
             // don't expand the back button
             flex: 0 1 auto;
@@ -360,10 +380,12 @@ div.poll-outer {
       > li {
         cursor: default;
         padding: 0.25em 0;
+
         &:last-child {
           padding-bottom: 0;
         }
       }
+
       .option {
         p {
           margin: 0;
@@ -440,7 +462,7 @@ div.poll-outer {
       padding: 0;
     }
 
-    li[data-poll-option-id]:before {
+    li[data-poll-option-id]::before {
       position: relative;
       vertical-align: baseline;
       border: 2px solid var(--primary);
@@ -461,7 +483,7 @@ div.poll-outer {
     }
 
     &[data-poll-type="multiple"] {
-      li[data-poll-option-id]:before {
+      li[data-poll-option-id]::before {
         border-radius: 3px;
       }
     }
@@ -469,7 +491,8 @@ div.poll-outer {
     &[data-poll-type="ranked_choice"] {
       li[data-poll-option-id] {
         position: relative;
-        &:before {
+
+        &::before {
           mask-image: svg-uri(
             '<svg width="0.75em" height="0.75em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>'
           );
@@ -481,7 +504,8 @@ div.poll-outer {
           border-radius: var(--d-button-border-radius);
           border: none;
         }
-        &:after {
+
+        &::after {
           content: "";
           position: absolute;
           height: 1.125em;
diff --git a/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss
index 38ed1f05a17..3ee262e9935 100644
--- a/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss
+++ b/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss
@@ -11,6 +11,7 @@
     display: flex;
     justify-content: space-between;
   }
+
   .column {
     display: inline-block;
     width: calc(50% - 10px);
diff --git a/plugins/spoiler-alert/assets/stylesheets/discourse_spoiler_alert.scss b/plugins/spoiler-alert/assets/stylesheets/discourse_spoiler_alert.scss
index 1b003e9c656..119c4b227df 100644
--- a/plugins/spoiler-alert/assets/stylesheets/discourse_spoiler_alert.scss
+++ b/plugins/spoiler-alert/assets/stylesheets/discourse_spoiler_alert.scss
@@ -1,6 +1,6 @@
 .spoiled {
   cursor: auto;
-  -webkit-transform: translateZ(0); // Safari jitter fix
+  transform: translateZ(0); // Safari jitter fix
 
   .lightbox .meta {
     display: none;
diff --git a/plugins/styleguide/assets/stylesheets/colors.scss b/plugins/styleguide/assets/stylesheets/colors.scss
index e9c59595754..788b114af63 100644
--- a/plugins/styleguide/assets/stylesheets/colors.scss
+++ b/plugins/styleguide/assets/stylesheets/colors.scss
@@ -2,141 +2,187 @@
   .primary-50 {
     background-color: var(--primary-50);
   }
+
   .primary-100 {
     background-color: var(--primary-100);
   }
+
   .primary-200 {
     background-color: var(--primary-200);
   }
+
   .primary-300 {
     background-color: var(--primary-300);
   }
+
   .primary-400 {
     background-color: var(--primary-400);
   }
+
   .primary-500 {
     background-color: var(--primary-500);
   }
+
   .primary-600 {
     background-color: var(--primary-600);
   }
+
   .primary-700 {
     background-color: var(--primary-700);
   }
+
   .primary-800 {
     background-color: var(--primary-800);
   }
+
   .primary-900 {
     background-color: var(--primary-900);
   }
+
   .primary-very-low {
     background-color: var(--primary-very-low);
   }
+
   .primary-low {
     background-color: var(--primary-low);
   }
+
   .primary-low-mid {
     background-color: var(--primary-low-mid);
   }
+
   .primary-medium {
     background-color: var(--primary-medium);
   }
+
   .primary-high {
     background-color: var(--primary-high);
   }
+
   .primary {
     background-color: var(--primary);
   }
+
   .secondary-low {
     background-color: var(--secondary-low);
   }
+
   .secondary-medium {
     background-color: var(--secondary-medium);
   }
+
   .secondary-high {
     background-color: var(--secondary-high);
   }
+
   .secondary {
     background-color: var(--secondary);
   }
+
   .tertiary-low {
     background-color: var(--tertiary-low);
   }
+
   .tertiary-medium {
     background-color: var(--tertiary-medium);
   }
+
   .tertiary-high {
     background-color: var(--tertiary-high);
   }
+
   .tertiary {
     background-color: var(--tertiary);
   }
+
   .tertiary-50 {
     background-color: var(--tertiary-50);
   }
+
   .tertiary-100 {
     background-color: var(--tertiary-100);
   }
+
   .tertiary-200 {
     background-color: var(--tertiary-200);
   }
+
   .tertiary-300 {
     background-color: var(--tertiary-300);
   }
+
   .tertiary-400 {
     background-color: var(--tertiary-400);
   }
+
   .tertiary-500 {
     background-color: var(--tertiary-500);
   }
+
   .tertiary-600 {
     background-color: var(--tertiary-600);
   }
+
   .tertiary-700 {
     background-color: var(--tertiary-700);
   }
+
   .tertiary-800 {
     background-color: var(--tertiary-800);
   }
+
   .tertiary-900 {
     background-color: var(--tertiary-900);
   }
+
   .quaternary-low {
     background-color: var(--quaternary-low);
   }
+
   .quaternary {
     background-color: var(--quaternary);
   }
+
   .highlight-bg {
     background-color: var(--highlight-bg);
   }
+
   .highlight {
     background-color: var(--highlight);
   }
+
   .danger-low {
     background-color: var(--danger-low);
   }
+
   .danger-low-mid {
     background-color: var(--danger-low-mid);
   }
+
   .danger-medium {
     background-color: var(--danger-medium);
   }
+
   .danger {
     background-color: var(--danger);
   }
+
   .success-low {
     background-color: var(--success-low);
   }
+
   .success-medium {
     background-color: var(--success-medium);
   }
+
   .success {
     background-color: var(--success);
   }
+
   .love-low {
     background-color: var(--love-low);
   }
+
   .love {
     background-color: var(--love);
   }
diff --git a/plugins/styleguide/assets/stylesheets/styleguide.scss b/plugins/styleguide/assets/stylesheets/styleguide.scss
index cd2952d2c18..789e4e0192c 100644
--- a/plugins/styleguide/assets/stylesheets/styleguide.scss
+++ b/plugins/styleguide/assets/stylesheets/styleguide.scss
@@ -106,26 +106,29 @@
           }
         }
       }
-
       margin-bottom: 2em;
     }
 
     &.colors-examples {
       .styleguide-example {
         display: flex;
+
         .example-title {
           min-width: 15%;
           margin-right: 1em;
           border-bottom: none;
+
           &-text {
             color: var(--primary);
             text-transform: capitalize;
           }
+
           &-use-case {
             font-size: var(--font-down-1);
             display: block;
           }
         }
+
         .color-row {
           display: flex;
 
@@ -141,6 +144,7 @@
               flex: 4;
               border-bottom: 1px solid var(--primary-300);
             }
+
             .color-name {
               flex: 1;
               display: flex;
@@ -158,13 +162,16 @@
   pre {
     background: var(--primary-very-low);
     white-space: pre-wrap;
+
     &.pre-inline {
       display: inline-block;
       margin: 0;
       vertical-align: bottom;
     }
+
     span {
       color: var(--primary-medium);
+
       &.hljs-attribute {
         color: teal;
       }
@@ -218,11 +225,13 @@
     text-align: center;
     padding: 10px;
     overflow: hidden;
+
     svg {
       display: block;
       font-size: 3em;
       margin: 5px auto;
     }
+
     span {
       font-size: var(--font-down-1);
       word-wrap: break-word;
diff --git a/plugins/styleguide/assets/stylesheets/typography.scss b/plugins/styleguide/assets/stylesheets/typography.scss
index 9550481c152..cb7a0886466 100644
--- a/plugins/styleguide/assets/stylesheets/typography.scss
+++ b/plugins/styleguide/assets/stylesheets/typography.scss
@@ -5,39 +5,51 @@ p[class*="font-"] {
 .font-up-6 {
   font-size: var(--font-up-6);
 }
+
 .font-up-5 {
   font-size: var(--font-up-5);
 }
+
 .font-up-4 {
   font-size: var(--font-up-4);
 }
+
 .font-up-3 {
   font-size: var(--font-up-3);
 }
+
 .font-up-2 {
   font-size: var(--font-up-2);
 }
+
 .font-up-1 {
   font-size: var(--font-up-1);
 }
+
 .font-0 {
   font-size: var(--font-0);
 }
+
 .font-down-1 {
   font-size: var(--font-down-1);
 }
+
 .font-down-2 {
   font-size: var(--font-down-2);
 }
+
 .font-down-3 {
   font-size: var(--font-down-3);
 }
+
 .font-down-4 {
   font-size: var(--font-down-4);
 }
+
 .font-down-5 {
   font-size: var(--font-down-5);
 }
+
 .font-down-6 {
   font-size: var(--font-down-6);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e3d0090f96..e9dbe454657 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -124,6 +124,15 @@ importers:
       squoosh:
         specifier: https://codeload.github.com/discourse/squoosh/tar.gz/dc9649d
         version: https://codeload.github.com/discourse/squoosh/tar.gz/dc9649d
+      stylelint:
+        specifier: ^16.10.0
+        version: 16.13.2(typescript@5.7.3)
+      stylelint-config-standard:
+        specifier: ^36.0.1
+        version: 36.0.1(stylelint@16.13.2(typescript@5.7.3))
+      stylelint-config-standard-scss:
+        specifier: ^13.1.0
+        version: 13.1.0(postcss@8.5.1)(stylelint@16.13.2(typescript@5.7.3))
       terser:
         specifier: ^5.37.0
         version: 5.37.0
@@ -1712,6 +1721,29 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
+  '@csstools/css-parser-algorithms@3.0.4':
+    resolution: {integrity: sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.3
+
+  '@csstools/css-tokenizer@3.0.3':
+    resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==}
+    engines: {node: '>=18'}
+
+  '@csstools/media-query-list-parser@4.0.2':
+    resolution: {integrity: sha512-EUos465uvVvMJehckATTlNqGj4UJWkTmdWuDMjqvSUkjGpmOyFZBVwb4knxCm/k2GMTXY+c/5RkdndzFYWeX5A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.4
+      '@csstools/css-tokenizer': ^3.0.3
+
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
@@ -1731,6 +1763,9 @@ packages:
   '@discourse/moment-timezone-names-translations@1.0.0':
     resolution: {integrity: sha512-4xr1QWQ0nzmFa2ZXQgWZA+dtE/BU2ePA+qkJWPFzNpq4ZnQi8MmMMAS2285t3rc2ySMBQqYaAArmcSUiufUgRA==}
 
+  '@dual-bundle/import-meta-resolve@4.1.0':
+    resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==}
+
   '@ember-compat/tracked-built-ins@0.9.1':
     resolution: {integrity: sha512-A1uYo6EZY6CaKeZoXogxtyJCjz2V0+TXxOZCMJFQHHVuMA1DxYqZoZ25juRWIQpR8r77gTnITtYW2uxBg8vGRw==}
     engines: {node: 14.* || 16.* || >= 18}
@@ -2294,6 +2329,9 @@ packages:
   '@jspreadsheet/formula@2.0.2':
     resolution: {integrity: sha512-PDQYf9REQA53I7tVYkvkeyQxrd5jcjUeHgItYnRpjN2QiIQwawSqBDtGGEVQTSboTG+JwgGCuhvOpj7FxeKwew==}
 
+  '@keyv/serialize@1.0.2':
+    resolution: {integrity: sha512-+E/LyaAeuABniD/RvUezWVXKpeuvwLEA9//nE9952zBaOdBd2mQ3pPoM8cUe2X6IcMByfuSLzmYqnYshG60+HQ==}
+
   '@lint-todo/utils@13.1.1':
     resolution: {integrity: sha512-F5z53uvRIF4dYfFfJP3a2Cqg+4P1dgJchJsFnsZE0eZp0LK8X7g2J0CsJHRgns+skpXOlM7n5vFGwkWCWj8qJg==}
     engines: {node: 12.* || >= 14}
@@ -2963,6 +3001,10 @@ packages:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
 
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
   async-disk-cache@1.3.5:
     resolution: {integrity: sha512-VZpqfR0R7CEOJZ/0FOTgWq70lCrZyS1rkI8PXugDUkTKyyAUgZ2zQ09gLhMkEn+wN8LYeUTPxZdXtlX/kmbXKQ==}
 
@@ -3117,6 +3159,9 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+
   bare-events@2.2.0:
     resolution: {integrity: sha512-Yyyqff4PIFfSuthCZqLlPISTWHmnQxoPuAvkmgzsJEmG3CesdIv6Xweayl0JkCZJSB2yYIdJyEz97tpxNhgjbg==}
 
@@ -3361,6 +3406,9 @@ packages:
   buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
 
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
   bytes@1.0.0:
     resolution: {integrity: sha512-/x68VkHLeTl3/Ll8IvxdwzhrT+IyKc52e/oyHhA2RwqPqswSnjVbSddfPRwAsJtbilMAPSRWwAlpxdYsSWOTKQ==}
 
@@ -3380,6 +3428,9 @@ packages:
     resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
     engines: {node: '>=0.10.0'}
 
+  cacheable@1.8.7:
+    resolution: {integrity: sha512-AbfG7dAuYNjYxFUtL1lAqmlWdxczCJ47w7cFjhGcnGnUdwSo6VgmSojfoW3tUI12HUkgTJ5kqj78yyq6TsFtlg==}
+
   calculate-cache-key-for-tree@2.0.0:
     resolution: {integrity: sha512-Quw8a6y8CPmRd6eU+mwypktYCwUcf8yVFIRbNZ6tPQEckX9yd+EBVEPC/GSZZrMWH9e7Vz4pT7XhpmyApRByLQ==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -3558,6 +3609,9 @@ packages:
   color@3.2.1:
     resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
 
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
   colors@1.0.3:
     resolution: {integrity: sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==}
     engines: {node: '>=0.1.90'}
@@ -3873,6 +3927,15 @@ packages:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
 
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   cross-spawn@6.0.5:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
     engines: {node: '>=4.8'}
@@ -3885,6 +3948,10 @@ packages:
     resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
     engines: {node: '>=8'}
 
+  css-functions-list@3.2.3:
+    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
+    engines: {node: '>=12 || >=16'}
+
   css-loader@5.2.7:
     resolution: {integrity: sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==}
     engines: {node: '>= 10.13.0'}
@@ -4427,6 +4494,9 @@ packages:
     resolution: {integrity: sha512-e64Qj9+4aZzjzzFpZC7p5kmm/ccCrbLhAJplhsDXQFs87XTsXwOpH4s1Io2s90Tau/8r2j9f4l/thhDevRjzxw==}
     engines: {node: '>=0.8'}
 
+  error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+
   error@4.4.0:
     resolution: {integrity: sha512-SNDKualLUtT4StGFP7xNfuFybL2f6iJujFtrWuvJqGbVQGaN+adE23veqzPz1hjUjTunLi2EnJ+0SJxtbJreKw==}
 
@@ -4709,6 +4779,10 @@ packages:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
 
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -4725,6 +4799,10 @@ packages:
   fast-uri@3.0.1:
     resolution: {integrity: sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==}
 
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
@@ -4753,6 +4831,9 @@ packages:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
 
+  file-entry-cache@10.0.5:
+    resolution: {integrity: sha512-umpQsJrBNsdMDgreSryMEXvJh66XeLtZUwA8Gj7rHGearGufUFv6rB/bcXRFsiGWw/VeSUgUofF4Rf2UKEOrTA==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -4848,9 +4929,15 @@ packages:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
 
+  flat-cache@6.1.5:
+    resolution: {integrity: sha512-QR+2kN38f8nMfiIQ1LHYjuDEmZNZVjxuxY+HufbS3BW0EX01Q5OnH7iduOYRutmgiXb797HAKcXUeXrvRjjgSQ==}
+
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  flatted@3.3.2:
+    resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
+
   fn.name@1.1.0:
     resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
 
@@ -5071,10 +5158,18 @@ packages:
     resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==}
     engines: {node: '>=0.10.0'}
 
+  global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
+
   global-prefix@1.0.2:
     resolution: {integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==}
     engines: {node: '>=0.10.0'}
 
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+
   global@4.4.0:
     resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
 
@@ -5109,6 +5204,9 @@ packages:
     resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==}
     engines: {node: '>=18'}
 
+  globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
@@ -5203,6 +5301,9 @@ packages:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
 
+  hookified@1.7.0:
+    resolution: {integrity: sha512-XQdMjqC1AyeOzfs+17cnIk7Wdfu1hh2JtcyNfBf5u9jHrT3iZUlGHxLTntFBuk5lwkqJ6l3+daeQdHK5yByHVA==}
+
   hosted-git-info@7.0.2:
     resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -5291,6 +5392,10 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
+  ignore@7.0.3:
+    resolution: {integrity: sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==}
+    engines: {node: '>= 4'}
+
   immer@10.1.1:
     resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==}
 
@@ -5391,6 +5496,9 @@ packages:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
     engines: {node: '>= 0.4'}
 
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
   is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
@@ -5522,6 +5630,10 @@ packages:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
     engines: {node: '>=0.10.0'}
 
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
@@ -5751,6 +5863,9 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  keyv@5.2.3:
+    resolution: {integrity: sha512-AGKecUfzrowabUv0bH1RIR5Vf7w+l4S3xtQAypKaUpTdIR1EbrAcTxHCrpo9Q+IWeUlFE2palRtgIQcgm+PQJw==}
+
   kind-of@3.2.2:
     resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
     engines: {node: '>=0.10.0'}
@@ -5766,6 +5881,9 @@ packages:
   klaw@3.0.0:
     resolution: {integrity: sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==}
 
+  known-css-properties@0.35.0:
+    resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
+
   kuler@2.0.0:
     resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
 
@@ -5849,6 +5967,9 @@ packages:
   line-column@1.0.2:
     resolution: {integrity: sha512-Ktrjk5noGYlHsVnYWh62FLVs4hTb8A3e+vucNZMgPeAOITdshMSgv4cCZQeRDjm7+goqmo6+liZwTXo+U3sVww==}
 
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
   linkify-it@4.0.1:
     resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
 
@@ -5948,6 +6069,9 @@ packages:
   lodash.omit@4.5.0:
     resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
 
+  lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
@@ -6059,6 +6183,9 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  mdn-data@2.15.0:
+    resolution: {integrity: sha512-KIrS0lFPOqA4DgeO16vI5fkAsy8p++WBlbXtB5P1EQs8ubBgguAInNd1DnrCeTRfGchY0kgThgDOOIPyOLH2dQ==}
+
   mdurl@1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
 
@@ -6076,6 +6203,10 @@ packages:
   memory-streams@0.1.3:
     resolution: {integrity: sha512-qVQ/CjkMyMInPaaRMrwWNDvf6boRZXaT/DbQeMYcCWuXPEBf1v8qChOc9OlEVQp2uOvRXa1Qu30fLmKhY6NipA==}
 
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
   merge-descriptors@1.0.3:
     resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
 
@@ -6285,6 +6416,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@5.0.8:
     resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}
     engines: {node: ^18 || >=20}
@@ -6630,6 +6766,10 @@ packages:
     resolution: {integrity: sha512-01TvEktc68vwbJOtWZluyWeVGWjP+bZwXtPDMQVbBKzbJ/vZBif0L69KH1+cHv1SZ6e0FKLvjyHe8mqsIqYOmw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
   parse-passwd@1.0.0:
     resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
     engines: {node: '>=0.10.0'}
@@ -6765,6 +6905,9 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
+  postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+
   postcss-modules-extract-imports@3.1.0:
     resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -6789,10 +6932,29 @@ packages:
     peerDependencies:
       postcss: ^8.1.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.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
+  postcss-selector-parser@7.0.0:
+    resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==}
+    engines: {node: '>=4'}
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -6800,6 +6962,10 @@ packages:
     resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.1:
+    resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
   preact@10.23.2:
     resolution: {integrity: sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==}
 
@@ -7337,6 +7503,10 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  slice-ansi@4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+
   smart-buffer@4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
@@ -7386,6 +7556,10 @@ packages:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
 
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
   source-map-resolve@0.5.3:
     resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
     deprecated: See https://github.com/lydell/source-map-resolve#deprecated
@@ -7589,6 +7763,49 @@ packages:
   styled_string@0.0.1:
     resolution: {integrity: sha512-DU2KZiB6VbPkO2tGSqQ9n96ZstUPjW7X4sGO6V2m1myIQluX0p1Ol8BrA/l6/EesqhMqXOIXs3cJNOy1UuU2BA==}
 
+  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@13.1.0:
+    resolution: {integrity: sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^16.3.1
+    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-scss@6.10.1:
+    resolution: {integrity: sha512-CBqs0jecftIyhic6xba+4OvZUp4B0wNbX19w6Rq1fPo+lBDmTevk+olo8H7u/WQpTSDCDbBN4f3oocQurvXLTQ==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.0.2
+
+  stylelint@16.13.2:
+    resolution: {integrity: sha512-wDlgh0mRO9RtSa3TdidqHd0nOG8MmUyVKl+dxA6C1j8aZRzpNeEgdhFmU5y4sZx4Fc6r46p0fI7p1vR5O2DZqA==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -7601,6 +7818,10 @@ packages:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
+  supports-hyperlinks@3.1.0:
+    resolution: {integrity: sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==}
+    engines: {node: '>=14.18'}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -7621,6 +7842,10 @@ packages:
     resolution: {integrity: sha512-vngT2JmkSapgq0z7uIoYtB9kWOOzMihAAYq/D3Pjm/ODOGMgS4r++B+OZ09U4hWR6EaOdy9eqQ7/8ygbH3wehA==}
     engines: {node: 8.* || >= 10.*}
 
+  table@6.9.0:
+    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
+    engines: {node: '>=10.0.0'}
+
   tap-parser@7.0.0:
     resolution: {integrity: sha512-05G8/LrzqOOFvZhhAk32wsGiPZ1lfUrl+iV7+OkKgfofZxiceZWMHkKmow71YsyVQ8IvGBP2EjcIjE5gL4l5lA==}
     hasBin: true
@@ -9198,6 +9423,21 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
+  '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.3
+
+  '@csstools/css-tokenizer@3.0.3': {}
+
+  '@csstools/media-query-list-parser@4.0.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.0.0)':
+    dependencies:
+      postcss-selector-parser: 7.0.0
+
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -9231,6 +9471,8 @@ snapshots:
 
   '@discourse/moment-timezone-names-translations@1.0.0': {}
 
+  '@dual-bundle/import-meta-resolve@4.1.0': {}
+
   '@ember-compat/tracked-built-ins@0.9.1(patch_hash=s67qh4jsmpbr3llstdi3a5zeze)':
     dependencies:
       '@embroider/addon-shim': 1.9.0
@@ -9972,6 +10214,10 @@ snapshots:
 
   '@jspreadsheet/formula@2.0.2': {}
 
+  '@keyv/serialize@1.0.2':
+    dependencies:
+      buffer: 6.0.3
+
   '@lint-todo/utils@13.1.1':
     dependencies:
       '@types/eslint': 8.56.12
@@ -10745,6 +10991,8 @@ snapshots:
     dependencies:
       tslib: 2.7.0
 
+  astral-regex@2.0.0: {}
+
   async-disk-cache@1.3.5:
     dependencies:
       debug: 2.6.9
@@ -10934,6 +11182,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balanced-match@2.0.0: {}
+
   bare-events@2.2.0:
     optional: true
 
@@ -11465,6 +11715,11 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
+  buffer@6.0.3:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
   bytes@1.0.0: {}
 
   bytes@3.0.0: {}
@@ -11498,6 +11753,11 @@ snapshots:
       union-value: 1.0.1
       unset-value: 1.0.0
 
+  cacheable@1.8.7:
+    dependencies:
+      hookified: 1.7.0
+      keyv: 5.2.3
+
   calculate-cache-key-for-tree@2.0.0:
     dependencies:
       json-stable-stringify: 1.0.2
@@ -11679,6 +11939,8 @@ snapshots:
       color-convert: 1.9.3
       color-string: 1.9.1
 
+  colord@2.9.3: {}
+
   colors@1.0.3: {}
 
   colors@1.4.0: {}
@@ -11828,6 +12090,15 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  cosmiconfig@9.0.0(typescript@5.7.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.7.3
+
   cross-spawn@6.0.5:
     dependencies:
       nice-try: 1.0.5
@@ -11844,6 +12115,8 @@ snapshots:
 
   crypto-random-string@2.0.0: {}
 
+  css-functions-list@3.2.3: {}
+
   css-loader@5.2.7(webpack@5.97.1(@swc/core@1.10.8)(esbuild@0.24.2)):
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.41)
@@ -12844,6 +13117,10 @@ snapshots:
 
   errlop@2.2.0: {}
 
+  error-ex@1.3.2:
+    dependencies:
+      is-arrayish: 0.2.1
+
   error@4.4.0:
     dependencies:
       camelize: 1.0.1
@@ -13330,6 +13607,14 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
@@ -13352,6 +13637,8 @@ snapshots:
 
   fast-uri@3.0.1: {}
 
+  fastest-levenshtein@1.0.16: {}
+
   fastq@1.17.1:
     dependencies:
       reusify: 1.0.4
@@ -13383,6 +13670,10 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
+  file-entry-cache@10.0.5:
+    dependencies:
+      flat-cache: 6.1.5
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -13528,8 +13819,16 @@ snapshots:
       flatted: 3.3.1
       keyv: 4.5.4
 
+  flat-cache@6.1.5:
+    dependencies:
+      cacheable: 1.8.7
+      flatted: 3.3.2
+      hookified: 1.7.0
+
   flatted@3.3.1: {}
 
+  flatted@3.3.2: {}
+
   fn.name@1.1.0: {}
 
   focusable-selectors@0.8.4: {}
@@ -13819,6 +14118,10 @@ snapshots:
       is-windows: 1.0.2
       resolve-dir: 1.0.1
 
+  global-modules@2.0.0:
+    dependencies:
+      global-prefix: 3.0.0
+
   global-prefix@1.0.2:
     dependencies:
       expand-tilde: 2.0.2
@@ -13827,6 +14130,12 @@ snapshots:
       is-windows: 1.0.2
       which: 1.3.1
 
+  global-prefix@3.0.0:
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+
   global@4.4.0:
     dependencies:
       min-document: 2.19.0
@@ -13860,7 +14169,7 @@ snapshots:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
@@ -13874,6 +14183,8 @@ snapshots:
       slash: 5.1.0
       unicorn-magic: 0.1.0
 
+  globjoin@0.1.4: {}
+
   globrex@0.1.2: {}
 
   gopd@1.0.1:
@@ -13980,6 +14291,8 @@ snapshots:
     dependencies:
       parse-passwd: 1.0.0
 
+  hookified@1.7.0: {}
+
   hosted-git-info@7.0.2:
     dependencies:
       lru-cache: 10.4.3
@@ -14067,6 +14380,8 @@ snapshots:
 
   ignore@5.3.2: {}
 
+  ignore@7.0.3: {}
+
   immer@10.1.1: {}
 
   immutable@4.3.7: {}
@@ -14192,6 +14507,8 @@ snapshots:
       call-bind: 1.0.7
       get-intrinsic: 1.2.4
 
+  is-arrayish@0.2.1: {}
+
   is-arrayish@0.3.2: {}
 
   is-bigint@1.0.4:
@@ -14295,6 +14612,8 @@ snapshots:
     dependencies:
       isobject: 3.0.1
 
+  is-plain-object@5.0.0: {}
+
   is-potential-custom-element-name@1.0.1: {}
 
   is-regex@1.1.4:
@@ -14528,6 +14847,10 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  keyv@5.2.3:
+    dependencies:
+      '@keyv/serialize': 1.0.2
+
   kind-of@3.2.2:
     dependencies:
       is-buffer: 1.1.6
@@ -14542,6 +14865,8 @@ snapshots:
     dependencies:
       graceful-fs: 4.2.11
 
+  known-css-properties@0.35.0: {}
+
   kuler@2.0.0: {}
 
   language-subtag-registry@0.3.23: {}
@@ -14631,6 +14956,8 @@ snapshots:
       isarray: 1.0.0
       isobject: 2.1.0
 
+  lines-and-columns@1.2.4: {}
+
   linkify-it@4.0.1:
     dependencies:
       uc.micro: 1.0.6
@@ -14732,6 +15059,8 @@ snapshots:
 
   lodash.omit@4.5.0: {}
 
+  lodash.truncate@4.4.2: {}
+
   lodash.uniq@4.5.0: {}
 
   lodash@4.17.21: {}
@@ -14867,6 +15196,8 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
+  mdn-data@2.15.0: {}
+
   mdurl@1.0.1: {}
 
   mdurl@2.0.0: {}
@@ -14883,6 +15214,8 @@ snapshots:
     dependencies:
       readable-stream: 1.0.34
 
+  meow@13.2.0: {}
+
   merge-descriptors@1.0.3: {}
 
   merge-stream@2.0.0: {}
@@ -15076,6 +15409,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@3.3.8: {}
+
   nanoid@5.0.8: {}
 
   nanomatch@1.2.13:
@@ -15485,6 +15820,13 @@ snapshots:
       just-diff: 6.0.2
       just-diff-apply: 5.5.0
 
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.26.0
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
   parse-passwd@1.0.0: {}
 
   parse-static-imports@1.1.0: {}
@@ -15582,6 +15924,8 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
+  postcss-media-query-parser@0.2.3: {}
+
   postcss-modules-extract-imports@3.1.0(postcss@8.4.41):
     dependencies:
       postcss: 8.4.41
@@ -15603,11 +15947,26 @@ snapshots:
       icss-utils: 5.1.0(postcss@8.4.41)
       postcss: 8.4.41
 
+  postcss-resolve-nested-selector@0.1.6: {}
+
+  postcss-safe-parser@7.0.1(postcss@8.5.1):
+    dependencies:
+      postcss: 8.5.1
+
+  postcss-scss@4.0.9(postcss@8.5.1):
+    dependencies:
+      postcss: 8.5.1
+
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-selector-parser@7.0.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-value-parser@4.2.0: {}
 
   postcss@8.4.41:
@@ -15616,6 +15975,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.0
 
+  postcss@8.5.1:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   preact@10.23.2: {}
 
   prelude-ls@1.2.1: {}
@@ -16206,6 +16571,12 @@ snapshots:
 
   slash@5.1.0: {}
 
+  slice-ansi@4.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+
   smart-buffer@4.2.0: {}
 
   snake-case@3.0.4:
@@ -16292,6 +16663,8 @@ snapshots:
 
   source-map-js@1.2.0: {}
 
+  source-map-js@1.2.1: {}
+
   source-map-resolve@0.5.3:
     dependencies:
       atob: 2.1.2
@@ -16504,6 +16877,88 @@ snapshots:
 
   styled_string@0.0.1: {}
 
+  stylelint-config-recommended-scss@14.1.0(postcss@8.5.1)(stylelint@16.13.2(typescript@5.7.3)):
+    dependencies:
+      postcss-scss: 4.0.9(postcss@8.5.1)
+      stylelint: 16.13.2(typescript@5.7.3)
+      stylelint-config-recommended: 14.0.1(stylelint@16.13.2(typescript@5.7.3))
+      stylelint-scss: 6.10.1(stylelint@16.13.2(typescript@5.7.3))
+    optionalDependencies:
+      postcss: 8.5.1
+
+  stylelint-config-recommended@14.0.1(stylelint@16.13.2(typescript@5.7.3)):
+    dependencies:
+      stylelint: 16.13.2(typescript@5.7.3)
+
+  stylelint-config-standard-scss@13.1.0(postcss@8.5.1)(stylelint@16.13.2(typescript@5.7.3)):
+    dependencies:
+      stylelint: 16.13.2(typescript@5.7.3)
+      stylelint-config-recommended-scss: 14.1.0(postcss@8.5.1)(stylelint@16.13.2(typescript@5.7.3))
+      stylelint-config-standard: 36.0.1(stylelint@16.13.2(typescript@5.7.3))
+    optionalDependencies:
+      postcss: 8.5.1
+
+  stylelint-config-standard@36.0.1(stylelint@16.13.2(typescript@5.7.3)):
+    dependencies:
+      stylelint: 16.13.2(typescript@5.7.3)
+      stylelint-config-recommended: 14.0.1(stylelint@16.13.2(typescript@5.7.3))
+
+  stylelint-scss@6.10.1(stylelint@16.13.2(typescript@5.7.3)):
+    dependencies:
+      css-tree: 3.1.0
+      is-plain-object: 5.0.0
+      known-css-properties: 0.35.0
+      mdn-data: 2.15.0
+      postcss-media-query-parser: 0.2.3
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-selector-parser: 7.0.0
+      postcss-value-parser: 4.2.0
+      stylelint: 16.13.2(typescript@5.7.3)
+
+  stylelint@16.13.2(typescript@5.7.3):
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+      '@csstools/media-query-list-parser': 4.0.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.0.0)
+      '@dual-bundle/import-meta-resolve': 4.1.0
+      balanced-match: 2.0.0
+      colord: 2.9.3
+      cosmiconfig: 9.0.0(typescript@5.7.3)
+      css-functions-list: 3.2.3
+      css-tree: 3.1.0
+      debug: 4.4.0(supports-color@8.1.1)
+      fast-glob: 3.3.3
+      fastest-levenshtein: 1.0.16
+      file-entry-cache: 10.0.5
+      global-modules: 2.0.0
+      globby: 11.1.0
+      globjoin: 0.1.4
+      html-tags: 3.3.1
+      ignore: 7.0.3
+      imurmurhash: 0.1.4
+      is-plain-object: 5.0.0
+      known-css-properties: 0.35.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.1
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-safe-parser: 7.0.1(postcss@8.5.1)
+      postcss-selector-parser: 7.0.0
+      postcss-value-parser: 4.2.0
+      resolve-from: 5.0.0
+      string-width: 4.2.3
+      supports-hyperlinks: 3.1.0
+      svg-tags: 1.0.0
+      table: 6.9.0
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -16516,6 +16971,11 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  supports-hyperlinks@3.1.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
   svg-tags@1.0.0: {}
@@ -16544,6 +17004,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  table@6.9.0:
+    dependencies:
+      ajv: 8.17.1
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
   tap-parser@7.0.0:
     dependencies:
       events-to-array: 1.1.2
diff --git a/spec/lib/stylesheet/manager_spec.rb b/spec/lib/stylesheet/manager_spec.rb
index 32d87fb4063..b779c02b5d7 100644
--- a/spec/lib/stylesheet/manager_spec.rb
+++ b/spec/lib/stylesheet/manager_spec.rb
@@ -658,7 +658,7 @@ RSpec.describe Stylesheet::Manager do
         ).compile(force: true)
 
       expect(stylesheet).not_to include("--primary: #CC0000;")
-      expect(stylesheet).to include("--primary: #222222;") # from base scheme
+      expect(stylesheet).to include("--primary: #222;") # from base scheme
     end
 
     it "uses the correct scheme when a valid scheme id is used" do
diff --git a/spec/models/color_scheme_spec.rb b/spec/models/color_scheme_spec.rb
index ad04392ac19..426c4aa803d 100644
--- a/spec/models/color_scheme_spec.rb
+++ b/spec/models/color_scheme_spec.rb
@@ -154,7 +154,7 @@ RSpec.describe ColorScheme do
       resolved = color_scheme.resolved_colors
       expect(resolved["primary"]).to eq("121212") # From db
       expect(resolved["secondary"]).to eq("123123") # From custom scheme
-      expect(resolved["tertiary"]).to eq("0088cc") # From `foundation/colors.scss`
+      expect(resolved["tertiary"]).to eq("08c") # From `foundation/colors.scss`
     ensure
       ColorScheme::BUILT_IN_SCHEMES.delete(custom_scheme_id.to_sym)
     end
diff --git a/spec/models/theme_spec.rb b/spec/models/theme_spec.rb
index 9e8faf0dc1d..85a82fcd73e 100644
--- a/spec/models/theme_spec.rb
+++ b/spec/models/theme_spec.rb
@@ -566,7 +566,7 @@ HTML
 
     Theme.clear_default!
 
-    expect(ColorScheme.hex_for_name("header_primary")).to eq("333333")
+    expect(ColorScheme.hex_for_name("header_primary")).to eq("333")
   end
 
   it "correctly notifies about theme changes" do
diff --git a/spec/requests/site_controller_spec.rb b/spec/requests/site_controller_spec.rb
index a80b7452556..da4040540d7 100644
--- a/spec/requests/site_controller_spec.rb
+++ b/spec/requests/site_controller_spec.rb
@@ -26,8 +26,8 @@ RSpec.describe SiteController do
       expect(json["apple_touch_icon_url"]).to eq(expected_url)
       expect(json["logo_small_url"]).to eq(expected_url)
       expect(json["mobile_logo_url"]).to eq(expected_url)
-      expect(json["header_primary_color"]).to eq("333333")
-      expect(json["header_background_color"]).to eq("ffffff")
+      expect(json["header_primary_color"]).to eq("333")
+      expect(json["header_background_color"]).to eq("fff")
       expect(json["login_required"]).to eq(true)
       expect(json["locale"]).to eq("en")
       expect(json["include_in_discourse_discover"]).to eq(true)
diff --git a/spec/serializers/wizard_serializer_spec.rb b/spec/serializers/wizard_serializer_spec.rb
index 48c958e886f..0c14332e6ce 100644
--- a/spec/serializers/wizard_serializer_spec.rb
+++ b/spec/serializers/wizard_serializer_spec.rb
@@ -14,7 +14,7 @@ RSpec.describe WizardSerializer do
       json = MultiJson.load(MultiJson.dump(serializer.as_json))
 
       expect(json["wizard"]["current_color_scheme"][0]["name"]).to eq("primary")
-      expect(json["wizard"]["current_color_scheme"][0]["hex"]).to eq("222222")
+      expect(json["wizard"]["current_color_scheme"][0]["hex"]).to eq("222")
     end
 
     it "should provide custom colors correctly" do
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
new file mode 100644
index 00000000000..6da5f835090
--- /dev/null
+++ b/stylelint.config.mjs
@@ -0,0 +1,43 @@
+export default {
+  extends: ["stylelint-config-standard-scss"],
+  rules: {
+    "no-duplicate-at-import-rules": true,
+    "font-family-no-duplicate-names": true,
+    "keyframe-block-no-duplicate-selectors": true,
+    "declaration-block-no-duplicate-custom-properties": null,
+    "declaration-block-no-duplicate-properties": true,
+    "block-no-empty": null,
+    "comment-no-empty": true,
+    "no-invalid-double-slash-comments": true,
+    "no-empty-source": true,
+    "at-rule-empty-line-before": null,
+    "rule-empty-line-before": ["always", {except: ["after-single-line-comment", "first-nested"]}],
+    "selector-class-pattern": null,
+    "custom-property-pattern": null,
+    "declaration-empty-line-before": "never",
+    "alpha-value-notation": null,
+    "color-function-notation": null,
+    "shorthand-property-no-redundant-values": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "keyframes-name-pattern": null,
+    "selector-type-no-unknown": null,
+    "scss/dollar-variable-pattern": null,
+    "number-max-precision": null,
+    "selector-pseudo-element-no-unknown": null,
+    "declaration-block-no-shorthand-property-overrides": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/load-no-partial-leading-underscore": null,
+    "scss/operator-no-newline-after": null,
+    "scss/double-slash-comment-whitespace-inside": null,
+    "scss/no-global-function-names": null,
+    "selector-id-pattern": null,
+    "no-invalid-position-at-import-rule": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "scss/at-function-pattern": null,
+    "scss/comment-no-empty": null,
+    "function-linear-gradient-no-nonstandard-direction": null,
+    "scss/at-mixin-pattern": null,
+  },
+};