{# The interactive control layer a host mounts over the board's anchor box.

   Ships hidden and unpositioned: variables.js measures the anchor, lays the
   layer over that band, then reveals it. The controls render at native size —
   they are application chrome, so they don't scale with the board. Theme custom
   properties sit on the layer root so every control and its popover inherit
   them. #}
<div class="dft-controls-layer" data-dft-controls="true" hidden
     style="{{ chrome_css_declarations }};
            --dft-font-family: {{ font_family }};
            --dft-label-color: {{ label_color }};
            --dft-label-weight: {{ label_weight }};
            --dft-label-size: {{ label_size }}px;
            --dft-value-color: {{ value_color }};
            --dft-value-family: {{ value_family }};
            --dft-value-size: {{ value_size }}px;
            --dft-value-weight: {{ value_weight }};
            --dft-value-numeric-variant: {{ value_numeric_variant }};
            --dft-placeholder-color: {{ placeholder_color }};
            --dft-popover-rail-bg: {{ popover_rail_background }};">
  <div class="dft-variables"
       style="display: flex; flex-wrap: wrap; align-items: center; gap: {{ gap }}px;
              padding: {{ padding }}px {{ container_padding }}px;
              border-radius: {{ border_radius }}px; font-size: {{ font_size }}px;
              box-sizing: border-box;">
    {{ controls_html }}
  </div>
</div>