frontend(styles): extract shared form styles into the SCSS library

frontend/src/library/forms.scss

@@ -38,6 +38,10 @@ input[type='text'] {
   &:focus {
     box-shadow: 0 1px $text-color;
   }
+
+  &:focus-visible {
+    box-shadow: 0 2px $text-color;
+  }
 }
 
 button {
@@ -56,6 +60,19 @@ button {
   border-bottom: solid $height #5d576b55;
   position: relative;
 
+  // Mobile: grow buttons to a ~42px tap target, but pin the label to the bottom
+  // so the bottom-border underline keeps hugging it (as on desktop). A bare
+  // min-height vertically centres the text and strands the underline well below
+  // it. Using flex (not a hit-area pseudo-element) means buttons that `all: unset`
+  // their styling — .tickbox, .swatch, .edit-tower — reset these props and opt out
+  // automatically, instead of inheriting a stray absolute overlay.
+  @media (max-width: $mobile-width) {
+    min-height: 42px;
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+
   &:disabled {
     color: #5d576b55;
     border-bottom: solid $height #5d576b33;

frontend/src/library/main.scss

@@ -34,12 +34,31 @@
 
 @mixin exit {
   @include square(16px);
-  background: url('/assets/x-sign.svg') no-repeat center center;
-  background-size: 50% 50%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent url('/assets/x-sign.svg') no-repeat center center / 50% 50%;
+  border: 0 !important;
+  border-bottom: 0 !important;
+  box-shadow: none;
   box-sizing: content-box;
+  color: transparent;
+  display: block;
+  flex: 0 0 auto;
+  font-size: 0;
+  line-height: 0;
+  margin: 0;
+  min-height: 0;
+  overflow: hidden;
   padding: 8px;
+  text-decoration: none !important;
 
   @include jump();
+
+  &:before,
+  &:after {
+    content: none !important;
+    display: none;
+  }
 }
 
 img {

frontend/src/library/utils.scss

@@ -6,4 +6,22 @@
       margin-bottom: $spacing;
     }
   }
+
+  & > lt-modal {
+    @if $horizontal {
+      margin-right: 0 !important;
+    } @else {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  // Fixed modal hosts should not make the previous content child count as
+  // "not last" for spacing.
+  & > *:not(:last-child):not(lt-modal):not(:has(~ *:not(lt-modal))) {
+    @if $horizontal {
+      margin-right: 0;
+    } @else {
+      margin-bottom: 0;
+    }
+  }
 }