Add target StreamField / InlinePanel nesting highlighting effect with :has

client/scss/components/forms/_nested-panel.scss

@@ -19,15 +19,8 @@ $guide-line-bottom-margin: calc($form-field-spacing / 3);
     --nesting-indent: #{$nested-field-indent};
   }
 
-  .w-panel__divider {
-    @include guide-line-horizontal();
-    // Slightly nicer text alignment.
-    margin-top: 1px;
-  }
-
   .w-panel__content {
     @include guide-line-vertical();
-    // @include guide-line-vertical-stop();
     // Center the vertical line.
     margin-inline-start: calc(-1 * var(--nesting-indent));
     padding-inline-start: var(--nesting-indent);
@@ -88,6 +81,12 @@ $guide-line-bottom-margin: calc($form-field-spacing / 3);
     }
   }
 
+  .w-panel__divider {
+    @include guide-line-horizontal();
+    // Slightly nicer text alignment.
+    margin-top: 1px;
+  }
+
   .w-panel__heading--label {
     // Use smaller labels within nested panels in InlinePanel.
     @apply w-label-2;

client/scss/tools/_mixins.guide-line.scss

@@ -4,10 +4,11 @@
  */
 
 $guide-line-default-color: theme('colors.grey.150');
+$stroke-width: 1px;
 
 @mixin guide-line-vertical() {
   // 3px dash height, 3px space, 1px dash width.
-  background-size: 1px 6px;
+  background-size: $stroke-width 6px;
   background-repeat: repeat-y;
   background-image: linear-gradient(
     to bottom,
@@ -16,15 +17,31 @@ $guide-line-default-color: theme('colors.grey.150');
   );
 
   @media (forced-colors: active) {
-    border-inline-start: 1px dashed var(--guide-line-color, CanvasText);
+    border-inline-start: $stroke-width dashed
+      var(--guide-line-color, CanvasText);
     background: none;
   }
 }
 
+@mixin guide-line-vertical-stop() {
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 9px;
+    height: $stroke-width;
+    position: relative;
+    top: theme('spacing.[2.5]');
+    inset-inline-start: calc(-1 * (var(--nesting-indent) - $stroke-width));
+    transform: translateX(calc(var(--w-direction-factor) * -50%));
+    border-bottom: $stroke-width solid
+      var(--guide-line-color, $guide-line-default-color);
+  }
+}
+
 @mixin guide-line-horizontal() {
-  min-height: 1px;
-  // 3px dash width, 3px space, 1px dash height.
-  background-size: 6px 1px;
+  min-height: $stroke-width;
+  // 3px dash width, 3px space, $stroke-width dash height.
+  background-size: 6px $stroke-width;
   background-repeat: repeat-x;
   background-image: linear-gradient(
     to right,
@@ -35,7 +52,7 @@ $guide-line-default-color: theme('colors.grey.150');
   // Guide lines are always shown in forced-colors mode, as it’s
   // not possible to have transparent borders there.
   @media (forced-colors: active) {
-    border-top: 1px dashed var(--guide-line-color, CanvasText);
+    border-top: $stroke-width dashed var(--guide-line-color, CanvasText);
     background: none;
   }
 }
@@ -49,4 +66,15 @@ $guide-line-default-color: theme('colors.grey.150');
       --guide-line-color: Highlight;
     }
   }
+
+  // Avoid highlighting descendant panels.
+  &:is(:hover, :focus-within) .w-panel:not(:hover, :focus-within),
+  // For browsers supporting :has, avoid highlighting parent panels.
+  &:has(.w-panel:is(:hover, :focus-within)) {
+    --guide-line-color: #{$guide-line-default-color};
+
+    @media (forced-colors: active) {
+      --guide-line-color: CanvasText;
+    }
+  }
 }