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

frontend/src/app/styles/_form-shared.scss

@@ -1,106 +0,0 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-
-  label {
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--text-muted);
-    font-family: var(--font-ui);
-  }
-
-  input[type='text'],
-  input[type='email'],
-  textarea {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--border);
-    background: var(--bg);
-    color: var(--text);
-    font-family: var(--font-ui);
-    font-size: 0.95rem;
-    resize: vertical;
-
-    &:focus {
-      outline: 2px solid var(--accent);
-      outline-offset: 1px;
-    }
-  }
-
-  &--checkbox {
-    flex-direction: row;
-    align-items: center;
-
-    label {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      cursor: pointer;
-      color: var(--text);
-    }
-  }
-}
-
-.actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-  padding-top: 0.5rem;
-}
-
-.btn {
-  padding: 0.5rem 1.25rem;
-  border-radius: 0.5rem;
-  border: none;
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-family: var(--font-ui);
-  transition: background 0.15s;
-
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-
-  &--primary {
-    background: var(--accent);
-    color: #fff;
-
-    &:hover:not(:disabled) {
-      background: var(--accent-dark);
-    }
-  }
-
-  &--secondary {
-    background: var(--surface-hover);
-    color: var(--text);
-
-    &:hover:not(:disabled) {
-      background: var(--border);
-    }
-  }
-
-  &--danger {
-    background: transparent;
-    color: #e53e3e;
-    border: 1px solid #e53e3e;
-    margin-right: auto;
-
-    &:hover:not(:disabled) {
-      background: rgba(229, 62, 62, 0.1);
-    }
-  }
-}

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;
+  -webkit-appearance: none;
-  background-size: 50% 50%;
+  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;
+    }
+  }
 }