ui: apply Stylelint whitespace formatting

.stylelintrc.json

@@ -3,26 +3,19 @@
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "alpha-value-notation": "number",
-    "at-rule-empty-line-before": null,
     "block-no-redundant-nested-style-rules": null,
     "color-function-alias-notation": null,
     "color-function-notation": ["legacy", { "ignore": ["with-var-inside"] }],
-    "comment-empty-line-before": null,
-    "custom-property-empty-line-before": null,
     "custom-property-pattern": null,
     "declaration-block-no-redundant-longhand-properties": null,
-    "declaration-empty-line-before": null,
     "font-family-no-missing-generic-family-keyword": null,
     "hue-degree-notation": "number",
     "no-invalid-position-at-import-rule": null,
-    "rule-empty-line-before": null,
     "selector-class-pattern": null,
     "selector-id-pattern": null,
     "selector-type-no-unknown": null,
     "shorthand-property-no-redundant-values": null,
     "scss/dollar-variable-pattern": null,
-    "scss/dollar-variable-empty-line-before": null,
-    "scss/double-slash-comment-empty-line-before": null,
     "scss/no-global-function-names": null,
     "scss/operator-no-newline-after": null
   }

ui/analyse/css/_action-menu.scss

@@ -4,6 +4,7 @@
 
 .action-menu {
   @extend %border-bottom-active, %flex-column;
+
   position: absolute;
   z-index: $z-action-menu-99;
   inset: 0;
@@ -66,13 +67,14 @@
     @extend %flex-wrap;
 
     .button {
-      &-empty {
-        color: $c-font-dim;
-      }
       font-size: 0.9em;
       flex: 1 1 auto;
       padding: 7px 0;
       text-align: center;
+
+      &-empty {
+        color: $c-font-dim;
+      }
     }
   }
 
@@ -114,6 +116,7 @@
 
   span {
     @extend %flex-center;
+
     justify-content: start;
     gap: 0.6em;
   }

ui/analyse/css/_analyse.embed.scss

@@ -14,6 +14,7 @@ body {
   @media (min-width: at-least($small)) {
     ---main-margin: 1vw;
     ---block-gap: 15px;
+
     overflow-y: hidden;
 
     #main-wrap {

ui/analyse/css/_analyse.free.scss

@@ -6,6 +6,7 @@ $label-width: 5ch;
 .copyables {
   .pair {
     @extend %flex-center;
+
     position: relative;
   }
 
@@ -66,8 +67,8 @@ $label-width: 5ch;
 
   .bottom-action {
     @extend %box-radius-bottom;
-
     @include inline-end(0);
+
     text-align: right;
   }
 
@@ -97,6 +98,7 @@ $label-width: 5ch;
   margin-bottom: 1em; // col1
   .control-960 {
     margin-top: 0.7em;
+
     button {
       margin-left: 1em;
     }

ui/analyse/css/_chart-loader.scss

@@ -3,12 +3,12 @@
 }
 
 #acpl-chart-container-loader {
+  @include padding-direction(7px, 10px, 7px, 0);
+
   font-size: 0.9em;
   position: absolute;
   top: 91px;
   background: $c-bg-box;
-  @include padding-direction(7px, 10px, 7px, 0);
-
   line-height: 20px;
   box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3);
   display: flex;

ui/analyse/css/_context-menu.scss

@@ -26,6 +26,7 @@
     @extend %flex-center-nowrap;
 
     color: $c-font;
+
     @include padding-direction(0.5em, 0.6em, 0.5em, 0.3em);
 
     &::before {

ui/analyse/css/_fork.scss

@@ -8,6 +8,7 @@ $c-fork: $c-primary;
   move {
     @include prevent-select;
     @extend %san, %flex-center;
+
     background: $m-primary_bg--mix-25;
     color: $c-font-clear;
     flex: 0 0 50%;
@@ -19,9 +20,11 @@ $c-fork: $c-primary;
     &:nth-child(odd) {
       border-inline-end: 1px solid $c-bg-box;
     }
+
     &.correct {
       background: $m-secondary_bg--mix-25;
     }
+
     &.wrong {
       background: $m-bad_bg--mix-25;
     }
@@ -34,6 +37,7 @@ $c-fork: $c-primary;
       font-size: 1.5em;
       border: 1px solid $c-bg-box;
       flex: 1 1 auto;
+
       index,
       eval {
         display: none;
@@ -60,9 +64,11 @@ $c-fork: $c-primary;
     &:not(:hover) move.selected {
       background: $c-fork;
       color: #fff;
+
       &.correct {
         background: $c-secondary;
       }
+
       &.wrong {
         background: $c-bad;
       }

ui/analyse/css/_layout.scss

@@ -68,6 +68,7 @@ body {
   }
 
   ---chat-height: fit-content(0);
+
   &--wiki {
     ---chat-height: 0;
   }
@@ -104,6 +105,7 @@ body {
     &__side {
       margin: $analyse-block-gap 0 0 0;
     }
+
     .chat__members {
       margin: calc($analyse-block-gap / 2) 0 0 0;
     }

ui/analyse/css/_persistence.scss

@@ -2,18 +2,23 @@
   &__persistence {
     &__help {
       @extend %flex-center-nowrap;
+
       font-size: 0.9em;
       background: $c-bg-zebra;
       padding: 0.4em 0.8em;
       margin: 0;
+
       i {
         font-size: 1.5em;
         margin-right: 0.4em;
       }
     }
+
     &__actions {
       @extend %flex-between-nowrap;
+
       font-size: 0.9em;
+
       .button {
         &::before {
           margin-right: 0.4em;

ui/analyse/css/_player-clock.scss

@@ -3,8 +3,9 @@
 $clock-height: 20px;
 
 .analyse__player_strip {
-  position: absolute;
   @include inline-end(0);
+
+  position: absolute;
   display: flex;
 
   &.top {
@@ -66,6 +67,7 @@ $clock-height: 20px;
       margin-inline-start: -10px;
     }
   }
+
   score {
     margin-top: -2px;
   }

ui/analyse/css/_practice.scss

@@ -1,5 +1,6 @@
 .practice-box {
   @include prevent-select;
+
   flex: 0 0 135px;
 
   .comment {
@@ -20,6 +21,7 @@
         @extend %san;
       }
     }
+
     .next {
       border: 0;
       background: $m-primary_bg--mix-80;
@@ -110,16 +112,19 @@
 
 .ceval .practice-mode {
   @extend %flex-column;
+
   justify-content: center;
   flex: 1 0 auto;
   height: 38px;
   width: 64px;
   text-align: center;
   font-weight: bold;
+
   p {
     margin: 0;
     font-size: 1rem;
   }
+
   p.secondary {
     font-size: 0.9rem;
     opacity: 0.6;

ui/analyse/css/_round-training.scss

@@ -1,9 +1,12 @@
 .analyse__puzzle {
   margin-top: $analyse-block-gap;
+
   a {
     @extend %flex-center-nowrap;
+
     text-transform: inherit;
     text-align: start;
+
     &::before {
       font-size: 2.8em;
     }
@@ -32,28 +35,36 @@
 
   &__side > div {
     display: flex;
+
     i,
     strong {
       flex: 0 1 6ch;
       text-align: center;
     }
+
     &.symbol {
       cursor: pointer;
     }
+
     &.inaccuracy {
       color: $c-inaccuracy;
+
       &:hover {
         color: $m-inaccuracy_font--mix-70;
       }
     }
+
     &.mistake {
       color: $c-mistake;
+
       &:hover {
         color: $m-mistake_font--mix-70;
       }
     }
+
     &.blunder {
       color: $c-blunder;
+
       &:hover {
         color: $m-blunder_font--mix-70;
       }

ui/analyse/css/_round-underboard.scss

@@ -78,6 +78,7 @@ $col2-panel-height: 240px;
   .computer-analysis {
     position: relative;
   }
+
   .future-game-analysis {
     text-align: center;
     margin-top: 2em;
@@ -91,8 +92,8 @@ $col2-panel-height: 240px;
 
     > div {
       @extend %flex-center-nowrap;
-      gap: 1em;
 
+      gap: 1em;
       margin-bottom: 1em;
     }
 
@@ -161,6 +162,7 @@ $col2-panel-height: 240px;
 
   .gif-actions {
     @extend %flex-center-nowrap;
+
     gap: 1em;
   }
 }

ui/analyse/css/_side.scss

@@ -3,21 +3,22 @@
     align-self: start;
 
     .back-to-game {
+      text-align: center;
       margin-top: 2em;
 
       @include mq-at-least-col3 {
         margin-top: 10vh;
       }
 
-      text-align: center;
-
       .button {
         margin: 0 auto;
       }
     }
+
     .analyse__wiki {
       margin: 2vh 0;
       flex: 1 1 auto;
+
       @include mq-at-least-col3 {
         flex: 1 1 0;
       }
@@ -27,10 +28,13 @@
       }
     }
   }
+
   &--wiki .analyse__side {
     @extend %flex-column;
+
     align-self: auto;
   }
+
   &__wiki {
     overflow-y: auto;
     padding: 1rem 1rem 0 1rem;
@@ -40,11 +44,14 @@
       text-align: justify;
       line-height: 1.5;
     }
+
     h1,
     h2 {
       @include fluid-size('font-size', 17px, 23px);
+
       margin-bottom: 1rem;
     }
+
     h3 {
       font-size: 1.2em;
       font-weight: bold;

ui/analyse/css/_tools-mobile.scss

@@ -3,23 +3,28 @@
     .sub-box {
       order: 0;
     }
+
     .ceval,
     .pv_box,
     .analyse__fork,
     .gamebook-edit {
       order: 1;
     }
+
     .analyse__moves {
       order: 2;
     }
+
     .ceval .engine {
       margin-inline-start: 12px;
     }
+
     .ceval .cmn-toggle,
     .ceval pearl {
       display: none;
     }
   }
+
   .analyse__controls {
     padding-top: 6px;
     height: 5rem;
@@ -28,9 +33,11 @@
     .jumps {
       order: 1;
     }
+
     [data-act='opening-explorer'] {
       order: 2;
     }
+
     [data-act='menu'] {
       order: 3;
     }
@@ -43,6 +50,7 @@
       border-radius: 6px 6px 0 0;
       background: $m-bg_bg-page--mix-50;
     }
+
     .scrub-help {
       margin-inline: 3px;
       align-self: center;
@@ -50,32 +58,40 @@
       font-size: 1.1em;
       color: $c-border;
     }
+
     .jumps {
       flex: 40%;
     }
+
     .jumps:has([data-act='first']) {
       padding-inline: 8px;
       flex: 50%;
     }
+
     .jumps .fbt {
       margin: 5px 2px;
       background: $m-bg_bg-page--mix-50;
       border: 1px solid $m-clearer--fade-95;
     }
+
     .jumps .fbt[data-act='first'],
     .jumps .fbt[data-act='last'] {
       flex: 1.6;
     }
+
     .fbt.active {
       padding-top: 0;
       border-bottom: none;
     }
+
     eval {
       @media (min-width: at-least($xx-small)) {
         font-size: 1.2em;
       }
+
       pointer-events: none;
     }
+
     [data-mode] {
       position: relative;
       overflow-x: hidden;
@@ -86,28 +102,34 @@
 
       .cmn-toggle {
         margin-inline-start: 10px;
+
         @media (max-width: at-most($xxx-small)) {
           transform: scale(0.7);
           margin-inline-start: 0;
         }
+
         label {
           background-color: $c-font-dimmer !important;
         }
       }
     }
+
     [data-mode]::before,
     [data-mode]::after {
       font-size: 1.3em;
       font-family: lichess;
     }
+
     [data-mode='practice']::before {
       content: $licon-Bullseye;
       padding-inline-end: 8px;
     }
+
     [data-mode='retro']::before {
       font-size: 1.5em;
       content: $licon-GraduateCap;
     }
+
     [data-mode='practice'].active::after,
     [data-mode='retro'].active::after {
       position: absolute;
@@ -117,17 +139,21 @@
       color: $m-bg_secondary--mix-50;
       content: $licon-X;
     }
+
     [data-mode='ceval']::after {
       content: $licon-Cogs;
       color: $c-font-dimmer;
       padding-inline-end: 10px;
     }
+
     [data-mode='ceval']:has(eval)::after {
       content: '';
     }
+
     [data-mode] .bar {
       display: none;
     }
+
     [data-mode]:not(.active) .bar {
       position: absolute;
       display: block;
@@ -145,10 +171,12 @@
           no-repeat,
         linear-gradient(45deg, transparent, $m-good--fade-30, transparent) -100% 0 / 200% 100% no-repeat;
     }
+
     [data-mode].computing:not([data-mode='ceval'].active) .bar {
       opacity: 1;
       animation-play-state: running;
     }
+
     @keyframes computing {
       to {
         background-position:
@@ -157,17 +185,21 @@
       }
     }
   }
+
   .analyse[data-active-tool] .analyse__tools,
   .analyse[data-active-mode] .analyse__tools {
     border-radius: 0 0 $box-radius-size $box-radius-size;
   }
+
   .analyse[data-active-tool] .analyse__tools,
   .analyse[data-active-mode='retro'] .analyse__tools {
     border-top: 3px solid $c-secondary;
   }
+
   .analyse[data-active-mode='practice'] .analyse__tools .ceval {
     order: 0;
   }
+
   .analyse[data-active-mode='practice'] .analyse__fork,
   .analyse[data-active-mode='retro'] .analyse__fork {
     display: none;

ui/analyse/css/_tools.scss

@@ -17,6 +17,7 @@
       line-height: 1.9em;
       background: $m-secondary_bg--mix-40;
       padding: 0 7px;
+
       a {
         font-weight: bold;
       }
@@ -43,6 +44,7 @@
 
 .analyse__moves {
   @include prevent-select;
+
   flex: 2 1 0;
   display: flex;
   flex-direction: column;
@@ -51,7 +53,6 @@
   // 0 size forces vertical scrollbar
   overflow-y: auto;
   overflow-x: hidden;
-
   position: relative;
 
   /* required so line::before scrolls along the moves! */

ui/analyse/css/_training.scss

@@ -73,6 +73,7 @@
 
   .instruction {
     @extend %flex-column;
+
     flex: 1;
   }
 
@@ -83,6 +84,7 @@
 
   .choices {
     @extend %flex-between;
+
     line-height: 1.6em;
     margin: 5px 0 -5px 0;
   }

ui/analyse/css/build/analyse.free.embed.scss

@@ -12,6 +12,5 @@
 @import '../../../lib/css/component/dialog';
 @import '../../../lib/css/component/box';
 @import '../../../lib/css/component/button';
-
 @import '../analyse.free';
 @import '../analyse.embed';

ui/analyse/css/build/analyse.free.scss

@@ -1,5 +1,4 @@
 @import '../analyse.abstract';
 @import '../../../lib/css/component/mselect';
 @import '../../../lib/css/component/toggle-box';
-
 @import '../analyse.free';

ui/analyse/css/build/analyse.relay-admin.scss

@@ -1,3 +1,2 @@
 @import '../../../lib/css/plugin';
-
 @import '../study/relay/admin';

ui/analyse/css/build/analyse.relay.embed.scss

@@ -1,5 +1,4 @@
 @import '../../../lib/css/embed';
-@import '../analyse.abstract';
 @import '../../../lib/css/base/util';
 @import '../../../lib/css/base/form';
 @import '../../../lib/css/form/form3';
@@ -14,9 +13,10 @@
 @import '../../../lib/css/component/button';
 @import '../../../fide/css/table';
 @import '../../../fide/css/show';
-
+@import '../analyse.abstract';
 @import '../study/show';
 
 $player-height: 45px;
+
 @import '../study/relay/show';
 @import '../study/relay/embed';

ui/analyse/css/build/analyse.relay.scss

@@ -12,8 +12,8 @@
 @import '../../../lib/css/chat/chat';
 @import '../../../fide/css/table';
 @import '../../../fide/css/show';
-
 @import '../study/show';
 
 $player-height: 45px;
+
 @import '../study/relay/show';

ui/analyse/css/build/analyse.round.scss

@@ -1,8 +1,5 @@
 @import '../analyse.abstract';
-
 @import '../../../lib/css/component/context-streamer';
-
 @import '../../../round/css/meta';
 @import '../../../lib/css/chat/chat';
-
 @import '../analyse.round';

ui/analyse/css/build/analyse.study.scss

@@ -6,6 +6,5 @@
 @import '../../../lib/css/component/vertical-resize';
 @import '../../../lib/css/chat/chat';
 @import '../../../lib/css/chess/zh-pocket';
-
 @import '../zh';
 @import '../study/show';

ui/analyse/css/explorer/_config.scss

@@ -19,13 +19,12 @@
 
     button {
       @extend %metal;
+      @include transition;
+
       flex-grow: 1;
       padding: 5px 0;
       text-align: center;
       cursor: pointer;
-
-      @include transition;
-
       border: $border;
       border-width: 1px 0 1px 1px;
       text-transform: capitalize;
@@ -51,6 +50,7 @@
         text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5);
         font-weight: bold;
       }
+
       &[aria-pressed='true'] {
         box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) inset;
       }
@@ -61,6 +61,7 @@
     > div {
       @extend %flex-center;
     }
+
     .player-name {
       border-radius: $box-radius-size !important;
       font-weight: bold;
@@ -68,10 +69,12 @@
       padding-right: 1em;
       text-transform: none;
       margin-inline-end: 0.5em;
+
       &.active:hover {
         background: $m-secondary_white--mix-80;
       }
     }
+
     .color {
       margin-inline-start: 1ch;
     }
@@ -87,10 +90,12 @@
     label {
       @extend %flex-between-nowrap;
     }
+
     input {
       border: none;
       background: none;
       padding: 0.1em 0.5em;
+
       &:invalid {
         background: $m-bad_bg--mix-30;
       }
@@ -110,20 +115,25 @@
       overflow: visible !important;
       position: relative;
       display: inline-block;
-
       padding-top: 2em;
       margin-bottom: 2em;
     }
+
     .previous {
       @extend %flex-wrap;
+
       gap: 0.4em;
+
       .button {
         margin: 0.3em 0.2em;
         text-transform: none;
       }
+
       .remove {
         $remove-button-diameter: 1.75em;
+
         @include inline-end(-0.65em);
+
         margin-inline-start: -$remove-button-diameter;
         width: $remove-button-diameter;
         height: $remove-button-diameter;
@@ -131,6 +141,7 @@
         background-color: $c-bg-popup;
         position: relative;
         border-radius: 50%;
+
         &:hover {
           background-color: $c-error;
         }

ui/analyse/css/explorer/_explorer.scss

@@ -39,10 +39,13 @@
 
   .title {
     @extend %ellipsis;
+
     user-select: text;
   }
+
   .explorer-title {
     @extend %flex-center-nowrap;
+
     align-items: stretch;
     font-size: 0.9rem;
     line-height: 1.9em;
@@ -52,27 +55,34 @@
     .ddloader {
       padding-inline-start: 7px;
     }
+
     .active {
       @extend %flex-center-nowrap;
+
       direction: ltr;
       padding: 0 7px;
       color: $c-font-clear;
       background: $m-secondary_bg--mix-40;
+
       strong {
         margin-inline-end: 0.5ch;
       }
+
       &.player {
         cursor: pointer;
       }
     }
+
     .long {
       letter-spacing: -0.1ch;
     }
+
     button {
       display: inline-block;
       padding: 0 0.5ch;
       margin-inline-start: 1px;
       color: $c-font-dim;
+
       &:hover {
         color: $c-font-clear;
         background: $m-secondary_bg--mix-50;
@@ -109,11 +119,13 @@
     will-change: transform, opacity; /* Prevents flicker in Safari */
     th {
       @extend %roboto;
+
       font-size: 0.8rem;
       line-height: 1.8em;
       background: $m-secondary_bg--mix-40;
       padding-inline-start: 7px;
     }
+
     td:first-child {
       @extend %san;
 
@@ -184,6 +196,7 @@
   .white {
     background: #ccc;
     box-shadow: 0 -5px 7px rgba(0, 0, 0, 0.25) inset;
+
     @include if-light {
       background: #fff;
       box-shadow: 0 -5px 7px rgba(0, 0, 0, 0.1) inset;
@@ -198,6 +211,7 @@
   .black {
     color: #ddd;
     box-shadow: 0 5px 7px rgba(255, 255, 255, 0.1) inset;
+
     @include if-light {
       color: #fff;
       box-shadow: 0 5px 7px rgba(255, 255, 255, 0.2) inset;
@@ -206,6 +220,7 @@
 
   .draws {
     background: #666;
+
     @include if-light {
       background: #a0a0a0;
     }
@@ -213,9 +228,11 @@
 
   .black {
     background: #333;
+
     @include if-light {
       background: #555;
     }
+
     color: #ddd;
   }
 
@@ -226,6 +243,7 @@
       @include padding-direction(5px, 0, 5px, 7px);
 
       max-width: 110px;
+
       &:nth-child(2) {
         max-width: none;
       }
@@ -298,9 +316,10 @@
   }
 
   .toconf {
+    @include inline-end(0);
+
     position: absolute;
     top: 0;
-    @include inline-end(0);
     cursor: pointer;
     display: block;
     font-size: 1.2em;
@@ -316,6 +335,7 @@
 
   .message {
     @extend %flex-column;
+
     flex: 1 1 auto;
     justify-content: center;
     text-align: center;
@@ -357,6 +377,7 @@
   .explorer-box .explorer-title {
     line-height: 3em;
   }
+
   .explorer-box button.toconf {
     font-size: 1.5em;
     margin-top: 2px;

ui/analyse/css/gamebook/_play.scss

@@ -60,7 +60,9 @@
       position: absolute;
       content: '';
       bottom: -9px;
+
       @include inline-end(20%);
+
       width: 15px;
       height: 15px;
       background: $c-bg-box;
@@ -231,6 +233,7 @@
 
         &:last-child {
           @extend %box-radius-right;
+
           &:first-child {
             @extend %box-radius;
           }

ui/analyse/css/practice/_side.scss

@@ -36,10 +36,9 @@
 
   .finally {
     @extend %flex-center-nowrap;
-
-    flex: 0 0 auto;
     @include padding-direction(0.7em, 0.7em, 0.7em, 0);
 
+    flex: 0 0 auto;
     background: $c-bg-low;
     font-size: 0.9em;
 

ui/analyse/css/study/_chapters.scss

@@ -37,6 +37,7 @@ $span-width: 1.7em;
 
     res {
       @extend %flex-center;
+
       align-self: center;
       font-size: 0.9em;
       white-space: nowrap;

ui/analyse/css/study/_desc.scss

@@ -17,10 +17,10 @@
 
   .contrib {
     @extend %popup-shadow;
+    @include inline-end(0);
 
     position: absolute;
     top: 0;
-    @include inline-end(0);
     background: $m-accent_bg--mix-10;
     padding: 0.5em 0.8em;
     display: none;

ui/analyse/css/study/_editor.scss

@@ -12,10 +12,12 @@
 
 .board-editor {
   @include prevent-select;
+
   display: grid;
   grid-template-columns: 280px 2vmin 210px;
   grid-template-rows: min-content auto min-content;
   grid-template-areas: '.            . e-tools' 'spare-top    . e-tools' 'e-board      . e-tools' 'spare-bottom . e-tools' '.            . e-tools';
+
   @media (width <= 576px) {
     grid-template-columns: 100%;
     grid-template-rows: auto min-content;

ui/analyse/css/study/_layout.scss

@@ -20,13 +20,16 @@
     .vertical-resize {
       display: flex;
     }
+
     .mchat {
       margin-top: 0;
       min-height: 34px;
     }
   }
+
   .analyse.variant-crazyhouse {
     $pocket-height: 60px;
+
     grid-template-rows: $pocket-height auto var(---chat-height) $pocket-height minmax(0, auto) 1fr;
     grid-template-areas:
       'side    . board   gauge pocket-top'

ui/analyse/css/study/_list-widget.scss

@@ -49,6 +49,7 @@
 
     .top {
       @extend %flex-center-nowrap, %break-word, %roboto;
+
       gap: 1rem;
 
       .study-name {
@@ -76,6 +77,7 @@
         flex: 0 0 auto;
         color: $m-primary_bg--mix-80;
         font-size: 3em;
+
         img {
           margin: 0;
         }

ui/analyse/css/study/_list.scss

@@ -1,6 +1,7 @@
 %study-list {
   @extend %box-neat;
   @include prevent-select;
+
   background: $c-bg-box;
 
   .study-list > div,
@@ -54,6 +55,7 @@
 %study-list-ongoing {
   ongoing {
     @extend %flex-center-center;
+
     align-self: center;
     font-size: 0.7em;
     color: $c-bad;

ui/analyse/css/study/_members.scss

@@ -22,6 +22,7 @@
 
   .status {
     @extend %flex-center-center;
+
     width: 2.4em;
     margin-inline-end: 0.1em;
     transition: 2.5s;
@@ -106,7 +107,6 @@
 
   m-config {
     @extend %flex-between;
-
     @include padding-direction(0.4em, 0.8em, 1em, 0.8em);
   }
 }

ui/analyse/css/study/_modal.scss

@@ -70,10 +70,13 @@
       margin: -1em 0 1.6em 0;
       border-bottom: $border;
     }
+
     .import-from__chapter {
       @extend %break-word-hard, %ellipsis;
+
       max-width: 100%;
     }
+
     .preview-in-editor {
       float: right;
       margin-top: 0.2em;
@@ -82,9 +85,11 @@
 
   &.study-edit .flair-and-name {
     gap: 4%;
+
     .form-group:last-child {
       flex: 1 1 auto;
     }
+
     .uflair {
       margin: 0;
       font-size: 1.3em;

ui/analyse/css/study/_player.scss

@@ -22,9 +22,9 @@ $player-height: 1.6rem;
 
 .study__player {
   @extend %flex-between-nowrap, %metal, %box-shadow;
+  @include inline-end(0);
 
   position: absolute;
-  @include inline-end(0);
   font-weight: bold;
   width: var(---cg-width, 100%);
   height: $player-height;
@@ -84,17 +84,21 @@ $player-height: 1.6rem;
 
   .info {
     @extend %flex-center-nowrap;
+
     margin-inline-start: 10px;
     overflow: hidden;
 
     .team,
     .name {
       @extend %ellipsis;
+
       max-width: fit-content;
       flex: 1;
     }
+
     a.name {
       color: $c-font;
+
       &:hover {
         color: $c-link;
       }
@@ -105,13 +109,16 @@ $player-height: 1.6rem;
     margin-inline-start: 0.5ch;
     flex: 3;
   }
+
   .team {
     @extend %roboto;
+
     margin-inline-end: 1ch;
     padding: 0 1ch;
     flex: 2;
     color: $c-font-dim;
   }
+
   .mini-game__flag {
     height: 1em;
     width: 1em;

ui/analyse/css/study/_search.scss

@@ -2,26 +2,34 @@
   @media (min-width: at-least($xx-small)) {
     width: 500px;
   }
+
   input {
     width: 100%;
   }
+
   &__results {
     @extend %study-list, %study-list-ongoing;
+
     box-shadow: none !important;
     height: 20em;
     margin-top: 1em;
     text-align: start;
+
     button {
       width: 100%;
       padding: 0.5em 1em;
     }
+
     h3 {
       @extend %nowrap-ellipsis;
+
       flex: 0 1 auto;
     }
+
     res {
       flex: 0 0 auto;
     }
+
     high {
       background-color: $m-yellow_bg--mix-30;
       color: $c-font-clearer;

ui/analyse/css/study/_show.scss

@@ -1,6 +1,5 @@
 @import '../analyse.base';
 @import '../round-training';
-
 @import 'layout';
 @import 'list';
 @import 'chapters';

ui/analyse/css/study/panel/_comment.scss

@@ -19,9 +19,11 @@
 
   .study__wiki {
     @extend %box-neat;
+
     background: $c-bg-box;
     padding: 0.8em 1em;
     margin-top: 1vh;
+
     &.empty {
       display: none;
     }

ui/analyse/css/study/panel/_glyph.scss

@@ -19,6 +19,7 @@
 
     &::before {
       @extend %flex-center-center;
+
       content: attr(data-symbol);
       font-size: 1.2em;
       font-weight: bold;

ui/analyse/css/study/panel/_metadata.scss

@@ -47,6 +47,7 @@
     font-weight: bold;
     color: $c-font-dim;
     width: 1px;
+
     @include padding-direction(0, 0.3em, 0, 1em, true);
   }
 
@@ -58,8 +59,9 @@
   input,
   span,
   a {
-    display: block;
     @include padding-direction(0.6em, 1em, 0.6em, 0.7em);
+
+    display: block;
     line-height: 1.7;
   }
 

ui/analyse/css/study/panel/_multiboard.scss

@@ -1,6 +1,7 @@
 .study__multiboard {
   .analyse__underboard & {
     @extend %box-neat;
+
     background: $c-bg-box;
   }
 
@@ -14,16 +15,21 @@
 
   &__top {
     @extend %flex-between;
+
     gap: 0.4em;
     padding: 0.4em 1em 1em 0.4em;
   }
+
   &__options {
     @extend %flex-center;
+
     gap: 1em;
+
     .cmn-toggle-wrap {
       font-size: 0.9em;
       gap: 0;
     }
+
     .cmn-toggle {
       transform: scale(0.7);
     }
@@ -42,6 +48,7 @@
           display: none;
         }
       }
+
       max-width: 25vw;
       margin-inline-end: 1ch;
     }
@@ -72,12 +79,11 @@
 
     a {
       @extend %box-radius;
-      container-type: inline-size;
 
+      container-type: inline-size;
       color: $c-font;
       padding: 0.4em 0.3em;
       border: 1px solid transparent;
-
       overflow: hidden;
 
       &.active {
@@ -85,40 +91,49 @@
         color: $c-font-clear;
         border-color: $m-primary_bg--mix-40;
       }
+
       &:hover {
         background: $m-primary_bg--mix-12;
         color: $c-font-clear;
         border-color: $m-primary_bg--mix-50;
       }
     }
+
     cg-board {
       box-shadow: none;
     }
   }
 }
+
 @container (width < 250px) {
   .now-playing .rating {
     display: none;
   }
 }
+
 .mini-game__gauge {
   --c-eval-mini-gauge-white: #c0c0c0;
   --c-eval-mini-gauge-black: #444;
+
   @include if-light {
     --c-eval-mini-gauge-white: #fff;
     --c-eval-mini-gauge-black: #606060;
   }
 }
+
 .mini-game {
   .cg-gauge {
     display: flex;
     flex-flow: row nowrap;
   }
+
   &__board {
     flex: 1 1 auto;
   }
+
   &__gauge {
     @extend %box-radius;
+
     order: 1;
     position: relative;
     flex: 0 0 4%;
@@ -127,6 +142,7 @@
     opacity: 0.4;
     margin-left: 4px;
     background: linear-gradient(to top, var(--c-eval-mini-gauge-white), var(--c-eval-mini-gauge-black));
+
     &::after {
       content: '';
       display: block;
@@ -144,6 +160,7 @@
 
     &--flip {
       background: linear-gradient(to bottom, var(--c-eval-mini-gauge-white), var(--c-eval-mini-gauge-black));
+
       .mini-game__gauge__black {
         position: absolute;
         bottom: 0;
@@ -153,9 +170,11 @@
     &--set {
       opacity: 1;
       background: var(--c-eval-mini-gauge-white);
+
       .mini-game__gauge__black {
         display: block;
       }
+
       tick {
         position: absolute;
         width: 100%;

ui/analyse/css/study/panel/_server-eval.scss

@@ -2,8 +2,8 @@
 
 .study__server-eval {
   @extend %box-neat;
-  position: relative;
 
+  position: relative;
   background: $c-bg-box;
   text-align: center;
 

ui/analyse/css/study/panel/_share.scss

@@ -28,6 +28,7 @@
 
   .downloads {
     @extend %flex-center-center;
+
     margin-bottom: 1.5em;
 
     .button {
@@ -38,8 +39,10 @@
 
 .study__share .url-start-at-ply {
   @extend %flex-center;
+
   gap: 0.8ch;
   margin-top: 0.3rem;
+
   .cmn-toggle-wrap {
     transform: scale(0.8);
   }

ui/analyse/css/study/relay/_admin.scss

@@ -16,12 +16,11 @@
 
   .state {
     @extend %flex-center-nowrap;
+    @include transition;
 
     border-bottom: $border;
     min-height: 3.5em;
 
-    @include transition;
-
     &::before {
       @extend %flex-center;
 
@@ -31,6 +30,7 @@
 
     > span {
       @extend %ellipsis;
+
       overflow-wrap: anywhere;
     }
 
@@ -48,6 +48,7 @@
       color: $c-over;
     }
   }
+
   button.clickable:hover {
     cursor: pointer;
     background: $c-primary;
@@ -88,6 +89,7 @@
     }
   }
 }
+
 .relay-admin__container {
   .study__chapters {
     max-height: 25vh;

ui/analyse/css/study/relay/_back-to-live.scss

@@ -1,10 +1,10 @@
 .relay-back-to-live {
   @extend %flex-center-center;
+
   padding: 0.5em 0;
   background: $c-accent;
   color: $c-over;
   cursor: pointer;
-
   flex: 0 0 auto;
 
   @include mq-is-col1 {
@@ -22,6 +22,7 @@
 .mchat:has(.chat-liveboard) {
   box-shadow: none;
 }
+
 .mchat .liveboard {
   cg-board {
     border-top-right-radius: 0;

ui/analyse/css/study/relay/_board-player.scss

@@ -8,9 +8,10 @@
 
 .relay-board-player {
   @extend %flex-between-nowrap, %metal, %box-shadow;
+  @include inline-end(0);
+
   overflow: hidden;
   position: absolute;
-  @include inline-end(0);
   font-weight: bold;
   width: var(---cg-width, 100%);
   height: $player-height;
@@ -41,6 +42,7 @@
 
   .left {
     @extend %flex-center-nowrap;
+
     flex: 1 1 100%;
     gap: 1em;
     overflow: hidden;
@@ -67,11 +69,14 @@
 
   .info-split {
     @extend %flex-column;
+
     line-height: 1.2;
     overflow: hidden;
   }
+
   .info-secondary {
     @extend %flex-center-nowrap;
+
     gap: 0.5em;
     font-size: 0.9em;
   }
@@ -79,12 +84,15 @@
   .team,
   .name {
     @extend %ellipsis;
+
     max-width: fit-content;
     flex: 1;
   }
+
   a.name {
     color: $c-font;
     font-size: 1.1em;
+
     &:hover {
       color: $c-link;
     }
@@ -92,12 +100,15 @@
 
   .team {
     @extend %roboto;
+
     flex: 2;
     color: $c-font-dim;
   }
+
   a.team:hover {
     color: $c-link;
   }
+
   .mini-game__flag {
     width: 1em;
     height: 1em;

ui/analyse/css/study/relay/_embed.scss

@@ -10,12 +10,12 @@ body {
   ---sticky-gap: 0px;
   ---block-gap: 10px;
   ---zoom: 95 !important;
-
   ---col2-board-width: calc(min(calc(100vw - 340px), calc(100vh - 45px * 2)));
 
   @media (min-width: at-least($small)) {
     ---main-margin: 1vw;
     ---block-gap: 15px;
+
     overflow-y: hidden;
   }
 }
@@ -30,25 +30,31 @@ main.analyse.is-relay:not(.has-relay-tour) {
       'board gauge side'
       'board gauge tools'
       'board . controls';
+
     .main-board {
       align-self: center;
     }
+
     .relay-tour__side {
       margin-top: 0;
     }
   }
+
   @include mq-is-col1 {
     .main-board {
       /* space for the top player bar */
       margin-top: $player-height;
     }
   }
+
   cg-resize {
     display: none;
   }
+
   .analyse__controls .features {
     flex: 0 0 2.5rem;
   }
+
   &,
   .analyse__tools {
     /* undo the site negative margins for player names */

ui/analyse/css/study/relay/_layout.scss

@@ -10,13 +10,16 @@ body {
   .vertical-resize {
     display: flex;
   }
+
   .mchat {
     margin-top: 0;
     min-height: 52px;
   }
+
   .chat__members {
     margin: 2px;
   }
+
   .relay-admin {
     margin-top: 0;
   }
@@ -25,27 +28,33 @@ body {
 main.is-relay {
   .relay-tour {
     grid-area: relay-tour;
+
     &__side {
       grid-area: side;
     }
   }
+
   &:not(.has-relay-tour) {
     // room for extra player heights
     margin-top: $player-height;
+
     @include mq-at-least-col2 {
       .relay-tour__side {
         margin-top: #{-$player-height};
       }
     }
+
     @include mq-at-least-col3 {
       .analyse__tools {
         margin-top: #{-$player-height};
+
         .ceval {
           flex: 0 0 $player-height;
         }
       }
     }
   }
+
   .analyse__round-training,
   .relay-admin__container {
     grid-area: relay-admin;
@@ -55,10 +64,12 @@ main.is-relay {
     button.streamer-show {
       display: block;
     }
+
     @media (pointer: fine) {
       .relay-admin__container {
         grid-area: none;
       }
+
       @include resizable-side;
     }
   }
@@ -71,6 +82,7 @@ main.is-relay.has-relay-tour {
     'relay-tour'
     'side'
     'relay-admin';
+
   .relay-games {
     height: 40vh;
   }
@@ -78,6 +90,7 @@ main.is-relay.has-relay-tour {
   @include mq-at-least-col2 {
     grid-template-areas: 'relay-tour . side';
     grid-template-columns: minmax(auto, 80vw) var(---block-gap) 350px;
+
     @media (pointer: fine) {
       @include resizable-side;
     }
@@ -102,10 +115,12 @@ main.analyse.is-relay:not(.has-relay-tour) {
     'side'
     'relay-admin'
     'under';
+
   .mchat,
   .chat__members {
     display: none;
   }
+
   @include mq-at-least-col2 {
     grid-template-rows: repeat(2, calc(var(---cg-height) / 2)) $player-height;
     grid-template-areas:
@@ -114,47 +129,60 @@ main.analyse.is-relay:not(.has-relay-tour) {
       'board        .     controls'
       'under        under under'
       'relay-admin  .     .';
+
     .analyse__underboard {
       margin-top: unset;
+
       .is3d & {
         margin-top: calc(var(---cg-height) * 2 / 100);
       }
     }
+
     .eval-chart-and-training {
       flex-wrap: nowrap;
     }
+
     .analyse__controls {
       height: $player-height;
+
       .jumps {
         padding-bottom: 0;
       }
     }
   }
+
   @include mq-at-least-col3 {
     grid-template-rows: var(---cg-height) $player-height;
     grid-template-areas:
       'side           . board gauge tools'
       'side           . board .     controls'
       'side           . under under under';
+
     .mchat,
     .chat__members {
       display: flex;
     }
+
     .mchat:has(.liveboard.mchat__tab-active) {
       max-height: 380px;
       min-height: 380px; // constrain height set by vertical-resize
     }
   }
+
   .eval-chart-and-training {
     @extend %flex-center;
+
     gap: $analyse-block-gap;
+
     .study__server-eval {
       flex: 1 1 100%;
     }
+
     .analyse__round-training {
       flex: 1 0 200px;
     }
   }
+
   &.relay-in-variation {
     .main-board cg-board {
       filter: saturate(0.7) brightness(0.9);

ui/analyse/css/study/relay/_player-tip.scss

@@ -1,10 +1,10 @@
 #tour-player-tip {
   @extend %box-radius-force, %popup-shadow;
+
   visibility: hidden;
   background: $c-bg-box;
   position: absolute;
   z-index: $z-powertip-120;
-
   border: 1px solid $c-brag;
   min-width: 370px;
 }
@@ -13,35 +13,46 @@
   a {
     color: $c-font;
   }
+
   &__player {
     @extend %flex-center-nowrap;
+
     align-items: stretch;
     background: $c-bg-popup;
     gap: 1em;
+
     .fide-players__photo {
       width: 150px;
       height: fit-content;
     }
+
     &__info {
       @extend %flex-column;
+
       justify-content: space-between;
       font-size: 1.1em;
       margin: 1em 0.5em 1em 0;
     }
+
     &__name {
       @extend %flex-center-nowrap, %ellipsis;
+
       font-size: 1.2em;
+
       &:hover {
         color: $c-primary;
       }
     }
+
     &__team {
       &:hover {
         color: $c-primary;
       }
     }
+
     &__details {
       @extend %flex-column;
+
       gap: 0.5em;
 
       > div {
@@ -49,40 +60,50 @@
 
         .diff {
           @extend %flex-center;
+
           gap: 0.5em;
         }
+
         .diffs {
           @extend %flex-column;
         }
       }
     }
   }
+
   &__preload {
     margin: 1em auto;
   }
+
   &__games {
     margin-bottom: 0.3em;
     max-height: 40vh;
     overflow-y: auto;
+
     &__status {
       font-weight: bold;
     }
+
     table {
       width: 100%;
     }
+
     td {
       padding: 0.4rem;
       border-top: $border;
     }
+
     tr:first-child td {
       border-top: none;
     }
+
     td:first-child {
       padding-inline-start: 1.5rem;
       text-align: end;
       color: $c-font-dimmer;
       font-weight: bold;
     }
+
     td:last-child {
       padding-inline-end: 1.5rem;
     }

ui/analyse/css/study/relay/_result-box.scss

@@ -1,6 +1,7 @@
 %result-box {
   .result {
     @extend %box-radius;
+
     flex: 0 0 auto;
     padding: 0.1em 0.6em;
     background: $c-font-dimmer;
@@ -8,9 +9,11 @@
     color: $c-over;
     font-weight: bold;
   }
+
   good.result {
     background: $c-good;
   }
+
   bad.result {
     background: $c-bad;
   }

ui/analyse/css/study/relay/_rounds.scss

@@ -7,6 +7,7 @@ $span-width: 1.7em;
 
   .link {
     @extend %break-word;
+
     flex: 1 1 100%;
     color: $c-font;
     margin-inline-start: 1em;
@@ -20,6 +21,7 @@ $span-width: 1.7em;
 
   finished {
     @extend %flex-center-center;
+
     align-self: center;
     font-size: 0.7em;
     color: $c-good;

ui/analyse/css/study/relay/_teams.scss

@@ -1,4 +1,5 @@
 @import './result-box';
+
 .relay-tour {
   &__team-table {
     &.loading {
@@ -9,61 +10,82 @@
       padding: 2em;
     }
   }
+
   &__team-match {
     border-top: $border;
+
     &__teams,
     &__game {
       @extend %flex-center-nowrap;
+
       > * {
         flex: 0 1 43%;
+
         &:nth-child(2) {
           flex: 1 0 14%;
         }
       }
     }
+
     &__teams {
       @extend %metal;
+
       border-bottom: $border;
       padding: 0.5em 1em;
+
       > * {
         text-align: center;
       }
     }
+
     &__team {
       a {
         color: $c-font;
+
         &:hover {
           color: $c-primary;
         }
       }
+
       padding: 0.5em 1em;
+
       &__points {
         @extend %flex-around;
+
         flex-flow: row nowrap;
+
         @extend %result-box;
+
         points {
           font-weight: bold;
         }
+
         vs {
           font-style: italic;
         }
       }
     }
+
     &__game {
       @extend %roboto;
+
+      color: $c-font;
+      border: 1px solid transparent;
+
       &:nth-child(even) {
         background: $c-bg-zebra;
       }
-      color: $c-font;
-      border: 1px solid transparent;
+
       &:hover {
         background: $m-primary_bg--mix-12;
         border-color: $m-primary_bg--mix-50;
         color: $c-font-clearer;
+
         .mini-game__flag {
           opacity: 1;
         }
       }
+
       &__status {
         padding: 0.4em 1em;
         text-align: center;
@@ -72,10 +94,13 @@
         font-weight: bold;
         white-space: nowrap;
       }
+
       &__player {
         @extend %flex-between-nowrap;
+
         padding: 0.4em 2em;
         container-type: inline-size;
+
         .name {
           @extend %nowrap-ellipsis;
         }
@@ -93,11 +118,14 @@
 .eval-gauge-horiz {
   $white: #c0c0c0;
   $black: #444;
+
   @include if-light {
     $white: #fff;
     $black: #606060;
   }
+
   @extend %box-neat-force;
+
   display: block;
   position: relative;
   height: 1em;
@@ -113,12 +141,15 @@
 
   opacity: 0.7;
   background: linear-gradient(to left, $white, $black);
+
   &--set {
     opacity: 1;
     background: $white !important;
+
     .eval-gauge-horiz__black {
       display: block;
     }
+
     tick {
       position: absolute;
       height: 100%;
@@ -128,8 +159,10 @@
       width: 50%;
     }
   }
+
   &.pov-white {
     background: linear-gradient(to right, $white, $black);
+
     .eval-gauge-horiz__black {
       right: 0;
     }

ui/analyse/css/study/relay/_tour.scss

@@ -6,37 +6,50 @@ $hover-bg: $m-primary_bg--mix-30;
 
 .relay-tour {
   @extend %box-neat-force, %flex-column;
+
   gap: 3vh;
   background: $c-bg-box;
+
   &__side {
     @extend %flex-column;
+
     overflow: hidden;
+
     &__preload {
       @extend %box-neat;
+
       flex: 1;
       background: $c-bg-box;
     }
+
     &__header {
       @extend %flex-center-nowrap, %box-radius-top;
       @include prevent-select;
+
       position: relative;
       overflow: hidden;
       align-items: stretch;
       flex: 0 0 $player-height;
+
       button {
         @extend %flex-center-nowrap, %metal;
+
         outline: none;
+
         &:hover {
           background: $hover-bg;
         }
+
         &:hover::before {
           color: $c-font-clear;
           text-shadow: none;
         }
       }
     }
+
     &__empty {
       @extend %box-neat;
+
       align-items: center;
       justify-content: center;
       background: $c-bg-box;
@@ -44,51 +57,65 @@ $hover-bg: $m-primary_bg--mix-30;
       padding: 1.5rem 1em 2rem 1em;
       display: none;
       flex-flow: column;
+
       &::before {
         font-size: 6em;
         color: $c-font-dimmer;
       }
+
       strong {
         @extend %break-word;
+
         font-size: 1.2em;
         color: $c-font-dim;
       }
+
       @include mq-at-least-col2 {
         display: flex;
       }
     }
+
     &__name {
       @extend %nowrap-ellipsis;
+
       flex: 1;
       padding: 1em;
       gap: 0.7em;
       font-weight: bold;
+
       &:hover {
         background: $hover-bg !important;
       }
+
       &::before {
         @extend %data-icon;
+
         content: $licon-LessThan;
         font-size: 1.5em;
         color: $c-font-dim;
       }
+
       main.has-relay-tour &::before {
         content: $licon-RadioTower;
       }
+
       main.has-relay-tour & {
         background: $c-bg-zebra;
       }
     }
+
     &__search {
       border-left: $border !important;
       padding: 0 1.2rem;
     }
+
     .chat__members {
       flex: 0 0 auto;
       height: unset;
       line-height: 1.3em;
       min-height: 1.3em;
     }
+
     .streamer-show {
       display: none;
       position: relative;
@@ -118,9 +145,11 @@ $hover-bg: $m-primary_bg--mix-30;
 
       &::after {
         transform: translate(-80%, 80%);
+
         @include if-rtl {
           transform: translate(80%, 80%);
         }
+
         background-color: $c-brag;
       }
     }
@@ -132,6 +161,7 @@ $hover-bg: $m-primary_bg--mix-30;
 
     .streamer-menu {
       @extend %flex-column, %dropdown-shadow, %box-radius-bottom;
+
       position: absolute;
       max-height: 12em;
       overflow-y: auto;
@@ -143,16 +173,20 @@ $hover-bg: $m-primary_bg--mix-30;
 
     .streamer {
       @extend %flex-center-nowrap;
+
       padding: 0.7em 1em;
       font-size: 1.1em;
       color: $c-font;
+
       i {
         margin-inline-start: auto;
         color: $c-font-dimmer;
       }
+
       &::before {
         font-size: 1.3em;
       }
+
       &:hover {
         background: $m-primary_bg--mix-30;
         color: $c-font-clearer;
@@ -162,14 +196,18 @@ $hover-bg: $m-primary_bg--mix-30;
 
   &__round {
     @extend %box-padding-horiz, %flex-between-nowrap;
+
     padding-top: 1em;
     padding-bottom: 1em;
     margin: -1em 0;
     background: $m-primary_bg--mix-10;
+
     strong {
       @extend %roboto;
+
       font-size: 1.2em;
     }
+
     &.ongoing {
       background: $m-accent_bg--mix-10;
       color: $c-accent;
@@ -184,19 +222,26 @@ $hover-bg: $m-primary_bg--mix-30;
     &__image {
       display: none;
       flex: 0 0 38%;
+
       &.video {
         flex: 0 0 50%;
       }
+
       line-height: 0;
+
       > img {
         width: 100%;
+
         @include broken-img(2 / 1);
       }
+
       .video-player-close {
         display: none;
       }
+
       text-align: center;
     }
+
     &__image-upload {
       margin: 3em auto;
       line-height: 2em;
@@ -212,30 +257,37 @@ $hover-bg: $m-primary_bg--mix-30;
       @extend %break-word;
       @include line-clamp(2);
       @include fluid-size('font-size', 14px, 31px);
+
       color: $c-brag;
     }
 
     &__content {
       @extend %flex-column, %tour-margin-horiz;
+
       flex: 1;
       min-width: 0; // somehow this prevents overflow when mselect is large
       gap: 1em;
+
       @include mq-at-least-col3 {
         gap: calc(var(---box-padding) / 3);
       }
+
       margin-top: 1em;
       margin-bottom: 1em;
     }
 
     &__selectors {
       @extend %flex-center;
+
       gap: 1em;
       position: relative;
     }
 
     .setting {
       @extend %flex-center-nowrap;
+
       margin-inline-end: -1em;
+
       label {
         padding: 0 0.5em;
         cursor: pointer;
@@ -247,70 +299,90 @@ $hover-bg: $m-primary_bg--mix-30;
   &__mselect {
     position: unset;
     flex: auto;
+
     @include fluid-size('font-size', 12px, 19px);
+
     white-space: wrap;
+
     &.mselect__active {
       overflow: visible;
     }
+
     .fullscreen-mask {
       display: block;
     }
+
     .mselect__item {
       opacity: unset;
     }
+
     .mselect__list {
       transform: unset;
+
       a {
         gap: 1em;
       }
     }
   }
+
   &__tour-select {
     .mselect__item {
       @extend %flex-between;
     }
+
     .tour-state {
       &.finished::before {
         color: $c-good;
         font-size: 0.8em;
       }
+
       &.ongoing::before {
         color: $c-bad;
         font-size: 0.7em;
       }
     }
+
     a:hover .tour-state::before {
       color: $c-over;
     }
   }
+
   &__round-select {
     &__name {
       @extend %ellipsis;
+
       flex: 3 1 100%;
     }
+
     &__status {
       font-size: 1rem;
       margin-inline-end: 1ch;
       white-space: nowrap;
     }
+
     &__label {
       .round-state {
         @extend %flex-center-nowrap;
+
         gap: 1ch;
       }
     }
+
     .ongoing::before {
       color: $c-bad;
     }
+
     .finished::before {
       color: $c-good;
     }
+
     .mselect__list {
       left: unset;
       right: 0;
       overflow-x: auto;
       overflow-y: auto;
       max-height: 50vh;
+
       @media (max-width: at-most($medium)) {
         position: fixed;
         top: 10vh;
@@ -319,35 +391,44 @@ $hover-bg: $m-primary_bg--mix-30;
         min-width: unset;
       }
     }
+
     a {
       display: flex;
       padding: 0 1em 0 0;
       align-items: center;
       border-left: 3px solid transparent;
+
       &.current-round {
         background: $c-bg-zebra;
         border-left-color: $c-primary;
       }
+
       &:hover {
         background: $c-primary;
+
         *,
         .round-state::before {
           color: $c-over;
         }
       }
     }
+
     .name {
       @include ellipsis;
+
       padding: 0.3em 0 0.3em 1em;
       width: 100%;
     }
+
     .time,
     .status {
       @extend %roboto;
+
       font-size: 0.9rem;
       color: $c-font-dim;
       margin-left: auto;
     }
+
     .status {
       &:empty {
         display: none;
@@ -357,39 +438,52 @@ $hover-bg: $m-primary_bg--mix-30;
 
   &__note {
     @extend %box-neat, %flex-center-nowrap, %tour-margin-horiz;
+
     gap: 1.5vw;
     background: $c-bg-zebra;
     padding: 1em 2vw;
     white-space: pre-line;
+
     &::before {
       @extend %data-icon;
+
       content: $licon-InfoCircle;
       font-size: 2.5em;
     }
+
     &.pinned::before {
       content: $licon-RadioTower;
     }
+
     small {
       color: $c-font-dim;
     }
   }
+
   &__nav {
     @extend %flex-between, %tour-margin-horiz;
+
     gap: 1em;
+
     @include prevent-select;
   }
 
   &__tabs {
     @extend %flex-center;
+
     gap: 1em;
+
     button {
       @extend %box-radius;
+
       cursor: pointer;
       padding: 0.6em 1.5em;
       border: $border;
+
       &:hover {
         @extend %box-shadow;
       }
+
       &.active {
         border: 1px solid $c-brag;
       }
@@ -398,13 +492,17 @@ $hover-bg: $m-primary_bg--mix-30;
 
   &__info {
     @extend %box-neat, %flex-between, %tour-margin-horiz;
+
     gap: 1ch;
     background: $c-bg-zebra;
     padding: 1em 2vw;
+
     > div {
       @extend %flex-center-nowrap;
+
       gap: 1ch;
     }
+
     img {
       height: 1.7em;
       aspect-ratio: 1;
@@ -415,19 +513,26 @@ $hover-bg: $m-primary_bg--mix-30;
     @extend %tour-margin-horiz;
     @include rendered-markdown(2em, 50vh);
   }
+
   &__source {
     @extend %tour-margin-horiz;
+
     font-style: italic;
+
     @media (max-width: at-most($x-large)) {
       display: none;
     }
+
     &:last-child {
       margin-bottom: 3em;
     }
   }
+
   &__share {
     @extend %tour-margin-horiz;
+
     padding: 3em 2vw 0 2vw;
+
     &.toggle-box--toggle-off {
       padding: 0 2vw;
     }
@@ -436,9 +541,11 @@ $hover-bg: $m-primary_bg--mix-30;
   &__players {
     overflow: auto;
   }
+
   &__players__table {
     thead {
       background: none;
+
       th {
         white-space: nowrap;
         border: none;
@@ -456,6 +563,7 @@ $hover-bg: $m-primary_bg--mix-30;
 
         a {
           @extend %flex-center-nowrap;
+
           color: $c-font;
 
           &:hover {
@@ -469,6 +577,7 @@ $hover-bg: $m-primary_bg--mix-30;
         }
       }
     }
+
     td {
       &.rank,
       &.score {
@@ -480,6 +589,7 @@ $hover-bg: $m-primary_bg--mix-30;
         text-align: end;
       }
     }
+
     .rp,
     .rp--same {
       margin-inline-start: 1ch;
@@ -497,53 +607,68 @@ $hover-bg: $m-primary_bg--mix-30;
   &__teams__standings {
     a {
       color: $c-font;
+
       &:hover {
         color: $c-primary;
       }
     }
   }
+
   .fide-player {
     &__photo {
       @extend %box-neat;
+
       aspect-ratio: 1;
       max-width: 300px;
     }
+
     &__header {
       @extend %tour-margin-horiz;
     }
+
     &__cards {
       @extend %tour-margin-horiz;
+
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 1em;
+
       @media (min-width: at-least($medium)) {
         grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
         font-size: 1.1em;
       }
     }
+
     &__card {
       @extend %box-neat, %flex-column;
+
       font-family: monospace;
       align-items: center;
       gap: 0.5em;
       background: $c-bg-zebra;
       padding: 1em 1em;
+
       &.active span {
         color: $c-brag;
         font-weight: bold;
       }
+
       em {
         @extend %roboto, %flex-center;
+
         text-transform: uppercase;
         gap: 0.5ch;
         color: $c-font-dim;
       }
+
       .performance,
       .diff {
         @extend %flex-center;
+
         gap: 0.5ch;
       }
     }
+
     .mini-game__flag {
       width: 1em;
       height: 1em;
@@ -558,52 +683,67 @@ $hover-bg: $m-primary_bg--mix-30;
 
   &__team-summary {
     @extend %flex-column;
+
     gap: 3vh;
+
     &__header,
     &__matches__header {
       @extend %tour-margin-horiz;
     }
+
     &__roster {
       overflow: auto;
     }
+
     &__header {
       &__stats {
         @extend %tour-margin-horiz;
+
         tr {
           font-size: 1.1em;
+
           th {
             width: 1%;
             white-space: nowrap;
           }
+
           th + td {
             padding-left: 3em;
           }
         }
+
         border-collapse: separate;
         border-spacing: 0 0.5em;
+
         td {
           padding-left: 1em;
         }
       }
     }
+
     .score {
       font-weight: bold;
     }
+
     &__table {
       th:first-child,
       td.game-link {
         width: 1%;
         white-space: nowrap;
         padding-right: 2em;
+
         a.game-link {
           @extend %game-link-styles;
         }
       }
+
       .team-name {
         font-size: 1.1em;
       }
+
       a {
         color: $c-font;
+
         &:hover {
           color: $c-primary;
         }
@@ -613,10 +753,12 @@ $hover-bg: $m-primary_bg--mix-30;
 
   %game-link-styles {
     @extend %flex-center-nowrap, %box-radius;
+
     @media (min-width: at-least($medium)) {
       padding: 0.4em 0.5em;
       font-size: 1.6em;
     }
+
     &:hover {
       background: $m-primary_bg--mix-20;
       color: $c-font-clearer;
@@ -641,10 +783,12 @@ $hover-bg: $m-primary_bg--mix-30;
       }
     }
   }
+
   @media (max-width: at-most($medium)) {
     .player-intro__photo {
       display: none;
     }
+
     .player-intro__name {
       @include ellipsis;
     }
@@ -653,38 +797,48 @@ $hover-bg: $m-primary_bg--mix-30;
 
 .relay-games {
   @extend %flex-column, %box-radius-bottom, %box-shadow;
+
   background: $c-bg-box;
   flex: 1 1 auto;
   overflow-y: auto;
   font-size: 0.9em;
   position: relative;
 }
+
 .relay-game {
   @extend %flex-center-nowrap;
+
   align-items: stretch;
   gap: 0.5em;
   padding: 0.5em 0.7em 0.5em 0.2em;
   height: 50px;
   border-bottom: $border;
   border-left: 3px solid transparent;
+
   &:hover {
     background: $m-primary_bg--mix-12;
     color: $c-font-clearer;
+
     .mini-game__flag {
       opacity: 1;
     }
+
     border-left-color: $c-primary;
   }
+
   &--current {
     background: $m-primary_bg--mix-20;
     border-left-color: $c-primary;
   }
+
   &__players {
     @extend %flex-column;
+
     gap: 0.15em;
     flex: 1;
     overflow: hidden;
   }
+
   &::before {
     content: attr(data-n);
     font-size: 0.9em;
@@ -694,26 +848,34 @@ $hover-bg: $m-primary_bg--mix-30;
     text-align: end;
     color: $c-font-dimmer;
   }
+
   &--current::before,
   &:hover::before {
     color: $c-primary;
   }
+
   &__player {
     @extend %flex-between-nowrap;
+
     color: $c-font;
+
     good,
     bad {
       font-weight: bold;
     }
+
     .mini-game__user .name {
       @extend %nowrap-ellipsis;
     }
+
     .mini-game__flag {
       width: 1.1em;
     }
   }
+
   .mini-game__gauge {
     order: 0;
+
     tick {
       top: 1.5px;
       border-bottom-width: 3px;
@@ -723,15 +885,20 @@ $hover-bg: $m-primary_bg--mix-30;
 
 .relay-tour__stats {
   @extend %flex-column;
+
   gap: 1em;
+
   .spinner {
     margin: 10em auto;
   }
+
   &__unique {
     @extend %tour-margin-horiz;
+
     background: $c-bg-zebra;
     padding: 1em 2vw;
   }
+
   canvas {
     min-height: 50vh;
     margin: 0 2em 0 1em;

ui/analyse/css/study/relay/_video-player.scss

@@ -23,6 +23,7 @@
   border-radius: 50%;
   background-color: black;
   cursor: pointer;
+
   &:hover {
     filter: brightness(3);
   }
@@ -68,6 +69,7 @@
 
   .text-box {
     @extend %flex-column;
+
     position: absolute;
     pointer-events: none;
     justify-content: center;
@@ -95,6 +97,7 @@
     .play-button {
       opacity: 1;
     }
+
     .image {
       filter: blur(4px) brightness(0.6);
     }

ui/bits/css/_appeal.scss

@@ -94,6 +94,7 @@
 
   &__rules {
     @extend %box-radius;
+
     margin-top: 3em;
     padding: 2em 3em;
     background: $c-bg-zebra;
@@ -109,6 +110,7 @@
     95% {
       opacity: 0;
     }
+
     100% {
       opacity: 1;
     }
@@ -117,6 +119,7 @@
   #help-engine-deny form {
     opacity: 0;
   }
+
   #help-engine-deny:target form {
     animation: 20s reveal forwards !important; // play even with "prefers-reduced-motion: reduce"
   }

ui/bits/css/_auth.scss

@@ -5,6 +5,7 @@
 .checklist {
   font-size: 1.5em;
   font-weight: 700;
+
   li {
     list-style: disc inside;
   }
@@ -25,6 +26,7 @@
 
   .alternative {
     @extend %flex-between;
+
     margin-top: 2rem;
     font-size: 0.9em;
     line-height: 2em;
@@ -39,6 +41,7 @@
     .login-remember {
       @extend %flex-center-nowrap;
       @include prevent-select;
+
       margin-top: 1em;
       gap: 1ch;
       cursor: pointer;
@@ -46,6 +49,7 @@
 
     &__blanked {
       @extend %box-radius;
+
       margin-bottom: 2em;
       padding: 1em 2em;
       background: $c-bg-zebra;

ui/bits/css/_blind.scss

@@ -1,5 +1,6 @@
 body.blind-mode {
   @include topnav-unsticky;
+
   .is::before,
   .is::after,
   [data-icon]::before {

ui/bits/css/_clas.scss

@@ -6,6 +6,7 @@ $c-clas-light: mix($c-clas, #fff, 86%);
 body {
   --bg-clas: linear-gradient(to right bottom, hsl(276, 29%, 49%), hsl(276, 65%, 32%), hsl(286, 37%, 21%));
   --bg-clas-title: linear-gradient(to right, hsl(252, 97%, 80%), hsl(276, 97%, 79%), hsl(234, 81%, 78%));
+
   @include if-light {
     --bg-clas: linear-gradient(to right bottom, hsl(276, 29%, 52%), hsl(276, 65%, 38%), hsl(286, 37%, 30%));
     --bg-clas-title: linear-gradient(to right, hsl(252, 97%, 86%), hsl(276, 97%, 84%), hsl(234, 81%, 83%));
@@ -48,6 +49,7 @@ body {
 
   &.student {
     @extend %roboto;
+
     padding: 0.4rem 2vw 0.4rem 2rem;
     line-height: 1.2em;
   }
@@ -55,6 +57,7 @@ body {
 
 h1 {
   @extend %base-font;
+
   background-image: var(--bg-clas-title);
   background-clip: text;
   color: transparent;
@@ -64,6 +67,7 @@ h1 {
 .clas-index {
   .box__top {
     background: var(--bg-clas);
+
     & a {
       color: $c-bg-clas-over;
     }
@@ -73,9 +77,11 @@ h1 {
 
   .button.new {
     opacity: 0.8;
+
     &:hover {
       color: $c-over;
     }
+
     &::before {
       font-size: 3em;
     }
@@ -88,19 +94,19 @@ h1 {
 
     .clas-widget {
       @extend %flex-center-nowrap, %break-word;
+      @include transition;
 
       border-bottom: $border;
       padding: 2em var(---box-padding);
       position: relative;
 
-      @include transition;
-
       &::before {
+        @include transition;
+
         color: $m-clas_bg--mix-80;
         font-size: 5em;
         margin-inline-end: 0.4em;
 
-        @include transition;
         @media (max-width: at-most($xx-small)) {
           display: none;
         }
@@ -172,6 +178,7 @@ h1 {
 
   &__body {
     @extend %box-padding, %flex-column;
+
     gap: 3em;
   }
 
@@ -183,12 +190,15 @@ h1 {
     &__helps {
       margin-top: -2em;
     }
+
     &__help {
       @extend %box-radius;
+
       display: block;
       background: $c-bg-zebra2;
       margin-bottom: 1em;
       padding: 0.5em 1em;
+
       strong {
         color: $c-font-clear;
         line-height: 2em;
@@ -408,6 +418,7 @@ h1 {
   from {
     background: $m-accent_bg-popup--mix-80;
   }
+
   to {
     background: $m-accent_bg-popup--mix-15;
   }
@@ -417,8 +428,10 @@ h1 {
   &__archive {
     text-align: right;
   }
+
   #clas-team:target {
     @extend %box-neat;
+
     padding: 1em 1em 1em 1.5em;
     border: 1px solid $c-accent;
     animation: target-fade 1.5s forwards;
@@ -427,6 +440,7 @@ h1 {
 
 .button-clas {
   background: $m-clas_bg--mix-75;
+
   &:hover {
     background: $m-clas_bg--mix-90 !important;
   }
@@ -445,6 +459,7 @@ h1 {
 
   &__actions {
     @extend %flex-center-center;
+
     margin-top: 4em;
 
     .button {
@@ -501,10 +516,12 @@ h1 {
 
     &__meta {
       @extend %flex-between;
+
       justify-items: center;
 
       .button-empty {
         color: rgba(255, 255, 255, 0.7);
+
         &:hover {
           background: rgba(255, 255, 255, 0.1) !important;
           color: inherit;
@@ -616,6 +633,7 @@ h1 {
     }
   }
 }
+
 .student-add-many {
   form {
     margin-top: 2em;
@@ -648,9 +666,12 @@ h1 {
 
   &__login {
     @extend %flex-center-center;
+
     form {
       @extend %flex-center;
+
       align-items: stretch;
+
       input {
         @extend %box-radius-inline-start;
 
@@ -660,6 +681,7 @@ h1 {
 
       .button {
         @extend %box-radius-inline-end;
+
         background: $c-clas-light;
         padding: 0 1.5em;
         border-inline-start: 0;
@@ -674,38 +696,49 @@ h1 {
 
 .clas-login {
   @extend %flex-column;
+
   gap: 2em;
+
   &__title {
     @extend %flex-between;
   }
+
   &__expiration {
     @extend %box-radius;
+
     background: $c-bg-zebra;
     font-size: 1.2em;
     padding: 0.3em 1em;
+
     .timeago {
       font-weight: bold;
       color: $c-font-clear;
     }
   }
+
   &__cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 1em;
   }
+
   &__card {
     @extend %box-neat, %flex-column;
+
     padding: 1em;
     background: $c-bg-zebra;
     border: $border;
     font-size: 1.5em;
+
     h3 {
       color: $c-font-clear;
     }
+
     a {
       font-size: 0.7em;
       color: $c-font-dim;
     }
+
     code {
       font-size: 1.8em;
       text-align: center;
@@ -713,6 +746,7 @@ h1 {
       margin-top: 1rem;
       color: $c-font-dim;
     }
+
     i {
       font-size: 0.8em;
       color: $c-bad;

ui/bits/css/_cms.scss

@@ -9,38 +9,48 @@
         $img: false,
         $list: false
       );
+
       h3 {
         font-size: 1.3em;
         color: $c-font-dim;
         border-bottom: $border;
       }
+
       h4 {
         font-size: 1.25em;
       }
     }
   }
+
   #form3-markdown {
     display: none;
   }
+
   &__pages {
     th {
       white-space: nowrap;
       min-width: 9ch;
     }
+
     td {
       @extend %break-word;
+
       &:first-child {
         min-width: 30ch;
       }
+
       &:nth-child(2) {
         font-size: 0.9em;
       }
     }
+
     time {
       white-space: nowrap;
     }
+
     &.searching tbody tr {
       border-bottom: $border;
+
       &:nth-child(even) {
         background: none;
       }

ui/bits/css/_cropDialog.scss

@@ -1,5 +1,6 @@
 .crop-viewer {
   @extend %flex-column;
+
   row-gap: 2em;
 
   .spinner {

ui/bits/css/_dailyFeed.scss

@@ -2,13 +2,16 @@ $marker-margin-top: -14px;
 
 .daily-feed {
   overflow: visible;
+
   &__updates {
     margin: 3em 3em 0 3em;
     border-inline-start: 3px solid $c-contours;
   }
+
   .atom {
     font-size: 2.6em;
     color: $c-font-dimmer;
+
     &:hover {
       color: $c-accent;
     }
@@ -18,6 +21,7 @@ $marker-margin-top: -14px;
     padding-inline-start: 45px;
     margin-bottom: 4em;
     scroll-margin-top: -$marker-margin-top;
+
     @include mq-sticky-header {
       &:target {
         scroll-margin-top: calc(#{$site-header-outer-height} - #{$marker-margin-top});
@@ -43,18 +47,22 @@ $marker-margin-top: -14px;
 
     &__day {
       @extend %flex-center;
+
       h2 {
         display: inline;
         font-size: 1.5em;
       }
+
       a {
         font-weight: bold;
         color: $c-contours;
       }
+
       time {
         font-size: 1em;
         opacity: 1;
       }
+
       margin-bottom: 1rem;
     }
 
@@ -67,11 +75,13 @@ $marker-margin-top: -14px;
         $img: false,
         $list: false
       );
+
       h3 {
         font-size: 1.3em;
         color: $c-font-dim;
         border-bottom: $border;
       }
+
       h4 {
         font-size: 1.25em;
       }

ui/bits/css/_diagnosticDialog.scss

@@ -1,5 +1,6 @@
 .diagnostic {
   @extend %flex-column;
+
   align-items: center;
   padding: 1em 2em 2em;
   row-gap: 1em;
@@ -18,6 +19,7 @@
 
   h2 {
     @extend %base-font;
+
     font-size: 1.3em;
   }
 

ui/bits/css/_email-confirm.scss

@@ -1,5 +1,6 @@
 .email-confirm-banner {
   @extend %flex-center-center;
+
   flex-wrap: nowrap;
   gap: 0.6em;
   padding: 1em;
@@ -12,15 +13,18 @@
   left: 0;
   right: 0;
   z-index: 107;
+
   &.error {
     background: $c-error;
     flex-flow: column;
+
     code {
       font-size: 1rem;
       overflow-wrap: anywhere;
     }
   }
 }
+
 .email-confirm-banner a {
   color: $c-over !important;
   text-decoration: underline;
@@ -55,18 +59,23 @@
     5% {
       transform: translateY(0);
     }
+
     10% {
       opacity: 1;
     }
+
     20% {
       opacity: 0.4;
     }
+
     50% {
       opacity: 1;
     }
+
     70% {
       opacity: 0.4;
     }
+
     100% {
       opacity: 1;
       transform: translateY(0);
@@ -131,8 +140,10 @@
 
 .signup-confirm {
   text-align: center;
+
   form {
     margin: 6em 0 4em 0;
+
     .button-fat {
       border: 10px solid $m-primary_bg--mix-30;
     }

ui/bits/css/_linkPopup.scss

@@ -5,19 +5,23 @@
 
   &__content {
     @extend %flex-center-nowrap, %box-radius-top;
+
     background: $c-bg-zebra;
     padding: 2em;
 
     &::before {
       @extend %data-icon;
+
       content: $licon-InfoCircle;
       font-size: 5em;
       opacity: 0.5;
       margin-inline: 0 2rem;
     }
+
     &__title {
       text-align: start;
     }
+
     &__advice {
       font-size: 1.1em;
       color: $c-brag;
@@ -28,6 +32,7 @@
 
   &__actions {
     @extend %flex-center-center;
+
     padding: 2em;
     gap: 2em;
   }

ui/bits/css/_lpv.embed.scss

@@ -2,10 +2,12 @@ body {
   margin: 0;
   background: $lpv-bg;
 }
+
 .lpv {
   border-radius: 0;
   box-shadow: none;
 }
+
 .not-found {
   @extend %flex-center-center;
 

ui/bits/css/_markdown-textarea.scss

@@ -2,9 +2,11 @@
   overflow: visible; // don't clip textarea focus ring
 
   $c-bg-preview: $c-bg-input;
+
   @include if-transp {
     $c-bg-preview: $c-bg-opaque;
   }
+
   .comment-header {
     position: relative;
     display: flex;
@@ -18,6 +20,7 @@
       border-top-left-radius: 0;
     }
   }
+
   .header-tab {
     all: unset;
     font-family: Roboto, sans-serif;
@@ -33,6 +36,7 @@
     color: $c-font-dimmer;
     cursor: pointer;
   }
+
   .header-tab.active {
     position: relative;
     background: $c-bg-preview;
@@ -45,6 +49,7 @@
       background-color: $c-bg-input;
     }
   }
+
   .header-tab.active::after {
     position: absolute;
     content: ''; // hide a bit of textarea focus ring
@@ -54,9 +59,11 @@
     height: 4px;
     background-color: $c-bg-preview;
   }
+
   .header-tab.active.write::after {
     background-color: $c-bg-input;
   }
+
   &:has(textarea:focus) .write.active {
     outline: $outline;
     outline-offset: -2px;
@@ -66,6 +73,7 @@
       right: 1px;
     }
   }
+
   .upload-image {
     all: unset;
     margin: 0 16px;
@@ -75,6 +83,7 @@
     cursor: pointer;
     mask: url('../images/buttons/add-photo-outline-material.svg') 0 0 / contain no-repeat;
   }
+
   .upload-image.disabled {
     background-color: $c-border;
     cursor: default;
@@ -84,6 +93,7 @@
     overflow: visible; // don't clip textarea focus ring
     position: relative;
   }
+
   .comment-preview {
     position: absolute;
     inset: 1px;
@@ -93,22 +103,27 @@
     border-radius: 6px 6px 24px 6px;
     background: $c-bg-preview;
   }
+
   .comment-preview img {
     max-width: 100%;
     margin: 0 auto;
     height: auto;
   }
+
   &:has(.uploading) {
     .comment-preview {
       background: $m-bg--alpha-50;
     }
+
     button {
       pointer-events: none;
     }
+
     .spinner {
       margin: 24px 0 0;
     }
   }
+
   .comment-preview .uploading {
     width: 100%;
     height: 100%;
@@ -125,6 +140,7 @@
     border-color: $m-border--fade-60;
     color: $c-font;
   }
+
   .markdown-textarea .upload-image:hover:not(.disabled) {
     background-color: $c-primary;
   }

ui/bits/css/_markdown-toastui.scss

@@ -3,43 +3,56 @@
 
 .markdown-toastui {
   height: 60vh;
+
   .tab-item {
     background: $c-bg-box;
+
     &.active {
       @extend %metal;
     }
   }
+
   .toastui-editor {
     &-defaultUI {
       @extend %base-font;
+
       border: none;
+
       &-toolbar {
         @extend %metal;
+
         border-radius: $box-radius-size $box-radius-size 0 0 !important;
         border: $border;
         flex-flow: row wrap;
       }
     }
+
     &-toolbar {
       height: auto;
+
       &-icons {
         border-color: $c-border;
+
         &:not(:disabled) {
           background-color: $c-bg-zebra;
+
           &:hover {
             background-color: $c-bg-box;
           }
         }
       }
     }
+
     &-toolbar-group button {
       margin: 6px 3px;
     }
+
     &-dropdown {
       &-toolbar {
         display: flex;
         flex-flow: column;
         border: 0;
+
         .toastui-editor {
           &-toolbar {
             &-group {
@@ -51,23 +64,30 @@
         }
       }
     }
+
     &-md-tab-container {
       display: none;
     }
+
     &-tabs {
       @extend %flex-center;
+
       align-content: flex-end;
       margin: 0 1ch 0 0;
+
       .tab-item {
         height: 2em;
         line-height: 2em;
         margin: 0 0 -1px 0;
+
         /* preview is not accurate to what lichess shows */
         display: none;
       }
     }
+
     &-popup {
       @extend %box-radius;
+
       border: $border;
       background-color: $c-bg-page;
       margin-left: 0;
@@ -80,46 +100,58 @@
         text-align: center;
       }
     }
+
     &-ok-button {
       background-color: $c-primary !important;
     }
+
     &-ww-container,
     &-md-container {
       @extend %box-radius-bottom;
+
       border: $border;
       border-top: 0;
     }
+
     &.ww-mode,
     &.md-mode,
     &-md-preview {
       @extend %base-font;
+
       font-size: 1rem;
       background: $c-bg-input;
       color: $c-font;
     }
+
     &-contents {
       font-size: 1rem;
+
       & p,
       & h2,
       & h3,
       & h4 {
         color: $c-font;
       }
+
       & h2 {
         border-color: $c-brag;
       }
+
       & h3 {
         border: none;
       }
     }
+
     .ProseMirror {
       font-size: 1rem;
       padding: 0.8em 1.2em;
     }
+
     &-mode-switch {
       background: none;
       border: none;
     }
+
     &-popup-body {
       li[data-type='Heading'] {
         &[data-level='1'],
@@ -128,6 +160,7 @@
           display: none;
         }
       }
+
       input {
         width: 100%;
         border: $border;
@@ -136,8 +169,10 @@
     }
   }
 }
+
 .toastui-editor-popup-add-image {
   padding-top: 20px;
+
   &::before {
     padding-inline: 20px;
     content: 'Drag an edge to resize your image.';

ui/bits/css/_mobile.scss

@@ -1,12 +1,14 @@
 .mobile {
   .sides {
     @extend %flex-wrap;
+
     justify-content: space-around;
   }
 
   .left-side {
     .stores {
       @extend %flex-center-center;
+
       gap: 1em;
     }
 
@@ -38,7 +40,6 @@
   .right-side {
     flex: 0 0 33%;
     text-align: center;
-
     margin-left: 2em;
 
     @media (max-width: at-most($x-small)) {

ui/bits/css/_oauth.scss

@@ -9,14 +9,17 @@
   ul {
     margin: 25px;
   }
+
   li {
     list-style: disc outside;
   }
 
   strong {
     @extend %break-word;
+
     color: $c-brag;
   }
+
   code {
     overflow-wrap: anywhere;
   }
@@ -33,6 +36,7 @@
 
   h1 {
     @extend %break-word;
+
     margin: 1rem 0 1.5rem 0;
   }
 
@@ -40,14 +44,18 @@
     li {
       margin: 0.7em 0;
     }
+
     .danger {
       @extend %box-neat;
+
       font-weight: bold;
       color: $c-over;
       background: $c-bad;
       padding: 0.3em 0.8em;
+
       &::before {
         @extend %data-icon;
+
         font-size: 1.5em;
         margin-inline: 0 0.2em;
         content: $licon-CautionTriangle;
@@ -78,12 +86,15 @@
   #main-wrap {
     margin-top: 0;
   }
+
   .oauth__top {
     margin-bottom: 3vh;
   }
+
   .oauth {
     padding-block: 3vh;
   }
+
   p {
     overflow-wrap: break-word;
     word-break: normal;

ui/bits/css/_relation.scss

@@ -7,9 +7,11 @@ table td {
     &:nth-child(1) {
       width: 30%;
     }
+
     &:nth-child(2) {
       width: 15%;
     }
+
     &:nth-child(3) {
       width: 20%;
     }

ui/bits/css/_search.scss

@@ -39,11 +39,13 @@
 
     .two-columns {
       @extend %flex-wrap;
+
       gap: 1em;
 
       > * {
-        flex: 1 150px;
         @extend %flex-between-nowrap;
+
+        flex: 1 150px;
         gap: 2ch;
       }
     }
@@ -106,6 +108,7 @@
 
     .toggle-columns {
       @extend %flex-wrap;
+
       margin: 0.5rem 0;
 
       > * {

ui/bits/css/_titleRequest.scss

@@ -7,11 +7,12 @@
 
 .title-image-edit {
   @extend %flex-column, %box-neat;
+
   padding: 2em;
   gap: 2em;
   background: $c-bg-zebra;
-
   margin-bottom: 2em;
+
   h2 {
     align-self: flex-start;
     width: auto;
@@ -21,25 +22,31 @@
 
 .title__status {
   @extend %box-neat;
+
   padding: 0.3em 0.7em;
   background: $c-accent;
   color: white;
   font-size: 0.9rem;
   font-weight: bold;
   text-transform: uppercase;
+
   &--building {
     background: $c-bg-zebra;
     color: $c-font;
   }
+
   &--approved {
     background: $c-good;
   }
+
   &--rejected {
     background: $c-bad;
   }
+
   &--feedback {
     background: $c-primary;
   }
+
   &--imported {
     background: $c-fancy;
   }
@@ -47,6 +54,7 @@
 
 .title__status-full {
   @extend %flex-center-nowrap, %box-neat;
+
   margin-bottom: 2em;
   padding: 2em 2em;
   background: $c-bg-zebra;
@@ -56,6 +64,7 @@
     margin-inline: 0 2rem;
     height: 60px;
   }
+
   h2 {
     margin-bottom: 1rem;
   }
@@ -64,6 +73,7 @@
 .title-mod .mod-zone {
   margin: 0;
 }
+
 .title-mod > .mz-section {
   max-height: 250px;
 }
@@ -73,6 +83,7 @@
 .title-mod__data,
 .title-mod__actions {
   margin-top: 4em;
+
   h2 {
     line-height: 3;
   }
@@ -80,6 +91,7 @@
 
 .title-mod__actions {
   @extend %box-neat;
+
   background: $c-bg-zebra;
   padding: 2em;
 }
@@ -90,6 +102,7 @@
   margin: auto;
   cursor: pointer;
 }
+
 .title-image--fallback {
   padding: 3rem;
   text-align: center;

ui/bits/css/_video.scss

@@ -24,12 +24,10 @@
 
   .card {
     @extend %box-radius, %button-shadow;
+    @include transition;
 
     position: relative;
     overflow: hidden;
-
-    @include transition;
-
     color: $c-font;
 
     &:hover {
@@ -131,6 +129,7 @@
 
     .meta {
       @extend %box-padding-horiz;
+
       padding-bottom: 10px;
 
       .target__wrapper {

ui/bits/css/build/bits.cms.scss

@@ -6,5 +6,4 @@
 @import '../../../lib/css/form/form3';
 @import '../../../lib/css/component/flash-absolute';
 @import '../markdown-toastui';
-
 @import '../cms';

ui/bits/css/build/bits.dailyFeed.scss

@@ -3,5 +3,4 @@
 @import '../../../lib/css/component/slist';
 @import '../../../lib/css/form/form3';
 @import '../../../lib/css/vendor/flatpickr';
-
 @import '../dailyFeed';

ui/bits/css/build/bits.dialog.scss

@@ -1,3 +1,2 @@
 @import '../../../lib/css/plugin';
-
 @import '../../../lib/css/component/dialog';

ui/bits/css/build/bits.lpv.embed.scss

@@ -1,7 +1,5 @@
 @import '../../../lib/css/abstract/all';
 @import '../../../lib/css/base/typography';
-
 @import '../../../lib/css/theme/board/chessground';
-
 @import 'bits.lpv';
 @import '../lpv.embed';

ui/bits/css/build/bits.lpv.scss

@@ -6,12 +6,16 @@
 .lpv--gamebook {
   position: relative;
 }
+
 .lpv__gamebook {
   @extend %popup-shadow;
+
   z-index: $z-cg__board_overlay-100;
   position: absolute;
   top: 50%;
+
   @include inline-start(50%);
+
   transform: translate(-50%, -50%);
   display: block;
   padding: 1.5em 3em;
@@ -19,6 +23,7 @@
   font-size: 1.5em;
   white-space: normal;
 }
+
 .lpv__pgn__text {
   font-family: monospace;
   font-size: 0.8em;

ui/bits/css/build/bits.not-found-embed.scss

@@ -1,5 +1,4 @@
 @import '../../../lib/css/embed';
 @import '../../../lib/css/base/util';
 @import '../../../lib/css/component/box';
-
 @import '../not-found';

ui/bits/css/build/bits.slist.scss

@@ -5,9 +5,11 @@
   width: 24px;
   text-align: center;
 }
+
 .slist td {
   vertical-align: middle;
 }
+
 .slist td .lb__trophy {
   display: inline-block;
   vertical-align: middle;
@@ -16,6 +18,7 @@
   overflow: visible;
   line-height: 0;
 }
+
 .slist .lb__trophy img {
   display: inline-block;
   height: 16px;
@@ -24,10 +27,12 @@
   transform: scale(1.6) translateY(-2px);
   transform-origin: left center;
 }
+
 .slist td .lb__rank-num {
   display: inline-block;
   vertical-align: middle;
 }
+
 .pager__label {
   margin-right: 6px;
 }
@@ -37,10 +42,13 @@
     td:first-child {
       white-space: nowrap;
     }
+
     td:nth-child(2) {
       padding-right: 0;
+
       a.user-link {
         @include ellipsis;
+
         display: inline-block;
         max-width: min(26ch, 50vw);
         white-space: nowrap;

ui/bits/css/build/bits.team.scss

@@ -5,5 +5,4 @@
 @import '../../../lib/css/form/form3';
 @import '../../../lib/css/form/captcha';
 @import '../../../lib/css/chat/chat';
-
 @import '../team/team';

ui/bits/css/coach/_editor.scss

@@ -8,10 +8,12 @@
   .top {
     > span {
       @extend %flex-between;
+
       padding: 1em;
 
       > h1 {
         @extend %roboto;
+
         margin: 0;
         padding: 0 1em !important;
         font-size: 2rem;
@@ -25,6 +27,7 @@
       }
     }
   }
+
   .overview {
     width: 100%;
     display: flex;
@@ -103,7 +106,9 @@
 
   .status {
     opacity: 0;
+
     @include transition;
+
     text-align: center;
     color: $c-good;
   }

ui/bits/css/coach/_show.scss

@@ -69,6 +69,7 @@
   &__studies,
   &__posts {
     margin-top: 2em;
+
     .coach-show__title {
       padding: 1em var(---box-padding);
     }

ui/bits/css/coach/_widget.scss

@@ -4,6 +4,7 @@
   padding-bottom: 1rem;
 
   @include transition;
+
   @include mq-at-least-picture {
     height: 300px;
   }
@@ -54,6 +55,7 @@
 
     th {
       @extend %break-nope;
+
       font-size: 0.9em;
       color: $c-font-dim;
       padding-inline-end: 1.2em;

ui/bits/css/forum/_post.scss

@@ -6,6 +6,7 @@
   &__metas {
     > div {
       @extend %flex-center;
+
       flex: 1;
     }
 
@@ -18,6 +19,7 @@
 
     a.author--op {
       @extend %box-radius;
+
       padding: 0.2em;
       padding-inline-end: 0.8em;
       background: $m-primary_bg--mix-12;
@@ -52,6 +54,7 @@
       text-align: center;
       margin-bottom: 2em;
     }
+
     .forum-post__metas {
       justify-content: flex-end;
     }
@@ -61,6 +64,7 @@
     .forum-post__message {
       display: none;
     }
+
     > button {
       margin: 2em;
     }
@@ -95,6 +99,7 @@
 
   &:hover {
     color: $c-primary;
+
     &.delete {
       color: $c-bad;
     }
@@ -121,7 +126,6 @@
 
   margin-top: 1em;
   margin-bottom: 1em;
-
   text-align: start;
 
   .lpv {

ui/bits/css/forum/_topic.scss

@@ -52,6 +52,7 @@
       }
     }
   }
+
   .reply label[for='form3-text'] {
     display: none;
   }

ui/bits/css/plan/_icon-shiny.scss

@@ -8,11 +8,13 @@
   i {
     @extend %data-icon;
   }
+
   i::before {
     content: $licon-Wings !important;
     background-clip: text;
     color: transparent;
   }
+
   @each $id, $color in $patron-colors-dark {
     &--#{$id} {
       i::before {
@@ -20,6 +22,7 @@
       }
     }
   }
+
   @each $id, $color in $patron-colors-light {
     html.light &--#{$id} {
       i::before {

ui/bits/css/plan/_page.scss

@@ -26,6 +26,7 @@
       &.up {
         color: #639b24;
       }
+
       &.down {
         color: #ac524f;
       }
@@ -46,9 +47,11 @@
         width: 5em;
         padding: 3px 5px;
       }
+
       p {
         margin-bottom: 1em;
       }
+
       button,
       a {
         margin-inline-start: 10px;
@@ -101,6 +104,7 @@
 
   .wrapper {
     @extend %flex-between;
+
     align-items: flex-start;
     font-size: 1.3em;
   }
@@ -108,11 +112,13 @@
   .text,
   .content {
     @extend %flex-center;
+
     flex: 1 1 50%;
   }
 
   .text {
     @extend %flex-column;
+
     flex: 1 1 45%;
     margin-inline-end: 1em;
   }
@@ -122,6 +128,7 @@
 
     h3 {
       @extend %roboto;
+
       display: block;
       text-transform: uppercase;
       margin: 0;
@@ -156,6 +163,7 @@
 
     .cover-fees {
       @extend %flex-center-nowrap;
+
       margin-bottom: 1.5em;
       font-size: 0.95em;
 
@@ -163,6 +171,7 @@
         margin-inline-end: 0.5em;
         transform: scale(1.2);
       }
+
       label {
         cursor: pointer;
         color: $c-font-dim;
@@ -173,6 +182,7 @@
     .service {
       .buttons {
         @extend %flex-between;
+
         font-size: 1.1em;
         gap: 1em;
 
@@ -180,13 +190,16 @@
         .paypal {
           height: 55px;
         }
+
         .button {
           flex: 1 1 auto;
           font-weight: normal;
         }
+
         .paypal {
           display: flex;
           overflow: hidden;
+
           iframe {
             color-scheme: normal;
           }
@@ -202,6 +215,7 @@
 
     .gift {
       @extend %flex-center-center;
+
       margin: -1em 0 1em 0;
     }
   }
@@ -215,6 +229,7 @@
 
   .faq {
     @extend %flex-between;
+
     align-items: flex-start;
     margin: 50px 0 40px 0;
     padding: 30px 0;
@@ -228,6 +243,7 @@
     dt {
       font-size: 1.3em;
       margin-bottom: 1em;
+
       &:nth-of-type(2) {
         margin-top: 1.5em;
       }
@@ -236,6 +252,7 @@
     dd {
       margin: 0;
     }
+
     code {
       font-size: 0.9em;
     }
@@ -261,10 +278,12 @@
 
     .list {
       @extend %flex-center;
+
       font-size: 1.1em;
 
       div {
         @extend %ellipsis;
+
         flex: 1 1 25%;
         min-width: 17ch;
       }
@@ -285,6 +304,7 @@
 
     a {
       color: $c-font-page;
+
       &:hover {
         color: $c-link;
       }

ui/bits/css/plan/_style-selector.scss

@@ -3,9 +3,11 @@
 
 .patron-style-selector {
   @extend %flex-column;
+
   gap: 3em;
   border-bottom: $border;
   padding-bottom: 4em;
+
   &.box__pad {
     margin: 5em 0;
   }
@@ -16,8 +18,10 @@
   grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
   gap: 1em;
 }
+
 .pss__color {
   @extend %box-neat, %flex-column;
+
   justify-content: space-between;
   overflow: hidden;
   background: $c-bg-high;
@@ -31,17 +35,23 @@
 
   &--selectable {
     cursor: pointer;
+
     @include transition;
+
     &:hover {
       background: $c-bg-zebra;
     }
   }
+
   &:disabled {
     cursor: not-allowed;
+
     .patron-icon--shiny {
       position: relative;
+
       &::after {
         @extend %data-icon;
+
         content: $licon-Padlock;
         position: absolute;
         opacity: 1;
@@ -52,10 +62,12 @@
       }
     }
   }
+
   &--active {
     border-width: 5px 5px 1px 5px;
     border-radius: 10px 10px 6px 6px;
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+
     .patron-icon--shiny {
       margin-top: calc(0.7rem - 4px);
     }
@@ -63,11 +75,13 @@
 
   &__tier-name {
     @extend %nowrap-hidden, %roboto;
+
     font-size: 0.9em;
     font-weight: bold;
     text-align: center;
     text-transform: uppercase;
     padding: 0.5em;
+
     .pss__color--selectable & {
       color: $c-over;
       text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
@@ -78,12 +92,15 @@
     &--#{$id}.pss__color--selectable {
       border-color: var(--c-paco#{$id});
       box-shadow: 0 0 9px transparentize($color, 0.7);
+
       &:hover {
         box-shadow: 0 0 14px transparentize($color, 0.3);
       }
+
       &.pss__color--active {
         box-shadow: 0 0 23px $color;
       }
+
       .pss__color__tier-name {
         width: 100%;
         background-color: var(--c-paco#{$id});

ui/bits/css/relay/_announcement.scss

@@ -1,5 +1,6 @@
 .relay__announcement {
   @extend %box-neat;
+
   border: 1px solid $c-brag;
   background-color: $c-bg-zebra;
   padding: 1em 3em;

ui/bits/css/relay/_calendar.scss

@@ -11,18 +11,22 @@
       }
     }
   }
+
   @media (min-width: at-least($xx-small)) {
     .relay-card {
       grid-column: span 1;
       grid-row: span 2;
+
       &--tier-3 {
         grid-row: span 1;
       }
+
       &--tier-5 {
         display: flex;
         flex-flow: column;
         grid-column: span 2;
         grid-row: span 4;
+
         .relay-card__body {
           display: flex;
           flex-flow: column;

ui/bits/css/relay/_card.scss

@@ -6,10 +6,12 @@
 
   &--tier-best {
     grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+
     @media (max-width: at-most($xx-small)) {
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     }
   }
+
   &--tier-high {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   }
@@ -17,7 +19,6 @@
 
 .relay-card {
   @extend %box-neat-force;
-
   @include transition(box-shadow);
 
   background: $c-bg-zebra;
@@ -34,6 +35,7 @@
 
   &--live {
     outline: 3px solid $m-bad--alpha-50;
+
     &:hover {
       box-shadow:
         0 0 5px $c-live,
@@ -45,10 +47,13 @@
     width: 100%;
     height: auto;
     opacity: 0.7;
+
     .relay-card--live & {
       opacity: 0.9;
     }
+
     @include transition(opacity);
+
     .relay-card:hover & {
       opacity: 1;
     }
@@ -60,46 +65,59 @@
 
   &__body {
     @extend %flex-column;
+
     padding: 0.6em 0 0.6em 1em;
   }
 
   &__info {
     @extend %flex-center-nowrap;
+
     margin-right: 1rem;
     color: $c-font-dim;
     gap: 1ch;
   }
+
   &__live {
     @extend %flex-between;
+
     flex: 1;
     color: $c-live;
     font-weight: bold;
   }
+
   &__finished {
     color: $c-good;
     font-weight: bold;
   }
+
   &__title {
     @include line-clamp(2);
+
     margin: 0.2em 0.3rem 0.3em 0;
     font-weight: normal;
     color: $c-font-clearer;
     font-size: 1.3em;
+
     .relay-cards--tier-best & {
       font-size: 1.4em;
     }
   }
+
   &__players {
     @extend %roboto, %flex-center;
+
     color: $c-font-dim;
     overflow: hidden;
     height: 1.2em;
+
     span:not(:first-child)::before {
       content: ', ';
     }
   }
+
   &__errors {
     @extend %break-word, %nowrap-ellipsis;
+
     font-family: monospace;
     color: $c-bad;
   }

ui/bits/css/relay/_form.scss

@@ -1,19 +1,24 @@
 .relay-form {
   &__actions {
     @extend %flex-between;
+
     margin: 2em 0;
     border-top: $border;
     padding-top: 3em;
+
     form {
       flex: 0 0 50%;
+
       .button {
         @extend %flex-column;
+
         text-align: left;
         width: 100%;
 
         strong {
           display: block;
         }
+
         em {
           color: $c-font-dim;
           text-transform: none;
@@ -22,6 +27,7 @@
       }
     }
   }
+
   &__image {
     padding: 4vh var(---box-padding) 0;
     background: $c-bg-zebra;
@@ -81,23 +87,30 @@
     font-weight: bold;
     color: $c-font-dimmer;
   }
+
   .relay-form__subnav__tour-parent {
     @include box-radius;
+
     background: $c-bg-box;
     margin-bottom: 5px;
   }
+
   .subnav {
     width: 30ch;
+
     a {
       white-space: wrap;
     }
+
     .subnav__subitem {
       margin-left: 1em;
     }
+
     .subnav__subitem2 {
       margin-left: 2em;
       letter-spacing: 0;
     }
+
     .button {
       margin-inline-end: 1em;
     }

ui/bits/css/relay/_group.scss

@@ -9,26 +9,33 @@
         color: $c-font-clear;
       }
     }
+
     &__info {
       @extend %flex-between;
+
       align-self: stretch;
     }
+
     &__live {
       flex: 0 0 auto;
     }
   }
+
   @media (min-width: at-least($xx-small)) {
     .relay-card {
       grid-column: span 1;
       grid-row: span 2;
+
       &--tier-3 {
         grid-row: span 1;
       }
+
       &--tier-5 {
         display: flex;
         flex-flow: column;
         grid-column: span 2;
         grid-row: span 4;
+
         .relay-card__body {
           display: flex;
           flex-flow: column;

ui/bits/css/relay/_image.scss

@@ -1,6 +1,7 @@
 .relay-image {
   &--fallback {
     @extend %flex-center-center;
+
     width: 100%;
     aspect-ratio: 2 / 1;
     background: linear-gradient(to bottom, $m-primary--alpha-70, $m-brag--alpha-70);

ui/bits/css/relay/_relay.scss

@@ -11,20 +11,25 @@
     margin: 2em 0 1em 0;
   }
 }
+
 .relay-index__admin {
   h2 {
     margin: 0 0 1em 0;
     color: $c-bad;
   }
+
   padding-bottom: 1em;
   border-bottom: $border;
   margin-bottom: 2em;
 }
+
 .relay-index__calendar {
   text-align: center;
+
   .button {
     padding: 1.5em 4em;
     white-space: normal;
+
     strong {
       font-size: 1.5em;
       display: block;

ui/bits/css/streamer/_form.scss

@@ -11,16 +11,19 @@
     flex-direction: column;
     padding: 2em 2em 0;
     row-gap: 2em;
+
     @include mq-at-least-picture {
       flex-direction: row;
     }
 
     .picture-edit {
       @extend %flex-column;
+
       row-gap: 2em;
 
       > span {
         @extend %flex-center-center;
+
         column-gap: 1em;
       }
     }
@@ -31,6 +34,7 @@
       height: min(350px, calc(100vw - 4em));
     }
   }
+
   .twitch-link-box,
   .youtube-link-box {
     display: flex;
@@ -38,13 +42,16 @@
     align-items: center;
     justify-content: start;
     gap: 1em;
+
     &.linked button.link {
       display: none;
     }
+
     &:not(.linked) button.unlink {
       display: none;
     }
   }
+
   .status {
     @extend %box-radius;
 

ui/bits/css/streamer/_header.scss

@@ -70,6 +70,7 @@
 
   span {
     @extend %roboto;
+
     position: absolute;
     transform: rotate(45deg);
     display: block;
@@ -88,6 +89,7 @@
 
 .live-ribbon {
   @extend %streamer-ribbon;
+
   top: -10px;
   right: -10px;
 
@@ -116,6 +118,7 @@
     bottom: 0;
     right: 0;
   }
+
   span {
     top: 35px;
     left: -20px;
@@ -124,6 +127,7 @@
 
 .streamer-title {
   @extend %flex-between;
+
   gap: 1em;
   margin: 1.5em var(---box-padding) 1em 0;
 }
@@ -142,6 +146,7 @@
 
 .streamer-footer {
   @extend %flex-wrap;
+
   align-items: center;
   gap: 3em;
 }