Draw the "+ Axis" slot with a hairline
Gloss' dashed tag sets only a border style over `border: none`, so the
border fell back to a 3px medium width. It is now a 1px dashed border
with the padding taken in to match a tag's height, and it shows the
input's focus itself instead of a ring drawn inside it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RTqTY5gmGmtR4d3kBWGZTX
change
commit fe9e041f09d873da4ca757c2836ead067c4b7945
author Claude <noreply@anthropic.com>
date
parent 217205e2
diff --git a/public/css/app.css b/public/css/app.css
index f7be1aa..d1cde6e 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -113,13 +113,28 @@ textarea {
   color: var(--gl-color-text-tertiary);
 }
 
-/* The "+ Axis" slot is a dashed tag holding a bare input. */
+/* The "+ Axis" slot is a dashed tag holding a bare input. Gloss' dashed
+   tag only sets a border style on top of `border: none`, which falls
+   back to a 3px medium width; this gives it a hairline instead, with
+   the padding taken in by that pixel so it stands as tall as a tag. */
+.tag[data-dashed] {
+  padding: calc(0.25rem - 1px) calc(0.625rem - 1px);
+  border: 1px dashed var(--gl-color-border-default);
+  transition: border-color var(--gl-dur-fast) var(--gl-ease);
+}
+
+/* The slot takes the focus Input would show, so the input inside it
+   draws none of its own. */
+.tag[data-dashed]:focus-within { border-color: var(--gl-color-accent); }
+
 .tag[data-dashed] input:not([type="checkbox"]):not([type="radio"]) {
   width: 8ch;
   padding: 0;
   border: none;
   background: transparent;
+  box-shadow: none;
   font: inherit;
+  line-height: 1;
 }
 
 /* -------------------- */