feat: refine builder skill chip flows

src/app.css

@@ -9505,6 +9505,10 @@ a.secondary:active {
   width: 38px;
   height: 38px;
 }
+.builder-focus-abilities .builder-ability-icon {
+  width: 34px;
+  height: 34px;
+}
 .builder-focus-abilities span {
   min-width: 0;
   display: grid;
@@ -9531,6 +9535,22 @@ a.secondary:active {
   grid-column: 1/-1;
   width: max-content;
 }
+.builder-specialization-identity .focus-composite-icon {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 40px;
+}
+.builder-specialization-identity .focus-composite-icon > .item-icon {
+  width: 36px;
+  height: 36px;
+}
+.builder-specialization-identity .focus-composite-icon > .game-icon {
+  right: -1px;
+  bottom: -1px;
+  width: 17px;
+  height: 17px;
+  padding: 2px;
+}
 @container (max-width: 700px) {
   .builder-editor-columns,
   .builder-specialization-layout {
@@ -12277,11 +12297,11 @@ a.secondary:active {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .builder-specialization-identity.ability-identity {
-  grid-template-columns: 54px minmax(0, 1fr) auto;
+  grid-template-columns: 46px minmax(0, 1fr) auto;
 }
 .builder-specialization-identity.ability-identity > .item-icon {
-  width: 50px;
-  height: 50px;
+  width: 42px;
+  height: 42px;
 }
 .shared-build-guide {
   margin-top: 10px;
@@ -15552,6 +15572,17 @@ a.secondary:active {
   border-left: 2px solid var(--shd-info);
   background: var(--shd-model-surface);
 }
+.specialization-skill-chip-sharing {
+  display: grid;
+  gap: var(--shd-gap-sm);
+  margin-top: var(--shd-gap-md);
+  padding: var(--shd-gap-md);
+  border: 1px solid var(--shd-border);
+  background: var(--shd-surface);
+}
+.specialization-skill-chip-sharing .assignment-picker {
+  margin: 0;
+}
 .specialization-attack-profile > .segmented-choice {
   margin: 0;
 }
@@ -15749,7 +15780,7 @@ a.secondary:active {
   min-width: 0;
   min-height: 54px;
   display: grid;
-  grid-template-columns: 70px minmax(0, 1fr);
+  grid-template-columns: 36px minmax(0, 1fr);
   grid-template-rows: auto auto;
   gap: 1px 8px;
   padding: 7px;
@@ -15763,8 +15794,13 @@ a.secondary:active {
 .builder-ability-chip-panels > section > div > button:focus-visible {
   border-color: var(--shd-orange);
 }
-.builder-ability-chip-panels button small {
+.builder-ability-chip-panels button > .builder-chip-icon {
   grid-row: 1/3;
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+.builder-ability-chip-panels button small {
   color: var(--shd-orange);
   font-size: var(--shd-type-telemetry);
   font-weight: 900;
@@ -15780,6 +15816,28 @@ a.secondary:active {
   color: var(--shd-text-muted);
   font-size: var(--shd-type-telemetry);
 }
+.builder-ability-chip-panels button > span {
+  display: grid;
+  gap: 2px;
+  overflow: hidden;
+  white-space: normal;
+}
+.builder-ability-chip-panels button > span > strong,
+.builder-ability-chip-panels button > span > em {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.builder-ability-chip-panels button em {
+  display: block;
+  color: var(--shd-text-muted);
+  font-size: var(--shd-type-telemetry);
+  font-style: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .builder-specialization-telemetry {
   display: flex;
   flex-wrap: wrap;