Update and format comments

app/assets/stylesheets/application.css

@@ -18,10 +18,14 @@
 /* Strive for simplicity:
  * * style elements/tags only - if possible,
  * * replace element/tag name with class name - if element has to be styled
- * differently depending on context (e.g. form)
+ * differently depending on context (e.g. <form>; <a> as link/button),
+ * * styles with multiple selectors should have all selectors with same
+ * specificity, to allow proper rule specificity vs order management.
  *
- * NOTE: Style in a modular way, similar to how CSS @scope would be used,
+ * NOTE: style in a modular way, similar to how CSS @scope would be used,
- * to make transition easier once @scope is widely available */
+ * to make transition easier once @scope is widely available. */
+/* TODO: review styles with multiple selectors and try to convert them to the same
+ * specificity. */
 :root {
   --color-focus-gray: #f3f3f3;
   --color-border-gray: #dddddd;
@@ -58,7 +62,7 @@
   border-color: var(--color-border-gray) !important;
   color: var(--color-border-gray) !important;
   /* NOTE: cannot set cursor with `pointer-events: none`; can be fixed by setting
-   * cursor on wrapping element.
+   * `cursor` on wrapping element.
   cursor: not-allowed; */
   fill: var(--color-border-gray) !important;
   pointer-events: none !important;
@@ -70,9 +74,9 @@
 
 
 /* Color coding of input controls' background:
- *  blue - target for interaction with pointer
+ *  blue - target for interaction with pointer,
- *  gray - target for interaction with keyboard
+ *  gray - target for interaction with keyboard,
- *  red - destructive, non-undoable action
+ *  red - destructive, non-undoable action.
  */
 button,
 details,
@@ -149,8 +153,8 @@ input[type=checkbox]:checked {
   appearance: checkbox;
   -webkit-appearance: checkbox;
 }
-/* Hide spin buttons in input number fields */
+/* Hide spin buttons of <input type=number>. */
-/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
+/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
 input[type=number] {
   appearance: textfield;
   -moz-appearance: textfield;
@@ -173,9 +177,9 @@ button > svg {
 button > svg:not(:last-child) {
   margin-right: 0.2em;
 }
-/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
+/* TODO: move normal, non-button links (<a>:hover/:focus) styling here (i.e.
- * page-wide, top-level) and remove from table.items - as the style should be
+ * page-wide, top-level) and remove from `table.items` - as the style should be
- * same everywhere */
+ * same everywhere. */
 .button:focus-visible,
 button:focus-visible,
 input[type=submit]:focus-visible {
@@ -184,7 +188,7 @@ input[type=submit]:focus-visible {
 input:focus-visible,
 select:focus-visible,
 select:focus-within,
-/* TODO: how to achieve summary:focus-within for ::details-content? */
+/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
 summary:focus-visible,
 textarea:focus-visible {
   accent-color: var(--color-dark-blue);
@@ -226,8 +230,8 @@ textarea:read-only {
 }
 
 
-/* NOTE: collapse gaps around empty rows (`topside`) once possible
+/* NOTE: collapse gaps around empty rows (`topside`) once possible with
- * with grid-collapse property and remove alternative grid-template
+ * `grid-collapse` property and remove alternative `grid-template-areas`.
  * https://github.com/w3c/csswg-drafts/issues/5813 */
 body {
   display: grid;
@@ -344,8 +348,8 @@ header {
 .flash > div {
   grid-column: 2;
 }
-/* NOTE: currently flash button inherits some unnecessary styles from generic
+/* NOTE: currently flash <button> inherits some unnecessary styles from generic
- * button. */
+ * <button>. */
 .flash > button {
   border: none;
   color: inherit;
@@ -361,7 +365,8 @@ header {
 }
 
 
-/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
+/* TODO: hover over `:invalid` should work like in measurements
+ * (thin vs thick border). */
 .labeled-form {
   align-items: center;
   display: grid;
@@ -378,7 +383,7 @@ header {
 .labeled-form label.required {
   font-weight: bold;
 }
-/* Don't style `label.error + input` if case already covered by input:invalid */
+/* Don't style `label.error + input` if case already covered by `input:invalid`. */
 .labeled-form label.error {
   color: var(--color-red);
 }
@@ -398,14 +403,14 @@ header {
 .labeled-form .auxiliary {
   grid-column: 3;
   /* If more buttons are needed, `grid-row` can be replaced with
-   * `reading-flow: grid-columns` to ensure proper tabindex order */
+   * `reading-flow: grid-columns` to ensure proper [tabindex] order. */
   grid-row: 1;
   height: 100%;
   padding-block: 0;
 }
 
 
-/* TODO: remove .items class (?) and make 'form table' work properly */
+/* TODO: remove `.items` class (?) and make `form table` work properly. */
 table.items {
   border-spacing: 0;
   border: solid 1px var(--color-border-gray);
@@ -431,7 +436,7 @@ table.items th,
 table.items td {
   padding-inline: 1em 0;
 }
-/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
+/* For <a> to fill <td> completely, we use an `::after` pseudoelement. */
 table.items td.link {
   padding: 0;
   position: relative;
@@ -491,8 +496,8 @@ table.items tr.form td {
   vertical-align: top;
 }
 
-/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
+/* TODO: replace `:hover:focus-visible` combos with proper LOVE style order. */
-/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
+/* TODO: update table styling: simplify selectors, deduplicate, remove non-font rem. */
 table.items td.link a:hover,
 table.items td.link a:focus-visible,
 table.items td.link a:hover:focus-visible {
@@ -542,8 +547,8 @@ table.items select,
 table.items textarea {
   padding-block: 0.375em;
 }
-/* TODO: find a way (layers?) to style inputs differently while making sure
+/* TODO: find a way (layers?) to style <input>s differently while making sure
- * hover works properly without using :not(:hover) selectors here. */
+ * hover works properly without using `:not(:hover)` selectors here. */
 table.items .button:not(:hover),
 table.items button:not(:hover),
 table.items input:not(:hover),
@@ -647,7 +652,7 @@ details[open] summary::before {
 summary::marker {
   padding-left: 0.25em;
 }
-/* NOTE: use details[open]::details-content once widely available */
+/* NOTE: use `details[open]::details-content` once widely available. */
 details[open] ul {
   background: white;
   border: solid 1px var(--color-border-gray);
@@ -672,3 +677,10 @@ li input[type=checkbox] {
 li::marker {
   content: '';
 }
+/*
+ * TODO:
+ * * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
+ * * disabled label styling,
+ * * focused label styling (currently only checkbox has focus),
+ * * disabled checkbox blue square focus removal.
+ * */