More util classes, fix up tile internal spacing

index.html

@@ -134,7 +134,7 @@
     <template id="pkmn-template">
       <div class="pkmn-tile | flex col no-gap">
         <div class="ellipsis emphasis" bind-to="name"></div>
-        <div class="pkmn-info | flex even">
+        <div class="pkmn-info | highlight-border flex even">
           <div class="flex col small-gap">
             <img bind-to="image" />
             <div class="center" bind-to="score"></div>
@@ -157,6 +157,7 @@
         <div class="color-inputs | flex small-gap">
           <input
             id="colorInputText"
+            class="pill-shape highlight-border"
             name="colorText"
             type="text"
             pattern="#?[0-9a-fA-F]*"

styles.css

@@ -102,6 +102,10 @@ body {
   --gap: 1.5rem;
 }
 
+.small-flow-space {
+  --flow-space: 0.5rem;
+}
+
 .section {
   padding-block-start: var(--flow-space, 1rem);
   padding-inline: var(--flow-space-inline, 1ch);
@@ -137,19 +141,12 @@ body {
   margin-block-end: 0.5rem;
 }
 
-button {
+.pill-shape {
   border-radius: 100vmax;
-  padding-block: 0.25rem;
-  border: 1px solid var(--highlight);
-  transition: background-color 100ms;
-}
-
-button.color-select {
-  background-color: var(--button-bg);
 }
 
-button.color-select:hover {
-  background-color: var(--button-bg-hover);
+.highlight-border {
+  border: 1px solid var(--highlight);
 }
 
 /* Block */
@@ -172,15 +169,28 @@ hr {
   color: var(--highlight);
 }
 
+button {
+  border-radius: 100vmax;
+  padding-block: 0.25rem;
+  border: 1px solid var(--highlight);
+  transition: background-color 100ms;
+}
+
+button.color-select {
+  background-color: var(--button-bg);
+}
+
+button.color-select:hover {
+  background-color: var(--button-bg-hover);
+}
+
 #prevColors button {
   width: 100%;
   margin-block-end: 0.5ch;
 }
 
 #targetSelect input[type="text"] {
-  border-radius: 100vmax;
   text-align: center;
-  border: 1px solid var(--highlight);
   min-width: 0px;
 }
 
@@ -225,7 +235,6 @@ hr {
   /* no block-start padding here, this makes the 
      images look like they go right up to the border */
   padding: 0 0.5ch var(--tile-block-padding);
-  border: 1px solid var(--highlight);
   border-radius: var(--tile-border-radius);
   box-shadow: 4px 4px 2px var(--shadow);
   margin-block-start: 0.25rem;
@@ -238,6 +247,7 @@ hr {
   /* but here we put the block-start padding back to
      fix the vertical centering of the cluster buttons */
   margin-block-start: var(--tile-block-padding);
+  margin-inline-start: 0.5ch;
   padding-inline: 0.25ch;
   border-radius: var(--tile-border-radius);
   background-color: var(--shadow);