add custom counter, start styling the form

Author: possumbilities

src/index.html

@@ -331,6 +331,8 @@ <h2>Recommended Choice</h2>
 
             <article class="tool">
 
+                <p>Please complete the form, to get a choice!</p>
+
                 <!-- <header>
                     <h3>CC-BY 4.0</h3>
                     <span class="license-icons">
@@ -407,7 +409,7 @@ <h3>Mark Your Work</h3>
 
             </details>
 
-            <details class="medium" open>
+            <details class="medium">
             <summary>Print Work or Media</summary>
 
                 <p>Copy the text below and paste it on the title and/or copyright page of your print work or presentation, or in the credits of your media.</p>

src/style.css

@@ -133,6 +133,43 @@ ol li:has(.disable) {
     color: lightgray;
 }
 
+form#chooser > ol {
+    position: relative;
+
+    list-style: none;
+    counter-reset: chooser-counter;
+}
+
+form#chooser > ol li {
+counter-increment: chooser-counter;
+}
+form#chooser > ol li::before {
+position: absolute;
+--size: 32px;
+left: calc(-1 * var(--size) - 25px);
+min-height: 2em;
+min-width: 2em;
+padding-top: .4em;
+box-sizing: border-box;
+
+content: counter(chooser-counter);
+font-weight: bold;
+border-radius: 200px;
+background: var(--vocabulary-neutral-color-lighter-gray);
+color: black;
+text-align: center;
+vertical-align: middle;
+
+}
+
+form#chooser legend {
+    font-weight: bold;
+}
+
+form#chooser fieldset {
+    margin-bottom: 1em;
+}
+
 #tool-recommendation {
     margin-bottom: 4em;
 
@@ -149,6 +186,10 @@ ol li:has(.disable) {
     --underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
 }
 
+#tool-recommendation h2 {
+    /* font-size: 1.8em; */
+}
+
 #tool-recommendation h3 {
     margin: 0;