/* LAB diagnostics: canonical SIGNAL gold, without changing glyphs or geometry. */
#wonderlab-column-grid > svg > rect[stroke] {
  fill: #D4AF37;
  fill-opacity: .06;
  stroke: #C9A227;
  stroke-opacity: .20;
}
#wonderlab-column-grid > svg > text {
  fill: #171813;
  fill-opacity: 1;
}
#wonderlab-column-grid > button { border-color: rgb(201 162 39 / .28); }

/* These children identify containers/relations; typography diagnostics stay separate. */
#wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) {
  --wl-lab-accent: #9E7C12;
  --wl-lab-tint: rgb(212 175 55 / .08);
  color: var(--wl-lab-accent);
}
#wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) .wl-inspect-box {
  border-color: rgb(201 162 39 / .48);
  background: rgb(212 175 55 / .08);
}
#wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) .wl-inspect-box:is([style*="--wl-level:1"], [style*="--wl-level: 1"]) {
  border-color: rgb(201 162 39 / .38);
  background: rgb(212 175 55 / .055);
}
#wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) .wl-inspect-box:is([style*="--wl-level:2"], [style*="--wl-level: 2"]) {
  border-color: rgb(201 162 39 / .28);
  background: rgb(212 175 55 / .03);
}
#wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) :is(.wl-inspect-label, .wl-inspect-number) {
  color: #171813;
}
html:has(#wl-workshop-layer :is(.wl-container-band, .wl-relation-measure)) #wl-workshop-info {
  --wl-lab-accent: #9E7C12;
  border-inline-start-color: #C9A227;
}
html:has(#wl-workshop-layer :is(.wl-container-band, .wl-relation-measure)) #wl-workshop-info .wl-info-body dd {
  color: #171813;
}

/* HTML/build inspector: gold establishes hierarchy; small copy keeps KEM contrast. */
.wls-dialog {
  --wls-active: #9E7C12;
  --wls-line: rgb(201 162 39 / .24);
}

html[data-theme="dark"] #wonderlab-column-grid > svg > rect[stroke] {
  fill-opacity: .08;
  stroke-opacity: .28;
}
html[data-theme="dark"] #wonderlab-column-grid > svg > text { fill: #FCFCF9; }
html[data-theme="dark"] #wonderlab-column-grid > button { border-color: rgb(201 162 39 / .38); }
html[data-theme="dark"] #wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) {
  --wl-lab-accent: #D4AF37;
  --wl-lab-tint: rgb(212 175 55 / .10);
}
html[data-theme="dark"] #wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) :is(.wl-inspect-label, .wl-inspect-number),
html[data-theme="dark"]:has(#wl-workshop-layer :is(.wl-container-band, .wl-relation-measure)) #wl-workshop-info .wl-info-body dd {
  color: #FFE55C;
}
html[data-theme="dark"]:has(#wl-workshop-layer :is(.wl-container-band, .wl-relation-measure)) #wl-workshop-info {
  --wl-lab-accent: #D4AF37;
  border-inline-start-color: #D4AF37;
}
html[data-theme="dark"] .wls-dialog {
  --wls-active: #D4AF37;
  --wls-line: rgb(212 175 55 / .28);
}

@media (forced-colors: active) {
  #wonderlab-column-grid > svg > rect[stroke] {
    forced-color-adjust: none;
    fill: none !important;
    stroke: CanvasText !important;
    stroke-opacity: 1 !important;
  }
  #wonderlab-column-grid > svg > text {
    forced-color-adjust: none;
    fill: CanvasText !important;
    fill-opacity: 1;
  }
  #wonderlab-column-grid > button { border-color: ButtonText !important; }
  #wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) {
    --wl-lab-accent: CanvasText !important;
    --wl-lab-tint: transparent !important;
  }
  #wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) .wl-inspect-box {
    border-color: CanvasText !important;
    background: transparent !important;
  }
  #wl-workshop-layer:has(.wl-container-band, .wl-relation-measure) :is(.wl-inspect-label, .wl-inspect-number),
  html:has(#wl-workshop-layer :is(.wl-container-band, .wl-relation-measure)) #wl-workshop-info .wl-info-body dd {
    color: CanvasText !important;
  }
  html:has(#wl-workshop-layer :is(.wl-container-band, .wl-relation-measure)) #wl-workshop-info {
    --wl-lab-accent: CanvasText !important;
    border-inline-start-color: CanvasText !important;
  }
  .wls-dialog { --wls-active: Highlight !important; --wls-line: CanvasText !important; }
}
