@scope (display-field-ui) {
  :where(:scope) {
    /* ── Tokens ── (label chrome mirrors field-ui so a display value reads
       as a sibling of an editable field) */
    --display-field-gap:            var(--a-space-1);
    --display-field-icon-gap:       var(--a-space-2);
    --display-field-label-color:    var(--md-sys-color-neutral-on-surface);
    --display-field-label-size:     var(--a-ui-sm);
    --display-field-label-weight:   var(--a-weight-medium);
    --display-field-value-color:    var(--md-sys-color-neutral-on-surface);
    --display-field-value-size:     var(--a-ui-md);
    --display-field-value-weight:   var(--a-weight-regular);
    --display-field-hint-color:     var(--a-fg-muted);
    --display-field-hint-size:      var(--a-ui-sm);
    --display-field-masked-font:    var(--a-font-family-code);
    --display-field-masked-tracking: 0.06em;
  }

  /* ── Base — single grid, rows placed by [slot] named areas. No DOM
       reparenting; the value area accepts the auto [slot="value"] element
       (from the `value` attr) AND any unnamed foreign child (a slotted
       iframe mount). ── */
  :scope {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "value"
      "hint";
    row-gap: var(--display-field-gap);
    min-width: 0;
  }

  /* With a leading icon → two columns; the icon spans the value row only,
     label + hint stay full-width. The column is gated on a present icon so
     no empty track leaks a column-gap when there's no icon. */
  :scope:has(> [slot="icon"]) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "label label"
      "icon  value"
      "hint  hint";
    column-gap: var(--display-field-icon-gap);
  }

  /* ── Slot styling ── */
  :scope > [slot="label"] {
    grid-area: label;
    color: var(--display-field-label-color);
    font-size: var(--display-field-label-size);
    font-weight: var(--display-field-label-weight);
    line-height: 1.3;
    min-width: 0;
  }

  :scope > [slot="icon"] {
    grid-area: icon;
    align-self: center;
    color: var(--a-fg-muted);
  }

  /* The value area: the auto attr element + any foreign unnamed child. */
  :scope > [slot="value"],
  :scope > :not([slot]) {
    grid-area: value;
    color: var(--display-field-value-color);
    font-size: var(--display-field-value-size);
    font-weight: var(--display-field-value-weight);
    line-height: 1.3;
    min-width: 0;
  }

  :scope > [slot="hint"] {
    grid-area: hint;
    color: var(--display-field-hint-color);
    font-size: var(--display-field-hint-size);
    line-height: 1.3;
    min-width: 0;
  }

  /* ── Variant: masked — code/mono family + tabular numerals + tracking so
       bullet-and-digit masked strings ("•••• 4242") align cleanly. Cosmetic
       only; no layout change. ── */
  :scope[variant="masked"] > [slot="value"],
  :scope[variant="masked"] > :not([slot]) {
    font-family: var(--display-field-masked-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--display-field-masked-tracking);
  }
}
